はじめよう！MovableType.net ハンズオン

Transcript

• 1. はじめよう！MovableType.net ハンズオン 2015/6/3 AWS Summit Tokyo 2015 1
• 2. 前半のアジェンダ • 記事／ウェブページを作ってみよう • テンプレートの仕組み • テーマを変えてみよう • ページャを作ってみよう • ブログを作ってみよう 2
• 3. 後半のアジェンダ • GitHubからテンプレートを取り込もう • ファイルをまとめてアップロードしてみよう • カスタムフィールドを作ってみよう • カスタムフィールドの情報を出力してみよう 3
• 4. 自己紹介 4
• 5. 自己紹介その1 • 藤本 壱（ふじもと はじめ） • 兵庫県伊丹市出身 • 群馬県前橋市在住 東京 埼玉 山梨 神奈川 栃木 茨城 千葉 5
• 6. 自己紹介その2 • ブログはもちろんMovable Type(ただし.netではない) 6 http://www.h-fj.com/blog/
• 7. 記事／ウェブページを作ってみよう 7
• 8. 記事とウェブページ 記事 ウェブページ  時系列やカテゴリでブ ログ的に管理  新着情報、お知らせ、 etc.  フォルダで管理  会社概要、アクセス、 プライバシーポリシー、 etc. • サイトを構成するページに対応 8
• 9. 記事の作成 • 画面右上の「新規」をクリック（または「記 事」→「新規」メニューをクリック) • 記事のタイトルと本文を入力 • 「今すぐ公開」か「下書き」を選んで保存 9
• 10. 表示の確認 • 個々の記事／ウェブページの確認 • ページ右上の「ブログ記事（ウェブページ）の 確認」をクリック • ウェブサイトのトップページの確認 • ページ右上の をクリック 10
• 11. 記事の再編集 • 「記事」→「一覧」メニューをクリック • 記事一覧ページで再編集したい記事のタイ トルをクリック 11
• 12. カテゴリの作成 • 記事はカテゴリで分類 • 「記事」→「カテゴリ」メニューを選択 • 「新しくカテゴリを作成」をクリック • カテゴリ名／フォルダ名を入力して保存 • フォルダ名はURLのパスになるので半角英数字に 12
• 13. 記事をカテゴリに割り当て • 記事を編集 • 「カテゴリ」の部分で割り当てたいカテゴリを チェック 13
• 14. 画像の貼り付け • 「画像を挿入」ボタンをクリック • 新しいファイルをアップロード or 既存の画 像ファイルを選択 14
• 15. テンプレートの仕組み 15
• 16. テンプレートの概要 • 記事等のデータを当てはめて出力するた めのひな形 • HTML内に独自のタグ（テンプレートタグ、 MTML）を記述 • 大きく分けて3種類のテンプレートが存在 • インデックステンプレート • アーカイブテンプレート • テンプレートモジュール 16
• 17. インデックステンプレート • 1つのテンプレートから1つのページを出力 • メインページやスタイルシート等に利用 17 「メインページ」の インデックス テンプレート メインページ 「スタイルシート」の インデックス テンプレート スタイルシート
• 18. アーカイブテンプレート • 1つのテンプレートから複数のページを出 力 • 記事、ウェブページ、カテゴリ別、日付別等 のページに利用 18 「記事」の アーカイブ テンプレート 記事1のページ 記事2のページ 記事3のページ ・・・
• 19. テンプレートモジュール • 複数のテンプレートで共有 • ヘッダー、フッター、サイドバー等 19 ヘッダー サイドバー フッター メインページ 記事 テンプレート モジュールヘッダー サイドバー フッター ヘッダー サイドバー フッター
• 20. テンプレートタグの概要 • HTMLのタグと同様に「<」と「>」で囲む • タグ名の先頭は必ず「MT」 • Movable Typeのテンプレートタグの下位 互換 • 利用できるテンプレートタグの一覧 • https://movabletype.net/tags/ • 逆引き辞典 • https://movabletype.net/dict/ 20
• 21. ファンクションタグ • 値に置き換わるタグ 21 テンプレートタグ 出力される値 MTWebsiteName ウェブサイト名 MTEntryTitle 記事のタイトル MTEntryBody 記事の本文 MTEntryPermalink 記事のページのアドレス
• 22. ブロックタグ • 開始タグと終了タグから構成 <mt:XXX>・・・</mt:XXX> • 以下のどちらかの動作 • ブロック内を複数回繰り返す • 条件によってブロック内を出力する／しないを 切り替え 22 テンプレートタグ 出力 MTEntries 記事一覧の出力 MTIf 条件によって出力を切り替え
• 23. モディファイア • テンプレートタグの動作をカスタマイズ • HTMLの属性と同じ書き方 <mt:XXX モディファイア名=“値”> 23 モディファイア 動作 lower_case=“1” アルファベットを小文字 に変換 encode_html=“1” 「&」や「<」をエンコード
• 24. テンプレートの編集 • 「デザイン」→「テンプレート」メニューを選 択 • テンプレート一覧で編集するテンプレートを クリック 24
• 25. テーマを変えてみよう 25
• 26. テーマの概要 • テーマ＝ウェブサイトを構成するテンプレー ト群 • 現在利用できるテーマは6種類 http://theme.movabletype.io/ 26
• 27. テーマの変更 New! • 「デザイン」→「テーマ」メニューを選択 • 「利用可能なテーマ」でテーマを選択して 「適用」をクリック 27
• 28. テーマ変更時の注意事項 • 変更前のテンプレートはすべて削除 • 一度変更した後で元のテンプレートに戻す ことは不可 28
• 29. ページャを作ってみよう 29
• 30. ページャ機能の概要 • 記事一覧系のページで1ページあたりの件 数を指定可能 → MTEntriesタグに「paginate_by=“件 数”」のモディファイアを指定 • 前後のページへのリンクを出力可能 → MTPaginationHasPrevious等のテンプ レートタグを組み合わせる • 各ページへのリンクのリストを出力する機 能はなし(開発お待ちしています) 30
• 31. ページャを使う場合のテンプレートタグ <mt:Entries paginate_by="件数"> 記事の情報を出力 <mt:EntriesFooter> <mt:PaginationHasPrevious> <a href="<$mt:PaginationPreviousURL$>">前ページ</a> </mt:PaginationHasPrevious> <mt:PaginationHasNext> <a href="<$mt:PaginationNextURL$>">次ページ</a> </mt:PaginationHasNext> </mt:EntriesFooter> </mt:Entries> 31
• 32. 標準テーマでのページャ機能 • ページャ機能組み込み済み • 「config」テンプレートモジュールの以下の 行で1ページあたりの件数を指定 <mt:SetVarBlock name="paginate">10</mt:SetVarBlock> 32
• 33. ブログを作ってみよう 33
• 34. ウェブサイトとブログ • MovableType.netではサイト全体を「ウェブ サイト」として管理 • ウェブサイトのコンテンツは主に「記事」と 「ウェブページ」で管理 • ウェブサイトの中に「ブログ」を複数作ること も可能 34 プラン 作成可能ブログ数 ライト 5 スタンダード 10
• 35. シンプルなサイトはウェブサイトのみで管理 ウェブサイト 記事 記事 記事 ウェブページ ウェブページ ウェブページ 35
• 36. 複雑なサイトはコンテンツをブログに分ける 記事 記事 記事 ウェブページ ウェブページ ウェブページ 新着情報ブログ 記事 記事 記事 ウェブページ ウェブページ ウェブページ 製品紹介ブログ ウェブサイト 36
• 37. ブログの作成 • 画面左上のロゴをクリックしてダッシュボー ドに移動 • 「新しいブログを作る」のリンクをクリック • ブログURL／名前を決めてテーマを選択 37
• 38. ウェブサイトのテンプレートでブログの情報を出力 • MTEntries等のタグに「include_blogs」モ ディファイアを指定 <mt:Entries include_blogs=“ブログのID” lastn=“10”> <$mt:EntryTitle$> </mt:Entries> • ブログのIDはブログの管理画面で確認 https://movabletype.net/sites/ウェブサイトのID/blogs/ブログのID/・・・ 38
• 39. 前半終了 休憩に入ります 39
• 40. 後半の作業の流れ • コーヒーショップ風のサ イトを作成 • テンプレートの読み込 み(GitHub連携) • 画像等の素材のアップ ロード(ファイルマネー ジャ) • コンテンツの投入 • 背景画像指定機能の追 加(カスタムフィールド) 40
• 41. 資料Webページ • お手元の「資料Webページ」に接続してお いてください http://www2.h-fj.com /awstokyo0603/?no=XX 41
• 42. GitHubからテンプレートを 取り込んでみよう 42
• 43. GitHub連携機能の概要 • GitHubで管理しているテーマを MovableType.netに適用する機能 • GitHubにcommitすると即座に MovableType.netのテンプレートも更新 • MovableType.netのテンプレート編集画面 で作成したテンプレートは連携不可 43
• 44. GitHub連携機能をオンにする • 「デザイン」→「GitHub連携」メニューを選 択 • 「デザインの自動反映」のチェックをオンに して保存 44
• 45. 連携情報をコピー • Payload URLとSecret Tokenをコピー（こ の後GitHubに設定) 45
• 46. GitHubの操作手順 • 資料Webページの「GitHub連携の手順 （GitHub側）」に沿って操作 46
• 47. ファイルをまとめてアップロードしよう 47
• 48. ファイルマネージャ • 各種のファイルをアップロードする機能 • 複数のファイルをZipファイルにまとめて一 括アップロードすることも可能 • フォルダを分けてZipファイルに圧縮してお けば、そのフォルダにアップロード 48
• 49. 素材のZipファイルのダウンロード • 資料Webページの「アップロード素材」の 「素材のダウンロード」をクリックしてダウン ロード 49
• 50. Zipファイルのアップロード • 「デザイン」→「ファイルマネージャ」メニューをクリック • 「＋」のアイコンをクリック • 「ファイル選択」ボタンをクリックして「files.zip」を選択 • 「Zipファイルを展開する」をオンにして「アップロード」 をクリック 50
• 51. コンテンツの投入 • ウェブページを新規作成 • タイトルを「About」 • 本文は資料Webページの「ウェブページの 本文に投入する文章」からコピー 51
• 52. カスタムフィールドを使ってみよう 52
• 53. カスタムフィールドの概要 • フィールド＝記事等を構成する項目 • カスタムフィールド＝独自に追加できる項目 • ウェブサイトのカスタムフィールドを配下のブ ログで共有可能 53 ウェブサイト／ブログ ウェブサイト ブログ 追加先の オブジェクト 記事 10 5 ウェブページ 10 5 ブログ 10
• 54. カスタムフィールドの作成 システムオブジェクト ウェブページ 名前 背景画像 タイプ 画像 識別子 bgimg 54 • 「カスタムフィールド」→「新規」メニューを選 択 • 以下の各項目を設定
• 55. カスタムフィールドの作成例 55
• 56. カスタムフィールドの情報を 出力してみよう 56
• 57. カスタムフィールドの値の出力 • テンプレートにタグを追加して値を出力 • アイテム系以外のフィールドの場合 • アイテム系のフィールドの場合 <$mt:CustomFieldValue identifier=“識別子”$> <mt:CustomFieldAsset identifier=“識別子”> アイテムの情報を出力するテンプレートタグ </mt:CustomFieldAsset> 57
• 58. 「インデックスページ」テンプレートの書き換え • 背景画像を出力するテンプレートタグを追加 <section class="webpages" id="<$mt:PageBasename$>"> <mt:If tag="CustomFieldValue” identifier="bgimg"> <section class="webpages bgimg" id="<$mt:PageBasename$>“ <mt:CustomFieldAsset identifier="bgimg"> style="background-image: url('http://megalodon.jp/get_contents/220546023');“ </mt:CustomFieldAsset> > <mt:Else> <section class="webpages" id="<$mt:PageBasename$>"> </mt:If> 書き換え前 書き換え後 58
• 59. 動作の確認 • 資料Webページの「カスタムフィールド用画 像」をダウンロード • 「About」ウェブページを再度編集 • 「背景画像」のカスタムフィールドに、ダウン ロードした画像を設定 • ウェブページを保存してサイトの表示を確 認 59
• 60. まとめ 60
• 61. まとめ • Movable Type系列として • MovableType.netはMovable Typeの知識を 活かせるサービス • 小規模な企業サイト等の作成に便利 • AWS関連として • AWSを活かしたサービス開発の一例 61
• 62. ご清聴ありがとうございました 62