Movable TypeのＷｅｂアプリケーションフレームワークの基本
•
6 likes•4,183 views
2010年12月18日(土）のMTDDC HOKKAIDOのセッションのスライドです。
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (10)
Similar to Movable TypeのＷｅｂアプリケーションフレームワークの基本
Similar to Movable TypeのＷｅｂアプリケーションフレームワークの基本 (20)
More from Hajime Fujimoto
More from Hajime Fujimoto (20)
Recently uploaded
Recently uploaded (10)
Movable TypeのＷｅｂアプリケーションフレームワークの基本
- 3. 自己紹介 3
- 4. 自己紹介 藤本 壱（ふじもと はじめ） 群馬県前橋市在住 フリーライター Movable Type関連の書籍も執筆 Twitter : @hjfuji 4
- 5. ブログやってます(もちろんMT5で) http://www.h-fj.com/blog/ 5
- 6. 取り上げる事例 6
- 8. デモをご覧ください 8
- 10. プラグインとは？ Movable Typeに機能を追加するプログラム 基本的にPerlで記述 さまざまな拡張が可能 テンプレートタグの追加 管理画面のカスタマイズ／独自の管理画面の追加 コールバック（MT本体の処理の節目にプラグインの 処理を追加） 10
- 12. プラグイン／Bootstrapアプリケーションの ファイル構成 Movable Typeのディレクトリ pluginsディレクトリ プラグイン毎のディレクトリ config.yaml プラグインの各種定義を記述 l10n_xxx.yaml 多言語対応用の辞書 xxx.cgi Bootstrapアプリケーションの ローダー libディレクトリ xxx.pm プラグイン／アプリケーションの本体 tmplディレクトリ xxx.tmpl 管理画面のテンプレート 12
- 13. MyTouchのファイル構成 Movable Typeのディレクトリ pluginsディレクトリ MyTouch config.yaml プラグインの各種定義を記述 l10n_ja.yaml 日本語用の辞書 mt-mytouch.cgi Bootstrapアプリケーションの ローダー libディレクトリ xxx.pm プラグイン／アプリケーションの本体 tmplディレクトリ xxx.tmpl 管理画面のテンプレート 13
- 14. config.yamlファイル プラグインの各種情報を記述 プラグインの名前や作者等の情報 管理画面に追加するメニューの情報 mt.cgiに追加する処理の情報 追加するテンプレートタグの情報 追加するオブジェクトの情報 etc. yaml形式で記述 14
- 15. config.yamlの例 name: My Touch id: MyTouch author_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.php doc_link: http://www.h-fj.com/blog/mt5plgdoc/mytouch.php l10n_lexicon: ja: l10n_ja.yaml version: 1.00 ・・・ 15
- 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. オブジェクトを定義するパッケージ package MyTouch::Location; use base qw( MT::Object ); 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', MT::Blogの子オブジェクトにする datasource => 'location', オブジェクトをmt_locationテーブルに保存 primary_key => 'id', 主キーはid列 class_type => 'location', オブジェクトのクラスは「location」 audit => 1, オブジェクトの生成日時／生成者の }); 自動記録 19
- 20. config.yamlに追加する内容 name: My Touch id: MyTouch ・・・ オブジェクトの追加や schema_version: 1.00 更新の際に object_types: schema_versionを上げる location: MyTouch::Location オブジェクトの定義は「MyTouch::Location」パッケージにある 「location」というクラスのオブジェクトを追加 20
- 21. 独自の管理画面の追加 21
- 22. 管理画面の追加 mt.cgiに独自の管理画面を追加できる 例：MyTouchの場所の管理（編集） 管理画面追加に必要な作業 config.yamlにメニューの情報を追加 config.yamlに管理画面のハンドラ（処理を行うプログ ラム）の情報を追加 管理画面のハンドラの作成 管理画面のテンプレートの作成 22
- 23. config.yamlにメニューの情報を追加 name: My Touch id: MyTouch ・・・ applications: cms: menus: locations: label: Locations 「場所」のトップレベルメニューを追加 order: 450 locations:manage: label: Manage 「場所」→「一覧」のサブメニューを追加 order: 100 mode: list 「場所」→「一覧」のサブメニューが選ばれたときに、 args: 「http://・・・/mt.cgi?__mode=list&_type=location」を _type: location 呼び出す view: blog ・・・ 23
- 24. config.yamlにハンドラの情報を追加 name: My Touch id: MyTouch ・・・ applications: cms: menus: ・・・ methods: view_location: $MyTouch::MyTouch::CMS::edit save_location: $MyTouch::MyTouch::CMS::save 24
- 25. 管理画面表示のハンドラの一般的な流れ URLのクエリストリングやフォームのフィールドから情報を得る → 変数 = $app->query(‘名前’); 管理画面表示に必要なオブジェクトを読み込む → MT->model(クラス名)->load(条件); テンプレートに渡す情報をハッシュに代入 例：blog_idという情報に値「1」を代入 → $params{blog_id} = 1; build_pageメソッドでテンプレートを読み込み、ハッシュのリファレ ンスを渡して、ビルドした結果を出力 → $app->build_page(‘テンプレートのファイル名', ¥%params); 25
- 26. ハンドラの例 sub edit { my $app = shift; アプリケーションのオブジェクトを得る my $blog_id = $app->param('blog_id'); URLからblog_idを得て 変数$blog_idに代入 my %params; $params{blog_id} = $app->param('blog_id'); $params{blog_id}にblog_idの値を代入 my $id = $app->param('id'); URLからidを得て変数$idに代入 if ($id) { my $class = MT->model('location'); 指定されたIDのlocationオブジェクトを my $location = $class->load($id); 読み込む $params{id} = $location->id; $params{id}に オブジェクトのidプロパティを代入 $params{name} = $location->name; $params{name}に ・・・ オブジェクトのnameプロパティを代入 } ・・・ $app->build_page('edit_location.tmpl', 「edit_loctions.tmpl」テンプレートを ¥%params); 読み込んで出力 } 26
- 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"> 28
- 29. Listing Framework 29
- 30. Listing Frameworkとは？ Movable Type 5.1の新機能 オブジェクト一覧の管理画面を出力するフレーム ワーク 管理画面のハンドラ／テンプレートを作る必要が ない（Movable Typeのコアが処理してくれる） 主な設定はconfig.yamlの「listing_screen」と 「list_properties」に記述 特殊な出力が必要な部分だけPerlで記述 30
- 31. config.yamlに「listing_screens」を追加 name: My Touch id: MyTouch ・・・ listing_screens: location: locationクラスの一覧画面を追加 primary: name 主フィールドは「name」 object_label: Location オブジェクトのラベルは「Location」 default_sort_key: name デフォルトの並べ替えキーは nameフィールド view: blog ブログの管理画面だけに表示 scope_mode: this 個々のブログに属する ・・・ オブジェクトのみ表示 31
- 32. config.yamlに「list_properties」を追加 オブジェクトの各プロパティの出力方法を定義 ラベル 順序 必須／オプション etc. 特殊な出力方法が必要な場合は、Perlで出力方 法を記述 32
- 33. list_propertiesの部分の例 name: My Touch id: MyTouch ・・・ listing_screens: ・・・ list_properties: location: locationクラスのオブジェクトの出力方法を定義 name: 一覧に「name」というフィールドを出力する auto: 1 出力値の元になるプロパティを自動選択 label: Name フィールドのラベルは「Name」 display: force このフィールドは強制的に出力 order: 100 フィールドの並び順の指定（数が小さい順） ・・・ 33
- 34. Bootstrapアプリケーションの作成 34
- 35. BootStrapアプリケーション作成に必要な作業 以下のファイル等を作成 ローダー（xxx.cgi） 各処理のハンドラ 各処理の管理画面用のテンプレート ハンドラをconfig.yamlに定義 ハンドラ／テンプレートの作成の流れは、プラグイ ンで管理画面を追加する場合とほぼ同じ 35
- 36. MyTouchで定義する処理 「http://・・・/mt/plugins/mt- mytouch.cgi?__mode=○○○・・・」の「○○○」で処理 を振り分け モード 内容 main メインページ（最近タッチした場所の 一覧等を表示） search_location 現在地／地図の中心の付近にある 場所を一覧表示 touch_location 選ばれた場所にタッチ save_touch タッチの情報を保存 36
- 37. config.yamlにハンドラを定義 name: My Touch id: MyTouch ・・・ applications: cms: ・・・ mytouch: handler: MT::App::MyTouch methods: main: $MyTouch::MT::App::MyTouch::main search_location: $MyTouch::MT::App::MyTouch::search_location touch_location: $MyTouch::MT::App::MyTouch::touch_location save_touch: $MyTouch::MT::App::MyTouch::save_touch 37
- 38. ローダー（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'; 38
- 40. ハンドラの中身 sub touch_location { my $app = shift; my %param; my $blog_id = $app->param('blog_id'); URLからブログのID(blog_id)を得る my $author = $app->user; ログイン中のユーザーを得る ・・・ my $location_id = $app->param('id'); URLから場所のオブジェクトのID（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', touch_location.tmplテンプレートに沿って ¥%param); ページを表示 } 40
- 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> 41
- 42. まとめ 42
- 43. まとめ プラグインで以下のようなことが可能 独自オブジェクトの追加 独自の管理画面の追加 MTのフレームワークを利用した独自アプリケー ションも開発可能 MTでいろいろなアプリケーションを 作ってみてください！ 43
- 44. One More Thing 44
- 45. Movable Type 5 Webサイト制作ガイド Volume 1 MT5の基本操作からテンプ レート作成までを解説 定価2,500円 MTDDC参加者特典2,300円 45
- 46. Movable Type 5 Webサイト制作ガイド Volume 2 ウェブサイト／テーマ／カスタ ムフィールド／変数など、 Movable Type 4および5の新 機能を中心に解説 定価3,000円 MTDDC参加者特典2,700円 Volume 1&2セットで5,000円 46
- 47. Movable Type Developer’s Guide Volume 1 Movable Typeをベースに した開発の基本 オブジェクトの操作からテン プレートタグ追加のプラグイ ンの開発まで 定価3,800円 MTDDC参加者特典3,500 円 47
- 48. ご清聴ありがとうございました 48