Download to read offline
More Related Content
Similar to 20141119 Movable Type HandsOn Seminar
20141119 Movable Type HandsOn Seminar
- 1. Movable Type ハンズオンセミナー 2014年11月19日 シックス・アパート株式会社 長内毅志
- 2. • 長内毅志 –2011年～Movable Typeプロダクトマネージャー –2014年～ ディベロッパーリレーションマネージャー –ダンス、ジョギング、家族が大好きです。
- 3. まず最初に –アカウント情報を元に、アクセスできるか確認しまし ょう。 Movable Type –FTP
- 4. アジェンダ • MovableType の特徴 • Movable Type の管理画面と基本操作 • Movable Type のテンプレート • Movable Type のテーマを作成する • Movable Type クラウド版
- 5.
- 6. Movable Typeとは •10年以上利用されているブログ・CMS(通称MT) • MTタグ組み合わせでロジック生成 • テンプレートとDBが完全に分離している (MVCライク) • プラグインで拡張可能 • どんなコードも生成可能
- 7. 最新10件のブログ記事をリンク付きで生成 <ul> <MT:Entrieslimit="10"> <li> <a href="<MT:EntryPermalink>"> <MT:EntryTitle> </a> </li> </MT:Entries> </ul>
- 8. 特徴1 • 静的生成でhtmlを出力 (スタティックパブリッシング) • 動的生成も対応可能 (ダイナミックパブリッシング)
- 9.
- 10. 基本的な構成 公開サーバー兼 CMSサーバー 管理者 閲覧者 (サイト訪問者)
- 11. ステージング環境 ステージング サーバー兼 CMSサーバー 管理者閲覧者 公開 サーバー (サイト訪問者)
- 12. 冗長構成 CMS サーバー 公開 サーバー （冗長構成） ロード バランサ
- 13. クラウド環境 –CMSサーバーをVMイメージで構築(Amazon EC2な ど) –公開ページはコンテンツサーバーで構築 –AmazonS3 (Azure Webサイト) など VMサーバー AmazonEC2など Amazon S3など
- 14. CDNを利用した構成 –CMSサーバーはVMイメージn個で冗長構成 –公開コンテンツをストレージサーバーへ出力 –CDNを利用して世界各地にキャッシュ DBサーバー CDNサーバー
- 15. 特徴2 • 柔軟なテンプレートタグ –四則計算なども可能 • Data API で拡張可能 –データはJSON形式で出力、RESTで取得可能
- 16. 特徴3 • 中小企業から中-大規模企業、官公庁まで 幅広い導入実績
- 17.
- 18.
- 19. ウェブサイトとブログの違い • ウェブサイト… 「サイト」「ホームページ」全体を管理する仕組み • ブログ… ウェブサイトの中にある、更新頻度の高いコンテンツを管理 する仕組み 「ブログ」「ニュースリリース」「IR情報」 「新製品紹介」など 参考リンク3： http://www.movabletype.jp/documentation/mt6/websites/
- 20.
- 21.
- 22. ウェブページとブログ事の違い • 記事…時間の経過と共に蓄積されるページ 例:日記、ニュースリリースなど • ウェブページ…時間の経過と関係なく、階層構 造に従い情報を伝えるためのページ 例:会社概要、組織図、会社地図など 参考リンク4： http://www.movabletype.jp/documentation/mt6/compose/
- 24.
- 25.
- 26.
- 27.
- 29. ハンズオン • 以下のデータをMTにインポートしてみまし ょう •http://goo.gl/MROcIK • ブラウザからローカルに保存して、インスト ールを行います
- 30.
- 31. Movable Type の テンプレート
- 32. テンプレートとは • MovableTypeのデータベースに保存され ている各種のデータを、htmlとして出力す るための仕組み
- 33. DBのオブジェクトをタグで出力 <MTEntryTitle> <MTEntryBody> <MTEntryMore>
- 34.
- 35.
- 38. テンプレートの説明 • インデックステンプレート –自由にどこでも単一ページを出力 • アーカイブテンプレート –特定のルールに従い複数ページを出力 • テンプレートモジュール –パーツ化して様々な形で共有使用 • システムテンプレート –付属システムの出力部分を調整
- 39. テーマについての説明 • テーマとは –デザインなどをワンクリックで変更する仕組み –カスタムフィールドなどもまとめて設定できる
- 40. 画面 • デザイン=>テーマ
- 41. ハンズオン • テーマを変えてみましょう –「Eiger」を選んで適用してみましょう –再構築後、デザインを確認してみましょう –確認後、テーマ「Rainier」を選んでデザインを変えま しょう
- 43.
- 44.
- 45. • デザイン=> テンプレート=> インデックステンプレート=> メインページ • <mt:Entries limit="5" search_results="1"> – 値を5に変更
- 46. ハンズオン • トップページの記事一覧を、タイトルだけの 表示に変えてみましょう。 • 成功したら、元に戻しておきましょう
- 47. 解説 • <MTIgnore> <div class="asset-content entry-content" itemprop="articleBody"> <$mt:EntryBody$> </div> <div class="entry-more-link"> <a href="<$mt:EntryPermalink encode_html="1"$>" itemprop="url">ブログ記 事を読む</a> </div> </MTIgnore>
- 48. ハンズオン • トップページ記事一覧を「です。」を、スギち ゃん風に「だぜぇ。」に変換してみましょう。( 少古)
- 49. 解説 デザイン=> テンプレート=> インデックステンプレート=> メインページ <mt:Entries limit=“$entries_per_page” search_results=“1” replace=“です。”,”だぜぇ。”>
- 50. グローバルモディファイア • 出力結果をある規則に沿って修正する仕 組み • Replace モディファイア http://www.movabletype.jp/documentation/appendices/modi fiers/replace.html
- 51. ハンズオン • 記事数を合計して –10以上ある場合は「記事数:10件以上」 –10未満の場合は「記事数:10件未満」 と表示してみましょう (条件分岐)
- 52. • <div id="index-main"class="main" role="main"> <MTSetVarBlock name=“num”> <MTBlogEntryCount></MTSetVarBlock> <MTIf name=“num” ge=“10”> 記事数:10件以上 <MTElse> 記事数:10件未満 </MTIf>
- 53. リファレンス • タグリファレンス –http://goo.gl/CDlmDI • 変数の定義 –http://goo.gl/crKTYI • 条件分岐 –http://goo.gl/2hU5Ux
- 54. ハンズオン • テンプレートを利用して以下の計算をして みましょう –10+3 –10-3 –10x3 –10÷3
- 55. <MTSetVar name="first" value="10"> <MTGetVar name="first" value="3" op="+"> <MTGetVar name="first" value="3" op="-"> <MTGetVar name="first" value="3" op="*"> <MTGetVar name="first" value="3" op="/">
- 56. リファレンス • 変数の初期値に対して、valueモディファイ アとopモディファイアで計算 •MTタグで利用できる演算関数 –http://www.movabletype.jp/documentation/mt6/de sign/templates/calculation.html
- 57. ハンズオン • 最初に作成した記事を、トップページの最 新情報として常に表示してみましょう(ステ ィッキー表示) • ヒント：タグ欄に「@stick」と入力します。
- 58. やりかた • 記事のタグ欄に「@stick」と入力後、保存 • メインページのテンプレートを修正 <MTEntries tags=“@stick”> <MTInclude module=“記事の概要”> </MTEntries> <mt:Entries limit="$entries_per_page" search_results="1“ tags=“NOT @stick”>
- 59. リファレンス • プライベートタグでウェブページを部品デ ータにする • http://goo.gl/SuzGxy
- 60. ハンズオン • 記事データ内にある「宝石」という単語を、 すべて「ほうせき」とひらがなに置換しまし ょう
- 61.
- 62.
- 63.
- 64.
- 65. ハンズオン • ハンズオン用テーマをインストールしてみ ましょう •http://goo.gl/Pljde0 • 終わったら、再構築してみましょう。
- 66. インストールの仕方 ダウンロードして解凍した 「hands-on-theme」をフォルダごと MTクラウドの「themes」ディレクトリに アップロードする
- 67. • デザイン=> テーマから ハンズオン用テーマを適用する
- 68.
- 69. ハンズオン • トップページの記事一覧を、最新5件表示 するように変更してみましょう。
- 70.
- 71. タイトル • テンプレート=>インデックス=> メインページ <article> <h2>Introduction to respo </h2> => <article> <h2><MTEntryTitle></h2>
- 72. 日付と著者名 <div class="article-info">Postedon 2013/05/14 by Joe Bloggs</div> <div class=“article-info”>Posted on <MTEntryDate format=“%Y/%m/%d”> by <MTAuthorName></div>
- 73. 参考情報 • 日付情報 –日付に関するテンプレートモディファイア http://www.movabletype.jp/documentation/appendi ces/date-formats.html
- 74. 本文 <p>Lorem ipsumdolor sit amet, consectetur adipisicing elit, sed do eiusmod ……</p> => <p><MTEntryBody></p>
- 75. 続きを見る(Read More) <ahref="#" class="button">Read more</a> => <a href=“<MTEntryPermaLink>" class="button">Read more</a>
- 76. ループ処理 <section id="content"> <MTEntries limit=“5”> <article> 先ほど修正したコード </article> </MTEntries> </section>
- 77.
- 78.
- 79. タイトル • テンプレート=>アーカイブテンプレート => 記事 <article> <h2>Introduction to respo </h2> => <article> <h2><MTEntryTitle></h2>
- 80. 日付と著者名 <div class="article-info">Postedon 2013/05/14 by Joe Bloggs</div> <div class="article-info">Posted on <MTEntryDate format=“%Y/%m/%d”> by <MTAuthorName></div>
- 81. 本文 <p>Lorem ipsumdolor sit amet, consectetur adipisicing elit, sed do eiusmod ……</p> => <p> <MTEntryBody> <MTEntryMore> </p>
- 82.
- 84. • テンプレート=> インデックス=>メインページ • テンプレート=> アーカイブテンプレート => 記事 <h1><a href="<mt:BlogURL>">CompanyName</a></h1> => <h1><a href="<mt:BlogURL>“><MTBlogName></a></h1>
- 85.
- 86. • テンプレート=> インデックス=>メインページ <title>respo - Free CSS Template by ZyPOP</title> => <title><MTBlogName></title>
- 87. • テンプレート=> アーカイブテンプレート => 記事 <title>respo - Free CSS Template by ZyPOP</title> => <title><MTEntryTitle> - <MTBlogName></title>
- 88. ハンズオン • すべての修正が終わったら、全体を再構 築してみましょう • ブログデザイン、記事共に正常に見えてい ますか？
- 89. ハンズオン • ブログの記事を数件、適当に入力してみま しょう • 意図通りにトップページ、記事ページが作 成されていますか？
- 90. ハンズオン • 今回作成したテーマを、名前をつけて保存 しておきましょう。
- 91.
- 92. 解説 • 出力方式を「テーマディレクトリのインスト ール」として保存してみましょう • テーマが新しく選択できるようになっていま すか？
- 93. 解説 • 「zip形式アーカイブでダウンロード」を選び 、ローカルにダウンロードしてみましょう • ダウンロードしたテーマは、他のMovable Type でも使えます。
- 94.
- 95. Movable Type クラウド版とは • シックス・アパートがサーバー管理 • 管理画面の動作が速く快適 • 常に最新版を使用可能 • テクニカルサポート付き • 独自機能
- 96. MTクラウド版の構成 • nginx+PSGI –管理画面、再構築ともに最適化されている • 各種機能を実装 –後述します
- 97. nginxとは • ロシアで開発されたウェブサーバー • Apacheに続く第二位のシェア(netcraft社、2012/03) • 軽量、高速。メモリ使用量が少ない • デメリットもある(.htaccessが使えないなど)
- 98.
- 99.
- 100. php、cgi • phpは利用可能 –phpinfoは制限 • CGI,plファイルは利用不可能
- 101.
- 102.
- 103. サーバー配信機能とは •MTクラウドで生成したコンテンツを外部の サーバーへ配信して公開する機能 •MTクラウドをステージング環境として利用 可能 • FTP(S)で配信
- 104.
- 105.
- 106. Basic認証でできること • 公開しているウェブサイト・ブログに対して Basic認証の設定ができます • ファイルに対しても設定できます • 複数設定が可能です
- 107.
- 108. ハンズオン • ウェブサイト・ブログにBasic認証をかけて みましょう • サイトパスはMTクラウドで利用しているドメ インを基点として 「/」から相対パスで指定します
- 109. 設定例 利用しているMTクラウドのドメインが 「www.example.com」の場合 設定例認証設定したいURL 設定内容 サイト全体にBasic 認証を設定したい http://www.example.com/ / 一部のディレクトリに Basic 認証を設定した い http://www.example.com/secret/ /secret/ 一部のファイルに Basic 認証を設定した い http://www.example.com/secret/file.ht ml /secret/file.html
- 110.
- 111. HTTPリダイレクトとは • あるディレクトリやファイルへのアクセスを 、自動的に他のURLに転送する仕組み
- 112. HTTPリダイレクト • システム=> クラウドサービス=> HTTPリダイレクト
- 113. ハンズオン • ウェブサイトのindex.htmlを Yahoo! Japanへリダイレクトしてみましょう 。 • 例/ => www.yahoo.co.jp
- 114.
- 115.
- 116. 環境のリストア • システム=>クラウドサービス=> 環境のリストア
- 117. ハンズオン • ウェブサイト・ブログで記事を書いた後、バ ックアップデータからデータリストアを行っ てみましょう • 直前に書いた記事が消え、以前の状態に 戻っていることが確認できますか？
- 118.
- 119.
- 120. • システム=> クラウドサービス=> セキュリティ
- 121. ハンズオン • 管理画面のURLを任意に変更してみましょ う • 変更後、一度ログアウトして再ログインしま しょう
- 122. ハンズオン • 管理画面にBasic認証を設定してみましょ う • 管理画面のURLを元に戻しておきましょう
- 123.
- 124. MT環境変数とは •MTの環境変数を管理画面から設定するこ とができます。 –http://www.movabletype.jp/documentation/append ices/config-directives/ • 設定不可能な環境変数もあります –http://www.movabletype.jp/documentation/cloud/specific ations/config-directives.html
- 125. • システム=> クラウドサービス=> MT環境変数
- 126. ハンズオン • 環境変数 「AssetFileExtensions」にjpgと設定し、.jpg ファイル以外のアップロードを禁止してみ ましょう • .jpgファイル以外がアップロードできるか試 してみましょう
- 127. 参考 •AssetFileExtensions –http://www.movabletype.jp/documentation/appendices/co nfig-directives/assetfileextensions.html
- 128.
- 129. ディスクの使用量 • 現在利用しているディスク容量が一目でわ かるサービス • システム=> クラウドサービス=> ディスクの使用量
- 130.
- 131. 2つの新機能 • IP制限 –管理画面、公開サイトへのアクセス制限が可能 • マルチドメイン対応 –S4i、S4g以上、10ドメインまで利用可能
- 132.
- 133.
- 134. サービス利用料金 ご契約中のプランの月額料金1カ月分（＋消 費税） サンドボックス利用可 能期間 お申し込み月の翌月末日まで 申し込み期限 毎月25日まで（25日が休業の場合は直前の 前の営業日） ※ 26日以降のお申し込みは翌月1日のお申 し込み扱いとなります。 作成可能なサンドボッ クスの数 Movable Type クラウド版１契約につき１つ まで お申し込み・お支払い方法
- 135.
- 136.
- 137. クラウド版でできて、ソフトウェア版でできないこと • サーバー配信機能 • Basic認証 •HTTPリダイレクト • 環境リストア(定期バックアップ) • 自動バージョンアップ、他
- 138. ソフトウェア版でできて、クラウド版でできないこと • ブログの公開パスに制限があります –クラウド版は「/data/file/static」以下の み –FTPからアクセスすると「/static」ディレク トリのみ確認できます
- 139. .htacessが使えない • .htaccessの設定はできない • 各種の代替機能を実装 –リダイレクト –Basic認証
- 140. • Movable Typeのプログラムファイルの改 変はできません。 –alt-search、alt-tmpl などの設定は可能
- 141. • サーバーへのSSH接続は不許可 –クラウド版は許可していません • 一部環境変数は使用できない –StaticWebPathなどのファイルシステム関連 –SQLSetNamesなど、DB関連
- 142.
- 143. 留意点 •DBデータレベルの移行はできない –MTの標準機能「バックアップと復元」を基本とした移 行を –移行後は「blogId」の変更に注意
- 144. 例 •MT5のサイトデータ移行 1.MT5のバックアップデータをMT5でバージョンを合 わせて復元 1. バージョンに注意(5.13=>5.13など) 2. MT5からMT6へバージョンアップ 3. MTクラウドへ投入
- 145.
- 146. 移行用のテンプレート • 「バックアップと復元」や「エクスポート」が 使えない場合、テンプレートを利用したデ ータ作成という手がある –https://github.com/movabletype/mt-recipes/ blob/master/Export%20entry%20data%20in% 20MT%20format.md
- 147. 留意点 • nginx+PSGIという環境 –Apacheの機能を多用したサイトの移行には注意が 必要 –MTクラウドのリダイレクト・ベーシック認証をうまく活 用
- 148.
- 149. XSg S2g S4gS450g S4100g CPU：0.5CPU （仮想CPU） CPU：1CPU （仮想CPU） CPU：1CPU （仮想CPU） 1CPU （仮想CPU） 1CPU （仮想CPU） メモリ：0.5GB メモリ：2GB メモリ：4GB メモリ：4GB メモリ：4GB ディスク：10GB ディスク：10GB ディスク：10GB ディスク：50GB ディスク：100GB 5,000円 （税抜）／月 8,000円 （税抜）／月 14,000円 （税抜）／月 22,000円 （税抜）／月 28,000円 （税抜）／月 •GMOクラウドプラン
- 150. • IDCフロンティアプラン XSiプランS2i プランS4i プランS450i プランS4100i プラン CPU：1CPU （0.8GHz相当） CPU：1CPU （1.6GHz相当） CPU：1CPU （1.6GHz相当） CPU：1CPU （1.6GHz相当） CPU：1CPU （1.6GHz相当） メモリ：0.5GB メモリ：2.0GB メモリ：4.0GB メモリ：4.0GB メモリ：4.0GB ディスク：10GB ディスク：10GB ディスク：10GB ディスク：50GB ディスク：100GB 9,500円 （税抜）／月 14,200円 （税抜）／月 19,000円 （税抜）／月 28,000円 （税抜）／月 35,000円 （税抜）／月 http://www.sixapart.jp/movabletype/cloud/?id=colud-top-plan
- 151.
- 152. 購入経路 エンドユーザー様 制作・開発会社 UNIBaaS ECバイ ヤーズ ソフトバンク C&S Movable Type クラウド版
- 153. 購入方法 1. ECバイヤーズ(ECサイト)からの購入 2. 既存の取引先からの購入 3. UNIBaaS参加企業からの購入
- 154.
- 155. ECバイヤーズとは • ソフトバンク・テクノロジー(株)が運営するECサ イト • 個人でも企業でも購入可能 • 標準価格での販売
- 156. 既存の取引先からの購入 • MTクラウドは、ソフトバンクコマース＆サービス株式 会社を経由して、一般に流通していますので、ソフト バンクコマース＆サービス株式会社と取引口座を持 つ販売会社から購入可能 • 販売価格は各販売会社へご確認ください
- 157.
- 158.
- 159. UNIBaaSとは • UNIBaaSは、シックス・アパートが提供する販売支援プラットフ ォームです(CRM+MTクラウドのセットアップ機能)。 • UNIBaaSは、シックス・アパートのパートナープログラム「 ProNet」にご参加いただいている企業様であれば、参加可能 です。
- 160. UNIBaaSの特徴 • 利用中のバージョンを継続して利用可能 (バージョンアップの回避) • サンドボックス機能を12時間に限り何度でも無料で使用可能
- 161.
- 162. 後半のまとめ • MovableType クラウド版は、快適な速度 で使用できるように環境をチューン・アップ したサービス • 独自機能で管理画面から各種運用の支援 が可能
- 163.
- 164. •MT蝦夷 • （MT東北） •MT東京 •MTなごや •MT長野 •MT関西 •MT広島 •MT福岡
- 166. MTDDC Meetup 2014開催! • 2014年11月29日(土) 11:00-19:00 • 六本木ミッドタウン Yahoo! Japan セミナールーム
- 167. MT Live 開催中！ • 第2、4水曜日茅場町で開催中！ http://blog.sixapart.jp/2014-09/mt-live-movable-type.html
- 168.