1. TOP
  2. HTML / CSS
  3. Movable Type 開発をする際に覚えておきたいこと
詳しくはこちら
HTML / CSS

Movable Type 開発をする際に覚えておきたいこと

先日、Movable Typeを用いたサイト開発を始めて経験しました。Movable Typeは滅多に使わないと思うので、いつかまた開発する時用に、今回覚えたことや大変だったことをまとめました。

目次

環境周り

ローカル環境

Movable Typeのローカル環境をMAMPで作る

以前この記事にまとめました。

しかし、ローカル環境は不要かなと思いました。結局、ローカルで作業した内容を本番にも移行させなければいけないので、それなら最初から本番環境にBasic認証をかけて作業するほうが良いかなと思いました。

 

環境移行は今回の案件ではやらなかった（ローカル環境を作ったけど、結局本番環境でずっと作業してたから）ので詳しいやり方は分かりませんが、作ったテンプレートファイルなどをFTPでアップすれば実現できそうな気がします。

FTP権限
もし可能なら、クライアントからFTPの権限を貰っておきましょう。
プラグインの導入には、MTをインストールしたディレクトリにプラグインファイルをアップしなければいけません。WordPressみたいに管理画面からプラグインをインストールはできませんでした。
おそらく環境移行のためにテンプレートをインポートする場合もFTPでアップする流れになるのかなと思います。

ディレクトリ構成

公式ドキュメントに詳しく書かれています。

Movable Type本体やプラグインのファイルはアプリケーションディレクトリ。cgi-binとかMT7-R5003とかがディレクトリの名前なはずです。
※MT7-R5003はMovable Typeのバージョンだと思います。なので、人やインストール時期により変わると思います。

管理画面の見た目を制御しているCSSやJSがスタティックディレクトリ。インストール時以外あまり触ってないと思います。mt-staticとかがディレクトリの名前なはずです。

本番公開されるとこがウェブサイトディレクトリ。Movable Typeがコンパイルしたファイルはここに出力されます。ディレクトリ名は自由に決められます。

 

超初心者でもわかる！Movable Typeのインストール＆導入方法

LIGさんの記事でも詳しく紹介されています。以下は引用です。

アプリケーションディレクトリ

Movable Type本体や実行するスクリプトやプラグインを保管するディレクトリ。
スクリプトを実行させる必要があるため、PerlCGIスクリプトが実行できる環境に設置してください。（俗に言う「cgi-bin」）

管理画面もこちらのディレクトリに設置したスクリプトにアクセスする形になります。アプリケーションディレクトリを「cgi-bin/movabletype」にした場合、管理画面は「cgi-bin/movabletype/mt.cgi」になります。

ダウンロードを解凍してできるディレクトリ内にある「mt-static」フォルダ以外を全てこちらにアップロードします。
アップロードしたら「mt.cgi」が設置してある階層にあるcgiファイルに全て実行権限を与えてください。だいたい「755」か「705」です。
サーバにより実行権限設定値は変わるので確認して設定してください。

 

スタティックディレクトリ

Movable Typeの管理画面で利用するスタイルシートや画像ファイルなどを格納するディレクトリ。本体を解凍してできるディレクトリ内の「mt-static」がこれにあたります。

※本体と同梱されている「mt-static」は「cgi-bin」ディレクトリ内で画像やCSSなどを設置・動作できる状態になっていれば移動する必要はありません。

「cgi-bin」ディレクトリに画像やCSSなどの表示・動作を許していない設定がかかっている場合は、ドキュメントルートなどにそのまま設置してもいいでしょう。

 

ウェブサイトディレクトリ

Movable Typeからファイルを出力するディレクトリ。
ドキュメントルートに設定することは可能ですが、こちらも出力権限に注意しましょう。

共用サーバの場合、FTPユーザと出力ユーザが同一の場合がありますが、VPSサーバの場合FTPユーザとMTで出力するユーザが違うパターンがあります。
この場合は出力先の権限設定を怠ると出力エラーを引き起こします。

開発の流れ

  1. Movable Typeをインストール
  2. ローカルでまずは静的なページを作る（HTML, CSS, JavaScript）
  3. 管理画面でテンプレートファイルを修正
  4. 画像をアップロード
  5. Movable Typeのドメインで確認

特に3のテンプレートファイルの修正がとても大変でした。どのテンプレートを触ればいいのかも最初は分かりませんでした。

テンプレートの編集&新規追加

管理画面の「デザイン＞テンプレート」でMTのテンプレートファイルを編集できます。

基本的にはデフォルトのファイルは残しておき、新規でファイルを作るほうがいいかなと思います。

 

新規追加は右上のセレクトボックス（テンプレートの種類を選択）から行います。

テンプレートの種類は以下で解説します。

インデックステンプレート

サイトのベースのとなるテンプレート。

TOPページは「メインページ」が名前で、これはどのテーマも共通だと思います。ここで触るのはメインページ、CSS、JavaScriptくらいかなと思います。

新規追加の際は、セレクトボックス（テンプレートの種類を選択）の「インデックス」を選択します。

アーカイブテンプレート

TOPページ以外のページのベースになるテンプレート。

「ウェブページ」という名前のテンプレートは、左サイドバーのウェブページから作れる静的なページのテンプレート。WordPressでいう固定ページ。

 

アーカイブパスは、指定されたURL形式でアクセスしたら、それにマッチするテンプレートを呼び出します。WordPressでいうパーマリンク。リライトはできなそうでした。

公式ドキュメント：アーカイブマッピングで利用するアーカイブファイル名の定義

 

アーカイブテンプレートには、<head>タグや<body>などHTMlのベースだけど記述して、中身のコンテンツは後述のテンプレートモジュールで管理するのが良いかなと思いました。そうすることで、基本的に編集するファイルはテンプレートモジュールだけになるので、開発がやりやすかったです。

コンテンツタイプテンプレート

使ったテーマ（Rainier 1.3）には無かったです。名前の通りコンテンツタイプのテンプレートだと思います。

コンテンツタイプは多分、WordPressでいうカスタム投稿とカスタムフィールドを組み合わせたものなのかなと思いました。1サイト内に複数のCMS（例えば、ニュースとブログ）が必要になったら使わなければいけないかも。

テンプレートモジュール

様々なコードをパーツとして登録しておけるテンプレート。WordPressでいう、header.phpやfooter.phpなどの共通ファイルをここに作るイメージです。

私は、共通ファイルのほかにも、ページの中身（記事一覧、カテゴリーごとの記事一覧、記事詳細、ウェブページの中身など）もここで管理しています。

ここには以下のようなテンプレートを作りました。

  • <head>の中身
  • ヘッダー
  • フッター
  • TOPページの中身
  • 記事一覧、記事詳細などの中身
  • ウェブページの中身
  • その他細かいパーツ（ページャーやカテゴリー一覧のリンクなど）

ここで指す各ページの中身とは、ヘッダーフッター以外の各ページ固有のHTMLです。

テンプレート名の命名規則

ほとんどのテーマは、このテンプレートモジュールが最初から大量にあります。自分で作ったテンプレートがどれなのか分からなくなるのを防ぐために命名規則を用意しておくといいでしょう。

私は、名前の先頭にアンダーバー（_）を付けるようにしています。テンプレート一覧は「アルファベット→日本語の五十音順」で並んでいるので、アンダーバーを最初に付けると上のほうに表示されるので結構便利です。

システムテンプレート、ウィジェットセット、ウィジェットテンプレート

使わなかったです。

ページURLの.htmlを消す方法

ウェブページ新規作成時に、ファイル名をindex.html、フォルダを任意のパスにする（フォルダが無ければ新規登録する）。

コードTips

コードで迷った箇所をまとめました。

ウェブページの出し分け

複数のページ（例えば、会社概要と事業内容）を作るときに、どうやって出し分ければいいかに迷いました。

 

まず、アーカイブテンプレートにウェブページ用のテンプレートを作成し、以下のコードを書きます（必要に応じて、<head>や<body>、ヘッダーフッターなども書いてくださいね）。

<mt:Ignore><!-- 変数定義 今のページのパスを取得 --></mt:Ignore>
<mt:setvarblock name="pageurl"><$mt:PageBasename$></mt:setvarblock>

<mt:Ignore><!-- 変数定義 今のページのフォルダを取得 --></mt:Ignore>
<mt:setvarblock name="folder"><mt:toplevelfolder><$mt:FolderLabel encode_html="1"$></mt:toplevelfolder></mt:setvarblock>

<mt:Ignore><!-- パスに応じてテンプレートモジュールを出し分ける --></mt:Ignore>
<mt:If name="folder" eq="partner">
    <$MTInclude module="_会社概要"$>
<mt:ElseIf eq="media">
    <$MTInclude module="_事業内容"$>
<mt:Else>
</mt:If>

上記コードでは、パスかフォルダを取得して、それに応じてテンプレートモジュールを出し分けています。

今はフォルダでif文を作っているので、パスで出し分けたいときはif文の<mt:If name="folder" eq="partner">のfolderをpageurlに変えてください。

ページの種類に応じて出し分け

TOPページ、記事一覧アーカイブページなど、ページの種類をif文で出し分ける方法です。

<mt:If name="main_index">
  // TOP
<mt:ElseIf name="archive_listing">
  // 記事一覧  
<mt:ElseIf name="entry_archive">
  // 記事詳細
<mt:ElseIf name="page_archive">
  // ウェブページ
</mt:If>

上記のifのname値は他にも設定できます。

参考：アーカイブテンプレートに設定される予約変数

記事詳細にサムネイルを設定する

  1. 管理画面からカスタムフィールドを作る
  2. コードを編集

まずは管理画面から記事詳細用のサムネイルのカスタムフィールドを作ります。以下を参考に値を入力します。

ベースネームとテンプレートタグは同じ名前にするといいでしょう。この値は他のコードの変数などと重複しないようにします。

必要な値を入力して保存をしたら、記事作成画面でサムネイル（画像）が設定できるようになります。

次に、コードを編集します。先程テンプレートタグに設定した値を用います。以下コードでは、entry_thumbと書かれている箇所がテンプレートタグで設定した値になります。

<mt:If tag="entry_thumb">
  <mt:entry_thumbAsset><img src="<$mt:AssetURL$>" alt=""></mt:entry_thumbAsset>
</mt:If>

公式ドキュメント

MovableType.net 逆引き辞典

丁寧に作られているのでとても分かりやすかったです。WordPressを理解していればこっちもすぐ理解できるはず。

既存のテーマのコード（記事一覧の出力方法など）を参考にするのもありです。

 

おすすめテーマ

Rainier 1.3がよかったです。理由はページネーションテンプレートがあるからです。いくつかのテーマには存在しません。

 

注意点（必読）

管理画面からテーマを切り替えたら、編集したテンプレートは全部消えます。

さらに...例えば、今のテーマを「A」としてテンプレートを色々編集している。「B」に変えると当然テンプレートがリセットされる。この後に「A」に戻しても編集していたテンプレートは戻らないです。「A」のデフォルトテンプレートになってしまいます。

なので、テンプレートファイルはローカルでGitなどで管理しておきましょう。「ローカルでコードを編集→ファイル保存→管理画面に反映」のようにするといいと思います。

関連記事