「Coding Methodology」第3回 DreamweaverとMovable Typeの連携コーディング

HTML コーディング業界No.1 の実績を誇る「CODING FACTORY」がお届けする今すぐ役立つ実践的コーディングノウハウ

CODING FACTORYです。六月から月一回のペースでお届けしている「Coding Methodology」は、555件のHTMLコーディング案件を納品した中から生み出された、今すぐ役立つ実践的コーディングノウハウです。ちょっとした工夫や発想の転換など、コーディングの手法やスムーズに進めるコツを紹介します。

web サイトを製作する場合には、企業サイトの「トピックス」や、ブランディングサイトの「ギャラリー」などの更新頻度の高い部分を、簡単な操作で安全に登録・管理を行うことが出来る様に CMS（コンテンツ管理システム）を導入する場合が良くあります。

その中でも「Movable Type（ムーバブル・タイプ）」（MT）はブログアプリケーションからウェブサイト管理を行えるまでに進化した代表的CMS です。
今回は「Dreamweaver（ドリームウェーバー）」との連携方法をご紹介いたします。

Dreamweaver 拡張機能 for Movable Type
Dreamweaverにプラグインをインストールする事で、MTのタグ入力を支援する機能を追加する事ができます。この拡張機能は 『last="n"』などのMTタグの属性もコードヒントで表示されるので、使い慣れたDreamweaverを離れることなく、htmlコーディングと同様に作業を進める事ができます。

また、Dreamweaverの利点を生かした、スニペットやライブラリといった機能にMTタグの組合わせを登録・共有することで、複数コーダーが同時に作業できるほか、難しいパーツなどもストックして効率のよくコーディングを行う事ができます。

ファイルへのリンク機能の活用
MTのデザインテンプレート画面では、個別に『ファイルへのリンク』を設定する事が出来ます。

『ファイルへのリンク』にFTPにアップロードしたファイルのパスを設定すると、MTテンプレートとFTP上のファイルがリンクされます。MTテンプレートを更新すると、同時にFTP上のリンクファイルが更新されます。逆にFTP上のリンクファイルを更新すると、MTテンプレートが更新され、互いに同期が行われます。

この機能を活用する事で、FTP上のファイルをMTテンプレートのバックアップファイルとして保管する事や、ちょっとしたテンプレートの変更をブラウザ画面で変更する必要がない為、工数の大幅な短縮を実現する事が可能になります。

Dreamweaverでコーディング済みhtmlへMTタグを記述
静的コーディングが完了しているページをもとにMTを構築する場合に、大規模サイトの場合などは、製作段階にサイト全体への変更が頻繁に発生する場合があるので、静的ページと同様に、Dreamweaver テンプレートで管理を行える状態でMTの構築を行います。

MTの変数タグ『<$mt:SetVarname=" 変数名"$>』や『<$mt:GetVar name=" 変数名"$>』を『<!- InstanceParam name=" タイトル" type="text" value=" 値" -->』へ値を代入していきます。

製作途中にサイト全体への変更があった場合は、Dreamweaver テンプレートを更新した後に、FTPへアップロードする事で簡単に動的ページが最新になります。

◇◇◇

全てをDreamweaver だけでやろうとすると、ムダなコーディングをすることになったり、逆にMTだけでは複雑なコーディングがかえって編集しづらくなったりすることがあります。それぞれの利点をうまく生かした連携をすることで、効率的に運用できるサイトにすることができます。