cms ajax 071219-2 -...
TRANSCRIPT
情報設計とデザインプロセスの可能性を広げる「CMS」「Ajax」の具体的活用例
山辺真幸 （合同会社アライアンス・ポート CTO, Designer）
2007.12.19
CMSとしての Movable Type
ニュース キャンペーン EC
ニーズにあわせて多様なカスタマイズが可能
Movable Typeのしくみ
休日の午後…if(conn
SELEC
WHERE
テンプレートテンプレート
Database休日の午後…
記事
テンプレート… レイアウト情報が記述されている。
デザインにあわせたテンプレート作成
＋
Ajax（Asynchronous Javascript + XML）
<root>
<item>
<name>
<title
XML
if(conn
SELEC
WHERE
Javascript
休日の午後…
記事
if(conn
SELEC
WHERE
テンプレート
テンプレートDatabase
休日の午後…
XML…データや文書の内容と構造だけが記述されたデータファイル。
<entry>
<title> 休日の午後 </title><photo> aday.jpg </photo>
…
Javascriptが情報を抽出し、動的にレイアウトする
＋ のしくみ
の特徴
<root>
<item>
<name>
<title
XML
if(conn
SELEC
WHERE
Javascript
休日の午 動的に、必要な情報を、必要な箇所のみ書き変える
でおなじみ。
ローカルで実行etc...
＋
効果は？
情報設計ユーザが利用しやすい配置。直感的なインターフェイス設計が可能。
ブランディング、アートディレクションを損なわないデザイン。エフェクト。
＋ 効果について
ビジュアルデザイン
etc.サーバ負荷低減。高速、非同期処理。
＋
具体例
YCAM 山口情報芸術センター
CASE STUDY 01
http://www.ycam.jp
CASE STUDY 01山口情報芸術センター
山口市立の文化複合施設。ギャラリー、劇場、ミニシアター、図書館を併設している。アートを通じた教育普及活動なども行っている。
おもな要件
○イベント種類ごとの情報管理○イベントどうしの関連づけ○アーカイブ
http://www.ycam.jp
CASE STUDY 01山口情報芸術センター
<root>
<item>
<name>
<title
XML
if(conn
SELEC
WHERE
Javascript
アートシネマシアターエデュケーションライブその他管理用ブログ
イベント名開催日場所
時間作家……
まとめ
山口情報芸術センター
カレンダー型の直感的なインターフェイスアプリケーション的な「アーカイブ」を構築
情報設計
「関連」を動的に生成
に効果的。
天童荘
CASE STUDY 02
http://www.tendoso.jp
山形県天童市の老舗温泉旅館。
おもな要件
○ブランドイメージを損なうことのない ビジュアルデザインでのニュースコンテンツを 追加したい。
http://www.tendoso.jp
→「天童荘からのお知らせ」
CASE STUDY 02天童荘
CASE STUDY 02天童荘
記事
<root>
<item>
<name>
<title
XML
if(conn
SELEC
WHERE
Javascript
さて、十月より離れ「離塵境」の寝具が…
if(conn
SELEC
WHERE
Javascript
「 」
さて
さて、 「」
、
まとめ
天童荘
ブランドイメージ維持のため、縦書きでページを生成。
ビジュアルデザイン に効果的。
＋
メリット、デメリット
メリット
情報設計 ビジュアルデザイン直感的なインターフェイス
高速、非同期処理自由なレイアウト
より柔軟な設計が可能
デメリット
静的でない。アクセシビリティ対応。
施策検討後、対応予定。
＋
今後の可能性
RIA（Rich Internet Application）
XMLをベースとした、RIAへ展開
今後の可能性
Database
<root>
<item>
<name>
<title
XML HTML
if(conn
SELEC
WHERE
テンプレート
if(conn
SELEC
WHERE
Javascript
Rich Internet Application
RIAへの応用例
<root>
<item>
<name>
<title
XML
で一元的な情報管理が可能。
今後の取り組み「縦書き変換ライブラリ」
2008年初旬 βリリース予定
さて、十月より離れ「離塵境」の寝具が…
if(conn
SELEC
WHERE
Javascript
「 」
さて
さて、 「」
、
詳細はウェブサイトをご覧ください。
その他事例
http://www.allianceport.jp
