きっかけ

最近Web技術（HTML5/CSS/Javascript）を使ったアプリケーションが増えてきたので興味があったのと、ちょうど趣味の中でこんなアプリがあったらいいなというのが出てきたので、勉強を兼ねて実際に作成に取り掛かってみました。
今後作成過程での備忘録等を載せていく予定です。

作成するアプリケーションのイメージ

今回制作するアプリケーションは、種々の情報の相関関係を可視化するネットワークグラフを作成するツールを作る予定です。見た目はWindowsアプリケーションライクにメニューバーやN-ペイン、タブなどの基本機能を搭載したいです。ちなみに有名どころで言うとMaltego¹、Neo4J²、Elastic stack graph³あたりになるかと思います。
一部オープンソースのものがあったりするのですが、制限がかかっているケースも多いためせっかくなら自作してみようと思い立ちました。

Webアプリケーションの構成

Webフレームワーク

今回Webアプリケーションについては、Windowsアプリケーションライクで作成することから、SPA（Single Page Application）を作成する方向で進めて行きます。サーバサイドは最低限のページ、REST-API、DBがあればよいので、手軽でPythonに慣れているということから、WebフレームワークにFlaskを、RDBにはSqlite3を使用します。
他のでざっと見たところ下記のほうなフレームワークがあります。（フレームワークの名前だけでも数十とあり、どれを選ぶかというところから悩みますね。。。）

名前	所感
django	Pythonのフレームワーク。MVC（Model-View-Controller）ベース。フレームワークに乗っ取って簡単にベースのファイル、モデル、データベースまでの一連のシステムを構築可能。HTMLはテンプレートエンジンであるJinja2記法を活用。
flask	Pythonベース。djangoをさらに簡素化したイメージ。DBの構築は自分で構築する必要ある。
ReactJS	クライアントサイドJavascriptのフレームワーク。View寄りの機能を提供。
Ruby on Rails	Rubyのフレームワーク。MVCベース。コマンドによりフレームワークとベースのファイル、モデルを作成可能。WebサーバはWEBrickを使用。
CakePHP	PHPのフレームワーク。上記と同様MVCベース。

FlaskによるWebサービス起動まで

まずはpython2にて、Flaskのインストールを実施。

$ pip install flask

その後、下記の通りファイルを作成し、ファイルの中身を記載

    root-directory -- app.py 
                   |- templates -- index.html

app.py

from flask import Flask, render_template

app = Flask("__name__")

# /直下へのアクセス
@app.route("/")
def root():
    return render_template("index.html")

# Webサーバの起動
if __name__ == "__main__":
    app.run(debug=True)

index.html

Hello :)

あとはapp.pyを引数runserverをつけて実行するだけ。

$ # python app.py runserver
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!

無事起動完了しました。

まずはここまで。次回以降どんどん機能拡張していきたいですね～　:)

Maltego : paterva社の関係グラフ分析用の可視化ツール ↩
neo4J : グラフ構造のDBを持つ可視化ツール ↩
Elastic stack graph : Elastic社のツール。グラフ機能。 ↩