【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単体での開発はどうだろう?と考えたのがきっかけです。

JavaScriptによるデータビジュアライゼーション入門

JavaScriptによるデータビジュアライゼーション入門

これまでほとんどJavascriptは触ったことがなかったので、今年1年かけて新しい言語を覚えるのも面白いだろう、というところももちろんあります。また、すでに書いたようにarduinoJavascriptから動作させるライブラリがあることを知り、ますますJavascriptに興味を持ったのでした。

環境を整える

Javascriptでオープンデータをいじる、となるといろいろ下準備が必要になってきます。自分がやったのは以下のようなところです。

  • Web Server for Chromeを入れる

Javascriptをローカルで実行する際、ブラウザで直接開いても外部ファイル(例えばデータファイルだったり、jsファイル、cssファイルなど)を参照することができません。簡易的なもので構わないのでWebサーバを立ち上げる必要があります。
chrome.google.com
Chromeのこのプラグインが個人的には一番手軽と思っています。
※他にもPythonのhttp-serverを使う、フリーソフトを使う、などの方法があります。

  • JSON Formatterを入れる

オープンデータをJavascriptでいじる、となればデータのフォーマットは主にJSONになります。データをいじるにしても、どんなデータが入っているかを確認しなければなりません。が、残念なことにChromeJSONを開くと生のべたっとしたテキストファイルになってしまい、きわめてみづらい状態になってしまいます。そこで、JSONを整形し文字コードも整えてくれるプラグインが必要になってくるわけです。
chrome.google.com
大変都合のいいことに、こんなプラグインがありました。JSONをきれいな形に整形してくれます。これで、自分が扱おうとしているデータがどんなものか、わざわざダウンロードして整形する必要がなくなりました。

Javascriptを書くにあたって、これが非常に重要と思っています。いろいろなIDEがあるといえばあるのですが、そこまで高機能なものは必要ない、と思っています。むしろ、軽量で扱いやすいものが良い。ということで選んだのがSublime Text 3でした。
普通のテキストエディタではあるのですが、機能を自由に拡張することができるようです。自分はそれほど詳しくないのですが、プラグインを入れたり、スクリプトを組んだり、あれこれできるそうな。
今回はそのうちのごくごく一部であるJavascript用の設定を紹介します。

Sublime Text 3にJavascriptの自動補完機能をつける

なにはともあれ、まずはSublime Text 3をダウンロード、インストールしてください。

Download - Sublime Text

以下、Windows10を前提に話を進めます。なお、参考にしたのは

liginc.co.jp

こちらです。ただし、上記記事ではGitやNode.jsを使っていますが、本記事では「使用しません」

インストール先を調べる

上記記事にあるように、Tern.jsをインストールする必要があります。そのためにまず、インストールするフォルダを調べる必要があります。すでにSublime Text 3がインストールされてあるかと思いますので、起動し、Preference>Browse Packages...を選択してください。

f:id:wanko_sato:20180108172213p:plain

すると、プラグインをインストールする先のフォルダが開くはずです。開いたフォルダをそのままにしておいてください。

GitHubからTern.jsをダウンロードする

github.com

こちらからファイルをダウンロードします。よくわからない方は下の画像を参考に、「Clone or Download」から「Download ZIP」を選択してZIPファイルをダウンロードしてください。

f:id:wanko_sato:20180108172653p:plain

ZIPを解凍し配置する

ダウンロードしたZIPを解凍します。解凍すると「tern_for_sublime-master」というフォルダができるかと思います。そのフォルダをSublime Text 3のPreference>Browse Packages...で開いたフォルダに配置します。

f:id:wanko_sato:20180108172900p:plain

そのまんま、ぼこっと。これでOKです。もし、Sublime Text 3を起動している場合、いったん終了してください。

Tern.jsを有効化し設定する

再度Sublime Text 3を開くとダイアログが開きます(スクショとり忘れ)。新しいプラグインをインストールしますか?的な内容なので、そのままインストールしてください。すると、Sublime Text 3のPreferenceに新しい項目が追加されます。

f:id:wanko_sato:20180108173144p:plain

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"じゃない方が良いらしいので、お好みで設定をいじってみてください。

.jsファイルを開いてみる

以上でとりあえず必要な設定は終わりです。早速.jsファイルを開いてみると、

f:id:wanko_sato:20180108173715p:plain

はい、きちんとシンタックスハイライトされました。

おまけ

ついでにこんなのもあると便利ですね。

totaltech365.hatenablog.com

プラグインGitHubにおいてあるので、Ternと同じ手順でインストールできます。

github.com

さいごに

というわけで、Javascriptでオープンデータ遊びを始めるための下準備をご紹介しました。これでとりあえずはJavascriptを書いて実行するところまで、すぐにできるようになるかと思います。さらに突っ込んだ話は次回以降、ということで。