Movable Typeの最近のブログ記事

MT5がリリースされてそこそこの時間が経過し、
あちらこちらでMT5でのサイト構築案件を見かけますね。

今現在自分の勤めている会社でMT5を導入する話はなく、僕は今後もしばらくMT4でサイト構築をしていくだろうと思われます。

しかし、やっぱり気になりますよねぇ、MT5。
何でもそうですが新しいバージョンとかが登場すれば触ってみたくなるのが人情ってもんでしょ?

てなわけでMT5を導入してみました。

災い転じて福となす?

正直、このブログにMT5を導入するのはかなり悩みました。
あんまりいい噂聞かないんで・・・。

しかし!使ってみたい欲望には勝てず、ガッチリバックアップをとってバージョンアップ開始!
作業にあたっては僕が勝手に師匠の一人だと思っている蒲生トシヒロさんの「世界中の1%の人々へ」の
Movable Type 5.0リリース:MT4.2xからMT5.0へのアップグレードは超簡単!」を参考にさせていただきました。

バージョンアップはサクサク進み、終了。
ダッシュボードを立ち上げ、今までのブログがどうなっているのかを確認・・・って、あれ?無いぞ!?

色々情報収集をしたのですが、よくわからず・・・。
カスタマイズしまくったブログ類が認識されていないようで、デフォルトテンプレートのものは認識している感じでした。

通常はらばこれは大変な事態で、いかにして解決するか奔走するところですが今回は放置することにしました。

MT4とMT5は当然別フォルダーに入っているわけなんですが、試しにバックアップ用だったMT4をキチンと使える状態に戻したところ、今まで通りに使えました。
 

取りあえずMT4が使えているのならばMT5への移行はじっくり様子を見ながら行えばいいので、色々と不具合等を検証してから切り替える余裕ができた感じです。

ウェブサイトの中にブログが入る?

一番大きい変化はこのウェブサイトとブログの関係ですよね。
この辺りの解説は蒲生 トシヒロさんのブログを参考にされた方が早いでしょう。

個人的にはサイト管理をより分かり易くできるだろうと思って喜んでます。
一つのサーバーに複数のサイトを置いてそれぞれがマルチブログ化していたりしてる際などは今までより管理し易そうですね。

管理画面はかなり変わったんですねぇ

自分的にはWordPressっぽいなぁ、などと思っています。
メニューも左カラムになったんですね。


まぁ、僕の場合は十中八九、オリジナルのカスタムメニューをつけてしまうので
サイト運営者にはカスタムメニューの使い方だけしか説明しないんですけどね。

取りあえず楽しみです

いじりまくるのはまた今度にするとして、新しいモノを目にするとワクワクするのは変わらないですね。
きっとまた色々なプラグインなんかも出てくるでしょうしね。

いい機会なんでMT5であたらしいサイトでも制作します。
その際のレポートはまた後日。

mt alt-tmlp customize

以前MovableType(以下MT)の管理画面カスタマイズの記事を書きましたが、非常に中途半端なところで終わらせていたのでその続きを書く事にしました。

前回はalt-tmplにコードを追記するとどうなるか?的な記事でとどめていましたが、今回はもう一歩踏み込んで、より実用的なソースを紹介します。
前回の記事では「<div id="content-header"><div id="content-header-inner" class="inner pkg">の下にメニューを追加」と書きましたが、今回は<div id="content-header">直下に追加しています。

カスタムメニューは外部ファイル化が望ましい

メンテナンス性を考えれば当然外部ファイル化した方がいいですよね。特に条件分岐させて違うメニューを読込ませたりする時にメニュー毎に別ファイルにすると便利です。

考え方は前回にも紹介しましたが野田純生さんの「壊れにくいカスタマイズの為に」を参考にさせていただいています。

<div id="content-header">

<!--管理画面用カスタムテンプレートをインクルード-->
<mt:include name="include/edit_entry_extra.tmpl">

カスタムメニューは「edit_entry_extra.tmpl」という外部ファイルにしてインクルードしています。ファイルの置き場所は別にどこでもいいのですが「header.tmpl」と同じ場所にしました。
インクルードしたファイルの中身はこんな感じです。

<MTSetVarBlock name="blog_id"><$MTBlogID$></MTSetVarBlock>
<MTIf name="blog_id" eq="10">
<!--コーポレートサイトサンプル用メニュー-->
<div id="myMenu">
<ul>
<li><span class="myMenu_Head">トップページ</span><a href="mt.cgi?__mode=view&_type=entry&id=57&blog_id=10">リード文</a><a href="#">会社概要</a></li>
<li><span class="myMenu_Head">事業概要</span><a href="mt.cgi?__mode=view&_type=entry&id=60&blog_id=11">リード文</a><a href="#">事業紹介</a><a href="#">当社の強み</a></li>
<li><span class="myMenu_Head">会社情報</span><a href="#">リード文</a><a href="#">会社概要</a><a href="#">組織図</a></li>
<li><span class="myMenu_Head">業務実績</span><a href="#">リード文</a><a href="#">実績紹介</a></li>
<li><span class="myMenu_Head">採用情報</span><a href="#">リード文</a><a href="#">応募要項</a><a href="#">応募フォーム</a></li>
<li><span class="myMenu_Head">お問合せ</span><a href="#">リード文</a><a href="#">お問合せフォーム</a></li>
<li><span class="myMenu_Head">サイトマップ</span><a href="#">リード文</a></li>
</ul>
<a href="javascript:history.back();">一つ前のページへ戻る</a>
</div>
<MTElse>
<!--カスタムメニュー未設定状態です。-->
MyMenu
</MTElse>
</MTIf>

このメニューではMTIfを使ってブログ毎に違うメニューを表示させる仕掛けをしています。<$MTBlogID$>でブログIDを取得、IDが「10」ならメニューを表示、それ以外はメニューは表示されません。

この例では企業サイト用のメニューを想定して制作してみました。トップページと事業概要のリード文編集用のリンクだけ記入して後は#にしてしまっています。

トップページのリード文編集画面へのリンクをみると「entry&id=57&blog_id=10」となっています。「ブログID10、エントリーID57」を指定しています。事業概要のリード文は「entry&id=60&blog_id=11」ですので「ブログID11、エントリーID60」を指定しています。
マルチブログとしてサイトを制作している際でもID指定を間違えなければピンポイントで表示させたいページを指定出来るのでサイト運営者の負担を軽減させる事が出来ます。

もちろん、こういったブログ間を行き来するメニューを作成する場合は編集対象にしている各ブログの権限を状況に合わせて調整してください。

おまけとしてJavaScriptでhistory.backをつけています。個人的にこれを付けておくとサイト運用者に説明がし易かったりするので・・・。

さて、レイアウトを調整する為にCSSに追記です。管理画面のCSSは「mt-static/css/main.css」ですが、今回は「alt-tmpl/include」内に「mymenu.css」という外部CSSを置いて読込ませています。
やはりなるべくデフォルトのCSSに手を加えてしまうと後々面倒くさいので。CSSの内容は以下の通り。

#content-header {
    padding-top: 15px;
}
#myMenu {
    width:920px;
    text-align:left;
    padding-left:20px;
    font-size:12px;
    line-height:1.5em;
    color: #333333;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0px;
}
#myMenu li {
    background-color:#FFFFFF;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #CCCCCC;
}
#myMenu li a {
    padding-left: 1em;
}
.myMenu_Head {
    display:block;
    font-weight:bold;
    color:#FFFFFF;
    width:10em;
    float:left;
    background-color: #666666;
    padding-left: 0.5em;
}

で、管理画面はこんな感じになります。

カスタムメニューの例

まぁ、あとはお好みで調整してください。

このブログのメタタグの出力部分にミスを発見!
最後に公開されたエントリーの概要が全ページに指定されていました・・・。

アホですかいな・・・。

メモ代わりと修正の履歴としてソースを貼っておきます。

このブログは(2010/03の時点で)変数ブロックばっかり集中して書かれた「mtvar」という名前のモジュールを読込む様につくってあります。そのモジュールの内容をそのまま公開。

<MTIgnore><!--キーワード--></MTIgnore>
<MTRemoveBlank>
<MTSetVarBlock name="KeyWordsTxt">
<mtif name="pageName" eq="top"><meta name="Keywords" content="Web制作,MT,MovableType,HTML,CG,デザイン" /></mtif>
<MTIfArchiveType archive_type="Individual"><meta name="Keywords" content="<mt:If tag="CategoryDataCategory_keyword"><mt:CategoryDataCategory_keyword></mt:If>,<$MTEntryKeywords$>" /></MTIfArchiveType>
<MTIfArchiveType archive_type="Category"><meta name="Keywords" content="<mt:If tag="CategoryDataCategory_keyword"><mt:CategoryDataCategory_keyword></mt:If>" /></MTIfArchiveType>
<MTIfArchiveType archive_type="Monthly"><meta name="Keywords" content="Web制作,MT,MovableType,HTML,CG,デザイン,<MTEntries lastn="3" glue=","><$MTEntryKeywords$></MTEntries>" /></MTIfArchiveType>
</MTSetVarBlock>
<MTIgnore><!--概要--></MTIgnore>
<MTSetVarBlock name="DescriptionTxt">
<MTIfArchiveType archive_type="Individual"><meta name="Description" content="<$mtEntryExcerpt$>" /></MTIfArchiveType>
<MTIfArchiveType archive_type="Category"><meta name="Description" content="Soh-Web<$MTArchiveTitle$>のアーカイブです。<$MTCategoryDescription$>" /></MTIfArchiveType>
<MTIfArchiveType archive_type="Monthly"><meta name="Description" content="Soh-Web<$MTArchiveTitle$>のアーカイブです。<$MTBlogDescription$>" /></MTIfArchiveType>
<mtif name="pageName" eq="top"><meta name="Description" content="<$MTBlogDescription$>" /></mtif>
</MTSetVarBlock>
<MTIgnore><!--タイトル--></MTIgnore>
<MTSetVarBlock name="titleTxt"><title><mtif name="pageName" eq="top"><$MTBlogName$></mtif><mtif name="pageName" eq="search"><$MTBlogName$></mtif><MTIfArchiveType archive_type="Individual"><$MTEntryTitle$>&nbsp;|&nbsp;<$MTEntryCategory$>&nbsp;|&nbsp;<$MTBlogName$></MTIfArchiveType><MTIfArchiveType archive_type="Category"><$MTArchiveTitle$>&nbsp;|&nbsp;<$MTBlogName$></MTIfArchiveType><MTIfArchiveType archive_type="Monthly"><$MTArchiveTitle$>&nbsp;|&nbsp;<$MTBlogName$></MTIfArchiveType></title>
</MTSetVarBlock></MTRemoveBlank>

<MTRemoveBlank>はMTタグを使用すると出力時の余計な改行を削除してくれるというプラグイン「RemoveBlank」用のタグ。
こちらのブログを参考にさせていただきました。感謝です。

でも思ったほどには削除してくれなくて結局は書き終えたら自分で改行を詰めちゃってるので上記みたいなソースになっているわけです。

思うに一つのモジュールに詰め込み過ぎなんですよねぇ~。
でも今は修正が面倒くさいのでいずれ直そうかなと思っています。

さて、<mtif name="pageName" eq="top">なんて記述がありますが、これはトップページ用のテンプレートに

<$MTSetVar name="pageName" value="top"$>
<$mt:Include module="mtvar"$>

ってな記述になっているわけです。
これは後々インデックステンプレートを増やしていく計画がある為、その時に「pageName」という変数でmetaタグやらjavascriptやらcssやらの内容を変えていこうと考えているわけです。現在はmetaタグのみですけど。

しかし見づらいソースですなー。
改善しようっと。反省です。

MovableType初心者でも必ず作れる(?)サイト制作を考えてみる

なんかすごいタイトルでスイマセン・・・。
こういうタイトル画像が作りたかっただけなんです・・・。

さて。

MovableType(以下MT)に初めて触れた時、正直いって何をどうするべきかサッパリ分かりませんでした(笑)
しかしプログラミングが出来なくても更新性の高いサイトが構築できるという事は大きな魅力ですよね。

タイミング良く現場で「MTを利用してサイトを制作して欲しい」との要望も出た為、よくわからないながらも制作してみたのがきっかけでMTをよく触るようになりました。

以前、既存サイト内にブログを設置する仕事があり、WordPressで作成したブログから記事を抜き出してPHPで既存ページに埋め込む作業をした事がありました。
その時に「なるべく考え方を単純にして最低限のソースだけを扱う」と決めて作業をしました。それが功を奏し、比較的短い作業時間でサイトへの組み込み作業を終了させる事が出来ました。

MTでも同じ様に「最低限のソース」だけで作業すれば誰でもサイト制作に利用できる筈!と考えました。

下準備

ここでは「頻繁に更新の必要があるページの本文だけをピンポイントで更新できれば良い」という事にして話を進めます。

  1. MTで更新予定の部分以外の全てをあらかじめ完成させておきます。
  2. MTをサーバーにインストール。インストールが完了したらテンプレートを全て削除してしまうのがお勧め。とっておくと余計な混乱を招くので。
  3. テスト用で構わないので記事を一つ作成。記事のID番号を取得しておく(IDについては後述)。

組み込み

あらかじめ制作済みのサイト側で、MTで更新したいページの更新したいコンテンツ部分にMTタグを記述。記述内容は後述を参考に。
MTタグの記述を終えたらそのファイルをそのままMTのテンプレートにするのでファイル名を「mt_temp.html」とか分かりやすい名前にしてお く。

MTで更新する部分以外は通常通りに完成させてしまう

サイトをサーバーにアップロード。

MTのテンプレートメニューから「インデックステンプレート」を新規作成。テンプレートの設定部分から「ファイルへのリンク」で先ほどの「mt_temp.html」などのファイルを指定。出力ファイル名を実際のサイトで使用する名前を記述して保存する。

テンプレートとして制作したファイルを読込ませる

 

「サイト再構築」させる。再構築が終わったらテスト用に作成した記事の内容がサイトに反映されるかをチェック。

MTで更新したいページ分だけ名前を変えて同じ事を繰り返す。

と、一気手順をに書いてみました。わかり難いですかね?
一応ググリ易いように制作上のポイントになるキーワードを入れながら書いたつもりです。
  

完璧なCMSを作る事にはこだわらない

前述では説明を飛ばしたMTタグについての簡単に解説させて頂きます。

MTに初めて触って難しいと感じたりつまずいたりするのは多分制御系のタグ。
プログラムを書いている人にとっては何て事のないタグだと思いますが、苦手な人はここで尻込みしてしまう事もあります。

ならば思いっきり単純化して最初は<MTEntries>とその周辺で使うタグだけ覚えればいい事にすればグッと敷居が下がり、簡単に使えるようになりますよね。

例1:記事のIDを固定してしまう考え方

<MTEntries id="1">
<!--記事のタイトル-->
<h2><$MTEntryTitle$></h2>
<!--記事の内容-->
<$MTEntryBody$>
</MTEntries>

「IDが1の記事(MTEntries id="1")のタイトル(MTEntryTitle)と記事(MTEntryBody)」を表示するというだけの内容。

この作り方の特徴は

  • 更新したいコンテンツのエントリー画面は一つだけなので分かり易い

まぁこれだけなんですけど。
ではIDの解説です。

記事はそれぞれ固有の「ID」をもっています。エントリー編集画面(ブログ記事の編集画面)を開いている時にそのページのURLを見ると記事のIDが表示されています。複数のブログを作成している時はブログのIDも表示されます。

ちなみにこの記事のIDはURLに「id=53」と表示されています。
 記事のIDとブログのIDが表示されている

これは WordPressでも同じ様に特定の記事をID指定で呼びだすようにタグを入れていけば簡単に管理画面を利用して更新可能なWEBサイトが出来上がるわけです。

ID固定で表示させる

まあ、これは一番簡単な作り方で、急いでいる時にサイト全体の内の数ページでやった事があります。
実務で全ページこれだったら多分怒られます(笑)まかりなりにも数万円のライセンス料を支払ってMTを導入しているワケですからねぇ(苦笑)。
こういう作りで済ませてしまうならWordPressの方がいいですね。無料なんで。

例2:1コンテンツ1カテゴリーにしてしまう考え方

<MTEntries category="News" lastn="1">
<!--記事のタイトル-->
<h2><$MTEntryTitle$></h2>
<!--記事の内容-->
<$MTEntryBody$>
</MTEntries>

「Newsとういうカテゴリー(MTEntries category="News")の最後の一つ(lastn="1")」を表示するという内容です。

先ほどよりもうちょっとだけ機能性もたせたのがこの2番目の方法です。

こちらはこんな機能があります。

  • 過去記事を保存しておける
  • 記事の投稿予約が出来る(サーバー環境により左右されます)

先ほどの例1の時では「ID」を特定していましたが、今度はそれを「カテゴリー」にしているだけです。
このやり方にすると、現在表示させている記事の他に同じカテゴリーとして過去記事や公開前の記事を下書きとして保存して置けます。
この例では「test」というカテゴリーの記事の中で最新のものが一つだけしか表示されないのですが過去の記事に戻したい時などは新しい記事の「公開状 態」を未公開にすれば良いわけです。

特定カテゴリーの最新記事一件を表示させる

また、サーバーの都合で「cron」が使えるのならば予約投稿の機能を使って指定日時に記事を入れ替える事ができます。
先ほどよりもひとつ機能が増えました。
※cronとはunix系のマシンでコマンドを自動実行させるプログラム。実は使えないサーバーって多いんですよ。そんな時はほぼ指定日投稿なんてプラグインもあったりします。

この例では「lastn="1"」にしていますがコレを「lastn="5"」とかにして更に日付を表示させていくと通常のブログのような見た目になっていきます。

カテゴリーの使い方は工夫次第で面白いことが出来ますので慣れてきたら色々実験してください。

余談:パーツのモジュール化について

MTには「パーツのモジュール化」する機能があります。サイトを様々なパーツに分割して管理する方法です。
モジュール化は便利ですが、僕の場合それが必須だとは考えていません。

この記事では「MTで更新する部分以外は予め完成させておく」という前提で話を進めてきました。ということは基本的にサイトはほぼ完成しているので、無理にMTでパーツのモジュール化を進めてもただ仕事を増やしているだけですよね。
MTタグを積極的に使用して様々な条件分岐を施して出力させている場合、その部分に関しては当然MTでモジュールする必要があります。個人的にはそれ以外の部分はPHPでモジュール化(言葉は適切ではないかも知れませんが)した方が好きです。

理由は簡単。MTでモジュール化すると再構築が必要で、個人的は「かったるい」んですよ(笑)

まぁ自分の作りやすい方法で良い結果が出せれば好きな方法で制作してください。あんまりMTに囚われ過ぎて制作がスムーズにいかなくなると困りますから。

 

僕がMovableType(以降MT)のサイト構築をする際、必須事項にしているのがダッシュボード等の管理画面のカスタマイズです。
サイト運用者が直感的に運用できるようにする為、専用のメニューを付けてあげることでより運用が簡単になり、実用性が向上します。

MTの管理画面はMTタグによって作られています。
通常のページ作成時には使用されない特殊なタグが出てきたりもするのですが、そういう危なそうな部分には触らないようにして自分に分かりそうな部分をいじる程度でグッと使いやすいサイトに生まれ変わりますよ。

管理画面のテンプレートを直接いじくってもいいのですが、何か不具合が出た際にはデフォルトに戻したいですよね。その為、通常はalt-tmplというフォルダーに管理画面用の代替テンプレートを入れてあげる事でカスタマイズを行います。

alt-tmplの使い方

まず管理画面を構成するテンプレート類がMTをインストールしたフォルダーのtmpl/cmsに納められているので編集用に丸ごとコピーしておきます。
この中から編集したいファイルを選んで編集すればいいわけですが、一体どれをいじればいいのやら・・・
ってな感じになるはずですよね。ここでは僕がいつも使用するファイルを2つだけ紹介します。

  • edit_entry.tmpl(エントリー画面のテンプレート)
  • header.tmpl(ヘッダー画面のテンプレート「include」に入ってます)

僕はこの2つだけのカスタムにとどめています。あんまり手を広げすぎると収拾付かなくなりそうなので・・・。
これらのファイルに必要な変更を加えてMTをインストールしたフォルダー内にあるalt-tmplというフォルダーに入れてやるとalt-tmpl内のテンプレートに代替されます。

簡単な例

header.tmplの207行目辺りに次のような記述があります

 <div id="content-header"><div id="content-header-inner" class="inner pkg">

 この行の後に次の一行を加えてUTF-8で保存してサーバー内のalt-tmplにアップロードしてください。

<p>管理画面カスタム</p>

するとこんな感じで変化します。

alt_tempに追記した簡単な例

独自の変更が反映されたことが確認できました。
alt-tmplからファイルを削除すればデフォルトに戻ります。

管理画面のカスタマイズ方法を覚えるに当たって以下のサイトを参考に勉強させて頂きました。

The blog of H.Fujimotoさんの MTの管理画面カスタマイズの基本

また、もうひとつ踏み込んでカスタムを進めていくに辺り、Junnama Online(野田純生)さんのMovable Type管理画面の「壊れにくい」カスタマイズのために。という記事が参考になります。

先人達の知恵に感謝!

1  2  3

カレンダー

<  
2010年5月

RSSフィード