Django クイックスタートの巻

Python 上で動く Web フレームワークDjango の超クイックスタート。簡素化しまくってるのでご容赦を。
またプログラム中、コメント行はすべて省略。


環境は以下のとおり。PythonDjango はすでにインストールされているものとする。

またネーミングは以下のとおり。

  • プロジェクト名: myproject
  • アプリケーション名: myapp
  • ビュー名: myhello

プロジェクト作成

django-admin startproject myproject

アプリケーション作成

cd myproject
python manage.py startapp myapp

アクティブにするアプリを定義

settings.py を編集。INSTALLED_APPS に今回作成するアプリケーション(myproject.myapp)を追加。

INSTALLED_APPS = (
    ...(中略)...
    'myproject.myapp',
)

URL とビューのマッピング

urls.py を編集。'myhello/' という URL がリクエストされたら、ビュー myhello が適用されるようにマッピングを行う。ビュー myhello は、このあと myproject/myapp/views.py で定義するつもりなので、myproject.myapp.views.myhello と指定する。

from django.conf.urls.defaults import *

urlpatterns = patterns('',
    (r'^myhello/$', 'myproject.myapp.views.myhello'),
)

ビューの定義

myapp/views.py を編集し、ビュー myhello を定義する。

from django.http import HttpResponse

def myhello(request):
    html = '<html><body>Hello, world.</body></html>'
    return HttpResponse(html)

開発用サーバ起動

python manage.py runserver

結果確認

http://127.0.0.1:8000/myhello/ にアクセスして、以下のようなページが表示されたらOK。


Social Games that Sway Behavior - Technology Review


最近ソーシャルゲームがあちこちで話題になっているが、そのソーシャルゲームを現実世界と結びつけようという試みが始まっているらしい。
この記事で最初に紹介されている HealthSeeker は、Facebook上でプレイすることができるソーシャルゲームなのだが、プレイヤーとして想定しているのは「現実世界で」糖尿病を患っている人たち。

ここではRPGのようにいくつかのミッションが用意されているのだが、それは例えば「コーヒーを飲むときに砂糖を入れない」など、糖尿病の人たちの生活を改善するためのものばかりだ。プレイヤーはその中からチャレンジしたいミッションを選ぶ。そしてそれを現実の世界で実践することができたら、自己申告によってミッションのレベルに応じた経験値がもらえる。またミッションに成功するとFacebook上の知り合いに知らされ、お祝いのプレゼント(仮想世界の)がもらえたりするそうだ。

#オイラはFacebookやってなくて実際にプレイしてないので、細部の紹介が間違ってるかもしれないけど(汗


悪い生活習慣って、改善しようと思っても意志が強くないとなかなかできない。でっかい紙に「○○をやめる!」と書いて壁にはっておいたところで、せいぜい1〜2日守れるかどうかってとこ。(←体験者。w)
しかしそれは現実世界のみで解決しようとした場合の話。最近流行りのソーシャルゲームを現実世界の問題を解決するために応用するって考え方は、まさに今の時代ならでは。特に、目標を立ててそれを成し遂げようとするときに、人に見守られている、ちょっとでも進歩があればみんなからの賞賛を受けられる、というのは何歳になっても嬉しいものだし、ソーシャルゲームはそれを、現実世界よりかなり上手く実現することができるはずだ。

禁煙とか、もっといろんなところに応用の余地がありそうだ。

カレンダーを使う

Gtk+ではカレンダーウィジェットというのが用意されているので、今回はこれを使ってみる。

カレンダー上の日付を選択すると、その日付をテキストエリアに表示するという簡単なアプリケーションを作ってみた。

(ソースは以下の場所に置いてあります)
http://github.com/egawata/hatena_blog/tree/master/calendar/

 39     //  GtkCalendar オブジェクトの生成
 40     calendar = gtk_calendar_new();
 41 
 42     //  日付表示用エリア
 43     text = gtk_entry_new();

カレンダーオブジェクトを作成する。ついでに、選択された日付を表示するためのテキストエリアも用意しておく。

 47     g_signal_connect(G_OBJECT(calendar), "day-selected",
 48                      G_CALLBACK(disp_day), (gpointer)text);

GtkCalendar はいくつかのシグナルを扱うことができる が、カレンダー上の日付がクリックされたら何か処理を行いたい、ということはよくあるだろう。そのときは "day-selected" というシグナルが発生する。
上記では、"day-selected" シグナルが発生したときに、disp_day 関数(10-22行)をコールするように指示している。


disp_day 関数は、カレンダー上で選択された日付を、年月日の文字列に直してテキストエリアに表示する処理を行っている。

 10 static void disp_day(GtkCalendar *calendar, GtkEntry *text)
 11 {
 12     guint year, month, day;
 13     gchar ymd[100];
 14 
 15     //  カレンダー上で選択された年月日を得る
 16     gtk_calendar_get_date(calendar, &year, &month, &day);
 17     month++;    //  月は 0-11 の値で取得されるので +1
 18 
 19     snprintf(ymd, 100, "%d%d%d日", year, month, day);
 20 
 21     gtk_entry_set_text(text, ymd);
 22 }

gtk_calendar_get_date() を使って、カレンダー上で選択された年月日を取得することができる。
ここで注意したいのは、GtkCalendar は月を 0-11 の範囲で扱うということ。したがって上記のように月を取得すると、実際の月より1少ない値が返ってくる(10月なら 9)。逆にカレンダーの表示月を指定するような場面では、1少ない値を月に指定する必要がある。今回のサンプルでは、年月日を取得したあと、月の値をプラス1している。

 57     g_signal_emit_by_name(calendar, "day-selected", text);

アプリケーション起動直後、カレンダー上では今日の日付が選択された状態になっている。しかしテキストエリアには日付が表示されていない。前述の disp_day 関数が起動後一度も実行されていないからだ。
これではカッコ悪いので、g_signal_emit_by_name() を使って "day-selected" シグナルを意図的に発生させ、今日の日付がテキストエリアに表示された状態にしておく。


単純な例で実用性に乏しいかもしれないが、コールバック関数を、例えば指定された日付の予定を表示するような処理に置き換えれば、スケジュール管理アプリみたいになって良いかも。

メニューバーを使用する

なんか久しぶりすぎるが気にしない。w
今回はメニューの追加について。


メニューの構造は「ファイル」→「新規作成」「開く」など、階層構造になっていることが多い。1つの階層の構造は以下のようなクラスを使った構造で表される。

  GtkMenuShell (メニューバー、サブメニュー)
       GtkMenuItem (メニュー上のアイテム)
       GtkMenuItem
       ....

GtkMenuItem というのは、メニューに表示されるアイテム一つ一つのことで、例えば「ファイル」「新規作成」「開く」など、メニュー上で選択可能なものはすべて GtkMenuItem。

(GtkMenuItem)

GtkMenuShell は、これら GtkMenuItem を入れるためのコンテナ。たとえば画面上部のメニューバーが GtkMenuShell であれば、その上に表示される「ファイル」「編集」などの文字が GtkMenuItem であって、GtkMenuShell は、これらの GtkMenuItem をまとめる役割を行う。

(GtkMenuShell)


また、GtkMenuItem には、サブメニューとして GtkMenuShell を紐付けることができる。これにより、メニューの階層構造を実現できる。

なお、GtkMenuShell というのは抽象クラスであり、実際には以下の2つが使用される。

  • GtkMenuBar : 常時表示されている横長のメニュー
  • GtkMenu : 必要なときにのみ表示されるポップアップメニュー

実際には、最上位のメニューに GtkMenuBar を使用し、それ以下の階層、例えば「ファイル」メニューをクリックしたときに表示されるサブメニューなどに GtkMenu を使用するとよい。


さて実際の例。今回は、メニューにいくつかのアイテムを追加し、それらが選択されたときに、ウィンドウ内の文字列を変化されるサンプルを作ってみた。

(ソースは以下の場所に上げてあります)
http://github.com/egawata/hatena_blog/tree/master/menu

    //  (1)MenuBar 'menubar' を作成する
    menubar = gtk_menu_bar_new();

    //  (1)MenuBar 'menubar' を BOX に追加する
    gtk_box_pack_start(GTK_BOX(vbox), menubar, FALSE, FALSE, 0);    

まず一番上の階層であるメニューバーから。メニューバーの生成には gtk_menu_bar_new() を使用する。生成時点では、内容は空。

    //  (2)MenuItem 'lunch' を作成する
    lunch = gtk_menu_item_new_with_label("メニュー");
    …
    
    //  (2)MenuItem 'lunch' を MenuBar 'menubar' に追加する
    gtk_menu_shell_append(GTK_MENU_SHELL(menubar), lunch);

メニューバーに入れるアイテムを作成し、メニューバーに追加する。今回は1つだけ、「メニュー」というアイテムを追加する。

    //  (3)Menu 'lunchmenu' を作成する
    lunchmenu = gtk_menu_new();
    ...
    
    //  (3)Menu 'lunchmenu' を MenuItem 'lunch' のサブメニューとする
    gtk_menu_item_set_submenu(GTK_MENU_ITEM(lunch), lunchmenu);    

先ほど追加したアイテム「メニュー」に、サブメニュー lunchmenu を紐付ける。これにより、メニューバー上の「メニュー」を押すとサブメニューが現れるようになる。ただし現時点では内容は空。

    //  (4a)MenuItem 'menu*' を作成する
    menu1 = gtk_menu_item_new_with_label("カレー");
    menu2 = gtk_menu_item_new_with_label("おにぎり");
    menu3 = gtk_menu_item_new_with_label("俺の塩");

    //  (4b)MenuItem 'menu*' を Menu 'lunchmenu' に追加する
    gtk_menu_shell_append(GTK_MENU_SHELL(lunchmenu), menu1);
    gtk_menu_shell_append(GTK_MENU_SHELL(lunchmenu), menu2);
    gtk_menu_shell_append(GTK_MENU_SHELL(lunchmenu), menu3);

このサブメニューに入れるアイテムを3つ作成し、それをサブメニューに追加していく。

これでメニューが一通り表示されるようにはなったのだが、今の状態では、サブメニュー内の「カレー」などのアイテムを選択しても何も起こらない。メニューが選択されたときに何かをさせたい場合は、コールバック関数を登録する。

    //  (5)MenuItem 'menu*' が選択されたときに呼ばれるコールバック関数を
    //     menu_activated() に設定する。
    //     また、このときの引数として label も渡すようにする
    g_signal_connect(G_OBJECT(menu1), "activate",
                     G_CALLBACK(menu_activated), (gpointer)label);
    g_signal_connect(G_OBJECT(menu2), "activate",
                     G_CALLBACK(menu_activated), (gpointer)label);
    g_signal_connect(G_OBJECT(menu3), "activate",
                     G_CALLBACK(menu_activated), (gpointer)label);

各メニューが選択されたら、関数 menu_activated が呼ばれるようにする。menu_activated() は、ラベル label に書かれた文字列を変更している。

static void menu_activated(GtkMenuItem *menuitem, GtkWidget *label)
{
    const gchar *name = gtk_menu_item_get_label(menuitem);
    char message[100];
    snprintf(message, 100, "%sの注文を承りました。", name);

    gtk_label_set_text(GTK_LABEL(label), message);
}


(実行結果)

  • 初期状態


  • 「カレー」が選択された

実はサブメニューが表示されているときのキャプチャも取りたかったんだけど、サブメニューが表示されてる間はキャプチャできないのねorz

[GTK+] カスタムウィジェットの作り方

ということで自前のウィジェット作成してみた。「警告つきパスワード入力欄ウィジェット」とでも呼べばいいか。

ウェブ上にある会員制サイトに登録をしようとすると、たいていパスワードの登録を求められる。サイトによっては、パスワード欄に入力されたパスワードが適切なものかを判断し、脆弱なパスワードである間は警告を出すようになっている。そんな雰囲気のあるカスタムウィジェットを作ってみた。



キー入力があるたびにパスワードの妥当性をチェックし(今回は文字数4文字〜10文字という条件のみつけた)、もし妥当なパスワードであれば背景が緑に、妥当でなければ赤になる。上は初期状態で、パスワードが0文字なので妥当でない=背景が赤になっている。また下はパスワードを6文字入力した状態で、背景が緑になっている。


で、そんなウィジェットの作り方・・・なんてのを書いてみたかったのだが時間が…orz
とりあえず登録したばかりの git にあげといたぜ。

http://github.com/egawata/gtksample/tree/master/mypasswd/


解説はまた後日…

[GTK+] 描画する色を指定する

線を描画するの続き。


前回のプログラムでは、線の色として、そのウィジェットの前景色として指定されていたものをそのまま使っていた。しかし、描画する色を明示的に指定したい場面も多々ある。そこで今回は描画色を指定する方法について。

点を打つときに使う関数 gdk_draw_point() の仕様は以下のとおりだった。

void                gdk_draw_point        (GdkDrawable *drawable,
                                                         GdkGC *gc,
                                                         gint x,
                                                         gint y);

第2引数の gc はグラフィックコンテキストというもので、描画のスタイルについていろいろな指定ができるオブジェクト。前回は、GtkDrawingArea ウィジェットに設定されていた値を取り出してきて指定していたが、もちろん新たにGdkGCオブジェクトを生成して、そこで値を指定して gdk_draw_point に渡すこともできる。

前回から変更した関数のみ示す。

void draw_point(
    GtkWidget *area,
    gint x,
    gint y,
    guint16 red,
    guint16 green,
    guint16 blue ) 
{
    GdkGC  *gc;
    GdkColor color;

    color.red   = red;
    color.green = green;
    color.blue  = blue;

    gc = gdk_gc_new(area->window);
    gdk_gc_set_rgb_fg_color(gc, &color);

    gdk_draw_point(area->window,
                   gc,
                   x, y);

    g_object_unref(gc);
}

static gboolean
expose_event(GtkWidget *area, GdkEventExpose *event, gpointer data)
{
    gint x;

    for (x = 0; x < 200; x++)
        draw_point(area, x, x, x * 300, 0, 65535);

    return TRUE;
}
    GdkGC  *gc;
    ....
    gc = gdk_gc_new(area->window);

点を打つための関数 gdk_draw_point() の第2引数に渡す GdkGC オブジェクトを生成し、ポインタを gc に格納する。なお、順番が前後するが、生成した GdkGC オブジェクトは使用後に開放する必要があるため、関数の最後で

    g_object_unref(gc);

としている。

    GdkColor color;

    color.red   = red;
    color.green = green;
    color.blue  = blue;

    ....
    gdk_gc_set_rgb_fg_color(gc, &color);

GdkColor 構造体の各要素にRGB値を設定している。GdkColor 構造体は以下のような構造となっている。

typedef struct {
  guint32 pixel;
  guint16 red;
  guint16 green;
  guint16 blue;
} GdkColor;

red, green, blue に各RGB値の配合度合いを 0 〜 65535 の整数値で指定する。

そして、gc に対して前景色の設定を行うため、gdk_gc_set_rgb_fg_color() という関数を呼び出す。このとき、今生成した GdkColor 構造体のポインタを引数として渡す。

これで、独自のグラフィックコンテキストの準備が出来た。あとは gdk_draw_point() にこの gc を渡せば、指定した色で点を打つことができる。



ソース全体

#include <gtk/gtk.h>

static void destroy(GtkWidget *window, gpointer data)
{
    gtk_main_quit();
}

void draw_point(
    GtkWidget *area, 
    gint x, 
    gint y, 
    guint16 red, 
    guint16 green, 
    guint16 blue) 
{
    GdkGC  *gc;
    GdkColor color;

    color.red   = red;
    color.green = green;
    color.blue  = blue;

    gc = gdk_gc_new(area->window);
    gdk_gc_set_rgb_fg_color(gc, &color);

    gdk_draw_point(area->window, 
                   gc,
                   x, y);

    g_object_unref(gc);
}

static gboolean 
expose_event(GtkWidget *area, GdkEventExpose *event, gpointer data)
{
    gint x;
    
    for (x = 0; x < 200; x++)
        draw_point(area, x, x, x * 300, 0, 65535);

    return TRUE;
}

int main(int argc, char *argv[]) 
{
    GtkWidget *window, *area;
    
    gtk_init(&argc, &argv);

    window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_title(GTK_WINDOW(window), "Drawing Line");
    gtk_widget_set_size_request(window, 200, 200);
    g_signal_connect(G_OBJECT(window), "destroy", 
                     G_CALLBACK(destroy), NULL);

    area = gtk_drawing_area_new();
    g_signal_connect(G_OBJECT(area), "expose_event", 
                     G_CALLBACK(expose_event), NULL);

    gtk_container_add(GTK_CONTAINER(window), area);
    gtk_widget_show_all(window);
    gtk_main();

    return 0;
}