Design Wedge バックナンバー：No.89

　
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━



◆     D e s i g n  W e d g e           internet/web design mail magazine 

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
2004/05/27｜no 89｜ http://www.karadesign.com/designwedge/ ｜post>>magmag

((！))

今号では、いつも別々のコーナーである「ウェブデザインニューストピ
ック」と「ハニーモジュール」の合同企画として、MovableType3.0リリ
ースに際し、「MovableType 3.0リリースと商用ウェブサイトデザインの
関係」と題してお送りします。


今号から登録された皆様、はじめまして。ご登録ありがとうございます。
Design Wedgeは、現在月２回発行のウェブデザインの専門誌です。
毎月１１日と２６日の発行を予定してます。

１１日発行予定号では、サイトデザインのレポートとデバイスデザイン
関連＋α、２６日発行予定号では、ニューストピックとウェブアプリケ
ーション関連のデザイン＋αという感じで、ウェブデザインの世界を様
々な角度から探究していっています。これからもDesign Wedgeをよろし
くお願いします。

―――――――――――――――――――――――――――――――――――――

-PR-----------------------------------------------------------------------

◆Design Wedgeに広告を掲載してみませんか？
◆掲載場所はヘッダー部分
◆広告スペースは横幅全角３７文字×７行です
◆メールにてお気軽にお問い合わせ下さい
                                     >> mailto:info@karadesign.com

-PR-----------------------------------------------------------------------


    ≫ c o n t e n t s


   +01 特集１：ウェブデザインニューストピック
                     ＋
               ハニーモジュール
               
               「MovableType 3.0リリースと商用ウェブサイトデザイ
               ンの関係。そしてホワイトホールとブラックホール」
               
                -- Movable Type(TM）に関するおさらい
                -- 2.66と3.0ではどう変わったのか？
                -- インストールの方法は？
                -- 気になるテンプレートとテンプレートタグ
                -- 企業サイトへの応用という発想
                -- 企業サイト導入の際のポイント
                -- ウェブサイト構築スタイルの変化
                -- コンテンツを管理し、出力出来るようになったが…。
                -- 入力作業を今後どうしていくか。そのために今できること
                -- ブラックホールのためのマークアップ

   ---
   +03 インフォメーション
              「稲葉英樹／NEWLINE展」
   ---
   +04 Design Wedgeよりお知らせ
   +05 編集後記

   今号のバックナンバーは、
   ( http://www.karadesign.com/designwedge/backnumbers/0089.shtml )
   にてご覧になれます。


 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

   +01 特集１：ウェブデザインニューストピック＋ハニーモジュール
       ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣

--- MovableType 3.0リリースと商用ウェブサイトデザインの関係。そし
    てホワイトホールとブラックホール ---

5月19日に、Movable Type 3.0 Developer Editionの日本語版がリリース
されました。今回のウェブデザインニューストピックとハニーモジュー
ルの合同特集では、MovableType 3.0リリースと商用ウェブサイトデザイ
ンの関係と題して、MovableTypeが切り開く商用サイトデザインの新しい
ビルドスタイル、それから先のCMSが抱える入力の問題の考察を行ってみ
たいと思います。


 -- Movable Type(TM）に関するおさらい

Movable Typeは、2002年に、ベン・トロットとミナ・トロットのトロッ
ト夫妻によって設立されたSix Apart Ltd.からリリースされているパー
ソナル・パブリッシングシステムで、BLOG用のツールとして幅広く利用
されています。

本誌読者の中にも結構Movable Typeの利用者がいるのではないでしょう
か。また、Six Apart Ltd.からは、法人のBLOGサービス向けにライセン
ス提供しているTypePadもリリースされているので、Movable Typeを使っ
たことがなくてもBLOGサービスを利用したことがある方なら一度は触れ
ているかもしれません。

 " Movable Type Publishing Platform "
 ( http://www.movabletype.org/ )


 -- 2.66と3.0ではどう変わったのか？

3.0というメジャーバージョンアップを受けて、従来の2.xバージョンと
は大きく変わった部分がいくつかあります。
時を同じくしてSix Apart Ltd.の日本法人であるシックス・アパート株
式会社が設立されたこともあってか、日本語版のMovable Typeが提供さ
れるようになりました。従来の場合、Movable Typeをインストールした
後やする前に各種設定や日本語用のパッチなどを当てる必要があったた
め、少し敷居が高かったのですが、3.0からはインストールがかなり楽に
なっています。

 " Six Apart Japan||シックス・アパート "
 ( http://www.sixapart.jp/ )


また、Movable Type 3.0 Developer Editionをダウンロードする際に必
要になるTypeKeyというものも今回のバージョンアップの大きな目玉とい
えます。このTypeKeyは、コメントを投稿する際の認証にも使われ、セキ
ュアなBLOGという今回の方向性の一つといえます。
Movable Type 3.0 Developer Editionは、Developer Editionということ
ですので、ライセンスをよく読み、評価目的以外の使用は控えましょう。

 " Movable Type 日本語版サイト "
 ( http://www.movabletype.jp/ )
 サイトのデザインには標準テンプレートに近いものが採用されている


 -- インストールの方法は？

Movable Type 3.0 Developer Edition日本語版のインストールは従来の
Movable Type日本語化に比べて手順が少なくなっています。簡単に書く
と、

  1. mt-check.cgiをcgiが動くディレクトリにアップロードしてパーミッ
     ションを755にし、必要なモジュールがはいっているかどうかのチェ
     ックをする
  2. ダウンロードしたファイルをした後に、cgiや各種ライブラリのディ
     レクトリをcgiが動くディレクトリへ
  3. imagesディレクトリ、docsディレクトリ、index.html、styles.css
     などの静的な部品は通常ディレクトリに
  4. mt.cfgを開いて、CGIPathの部分にCGIまでのパス、StaticWebPathに
     静的な部品を入れたパスを入力
  5. MT〜.cgiの各ファイルのパーミッションを755にする
  6. mt-load.cgiを実行
  7. mt.cgiより各種BLOGの設定を行う

という従来の英語版と同じインストール方法を行うだけで、日本語化さ
れたMovable Type 3.0 Developer Editionがインストールされ、即使え
るようになります。

インストール後、まず驚くのは、従来のものから大きく変化したルック
＆フィールです。シンプルになり、スタート画面から各種メニューを直
接利用できたり、BLOGの確認が行えるようになっています。この変化は
利用者に歓迎されるのではないかと思います。また、スタート画面の右
側に「Movable Type ニュース」として、最新の情報が表示されるように
なりました。


 -- 気になるテンプレートとテンプレートタグ

BLOGを一つ作って再構築してみるとわかりますが、Movable Type 3.0 
Developer Editionではデフォルトのテンプレートが一新されて見やすく
なっています。美しく見やすいので、このままでもいいという人も結構
いるかもしれません。スタイルシートはStylesheetのテンプレートで変
更が可能です。

今回、テンプレート編集画面で気付くのは「その他のテンプレート」に、
「コメント・保留のテンプレート」というテンプレートが増えているこ
とです。Movable Type 3.0からは、コメントを承認した上で投稿させる
ということも出来るようになっており、そのためのテンプレートという
わけです。

テンプレートはテンプレートタグを使用して各エントリーやカテゴリー
などを挿入することになるのですが、MovableType 3.0で僕が一番気にな
っていたのはテンプレートタグがどういうことになるのか、という部分
です。

テンプレートタグに関する説明は、付属のdocディレクトリにはいってい
るmtmanual_tags.htmlに英語でかかれていますが、これを2.66のものと
見くらべてみたところたいした変更は行われていないようでした。おそ
らく従来のテンプレートをそのまま引き継げるようにという配慮もある
と推測されますが、ベータ版ということもあり、マニュアルは2.66のま
まということも考えられます。この部分についてはまたいつか詳しく書
いてみたいと思います。


 -- 企業サイトへの応用という発想

最近、Movable Typeは企業サイトにも導入されはじめています。Movable 
Typeの持つコンテンツとデザインを完全に分離出来るように作られた設
計が、企業のCMSとしても使えるぞということに一部の人が気付き始めた
のです。実は僕自身、商用ウェブサイトをMovable Typeでリニューアル
というお仕事をさせていただき、これは使えるぞと思い始めています。

元々、Movable Typeはパーソナルなパブリッシングシステムというとこ
ろからスタートしているために企業サイトに使うには難しい部分がいく
つかあります。これについては制作側の工夫でなんとかできる場合が多
く、テンプレートタグとテンプレートモジュールを駆使することで意外
に高機能かつ更新がしやすいサイトを作ることが出来るのです。

Movable Typeを企業サイトに応用するメリットとしては、本来であれば
一方的にリンクされるだけのプレスリリースなどにトラックバックを使
って相互リンクを生み出すことが出来る点や、運営者サイドにおける圧
倒的な更新の簡便化、そして何より次期リニューアルの際のコンテンツ
の再入力の手間の解消があげられます。


 -- 企業サイト導入の際のポイント

企業サイトをMovable Typeを使って作る場合、まず重要になってくるの
がライセンスの関係です。公式サイトのライセンスをよく読んで構築計
画を立てましょう。今の時期、ちょうど新しいバージョンの切り替え時
期が近いこともあり、特に注意が必要です。

Movable Typeを使った企業サイトを作る際に、階層の関係から複数BLOG
で１つのサイトを作るというテクニックも重要になってくるのですが、
シックス・アパート株式会社の公式な見解では現在のところ複数のBlog
で１つのサイトを作る場合は１ライセンスとなるというコメントが掲載
されています。

デザインに関して、企業サイトをMovable Typeを使って構築する場合、
意識しないと「BLOGというデザインが持つ場の呪い」にかなり作り手が
支配されてしまうことがあります。BLOGを使ってBLOGでないものを作ろ
うとすると、結局BLOG的なデザインになってしまうことがあるのです。
この部分は難しい問題といえそうです。

制作してみるとわかるのですが、BLOGのデザインはかなりなるべくして
現在の形になっている部分がかなりあり、支配力が強いです。作ってい
くと妙に納得させられてしまうことがあります。まずは、エントリー、
コメント、トラックバックというセットの常識を捨ててみるのもいいか
もしれません。また、標準の機能ではどうしても実現困難な機能がある
場合は、Movable Typeのプラグインディレクトリを覗いてみるといいで
しょう。

 " MT Plugin Directory "
 ( http://mt-plugins.org/ )

 " MT Plugin Directory: Grid "
 ( http://mt-plugins.org/archives/entry/grid.php )
 段組を実現するGridなんてプラグインもある


 -- ウェブサイト構築スタイルの変化

Movable Typeを使ったウェブサイト構築を行うと、サイトの構築スタイ
ルも変化していきます。コンテンツの入力が運営側で行えるので、入力
はクライアント側でという提案により、予算を少なくすることができま
す。また、デザインの作業と入力の作業を平行して行えるので納期の短
縮にもつながってきます。納期はそのままで、という場合ならデザイン
をより深く練るということも可能になります。


 -- コンテンツを管理し、出力出来るようになったが…。

Movable Typeは非常に強力なツールです。企業サイトに使っていく場合、
最後に問題になるのは、既存のコンテンツの入力作業です。フォームを
使って入力していくことになるわけですが、ページ数が多かった場合、
非常に時間がかかってしまいます。外部に委託してもお金と時間が結構
かかります。それでもCMSをサイトに導入する出来事はそのサイトにとっ
て革命的なことといえるでしょう。

その昔、パブリッシングの世界でグーテンベルクが活版印刷を生み出し
たときに「これで大量に分厚い本も量産できる！」と周囲は思ったに違
いないのですが、同時に「その分厚い本の一文字一文字をいったい誰が
入力するんだ？」とも思ったに違いありません。現代になっても大量の
アウトプットは得意としてもインプットはキーボードやマウスをつかっ
た人海戦術でいくしかないのです。


 -- 入力作業を今後どうしていくか。そのために今できること

Movable Typeに限らず、CMSというのは、言ってみれば強力なホワイトホ
ールのようなものです。持っているコンテンツを新しい世界のために再
構築し、片っ端から吐き出して新しい宇宙を生み出すわけです。

そういう例えで考えてみると、リニューアルの際にはホワイトホールと
対になるブラックホール的アプリケーションも必要になってくることが
予想できます。つまり、既存のコンテンツを片っ端から吸い上げ、整理
し、出力させやすい形で貯めておく機能を持つアプリケーションのこと
です。


 -- ブラックホールのためのマークアップ

ブラックホールの役目を果たすアプリケーションは実はある程度自力で
作り上げることができます。対象のウェブサイトをじっと見つめ、情報
を抜き出すことが可能なパターンを見つけるのです。また、そのうちコ
ンシュマープロダクトでもそういったものが出てくるのだと思っていま
す。

現状を見てみると、Movable Typeかどうかはわからないもののいつかは
何らかのCMSを導入すると思うが今すぐではないという会社は、おそらく
すぐにCMSを導入すると考えている会社よりずっと多いのではないでしょ
うか。将来的にCMSの導入を考えている場合、次のリニューアルの際には
来るべきブラックホール的アプリケーションのためのマークアップをし
ておくという手があります。

ブラックホール的アプリケーションに向けたマークアップというのはど
うすればよいのでしょうか。すこし考えてみることにします。ブラック
ホールと名づけただけあってなんでも吸い込むので、ウェブページにあ
るコンテンツを片っ端から抜き出していきます。

しかし、後々CMSへ入力するためのデータを抜き出すためには、ある程度
の規則性が大事になってきます。例えば、同一順序でコンテンツが繰り
返されるような場合には同じフォーマットのコードにするなどというコ
ーディングはかなり有効です。

また、HTMLは、XMLと違ってそれぞれのタグ内のコンテンツに具体的な意
味を持ちません。たとえば、TDタグに入っている情報が隣のTDタグには
いっているものと同じ種類のものなのか、違う種類のものなのか、とい
う判別は素のままのコードでは判別しずらいのです。

ということは、どこかにそのTDに入っているものがどういう種類のコン
テンツなのか記述しておく必要がでてきます。そのためのアイデアとし
て真っ先に思い浮かぶのは、コメント文でくくるやりかたです。

<td><!-- class=personal_name begin -->Kara_D<!-- class=personal_name end --></td>
<td><!-- class=personal_age begin -->28歳<!-- class=personal_age end --></td>

こんな感じです。これだと、「Kara_D」というコンテンツが名前である
という情報をプログラムで取り出すことが出来るようになります。でも
少し面倒ですよね。

日ごろCSSでお世話になっているclass属性を意味付けに使うと、非常に
スマートかつブラックホール向けに出来ます。例えば先ほどの「Kara_D」
が赤で表示される必要がある場合、

<td class="red">Kara_D</td>
<td class="red">28歳</td>

とやりたくなってしまいますが、そこは、

<td class="personal_name">Kara_D</td>
<td class="personal_age">28歳</td>

としてもらって、意味付けをしてあげると後々非常に楽が出来るページ
になるわけです。歳の表示も赤の場合はCSSで同じ表現を２度入力する羽
目になりますが、それでもリニューアル時などに膨大な量のコピー＆ペ
ーストを繰り返す手間を考えれば微々たるものです。

ここまで読んでみるとわかるように、普通のマークアップにほんのちょ
っとした工夫をするだけで、ブラックホール的アプリケーションに向け
た後々絶大な効果を発揮するHTMLが完成するのです。

少し前に実際に仕事で既存のウェブサイトにこういったアプリケーショ
ンを作って作業をやってみたのですが、もし、しっかりと規則性のある
HTMLだったらどんなに楽だったことか、と思わずにいられませんでした。
大量ページを自動的に抜き出して、CMSから別のテンプレートで出力する
という魔法の組み合わせから得られるカタルシスを一旦味わうと、後戻
りできなくなるほどです。是非検討してみてください。



 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

   +03 インフォメーション
       ￣￣￣￣￣￣￣￣￣

--- 稲葉英樹／NEWLINE展 ---

「+81」や「SALマガジン」のアートディレクションなどを手掛けてきた
デザイナーの稲葉英樹氏と、オンラインマガジン「SHIFT」とのコラボレ
ーションプロジェクト「NEWLINE」。様々な雑誌とのコラボレーションや、
「E2O」などにも派生しているこのプロジェクト、NEWLINEが札幌と東京
で展覧会を開催する。

展覧会では、稲葉氏によるグラフィックのリミックス作品が展示される
他、会場では「BEAMS T」とのコラボレーションで、限定Ｔシャツの販売
などが予定されている。今まで展覧会の開催を頑に拒んできた彼が今開
催に至ったその訳は？稲葉氏はその理由を一言「気分だ」と言った。そ
の意味はきっと会場で明らかにされることだろう。

札幌、東京会場ともに、オープニングパーティが予定されている。札幌
ソーソーでのオープニングでは、稲葉氏が来札し、ライブパフォーマン
スを行う予定。内容は当日のお楽しみ。赤い服を身につけて来場される
と楽しみが増えるかも。

稲葉英樹／NEWLINE展　札幌

 -- 会期：2004年6月18日(金)〜30日(水)
 -- 営業時間：11:00〜21:00 
 -- 入場料：無料

オープニングパーティ〜札幌

 -- 日時：2004年6月18日(金)　20:00〜23:00 
 -- 会場：SOSO CAFE
 -- 入場料：前売1500円　当日2000円（共に1ドリンク付）
 -- チケット取扱い：SOSO CAFE （011-280-2240）

稲葉英樹／NEWLINE展　東京

 -- 会期：2004年7月16日(金)〜21日(水)
 -- オープニングパーティ：7月16日(金)
 -- 会場：ROCKET（ロケット）
 -- 住所：東京都港区北青山3-7-9
 -- TEL：03-3499-8782
 -- 入場料：無料

協力：BEAMS T、E2O、PRND、SAL magazine、Web Designing 


 " 稲葉英樹／NEWLINE展 "
 ( http://www.shift.jp.org/soso/040618/indexj.shtml )


 - - -

((！))

Design Wedgeでは、企業の皆様からの広告記事、プレスリリースやイベ
ント情報、求人募集スペースとして場所を提供しています。
掲載場所はこのスペースで、３２文字×２０〜２５行くらいとなります。
掲載のご依頼お待ちしてます。メールにてお気軽にお問い合わせ下さい。

 → mailto:info@karadesign.com



 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

   +05 Design Wedgeよりお知らせ
       ￣￣￣￣￣￣￣￣￣￣￣￣

((！)) 

Design WedgeのAtomを実験的に公開してます。対応していないRSSリーダ
ーでは読めないので、その際はRSSをご利用下さい。

 " Design Wedge | Atom "
 ( http://www.karadesign.com/designwedge/dwatom.xml )

 - - -

Design WedgeのRSSを公開中です。Design Wedgeはメールマガジンなので、
ニュースの一覧というよりはバックナンバーの参照用にと思って公開し
てます。

 " Design Wedge | RSS "
 ( http://www.karadesign.com/designwedge/dwrss.xml )

 - - -

ハニーモジュールでは、ウェブアプリケーションのデザインに焦点を置
いたメーリングリストを開設しました。概要を読んで参加してみてくだ
さい。

 " Design Wedge | WAD_ML参加申し込みページ "
 ( http://www.karadesign.com/designwedge/wad_ml.shtml )

 - - -

リーダーズリンク、随時募集中です。お申し込みフォームはサイト名と
URL、サイトの紹介コメントのみ必須です。

 " Design Wedge | リーダーズリンク "
 ( http://www.karadesign.com/designwedge/readerslink.shtml )

 - - -

制作者同士のコミュニケーションがメインとなったメーリングリストを
やってます。参加資格は、最低限の礼儀を守れてメーリングリストに参
加していく意志がある人としています。技術レベルなどは問いません。

参加方法に関するお問い合わせは、登録したいメールアドレス、簡単な
自己紹介など添えまして、dwml@karadesign.com までお便りください。

 → mailto:dwml@karadesign.com

 - - -

現在Design Wedgeではヘッダー部分に掲載する広告を募集しています。
全角３５文字×７行。詳細はメールにてお問い合わせ下さい。

 → mailto:designwedge@karadesign.com



 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

   +06 編集後記
       ￣￣￣￣

最近はシンプルなのが好きなのか簡単にチェックリストを作りたいとき
は、「□」を多用する。これを３つ並べて、準備、制作、確認の順にチ
ェックつけるようにすると意外とつかえる。これをびっしりと１枚分に
印刷して、終わったものは片っ端から塗りつぶしていくのだ。これがま
た気持ちいい。ちなみに僕は６ポイントの小さな文字でびっしり印刷し
て「□」を塗りつぶすのが好きだ。創意と工夫が好きなのでこのスタイ
ルもまた変わるかも。

□□□　　ある日の予定
　　□□□　　原稿１
　　□□□　　/home/index.html
　　□□□　　更新分アップロード

こんな感じでつくる。


次号の発行は６月１１日を予定しています。

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

D e s i g n  W e d g e

    ≫ M a g a z i n e  i n f o

   +01 発行：KaRa designstudio
       http://www.karadesign.com/
       mailto:info@karadesign.com
   +02 編集・発行人：原　一浩　[Kara_D]
       mailto:khsoul@alles.or.jp
   ---
   +03 現在の購読者数：7000人
   +04 Design Wedge公式ページ：
       http://www.karadesign.com/designwedge/
       登録・解除はもちろんのことバックナンバーも見ることが出来
       ます。
   ---
   +05 お便りはこちら：
       mailto:designwedge@karadesign.com
       感想・情報提供・お問い合わせなどはこちらまで。お便り待っ
       てます。
   ---
   +06 配信元：右上部の「post」というところで配信システム名がわかり
       ます。
             
           + まぐまぐ
             ( post>>magmag )    id:0000005412
             ( http://www.mag2.com/ )
           + melma!
             ( post>>melma! )    id:m00103069
             ( http://www.melma.com/ )
           + カプライト
             ( post>>kapu )      id:8588
             ( http://kapu.biglobe.ne.jp/ )
           + E-magazine
             ( post>>e-mag )     id:deswedge
             ( http://www.emaga.com/ )
           + めるまる
             ( post>>melmal )    id:deswedge
             ( http://www.melmal.com/ )
   ---
   +07 コピーライト（著作権）：
       Copyright(c)，1998-2004  KaRa designstudio
       許可無く転載することを禁じます。参照としてのバックナンバー
       へのリンクや引用は自由です。

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

   +99 スタジオ１×１行プチニュース

       " CASSIOPEIA A-50にようやくPocket WZ EDITOR導入（遅 "
       ( http://www.villagecenter.co.jp/soft/pwz20/description.html )

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━