この実践の流れは、今日まで受け継がれています。今日のグラフィックデザインは、コンピュータなくしては成り立たちません。グラフィックデザイナーたちは、様々な制約の中で、その独自の言語を使って、コンピュータに立ち向かうしかないのです。
斬新なグラフィックデザインツール
ユルグ・レーニは、スイスの若手デザイナー兼プログラマで、デザインとテクノロジの融合にかけては第一人者です。ちょっとした依頼から大がかりなプロジェクトまで、彼は商用グラフィックデザインソフトの道なき道を切り拓いてきました。com)で、そのプログラムの意図について簡単に述べています。「Scriptographerはツールの使い勝手を向上させるだけでなく、非公開の製品にオープンソースの哲学を突きつけるという意味も持っています。それに何より一番いいのは、無料で手に入るということです。この軽量ソフトウェアによって、デザイナーの毎日のデザインワークに活用できる全く新しい描画ツールの開発が可能になります。ユルグはこう言います。「ワークフローの一部を自動化することで、新しいやり方が見つかることもあるし、これまでになかった美しさが出せることもあるんだ。comには、デザイナーたちから寄せられた様々なフリースクリプトが公開されており、ダウンロード、使用、流用、および改造が自由に行えます。
ユルグは現在、このプラグインの新しいバージョン2
0を開発中です。拡張性があり、携帯可能、しかも人々をアッと言わせるユニークなプリンタです。ユルグは、このHektorを、ローザンヌ美術大学の卒業作品として、エンジニアのウリ・フランケと共同制作しました。スプレー塗料で壁に絵を描くというベクトルフォーマット対応プリンタとそのドライバソフトの開発には、並外れた高度な技術が要求されますが、結果は大満足でした。Hektorでは、これまでにスタジオやギャラリーでの展示、それに雑誌用の壁画を制作しましたが、それらはいずれも業界標準のIllustratorベクトルグラフィックです。Hektorは、滑車で吊られたスプレー塗料が壁面を自由に動き回り、かえって斬新に感じられるローテクな吹き付け塗装で、壁いっぱいに緻密な絵を描くという仕組みになっています。ハイテクとローテクが融合したこの大型の作図装置が、プロセスと結果、そのどちらにおいても、同じように見る人を満足させるパフォーマンスを生み出します。Hektorは、アムステルダムを拠点に活動するデザイナー、ウィル・ホルダーという好敵手に出会います。
ウィリアム・モリスのデザインを描くHektorのムービーを表示
ウィリアム・モリスのデザインを描くHektorのムービーを表示するには、こちらをクリックしてください。コルシカ島でウィリアム・モリスのユートピア小説『News from Nowhere』を読みながら数日の余暇を過ごした際、ウィルは、モリス社が1896年に発表したジョン・ヘンリー・ダールのデザインによる複雑な壁紙パターン『Compton』の存在を知ります。その作品は、16色のインクをベースにプリントされたもので、緻密な連続模様の中に大胆に花を配置したそのデザインは、当時、機械と熟練の印刷職人のみがなし得る技でした。そして、それはまさしくHektor向きのパターンでした。彼はすぐさまユルグに連絡を取り、自分の提案を伝えようとします。「とにかく必死でコルシカ島からユルグにショートメッセージを送ったんだ。
彼はブルートゥースですぐに返事を送って来てくれたよ
」(6)Hektorでは、そこまで大きいサイズの作品を描いたことはなく、繊細でカラフルなデザインも初めてのことでしたが、ウィルはどうしても諦めませんでした。3週間後、Hektorがアムステルダムに到着し、ウィルの要求とHektorの機能のバランスを計りながら準備が進められました。その調整役を買って出たユルグは、技術的な問題を解決し、最良の方法を見つけるために、専門家として知恵を絞ります。4夜にわたるペイントパフォーマンスの中で、Comptonの連続模様は、時折粗くなったり途切れたりすることがありました。そのたびに、ユルグはHektorのプログラムに手を加え、また、もっといい香りのする塗料はないかとアムステルダムの町を自転車で走り回ることさえしました。こうしてこの人間対機械のペイントパフォーマンスでは、ジョン・ヘンリーを思い起こさせつつ現代的なテイストを感じさせる作品が仕上がりました。この4夜のイベントを通して、Hektorは繊細さと大胆さを併せ持つ絵を、塗料を滴らせながら壁いっぱいに描きました。人間と機械との力比べは、どちらが勝つことも負けることもなく、美しい壁画を生み出しました。
この時、この方法でなければ実現できなかったことでしょう
一方、ニューヨークでも1人のアーティスト兼デザイナーが、ある偶然をきっかけに、見事な壁紙を創り出していました。それはカラ・ハミルトンが自分のスタジオRed Hookでコンピュータに向かっていた時のことです。実はこの時、彼女はこの新しいソフトの使い方をまだマスターしていませんでした。線の太さを一番細くしたかった彼女は、旧バージョンのIllustratorに切り換えます。2では、全ての線にヘアラインを選択しました。ヘアラインを設定するだけで、太さのポイントを指定しなくても、最も細い線が得られるのです。描き終えてレーザープリンタで印刷した絵を見て、彼女はびっくりしました。しかしそれは嬉しい誤算でもありました。その旧バージョンのソフトウェアを最新のプリンタドライバや繊細なレーザープリンタと一緒に使うと、描いた絵はかろうじて見える程度にしかページ上に出力されず、はかなげに輝いているかのような印象に仕上がっていたのです。カラはこのヘアラインの手法を壁紙の作成に応用し、部分的あるいは全体的にこの効果を活かしました。この壁紙を生み出したのは、複雑なソフトウェアについての専門的な知識でもすぐれたデザイン力でもありません。ちょっとしたミスとそれをチャンスと捉える感性が、この結果をもたらしたのです。韓国ソウルのデザイナー、チェ・ミンは、コンピュータに向かいグラフィックデザインの作業をする毎日の中で、繰り返される事象が、いつも同じか、いつも少しずつ違うかという規則性に対する鋭い感性を持っています。ある日コンピュータの前に座っていたミンは、単語や文をキーボードで入力すると、入力する単語やタイミング、状況によって、キーを叩く音が異なるということに気付きます。ミンはこの発見をデザインに応用して、動く書体を作り出すカスタムアプリケーションType-Machine-Gunをプログラミングします。「これは音に反応するワードプロセッサです。このソフトを使えば、言葉のイメージを動的に表現できます。コンピュータのマイクに接続されていて、キーボードを叩く強さによって、文字を生成したり変形させたりするのです。」文字の変形の度合いは、タイピングの音、強さ、速さの度合いに比例して変わります。タイピングの結果は形のあるタイポグラフィとして現れ、記録されます。毎回、特定の単語を入力すると、必ず決まった形の文字が出てきます。彼の開発した書体プログラムは、それぞれの文字が次々と変化する、単語が画面上を踊る、変形がスムーズに行われる、といった特徴を活かしています。デトロイトを拠点とするデザイナー、ダニエル・オーベールもまた、Microsoft Excelを使用してソフトウェア主導の作品を制作しています。
経理担当者や管理職クラスの人たちに必携の表計算ソフトから、グラフィックデザインが生み出されようなどと誰が考えるでしょうか
しかし、カラーコーディングやデザイン、そしてスプレッドシートをキャンバスとして使用するといった、これまでにないグラフィックの可能性を見出したエール大学大学院生のダニエルが、2005年5月にこのプログラムを完成させます。自由でありながら一貫した研究の中で、ソフトウェアの意図的な誤用を行うことにより、ダニエルは、自分なりの方法を何度も試すことがいかに予期せぬ結果を生むかを明らかにしています。最後に紹介するのは、オランダのハーグ市にあるデザイン会社です。これまでに述べてきたような新しい考え方の多くを取り入れながら、さらに別の分野のグラフィックデザインやソフトウェア、そしてより幅広い層の人たちを対象として活動するLust社は、トーマス・カストロ、ジェロエン・バレンゼ、ディミトリ・ニーウェンハウゼンによって設立された総勢5名のデザイン会社です。印刷、インタラクティブメディア、建築グラフィックスなど、彼らの扱うメディアは様々で、彼らは自分たちの仕事を、「プロセスベースのデザインと偶然を中心に展開している」と表現しています。最近、Lustはハーグ市アートシネマ(Filmhuis)からの依頼で、そのファサードを総合情報スクリーンに変えるというプロジェクトに取り組みました。LCDやLEDなどのランプを使う予算はなく、また窓を不透明なスクリーンにするつもりはなかった(街の広場の眺めを遮ることになる)ので、最大限の効果を出すために、ローテクとハイコンセプトを組み合わせた特別な解決法を提案しました。ハーグ市を模ったグリッドパターンに半透明の四角いビニールフィルムを貼り、強力投光器で光を当てることで、ファサードをいきいきと映し出すのです。このスクリーンだと、市内で行われている催しを表す四角いビニールフィルムを1つずつライトアップしていくだけで、何も動かすことなく、簡単な操作ですぐに動きを演出できます。nl)のトップページを見ると、彼らの目指す方向性をうかがい知ることができます。冒頭の会社を紹介するグラフィックやテキストに代わってそこにあるのは、5人のメンバーが現在使用しているコンピュータのデスクトップ画面を組合せ、強烈なピクセレーションをその縦横に施した画像です。複雑ながらローファイなスタジオのモニターシステムにインストールしたEvoCamと呼ばれるソフトウェアが、Lustのメンバーが作業を進めるデスクトップ画面を5分おきに捉え、記録し、変形します。そしてこれらのスクリーンショットは、LustがカスタマイズしたMacromedia Shockwaveのプログラムによってオンザフライで処理され、縦縞やモザイクが入った画像が組み立てられるのです。彼らのWebサイトに今すぐアクセスして、5人のデスクトップを組み合わせた合成画像をご覧になってください。そこには、新進気鋭のグラフィックデザイナーたちが、自ら開発したソフトウェアによって映し出す、彼らの「今」があります。プログラムを作り、組み込み、実行するというこれまでの手順の中にも、複数のソフトウェアを掛け合わせた強さを持つハイブリッドなグラフィック技法が新しく登場しているようです。「世界中のグラフィックデザイナーのほとんど」が毎日同じアプリケーションを使っている、とユルグも述べています。どのソフトウェアも、使いやすさを最優先に考えて、ファンクションセット、ソフトウェアパラダイム、ユーザシナリオが綿密に組み立てられているため、結果的に、ハイもローも、エラーも、そして何かを生み出すかもしれない「クセ」もない平均的なツールになっています。従来私たちグラフィックデザイナーが使っていた道具は、例えば鉛筆のように、限られた機能を持つシンプルな物か、もしくは、カメラのように複雑で多機能な物のどちらかしかなく、両方の性質を併せ持つことはありませんでした。これは、そのまま現在のソフトウェアツールの問題点でもあります。限定された機能に複雑な仕組みを持つ業界標準のグラフィックデザインソフトは、標準のツールやテクニックを超える制作意欲をユーザに起こさせるものではありません。従って、当然のことながら、ソフトウェア環境のマンネリズムを打破するようなグラフィックデザインは滅多に生まれてきません。しかし、どのソフトウェアもモジュールと様々な要素から構成されていることを考えると、コードライブラリ、アプリケーション、バージョンなどの隙間に可能性が残っていると言えます。大手のソフトウェアメーカーは、これを認識しています。ソフトウェアに内在するこのモジュール方式のフレキシブルなシステムの正体は、グラフィックプログラムやWebブラウザ、コードコンパイラ、データベースアプリケーション、さらにはゲームにも標準となっているプラグインアーキテクチャです。プラグインというのは、別のソフトウェアの中で動くプログラムで、特定の機能を拡張したり実行可能にするためのものです。機能の追加(Photoshopの渦巻きフィルタ)、既存の機能の拡張(インクジェットプリンタでスプレー塗料の使用を可能にするプリンタドライバ)、あるいはインタフェイスの変更(Quark XPressの3Dウィンドウフレーム)といったことが可能になるわけです。0に初めて登場しました。87からプラグインアーキテクチャを採用しています。(7)ミシガンとカリフォルニアを中心に活動するフォトグラファ兼プログラマ、トーマス・ノールとジョン・ノールの兄弟は、複雑なアプリケーションコードを変えることなく、自分たちの開発した画像編集ソフトの修正を簡単に行いたいと考えました。彼らはすぐさま、プラグインを使って、第三者の作ったフィルタエフェクトを自分たちのツールに様々に応用しました。この修正が、強力で最新のソフトウェアの成功に大きく貢献したことは言うまでもありません。今では、市場をコントロールする影響力を持ち、以前のXeroxやKleenexがそうであったように、画像編集ソフトの代名詞となっています。プラグインアーキテクチャによって商用プログラムをコンピュータマニアにも一部開放する、もしくはMozilla FirefoxやMac OSXのように、アプリケーションソースコードを公開あるいは販売するといった動きを通して、大手のソフトウェアメーカーは、大勢のユーザとプログラムを共有することにより、ソフトウェアが真の進化を遂げるということを認識してきました。オープンソースオペレーティングシステムのLinuxは、フィンランド人プログラマで当時まだ学生だったリーナス・トーバルズがたった1人で開発を始めたところからスタートしたプロジェクトです。「僕が開発しているのは、フリーオペレーティングシステムです。これは単なる趣味なので、GNUみたいに大がかりでプロフェッショナルなものにはなりません。」彼がこう語っていた頃から14年が経ち、このフリーソフトウェアプロジェクトは見事な成功を収めます。これは、たとえ興味を持った個人の寄せ集めでも、特別なやり方をすれば、価値のあるソフトウェアを効果的に開発し、利用し、修正できるということを証明する具体例となりました。また、業界標準の市販ソフトウェアに頼っているだけの今のデザイナーにとっての可能性をも示しています。責任を持ってソフトウェアをクリティカルに使用し、製品の仕組みと向き合い、互いに質問し、古いソフトウェアを使い、情報を共有し、新しいソフトウェアを作り、そして最新技術の単なる消費者であることを拒む — 全てあなたにも私にもできることです。ミュリエルやアンソニー、ウィル、Hektorらの例が示すように、結果は必ず自分自身、そして自分の作品に返ってきます。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
アドビデザインセンター - Webデザインとモーショングラフィックのエキスパートによるコラムと記事
ようこそ、さん
お問い合わせ
ホームユーザ向け写真/ビデオ編集ツール
すべての業種・ソリューション ›すべての製品 ›アドビサポートに問い合わせる。
注文状況の確認
教職員および学生
アドビについて
投資家の皆様へ*
地域・社会への貢献*
お問い合わせ
個人またはホームオフィス
法人のお客さま
教育関係のお客様
おすすめ製品
すべてのソフトウェアを見る ›
購入後について
割引価格でコスト削減
ライセンスをご利用中のお客さま
その他の購入方法
販売店のご紹介
筆者について
ニューヨークを本拠地とするコンサルティング会社Studies and Observationsの代表であり、人に優しく、わかりやすくて使いやすい複合技術製品やサービスをクライアントが提供できるように支援してます。それ以前は、大手Webコンサルティング会社Razorfishの東京支社、情報アーキテクト部門のリーダーを務めていました。
このページを友達に紹介する*
脱境界:ユビキタスデザインへの課題
技術における1つの変化が、一時代を画すほどの影響を及ぼし、誰もがその影響に立ち向かい、受け入れ、または対応を準備しなければならない場合があります。「ユビキタスコンピューティング(UbiComp)」と呼ばれる情報テクノロジにおける革命は、そのような影響を持つ最新の変化であり、デジタルデザインの実践とビジネスにも波紋が広がり始めています。Weiserは、「UbiComp」とは、デジタルツールと人との関係が行き着くべき次の論理的段階であり、1つのマシンを複数のユーザが共有する時代から、1人のユーザが複数のデバイスを自在に使用する時代へと移り変わる必然的な歴史的転換と見ていました。Weiserの説明によれば、ユビキタスコンピューティングとは、デスクトップを使用しないで、構築された環境そのもの、つまり「コンピュータがユーザに見えないように、部屋のあちこちに埋め込まれている」環境で、情報処理を行うという概念です。Everywareアイコン:このオブジェクトには目に見えないプロパティがあります。Weiser以外にも、このような方向で考えを推し進めた人々がいました。さまざまなシンクタンクや企業のビジョンセンター、大学の研究機関で同様の試みが行われ、「パーベイシブコンピューティング」、「アンビエントインテリジェンス」、「タンジブルメディア」などの言葉が同じ意味で使用されました。私は、このようなアクティビティのすべてを1つの大きな包括的カテゴリにまとめ、「Everyware」と呼んでいます。
試みの立ち上げ
現在、実行されているユビキタスプロジェクトの大半は、他のエンジニアの好みを念頭において設計されており、単発の注文生産のようなプロジェクトや、プロトタイプ的なプロジェクトが多いようです。このようなプロジェクトは、コンセプトの妥当性を証明するために実施されているので、日常生活にあふれる怒涛のような情報を処理するだけの精緻さに欠けます。しかし、実験レベルを超えて実用を目指す安定した動きはあります。1997年以降、香港の住民は、「Octopus」と呼ばれる無線IC(RFID)カードを使用して、鉄道の乗車券や街頭スタンドで軽食を購入し、自宅の玄関の開閉をコントロールしています。ピッツバーグの新興企業BodyMedia*社は、バンドエイドよりやや分厚い程度の薄さのワイアレス身体機能測定デバイスを提供しています。このデバイスが収集したデータを、情報視覚化ソフトウェアで解析し、安全なネットワークを介して医師と共有できる「身体生理機能の記録データ」を作成することができます。一方で、Samsung、Intel®、Appleなどの企業が、まだ形の定まらない分野ではありますが、通信、情報、エンターテインメントの3つを束ねる領域となる可能性を感じて、「デジタルホーム」を所有する活動を始めています。実用が進めば、家庭も衣服も店舗も、情報を処理し、中継する地点になるのです。ごく普通のオブジェクトを、実世界の情報を集め、比較検討し、処理する場所として再認識します。さらに、決まりきった日常の様々な動作、例えば、朝の起床や通勤、日用品の買い物などを、情報の入り組む行動として、改めて考え直すことになるのです。韓国では、すべての家庭、バス停、ゴミ箱にまでユビキタステクノロジを徹底的に組み込んだNew Songdo*都市が建設されています。
日常生活で発生する膨大な課題に情報処理を適用することによって、New Songdoでの生活は(他に「U-City」事業も展開中)、表面的には、あらゆる場面で負荷の小さい、合理的な生活となるでしょう
例えば、朝の天気予報を鏡に表示するバスルームや、リサイクル用ゴミ箱にゴミを適切に投入すると自動的に代金が入金されるシステムなどが考案されています。ワイアレス通信可能な組み込みプロセッサを使用して構築されたインフラストラクチャに依存するこのようなシステムは、ユビキタスコンピューティングの特徴的なインタラクションスタイルを示しています。そこでは、人と情報処理システムの間のトランザクションが、人の操作、意志、または意識すら介在せずに自動的に進行します。わたしは、これを「情報処理と人の行動が融合し一体化した状態」と呼んでいます。Everywareアイコン:情報処理と人の行動が融合し一体化しています。
どのような未来を待っているか
現在の状況は、World Wide Web(WWW)が登場した頃、世界的ブランドエージェンシや経営コンサルティング会社がインタラクティブ事業をまだ開始せず、ブラウザやマークアップ言語の規格が厳密に検討されていない時期に似ています。今後を予想するには、Webの場合は、コミュニティが進歩し、組織的、技術的に対応できるようになるまで数年かかったこと、Everywareの抱える課題は、Webの課題よりも複雑で、はるかに規模が大きいことを想起すると、考えやすいと思います。ユーザに受け入れられる良い体験をユビキタスな環境で提供することは、デスクトップやWebで同じことを実行するより難しい。New Songdoの住民の一日の生活で行われるすべてのやり取りが、例えば、バスタブにお湯を入れる、定時に会社に到着する、日用品の買い物をプログラムするなどの行動が、PCユーザが数十年かかってようやく慣れてきた故障や不具合、システム不良に似たようなトラブルに絶えず見舞われる可能性があります。さらに、ユビキタス環境では、机の上に置いた1つの箱にトラブルが収まりません。生活に密着した環境全体にトラブルが波及することになるのです。しかし、テクノロジそのものは、最小の難題かもしれません。ユビキタス体験をデザインするには、人と人がどう違うか、その相違が人の願望や要求にどのような影響を与えるかを広く理解する必要があります。このような認識は、インタラクションデザインの新しい分野で進み、 MIT Media Lab*、インタラクションデザインの研究教育拠点であるIvrea*、およびニューヨーク大学のインタラクティブテレコミュニケーションプログラム*などで、教育が進められています。理想は、このような教育プログラムによって、情報テクノロジの日常生活への導入が計画されるたびに、その影響や問題の大きさを生徒たちが理解することです。Everywareアイコン:この場所そのものが役割や機能を説明しています。ユビキタスコンピューティングの最も基本的な事実は、相対的に有限なWeb環境よりも格段に不安定で複合的で予測できない実世界という環境で、ユビキタスコンピューティングが実行されるという点です。人が行き来する中で、めったに明確にならない状況の変化に応じて、彼らのニーズや要求が、刻々と変化します。相手が人間なので、普通の人々の日常生活を観察すること、人々のニーズを良識、洞察、正確さに照らし合わせてモデル化すること、適切な語彙を創造して、人々と周囲のシステムの間のインタラクションを表現することが、大きな難題となっています。環境全体に処理能力を分散することによって、スクリーンとキーボードの組み合わせでコンピュータとやり取りをする従来のスタイルは実用性を失います。パーソナルコンピューティングのユーザとマシンの1対1関係においては理想的な存在であったスクリーンとキーボードは、相対的に境界線のない流動的なEverywareのマルチユーザ環境では、ほぼ無用のものになります。タッチ操作や動作、音声を認識する新しいインタフェイスが登場します。複数の分野でデザインの実践方法を変える必要がありますが、新しいインタフェイスの使用方法を指定することは、そのような分野の1つです。
1つのスクリーン上に限定されないインタラクティブな経験を、どのようにデザインしたらよいだろうか
WWWとの10年間の付き合いの中で、デザイナーたちは、ムードボードやワイヤフレーム、ユースケースなど、Webサイト開発で使用される一連の、言わば標準的な派生物を使い慣れています。
このような派生物の多くが、ユビキタスシステムの開発においても何らかの役割を果たすと思われますが、人が、複数のインタラクティブシステムを操作しながら3次元的に空間と時間を動き回るマルチユーザ環境においては、まったく新しいタイプの派生物が必要になるでしょう
そのような派生物は、現在使用されているデジタルデザインドキュメントよりも、設計図面やコレオグラフィの記述に共通する部分があるでしょう
ユビキタスインタラクションをモデル化する作業に内在する大きな課題は、システムに対して発せられる言動とそうではない偶発的動作を明確に識別しなければならないことです。
システムは常に「私に対する指示ですか
」と質問することになります。ユーザは、他のユーザ、そして同じ場所にある他のシステムともやり取りを行うので、キーボードの前に座って、1台のコンピュータだけと割合に誠実な関係を保つ場合とは異なり、ユーザの行動を予測するのは困難で、また行動の意味を誤解するリスクを常に伴います。デザインの実践と関連する派生物の両方において、この可変性を考慮に入れる必要があります。ある特定の環境ではユビキタスサービスが目に見えないということも、難題の1つです。アイコン、視覚に訴える記号、目に付く表示機能などを作成して、気づかないユーザに環境情報を利用できることを知らせる必要があるのです。この方針に沿って作成したいくつかの提案用アイコンを、本記事に添えています。また逆に、システムがいつ機能しないか、そのタイミングを知りたいとユーザが望む可能性があります。プライバシーのためだけでなく、ネットワークから逃れたくなる理由は山ほどあります。記号や図形によるユビキタスシステムとのインタラクションを考えるためのヒントは、近年登場したSemapedia*や、日本で広く使用されているQRコード*などのさまざまな「空間アノテーション」技術にあります。QRコードとは、カメラ付き携帯電話(日本人のほぼ全員が所有している)で、QR機能を持つ記号、地図、名刺に印刷された図を写真に撮ると、関連するWebサイトへ直接アクセスできるようにしたコードです。しかし、このような技術の大半は、2次元バーコードで情報を伝達するので、ユビキタス環境に問題と可能性の両方を生じさせます。人がバーコードを読み取れないことは明らかで、さらにバーコードはデザイン的にも美しくない。いたるところに大量の2次元バーコードが貼り付けられた世界は、美に対する冒涜です。
誰もが読み取れて美的水準も満たす意味のある表示記号(Yellow Arrow*プロジェクトもその1つと考えられる)を使用すれば、あちこちに注釈を加えることがあっても問題はあまり生じないでしょう
このようなプロジェクトに適した能力を持つデザイナーが、そのエネルギーと洞察力と才能を発揮することを期待します。
箱にこだわらずに
「コンピュータ」という名前の箱に限定されていた情報テクノロジの概念が、決して後戻りのできない大きな永続的変化を遂げようとしています。現在、情報テクノロジの威力を簡単に利用できるのは、比較的小数の人々のみで、その威力が及ぶ範囲は、割合に狭く、限定的であり、対象は、特定の種類の状況のみです。一方、Everywareは、大半の既存環境そのものに処理能力を与えるため、その環境で実行されるほぼすべての行為が何らかの影響を受けます。このため、私は、Everywareはコンピューティングの目標ではなく、社会的な目標であると考えます。日常生活のオブジェクトや表層に処理能力を付与することがもたらす影響は、単一の産業よりもはるかに大きいのです。
Eeverywareは、マイクロプロセッサを広範囲に分散実装することを基盤としていますが、Eeverywareを理解する上で役立つ概念は、社会的、文化的発展の研究から得られるでしょう
本当の意味で(まだ予断を許さないが)、New Songdoが、ユビキタス都市における生活の確かな雛形になるのであれば、大半の人々が人生の大部分の時間に行う選択行為のほとんどにおいて、情報テクノロジが中心的な役割を担うことになります。
404エラーやブルースクリーンに相当するもので、不可避の障害を処理できると期待するとしたら、太平楽すぎるでしょう
以前よりは格段に進歩した手段が必要なのです。この状況の中で、デザイナーの果たす役割の重要性が増して行きます。デザイナーは、協同で構築するユビキタスシステムが、可能な限り多くの場面でユーザの日常生活を向上させる(少なくとも不要な負荷をかけない)ようにするという新しい役割を担うことになります。一方で、Everywareによって、デザイナーが、非常に繊細かつ正確に行動し、とりわけ、肥大化する多種多様なユーザ層のニーズに対して共感することが求められるようになれば、デザイナー個人が成長する大きなチャンスになります。Everywareは、デザイナーの活躍の場を、人が生きて呼吸をする、美しく、底抜けに刺激的で、ときには苛立たしい空間へと拡大します。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
アドビデザインセンター - デザイン、カルチャー、テクノロジに関するエッセイ集
ようこそ、さん
お問い合わせ
ホームユーザ向け写真/ビデオ編集ツール
すべての業種・ソリューション ›すべての製品 ›アドビサポートに問い合わせる。
注文状況の確認
教職員および学生
アドビについて
投資家の皆様へ*
地域・社会への貢献*
お問い合わせ
個人またはホームオフィス
法人のお客さま
教育関係のお客様
おすすめ製品
すべてのソフトウェアを見る ›
購入後について
割引価格でコスト削減
ライセンスをご利用中のお客さま
その他の購入方法
販売店のご紹介
筆者について
多作のミュージシャン兼プロデューサーとしても知られ、これまでに20作を超えるアルバムをリリースしています。
このシリーズについて
デザインは今、様々な分野が忙しく交錯する中で制作されるようになっています。このシリーズでは、デザイナーとツールの関係や、アニメーション・映像・パフォーマンスを駆使する新しいタイプのデザイナーの出現について検証し、コラボレーションとは何か、コラボレーションのネットワーク形態やパターンはどういったものかを見ていきます。
このページを友達に紹介する*
デザインがステージの主役
今の時代、どこの誰でも他の誰かと一緒に仕事をしています。ビジネス雑誌のほとんどが何か頼りになりそうなことを言い出せば、誰もがせっせとそれに精を出す。私たちはみんな、つながっていたいのです。先行きどうなるか分からない中、私たちは多くの時間を仕事に費やしています。何か安心できる材料が欲しいし、楽しみだって欲しい。会社の中ではある程度の独立性を確保しながら働きたい。仕事は自分でしたいけれど、その負荷は他の人とも分担したい。だから、仲間と一緒に働くのです。
金曜の深夜をとうに過ぎた東ベルリン
今はプログレッシブハウスミュージックのレーベルWMFが開く人気のクラブです。大勢が踊るフロアの壁に躍動する幻想的な映像は、構造的なパターンから自然界の木々に変貌したかと思うと溢れる色彩へと溶けていきます。イメージは音に合わせて動き、重なり、揺らめく。女性がひとり、DJブースの脇に身をかがめている。何台ものラップトップやDVDプレーヤー、モニタ、ミキシングボードに囲まれた彼女は、ラッキーストライクの煙が濛々とたち込める中、キーボードでコマンドを打ち込み、ミキサーのスライドを動かし、ダンサーたちに向けられたライブカメラの接続をチェックします。
彼女の名はリー・ハース
フローラ&ファウナ・ビジョンのメンバーとして活動する新種のビジュアルパフォーマー
映像クリエイターであり、デザイナーであり、パフォーマーでもある、つまりVJです。
フローラ&ファウナ・ビジョンのリー・ハースがMoto Centerで行ったビジュアルパフォーマンス
VJを映写技師の系譜で考えると、遠くアリストテレスにまで遡ることになります。暗い部屋に小さな穴から差し込む光によって、部屋の壁に外界の風景が映し出されるというカメラオブスクラの仕組みをアリストテレスが初めて記したのは、今から2000年以上も昔のことです。
VJをデジタル映写技師としてとらえ、ビジュアル的な刺激でカルチャーイベントを演出するという役割を考えるなら、その先駆者はエルウィン・ピスカートアのような人物でしょう
1920年、ドイツのワイマールで上演されたベルトルト・ブレヒトの叙事演劇で、ピスカートアは過激なスライドや映像を使って舞台にニュース映画のドキュメンタリー的感性を取り入れました。ただ、今のVJたちがもっと直接的な影響を受けたのは、ロックンロール全盛期をサイケデリックなビジュアル表現で彩った多くの映像パフォーマーたちです。
マーク・ボイル(写真の人物)とジョーン・ヒルズによる音と光のパフォーマンス「ソンエリュミエール」
中でも重要な役割を果たしたのが、1960年代からパイオニアとして活躍し、今年初旬に亡くなったスコットランド人アーティストのマーク・ボイル
1966年12月23日、マーク・ボイルと妻のジョーン・ヒルズは、ロンドンのハイセンスなUFO Clubで「土・空気・火・水のソンエリュミエール」と題した音と光のパフォーマンスを行いました。強力なAldisのプロジェクタを使ってボイルが映写したのは、死の苦しみにもがく昆虫、精液や嘔吐物といった分泌物による造形など、様々な化学反応の拡大映像でした。
ボイルに影響を与えたのは、ジョー・キャノンの、LSDによる幻覚世界のビジュアル表現
キャノンは度々「ピンクフロイドの5人目のメンバー」と呼ばれ、プリズムを使って白色光を虹色のスペクトラムに分解するという手法を用いました。ボイルはまた、グスタフ・メツガーの「破壊芸術」にも影響を受けていました。ロンドンでのパフォーマンスの後、ボイルは突如としてロックバンドから引く手あまたとなり、1967 年にはソフトマシーンとジミ・ヘンドリックスのツアーに参加して、彼らの熱狂したサウンドのバックを有機的なサイケデリック映像で彩りました。
マーク・ボイルとジョーン・ヒルズによる音と光のパフォーマンス「ソンエリュミエール」
ボイルがパフォーマンスに用いていた化学反応は予測できる類のものではなく、もちろん音楽に合わせて動かすことなど不可能でした。それでもなぜか常にしっくりくるものがあった、とボイルは語っています。模倣されることを警戒したボイルは、自分の「レシピ」を秘密にして頑なに守っていました。「ロンドンでショーをすると、ライティングパフォーマンスに関わっている他の連中が必ずそこに来ているんだ。彼らは僕が『被害妄想』と噂されているのを知っていて、僕が何か新しいことをやるたびに、こっちを向いて『最高だ。来週までには僕らもやり方をつかんでみせるよ』なんて言うのさ」と、ボイルは話していました。
VJ カルチャーの幕開け
70年代後半になると、クラフトワークやジャン・ミッシェル・ジャールといったアーティストたちが、ライブで目の覚めるようなビジュアルを使い始めます。ジャールはいつも、ライブ会場の側のビルからメッシュのスクリーンを垂らし、そこにレーザー光線をあてるという方法を用いていましたが、ピラミッドやエッフェル塔にまで映写したこともあります。80年代に入った頃には、音と映像で演出した大規模なライブが流行しました。その当時、多くのライブで革新的なビジュアルが取り入れられましたが、中でも際立っていたのが映画監督のデレック・ジャーマンを起用したペットショップボーイズのライブです。演奏するメンバーの背後に、スーパー8で撮影した映像が映し出されるという趣向でした。また、デペッシュモードとフォトグラファー兼映画監督のアントン・コービンのコラボレーションも見事でした。しかし、今のVJのような、デジタルを駆使した映像を音楽に合わせて表現するという形態ができ始めたのは、1990年代に入ってからです。VJが登場してきた背景には、2つの流れが1つに合流したということがあります。まず、ビデオプロジェクタとマルチメディアコンピュータの性能が向上し、価格も徐々に低下してきました。それと同時に、電子音楽が登場し、DJの活動範囲が広がる中で、華やかなロックバンドに代わって1人のDJがターンテーブルを回すという場面が増え、見た目の地味さを補うビジュアルが求められるようになりました。
VJたちのヒーロー
最初に大人気を博したVJチームのひとつに、クリス・アレンとアンディ・フライホイールがロンドンで結成したザ・ライト・サージョンズがあります。1995年以来、ザ・ライト・サージョンズはスニーカーピンプス、プロペラヘッズ、ハーバライザーといったアーティストたちのツアーでビジュアルを担当しています。過剰なまでにメディアを駆使するのが、ザ・ライト・サージョンズのスタイルです。映像を細かく編集し、高層ビル群や高速道路、道端のアーティスト、揺らめくネオンの光といったイメージをいくつも重ね合わせ、挑発的なコラージュに作り上げます。彼らの活動は今やアートとパブリッシングの領域にまで発展しています。デザイナーのロン・アラドとのコラボレーションでインスタレーションを制作し、1999年にロンドンのICA(現代美術センター)で開催されたグループ展「Stealing Beauty」でも作品を発表しました。最近では彼らのビジュアル作品を収録したDVDが日本のGASBOOKから発売されました。
マッシブ・アタックのライブでUVAが行ったビジュアルパフォーマンス
しかし充足と完成に行き着いたものは、やがて普遍性を帯びたあいまいな揺らめきへと昇華することがあります。ロンドンを拠点とするもうひとつのチームUVA(United Visual Artists)は、U2、カイリー・ミノーグ、オアシス、マッシブ・アタック、ベースメントジャックスといった面々とのコラボレーションでよく知られる集団で、細部までコントロールされたビジュアルアプローチを行っています。2005年のU2「ヴァーティゴ」ツアーで、UVAとショーデザイナーのウィリー・ウィリアムスは、プログラミング可能な「LEDカーテン」を使用しました。このカーテンがデジタルの巨大な滝のようにバンドの背後できらめき、その上に設置されたワイドスクリーンには4つに分割された大画面にメンバーのクローズアップが映し出されます。ステージの進行に合わせて高さを調節できます。
このカーテンが「滝モード」でないときには、ジュリアン・オーピーとキャサリン・オーウェンの創り出す映像が映し出されます(オーピーの映像は歩く人物をデフォルメしたミニマリスティックなアニメーションです)
MiSPHEREのカーテンは360度の視野角で映像を表示できるため、誰の目からもステージを遮ることなくイメージやパターンを映し出すことができたのです(ステージの正面だけでなく後方にも客席が設置されていたため、360アングルは重要だった)
UVAによるU2ライブのビジュアルパフォーマンス
今のVJたちに、誰にインスパイヤされたかと聞いてみると、イギリスを拠点とするコールドカットの名が最初に挙がるでしょう
コールドカットのマット・ブラックとジョナサン・モアは、DJとVJを同時にこなし、自らの音楽を演奏します。彼らが操るのはシンセサイザー、音楽用ラップトップ、ビデオ用ラップトップ、そしてターンテーブルだ。1997年、バルセロナで「Sonar - アドバンスミュージック&マルチメディアアートフェスティバル」が開催された際、そこに出演するクールカットのために、ロバート・ペッパーレルが特別にビジュアルソフトウェアの開発・カスタマイズを行った。このソフトがベースとなって、1999年にコールドカットのレーベル「ニンジャ・チューン」のWebサイトからVJammが発売されました。VJammは、コールドカットのビデオクリップを使って映像とサウンドを編集できるサンプリングソフトです。例えば彼らの「ティンバー」という曲では、斧、チェーンソー、ブルドーザーなど、テーマにマッチしたビデオクリップが使われています。チェーンソーでソロまで演奏していますが、これもビデオスクラッチのみで作られたものです。コールドカットの辿ってきた道は、VJパフォーマンスの進化の歴史そのものです。1990年、コールドカットのモアとブラックは、映像グラフィックアーティストチームであるハードワイヤー(メンバーはロバート・ペッパーレルとマイルス・ビスマン)と組み、CD-ROMやビデオ、コンピュータゲーム、クラブ向けのビジュアルやインタラクティブなミキシングの研究・開発を行うラボとして、Hexを結成しました。ユーザはCDIジョイスティックでこのビジュアルを操作できる)は、「ホーム・ナイトクラブ」といったコンセプトで制作され、コンピュータゲームと音楽、ライティングパフォーマンスがひとつになった作品です。
ソフトとハードに関するQ&A
アイルランド人VJのバリー・カレン(ドッジーステレオのメンバー)は、ライブイベントのビジュアルパフォーマーとして10年以上の経験を持っています。彼のキャリアの中に、進化を遂げてきたテクノロジの奇跡を見ることができます。最初カレンは、自分が所属していたバンドで当たり前に使っていたステージ照明の代わりに、静止画のスライドを取り入れることからスタートしました。
そのスライドには、「R
Crumb's Zap」といったアンダーグラウンドなコミックの画像を使っていました。その後カレンはスーパー8の映像とループを取り入れるようになります。最初の頃は自分で実験的に制作した照明など短いものを撮影していましたが、やがてロゴなどの完成素材を使ってストップモーションの制作を始めます。彼が手本にしたと言うレン・レイのテクニックは、フィルムに直接ペイントやスクラッチをほどこし、さらに台所で漂白剤やカレーを使ってユニークな効果を生み出すというものでした。「ループは随分かっこよく見えるようになったし、イベントの夜になってオリジナルのループを作ることもできるようになった」とカレンは振り返ります。
「16ミリにも手を出そうとしたけど、年代物の機材はあてにならなくてストレスが溜まったよ(ほとんどの機材は廃物置き場やゴミ箱やリサイクルショップで見つけたものでした)
ただでさえ脆いフィルムが絡まってしまって最悪でした。
それ以来、デュアルビデオをデジタルプロジェクタにつないでVJするか、用意しておいた『コンピュレーションテープ』セットを使うようにしています」
用意しておいたスーパー8のフッテージやビデオコレクション、それにカメラのライブ映像やFlashアニメーションも、このソフトで扱うことができます。さらにResolumeには、コントロール可能なスクリーンセーバーの生成アルゴリズムのような基本機能も搭載されています。ベルリンを拠点に活動するVJユニット、フローラ&ファウナ・ビジョンのリー・ハースに聞いてみると、今のVJが揃えている機材は、ラップトップ3台、DVDプレーヤー2台、パナソニックのMX-50ビデオミキサー2台、モニタ4台、ライブカメラ1台、そしてラッキーストライク2パックが基本だそうです。
ではその他に、今のVJたちは、どんなソフトウェアやハードウェアを使っているのでしょうか
モーマスのビデオ用にマンブルボーイが制作したアニメーション
ベルリンで活動するスペイン人の若手VJマリオ・カンポスはArkaosを使っていますが、その理由を彼は「僕が使っている地味なラップトップのRAMを最大限に活用できて、クリップの処理速度が落ちないから」と説明します。オレゴン州ポートランドを拠点とするE-Rockは、いつも活動を共にするマンブルボーイのために、ミッキー・エレファントのカール・アッカーマンがカスタマイズしたFlashインタフェイスを使用しています。「普通の人には特殊すぎるだろうけど、僕らのスタイルに完璧にマッチするように作られている」とE-Rockは話します。
「僕やマンブルボーイが作ったFlashのループを、僕が何百本もミックスするんだ」
アメリカ在住の日本人アーティスト)は、落書き風のイラストやピクセル分解した画像を使い、イマジネーション豊かでウィットに富んだFlashアニメーションを制作しています。そのマンブルボーイは、「前はFlashだけを使っていた」と話します。ビデオカメラを立てて、紙のスケッチブックに絵を描きながらビデオで撮って、それをミックスすることもあります。僕の普段のスタイルとは違って見える。
Flashで作ったエレメントにブラーをかけたりね
それってFlashだけじゃできないよ
それに、Flashファイルでピクセル素材も使えるし
だから、ずっとダイナミックなものが作れるんだ。オブジェクト指向型プログラムのMax/MSPを使えば、同期されている任意のオブジェクトや、コンピュータが認識可能な機器をコントロールできます。音と映像をすべて同時に構成してコントロールできるので、マルチメディアのプロには理想的です。その一方で、複雑なプログラミングをマスターするという険しい道を避けて通る、モーリス・ラ・マンチャ*のようなVJもいます。
「ソフトだとかハードだとか、そういうものには別にこだわらない」と言うラ・マンチャ
「やりたいことをやれるツールなら、それで満足さ」
コンパクトでシンプルであることの方が大事、と彼は言います。
ライブで使うセットはシンプル&イージー
だからその場で音楽の雰囲気やニュアンス、ペースにも反射的に対応できるのです。彼はこうも語っています。
「DJのエゴってやつに、僕は身をゆだねてるわけじゃないんでね
だからDJブースにもカメラは置かない。
完全にスクリーンのスペースの無駄づかいだよ
黒い皿を回してる誰かの手をスクリーンに映すなんて
ビジュアル的に、何もおもしろくないんだから」
ハースも、テクノマニア的なVJのあり方を敬遠するひとりです。
「私は自分の頭の中で起こっていることに集中したいの
自分が知ってるソフトをどう使って、満足のいくものを作れるかってことに
ビデオミキサーとしては、今のところラップトップにVDMXかGridだけを積んで使ってるわ
では、インプロバイザーとしてのVJの役割とは何か
どうやって音楽やクラブの雰囲気にその場その場で対応しているのか
この点について、ハースがおもしろい例えをしています。
「VJのパフォーマンスは、映画に例えるのが一番わかりやすいと思うの
撮影とプリマスタリング、ラフ版の編集が終わっている状態で、そこから完成版フィルムを作るのがVJの仕事
満員の観客の目の前で、仕上がったサウンドミックスを初めて聴きながらね
」と言った後に、「すごく大変なこと」と彼女は付け足しましたが、それは聞かなくても十分に想像できます。何となくスローに始まったライブも、クラブに人が増え、音楽もボリュームが上がってヒートアップするにつれ、VJもペースを上げていきます。ですが、あらかじめ用意しておいた素材がその場の雰囲気やビートにぴったりはまるようなことがあれば、それは一種の芸術作品に等しい。VJ経験の浅いマリオ・カンポスは、「自分の用意したものをライブに合わせるのは本当に難しいと思うことがある」と話します。「サイケでトランスっぽいものを用意していると、クラブがロックンロール一色になったりする。そういうことは実際しょっちゅう起こるんだ。その雰囲気に合わせるなんて絶対むりだと分かっていても、ひたすら6時間もやり続けないといけない。
どんな雰囲気や音楽にもマッチするようなアニメーションのアーカイブを作ろうと思ってしばらく頑張ったけど、途中で一貫性も自分のエネルギーも消えうせちゃったよ
一方E-Rockは、準備万端で安心してライブに挑んでいるといいます。
「リアルタイムでデザインすることはまずないね
用意しておいたFlashファイルも、ライブの場でコンポジットしたりコラージュすることはない」と彼は言うが、ライブには常にある程度の即興性がつきまとう。「VJのパフォーマンスには、何をやってもいいっていうようなところがあるんだ。
マンブルボーイがすごくクールなことをやっていてね
その場で人の絵を描きながら、それを撮影してVJのセットにミックスするんだ。
先月それをAIGAの二次会でやったんだけど、すごくうまくいったよ
ララトーンのメンバー、ショーン・ジェームス・シーモアによるパフォーマンス
未来のデザイン
VJのアンブローズ・ホワイトは、初心者VJにありがちなミスを2つ挙げています。
「1つ目は、用意している映像が少なすぎるということ
同じようなループが何度も出てきて、進展がなくなってしまうんだ。それから2つ目は、ストーリーの一貫性や意義を表現できていないということだ。VJはどうでもいいようなものをいじくりまわして何時間でもステージを続けられるし、それはそれで楽しいかも知れないけど、観客の目からすると完全に失敗ということも多い。VJの仕事は、一貫性と関連性があっておもしろいものを創り出すことなのに、実際は10種類かそこらのクリップが繰り返されるだけで終わってしまうこともよくあるんだ。
ではVJの未来には何が待ち受けているのでしょうか
トップVJたちが今やっていることは
また、クリエイティブツールに対して今のVJは何を期待しているのでしょうか
UCE Birminghamでマルチメディアデザイナーを務めるロバート・シャールはこう語ります。「当社のビジュアル化リサーチ部門では、人体の動きをキャプチャし、その情報によってAVコンテンツをコントロールするという研究を進めています。
すでに装着用のMIDIスーツで、エアギターのパフォーマンスに音を合わせることができるようになっています(これに合うソフトウェアとしてはAbleton Liveが有力です)
嬉しいことに、AppleのMotionにモーショングラフィックス用のMIDIコントロールが搭載されたことで、可能性が広がりました。人体の動きをキャプチャしたMIDI情報と、FlickrのフィードやGoogleイメージ検索から入手したランダムな画像をリミックスする方法についても、いま当社で(他者と協力して)開発を進めています。2004年4月、ゴラン・レビンとザッカリー・リーバーマンは、パフォーマーが何か透明なものやOHPのガラス板の上で手を動かすと、その輪郭の動きを読み取ってグラフィックとサウンドを同期させられるというソフトウェアを開発しました。同期されたグラフィックやサウンドと一緒に、有機的に動く手のシルエットもアナログで映し出すことで、レビンとリーバーマンが「巨大な影が現実の映像や音を操る魔法」と言うようなパフォーマンスが実現しました。
一方、主にニューヨークで活動するミュージシャン、o
blaatことケイコ・ウエニシのように、テクノロジを追求するのではなく、社会的ネットワークを新たな形に発展させようとしている人もいます。ウエニシがこの5年間続けているイベント「Share」では、クラブ(セントマークスプレースにあるバーの奥の部屋や、ベルリンの「Transmediale」フェスティバル)にラップトップを操るミュージシャンとVJが大勢集まり、AVミキサーにつないで即興のジャムセッションを行います。また、マーケティングの分野でも新しい動きが進行中で、音楽レーベルがVJミックスのDVDパッケージを売り出すというトレンドも生まれています。GASBOOKのようなグラフィックデザインブックの発売元からは、VJ作品のDVDリリースも開始され、イギリスのWarpをはじめとする音楽レーベルでもこれが重要なサイドビジネスになっています。
しかし、新しく出てきたものの上に、また新たなものを積み重ねることで、いったいどこへ行き着くのでしょう
コールドカットのショーでの経験から、キース・ジラルドはこう語ります。「僕は目を閉じて、そのうち部屋も出てしまった。
すさまじいビジュアルにのみ込まれずに、ただ音楽を聴くには、そうするしかなかったんだ」
ジラルドは、ビジュアル的な刺激がなくても音楽を楽しめる感覚を、「安全装置」として持っておくべきだと考えています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
ようこそ、さん
お問い合わせ
ホームユーザ向け写真/ビデオ編集ツール
すべての業種・ソリューション ›すべての製品 ›アドビサポートに問い合わせる。
注文状況の確認
教職員および学生
アドビについて
投資家の皆様へ*
地域・社会への貢献*
お問い合わせ
個人またはホームオフィス
法人のお客さま
教育関係のお客様
おすすめ製品
すべてのソフトウェアを見る ›
購入後について
割引価格でコスト削減
ライセンスをご利用中のお客さま
その他の購入方法
販売店のご紹介
アドビ製品を連携させて効果的に活用する方法について、新機能や主要ワークフロー、高度なテクニックを紹介しながら、ステップバイステップで解説するチュートリアルです。以下のナビゲーションから製品Design Centerをご覧いただくと、チュートリアルを検索できます。製品別のチュートリアルは、デベロッパーセンターでご覧ください。
アドビ製品を使用するためのベストプラクティス
「このコントロールをアクティブ化して使用するにはクリックしてください」というメッセージについて*
赤目の自動修正*
注目のチュートリアル
カラーガイドを使用したカラーソリューションの検索と作成
このビデオチュートリアルでは、Illustrator CS3のカラーガイドパネルを使用してカラーグループの検索、作成および保存を行う方法を学びます。新しいバリエーショングリッドを使用したり、カラーの選択を特定のライブラリに限定したりすることで、時間を短縮する方法を紹介します。ActionScriptのいくつかの中心的な原理や、インタラクティビティについて学びます。0コードを記述してボタンを作成する方法を学びます。コードの各行が詳しく説明されているので、記述するActionScriptコードの理解を深められます。また、複数ファイルの配置、クイック適用、ダブルクリックで合わせるなどの素晴らしいテクニックについても学びます。この短いビデオチュートリアルでは、FlashコンテンツをDreamweaver CS3でテストしたり、SWFファイル周辺のサイトレイアウトを修正したりする方法を説明します。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
ようこそ、さん
お問い合わせ
ホームユーザ向け写真/ビデオ編集ツール
すべての業種・ソリューション ›すべての製品 ›アドビサポートに問い合わせる。
注文状況の確認
教職員および学生
アドビについて
投資家の皆様へ*
地域・社会への貢献*
お問い合わせ
個人またはホームオフィス
法人のお客さま
教育関係のお客様
おすすめ製品
すべてのソフトウェアを見る ›
購入後について
割引価格でコスト削減
ライセンスをご利用中のお客さま
その他の購入方法
販売店のご紹介
製品をお持ちかどうかは関係ありません。アドビとそのコミュニティのプロフェッショナルたちの知識を集めた、このVideo Workshopでは、業界をリードするデザイナーやデベロッパー、アドビエキスパートが、操作方法や様々なヒント、テクニックを紹介します。初めて製品をお使いになる方のための入門ビデオはもちろん、ベテランユーザ向けに新機能やキーテクニックを解説するビデオもご用意しています。その際、下に表示される各ビデオの詳細を参考にお選びいただけます。ビデオは1本に1つの課題を収録しており、通常3~5分程度の内容です。ほとんどのビデオには、イラスト付きのチュートリアルとソースファイルが用意されているので、詳しい手順を印刷してご自分で演習を実践してみることもできます。図2:選択されたビデオチュートリアルが、ビデオプレーヤーに表示されます。定期的に新しいビデオチュートリアルがオンライン上に追加されますので、オンラインワークショップで新着ビデオをチェックしてください。
製品メニューとトピックメニュー
画面上部にある製品メニューとトピックメニューで、学びたい製品とトピックを選択します(図3参照)
選択する製品名またはトピック名をクリックしてください。製品を選択すると、選択された製品に関するトピックのみがトピックリストに表示されます。すべての製品、またはすべてのトピックを選択することも可能です。ビデオには、初心者向けのものもベテランユーザ向けのものもあります。トピックフィルタを使用してニーズに合った内容のビデオを見つけてください。
初心者向けには、トピックメニューで「入門」を選択
製品の新機能だけを見たい場合は、トピックメニューで「新機能」を選択
図3:画面上部のメニューから、学びたい製品とトピックを選びます(複数選択可)
画面中央には、先ほど選択した製品とトピックに該当するビデオが一覧表示されます(図4参照)
ビデオのタイトルをクリックするとそのチュートリアルの内容が表示され、タイトルをダブルクリックするとそのビデオが再生されます。図4:ビデオメニューの中からビデオのタイトルをクリックすると、その内容の詳しい説明が表示されます。ビデオのタイトルをダブルクリックすると、ビデオが再生されます。ビデオメニューは製品別に並べられています。列の見出しをクリックするとリストの並べ替えができます。レベルやトピック、プレゼンターによって並べ替えることもできます。ビデオリストの右上にある「ビデオメニューのカスタマイズ」を選択すれば(図5参照)、ビデオメニューに列を追加または削除できます。図5:「ビデオメニューのカスタマイズ」をクリックすると、ビデオメニューに列を追加できます。
ビデオの詳細エリア
画面下部のビデオの詳細エリアには、選択したビデオの情報とオプションが表示されます(図6参照)
ビデオの内容、プレゼンター、レベル、製品、およびトピックが左側に、 学習方法のオプションが右側に表示されます。ビデオを再生: ビデオプレーヤーウィンドウでビデオを起動します。ブックマーク(オンライン): ブラウザウィンドウを開いてビデオを再生し、ブラウザのお気に入りにそのビデオを追加します。
HTMLチュートリアルを読む(オンライン): ブラウザウィンドウを開いてチュートリアルの手順をステップごとに表示します(一部のビデオでは利用できません)
ソースファイルのダウンロード(オンライン): このビデオで使用されているオンラインソースファイルをダウンロードします(一部のビデオでは利用できません)
フィードバック: ブラウザウィンドウを開いて、このビデオに関する意見や感想を投稿します。図6:詳細エリアには、ビデオに関する情報が表示されます。また、ビデオの再生やお気に入りへの追加、ソースファイルのダウンロード、HTMLチュートリアルを読む、フィードバックを送るなどのオプションもここから選べます。
ビデオプレーヤーウィンドウにはいくつかのコントロールボタンがあります(図7参照)
図7:ビデオプレーヤーには、左から右の順番に、以下のコントロールボタンが備わっています。ビデオプレーヤーウィンドウ左下端から順に以下のコントロールボタンがあります。
ビデオの再生または一時停止
ビデオの再生を中止
ビデオスクラバー: ハンドルをドラッグしてビデオの再生ヘッドを操作します。音量調節: ハンドルをドラッグしてビデオの音量を調節します。「前のビデオ」を選択すると、ビデオメニューでひとつ前の順番のビデオをプレーヤーがロードします。「次のビデオ」を選択すると、ビデオメニューでひとつ後の順番のビデオをプレーヤーがロードします。図8:ビデオプレーヤーウィンドウがビデオを表示します。ビデオメニューの前のビデオに戻ったり、次のビデオに進むこともできます。
お客様のWebサイトでのビデオチュートリアルの使用
アドビのビデオチュートリアルをWebサイトでお使いになりたい場合は、アドビの著作権と商標について( http://www
アドビの著作権と商標の帰属について正しく理解していただく必要があります。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
ペイントおよびマスクツールの使い方
また、シェイプツールを使ってフッテージにマスクを追加する方法もご紹介します。この記事に書かれた操作を行うには、以下のソフトウェアとファイルが必要です。ペイントツールを利用するには、「コンポジション」パネルではなく、「レイヤー」パネルを利用します。黒い背面レイヤーをダブルクリックします。「コンポジション」パネルのあった場所に、「レイヤー」パネルが開きます。ツールバーからブラシツールをクリックします。「パネルを自動的に開く」にチェックが入っているとブラシツールに関連したパネルが自動的に開かれます。「ワークスペース」ドロップダウンメニューから、「ペイント」を選択するとペイント作業に適したワークスペースに切り替えることも出来ます。しかし、実際にはPhotoShopとはまったく異なった仕様になっています。PhotoShopではペイント操作はラスターベースで行われます。そのため拡大すると、そのエッジにピクセルが目立つようになります。ですから、クォリティを損なうことなく拡大することが出来ます。
実際に操作を行ってみましょう
まず、色を選択します。スウォッチをクリックして、描画色を選択します。
こでは、青色を選んでみましょう
「ブラシチップ」パネルで、ブラシの形状などを設定します。直径を変えたり、真円率、硬さ、ブラシストロークのエッジのぼかし具合を調整することが出来ます。あるいは、プリセットの中から選ぶことも出来ます。また、これらの値はキーボードのショートカットを利用して設定することも出来ます。そして、そのままドラッグすると円が二重になります。これは、ブラシの硬さ、つまりエッジのぼかし幅を表しています。図2:円の二重部分がエッジのぼかし幅を表します。ここでは、プリセットから19ピクセルの直径のものを選んでおきます。レイヤーウィンドウで、適当な線を描きます。図3:適当な線を描きます。レイヤー上にペイントを作成すると、それはエフェクトとして見なされます。
では、タイムラインパネルの方で、どのような調整が出来るのか見ていきましょう
エフェクトを展開すると、このようにペイントのオプションがあるのが分かります。
「ペイント」のドロップダウン、「ブラシ」のドロップダウン
「ストローク」のドロップダウンと展開します。それぞれのオプションには小さなストップウォッチのアイコンがあります。ツールバーから「選択」ツールをクリックします。選択ツールで、描いたペイントストロークを動かすことが出来ます。
ストロークのオプションを幾つか調整してみましょう
「開始」のパーセンテージを調整すると、描画の開始点を調整することが出来ます。カラーをアニメートする事も出来ます。「直径」ではペイントストロークの太さを変更することが出来ます。「硬さ」ではエッジのぼかし具合を変更できます。「真円率」の値を下げると、ペイントストロークのコーナーまたはエッジの丸みが減少しカリグラフで描いたような平らな感じになります。「間隔」では線の密度を変更することが出来ます。間隔を広げることで点線のストロークに変更する事が出来ます。
図4:ストロークの間隔を変更
他にも「不透明度」や「流量」などがあります。トランスフォームを展開します。トランスフォームには、「位置」や「スケール」などの項目があります。
ペイントストロークの種類の変更
ペイントパネルに移りましょう
現在、選択ツールが選ばれていますので、ペイントパネルのほとんどのオプションは利用ができない状態になっています。ブラシツールを選択します。そうすると、ペイントパネルのオプションが利用できるようになります。「種類」のオプションを開きます。すると、「一定」「連続」「1フレーム」「カスタム」が選べるようになっていることが分かります。現在は「一定」が選ばれています。「一定」を選んでおくと、このペイントストロークがフレーム間で同じ状態で残るようになります。「連続」を選択すると自動的にペイントストロークのアニメーションが作成されます。「1フレーム」を選択すると、ペイントストロークの描画対象が1フレームだけになります。
では、「連続」を選ぶと、どのようにペイントストロークが描かれるか見て行きましょう
図5:ペイントの種類で「連続」を選びます。既に作成したペイントストロークと見分けが付くように、描画色を赤に変更します。
同じように、適当に線を描きましょう
書き終わった瞬間に、線が消えて見えなくなりました。
では、スペースバーを押して再生してみましょう
すると、自動的にペイントストロークがアニメーション再生されるのが分かります。別のコンポジションを開き、ワークスペースを「標準」に変更します。フッテージをダブルクリックします。ペイントツールを選択して、レイヤーウィンドウ上でペイントします。ペイントパネルの「種類」が「連続」のままになっていますので、「一定」に戻します。PhotoShopと同じように、Altキーを押しながら一時的にスポイトツールに切り替え、レイヤーウィンドウ内の白い部分をクリックして色を拾います。ブラシチップのプリセットからブラシのサイズを選び、フッテージを塗ります。
図7:白で塗られるフッテージ
コピースタンプツールの利用
ツールバーから、「コピースタンプツール」をクリックします。図7:コピースタンプツールを選択します。PhotoShopと同様に、このツールを使ってある場所からデータまたはコンテンツをサンプリングして、別の場所にペーストすることが出来ます。任意のフレームにインジケータをおきます。Altキーを押しながら、クリックしてサンプルを取得します。別のフレームにインジケータをおき、ドラッグするとサンプル元の画像がペーストされます。図8:別フレームにインジケータを置き、ドラッグするとサンプル元の画像がペーストされます。
このような操作を正確に行うには、「コピーソースオーバーレイ」を利用すると良いでしょう
コントロールパネルの下部に「コピーソースオーバーレイ」のチェックボックスがありますので、クリックしてオンにします。フッテージにカーソルを合わせると、サンプル元の画像がオーバーレイで表示されます。オーバーレイで表示されたサンプル元の画像を参考にして、正確にクローンを作成することができます。
マスクの操作
マスクの操作はコンポジションウィンドウで行います。ツールバーから長方形ツールを選択します。フッテージを選択し、コンポジションウィンドウでドラッグをして長方形を描きます。ドラッグした範囲にマスクが作成されました。タイムラインパネルを確認すると「マスク」のオプションが追加されていることが分かります。現在、マスクのビベイビアは「加算」となっていますが、これを「減算」に変更します。これにより、フッテージ上に穴が開いたような状態になります。図9:マスクのビヘイビアを「減算」に変更します。さらに、マスクのプロパティを表示し、マスクの境界をぼかすこともできます。また、マスクを拡張することもできます。
マスクを加算に戻し、マスクパスを使ってマスクされた箇所のアニメーションを作成しましょう
マスクパスのストップウォッチをクリックし、フレームを進めます。選択ツールをクリックし、ポイントをドラッグして変更し、好きなところに移動します。
スペースキーでプレビューしてみましょう
After Effectsが二つのマスクの形状を自動的に補完し、滑らかなアニメーションが作成されます。
次のステップ
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
Flexコミュニティのエバンジェリストに注目してください。Flexのノウハウを発信しています。
FlexおよびJavaアプリケーションのアーキテクチャ
FlexおよびJavaアプリケーション構築のためのテクノロジー
FlexおよびPHPアプリケーションのアーキテクチャ
タイムライン派が注目するFlash CS5新機能ガイドツアー
Vectorクラスを使用したプログラミング
Webページ制作の効率をUPするためのカスタマイズ
Dreamweaverをカスタマイズするには、環境設定を変更したりエクステンション
テンプレート機能を使ってみよう パート1:「編集可能領域」
検索機能とXSLTを利用して「制作ページ一覧」を作成する。
Webページへのビデオの追加
CSSによる簡単なスタイル指定
私たちはFlash Catalystをコンセプトから現実にするために惜しみない努力を注いできました。
これからはじめるAIRプログラミング 第3回
AIRプログラミングに関する基本知識から開発方法の基礎を習得していただくことを目的とする連載です。フレームレートスロットリングとは何か、どのようにアプリケーションに実装すればよいかを説明します。
オリジナルのテクスチャを作って、デザインの幅を
Fireworksには、あらかじめたくさんのテクスチャが用意されてい
シンボルを使用して作業効率を高めよう
インタラクティブプロダクトのデザインにこそFireworksを
ビデオを見たり、サンプルコードを参照したり、チュートリアルを学習できます。
短時間でのアプリケーションの構築
データベースの変更
コードのテストとデバック
Webサーバーへのアプリケーションのデプロイ
アプリケーションの外観の変更
円グラフの追加
ダイナミックPDFフォームでのハッシュの生成
パスワード保護されたダイナミックPDFフォームに対してハッシュを使用する方法
セキュリティ上の脆弱性によって起こりうる問題について、重要な情報を提供しています。アドビのソフトウェアを評価していただくために、全機能を搭載した30日間体験版を提供しています。今すぐダウンロード ›Web制作者向けプロフェッショナルツールの最新情報、ユーザ事例やセミナー、Tipsなどをご紹介するメールニュースです。今すぐ申し込む ›ポート情報検索ページが一新されました。サポート情報をお探しの場合はこちらの検索ページをご利用ください。サポートを検索 ›Webやモバイルコンテンツ制作、映像配信などに関る方は必読です。
お申し込みはこちら
PDFを活用したドキュメントソリューションや、Flashテクノロジーによるリッチインターネットアプリケーション(RIA)の活用に役立つ情報を定期的にお届けいたします。
お申し込みはこちら
サンプルプロジェクトやコードを中心に取り上げたテクニカルデベロッパーコンテンツです。
電子メール通知の登録申込をする*
最新の記事を見る*
フィードのカスタマイズ*
すべてのアドビブログフィードを見る*
すべてのアドビ製品フィードを見る*
お勧めのサンプルアプリケーション
Flexストア: 自動機能のついたサンプルアプリケーション*
その他のサンプルアプリケーション*
コードの共有、ソリューションの共有
コードおよびソリューションの共有を目的としたコミュニティ中心のリソースです。疑問を解決したり、知識を共有したりすることができます。
ブラウザ間の互換性、CSSについての疑問をすぐに解決
また、あなたがお持ちの有益な情報や専門知識をコミュニティに共有できます。
アプリケーション、コンポーネント、拡張機能などの共有
拡張機能、アクション、スクリプト、テンプレートおよびアドビアプリケーションの機能を拡張するその他のアイテムをダウンロードすることができます。最も一般的なソフトウェアアップデート、コンテンツ開発キット、ソフトウェア開発キットをダウンロードして、デザインおよび開発作業のレベルを一段階引き上げることができます。次のソフトウェア開発キット(SDK)およびその他のデベロッパーリソースがアドビ製品向けに提供されています。
その他のダウンロード
体験版のダウンロード
ほかのITプロフェッショナルに大きく差をつけることができます。新しくなったFlex認定試験に合格することで、Flexに関するスキルと知識を明確に示すことができます。
インストラクターの指導によるコース*
アドビ社員による投稿*
お勧めのブロガー
人気のアドビブロガー
ユーザグループの検索
参加者への特典(抜粋):
コミュニティ主導の以下のリソースでは、ソリューションを他のユーザと共有したり、コーディング時の一般的な問題について他のユーザからアドバイスを受けることができます。
世界中のアドビユーザに対して1対1のサポートを提供
さらに詳しく*
アドビコミュニティエキスパートを探す*
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
当初からインタラクティブな機能のプログラミング用に開発されたActionScriptでは、簡単なアニメーションから、大量のデータを扱う複雑でインタラクティブなアプリケーションインターフェイスまで、あらゆるAdobe Flashプラットフォームアプリケーションを効率よくプログラミングできます。
デベロッパーおよびデザイナーへのインタビュー
0のプログラミング
0でアプリケーションを開発するにあたっての、基礎的な情報が含まれています。0の中核的なコンセプトを紹介するとともに、オブジェクト指向のActionScriptプログラミングについても解説します。また、Adobe Flash PlayerおよびAdobe AIR特有のパッケージやクラスに実装された重要な機能群を解説するとともに、アプリケーションのプログラミングコンセプトを紹介するためのサンプル集も収録しています。0でのアプリケーション開発について詳しく説明します。
5アプリケーションの開発
実行時のパフォーマンスとデベロッパーの生産性が著しく向上しています。
作業の開始*
最新のランタイムを入手
最新ツールを試用
最新サーバーを試用
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
0の概要 | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
0はオブジェクト指向の強力なプログラミング言語で、Flash Player実行時の可能性を大きく進化させることができます。0の目的は、急速に増加するリッチインターネットアプリケーションのために理想的な言語を提供することです。こうしたアプリケーションはWebでの体験に欠かせない要素になっています。ActionScriptの従来のバージョンも、魅力あるWeb体験を提供するために必要な機能と柔軟性を備えていました。0は優れたパフォーマンスと使いやすさを備えた言語で、高度に複雑なアプリケーション、大量のデータセットおよびオブジェクト指向の再利用可能なコードベースに簡単に対応することができます。0を使用すれば、Flash Player向けの高性能のコンテンツとアプリケーションを効率よく開発することが可能になります。0は、スクリプト記述用の国際標準プログラミング言語であるECMAScriptを基礎としています。AVM1は従来のActionScriptコードを実行するための仮想マシンで、現在のFlash Player用の強力なコンテンツの開発、およびさまざまなインタラクティブメディアやリッチインターネットアプリケーションを実現するために使用されました。しかし、開発者はAVM1の限界を感じ始めていました。現在のプロジェクトはより強力な仮想マシンを必要としています。0には新しく開発された高度に最適化されたAVM2が搭載され、そのパフォーマンスは前バージョンに比べ飛躍的に高速化しました。Flash Player実行時を対象にしたコンテンツやアプリケーションを作成するさまざまな製品があります。こうした製品は多くの場合、作品にインタラクティブな操作やビヘイビアを追加するためにActionScriptを組み込んでいます。0の新機能を使用することができる最初の製品となる予定です。0の目的は一貫性のあるより良いプログラミングモデルを提供すること、業界標準に準拠すること、そして従来の製品に比べて大幅に向上したパフォーマンスを実現することです。0は実行時用の新しいプログラミングモデルを提供しますが、オブジェクト指向プログラミングの基本的知識があれば、簡単に使用することができます。0は次のような特長を備えています。安全性:型の安全性を確保できるので、あいまいさのないメンテナンスの容易なコードを記述することができます。簡単:直感的に使用できるので、リファレンスマニュアルをひんぱんに参照しなくても、プログラムを読んだり記述したりすることができます。パフォーマンス:複雑であっても効率的で応答性の良いプログラムを記述することができます。互換性:下位互換性と上位互換性を備え、業界標準に準拠しています。コア言語は文、式、条件、ループおよび型などのプログラミング言語の基本的な単位を定義しています。0には強力な新機能が多数搭載されており、開発プロセスを大幅に高速化することができます。正規表現を使用できるので、テキストに対してさまざまな強力な演算を適用することができます。新しいDisplay List APIによって、ビジュアルオブジェクトを直接的で一貫性のある方法で操作することができます。標準化されたDOMイベントモデルによって、実行時にオブジェクト同士を対話させることができます。0の数多くの新機能のほんの一部です。0では ECMAScript標準に準拠したものとなり、さらに新機能や強化された機能が加わりました。0 リファレンスガイド』を参照してください。次に、新機能の利点と使用方法の概要を説明します。0では多くの実行時エラーは報告されません。しかし、エラーが報告されないため、ActionScriptプログラムのデバッグがむずかしくなります。0では一般的なエラー条件のさまざまな実行時例外が用意されているので、デバッグが容易になり、アプリケーションでエラーを確実に処理できるようになります。実行時エラーの際にソースファイルと行番号の情報が提供されるので、エラーを素早く正確に特定することができます。0では、型の注釈は主に開発者を補助するためのもので、実行時にすべての値が動的に入力されました。0では型の情報が実行時に保存されるので、さまざまな目的に利用することができます。Flash Playerによって実行時の型のチェックが行われるので、システムにおける型の安全性が向上します。型の情報を使用して、ネイティブマシンの表現で変数が表現されるので、パフォーマンスが向上し、使用するメモリを少なくすることができます。0にはシールクラスの概念が導入されています。シールクラスは、コンパイル時に定義されたプロパティとメソッドの固定セットのみを所有し、プロパティとメソッドを追加することはできません。このため、コンパイル時に厳格なチェックを行うことが可能になり、より堅牢なプログラムを作成することができます。各オブジェクトインスタンスの内部ハッシュテーブルが必要ないので、メモリ使用量も少なくなります。ダイナミックキーワードを使用するダイナミッククラスも可能になります。
メソッドのクロージャ
0では、組み込みのイベント代理を提供するメソッドのクロージャによってイベント処理が簡単になります。0では、抽出元のオブジェクトインスタンスがクロージャに保存されないため、クロージャを呼び出したときに予期しない動作が起こることがありました。
一般的な解決策はmx
Delegateクラスを使用することでしたが、そのためには次のようなコードを記述する必要があります。0では必要ありません。元のオブジェクトインスタンスがメソッドのクロージャに自動的に保存されます。次のように簡単に記述するだけで済みます。E4Xによって、自然でなめらかな言語でXMLを操作できます。従来のXML解析APIとは異なり、E4XではXMLをネイティブデータ型であるかのように操作することが可能になります。必要なコードの量を大幅に減らして、XMLを操作するアプリケーションを効率的に開発することができます。0は正規表現をネイティブでサポートするため、文字列を素早く検索して操作することができます。名前空間は宣言の可視性を制御するための革新的なメカニズムです。宣言の可視性(public、private、protected)を制御するために使用する従来のアクセス指定子と同様に、名前空間も基本的にはカスタムのアクセス指定子で、選択した名前を使用することができます。また、E4Xを使用する場合にはXML名前空間を表すこともできます。
新しいプリミティブ型
0では、新しくint型が追加されました。int型はループカウンタに便利で、ほとんどの場合は小数点が必要ありません。符号なしの32ビット整数型で、int型と似ています。つまり、この機能はActionScriptのコア言語と他のプラットフォームの橋渡しをします。Flashアプリケーションにとって非常に重要で、また、コア言語を補完する重要な役割も果たしています。スペースの関係でここではAPIについて詳しく説明できませんが、新機能や興味深い機能のいくつかについて説明します。イベントモデルによって、標準的な方法でイベントメッセージを生成および処理し、アプリケーション内のオブジェクトが対話や通信を行ったり、状態を維持したり変化に応答したりすることを可能にします。このモデルはW3C DOM3イベント仕様に従っており、従来のバージョンのActionScriptのイベントシステムよりも明確で効率的なメカニズムです。FlexアプリケーションフレームワークではFlash Player APIと同様のイベントモデルが使用されるので、プラットフォーム間でイベントシステムが統一されます。新しいShapeクラスはRawベクトル形状を表現します。新しい演算子でこれらのクラスからインスタンスを生成したり、いつでも動的に再度親にしたりすることができます。リストオブジェクトを表示するために深度の数値を割り当てる必要はありません。オブジェクトのzオーダを指定して管理する新しいメソッドが追加されました。
次のステップ
0の概要では、APIと言語の機能のほんの一部を取り上げました。0について詳しく学べば、もっと多くの機能について知ることができます。0のヒント」をご覧ください。このプラットフォームの将来にご期待ください。お待ちしております。
著者について
UCLA MBA 課程在籍中の一時、他の業界への転職を考えたものの、漂白剤の販売業務よりソフトウェア業界に従事する方がはるかに楽しいと考え、現在に至る。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
0 のヒント | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
0 はオブジェクト指向の強力な言語で、Flash Player 実行時の新しいプログラミングモデルとなります。
0 を使用してアプリケーションを開発するときに、言語にいくらか違いがあることに気づくでしょう
0 リファレンスガイド』で相違点の一覧を参照してください。0 への移行を簡単にするために、ヒントと開発中に発生する可能性のある一般的な問題について説明します。すべての変数、パラメータおよび戻り値の型を宣言します。これは必須ではありませんが、すべての変数、パラメータおよび戻り値の型を宣言することをお勧めします。これによって、コンパイラに有益なエラーメッセージがより多く表示されます。仮想マシンに前もって型を知らせることができるので、実行時のパフォーマンスも向上します。これは大変重要なので、デフォルトでは警告が表示されます。つまり、すべてのコードではなく、定義を含むパッケージのみに対して定義が可視になります。この違いにご注意ください。誤りを防ぐため、宣言に必ずアクセス指定子を使用してください。0 コンパイラに警告が表示されます。クラスはデフォルトではシールクラスになるので、実行時に動的にプロパティを追加することはできません。クラスをダイナミックまたはシールにすることができます。ダイナミッククラスの場合は、実行時にダイナミックプロパティを追加できますが、シールクラスの場合はできません。ダイナミックプロパティを格納するための内部ハッシュテーブルが必要ないので、シールクラスのほうがメモリを節約できます。また、コンパイラもより適切なエラーフィードバックを返すことができます。クラス定義をパッケージに含めるには、package宣言を使用します。0に追加されました。0 では、publicクラスを、クラスと同じ名前でファイルに含める必要がありました。1 つのファイルで複数のクラスを宣言することはできますが、publicに指定できるのは 1 つのクラスだけで、このクラスの名前をファイル名と同じにする必要がありました。クラスへの参照に完全な修飾子があっても、複数のクラスをインポートすることができます。MyClassを使用するには、次のように記述して読み込む必要があります。
すべての参照に完全な修飾子がある場合でも同様です(完全な名前MyPackage
0 では省略名を作成するためのみに使用しました。0 では、完全なクラス名はあいまいさを避けるためのみに使用され、importステートメントに置き換えられません。次のようにワイルドカード文字(*)を使用して、パッケージのすべての定義をインポートすることもできます。コードでどの定義を使用するのかを明確にするため、定義を個別にインポートするほうが適切です。メソッドのオーバーライドに常にマークが付きます。このoverrideキーワードは、オーバーライドされるメソッドに誤った名前やメソッドのシグネチャを指定する、またはオーバーライドされるメソッドの名前が変更されるなど、メソッドのオーバーライドのよくある問題を避けるために役立ちます。また、コードを見たときにメソッドがオーバーライドされることがはっきりとわかります。メソッドが別のメソッドをオーバーライドするかどうかがわかっているので、コンパイラでより有効な検証を行うことができます。関数で戻り値の型を宣言します。関数の戻り値の型を宣言することをお勧めします。戻り値の型を省略すると、警告が表示されます。これは型の安全を確保するためで、うっかり戻り値の型を宣言することを忘れて、デフォルトのObject 型が返されることを防ぐことができます。値を返さない関数の場合は、戻り値の型をvoidとして宣言します。代理が言語に組み込まれたので、イベント送信が簡単になりました。
0ではイベントをメソッドに渡すには、mx
Delegateクラスを使用するか、それに代わる方法が必要でした。0では、メソッドの参照に抽出元のオブジェクトインスタンスが自動的に保存されます。これはメソッドのクロージャと呼ばれます。要するに自動代理です。次のように簡単なコードを記述するだけです。Nullまたは未定義の参照のデリファレンスによって、例外が返されます。これまではエラーメッセージが返されませんでしたが、不用意にNullや未定義の参照をデリファレンスしないようにご注意ください。実行時エラーが発生すると、エラーの内容とエラーが発生した呼び出しスタックがダイアログボックスに表示されます。プロパティを明示的にバインド可能として宣言します。デフォルトでプロパティがバインド可能ではなくなりました。[Bindable]メタデータタグを使用して、バインド可能として宣言する必要があります。uiなど多数のパッケージになりました。utilsパッケージに移動しました。新しいTimerクラスがsetIntervalより優れている点として、例えば、インターバルID番号を扱う必要がなく、先進的なオブジェクト指向のインタフェースを使用できます。サブクラスイベントを使用します。イベントの型が明確になりました。また、イベントを新しいEvent基本クラスのサブクラスにする必要があります。新しいEventクラスによって、イベントシステムがより明確で効率的になります。さらにプロパティを渡す場合は、Eventをサブクラス化する必要があります。Objectを使用しない理由は、型の安全を確保し、効率を高めるためです。ビジュアルエレメントの場合はDisplayObjectを拡張する必要があり、他のクラスと同様に定義できます。newを使用してコンポーネントをダイナミックに作成して、addChildで表示リストに追加できるようになりました。E4Xは従来のFlashのXMLクラスよりもはるかに強力で、言語に適切に統合されており、数多くの新機能を備えています。従来のFlashのXMLクラスも引き続き使用することができます。xmlパッケージに含まれています。toStringメソッドは、オブジェクトの完全なXMLマークアップを返すとは限りません。XMLオブジェクト全体をシリアル化する必要はありません。inループを使用して、クラスによって宣言されたプロパティとメソッドを列挙できなくなりました。列挙できるのはオブジェクトの動的プロパティだけです。0のオブジェクトの内容を確認してください。SWFファイルのルートオブジェクトを好みのカスタムクラスのインスタンスにすることができます。ロードされる際に、SWFファイルによってそのクラスのインスタンスが作成され、ルートオブジェクトとして機能します。この記事で取り上げる話題を提案してくれた開発者コミュニティの皆様に感謝します。
0を初めて使用する際の基本として役に立つでしょう
他のオブジェクト指向言語の十分な知識がある方には、ここで取り上げたヒントはあまり必要ないかもしれません。
0を使用するときにも、他の言語を使用するために学んだ知識をすぐに活用できるでしょう
0に初めて触れる方の場合は、このヒントが役に立つでしょう
手元において、ぜひご活用ください。皆様のご活躍をお祈りいたします。
著者について
UCLA MBA 課程在籍中の一時、他の業界への転職を考えたものの、漂白剤の販売業務よりソフトウェア業界に従事する方がはるかに楽しいと考え、現在に至る。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
0のイベント処理について | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
0のイベント処理について
0の導入においても、この傾向は続いています。0を使用すると、イベントの操作時に、さらに詳細に制御できるようになりました。0のイベント処理に関する新機能について取り上げます。具体的には、特にマウスイベントの使用に関し、新しいEventDispatcherクラスがどのように機能するかを説明します。さらに、イベントの伝達やEventオブジェクト、独自のカスタムイベントの作成方法についても説明します。このチュートリアルを完了するには、次のソフトウェアおよびファイルがインストールされている必要があります。V2コンポーネントでは、EventDispatcherクラスの外部バージョンを使用してコンポーネントイベントを処理していました。まず、様々なイベントに対応するための関数、すなわちイベントハンドラを作成します。0ではイベントを受け取るオブジェクト内にイベントハンドラを定義し、受け取るイベントの名前を関数に指定する点が異なります。EventDispatcherを使用する場合も、同じ要素(イベントを受け取るオブジェクト、イベント名、およびイベントに対応する関数)が関与しますが、プロセスだけ若干異なります。このプロセスでは余分な手順が追加されているように見えますが、それによって柔軟性が向上しています。ターゲットオブジェクト自体に直接イベントハンドラを定義する代わりに、関数を使用してイベントハンドラを追加しているので、1つのイベントを「リッスン」するハンドラをいくつでも追加できます。0でのイベントの削除は、以下のように、ハンドラを削除することを意味していました。上述のコードスニペットでは、EventDispatcherが明示的に参照されていないことに気づかれたことと思います。0バージョンのメソッドと類似しています。
0のaddEventListenerでは、リスナーとして関数のみを使用でき、オブジェクトは使用できなくなりました(以前のバージョンではオブジェクトをリスナーとして使用できました)
0ではメソッドがそのインスタンスにバインドされるので、基本的にリスナーにオブジェクトを使用する必要がありません。つまり、関数内のthisキーワードは、取得先のインスタンスを常に正しく参照するようになりました。addEventListener():イベントハンドラ関数を追加してイベントをリッスンし、イベントの発生時に関数が呼び出されるようにします。dispatchEvent():イベントタイプに関連するオブジェクトのリスナーリストに含まれているすべてのリスナーに、渡されたイベントを送ります。このメソッドは、カスタムイベントの作成時に主に使用します。willTrigger():オブジェクトまたはその親のコンテナのいずれかに、特定のイベントタイプのリスナーがあるかどうかを判断します。これはhasEventListenerとよく似ていますが、このメソッドでは現在のオブジェクトに加えて、イベントの伝達によって影響を受ける可能性のあるオブジェクトをすべてチェックします。0 リファレンスガイド』にも記載されています。
簡単な例として、画面上の「box」という四角形のインスタンスをクリックする場合を検討してみましょう(図1を参照)
この例の目的は、マウスでboxをクリックしたときに「click」というテキストが出力パネルでトレースされるようにイベントを処理することです。
boxインスタンスをクリックすると、「click」という単語を出力パネルに表示
このテストムービーを作成するには、次の手順を実行します。
0プレビューの使用
新しいFlashドキュメントを作成します。四角形のムービークリップを画面に作成します。四角形に、boxというインスタンス名を付けます。次のタイムラインスクリプトをフレーム1に追加します。
スクリプトを見てみましょう
最初の手順では、イベントハンドラ(リスナー関数)を定義します。すべてのイベントと同様に、これによって、イベントディスパッチャから呼び出されたときに関数に自動的に渡される1つのイベントインスタンスが、パラメータリスト内に配置されます。
CLICKイベントをリッスンするイベントディスパッチャとして設定されます(これはFlexではinitAppメソッドで発生します)
他のイベントタイプも、他のイベント関連クラスと同様に、MouseEventクラスの類似の定数に格納されます。0の対応する項目と比べて変わっていることに注意してください。0 リファレンスガイド』と、パッケージ内のそれぞれのEventクラスに記載されています。CLICKの代わりに単に「click」を使用することもできますが、定数を使用することで、コード内のスペルミスを検出しやすくなります。例えば、文字列「click」のスペルを誤って入力しても、Flashには文字列の内容が正しいかどうかを判定する手段がないので、コンパイルエラーは発生しません。CLICKのスペルを誤って入力した場合は、Flashによってエラーが認識され、コンパイルエラーが発生します。ほとんどのEventクラスには、そのイベントタイプ文字列に関連するこれらの定数があります。そのため、実際の文字列をそのまま使用するのではなく、これらの定数を使用してください。ムービーをテストすると、クリックできるboxが表示され、クリックすると、「click」という単語がトレースされます。
イベントの伝達と段階
前の例でお気づきにならなかったかもしれませんが、boxをクリックして発生したイベントは、クリックしたオブジェクトだけでなく、多くの様々なオブジェクトにも影響を及ぼします。0のイベント処理における重要な新機能に、イベントの伝達のサポートがあります。イベントの伝達とは、1つのイベントが複数のオブジェクトに適用される転移現象です。これらの各オブジェクトは、イベントが発生したオブジェクトだけでなく、イベントも受け取ります。0では、このようなイベントの伝達は行われませんでした。実際には、独自のイベントハンドラを持つ別のオブジェクト内で、特定のイベントハンドラが関連付けられているオブジェクトを扱うことさえできませんでした。0では、ボタンを含むウィンドウオブジェクトにonPressイベントハンドラを割り当てた場合、ボタンに割り当てられているonPress(または類似の)イベントハンドラは機能せず、イベントも受け取りません。0では、このような問題はなくなりました。イベントは、インスタンスやその親の間を伝達されるようになりました。
イベントの伝達には、3つの「段階」があります(図2を参照)
各段階は、イベントに関連する表示オブジェクトを介してFlashでイベントが処理される際の、イベントの経路または場所を表します。イベントの3つの段階は、キャプチャ、ターゲットおよびバブリングです。キャプチャ段階:イベントの発生元のターゲットオブジェクトの親オブジェクトを表します。伝達されるイベントは、最上位の親(stage)から始まり、発生元のターゲットに達するまで、表示オブジェクト階層を下っていきます。ターゲット段階:ターゲット段階は、イベントがターゲットオブジェクトまたはイベントの発生元オブジェクトにある段階です。キャプチャ段階やバブリング段階とは異なり、この段階は、常に1つしかないターゲットオブジェクトに関連します。バブリング段階:イベントが「バブルする」と、キャプチャ段階とは逆の経路をたどり、最上位の親(stage)に達するまで、ターゲットオブジェクトの親階層を上っていきます。ただし、伝達されるイベントがすべて各段階を通過するわけではなく、すべてのイベントが伝達されるとも限りません。例えば、Stageオブジェクトがイベントを受け取った場合は、キャプチャ段階やバブリング段階が発生するために必要な、stageより下位のオブジェクトが存在しないので、ターゲット段階のみが発生します。
boxをクリックしたときに発生する3つのイベント段階の図
イベントが各段階と段階にある各オブジェクトを通過していくとき、そのイベントのために追加されたリスナー関数がすべて呼び出されます。
1回はキャプチャ段階で受け取り、もう1回はバブリング段階で受け取ります(図3を参照)
boxをクリックしたときに発生するイベントの経路
この例にリスナーを追加していくと、流れがより明確にわかるようになります。マウスで1回クリックすると、表示リスト階層内の多くのオブジェクトに伝達されていく様子を確認するため、影響を受ける各オブジェクトについてイベントを受け取るリスナーを追加します。キャプチャ段階でリッスンしない場合は、ターゲット段階またはバブリング段階でイベントをリッスンします。ターゲット段階とバブリング段階でリッスンするため、リスナーにはデフォルト値falseが設定されています。true値を渡すと、キャプチャ段階でイベントをリッスンできます。boxをクリックすると、すべての段階で指定したすべてのリスナーにイベントが伝達される。
0プレビューの使用
例1のコードサンプルを開きます。フレーム1のタイムラインスクリプトを次のスクリプトに置き換えます。新しいFlex MXMLドキュメントを作成するか、例1のコードサンプルを編集します。このムービーをテストし、いろいろな場所をクリックして結果を確認します。boxをクリックすると、以下の出力が表示されます。この出力は、stageオブジェクトとrootオブジェクトがイベントのキャプチャ段階とバブリング段階でそれぞれ1回ずつ、イベントを2回受け取ったことを示しています。一方、イベントのターゲットであるboxは、ターゲット段階で1回だけイベントを受け取っています。stage上のbox以外の場所をクリックしてみると、Flashを使用している場合は以下の出力が表示されます。stageはFlashムービーの階層の最上位に位置するので、stageベースのイベントの段階は、ターゲット段階のみになります。stageをクリックすることは、実際にはstage自体ではなく、リスナーを持たないこのインスタンスをクリックすることになります。イベントの伝達はマウスイベントで最も頻繁に発生しますが、キーボードイベントなどの他のイベントでも発生します。この場合は、子オブジェクトがその表示リストに追加されるか、表示リストから削除されます。
イベントのターゲット化
Flashではマウスクリックなどのすべてのイベントは、イベントのターゲット化プロセスから始まります。これは、どのオブジェクトがイベントのターゲットであるか(イベントがどのオブジェクトで発生するか)をFlashが特定するプロセスです。前の例では、boxまたはstageがクリックされたかどうかをFlashがどのように特定するかを見てきました。あらゆるマウスイベントにおいて、イベントは1つのオブジェクトを参照します。
このオブジェクトは、イベントを受け取ることのできる最上位のオブジェクトです(図5を参照)
0を使用した場合とほとんど同じです。0では、重なっている2つのボタンを一度クリックすると(どちらのボタンにもイベントハンドラが割り当てられている場合)、上部のボタンのみがイベントを受け取ります。0でも同じです。クリックしたときどちらのボタンもマウスのカーソルの下に位置していますが、上部のボタンがイベントのターゲットのオブジェクトなので、上部のボタンのみがイベントを受け取ります。0での相違点は、すべての表示オブジェクトが、デフォルトにより、マウスイベントを受け取ることができることです。つまり、イベントハンドラが特定の表示オブジェクトに割り当てられていない場合でも、クリックするとイベントのターゲットとなり、その下にあるオブジェクトがイベントを受け取ることはありません。0では異なりました。0では、onPressなどのイベントハンドラが割り当てられている場合にのみ、ムービークリップインスタンスはイベントを受け取ることができます。このようなハンドラがないインスタンスにはイベントのターゲット化は行われず、代わりにその下にあるインスタンスがターゲット化の候補になります。このプロパティをfalseに設定すると、対話型オブジェクトインスタンスがマウスイベントを受け取らなくなり、その下にある他のインスタンスがマウスイベントのターゲットになります。Eventオブジェクトは、イベントの発生時に呼び出されたときに、リスナー関数が引数として受け取るオブジェクトです。0のEventオブジェクトには独自のクラス(Eventクラス)があるので多少構造化されていることと、処理するイベントを記述するためのプロパティが追加されたことです。リスナー関数が受け取るEventオブジェクトは、常にイベントタイプですが、Eventインスタンスとして指定されていない、Eventのサブクラスも含まれます。各クラスには、関連するイベントをリッスンするためのイベントタイプの定数も含まれています。0に新たに導入された概念です。stageは、Flashムービー内のすべての表示オブジェクトの最上位コンテナを表します。さらに、マウスイベントのstageのターゲット化は、他のオブジェクトの場合と同様に、stageのコンテンツに依存しません。boxをクリックし、このboxをクリックイベントのターゲットにするには、boxを構成している形状をクリックする必要があります。同様に、rootオブジェクトをクリックするには、そのコンテンツまたはboxインスタンスをクリックする必要があります。rootはboxのみで構成されているので、他の場所をクリックしてもrootはクリックされません。ただしstageの場合は、stageに他のコンテンツが存在しなくても、ムービーの一貫した背景としてstageがあらゆる場所に存在するので、ムービーの任意の場所をクリックすることで、stageをクリックできます。0で一部のタスクを行う際に重要になります。一般的なEventプロパティの基本的な内容は以下のとおりです。この他のプロパティはサブクラスに適用されます。
一部のプロパティは見覚えがあるでしょう
前述のプロパティについて、以下に説明します。
type:処理するイベントのタイプ
bubbles:イベントがバブル(およびキャプチャ)するイベントであるかどうかを示します。これは、イベントがキャプチャ段階またはバブリング段階を通過したか、これから通過することを意味するのではなく、キャプチャ段階またはバブリング段階を通過する可能性のあるイベントであることを意味します。前の例でstageのみをクリックした場合は、stageが唯一のターゲットであったので、イベントのキャプチャまたはバブルは発生しませんでした。ただし、イベントはマウスクリックだったので、バブルはtrueのままです。キャンセル可能なイベントは、デフォルトでは、イベントハンドラ内で停止できる追加の結果を伴うことがあります。この例には、テキストフィールドにテキストを入力してそのフィールドに文字を追加する場合などがあります。デフォルトでは、キーボードのキーが押されるたびに文字がフィールドに追加されるか、その他のアクションが発生してテキストフィールドの内容が変更されます。TEXT_INPUT)をリッスンしているリスナーは、これらのイベントを認識し、デフォルトの動作をキャンセルできます。
target:イベントのターゲットであるオブジェクト
ターゲット段階でイベントを受け取るオブジェクトです。currentTarget:イベントの発生時にリスナーによって現在呼び出されているオブジェクトを参照します。これらのプロパティは、様々なイベントに対して実行する必要のあるアクションを特定する際に役立ちます。0にはmouse downイベントとmouse upイベントはありますが、クリックしたオブジェクトの外でのイベントの解放を処理できるイベントはありません。オブジェクトがクリックされた後、オブジェクトの外でマウスが解放された場合を特定するには、stageに固有の動作を利用した回避策を使用する必要があります。これを行うには、2つのアプローチがあります。最も簡単な方法は以下のとおりです。元のオブジェクトである場合は、元のターゲットでマウスが解放されています。元のオブジェクトでない場合は、オブジェクトの外でマウスが解放されています。stageではすべてのマウスイベントをキャプチャするので、すべてのmouse upイベントがstageに受け取られると見なすことができます。
0プレビューの使用
例2のコードサンプルを開きます。フレーム1のタイムラインスクリプトを次のスクリプトに置き換えます。新しいFlex MXMLドキュメントを作成するか、例2のコードサンプルを編集します。ムービーをテストし、boxをクリックします。マウスをboxの上に重ねたまま、クリックして解放してみます。次に、マウスをクリックしてドラッグし、カーソルをboxの外に置いてマウスボタンを解放してみます。Eventオブジェクトに関連する便利なメソッドの一部を次に紹介します。プロパティと同様に、Eventサブクラスには追加のメソッドがある場合があります。このメソッドを使用すると、イベントの完了後に画面を再描画できます。これらのEventメソッドが実行できる内容について次に説明します。
stopPropagation():バブルするイベントのイベントリスナー内で呼び出されると、現在の段階と後続の段階でイベントを受け取るはずであった残りのオブジェクトへのイベントの伝達を停止します(図6を参照)
これは、stopPropagationとよく似た動作ですが、stopPropagationでは現在のオブジェクト内での他のイベントの呼び出しは停止されない点が異なります(同じオブジェクト内で同じイベントをリッスンしているリスナーが複数存在する場合)
例4:コンテナ内の特定のイベントの無効化
0内のすべての対話型オブジェクトに対して継承的に有効です。また、そのオブジェクトのすべての子に対してマウスイベントを無効にできる、mouseChildrenという表示オブジェクトコンテナ用の類似のプロパティもあります。mouseChildrenをfalseに設定すると、表示オブジェクトコンテナ内のすべてのインスタンスに対して、マウスが有効になるのを効果的に防ぐことができます。ただし、コンテナ内のオブジェクトのコレクションに対して特定のマウスイベントのみを無効にする場合は、別のアプローチを使用する必要があります。このような状況では、無効にするイベントをリッスンしているターゲットの親インスタンス内のイベントリスナーを使用して、このリスナーがそのイベントを伝達しないようにします。これにより、コンテナ内のオブジェクトに対応しているリスナーが呼び出されなくなります。次の例では、コンテナウィンドウに2つのボタンを作成します。これらのボタンのクリックアクションは、コンテナの外部にある別のボタンから有効または無効に設定します。3番目の外部のボタンは、クリックイベントがキャプチャ段階で検出されたときコンテナがクリックイベントの伝達を停止するかどうかを判断するプロパティを設定します。
0プレビューの使用
新しいFlashドキュメントを作成します。Buttonという名前の新しいボタンシンボルを作成します。このボタンシンボルに、up、overおよびdownの一意のボタン状態を指定します。Windowという名前の新しいムービークリップシンボルを作成します。
Windowムービークリップ内に、ウィンドウを描画します(単純な長方形でかまいません)
ウィンドウグラフィックスの上の新しいレイヤーに、前の手順で作成した2つのボタンシンボルインスタンスを追加します。ボタンインスタンスの名前を指定します。メインタイムラインにWindowムービークリップとButtonボタンのインスタンスがまだ存在しない場合は、追加します。次のタイムラインスクリプトをフレーム1に追加します。ムービーをテストし、「Enabler」ボタンがclickEnabled変数を使用して、コンテナ内のボタンによるクリックイベントの受け取りを無効または有効にする様子を確認します。この方法では、clickEnabled変数はクリックイベントのみを無効にするので、roll overなどのマウスイベントはウィンドウ内のボタンに対して一貫して機能します。
イベントのカスタマイズ
この作業には、新規または既存のイベントの送り出し、新しいタイプのイベントの作成、イベントをリッスンするイベントハンドラに渡すインスタンスを持つ新しいEventクラスの定義(Eventクラスに基づく)が含まれます。
このイベントは、すべての有効なターゲット(伝達される場合は複数)に伝わり、これらのターゲットにリスナーとして割り当てられているイベントハンドラが呼び出されます(その特定のタイプのイベントをリッスンしている場合)
0 リファレンスガイド』を参照してください。これらのカスタムサブクラスは、独自のカスタムイベントの送り出しに使用でき、ユーザが選択した独自のプロパティがあります。ただし、Eventクラスを拡張する際は、デフォルトのメソッドを上書きし、独自のclone()メソッドを確実に実装できます。すべての状況で必要なわけではありませんが、cloneメソッドはイベントインスタンスをコピーするためにFlash内部で使用されることがあります。cloneメソッドによってクローン作成の対象となるイベントインスタンスの正確なコピーが作成されない場合は、エラーが発生します。
例5:boxのバウンスとバウンスイベント
カスタムイベントは、Flash Player内で継承的に認識されないイベントを示す場合に役立ちます。独自のEventクラスを作成すると、カスタムイベントに関連する追加情報を指定して、これらのイベントのハンドラを用意できます。このクラスはバウンスイベントとともに使用され、画面上のboxが画面の端でバウンスしたことを示します。Eventクラスを拡張することで自動的に継承される通常のEventプロパティに加えて、BounceEventクラスにはsideプロパティがあり、バウンスしたオブジェクトが画面のどの端から発生したかを判断できます。
カスタムプロパティに加えて、イベントに使用する様々なタイプに対応するタイプ定数(MouseEvent
クラス定義は次のとおりです。これでこのクラスを使用して、boxがバウンスしたときに送り出されるイベントインスタンスを作成できます。バウンスイベントをリッスンしているイベントハンドラは、そのイベントに関連するBounceEventsを受け取ることができます。
0プレビューの使用
上述のBounceEventクラスのコードをドキュメントにコピーし、ファイルを保存します。
20 x 20ピクセルの小さいムービークリップを画面に作成します(図9を参照)
このムービークリップの基準点が左上隅に設定されるようにします。四角形に、boxというインスタンス名を付けます。次のタイムラインスクリプトをフレーム1に追加します。上述のBounceEventクラスのコードをドキュメントにコピーし、ファイルを保存します。ムービーをテストしてみます。boxがstageの端でバウンスすると、次の出力が表示されます。これは、各バウンスイベントでbounceHandlerイベントハンドラ関数が呼び出された結果です。
例えば、次のコード行を見てみましょう
この行は、新しいバウンスイベントをboxインスタンスからすべてのリスナーに送り出します。これらのリスナーは、渡されたEventオブジェクトのsideカスタムプロパティを使用して、バウンスした端が「左」であったことを判断できます。イベントがboxから送り出されたものであっても、bounceHandler(boxインスタンスのリスナーではない)はイベントを受け取ることができます。
0イベントに関するヒント
0イベントに慣れている場合は、新しいイベントシステムの動作に慣れるのに時間がかかるかもしれません。しかし次第に慣れて、制御可能な水準の高さに満足していただけると思います。0でイベントを操作する際のヒントや注意事項について補足します。
オブジェクトがイベントのターゲットである場合にのみオブジェクトのイベントが発生するというActionScript 2
0のイベントと伝達ではこれは必ずしも当てはまらず、一部のオブジェクトが予期していない伝達イベントを受け取る場合があります。EventオブジェクトのeventPhaseプロパティを確認すると、役に立つフィードバックが得られ、不要なイベントの伝達を防ぐことができます。これらの相違点は、ロールイベントはバブルしないことです。他のイベントの場合は、mouseChildrenプロパティを使用して、マウスイベントに関する伝達の競合を避けることができます。0では、表示オブジェクトはすべて継承的にイベントのターゲットになることを忘れないでください。オブジェクトをターゲットから除外して、その下のオブジェクトをターゲットにするには、上のオブジェクトのmouseEnabledプロパティをfalseに設定します。stageは、イベント処理に便利なオブジェクトですが、注意して使用する必要があります。stageプロパティは、アクティブな表示リスト内、または、stageに添付されていて、画面に表示されている表示リスト内にあるときに、表示オブジェクトからのみアクセスできます。表示オブジェクトがこのような表示リストに含まれていない場合、そのstageプロパティはNullです。同じ動作がrootプロパティにも適用されます。
追加および削除されたイベント(Event
REMOVED)は、マウスイベントと同じようにバブルしますが、キャプチャとバブリングは親のみに伝達され、子には伝達されないことを覚えておいてください。インスタンスの子は親のイベントを受け取りません。つまり、コンテナの子にとって、そのコンテナ(またはその親のいずれか)がアクティブな表示リストに追加されており、DisplayObjectのstageおよびrootプロパティにこれらの子が付与されているかどうかを簡単に判断できる方法はありません。これらのイベントは、表示オブジェクトがアクティブな表示リストに対して追加されたり削除されたりすると、それを表示オブジェクトに伝えるので、stageおよびrootにアクセスできるかどうかがわかります。MOUSE_MOVE)は、イベントを受け取っているオブジェクトの上にマウスが位置しているときにのみ呼び出されます。このイベントを使用して画面上のオブジェクトを移動したりドラッグしたりする場合、マウスを誤ってオブジェクトの外に動かすと、イベントが失われます。同じターゲットオブジェクト上で同じイベントをリッスンしているイベントハンドラは、追加された順序で呼び出されます。他のハンドラの後にイベントハンドラをリスナーとしてオブジェクトに追加した場合、他のリスナーの前にこのイベントハンドラが呼び出されるようにするには、addEventListenerの4番目のパラメータを使用して、リスナーの優先順位を設定します。最も高い優先順位を持つリスナーが常に最初に呼び出されます。
次のステップ
新しい開発方法を理解するには、このチュートリアルに含まれている例のように、小さなテストファイルを作成すると便利です。0でイベントが制御され、キャプチャされる様子を理解してください。0とはどのように異なるかを確認してください。結果を出力パネルでトレースすると、受け取られたイベントに関するフィードバックを直ちに確認できます。カスタムサブクラスを作成し、一意のプロパティを持つ独自のカスタムイベントの送り出しを試してください。独自のEventクラスを作成すると、デフォルトのパラメータを使用して、Flash Playerで現在処理されていないカスタムイベントの新しいハンドラを用意できます。この手段は、画面に対するオブジェクトの位置を特定し、上級ユーザインタラクティビティを実現する上で非常に役立ちます。
0の新しいイベント処理機能の使用方法を習得すると、数多くの新しい開発の可能性を見い出し、入力情報の追跡をより詳細に制御することができるでしょう
このチュートリアルの冒頭で提供されているサンプルファイルをぜひダウンロードして、ここで説明している概念を確認してみてください。0 リファレンスガイド』で説明されているイベント関連クラスとイベント処理情報について理解しておくことをお勧めします。
著者について
以前は、別の制作会社で、さまざまな種類のマルチメディアやWebベースのコンテンツを作成する開発者として活躍していました。comなどの人気の高いFlash関連のサイトで、フォーラムを開催しています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
これは、以下のテクノロジに対して現在公開されているActionScript言語とライブラリリファレンスの一覧です。
作業の開始*
最新のランタイムを入手
最新ツールを試用
最新サーバーを試用
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。Microsoftが最新のテクノロジーライセンスを取得した結果、Flashコンテンツ表示時に「このコントロールをアクティブ化して使用するにはクリックしてください」というダイアログがポップアップ表示されるという制限が解除されます。Microsoftによるこの変更は、一部のWebページのアクティブコンテンツの動作に影響を与えます。
アクティブコンテンツを提供するほとんどのWebページについては、ユーザは変化にほとんど気付かないか、または全く気付かないでしょう
特定の方法でHTMLページに埋め込まれたアクティブコンテンツは、ユーザがクリックして有効化するか、コントロールのロードを続行するまでは、ユーザ入力(キーボード、マウスイベントなど)を受け付けることができなくなります。ユーザがコンテンツをクリックするまでブロックされる対話的処理の詳細については、MSDNの記事、ActiveX コントロールのアクティブ化を参照してください。更新されたブラウザでFlashコンテンツを表示するときのエクスペリエンスについては、次のデモをご覧ください。この問題には回避策があります。開発者は、HTMLページを変更して、対話的なアクティブコンテンツがユーザ入力に直ちに反応するようにできます。Adobeは、多くの開発者が、ユーザクリックの必要がないように、アクティブコンテンツを自動的に有効化したいと望んでいるものと予想しています。Microsoftは、ユーザのクリックなしで対話的なアクティブコンテンツを有効化するようにWebページを修正するためのソリューションをいくつか公開しています。JavaScriptベースのソリューションを含むこれらのソリューションを使用すると、ユーザはコンテンツと直ちに対話できるようになります。Microsoftのソリューションと基本的なアプローチは同じですが、Adobeが提示する方法は、FlashまたはShockwaveコンテンツの複数のインスタンスをサイトで使用している開発者に特に有効です。
ブラウザの更新に備えたアクティブコンテンツ使用Webサイトの準備
更新に備えた準備の方法について説明します。手作業でただちに実装できる簡単な修正プログラムを取得できます。
5ホットフィックス:IEの更新プログラムが埋め込みActiveXコントロールに与える影響
5のパッチをダウンロードできます。
なぜAdobeのソリューションをお勧めするのか
Adobeのソリューションを推奨する理由についての詳細が記載されています。
アクティブコンテンツのFAQ
ブラウザの変更に関する疑問点への回答と、開発者向けの回避策が含まれます。このページを使用して、更新されたInternet Explorerで現在のページと変更後のページを表示したときの様子を確認してください。
その他のリソース
アクティブコンテンツの表示に関してMicrosfotが推奨する回避策が掲載されています。
すべての製品、テクノロジセンター
Adobe製品の最新情報に関するドキュメントを取得できます。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
ようこそ、さん
お問い合わせ
ホームユーザ向け写真/ビデオ編集ツール
すべての業種・ソリューション ›すべての製品 ›アドビサポートに問い合わせる。
注文状況の確認
教職員および学生
アドビについて
投資家の皆様へ*
地域・社会への貢献*
お問い合わせ
個人またはホームオフィス
法人のお客さま
教育関係のお客様
おすすめ製品
すべてのソフトウェアを見る ›
購入後について
割引価格でコスト削減
ライセンスをご利用中のお客さま
その他の購入方法
販売店のご紹介
アクティブコンテンツのアップデートに関する記事
ご意見、ご要望の投書(英語入力)
提案されたInternet Explorerの変更に対する回避策としてWebサイトを更新する前に、ユーザに対する変更の影響を確認することは有益です。Internet Explorerの更新プログラムを適用していないユーザ向けに、アドビが推奨する回避策を実装する前と後のアクティブコンテンツの表示を示すデモを用意しています。実装“前”の例に示すページでは、更新プログラムを適用されたバージョンのInternet Explorerでコンテンツと対話する前に、ユーザがコンテンツを有効化しなければなりません。実装後は、予想通りのシームレスなユーザ体験ができます。以下のリンクから、同じファイルの実装"前"と"後"の例を確認できます。このブラウザを使用していない場合は、この例の実装前と実装後の違いは実感できません。
実装前後の例の動作
新しいInternet Explorerを使用すると、"このコントロールを使用するためにクリックして有効化する"ことを求めるツールヒントが表示されます。このブラウザを使用していない場合でも、アドビのデモで、またはMSDNの記事ActiveX コントロールのアクティブ化の説明で変化を確認できます。この修正プログラムの実装方法の詳細については、ブラウザの更新に備えたアクティブコンテンツ使用Webサイトの準備を参照してください。この例では、JavaScriptが有効になっている任意のブラウザで、クリックして有効化することなく、コンテンツと対話ができます。
実装"前"と実装"後"の例のソースコード
両方の例のソースコードを次に示します。これらのページでFlashファイルの例を表示する方法については、コードを確認してください。
実装"前"の例のソースコード
実装"前"の例を実行›
実装"後"の例のソースコード
実装"後"の例を実行›
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
ブラウザの更新に備えたアクティブコンテンツ使用Webサイトの準備 | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
ブラウザの更新に備えたアクティブコンテンツ使用Webサイトの準備
その結果、埋め込み("アクティブ")コンテンツやアプリケーションを使用したWebサイトがどのような影響を受けるのか、疑問をお持ちのことと思います。
おそらく、その準備のために何をすべきか、検討を開始されていることでしょう
ブラウザの更新がサイトに与える影響
ブラウザの変更が与える実際の影響はどのようなものなのでしょう
このような変更はいつ行われるのでしょうか
明日または来週になっても、ユーザはアクティブコンテンツを表示できるのでしょうか
ユーザは、Internet Explorerブラウザの更新プログラムを適用するまでは、埋め込みコンテンツやアプリケーションを現在の形式で表示できます。ブラウザの更新プログラムは、最初にオプションのアップデートとして2006年2月にリリースされました。ユーザがブラウザをアップデートした後は、埋め込みまたは"アクティブ"コンテンツと対話する前に、コンテンツをクリックする必要があります。一部のサイトはこの変更の影響を受けません。アップデートされたブラウザでは、HTMLファイル内部に記述された<object>、<embed>、または<applet>タグを使用してコーディングされたアクティブコンテンツを表示する前に、ユーザにクリックを促すメッセージが表示されます。ただし、複雑なFlash検出スクリプトを使用したサイトなど、外部スクリプトファイル(JavaScriptなど)によって生成されたタグを使用するHTMLページは、変化なく正常な動作を続けます。
ブラウザに対する必須の変更の回避策としてサイトを修正したいと考える方は多くいることでしょう
幸いなことに、直ちにサイトに適用できる、いくつかの回避案があります。
必要なファイル
メモ:このサンプルアーカイブには次の3つのファイルが含まれています。js:他のタイプのアクティブコンテンツのソリューションで説明する修正に使用します。jsファイルを使用するときにHTMLページで使用するコードの例を提供します。
はじめに:アクティブコンテンツを表示するための修正
サイトでアクティブコンテンツを含んだHTMLページをアップデートするために使用できる、Adobe開発チーム提供の"実装前後"のコードの例を次に示します。
置き換える必要があるコード
アップデートされたブラウザで、以前のように機能しないコード(単純な<object>タグ)の例を次に示します。以降の2つの方法で説明するように、このタグを、HTMLページ外部のコードを呼び出すスクリプトに置き換えると、アップデートされたIEでも引き続き動作します。このJavaScript修正プログラムについてテストを実施した結果、現在の一般的なブラウザで動作することがわかっています。これがご自分のサイトに適したソリューションであるかどうかを調べるには、アドビのテストマトリックスで確認してください。サイトで使用している埋め込みコンテンツが1つまたは数個の場合は、次の簡単なソリューションの使用が望ましいかもしれません。このソリューションを実装するには、埋め込みコンテンツが含まれるサイトのページごとに、一意の外部JavaScript(JS)ファイルを作成する必要があります。
メモ:ページ上の埋め込みコンテンツの数が2個以上の場合は、個別のコンテンツごとにタグをdocument
write する一意の関数を外部JSファイルにおいて作成します(手順1を参照)
また、このソリューションがサンプルファイルに含まれないことに注意してください。次の手順に従って、現在のHTMLコードに含まれるコードから新しいコードを作成してください。前述の操作を行うための手順は次のとおりです。外部JSファイルを作成し、サイトに置きます。
この例では、このファイルをfoo
jsと呼びます。サイトに多くの埋め込みアクティブコンテンツがある場合、または何通りかの方法で埋め込んでいる場合は、このソリューションが大変に有効です。ソリューション1のように、影響を受けるファイルごとに1つのJSファイルを作成するのではなく、埋め込まれたすべてのFlashおよびShockwaveコンテンツ用に1つの外部JSファイルを使用できます。このJSファイルには、メインページから受け取るパラメータに基づいてアクティブコンテンツを埋め込む関数が含まれます。このソリューションを実装するには、次の3つの手順を実行する必要があります。回避策の関数が含まれる外部JSファイルを、Webサイト上の共有の場所にコピーします。js か、任意の名前を付けます。jsファイルのコードは、このファイルに渡される引数を使用して(手順3を参照)、ドキュメントに書き込む完全なタグ文字列を構築します。メモ:これらの関数を機能させるためにはJavaScriptが有効になっている必要があります。htmlにおいて確認できます。movie属性を渡すように関数呼び出しを編集する場合は、ファイル拡張子をmovie名と共に入れないでください。Flashファイルにパラメータを渡している場合は、元のmovie属性が次のような場合があります。nameおよびcolor属性を正しく渡すには、次のようにこの属性を引数として関数に入れ、ファイル拡張子を必ず省略します。引数は必ず名前/値の組として挙げてください。jsコードに渡す必要があります。項目の数が奇数の場合は機能しません。また、このコードは、classidやmimeTypeなどの必要なその他の設定を、プレイヤに固有の関数呼び出しの結果として自動的に挿入します。HTMLページ内部では、オプションのパラメータの引数だけを渡します。この方法を使用した、Flashファイルを再生する標準のインラインオブジェクトと埋め込みタグの置き換えの例を次に示します。
次のコードを置き換える必要がある場合:
次の関数呼び出しを代わりに挿入します。ブラウザでJavaScriptを無効にしているサイト閲覧者もわずかにいます。このようなユーザには埋め込みコンテンツはまったく表示されないので、前述の技術はこのようなユーザには適切ではありません。埋め込みコンテンツ用のJavaScriptの技術に移行しても、ユーザエクスペリエンスは変化しません。または影響を受けません。JavaScriptを無効にしているユーザが、前述のコードに類似したコードを使用するページを訪問した場合は、アップデートされたブラウザのアクティブコンテンツをクリックする必要があります。クリックした後は、以前と同様にコンテンツと対話することができます。
他のタイプのアクティブコンテンツのソリューション
前述の方法を使用してFlashまたはShockwaveコンテンツを表示する場合は、このスクリプトは必要ありません。ただし、他のタイプのアクティブコンテンツをWebページで使用している開発者は、このスクリプトを使用し、アクティブ化するためのユーザクリックなしで、他のタイプのコンテンツを表示することができます。これを、幅広いコンテンツで機能する一種の汎用スクリプトと考えてください。jsとほとんど同様に使用できます。このスクリプトを実装するには、最初に次のコードを使用して、HTMLページの<head>セクションに外部ファイルを挿入します。
引き続きご利用ください:アクティブコンテンツデベロッパーセンター
アドビは、いずれかの方法を使用してサイトに修正プログラムを正しく実装できると信じています。しかし、さらに確実にすべく、公開されたあらゆる情報のご提供を続けてゆきます。アクティブコンテンツの表示に関連するアップデートや新しい方法を紹介していきますので、このサイトを引き続きご利用ください。
著者について
この記事は、アドビ システムズ社の著作物です。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
Adobe AIRは、既存のHTML/Ajax、FlexまたはFlash Web開発スキルとツールを使用して、リッチインターネットアプリケーションを構築し、デスクトップに展開することができるクロスオペレーティングシステムランタイムです。Adobe AIRアプリケーションは、クリップボードおよびドラッグ&ドロップのサポート、ローカルファイルIOシステム通知などを含む、ネイティブのデスクトップ統合をサポートします。ローカルデータベース接続モード*を使用して、リッチなユーザエクスペリエンスを生成します。この記事では、フレームレートスロットリングとは何か、どのようにアプリケーションに実装すればよいかを説明します。Flex/AIR開発では、「ああこれは最初から用意しておくべきだった。」と後悔しがちなポイントがいくつかあります。そのひとつが、Flex/AIRアプリケーションを「開発用」と「本番用」とで切り替える仕組みです。Flexで実際の業務アプリケーFeliCa(フェリカ)は、ソニーが開発した非接触ICカード技術方式です。国内の様々な電子マネーのベースとなっている技術で、馴染みのある方も多いかもしれません。今回は、FeliCaの機能を使って携帯電話のブラウザを起動するFlashアプリケーションをFlexで作成します。0で追加されるAPIにより、これまでよりも一層拡張性があるアプリケーションの作成ができます。その能力を活用してAIRアプリケーションどうしでデータの送受信やチャットを可能にするコミュニケーションアプリがairPortです。音声認識エンジンを搭載し、音声によってアプリケーションを起動するランチャーです。
対象のアプリケーションの「よみがな」を登録しておけば、そのよみがな通りに発音するだけ
手軽に更新できるAIRアプリケーションの開発テクニック
この記事では、Adobe AIR アプリケーションのアップデートを開発・デプロイする際にありがちな問題点を紹介するとともに、これらの問題を解決するためのヒントやテクニックについて解説していきます。SORAAIは、勉強会、講演など時間制限のあるイベントで活用できるタイマー機能、スピーカー/オーディエンス間のリアルタイムコミュニケーション機能を持つツールです。0 のマスストレージデバイスの検出機能を利用したアプリケーションです。USBメモリ等を認識し、保存されている画像をアプリ上にリスト表示させます。0のネイティブプロセス連携やP2Pを実現するStratusサービスを利用して、動画、音声、画像、テキストを共有可能にした新しいコミュニケーションツールです。今回はFlash Playerのシングルスレッドモデルに注目し、それがもたらす問題と対策について紹介します。本連載では、その筆者の「Flex/AIRハマり帳」をもとに、これからFlex/AIR開発を始める方が同じ過ちを繰り返さないためのささやかなtipsを紹介していきたいと思います。第二回では、BlazeDSの本番環境へのデプロイについてです。本連載では、その筆者の「Flex/AIRハマり帳」をもとに、これからFlex/AIR開発を始める方が同じ過ちを繰り返さないためのささやかなtipsを紹介していきたいと思います。連載第6回目は、ADB ソースコードの取得方法についてご紹介したいと思います。
マーケティング・ツールとしてのRIA 活用(後編)
マーケティングにおけるデータの分析の中でのFlex チャートコンポーネントの利用について解説をしていきます。
これからはじめるAIRプログラミング 第1回デスクトップRIAの基本とAIRの優位点
AIRプログラミングに関する基本知識から開発方法の基礎を習得していただくことを目的とする連載です。
イベントレポート「まいど
関西におけるRIA開発促進、情報共有を図ることを目的とするセミナー「まいど
0におけるパフォーマンス向上のヒント
連載第4回目は、ADBの裏方として活躍しているデータベース「SQLite」についてどのように活用しているかをご紹介したいと思います。連載の第3回目は、ADBでも使用したリストの作成について紹介したいと思います。今回はライブラリ選定ADBのRSSリーダー機能まわりで使用したライブラリを紹介したいと思います。連載第1回目は、RIA開発をどのように進めるかについて今回のプロジェクトの実例を交えながら紹介したいと思います。BlazeDSのリモーティング機能、Webメッセージング機能を利用した、オフラインでも購読可能なプッシュ配信型のRSSリーダーアプリケーションを作成します。マピオンFlash Maps APIとはドラッグ&ドロップによるフリースクロール可能な地図をFlashアプリケーション内に埋め込むことができる地図APIです。エンドユーザーは、発行者の表示から発行者の身元が確認されていることを知り、安心してアプリケーションをインストールできます。ディベロッパーは、エンドユーザーに安心と信頼を提供するためにも認証局から発行された証明書を利用してコードサイニング署名を行うことが必要です。本連載では、AIRでデスクトップウィジェットを制作する方法について、実際のプロジェクト例と実装例を交えながら、複数回に渡ってお届けしようと思います。今回は、FlexをベースにFlashと連携を行った、開発手法について解説を行います。
マーケティング・ツールとしてのRIA活用(前編)
蓄積されたデータを多様な視点で分析することを目的としています。AIRセキュリティモデルの背後にある原理とAIRアプリケーションの構築時に考慮する必要がある事柄についてより深く学びます。
HTMLベースのAIRアプリケーション開発環境のセットアップ
HTMLベースのAIRアプリケーション開発環境のセットアップを解説します。Adobe AIRは、これらのすべてのテクノロジーを同等にサポートするので、Adobe AIRアプリケーションの開発時にブラウザでWebアプリケーションやリッチインターネットアプリケーション(RIA)を構築するために、使い慣れたツールを使用することができます。初めてRIAを構築する場合は、Adobe AIRでデスクトップアプリケーションを構築するためのテクノロジーオプションに関する、以下の基本的な情報を参照してください。HTMLアプリケーションは、標準ベースのマークアップ言語を使用して構築されます。HTMLアプリケーションはテキストで供給され、実行時に解釈されます。HTML/AjaxデベロッパーコミュニティがAdobe AIRで構築する一般的なアプリケーションには、ネットワーククライアント、ブラウザ用に構築する生産性アプリケーションのデスクトップ版、情報のオフライン管理などがあります。Flashには、ネイティブのオーディオおよびビデオ機能と共にベクターベースのグラフィックレンダリングが用意されています。独創性に富んだリッチインターネットエクスペリアンスの多くは、Flash CS3 Professionalを使用して構築され、そのタイムラインとグラフィックツールは高度なコントロールと柔軟性を備えています。FlashデベロッパーコミュニティがAdobe AIRで構築する一般的なアプリケーションには、小さなウィジェットやゲームからオンラインマーケティングキャンペーン用のデスクトップ拡張機能まで、あらゆるものが含まれます。Flexは、Flashを使用してリッチインターネットアプリケーション(RIA)を構築するための、無償のオープンソースフレームワークです。したがって、その主な相違は開発環境です。Flexフレームワークには、MXMLと呼ばれるマークアップ言語と豊富なコンポーネントのセットが用意されています。通常、Flexアプリケーションには、Flashを使用して構築されたカスタマイズ済みのコンポーネントが含まれています。FlexデベロッパーコミュニティがAdobe AIRで構築する一般的なアプリケーションには、Web、独創的なツール、e-コマースアプリケーションなどに接続する新しい生産性アプリケーションがあります。Adobe AIRで構築できるものに関するアイデアとデモンストレーションについては、これらのサンプルアプリケーションを参照してください。このサンプルアプリケーションを使用して、あらゆるケースに対応できる単純なTo-doリストを作成することができます。この記事に付属するチュートリアルの目標は、HTMLおよびAjax開発スキルを使用してAdobe AIRで開発する方法を示すことです。
ソースコードのダウンロード*
チュートリアルを読む*
Giorgio Natili氏は、完全にActionScript 3で記述されたブラウザベースのバージョンを、元のコードを変更せずにAIRに移行しましたが、AIRによって動作するデスクトップエクスペリエンスを改善するためにいくつかの更新を行いました。
数独のダウンロード*
数独ソースコードのダウンロード*
チュートリアルを読む*
Flickr Floaterは、オンラインとオフラインの世界の両方を融合するイメージアップロードアプリケーションです。埋め込みSQLiteデータベース、オンライン/オフライン接続の検出、ファイル管理、ドラッグ&ドロップのサポート、ネイティブメニューなどの主要なAdobe AIRの機能を使用します。
チュートリアルを読む*
Adobe AIRアプリケーションを構築、パッケージ化、展開するために必要なソフトウェア、ソフトウェア開発キット(SDK)、拡張機能、およびフレームワークをお好みの開発環境にダウンロードします。Adobe AIRアプリケーションをシステムにインストールすることができます。テキストエディタで作業したい場合に、Adobe AIRアプリケーションをパッケージ化および展開するために必要なツールを提供します。airアプリケーションファイルをパッケージ化し、プレビューします。新しくてかっこいいルック&フィールのAdobe AIRアプリケーションを展開します。バックエンドに分散されたデータへの接続を容易にし、AIRアプリケーションとFlexアプリケーションへデータをリアルタイムにプッシュすることを可能にする、オープンソースリモーティングおよびWebメッセージングテクノロジーを取得します。このオープンソースのFlashコンポーネントを使用して、ビデオプレイヤーのルック&フィールの独創的なコントロールを維持しながら、Ajaxアプリケーション内でビデオを再生します。Spryフレームワークの進行中の開発についての情報をさらに取得し、Adobe Labsで最新バージョンをダウンロードします。以下のアドビソフトウェアの無償体験版をダウンロードします。Flexアプリケーションを、この強力なアプリケーションサーバおよびソフトウェア開発フレームワークの新しいバージョンに統合します。業界標準のFlashオーサリングツールの最新バージョンを試行します。
体験版のダウンロードの詳細情報
アドビのすべてのダウンロードの確認
コミュニティツールとフレームワーク
この統合ツールキットは、動的Webアプリケーションの開発の一括導入を妨げてきたDHTMLに関するいくつかの歴史的な問題を解決します。jQueryは、HTMLドキュメントの移動、イベントの処理、アニメーションの実行およびAjax操作のWebページへの追加方法を簡素化します。JavaScriptライブラリの、高度な相互運用が可能なこの総合ソフトウェアパッケージは、タスクをすばやく処理するのに役立ちます。このJavaScriptフレームワークを使用すると、定評のあるAPIにより、強力で柔軟なクロスブラウザコードを記述することができます。このユーティリティとコントロールのセットにより、DOMスクリプティング、DHTMLおよびAjaxなどの手法を使用するインタラクティブなWebアプリケーションを構築することができます。開発知識を共有し、他の開発者が作成している内容を確認し、コーディングについての質問をAdobe AIRデベロッパーコミュニティに投稿します。オンデマンドプレゼンテーションから学習する。コミュニティリソースに取り組む。Adobe AIRイベントまたは同好のデベロッパーを検索する。以下のデモを視聴し、デベロッパーコミュニティのリーダーがAdobe FlexとAdobe AIRを使ってどのようにビジネスアプリケーションを改善しているかについて学びます。
エキスパートへの質問*
リッチインターネットアプリケーション用のインタラクティブヘルプシステムの作成*
既存のヘルプシステムやナレッジベースをAIR、Flex、Cold Fusionおよびその他のアプリケーション用の魅力的な情報エクスペリエンスに変換する方法を確認します。コミュニティリソースに取り組む。Adobe AIRコミュニティアプリケーションの一覧を見るには、このウィキを参照してください。usでブックマークされているページを確認します。このコミュニティが主催するAdobe AIRフォーラムのテクニカルディスカッションに参加します。デベロッパーブログでAdobe AIRについてのユーザの記述を読むことができます。メモ :Adobe AIRデベロッパーが親交を深めたり、生産性の維持に必要なテクニカルリソースを検索したりするのに役立つサイトを維持する場合は、そのサイトを登録*します。弊社が同意する場合は、簡単な説明と共にサイトのロゴをこのページに投稿します。
Adobe AIRについての特定の質問に対する回答をお探しですか
フォーラムに質問を投稿し、Adobe AIRコミュニティのアドビコミュニティエキスパートや他のユーザから支援を受けることができます。Adobe AIRのコミュニティエキスパートを検索したり、自分がコミュニティエキスパートになったりできます。また、Adobe AIRフォーラムでコミュニティエキスパートと会話することもできます。
トレーニングの機会
アドビオンラインリソースやイベントを利用すると、スキル、プロジェクト、経歴などを向上させることができます。アドビユーザグループを検索する。ユーザの領域でAIRを利用して構築する同好のデベロッパーの仲間入り*をします。カンファレンスに参加するか、オンラインセミナーを受講してAdobe AIRについてより深く学びます。
次のステップ
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
新しいHTMLセキュリティモデルを念頭に置いた設計
AIRアプリケーションの作成
印刷用に表示
私自身、ここ数年の間、人よりもたくさんのWebを手がけてきました。それだけに、Webブラウザ環境の扱いには慣れていて仕事もお手の物なのですが、デスクトップ環境には魅力が満載で心惹かれます。最近は、アプリケーションをどのようにオンラインへ移行するかが話題となっていますが、まったく同じアプリケーションを実現できるわけではありません。デスクトップ環境ならではの特徴があります。
ウィンドウのドロップシャドウ、カスタムメニュー、ドックバー、ローカルにある他のアプリケーションとの連携など
そんな私のデスクトップ環境への憧れを叶えてくれるテクノロジーが登場しました。
この記事では、Adobe AIRを使ってデスクトップアプリケーションを制作する方法を解説しましょう
この記事では、以下のソフトウェアとサンプルを使用しています。
事前に必要な知識
著者について
他にもテクノロジー全般に関する記事執筆を多数手がける。エンジニアとしては、リッチアプリケーションの開発に注力している。また、IBM デベロッパーワークスのAjaxフォーラムのモデレーターでもある。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
新しいHTMLセキュリティモデルを念頭に置いた設計
AIRアプリケーションの作成
このファイルでは、スタートページの場所や、ウィンドウサイズなど、アプリケーションの仕様を定義します。今回のアプリケーション記述ファイルは、以下のように記述しています。html)を、アプリケーションのウィンドウが開いたときにまず読み込みます。それほど複雑なコード内容ではありません。なお、polylineが多くなりすぎてレンダリングが遅くなってしまわないように、すべての位置情報を使用するのではなく、30番目ごとの位置情報を表示するようにしています。
なお、このキーを取得する際に登録したドメインと、 root
htmlファイル内のIFRAMEタグ内に記述したドメインは同じものを使用しなければなりません。
xmlを起動させてみましょう
図3のようなウィンドウが開くはずです。
GPXファイルの読み込み
htmlのコードは、読み込んだGPXファイルに記述されているトラックポイントを抜き出し、それらをui
それを元に、地図上に移動ルートをプロッティングします(図5)
移動ルートが表示されました。
これは、トライアスロンに向けての練習として数週間前に走ったルートで、距離は13
2マイルでした。場所は、サンフランシスコのベイエリアにあるサンマテオブリッジ北側の自然保護区です。
湿地帯独特のにおいがしますが、それを我慢できるなら、悪くないランニングコースですよ
さらに学習したい方へ
この記事では、移動ルートを地図上に表示するだけのシンプルな機能でしたが、Adobe AIR APIを使えば、もっといろいろな機能を実現することができます。たとえば、 >ローカル環境のSQLサーバと連動させてランニング記録をデータベースに保存し、過去の記録をいつでも表示できるようにしたり、ランニング記録の一覧を別ウィンドウで表示するようにしたりすることができます。Adobe AIRでマッシュアップがどのように実現できるかを紹介するための簡単なアプリケーション作例でしたが、自分自身、Adobe AIRの大きな可能性を感じることができました。
また、デスクトップアプリケーションを開発する上でセキュリティ面に不安を感じている人もいるかと思いますが、新しいHTMLセキュリティモデルに沿って制作を行うことで解消されるのではないでしょうか
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
私自身、ここ数年の間、人よりもたくさんのWebを手がけてきました。それだけに、Webブラウザ環境の扱いには慣れていて仕事もお手の物なのですが、デスクトップ環境には魅力が満載で心惹かれます。最近は、アプリケーションをどのようにオンラインへ移行するかが話題となっていますが、まったく同じアプリケーションを実現できるわけではありません。デスクトップ環境ならではの特徴があります。
ウィンドウのドロップシャドウ、カスタムメニュー、ドックバー、ローカルにある他のアプリケーションとの連携など
そんな私のデスクトップ環境への憧れを叶えてくれるテクノロジーが登場しました。
この記事では、Adobe AIRを使ってデスクトップアプリケーションを制作する方法を解説しましょう
この記事では、以下のソフトウェアとサンプルを使用しています。
事前に必要な知識
Adobe AIRの動向をずっと追いかけていますが、特に気になるのは最近行われたセキュリティモデルの大きな変更です。
Adobe AIRの新しいHTMLセキュリティモデルでは、どのようにすれば安全なアプリケーションを作成することができるのか、 Google Mapsを使ったマッシュアップで簡単なアプリケーションを作りながら解説しましょう
ちょうどいいものがあります。数ヶ月前の私の誕生日に、妻がガーミン社のGPS腕時計 をプレゼントしてくれました。
私はランニングや自転車で走るのが好きなので、妻はこの腕時計を選んでくれたのでしょう
この腕時計には、移動距離や休憩時間の計測、心拍数管理、歩調表示などのさまざまな機能が搭載されていて、運動好きには夢のガジェットです。話がそれましたが、私の腕時計モデルにはパソコンにつなぐインターフェイスがあり、ランニング記録などをガーミン社のソフトウェアにダウンロードすることができます。
何で「HoudahGPS」という名前なのか知りませんが、気にしないでおきましょう
そのXMLファイルの中身は、以下のようなコードになっています。最初にあるコードはおいておいて、そのすぐ下には、最近私がランニングした際のGPS位置情報があります。
新しいHTMLセキュリティモデルを念頭に置いた設計
Adobe AIRでHTMLベースのアプリケーションを開発する上で考慮しなければならないのが、新しいセキュリティモデルです。その考え方を簡単に言うと、「Adobe AIRの関数のメソッドを取得して悪用し得るようなコードは、Adobe AIRの関数にアクセスできないようにする」ということです。今回の場合、Google Mapsのコードがそれにあたるわけですが、もちろんGoogleが悪意あるコードを記述しているとは思いません。たとえばの話です。新しいセキュリティモデルに沿って今回のアプリケーションを作成する場合、アプリケーションのファイルメニューやGPXファイルの入出力に関するコードは「アプリケーションサンドボックス」に記述します。Google Mapsのコードと連携し、地図を表示させ、位置情報を図示するためのコードは「クラシック(ブラウザ)サンドボックス」に記述します。そして、クラシック(ブラウザ)サンドボックスからは、Adobe AIRの関数にアクセスできないようにすることで、スクリプトインジェクションなどの攻撃にさらされる危険性を低減します。図2は、2つのサンドボックスの関係を示したものです。htmlファイルには、アプリケーションのメニュー、GPXファイルの読み込み、GPXファイル内に記述されている位置情報のリスト化に関するすべてのコードが記述されています。htmlからのリクエストに応じて、受け取った位置情報のリストをもとに地図上に移動ルートを描画します。
AIRアプリケーションの作成
このファイルでは、スタートページの場所や、ウィンドウサイズなど、アプリケーションの仕様を定義します。今回のアプリケーション記述ファイルは、以下のように記述しています。html)を、アプリケーションのウィンドウが開いたときにまず読み込みます。それほど複雑なコード内容ではありません。なお、polylineが多くなりすぎてレンダリングが遅くなってしまわないように、すべての位置情報を使用するのではなく、30番目ごとの位置情報を表示するようにしています。
なお、このキーを取得する際に登録したドメインと、 root
htmlファイル内のIFRAMEタグ内に記述したドメインは同じものを使用しなければなりません。
xmlを起動させてみましょう
図3のようなウィンドウが開くはずです。
GPXファイルの読み込み
htmlのコードは、読み込んだGPXファイルに記述されているトラックポイントを抜き出し、それらをui
それを元に、地図上に移動ルートをプロッティングします(図5)
移動ルートが表示されました。
これは、トライアスロンに向けての練習として数週間前に走ったルートで、距離は13
2マイルでした。場所は、サンフランシスコのベイエリアにあるサンマテオブリッジ北側の自然保護区です。
湿地帯独特のにおいがしますが、それを我慢できるなら、悪くないランニングコースですよ
さらに学習したい方へ
この記事では、移動ルートを地図上に表示するだけのシンプルな機能でしたが、Adobe AIR APIを使えば、もっといろいろな機能を実現することができます。たとえば、 ローカル環境のSQLサーバと連動させてランニング記録をデータベースに保存し、過去の記録をいつでも表示できるようにしたり、ランニング記録の一覧を別ウィンドウで表示するようにしたりすることができます。Adobe AIRでマッシュアップがどのように実現できるかを紹介するための簡単なアプリケーション作例でしたが、自分自身、Adobe AIRの大きな可能性を感じることができました。
また、デスクトップアプリケーションを開発する上でセキュリティ面に不安を感じている人もいるかと思いますが、新しいHTMLセキュリティモデルに沿って制作を行うことで解消されるのではないでしょうか
著者について
他にもテクノロジー全般に関する記事執筆を多数手がける。エンジニアとしては、リッチアプリケーションの開発に注力している。また、IBM デベロッパーワークスのAjaxフォーラムのモデレーターでもある。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
XML 環境設定ファイルの読み取りおよび書き込み | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
XML 環境設定ファイルの読み取りおよび書き込み
このサンプルアプリケーションは、アプリケーションの位置やサイズに関するデータと保存日時を読み取りおよび書き込みます。また、アプリケーションを開くときにそのデータに従ってウィンドウを配置します。
テキストファイルの読み取りおよび書き込み
Adobe AIR アプリケーション格納ディレクトリにあるファイルの指定
AIR アプリケーションウィンドウの位置、サイズおよび表示の変更
XML 環境設定の指定が可能なサンプルアプリケーション
注意:このサンプルアプリケーションは、説明のためにそのままの状態で提供されています。この記事に書かれた操作を行うには、次のソフトウェアとファイルが必要です。このサンプルアプリケーションには、次のファイルが含まれています。HTML ベースのアプリケーション構築の経験があることが推奨されます。
アプリケーションのテスト
このアプリケーションは、アプリケーションの位置やサイズに関するデータと保存日時を読み取りおよび書き込みます。また、アプリケーションを開くときにそのデータに従ってウィンドウを配置します。環境設定は、XML データを含むテキストファイルに格納されています。アプリケーションは、読み取りの場合はそのデータを XML オブジェクトに変換し、書き込みの場合は XML データをテキストに変換します。このアプリケーションをテストするには、次の手順に従います。アプリケーションを開きます。ウィンドウのサイズと位置を変更します。アプリケーションを再起動して、指定した環境設定が適用されていることを確認します。
コードの理解
XML ファイルからのデータの読み取り
これは AIR アプリケーションごとに定義されています。init() メソッドは、ウィンドウの closing イベントに応答して環境設定データをファイルに保存するようにイベントハンドラも設定します。stream オブジェクトの open() メソッドは、ファイルを同期的に開き、読み取りバッファへのデータの読み取りを開始します。つまり、ファイルは同期的に読み取られるので、ファイルのすべてのバイト数です。
アプリケーションウィンドウの位置とサイズの変更
つまり、ファイルは同期的に読み取られるので、ファイルのすべてのバイト数です。ウィンドウのサイズと位置を変更してからウィンドウを表示可能にします。
ファイルへの XML データの書き込み
さらに、行末の文字をプラットフォーム固有の行末の文字(File
これにより、FileStream オブジェクトはファイルへの書き込みが可能になります。既存のデータは書き込み前に切り詰められます。ユーザがウィンドウを閉じると、NativeWindow オブジェクトから終了イベントが送出されます。このイベントのイベントハンドラでは、イベントのデフォルトの動作(アプリケーションを閉じて XML データを保存する saveData() メソッドを呼び出す)がキャンセルされます。exit() メソッドが呼び出され、アプリケーションが閉じます。
著者について
サンフランシスコベイエリアのファンは、Jeffのトロンボーン演奏を寛大に許容しています。のダンシングホットドッグ、Big Frankとして活躍した経験もあります。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
RIAエンジニアに役立つ情報が記載されたサイトをレコメンド
RIAエンジニア向けのフィードが登録された RSSリーダー
もちろんユーザーによるフィードの編集が可能で、たくさんのフィードを見やすく表示
複数のPDFファイルを一発検索
画像はウィジェットモードで起動中のADBです。
この連載について
ADB は、RIA開発者に役立つツールになることを目標としていますが、それ以外にも、開発自体をオープンに展開し、RIA開発者の皆さんの参考になればいいなと考えています。
従って、ソースコード公開
、開発の状況もこの連載にて随時公開
という太っ腹プロジェクトになる予定です。連載第1回目は、RIA開発をどのように進めるかについて今回のプロジェクトの実例を交えながら紹介したいと思います。
事前に必要な知識
Webシステム開発またはWebサイト制作に従事したことがある。
さて、本題ですが、RIA開発プロジェクトは、どうやって進めていくのがベストなのでしょうか
その答えの一つとして、「Webシステム開発手法を主軸に、各フェーズにWebサイト制作のノウハウを思いっきり詰め込む」という開発スタイルが考えられます。主軸となる「従来のWebシステム開発」と、「RIA開発」との大きな違いは、後者がUI(ユーザーインターフェース)に大きなウェイトを占めているということです。
必然的にUIに重きをおいた開発になりますから、まぁ、名付けて「UIドリブン開発」って事でお願いしますね
以下に開発の進め方を記述してゆきますが、基本的な流れはごく一般的なシステム開発フローですので、「UIドリブン」に関わりの多い、上流工程に着目して書いてゆきたいと思います。要件を固める。
せっかくのRIA開発ですから、クライアントの要求を、「見た目にもかっこよく、操作性の高いUIを持つ、便利な機能」
として実現させたいのは、誰もが思うところです。一般的なシステム開発の要件定義との違いは、「UIに関する要件」が多く出現することです。ですから、一般的な「機能要件」と「非機能要件」の洗い出しの他に、「UI要件」の洗い出しという作業を行うようにします。
このフェーズから、可能であればデザイナーとデベロッパーの両方が参加するようにし、クライアントも交えて活発に議論することが望ましいと言えるでしょう
では、UI要件として何を検討するのかを以下に記述してみました。
UI要件として検討すべきポイント
画面レイアウトの検討
ドラッグアンドドロップの使用検討
アニメーションさせる箇所とその種類の検討
画面遷移の実現方法
リスト表示のページング方法
UI要件は、機能要件と密接に関わっていますから、機能要件の内容とUI要件の内容とをうまく調整するようにします。
機能要件として、(UIの想像がつかないような)新たな機能を盛り込む場合は、しっかりとUI要件を詰める必要がありますし、反対に一般的に良くある機能、例えば、今回のプロジェクトの「RSSリーダー」のような機能は、 一般的にユーザーが体験した事のある機能ですから、UI要件は不要です(または軽いボリュームで済みます)
また、全体のバランスに対して各機能要件と各UI要件が調和しているかをよく考えるようにします。
クライアントの要求を元に、ユーザーになったつもりで機能案、UI案をたくさん検討し、それらの案の中から「要求に沿ったものであるか
」「操作性が高く、便利な機能か
」という観点で絞り込んで要件定義書を書けば、きっとよいものになるでしょう
あと、本当に期間内に作れるかどうかの検討も忘れずに・・・
UI設計を行う。もちろんデザイナーが主体となってUI設計を行いますが、デベロッパーも積極的に参加するようにします。小規模な開発の場合は、UI設計が外部設計を兼ねている場合が多いので、デザイナーの観点とデベロッパーの観点の双方からチェックし、仕上げてゆきます。UI設計を行う際には、実装時のリスクをしっかり検討するようにします。以下のようなコンポーネント制作難易度の判断は必須です。[簡単] Flex 標準のコンポーネントをそのまま利用できる。
[簡単] スキン、スタイルを設定するだけで大丈夫
[ちょい難] Flex 標準のコンポーネントを拡張すれば大丈夫
[難しい] 一からコンポーネントを作る。複雑なものを作ることに快感を覚える気持ちもよくわかりますが、あくまで主軸はUIに置きます。思いっきり頑張ったらカスタムコンポーネントを作る事が出来るかもしれませんが、よく検討すると、違ったUIのアプローチで同じことが簡単に実現できるかもしれません。
よく検討するようにしましょう
また、UI設計から実際にパーツを切り出して実装するための方法はいくつかありますので、デザイナーとデベロッパーとでよく協議して決定しておくようにします。
デザイナーからデベロッパーに提供するポイント
画像ファイルを切り出して提供
今回のプロジェクトでは、いわゆる紙芝居形式で、JPEG画像を成果物としてUIを設計しました。デスクトップ常駐ツールですから、常駐時のUI、ウィジェット時のUI、大きく開いた時の画像をそれぞれ作成しました。デザイナーとデベロッパーとの連携ポイントは、前述したようにいくつもありますが、そのプロジェクトの参加メンバーのスキルやデザイナー/デベロッパーの作業ボリューム比率などを考慮し、柔軟に対応するようにします。ちなみに同時期にアーキテクチャ(フレームワーク、ライブラリの選定または制作)を決定し、プログラミングの方向性を決めておきます。また、サーバーサイドとの通信インターフェースを決定します。今回の場合は、サーバーサイドの開発はありませんが、SQLiteを使用したデータベースの設計、RSSフィードの取得などの外部リソースとの連携の設計をこのフェーズの期間中に行いました。この辺りは、一般的なシステム開発と同じですので割愛させて頂きます。モックアップを作る。出来上がったUIをもとにモックアップを作ります。UI設計の成果物(JPG画像)をはめただけのアプリケーションでも完成イメージにぐっと近づきます。今回のプロジェクトでは、画像のはめ込みだけでなく、常駐モード/ウィジェットモード/通常モードのモード切り替えまでを実装しました。目立つ部分のアニメーションも速い段階から実装するようにし、なるべく完成形のイメージが沸きやすいようにしました。
モックアップで作成したプログラムが、そのまま本番にも流用できるのが理想ですから、アーキテクチャの検討やコーディング規約の作成はモックアップまでにあらかじめ完了させておきたいところですね
さて、上流工程におけるUIドリブン開発のポイントを紹介してきました。
UIドリブンでは、UIを中心に作業を進めますから、プロジェクトの早い段階から完成イメージが掴みやすいことが特徴でしょう
しかし、その反面、要件定義とUI設計のフェーズは絶対に失敗できませんので、デザイナー・デベロッパーに求められるスキルはかなり高くなってしまいます。RIA開発において最も大切なのは何と言ってもクライアント/デザイナー/デベロッパー間のコミュニケーションです。特に前述した上流工程でのデザイナーとデベロッパーの意思疎通が重要であり、それが最終成果物(アプリケーション自体)の仕上がりに大きな影響を与えます。
デザイナーもデベロッパーも、お互いを尊重し、また刺激し合って、良いアプリケーションを作ることができれば幸せですね
さいごに、筆者が「デザイナーとデベロッパーとの協業」という発表を行った際の資料リンクを貼っておきますので、ご興味のある方は見てみてください。
次回の連載をお楽しみに
著者について
所属のエンジニア
きちんと「エンジニアリング」ができる、本当の意味でのシステムエンジニアを目指し修行中
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
RIAエンジニアに役立つ情報が記載されたサイトをレコメンド
RIAエンジニア向けのフィードが登録された RSSリーダー
もちろんユーザーによるフィードの編集が可能で、たくさんのフィードを見やすく表示
複数のPDFファイルを一発検索
画像はウィジェットモードで起動中のADBです。
この連載について
ADB は、RIA開発者に役立つツールになることを目標としていますが、それ以外にも、開発自体をオープンに展開し、RIA開発者の皆さんの参考になればいいなと考えています。
従って、ソースコード公開
開発の状況もこの連載にて随時公開
という太っ腹プロジェクトになる予定です。今回はライブラリ選定ADBのRSSリーダー機能まわりで使用したライブラリを紹介したいと思います。連載第1回では、「要件を固める」→「UI設計」という流れについての話でしたが、その間、実装部隊の方では並行して、要件を実現すべくライブラリを選定、作成しました。私が担当していたRSSリーダー機能を例にとると、以下のような流れです。
・ライブラリ化できる機能の洗い出し
どういった機能をライブラリ化するかですが、その辺りはどんな言語でもあまり変わらないと思います。
・既存ライブラリの適用を検討
今回は、オープンソースなど、既存のコードで利用できるものは極力利用する形で進めました。ADB開発プロジェクトは前述の通り「太っ腹プロジェクト」だということもあり、プロジェクトとしての縛りは緩かったのですが、商用製品を開発するプロジェクトであれば、ソースコードの出所や著作権、利用許諾(ライセンス)等、十分注意する必要があります。
・足りないものは実装
要件に合う適当なものがない場合のみ、独自に作成しました。0、Atom)のフィードを自動判別して解析してくれます。以下サイトからダウンロードしてください。こちらは以下サイトからダウンロードします。サンプルコードを見ていただければ分かりますが、使い方は非常に簡単です。フィード解析結果は以下のような構造となっており、フィードの形式にかかわらず、同じインタフェース(IFeed)で扱えます。なお、フィード形式独自の項目を参照したい場合には、取得結果を、形式ごとに定義されているクラスにキャストすれば良いようになっています。今回、適当なライブラリが見当たらなかったため、ADBプロジェクトで簡易なものを実装しました。以下でポイントのみ解説します。ソースコードは公開(される予定)です。是非ご覧ください。
次回の連載をお楽しみに
著者について
本人いわく「なんでも屋さん」
設計・開発から運用・保守まで守備範囲は幅広いらしい(単なる器用貧乏だという話もあったりなかったり)
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
連載の第3回目は、ADBでも使用したリストの作成について紹介したいと思います。サンプルアプリケーションを確認する。
事前に必要な知識
Flex/AIRでアプリケーションを開発したことがある。
リスト作成のアプローチ
さて、リストの作成ですが、Flexに備わるコンポーネントをそのまま使うだけでは実現できそうにありませんのでカスタムコンポーネントを作成する事になります。リスト作成のアプローチはいくつかあります。Flex のリスト系コントロールを利用して実装する。筆者も経験しましたが、「Spriteをベースに一から実装する」には時間がかかりますが、制約が無いので思い通りのリストが作れます。FlexのListやTileListなどを利用したリストの作成は、こちらに詳しく書かれていますのでここでは紹介しません。今回は、最後の「VBoxを利用して実装する」というアプローチにトライします。
リストの構造
今回作成するサンプルの完成イメージは以下のようなものです。このリストは、以下の構成要素に分解することができます。リスト要素を縦に配置する。縦スクロールバーを持つ。リスト要素データを適切に表示する。
リストの元となるデータ(配列)
ではこれらを順番に作成してゆきましょう
リスト要素データの作成
サンプルのイメージは、書籍リストです。表示する要素は、サムネイル、書籍名、著者、発行日とします。まずは単体のリスト要素データを表す Book クラスを作成します。次に、リスト要素データ配列を作成します。データは固定で10件とします。これで、リスト要素データ配列が作成できました。実際にはRemoteObjectなどを使用してサーバーサイドから取得することが多い部分かと思います。
リスト要素の作成
次にリスト要素を作成します。サンプルでは Canvas を利用してレイアウトします。リスト本体からは、data プロパティにBookデータが渡されるというルールにします。// リスト要素の作成中は以下のようにすると先に作成した。// データが使える。
(ここでは先頭の1件)
このコンポーネントの作成中は、上記ソース中のコメントのように記述すると、先に作成したリスト要素配列データが利用できます。
さて、いよいよリスト本体を作成しますが、前述したように、今回は mx
VBoxを利用する事にします。VBox コンポーネントは、子オブジェクトを自動的に縦方向(垂直方向)に並べてくれるレイアウトコンテナです。VBoxは、子オブジェクトを縦に並べてゆき、子要素がVBox自身の高さを超えると自動的にスクロールバーを表示します。このソースは、以下のようなものです。VBox が自動的に表示するスクロールバーをそのまま使うと、スクロールした時の動きがスムーズではありません。そこでTweenerというアニメーションライブラリを利用し、スムーズにスクロールするようにします。リストデータをコンポーネントに対して設定できるようにする。VBox のままでは、リストとして成立しません。大抵の場合、リスト要素となるデータは Array や ArrayCollection などの配列で保持しますので、リストコンポーネントに対して配列のデータを設定できるようにする必要があります。データが設定されたら自動的にリスト要素(Pack)を追加するようにします。リスト要素の生成は、一度に生成すると描画に時間がかかり、画面が固まったようになってしまう恐れがあります。
* リスト要素の作成
* リスト要素の生成
(スキンの作成についての説明は今回は割愛させて頂きます。では最後に作成したコンポーネントを使ってみます。VBox を利用する方法でのリスト作成を紹介しました。今回のサンプルだけではまだまだ実用に耐えられるものではありません。ADBは、ソースコードが公開されますので、リストの部分の実装について、一度覗いてみて頂ければ幸いです。
次回の連載をお楽しみに
画像はウィジェットモードで起動中の ADBです。
著者について
所属のエンジニア
きちんと「エンジニアリング」ができる、本当の意味でのシステムエンジニアを目指し修行中
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
ADBでは、RSSリーダーやおすすめ情報などの受信したデータは全てSQLiteに格納するようにしています。一旦、SQLiteに格納してしまえばオフライン状態でもデータを表示することができ、使い勝手を向上させることができます。SQLiteは、MySQLやPostgreSQLなどのデータベースに比べると扱えるデータ型などが限られているので複雑なものを格納するには適していませんが、クライアントの一時的なデータ保管場所としては十分使えるデータベースです。しかしAPIでは、昔ながらの手順でデータベースへのコネクションを取得し、SQLStatementで生成したクエリを発行して結果を取得するという流れになります。これでは、画面側のロジックでSQL文の生成やコネクションなどデータベースのことを意識しなければいけなくなってしまいます。ActiveRecordのパターンは「アプリケーション側のモデル構造とDB側のテーブル構造を1:1で対応させる」といったシンプルな考え方で必要なクラス数も比較的少なくおさえることができ、ソースコード量も抑えることができます。このため、他のプログラミング言語でも様々な形式で実装されており、Ruby on RailsやCakePHPなどのフレームワークの中でも機能的に組み込まれています。AirRecordを使うことで、モデル側でデータベースの操作を集約できるので画面とロジック、モデル(データベース)をうまく分離して開発することができます。SQL文を書くことなく非常に短い記述でレコードの抽出や書き換えが行えます。テーブル間の関連を表現でき、1回の検索で紐付くデータを抽出することができます。find(id)」と書くだけで全ての情報が連想配列として返すことができます。このことにより、画面を担当している開発者は、あまりデータベース周りを気にすることなくデータを操作できるので、スムーズに開発を進めることができます。
(今回のADBでは、実際にできたと思います)
AirRecordでは次のような仕組みでデータベースを操作することができるようになっています。ここからは、AirRecordプロジェクトページからダウンロードできるサンプルソースをベースに説明していきます。
データベースの接続
アプリケーションの初期処理の中でデータベースへの接続を行います。addメソッドでは、下記のパラメータを設定します。dbというDBファイルが作られます。
(既にファイルが存在している場合は、DBファイルは生成されません)
(AIRアプリのストレージ格納場所)
ちなみにAIRアプリのストレージ格納場所は、下記のようになります。また、接続時にはddlパラメータで指定したSQL文の配列を順番に流しこむようになっています。それと、これはテーブル設計時のルールなのですが、テーブル名は複数形に統一するようにしています。これはテーブルは、複数レコードが集まったものなので名称は複数形にするべきという考えだからです。テストなどでデータベース接続時に必ずDBファイルを初期化したい場合は、connectメソッドを次のように記述します。こうすることで、起動するたびに一旦DBファイルを削除してから新しいDBファイルを生成することができます。
モデルクラスの作成
テーブルの数と同じ分だけモデルクラスを作成します。例えば、booksテーブルに対するモデルクラスは下記のようになります。驚くことに、たったこれだけでモデルクラスとして機能します。
レコードの追加
レコードを追加する場合は、モデルクラスのinsertメソッドを使用します。予めモデルクラスのインスタンスを生成しておきます。insertメソッドには、フィールド名と値の連想配列(配列オブジェクトとも言う)を引数で渡します。レコードの追加の場合は、主キーであるidは指定しないでおきます。こうすることでidにインクリメントされた番号が自動的に割り当てられます。予めモデルクラスに、フィールドに対応したメンバー変数を作っておきます。insertする前にモデルのインスタンスに対して値を設定しておきます。そして、引数を指定せずにinsertメソッドを実行します。どちらでも同じことができますが、モデルクラスにメンバー変数を作っておくほうが堅実なやり方です。
レコードの検索
レコードを検索する場合は、モデルクラスのfindメソッドを使用します。findメソッドの1つ目の引数に検索条件を指定します。検索条件は、文字列で指定する方法と連想配列で指定する方法があります。連想配列の場合は、フィールド名とマッチさせる値の組み合わせを指定するとAND検索することができます。上記の例では、下記のようなSQLが発行されることになります。文字列の場合は、WHERE句に指定する条件文を下記のように直接書きます。引数を指定しない場合は、全件を取得することができます。検索結果は、次のようなArrayオブジェクトで返ってきます。1件だけを取得したい場合は、findOneメソッドを使う方が便利です。findOneメソッドでは、連想配列として結果が返ってきます。複雑なSQLで検索したい場合は、queryメソッドを使用してください。
レコードの更新
レコードを更新する場合は、モデルクラスのupdateメソッドを使用します。1つ目の引数に更新レコードの条件を連想配列もしくは文字列で指定します。2つ目の引数に更新対象のフィールドと値のセットを連想配列で指定します。insertと同じようにモデルクラスに値をセットして更新することもできます。その場合は2つ目の引数を省略します。但し、この場合は全てのフィールドをモデルにセットしておかなければいけないので注意してください。特定のフィールドのみを更新するには連想配列で指定してください。
レコードの削除
レコードを削除する場合は、モデルクラスのdelメソッドを使用します。引数に削除レコードの条件を連想配列もしくは文字列で指定します。AirRecordでは、アソシエーション(関連付け)を記述することで関連したテーブルの情報を自動的に取得できます。例えば、booksテーブルとnotesテーブルが1:nの関係で関連しているのであれば、下記のようにモデルクラスのコンストラクタでアソシエーションを定義しておきます。
(キーを変えて複数指定することができます)
ARAssociationオブジェクトをnewする際に、1つ目の引数で対象のモデルクラス名、2つ目の引数に外部キーとなっているフィールド名を指定します。これで、Bookのモデルクラスからレコードの検索を行うと、検索結果の連想配列にnotesというキーでNoteモデルクラスに対応したnotesテーブルの関連データが自動的にセットされるようになります。この状態で、booksから1件だけデータを取得すると下記のような結果が得られます。
(この辺はサンプルソースを見てもらうほうが理解が早いと思います)
アソシエーションの考え方は少し難しい部分もありますが、慣れると1回の検索で関連データが一気に取得できるので非常に便利です。-1にすると最下層まで取得するようにもできます。他にも関連データを取得する際に件数を制限したり検索条件を加えたりしたい場合は、ARAssociationオブジェクトをnewする時の引数を変えることで実現できます。アソシエーションには2つだけ注意点があります。1つめが、関連データを自動的に検索するため、アソシエーションを定義しすぎるとボトルネックになるということです。
1回の検索でどこまでデータを取得したいか利用シーンを考えながら最低限の設定にしておくほうがよいでしょう
2つめが、アソシエーション定義したモデルクラスがコンパイル対象にならないということです。FlexやAIRアプリケーションをコンパイル(ビルド)すると、内部で使用されていないクラスは除外されてしまいます。アソシエーションで動的にクラス名を指定しているだけの場合は、下記のようなモデルクラスを参照するだけのModelClassesクラスを作っておき、どこかの場所でこのModelClassesを参照するようにしておくと全てのモデルをコンパイル対象にすることができます。
複数データベースの対応
AirRecordでは、1つのAIRアプリケーションで複数のデータベースを操作することもできます。その場合は、まずデータベースの接続時の引数でnameの部分を別の名前で登録しておきます。そして、モデルクラスで__dbNameにどのデータベースが対象か指定します。これでデータベースファイルを分けることができます。ファイルを分割したほうがパフォーマンスがアップする場合もあるので、そこは用途に応じて試してみてください。
データベースを分割した場合にアソシエーションは大丈夫か
と心配になるかもしれませんが、現時点ではアソシエーション定義されたテーブルは別々に検索しているので問題ありません。AirRecordは、他言語のActiveRecordの実装と比べて機能的には十分ではありませんが、できるだけ軽くシンプルにすることを目標にしているので、たった7つのクラスだけで実装しています。オープンソースとして公開していますので、見てもらえると何かヒントになるかもしれません。もちろんバグがあったら修正してもらえるとうれしいです。SQLiteをうまく使いこなすことでRIA、クライアントアプリケーションの新たなる可能性が出てくると思います。
著者について
発明が大好きなエンジニア
プログラミングよりも最近は工作している日が多いので子ども達に遊んでいると思われている。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
連載第5回目は、まいど
関西RIAセミナー2009にて発表した内容を紹介したいと思います。このイベントで僕たちも「RIA開発におけるパフォーマンス改善テクニック」というセッションを担当しました。イベントの様子は以下に掲載されていますのでこちらを参照下さい。※zipファイルにはパワーポイントに埋め込むためのサンプルSWFも含まれています。以下の内容の発表を行いました。アプリケーション(ウィンドウ)の形状を検討する。アニメーションを行う。OS毎の特徴を尊重する。
リスト作成時の問題点と改善策
バックグラウンド処理(画面に見えない部分の処理)の問題点と改善策
テキストの回り込みのTips
PDFの横断検索の方法
オンライン・オフラインの判定時のポイント
O/Rマッピングについて
0がリリースされる予定です。バグフィックスの他、任意にPDFが追加できる機能が搭載される予定です。他のライブラリと同様にMITまたはNewBSDライセンスで公開される予定です。いずれも関西でRIAアプリケーションが開発できる会社(と個人)です。左側のリストよりも右側のリストのほうがスムーズにスクロールします。swfの右上でデータ生成件数を指定する事ができます。Bitmap画像の周りにテキストを回り込ませる方法です。<img>タグでダミーの画像を使用します。
著者について
所属のエンジニア
きちんと「エンジニアリング」ができる、本当の意味でのシステムエンジニアを目指し修行中
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
これからはじめるAIRプログラミング ~第1回 デスクトップRIAの基本とAIRの優位点~ | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
AIR-名前の由来と基本概念
Web開発経験者がすぐに取り掛かれる-AIRアプリケーションの作成方法