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.

MovableTypeの実務制作で考慮すること

5,968 views

Published on

  • Be the first to comment

MovableTypeの実務制作で考慮すること

  1. 1. MovableType 口田 聖子 @ webbingstudio 第3回 Movable Type 勉強会 2012.4.14(sat) 実務制作で考慮すること の
  2. 2. l
  3. 3. 今日のお題 ※主に数十ページ程度のサイト向けの話 MovableTypeの実務制作で 制作担当者(コーダー等)が留意すべきこと CMSとしての利用 静的サイトへの組み込み デザインカンプを渡されてのコーディング
  4. 4. CMSを組み込む案件で 確認すべきことは多岐にわたる コーディングに 付随する 確認事項 文書宣言 文字コード 社内の制作ルール etc… CMSの設置に 関連する 確認事項 サーバーの仕様 管理画面URL データベース情報 etc… 導入予定の CMS仕様に 関連する 確認事項 MovableType WordPress a-blog cms etc…
  5. 5. CMSを組み込む案件で 確認すべきことは多岐にわたる コーディングに 付随する 確認事項 文書宣言 文字コード 社内の制作ルール etc… CMSの設置に 関連する 確認事項 サーバーの仕様 管理画面URL データベース情報 etc… 導入予定の CMS仕様に 関連する 確認事項 MovableType WordPress a-blog cms etc… MovableTypeで 制作することになった場合 考慮するポイントには どんなものがあるの?
  6. 6. 静的ファイルとの連携1
  7. 7. 実務制作では、全コンテンツを CMSで管理する案件は少ない 静的コンテンツ 動的コンテンツ 共通パーツ
  8. 8. トップページに新着を出す処理も MultiBlogより PHPインクルードの方が軽い ウェブサイトの トップページ 子ブログ 新着情報
  9. 9. mt:Includeタグを使った場合 <$mt:Include file=“/home/aaaa/htdocs/include/header.inc”$>
  10. 10. mt:Includeタグを使った場合 <$mt:Include file=“/home/aaaa/htdocs/include/header.inc”$> fileモディファイアは 最新バージョン(5.13)では非推薦 スタティック・パブリッシングにすると Includes_cにキャッシュを作るので FTPでの差し替えが即時に反映されない
  11. 11. PHPインクルードで対応 スタティック・パブリッシング(PHP構文) <?php include (‘/home/aaaa/htdocs/include/header.inc’); ?> ダイナミック・パブリッシング(smarty) {{php}} include (‘/home/aaaa/htdocs/include/header.inc’); {{/php}}
  12. 12. フルパスを変数化して 公開サーバー移行時の手数を減らす スタティック・パブリッシング <mt:BlogParentWebsite> <mt:SetVarBlock name="Global_FullPath”> <$mt:WebsitePath$></mt:SetVarBlock> </mt:BlogParentWebsite> ・・・ <?php include (‘<$mt:GetVar name="Global_FullPath"$>include/ header.inc’); ?>
  13. 13. フルパスを変数化して 公開サーバー移行時の手数を減らす スタティック・パブリッシング <mt:BlogParentWebsite> <mt:SetVarBlock name="Global_FullPath”> <$mt:WebsitePath$></mt:SetVarBlock> </mt:BlogParentWebsite> ・・・ <?php include (‘<$mt:GetVar name="Global_FullPath"$>include/ header.inc’); ?> MovableTypeの 設定に保存された サーバーのフルパスを取得
  14. 14. フルパスを変数化して 公開サーバー移行時の手数を減らす ダイナミック・パブリッシング <mt:BlogParentWebsite> <mt:SetVarBlock name="Global_FullPath”> <$mt:WebsitePath$></mt:SetVarBlock> </mt:BlogParentWebsite> ・・・ {{php}} include (smarty_function_mtgetvar(array('name' => 'Global_FullPath'), $this) . ’include/header.inc'); {{/php}}
  15. 15. フルパスを変数化して 公開サーバー移行時の手数を減らす ダイナミック・パブリッシング <mt:BlogParentWebsite> <mt:SetVarBlock name="Global_FullPath”> <$mt:WebsitePath$></mt:SetVarBlock> </mt:BlogParentWebsite> ・・・ {{php}} include (smarty_function_mtgetvar(array('name' => 'Global_FullPath'), $this) . ’include/header.inc'); {{/php}} MTの変数に保存した値を PHPの変数で取得
  16. 16. PHPインクルードは便利だが… スタティック用のPHP構文を ダイナミックで書き出すとページが真っ白に… ダイナミック用のsmarty構文をスタティックで書き出すと スクリプトがそのまま出てしまう… ■ ■
  17. 17. PHPインクルードは便利だが… 制作前に、どのテンプレートを ダイナミック・パブリッシングにするか 決めておく必要がある スタティック用のPHP構文を ダイナミックで書き出すとページが真っ白に… ダイナミック用のsmarty構文をスタティックで書き出すと スクリプトがそのまま出てしまう… ■ ■
  18. 18. PHPインクルードは便利だが… 制作前に、どのテンプレートを ダイナミック・パブリッシングにするか 決めておく必要がある スタティック用のPHP構文を ダイナミックで書き出すとページが真っ白に… ダイナミック用のsmarty構文をスタティックで書き出すと スクリプトがそのまま出てしまう… ■ ■ もしかすると Dynamic MTML を利用すれば解決できる? 教えてえらい人!
  19. 19. PHPインクルードが使用できないことも CGIで生成されているページでは mt:Include+fileモディファイアを 使うしかない MovableType既存の検索結果画面 ダイナミック・パブリッシングに対応してない プラグインの生成ページ (mailFormプラグインの確認画面など) ■ ■
  20. 20. 可変部分への対応2
  21. 21. タイトル・カスタムフィールドが長くて 複数行になった場合は? カテゴリーは自由に増減・名称変更させる? サムネイルを表示する新着で、 画像をアップロードしなかったらどうする? 自由度が全くなかったらCMSじゃない カンプだけでは判断がつかないことがある 制作側が想定して、 デザイン的に矛盾するようであれば 制作前に質問を投げなければならない
  22. 22. カテゴリーを複数指定できる 親子関係を持たせられる 順番を指定できる 複数指定のときに 「主・副」を指定できる MovableTypeのカテゴリーの仕様
  23. 23. カテゴリーによって アイコンや配色が変わるようになっている場合 「カテゴリーの複数選択を可能にするのか?」 を確認しなければならない カテゴリーがデザインに影響している場合 エントリーのタイトルです お知らせ 2012.04.01 エントリーのタイトルです セミナー情報 2012.04.01
  24. 24. 主カテゴリーの情報だけ取得する <mt:Ignore>### 主カテゴリーのみ表示します ###</mt:Ignore> <mt:SetVarBlock name="Category_Primary"> <$mt:EntryCategory$></mt:SetVarBlock> <mt:EntryCategories> <mt:SetVarBlock name="Category_Label”><$mt:CategoryLabel$> </mt:SetVarBlock> <mt:If name="Category_Label" eq="$Category_Primary”> <a href="<$mt:CategoryArchivelink$>"> <img src="<$mt:GetVar name="Global_Path"$>images/category_ <$mt:CategoryBasename$>_ico.png” alt="<$mt:GetVar name="Category_Label"$>" width="80" height="15"> </a> </mt:If> </mt:EntryCategories>
  25. 25. カテゴリーの階層を調べる <mt:Ignore>### 親がないときだけ真を返します ###</mt:Ignore> <mt:HasNoParentCategory> 最上層のカテゴリーです </mt:HasNoParentCategory> <mt:Ignore>### 子がないときだけ真を返します ###</mt:Ignore> <mt:HasNoSubCategories> 最下層のカテゴリーです </mt:HasNoSubCategories> <mt:Ignore>### 特定カテゴリーの下層のときだけ真を返します ### </mt:Ignore> <mt:IfIsDescendant parent=“ムーバブルタイプ"> 「ムーバブルタイプ」の下層に入っています </mt:IfIsDescendant>
  26. 26. カテゴリーの階層を調べる <mt:Ignore>### カテゴリーに親がないときだけ真を返します ###</mt:Ignore> <mt:HasNoParentCategory> 最上層のカテゴリーです </mt:HasNoParentCategory> <mt:Ignore>### カテゴリーに子がないときだけ真を返します ###</mt:Ignore> <mt:HasNoSubCategories> 最下層のカテゴリーです </mt:HasNoSubCategories> <mt:Ignore>### 特定カテゴリーの下層にあるときだけ真を返します ###</mt:Ignore> <mt:IfIsDescendant parent=“ムーバブルタイプ"> 「ムーバブルタイプ」の下層に入っています </mt:IfIsDescendant> カテゴリーの深さを直接 取得するタグ・条件分岐は ないようです
  27. 27. MovableTypeの検索・ ダイナミック・パブリッシング用の ページネーション <div class="content-nav"> <mt:IfPreviousResults> <a href="<$mt:PreviousLink$>" rel="prev" onclick="return swapContent(-1);">&lt; <__trans phrase="Previous"></a>&nbsp;&nbsp;</mt:IfPreviousResults> <mt:PagerBlock><mt:IfCurrentPage><$mt:Var name="__value__"$><mt:Else><a href="<$mt:PagerLink$>"><$mt:Var name="__value__"$></a></mt:IfCurrentPage><mt:Unless name="__last__">&nbsp;</mt:Unless></mt:PagerBlock> <mt:IfMoreResults>&nbsp;&nbsp;<a href="<$mt:NextLink$>" rel="next" onclick="return swapContent();"><__trans phrase="Next"> &gt;</a></mt:IfMoreResults> </div>
  28. 28. ページ数が非常に多くなった場合でも 際限なくリンクを生成してしまう…
  29. 29. ページ数が非常に多くなった場合でも 際限なくリンクを生成してしまう… jQueryでDOMを書き替えることを考えてみよう
  30. 30. ページネーションのHTMLを少し直す <div class="content-nav"> <mt:IfPreviousResults> <a href=“<$mt:PreviousLink$>” rel=“prev” onclick=“return swapContent(-1);” class=“link_prev”>&lt; <__trans phrase="Previous"></a>&nbsp;&nbsp;</mt:IfPreviousResults> <mt:PagerBlock><mt:IfCurrentPage><$mt:Var name="__value__"$><mt:Else><a href="<$mt:PagerLink$>" class=“link_page”><$mt:Var name="__value__"$></a></mt:IfCurrentPage><mt:Unless name="__last__">&nbsp;</mt:Unless></mt:PagerBlock> <mt:IfMoreResults>&nbsp;&nbsp;<a href="<$mt:NextLink$>" rel="next" onclick="return swapContent();" class=“link_next”><__trans phrase="Next"> &gt;</a></mt:IfMoreResults> </div>
  31. 31. ページネーション書き換えの一例(前半) $(function() { function pagerShort(Obj, Show) { var Current = $('.current_page', Obj).text(); var Len = $('a.link_page, span.current_page', Obj).size(); var Len = parseInt(Len) - 1; Current = parseInt(Current); Show = parseInt(Show); var First = Current - Show - 1; var Last = Current + Show; if(First < Show) { Last = (Show * 2) + 1; } if(Last >= Len) { First = Len - (Show * 2); }
  32. 32. ページネーション書き換えの一例(後半) $('a.link_page, span.current_page', Obj).each(function(index){ if((index == 0)&&(First > 1)) { $(this).after('<span class="omission">…</span>'); } if((Last < Len)&&(index == Len)) { $(this).before('<span class="omission">…</span>'); } if((index != 0)&&(index != Len)) { if((index < First)||(index >= Last)) { $(this).remove(); } } }); } $('#main . content-nav').each(function(index, Obj){ pagerShort($(Obj), 3); }); });
  33. 33. ページネーション書き換えの一例(後半) $('a.link_page, span.current_page', Obj).each(function(index){ if((index == 0)&&(First > 1)) { $(this).after('<span class="omission">…</span>'); } if((Last < Len)&&(index == Len)) { $(this).before('<span class="omission">…</span>'); } if((index != 0)&&(index != Len)) { if((index < First)||(index >= Last)) { $(this).remove(); } } }); } $('#main . content-nav').each(function(index, Obj){ pagerShort($(Obj), 3); }); }); 3 = 省略せずに左右に 表示する数
  34. 34. 長いリンクリストが省略されました ※このスクリプトは改良中です…あくまで参考としてご利用ください
  35. 35. 画像アップロード3
  36. 36. 一般の人は、デジカメ・携帯電話の写真が Webではサイズが大きすぎることを 意識しない
  37. 37. MovableTypeは 高解像度のアップロード画像を そのままサーバーに保存する 5つのブログを毎日更新 ×記事1件につき、1MBの画像を2枚アップロード =1年でサーバー容量が3.6GB減る
  38. 38. MovableTypeは 高解像度のアップロード画像を そのままサーバーに保存する 5つのブログを毎日更新 ×記事1件につき、1MBの画像を2枚アップロード =1年でサーバー容量が3.6GB減る サムネイルも生成していたら もっと減る
  39. 39. ImageUploadUtilityプラグインで予防しよう http://skeleton.juxtaposition.jp/image-upload-utility/
  40. 40. ImageUploadUtilityプラグインで予防しよう ファイルアップロード時に任意サイズまで縮小して サーバーに保管する ファイル名が日本語だった場合、任意フォーマットの ファイル名に変更して保管する 埋め込むサムネイルの長辺サイズを テンプレートごとに指定・制限できる
  41. 41. ImageUploadUtilityプラグインで予防しよう ファイルアップロード時に任意サイズまで縮小して サーバーに保管する ファイル名が日本語だった場合、任意フォーマットの ファイル名に変更して保管する 埋め込むサムネイルの長辺サイズを テンプレートごとに指定・制限できる ファイル名がマルチバイトだと、FTP転送時に文字化けすることがある
  42. 42. 管理画面の カスタマイズ4
  43. 43. MTAppjQueryプラグインは鉄板 http://www.tinybeans.net/blog/download/mt-plugin/ mtapp-jquery.html
  44. 44. 入力項目の制御に特化した BodyFieldCustomizerプラグイン http://www.koikikukan.com/archives/2011/05/06-025555.php
  45. 45. どう違うの? MTAppjQuery ■ jQueryの知識があれば、項目のテキスト書き替えや サイズ変更などの修正も可能 ■ バージョンアップ時に不具合が出たとき対応しやすい BodyFieldCustomizer ■「設定」画面でブログごとに表示を制御できる ■ jQueryのスキルがなくても使える
  46. 46. どう違うの? MTAppjQuery ■ jQueryの知識があれば、項目のテキスト書き替えや サイズ変更などの修正も可能 ■ バージョンアップ時に不具合が出たとき対応しやすい BodyFieldCustomizer ■「設定」画面でブログごとに表示を制御できる ■ jQueryのスキルがなくても使える MTAppjQueryを 使っているけど、 並び替えだけ BodyFieldCustomizerを 使う手もあるかも…
  47. 47. ヒントを強調する if(mtappVars.screen_id == 'edit-entry'){ $('div#main-content .hint').css({ color: '#008822', backgroundColor: '#E6F3DD', padding: '5px', fontStyle: 'normal' }); } user.jsのサンプル
  48. 48. 使用しない左メニューを隠す var Menu = $('#menu'); $('#menu-page, #menu-tag, #menu-feedback', Menu).css({ display: 'none' }); 固定ページ・コメントなどが 見えなくなっています user.jsのサンプル
  49. 49. user.jsのサンプル エントリー一覧の見出しを変更する if(mtappVars.screen_id == 'list-entry') { $('#page-title').text('セミナーの管理'); }
  50. 50. user.jsのサンプル エントリー一覧の見出しを変更する if(mtappVars.screen_id == 'list-entry') { $('#page-title').text('セミナーの管理'); } 「ブログ記事の管理」を 「セミナーの管理」に 変更しました
  51. 51. まとめ5
  52. 52. 納品後、数ヶ月先のことを考える モダンブラウザの普及や、MovableTypeの機能向上で デザイン性の高いテーマを作りやすくなった 以前より管理画面のカスタマイズもしやすくなった 数ヶ月先、数年先も今のデザインを保てるか? 更新作業・追加改修がしにくい構造になっていないか?
  53. 53. 納品後、数ヶ月先のことを考える モダンブラウザの普及や、MovableTypeの機能向上で デザイン性の高いテーマを作りやすくなった 以前より管理画面のカスタマイズもしやすくなった 数ヶ月先、数年先も今のデザインを保てるか? 更新作業・改修がしにくい構造になっていないか? MovableTypeの特徴を理解して 欠点をカバーできる制作を心がけましょう :D

×