はじめよう！MovableType.net ハンズオン
•Download as PPTX, PDF•
1 like•1,672 views
2015年6月3日のAWS Summit Tokyo 2015で行ったMovableType.netハンズオンセミナーの資料です
Recommended
More Related Content
What's hot
What's hot (11)
Similar to はじめよう！MovableType.net ハンズオン
Similar to はじめよう！MovableType.net ハンズオン (20)
More from Hajime Fujimoto
More from Hajime Fujimoto (20)
Recently uploaded
Recently uploaded (10)
はじめよう！MovableType.net ハンズオン
- 2. 前半のアジェンダ • 記事／ウェブページを作ってみよう • テンプレートの仕組み • テーマを変えてみよう • ページャを作ってみよう • ブログを作ってみよう 2
- 3. 後半のアジェンダ • GitHubからテンプレートを取り込もう • ファイルをまとめてアップロードしてみよう • カスタムフィールドを作ってみよう • カスタムフィールドの情報を出力してみよう 3
- 4. 自己紹介 4
- 5. 自己紹介その1 • 藤本 壱（ふじもと はじめ） • 兵庫県伊丹市出身 • 群馬県前橋市在住 東京 埼玉 山梨 神奈川 栃木 茨城 千葉 5
- 8. 記事とウェブページ 記事 ウェブページ 時系列やカテゴリでブ ログ的に管理 新着情報、お知らせ、 etc. フォルダで管理 会社概要、アクセス、 プライバシーポリシー、 etc. • サイトを構成するページに対応 8
- 9. 記事の作成 • 画面右上の「新規」をクリック（または「記 事」→「新規」メニューをクリック) • 記事のタイトルと本文を入力 • 「今すぐ公開」か「下書き」を選んで保存 9
- 10. 表示の確認 • 個々の記事／ウェブページの確認 • ページ右上の「ブログ記事（ウェブページ）の 確認」をクリック • ウェブサイトのトップページの確認 • ページ右上の をクリック 10
- 12. カテゴリの作成 • 記事はカテゴリで分類 • 「記事」→「カテゴリ」メニューを選択 • 「新しくカテゴリを作成」をクリック • カテゴリ名／フォルダ名を入力して保存 • フォルダ名はURLのパスになるので半角英数字に 12
- 14. 画像の貼り付け • 「画像を挿入」ボタンをクリック • 新しいファイルをアップロード or 既存の画 像ファイルを選択 14
- 15. テンプレートの仕組み 15
- 16. テンプレートの概要 • 記事等のデータを当てはめて出力するた めのひな形 • HTML内に独自のタグ（テンプレートタグ、 MTML）を記述 • 大きく分けて3種類のテンプレートが存在 • インデックステンプレート • アーカイブテンプレート • テンプレートモジュール 16
- 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” 「&」や「<」をエンコード
- 25. テーマを変えてみよう 25
- 27. テーマの変更 New! • 「デザイン」→「テーマ」メニューを選択 • 「利用可能なテーマ」でテーマを選択して 「適用」をクリック 27
- 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
- 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
- 43. GitHub連携機能の概要 • GitHubで管理しているテーマを MovableType.netに適用する機能 • GitHubにcommitすると即座に MovableType.netのテンプレートも更新 • MovableType.netのテンプレート編集画面 で作成したテンプレートは連携不可 43
- 45. 連携情報をコピー • Payload URLとSecret Tokenをコピー（こ の後GitHubに設定) 45
- 48. ファイルマネージャ • 各種のファイルをアップロードする機能 • 複数のファイルをZipファイルにまとめて一 括アップロードすることも可能 • フォルダを分けてZipファイルに圧縮してお けば、そのフォルダにアップロード 48
- 50. Zipファイルのアップロード • 「デザイン」→「ファイルマネージャ」メニューをクリック • 「＋」のアイコンをクリック • 「ファイル選択」ボタンをクリックして「files.zip」を選択 • 「Zipファイルを展開する」をオンにして「アップロード」 をクリック 50
- 51. コンテンツの投入 • ウェブページを新規作成 • タイトルを「About」 • 本文は資料Webページの「ウェブページの 本文に投入する文章」からコピー 51
- 53. カスタムフィールドの概要 • フィールド＝記事等を構成する項目 • カスタムフィールド＝独自に追加できる項目 • ウェブサイトのカスタムフィールドを配下のブ ログで共有可能 53 ウェブサイト／ブログ ウェブサイト ブログ 追加先の オブジェクト 記事 10 5 ウェブページ 10 5 ブログ 10
- 54. カスタムフィールドの作成 システムオブジェクト ウェブページ 名前 背景画像 タイプ 画像 識別子 bgimg 54 • 「カスタムフィールド」→「新規」メニューを選 択 • 以下の各項目を設定
- 55. カスタムフィールドの作成例 55
- 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('<$mt:AssetURL$>');“ </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