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

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



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

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
2003/10/28｜no 73｜ http://www.karadesign.com/designwedge/ ｜post>>magmag

((！))

最近制作のためのアプリケーションの制作にはまっています。近年のウ
ェブデザインソフトの進歩はめざましくて、市販のものだけでも制作が
ほとんど出来てしまうようになってきた頃から、どうもソフトの枠組み
中で物事を考えるようになってきたなあと反省してます。
そのへんのことをハニーモジュールで書いてみました。


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

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

まぐまぐからのバージョンにはヘッダーもしくはフッターにはお知らせ
がはいっています。当分はフッターだけのようです。

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

-PR-----------------------------------------------------------------------
●最新Webトレンドを“５分”でチェック！『ＷＥＢ ＦＬＡＳＨ』
──────────────────────────────
  http://www.dragonfield.com/main/publish/point.html 

毎号100サイト・年間600サイトを『短時間』でチェックできます。
プロのWebクリエイターからも大きな反響をいただいております。
企画提案のアイデア源として、『ＷＥＢ ＦＬＡＳＨ』が使える！
-PR-----------------------------------------------------------------------


    ≫ c o n t e n t s

   +01 特集１：ウェブデザインニューストピック
               「Adobe Atmosphere で見る最新ウェブ3D」
   +02 特集２：ハニーモジュール
               「自分のスタイルに特化した制作環境を作る」
   ---
   +03 プレスブース
   +04 特設　：「IEの仕様変更に伴うリッチコンテンツ埋め込み対策２」
   ---
   +05 リーダーズブース
   +06 Design Wedgeよりお知らせ
   +07 編集後記

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


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

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

--- Adobe Atmosphere で見る最新ウェブ3D ---

【atmosphere】
１、雰囲気、気分；ムード
２、（ある場所の）空気
３、大気；大気圏
「ライトハウス英和辞典」

Atmosphereの発表があったのは2001年の3月でした。それから随分時間が
経ってしまったものの、リリースされることになったようです。先週、
ようやくフルバージョンのAtmosphereのリリース発表がされました。発
表されてから今日までの二年の間、インターネットをとりまく状況は激
しい変化があったなあと感じます。

 " About Adobe - Press Room - For Immediate Release "
 ( http://www.adobe.com/aboutadobe/pressroom/pressreleases/200310/
102203ATMOSPHERE.html )

Atmosphereは、ウェブ3Dの制作ソフトとそのプレイヤーで構成されてお
り、閲覧側はプラグインをインストールすることで、ウェブ3Dのコンテ
ンツがブラウザにインラインで表示されます。（このインラインという
あたり、OBJECTを使って表示しているのでIE6updateの影響を受けるかも
知れません）


 -- とりあえず見てみよう

現在、Atmosphereのプレイヤーが英語版のウェブサイトからダウンロー
ドすることが出来ます。対応しているのはWindows 98SE/ME/2000/XPのみ
です。Mac版のプレイヤーは今のところリリースされていません。また、
3Dの再生には3Dアクセレータ付きのビデオカードもしくはビデオチップ
が搭載していたほうが快適に閲覧できます。

 " Adobe Atmosphere Player "
 ( http://www.adobe.com/products/atmosphere/downloadplayer.html )

ダウンロードページから指示に従ってプラグインのダウンロードを済ま
せると、サンプルコンテンツを見ることが出来ます。Atmosphereのプレ
イヤーは、以前ワールドサイトデザインレポートでも紹介したViewpoint
の技術を使って3Dを表示しています。サンプルコンテンツでは、超自然
的な空間にある海にぽっかりと浮かぶ神殿らしき場所を自由に歩き回れ
ます。

操作は、カーソルキーで前後左右に動け、Shiftキーを押しながら↑でジ
ャンプ、←→で横移動、Ctrlキーを押しながらマウスを動かすと周りを
見渡すことが出来ます。

神殿から外れて海に落ちて更に進むと、すぐに空と海がぶつかる場所に
当たります。一見無限に広がっているように見えるこの空間も案外狭い
ことを認識させられる瞬間です。このあたりの感覚は映画「トゥルーマ
ンショー」に出てくる世界の果てに近い印象です。


 -- 機能

Atmosphereプレイヤーでは、3D空間内での自分を表すアバターと呼ばれ
るキャラクターとして行動することになります。アバターの設定をする
アイコンをクリックすると、いくつか選択が出来るのがわかります。
ここで決定した姿が3D空間で他人が自分を見たときに見える形となるわ
けです。自分を視点を切りかえることで姿を確認できます。

また、このアバター同士で会話をするためにチャットという機能もつい
ています。チャットアイコンをクリックするとチャットウインドウが出
て会話を入力する場所とログを表示する場所が出てきます。このあたり
の感覚はオンラインゲームをやったことがある人ならなんとなく感じが
つかめることでしょう。

使われ方として、いくつか例がありますが、

 " Cyber3D - Web Design， Specialised in using Ad... "
 ( http://www.cyber3d.info/ )

のサイトで見れる「Innovative」の3Dはなかなか綺麗で軽いです。この
クオリティレベルで3D空間を構築でき、ブラウザでオンライン配信出来
ることが可能になるAtmosphereには魅力的な製品に感じます。
Atmosphereは、Windows 98SE/ME/2000/XPに対応しており、１１月１９日
よりUS$399で販売されるとのことです。


既にオンラインゲームなどで、3D空間もリアルタイムのやりとりも十分
満喫してきましたが、ウェブブラウザ上で動き、それらを自分達が創っ
ていくことができる環境が出てくるとまた違った驚きがあります。今後
の展開に期待です。



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

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

--- 自分のスタイルに特化した制作環境を作る ---

今まではウェブサイト運営側のツール等についてのアプリケーションを
いくつかさぐってきました。今回からはしばらく制作側のアプリケーシ
ョンの制作についてとりあげていこうと思います。自分の制作にあった
アプリケーションが欲しいと思って作っていたら、いつのまにかその制
作自体が楽しくなってきたというのが本音です。

ウェブデザインソフトの発展のおかげで、１つの会社のソフトでほとん
どの作業がこなせるようになった事は喜ばしい反面、デメリットも生ま
れてきていると感じています。

知らず知らずのうちに、ソフトのクセが身につき、ソフトウェアの標準
の状態の範囲内で何かをするという習慣が生まれてきている気がします。
ソフトの勉強の過程でいつのまにかソフトに思考が粛正されているよう
な感覚を覚えた人もいるのではないでしょうか。

フォトショップでは、プラグイン機能やアクションの追加、Dreamweaver
では各種の機能拡張など、個人が機能追加のために作れる部分は沢山あ
ります。Flashに関しても、MX 2004でプラグインを実装し、単にサード
パーティ制のプラグインを入れるだけでなく、自分のための特化した機
能を作り上げることが可能になってきたといえます。ベースとして使っ
ていくアプリケーションは同じでも、細部を形作るアプリケーションに
デザイナーの微妙な息がかかっていることで、制作物に独特の個性が出
てくると思っています。ところが、僕はこれら機能を拡張して自分にあ
った機能を付け加えていく方法を恥ずかしながらよく知らなかったりし
ます。

また、コンテンツの管理という面で考えてみても、近年フリーで使用で
きるCMSが充実してきており、CMSをサイト運営に活かすのではなく、
サイト構築のサイドに活かそうというやり方もありなのではと思ってい
ます。このあたりは今研究の真っ最中なわけで、おいおい書いていきま
す。サイトの構築をどのようにすれば自動化できるかといったノウハウ
の蓄積はネット上に膨大にあり、僕でも安心して独自仕様のアプリケー
ションが作れるというわけです。

これらの状況を踏まえて、現在デザインをどういうやりかたでやってい
るのか、ウェブサイトをどう見ているのかを再分析しながら「楽」にな
る方法をさぐっていきたいと思っています。もし独自に拡張して使って
いたり、自作のアプリケーションで制作の補助をしているという方、よ
かったらお便り下さい。



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

   +03 プレスブース
       ￣￣￣￣￣￣

((！))
Design Wedgeでは、このたび、募集・告知コーナーを、企業の皆様から
のプレスリリースやイベント情報を掲載するプレスブースと、読者の方
の情報募集やプロジェクト発表、イベント、提案、発表のためのリーダ
ーズブースとして分離しました。

このコーナーでは企業情報、イベント情報や求人募集スペースとして場
所を提供していきます。スペースは、３２文字×２０〜２５行くらいと
なります。掲載のご依頼お待ちしてます。
メールにてお問い合わせ下さい。

  ↓
 mailto:designwedge@karadesign.com



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

   +04 特設　：IEの仕様変更に伴うリッチコンテンツ埋め込み対策２
       ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣

--- IEの仕様変更に伴うリッチコンテンツ埋め込み対策 PART II ---

Microsoft IEブラウザの仕様変更のゆくえは今後どうなるのかはわから
ず、二転三転する可能性も多いにありえるので、そのあたりを踏まえて
取り組んでいきましょう。


 -- 今回の解説

 " Macromedia Japan - アクティブコンテンツデベロッパーセンター "
 ( http://www.macromedia.com/jp/devnet/activecontent/ )

に記載されている、Javascriptを使った回避法パート１の手順を細かく
解説していきます。仕様変更がされたβ版のブラウザはここではIE6update
と呼ぶことにします。


 -- IE6updateの仕様を考えて

従来のFlashを埋め込んだページの制作は、Flashのパブリッシュ時に吐
きだされたhtmlをページに貼りつけるか、もしくはFlashを埋め込めるウ
ェブデザインソフトなどを使ってウェブページに挿入してきました。

でも、このままのやりかただとIE6updateではアラートが出るわけです。
毎回OKを押さないといけない状態を回避するために回避法パート１では、
パブリッシュされたhtmlを直接html内に書くのではなく、Javascriptで
書きだすという仕組みを紹介されています。

少しJavascriptについて書くと、Javascriptには、html内に直接書きこ
む方法と、CSSの外部ファイルのようにJavascriptをまとめて外部のファ
イルに記述しておき、それをhead内で呼びだして、body内で使うという
やりかたがあります。使うのはこの後述のほうです。


 -- 作業手順

この具体的な手順を詳しく書くと、例えば、AAA.swfというFlashをBBB.html
に表示させている場合、まず、BBB.htmlに記述されているFlashを呼びだ
すOBJECTタグなどを丸ごと切り取り、CCC.jsという空のテキストファイ
ルを用意し中に貼りつけます。

* この時点でのCCC.jsの中身
<OBJECT 〜略〜><PARAM NAME〜略〜>
<EMBED 〜略〜></EMBED>
</OBJECT>


次に、このCCC.js内に記述したタグの各行の頭に「document.write('」
をつけ、行末に「￥n');」を加えます。（document.writeはページに''内
の内容を出力するものと考えると理解しやすいです。また、￥nは改行を
表します（ここでは諸都合のため小文字の「\」を「￥」と全角で記述し
ています）。

* この時点でのCCC.jsの中身
document.write('<OBJECT 〜略〜><PARAM NAME〜略〜>￥n');
document.write('<EMBED 〜略〜></EMBED>￥n');
document.write('</OBJECT>￥n');


それが終わったら、function 任意の関数名{}で先ほどdocument.writeを
つけたタグ類を囲みます。任意の関数名は半角英字で記述し、機能がわ
かりやすい名前で書きます。（例：kdsSwfOutput{}）

* この時点でのCCC.jsの中身
function 任意の関数名{
document.write('<OBJECT 〜略〜><PARAM NAME〜略〜>￥n');
document.write('<EMBED 〜略〜></EMBED>￥n');
document.write('</OBJECT>￥n');
}


という感じになります。これで、パート１で紹介されている形に無事な
りました。これを保存したら、外部Javascriptファイルの作成は完了と
なります。

外部Javascriptファイルが出来たら、次はBBB.htmlで外部Javascriptフ
ァイルを呼びだす作業をします。html内のヘッダ部分（<head></head>の
中）に、

<script src="./CCC.js" language="JavaScript" type="text/javascript"></script>

を挿入し（CSSの外部ファイルなどを記述する場所です）、ボディー内
（<body></body>の中）の今までAAA.swfがあった場所へ、

<script language="JavaScript" type="text/javascript">CCC.jsで設定
した任意の関数名();</script>

を埋め込んだらIE6update対策の終わりとなります。この方法では、１つ
のswfファイルにつき１つのJavascriptファイルを用意しそれ用の関数を
呼びだすということになります。

手順がだいたいわかりましたでしょうか？


今回は、パート１として掲載してあった１つのswfファイルにつき１つの
jsファイルを使う方法を解説してみました。次回はこの方法について更
に踏みこんで考えてみようと思います。



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

   +05 リーダーズブース
       ￣￣￣￣￣￣￣￣

((！))
Design Wedgeというメディアをもっと有効に使ってみようと思い、リー
ダーズブースというものを作ってみました。プロジェクトやコラボレー
ションの発表・募集、イベント告知の場としてお使い下さい。

情報掲載の詳しくはメールにてお問い合わせ下さい。

  ↓
 mailto:designwedge@karadesign.com



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

   +06 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月２回発行のご案内です。
現在１１日と２６日の発行を予定しています。１１日発行予定号では
サイトデザインのレポートとモバイルデザイン関連＋α、２６日発行予
定号ではニューストピックとウェブアプリケーション関連のデザイン＋
αという感じになっています。

ウェブデザインの探求を目的に始まったDesign Wedgeですが、これから
もその方針は変わりません。今後は、アドバンスドな方向に向かいつつ
も、わかりやすく伝えるということに力を入れていきたいと思います。

＋α部分では、今まで散発的にやってきたコーナーなどがはいったり、
はいらなかったりする感じになります。

 - - -

リーダーズリンク、引き続き随時募集中です。現在も募集してますんで
是非申し込んでみてください。サイト名とＵＲＬ、サイトの紹介コメン
トのみ必須です。

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

 - - -

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

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

 → mailto:dwml@karadesign.com

 - - -

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

 → mailto:designwedge@karadesign.com



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

   +07 編集後記
       ￣￣￣￣

infoBarは実物を見たわけではないが、なんとなくノートパソコンのキー
ボードのようなボタンがよさげだ。携帯のキーはどうも小さくて硬くて
使いにくいと常日頃から思っていていた。いろいろな都合があるのだろ
うが押しにくいといつも感じている。もう一つ改善が欲しいなあと思う
ボタンはリモコンのボタンである。特にゴム製のものは使い込むとすぐ
に押せなくなってしまう。あれこそ耐久力があるパソコンのキーボード
のようなボタンにすれば押しやすいしいいと思う。きっとこのあたりの
ギャップが作り手と受け手のギャップなのだろうと感じた。

 " KDDI 会社情報: ニュースリリース > 美しさと使... "
 ( http://www.kddi.com/corporate/news_release/2003/1006a/sankou.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 現在の購読者数：7700人
   +04 Design Wedge公式ページ：
       http://www.karadesign.com/designwedge/
       登録・解除はもちろんのことバックナンバーも見ることが出来
       ます。
   ---
   +05 お便りはこちら：
       mailto:designwedge@karadesign.com
       感想・情報提供・お問い合わせなどはこちらまで。お便り待っ
       てます。
   ---
   +06 配信：まぐまぐ
             ( post  ->  magmag )    id:0000005412
             ( http://www.mag2.com/ )
             Pubzine
             ( post  ->  pubzine )   id:225
             ( http://www.pubzine.com/ )
   ---
   +07 コピーライト（著作権）：
       Copyright(c)，1998-2003  KaRa designstudio
       許可無く転載することを禁じます。参照としてのバックナンバー
       へのリンクや引用は自由です。

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

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

       " 次号でMX 2004の総合記事書こうと思います "
       ( http://www.karadesign.com/designwedge/ )

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