ハイハットを持つドラムなど他のサウンドは、圧縮の度合いが高いと品質が損なわれる場合があります。圧縮を個別に設定すると、効率的に圧縮されるパートでファイルサイズを縮小し、精度の高いパートではより高いサウンド品質を維持するために圧縮率を低めに設定できるというメリットがあります。各ファイルの圧縮を設定するには、[ライブラリ] ウィンドウでサウンドファイルを探し、右クリックして [書き出し設定] ダイアログボックスで圧縮を設定します。
ファイルサイズの制限によっては、グローバル設定で圧縮する方が簡単な場合があります (図 5 を参照)
wav) の圧縮が最大レベルに設定されていることに注目してください。このファイルを聞くことはまったくないので、ファイルサイズを最小にしておきたいためです。図 5: SWF ファイルを書き出す際に圧縮のためにグローバル設定を適用できます。生成するサウンドは小さなモノラルスピーカーから出力される可能性が一番高いということを思い出してください。つまり、サウンド品質はスピーカーによって決まることになります。テスト用に実際のデバイスのサンプルを用意するのが理想的です。ただし、たいていの場合「ADPCM、11kHz、4 ビット、モノ」の書き出しのグローバル設定で適切に実行されることがわかりました。これで、小さなスピーカーを対象とした場合のサウンド品質とできるだけ小さなファイルサイズに関してちょうどバランスのとれた状態になります。Flash Lite でこのテクニックを使用する場合、シームレスなループを実現するためには書き出しフォーマットとして ADPCM を選択することが唯一のアプローチです。MP3 を使った圧縮からはるかに多くのメリットを得られるデスクトップでの Flash 制作とは違い、MP3 圧縮で書き出された Flash Lite でのサウンドは携帯電話では効果的に再生されないことがわかりました。Flash Lite での MP3 圧縮では、各ループポイントで無音の小さなずれが生じ、サウンドがループする際にほんの一瞬サウンドが脱落することになります。SWF ファイルをデスクトップで再生しても、携帯デバイスにロードしない限りこの問題を見つけることはできません。swf" は同じ圧縮設定でまったく同じミュージックを再生しますが、レイヤー化のテクニックは使用されておらず、代わりに静止サウンドファイルのみが使用されています。両方のファイルには、約 48 秒間再生されるサウンドが含まれていますが、サイズには大きな違いがあります。swf: このファイルにはレイヤー化された 4 つのパートが含まれます。
各パートの長さは 4
書き出されたファイルのサイズは 108K です。swf: このファイルは約 48 秒の長さの単一のサウンドトラックを使用します。書き出されたファイルのサイズは 260K です。おわかりのとおり、killersound のレイヤー化テクニックを使うことで、この例でオーディオに関連するファイルサイズは約 60% 節約されています。基本コンセプトは、サウンドの個々のエレメントをそれぞれのレイヤーに読み込み、その各レイヤーで操作することでより自由に制御することができる、というものです。この方法で、好きなようにサウンドを編集し、単調なサウンドの使用を避けることができます。その結果、効果を狙って特定のポイントでミュートとミュート解除を設定した、多数のループエレメントで構成される小さなファイルサイズのサウンドトラックを作成することができます。
著者について
killersound 社は、web、ワイアレスデバイス、デジタルビデオ、その他のマルチメディアなどのニューメディアで使用するためのオリジナルミュージックとサウンドの作成とライセンス化を専門とする。
Frank は大学の途中で、エンジニアリングの学業から作曲の勉強に転換した後、クラッシク音楽の鑑賞と勉強に没頭し、ついには作曲で修士号を取得
世界中の様々な企業や機関向けのテーマ音楽や数々の作曲を手がけている。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
印刷用に表示
その主な理由は、ケータイというデバイスのために最適化されて削られた機能の多さと、Flash Lite のスクリプトが Flash 4 ベースであるという点です。
しかし、考えてみれば、数年前はもっと機能の低い Flash3 や Flash2 で十分楽しめるコンテンツを作成していたのですから、それを考えると iモードに初めて載った Flash Lite は、コンテンツ制作には必要十分な機能を備えていると言えるのではないでしょうか
ケータイで Flash コンテンツを配信するメリットは、Flash コンテンツがパソコンの画面でなく、一般的に普及しているケータイで見れるという点に尽きます。日本ではインターネット以上に普及していると言っても過言ではないメディア上で、自分の作品を発表できるのです。
Flash の良さを十分に引き出したコンテンツがiモードでも楽しめるようになれば、さらに大きく発展する可能性も広がるでしょう
Flash クリエイターとしては、ぜひとも iモードという新しい分野にチャレンジして大きく発展させていきたいところです。内容は、Flashについてひと通りの知識があり、パソコンでのオーサリング経験があることを前提に話を進めます。Flashで今すぐにでもiモードコンテンツを作ってみたいという方や、技術情報をとりあえず集めておきたいという方に適しています。全 3 回の予定は以下の通りです。
第 3 回 iモード用サウンドとファイルサイズの最適化
著者について
NORI は、アーティストの YOUCHAN とトゴル・カンパニーを設立し、二人の能力を活かしたコンテンツ制作に励んでいる。com の写真サイトへの大リニューアルである。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
第 2 回 アニメーションとインタラクティブ機能 その 5
call とは、プログラムの塊(サブルーチン)を実行するためのアクションです。サブルーチンは、同じ処理をなんども記述するのが面倒な場合などに利用します。特に Flash Lite では、ファイル容量が大きな問題になりますから、call() を上手に利用してプログラムをコンパクトにすることはとても大切なことです。Flash Lite で call を定義するときは、再生時に実行しないフレーム(たとえば、アニメーションが終わったあとに作った空白のキーフレームなど)に記述します。実は、call() で呼ばれるフレームアクションも、通常のフレームアクションも、Flash にとっては区別がないため、1 フレーム目に書いてしまうと、call() の中身を実行してしまいます。そのため、わざと通常では再生ヘッドが通らないようなフレームに記述します。call()で呼ばれる名前は、キーフレームのラベル名になります。そして、呼ばれた先のフレームアクションが終了すると、呼び出した元の call("walkhari") のすぐ次にある行のアクションを実行します。引数と戻り値は、無理やり通常の変数を使用して行います。ローカル変数ではないため、他の call() 先のアクションと変数が重複しないように注意しなてくはいけません。
また、階層が異なるフレームアクションを call() で実行する場合などは、特にパスにも注意しましょう
tellTargetとは、他のムービークリップを制御するためのアクションです。つまり、hari のアニメーションを再生しているのです。} の中は、指定されたムービークリップの中で記述したアクションと同じ働きをします。この tellTarget が活躍するのは、ムービークリップの特定のフレームを表示させたいときなどです。ムービークリップを思い通りに制御する。さらにムービークリップの X,Y 座標や回転角度を変更したり、透明度を変更するときは、ムービークリップに属するプロパティ値を変更することで可能です。ムービークリップ「hari」のY座標を変更するときは、以下のようにするだけです。
スクリプトの解説
つまり、haripos の値に応じて、ハリネズミは 4 つの道に沿った高さに移動することになります。その他にも、ムービークリップを制御できるプロパティをまとめました。
プロパティの解説
ただし、かなり CPU 負荷がかるため注意して使用してください。
高さ(パーセント)
横幅(読み取り専用:ピクセル)
高さ(読み取り専用:ピクセル)
現在表示しているフレームが何フレーム目か
ムービークリップのすべてのフレーム数(読み取り専用)
ムービークリップは、tellTarget により表示するアニメーションを制御し、プロパティ属性の値により位置やサイズなどを変更できることになります。
今回のまとめ
ムービークリップをスクリプトで制御できれば、ゲームなどのコンテンツが制作できるようになるなど、本格的なコンテンツの第一歩です。
ただし、ムービークリップを、使用しすぎると、メモリオーバーのエラーになることがありますので、気をつけながら制作しましょう
次回は、サウンドについて解説する予定です。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
その主な理由は、ケータイというデバイスのために最適化されて削られた機能の多さと、Flash Lite のスクリプトが Flash 4 ベースであるという点です。
しかし、考えてみれば、数年前はもっと機能の低い Flash3 や Flash2 で十分楽しめるコンテンツを作成していたのですから、それを考えると iモードに初めて載った Flash Lite は、コンテンツ制作には必要十分な機能を備えていると言えるのではないでしょうか
ケータイで Flash コンテンツを配信するメリットは、Flash コンテンツがパソコンの画面でなく、一般的に普及しているケータイで見れるという点に尽きます。日本ではインターネット以上に普及していると言っても過言ではないメディア上で、自分の作品を発表できるのです。
Flash の良さを十分に引き出したコンテンツがiモードでも楽しめるようになれば、さらに大きく発展する可能性も広がるでしょう
Flash クリエイターとしては、ぜひとも iモードという新しい分野にチャレンジして大きく発展させていきたいところです。内容は、Flashについてひと通りの知識があり、パソコンでのオーサリング経験があることを前提に話を進めます。Flashで今すぐにでもiモードコンテンツを作ってみたいという方や、技術情報をとりあえず集めておきたいという方に適しています。全 3 回の予定は以下の通りです。
第 3 回 iモード用サウンドとファイルサイズの最適化
開発環境について
このシミュレータを使用すると、デスクトップでコンテンツのプレビューが可能となります。
ただし、ケータイの動作と異なる可能性もありますので、最終的には実機でのテストが必要になるでしょう
開発環境をインストール
アップデータのインストールでは、いくつかのファイルを上書きします。
そのため、ファイルのバックアップを取ってからインストールを開始しましょう
予期せぬトラブルが発生したときなどに、バックアップファイルを元に戻すことで、インストール前の状態に戻せます。
以下のファイルのバックアップファイルを残しておく(Windows の場合)
dll は作成されるためこれも元に戻す必要があります)
アップデータは、アイコンをダブルクリックして、インストールします。
画像 2:バックアップが保存されているかどうか確認したらインストールを開始する (Windows版)
指示に従ってインストールすると、まもなく完了します。特に複雑な操作は必要ありません。ここでは、その違いや注意点について触れます。
ファイルサイズに注意
SWF ファイルのサイズが制限されています。これは、iモードに内蔵のブラウザが一度に読み込めるデータ容量の上限が 20KB であるためです。さらに SWF ファイルを CHTML に組み込んで表示する場合は、ページを構成するファイル全体の合計が 20KB を超えないようにする必要があります。ただし、SWF ファイルを単独で表示する場合は、20KB をそのまま SWF ファイル容量の上限と考えることができます。また、実行時のメモリサイズは200KB(505i シリーズの場合)が保証されますが、ファイルサイズがメモリサイズのどちらかが、条件から外れてしまうと、Flash は正しく表示されません。Flash Lite の Player は、iモード端末で動作することをふまえ、入力装置(マウス)の制限やセキュリティに配慮するため、機能自体に制限を設けた形で実装されています。シンタックスは、Flash MX でのオーサリングを考慮して、MXに近いのですが、実装レベルの機能は、バージョン4 が基準になっているため、現在のFlash MXなどと比べると以下のような機能の違いがあります。
サポートされない大きな機能
ドラッグ・・・マウス操作ができないためサポートされません。入力テキスト・・・サポートされるテキストフィールドは、静止テキストとダイナミックフィールドのみです。
アクションとプロパティのサポート/非サポート一覧
サポートされるアクション
サポートされるプロパティ
動作に条件があるアクションとプロパティ
1つのボタンから実行できるのは最初のgetURL()アクションだけです。また、デフォルトの画質設定は中です。
Flash 4 では無かったがサポートされるアクション
文字列の連結は、add を使用し、数値の加算には+を使用します。配列はサポートされていません。eval() を使用して配列をエミュレートします。ただし、引数、戻り値は使用できません。アクションについては、この連載の第 2 回で具体的に解説する予定です。使用できない機能もありますが、配列 (Array オブジェクト) などは、その代わりになるテクニックなどもあります。最初に必要十分と申し上げたのは、シンプルな機能ですが、上手に組み合わせれば複雑なコンテンツを制作することも可能だからです。グラフィックを表示する。しかし、パソコンでブラウザのメニューや枠などを計算して、コンテンツのサイズを決めるのと同じように、iモードのブラウザの表示エリアも小さくなるはずです。そこで、この連載では 240x240 ピクセルで制作することとします。まずは、もっともシンプルな●と■を描いてみました。画像 1:まずは、Flashで簡単なグラフィックを描いてみる。グラフィックができあがったら、パブリッシュして、シミュレータで表示できるか試します。パブリッシュボタンを押すと、SWF ファイルが出力されます。Flash 4 以外のバージョンでのパブリッシュでは、それぞれのバージョンに応じた通常の Flash が書き出されます。グラフィックを描いているだけであれば、特に問題はないと思いますが、アクションを設定した場合、サポート外のアクションなどが含まれるとアラートが表示されます。画像 3:出力ウィンドウには、ケータイデバイス用のアラートが出るので確認する。この程度は何も問題ない。今回は、そのままでOKです。動作は PC 上で見る Flash と変わらないので、あまり感動はないかもしれませんが、これは実際にiモード端末でも見ることができる Flash なのです。言い換えれば、iモードでベクターグラフィックがこんなに簡単に表示できるのです。ビットマップを表示する。しかし、読み込む画像ファイルのファイルサイズは、SWF のファイルサイズに影響するため注意が必要です。シンプルな色で構成された画像などは、GIF 形式を利用し、写真などは JPEG 形式を利用するなどして、いわゆる画像に最適なフォーマットを使用します。
そうすることで、より小さなサイズでも、綺麗な画像を表示できるでしょう
ここでは、横幅が最大の 240 ピクセルになるようにしている。また、ビットマップは、Flash 内部で描画するベクターグラフィックと異なり、リサイズすると画像が乱れてしまいます。大きすぎる画像を Flash 内で縮小しても、大きいファイルサイズの画像を使っていることと同じです。その点も注意してビットマップは扱う必要があります。
画像 2:ライブラリで、ビットマップを選択し右クリックで出てきたメニューから「プロパティ」を選択すると、それぞれのビットマッププロパティを見ることが可能
画像 3:ビットマッププロパティは、スムージングのオン/オフ、圧縮形式の選択、JPEGデータの画質の設定、といった調整が可能
「テスト」ボタンを押すと、圧縮後の消費サイズまでわかる。もちろん、左上の窓に表示される画像は指定した画質で圧縮されたものが表示される。テキストや絵文字を表示する。テキストフィールドは、静止テキストとダイナミックテキストが使用できます。静止テキストでは、複雑な形の明朝系よりもゴシック系の方がサイズを抑えることができます。また、デバイスフォントを使用すれば、さらにサイズを節約することができます。デバイスフォントは、フォントのアウトライン情報を持たず、ケータイがもっているフォントを使用して表示するため、ファイルサイズやメモリサイズを抑えるのに効果的です。特に、長文のテキストや、アクションによって内容がダイナミックに変わる場合に使用します。ただし、デバイスフォントには、静止テキストと異なり、以下のようないくつかの制限があります。
デバイスフォントを使用する際の注意事項
1 つのテキストフィールドに使用できるフォントは 1 種類です。テキストフォーマットで有効なのは、行揃え(左揃え、中央揃え、右揃え)だけです。テキストの色は、1 つのテキストフィールドについて 1 色だけです。上付き、下付き、カーニング、太字、斜体などはサポートしていません。iモード対応絵文字を表示する。iモード端末専用の iモード対応絵文字を表示するには、i絵文字の Shift-JIS コードを埋め込んで表示します。入力には専用のツールを使いますが、その iモード対応絵文字をデスクトップで入力/表示するためのユーティリティ「iモード対応絵文字入力ソフト」は NTT DoCoMo のサイトからダウンロードできます。画像 1:このユーティリティを使用すると、iモード対応絵文字の Shift_JIS コードをクリップボード経由で入力できる。画像 2:外字設定をしないと、デスクトップで絵文字が正しく表示されない。上から、静止テキスト、ダイナミックテキスト、i 絵文字を使用した静止テキスト、iモード対応絵文字を使用したダイナミックテキストである。
どちらの場合もテキストの色は自由に変更でき、静止テキストならば1文字単位で調整が可能
今回はここまで
また、グラフィックを表示するだけのコンテンツを制作する場合は、特に何の問題もなく制作できますので、ファイルサイズ 20KBを 守るように心がけてたくさんのコンテンツを制作してください。次は、アクションスクリプトを利用したコンテンツ制作についてお話したいと思います。
第 2 回 アニメーションとインタラクティブ機能 その 1
また、リファレンスマニュアルにも書いてありますので、参考にしてください。今回のソースファイルは、このページの一番下からダウンロードできます。注意事項をよくお読みなってから、ご利用ください。今回、最初に解説するサンプル「じゃん・けん・ぽん」は、こちらです。このコンテンツを視聴するには Flash が必要です。ハリネズミのじゃんけんの手がランダムに切り替わります。乱数と条件文を使用する。スクリプトで、もっとも便利に使えるのは、乱数と条件文です。この 2 つを理解すれば、さまざまに応用してより複雑なコンテンツが作成できます。上記のサンプルは、乱数と条件文を効果的に利用している例です。
プログラムの解説の前に
プログラム初心者の方のために、乱数と条件文について簡単にまとめましたので、ご覧ください。プログラムの知識がある人は、次のページまで飛ばしていただいて構いません。乱数とは、ある範囲の中の、特定の数を指します。ただし、数の範囲は、0~9 の 10 パターンしかないことが決まっています。大抵、乱数を求めると、ほとんどの場合、条件文と一緒に活用します。条件文とは、「●●のとき、■して、そうじゃないときは▲する」ということを、Flash にさせるときに使用します。これらのテクニックを応用してサンプルで紹介した「じゃん・けん・ぽん」というアニメーションを作成する場合、左にいるハリネズミの出す手は、グー・チョキ・パーの 3 種類があります。これは、乱数を利用して 3 種類の中のどれかを出すようにしています。どの数字がどの手になるかは、作り手の自由ですので、適当に決めますまた、パターンを簡潔にするために、キリンの手は「グー」しか出せないようにしました。
これならば、すべてのじゃんけんのパターンは、3 通りしかありませんから、分かりやすいですね
(もし、キリンも 3 つの種類の手を使えるとすると、3 x 3 で 9 個のパターンを作成する必要があります。
それ以前にキリンがどうやってチョキを出すかを考えないといけないですけど)
今回使用するソースファイルをダウンロードできます。以下のものが含まれます。太字が実際に解説に使用したサンプルです。fla・・・メニュー画面です。fla・・・メニューから呼ばれる「じゃん・けん・ぽん」というアニメーションです。fla・・・メニューから呼ばれる「9 パズル」というゲームです。fla・・・メニューから呼ばれる「あみだくじ」というゲームです。txt・・・注意事項などの詳細が書いてありますので、必ずお読みください。
また、他に、それぞれ swf 書き出ししたファイル(拡張子が
注意事項:すべてのソースファイル、およびキャラクターやイラストレーション、アニメーション等は、トゴル・カンパニーが著作権を所有しています。学習目的で利用することはできますが、それ以外に利用することはできません。ご注意ください。
第 2 回 アニメーションとインタラクティブ機能 その 2
ソースを開いてみる。
「じゃん・けん・ぽん」のソースを開いてみましょう
一番上のレイヤーには、キーフレームが作成されていて、ラベル名がつけられています (画像 1)
各ラベルの名称とその部分にあるアニメーションの内容は次の通りです。
アニメーションの解説
「じゃんけん」(または「あいこで」)を出すアニメーション
ハリネズミが勝ち、喜ぶ
結果のアニメーション
ハリネズミが負け、キリンが喜ぶ
結果のアニメーション
乱数と条件文を使う。乱数と条件文を使うタイミングは「じゃんけん」(または「あいこで」)と出したときです。実際に、janken の最後のフレームである 15 フレーム目に以下のようなアクションが書かれています。
(解説の便宜上、行番号を先頭に付加しています)
スクリプトの解説
1 行目で、乱数を作っています。次に、条件としてif文が使われています。2 行目のtrace() は、r の内容を出力ウィンドウに表示するという、確認のためのアクションです。実際の動作には無関係ですので、消してしまっても、そのまま残しておいても構いません。
ただ、無駄な処理には違いないので、swf として出力するときはパブリッシュ設定の「trace アクションを省略」をチェックしておきましょう
このようにして、乱数と条件文を使用して、ハリネズミの手をランダムに出すことを実現しています。さて、ここで 1 つ問題が発生します。じゃんけんでは、「あいこ」の場合があるのです。つまり、あいこのときは「あいこで♪」と言って、またやり直します。
次は、それを実現しましょう
第 2 回 アニメーションとインタラクティブ機能 その 3
「あこで・しょ」を実現する。
「あいこで・しょ」を実現するために、 ある変数の状態によって、ムービークリップの特定のフレームから始まるようにスクリプトを作成する方法を紹介しましょう
ある変数の状態とは、あいこかどうかということです。ムービークリップの特定のフレームとは、「じゃんけん」と出すか、「あいこで」と出すかが異なる2つのアニメーションです。ここに、白丸のムービークリップがあります。これが、「じゃんけん」と「あいこで」という 2 つのパターンを含んだムービークリップです。
実際に中を見てみましょう
ムービークリップ内では、2 つのパターンがラベルによって分けられています。各ラベルの名称と意味は次の通りです。
アニメーションの解説
「じゃんけん」と表示する。「あいこで」と表示する。
「あいこで」を表示するムービークリップの中身
このムービークリップの一番最初のフレームには、変数 aiko の状態によって、再生するフレームを指定するアクションが記述されています。そのアクションは以下のようになっています。
スクリプトの解説
/ は、メインタイムラインをあらわし、/ で区切られた部分を階層と呼びます。「:」は、その後に続く文字列が変数名である場合につけます。: がないと、その階層にあるムービークリップを示すことになります。また、それぞれのパターンを表示した後は、再生を stop() しています。そうしないと、延々とループ再生してしまうためです。まとめると、このムービークリップは、メインタイムラインにある変数 aiko の内容によって、再生するフレームを変更していることになります。つまり「じゃんけん」と「あいこ」を切り替え表示できるのです。これとまったく同じ方法で「ぽん」と「しょ」の表示も制御しています。
第 2 回 アニメーションとインタラクティブ機能 その 4
ボタンで制御
最初のサンプルは、アニメーションで勝手に動くものでした。そのため、インタラクションがまったく必要ありません。
次は、ボタンを使ったアクションを制作してみましょう
まず、iモード端末で使用可能なボタンについて説明します。
端末で反応するボタンの種類
決定キー・・・enter キーとして機能
2 つ目のサンプルはこちらです。このコンテンツを視聴するには Flash が必要です。
ステージ内と外のボタン
まず、スタート画面にある「スタート」ボタンは、決定キーに割り付けるために、次のようなアクションが設定されています。実際に再生してみると、最初の画面で決定キーを押すと、ミニゲームが始まります。そこで、次に「2」や「8」のキーを押すと、ハリネズミが上下に移動します。さらに、「6」のキーを押すと、ハリネズミは歩き出します。「4」か「5」のキーを押すとハリネズミは止まります。これらは、画面の外にあるボタンのアクションで動作しています。実際にソースで確認するには、[表示メニュー]-[ワークエリア]を選択し、ワークエリアを見えるようにしてから、2 フレーム目を表示してください。画面の上に透明ボタンが並んでいるのが分かります。それぞれの透明ボタンでは、ハリネズミの動作を定義したアクションを呼ぶようにスクリプトが書かれています。画像 2:透明ボタンである点やサイズ、その位置に、特別な意味はありません。たとえば、6 のキーを押したときのボタン(中断・右のボタン)には、次のようなアクションが記述されています。
スクリプトの解説
このサブルーチンは、ハリネズミを歩かせるという目的を持っています。
その他のボタンの活用方法
それらを使用すれば、電話をかけるボタンやメーラーを起動するボタンを作成することもできます。
ボタンの動作内容
スクリプト例(ボタンクリック時か、「4」キー押下時に動作)
電話をかける。メーラーを起動する。メーラーを起動する場合で、サブジェクトを指定する場合などは、変数に代入して、getURL の時に「GET を使用して送信」を選択します。
mailto: の後に URL パラメータのように続けて記述する方式は、日本語が混じると正しく機能しませんので注意しましょう
第 2 回 アニメーションとインタラクティブ機能 その 5
call とは、プログラムの塊(サブルーチン)を実行するためのアクションです。サブルーチンは、同じ処理をなんども記述するのが面倒な場合などに利用します。特に Flash Lite では、ファイル容量が大きな問題になりますから、call() を上手に利用してプログラムをコンパクトにすることはとても大切なことです。Flash Lite で call を定義するときは、再生時に実行しないフレーム(たとえば、アニメーションが終わったあとに作った空白のキーフレームなど)に記述します。実は、call() で呼ばれるフレームアクションも、通常のフレームアクションも、Flash にとっては区別がないため、1 フレーム目に書いてしまうと、call() の中身を実行してしまいます。そのため、わざと通常では再生ヘッドが通らないようなフレームに記述します。call()で呼ばれる名前は、キーフレームのラベル名になります。そして、呼ばれた先のフレームアクションが終了すると、呼び出した元の call("walkhari") のすぐ次にある行のアクションを実行します。引数と戻り値は、無理やり通常の変数を使用して行います。ローカル変数ではないため、他の call() 先のアクションと変数が重複しないように注意しなてくはいけません。
また、階層が異なるフレームアクションを call() で実行する場合などは、特にパスにも注意しましょう
tellTargetとは、他のムービークリップを制御するためのアクションです。つまり、hari のアニメーションを再生しているのです。} の中は、指定されたムービークリップの中で記述したアクションと同じ働きをします。この tellTarget が活躍するのは、ムービークリップの特定のフレームを表示させたいときなどです。ムービークリップを思い通りに制御する。さらにムービークリップの X,Y 座標や回転角度を変更したり、透明度を変更するときは、ムービークリップに属するプロパティ値を変更することで可能です。ムービークリップ「hari」のY座標を変更するときは、以下のようにするだけです。
スクリプトの解説
つまり、haripos の値に応じて、ハリネズミは 4 つの道に沿った高さに移動することになります。その他にも、ムービークリップを制御できるプロパティをまとめました。
プロパティの解説
ただし、かなり CPU 負荷がかるため注意して使用してください。
高さ(パーセント)
横幅(読み取り専用:ピクセル)
高さ(読み取り専用:ピクセル)
現在表示しているフレームが何フレーム目か
ムービークリップのすべてのフレーム数(読み取り専用)
ムービークリップは、tellTarget により表示するアニメーションを制御し、プロパティ属性の値により位置やサイズなどを変更できることになります。
今回のまとめ
ムービークリップをスクリプトで制御できれば、ゲームなどのコンテンツが制作できるようになるなど、本格的なコンテンツの第一歩です。
ただし、ムービークリップを、使用しすぎると、メモリオーバーのエラーになることがありますので、気をつけながら制作しましょう
次回は、サウンドについて解説する予定です。
著者について
NORI は、アーティストの YOUCHAN とトゴル・カンパニーを設立し、二人の能力を活かしたコンテンツ制作に励んでいる。com の写真サイトへの大リニューアルである。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
jp/) が DoCoMo 505i シリーズの発売にあわせ制作したコンテンツを技術的な観点を踏まえ説明していきたいと思います。
携帯市場におけるYnotとしてのジレンマ
Ynotは全携帯キャリア向けサービス"ケータイeカード"としてサービスを提供しています。携帯のサービスでは、PCとは違い、gifや、pngでのサービス提供をしています。今年の2月にはiモードの公式サイトとしてサービススタートしているのですが、今までのPCでのノウハウを活かしきれていない、 歯がゆさを味わいつつサービスを提供していました。そういうバックグラウンドがあるだけに、今回のFlash Liteの発表は皆さんと同じように、Ynotにとっても衝撃的なものでした。やっとPCでのノウハウを携帯に活かせるチャンスが広がった。次のページからは、私達がFlash Liteを使った事例を技術的な視点を交えて解説いたします。
この記事に必要なもの
このチュートリアルは、こちらのソフトウェアのインストールが必要です。PC のコンテンツをケータイに移植する。一見“魅力的な仕様”という様に感じます。
Flash 4 のスクリプトを極限まで引き出したコンテンツを
と思わず言いたくなりますが、まず私達は“多くの方にグリーティングカードを使って欲しい”そんな思いから PC で提供しているカードと同じものが見れるように携帯に移植する、というチャレンジを行いました。逆にいうと、シンプルで簡単にコンテンツを制作できるので、制作者にとってはうれしい仕様であり、より多くの Flash クリエーターの方々にコンテンツ制作のチャンスがあると理解できます。以下に Flash Lite コンテンツ制作に当たっての基本的な特徴を大雑把にですが羅列します。CHTML 内 (object タグ内) ではボタン操作不可(アニメーションの再生のみ): SWF を直接指定する事によってボタン操作やインタラクティブなコンテンツを再生する事ができます。
※画面メモにて待ち受け画面に設定する事も可能
サウンドはボタンクリック時のみ再生 (※サウンドについては、STEP 2 で説明いたします): イベントサウンド、ストリーミングサウンドはサポートされていません。再生フレームレート: コンテンツ、CPU に依存しますがは6~8くらいが適当ですが、コンテンツの内容によります。PC のコンテンツをケータイに移植する。まずはワイノットの人気のカードである、「蟻がとう」というカードをご覧ください。私達はこのカードをそのままのルックで Flash Lite に移植しようと考えました。このコンテンツを視聴するには Flash が必要です。このカードはワイノットのインハウスデザイナーのものなので、変更が容易である、という事も重要な条件です。このコンテンツを視聴するには Flash が必要です。一見凄く簡単な移植作業に見えます。シンボルの配置が変わった。ボタンアクションがなくなった。くらいの変更点しかわかりません。当初このカードは Flash4 で作られたもので、そんなに重くもないので、すぐに再生できるだろう、そんな甘い思いでスタートしました。
大方の予想と反し(予想通り
)そのままで再生すると、以下の様に表示され再生が止まってしまいました。画像 1:しかしファイルサイズは 16KB なのでサイズ的には問題なさそうです。
パスの表示数の制限
PC でもパスの表示数が多いと再生がおそくなる事があります。CPUパワーがパソコンに比べ脆弱な為、1 フレームに表示させるパスの数が制限されており、それを超えると、アラートが出て、再生がストップしてしまいます。
画像 2: 再生が止まったフレームをアウトライン表示
同じシンボルでも、表示されているパスが非常に多く Flash Lite には適していない。パスを画像に置き換える。問題なのは、1 フレームにあたりのパスの多さです。私達はまずパスの数を減らす為、蟻一匹一匹の動きを画像に置き換えました。"画像にする"と聞くと重くなりそうですが、小さい GIF であればそんなに重くないですし、パスの数を大幅に軽減できました。
画像 3: パスと画像の置き換え
画像に置き換えると4 本のパスで済みます。Flash Lite では、サイズ(重さ)の制限よりも、表示れているパスの数がもっとも重要な要素となります。
ビットマップに置き換えて同じシーンを表示
画像 4: 今度は再生が止まる事なく、最後まで再生できました。CPU に負担をかける処理を避ける。以前から iアプリなどの話をする時に、どこのデバイスの CPU のスピードが遅い/速い、という話になりますが、それは Flash Lite でも同じ事が言えます。かなり CPU に依存すると言っても過言ではありません。CPU 負荷の高い処理は注意が必要です。STEP 1 で触れたパスの数という概念もそうですが、その他以下のような原因で再生が止まってしまう事がありますので、ご注意ください。
アルファ、グラデーションの多様
複数のシンボルを同時にトゥイーン
デバイスフォントの多様
デバイスフォントは非常に便利であり、コンテンツのサイズを減らしダイナミックなコンテンツを作るには必要不可欠ですが表示するのに CPU パワーが必要になります。皮肉にもアウトライン表示の方が処理は軽いのです。ただし絵文字の場合は、デバイスフォントで表示させた方が処理が軽いのです。
携帯電話のコンテンツを作るという事
ロードが完了すると、初めて 1 フレーム目が表示されるという仕様になっています。さらに PC とは違い、ユーザーは閲覧する為に、パケット料を支払うことになります。※これは非常に重要な問題と言えます。ちなみに今回の Flash Lite の表示可能サイズ[20KB] はパケット料金に換算するとユーザーは 45~50円近く課金される計算となり、よりシビアなダウンサイジングを迫られると言えます。
これが意味しているのは、コンテンツ自身の内容もさる事ながら、いかにファイルサイズを減らせるか
という事が非常に重要になってくるということです。かなり有名な方法なのですがダウンサイジングの Tips をご紹介しておきます。グラフィックシンボルを使用しない: グラフィックシンボルは、毎フレームパス情報として、書き出すので重くなります。それに対してムービークリップシンボルは一度に読み込むのでトータルで見ると軽く済ます。ストリーミング再生しない Flash Lite ではグラフィックシンボルは必要ないので、なるべくムービークリップシンボルを使います。デバイスフォントを使う: 前ページと言っている事が反対ですがデバイスフォントはダウンサイジングには有効です。_ゴシック、_明朝など、フォントの種類は選ぶ事ができず、各機種の依存文字になります。またテキスト入力はできません。この STEP 1 ではいったい何が重要かというと、Flash Lite は制限が沢山ある様に感じますが、楽しくシンプルに作っていけば特に何も問題なくコンテンツは再生できます。ただ、実機で何回も確認しながら、細かなTipsが必要になってくるかと思います。PC では皆さん独自の方法をお持ちだと思いますので、それをそのまま携帯用のコンテンツに活かしてください。気をつけるのはコンテンツを楽しく作る事と、CPU と、サイズです。STEP1ではコンテンツの移植という事で、比較的簡単にコンテンツを作る事ができました。
Flash Lite ではサウンドファイルの扱いが通常とは異なり、再生デバイスが携帯電話なので、wavなど波形サウンドファイルを(最近は mp3 ファイルを扱えたりしますが
)基本的には扱う事ができません。下のサンプルをご覧ください。MIDI サウンドが鳴ったと思います。このコンテンツを視聴するには Flash が必要です。※PC によって再生できない場合があります。ご注意ください。
すこし変わったサウンドの再生方法だと思れたのではないでしょうか
なぜこういう操作が必要かというと、キーは、携帯電話では上下ボタン
キーは、携帯電話では決定ボタン
にあたり、Flash Liteコンテンツは、決定ボタンを押した時にだけサウンドが再生される仕様になっているからです。サウンドの再生と同様、制作する場合も通常の制作手順と異なった方法で制作する必要があります。ここでは、PC 上でシンプルに音を鳴らすだけのサンプルファイルを使いながら Flash Lite の音を使ったコンテンツを制作していきたいと思います。設定ファイルを編集する。ライブラリにサウンドを追加する。リンケージを設定する。ボタンシンボルのダウンに配置する。設定ファイルを編集する。Flash Liteは設定ファイルにしたがって各実機用のムービーを生成します。txt というファイルになります。そのファイルをテキストエディタで開きます。Flash Lite はこのファイルを参照して、ムービーのデバイス形式を決定します。
今回は MIDI を使ったコンテンツを制作するので、※複数のデバイスタイプのコメントを外すと、上の行のものが有効になります。これで設定が完了しました。ライブラリにサウンドを追加する。MIDI ファイルは、Flash MX 本体ではインポートができないので、パブリッシュ時にリンケージを使って任意のサウンドファイルと置換する事になります。任意のサウンドファイルをライブラリに追加します。画像 1: ここでは、Flash MX のサンプルライブラリのサウンドファイルを使いましたが、特に指定はなく、何でもかまいません。リンケージを設定する。画像 2: リンケージを設定する。ボタンシンボルのダウンに配置します。Flash Lite ではボタンサウンド[ ダウン ] しか再生できないので、ボタンシンボルのダウンフレームにサウンドを配置します。画像 3: ボタンシンボルのダウンに配置します。パブリッシュする。出力ウィンドウが以下のように表示されていれば完成です。画像 4: パブリッシュする。キーで、ボタンにフォーカスし、キーを押し、サウンドが鳴っているのを確認します。※PCによって再生できない場合があります。ご注意ください。
STEP 3 新しいユーティリティを使ったアイデアコンテンツ制作
505i 用の着メロ試聴コンテンツを作る。この項で制作するのは、各着メロが試聴でき、再生中の着メロに対してのイメージ (CD ジャケット)、さらにダウンロード先へのリンクボタンが表示されるというものです。
携帯電話では、iアプリなど、JAVA を使うことによって同様の事が実現できますが、ページ遷移がなく、リッチなコンテンツを提供でき、さらにその開発が簡単である事は特筆すべき事ではないでしょうか
このコンテンツを視聴するには Flash が必要です。実機(505i シリーズ)でみる場合、下のリンクをクリックして URL をメールで転送してください。実機にメールを送る。各デバイス毎のMFiファイルを用意する。設定ファイルを変更する。リンケージを設定する。MFi ファイルをリネームする。着メロなど音に関しての事業を今までやった事が無かった弊社は MFi ファイルが手元にありませんでした。
この記事を読まれている方々も、おそらく MFi ファイルを持っていない方が多いのではないでしょうか
google等の検索エンジンで『着メロ 変換』と検索してみると、フリーやシェアウェア問わず多数のツールが見つかります。私はこのツールを使ってテストファイルを作っていました。このツールは MIDI をドラッグアンドドロップで MFi ファイルに変換してくれるので便利です。
各デバイス毎のMFiファイルを用意する(任意)
特殊な音源を使わない MFi ファイルは各デバイスの特有の音源を使う事ができます。特殊音源を使うと各デバイス毎に音が違ってくるので、注意が必要です。デバイス特有の音源を使わない曲や、ボタンの効果音等で MFi 使う場合には、そこまでする必要はありませんが、今回は着メロ試聴という"音コンテンツの特性上"、念の為に各デバイス毎の MFi ファイルを用意する事にしました。
今回は全機種対応させる為に、1曲に対して、という 6 デバイス用、6 ファイル用意し、楽曲が 3 曲ですので、計 18 ファイル用意する事になりました。バッチ処理をする。txt という設定ファイルで、デバイスを指定すると説明しました。今回の場合、着メロを 3 曲試聴させますので、計 18 ファイルという多くのファイルを扱わなくてはなりません。しかし 18 ファイルを 1 曲 1 曲置換していくのは大変ですので、 "swflite" というユーティリティーを使って一度にファイルの置換を行いたいと思います。設定ファイルを変更する。画像 1: 設定ファイルを変更する。txt と同じファイルになります。リンケージを設定する。3 種類の着メロの置換ですので、ライブラリには 3 種類の任意のサウンドファイルが必要になります。今回も、Flash に付属してくる、サウンドサンプルライブラリを使用しました。画像 1: リンケージを設定する。各サウンドファイルのリンケージプロパティに、と記述します。MFiファイルをリネームする。今回は全機種分用意するので、と順にMFiファイルをリネームします。
バッチ処理の大まかな流れ(下から)
画像 3: バッチ処理の大まかな流れ
この表はバッチ処理の流れを大まかに書き出したものです。txt のデバイスタイプに書かれた機種名(文字列)をリンケージの "*" に代入したファイルと置換処理します。生成する SWF には、ファイル名の最後に、機種名を足してリネームされたものが生成されます。実機で確認します。携帯コンテンツは実機の確認が必須です。実機で確認します。
今回は私達がケータイ Flash eカードの仕様決定に関して、どのように調べ、検討、対応してきたか
というのを書かせていただきました。
携帯電話で、Flash ムービーが再生されるというのは、 PC で再生されるの以上に特別な意味を持ってくるのではないでしょうか
私達のようなコンテンツプロバイダーにとって Flash Lite は携帯電話市場にコンテンツという魅力的、且つ、爆発的な力を与えてくれましたし、着メロ試聴の様なページは遷移なくストレスのないコンテンツやサービスが提供が可能になったり、PC のサイトと携帯のサイトのルックを揃えてブランドイメージを統一もできるようになるでしょう
しかし逆にユーザーは PC とは違いパケット料を支払ってコンテンツやサービスを閲覧するので、コンテンツ制作者や私達のようなコンテンツプロパイダーはよりシビアに、コンテンツを公開していかなければなりません。私達も手探りですが、Flash Lite でしか表現できないコンテンツ、サービスというのを考えています。この記事が私達だけではなく、皆さんとって、Flash Lite コンテンツ制作についてすこし考えるキッカケになれれば幸いです。今回の記事に対するご意見、ご感想はこちらまでお気軽にメールください。
著者について
Ynot は、現在約 3000 ものコンテンツを保有し、インターネットユーザーに対してカスタマイズ可能なアニメーション e カードを提供する業界屈指の e カードプロバイダーです。Ynot が保有する e カードには主にフレームバイフレームのアニメーションが用いられていますが、中には Macromedia Flash 4 対応の高度なスクリプトを利用したゲームコンテンツなども含まれています。Ynot が提供する多彩なコンテンツは、こちらの Web サイトにてご覧いただけます。Ynot では、パソコン向けのグリーティングカードサービスだけでなく、携帯向けグリーティングカードサービスも用意しています。Macromedia Flash Lite がリリースされるまでは GIF や PNG ファイルを利用して携帯向けサービスを実現していましたが、Flash Lite がリリースされてからはパソコン向けサービス同等のコンテンツを携帯向けサービスでも提供できるようになり、一層充実した携帯向けグリーティングカードサービスが実現できています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
ようこそ、さん
お問い合わせ
ホームユーザ向け写真/ビデオ編集ツール
すべての業種・ソリューション ›すべての製品 ›アドビサポートに問い合わせる。
注文状況の確認
教職員および学生
アドビについて
投資家の皆様へ*
地域・社会への貢献*
お問い合わせ
個人またはホームオフィス
法人のお客さま
教育関係のお客様
おすすめ製品
すべてのソフトウェアを見る ›
購入後について
割引価格でコスト削減
ライセンスをご利用中のお客さま
その他の購入方法
販売店のご紹介
Flash Lite とは、携帯電話とコンシューマ向けエレクトロニクス製品用に特別に開発されたFlashテクノロジです。Flash Liteにより、リッチコンテンツやブラウザ機能、およびカスタマイズされたユーザインタフェースが急速に普及します。このFlashテクノロジの実現により、デザイナーやデベロッパーは、コンテンツ制作において新たな次元の表現力、効率性、そしてインタラクティブ性を手にしたことになります。
au サービスの普及状況
KDDI が提供する au サービスは日本市場において第二位の規模を誇るワイヤレスデータサービスです。au サービスは、コンテンツ制作者に対して大規模なビジネスチャンスを提供します。なお、au サービス市場にコンテンツを配信するには、KDDI 認定コンテンツプロバイダーの資格を取得するか、サードパーティー製コンテンツを取り扱う認定コンテンツプロバイダーを経由する必要があります。
関連リソースおよびダウンロード
0 リリースノートをご覧いただけます。KDDI 携帯機種用 Flash コンテンツを開発するための、ヒントやテクニック、サンプルコード、ベストプラクティス、チュートリアルなどの Flash Lite オーサリングガイドラインと、既製のインターフェイス要素を用意しています。
(英語版と日本語版を用意しています)
画面を横切るメールにキャラクターを飛ばして乗せる(添付する)ゲームを作ります。
1 コンテンツを開発するための最優良テクニック
1 の最新機能を利用して、魅力的な携帯電話用アプリケーションを開発
1 における音声の使用
携帯電話用アプリケーションで音声を使用する上での注意点などを紹介します。1 の新機能を紹介します。Flash対応デバイスの一覧を見る。
その他のリソース
その他のモバイルデベロッパーリソースサイト*
すべての製品、テクノロジセンター
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
ようこそ、さん
お問い合わせ
ホームユーザ向け写真/ビデオ編集ツール
すべての業種・ソリューション ›すべての製品 ›アドビサポートに問い合わせる。
注文状況の確認
教職員および学生
アドビについて
投資家の皆様へ*
地域・社会への貢献*
お問い合わせ
個人またはホームオフィス
法人のお客さま
教育関係のお客様
おすすめ製品
すべてのソフトウェアを見る ›
購入後について
割引価格でコスト削減
ライセンスをご利用中のお客さま
その他の購入方法
販売店のご紹介
携帯電話用Flashコンテンツを開発するためのヒント、テクニック、インタフェイス要素、サンプル、チュートリアルが含まれた、Flash Liteオーサリングガイドをこちらからダウンロードできます。
(英語、日本語、韓国語、簡体中国語、および繁体中国語の各バージョンをご利用いただけます)
1 プロファイルが含まれます。
(英語、日本語、韓国語、簡体中国語、および繁体中国語の各バージョンをご利用いただけます)
1への対応により下記オーサリングガイドラインをご用意致しました。ソフトバンク携帯電話用 Flash コンテンツを開発するための、ヒントやテクニック、サンプルコード、チュートリアルなどのFlash Lite オーサリングガイドライン等を用意しています。0コンテンツを開発するためのヒント、テクニック、インタフェイス要素、サンプルが同梱されたコンテンツデベロップメントキット(CDK)をこちらからダウンロードできます。また、このCDKにはNTT DoCoMo携帯端末向けに、さまざまな機能を実装するために必要となるメタデータパネルが含まれています。1 を利用すれば、Flash デザイナー / デベロッパー / コンテンツ提供者は ActionScript スクリプト言語や、各種ドローイングツール、テンプレートなどを利用して、参加性の高いコンテンツを素早く開発することができます。
(英語版と日本語版を用意しています)
0 コンテンツをレビュー / パブリッシュ / テストするためには、下記のアップデータをインストールする必要があります。
(英語版のみ)
世界中のデベロッパーがFlash Lite用コンテンツを開発できるよう、Adobeではさまざまな言語用のローカライズ版 CDK を用意しています。既存または最新の携帯電話用 Flash Lite コンテンツを開発 / パブリッシュするためのサンプルを、こちらからダウンロードしてください。
(英語版のみ)
0 コンテンツをレビュー / パブリッシュ / テストするためには、下記のアップデータをインストールする必要があります。
(英語版のみ)
コンポーネント:コンポーネントとは、頻繁に発生するタスクやユーザーインターフェイス (UI) 要素を用意に作成するために開発された既製のムービークリップです。
(英語版のみ)
0 リリースノートをご覧いただけます。KDDI 携帯機種用 Flash コンテンツを開発するための、ヒントやテクニック、サンプルコード、ベストプラクティス、チュートリアルなどの Flash Lite オーサリングガイドラインと、既製のインターフェイス要素を用意しています。
(英語版と日本語版を用意しています)
(英語版のみ)
Flash対応デバイスの一覧を見る。
その他のリソース
その他のモバイルデベロッパーリソースサイト*
すべての製品、テクノロジセンター
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
ようこそ、さん
お問い合わせ
ホームユーザ向け写真/ビデオ編集ツール
すべての業種・ソリューション ›すべての製品 ›アドビサポートに問い合わせる。
注文状況の確認
教職員および学生
アドビについて
投資家の皆様へ*
地域・社会への貢献*
お問い合わせ
個人またはホームオフィス
法人のお客さま
教育関係のお客様
おすすめ製品
すべてのソフトウェアを見る ›
購入後について
割引価格でコスト削減
ライセンスをご利用中のお客さま
その他の購入方法
販売店のご紹介
0 をベースにネットワークとの接続性や、デバイス独自の機能性ならびに各種標準規格のサポートなどが新たに追加されています。
関連リソースおよびダウンロード
各種プラットフォーム向けCDK
携帯電話用Flashコンテンツを開発するためのヒント、テクニック、インタフェイス要素、サンプル、チュートリアルが含まれた、Flash Liteオーサリングガイドをこちらからダウンロードできます。
(英語、日本語、韓国語、簡体中国語、および繁体中国語の各バージョンをご利用いただけます)
1 プロファイルが含まれます。
(英語、日本語、韓国語、簡体中国語、および繁体中国語の各バージョンをご利用いただけます)
1 コンテンツを開発するための最優良テクニック
1 の最新機能を利用して、魅力的な携帯電話用アプリケーションを開発
携帯デバイス向けにファイルサイズを最大 70% 削減しながら、複雑で魅力的なサウンドを作成しましょう
『MobTvG』: 携帯電話でのナビゲーションのためのベストプラクティス
より直感的なナビゲーションと動的に生成されるメニューによって、アプリケーションのユーザービリティを改善しましょう
505i シリーズの発売にあわせ制作されたコンテンツをビジネス面、技術的な観点を踏まえて解説
1 に対応するモバイル デバイス用の Flash アプリケーションを開発し始める際に有用な情報を紹介しています。1 開発にもたらすメリットなどを紹介します。
Flash+モバイルデバイス=デベロッパーのための新たなマーケット
携帯電話やPDAといった各種デバイスに向けたコンテンツ開発をいち早くスタート
JD フォーラム: なぜデバイス市場に注目する必要があるのですか
デバイス市場に注目する必要があるのは、この市場が急速に拡大しているからです。
1 対応モバイルサービスについて
Flash デバイスコンテンツおよびアプリケーションをクライアントに薦める。Flash の世界で起きている最新のニュースや動向をすべて仔細に把握していなくても、Flash のコンテンツを実行するデバイスの数が驚くべき速さで増えつづけているのは事実です。
その他のチュートリアルとサンプル
1 における音声の使用
携帯電話用アプリケーションで音声を使用する上での注意点などを紹介します。1 の新機能を紹介します。Flash対応デバイスの一覧を見る。
その他のリソース
その他のモバイルデベロッパーリソースサイト*
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
ようこそ、さん
お問い合わせ
ホームユーザ向け写真/ビデオ編集ツール
すべての業種・ソリューション ›すべての製品 ›アドビサポートに問い合わせる。
注文状況の確認
教職員および学生
アドビについて
投資家の皆様へ*
地域・社会への貢献*
お問い合わせ
個人またはホームオフィス
法人のお客さま
教育関係のお客様
おすすめ製品
すべてのソフトウェアを見る ›
購入後について
割引価格でコスト削減
ライセンスをご利用中のお客さま
その他の購入方法
販売店のご紹介
i モードは、NTT ドコモグループが提供する 2G / 3G のモバイルインターネットプラットフォームです。i モードは日本初の携帯電話用情報サービスとしてスタートし、現在日本最大の規模を誇ります。i モードを利用する携帯電話ユーザーは数多くのインターネットサイトに容易にアクセスできるうえに、電子メールやオンラインショッピング、オンラインバンキング、チケット予約、レストランガイドなどといった、さまざまなサービスを利用することもできます。また、英語圏にも i モード対応サイトが続々登場しており、これらのサイトでは各種情報やエンターテイメントへの即時的な アクセスや、モバイルを利用した便利な手続き処理などが提供されています。シームレスなオンライン体験の実現や、着画面 / 着信アニメーションなどの SWF コンテンツとのアプリケーション統合を可能にします。ページのトップに戻る。日本以外にも、既に多数のユーザーが GSM ネットワークを介して i モードサービスを利用しています。オーストラリア、ベルギー、フランス、ドイツ、イタリア、オランダ、スペイン、台湾、ギリシャなどでは既にサービスがスタートしています。i モードアライアンスパートナーはテクノロジーやノウハウを共有するとともに、サービス加入者に最大のメリットを享受する、豊富なコンテンツをサポートするためのビジネス関係を構築しています。ページのトップに戻る。
関連リソースおよびダウンロード
1の新機能及びiモードでの対応状況について
0にいくつかの機能が追加されています。1の機能 をご参照ください。1 の新機能のうち、iモードでは一部の機能をサポートしておりません。サポートしていない機能は以下となります。iモードブラウザでは非対応です。iモードでは、本機能と同様の処理をメタデータを利用して実現します。一部機種のiモードブラウザでは非対応です。0と同じ動作となります。1 コンテンツをレビュー / パブリッシュ / テストするためには、下記のサイトよりアップデータをインストールする必要があります。1が追加されます。
1コンテンツを作成するための資料
Flash デザイナー / デベロッパー / コンテンツ提供者が、Adobe Flash CS4でNTTドコモ携帯端末向けのメタデータを使用したコンテンツを作成する場合に必要な、メタデータ編集方法、注意点などが記載された資料をご用意致しました。0コンテンツを開発するためのヒント、テクニック、インタフェイス要素、サンプルが同梱されたコンテンツデベロップメントキット(CDK)をこちらからダウンロードできます。また、このCDKにはNTT DoCoMo携帯端末向けに、さまざまな機能を実装するために必要となるメタデータパネルが含まれています。既存または最新の携帯電話用 Flash Lite コンテンツを開発 / パブリッシュするためのサンプルを、こちらからダウンロードしてください。
(英語版、ドイツ語版、フランス語版、イタリア語版、スペイン語版、ギリシャ語版、オランダ語版、中国語 (繁体) 版の各言語版を用意しています)
1 をダウンロード
(英語版と日本語版を用意しています)
0 コンテンツをレビュー / パブリッシュ / テストするためには、下記のアップデータをインストールする必要があります。ページのトップに戻る。
日本における i モードの普及状況
i モードは世界最大のワイヤレスデータサービスです。したがって、コンテンツ制作者に対して大規模なビジネス市場を提供します。技術的な情報については、NTTドコモウェブサイトもあわせてご覧ください。ページのトップに戻る。Flash対応デバイスの一覧を見る。
その他のリソース
その他のモバイルデベロッパーリソースサイト*
すべての製品、テクノロジセンター
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
ようこそ、さん
お問い合わせ
ホームユーザ向け写真/ビデオ編集ツール
すべての業種・ソリューション ›すべての製品 ›アドビサポートに問い合わせる。
注文状況の確認
教職員および学生
アドビについて
投資家の皆様へ*
地域・社会への貢献*
お問い合わせ
個人またはホームオフィス
法人のお客さま
教育関係のお客様
おすすめ製品
すべてのソフトウェアを見る ›
購入後について
割引価格でコスト削減
ライセンスをご利用中のお客さま
その他の購入方法
販売店のご紹介
swfファイルの容量を軽くするためのコツを紹介しましょう
最終回となる今回は実際に手を動かしてみましょう
テーマは、気楽に作れる「待ち受け時計」にしたいと思います。第2回目では、「待ち受け時計を作る」をテーマに解説する予定でしが、前回の反響が大きかったため急遽予定を変更して、仕様面に関してもう少し解説しておきたいと思います。本連載では、日本での携帯Flashコンテンツ開発について解説していきます。第1回目は、ざっくりとしたFlash Lite制作ガイドラインを記していきたいと思います。
0での外部XML駆動型のフォトギャラリーの構築
Flash Liteによるデータ管理方法、ガベージコレクションの実行方法、デバイスメモリの使用方法を理解して、効率よくモバイルコンテンツを作成します。
モバイルサイトでも CS3 情報配信中
jp)でも配信しております。詳しくは左側のカラーコードをお持ちの携帯端末で読み取ってアクセスしてください。Adobe® Device Central CS3モバイルコンテンツの制作者や開発者など、携帯電話をはじめとするモバイル機器向けコンテンツの制作現場に、高い効率と生産性、それに革新的で魅力的なコンテンツ制作をもたらします。
定期的に更新されるデバイスプロファイルライブラリ、そして他のAdobe Creative Suite® 3コンポーネントとのインテリジェントな連携により、モバイルオーサリングのワークフローをスリム化
新しいCDKを利用して開発作業を今すぐスタート
0対応モバイル&デバイス向けに軽量かつ迅速なFlashコンテンツを制作するためのテクニックやヒントがまとめられています。画面を横切るメールにキャラクターを飛ばして乗せる(添付する)ゲームを作ります。
既存のJ2MEゲームをFlash Liteプラットフォームに移植する際のベストプラクティスやテクニック、注意点などを紹介
今日のモバイルユーザを対象に、魅力的なコンテンツをデザインするうえで重要なガイドラインを紹介
クイックスタートガイドの一覧を見る。
既存のモバイルデベロッパー
関連リソースを参照してFlash Liteの開発スキルをすばやくマスター
クイックスタートガイドの一覧を見る。
ワイヤレスネットワーク経由でダウンロードできる、Flash Liteコンテンツの作成方法を紹介
1コンテンツから素早く複数のバージョンを作成
コンテンツをさまざまなデバイスに対応させるために必要となる、調整事項を紹介
クイックスタートガイドの一覧を見る。
アドビモバイル&デバイスコミュニティの他のブロッガ*
最新の対象デバイス
定期的にアップデートを実施することにより、Adobe® Flash® LiteTMを搭載した最新のモバイルデバイスのデバイスプロファイルを入手できます。モバイルを手掛けるアプリケーションデベロッパーやデザイナーが、リッチで魅力的なコンテンツ・アプリケーションだけでなく、デバイスプラットフォーム間共通のカスタムユーザインタフェースなどを制作することを可能にします。
スタートガイド(Flash デベロッパー以外の方向け)
NTTドコモ端末用のCDKをダウンロードして今すぐ開発作業をスタート
他のデベロッパーの意見を参考にして開発時の疑問を解決
KDDI端末用のCDKをダウンロードして今すぐ開発作業をスタート
他のデベロッパーの意見を参考にして開発時の疑問を解決
関連リソースを参照してFlash Liteの開発スキルをすばやくマスター
他のデベロッパーの意見を参考にして開発時の疑問を解決
ポケットPCとGPS(全地球測位システム)テクノロジを利用して、現在の所在地に特化した情報を表示するアプリケーションの作成方法を紹介
「散発的な接続」デバイス向けのアプリケーション制作*
接続性が途切れるような場合でも、常にユーザが入力したデータなどを維持することは可能です。
これを、常にオンラインへの接続がないデバイスで実現するためのクッキー使用法を紹介
Flashデベロッパーのためのスタートガイド
NTTドコモ端末用のCDKをダウンロードして今すぐ開発作業をスタート
他のデベロッパーの意見を参考にして開発時の疑問を解決
KDDI端末用のCDKをダウンロードして今すぐ開発作業をスタート
他のデベロッパーの意見を参考にして開発時の疑問を解決
関連リソースを参照してFlash Liteの開発スキルをすばやくマスター
1コンテンツから素早く複数のバージョンを作成
コンテンツをさまざまなデバイスに対応させるために必要となる、調整事項を紹介
他のデベロッパーの意見を参考にして開発時の疑問を解決
ポケットPCとGPS(全地球測位システム)テクノロジを利用して、現在の所在地に特化した情報を表示するアプリケーションの作成方法を紹介
「散発的な接続」デバイス向けのアプリケーション制作*
接続性が途切れるような場合でも、常にユーザが入力したデータなどを維持することは可能です。
これを、常にオンラインへの接続がないデバイスで実現するためのクッキー使用法を紹介
モバイル&デバイスチーム提供のものからコミュニティ提供のものに至るまで、これらのサンプルには最新コンテンツの制作方法や、既存コンテンツをFlash Player、Flash Lite対応モバイルデバイスに移植する方法などが紹介されています。ここで紹介するアプリケーションの大半はコードが公開されています。コンテンツ上で右クリックしてメニューから「View source」を選択すれば、コードを確認できるものがあります。また、以下のリンクからコミュニティメンバのサイトにアクセスして、サンプルの詳細を確認することも可能です。
永続的なデータ:ユーザの環境設定とゲームの得点の保存*
Flash Liteの共有オブジェクトを使用すれば、ゲームセッションごとにユーザ情報が失われるようなことを防止できます。
ポケットPCとGPS(全地球測位システム)テクノロジを利用して、現在の所在地に特化した情報を表示するアプリケーションの作成方法を紹介
「散発的な接続」デバイス向けのアプリケーション制作*
接続性が途切れるような場合でも、常にユーザが入力したデータなどを維持することは可能です。
これを、常にオンラインへの接続がないデバイスで実現するためのクッキー使用法を紹介
コミュニティから寄せられたサンプル
近日公開予定です。オーサリングツールのアップデートやデバイスプロファイル、コンテンツ開発キット(CDK)、さまざまなプラットフォーム用のPlayer、Adobe Labsより公開の関連ソフトウェアなどをダウンロードして、一歩先行くデザイン・開発作業をお楽しみください。
以前公開のデバイスプロファイル
オーサリングツールのアップデート
60以降*とともに提供されています。
地元および世界中のゲストが参加する講演やプレゼンテーション、デモなどを開催
ブリスベン・トゥウォングにて月例会合を実施(通常の場合、当該月最後の月曜日)
auまでメールでお問い合わせください。
世界で初めてモバイルデバイス向けFlash Liteに特化したユーザグループ
このユーザグループには、世界中から約190名ものメンバーが参加しています。
地元および世界中のゲストが参加する講演やプレゼンテーション、デモなどを開催
月に1度会合を開き、情報交換とディスカッションのためのプライベートメーリングリストを運営
comまでメールでお問い合わせください。
モバイルデバイス向けのアドビテクノロジに注目
brまでメールでお問い合わせください。インドをベースに活動するこのグループでは、世界中のデベロッパー・プロフェッショナルが手を取り合って、モバイルFlashテクノロジを盛り上げられるようにしたいと考えています。このグループではFlash Liteを中心にグループディスカッションが展開されていますが、他のモバイルテクノロジに関するディスカッションも受け付けています。月に1度の定例会合は、会場を用意して開催するか、ゲストスピーカを招待してリモート上で開催しています。comまでメールでお問い合わせください。モバイルのすべての側面を対象としつつ、Flash LiteからJ2ME、C++に至るまでのさまざまなモバイルテクノロジに注目しています。経験レベル、年齢、国籍が異なるものの、モバイルに対して同じ情熱を共有する、20名の創設スタッフメンバが所属しています。
情報交換やディスカッションのためのプライベートメーリングリストを運営し、不定期に会合を実施
itまでメールでお問い合わせください。グループのサイトでは、モバイル開発に重点を置いたチュートリアル、サンプルコード、ソフトウェアレビュー、モバイルデバイスのテストデータ、オンライン会議、ライブカンファレンス、最新ニュースなどを掲載しています。comまでメールでお問い合わせください。
アドビモバイル&デバイスコミュニティのメンバによる最新のブログ投稿を読む*
モバイル&デバイスのコミュニティディスカションフォーラムにアクセス*
お住まいの地域のイベント・セミナー情報を検索
現在、この地域にて予定されているイベントはありません。後日、このページをご確認ください。現在、この地域にて予定されているイベントはありません。後日、このページをご確認ください。現在、この地域にて予定されているイベントはありません。後日、このページをご確認ください。現在、この地域にて予定されているイベントはありません。後日、このページをご確認ください。
その他のイベント&セミナー
録音・録画済みのイベント&セミナー
0へのコンテンツの移植*
1での動的データの使用*
現在、この地域にて予定されているイベントはありません。後日、このページをご確認ください。新しいプログラムは、開発者やデザイナーの方を対象とし、セミナー、トレーニング、製品関連情報を提供いたします。会員にはグローバルなサービス、リソース、トレーニング、ツールを提供し、魅力的なコンテンツやアプリケーションをアドビのモバイルプラットフォーム用に設計、開発できるよう支援いたします。
デベロッパープログラムの特典
モバイルデベロッパーのためのテクニカルサポート
ベータソフトウェアへの初期使用
オンラインディスカッションフォーラムへの参加
どの携帯電話がどのFlash Litのバージョンをサポートしているかが分かるデバイスプロファイルの提供
サンプルやデモの提供
テクニカルな記事の提供
4半期ごとのニュースレターの提供
ユーザグループやコミュニティブロガーの紹介
イベント、ニュース、オンラインセミナーなどの情報提供
定期的にアップデートを実施することにより、Adobe® Flash® LiteTMを搭載した最新のモバイルデバイスのデバイスプロファイルを入手できます。
最新のデバイスプロファイルをダウンロード
次のステップ
Flash対応デバイスの一覧を見る。
その他のリソース
他のモバイル&デバイス関連サイト*
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
ようこそ、さん
お問い合わせ
ホームユーザ向け写真/ビデオ編集ツール
すべての業種・ソリューション ›すべての製品 ›アドビサポートに問い合わせる。
注文状況の確認
教職員および学生
アドビについて
投資家の皆様へ*
地域・社会への貢献*
お問い合わせ
個人またはホームオフィス
法人のお客さま
教育関係のお客様
おすすめ製品
すべてのソフトウェアを見る ›
購入後について
割引価格でコスト削減
ライセンスをご利用中のお客さま
その他の購入方法
販売店のご紹介
swfファイルの容量を軽くするためのコツを紹介しましょう
最終回となる今回は実際に手を動かしてみましょう
テーマは、気楽に作れる「待ち受け時計」にしたいと思います。第2回目では、「待ち受け時計を作る」をテーマに解説する予定でしが、前回の反響が大きかったため急遽予定を変更して、仕様面に関してもう少し解説しておきたいと思います。本連載では、日本での携帯Flashコンテンツ開発について解説していきます。第1回目は、ざっくりとしたFlash Lite制作ガイドラインを記していきたいと思います。
0での外部XML駆動型のフォトギャラリーの構築
Flash Liteによるデータ管理方法、ガベージコレクションの実行方法、デバイスメモリの使用方法を理解して、効率よくモバイルコンテンツを作成します。
モバイルサイトでも CS3 情報配信中
jp)でも配信しております。詳しくは左側のカラーコードをお持ちの携帯端末で読み取ってアクセスしてください。Adobe® Device Central CS3モバイルコンテンツの制作者や開発者など、携帯電話をはじめとするモバイル機器向けコンテンツの制作現場に、高い効率と生産性、それに革新的で魅力的なコンテンツ制作をもたらします。
定期的に更新されるデバイスプロファイルライブラリ、そして他のAdobe Creative Suite® 3コンポーネントとのインテリジェントな連携により、モバイルオーサリングのワークフローをスリム化
新しいCDKを利用して開発作業を今すぐスタート
0対応モバイル&デバイス向けに軽量かつ迅速なFlashコンテンツを制作するためのテクニックやヒントがまとめられています。画面を横切るメールにキャラクターを飛ばして乗せる(添付する)ゲームを作ります。
既存のJ2MEゲームをFlash Liteプラットフォームに移植する際のベストプラクティスやテクニック、注意点などを紹介
今日のモバイルユーザを対象に、魅力的なコンテンツをデザインするうえで重要なガイドラインを紹介
クイックスタートガイドの一覧を見る。
既存のモバイルデベロッパー
関連リソースを参照してFlash Liteの開発スキルをすばやくマスター
クイックスタートガイドの一覧を見る。
ワイヤレスネットワーク経由でダウンロードできる、Flash Liteコンテンツの作成方法を紹介
1コンテンツから素早く複数のバージョンを作成
コンテンツをさまざまなデバイスに対応させるために必要となる、調整事項を紹介
クイックスタートガイドの一覧を見る。
アドビモバイル&デバイスコミュニティの他のブロッガ*
最新の対象デバイス
定期的にアップデートを実施することにより、Adobe® Flash® LiteTMを搭載した最新のモバイルデバイスのデバイスプロファイルを入手できます。モバイルを手掛けるアプリケーションデベロッパーやデザイナーが、リッチで魅力的なコンテンツ・アプリケーションだけでなく、デバイスプラットフォーム間共通のカスタムユーザインタフェースなどを制作することを可能にします。
スタートガイド(Flash デベロッパー以外の方向け)
NTTドコモ端末用のCDKをダウンロードして今すぐ開発作業をスタート
他のデベロッパーの意見を参考にして開発時の疑問を解決
KDDI端末用のCDKをダウンロードして今すぐ開発作業をスタート
他のデベロッパーの意見を参考にして開発時の疑問を解決
関連リソースを参照してFlash Liteの開発スキルをすばやくマスター
他のデベロッパーの意見を参考にして開発時の疑問を解決
ポケットPCとGPS(全地球測位システム)テクノロジを利用して、現在の所在地に特化した情報を表示するアプリケーションの作成方法を紹介
「散発的な接続」デバイス向けのアプリケーション制作*
接続性が途切れるような場合でも、常にユーザが入力したデータなどを維持することは可能です。
これを、常にオンラインへの接続がないデバイスで実現するためのクッキー使用法を紹介
Flashデベロッパーのためのスタートガイド
NTTドコモ端末用のCDKをダウンロードして今すぐ開発作業をスタート
他のデベロッパーの意見を参考にして開発時の疑問を解決
KDDI端末用のCDKをダウンロードして今すぐ開発作業をスタート
他のデベロッパーの意見を参考にして開発時の疑問を解決
関連リソースを参照してFlash Liteの開発スキルをすばやくマスター
1コンテンツから素早く複数のバージョンを作成
コンテンツをさまざまなデバイスに対応させるために必要となる、調整事項を紹介
他のデベロッパーの意見を参考にして開発時の疑問を解決
ポケットPCとGPS(全地球測位システム)テクノロジを利用して、現在の所在地に特化した情報を表示するアプリケーションの作成方法を紹介
「散発的な接続」デバイス向けのアプリケーション制作*
接続性が途切れるような場合でも、常にユーザが入力したデータなどを維持することは可能です。
これを、常にオンラインへの接続がないデバイスで実現するためのクッキー使用法を紹介
モバイル&デバイスチーム提供のものからコミュニティ提供のものに至るまで、これらのサンプルには最新コンテンツの制作方法や、既存コンテンツをFlash Player、Flash Lite対応モバイルデバイスに移植する方法などが紹介されています。ここで紹介するアプリケーションの大半はコードが公開されています。コンテンツ上で右クリックしてメニューから「View source」を選択すれば、コードを確認できるものがあります。また、以下のリンクからコミュニティメンバのサイトにアクセスして、サンプルの詳細を確認することも可能です。
永続的なデータ:ユーザの環境設定とゲームの得点の保存*
Flash Liteの共有オブジェクトを使用すれば、ゲームセッションごとにユーザ情報が失われるようなことを防止できます。
ポケットPCとGPS(全地球測位システム)テクノロジを利用して、現在の所在地に特化した情報を表示するアプリケーションの作成方法を紹介
「散発的な接続」デバイス向けのアプリケーション制作*
接続性が途切れるような場合でも、常にユーザが入力したデータなどを維持することは可能です。
これを、常にオンラインへの接続がないデバイスで実現するためのクッキー使用法を紹介
コミュニティから寄せられたサンプル
近日公開予定です。オーサリングツールのアップデートやデバイスプロファイル、コンテンツ開発キット(CDK)、さまざまなプラットフォーム用のPlayer、Adobe Labsより公開の関連ソフトウェアなどをダウンロードして、一歩先行くデザイン・開発作業をお楽しみください。
以前公開のデバイスプロファイル
オーサリングツールのアップデート
60以降*とともに提供されています。
地元および世界中のゲストが参加する講演やプレゼンテーション、デモなどを開催
ブリスベン・トゥウォングにて月例会合を実施(通常の場合、当該月最後の月曜日)
auまでメールでお問い合わせください。
世界で初めてモバイルデバイス向けFlash Liteに特化したユーザグループ
このユーザグループには、世界中から約190名ものメンバーが参加しています。
地元および世界中のゲストが参加する講演やプレゼンテーション、デモなどを開催
月に1度会合を開き、情報交換とディスカッションのためのプライベートメーリングリストを運営
comまでメールでお問い合わせください。
モバイルデバイス向けのアドビテクノロジに注目
brまでメールでお問い合わせください。インドをベースに活動するこのグループでは、世界中のデベロッパー・プロフェッショナルが手を取り合って、モバイルFlashテクノロジを盛り上げられるようにしたいと考えています。このグループではFlash Liteを中心にグループディスカッションが展開されていますが、他のモバイルテクノロジに関するディスカッションも受け付けています。月に1度の定例会合は、会場を用意して開催するか、ゲストスピーカを招待してリモート上で開催しています。comまでメールでお問い合わせください。モバイルのすべての側面を対象としつつ、Flash LiteからJ2ME、C++に至るまでのさまざまなモバイルテクノロジに注目しています。経験レベル、年齢、国籍が異なるものの、モバイルに対して同じ情熱を共有する、20名の創設スタッフメンバが所属しています。
情報交換やディスカッションのためのプライベートメーリングリストを運営し、不定期に会合を実施
itまでメールでお問い合わせください。グループのサイトでは、モバイル開発に重点を置いたチュートリアル、サンプルコード、ソフトウェアレビュー、モバイルデバイスのテストデータ、オンライン会議、ライブカンファレンス、最新ニュースなどを掲載しています。comまでメールでお問い合わせください。
アドビモバイル&デバイスコミュニティのメンバによる最新のブログ投稿を読む*
モバイル&デバイスのコミュニティディスカションフォーラムにアクセス*
お住まいの地域のイベント・セミナー情報を検索
現在、この地域にて予定されているイベントはありません。後日、このページをご確認ください。現在、この地域にて予定されているイベントはありません。後日、このページをご確認ください。現在、この地域にて予定されているイベントはありません。後日、このページをご確認ください。現在、この地域にて予定されているイベントはありません。後日、このページをご確認ください。
その他のイベント&セミナー
録音・録画済みのイベント&セミナー
0へのコンテンツの移植*
1での動的データの使用*
現在、この地域にて予定されているイベントはありません。後日、このページをご確認ください。新しいプログラムは、開発者やデザイナーの方を対象とし、セミナー、トレーニング、製品関連情報を提供いたします。会員にはグローバルなサービス、リソース、トレーニング、ツールを提供し、魅力的なコンテンツやアプリケーションをアドビのモバイルプラットフォーム用に設計、開発できるよう支援いたします。
デベロッパープログラムの特典
モバイルデベロッパーのためのテクニカルサポート
ベータソフトウェアへの初期使用
オンラインディスカッションフォーラムへの参加
どの携帯電話がどのFlash Litのバージョンをサポートしているかが分かるデバイスプロファイルの提供
サンプルやデモの提供
テクニカルな記事の提供
4半期ごとのニュースレターの提供
ユーザグループやコミュニティブロガーの紹介
イベント、ニュース、オンラインセミナーなどの情報提供
定期的にアップデートを実施することにより、Adobe® Flash® LiteTMを搭載した最新のモバイルデバイスのデバイスプロファイルを入手できます。
最新のデバイスプロファイルをダウンロード
次のステップ
Flash対応デバイスの一覧を見る。
その他のリソース
他のモバイル&デバイス関連サイト*
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
これは、Director が常にコンテンツ開発者のニーズに応えるよう進化を遂げてきたからだと言えます。
この記事に必要なもの
このチュートリアルをフォローするには、つぎのソフトウェアをインストールする必要があります。
トライアル版をダウンロード
オンラインストアより購入
1997 年にリリースされた DVD は、消費者向けエレクトロニクス史上最もスピーディーに普及しているフォーマットです。DVD はリリースからわずか 6 年の間に VHS を抜き去り、消費者ビデオフォーマットのスタンダードとしての認識を確立するまでに成長しました。また、DVD の急速な普及は、同時にローコスト DVD コンテンツ制作ツールの市場普及を促すことになりました。DVD の人気は、単に DVD 普及の黎明期を支えたハリウッド映画の DVD 化だけにはとどまりません。例えば、教育関係者や企業系のプレゼンテーター、キオスク端末に向けた開発者などといたユーザー層も、大規模市場に向けたインタラクティブコンテンツ配布メディアとして DVD に注目しています。
埋め込み、制御、再生をすべてサポート
例えば、チャプター間の移動や字幕の選択、他にもカメラアングルや音声ストリームの選択などといった DVD 再生時のほとんどのナビゲーション操作が、Director MX 2004 でのオーサリング時ならびに再生時にサポートされています。また、Director の強力なイベントハンドラ機能は、DVD 再生中に呼び出された各種イベントに対してさまざまな応答や処理を行えます。具体的な使用例としては、ユーザーが DVD 再生中に字幕表示をフランス語へ切り替えると、このイベントに反応してプロジェクト内のすべての要素がフランス語表示に切り替わるといった処理が考えられます。また、Director 内に DVD ムービーを埋め込めるということは、今までにないまったく新しい形の DVD 再生方法が提供できるということも意味します。従来のソフトウェア DVD プレイヤーが DVD を単に始めから最後まで再生するのとは違い、Director MX 2004 を使用すればあらゆる事柄に特化した視聴体験をカスタム制作できます。例えば、一つのムービーを複数のカスタムシーンに区切り、視聴者が興味を持ちそうな部分だけをバーチュアルプレイリストでつなげておくといったことができます。タッチダウンシーン以外の部分は、すべて飛ばせるというわけです。セクション切りがなされた DVD 再生は教育やトレーニング現場でも活躍します。教育やトレーニング関係者の間では、膨大な教材の保存に DVD-Video フォーマットを利用するケースが増加しています。Director MX 2004 に新たに搭載された DVD 機能を利用すれば、このような場面でも必要なコンテンツだけを素早くかつ簡単に見つけ出すことができます。仮に自動車メーカーが整備士向けに、数時間分のコンテンツを含んだ DVD トレーニング教材を作成したとします。このコンテンツのオーサリングに Director MX 2004 を利用すれば、オーサリング時に検索フィールドを作成しておくことができるので、エンドユーザーは必要な情報だけに素早くアクセスできます。仮にバッテリーの交換方法が知りたければ、「バッテリーの交換方法」と入力するだけで、その方法を説明する部分のリンクが表示されるようにすることができます。1999 年以降、ハリウッド配給スタジオの多くは、Web 制御型インタラクディブ DVD コンテンツを多数制作してきました。通常このようなコンテンツは、DVD-Video 再生画面を HTML が取り巻くように構成され、エンドユーザーが Web ブラウザから直接特典コンテンツなどへアクセスできるようになっています。1999年 に Warner Brothers からリリースされた映画「マトリックス」の DVD の場合、映画の台本部分に表示されているリンクをクリックすると該当シーンにジャンプする機能が収録されていました。DVD 再生をインターネット上で制御するインタラクティビティには、WebDVD という名称が使われています。今までは、この WebDVD コンテンツを作成するために高価かつ難易度の高いツールを使用しなければなりませんでした。また、これらのツールには、使用できるブラウザに制限があることや、Macintosh 上で使用することができないという欠点がありました。例えば、遠隔教育用アプリケーションの場合、スライドやその他 Web ベースのコンテンツを HTML フレーム内に表示し、それらに合わせてインストラクターがコンテンツを解説する部分の DVD を再生するといった使用方法が考えられます。また、Web ブラウザ内で再生されている DVD ムービーの特定シーンから、自動的に周りのフレームに所定の URL を呼び出すようにすることも可能です。さらに、Web と連動するインタラクティビティを用意しておけば、コンテンツ開発者は自由に Web 上のコンテンツを更新して、常に最新のユーザー体験を提供することができます。例えば、DVD ムービー内の特定の要素を検索するためのテキストフィールドを含む Flash ムービーをインターフェイス内に用意しておけば、エンドユーザーが好みの俳優名を入力するだけで、その俳優が初めて登場するシーンにジャンプすることや、[次へ] ボタンをクリックするだけで次の登場シーンにジャンプするといったインタラクティビティを作成できます。DVD イベントマネージャーを利用すれば、セグメント化された DVD キャストメンバーを容易に作成でき、特に DVD ムービーの一部だけを再生するようにする場合や、特定のシーンだけを再生するカスタムプレイリストを作成する際に便利です。グラフィカルなユーザーインターフェイスを採用する DVD イベントマネージャーを利用すれば、DVD キャストメンバーの表示 / 非表示を切り替えるためのムービー内の「イン」ポイント / 「アウト」ポイントなどが簡単に選択できます。また、DVD イベントマネージャーを利用すれば、DVD キャストメンバーごとのデフォルト音量やムービーサイズなどといった再生時プロパティも素早く設定できます。DVD イベントマネージャーという名前が示すように、DVD キャストメンバーを再生する際に発生するイベントも、DVD イベントマネージャーを利用すれば簡単に管理できます。イベントの使用例としては、ムービー内の特定のシーンが再生されると URL が呼び出され、関連コンテンツが表示されるといった使用方法が考えられます。DVD イベントマネージャーを利用すれば、実際に DVD ムービーを再生しながら、わずかワンステップでこういったイベントのトリガーを設置できます。また、DVD イベントマネージャーは、DVD ムービーの特定シーンが再生されると他のスプライトにメッセージが送信されるような、より高度なイベントの作成時にも使用できます。html * からダウンロードして入手することも可能です。また、DVD イベントマネージャーはオープンソースのプロジェクトですので、ソースコードを自由に編集して使用できます。なお、DVD イベントマネージャーのソースコードは、この記事の最初にある参考ファイルのリンクから入手できます。
無限の可能性
著者について
Tony Knight: 過去 15 年間マルチメディア業界に従事し、ソフトウェアエンジニアリングからプロダクトマネジメントまでを幅広く手掛ける。新製品の発表や DVD 制作に携わっていない時は、訪仏し余暇を婚約者と過ごす。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
しかし、このことが具体的にどのような可能性をもたらすかを思案しているユーザーの方々もおられるかと思います。
この記事に必要なもの
このチュートリアルをフォローするには、つぎのソフトウェアをインストールする必要があります。
トライアル版をダウンロード
オンラインストアより購入
ある時、私よりはるかに若い子供に「物事の原理さえ分かれば、自ずと手段は明らかになる」と、諭されたことがあります。この考えに基づいてこの記事では、まずなぜ Director プロジェクト内で DVD ムービーが利用できるのがエキサイティングなのかに触れてから、実際に DVD-Video を挿入する方法を紹介します。今まで Director は、新しいビデオ規格が登場するたびに、これらをサポートする機能を追加し続けてきました。これらのビデオフォーマットサポートに新たに DVD-Video が加わるということは、最も普及しているビデオフォーマットと最強のマルチディアオーサリングツールがタッグを組むということを意味します。しかし、それぞれのテクノロジーの特徴を詳しく検証すると 2 つのテクノロジーを組み合わせて使用するメリットが明らかになってきます。
まず、DVD-Video がハードウェア再生機とソフトウェアプレイヤーの両方に対応している点に注目してみましょう
DVD ムービーは、既に確立された DVD-Video 規格を利用することで、たった $29 の消費者用 DVD 再生機器からハイエンド多機能レコーダーに至までの幅広いハードウェアプレイヤーと、PC を利用したソフトウェアプレイヤー上において一貫して再生できます。この汎用性が興味深いところですが、PC 上の DVD プレイヤーソフトウェアは、単体の DVD ハードウェア同様の再生機能を搭載しているものの、必ずしも同じ取り決めに縛られているというわけではありません。例えば、ソフトウェア DVD プレイヤーは、ハードウェアのリモコンだけでは操作できないような複雑なプログラミングレベルのナビゲーション操作を制御できます。仮にムービー内の特定の場所に移動したい場合、ソフトウェアプレイヤーなら単にその場所の時間コードを打ち込むだけで素早く移動できます。また、仮にムービー内の特定のシーンだけを再生したい場合、ハードウェアのプレイヤーなら、その特定のシーンの開始部分を探し出し、シーン再生後には再生機器の停止ボタンを押さなければなりません。
ここまでの説明で、何を言おうとしているかがお分かりの方もおられることでしょう
ソフトウェアの DVD プレイヤーを利用すれば、ポップコーンを片手にムービー内の好きなシーンだけを一気に視聴するといったことができるのです。このようなソフトウェアプレイヤー特有の再生方法が可能なのは、ソフトウェアプレイヤーの多くが Director MX 2004 のような外部ソフトウェアからのプログラミング制御性を可能にするアプリケーションフレームワークを採用しているからです。3) 用のものでさえあれば、外部アプリケーションからの制御機能をサポートしています。
一見、機能性が重複しているように見えていた Director と DVD-Video も、ここまで説明すると新たな可能性が想像できるようになってきたのではないでしょうか
つまり、単なる DVD ディスクといえども、PC を利用すれば通常のハードウェア再生機器では考えられなかったような DVD 視聴方法が提供できるのです。
では実際にどのような視聴方法が考えられるかを見ていきましょう
仮に自分の Web サイトへのリンクが備わった DVD ムービーを配布したとします。
これだけではあまり良さが伝わらないかもしれませんが、仮にムービーの再生位置によってさまざまなイベントが発生するようになっていたらどうでしょう
特定のスポーツカーが登場する映画を映画館で見ていた場合、後で調べてみなければその車がどのメーカーの車であるかといったことは分かりません。Web と連動する DVD 再生の場合、その車が登場するシーンに合わせて別フレームに詳細情報を含んだ URL を表示させるといったことができます。このような方法は、他にもムービーの内容に応じて、俳優が出演した他の映画の一覧や、シーンの撮影場所、映画の詳細情報といったコンテンツを表示する場面にも応用できます。この記事の初めの方で一連のシーンをバーチュアルプレイリストにまとめるという視聴方法に触れましたが、こういった機能性はごく少量の Director コードで作成でき、エンドユーザーはわずかワンクリックで一連のシーンだけを視聴できるようになります。ハリウッド系映画配給会社の多くは、これまでにもこのような機能性が盛り込まれた DVD をリリースしていたものの、制作時に特殊なソフトウェアが必要であることや、Windows での視聴にしか対応できないといった問題がありました。しかし、Director MX 2004 を利用すれば、このような機能性をクロスプラットフォームに、しかも制作コストを抑えつつ提供できます。QuickTime の場合、ビデオコンテンツを含む単一のファイルを参照するだけでしたが、DVD のキャストメンバーを作成するには固定メディア上に配置された複数のファイルを参照することになります。この違いは、DVD ムービーを制御するスクリプトを作成する際に重要になるので、ここで簡単に DVD ビデオ規格について触れておくことにします。DVD ムービーは、すべて video_ts という名前が付いたタイトルセットフォルダを利用して、アセットファイルを管理しています。なお、このタイトルセットは、最大 99 個までの「タイトル」を保持できます。タイトルとは、MPEG2 ビデオの固まりに MPEG 音声、あるいは Dolby AC3 音声が多重化されたもののことであり、各タイトルは特定のフレームにアクセスするためのチャプターマーカーを最大 99 個まで保持できます。また、DVD ムービーは各タイトルごとに最大 9 つのカメラアングル、32 個の字幕トラック、8 個の音声トラックを保持できます。単に DVD ディスクといえどもディスクごとにオーサリング方法が異なるので、DVD ビデオがどのように構成されているかを知っておくことは重要です。一方、教育用のような DVD ディスクの場合、複数のタイトルにコンテンツが収録されていることがあります。
DVD キャストメンバーを作成する際にまず気付くのは、今までに使用していたデジタルビデオのキャストメンバー作成と勝手が違うことでしょう
このディレクトリは通常 DVD-ROM ドライブのルートレベルに存在しますが、ハードディスクの任意の位置を参照するようにカスタマイズすることも可能です。Director がどのようにビデオを再生するかという点も DVD キャストメンバーと従来のデジタルビデオキャストメンバーとでは異なります。唯一の問題点は、ごく少数のエンドユーザーが DirectShow との互換性がないプレイヤーを利用しているということで、これらのユーザーは新しいプレイヤーを購入しなければなりません。ただし、幸いにもこのようなユーザーはごく少数に限られています。ソフトウェア DVD プレイヤーが無償で配布されないのは、このことが理由にあります。3 (Panther) からこのフレームワークの詳細が公開されるようになりました。ただし、DVD 再生機能を搭載したマシンは長年 Apple からリリースされているので、DVD 再生時に問題が生じるユーザーは幸いにもごく一部に限られています。ここまで記事を読み進むと、Director 内で DVD-Video が再生できることが新たな可能性を秘めていることが明らかになってきたと思います。プロジェクトを制作する前に、もう 1 つ DVD-Video について把握しなければならない重要な事柄があります。この制約は、著作権の侵害を防止するために制定されています。DVD ディスクを挿入すると同時にソフトウェア DVD プレイヤーが起動するような場合、このアプリケーションを終了しない限り、DVD 再生フレームワークを他のアプリケーションが制御することはできません。まず、ステージサイズを 720 x 560 ピクセルに設定した新規プロジェクトを作成します。一般的な DVD ビデオサイズの 720 x 480 に加えて、コントローラーを配置するためのスペースを確保しておきます。このサンプルでは、高さ 40 ピクセルに折りたたむことができる 80 ピクセルのコントローラーを配置します。基本的な DVD ムービーは、簡単にプロジェクト内に追加できます。早送り、巻き戻し、メニューへの移動などといったナビゲーション機能などは、ボタンや UI エレメントにスクリプトを追加して簡単に作成できますが、Director MX 2004 に搭載されている DVD コントローラー Flash コンポーネントを利用すればスクリプトを記述する必要さえありません。また、このコンポーネントは設定が簡単なので、わずか数分でプロジェクト内に配置できます。では、次の手順に従って、新規 DVD キャストメンバーを作成し、DVD コントローラーを追加してみてください。
新規 DVD キャストメンバーの作成
この際 DVD がドライブにない場合や、適切なソフトウェア DVD プレイヤーが見つからない場合は、エラーメッセージが表示されます。キャストメンバーに「DVD」という名前を付けてから、DVD エディタウィンドウを閉じます。キャストウィンドウに新しい DVD キャストメンバーが追加されました。次に、そのキャストメンバーをステージ上にドラッグ & ドロップします。
ステージ上に DVD コントローラーコンポーネントを追加
DVD コントローラーは、[ライブラリパレット] の中にあります。[ライブラリパレット] を開いて、[ライブラリリスト] ポップアップメニューから [コンポーネント] を選択します。
コントローラーコンポーネントのプロパティを設定
DVD コントローラーのスプライトが選択された状態で、[プロパティインスペクタ] の [スプライト] タブをクリックします。[スプライト] タブ内の幅設定を 720 にするとスプライト自体の幅が 720 ピクセルになりますが、DVD コントローラーの幅をスプライト幅に合わせるにはもう 1 ステップ必要です。これでコントローラーの幅とムービーの幅が同じになりました。このボックスにチェックを入れておくと、コントローラーの詳細機能が表示されるようになります。DVD コントローラーが DVD ムービーを制御できるようにするには、これらを関連づける必要があります。ステージ上の DVD コントローラーを選択したまま、[プロパティインスペクタ] の [Flash コンポーネント] タブをクリックします。この名前は、DVD コントローラーをステージ上にドラッグした際に使用したものと同じです。これで 2 つのスプライトが関連づけられ、DVD コントローラーと「DVD」スプライト間のイベントのやりとりができるようになりました。
プロジェクトの再生ボタンを押して DVD を再生し、コントローラーを試してみましょう
このプロジェクトを制作する際に利用した DVD にも寄りますが、カメラアングルや音声、字幕といった設定も DVD コントローラーのボタンを利用して変更できるはずです。一度再生を停止して、もう一度 [プロパティインスペクタ] の [Flash コンポーネント] タブに戻ります。このタブ内では、コントローラーのさまざまな詳細を指定できます。なお、コントローラーの早送り / 巻き戻しボタンは、クリックすると前後のチャプターへ移動し、ボタンを押し続けるとムービーを再生しながら早送り / 巻き戻しするようになっています。通常はデフォルト値の「1000」で問題ありませんが、必要に応じて時間差をカスタマイズすることも可能です。また、完成したプロジェクトは、あらゆる DVD の再生や制御にも利用できます。これまで Director がサポートしてきたファイル形式に DVD-Video が加わったことで新たな可能性が生まれたことがお分かりいただけたかと思います。また、今後、DVD 再生中のイベントに応答する方法や Flash アセットを利用して DVD ムービーを制御するような、より高度なインタラクティビティを紹介する記事を公開する予定です。
著者について
Tony Knight: 過去 15 年間マルチメディア業界に従事し、ソフトウェアエンジニアリングからプロダクトマネジメントまでを幅広く手掛ける。新製品の発表や DVD 制作に携わっていない時は、訪仏し余暇を婚約者と過ごす。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
Webページ制作の効率をUPするためのカスタマイズ
Dreamweaver自体の構成ファイルを編集することでカスタマイズする方法について、Webページ制作の効率を向上させることができるであろうカスタマイズを3例ご紹介します。
テンプレート機能を使ってみよう パート2:コピペで利用できる、複雑なテンプレート式のサンプル
パート2では、「テンプレートタグ」と「テンプレート式」の使い方を、5つの利用シーンを想定したサンプルをもとに解説します。
テンプレート機能を使ってみよう パート1:「編集可能領域」と「オプション領域」の使い方
本連載では、2回にわたりテンプレート機能の使い方を解説します。まずは、基本となる「編集可能領域」と「オプション領域」の使い方です。検索機能とXSLTを利用して「制作ページ一覧」を作成する。
Webページへのビデオの追加
このチュートリアルでは、ビデオをFLV形式でWebページにパブリッシュする方法について説明します。
CSSによる簡単なスタイル指定
多くの人にとって、CSSによるスタイル指定技法を学ぶことは、その後にCSSによる配置技法を試してみるためのきっかけとなります。Spry HTMLデータセットを使えば、あらゆる構造化されたHTMLからデータセットを作成できます。この記事では、メディアタイプと、それを利用してコンパクトな印刷用ページを作成する方法について説明します。
フル機能フォーム検証の実行
フォームはWebのあらゆるところに登場します。しかし、多くの場合、フォームには基本的な要素の1つが欠けています。それは検証です。フォーム検証は、Webのユーザと開発者の両方にとって非常に重要です。
クロスクライアントHTMLメールの作成
Dreamweaverコンテンツをバージョン管理システムで管理する方法を紹介します。この記事では、HTMLコンテンツとFlashコンテンツを統合する方法を紹介します。地図情報」のWebサービスと連携をします。
さらにリッチなインタフェースを作っていきましょう
~ Spryエフェクトと入力チェックを利用する~
第3回となるこのチュートリアルでは、第2回からのレイアウトの変更点として画面上部にアプリケーションのタイトルを配置し、その下に条件指定エリアとしてホテルの種類を選択するプルダウンリストと、検索を開始するための「SEARCH」ボタンを配置します。第2回となるこのチュートリアルでは、Spryフレームワークで動きのあるインターフェースを作成し、WebサービスとしてリクルートWebサービスの「じゃらんWebサービス」が提供するAPI情報(宿泊施設情報)を効果的に表示させます。普段Dreamweaverを使用しているデザイナーの方でも簡単にAIRアプリケーションを作ることができます。ここでは、Dreamweaverユーザーがはじめて作るAIRアプリケーションのファーストステップをご紹介します。ディレクトリからイメージを取得してXMLデータをオンザフライで生成することで、Dreamweaver CS3で動的なイメージギャラリーを作成します。
PHPでのイベント登録アプリケーションの作成
パート1:フロントエンドの構築
パート2:バックエンドの構築
Spryスライドパネルウィジェットの作成
コンテンツを表示するために垂直、水平または対角線上にスライドするウィジェットを使用してページを強化します。筆者が制作した、CSSのプロパティーを指定した順番に並び替える拡張機能「CSSプロパティーフォーマット」をご紹介します。Dreamweaver使いのための「生活に役立つ小ネタ集」と題して、コードのフォーマット、検索/置換、正規表現を解説します。もうテキストエディタには戻れない。いままで、他のテキストエディタなどで作業されていた方も、一度Dreamweaverのコードビューで作業していただき、その優位性を認識していただけたら幸いです。
1 によるテンプレートカスタマイズについて
1の特長とテンプレートのカスタマイズについてご紹介します。
ラクラクかんたん
Dreamweaver CS3の開発ソフトとしての機能を紹介し、プログラマでも十分活用できることをご紹介しましょう
ページ中に含まれる全角カナを半角カナへ、機種依存文字を通常の文字へと置き換える機能拡張を紹介します。
サッポロビールにおけるテンプレート活用事例
サッポロビール・コーポレートサイトのリニューアルにおいてDreamweaverテンプレートをどのような目的で、どのような形で使用しているかを解説します。
デザインビューの活用
デザインビューの隠れた機能をここで紹介していきながら、デザインビューを使った最新の機能をご紹介していこうと思います。
CSSでのフォント指定について
Spryテキストフィールド検査ウィジェットを紹介するとともに、実際にどのようにカラメルで使用しているかを解説します。
Spryを使った実験:ハイライト機能付き元素周期表
この記事では、Spry周期表で使用しているコードの考え方や手法を段階に分けて解説しています。
複数のレイアウトを持つWebサイトの管理
Dreamweaver CS3に付属の様々な開始ページレイアウトを1つのCSSファイルにすばやく簡単に組み合わせて適合させることができます。次のリソースによって開始できます。
デザイナー向けのワークスペースの設定
デザイナーがワークスペースを設定してアプリケーションを効果的に使用する方法を学習します。
デベロッパ用のワークスペース
手作業でコーディングする経験豊富なユーザやデベロッパーを対象としてワークスペースをカスタマイズする方法を学習します。
サイトの定義
サイトを最初から作成し、Dreamweaverサイトとして既存のWebサイトを定義する方法を学習します。
リモートサーバの定義
リモートサーバにパブリッシュし、サイト定義ダイアログボックスの概要を把握します。
サーバーへのアップロード方法
インターネットサービスプロバイダ(ISP)にファイルをアップロードする方法を習得します。ブラウザでWebページを更新したり、表示したりする場合によくある問題を解決します。
基本操作の習得
メインメニューおよび新規ドキュメントダイアログボックスを使用した新規ページの作成方法と、Dreamweaverに組み込まれているCSSレイアウトに基づいた新規ページの作成方法を学習します。
プロパティインスペクタを利用したテキストスタイルの設定
Webページにテキストを追加し、そのテキストにプロパティインスペクタのスタイルメニューを使用してスタイルを設定します。アセットパネル、ファイルパネルおよび挿入バーを使用してWebページにイメージを挿入します。
リンクの作成
電子メールリンク、テキストリンクおよびイメージをページ内やページ外にリンクします。
フォームの作成
テーブルでレイアウトされたフォームにフォームフィールドを追加し、テキストフィールドおよびメニューを使用してユーザ情報を収集し、メニューに値を入力します。Bridgeを使用してメタデータ、キーワード、ラベルの各アセットを管理し、コンテンツを表示するためにワークスペースのプレビュー、レーティング、フィルタリングおよび操作の方法を学習します。カメラからBridgeにファイルを読み込み、読み込み設定を管理して、著者や著作権といったメタデータを適用します。Bridgeの基本機能を理解し、キーボードショートカットを使用してアセットにすばやくラベル付けして、ワークスペースのカスタマイズ方法や、メタデータの表示方法、フィルタの使用方法を学習します。Bridgeを使用してファイルにレーティングとラベルを追加する方法と、サムネール、スライドショーおよびフィルムストリップの表示内でキーボードショートカットを使用する方法を確認します。サムネールに優先度を設定するか、Metadata Focusワークスペースを選択してより多くのメタデータを表示して、Bridgeでメタデータを追加したり編集したりする方法を学習します。Bridgeでキーワードを作成してイメージに適用したり、キーワードの新しいカテゴリを追加したり、フィルタパネルを使用しキーワードによってイメージの並べ替えや表示を行ったりします。Bridgeでキーワードやメタデータを使用して、1つ以上のフォルダでイメージの検索、並べ替えおよびフィルタリングを行います。Bridgeで一連のイメージの名前を一度にすべて変更する方法や、バッチ処理のオプションの管理方法、メタデータテンプレートの作成およびそれを使用してメタデータを複数のイメージに適用する方法を学習します。
CSSを使用したデザイン
カスケーディングスタイルシート(CSS)とは何かについて把握し、今日のWebデザインにおけるCSSの重要性を理解します。
CSSを利用したテキストスタイルの設定
プロパティインスペクタではなくCSSパネルを使用してテキストのスタイルを設定し、CSS Advisorを使用してブラウザ間のCSSレンダリングに関する問題に対処する方法を学習します。
CSSベースのレイアウトの使用とカスタマイズ
あらかじめ組み込まれたCSSレイアウト(Dreamweaverに同梱されています)をカスタマイズし、レイアウトの作成方法や、コンテンツのカスタマイズ方法、作業のチェックと検証方法を学習します。Webページの印刷用にスタイルシートを作成し、適切に印刷されるようにページをレイアウトするCSSファイルの作成方法を学習します。
フォームへのCSSの利用
CSSを使用してフォームフィールドの外観を変更する方法を確認します。
テンプレートの作成と利用
テンプレートの作成とトラブルシューティングを行い、その新しいテンプレート内にテンプレートと編集可能領域を作成する方法を学習します。以前に作成されたWebページをテンプレートに基づいて変更し、編集するページを選択してそのページのテキストを変更する方法を学習します。
Spryウィジェットを利用したメニュー作成
他のプログラムとの併用
DreamweaverとFireworksのワークスペース間で共有されるインターフェイスエレメントを理解し、パネルやメニューなどのインターフェイスエレメントの使用方法を学習します。Dreamweaver、FireworksおよびFlashの間で読み込み、コピーおよびペーストする方法と、これら3つのアプリケーションの間でラウンドトリップ編集を行うための効果的なテクニックを学習します。閲覧、キーワード検索、高度な検索機能の使用、購入前の試供版ダウンロード、および選択した画像の購入の方法を学びます。Dreamweaverのチームおよびコミュニティから新しく提供された次の新しいサンプルアプリケーションでは、Dreamweaver CS3を使用して何が作成できるかが示されています。このXMLベースのフォトギャラリーを参照してください。XMLベースのデータを表示するインタラクティブなデータグリッドを作成する方法を学びます。リッチインターフェイスを作成するために複数のXMLファイルをどのように使用できるかを示すSpry RSSリーダを参照してください。動作しているSpryフォーム検査のデモンストレーションを取得します。Spryを使用してどのようなサンプル効果を作成できるかを参照してください。Dreamweaverソフトウェアの更新、ソフトウェア開発キット(SDK)、関連するソフトウェアおよびダウンロードをAdobe Labsからダウンロードし、デザインおよび開発作業のレベルを一段階引き上げることができます。
体験版のダウンロード
体験版のダウンロードの詳細情報
アドビのすべてのダウンロードの確認
Spryフレームワークの進行中の開発についての情報をさらに取得し、Adobe Labsで最新バージョンをダウンロードします。Dreamweaverの拡張機能を参照およびダウンロードしたり、独自の機能を作成して投稿したりします。
ブラウザ間のCSS表示の互換性に関する問題やCSSにまつわる様々な疑問に対する答えをすばやく見つけ出し、コミュニティで知識やテクニックを共有
デジタルデザインとモーショングラフィックにおける最新情報について学びます。月に2回、最新のチュートリアルと記事を確認し、創作の参考になるギャラリー作品をご覧ください。お近くの地域にいる同じような意識を持ったDreamweaverのデザイナーやデベロッパーと交流できます。フォーラムに質問を投稿し、Dreamweaverコミュニティのアドビ コミュニティエキスパートや他のユーザから支援を受けることができます。Dreamweaverの拡張機能を参照およびダウンロードしたり、独自の機能を作成して投稿したりします。Dreamweaverドキュメンテーションにアクセスして、独自のコメントを追加します。アドビデベロッパーセンターで最近公開されたDreamweaverの記事のフィードをサブスクライブします。
見本市とカンファレンス
その他のイベント
CSSに関する共通のCSSの問題に対して、知識を共有し、回答を見つけます。
さらに詳しく
ブラウザ間のCSS表示の互換性に関する問題やCSSにまつわる様々な疑問に対する答えをすばやく見つけ出し、コミュニティで知識やテクニックを共有
CSSとWebデザインに関して、Webデザインのコミュニティの専門家にどのように貢献でき、それらの専門家からどのように恩恵を受けることができるかを確認します。
3 ピクセルのテキストジョグ
"行ボックス" (インラインテキスト、イメージ、インラインとして宣言された他の任意のコンテンツを含む不可視の "匿名" ボックス) がフロートに隣接している場合、行ボックスとフロートの端の間に 3 ピクセルのマージンが発生します。コンテンツによってフロートがクリアされると、コンテンツがフロートの方向に 3 ピクセル "テキストジョグ" して、このマージンが消えます。
スクロールできないコンテンツに関するバグ
絶対位置のエレメントが、寸法が割り当てられていない相対位置のエレメント内に配置されている場合、スクロールバーがまったく表示されないか、十分に拡張されないため、絶対位置のエレメントのすべてのコンテンツが表示されません。
マウスポインタがあるときの背景イメージの点滅
計算されたコンテナの z-index が auto に設定されている場合でも、IE では位置指定されたコンテナによって新しい重ね順が定義されます。ブラウザのメーカー間で、クリアのためのエレメントに負の上マージンを表示する方法に不一致があるため、どれが正しいか明確になっていません。
フローティング時のボタンの非表示
フロートを <button> に適用すると、ボタンの背景が非表示になり、そのテキストのみ表示されます。アドビRSSフィード*について学びます。
すべてのアドビブログの一覧*
次のステップ
アドビRSSフィードについて*
その他のチュートリアルとサンプル
製品間の統合*
製品ドキュメンテーションの印刷版もお求めいただけます。最新のアドビ製品情報を収録した書籍がお求めいただけます。
すべての製品のデベロッパーセンター*
すべてのテクノロジセンター*
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
アクセシビリティチェック機能の主な機能(1)
アクセシビリティチェック機能の主な機能(2)
印刷用に表示
開発及び制作に関する個別要件」にある全ての項目によるチェック機能および各項目の詳細な解説が提供されています。その開発にあたっては、日本国内で Web アクセシビリティのチェックツール開発において実績のある富士通株式会社が全面協力をしています。
また、アクセシビリティチェック機能の特徴の一つでもあるリファレンスパネルで提供される各チェック項目の解説には、日本企業サイトのベストプラクティスとして知られる富士通株式会社より「富士通ウェブ・アクセシビリティ指針 第2
0版」が提供されているほか、JIS X 8341-3 のワーキンググループ(財団法人 日本規格協会 情報技術標準化推進センター 情報アクセシビリティ国際標準化調査研究委員会 ウェブアクセシビリティ国際規格調査研究部会)のメンバーである株式会社インフォアクシアが監修をしました。ここでは、その主な機能の概要をご紹介します。
この記事に必要なもの
このチュートリアルをフォローするには、つぎのソフトウェアがインストールされている必要があります。
著者について
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
アクセシビリティチェック機能の主な機能(1)
アクセシビリティチェック機能の主な機能(2)
ガイドラインの設定
「アクセシビリティチェック機能」の主な機能は、以下のとおりです。
チェック :(X)HTML ドキュメントのアクセシビリティをチェック
リファレンス :チェック結果で指摘された項目の詳細な解説を参照
レポート作成 :チェック結果をXML形式でレポート出力
アクセシビリティチェック機能を使って (X)HTML ドキュメントのアクセシビリティをチェックするには、まず「1
ガイドラインの設定」を以下の手順で行います。「レポート」のダイアログを開く。以下のいずれかの方法で「レポート」のダイアログを開きます。
メニューの [ウィンドウ] - [結果] で「結果」ウィンドウを開き、 [サイトレポート] のタブを選択して、「レポート」ボタン(緑色の右向き三角のアイコン)を選択
「レポート」ダイアログの設定
「レポート」のダイアログを開いたら、まず「レポート内容」のドロップダウンメニューで、チェックを行う対象を以下の4つのうち1つを指定します。
現在のドキュメント
現在のローカルサイト全体
サイト内の選択したファイル
フォルダ(任意のフォルダを指定)
ガイドラインの選択
次に、「レポート」ダイアログの「レポートを選択」で、チェックするガイドラインを選択します。アクセシビリティチェック機能では、以下の2つのうちどちらか1つを選択することができます。ただし、どちらか1つしか選択できません。
レポートの設定
さらに、選択したガイドラインをベースにして、チェックする項目の取捨選択が可能です。「レポート」ダイアログの左下にある「レポート設定」ボタンを選択してください。レポートの設定を行うダイアログが開きます。
テスト項目の取捨選択(独自ガイドラインの作成)
レポートの設定を行うダイアログでは、すべてのテスト項目がカテゴリに分類されて一覧表示されます。デフォルトでは、JIS X 8341-3 の必須レベルの項目全て、そして推奨レベルの項目の中でも重要度の高い項目が選択された状態になっています。テストするか / しないか、は項目単位で自由に設定ができますので、そのサイト独自のガイドラインにあわせてテスト項目を変更したり、重点的にチェックしたい項目だけに絞り込んだり、といったカスタマイズが可能です。テストするように設定されている項目は、「テスト実行」欄が「する」になっています。テストするか / しないかを変更したいときは、その項目を選択して、「テストする」、「テストしない」のボタンを押してください。ボタンを押すと、「テスト実行」欄の表示が切り替わります。また、カテゴリ単位で変更することも可能です。カテゴリ名を選択してから「テストする」、「テストしない」のボタンを押すと、そのカテゴリに属するテスト項目全部を一括で設定することができます。最後に「保存」ボタンで設定を保存してから、「OK」ボタンを押してください。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
FLVファイルの作成
Webページへのビデオの追加
ビデオプレゼンテーションの作成
Webページへのビデオの追加
ここでは、次の作業を行います。Web用にエンコードするビデオファイルを選択する。Webサイト用のFLVファイルを作成するためにエンコードプロセスを設定して実行する。ビデオファイルをエンコードするには時間がかかります。所要時間は、ビデオのサイズ、エンコード形式、コンピュータの使用可能なリソースに応じて異なります。Adobe Media Encoderでは、複数の元のビデオファイルをエンコードキューに追加し、エンコードジョブを個別に設定し、キューを開始することができます。エンコードジョブは、一度に1つずつ実行されます。次の手順に従って、元のビデオファイルをエンコードキューに追加します。サンプルWebサイトのビデオフォルダに移動します。aviファイルを選択します。ビデオファイルがエンコードキューに追加されます。
出力形式の選択
ビデオファイルをキューに追加した後で、出力形式を選択します。
図1 出力形式の選択
「形式」列のボタンをクリックします。次の手順に従ってプリセットを選択します。「プリセット」列のボタンをクリックします。
図2 プリセットの選択
Web(中)プリセットを選択した場合のビデオは、デフォルトで横360x縦264ピクセルになります。他のデフォルトサイズは以下のとおりです。
カスタム書き出し設定の使用
プリセットを選択した後で、設定をカスタマイズできます。次の手順に従って、書き出し設定ダイアログボックスを開きます。aviファイルを選択します。編集/書き出し設定を選択します。表示される書き出し設定ダイアログボックスには、現在選択されているプリセット、出力名、現在選択されているオプションの概要のみが表示される場合があります。他のオプションが表示されない場合は、使用可能な設定を拡張する必要があります。詳細設定モードボタン(図3)をクリックします。図3 詳細設定モードボタンをクリックすると、カスタムエンコードオプションが表示されます。書き出し設定ダイアログボックスの詳細設定モードには、5つのタブがあります。ここでは、変換後のビデオファイルのサイズと、それを表示するFlash Playerバージョンに影響する主な設定について説明します。
出力形式の選択
(マルチプレクサとは、ビデオとオーディオを1つのストリームに結合するエンコードプロセスを意味します。
図4マルチプレクサオプションの選択
ビデオに必要なFlash Playerのバージョンを決定するには、Flash Playerバージョン別の普及率(特定のバージョン以降をインストールしているコンピュータユーザの率)が参考になります。つまり、追加のソフトウェアをインストールしなくてもF4Vファイルを表示できます。このチュートリアルでは、最新バージョンよりも広い層を対象にして、Flash Player 8以降に対応するビデオを作成します。次の手順に従って、形式の設定を確認します。「形式」タブをクリックします。「マルチプレクサ」が「FLV」に設定されていることを確認します。
ビデオオプションの設定
「ビデオ」タブには、変換後のビデオファイルのサイズとパフォーマンスに影響するオプションが含まれています。
まず、コーデックを選択します(図5)
図5 ビデオコーデックの選択
コーデックとは、ビデオファイルをエンコードおよびデコードするソフトウェアアプリケーションです。画質が向上し、ファイルサイズが小さくなります。このコーデックで作成されたFLVファイルは、緑の画面や中間調の背景を使用して撮影されたビデオ、透明の背景を使用して配信されたビデオなど、複合ビデオのアルファチャンネルもサポートします。264ビデオコーデックが使用されます。次の手順に従ってビデオコーデックを選択します。「ビデオ」タブをクリックします。ビデオの表示サイズは結果のファイルサイズに直接影響します。表示サイズを小さくすると、ビデオファイルが小さくなり、表示サイズを大きくすると大きくなります。表示サイズはカスタマイズできますが、ビデオの縦横比率は常に保持します。ビデオのビットレートも画質とファイルサイズに影響します。ビットレートを高くすると、画質が向上し、ファイルサイズが大きくなります。次の手順に従って、ビデオサイズとビットレートをカスタマイズします。「ビデオのサイズ変更」を選択します。「縦横比率を保持」(図5)を選択します。「フレームの幅(ピクセル)」の横の下線付き数字をクリックし、「400」に変更してTabキーを押します。「フレームの高さ(ピクセル)」が自動的に「293」に変わります。「ビットレート設定」セクションにスクロールダウンします。ビットレートはデフォルトの「600」に設定されています。推定ファイルサイズ(コントロールバーの「キャンセル」ボタンと「OK」ボタンの横に表示されます)は1MBです。
オーディオオプションの設定
「オーディオ」タブ(図6)では、オーディオコーデックを選択し、その関連オプションを設定できます。
図6 オーディオプションの設定
MP3コーデックでは、次のオーディオエンコード設定オプションを使用できます。「モノ」または「ステレオ」に設定できます。オーディオで使用するチャンネルが1つの場合(1つのマイクで録音された場合など)は、「モノ」を選択すると、ファイルサイズが小さくなります。オーディオをステレオで録音した場合は、「ステレオ」を選択すると、ステレオ効果が楽しめます。オーディオの品質を決定します。ビデオのビットレートと同じように、高くすると、ファイルサイズが大きくなりますが、品質が向上します。音楽以外の人間の声などのオーディオでは、ビットレートを下げても(48 Kbpsなど)音質は大きく変わりません。高品質の音楽には、ビットレートを高くします。次の手順に従って、オーディオ設定をチェックします。「オーディオ」タブをクリックします。「出力チャンネル」が「ステレオ」に設定されていることを確認します。「OK」をクリックして書き出し設定ダイアログボックスを閉じます。
ビデオファイルの作成
ビデオの出力設定を行った後で、次の手順に従ってビデオファイルの出力先とファイル名を指定します。「出力ファイル」列でファイルの名前をクリックします。flvが表示され、サンプルWebサイトのビデオフォルダが「場所」テキストボックスに表示されていることを確認します。「保存」ボタンをクリックします。「キューを開始」をクリックして新しいビデオファイルを作成します。ファイル作成の所要時間は、ビデオの表示サイズや他の設定に応じて異なります。コンピュータの処理速度や他のリソースもエンコードの所要時間に影響します。「ステータス」列に、キューのビデオ別ステータスが表示されます。
ビデオのエンコード中は「エンコード中」と表示され、エンコードが完了するとチェックマークが表示されます(図7)
図7 完了したエンコードジョブ
エンコードが完了した後で、エンコードジョブを選択して「複製」をクリックすると、設定に手を加えて再利用できます。再利用しない場合は「削除」をクリックします。次の手順に従って、エンコードジョブをキューから削除します。aviファイルを選択します。「削除」をクリックし、キューからビデオファイルを削除します。ダイアログボックスが開き、キューからビデオを削除するかどうかを確認するメッセージが表示されます。「はい」をクリックします。アドビWebサイト*から個別にダウンロードしてインストールすることもできます。flvファイル拡張子と関連付けられるので、FLVファイルをダブルクリックすると自動的に開きます。他の方法でFLVファイルを開く場合でも同様です。次の手順に従って、作成したビデオファイルを開いてプレビューします。flvファイルを見つけます。このファイルをダブルクリックして開きます。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
Webページへのビデオの追加
このチュートリアルでは、ビデオをFLV形式でWebページにパブリッシュする方法について説明します。ビデオカメラで自作したビデオや家族、友人、同僚から入手したビデオは、カメラの機種やビデオ編集アプリケーション(Adobe Premiere Pro CS4など)固有の形式になっています。これらの元のビデオファイルはインターネットでの配信には適していません。通常、ファイルサイズが大きく、DVDなどの他のメディアでの配信を目的としています。インターネットで配信するには、Webサイト訪問者が簡単にダウンロードして表示できる形式に変換する必要があります。ビデオの表示に必要なFlash Playerは、大半のインターネットユーザが所持しています。このチュートリアルでは、ビデオを作成してWebサイトにパブリッシュするために必要な2つの主な作業について説明します。オプションとして、Flashを使用してより高度なビデオプレゼンテーションを作成します。タイトル画面を追加し、そのタイトル画面とビデオをクロスフェードさせます。最後に、Dreamweaverを使用して、Flashプレゼンテーションをビデオのフルスクリーン表示をサポートする高度なHTMLページと共にパブリッシュし、既存のWebページに追加します。このチュートリアルに従って作業を完了するには、次のソフトウェアとファイルが必要です。このチュートリアルでは、新規サイトを作成してWebサーバにファイルをアップロードする設定を行うなど、DreamweaverでのWebサイトの操作経験があるユーザを対象にしています。
サンプルファイルのインストール
zipをハードディスクにダウンロードして解凍してください。このアーカイブファイルには、以下のアセットを含むフォルダが含まれています。ビデオを表示するスペースが設定された2つのWebページがあります。このファイルを変換してWebサイトに追加します。ここでは、次の作業を行います。Web用にエンコードするビデオファイルを選択する。Webサイト用のFLVファイルを作成するためにエンコードプロセスを設定して実行する。ビデオファイルをエンコードするには時間がかかります。所要時間は、ビデオのサイズ、エンコード形式、コンピュータの使用可能なリソースに応じて異なります。Adobe Media Encoderでは、複数の元のビデオファイルをエンコードキューに追加し、エンコードジョブを個別に設定し、キューを開始することができます。エンコードジョブは、一度に1つずつ実行されます。次の手順に従って、元のビデオファイルをエンコードキューに追加します。サンプルWebサイトのビデオフォルダに移動します。aviファイルを選択します。ビデオファイルがエンコードキューに追加されます。
出力形式の選択
ビデオファイルをキューに追加した後で、出力形式を選択します。
図1 出力形式の選択
「形式」列のボタンをクリックします。次の手順に従ってプリセットを選択します。「プリセット」列のボタンをクリックします。
図2 プリセットの選択
Web(中)プリセットを選択した場合のビデオは、デフォルトで横360x縦264ピクセルになります。他のデフォルトサイズは以下のとおりです。
カスタム書き出し設定の使用
プリセットを選択した後で、設定をカスタマイズできます。次の手順に従って、書き出し設定ダイアログボックスを開きます。aviファイルを選択します。編集/書き出し設定を選択します。表示される書き出し設定ダイアログボックスには、現在選択されているプリセット、出力名、現在選択されているオプションの概要のみが表示される場合があります。他のオプションが表示されない場合は、使用可能な設定を拡張する必要があります。詳細設定モードボタン(図3)をクリックします。図3 詳細設定モードボタンをクリックすると、カスタムエンコード設定オプションが表示されます。書き出し設定ダイアログボックスの詳細設定モードには、5つのタブがあります。ここでは、変換後のビデオファイルのサイズと、それを表示するFlash Playerバージョンに影響する主な設定について説明します。
出力形式の選択
(マルチプレクサとは、ビデオとオーディオを1つのストリームに結合するエンコードプロセスを意味します。
図4 マルチプレクサオプションの選択
ビデオに必要なFlash Playerのバージョンを決定するには、Flash Playerバージョン別の普及率(特定のバージョン以降をインストールしているコンピュータユーザの率)が参考になります。つまり、追加のソフトウェアをインストールしなくてもF4Vファイルを表示できます。このチュートリアルでは、最新バージョンよりも広い層を対象にして、Flash Player 8以降に対応するビデオを作成します。次の手順に従って、形式の設定を確認します。「形式」タブをクリックします。「マルチプレクサ」が「FLV」に設定されていることを確認します。
ビデオオプションの設定
「ビデオ」タブには、変換後のビデオファイルのサイズとパフォーマンスに影響するオプションが含まれています。
まず、コーデックを選択します(図5)
図5 ビデオコーデックの選択
コーデックとは、ビデオファイルをエンコードおよびデコードするソフトウェアアプリケーションです。画質が向上し、ファイルサイズが小さくなります。このコーデックで作成されたFLVファイルは、緑の画面や中間調の背景を使用して撮影されたビデオ、透明の背景を使用して配信されたビデオなど、複合ビデオのアルファチャンネルもサポートします。264ビデオコーデックが使用されます。次の手順に従ってビデオコーデックを選択します。「ビデオ」タブをクリックします。ビデオの表示サイズは結果のファイルサイズに直接影響します。表示サイズを小さくすると、ビデオファイルが小さくなり、表示サイズを大きくすると大きくなります。表示サイズはカスタマイズできますが、ビデオの縦横比率は常に保持します。ビデオのビットレートも画質とファイルサイズに影響します。ビットレートを高くすると、画質が向上し、ファイルサイズが大きくなります。次の手順に従って、ビデオサイズとビットレートをカスタマイズします。「ビデオのサイズ変更」を選択します。「縦横比率を保持」(図5)を選択します。「フレームの幅(ピクセル)」の横の下線付き数字をクリックし、「400」に変更してTabキーを押します。「フレームの高さ(ピクセル)」が自動的に「293」に変わります。「ビットレート設定」セクションにスクロールダウンします。ビットレートはデフォルトの「600」に設定されています。推定ファイルサイズ(コントロールバーの「キャンセル」ボタンと「OK」ボタンの横に表示されます)は1MBです。
オーディオオプションの設定
「オーディオ」タブ(図6)では、オーディオコーデックを選択し、その関連オプションを設定できます。
図6 オーディオプションの設定
MP3コーデックでは、次のオーディオエンコード設定オプションを使用できます。「モノ」または「ステレオ」に設定できます。オーディオで使用するチャンネルが1つの場合(1つのマイクで録音された場合など)は、「モノ」を選択すると、ファイルサイズが小さくなります。オーディオをステレオで録音した場合は、「ステレオ」を選択すると、ステレオ効果が楽しめます。オーディオの品質を決定します。ビデオのビットレートと同じように、高くすると、ファイルサイズが大きくなりますが、品質が向上します。音楽以外の人間の声などのオーディオでは、ビットレートを下げても(48 Kbpsなど)音質は大きく変わりません。高品質の音楽には、ビットレートを高くします。次の手順に従って、オーディオ設定をチェックします。「オーディオ」タブをクリックします。「出力チャンネル」が「ステレオ」に設定されていることを確認します。「OK」をクリックして書き出し設定ダイアログボックスを閉じます。
ビデオファイルの作成
ビデオの出力設定を行った後で、次の手順に従ってビデオファイルの出力先とファイル名を指定します。「出力ファイル」列でファイルの名前をクリックします。flvが「名前を付けて保存」テキストボックスに表示されており、サンプルWebサイトのビデオフォルダが「場所」テキストボックスに表示されていることを確認します。「保存」ボタンをクリックします。「キューを開始」をクリックして新しいビデオファイルを作成します。ファイル作成の所要時間は、ビデオの表示サイズや他の設定に応じて異なります。コンピュータの処理速度や他のリソースもエンコードの所要時間に影響します。「ステータス」列に、キューのビデオ別ステータスが表示されます。
ビデオのエンコード中は「エンコード中」と表示され、エンコードが完了するとチェックマークが表示されます(図7)
図7 完了したエンコードジョブ
エンコードが完了した後で、エンコードジョブを選択して「複製」をクリックすると、設定に手を加えて再利用できます。再利用しない場合は「削除」をクリックします。次の手順に従って、エンコードジョブをキューから削除します。aviファイルを選択します。「削除」をクリックし、キューからビデオファイルを削除します。ダイアログボックスが開き、キューからビデオを削除するかどうかを確認するメッセージが表示されます。「はい」をクリックします。アドビWebサイト*から個別にダウンロードしてインストールすることもできます。flvファイル拡張子と関連付けられるので、FLVファイルをダブルクリックすると自動的に開きます。他の方法でFLVファイルを開く場合でも同様です。次の手順に従って、作成したビデオファイルを開いてプレビューします。flvファイルを見つけます。ファイルをダブルクリックして開きます。FLVファイルの表示サイズの高さと幅を追加先のWebページに合わせて設定するだけで追加できます。ここでは、次の作業を行います。Webサイト訪問者がビデオを表示するために必要なサイトアセットを特定してリモートサイトにアップロードする。Dreamweaverサイトの定義方法を既に知っている場合は、ビデオを追加する手順で複雑な部分はありません。サイトの定義では、次のカテゴリとオプションを設定します。
ディスク上の場所
ローカルサイトの管理方法を定義する他の設定
クローク(リモートサイトにアップロードしないファイルを指定)
自動的にクロークするファイル拡張子のリスト
「リモート情報」は、このチュートリアルでは設定しませんが、通常はファイルをリモートサイトにアップロードする設定を行います。リモートサイトの設定方法について詳しくは、Dreamweaverヘルプの「リモートフォルダの設定」を参照してください。サイト/新規サイトを選択します。
サイト定義ダイアログボックスの「詳細設定」タブをクリックします(図9)
ローカルルートフォルダとして、ローカルハードディスクに展開したWebサイトファイルのルートフォルダを設定します。「カテゴリ」リストの「クローク」をクリックします。
「次で終わるファイルをクロークする」オプションを選択します(図10)
flaファイル拡張子は既に表示されています。
図10 クロークオプションの設定
ファイル拡張子のリストをクリックし、「
「OK」をクリックして新しいサイト定義を保存します。Webサイトのファイルがファイルパネルに表示されます。htmファイルをダブルクリックします。表示/デザインを選択し、ファイルをデザインビューで表示します。ヘッドライン、左側のナビゲーションセクション、ビデオの挿入先を示すテキストが表示されます。Dreamweaverでは、ビデオをWebブラウザに配信するためのプログレッシブダウンロードとビデオストリーミングという2つの方法に対応したコードとファイルを生成できます。プログレッシブダウンロードでは、Webブラウザが画像ファイルをダウンロードするように、Flash PlayerによってWebサーバからFLVファイルがダウンロードされます。Webサイト訪問者がビデオを含むページに移動すると、Flash PlayerによってWebサイトからビデオファイルのダウンロードが開始されます。一定量のビデオファイルがダウンロードされると、再生が開始されます。再生中に、残りのビデオファイルがバックグラウンドでダウンロードされます。プログレッシブダウンロードのメリットはシンプルであることです。ビデオを配信するには、ビデオを他のWebサイトアセットと共にリモートサイトにアップロードするだけです。プログレッシブダウンロードのデメリットは次のとおりです。ユーザの認証、ビデオのダウンロード量の操作やレポート、ユーザ別の利用可能な帯域幅の調整ができません。Webブラウザにより、Webサイト訪問者のコンピュータにビデオファイルがキャッシュされます。Webサイト訪問者はWebブラウザのキャッシュからビデオファイルを見つけて保存することができるため、プログレッシブダウンロードで配信されたビデオファイルの再配布を制限することが困難です。ビデオストリーミングでは、Flash Playerはストリーミングサーバと呼ばれるサーバベースのアプリケーションに接続します。ビデオコンテンツは、ストリームとして配信されます。情報は受信されて表示された後で、メモリから破棄されます。Webサイト訪問者のディスクには保存されません。ビデオストリーミングには、次のメリットがあります。ビデオの再生が即座に開始されます。一定量のビデオがダウンロードされるまで待つ必要がありません。ユーザを認証し、ビデオへのアクセスを制限できます。Webサイト訪問者およびビデオ別に帯域幅を割り当てることができます。ビデオファイルはブラウザのキャッシュに保存されないので、再配布を制限できます。独自のストリーミングサーバを作成せずに、ストリーミングサービスを購読して共有アカウントを利用することもできます。これは、ISPが提供する共有Webサイトアカウントに似ています。このチュートリアルでは、プログレッシブダウンロードを使用してビデオをブラウザに配信します。
Webページへのビデオファイルの追加
ビデオファイルをWebページに追加すると、DreamweaverによってFlashプレゼンテーションがページに追加され、ダウンロードされて、ビデオが再生されます。この操作を、ここではビデオプレーヤーと呼びます。ページには、ビデオ表示用のスペースと、ビデオプレーヤー用の追加スペースが必要です。作成したFLVファイルは400ピクセルの幅なので、表示領域内に収まります。次の手順に従って、ビデオをWebサイトに追加します。Deleteキーを押して、選択したテキストを削除します。挿入/メディア/FLVを選択します。
FLVの挿入ダイアログボックスで、「ビデオタイプ」を「プログレッシブダウンロードビデオ」に設定します(図12)
「参照」ボタンをクリックします。FLVの選択ダイアログボックスで、Webサイトのビデオフォルダに移動します。flvファイルを選択します。flv 」に設定され、「相対位置」が「ドキュメント」に設定されていることを確認します。「サイズの検出」をクリックします。「自動再生」を選択します。Webページがブラウザに読み込まれると、ビデオが自動的に再生されます。「自動巻き戻し」を選択します。ビデオの再生が終わると、巻き戻されます。「OK」をクリックし、ビデオをWebページに追加します。変更内容をWebページに保存します。変更内容を保存すると、ダイアログボックスが表示され、ビデオのダウンロードと表示をサポートするファイルがサイトに追加されたことを知らせるメッセージが表示されます。依存ファイルをコピーするかどうかを確認するメッセージが表示されたら、「OK」をクリックします。ビデオを正しく再生するには、次のファイルをリモートサイトにアップロードする必要があります。ビデオを表示します。ビデオプレーヤーの外観と機能を決定します。swfという名前のファイルに定義されています。Webサイト訪問者のFlash Playerバージョンが6,0,65以上であるが、必要なバージョンに達していない場合に、必要なバージョンにアップグレードします。
ライブビューでのビデオのプレビュー
Dreamweaver CS4の新しい機能であるライブビューを使用すると、ページがどのように表示されるかを外部ブラウザを起動せずに確認できます。次の手順に従って、ビデオをライブビューでプレビューします。Webページをデザインビューで表示していることを確認します。
表示/ライブビューを選択するか、ドキュメントツールバーの「ライブビュー」をクリックし、ページをプレビューします(図13)
ビデオの再生が即座に開始されます。
図13 ライブビューでのビデオのプレビュー
表示/ライブビューを再度選択して、デザインビューに戻ります。これで、Web配信用のビデオファイルを作成し、Webページに追加しました。次のセクションはオプションです。ビデオを向上するために、Flashプレゼンテーションにラップして、いくつかのエフェクトを追加する方法について説明します。
Flashでの高度なビデオプレゼンテーションの作成
Flashを使用して、ビデオにタイトル画面、クロスフェードなどのビジュアルエフェクト、インタラクティビティを追加して高度なプレゼンテーションを作成できます。ビデオのフルスクリーン表示をサポートする高度なHTMLコードを生成することもできます。ここでは、次の作業を行います。新規Flashドキュメントを作成する。Flashドキュメントに再生用のFLVファイルを追加する。ビデオの前に表示するタイトル画面を追加する。タイトル画面とビデオの間にクロスフェードを作成する。ビデオのフルスクリーン表示をサポートするオプションを付けてFlashコンテンツをパブリッシュする。最初の手順では、Flashドキュメントを作成します。
Flashドキュメントのソースバージョンのファイル拡張子は常に
パブリッシュした後のプレゼンテーションのファイル拡張子は
次の手順に従って、新規Flashドキュメントを作成します。ウィンドウ/ワークスペース/デザイナーを選択します。上部にタイムライン、左側にツールパネルとプロパティパネル、右側にライブラリパネル、整列パネル、カラーパネルが表示されます。ファイル/新規を選択します。ファイル/名前を付けて保存を選択します。表示されるダイアログボックスで、Webサイトのルートフォルダに移動します。fla」という名前で保存します。「保存」ボタンをクリックします。
Flashドキュメントへのビデオの追加
Flashドキュメントでは、レイヤーを使用してプレゼンテーションのビジュアル要素を整理します。新しいFlashドキュメントには、「レイヤー1」という1つのデフォルトレイヤーがあります。このデフォルトレイヤーは、ビデオを表示するために使用します。タイトル画面を表示してActionScriptコードを作成するには、追加のレイヤーを作成します。次の手順に従って、デフォルトレイヤーの名前を変更し、レイヤーの最初のフレームにビデオプレーヤーコンポーネントを追加します。タイムラインパネルを見つけます。タイムラインが表示されていない場合は、ウィンドウ/タイムラインを選択します。「レイヤー1」ラベルをダブルクリックします。テキスト入力コントロールが表示され、レイヤー名を変更できます。
図15 新しいレイヤーの最初のフレームの選択
ファイル/読み込み/ビデオの読み込みを選択します。ビデオの読み込みウィザードの最初の画面(図16)で、「参照」をクリックします。
図16 ビデオファイルの選択
Webサイトのビデオフォルダに移動します。
図17 スキンの選択
カラーセレクタをクリックし、カラーとして「#47ABCB」を選択します。ビデオの読み込みの完了画面に表示される情報を読み、「完了」をクリックします。ビデオの読み込みプロセスが完了すると、Flashドキュメントの画面中央にビデオプレーヤーが表示されます。次の手順では、Flashドキュメントのサイズを変更してコンポーネントを表示します。修正/ドキュメントを選択します。
「サイズを合わせる」オプションを「内容」に設定します(図18)
図18 ドキュメントサイズをその内容に合わせる。メモ:Flashドキュメントのサイズをその内容に合わせると、新しいサイズはビデオの再生コンポーネント用のスペースのみで、再生コントロール用のスペースはありません。これは、次の手順で修正します。ビデオは再生されますが、プレーヤーのコントロールが表示されません。修正/ドキュメントを選択します。ドキュメントの高さを「293」から「333」に変更し、ビデオ再生コントロール用に40ピクセルを追加します。プレゼンテーションを再度テストします。ビデオプレーヤーコンポーネントとそのコントロールが正しく表示されます。変更内容を保存します。
タイトル画面の追加
Flashでは、複数のビジュアル要素を結合できます。ここでは、Flashプレゼンテーションの最初にタイトル画面を追加し、それをビデオとクロスフェードさせます。タイムラインで既存のvideoレイヤーの名前をクリックします。挿入/タイムライン/レイヤーを選択し、新規レイヤーを追加します。新規レイヤーを右クリックまたはCtrlキーを押しながらクリックし、「他をロックする」を選択します。新しいコンテンツは、ロックされていないレイヤーにのみ追加されます。
ツールパネルで、長方形ツールを選択します(図19)
プロパティパネルで、「線のカラー」を「なし」に、「塗りのカラー」を「黒」に設定します。ヒント: プロパティパネルが表示されない場合は、ウィンドウ/プロパティを選択します。ドキュメントの左上隅から右下隅までドラッグして長方形を描画します。ツールパネルの選択ツールをクリックします。新しいシェイプ内の任意の場所をダブルクリックして選択します。プロパティパネルの「位置とサイズ」セクションで、次のプロパティを設定します。Escキーを押して、シェイプを選択解除します。ツールパネルのテキストツールを選択します。プロパティパネルの「文字」セクションで、次のプロパティを設定します。
テキストの種類:静止テキスト
アンチエイリアス:アンチエイリアス(読みやすさ優先)
プロパティパネルの「段落」セクションで、次のプロパティを設定します。
フォーマット:中央揃え
ドキュメント内の任意の場所をクリックし、新規テキストオブジェクトを作成します。Escキーを押してテキスト入力を終了します。テキストオブジェクトは選択したままにします。整列パネルに移動します。ヒント:整列パネルが表示されていない場合は、ウィンドウ/整列を選択します。「ステージに読み込み」ボタンが選択されていることを確認します。「中央揃え(水平方向)」ボタンをクリックします。「中央揃え(垂直方向)」ボタンをクリックします。テキストオブジェクトが水平方向および垂直方向に中央揃えされます。クロスフェードを追加しやすいように、背景の長方形とテキストを1つのオブジェクト(ライブラリシンボル)としてまとめます。これで、両方を一緒にフェードさせることができます。修正/シンボルに変換を選択し、レイヤーのオブジェクトを含むライブラリシンボルを作成します。
シンボルに変換ダイアログボックスで「名前」テキストボックスに「mcTitle」と入力し、「タイプ」が「ムービークリップ」に設定されていることを確認します(図21)
図21 ビジュアル要素のシンボルへの変換
新しいシンボルがライブラリパネルに追加され、ステージ上で選択された長方形およびテキストオブジェクトが1つのオブジェクト(シンボルインスタンス)になりました。変更内容を保存します。この時点でFlashプレゼンテーションをテストすると、コンピュータのボリュームがオンになっていれば、音を聞くことができます。ただし、見ることはできません。ビデオが表示されないのは、タイトル画面によって隠されているためです。次のセクションでは、タイトル画面とビデオの間にクロスフェードを追加します。
クロスフェード効果の追加
Flashでは、モーショントゥイーンを使用してレイヤーにアニメーションを追加できます。モーショントゥイーンは、一定時間、シンボルインスタンスの位置やサイズなどのビジュアル特性を変更するために使用します。モーショントゥイーンについて詳しくは、Flashヘルプの「モーショントゥイーン」を参照してください。次の手順では、タイトル画面からビデオまで3秒でクロスフェードさせます。挿入/モーショントゥイーンを選択します。モーショントゥイーンは、最初24フレーム/秒のスパンで作成されます。メモ:画面の解像度によっては、フレーム95を表示するためにタイムラインの右にスクロールする必要があります。挿入/タイムライン/フレームを選択し、モーショントゥイーンを4秒弱まで延長します。ヒント:モーショントゥイーンの最後をフレーム95までドラッグして延長することもできます。Vキーを押して、選択ツールを使用します。プレゼンテーションのタイトルカードシンボルインスタンスをクリックします。
プロパティパネルの「カラー効果」セクションで、「スタイル」を「アルファ」に設定します(図22)
図22 「アルファ」プロパティの選択
「アルファ」プロパティを「0」(完全な透明)に設定します。メモ:「アルファ」を選択した時点で、それが自動的に「0」に自動的に設定される場合があります。タイトルカードシンボルを再度クリックして選択します。プロパティパネルで、「アルファ」プロパティを「100%」に設定します。タイムラインのタイトル画面レイヤーのフレーム72のドットは、このフレームでシンボルに変更が適用されたことを示します。これで、タイトル画面は3秒間(フレーム72まで)完全に表示された後で、フレーム72からフレーム95まで(約1秒弱)フェードアウトします。videoレイヤーのフレーム96をクリックします。挿入/タイムライン/フレームを選択し、videoレイヤーをFlashプレゼンテーションの最後まで延長します。メモ:タイトル画面がプレゼンテーションから削除された後のフレーム96でもビデオは依然として表示されるので、Webサイト訪問者はビデオプレーヤーの再生コントロールを操作できます。Flashプレゼンテーションを保存してテストします。タイトル画面は3秒後にフェードアウトしますが、プレゼンテーションが最初に戻って再生されます。また、クロスフェードが完了する前に、プレゼンテーションの最初から再生されます。これらの問題は、次のセクションで修正します。
タイムラインとビデオ再生の制御
この時点では、Flashプレゼンテーションが読み込まれると、ビデオが自動的に再生されます。また、プレゼンテーション自体が繰り返しループ再生されます。次の手順に従って、ビデオ再生がプレゼンテーションの最初から開始しないように修正します。videoレイヤーを右クリックまたはCtrlキーを押しながらクリックし、「他をロックする」を選択します。videoレイヤーを右クリックまたはCtrlキーを押しながらクリックし、「他を隠す」を選択します。videoレイヤーのフレーム1のセルを選択します。ビデオプレーヤーコンポーネントをクリックして選択します。ウィンドウ/コンポーネントインスペクタを選択し、コンポーネントのプロパティを表示します。コンポーネントインスペクタパネルを閉じます。プレゼンテーションが繰り返しループ再生されないように、またクロスフェードが完了してからビデオが再生されるようにするには、ActionScript 3コードを使用します。0のプログラミング」を参照してください。まず、ActionScriptコードで制御するオブジェクト(ビデオプレーヤーコンポーネントなど)にインスタンス名を割り当てます。次に、キーフレーム(特定のアクションやイベントが発生する個所のマーカー)を作成し、そのフレームで実行するActionScriptコードを追加します。ビデオコンポーネントを再度選択します。
プロパティパネルで、<インスタンス名>テキストコントロールをクリックします(図24)
図24 ビデオプレーヤーコンポーネントのインスタンス名の設定
挿入/タイムライン/レイヤーを選択します。挿入/タイムライン/キーフレームを選択し、新規キーフレームを追加します。ウィンドウ/アクションを選択して、アクションパネルを開きます。アクションパネルに次のコードを追加します。メモ:stop()コマンドでは、タイムラインがフレーム1にループバックするのを防ぎます。2行目のコードではビデオ再生を開始します。アクションパネルを閉じて変更内容を保存します。Flashプレゼンテーションを再度テストします。Flashプレゼンテーションがループせず、ビデオがタイムラインの最終フレームで再生を開始することを確認します。Webサイト訪問者のブラウザ環境をチェックし、必要なソフトウェアがあることを確認するようにプレゼンテーションを設定することをお勧めします。次の手順に従って、Flashドキュメントを設定し、Flashプレゼンテーションとサポート用HTMLページの両方をパブリッシュします。ファイル/パブリッシュ設定を選択します。「テンプレート」オプションを「Flashのみ - フルスクリーンサポート」に設定します。
必要なバージョンを「9,0,28」に設定します(数値ごとにテキストボックスに入力します)
他のすべてのオプションを図26に示すとおりに設定します。「パブリッシュ」をクリックし、Flashプレゼンテーションとそのサポートファイルを生成します。「OK」をクリックし、パブリッシュ設定ダイアログボックスを閉じます。変更内容を保存します。ファイル/パブリッシュプレビュー/HTMLを選択し、ブラウザでプレゼンテーションをプレビューします。
ビデオの再生が開始したら、ビデオプレーヤーコンポーネントのフルスクリーンボタンをクリックします(図27)
ビデオがフルスクリーンに拡大します。Escキーを押して、ブラウザのプレゼンテーションに戻ります。ブラウザを閉じます。
既存のWebページへのFlashプレゼンテーションの追加
プレゼンテーションのパブリッシュ時に、Flashによって次のファイルがWebサイトのルートフォルダに作成されます。
html:ビデオのフルスクリーン表示をサポートするHTML"ラッパー"ファイル
swf:ビデオプレーヤーコンポーネントのビジュアルプレゼンテーションを定義する"スキン"SWFファイル
以上のファイルおよびFLVファイルは、リモートサイトにアップロードして、Webサイト訪問者がプレゼンテーションを表示できるようにします。次の手順では、Flashプレゼンテーションを既存のWebページに追加します。これにより、コピーおよびペーストを多く使用せずにFlashで生成されたHTMLコードを使用できます。次の手順に従って、FlashプレゼンテーションをWebサイトに追加します。変更内容を保存します。次に、ページを外部ブラウザにフルスクリーンモードで表示してプレビューします。ファイル/ブラウザでプレビューを選択します。Webブラウザを選択します。Webページがブラウザで開いて、ビデオの再生が開始されたら、フルスクリーンボタンをクリックしてビデオをフルスクリーンに拡大します。Escキーを押して、ブラウザビューに戻ります。ブラウザを閉じます。これで、高度なビデオプレゼンテーションを作成して、Webページに追加することができました。
次のステップ
Web用のビデオを作成して追加するための参考資料は他にもあります。例えば、Webサーバの設定で迷う場合があります。Webサーバを設定してWebサイトを配置するときに、MIMEタイプがFLV用に正しく設定されていないと、ビデオが再生されないことがあります。
著者について
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
では、ショッピングポータル「カラメル」を運営しています。カラメルには、商品購入履歴やお気に入りの商品をソーシャルブックマーク形式で登録できる「マイカラメル」というユーザー機能があり、その登録作業のユーザビリティを向上させるために、Adobeの「Spry Framework for Ajax」の「Spryテキストフィールド検査ウィジェット」を利用しています。この記事では、Spryテキストフィールド検査ウィジェットを紹介するとともに、実際にどのようにカラメルで使用しているかを解説します。この記事では、以下のソフトウェアとサンプルを使用しています。
Spryテキストフィールド検査ウィジェットの特徴と利用方法
Spryテキストフィールド検査ウィジェットとは
このウィジェットを使えば、高度なフォーム入力チェック機能を簡単に実現することができます。
ユーザーがフォームのテキストフィールドに文字を入力すると同時にその入力チェックを行い、もし入力に不備があったらその場でエラーメッセージを表示することができるのです(図1)
図1:入力に不備がある場合は、テキストフィールドの横にエラーメッセージが表示されます。通常のフォームだと、フォームの送信ボタンを押して、データをサーバに送ってサーバサイドでエラーチェックをし、もしエラーがあればその内容が表示されるという流れです。つまり、すべてのフォーム項目を入力して送信ボタンを押すまでは、入力にエラーがあったとしてもユーザーは知らされないわけです。Spryテキストフィールド検査ウィジェットを使えば、入力に不備がある場合はその都度ユーザーに伝えることができるようになります。商品購入時など入力フォームを使って個人情報を送る際は、不安を抱くものです。フォームを送る前に、一つでも多くの不安を取り除いておくことは、サイトへの信頼感、安心感へとつながると思います。HTMLファイルでは、必要な外部ファイルを読み込み、あとはちょっとしたJavaScriptを記述するだけで実装することができるようになっています。それは、 Spryテキストフィールド検査ウィジェットでも同じです。以下は、Spryテキストフィールド検査ウィジェットの組み込み例です。ログインIDを入力してください。jsファイル内に入力チェック機能のすべてのソースコードが書かれており、通常、このファイルを触る必要はありません。cssファイルで変更できます。form要素の後方に書かれたJavaScriptコードは、文字数制限やチェックの実行タイミングなどのルールを指定するためのものです。Spryテキストフィールド検査ウィジェットを組み込むには、基本的にこれだけの記述で済むのです。あとは、自動的にSpryテキストフィールド検査ウィジェットが、フォームの入力内容とルールを照らし合わせて、エラーメッセージの表示/非表示を制御してくれます。図2:テキストフィールドやセレクトボックス、チェックボックスなどの必須チェック、数値チェック、メールアドレスのフォーマットチェックなど、一般的な入力フォームに必要な機能は揃っています。これらの機能を利用するには、Spry機能のボタンをクリックして、あとは必要に応じて表示されるダイアログの項目を入力するだけです。
入力チェック機能をDreamweaver CS3の操作だけで組み込めることから、UIモックアップを作る段階で、あらかじめSpryテキストフィールド検査ウィジェットを利用して実際のエラー処理ができるものを作ってしまって、そのまま開発者に渡すという使い方もできるでしょう
最新版はバージョン1
Spryテキストフィールド検査ウィジェットを使えば、HTMLのソースコードもシンプルになり、全体の見通しもよくなるため、自分でJavaScriptを使った入力フォームチェックを作るよりもメンテナンス性が高くなる上に、すでに安定したライブラリを使うためテスト工数も少なくて済みます。しかし、通常のHTMLによる入力フォームとしては動作します。この場合は、今まで通りサーバサイドの入力チェックを使ってエラーを制御することになります。そして最新のWebブラウザやJavaScript機能がオンに設定されている環境では、Spryテキストフィールド検査ウィジェットの機能を生かしたリッチな入力フォームを利用することができます。つまり、新しいWebブラウザを使う人には最新のユーザー体験を提供するとともに、古いブラウザを利用している人にもHTMLフォームとしての機能を損なわずに提供することができるのです。JavaScriptによる入力チェックはセキュリティを高めるものではなく、利用者に対して高いユーザビリティを提供するものです。
Spryテキストフィールド検査ウィジェットを利用するからセキュリティ面は万全と考えるのではなく、そのおかげで開発工数が少なくて済む分、セキュリティに責任を持たねばならない開発者がサーバサイドのセキュリティの確保に専念できるようにするためのものだと考えましょう
ショッピングポータル「カラメル」での使用例
Spryテキストフィールド検査ウィジェットでユーザー登録を支援する。pro」を利用しているショップオーナーのための、集客支援サイトです。各オーナーは、カラメルに出店して、自分たちのショップの商品を紹介しています。