Movable TypeのWebアプリケーションフレームワークの基本

9,348 views

Published on

2010年12月18日(土)のMTDDC HOKKAIDOのセッションのスライドです。

Published in: Technology

Movable TypeのWebアプリケーションフレームワークの基本

  1. 1. Movable TypeのWebアプリケーションフレームワークの基本藤本 壱2010/12/18MTDDC HOKKAIDO 1
  2. 2. 今日のアジェンダ自己紹介取り上げる事例プラグイン/Bootstrapアプリケーションの基本独自オブジェクトの作成(データベースの拡張)独自の管理画面の追加Listing FrameworkBootstrapアプリケーションの作成まとめ 2
  3. 3. 自己紹介 3
  4. 4. 自己紹介藤本 壱(ふじもと はじめ)群馬県前橋市在住フリーライターMovable Type関連の書籍も執筆Twitter : @hjfuji 4
  5. 5. ブログやってます(もちろんMT5で) http://www.h-fj.com/blog/ 5
  6. 6. 取り上げる事例 6
  7. 7. MyTouch(MTで作った位置情報記録アプリケーション)現在いる場所をMovable Typeに記録するアプリケーション(Foursquareやロケタッチのまね)場所の情報の追加/編集はMTの管理画面上で行う(プラグイン)場所の記録はMTのフレームワークを使った独自アプリケーションで行う(Bootstrapアプリケーション) 7
  8. 8. デモをご覧ください 8
  9. 9. プラグイン/Bootstrapアプリケーションの基本 9
  10. 10. プラグインとは?Movable Typeに機能を追加するプログラム基本的にPerlで記述さまざまな拡張が可能 テンプレートタグの追加 管理画面のカスタマイズ/独自の管理画面の追加 コールバック(MT本体の処理の節目にプラグインの 処理を追加) 10
  11. 11. Bootstrapアプリケーションとは?Movable Typeのフレームワークを利用した独自のアプリケーション(CGI)MT::Bootstrapモジュールによって起動Movable Typeコアの各種の機能を利用できるmt.cgi/mt-comments.cgi等もBootstrapアプリケーション 11
  12. 12. プラグイン/Bootstrapアプリケーションのファイル構成Movable Typeのディレクトリ pluginsディレクトリ プラグイン毎のディレクトリ config.yaml プラグインの各種定義を記述 l10n_xxx.yaml 多言語対応用の辞書 xxx.cgi Bootstrapアプリケーションの ローダー libディレクトリ xxx.pm プラグイン/アプリケーションの本体 tmplディレクトリ xxx.tmpl 管理画面のテンプレート 12
  13. 13. MyTouchのファイル構成Movable Typeのディレクトリ pluginsディレクトリ MyTouch config.yaml プラグインの各種定義を記述 l10n_ja.yaml 日本語用の辞書 mt-mytouch.cgi Bootstrapアプリケーションの ローダー libディレクトリ xxx.pm プラグイン/アプリケーションの本体 tmplディレクトリ xxx.tmpl 管理画面のテンプレート 13
  14. 14. config.yamlファイル プラグインの各種情報を記述 プラグインの名前や作者等の情報 管理画面に追加するメニューの情報 mt.cgiに追加する処理の情報 追加するテンプレートタグの情報 追加するオブジェクトの情報 etc. yaml形式で記述 14
  15. 15. config.yamlの例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.yamlversion: 1.00・・・ 15
  16. 16. 独自オブジェクトの作成(データベースの拡張) 16
  17. 17. オブジェクトの概要オブジェクト=プログラムの構成要素Movable Typeはオブジェクト指向のプログラムMovable Typeの個々の構成要素がオブジェクト ブログ(MT::Blog) ブログ記事(MT::Entry) アイテム(MT::Asset) カテゴリ(MT::Category) etc. 17
  18. 18. 独自オブジェクトの追加Movable Typeに標準ではないオブジェクトをプラグインで追加可能独自オブジェクトとMovable Type標準のオブジェクトを連携した各種の処理が可能独自オブジェクト追加に必要な作業 オブジェクトを定義するパッケージ(Perlのコード)の作 成 config.yamlにオブジェクトの情報を追加 SQLは不要 18
  19. 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. 20. config.yamlに追加する内容name: My Touchid: MyTouch・・・ オブジェクトの追加やschema_version: 1.00 更新の際にobject_types: schema_versionを上げる location: MyTouch::Location オブジェクトの定義は「MyTouch::Location」パッケージにある「location」というクラスのオブジェクトを追加 20
  21. 21. 独自の管理画面の追加 21
  22. 22. 管理画面の追加mt.cgiに独自の管理画面を追加できる 例:MyTouchの場所の管理(編集)管理画面追加に必要な作業 config.yamlにメニューの情報を追加 config.yamlに管理画面のハンドラ(処理を行うプログ ラム)の情報を追加 管理画面のハンドラの作成 管理画面のテンプレートの作成 22
  23. 23. config.yamlにメニューの情報を追加name: My Touchid: 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. 24. config.yamlにハンドラの情報を追加name: My Touchid: MyTouch・・・applications: cms: menus:・・・ methods: view_location: $MyTouch::MyTouch::CMS::edit save_location: $MyTouch::MyTouch::CMS::save 24
  25. 25. 管理画面表示のハンドラの一般的な流れURLのクエリストリングやフォームのフィールドから情報を得る→ 変数 = $app->query(‘名前’);管理画面表示に必要なオブジェクトを読み込む→ MT->model(クラス名)->load(条件);テンプレートに渡す情報をハッシュに代入 例:blog_idという情報に値「1」を代入 → $params{blog_id} = 1;build_pageメソッドでテンプレートを読み込み、ハッシュのリファレンスを渡して、ビルドした結果を出力→ $app->build_page(‘テンプレートのファイル名, ¥%params); 25
  26. 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
  27. 27. 管理画面のテンプレートの基本的な書き方ブログのテンプレートと同様の書き方(ただしプラグインのディレクトリにファイルとして保存)テンプレートの先頭と最後にMTIncludeタグで「include/header.tmpl」と「include/footer.tmpl」をインクルードハンドラで設定したハッシュの値は、MTGetVarタグで出力フォームの入力要素(input等)はMTApp:Settingタグで囲む 27
  28. 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. 29. Listing Framework 29
  30. 30. Listing Frameworkとは? Movable Type 5.1の新機能 オブジェクト一覧の管理画面を出力するフレーム ワーク 管理画面のハンドラ/テンプレートを作る必要が ない(Movable Typeのコアが処理してくれる) 主な設定はconfig.yamlの「listing_screen」と 「list_properties」に記述 特殊な出力が必要な部分だけPerlで記述 30
  31. 31. config.yamlに「listing_screens」を追加name: My Touchid: MyTouch・・・listing_screens: location: locationクラスの一覧画面を追加 primary: name 主フィールドは「name」 object_label: Location オブジェクトのラベルは「Location」 default_sort_key: name デフォルトの並べ替えキーは nameフィールド view: blog ブログの管理画面だけに表示 scope_mode: this 個々のブログに属する・・・ オブジェクトのみ表示 31
  32. 32. config.yamlに「list_properties」を追加 オブジェクトの各プロパティの出力方法を定義 ラベル 順序 必須/オプション etc. 特殊な出力方法が必要な場合は、Perlで出力方 法を記述 32
  33. 33. list_propertiesの部分の例name: My Touchid: MyTouch・・・listing_screens:・・・list_properties: location: locationクラスのオブジェクトの出力方法を定義 name: 一覧に「name」というフィールドを出力する auto: 1 出力値の元になるプロパティを自動選択 label: Name フィールドのラベルは「Name」 display: force このフィールドは強制的に出力 order: 100 フィールドの並び順の指定(数が小さい順)・・・ 33
  34. 34. Bootstrapアプリケーションの作成 34
  35. 35. BootStrapアプリケーション作成に必要な作業 以下のファイル等を作成 ローダー(xxx.cgi) 各処理のハンドラ 各処理の管理画面用のテンプレート ハンドラをconfig.yamlに定義 ハンドラ/テンプレートの作成の流れは、プラグイ ンで管理画面を追加する場合とほぼ同じ 35
  36. 36. MyTouchで定義する処理 「http://・・・/mt/plugins/mt- mytouch.cgi?__mode=○○○・・・」の「○○○」で処理 を振り分けモード 内容main メインページ(最近タッチした場所の 一覧等を表示)search_location 現在地/地図の中心の付近にある 場所を一覧表示touch_location 選ばれた場所にタッチsave_touch タッチの情報を保存 36
  37. 37. config.yamlにハンドラを定義name: My Touchid: 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. 38. ローダー(xxx.cgi)の例#!/usr/bin/perl -wuse 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
  39. 39. ハンドラ/テンプレートの事例タッチのページ「http://・・・/mt/plugins/mt-mytouch.cgi?__mode=touch_location&id=場所のID・・・」にアクセスしたときに表示されるページ 39
  40. 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. 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. まとめ 42
  43. 43. まとめプラグインで以下のようなことが可能 独自オブジェクトの追加 独自の管理画面の追加MTのフレームワークを利用した独自アプリケーションも開発可能 MTでいろいろなアプリケーションを 作ってみてください! 43
  44. 44. One More Thing 44
  45. 45. Movable Type 5 Webサイト制作ガイドVolume 1 MT5の基本操作からテンプ レート作成までを解説 定価2,500円 MTDDC参加者特典2,300円 45
  46. 46. Movable Type 5 Webサイト制作ガイドVolume 2 ウェブサイト/テーマ/カスタ ムフィールド/変数など、 Movable Type 4および5の新 機能を中心に解説 定価3,000円 MTDDC参加者特典2,700円 Volume 1&2セットで5,000円 46
  47. 47. Movable Type Developer’s Guide Volume 1 Movable Typeをベースに した開発の基本 オブジェクトの操作からテン プレートタグ追加のプラグイ ンの開発まで 定価3,800円 MTDDC参加者特典3,500 円 47
  48. 48. ご清聴ありがとうございました 48

×