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