今注目のWeb開発Tips、お教えします

Developer Center 今月のトピックス

アドビ製品を使いこなしたい、いろいろな制作ノウハウを知りたいという人は、ぜひアドビ Web サイト内にある「Developer Center」コーナーにアクセスしてください。Developer Center では、アドビのスタッフやクリエイターたちが、Flash、Dreamweaver、Fireworks などのプロダクトの新機能の解説や活用方法、AIR、Spry、Flex、Flash Video、FlashLite といったテクノロジー を使った最新事例や制作ノウハウなど、さまざまな情報を紹介しています。また、Developer Center は、みなさんの知識やノウハウを共有できる場でもあります。みなさんからの開発 Tips を募集しています。詳しくはページの最後をご覧ください。Edge newsletter では、毎回 Developer Center の最新記事を紹介していきますが、Developer Center の更新は随時行っていますので定期的にチェックしてみてください。

HTML ベースの AIR アプリケーション開発環境のセットアップ

http://www.adobe.com/jp/devnet/air/articles/use_air_extension.html

Adobe AIR

Adobe AIR(Adobe Integrated Runtime)、Flash/Flex/HTML/JavaScript/Ajax などの技術をサポートしており、それぞれ得意な手法でアプリケーション開発を進めていけるのが大きな特長です。この記事では Web 開発の技術を活かし、HTML ベースの Adobe AIR 用のアプリケーションを作り上げるための手順にスポットを当ててみましょう。

そこで、Dreamweaver の AIR 拡張機能を使って、作成した Web ページを AIR アプリケーションへと変換する手順 ─ AIR ランタイムのインストール、ダイアログの設定内容、デジタル署名、AIR SDK の使い方 ─ を細かく解説します。

記事内容:
「Adobe AIR のランタイムをインストール」
「Dreamweaver 用 AIR 拡張機能」
「Dreamweaver を使った AIR アプリケーション作成手順」
「AIR SDK」
「AIR SDK を使った AIR アプリケーション作成手順」
Spry を使った実験:ハイライト機能付き元素周期表

http://www.adobe.com/jp/devnet/dreamweaver/articles/spry_periodic_case_study.html

Don Booth

Spry のテクニックを駆使した実験サンプルとして、元素周期表を Spry で実装してみました。ページの上部には、元素の特性などを記したリングボタンがあり、クリックすると該当する元素がハイライト表示されます。また、ツールチップを使って元素へマウスオーバーした際に、その元素の詳細情報を表示するなど、非常に便利で分かりやすい周期表を Spry で完成させることができました。

この実験サンプルを通して、Spry のコードの考え方や手法を段階に分けて解説しています。Spry コミュニティの方なら、ここで使っているテクニックのいずれにも興味を持っていただけると思います。

記事内容:
「Spry 周期表の基本機能」
「HTML マークアップ」
「ハイライト機能」
デベロッパー/デザイナー向け ActionScript 3.0 講座 パート1;プレローダー

http://www.adobe.com/jp/devnet/actionscript/articles/lightweight_as3.html

Jamie Kosoy

デベロッパーセンター内にも「デベロッパー/デザイナー向け ActionScript 3.0 講座」が登場です。ナイキ、コカコーラ、ソニーピクチャーズなどのサイト制作を手がける Big Spaceship のシニアデベロッパーである Jamie Kosoy 氏による第1回目の講座では、モジュール・プレローダーの作成を通してクラスの書き方を紹介します。また、パフォーマンスを最適化するための実例や、アートワークを見直して思い通りのルック&フィールを実現するための考え方もお伝えします。

プレローダーのサンプルファイルもダウンロードできますので、ActionScript 2.0 の知識がある方はぜひ記事をご覧になり、ActionScript 3.0 の世界を体験してみてください。

記事内容:
「タイムライン」
「ムービークリップをプレローダークリップに変換する」
「スーパーモジュール」
Spry テキストフィールド検査ウィジェット導入事例:ショッッピングポータル「カラメル」

http://www.adobe.com/jp/devnet/dreamweaver/articles/calamel.html

Fujikawa

国内での Web 開発 Tips としてご紹介するのが、ショッピングポータル「カラメル」での Spry 利用法です。「カラメル」では、商品購入履歴やお気に入りの商品をソーシャルブックマーク形式で登録できる「マイカラメル」というユーザ機能があり、その登録作業のユーザビリティを向上させるために、Spry の中の特長的な機能のひとつである「Spry テキストフィールド検査ウィジェット」を利用しています。この記事では、Spry テキストフィールド検査ウィジェットを紹介するとともに、実際にどのようにカラメルで使用しているかを解説します。

Dreamweaver CS3 で実際に試せるサンプルファイルも用意されていますので、ぜひこの記事から Spry の利用法を学び、皆さんのサイトの入力フォームにも反映してみてください。

記事内容:
「Spry テキストフィールド検査ウィジェットの特徴と利用方法」
「ショッピングポータル「カラメル」での使用例」

あなたの Web 開発 Tips を教えてください

Developer Center では、Web 開発者の皆さんからアドビプロダクトを使った開発 Tips を募集いたします。お送りいただいた情報は、アドビ Web サイトの中の Developer Center に掲載するのをはじめ、Edge Newsletter のメールニュースや Web ページ、外部 Web サイト、セミナー等を通じて、多くの方にナレッジとして共有されます。あなたのビジネスにも大きく貢献しますので、この機会にぜひご投稿ください。

第一期募集 2007年12月31日まで
投稿方法 下記のメールアドレスに、あなたの連絡先、Tips の概要(最大1,000文字程度)、使用製品を記述してメール件名「Adobe Developer Center記事応募」としてお送りください。掲載させていただく際に、弊社からご連絡させていただきます。
メールアドレス devcon_jp@adobe.com