ノセノセはてなブログ

テクニカルよりのWebディレクターがつらつらと綴るブログ

未経験からでもできるMovable Typeの勉強方法

これは Movable Type Advent Calendar 2015 の19日目の記事です。

Moable Type(以下、MT)は、Contents Management System(CMS)です。10年以上前から利用され、ずっと進化し続けているツールでもあります。初期の頃はブログツールとして爆発的に利用されました。

WordPressはMTをインスパイアして誕生し、今ではとても人気のあるCMSになりました。

そんなMTを未経験の方がどのように勉強していけばよいか、というのをざっくり書いていきます。ステップに分けていくので、ご自身にあったところを参考にしていただければ。ステップは全部で3ステップです。

 

ステップ1 全く触ったことない!WEB制作とか未経験!まずは触ってみよう!

誰でも最初にはみんな初心者です。最初からデキる人なんて誰もいません。
最初から自転車に乗れる人なんていないので、みんな転んだりふらふらしてこいだりしているのです。

f:id:hironoche:20151219133441j:plain

まず最初は、MTを触ってみましょう。

無料で触れるMTといえば、コレ。

movabletype.net


クラウドサービス版のMTです。まずはこちらを会員登録して、ゴニョゴニョ触ってみましょう。
MTファミリーの中でも一番末っ子で、多少の差はありますが気にしなくてOKです。

WPでいうところの、wordpress.com みたいなものです。

レンタルサーバを借りて、自動インストール(MTOS)

特定のレンタルサーバでは、CMSツールやWEBアプリケーションの自動インストールを提供しているところがあります。コレを利用すると、インフラやネットワーク、サーバ周りの難しい話を回避できます。MTだけでなく、WpやxoopsDrupalPukiWikiなども自動インストールできるかもしれません。
レンタルサーバ選びはなかなか難しいかもですが、GMOペパボさん系列の安いのでも良いですし、xserverさんとかでも良いです。AWSだとAMIを使うとMTがインストールされた環境を利用することができます。詳しくは、こちらをどうぞ。

www.sixapart.jp

個人的なおすすめは、xserverさんかも。なんとなく借りてずっとそのまま使っているので(笑)

ステップ2 デザインしよう

MTを触ったことがあり、自分でデザインしたい場合はこちら。

f:id:hironoche:20151219133337j:plain

デザインツールはなんでもよいので、自分のデザインをしましょう。ブログだったり、友だちの会社のホームページだったり、ファンクラブだったり。MTは様々な要件に対応可能です。

デザインの仕方は、WEB制作と変わりません。やることはいわゆるWEBデザイナーさんのお仕事です。

  1. グラフィックツールでデザインする(Photoshopイラレなど)
  2. HTML/CSS/Javascriptなどでコーディングする(デザインデータなくて、ここからなんて場合もあるかも)
  3. ブラウザで表示を確認

この辺もWPと変わりませんね。コレを行うことで、テンプレート作成のための素材ができます。

ステップ3 テンプレートを作ろう

MTもWPも、テンプレートを作ります。テンプレートに記述された内容を元に、閲覧者への表示をサーバが返しています。簡単に言うと、テンプレートがあるから表示することができるんだよ、という感じです。
そして、このテンプレートが作れればもうMT未経験は卒業です。勉強方法は、2通りあります。

f:id:hironoche:20151219133332j:plain

①書籍・インターネット上の情報で勉強

MTは書籍がたくさん出ており、勉強するのに困らないツールです。初心者向けから、上級者向け、プラグイン制作者向けなど、幅広い書籍が出ています。ただ、書籍は好みがあったり、たくさんありすぎてわからない!ということも多いので、MT使っている人におすすめ書籍を聞いたり、MTコミュニティの人に聞いてみるといいと思います。
ちなみに自分のおすすめはMT4ですが、こちら。

www.amazon.co.jp


当時はフューチャーフォン全盛で、PCとフューチャーフォン向けのサイト制作が書かれていた書籍が必要で、こちらを愛読していました。

インターネットでの情報収集からの勉強は、どちらかというとポイントポイントでの勉強です。体系的に学習するならば、書籍を一冊通してやるほうが圧倒的に有益です。体系的に知識を得たあとに、ポイントを調べていくと、効率的に体得することが可能です。

MTは、インターネット上の情報がとても多いです。MTタグと呼ばれる表示用のタグは、オンラインのリファレンスですぐに調べることができます。本当に便利です。ニッチなタグの場合は英語でしれっと説明が書いてあって、読んでもよくわからないところがあるのは愛嬌です。

②MTに同梱されているテーマで勉強

MTには、標準で幾つかのテーマが付属しています。WPでもテーマがありますね、というかWPのテーマはとてもおおく、高品質なものも多いですね。
テンプレートファイルは、ウェブサイトまたはブログにそれぞれ読み込むことができます。そのテンプレートファイル(いくつか種類があります)の中身を見ると、HTMLとMTタグが混在していることがわかります。

図にもあるとおり、見慣れたHTMLタグの他に、見慣れない <$mt:BlogName encode_html="1"$> というのがありますね。mt: となっているものがMTタグです。コレを使うことで、DBに保存されたデータを呼び出すことができます。
<$mt:BlogName encode_html="1"$> はブログの名前を表示するMTタグです。タグの名前からもなんとなく推測できそうです。


最後に

今時なWEB制作ならば、WPが多いと思います。でも、案件によってはMTを使うこともあります。仕事の幅を広げるためにも、ぜひ使ってみましょう。

MTは標準で静的なHTMLを出力します。動的なページ生成のCMSが主流ですが、HTMLなどの勉強がてら触るシステムとして、MTは敷居も低くてなじみやすいツールだと思います。