コーディングメソドロジー

第23回 DreamweaverとMovable Typeの連携コーディング

Webサイトを制作する場合には、企業サイトの「トピックス」や、ブランディングサイトの「ギャラリー」などの更新頻度の高い部分を簡単な操作で安全に登録・管理を行うことが出来る様に CMS(コンテンツ管理システム)を導入する場合が良くあります。その中でもMovable Typeはブログアプリケーションからウェブサイト管理を行えるまでに進化した代表的CMSです。今回はDreamweaverとの連携方法をご紹介いたします。

Dreamweaver拡張機能 for Movable Type

Dreamweaver拡張機能

Dreamweaver にプラグインをインストールする事で、MTのタグ入力を支援する機能を追加する事ができます。この拡張機能は 『last="n"』などの MTタグの属性もコードヒントで表示されるので、使い慣れたDreamweaverを離れることなく、htmlコーディングと同様に作業を進める事ができます。
また、Dreamweaverの利点を生かした、スニペットやライブラリといった機能にMTタグの組合わせを登録・共有することで、複数コーダーが同時に作業できるほか、難しいパーツなどもストックして効率よくコーディングを行う事ができます。

ファイルへのリンク機能の活用

ファイルへのリンク設定

MTのデザインテンプレート画面では、個別に『ファイルへのリンク』を設定する事が出来ます。
『ファイルへのリンク』にFTPにアップロードしたファイルのパスを設定すると、MTテンプレートとFTP上のファイルがリンクされます。
MTテンプレートを更新すると、同時にFTP上のリンクファイルが更新されます。逆にFTP上のリンクファイルを更新すると、MTテンプレートが更新され、互いに同期が行われます。
この機能を活用する事で、FTP上のファイルをMTテンプレートのバックアップファイルとして保管する事や、ちょっとしたテンプレートの変更をブラウザ画面で変更する必要がない為、工数の大幅な短縮を実現する事が可能になります。

Dreamweaverでコーディング済みhtmlへMTタグを記述

MTタグを記述

<$mt:SetVar$>の値を
テンプレートタグの値へ代入

静的コーディングが完了しているページをもとにMTを構築する場合に、大規模サイトの場合などは、制作段階にサイト全体への変更が頻繁に発生する場合があるので、静的ページと同様に、Dreamweaverテンプレートで管理を行える状態でMTの構築を行います。
MTの変数タグ『<$mt:SetVar name="変数名"$>』や『<$mt:GetVar name="変数名"$>』を『<!- InstanceParam name="タイトル" type="text" value="値" -->』へ値を代入していきます。
制作途中にサイト全体への変更があった場合は、Dreamweaverテンプレートを更新した後に、FTPへアップロードする事で簡単に動的ページが最新になります。

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

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム