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

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



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

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
2004/03/30｜no 85｜ http://www.karadesign.com/designwedge/ ｜post>>magmag

((！))

スタジオサイトのトップページをリニューアルさせました。
リニューアルしたページにあるDesign Wedgeのロゴですが、新しくなっ
てます。このロゴマークはMAX2004の時にサイトやパンフレットに掲載さ
せてもらったのが最初の公開で、２つのたなびく旗がモチーフになって
います。

この２つの旗は、多くの旗の行進という意味を持ち、ウェブ業界でそれ
ぞれのデザイナーが自分にしかない旗を高く掲げ、皆で前進していこう
という願いが込められています。これからもDesign Wedgeを通じてウェ
ブデザインのフロンティアを探求していきます。

 " KaRa || 2004 "
 ( http://www.karadesign.com/ )


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

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

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

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

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

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


    ≫ c o n t e n t s


   +01 特集１：ウェブデザインニューストピック
               「processingと魔法のスケッチ」
   +02 特集２：ハニーモジュール
               「制作用CMSへの挑戦その２」

   ---
   +03 プレスブース「セミナー案内」
   ---
   +04 Design Wedgeよりお知らせ
   +05 編集後記

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


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

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

--- processingと魔法のスケッチ ---

皆さんはprocessingという言語をご存知ですか？

 " processing "
 ( http://processing.org/ )

結構前から存在していて、目をつけている人は目をつけている言語だっ
たらしいのですが僕が知ったのはつい２日前のことで、僕もエディター
として参加させてもらっている、

 " CBCnet "
 ( http://www.cbc-net.com/ )

の記事からです。processingのサイトで体験した瞬間、興奮し、あまり
に気に入ってしまったため取り上げることにしました。


 -- processingのことはじめ

processingは、Javaで書かれたアプリケーションで、FlashやDirectorと
いったツールのようにインタラクティブ表現やヴィジュアル表現に優れ
ている言語です。主に、学習とスケッチのために開発されているとのこ
とです。

基本的にツール上にコードを記述し再生ボタンを押すことで、すぐに再
生することができます。コードを書き、再生で確認というプロセスはFlash
を使ったことがある方なら理解しやすいと思います。


 -- processingの特徴

Flashでは、パブリッシュすると拡張子SWFのファイルが出来上がるわけ
ですが、このprocessingではJavaアプレットとして出力されます。新し
い言語というと専用のプラグインをダウンロードしないと閲覧できない
というようなことがよくありますが、その点processingではJavaアプレ
ットとして出力されるので、様々な環境から閲覧が可能です。

僕は９６年頃、次のインターネットはこれだ、みたいな感じで取り上げ
られていたJavaにはまって挫折した経験があるのですが、そんな思いが
あってかJavaアプレットとして出力されるprocessingに強く惹かれまし
た。JavaやFlashのアクションスクリプトをいまいち理解出来なかった方
にこそprocessingを体験してもらいたいです。当時やりたいけど出来な
かったようなプログラムが簡単な形で実現できるようになることにビッ
クリするはずです。


 -- processingの体験

processingのことを知るには、まずは体験してみるのが一番です。
processingのサイトにあるExamplesをいくつか開いてみましょう。ブラ
ウザでURLを開いてJavaが起動すると、スケッチ（Flashではムービーと
言いますがprocessingではスケッチと言うそうです）が立ち上がります。

Examplesにはそのスケッチを生み出すためのコードも記載されており、
見てみるとわかる通り十数行程度のプログラムとなっています。この簡
単なコードをprocessingのソフトのコード欄にペーストして実行すると
まったく同じスケッチが再生できます。あとはパラメーターをいじった
り、コードを書き換えたりすることでがんがん試行錯誤を楽しむことが
できます。

それでは、ツールをダウンロードしてみましょう。

processingのプログラムを行うツールは現在アルファ版で、メールを登
録することでダウンロードが可能になります。
また、起動の際にはQuicktime for Javaが必要ですと言われたりする場
合があるのでその際は必要に応じてダウンロードしておきましょう。

ツールの画面はサイトを見ていただけるとわかると思いますが、これで
もかというほどシンプルです。スクリプトを書く部分と再生などをおこ
なう制御ボタン、そしてエラーメッセージを表示するスペースのみで構
成されています。

Flashのスクリプト部分のみを抜き出してシンプルにしたかのようなイン
ターフェイスという感じです。昨今の巨大化してしまった開発環境がま
だ肥大化する前の手探りのコンパクトな時代を感じさせ、ツール全体を
把握できる安心感があります。

ツールを立ち上げたら、まずはサンプルを立ち上げてみましょう。

Files > Open > examples > drawing にある pattern なんてシンプルで
いいかもしれません。これを開くとコードがコード記述領域に表示され
ます（一見いっぱいコードが書かれているように見えますが、ほとんど
はコメント文であることに気づくと思います）

この状態で再生ボタンを押すと、小さなウインドウが表示され、その中
でスケッチが展開されます。ここをマウスでなぞってみると反応が出る
はずです。

スケッチをJavaアプレットとしてパブリッシュしたい場合はExportとい
うボタンを押します。すると、アプレットのファイルとそれを表示する
ためのHTMLファイル、そしてJavaのソースコードがフォルダに格納され
ます。こんな感じで、コード書いたら、テストして、アプレットとして
保存という流れを簡単に行うことができるのです。

processingで一体何ができるかということですが、イメージの生成だけ
でなく、マウスイベントを利用したものや、フォームの機能を持つもの、
3Dの要素やGIF、JPEGの表示機能、それにキーボードを利用したコントロ
ールなども出来ます。サイトによると、シリアルを利用したアプリケー
ションも作れるということでインタラクションアート作品への応用も視
野に入れることが出来ます。


 -- processingの文法

ツールでサンプルを呼び出した時に、見覚えのあるコードと思った方も
多いと思います。例えば、コメントは「//」だし、関数の呼び出し方や
文末に「;」をつけるあたりもどこかで見たことがありますね。

 " Processing 1.0 _ALPHA_  Comparison "
 ( http://processing.org/reference/compare/actionscript.html )

にはAction Scriptとの文法の対比が掲載されています。processingは、
今までウェブ系の言語を少しでも学んだ人にとってはなじみのある文法
になっていますが、加えてprocessingの向こうに広がるJavaの世界も垣
間見せてくれることがあり、学習向けとして非常に有用かつモチベーシ
ョンがあがりやすい言語と言えるのではないでしょうか。


 -- processingの学習

processingはシンプルに設計されているというだけでなく、まだアルフ
ァ版であり、いくつか実現出来ていない機能があるという面でも逆にヤ
ル気を起こさせるものがあります。ある程度完成してくると機能が増え
てとっつきにくくなるものです。

学習にあたっては、まずはチュートリアルからスタートさせるのがいい
でしょう。チュートリアルは、

 " Processing 1.0 _ALPHA_  tutorials "
 ( http://processing.org/learning/tutorials/index.html )

ですが、日本語化もされています。同ページの「Japanese」をクリック
しましょう。

チュートリアルでは、Processingの基礎から順に学習していくことが出
来ます。最初から3Dをサポートしているprocessingでは、わずか数行の
コードで3Dオブジェクトを生成できたりして面白いです。また、チュー
トリアルでは任意の座標にドットを表示させるサンプルがあるのですが、
ドットを表示させてこんなにうれしくなったのは本当に久しぶりです。

命令文などでわからないことがあったらリファレンスを見ましょう。リ
ファレンスも日本語化されている（素晴らしいです）のですぐに不明点
を調べることが出来ます。同ページの「Japanese」をクリックしましょう。

 " Processing 1.0 _ALPHA_  reference "
 ( http://processing.org/reference/index.html )

どうでしたか？　僕はprocessingに新しい徴候を感じました。
複雑でインタラクティブなものを簡単なコードから生み出していくとい
う発想は、Macromediaからのリリースが予定されているMacromedia FLEX
にも感じ取ることが出来、大きな流れの一つではないかと思っています。
processingの場合独自な言語をJavaという普遍性を持ったプラグインに
落とし込むところが気に入っています。

 -- 

ネタが無くてちょっと放置ぎみだったメーリングリストのWAD_MLですが、
メーリングリストではprocessingの研究をしていこうと思いました。
やりたいけどわかんないという人も一緒に遊んでみませんか。

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



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

   +02 特集２：ハニーモジュール
       ￣￣￣￣￣￣￣￣￣￣￣￣

--- 制作用CMSへの挑戦その２  ---

最近、人に会った際にデザインの他に制作用のCMSとかも探求しています
という話をしてみた。でも、あまり要領を得ないことが多くて、ひょっ
としたらとんちんかんなことをやっているのかも知れないと考えること
もあった。大抵の場合において、うまく伝わらないのは説明が下手であ
ることが多いので、まずは改めて制作CMSについてまとめてみることにす
る。


制作用CMSは

・運営中のサイトの更新・修正を中心に行うCMSではないということ
・主に制作開始からテスト・納品までの間に使われるものであること
・納品物としてのCMSではないこと
・デザイナーが使うCMSであるということ

ということが前提としてあり、生み出す根っこには、

小さい規模のスタジオが大きなサイトを担当するときに足りない人力を
補う手段としての考え方と、オルタナティブなワークフローの模索

がある。


例えば、結構量のあるサイトのデザインを請け負ったとする。企画→設
計→制作→納品とスムーズに進めば問題はないが、そうならない場合も
多い。発注側も制作サイドといろいろ構成を練っていく過程でウェブデ
ザインに関する様々な知識を学習していくこともあるし、設計の段階で
考えていたことがひょっとしたら方向性違ってたかもなあと思いながら
も、もはや引き返せないフローの中で妥協していっているということも
あると思う。

制作用CMSは、既に決まっているコンテンツを別に管理しておくことで、
サイトの構造や全体に関わるデザインのちょっとした変更や別バージョ
ンをいくつも生み出したりすることを可能にしていこうというプロジェ
クトなわけである。

つまり、フローの過程において以前なら実際に作ってみせて比較させる
ことが出来なかった部分を補う役割を持てるのではないかと思う。
リニアなフローをベースにしながらも、ところどころでフィードバック
や派生も視野に入れた制作スタイルを小規模なスタジオに取り入れよう
というわけ。

もちろん一括出力のおかげで作業数を減らすことが出来るというメリッ
トもある。自社サイトや更新を請け負っているサイトに使うなら運営に
もつかえるということもある。

という感じ、である。



 -- さて本題

今回は「実装すると便利な機能」をお送りする。前回はあまりに様々な
ケースを想定して書いてしまったせいか散漫になってしまったので今回
は自分の場合ならという視点で書いてみることにした。


 -- 実装すると便利な機能

CMSというと作るのになんだかすごく時間と知識が必要で、膨大な試行錯
誤をやらなければ完成しなさそうなイメージがある。もし、様々なHTML
仕様ごとの出力が可能な強力なシステムを構築しょうとすれば大変なの
だろうが、用途を絞ってミニマルなものを制作することにするなら実は
すごく簡単に実現可能だったりする。（とはいうもののそれがわかるま
で結構長い事遠回りをしてしまった）

制作用CMSの目的を実現するためにとりあえず実装しておきたいのは、

  - コンテンツデータからテンプレートに沿ってHTMLを生み出す機能
  - リンクやナビゲーションを生成する機能
  - 同じコンテンツで様々なバージョンを生み出す機能

の３つであると考えた。上の２つはBlogやその他のCMSでよく使われてい
るのでわかりやすいと思う。また、様々なバージョンを生み出す機能は
デザインの決定の段階において絶大な威力を発揮するのではないかと思う。


 -- ３つの機能、実装の例

次に、この３つの機能の実装の例をあげてみる。実装というと難しそう
だが、本格的なプログラミングの知識が必要な機能は大抵既にモジュー
ル化されていたりするので、それを効率的に利用する事で制作が簡単に
なる。


  - コンテンツデータからテンプレートに沿ってHTMLを生み出す機能

開発言語にPerlを使うとすると、テンプレートの値の代入機能はMovable
 Typeでも使われているHTML::Templateモジュールのようなモジュールで
実現が可能になる。HTML::Templateは、HTMLファイルの中に独自タグを
埋め込むことで様々な値の置き換えが可能になるモジュール。デザイン
とプログラムを分けることを目的として作られているが、ここでは、コ
ンテンツとHTMLを分離するために使う。


  - リンクやナビゲーションを生成する機能

リンクやナビゲーションを導き出すには少々やっかいな作業が必要にな
ってくる。単に２ページ間のリンクのパスを生成するには、File::Path
を使うことで簡単に実現できるが、リンクする２つのページの配置をあ
らかじめ決めておく必要があるため、まずはサイトの構造を作っておか
なければならない。

ほとんどのサイトは、ディレクトリ構造的にはトップページを起点にし
て階層化されている。そのため、このディレクトリ構成を表すためにツ
リー形式のデータを作って、各ページをどこかのディレクトリに配置し
ておくことで、一応サイトの構造をコンピュータに伝える事ができる。

一応と書いたのは、ウェブサイトは必ずしもディレクトリ構造に沿った
サイトマップにはならないからだ。というわけで、サイトを内容によっ
て構造化したもうひとつのサイトマップを作る必要が出てくる。各ペー
ジに固有idをつけ、階層的な意味をつけて管理すると楽だ。

ちなみにツリー形式のデータの書き方・読み取り方は様々な方法があり、
ツリー関連のモジュールを使うとか、XMLを使うとか、ラクダ本の冒頭で
登場する聖書の系譜プログラムを応用するとかあるので、それほど苦労
することはないと思う。

ナビゲーションの制作は、メニュー形式で出力するものやパンクズナビ
ゲーション、ページの前後移動のナビゲーションなどの普遍的なものを
一度作っておけば、ずっと使いまわしていくことができる。


  - 同じコンテンツで様々なバージョンを生み出す機能

上記２つの機能でCMSとしては十分なわけだけど、もうひと踏ん張りして
様々なバージョンを出力できるようにしておくと更なる道が開ける。こ
の機能を実現する一つ方法として、バージョンごとに設定ファイルを用
意するというやりかたをあげてみる。

データの入出力のパスなどを含むサイト設定ファイルとテンプレートや
部品を含めたフォルダをセットにしたものをバージョンごとに用意して
おき、バージョンの数だけプログラムから呼び出してサイトを丸ごと各
出力フォルダへと出力するというものだ。これで異なるバージョンのも
のをいくらでも量産が可能になる。


これらの機能を実装することで、最適なデザインをさぐるために実際に
様々なバージョンのサイトを同時に構築したり、応用次第でナビゲーシ
ョンのテストに役立つ様々な構造のサイトマップを持つサイトを構築し
たりすることが可能になると考えている。


サイトのコンテンツ（共通）
↓↓↓↓↓↓
様々なバージョンのサイト

サイトのコンテンツ（共通）
↓↓↓↓↓↓
様々な構造のサイトマップを持つサイト


各バージョンは、共通のコンテンツデータから作成されるため制作途中
でコピーなどが変わった場合でも全てのサイトに変更を反映出来る。
このため、非常に効率的かつダイナミックなヴィジュアルから構造まで
のデザインの試行錯誤が行う事が可能になるといえる。


次回は「保存するデータの形式を考える」をお送りします。



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

   +03 セミナー案内
       ￣￣￣￣￣￣

--- デジクリ主催「デジタルクリエーション大学院セミナー」開催 ---

デジタルクリエイターズは、大学や専門学校、その他で教育に携わる方
向けにグラフィックデザイナー、イラストレーターの海津宜則さんによ
るAdobe Illustrator、Photoshopのツールの総合デジタルクリエーショ
ン・セミナーを開催する。

主催：デジタルクリエーターズ
内容：グラフィックデザイナー、イラストレーターの海津宜則さんによる
Adobe Illustrator、Photoshopをツールとした総合デジタルクリエーション・
セミナー。
日時：4月9日（金）13:00〜17:00
会場：大阪・メビック扇町
対象：原則として、大学や専門学校、その他で教育に携わる方に限る。
受講料：10，000円〜5，000円（受講者数による変動制）最少催行人数12名
内容など詳細：個別にお知らせします

デジタルクリエイターズ
大阪市北区南扇町6-28 Mebic扇町202
Tel.06-6362-0444　※オフィスデイズアイ兼用
（平日10:00〜18:00/土日祝・休業）
E-mail　info@dgcr.com
URL　http://dgcr.com/


 - - -

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

  ↓
 mailto:designwedge@karadesign.com



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

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

((！)) 

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 )

 - - -

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

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

 - - -

制作者同士のコミュニケーションがメインとなったメーリングリストを
やってます。大きなコミュニティ形成を主としてはいませんので、クロ
ーズドな形式を採用してみてます。資格は、最低限の礼儀を守れてメー
リングリストに参加していく意志がある人としています。技術レベルな
どは問いません。

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

 → mailto:dwml@karadesign.com

 - - -

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

 → mailto:designwedge@karadesign.com



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

   +06 編集後記
       ￣￣￣￣

 " ソニー、電子書籍リーダー「リブリエ」と電子書籍レンタルサービス "
 ( http://internet.watch.impress.co.jp/cda/news/2004/03/24/2547.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 スタジオ１×１行プチニュース

       " orkut、mixi、greeに参加してます。見かけたらよろしく。 "
       ( http://www.orkut.com/  http://mixi.jp/  http://www.gree.jp/ )

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