Neo4j Webインターフェースを使い倒す

Neo4j Webインターフェースは、HTTP/HTTPSでNeo4jサーバーに接続し、Cypherクエリ言語を使い対話式でグラフデータベースを操作できるGUIです。Neo4j Webインターフェースには、Cyhperクエリ言語の実行フレームの他にも、多様な機能が実装されており、ここでは、すべての機能を網羅的に紹介していきます。

```
この記事は、Neo4j 3.0.6(2016-09-16)に合わせて更新しています。
```

**[関連記事]**
[CL-Lab](http://www.creationline.com/lab/neo4j)

# Neo4j Webインターフェース
## メイン画面
Neo4jにログインした直後に表示される画面です。

![neo4j-browse-interface-01.png](https://qiita-image-store.s3.amazonaws.com/0/69832/4aad9566-bcb0-7832-4e46-a1d7dec1c2cb.png)


* コマンドライン：Cypherクエリ、ストアドプロシージャ、 REST APIなどを実行
* お気に入り登録：Cypherクエリ文などをお気に入り登録
* チュートリアル：初学者向けのチュートリアルやサンプルデータベース、システムのステータス表示など
* メニューバー：アイコンをクリックするとメインメニューを表示
* 出力フレーム：Cypherクエリなどの実行結果を表示

## チュートリアル
**＠Start Learning**
グラフデータベースの基礎を説明しています。
 
![neo4j-browse-interface-02.png](https://qiita-image-store.s3.amazonaws.com/0/69832/2beab9a3-8228-cbdc-9cd4-8b98ee04bcbe.png)


* ピン止め：出力フレームを常にトップに表示します。

**＠Write Code**
2つのサンプルデータベース、GUTでCypherクエリ作成のテンプレートが体験できます。
 
![neo4j-browse-interface-03.png](https://qiita-image-store.s3.amazonaws.com/0/69832/6bd17a87-78e2-0b82-094d-8cd2f19f6ec7.png)

**＠Monitor**
Neo4jサーバーのステータスが表示されます。
 
![neo4j-browse-interface-04.png](https://qiita-image-store.s3.amazonaws.com/0/69832/662f67c1-a35d-bb63-5fa2-98e944939806.png)


#メニューバー
##事前準備
ここからの説明は、Neo4jのサンプルデータベース(映画データベース)が存在するという前提で進めています。データベースが必要であれば、[こちら](http://qiita.com/awk256/items/5622d601c2c3051b70ad)の記事の「演習用の映画データベース作成」を参考に作成してしてください。


## データベース
「データベースアイコン」をクリックすると、現在のデータベース構成が見られます。
 
![neo4j-browse-interface-05.png](https://qiita-image-store.s3.amazonaws.com/0/69832/a44926d7-2e62-f475-4b19-7f955dce2429.png)



##ノードラベル(Node labels)
ラベル(Movieなど)をクリックしてみてください。映画ノードが表示されます。

![neo4j-browse-interface-06.png](https://qiita-image-store.s3.amazonaws.com/0/69832/8fa7edcc-8549-1728-44f5-e9296b319967.png)


## リレーションシップ(Relationship types)
リレーションシップ(ACTED_INなど)をクリックしてみてください。関連するサブグラフが表示されます。

 ![neo4j-browse-interface-07.png](https://qiita-image-store.s3.amazonaws.com/0/69832/539e5740-09af-6309-48cb-6e05b75bf03b.png)


##　Cypherクエリ文の実効履歴表示
Cypherクエリ文の実行履歴は、直前に実行したCypherクエリ文(赤枠)のクリック、又はコマンドラインの入力プロンプト上で、「ページアップ&ダウン」操作をすることで表示することができます。

![neo4j-browse-interface-08.png](https://qiita-image-store.s3.amazonaws.com/0/69832/dbe9da6b-aa94-d80e-5be6-fa83c2585734.png)


##出力結果のエクスポート
出力結果は、多様なフォーマットでエキスポートできます。

 ![neo4j-browse-interface-09.png](https://qiita-image-store.s3.amazonaws.com/0/69832/8ce7fe90-c10d-972d-6756-145a79c45bbc.png)


なお、出力結果は多様なタイプに変換して表示できます。
次は、ローデータとして表示（赤枠のアイコンクリック）。

 
![neo4j-browse-interface-10.png](https://qiita-image-store.s3.amazonaws.com/0/69832/f04f1329-fdf1-f376-1c08-afe6cb3116d8.png)


次は、JSONで表示（赤枠のアイコンクリック）。
 
![neo4j-browse-interface-11.png](https://qiita-image-store.s3.amazonaws.com/0/69832/13ac0575-8782-7114-def5-47fcd9b50252.png)

次は、RESTful APIで表示（赤枠のアイコンクリック）。
 
![neo4j-browse-interface-12.png](https://qiita-image-store.s3.amazonaws.com/0/69832/ad112923-1113-2398-1dbd-24b4abd9ede7.png)


##グラフのサイズや色、線の太さなどのカスタマイズ
グラフの表示は、Neo4jがサイズや色などをある程度までに最適化してくれますか、カスタマイズもできます。出力フレームでラベル又はリレーションシップをクリックしてみてください。下に色やサイズを調整するキャンバスが表示されます。
 
![neo4j-browse-interface-13.png](https://qiita-image-store.s3.amazonaws.com/0/69832/59d064de-c661-7c27-dd88-c8c77ef980b1.png)


## グラフの拡大や縮小
出力フレームに表示されているグラフに対して拡大や縮小ができます。データベースのリレーションシップでFOLLOWSを表示してから、Jessica Thompsonをワンクリックしてロックしてみてください。

 ![neo4j-browse-interface-14.png](https://qiita-image-store.s3.amazonaws.com/0/69832/6adfbc51-ae58-3a68-d1cd-cac8193499b8.png)



それから、拡大をクリックしてみてください。次のようにチャイルドノードが表示されます。これは、ノードをダブルクリックしても同じ結果が得られます。

 
![neo4j-browse-interface-15.png](https://qiita-image-store.s3.amazonaws.com/0/69832/b7641794-e8ce-394f-191b-44bb9c1a2bca.png)


**チャイルドノードの削除**
拡大されたグラフのチャイルドノードを削除したい場合は、同じ要領でノードをロックしてからリムーブ（×）をクリックします。

**アンロック**
ノードのロックを解除するためには、アンロック(開いている鍵)をクリックするか、出力フレームの空白をクリックします。


## AUTO-COMPLATE
出力フレームの右端には、AUTO-COMPLATE(ON/OFF)という表示があります。これは何でしょう。次は、AUTO-COMPLATE(OFF)の状態で表示したグラフです。

 ![neo4j-browse-interface-16.png](https://qiita-image-store.s3.amazonaws.com/0/69832/36aae89c-42b5-5f5a-184a-9676c945cb0b.png)


次は、AUTO-COMPLATE(ON)の状態で表示したグラフです。このようにAUTO-COMPLATE(ON)の状態では、グラフ表示の数の制限に関わらず、表示されているグラフのなかのすべてのリレーションシップを自動的に完成して表示します。
 
![neo4j-browse-interface-17.png](https://qiita-image-store.s3.amazonaws.com/0/69832/51a7978c-5f63-3153-49ef-429156560cee.png)


## 出力フレーム内のグラフ全体の移動
グラフが常に出力フレームの枠内に綺麗に収まるか、中央に表示されるとは限りません。そのときは、出力フレーム内で空白をワンクリックした状態（グラフロック）でマウスを動かしてみてください。
 
![neo4j-browse-interface-18.png](https://qiita-image-store.s3.amazonaws.com/0/69832/a5271459-b176-12cf-d123-af784e3bffe6.png)

グラフが左右上下に移動します。

![neo4j-browse-interface-19.png](https://qiita-image-store.s3.amazonaws.com/0/69832/1096a2a7-eef6-ba84-ba7e-4a9bee5ccabd.png)


もちろん、フルスクリーン機能で簡単に解決できる場合もあります。あるいは、両方を併用する必要がある場合もあります。




## 出力フレーム内の個別ノードの移動
一部のサブグラフが一塊になっていて見づらい場合は、個別のノードをワンクリックした状態で移動させることができます。それで見やすい形に再配置します。

 ![neo4j-browse-interface-20.png](https://qiita-image-store.s3.amazonaws.com/0/69832/0e561e4c-2d59-14ed-b495-8f44be432303.png)


##属性キーの表示（Property keys)
特定の属性キーをクリックすると、値が表示されます。
 
![neo4j-browse-interface-21.png](https://qiita-image-store.s3.amazonaws.com/0/69832/d745d8de-2144-d2df-6eb6-28aefdc76a7a.png)


```
ここまでのデータ表示は、デフォルトで表示する数が制限されています。データベース全体のデータをもってくるようなことはありません。
```

# お気に入り機能
お気に入り機能は、ユーザーがお気に入り登録したスクリプトの他にも多様が機能が実装されています。

![neo4j-browse-interface-22.png](https://qiita-image-store.s3.amazonaws.com/0/69832/14eaea69-9f34-5101-4233-bde05f3e013d.png)


## Save Scripts
ユーザーがコマンドラインから登録したスクリプトが表示されます。

この「お気に入り登録」は、マイフォルダーを作成してグループ化することもできます。スクリプトは「ドラック&ドロップ」で移動できます。
 
![neo4j-browse-interface-23.png](https://qiita-image-store.s3.amazonaws.com/0/69832/fbcddc86-ef73-2bf7-7044-9d59f451a3bc.png)



それから、スクリプトの実行方法は2つです(以下、同様）。

* メニュー名を選択すると、スクリプトがコマンドラインラインに表示されるので、コマンドラインかあ実行ボターン(▶)をクリックする。
* メニュー名のラジオボターンを選択すると、実行モード変更するので、メニューから実行ボターンをクリックする。



## Sample Scripts
こちらは、Neo4jが提供しているスクリプトです。チュートリアル的なものから、データベースの運用管理に必要な情報を出力するスクリプトまで多様です。これから、代表的なものを1個ずつ見ていきます。

**Basic Queries**
チュートリアル的なCypherクエリ文を紹介しています。次は、GUIでCypherクエリを作成するクエリテンプレートです。
 
![neo4j-browse-interface-24.png](https://qiita-image-store.s3.amazonaws.com/0/69832/e7686f64-c218-ac08-8d0d-5dc645b28e02.png)


**Example Graph**
演習用データベースが2つありますが、次の画面は「映画データベース」です。

![neo4j-browse-interface-25.png](https://qiita-image-store.s3.amazonaws.com/0/69832/46d83dca-7714-e7c2-bc61-91a4af88855c.png)

**Data Profiling**
データベースの概要をみることができます。次は、すべてのノード数をカウントしています(Count all nodes)。
 
![neo4j-browse-interface-26.png](https://qiita-image-store.s3.amazonaws.com/0/69832/e9a0a2a8-7815-5985-7638-5d11ec80c87c.png)


**System**
Neo4jサーバーのシステム情報をみることができます。次は、Neo4jのデータストアファイルの構成とファイルサイズを表示しています(Store file sizes)。

 ![neo4j-browse-interface-27.png](https://qiita-image-store.s3.amazonaws.com/0/69832/3227246a-0aa6-fe33-d168-ef31f41679ad.png)


**Styling/Graph Style Sheet**
Neo4j Webインターフェースは、スタイルシートを編集してカスタマイズすることができます。

 ![neo4j-browse-interface-28.png](https://qiita-image-store.s3.amazonaws.com/0/69832/7e44a6ef-42d1-9a19-f8a6-3938873af244.png)


**Import**
Cypherクエリ文が書かれている外部のファイルをインポートのドロップボックスにドラック&ドロップすると、Cypherクエリ文は、お気に入り(Saved Scripts)に登録されます。
 
![neo4j-browse-interface-29.png](https://qiita-image-store.s3.amazonaws.com/0/69832/18b4a725-70e1-1152-5af5-d5a3ee5feefb.png)


Cypherクエリ文の他に、GRASS(graph-style-sheet)のインポートもここで可能です。

#ドキュメンテーション（Documentation)
Neo4jの各種ドキュメントのリンクが紹介されています。
 
![neo4j-browse-interface-30.png](https://qiita-image-store.s3.amazonaws.com/0/69832/55b16356-bb0e-3f36-e975-c6e07e4d72cd.png)


#Neo4jブラウザーシンク(Browser Sync)
認証にオープンIDを登録することで、Neo4jサーバーを複数のユーザー間で共有できます。各種設定なども共有できるメリットがあります。
 
![neo4j-browse-interface-31.png](https://qiita-image-store.s3.amazonaws.com/0/69832/ddbb4e94-9a0f-0909-9496-d5c0be011f6e.png)


# ブラウザーセッティング
ブラウザーのビジュアライゼーションをカスタマイズできます。

![neo4j-browse-interface-32.png](https://qiita-image-store.s3.amazonaws.com/0/69832/f6645324-3b63-e7cf-5af2-b00963d1d208.png)



#Neo4jについて
Neo4jの開発元やコミュニティー、ソースコードなどに関する情報のリンクが載っています。
 
![neo4j-browse-interface-33.png](https://qiita-image-store.s3.amazonaws.com/0/69832/4e51ba6b-5f6a-6113-8390-be98caa66629.png)


#まとめ
以上、駆け足でNeo4j Webインターフェースの機能を一通り紹介しました。Neo4j 2.x系に比べ、3.xになってから、かなりパワーアップされていることが分かります。

[参考サイト]
[Neo4j Browser User Interface Guide](https:// neo4j.com/developer/guide-neo4j-browser/)