Node/npm で popoto.js を動かす

はじめに

先日 popoto.jsでネットワーク「図」を検索してみよう という記事を出したんですが、 Popoto.js のセットアップ方法はスルーしていました。

ということで、とりあえずどんなものか触ってみたいという人向けに、Getting started にあるサンプルが動く最小レベルのセットアップ方法の紹介です。 script タグで minify された popoto.js をよみこむのでもいいんですが、ここでは Install にある npm を使う方法でやります。

Neo4j のセットアップ

省略。

localhost で実行していない場合 (popoto.js 実行サーバの外に Neo4j サーバがある場合) は、Neo4j 側で外部からのアクセスを受け取れるよう設定を変更しておいてください。

Node.js, npm のセットアップ

省略。

以降の内容は Ubuntu 18.04, Node.js/8.10, npm/3.5.2 で確認しています。

popoto.js のセットアップ

ディレクトリ構成

全部フラットにおいてもいいんですがわかりにくいので以下のように dist, src をわけて必要なファイルを用意していきます。

hagiwara@dev01:~/nwmodel/netomox/popoto$ tree -I 'node_modules' --matchdirs
.
├── dist
│   ├── font
│   │   └── popoto
│   │       ├── popoto.eot
│   │       ├── popoto.svg
│   │       ├── popoto.ttf
│   │       └── popoto.woff
│   ├── index.html
│   └── popoto.min.css
├── package.json
├── src
│   └── index.js
└── webpack.config.js

npm パッケージのインストール

先に package.json を用意しましょう。私が使ったもの をもってきて npm install してもいいですし、自分で作るのであれば

npm init
npm install --save popoto
npm install --save-dev webpack webpack-cli webpack-dev-server

してください。(ここでは手っ取り早く webpack-dev-server で Web Server を起動して動かす方針です。)

webpack の設定

• webpack.config.js

概ね見たままです。

• 入力は src/index.js
• 出力は dist/main.bundle.js (名前はてきとう)
• webpack-dev-server を使う (他のアプリで 8080 使ってたので適当にポートを変えてます)
  • Document root を dist/ にする
  • ソースの監視やブラウザ起動等のオプション入れてあるのでコマンド一発で使い始められます。

index.js (popoto.js configuration) の作成

ほぼ Getting started そのままです。Neo4j の認証情報や popoto.js オプション等を記載します。気にしておくのは、npm でインストールする popoto.js を require しておく、くらいかな。

• src/index.js

index.html, css, font の準備

これも、 script tag 以外は Getting started そのままですね。 Webpack がビルドする main.bundle.js を読み込んでください。

• dist/index.html

上のディレクトリ構成にある、css , font は公式のものをもらってきます。あるいは　npm package からコピーします (node_modules/popoto/dist)。この辺がないとツールバーなどのアイコンが表示されません。

Webpack dev server の起動

Dev server を起動するためのコマンドを package.json に入れておきます(scripts セクション)。これで、 npm run start コマンドを実行すると main.bundle.js のビルドとサーバの起動、ブラウザの起動まで実行されます。また、index.html で popoto.js のオプション等を変更した際も自動的に再ビルドとブラウザの更新(リロード)がおこなわれます。

おわりに

これくらいで "とりあえず" popoto.js が動くようになります。グラフィカルに Neo4j 内のデータを触ってみたい人向けのセットアップ方法でした。 Enjoy!