2015年7月27日月曜日

Djangoでajaxを利用する方法

目的:Djangoでajaxを利用したい時にすぐ参照できるように、必要な情報をコンパクトにまとめておく。
対象読者:Djangoユーザー
概要:DjangoにはCSRF対策が入っている関係上、ajaxを利用するためには以下のような作業が必要です。

動作サンプル:https://whiteblack-cat.info/ja-jp/ajax_sample/
ソースコード:https://github.com/ccat/django_ajax_sample



1. 背景(またはどうしてajaxを利用したいのにできないのか)

Djangoには入力フォームの生成と入力データの取得を補助する強力な仕組みが存在するため、 ちょっとしたアプリを作成する分には何の苦労もなくPOSTでデータを送信することができます。 しかし、JavascriptでPOST送信を行おうとすると、途端に403 Forbiddenで悩まされることになります。

これは、DjangoがCSRF対策が デフォルトで有効になっているためです。 CSRF対策をOFFにすることも可能ですが、セキュリティ上の脆弱性が出来てしまうため、リスクを十分に把握した上でなければお勧めできません。 そこで、CSRF対策をONにしたままajaxを利用する方法を記載します。
なお、本内容はhttps://docs.djangoproject.com/en/1.7/ref/contrib/csrf/#ajax の内容を、より具体的に整理したものです。
Django Webアプリケーション一式のサンプルコードは以下からダウンロードできます。
https://github.com/ccat/django_ajax_sample
テンプレートとurl、viewがセットになっており、そのままDjangoプロジェクトに組み込めば動作をテストできます。
また、本サンプルコードは下記で動作しています。
https://whiteblack-cat.info/ja-jp/ajax_sample/

2. 事前作業(ajaxを利用するために1度行えばよい作業)

まず、以下のコードをstaticかどこかに保存してください。
こちらからダウンロードするのが簡単です。

//Cite : https://docs.djangoproject.com/en/1.5/ref/contrib/csrf/#ajax

function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie != '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) == (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
var csrftoken = getCookie('csrftoken');

function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
function sameOrigin(url) {
    // test that a given url is a same-origin URL
    // url could be relative or scheme relative or absolute
    var host = document.location.host; // host + port
    var protocol = document.location.protocol;
    var sr_origin = '//' + host;
    var origin = protocol + sr_origin;
    // Allow absolute or scheme relative URLs to same origin
    return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
        (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
        // or any other URL that isn't scheme relative or absolute i.e relative.
        !(/^(\/\/|http:|https:).*/.test(url));
}
$.ajaxSetup({
    beforeSend: function(xhr, settings) {
        if (!csrfSafeMethod(settings.type) && sameOrigin(settings.url)) {
            // Send the token to same-origin, relative URLs only.
            // Send the token only if the method warrants CSRF protection
            // Using the CSRFToken value acquired earlier
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});

次に、ajaxを利用するページのテンプレートに、下記コードを埋め込んでください。 なお、1行目で分かる通り、本内容はjqueryを利用することを前提としています。 また、2行目は上記のスクリプトを/static/js/配下のdjangoajax.jsと言う名称で保存したと仮定しています。別の場所、名称で保存した場合は変更してください。

<script type="text/javascript" charset="UTF-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="/static/js/djangoajax.js"></script>

この2つを行えば事前作業は終了です。

3. ajaxの使い方(ajaxを利用するために毎回必要な作業)

以下のサンプルコードのように、jqueryのpostとコールバックを利用して、普段通りajaxのコードを作成してください。

<script type="text/javascript">
function callback(data, status) {
  $("#echoResult").text("status:"+status+" data:"+data);
}

function sends() {
  $.post('/ajax_sample/input/',{"echo": $("#echo").val()},callback,"html");
}
</script>

<form action="#" method="post">
  {% csrf_token %}
  <input type="text" name="echo" id="echo" />
  <input type="button" value="submit" onclick="sends()" />
</form>

4. 仕組み(または如何にしてajaxを利用できるようにしているのか)

CSRF対策では、ページが表示されるたびにランダムな文字列(CSRF Token)を生成し、それをPOSTに含めることで 「ページを表示した人」と「POSTを送信してきた人」を識別しています。 jqueryデフォルトのpost関数ではCSRF Tokenを送信しないため、そこでDjangoがエラーを出力します。

そこで、djanoajax.jsではCSRF TokenをCookieから読み込み、jqueryのpost関数が呼び出された時に、 CSRF TokenをPOSTのデータに含めるように変更を行っています。

2015年5月6日水曜日

Negoni, gin gojiの簡易比較

Webフレームワークを作ってみたいと思いつつ、しっかり作る時間もないので、既存の物をまとめてセットにしたテンプレート的なものをまず作成し、必要に応じてミドルウェアの自作や置き換えを考えることにしました。

まず、URLのディスパッチや実際のWebページを表示する機能を提供するフレームワークについて調べました。
大物としてはrevel等が存在するのですが、今後入れ替え等を行う可能性を考えると、小機能なものを利用した方が良いと考え、候補から外すことにしました。

その結果、Negroni、Gin、Gojiの3つが有望そうだと感じたのですが、今一良い比較が無かったので、簡単な比較を行いました。なお、2015/05/06時点の情報です。

基礎情報

名称 Negroni Goji Gin
ライセンス MIT MIT MIT
コントリビューター 23人 14人 55人
Watch 141人 115人 175人
Star 2441人 2306人 2769人
タイプ Web Library Web Framework Web Framework
簡易説明 net/httpのHandlerの前後にミドルウェアを実行する機能を追加することで、機能拡張を行うためのライブラリ。 基本的にそれ以外の機能はほとんど存在せず、必要なミドルウェアを別途探してきてnegroniと共に導入することになる。 構造が簡単なので、net/httpに対応しているミドルウェアなら簡単に併用できる点が強み。 net/http準拠のWebフレームワークで、URLディスパッチャー、ミドルウェア、Context機能等の基本的な機能を持っている。高速なことが売り。 net/httpとは異なるWebフレームワークで、URLディスパッチャー、ミドルウェア等の基本機能以外にも機能を持っている。高速なことと、企業が利用していることが売り。

と言うことで、色々なミドルウェアを組み合わせる、接着剤のような機能を求めるならNegroni、そうでなければGojiかGinのどちらかでしょうか。
Gojiの場合、net/http準拠な分、他のミドルウェアとも相性が良さそうです。 Ginの場合、開発体制がGojiに比べると潤沢なので、Gin自身で一つのエコシステムを作れるかもしれません。Watch数やStar数を見ても、Gojiより人気なようです。

2015年4月26日日曜日

Titanium Studioでのグローバル関数/変数と画面サイズに応じたTSSファイルの調整

Titanium Studioでalloyを利用する場合、app/alloy.jsにグローバル関数/変数を設定することができます。

//app/alloy.js

//Global Functions
Alloy.Globals.closeWindow = function(windowName) {
    if(windowName in windowList){
        windowList[windowName].close();
        windowList[windowName] = null;
        delete windowList[windowName];
    }
};


//Gloval Variables
Alloy.CFG.messageFontSize = 20;
Alloy.CFG.buttonFontSize = 25;

上記のように設定し、他のファイルで普通にAlloy.Globals.closeWindow(win)等のように呼び出せば利用できます。
また、tssファイル内で計算は行えませんが、alloy.jsファイル内で設定した値は利用することができます。
そのため、下記のように画面サイズに応じて設定する値を変更すれば、1つのtssファイルで複数の画像サイズに対応できます。

//app/alloy.js

//Gloval Variables

Alloy.CFG.messageFontSize = 20;
Alloy.CFG.buttonFontSize = 25;

if(Ti.Android) {
    Ti.API.info(Ti.Platform.displayCaps.dpi);
    switch(Ti.Platform.displayCaps.dpi) {
        case 120:
            Alloy.CFG.messageFontSize = 18;
            Alloy.CFG.buttonFontSize = 20;
            break;
        case 160:
            Alloy.CFG.messageFontSize = 18;
            Alloy.CFG.buttonFontSize = 20;
            break;
        case 240:
            Alloy.CFG.messageFontSize = 18;
            Alloy.CFG.buttonFontSize = 20;
            break;
        case 320:
            //Default
            break;
     case 480:
            break;
    }
}

2015年4月12日日曜日

Titanium StudioでHTTPClientを利用

Titanium StudioでHTTPClientを作成する方法に関するメモです。
生成時にまとめて引数を指定する方法もありますが、私はだいたい生成した後に設定を入れています。

var client = Titanium.Network.createHTTPClient();
client.open('POST',"http://example.com/"); //POST or GET
client.onload = function(){
    json = JSON.parse(this.responseText);
    Ti.API.info(this.responseText);
    client.onload=null;
    client.onerror=null;
    client=null;
};
client.onerror = function(error){
    Ti.API.info(error.status);
    client.onload=null;
    client.onerror=null;
    client=null;
};
var params = {data : "test data"}; 
client.send(params);

まず「Titanium.Network.createHTTPClient」でHTTPClientを生成した後、「open」でアクセスするURLとメソッド(普通はGETかPOST)を指定します。
「onload」と「onerror」はアクセス成功時と失敗時に実行する関数を指定しています。 「onload」では「this.responseText」でアクセスしたURLの中身にアクセスできます。
また、どちらも最後にclient.onload、client.onerror、clientにnullを代入しています。これは、こうしないとメモリが解放されず、メモリリークを起こすと言う話を聞いたので、お呪いとして入れてあります。正確な検証は行っていません。
最後に、POSTの場合はPOSTで送信するデータを生成して、「send」で送信しています。

2015年4月10日金曜日

Titanium StudioのAction Bar

http://qiita.com/s4shiki/items/a1006fdd38fba29cd8d3でAction Barの消し方について2種類記載されている。

1つは「win.activity.actionBar.hide();」を利用する方法で、もう1つはカスタムテーマを利用する方法なのだが、「win.activity.actionBar.hide();」を利用する方法では画面を開いた瞬間はAction Barが表示されてしまうので、カスタムテーマを利用した方が良いようだ。

2015年3月16日月曜日

2015年3月10日火曜日

django-mptt (0.6.x) README.rst

Djangoでツリー構造を作る時に便利なdjango-mpttのreadme.rstの和訳です。 django-mpttは便利なのですが、日本語の資料が少なそうなので和訳しました。 なお、日本語として読みやすくするために、言い回しや文のつなぎの変更や省略を行っています。気になる方は原文を確認してください。
原文はこちら
他のドキュメントもそのうち和訳するかもしれません。

django-mptt

djangoモデルに修正された先行順走査(MPTT)を実装し、モデルインスタンスのツリーとして動作するユーティリティです。

プロジェクトホーム: http://github.com/django-mptt/django-mptt/
ドキュメント: http://django-mptt.github.io/django-mptt/
ディスカッショングループ: http://groups.google.com/group/django-mptt-dev

修正された先行順走査(MPTT)とは何か?

MPTTとは、階層的なデータをデータベースに保存する手法です。 検索処理を効率化することを目的としています。

効率化のトレードオフとして、要素の追加や移動がより複雑になっており、ツリー構造を保つには追加の作業が必要です。

MPTTについて、どう動作するか詳細を理解できるいくつかの記事を示しておきます。

SQLの中のツリー (Trees in SQL)

データベースに階層構造のデータを保存する (Storing Hierarchical Data in a Database)

MySQLの中の階層的なデータを管理する(Managing Hierarchical Data in MySQL)

django-mpttとは何か?

django-mpttは、簡単にMPTTをあなたのdjangoモデルで使えるようにする、再利用可能なdjangoアプリケーションです。 データベースのテーブルをツリー構造として管理し、モデルインスタンスのツリーを操作するツールを提供します。

必要要件

Python 2.6以上 (実験的なサポート:python 3.2以上)
Django 1.4.2以上

特徴

  • モデルの簡単な登録 - ツリー構造に必要なフィールドを自動的に追加します。
  • モデルインスタンスを作成・削除したり、親を変更したりすると、自動的にツリー構造を更新します。
  • あなたが選択した単一(もしくは複数)のフィールドで、ツリーの各レベルを自動的に整列させます
  • 登録されたモデルに対して、次のような新しいモデルメソッドを追加します。
    • 木の中の位置を変更
    • 祖先、兄弟、子の検索
    • 子孫の数を数える
    • その他の木に関する操作
  • 登録されたモデルに対して TreeManagerが追加され、以下のメソッドを提供します。
    • 木周辺、もしくは別の木へのノードの移動
    • 木のどこかへノードを挿入
    • 木のMPTTフィールドの再生成(djangoの外側でアップデートを行った際に利用)
  • ツリーモデル用のFormフィールド
  • ツリーモデル用のユーティリティ機能
  • ツリーを描画するためのテンプレートタグとフィルター