【Javascript】オープンデータ遊びのための下準備。
昨年はR、Shiny、自然言語処理、ニューラルネットワーク辺りを一生懸命やっていました。
2018年はどうしようかな、と考えていたところ、諸事情によりデータの可視化周りをあれこれする必要が出てきました。従来通りShinyでやっても良いのですが、せっかくだから新しいことにチャレンジしたい。ShinyだとどうしてもRが裏で動くことが前提だから、広く使ってもらうにはちょっと不便だな、という不満がなんとなくあって、だったらいっそのことJavascriptをやってみよう、と思い立ったわけです。
また、昨年末、諸事情あってIoTに興味をもち、arduinoをnode.jsから動かす"Johnny-five"なるライブラリがあることを知り、ますますJavascriptに興味をもったのでした。
2018年の前半はJavascriptによるデータビジュアライゼーション(たぶん主にD3.js)を中心に勉強しつつ、後半はnode.jsをつかったarduinoの操作およびセンサデータの取得と可視化をやってみようと思っています。加えて、まだどちらか決めかねているのですが、Amazon Web ServiceなりGoogle Cloud Platformなりのクラウドサービスを使ってあれこれ遊んでみたいとも思っています。
※自然言語処理でやりたいことがあるといえばあるのですが、そのためのテストデータがなかなか集まらなくていったん休止状態です。
やろうと思っていることとそれに必要なもの
まず、どんなことをやろうとしているのか、とそれに必要なものを考えてみます。
やろうとしていること:
- Javascriptによるデータの可視化(主にD3.jsを使う)
- オープンデータのAPIによる取得
大きくはこの二つです。
オープンデータ
使用するオープンデータは今のところe-Statを考えています。
e-Statは日本国内で行われた政府主導の統計調査の結果を電子化したもので、すべてではありませんがAPIでデータを取得することができます。データを可視化する、といっても可視化するためのデータがないと意味がありませんから。APIですから、当然APIキーの取得が前提になります。が、今回は詳細は述べません。
Javascript
2017年にさんざんやったShinyもJavascriptを使っています。が、裏でRを動かす必要があるため、マシンにRがインストールされているか、Shiny Serverを立てる必要が出てきます。それだとアプリケーションの配布が面倒だなぁ、という感触があって、ならいっそのことRに依存しない、Javascript単体での開発はどうだろう?と考えたのがきっかけです。
- 作者: Stephen A. Thomas,古籏一浩,木下哲也
- 出版社/メーカー: オライリージャパン
- 発売日: 2015/10/21
- メディア: 大型本
- この商品を含むブログを見る
これまでほとんどJavascriptは触ったことがなかったので、今年1年かけて新しい言語を覚えるのも面白いだろう、というところももちろんあります。また、すでに書いたようにarduinoをJavascriptから動作させるライブラリがあることを知り、ますますJavascriptに興味を持ったのでした。
環境を整える
Javascriptでオープンデータをいじる、となるといろいろ下準備が必要になってきます。自分がやったのは以下のようなところです。
- Web Server for Chromeを入れる
Javascriptをローカルで実行する際、ブラウザで直接開いても外部ファイル(例えばデータファイルだったり、jsファイル、cssファイルなど)を参照することができません。簡易的なもので構わないのでWebサーバを立ち上げる必要があります。
chrome.google.com
Chromeのこのプラグインが個人的には一番手軽と思っています。
※他にもPythonのhttp-serverを使う、フリーソフトを使う、などの方法があります。
- JSON Formatterを入れる
オープンデータをJavascriptでいじる、となればデータのフォーマットは主にJSONになります。データをいじるにしても、どんなデータが入っているかを確認しなければなりません。が、残念なことにChromeでJSONを開くと生のべたっとしたテキストファイルになってしまい、きわめてみづらい状態になってしまいます。そこで、JSONを整形し文字コードも整えてくれるプラグインが必要になってくるわけです。
chrome.google.com
大変都合のいいことに、こんなプラグインがありました。JSONをきれいな形に整形してくれます。これで、自分が扱おうとしているデータがどんなものか、わざわざダウンロードして整形する必要がなくなりました。
- Sublime Text 3にJavascript用のオートコンプリートを設定する
Javascriptを書くにあたって、これが非常に重要と思っています。いろいろなIDEがあるといえばあるのですが、そこまで高機能なものは必要ない、と思っています。むしろ、軽量で扱いやすいものが良い。ということで選んだのがSublime Text 3でした。
普通のテキストエディタではあるのですが、機能を自由に拡張することができるようです。自分はそれほど詳しくないのですが、プラグインを入れたり、スクリプトを組んだり、あれこれできるそうな。
今回はそのうちのごくごく一部であるJavascript用の設定を紹介します。
Sublime Text 3にJavascriptの自動補完機能をつける
なにはともあれ、まずはSublime Text 3をダウンロード、インストールしてください。
以下、Windows10を前提に話を進めます。なお、参考にしたのは
こちらです。ただし、上記記事ではGitやNode.jsを使っていますが、本記事では「使用しません」。
インストール先を調べる
上記記事にあるように、Tern.jsをインストールする必要があります。そのためにまず、インストールするフォルダを調べる必要があります。すでにSublime Text 3がインストールされてあるかと思いますので、起動し、Preference>Browse Packages...を選択してください。
すると、プラグインをインストールする先のフォルダが開くはずです。開いたフォルダをそのままにしておいてください。
GitHubからTern.jsをダウンロードする
こちらからファイルをダウンロードします。よくわからない方は下の画像を参考に、「Clone or Download」から「Download ZIP」を選択してZIPファイルをダウンロードしてください。
ZIPを解凍し配置する
ダウンロードしたZIPを解凍します。解凍すると「tern_for_sublime-master」というフォルダができるかと思います。そのフォルダをSublime Text 3のPreference>Browse Packages...で開いたフォルダに配置します。
そのまんま、ぼこっと。これでOKです。もし、Sublime Text 3を起動している場合、いったん終了してください。
Tern.jsを有効化し設定する
再度Sublime Text 3を開くとダイアログが開きます(スクショとり忘れ)。新しいプラグインをインストールしますか?的な内容なので、そのままインストールしてください。すると、Sublime Text 3のPreferenceに新しい項目が追加されます。
Preferenceの一番下にPackage Settingsという項目ができているので、Tern>Settings-Userを選択します。すると、Tern.sublime-settingsというファイルが開くので、上記LIGさんの記事に倣って以下のように書き込みます。
{ "tern_argument_hints": true, "tern_output_style": "status", "tern_argument_completion": true, "auto_complete": true, "auto_complete_triggers": [ {"selector": "text.html", "characters": "<"}, {"selector": "source.js", "characters": "."} ] }
LIGさんの記事にあるように、"tern_output_style"は"status"じゃない方が良いらしいので、お好みで設定をいじってみてください。
さいごに
というわけで、Javascriptでオープンデータ遊びを始めるための下準備をご紹介しました。これでとりあえずはJavascriptを書いて実行するところまで、すぐにできるようになるかと思います。さらに突っ込んだ話は次回以降、ということで。