cartoDB 使ってみた

２０１６年５月にあった OSC名古屋 併設のハッカソンイベントで知った、cartoDB が面白そうだったので、試してみました。類似の記事も多くありましたが、自分の備忘録と作業記録を兼ねてメモしておきます。

cartoDBとは

地図上でデータを視覚化するSaaSになるようです（Wikipedia）。でも、単なるクラウドサービスだけでなく、オープンソースでコードを公開していたり、いろいろとできることが豊富そう。使ってみないことには何もわからないので、まずは試してみることにしました。

アカウントの設定

cartoDB のサイトを開いてみると、いろいろと書いてあるのですが、ちょっと地図を作って試すだけでも signup が必要そうです。が、果たして本当にそれでよいのか、クレジットカード番号聞かれたらどうしようか（そんなことなかったです）、小心者なので気になって、この時点で前に進めませんでした。最近はやりの『おためしはこちら』みたいな誘導の仕方はそれなりに効果があるのだなと、今更ながら変なところに感心してしまいました。

で、signupしないと前に進めなさそうなので、あきらめて素直にsignup しました（メールアドレス、アカウント名、パスワードを入力します）。signup時点では、freeプランになっているようなので、一安心です。

お試し

signupした直後の画面（dashboardと呼ばれるようです）で、さて何をすればよいのか？というのがまたわかりませんでした。まあ、結論から言えば、『NEW MAP』 をクリックすると、『Add datasets』という画面が表示されるので、ここから表示したいデータ（位置情報を含むデータ）をアップロードする、という形になります。

※画像はいくつかdataset追加後なので、最初の画面は少し見た目が異なります。

考えてみれば当たり前で何らかの位置情報を持ったデータセットがないと何も表示できないので、最初はデータセットの定義という形になります。

自分でデータを用意できない場合は、『data library』 というタブをクリックするとこちらからもサンプルになるようなデータを選択することができるようです。

今回はcartoDBを紹介していたサイトでも使われていた、総務省統計局にある日本の統計から都道府県別の人口（Excelファイル）を利用しました。

ファイルをアップロードする場合は、『Connect dataset』タブを選択し、『Data file』 を選択してドラッグアンドドロップしたり、URLを入力すると読み込んでくれます。

ファイルをアップロードすると、セルの結合があるExcelファイルにも関わらず読み込んでくれました！

で、『the_geom』というカラムが位置情報を保持しているカラムの様なのですが、この時点では何も入っていません。当然ですね、元のExcelファイルは都道府県名を日本語で書いているだけですので。なんとcartoDBはジオコーディングもできるそうです。都道府県名の入ったカラム上でクリックすると、メニューが表示されます。

ここで、『Georeference』を選択すると、下記の様な位置情報指定用の画面が表示されます。

もし、緯度経度をすでに持っているようなら、直接そのカラム名を指定すればよいようです。今回は、都道府県名ということで『City name』を選択しました。

都道府県名の入ったカラム名を指定して、Country を示すカラムがないので、直接　Japan と入力しました。画面下部の『continue』を押すと、

のような確認画面が出てくるので、ボタン（中央の画像）を押します。とりあえず、完全ではないですが、都道府県名から緯度経度に変換したものが得られました。

とりあえず、これで地図表示ができます。画面上部のMAP VIEWを選択すると、地図上にポイントがプロットされました。

拡大してみていくと、なにやら表示の怪しそうな部分（隠岐の島にポイントがある・・・）もありますが、一応表示できています。

 ※ジオコーディングについては、日本語で都道府県名を与えているのが問題かと思い参考サイトのようにローマ字表記にしたり、返還方法を Admin. Regions としたりしましたが、やはりうまくいかない部分もありました。DATASET上で直接データの編集もできますが、問題があるようなら、事前に別途ジオコーディングをしていたほうがよいかもしれません。

情報の表示

この時点では、緯度経度で示した地点をプロットしているだけなので、さほど面白くありません。せっかくなので、人口に応じた表示にしてみたいと思います。画面右側にあるバーからWizardというボタン（筆のアイコンのボタン）を押すと、下図のような表示になります。

この画面であらかじめ決められたいくつかのフォーマットを選択して表示することが可能なようです。わかりやすそうなもので、人口に応じて円をの大小で表示させたいと思います。

実はまだこの時点では、人口のカラムが文字型なので表示させることができません。

一旦、DATA VIEW に戻ります。人口のカラムのヘッダ行のところにstringとあるので、そこをクリックすると、データ型を選択できるメニューが表示されます。ここで、Numberを選択すると、string型だったデータが数値として扱われるようになります。

次に、MAP VIEW に戻り、Wizardを選択し、Bubbleを選択します。どのカラムのデータを表示させるか選択するのですが、今回の場合は数値型のカラムが一つなので選択済みになっています。デフォルトでもなんとかく、それっぽい図になりました。

公開

freeプランの場合、作成した地図を非公開にすることはできないようです。実はすでにこの時点で地図は公開されています（https://ユーザー名.cartodb.com/ にアクセスするとそのユーザーのMAP、datasetを見ることができます）。

画面上部のPUBLISHボタンを押すと、公開用のURLや埋め込み用のコードを取得することができます。とはいえ、PUBLISHを押さなくても、すでに公開されていますのでご注意ください。
 

その他

いろいろとオプションを触ってみると非常に簡単に地図上での表現を変更することができます。面白いですね。また、あとから知ったのですが、チュートリアルにいろいろな地図の作り方が載っているので、そちらを試すのも面白いと思います。

Twitterのデータを拾ってきて、地図上に表示することも簡単にできました。なお、Twitterからデータを取得するには、ちょっと手間ですが、cartoDBにメールを送ってリクエストを出す必要があります。また、Twitterからのデータ取得を一定間隔で自動で行うなどの場合、別途料金が必要なようです。また、データ取得回数にも制限があるみたいです。詳しくはTwitterのチュートリアルなどをご覧ください。

個人的には、一旦地図を作成すると、API経由でデータのアップデート（DATASETの更新）ができるようなので、これも試したいと思います。

にしても、いろいろと便利なものがでてきますね。

参考サイト

使い方の解説

http://qiita.com/PSS/items/46f94e528cd8ad645dcf

http://waigani.hatenablog.jp/entry/2015/09/23/223636

http://midoriit.com/2016/05/cartodb%e3%81%ae%e6%b4%bb%e7%94%a81.html#more-2337

全般的な説明

http://kaitok.github.io/cartodb/20160329/cartodb_intro/#1

http://www.orenchbase.com/archives/549

チュートリアル

https://docs.cartodb.com/tutorials/connect_twitter_datasource/

ファームウェアアップデート

以前ブレッドボード版の IchigoJam を作ったのですが、伊勢ギークフェア向けに何か作るのに使えないかと考え、手始めにファームウェのアップデートをすることにしました。

その理由なんですが、元々、作ったままのIchigoJamでは画像に結構ノイズが乗って見づらく思っていたら、クリスタルを追加すると映像が改善することがあるとの情報を見つけて、これはいいと思っていたら、クリスタルを追加すると、ファームウェアをクリスタル対応版にする必要があるとのことがわかったためです（ファームウェア1.0.2からは自動検出になるようです）。

で、ファームウェアアップデートをするときは、PCとも接続しないといけないので、それも併せて試しました。

ということで、このあたりの一連の作業を忘れないようにメモしておきます（ハードウェア系の作業なんてホント忘れてしまいそうです）。

IchigoJamをPCに接続する

必要なもの

• USBシリアル変換
• オス－メスのジャンパーケーブル３本

いきなりファームウェアのアップデートも怖いので、まず最初は、IchigoJam をPCに接続してみます。作業は、『イチゴジャムレシピ』にある『パソコンと接続』ページを参考に行いました。

接続するために必要なものとしては

• USBシリアルモジュール
• オス－メスのジャンパーケーブル３本

になります。今回は、安さにつられてamazonに出ていた海外発送の商品を購入しました（買ったときは400円！）。不良品もあるので、２個同時に注文するとかの情報も見かけましたが、そんなこと気にせず１個だけ注文しました。ちなみに、写真にジャンパーケーブルが写っていたので、買わなくていいやと思っていたら、これはメスーメスのタイプなので、ブレッドボードのIchigoJamと接続するのには使えませんでした。あとから、追加注文する羽目になりました。

機材の準備ができれば、早速IchigoJamにつなげてみます。

今回購入したやつは、モジュール上の端子がTXC、RXCとなっており、『イチゴジャムレシピ』にある『パソコンと接続』ページでクロスではなく、ストレートで結線しないといけないと注意されているタイプでした。

早速つなげてみます。USBシリアルモジュール側に指したジャンパーケーブルの色（緑：GND、赤：TXC、青：RXC）に対して、

ブレッドボード側は、赤：TXD、青：RXD、緑：GNDになります。

（クリスタル設置後の写真です。USBシリアルモジュールの接続の様子がわかればと思います）

結線ができたので、PCにターミナルソフトをインストールしておきます。今回は、イチゴジャムレシピのページでも紹介されているIJKBを使いました（facebokグループもあります）。

で、喜び勇んで、USBシリアルモジュールをPCにつないで見ると、モジュール上のランプが点灯してます！おぉ、これで問題ないなと思っていたら、なんかCOMポートがうまく選択できず、もちろん、接続できませんでした。

答えを先にいうと、このチップ用のドライバをインストールする必要があります。 （ドライバのことは、下記のサイトの記事を眼にして知りました。ありがたいことです。）

• IchigoJamとパソコンをUSB接続する
• IchigoJamで作ったプログラムをパソコンに保存する方法：プログラミング第5回

ドライバは、こちらの『CP210x USB - UART ブリッジ VCP ドライバ』の手順に従ってダウンロードとインストールを行ってください。PC側が、Windows7（64bit版）でしたので、それに見合ったものを入れました。

ドライバのインストールが終わってから、USBシリアルモジュールをPCにつないで見て、IJKBを起動すると、COMポートの選択肢が増えている！早速これを選んでつないで見ると、おぉ！繋がった。PC側で、

LED 1

とかコマンドを送ると、ちゃんとLEDが光りました。

ちょっとドライバ周りで手間取りましたが、これで問題なく接続できたようです。

ファームウェアのアップデート

さて、次は本番のファームウェアのアップデートです。IchigoJamの場合、クリスタルの有無で利用するファームウェアが変わるようです。

安全策をとるならば、

1. クリスタルを設置
2. 今のバージョン（0.9.7）のクリスタル対応版へファームウェア書き換え
3. 最新版（1.0.1）へアップデート

とするとか、

1. 最新版（1.0.1）へアップデート
2. クリスタルを設置
3. 最新版のクリスタル対応版へファームウェア書き換え

と、２回書き換えを行うことになると思います。

でも、まあ、なんとなく面倒になってきたのと、『イチゴジャムレシピのファームウェアの更新』ページの下のほうの注意書きに、クリスタル対応版のファームを入れてクリスタルがない場合はLEDが点灯する、という記述を見つけて、多分壊れることは無くあとからクリスタルをつければ動作するのだろうと思ったので、１回で済ますことにしました。

というわけで、作業手順です。まあ、こちらの『IchigoJamのファームを書き換える』を参考にそのまま作業しただけですが・・・

進め方としては、

1. 1.0.1（クリスタル対応版）へアップデート
2. クリスタルを接続
3. 無事に起動

という目論見です。

まず、作業PCにFlashMagicをダウンロードして、インストールしておきます。

次に、IchigoJamのファームウェアを公式サイトからダウンロードして、解凍しておきます。今回使うのは、1.0.1のクリスタル対応版です。

IchigoJamはPCからはずし、電源を切ります。次に、IcigoJamのICのISP端子とGNDを接続します（RESETは接続しなくてよいようです）。

この状態で、IchigoJamの電源をいれると、LEDが点灯した状態になります（こんな感じです）。

ここで、USBシリアルモジュールをPCに接続します。

Flashmagickを起動します。

CPUとして、LPC1114/102を選択します。COMポートとして、IchigoJamのものを選択します（ここではCOM6でした）。Baud Rate は115200を選択します。

その他として、『Erase blocks used by Hex File』と『Verify after programming』にチェックを入れておきます。

Step3のところで、ダウンロードして解凍したIchigoJamのファームウェアを選択します。

Step5のStartボタンを押せば、ファームウェアの書き換えが行われます。問題がなければ、下側のステータスメッセージに、Finishedが表示されます。

ここで、一旦IchigoJamの電源を切り、ISPとGNDを接続していたジャンパーケーブルを抜きます。

再度IchigoJamの電源を入れると、前述のように、LEDがちゃんと光ってます。

ここから、クリスタルの設置になります。

クリスタルは、『イチゴジャムレシピの周辺機器』のページにあるように12MHzのものを用意します。毎度のごとく、amazonで購入しました。１個しか使わないのに、１０個入りでしか売ってないのがつらいですね。でも、たまにしか買わないのなら、amazonの送料無料というのは魅力的なんですよね。

設置は全然難しくなく、CPU上の IchigoJam の端子と @taisukef の端子をつなぐように接続します。ブレッドボードなんで、CPUに対して斜めにして押し込んで完了です。

さて、これで作業完了（のはず）です。 電源を入れると、無事に表示されました！

ちょっと文字がボケてるのは、カメラの腕のせいで、IchigoJamのせいではないので、悪しからず。

ローカルサーバーにsshで接続する

misocaのブログにngrokの紹介が載っていて、あ、面白そうなサービス、と思っていたところ、NATの内側にあるローカルサーバーに外部からSSHで接続する必要が生じたので、早速試してみました。

インストール

インストールはなにも難しくありません。

mor@LaptopDev:~/bin$ wget https://dl.ngrok.com/ngrok_2.0.19_linux_386.zip
mor@LaptopDev:~/bin$ unzip ngrok_2.0.19_linux_386.zip

ダウンロードする際は、32bit版/64bit版がわかれているので、そこだけ注意してください（32bit版は、More Platforms を開くとでてきました）。

早速動かしてみます。

mor@LaptopDev:~/bin$ ./ngrok tcp 22
Tunnel session failed: Non http-protocols are only available after you signup at https://ngrok.com/signup
mor@LaptopDev:~/bin$ 

おっと、SSHの場合は、サインアップが必要だそうです。なので、 https://ngrok.com/ からサインアップします（GitHubアカウントがあったのですぐでした）。

サインアップした時点では、freeプランなので、お金もかかりません。

サインアップ後、ngrokサイトのダッシュボード画面で表示されるauthtokenを指定してやります。

mor@LaptopDev:~/bin$ ./ngrok authtoken xxxxxxxxxxxxxxxxxxx

設定ファイルが、~/.ngrok2/ngrok.yml に作成されます。

これで、

mor@LaptopDev:~/bin$ ./ngrok tcp 22

とすると、見事にポートフォワーディングをしてくれました。

設定ファイルの作成

これでも十分使えるのですが、今回の場合対象のサーバーがリモートにあるので、OS起動後に自動的に ngrok の設定ができていると嬉しいです。

~/.ngrok2/ngrok.yml の内容を追記します。設定ファイルの内容はngrokのDocumentationに詳しく載ってます。

authtoken: xxxxxxxxxxxxxxxxxxxxxxxx
log_level: info
log_format: logfmt
log: /var/log/ngrok.log
tunnels:
  ssh:
    proto: tcp
    addr: xxx

addr でポート番号を指定します。ssh のポート番号を変える場合は、/etc/ssh/sshd_config 側の設定も確認してください。 これを呼び出すには、

mor@LaptopDev:~/bin$ ./ngrok start --config=~/.ngrok2/ngrok.yml ssh

のように呼び出します。コマンドライン上のsshは、設定ファイル中のssh（トンネル名？というのかな）に対応しています。この名前はユーザーが任意につけられるようです。 今回は、簡単に確認するため、cronで起動時に、これを呼び出すようにしてみます。

mor@LaptopDev:/etc/cron.d$ cat ngrok 
# /etc/cron.d/ngrok: crontab entries for ngrok

SHELL=/bin/sh
PATH=/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin

@reboot  root    /opt/ngrok/bin/ngrok start --config=/opt/ngrok/ngrok2/ngrok.yml ssh >> /var/log/ngrok.log 2>&1
mor@LaptopDev:/etc/cron.d$ 

設定ファイル等はrootの持ち物にして、それっぽい場所におきました。設定後、再起動してから、ngrok.comのダッシュボードを見ると

のように接続用のURLが登録されていることがわかります。もし、接続用のURLやポート番号を固定にしたい場合は、有料プランに変更すればよいようです。

ここまで、無料でつかえるなんて、ngrokさんありがたすぎです。