Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Movable Typeの可能性を広げるアドオン
DynamicMTMLについて
1
• 札幌生まれ/愛知県在住 28歳
• Web制作会社のテクニカル・ディレクター
• Webシステムの提案と導入サポート
MTのテンプレート設計・カスタマイズ
• MTとサーバ・インフラなどが好きで
プログラムが苦手
鈴木健太郎(@riatw)
念願の「初」北海道です!
やっとこれましたヽ(=́▽`=)ノ
• はじめてMTを使ったのはMT4.1のころ
• 仕事で使い始めたのがきっかけ
• 5年間で50以上の案件に導入
• 仕事もプライベートもMTが大好き
MTDDC Meetup Nagoya 2014の企画をしています!
1月18日(土)ウィン...
• プログラムが書けなくてもシステムが作れること
• 身の丈以上のことができること
MTを好きになった理由
これなら自分にもできるかも!
と思いました
そんな自分がさらにMTを好きになった
きっかけ、それが…
DynamicMTML
このテーマを選んだ理由
• プログラムは苦手だけどMTなら分かるWebデザイナー
• PHPは得意だけどデザインが苦手なWebプログラマー
• Webアプリ・サービスに興味のあるディレクター
このような方々にDynamicMTMLの
面白さと便利さを知ってもらうこと
• DynamicMTMLとは?
• DynamicMTMLを使う理由
• 特に便利な標準機能 7つ
• DynamicMTMLで作れるサイト
• まとめ
アジェンダ
DynamicMTMLとは?
• アルファサード社が開発したMT向けのアドオン
• 動的ページ生成機能を大幅強化!
• PHPでDynamicMTML用のプラグインが作れる
概要
MTユーザとPHPユーザが仲良くなれるプラグイン
ざっくり言ってしまえば、DynamicMTM...
• Movable Type v5.04以降
• PHPによるダイナミックパブリッシングが
動作する環境
• mod_rewriteが有効で.htaccessによる設定が可能な環境
動作環境
• PowerCMS/DynamicMTML · GitHub
https://github.com/PowerCMS/DynamicMTML
• DynamicMTML 導入のポイント
http://riatw.me/blog/dynamic...
DynamicMTMLを使う理由
それは制作会社が
システム案件に強くなるため
なぜ強くなる必要があるのか?
それはクライアントから
求められるようになってきたから
制作会社にもシステム案件への
対応力が求められている
• 完全な静的サイトは殆ど無くなりつつある
• CMS、お問い合わせフォームなどは完全にマスト
• 顧客情報管理、他API連動、既存システムとの連動…
など…システム関係の要件は増加の一途
要件の多様化
• Webサイトとシステムが密に絡むようになってきた
• 今まで以上のスピード感が求められるようになった
• 案件に対するコスト意識が厳しくなってきた
→デザインは制作会社、システムはシステム会社と
 発注を分ける余裕が無くなってきた
• We...
• 簡単なシステムであれば制作会社が実装する
• 難しいシステムでも見た目と簡単なシステム部分は
制作会社だけでメンテナンスできるようにする
対応策
「メンテができる」って大事
• HTMLタグとPHPコードが混在したソースコード
• 恐る恐る触る
→思ったようにできない
→知らない間にバグが生まれる
→何これ暗号なの、いみふ(ry…
こんなことはありませんか?
(́・ω:;.:...
デザイナー編
• システムを考慮していないデザインとコーディング
• 恐る恐るシステムを組み込む
→思ったようにできない
→デザインが再現できない
→どうやっても再現できないわ、こんなの(ry
こんなことはありませんか?
(́・ω:;.:...
エンジニア編
• DynamicMTMLなら、ロジックはPHP、見た目はMTタグと
完全に分離できる
• デザイナーはMTタグさえ分かれば、見た目の調整や簡単な
機能追加はデザイナーだけでできる
• プログラマーはデザインが分からなくてもPHPが
書ければい...
両者の強い所を活かすことで
メンテナンス性と再利用性の高い
サイトをつくることができる
DynamicMTMLはこのような
変化に対応する制作者の強い味方
デザインとプログラムが完全に
分離することでお互い保守が楽に!
• 提案→デザイン→システムがワンストップが提供できる
• デザインの修正が自社で完結することから、サポートの
スピードが向上する→信頼を獲得しやすい
• できることの幅が広がることで、デザイン・企画だけの
提案よりも大規模の案件に挑戦できる
...
• 従来の開発案件に加えて新しい案件を開拓できる
• デザインが得意な制作会社とコネクションが広がる
• 企画やデザインを気にせず、得意なシステムに注力する
ことができる
システム会社が得られるメリット
特に便利な標準機能 7つ
• ブログ記事の詳細検索
• ユーザエージェントによる分岐
• ログイン状況による分岐
• ユーザ権限に応じた分岐
• 静的ファイルの動的ビルド
• PHP API
• コールバック
• 条件に応じてブログ記事を出力できる
• MTEntriesに代わるタグとして使用できる
• タイトル・カテゴリID・投稿日などの条件が指定できる
ブログ記事の詳細検索
サンプル
//タイトルに MT が含まれている記事を表示する場合
//targetにはMTの標準のフィールドが指定できる
<mt:searchentries target="title" query="MT" lastn="10">
<li><...
• ユーザエージェント(端末情報)を取得できる
• 端末の種類・キャリアごとに分岐できる
• 同一URLでPC・スマフォ対応のサイトを作成できる
ユーザーエージェントによる分岐
サンプル
<mt:IfUserAgent wants= SmartPhone >
<$mt:include module="スマートフォン向けの内容"$>
<mt:else>
<$mt:include module="PC向けの内容"$>
</...
• ユーザのログイン状況によって表示を変えることができる
• 会員限定サイトやユーザのマイページを作ることができる
• 公開サイトに管理画面へのリンクを表示することができる
ログイン状況による分岐
サンプル
<p>○○の価格</p>
<mt:IfLogin>
//ログインしている場合
<p>19,800円がなんと、<span>16,800円!</span></p>
<mt:else>
<p>19,800円</p>
</mt:If>
38
• MTにログイン中のユーザ権限による分岐ができる
• ログイン状況による分岐と組み合わせることで、
一部の管理者だけが見える情報などの配信もできる
ユーザの権限に応じた分岐
• MT管理外のファイル(普通のHTMLなど)に直接MTタグを
書くことができる
• 1ファイルの中で静的に出力されるところと動的に出力される
ところを分けることができる
静的ファイルの動的ビルド
サンプル
<html>
<body>
<!-- 以下の内容は通常通りに再構築される -->
<mt:blogname>
<!-- 以下の内容は表示時に再構築される -->
<MTDynamicMTML>
<mt:date> <!-- 現在の日付...
• MTの各種機能に対してPHPからアクセスできる
• MTのデータベースにPHPからアクセスすることができる
• プラグインを追加すれば、他のシステムのデータベースに
アクセスをして、MTタグで出力することができる
(WordPressのデー...
• ページを表示する前・後などにPHPの処理を追加できる
例1)フォーム送信されたデータの検証
例2)MTのユーザ情報を使用したBasic認証
例3)MTのデータベースに接続できなかった際の例外処理
コールバック
DynamicMTMLで作れるサイト
• イベント集客サイト
• レシピ・口コミ投稿サイト
• 会員限定情報サイト
• 伝票管理システム
• 見積作成システム
• その他簡単なWebアプリなど
DynamicMTML向きのサイト
• REST APIのみでサービスを提供するサイト
• データベースにおけるデータの持ち方が特殊なサイト
• 動作スピードが最優先なサイト
→ソーシャルゲームや大規模なWebカタログなど
DynamicMTMLが不向きなサイト
まとめ
• DynamicMTMLは制作会社でもシステム案件の
対応力を上げることのできるツール
• 従来の知識を生かしたまま、よりリッチなサイトを
簡単に作ること・保守することができる
• DynamicMTMLを使えば新しい協業の形が見えてくる
コ...
最後に少しだけ
• DynamicMTMLを使えば、動的生成向けのプラグインを
PHPで書くことができます
→MT案件は豊富にあります。協業の道もご検討ください
• DynamicMTML本体はGithubで管理されており、
いつでもPullRequestを受...
@riatw on Twitter
http://riatw.me/
Thank you so much!
51
Upcoming SlideShare
Loading in …5
×

「Movable Typeの可能性を広げるアドオン「DynamicMTML」について」 v2 (MTDDC Meetup HOKKAIDO 2013版)

4,148 views

Published on

2013年10月6日に北海道で行われたMovable Typeセミナーで使用した資料です。

-----
MTDDC Meetup HOKKAIDO 2013
http://mtddc2013.mt-ezo.net/

-----
フォローアップ記事(書きました!)
http://riatw.me/blog/dynamicmtml_point.html

Published in: Technology

「Movable Typeの可能性を広げるアドオン「DynamicMTML」について」 v2 (MTDDC Meetup HOKKAIDO 2013版)

  1. 1. Movable Typeの可能性を広げるアドオン DynamicMTMLについて 1
  2. 2. • 札幌生まれ/愛知県在住 28歳 • Web制作会社のテクニカル・ディレクター • Webシステムの提案と導入サポート MTのテンプレート設計・カスタマイズ • MTとサーバ・インフラなどが好きで プログラムが苦手 鈴木健太郎(@riatw)
  3. 3. 念願の「初」北海道です! やっとこれましたヽ(=́▽`=)ノ
  4. 4. • はじめてMTを使ったのはMT4.1のころ • 仕事で使い始めたのがきっかけ • 5年間で50以上の案件に導入 • 仕事もプライベートもMTが大好き MTDDC Meetup Nagoya 2014の企画をしています! 1月18日(土)ウィンクあいち 1103号室(予定) MTは今年で5年目
  5. 5. • プログラムが書けなくてもシステムが作れること • 身の丈以上のことができること MTを好きになった理由 これなら自分にもできるかも! と思いました
  6. 6. そんな自分がさらにMTを好きになった きっかけ、それが…
  7. 7. DynamicMTML
  8. 8. このテーマを選んだ理由
  9. 9. • プログラムは苦手だけどMTなら分かるWebデザイナー • PHPは得意だけどデザインが苦手なWebプログラマー • Webアプリ・サービスに興味のあるディレクター このような方々にDynamicMTMLの 面白さと便利さを知ってもらうこと
  10. 10. • DynamicMTMLとは? • DynamicMTMLを使う理由 • 特に便利な標準機能 7つ • DynamicMTMLで作れるサイト • まとめ アジェンダ
  11. 11. DynamicMTMLとは?
  12. 12. • アルファサード社が開発したMT向けのアドオン • 動的ページ生成機能を大幅強化! • PHPでDynamicMTML用のプラグインが作れる 概要 MTユーザとPHPユーザが仲良くなれるプラグイン ざっくり言ってしまえば、DynamicMTMLは
  13. 13. • Movable Type v5.04以降 • PHPによるダイナミックパブリッシングが 動作する環境 • mod_rewriteが有効で.htaccessによる設定が可能な環境 動作環境
  14. 14. • PowerCMS/DynamicMTML · GitHub https://github.com/PowerCMS/DynamicMTML • DynamicMTML 導入のポイント http://riatw.me/blog/dynamicmtml_point.html • はじめてのDynamicMTML (かたつむりくんのWWW) http://www.tinybeans.net/blog/movable-type/dynamicmtml/ 参考情報
  15. 15. DynamicMTMLを使う理由
  16. 16. それは制作会社が システム案件に強くなるため
  17. 17. なぜ強くなる必要があるのか?
  18. 18. それはクライアントから 求められるようになってきたから
  19. 19. 制作会社にもシステム案件への 対応力が求められている
  20. 20. • 完全な静的サイトは殆ど無くなりつつある • CMS、お問い合わせフォームなどは完全にマスト • 顧客情報管理、他API連動、既存システムとの連動… など…システム関係の要件は増加の一途 要件の多様化
  21. 21. • Webサイトとシステムが密に絡むようになってきた • 今まで以上のスピード感が求められるようになった • 案件に対するコスト意識が厳しくなってきた →デザインは制作会社、システムはシステム会社と  発注を分ける余裕が無くなってきた • Webサイトがあることが当たり前になり、より一層 成果が求められるように、結果に厳しくなってきた 背景
  22. 22. • 簡単なシステムであれば制作会社が実装する • 難しいシステムでも見た目と簡単なシステム部分は 制作会社だけでメンテナンスできるようにする 対応策 「メンテができる」って大事
  23. 23. • HTMLタグとPHPコードが混在したソースコード • 恐る恐る触る →思ったようにできない →知らない間にバグが生まれる →何これ暗号なの、いみふ(ry… こんなことはありませんか? (́・ω:;.:... デザイナー編
  24. 24. • システムを考慮していないデザインとコーディング • 恐る恐るシステムを組み込む →思ったようにできない →デザインが再現できない →どうやっても再現できないわ、こんなの(ry こんなことはありませんか? (́・ω:;.:... エンジニア編
  25. 25. • DynamicMTMLなら、ロジックはPHP、見た目はMTタグと 完全に分離できる • デザイナーはMTタグさえ分かれば、見た目の調整や簡単な 機能追加はデザイナーだけでできる • プログラマーはデザインが分からなくてもPHPが 書ければいい(MTの事情が少し分かると嬉しい) 解決策の一案としてのDynamicMTML ヽ(=́▽`=)ノ
  26. 26. 両者の強い所を活かすことで メンテナンス性と再利用性の高い サイトをつくることができる
  27. 27. DynamicMTMLはこのような 変化に対応する制作者の強い味方
  28. 28. デザインとプログラムが完全に 分離することでお互い保守が楽に!
  29. 29. • 提案→デザイン→システムがワンストップが提供できる • デザインの修正が自社で完結することから、サポートの スピードが向上する→信頼を獲得しやすい • できることの幅が広がることで、デザイン・企画だけの 提案よりも大規模の案件に挑戦できる 制作会社が得られるメリット
  30. 30. • 従来の開発案件に加えて新しい案件を開拓できる • デザインが得意な制作会社とコネクションが広がる • 企画やデザインを気にせず、得意なシステムに注力する ことができる システム会社が得られるメリット
  31. 31. 特に便利な標準機能 7つ
  32. 32. • ブログ記事の詳細検索 • ユーザエージェントによる分岐 • ログイン状況による分岐 • ユーザ権限に応じた分岐 • 静的ファイルの動的ビルド • PHP API • コールバック
  33. 33. • 条件に応じてブログ記事を出力できる • MTEntriesに代わるタグとして使用できる • タイトル・カテゴリID・投稿日などの条件が指定できる ブログ記事の詳細検索
  34. 34. サンプル //タイトルに MT が含まれている記事を表示する場合 //targetにはMTの標準のフィールドが指定できる <mt:searchentries target="title" query="MT" lastn="10"> <li><a href="<$mt:entrypermalink$>"><$mt:entrytitle escape="html"$></a></li> </mt:searchentries> 34
  35. 35. • ユーザエージェント(端末情報)を取得できる • 端末の種類・キャリアごとに分岐できる • 同一URLでPC・スマフォ対応のサイトを作成できる ユーザーエージェントによる分岐
  36. 36. サンプル <mt:IfUserAgent wants= SmartPhone > <$mt:include module="スマートフォン向けの内容"$> <mt:else> <$mt:include module="PC向けの内容"$> </mt:IfUserAgent> 36
  37. 37. • ユーザのログイン状況によって表示を変えることができる • 会員限定サイトやユーザのマイページを作ることができる • 公開サイトに管理画面へのリンクを表示することができる ログイン状況による分岐
  38. 38. サンプル <p>○○の価格</p> <mt:IfLogin> //ログインしている場合 <p>19,800円がなんと、<span>16,800円!</span></p> <mt:else> <p>19,800円</p> </mt:If> 38
  39. 39. • MTにログイン中のユーザ権限による分岐ができる • ログイン状況による分岐と組み合わせることで、 一部の管理者だけが見える情報などの配信もできる ユーザの権限に応じた分岐
  40. 40. • MT管理外のファイル(普通のHTMLなど)に直接MTタグを 書くことができる • 1ファイルの中で静的に出力されるところと動的に出力される ところを分けることができる 静的ファイルの動的ビルド
  41. 41. サンプル <html> <body> <!-- 以下の内容は通常通りに再構築される --> <mt:blogname> <!-- 以下の内容は表示時に再構築される --> <MTDynamicMTML> <mt:date> <!-- 現在の日付を表示 --> </MTDynamicMTML> </body> </html> 41
  42. 42. • MTの各種機能に対してPHPからアクセスできる • MTのデータベースにPHPからアクセスすることができる • プラグインを追加すれば、他のシステムのデータベースに アクセスをして、MTタグで出力することができる (WordPressのデータをMTタグで出力するなど) PHP API
  43. 43. • ページを表示する前・後などにPHPの処理を追加できる 例1)フォーム送信されたデータの検証 例2)MTのユーザ情報を使用したBasic認証 例3)MTのデータベースに接続できなかった際の例外処理 コールバック
  44. 44. DynamicMTMLで作れるサイト
  45. 45. • イベント集客サイト • レシピ・口コミ投稿サイト • 会員限定情報サイト • 伝票管理システム • 見積作成システム • その他簡単なWebアプリなど DynamicMTML向きのサイト
  46. 46. • REST APIのみでサービスを提供するサイト • データベースにおけるデータの持ち方が特殊なサイト • 動作スピードが最優先なサイト →ソーシャルゲームや大規模なWebカタログなど DynamicMTMLが不向きなサイト
  47. 47. まとめ
  48. 48. • DynamicMTMLは制作会社でもシステム案件の 対応力を上げることのできるツール • 従来の知識を生かしたまま、よりリッチなサイトを 簡単に作ること・保守することができる • DynamicMTMLを使えば新しい協業の形が見えてくる コラボすれば美味しさが増すツール! 何より楽しいツールなので一度試してみてください!
  49. 49. 最後に少しだけ
  50. 50. • DynamicMTMLを使えば、動的生成向けのプラグインを PHPで書くことができます →MT案件は豊富にあります。協業の道もご検討ください • DynamicMTML本体はGithubで管理されており、 いつでもPullRequestを受け付けています →MTユーザにはプログラマーが不足しています  PHPによるプラグイン作成やDynamicMTMLの  バグフィックスにご協力をお願いします! PHPプログラマの方へお願い
  51. 51. @riatw on Twitter http://riatw.me/ Thank you so much! 51

×