Embed Size (px)
DESCRIPTION
2010年12月18日(土）のMTDDC HOKKAIDOのセッションのスライドです。
Citation preview
1
Movable TypeのWebアプリケーションフレームワークの基本
Movable TypeのWebアプリケーションフレームワークの基本
藤本 壱
2010/12/18MTDDC HOKKAIDO
1
2
今日のアジェンダ今日のアジェンダ
自己紹介
取り上げる事例
プラグイン／Bootstrapアプリケーションの基本
独自オブジェクトの作成(データベースの拡張)独自の管理画面の追加
Listing FrameworkBootstrapアプリケーションの作成
まとめ2
3
自己紹介自己紹介
3
44
自己紹介自己紹介
藤本 壱（ふじもと はじめ）
群馬県前橋市在住
フリーライター
Movable Type関連の書籍も執筆
Twitter : @hjfuji
5
ブログやってます(もちろんMT5で)ブログやってます(もちろんMT5で)
http://www.h-fj.com/blog/
6
取り上げる事例取り上げる事例
6
7
MyTouch(MTで作った位置情報記録アプリケーション)MyTouch(MTで作った位置情報記録アプリケーション)
現在いる場所をMovable Typeに記録するアプリケーション（Foursquareやロケタッチのまね）
場所の情報の追加／編集はMTの管理画面上で
行う（プラグイン）
場所の記録はMTのフレームワークを使った独自アプリケーションで行う（Bootstrapアプリケーショ
ン）
7
8
デモをご覧くださいデモをご覧ください
9
プラグイン／Bootstrapアプリケーションの基本
プラグイン／Bootstrapアプリケーションの基本
9
10
プラグインとは？プラグインとは？
Movable Typeに機能を追加するプログラム
基本的にPerlで記述
さまざまな拡張が可能
テンプレートタグの追加
管理画面のカスタマイズ／独自の管理画面の追加
コールバック（MT本体の処理の節目にプラグインの
処理を追加）
10
11
Bootstrapアプリケーションとは？Bootstrapアプリケーションとは？
Movable Typeのフレームワークを利用した独自のアプリケーション(CGI)MT::Bootstrapモジュールによって起動
Movable Typeコアの各種の機能を利用できる
mt.cgi／mt-comments.cgi等もBootstrapアプリ
ケーション
11
12
プラグイン／Bootstrapアプリケーションの
ファイル構成
プラグイン／Bootstrapアプリケーションの
ファイル構成
プラグインの各種定義を記述
多言語対応用の辞書
Bootstrapアプリケーションの
ローダー
プラグイン／アプリケーションの本体
12
Movable Typeのディレクトリ
プラグイン毎のディレクトリ
config.yaml
l10n_xxx.yaml
xxx.cgi
libディレクトリ
xxx.pm
pluginsディレクトリ
xxx.tmpl
tmplディレクトリ
管理画面のテンプレート
13
MyTouchのファイル構成MyTouchのファイル構成
プラグインの各種定義を記述
日本語用の辞書
Bootstrapアプリケーションの
ローダー
プラグイン／アプリケーションの本体
13
Movable Typeのディレクトリ
MyTouch
config.yaml
l10n_ja.yaml
mt-mytouch.cgi
libディレクトリ
xxx.pm
pluginsディレクトリ
xxx.tmpl
tmplディレクトリ
管理画面のテンプレート
14
config.yamlファイルconfig.yamlファイル
プラグインの各種情報を記述
プラグインの名前や作者等の情報
管理画面に追加するメニューの情報
mt.cgiに追加する処理の情報
追加するテンプレートタグの情報
追加するオブジェクトの情報
etc.yaml形式で記述
14
15
config.yamlの例config.yamlの例
15
name: My Touchid: MyTouchauthor_name: <__trans phrase="Hajime Fujimoto">author_link: http://www.h-fj.com/blog/description: <__trans phrase="Sample of location imformation service.">plugin_link: http://www.h-fj.com/blog/mt5plgdoc/mytouch.phpdoc_link: http://www.h-fj.com/blog/mt5plgdoc/mytouch.phpl10n_lexicon:ja: l10n_ja.yaml
version: 1.00・・・
16
独自オブジェクトの作成(データベースの拡張)独自オブジェクトの作成(データベースの拡張)
16
17
オブジェクトの概要オブジェクトの概要
オブジェクト＝プログラムの構成要素
Movable Typeはオブジェクト指向のプログラム
Movable Typeの個々の構成要素がオブジェクト
ブログ（MT::Blog）ブログ記事（MT::Entry）アイテム（MT::Asset）カテゴリ（MT::Category）etc.
17
18
独自オブジェクトの追加独自オブジェクトの追加
Movable Typeに標準ではないオブジェクトをプラ
グインで追加可能
独自オブジェクトとMovable Type標準のオブジェ
クトを連携した各種の処理が可能
独自オブジェクト追加に必要な作業オブジェクトを定義するパッケージ（Perlのコード）の作
成
config.yamlにオブジェクトの情報を追加
SQLは不要18
19
オブジェクトを定義するパッケージオブジェクトを定義するパッケージ
19
package MyTouch::Location;
use base qw( MT::Object );
__PACKAGE__->install_properties({column_defs => {
'id' => 'integer not null auto_increment','blog_id' => 'integer not null','name' => 'string(255)',・・・
},indexes => {
blog_id => 1,・・・
},child_of => 'MT::Blog',datasource => 'location',primary_key => 'id',class_type => 'location',audit => 1,
});
MT::Objectを継承したクラスを作る
プロパティ（＝テーブルの列）の定義
インデックスの定義
オブジェクトをmt_locationテーブルに保存
主キーはid列オブジェクトのクラスは「location」オブジェクトの生成日時／生成者の自動記録
MT::Blogの子オブジェクトにする
20
config.yamlに追加する内容config.yamlに追加する内容
20
name: My Touchid: MyTouch・・・schema_version: 1.00object_types:location: MyTouch::Location
「location」というクラスのオブジェクトを追加
オブジェクトの定義は「MyTouch::Location」パッケージにある
オブジェクトの追加や更新の際にschema_versionを上げる
21
独自の管理画面の追加独自の管理画面の追加
21
22
管理画面の追加管理画面の追加
mt.cgiに独自の管理画面を追加できる
例：MyTouchの場所の管理（編集）
管理画面追加に必要な作業config.yamlにメニューの情報を追加
config.yamlに管理画面のハンドラ（処理を行うプログ
ラム）の情報を追加
管理画面のハンドラの作成
管理画面のテンプレートの作成
22
23
config.yamlにメニューの情報を追加config.yamlにメニューの情報を追加
23
name: My Touchid: MyTouch・・・applications:cms:menus:locations:label: Locationsorder: 450
locations:manage:label: Manageorder: 100mode: listargs:_type: location
view: blog・・・
「場所」のトップレベルメニューを追加
「場所」→「一覧」のサブメニューを追加
「場所」→「一覧」のサブメニューが選ばれたときに、「http://・・・/mt.cgi?__mode=list&_type=location」を呼び出す
24
config.yamlにハンドラの情報を追加config.yamlにハンドラの情報を追加
24
name: My Touchid: MyTouch・・・applications:cms:menus:
・・・methods:
view_location: $MyTouch::MyTouch::CMS::editsave_location: $MyTouch::MyTouch::CMS::save
25
管理画面表示のハンドラの一般的な流れ管理画面表示のハンドラの一般的な流れ
URLのクエリストリングやフォームのフィールドから情報を得る
→ 変数 = $app->query(‘名前’);管理画面表示に必要なオブジェクトを読み込む
→ MT->model(クラス名)->load(条件);テンプレートに渡す情報をハッシュに代入
例：blog_idという情報に値「1」を代入
→ $params{blog_id} = 1;build_pageメソッドでテンプレートを読み込み、ハッシュのリファレンスを渡して、ビルドした結果を出力
→ $app->build_page(‘テンプレートのファイル名', ¥%params);
26
ハンドラの例ハンドラの例sub edit {
my $app = shift;my $blog_id = $app->param('blog_id');
my %params;$params{blog_id} = $app->param('blog_id');my $id = $app->param('id');if ($id) {
my $class = MT->model('location');my $location = $class->load($id);$params{id} = $location->id;
$params{name} = $location->name;・・・
}・・・$app->build_page('edit_location.tmpl',
¥%params);}
アプリケーションのオブジェクトを得るURLからblog_idを得て変数$blog_idに代入
$params{blog_id}にblog_idの値を代入
「edit_loctions.tmpl」テンプレートを
読み込んで出力
URLからidを得て変数$idに代入
指定されたIDのlocationオブジェクトを
読み込む
$params{id}にオブジェクトのidプロパティを代入$params{name}にオブジェクトのnameプロパティを代入
27
管理画面のテンプレートの基本的な書き方管理画面のテンプレートの基本的な書き方
ブログのテンプレートと同様の書き方（ただしプラグインのディレクトリにファイルとして保存）
テンプレートの先頭と 後にMTIncludeタグで「include/header.tmpl」と「include/footer.tmpl」をインクルード
ハンドラで設定したハッシュの値は、MTGetVarタグで出力
フォームの入力要素（input等）はMTApp:Settingタグで囲む
28
テンプレートの例テンプレートの例<mt:include name="include/header.tmpl">・・・<form method="post" action="<mt:var name="script_url">">
<input type="hidden" name="__mode" value="save" /><input type="hidden" name="_type" value="location" />・・・<input type="hidden" name="blog_id" value="<mt:var name="blog_id">" /><mtapp:setting
id="name"label="<__trans phrase="Name">"hint="<__trans phrase="Name of this location.">"show_hint="1"><input name="name" id="name“
value="<mt:var name="name" escape="html">“size="50" class="full-width" />
</mtapp:setting>・・・<mt:include name="include/actions_bar.tmpl" bar_position="bottom" hide_pager="1">
</form>・・・<mt:include name="include/footer.tmpl">
29
Listing FrameworkListing Framework
30
Listing Frameworkとは？Listing Frameworkとは？
Movable Type 5.1の新機能
オブジェクト一覧の管理画面を出力するフレームワーク
管理画面のハンドラ／テンプレートを作る必要がない（Movable Typeのコアが処理してくれる）
主な設定はconfig.yamlの「listing_screen」と「list_properties」に記述
特殊な出力が必要な部分だけPerlで記述
31
config.yamlに「listing_screens」を追加config.yamlに「listing_screens」を追加name: My Touchid: MyTouch・・・listing_screens:location:primary: nameobject_label: Locationdefault_sort_key: name
view: blogscope_mode: this
・・・
locationクラスの一覧画面を追加主フィールドは「name」オブジェクトのラベルは「Location」デフォルトの並べ替えキーはnameフィールド
ブログの管理画面だけに表示
個々のブログに属するオブジェクトのみ表示
32
config.yamlに「list_properties」を追加config.yamlに「list_properties」を追加
オブジェクトの各プロパティの出力方法を定義
ラベル
順序
必須／オプション
etc.特殊な出力方法が必要な場合は、Perlで出力方
法を記述
33
list_propertiesの部分の例list_propertiesの部分の例
name: My Touchid: MyTouch・・・listing_screens:・・・list_properties:location:name:auto: 1label: Namedisplay: forceorder: 100
・・・
locationクラスのオブジェクトの出力方法を定義
一覧に「name」というフィールドを出力する
出力値の元になるプロパティを自動選択
フィールドのラベルは「Name」このフィールドは強制的に出力フィールドの並び順の指定（数が小さい順）
34
Bootstrapアプリケーションの作成Bootstrapアプリケーションの作成
35
BootStrapアプリケーション作成に必要な作業BootStrapアプリケーション作成に必要な作業
以下のファイル等を作成ローダー（xxx.cgi）各処理のハンドラ
各処理の管理画面用のテンプレート
ハンドラをconfig.yamlに定義
ハンドラ／テンプレートの作成の流れは、プラグインで管理画面を追加する場合とほぼ同じ
36
MyTouchで定義する処理MyTouchで定義する処理
「http://・・・/mt/plugins/mt-mytouch.cgi?__mode=○○○・・・」の「○○○」で処理
を振り分け
タッチの情報を保存save_touch選ばれた場所にタッチtouch_location
現在地／地図の中心の付近にある場所を一覧表示
search_location
メインページ（ 近タッチした場所の一覧等を表示）
main内容モード
37
config.yamlにハンドラを定義config.yamlにハンドラを定義
name: My Touchid: MyTouch・・・applications:cms:
・・・mytouch:
handler: MT::App::MyTouchmethods:main: $MyTouch::MT::App::MyTouch::mainsearch_location: $MyTouch::MT::App::MyTouch::search_locationtouch_location: $MyTouch::MT::App::MyTouch::touch_locationsave_touch: $MyTouch::MT::App::MyTouch::save_touch
38
ローダー（xxx.cgi）の例ローダー（xxx.cgi）の例#!/usr/bin/perl -w
use strict;use lib $ENV{MT_HOME}
? "$ENV{MT_HOME}/lib“: 'lib';
use lib '../../lib';use MT::Bootstrap App
=> 'MT::App::MyTouch';
ライブラリのパスを指定
MT::App::MyTouchで各種の処理を行う
39
ハンドラ／テンプレートの事例ハンドラ／テンプレートの事例タッチのページ
「http://・・・/mt/plugins/mt-mytouch.cgi?__mode=touch_location&id=場所のID・・・」にアクセスしたときに表示されるページ
40
ハンドラの中身ハンドラの中身sub touch_location {
my $app = shift;my %param;my $blog_id = $app->param('blog_id');my $author = $app->user;・・・my $location_id = $app->param('id');my $location = MT->model('location')
->load($location_id);・・・$param{blog_id} = $blog_id;$param{id} = $location->id;$param{name} = $location->name;・・・$app->build_page('touch_location.tmpl',
¥%param);}
URLからブログのID(blog_id)を得る
ログイン中のユーザーを得る
URLから場所のオブジェクトのID（id）を得る
場所のオブジェクトを読み込む
テンプレートに渡す情報をハッシュに代入
touch_location.tmplテンプレートに沿って
ページを表示
41
テンプレートの中身テンプレートの中身<!DOCTYPE html><html lang="ja"><head>
<meta charset="UTF-8" /><title><__trans phrase="Touch [_1]" params="<mt:var name="name">"></title>
</head><body><h1><__trans phrase="Touch [_1]" params="<mt:var name="name">"></h1><form name="touch" action="<mt:var name="app_uri">" method="post">
<input type="hidden" name="__mode" value="save_touch" /><input type="hidden" name="magic_token" value="<mt:var name="magic_token">" /><input type="hidden" name="blog_id" value="<mt:var name="blog_id">" /><input type="hidden" name="id" value="<mt:var name="id">" /><p><__trans phrase="Leave comment."><br />
<textarea name="comment" rows="5" cols="80"></textarea></p><p>
<input type="submit" name="submit" value="<__trans phrase="Touch">" /></p>
</form></body></html>
42
まとめまとめ
43
まとめまとめ
プラグインで以下のようなことが可能
独自オブジェクトの追加
独自の管理画面の追加
MTのフレームワークを利用した独自アプリケー
ションも開発可能
MTでいろいろなアプリケーションを
作ってみてください！
44
One More ThingOne More Thing
45
Movable Type 5 Webサイト制作ガイドVolume 1Movable Type 5 Webサイト制作ガイドVolume 1
MT5の基本操作からテンプ
レート作成までを解説
定価2,500円MTDDC参加者特典2,300円
46
Movable Type 5 Webサイト制作ガイドVolume 2Movable Type 5 Webサイト制作ガイドVolume 2
ウェブサイト／テーマ／カスタムフィールド／変数など、Movable Type 4および5の新
機能を中心に解説
定価3,000円MTDDC参加者特典2,700円Volume 1&2セットで5,000円
47
Movable Type Developer’s Guide Volume 1Movable Type Developer’s Guide Volume 1
Movable Typeをベースに
した開発の基本
オブジェクトの操作からテンプレートタグ追加のプラグインの開発まで
定価3,800円MTDDC参加者特典3,500円
48
ご清聴ありがとうございましたご清聴ありがとうございました
