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

ン

2015/6/3

AWS Summit Tokyo 2015

1

2

前半のアジェンダ• 記事／ウェブページを作ってみよう• テンプレートの仕組み• テーマを変えてみよう• ページャを作ってみよう• ブログを作ってみよう

3

後半のアジェンダ• GitHub からテンプレートを取り込もう• ファイルをまとめてアップロードして

みよう• カスタムフィールドを作ってみよう• カスタムフィールドの情報を出力してみ

よう

4

自己紹介

5

自己紹介その 1• 藤本　壱（ふじもと　はじめ）• 兵庫県伊丹市出身• 群馬県前橋市在住

東京

埼玉

山梨神奈川

栃木

茨城

千葉

6

自己紹介その 2• ブログはもちろん Movable Type( ただし .net ではない )

http://www.h-fj.com/blog/

7

記事／ウェブページを作ってみよう

8

記事とウェブページ

記事 ウェブページ時系列やカテゴリで

ブログ的に管理新着情報、お知らせ、

etc.

フォルダで管理会社概要、アクセス、

プライバシーポリシー、 etc.

• サイトを構成するページに対応

9

記事の作成• 画面右上の「新規」をクリック（また

は「記事」→「新規」メニューをクリック )

• 記事のタイトルと本文を入力• 「今すぐ公開」か「下書き」を選んで

保存

10

表示の確認• 個々の記事／ウェブページの確認• ページ右上の「ブログ記事（ウェブペー

ジ）の確認」をクリック• ウェブサイトのトップページの確認• ページ右上の　　をクリック

11

記事の再編集• 「記事」→「一覧」メニューをクリッ

ク• 記事一覧ページで再編集したい記事の

タイトルをクリック

12

カテゴリの作成• 記事はカテゴリで分類• 「記事」→「カテゴリ」メニューを選択• 「新しくカテゴリを作成」をクリック• カテゴリ名／フォルダ名を入力して保存

• フォルダ名は URL のパスになるので半角英数字に

13

記事をカテゴリに割り当て• 記事を編集• 「カテゴリ」の部分で割り当てたいカ

テゴリをチェック

14

画像の貼り付け• 「画像を挿入」ボタンをクリック• 新しいファイルをアップロード or 既

存の画像ファイルを選択

15

テンプレートの仕組み

16

テンプレートの概要• 記事等のデータを当てはめて出力するため

のひな形• HTML 内に独自のタグ（テンプレートタグ、

MTML ）を記述• 大きく分けて 3 種類のテンプレートが存在• インデックステンプレート• アーカイブテンプレート• テンプレートモジュール

17

インデックステンプレート• 1 つのテンプレートから 1 つのページを出力• メインページやスタイルシート等に利用

「メインページ」のインデックステンプレート

メインページ

「スタイルシート」のインデックステンプレート

スタイルシート

18

アーカイブテンプレート• 1 つのテンプレートから複数のページを

出力• 記事、ウェブページ、カテゴリ別、日

付別等のページに利用

「記事」のアーカイブ

テンプレート

記事 1 のページ記事 2 のページ記事 3 のページ

・・・

19

テンプレートモジュール• 複数のテンプレートで共有• ヘッダー、フッター、サイドバー等

ヘッダーサイドバー

フッター

メインページ 記事テンプレートモジュールヘッダー

サイドバー

フッター

ヘッダー

サイドバー

フッター

20

テンプレートタグの概要• HTML のタグと同様に「 < 」と「 > 」で囲

む• タグ名の先頭は必ず「 MT 」• Movable Type のテンプレートタグの下位互

換• 利用できるテンプレートタグの一覧• https://movabletype.net/tags/

• 逆引き辞典• https://movabletype.net/dict/

21

ファンクションタグ• 値に置き換わるタグ

テンプレートタグ 出力される値MTWebsiteName ウェブサイト名MTEntryTitle 記事のタイトルMTEntryBody 記事の本文MTEntryPermalink 記事のページのアドレ

ス

22

ブロックタグ• 開始タグと終了タグから構成

<mt:XXX> ・・・ </mt:XXX>

• 以下のどちらかの動作• ブロック内を複数回繰り返す• 条件によってブロック内を出力する／しな

いを切り替え

テンプレートタグ 出力MTEntries 記事一覧の出力MTIf 条件によって出力を切り替え

23

モディファイア• テンプレートタグの動作をカスタマイズ• HTML の属性と同じ書き方

<mt:XXX モディファイア名 =“ 値”>

モディファイア 動作lower_case=“1” アルファベットを小文

字に変換encode_html=“1” 「 & 」や「 < 」をエ

ンコード

24

テンプレートの編集• 「デザイン」→「テンプレート」メ

ニューを選択• テンプレート一覧で編集するテンプレー

トをクリック

25

テーマを変えてみよう

26

テーマの概要• テーマ＝ウェブサイトを構成するテン

プレート群• 現在利用できるテーマは 6 種類

http://theme.movabletype.io/

27

テーマの変更 New!

• 「デザイン」→「テーマ」メニューを選択• 「利用可能なテーマ」でテーマを選択

して「適用」をクリック

28

テーマ変更時の注意事項• 変更前のテンプレートはすべて削除• 一度変更した後で元のテンプレートに戻すことは不可

29

ページャを作ってみよう

30

ページャ機能の概要• 記事一覧系のページで 1 ページあたりの

件数を指定可能→ MTEntries タグに「 paginate_by=“ 件数”」のモディファイアを指定• 前後のページへのリンクを出力可能

→ MTPaginationHasPrevious 等のテンプレートタグを組み合わせる• 各ページへのリンクのリストを出力する機能はなし ( 開発お待ちしています )

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>

32

標準テーマでのページャ機能• ページャ機能組み込み済み• 「 config 」テンプレートモジュールの

以下の行で 1 ページあたりの件数を指定

<mt:SetVarBlock name="paginate">10</mt:SetVarBlock>

33

ブログを作ってみよう

34

ウェブサイトとブログ• MovableType.net ではサイト全体を

「ウェブサイト」として管理• ウェブサイトのコンテンツは主に「記

事」と「ウェブページ」で管理• ウェブサイトの中に「ブログ」を複数

作ることも可能プラン 作成可能ブログ数

ライト 5

スタンダード 10

35

シンプルなサイトはウェブサイトのみで管理

ウェブサイト

記事

記事

記事

ウェブページ

ウェブページ

ウェブページ

36

複雑なサイトはコンテンツをブログに分ける

記事

記事

記事

ウェブページ

ウェブページ

ウェブページ

新着情報ブログ

記事

記事

記事

ウェブページ

ウェブページ

ウェブページ

製品紹介ブログ

ウェブサイト

37

ブログの作成• 画面左上のロゴをクリックしてダッ

シュボードに移動• 「新しいブログを作る」のリンクをク

リック• ブログ URL ／名前を決めてテーマを選

択

38

ウェブサイトのテンプレートでブログの情報を出力

• MTEntries 等のタグに「 include_blogs 」モディファイアを指定

<mt:Entries include_blogs=“ ブログの ID” lastn=“10”> <$mt:EntryTitle$></mt:Entries>

• ブログの ID はブログの管理画面で確認https://movabletype.net/sites/ ウェブサイトの ID/blogs/ ブログのID/ ・・・

前半終了休憩に入ります

39

40

後半の作業の流れ• コーヒーショップ風の

サイトを作成• テンプレートの読み込

み (GitHub連携 )

• 画像等の素材のアップロード ( ファイルマネージャ )

• コンテンツの投入• 背景画像指定機能の追加 ( カスタムフィールド )

41

資料Web ページ• お手元の「資料Web ページ」に接続し

ておいてくださいhttp://www2.h-fj.com/awstokyo0603/?no=XX

42

GitHub からテンプレートを取り込んでみよう

43

GitHub連携機能の概要• GitHub で管理しているテーマを

MovableType.net に適用する機能• GitHub に commit すると即座に

MovableType.net のテンプレートも更新• MovableType.net のテンプレート編集

画面で作成したテンプレートは連携不可

44

GitHub連携機能をオンにする• 「デザイン」→「 GitHub連携」メ

ニューを選択• 「デザインの自動反映」のチェックを

オンにして保存

45

連携情報をコピー• Payload URL と Secret Token をコピー（この後 GitHub に設定 )

46

GitHub の操作手順• 資料Web ページの「 GitHub連携の手順（GitHub側）」に沿って操作

47

ファイルをまとめてアップロードしよう

48

ファイルマネージャ• 各種のファイルをアップロードする機能• 複数のファイルを Zip ファイルにまと

めて一括アップロードすることも可能• フォルダを分けて Zip ファイルに圧縮

しておけば、そのフォルダにアップロード

49

素材の Zip ファイルのダウンロード• 資料Web ページの「アップロード素材」の「素材のダウンロード」をクリックしてダウンロード

50

Zip ファイルのアップロード• 「デザイン」→「ファイルマネージャ」メニュー

をクリック• 「＋」のアイコンをクリック• 「ファイル選択」ボタンをクリックして

「 files.zip 」を選択• 「 Zip ファイルを展開する」をオンにして「アッ

プロード」をクリック

51

コンテンツの投入• ウェブページを新規作成• タイトルを「 About 」• 本文は資料Web ページの「ウェブページの本文に投入する文章」からコピー

52

カスタムフィールドを使ってみよう

53

カスタムフィールドの概要• フィールド＝記事等を構成する項目• カスタムフィールド＝独自に追加できる項目• ウェブサイトのカスタムフィールドを配下

のブログで共有可能

ウェブサイト／ブログウェブサイ

トブログ

追加先のオブジェク

ト

記事 10 5

ウェブページ

10 5

ブログ 10

54

カスタムフィールドの作成

システムオブジェクト

ウェブページ

名前 背景画像タイプ 画像識別子 bgimg

• 「カスタムフィールド」→「新規」メニューを選択• 以下の各項目を設定

55

カスタムフィールドの作成例

56

カスタムフィールドの情報を出力してみよう

57

カスタムフィールドの値の出力• テンプレートにタグを追加して値を出力• アイテム系以外のフィールドの場合

• アイテム系のフィールドの場合

<$mt:CustomFieldValue identifier=“識別子” $>

<mt:CustomFieldAsset identifier=“識別子” > アイテムの情報を出力するテンプレートタグ</mt:CustomFieldAsset>

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>

書き換え前

書き換え後

59

動作の確認• 資料Web ページの「カスタムフィール

ド用画像」をダウンロード• 「 About 」ウェブページを再度編集• 「背景画像」のカスタムフィールドに、

ダウンロードした画像を設定• ウェブページを保存してサイトの表示

を確認

60

まとめ

61

まとめ• Movable Type 系列として• MovableType.net は Movable Type の知識を活かせるサービス

• 小規模な企業サイト等の作成に便利• AWS関連として• AWS を活かしたサービス開発の一例

ご清聴ありがとうございました

62