デザインビュー・コードビューともに、テキストを選択した状態で「Ctrl + T」を押すと「折り返しタグ」を挿入できて便利なんですよね
デザインビューでは、さらに連続で「Ctrl + T」を押すことで、「HTMLの挿入」と「タグの編集」の切り替えもできるから、これは重宝しています。
「クイックタグ編集」はまぁまぁ使えているようだな
杉山:画像を選択して「Ctrl + T」から「クイックタグ編集」をひらくと、「タグの編集」ができる状態でひらかれるので、altの修正をしたりしています。
プロパティインスペクタの「代替」のエリアだと入力内容が見切れてしまうことがありますが、「クイックタグ編集」を使えばそんなこともありませんからね
近藤:他のアプリケーションからコピーしたテキストをDreamweaverにペーストするときに、テキストのフォーマットを選択できるのだ。例えば、クライアントからの原稿をMicrosoft Word ドキュメントで受け取ったときに、デザインビューへコピー&ペーストするとWordで設定している書式設定をDreamweaverは引き継ぐが、ペーストスペシャルを使用してペーストすれば、書式設定を引き継ぐのか、テキストだけペーストするのかなどを選択できるのだ。杉山:ペーストして不要なタグが挿入されてしまったらその都度削除していました。
(-_-) ペーストスペシャルを使えば、デザインビューからもプレーンなテキストだけペーストすることができるんですね
「タグなどの編集」に関するショートカットキー
編集可能領域の挿入
折り返しタグの編集
ペースト形式を選択して貼り付け
ショートカットキー制覇を目指して
杉山:やっぱり、ショートカットキーを使う・使わないでは、作業スピードが全然違いますね
近藤:時間の短縮だけではなく、記述ミス自体も減らすことができるしな
ちなみにショートカットキーを使いこなしているとカッコよく見えるという効果もあるな
カッコはともかく
今回紹介したもの以外にも、まだ他のショートカットキーもありますよね
作業内容に応じて、使ったら便利なショートカットキーはどんどん取り入れていこうと思います。それに、使用するソフトはDreamweaverだけではないので、他のソフトでもショートカットキーをばんばん活用したいと思います(^-^)/使用しているDreamweaverのバージョンによっては、ショートカットキーが異なる場合もあります。杉山の「これ知ってます。
杉山:<table>のデータを入力した後、「やっぱり年齢順に並べ替えたい」「受付日順に並べ替えたい」などデータの順番を入れ替えたい場合にDreamweaver上で簡単にソートすることができますよ
アルファベット順か番号順、もしくは、ひらがなかカタカナであればソートの順序を「番号順」に設定すれば「あいうえお順」にソートすることができます。ソートしたい<table>を選択した状態で[コマンド]→[テーブルのソート]をクリックします。ソートの基準とする列と順序(アルファベット順 or 番号順 / 昇順 or 降順)を設定しOKをクリックします。杉山:続いて、「表データの読み込み」についてです。csvやtsvはコピーでは表組みとしてペーストはできないので、データを読み込みます。[ファイル]→[読み込み]→[表データ]をクリックします。読み込みたいデータを参照してOKをクリックします。
エッジニュースレター連載記事 : ワンパクの「もっと使いこなしてみよう
第1回 まずはマイワークスペースの整備、そして作業開始
杉山由起子(すぎやまゆきこ)
いくつかの制作会社に在籍した後、1PAC
師匠近藤のもと、主にマークアップを担当しつつ、デザインもこなせるようになろうと日々七転八倒中
近藤将範(こんどうまさのり)
の設立に参画する。主にテクニカルディレクターとしてコーポレートサイト等の設計・制作に携わる。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
大重美幸の「これ見落としてませんか
第4回 FLV をウィンドウ/画面全体に表示する。
今月号の記事
ワンパクの「もっと使いこなしてみよう
第3回 蝶のように舞い、蜂のように刺せ、ショートカットキー
大重美幸の「これ見落としてませんか
第4回 FLVをウィンドウ/画面全体に表示する。最終回 フォトエディター_FP10の新機能を活用した。今回のテーマはFLVです。最近、FLVをブラウザのウィンドウいっぱいに広げたり、フルスクリーンで再生しているサイトを見かけます。
あれはどうやっているのでしょうか
さらに、そうしたFLV映像の前面にロゴやボタンなどのグラフィックを表示するにはどうすればいいのでしょうか
FLVの疑問を今日こそ解決しましょう
なお、記事の最後には、前回出した配列の宿題の回答を発表していますので、ぜひチェックしてください。縦横比率を変えずに FLV を再生する。そして忘れてならない2つ目はスキンに使う swf ファイルです。スキン用の swf ファイルを用意するには、ステージに FLVPlayback インスタンスを作り、使用するスキンを選んでパブリッシュします。するとスキン用 swf ファイルが fla ファイルと同じフォルダに保存されるのでこれを利用します。スキン用 swf ファイルが用意できたならばステージに作った FLVPlayback インスタンスは不要なので削除してしまいます。FLV フォルダにはスキンの fla ファイルが入っているので、これを元にカスタムスキンを作ることもできます。
では、さっそく次のサンプルを実際に見てもらいましょう
サンプルを実行すると新しいウィンドウが開いてFLVが再生されます。ウィンドウをリサイズするとウィンドウサイズに合わせてFLVが拡大縮小します。このとき画像が歪まないようにFLVの縦横比率が保たれるようにリサイズしている点に注目してください。fig1 FLVがウィンドウのリサイズに合わせて伸縮します。FLVを縦横比率を変えずにウィンドウサイズに合わせて再生します。
//フルスクリーンの余白の色
//ロゴを表示する。//縦横の比率を変えない。//ステージイベントのリスナーを登録する。//ロゴをウィンドウ右上に表示する。//ビデオサイズをフィットさせる。//フルスクリーンが終了した際にビデオサイズを再設定する。
ではスクリプトを見てみましょう
autoPlayプロパティをtrueにしておけば、読み込みが完了した時点で自動再生されます。自動再生しないのであればfalseに設定しておきplay()で再生できます。次に使用するスキンの URL を指定します。スキンの色や透明度もプロパティで設定できます。skinAutoHideプロパティはマウスカーソルがロールアウトしたならば自然に隠す設定です。
スキンの設定
ところで、サンプルファイルをダウンロードしてパブリッシュして試すと次のような警告ダイアログが表示されたはずです。
これはローカルディスクに保存してある swf ファイルからインターネット上にあるファイル(この場合は flv)にアクセスしようとしているけども、この swf を信頼してもだいじょうぶか
という警告です。
fig2 ローカルのswfからサーバーにあるflvにアクセスしようとしたときに表示される警告ダイアログ
]ボタンをクリックします。このページに表示されているのは単なる図ではなく、実際の設定プログラムです。
次のように[追加
]を選び、利用したい swf ファイルまたは swf が入っているフォルダを選択してフィールドに追加します。これで次からは警告なしで swf を利用できるようになります。fig3 テストしたい swf が入っているフォルダを追加すれば、次回からは警告されなくなります。FLV をウィンドウにフィットさせる。FLV をブラウザのウィンドウサイズに合わせるためには、2つのことを行う必要があります。1つは FLV の縦横サイズをステージサイズに合わせることです。そしてステージサイズが変化したならば、それに合わせてwidth、heightも設定し直す必要があります。//ロゴをウィンドウ右上に表示する。//ビデオサイズをフィットさせる。しかし、ウィンドウのリサイズに合わせてステージサイズが変化しなければFLVもウィンドウには合いません。alignでも設定できますが、100% サイズの設定はスクリプトではできません。この設定は swf を表示する HTML に必要なコードなのでパブリッシュによって作られる HTML コードをよく調べてください。fig4 ウィンドウサイズにステージサイズが合うようにパブリッシュ設定をします。これでウィンドウのリサイズに合わせて FLV がフィットするようになりますが、さきほどのサンプルをよく見ると FLV の縦横の比率が変化しないように変形しています。FLV の縦横の比率を変えない。フルスクリーンを利用する。さて、このサンプルにはもう1つ大事な機能があります。それはフルスクリーンへの対応です。この機能は FLV をフルスクリーン表示するかどうかというものではなく、ステージの任意の領域をフルスクリーンで表示する機能です。FLVPlayback の場合はフルスクリーン切り替えボタンが付いているスキンを使えば、FLV の領域をフルスクリーンで表示できます。この設定はパブリッシュ設定の HTML パネルの「テンプレート:Flash のみ-フルスクリーンサポート」を選んでおくことで書き出されます。フルスクリーンにした際の余白の色を黒にします。ところで、フルスクリーンを利用する場合にハマってしまう罠があります。それはこのサンプルのように FLVPlayback インスタンスの縦横サイズを元のビデオサイズと変えている場合に、フルスクリーンから戻ったときに改めて縦横サイズを再設定する必要があるという点です。フルスクリーンの切り替えイベントにリスナーを登録します。フルスクリーンが終了した際にビデオサイズを再設定します。FLV をウィンドウサイズにフィットさせる。
それでは今日の2番目のサンプルを見てもらいましょう
見てすぐにわかるように FLV がブラウザウィンドウにぴったりフィットしています。fig5 FLVがウィンドウサイズにフィットしています。ウィンドウサイズにフィットさせます。しかし、これだと FLV 画像の縦横比が変わってしまい、場合によっては映像として好ましくありません。そこで、画像の横幅はウィンドウの幅に合わせ、画像の縦の長さは画像の縦横比が変わらない値に設定するようにしたのが次のサンプルです。この場合はウィンドウ幅に対して高さが十分でない場合は画像の下が見切れてしまいますが、画像が歪むことが無く、ウィンドウ幅をせばめれば画像全体が見えるようになります。
FLV 画像の縦横比を一定にするには元のFLVの縦横サイズが必要になりますが、この値はビデオ準備完了のVideoEvent
fig6 画像の縦横比率が変わらないようにウィンドウ幅に合わせてFLV画像の縦を決めます。さらにこのサンプルではこれまでと大きく違っているところが2つあります。1つはスキンを利用していないところです。スキンを使わずに自分で作ったフルスクリーンボタンを画像右下に表示しています。もう1つの違いはフルスクリーンの状態のFLV画像の重なりです。フルスクリーンの状態でも、右上のロゴマークとフルスクリーンボタンが画像の上に表示されます。この2点に注意して次のスクリプトを読み取ってください。スキンを使わずにフルスクリーン状態でもボタンやロゴを表示します。
//フルスクリーンの余白の色
//フルスクリーンの際にFLVを最前面にしない。//ロゴを表示する。
//ビデオの準備完了イベント
//ウィンドウサイズにフィットさせる。//ロゴをウィンドウ右上に表示する。//ビデオサイズをフィットさせる。//フルスクリーンボタンを右下に表示する。//ロゴとボタンを表示する。//フルスクリーンが終了した際にビデオサイズを再設定する。フルスクリーン画像より上の重なりで表示する。先にも書いたように、このサンプルではフルスクリーン表示の際にも右上にロゴマーク、右下にはフルスクリーンボタンが表示されます。
フルスクリーンの際にFLVを最前面にしない設定
FullScreen ボタンを作りフルスクリーン切り替えボタンに設定します。
さて、今回もだいぶ長くなってきたので続きは次回までの宿題にしましょう
次のサンプルでは FLV 画像全体に模様が入っています。
最近、このような画像処理が施されている FLV を見ることがあると思いますが、いったいどのように行っているのでしょうか
それが今回の宿題です。これはどうやってる。前回の宿題の答:値をシャッフルする。最後に前回の宿題の解答です。
「席替えをしたとき、元と同じ席には続けて当たらないようにするにはどうすればよいでしょうか
」という配列をシャッフルする問題でした。席替え後に同じ席にならないようにするには、自分が今座っている席のクジ引きに参加しなければよいわけです。そこで配列の後ろから値を決めようとしたとき、決める位置よりも手前に並んでいる値の中からランダムに値を選び、その値と入れ替えていけば同じ位置に元の値が納まることがありません。これをスクリプトで書くと次のようになります。値が必ず別の位置に移動するように配列をシャッフルします。
エッジニュースレター連載記事 : 大重美幸の「これ見落としてませんか
第2回 外部 swf ファイルのシンボルを利用する。第3回 配列の値の並べ替えをマスターする。
(おおしげよしゆき)
日立情報システムズ、コミュニケーションシステム研究所を経て独立
執筆、講師、ソフトウェア開発を行う。
趣味はサーフィンとジョギング
著著は約50冊
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
最終回 フォトエディター_FP10の新機能を活用したオンライン画像編集ツール
今月号の記事
ワンパクの「もっと使いこなしてみよう
第3回 蝶のように舞い、蜂のように刺せ、ショートカットキー
大重美幸の「これ見落としてませんか
第4回 FLVをウィンドウ/画面全体に表示する。最終回 フォトエディター_FP10の新機能を活用した。本連載は今回が最終回、最後に紹介するのは「フォトエディター」です。フォトエディターは、レベル補正や色調補正などのような基本的な画像編集機能だけでなく、テキスト機能やドローイング機能も実装しています。これらの機能がフォトエディターでどのように利用されているのかを解説します。NAVER フォトエディターは、インストール型画像編集ソフトの機能を、Web ブラウザ上で簡単に利用できるオンライン写真編集ツールです。Flash Player 10 以上がインストールされていれば、特別なインストール・会員登録をする必要無く、簡単な操作で皆さんの写真のサイズを変えたり、様々なエフェクトを適用したりするなど、多様なイメージの編集ができます。またFlickrなどの外部サービスと連動してFlickr上にアップロードした写真を編集することもできます。それでは下記にてフォトエディターを説明します。
1) 充実した基本編集機能
簡単な写真編集のために、アプリケーションを起動したり高機能すぎるソフトウェアを利用したりするのは面倒です。NAVER フォトエディターでは基本的な編集機能を提供しつつ、利用者にとって使いやすい環境を提供するために様々な工夫を施しました。一般のユーザが複雑なイメージ編集処理をするのは、かなり難易度が高く、面倒な作業です。NAVER フォトエディターでは、普遍的な写真の編集スタイルを分析し、レベル補正、色調補正、ホワイトバランスなど利用ニーズが高い機能をすぐ使えるように構成しました。また、切り取り、回転、サイズ調整のような基本的なイメージ変形機能も充実させつつ、UI の利便性とのバランスを考慮しながら開発しました。NAVER フォトエディターでは、インストール型画像編集ソフトと同様、イメージの特定領域を選択して編集できます。この機能を利用することにより、例えば写真を合成したり、イメージの一部領域のみを編集したりすることが可能です。具体的には、人物写真の顔部分だけにモザイク処理を適用したり、選択された領域を特定の色で塗りつぶしたりすることができます。また、選択領域周辺にストロークを描くことや、選択部分だけコピーして新しいイメージに貼り付けることもできます。このような高機能なイメージ編集は、一般的な Web ブラウザベースで作動するオンライン写真編集ソフトでは提供されていないケースが多い一方、インストール型画像編集ソフトでは提供されている機能であり、ユーザニーズも高いと考え、実装いたしました。NAVER フォトエディターは特別なテキスト処理方法を使用しています。一般的には、テキストの処理に使われることが予想されるフォントを Flash 内に含めるケースが多いのですが、日本語の場合、フォントのサイズ容量が大きいため Web サービスには現実的ではない、という問題点がありました。この問題を解決するため、NAVER フォトエディターではシステムフォントを使用しながら、テキスト境界の階段現象(イメージの境界が階段のようにデコボコする現象)を和らげる処理をしました。その結果、表示を美しく保ったまま容量の小さいテキスト機能を実装することができました。NAVER フォトエディターは、イメージの編集機能以外にも、絵を描いたり写真の上に面白い落書きをしたりするドローイング機能を提供しています。また、ドローイング機能に付随して様々なフィルター機能、自動補正機能なども提供しており、ユーザの多様なイメージ編集・加工ニーズを満たしています。NAVER フォトエディターを提供するための必須機能が FP10 でないと実装できなかったため、FP10 を選択する必要がありました。その結果、強力で使いやすいイメージエディターを作ることができました。NAVER フォトエディターは、サーバーを使用せずクライアント側ですべての処理が可能です。これはローカル PC のファイルを保存してロードする機能が FP10 に追加されたため実現できました。しかし、FP10 ではローカルファイルアクセス機能が追加されたため、そのような面倒な作業がなくなりました。FP10 はグラフィックとイメージプロセシング処理において、以前のバージョンに比べて多様かつ効果的な方法を提供しています。ピクセルベンダーは、これまで処理できなかったプロセシングを簡単に処理できるようにしてくれます。例えば、複雑なフィルターやブレンドを、GPU または CPU を利用することにより、素早く処理することができます。NAVERフォトエディターの開発の中で、境界をぼかすオプションを使用して選択部分に効果を適用すると、選択部分の周りにアルファが的確に適用されないという問題がありました。なぜなら、これは既存のブレンド方式では解決できない部分であり、直接処理することになるとたくさんの演算が必要だからです。しかし、ピクセルベンダーを利用して新しいブレンドを制作することにより、簡単に解決できました。また、NAVERフォトエディターがサポートしているフィルター効果についても、ピクセルベンダーを利用して素早い処理ができるようになりました。3D変形機能を利用すると、Flash のすべての要素の三次元変形が可能です。既存バージョンでは、システムフォントを使用するテキストフィールドを回転させるとテキストが無くなってしまうという問題がありましたが、Z軸回転(rotateZ)を利用して回転させるとその問題が解決できます。NAVER フォトエディターのテキスト機能はこれを利用して実現しました。ウィンディング・ルールとは、ベクターパスで絵を描くときに閉じられた領域の順番とパスの方向によって、どのように塗りつぶすかを決定するルールを指します。他のベクターツールでは基本的に提供していますが、Flash では初めてサポートされる機能です。NAVERフォトエディターで自由選択ツール(Lasso)を実装する際、既存バージョンでは使用できなかった Non-zero ウィンディング・ルールを適用することにより、既存のインストール型画像編集ソフトの自由選択ツールと同じ利用体験を提供することができました。これまで4回にわたり NAVER の Flash を利用した各種サービスを皆さまに紹介することができました。Flash を利用したサービスを制作することで、NAVER を利用するユーザには従来の検索サービスでは得られなかった利用体験を、少しずつではありますがご提供できているのではないかと思います。NAVER という検索サービスはここでとどまることなく、これからもずっと、今までにない新しい検索サービス、もっと楽しい経験を与える検索サービスであり続けるために頑張ります。その中で、これまで提供できなかった価値を提供するためにも Flash が重要なカギを握っていると考えています。ありがとうございました。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
ワンパクの「もっと使いこなしてみよう
第3回 蝶のように舞い、蜂のように刺せ、ショートカットキー
大重美幸の「これ見落としてませんか
第4回 FLVをウィンドウ/画面全体に表示する。最終回 フォトエディター_FP10の新機能を活用した。IT塾 宮田亮による。
「一日でマスターする AIR プログラミング入門」
IT塾 宮田亮による。
携帯事例もあるよ
コンテンツ制作の目のつけどころ
ビジネスフローを変える。
0 で学ぶ座標と3次元空間の数学講座」
詳細は こちら
富山での初開催
詳細は こちら
Web 制作現場にて CMS に対する必要性が高まる中、今回のセミナーは「経験豊富なパワーユーザ」によるデモを中心に構成
よくありがちな難案件をその場で解決するべく、その案件事例をもとにパワーユーザーが実際に CMS を組み込んでいく様子を大公開
詳細は こちら
アップルストア銀座の開催しているマンスリー版の45回目は「CSS3」について取り上げます。
詳細は こちら
Web サイト制作を始めたい。本トレーニングは、ホームページを制作したい方や、業務で Dreamweaver を使用する方を対象とした、3日間のトレーニングです。※1社様向けの企業研修にも対応しております。
詳細は こちら
XHTML/CSS 入門講座では、XHTML/CSS の基礎知識はもちろん、ボックスモデルの概念の理解、カラムレイアウトなど基本的かつ実践的なCSSの記述方法までしっかり学習します。※お好きな1講座からお申し込み頂けます。※現在、期間限定 2講座 受講で 10,000円キャッシュバックキャンペーン 実施中です。
詳細は こちら
ビギナー向けの「ベーシックトレーニング」では実際に Web ページを作成しながら、実務で Web サイトを構築することを視野に入れたサイト定義、CSS、画像の挿入などの基本操作とサイト作成の基本的流れを学習していきます。「アドバンストレーニング」では、より実践的な作例をもとに、テンプレートの活用、ロールオーバーなどのデザインテクニック、ウィンドウの設定、効率的なサイト管理法などを学びます。
詳細は こちら
携帯事例もあるよ
コンテンツ制作の目のつけどころ
次回2/7のセミナーは、さまざまな制作事例を見せていただきながら、どうやってこのサイトが出来たのかという制作プロセスや、完成に至るまでの目のつけどころや注意した点、苦労話などなど、盛りだくさんの内容となっております。また、なかなか舞台裏が見ることができない携帯コンテンツ制作の裏側も語っていただきます。
詳細は こちら
Flash の基礎からじっくりまなぶには
簡単なアニメーションはできるけど、細かい設定はこれで正しいのか
や、コンテンツ製作をする上での注意点はなに
など、実習を行いながら、講師が Flash のノウハウをお伝えします。0 入門講座」がオススメです。※1社様向けの企業研修にも対応しております。
詳細は こちら
本講座では、これから Flash を学習しようという方を対象に、アプリケーションの基本操作から新機能はもちろん、その活用方法までしっかり学習していきます。わかりやすいサンプルを使って一緒に実習を行うため、Flash コンテンツの基本概念や実践的な制作方法も身につきます。※現在、期間限定 2講座 受講で 10,000円キャッシュバックキャンペーン 実施中です。
詳細は こちら
0 入門への2講座セット
0 でプログラミングの基本を学習する入門講座です。0 の基本を適切に理解する事を目的に、独学ではなかなか理解しにくい概念的な部分を分かりやすく解説します。※お好きな1講座からお申し込み頂けます。※現在、期間限定 2講座 受講で 10,000円キャッシュバックキャンペーン 実施中です。
詳細は こちら
本講座では、3つのクラスとひとつのメソッドをご紹介します。これらのクラスやメソッドの使い方と、その前提となる3次元座標空間の考え方について、サンプルスクリプトを示しながら解説します。また、ベクトルや行列などの数学的な基礎にも触れます。※現在、期間限定 2講座 受講で 10,000円キャッシュバックキャンペーン 実施中です。
詳細は こちら
スクリプティングには、数学的思考が必要だとよくいわれます。大切なのは、基本的な仕組みを知り論理的に考えることです。本講座では、数学の公式も紹介しながら、論理的なスクリプトの組立て方を実習で学んでいきます。
詳細は こちら
ボタンを使ったスライドショー等、Flash でのインターフェイス作成を題材に、基本的なスクリプトを理解するビギナー向けの講座です。
英語を初めて習うとき、まず英会話からスタートするでしょう
あいさつに始まって、自己紹介や買い物といったさまざまな場面における会話のパターンを覚えることにより、日常会話の進め方を知り、英語に親しむことができます。細かな文法には深入りせず、スクリプトというものはどう記述し、それがどのように動作するのかということを理解していただきます。0 パッケージ割引コースあります。
詳細は こちら
0 をハンズオンで学ぼう
0 を、一人につき PC 一台の実習環境で学ぶハンズオントレーニングです。0 プロフェッショナルガイド」(マイコミ)をテキストとして、著者である野中文雄氏が直接指導にあたります。
0 の基本と処理の組み立て方・考え方を解説
0 の基礎を終えた方を対象に、MovieClip インスタンスをインタラクティブにアニメーションさせるムービーを作成しながら、座標と座標空間の扱い、条件判定、配列や Object の操作などについて学びます。そして2日間講習の「ステップ3」では、3D風に回転するアニメーションのスクリプトを出発点に、クラスの定義やイベントの配信までデザイン(設計・構成)を展開していきます。三角関数や数学的 な考え方、クラスの応用についても触れます。0 パッケージ割引コースあります。
詳細は こちら
文系だって大丈夫
0 で学ぶ数学基礎講座
0 で学ぶ座標と3次元空間の数学講座」
0 を、少人数制、一人につき PC 一台の実習環境で学ぶハンズオントレーニングです。0 プロフェッショナルガイド」(マイコミ)をテキストとして、著者である著者である野中文雄氏が直接指導にあたります。本講座は、アニメーションを扱う上で重要な座標空間に関わる、数学の基礎を学習します。とくに後半は、高校文系の数学の知識では理解しにくい、行列と MatrixおよびMatrix3Dクラスについて解説します。スクリプティングよりも、数学的な説明が中心です。0 を使い、イベントリスナーの扱いを理解していることが前提となります。数学の知識については、高校文系程度とします。0 パッケージ割引コースあります。
詳細は こちら
0 の基本、および Flex プログラミングの基本作法を1日で習得します。4 プログラミング入門」の著者である宮田亮氏が講師を行います。同書籍をテキストとして使用します。これから Flex プログラミングを行う予定の方の導入に最適の講座です。
詳細は こちら
IT塾 宮田亮による「一日でマスターする AIR プログラミング入門」
0 の基本および AIR プログラミングの基本作法を1日で習得します。1プログラミング入門」の著者である宮田亮氏が講師を行います。同書籍の前半をテキストとして使用します。これから AIR プログラミングを行う予定の方の導入に最適の講座です。
詳細は こちら
講師である宮田亮氏は Flex 4 プレリリースプログラムのコミュニティマネージャを務めています。
詳細は こちら
実際にコーディングをしながら習得します。時間がない AIR 開発担当者にお勧めの講座です。0 の基礎知識が必要です。0j プレリリースプログラムのコミュニティマネージャを務めています。
詳細は こちら
Flex 開発担当者に必須のコアスキルを短期習得します。4 プログラミング入門」「Flex 3 プログラミング入門」「AIR プログラミング入門」の著者である宮田亮氏が講師を行います。
詳細は こちら
4 プログラミング入門」の著者である宮田亮氏が講師を行います。
詳細は こちら
マルチメディアコンテンツクリエイターやインストラクターとして活躍している金像瑞穂氏が講師を担当します。※1社様向けの企業研修にも対応しております。
詳細は こちら
閲覧や印刷以外の機能も知らなきゃ損です。ビジネスフローを変える。
簡単に修正できる編集機能
動画の埋め込み
サウンドやビデオの埋め込み
機密性を高めるデジタル署名・承認機能
チームでの効率的なドキュメントレビュー
PDF フォームによるデータ収集
など、作業効率を向上させる機能が豊富に用意されています。※1社様向けの企業研修にも対応しております。
詳細は こちら
ページレイアウトを始めるには
本トレーニングは、Adobe InDesign の基本的な使い方(基礎編)から実務で活用できる効率的なテクニック(応用編)まで、ページレイアウトの作成に欠かせない知識を一度に習得できる4日間のパック講座です。InDesign 初心者の方や、DTP 制作をスタートしたい方、ページレイアウト技法を習得したい方には、最適なトレーニングです。応用編の講座では、事前に疑問点をヒアリングし講師がお答えしますので、今まで抱えていた問題点を解決することができます。※基礎編および応用編は、単体でのお申し込みも可能です。※1社様向けの企業研修にも対応しております。
詳細は こちら
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。内閣府は、2001年の中央省庁再編とともに新設された省庁です。内閣に置かれる内閣官房とともに、内閣全体をサポートする重要な役割を担っています。内閣府の重要な職務のひとつとして、政府の政策を国民に広報する「政府広報」が挙げられます。内閣府では、テレビやラジオ、新聞などへの広告のほかに、政府広報誌やインターネットにおける情報発信を行っています。また、2005年11月からはインターネット上の動画配信サイト「政府インターネットテレビ」を開始させ、注目されています。その背景について、内閣府大臣官房政府広報室にお話を伺いました。
政府の情報を動画でわかりやすく配信
「政府インターネットテレビ」は、政府広報室及び内閣官房内閣広報室が国民に向けて様々な情報をストリーミング配信する動画コンテンツです。配信される動画は多岐に渡っており、政府の重要政策の内容をわかりやすく紹介するコンテンツ、総理大臣へのインタビューや対談を伝える「ライブトーク官邸」、記者会見の様子を紹介する「総理の動き」、防災情報などが随時アップされています。
この政府インターネットテレビが開始されたのは、2005年11月
その経緯について、幸田徳之・内閣府大臣官房参事官は次のように話します。「小泉前総理が官邸主導・総理主導の構造改革を進めて行く中で、インターネットでのメールマガジンなどのように、直接国民に向けて配信をしたり、やり取りをすることに力を入れてきました。その一環として、総理の動きや考え方をわかりやすくお伝えする必要があるのではないかと考え、動画配信をスタートしました。
メールマガジンほど知られていないのが現状ですが、安倍内閣となってからもメールマガジンには160万人の読者がいらっしゃいますので、そういったとこいろからリンクで誘導をしたり、新聞広告に記載したりしています」
運営に携わっているのは、内閣官房内閣広報室と、内閣府政府広報室
また、各省庁などが作成したコンテンツの配信も行っています。「北海道壮瞥町 昭和新山国際雪合戦など、地方公共団体等から寄せられたコンテンツも、地域の取組みとして配信しているんです。
また、海外向けのコンテンツに関しては政府広報室が作成していますが、各府省で作成したものも併せて配信しています」(幸田参事官)
実際のテレビを模して「チャンネル」ごとにコンテンツが整理されている政府インターネットテレビ
当初は「わかりやすさ」を狙って、地上波のテレビと同じように1〜12のチャンネル分けをしていましたが、チャンネル数を制限してしまうことで企画に融通が利かないといった面も出てきたため、現在では適宜チャンネルを増やしながら配信されています。それだけ、多くの新しいコンテンツが追加され続けているのです。政府インターネットテレビの配信フォーマットには、Flash Video が採用されています。その理由について、幸田参事官は次のように説明します。しかし、政府インターネットテレビが開始されると、特定のプレーヤー、特定のバージョンで視聴できないというお声を頂くようになりました。政府としては、できるだけ多くの方々に見て頂きたい。幸田参事官は続けます。「Flash Video にしたことで、今までよりも大きなサイズ、きれいな画質で配信できるようになり、大変好評を得ています。
また、今まで視聴することができなかった Mac をご利用の皆さんにも、政府インターネットテレビを訪れて頂けるようになりました」
大臣官房政府広報室では、Flash Video を使うメリットして「プレーヤーの存在の無さ」も挙げています。他のプレーヤーでは、ユーザ環境の判定とプレーヤーの起動に時間を要してしまう場合があります。動画配信に Flash Video を採用して以降、媒体の認知度が高まったことと相まって、アクセス数は大幅に増加したと言います。
政府インターネットテレビがこれから目指すもの
システム開発者からの声
政府インターネットテレビのシステム構築・デザインを担当したNECメディアプロダクツ(株)トータルプロモーション事業本部Webディレクタ及川幸人氏は、次のように述べています。また制作面ではFlash コンテンツの開発環境、ワークフローの容易さ、効率性の高さを評価しました。
今後は動画配信のみならずFlashのオーサリング機能と連携したリッチメディアを使った新サービスの展開を目指しています」
政府インターネットテレビでは、小泉前総理の時代のコンテンツもライブラリとして残しています。このように過去のコンテンツを残していくことで、政府がどのようなことをやってきたのかを振り返ることができる、重要なコンテンツになると内閣府では期待をしています。また、海外向けコンテンツの展開について幸田参事官は「首相官邸の Web サイトや安倍内閣のメールマガジンには英語版も用意していますが、今後はもっと多くのコンテンツを他の言語でも提供できるように努力をしているところです。インターネットは海外への配信に向いていますから、その特性を活かしたいという気持ちはあります」と話します。「内閣府では様々な広報媒体を持っていますが、政府インターネットテレビは従来のメディアと比較して圧倒的に安い予算で制作し、配信することができています。さらに、非常に短い制作時間で配信できるのも魅力です。今後はその特性をもっと活かし、お伝えできる情報はどんどんお伝えしていく方針です。
例えば、災害時における情報提供などの場合、リアルタイム(生放送)配信も有り得ます」(幸田参事官)
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
薦める10の理由
今月号の記事
カラーテーマを作成・共有できるkuler
第二章から第四章は4月までにデベロッパーセンター定期的に掲載されます。
手放せないツールになることでしょう
なお、全記事はこちらでご覧いただけます。ションを、効率良くデザイン / 開発 / 管理するこ
とを可能にする業界最先端の Web 開発ツール
製品の詳細ページ
30 日間無償のトライアルをダウンロード
Webプログラマの場合は、Eclipse やフリーのエディタソフトなどを使ってプログラムを作ることのほうが多いでしょう
しかし実は、Dreamweaver はプログラマにとっても大変便利なソフトであることをご存知でしょうか
まずは、その特徴を簡単に紹介しましょう
FTP ソフトの同梱された統合開発環境
正規表現に対応した検索・置換機能
豊富なリファレンス
豊富な拡張性
さらに詳しくはこちら
[ファイル]→[新規]メニューをクリックすると、「新規ドキュメント」ダイアログボックスが表示されます。ファイルの作成中に「ビュー」ボタンを切り替えると、HTML のソース、デザインをそれぞれ見ることができ、両方を分割して表示することもできます。コードビューで PHP のプログラムを打ち込むと、主要な関数群の場合はコード補完も表示されます。また、デザインビューを見ると、打ち込んだプログラムはページデザイン上でアイコンとして表示されます。そのため、PHP が含まれたファイルもデザイナが引き続き作業することができます。
さらに詳しくはこちら
ライブラリとテンプレートで一括管理
ライブラリを登録するとアセットパネルに記録される。登録したい部分を選択して[ライブラリ]→[ライブラリにオブジェクトを追加]メニューをクリックすると、その部分がライブラリに追加されます。登録したライブラリは、「アセット」パネルから利用でき(右図)、挿入したい場所にドラッグ&ドロップします。こうして、さまざまなファイルに挿入したライブラリは、「アセット」パネル上でダブルクリックして編集すると、自動的に挿入されたすべてのファイルが更新されるという仕組みです。一方、テンプレートはライブラリとは逆に、共通のページの中で一部だけが違う場合に利用します。たとえば、ニュースページなどのように、ページの体裁は同じで内容だけが違う場合などに使うと便利な機能です。ライブラリとテンプレートは特殊なコメントタグで実現され、HTML は直接書かれているため、PHP などを必要とせずに Web ブラウザで表示できます。
Dreamweaver はその前後に書かれた特殊なコメントを判断して書き替えるので、拡張子が
html などの静的ページでも使えるという利点があります。
さらに詳しくはこちら
ライブラリやテンプレートと似た機能で、プログラマにとっても便利に使えるツールが「スニペット」です。スニペットは、ライブラリなどと違って情報を一元管理することはできませんが、スタンプのように同じ部品を何度も貼り付けることができます。
「スニペット」パネルを開くと、はじめから準備されているいくつかのスニペットが表示されます(右図)
close( )メソッドで、ウィンドウを閉じるプログラムがあらかじめ登録されており、貼り付けるだけで閉じるボタンを設置することができます。メッセージを表示しておき、フォーカスがあたるとメッセージがクリアされるテキストボックスや、ポップアップウィンドウを表示するための JavaScript など、さまざまなものが登録されています。また、いつも使うようなプログラムの部品を登録しておけば、プログラミング作業の効率アップが図れます。
さらに詳しくはこちら
ソースコードの折りたたみ
保存して,再度開いたときも再現される。Eclipse などの開発ソフトには、プログラムコードをインデントしたり解除したりするツールが付属しています。これを使ってコードの可読性を高めることができますが、Dreamweaver にも同じ機能が搭載されています。エディタを「コードビュー」に切り替えると、画面の左端に「コーディング」ツールバーが表示されています。これを使えば、プログラムコードをきれいにまとめることができます。インデント、インデント解除はもちろん、HTML などを含めてインデントをきれいに整えてくれる「コードフォーマット」もあります。さらに便利なのは、HTML の折りたたみ機能です。プログラマにとっては、デザイナーやコーダーの制作した HTML は非常に量が多く、プログラムの可読性を損なわせる要因に成り得ますが、この HTML ソース部分を一行に折り畳むことができます。これは Dreamweaver だけでの機能で、ソースプログラム自体には一切影響を与えることなく、折り畳んだり広げたりすることができます。
さらに詳しくはこちら
この中に大量のリファレンスが納められている。冒頭でも紹介したとおり、Dreamweaver には HTML リファレンスはもちろん、次のような豊富なリファレンスが内蔵されています。HTML や CSS、アクセシビリティ関連のリファレンスから、XML関係、プログラマ向けリファレンスと非常に多彩です。また、プログラマ向けのリファレンスは、前述のように技術書で定評のある O'REILLY のリファレンスがそのまま掲載されているため、内容も本格的であることが窺えます。また、リファレンスはエディタと連携しています。エディタで HTML タグや JavaScript などを書いている途中で、キーワードを選択して右クリックし、[リファレンス]メニューをクリックすると、該当するリファレンスが自動的に開いて閲覧できます。不意にパラメータを忘れてしまったときや、他人のプログラムコードを見ていて、見知らぬ関数などに出くわしたときには、非常に力になるリファレンスです。
さらに詳しくはこちら
プログラムのバリデート結果が表示される。バリデート結果は右図のように表示され、ダブルクリックすると該当箇所にジャンプして修正などを行うことができます。また、バリデートした結果は XML 形式でレポートを保存することもできるため、データベースに格納したり XSLT などを通して、レポートを Web ページとして表示させることなども可能です。Web ページがサポートする最低バージョンの Web ブラウザを設定すると、それらの Web ブラウザでサポートされていないタグや属性がソース上で確認できます。これを参考にしながら、HTML を組み立てていくことができます。
さらに詳しくはこちら
チェックアウトするとファイルにチェックマークが付き(左図)、チェックインすると南京錠のアイコンが付く(右図)
この機能は、FTP サーバや Windows ネットワークなどでファイルを共有している場合、自分がファイルを編集するときに「チェックアウト」処理を行うことで、他の人が同じファイルを編集できないようにする機能です。これにより、ファイルを互いに上書きしあってしまうことを防げます。ファイルをリモートサーバから取得するときに「チェックアウト」を行うと、自分が編集権を持つことができます。このとき、もし別の人が同じファイルをチェックアウトしようとすると、警告ダイアログが表示されます。編集が終わったら「チェックイン」を行います。再度編集する場合にはチェックアウトをしなければ、編集できなくなります。
さらに詳しくはこちら
環境のカスタマイズ,ショートカットワークスペースのレイアウト
非常に多くの設定項目がありますが、ここではプログラマに便利な設定をいくつか紹介しましょう
拡張子ごとの外部エディタを登録することができます。
ファイルを比較
リモートサーバとのファイルの差異を比較するツール(Diffツール)を指定できます。
ほとんどのキーボードショートカットは変更できます(右図)
設定したショートカットは保存できるため、他のパソコン上でも自分の環境を再現できます。
さらに詳しくはこちら
正規表現を使った検索と置換機能
プログラマにとっては、エディタの検索機能はもっとも重視する機能の1つです。検索ダイアログボックスを見てのとおり、大文字・小文字の区別やホワイトス ペースの無視などの他、正規表現を使うこともできます。さらに正規表現の複雑な検索式を組み立てた場合には、そのクエリを保存しておいて、後から呼び出して再度使うこともできます。「ソースコード」というモードで検索を行うと、一般のエディタソフトと同様にすべてのテキストを対象にすることができます。しかし、Webページの場合はさまざまなタグが入り組んでおり、同じ単語でも次のように HTML タグが含まれている場合があります。このような場合、「Dreamweaver」というキーワードでは、後者の文字列を検索することができません。
さらに詳しくはこちら
「Web開発に役立つデザインツールの使い方
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
カラーテーマを作成・共有できる kuler
無償で配布されているこのライブラリを利用することで、サーバサイドで特別なプログラムを用意したり、ユーザの Web ブラウザへ新たなプラグインをインストールすることなく、今話題の Ajax を利用した動的でリッチなインタフェースやコンテンツを HTML の中に作り出すことができます。“デザイナー向け”というのが Spry の大きな特長であり、他の Ajax ライブラリと比べてもユニークな点です。HTML コーディングのスキルがあれば、XML からのデータを取得し、加工し、ダイナミックな形で Web ページ上に展開することができるのです。百聞は一見にしかず。まずはこちらにある Spry のデモページをご覧ください。このようなダイナミックな Web ページを、その動作の複雑さからは想像もできないような“簡単な”コード記述で実現できるのが Spry です。でも現在はまだベータ版ということもあり、現時点で配布されている資料や情報はさほど多くありません。
このため、まずはどこから手を付けていいかと躊躇されている方々も多いことでしょう
まずはダウンロードして、圧縮されたライブラ リを解凍してください。各ファイルの 主な機能は以下のとおりです。データセットを使用する場合は、まずこれを先に読み込む必要があります。
データセットの定義やSpry内で動的にデータ表示を行えるようにするためのライブラリ
Spryのアニメーション処理を行うライブラリ
まずは上記のファイルをあなたが制作しているサイトのローカルルートフォルダの中に入れ、対象の HTML ファイルからこの js ファイルに対してリンクを設定します。外部XMLデータを準備する。Spry を利用する最も大きな利点は、「データ部分としての XML」と、それを飾る「入れ物としての HTML」を分離することができるという点です。これまでデータを動的に加工して表示するためには、Perl や php などのサーバサイドのスクリプトを介す必要があり、Web デザイナーには非常に敷居の高いものでした。しかし Spry の「データセット」を使用することで、静的な HTML の中でも同様のことができるようになります。取り出されたデータはデータセットとして登録され、いつでも Spry の中に呼び出して配置することができるようになるのです。Spry のデータセットは、XPath で指定された XML の中に記述されている「繰り返しノード」部分から、配列オブジェクトとして順番にデータを格納します。データセットを作成する前に、まずは使用する XML の構造を把握しておく必要があります。今回は製品データを次のような XML として用意しました。XML というと何やら難しそうな印象すらありますが、こうして見てみると HTML よりも分かりやすいです。それが繰り返し登場することで以下のようなデータベースを形成しています。ここまででHTMLは以下のようになります。なお、ブラウザのセキュリティ上の制限で 同じドメイン外のサーバにある XML ファイルは読み込むことが出来ないので注意が必要です。Spry の記述に関するルールを把握する。ほとんどの HTML タグに対して設定できますが、以下の HTML タグと、Body タグの外にあるタグには設定できないので注意が必要です。では実践編として、先ほど作成したデータセットを表組みとして表示しようと思います。今回は DIV タグで囲まれたテーブルの中にデータセットの値を格納させます。具体的には以下のようになります。これによって表の中に XML データを表示できるようになりましたが、ここからが Spry の本領発揮で す。
表組みのヘッダ部分をマウスでクリックしたら、それぞれがソート表示されるようにしてみま しょう
普通に考えると、この時点でお手上げです。我々はただ、表組みのヘッダ部分(th タグ)に、簡単な Spry タグを追加するだけでいいのです。これだけでソート機能が実現します。このような場合は、データセットに格納されているデータ型を数字だと明示することで解決します。先ほど作成したデータセットの定義の後に続けて、以下のように記述します。
それでは最後に動作させてみましょう
右のようになれば完成です。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
カラーテーマを作成・共有できるkuler
今月号の記事
カラーテーマを作成・共有できるkuler
「ここにない色は、ネイビーブラウンだけだ」 —ヨギ・ベラ
ファッションに敏感なファッショニスタ、新しく引っ越してきたアパート住人、グラフィックデザイナー、Webデベロッパー、この全員に共通しているものは
アドビのエマージングマーケット&テクノロジ(以下、EM&T)チームが開発した kuler を使用すれば、理論的なカラー公式に基づいて、あるいはユーザ自らがインタラクティブなカラーホイールを操作して、誰でも手軽に2〜5色で構成される、調和の取れたカラーテーマを作成できます。カラーテーマの作成には、RGB、CMYK、LAB といったカラースペースが利用できるうえに、それぞれの色を Web で使用するための16進数値で表現することも可能です。アドビのクリエイティブソリューションビジネスユニット担当副社長、Mark Hilton は kuler について次のように語っています。「たとえ色の理屈が分かっていなくても、すぐに kuler を使えます。
kuler は、ベテランのデザイナーはもちろん、クリエイティブなことに挑戦してみたいと考えている、すべての人のために開発されています」
kuler を使用するユーザは、キーワードやカラーテーマの作者、テーマ名を使って、さまざまなテーマを共有しているオンラインコミュニティ内を検索することができます。たとえば「Blue」というキーワードで検索すると、223ものテーマがヒットします。簡単なバースデーカードの作成からインテリアの計画や Web デザイン、ウェディングプラニング、服飾デザインにいたるまで、kuler はすでにさまざまな用途で使用されています。また、kuler の一番の注目は、作成したテーマを世界中のユーザと共有したり、テーマについて意見を交わすことができる点です。つまり、kuler を発見した一部の限ぎられたユーザだけではなく、グローバルなコミュニティを通じて、世界中の人々と共有・意見交換できるのです。us(ソーシャルブックマークのサービス)タグが作成されています。
kuler がアドビの通常のマーケティング手法ではなく、風評で普及しつつあることを考慮すると、この幅広い人気は驚異的とさえいえるでしょう
kuler は、すでに500以上ものブログで取り上げられており、連日、5〜10というペースで新たなブログに紹介されつつもあります。kuler を使用すれば、誰でも、公共的、個人的な反響のある、オリジナルのカラーテーマを作成することができます。ここでいう「公共的な反響」とは、ユーザがカラーテーマのスウォッチを共有・ダウンロードしたり、他のユーザのカラーテーマにコメントや評価を付けられることを意味しています。kuler コミュニティでは、どのテーマが人気を博しているか、あるいはレーティングの高いものや最近に作成されたテーマはどれかを、すばやく確認できるのです。
「自然界の真の色を考えるだけで錯乱してしまう」─ アンドリュー・ワイエス
「決まった色に一日中執着していることが、大きな喜びをもたらせる」─ クロード・モネ
「色と私はひとつである」─ パウル・クレー
また、この自由なカスタマイズ性に加えて、旧友、大好きだった服、1960年代のキッチンの想い出といった、カラーテーマのヒントとなった題材のバリエーションも個人的な側面を演出しています。テーマに付けられたオリジナリティあふれる名前の数々を見ると、この点は明らかです。EM&Tグループの責任者である Lydia Varmazis の場合、「朝起きて、まず新しいカラーテーマと、そのユーモラスな名前をチェックするのが日課になっています」と語るほどです。
クリエイティビティの源
デザイン知識がないからといって、kuler の利用を妨げないのと同様に、kuler の開発にあたっては、EM&T チームの妨げとなるようなものが一切ありませんでした。「アドビを支持する顧客群が存在することは、ありがたいことであるとともに、プレッシャーでもあります。なぜなら、ユーザの方々はアドビ製品に対してハードルの高い期待を寄せているからです。しかし、EM&T チームの場合は、このようなユーザの期待に束縛されることなく活動できます。また、これまでのユーザパラダイムや製品開発、出荷サイクル、あらゆる〆切などにも束縛されていません。つまり、成功するかしないかといったことに関係なく活動できるのです。
この自由があるからこそ、創造力や技術革新が育めているのです」
0時代のソフトウェア・エコシステムに対して、アドビが出した新しい答えだと述べています。「我々が発見したのは、テクノロジのプレビューを公開することで、非常に熱心な注目を得られるということです。アプリケーションを公開する場合、確かにそのアプリケーションが機能することは重要ですが、必ずしも完璧に仕上がっていなくても良いのです。アドビが提供するアプリケーションには常々、非常に高いクオリティが求められているので、kuler に関しては、かなり手厳しい評価が寄せられるのではないかと考えていました。しかし実際には、批判の声よりも支持の声の方が多く寄せられています。もちろん、このような反響の一因としては、ユーザの指摘したバグをアドビがすみやかにフィックスしていることが、ユーザの方々に認められている点があると思います。
我々はバグについて語るヒマがあれば、これらに対応するよう努めています」
デザインの自由化
kuler では、人が本質的に色を好む点に注目しています。色に関しては、人それぞれ必ず意見があるはずです。
また大半の場合において、色こそが我々が最初に反応するビジュアル要素であり、新しい色のコンビネーションを見つけたり、第三者と共有することは喜びをもたらせるといえるでしょう
kuler は、アーティスト達が長年「神秘的な世界」と呼んできた色に対する考え方を、より開放的で、より活気あふれるものにすることを支援しているのです。「デザインのアマチュアの方々が、kuler をこれほどまでに楽しむとは思っていませんでした。彼らは、自らを「色音痴」と呼ぶ一方で、物事をデザインすることに興味を持っています。これらのユーザは kuler を愛用し、kuler をとてもクリエイティブに使いこなしています。
彼らの成功談ほど、我々にとって満足なものはありません」
kuler に対するユーザの熱意と実験的な姿勢は、今後アドビがどのようなかたちで、この製品を進化させていけば良いかを示唆しているといえるでしょう
「人々に興味を持ってもらうための手段として、色の効果は歴然です。色に関しては、スキルレベルやテクニカル知識の有無とは関係なく、ほとんど誰からでも反響を得ることができます。kuler 利用者の方々からは、この製品を進化させるためにパートナーになりたいとの申し出があります。我々は、これらの方々の意見に耳を寄せ、引き続き活気を吹き込んでいきたいと思います。
また、その逆に、皆さんが我々と対話し、我々に活気を吹き込むことを期待しています」
comを含む数々の出版物に寄稿
エッセーイスト、作家としても活躍中
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
カラーテーマを作成・共有できるkuler
クリエイティブ作業を手掛けるプロフェッショナルには、日頃からより多くの作業を自分でこなすことが求められています。オーディオの処理もこの例外ではありません。
チームにオーディオのエキスパートがいるケースもありますが、大半の場合は、手の空いたデザイナーがオーディオの処理も担当しているのが現状といえるでしょう
しかしサウンドは重要です。ジョージ・ルーカスは「映画体験は半分がサウンドだ」と語っていますが、これは Flash プロジェクトにもあてはまることです。この記事では、あなたが進めているプロジェクトの“優れたルックス”に匹敵する、素晴らしいサウンドを作成するためのヒントを、アドビの新しいベータ・アプリケーション、「Adobe Soundbooth」の使い方を紹介しながら解説することにします。Soundbooth は Flash デザイナー、デベロッパー、ビデオ編集者、モーショングラフィックデザイナーといった、オーディオの専門知識を持たないクリエイティブ・プロフェッショナルのために開発されています。ここで紹介するヒントを参考に Soundbooth のタスクベースのツール群を利用すれば、優れたサウンドを得るための知識がすばやくマスターできます。録音後にサウンドを向上させるためのツールは数多く存在しますが、はじめから良質なサウンドを録音することに勝るものはありません。たとえ録音スタジオがなくても、次の事柄に注意すれば、与えられた条件下で最も質の高いサウンドが録音できるようになります。できるだけ静かな場所で録音する。Soundbooth にはノイズ除去機能が装備されていますが、最初から静かな部屋を利用するに越したことはありません。より質の高いマイクを購入する。コンピュータ内蔵のマイクでは、高品質な録音が可能とはいえません。しかし、1万円も出せば十分程度の良いマイクが手に入ります。程度の良いマイクで録音しておけば、後で編集する際の柔軟性が高まります。カーペット敷きの部屋や、布張りの家具、カーテンがある部屋を使う。部屋の中に堅い面ばかりがあると、音が反響を起す場合があります。録音品質に満足できない場合は、部屋の中の別の場所に移動してみる。録音時のマイクの向きや座る位置を変えてみてください。
また、部屋の隅に枕をおいて、この枕に向かって発声するのも良いでしょう
プロ用の録音スタジオがなくても、質の高い音声を録音することは可能です。ただし、この場合は部屋のどの位置が良いかを試行錯誤する必要があります。以下のビデオでは、次の点について解説しています。
ノイズや不必要なサウンドの除去
フィルタを使って補正・洗練度アップ
一部分の音声の迫力や明瞭度を上げる補正から、まったく異次元のサウンド作成にいたるまで、ユーザの求めるさまざまなサウンドの実現に役立つのがサウンドエフェクトです。通常、ボイスオーバーには、コンプレッサ、EQ、残響を適用することで、臨場感や音の奥行きが追加できます。コンプレッサを使用すれば、クリップ内の最も大きな音と小さな音の音量差を圧縮し、声の豊かさを高めることができます。EQ では周波数帯ごとの音量が調整でき、声の明瞭度を上げることができます。そして、残響を追加すれば、臨場感を演出し、好感の持てる環境下で声が発せられているような印象を与えられます。Soundbooth には、EQ やコンプレッサといった洗練度アップのためのフィルタだけでなく、エコーや歪みをはじめとする特殊効果のための多彩なエフェクトが装備されています。以下のビデオでは、次の点について解説しています。
ボイスオーバー音声を際立たせるための調整
ピッチを変えずにテンポをのばす方法
クリエイティブな結果を得るための声の補正
ループ音声の作成
Flash デザイナーの多くは、ある楽曲データから一部分だけを取り出してループ音声を作成し、これをプロジェクトの BGM として再生したいと考えています。ループ音声にするのに最適な楽曲というのは、テンポが一定しているものです。また、ループ音声そのものも、全体にわたり一定のテンポが保たれている方が、いろいろと扱いやすくなります。一方、ループのイントロやエンディング部分で曲のムードが急変するようでは、あまり聞こえの良いループになりません。ループ用として、どの楽曲のどの部分を取り出すかを決定したら、この作業に適したものとして開発された Soundbooth の専用ツールを使用して、該当部分を的確に選択し、新規ファイルとして保存します。以下のビデオでは、次の点について解説しています。
ループ音声の選択とプレビュー
ループ音声の保存
プロジェクトの内容によっては、ループ音声を取り出せば済む場合もあれば、シーンに合わせて編曲が必要な場合もあります。Soundbooth スコアは、ミュージシャンによって作成されたひとつの完全な楽曲であるとともに、付随オーディオや、Soundbooth がユーザの指示に基づいて楽曲を編集するために必要なメタデータが含まれています。以下のビデオでは、次の点について解説しています。
ビデオの参照(オプション)
時間軸上での音楽の変化を指示するためのキーフレーム作成
スコアをループ再生可能にするための調整
Flash と連携するためのマーカの作成と書き出し
Flash アニメーションとオーディオ・ビデオを同期するのは、手間のかかりがちな作業です。この問題の解決策としては、キューポイントと ActionScript を利用して、タイムラインの所定の位置からアニメーションを呼び出す方法があります。しかし、これらのキューポイントを作成・管理するのは、これまで容易な作業ではありませんでした。Soundbooth を使用すれば、録音、再生、編集の作業中に新しいキューマーカーを作成できます。これらのマーカーを一度作成しておけば、キューの種類がイベント・ナビゲーションであるかを指定することや、ActionScript からアクセスできる任意の数の変数とその値を設定することができます。設定作業が完了したら、後はこれらの情報を XML ファイルに書き出し、Flash 上で利用するといったことが可能です。以下のビデオでは、次の点について解説しています。
ビデオ・オーディオファイルにキューポイントを追加
マーカパネルを使ってキューポイントのメタデータを編集
また、ご試用後は Soundboothディスカッションフォーラム を通じて、ご意見・ご感想をお寄せください。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。その背景について、内閣府大臣官房政府広報室にお話を伺いました。主な特長は次のとおりです。
- On2VP6コーデックを使用した高品質なライブストリーミング配信が可能に
- 使いやすい操作性
アドビのビデオ製品、2本同時購入でお得な割引キャンペーン
薦める10の理由
カラーテーマを作成・共有できるkuler
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
0 正式リリース ── Webとデスクトップとプラットフォームの真なる融合
0 として正式リリースを迎えました。もータリリースの段階で世界中のクリエイターが開発に着手していただき、すでに数多くのAIRアプリケーションが登場しています。
今月のEdgeでは、Adobe AIRの正式リリースを祝いつつ、改めて技術的なおさらいをしていきましょう
Web アプリケーションの現在とアドビの取り組み
Web 上で動作するアプリケーション開発は日に日に盛り上がりを見せ、実に多種多様なサービスが生まれています。特に最近では、Ajaxをはじめとした Web ページのリッチ化が進んだことで、比較的少ない労力でデスクトップアプリケーションと同様のユーザ体験をWeb上で実現できるようになりました。これらのほとんどがオープンな技術を核にした開発手法で作成され、積極的にAPIを公開することで、外部開発者との協力によってサービスを拡大することに成功しています。
AIRで実現する「脱ブラウザ化」と「真のマルチプラットフォーム」
RIA (リッチインターネットアプリケーション)としてインターネット上で動作するアプリケーション開発を試みた場合、あくまでも Web ブラウザ上での動作を想定したものにならざるを得ません。「オフラインでも動作させたい」「メニューをカスタマイズしたい」「ブラウザの種類やバージョンによって動作が異なるのは避けたい」「ドラッグ&ドロップやコピー&ペーストなどでアプリケーション間の連携を行いたい」といったことはブラウザ上で動作させる以上諦めざるを得ないものでした。Adobe AIR はそうした「諦め」を根本から解決するプラットフォームとして登場しました。将来のバージョンでは Linux や携帯デバイスなどへの展開も予定されている。
もしあなたが Ajax の開発者であるならば
Ajax アプリケーションにつきものの セキュリティサンドボックスからも解放され、さらにはその技術をデスクトップアプリケーションの領域に拡げることを可能にしてくれます。
AIR は自身の開発者人生の新しい挑戦への幕開けとなる技術となるでしょう
ぜひAIRアプリケーションの作成に挑戦してみてください。
兎にも角にも AIR アプリケーション作成の簡単さに驚くことでしょう
無償で配布されているアップデータをインストールし、いくつかの簡単な書き出し設定を行うだけで、Flash ムービーはそのままデスクトップで実行されるアプリケーションになります。作り慣れた Flash ムービーが、AIR を通すことでたちまちデスクトップアプリケーションに展開できる。そんな可能性の広がりをぜひ実感していただきたいです。
もしあなたがプログラム開発の経験者であるならば
普段から使い慣れた Eclipse をベースにした統合開発環境であり、MXML という HTML に似た簡単なコードで多様な機能を実現するコードベースの開発手法、コンポーネントのドラッグ&ドロップとパネルへのプロパティ設定といった VB ライクな画面設計を可能にしています。高度なデバッグ機能やアプリケーションパフォーマンスプロファイラなど、よりプログラム開発に熟知した方なら満足度の高い開発環境です。Adobe AIR アプリケーションの開発手段はこのように多数用意されていますが、どのようなアプローチでも同じランタイム環境上で動作させることができるのが Adobe AIR の大きな特長です。そしてランタイム環境がインストールされていれば、Windows でも Mac でも、さらに今後は Linux や PDA、携帯電話のようなモバイル環境でも、完全に同じように動作するアプリケーションの作成が行えるのです。このマルチプラットフォームのアプリケーションを、普段使い慣れた開発環境と Web 標準技術で産み出すことができる素晴らしさをぜひ体験してみてください。ここで他のデスクトップ RIA ランタイム技術の比較として表にまとめてみました。
Adobe AIR がいかに革新的で、それでいて技術的な習得が容易なことがご理解いただけるのではないでしょうか
他のデスクトップランタイム環境との比較
それでは、AIR にはどんな機能があるのか、ここでいくつか代表的なものを紹介したいと思います。
アプリケーション開発において複数のウィンドウ処理やオリジナルのメニュー項目を作成したい場合は多いでしょう
また、ウィンドウを画面全体に表示する「フルスクリーンウィンドウモード」や、「スクリーン」機能によって画面上のウィンドウサイズを超えた「バーチャルデスクトップ」としてのウィンドウ処理もできるようになっています。
「スクリーン」を使った バーチャルデスクトップ
メニューは、アプリケーションウィンドウに表示される「ファイル」「編集」のようなアプリケーションメニューはもちろん、右クリックした際に表示される「コンテキストメニュー」や、何かのイベントによって画面上に呼び出されるメッセージダイアログのような「ポップアップメニュー」を作成可能です。
ファイルやデータのやりとり
アプリケーション化することの大きな利点は、OS のファイルシステムへの自由にアクセスできることです。
Flash や Ajax のような馴染みの開発手法の延長線上で、ファイルやディレクトリのコピー、移動、削除、ゴミ箱へ入れる、テンポラリファイルやフォルダの作成などが自由に行えることは、ちょっとした感動すら憶えることでしょう
作成したアプリケーションとデスクトップとの間でのドラッグ&ドロップ、コピー&ペースト、さらにはファイルを暗号化する機能もあります。また、コンピュータ上にある様々なデータをバイナリレベルで読み書きする Byte Array クラスがあらかじめ用意されているため、AIR から特定のファイルフォーマットのデータを自由に取り扱うことが可能です。PHP や Mac OS X にも採用されている軽量で取り扱いの簡単なこのデータベースシステムもまた、オープンソースで業界標準の地位を獲得しつつあります。膨大な数のデータも難なく処理するこのパワフルなデータベースシステムをもってすれば、Adobe AIR 上で様々なデータ処理を実現できるのです。
コンテンツの表示
AIR アプリケーションから直接 FMRMS に対して FLV コンテンツの DRM 情報を参照し、許可されている場合にのみ再生を行うというようなアプリケーションの作成を行う事ができます。
オペレーティングシステムとの連携
AIR アプリケーションも通常のデスクトップアプリケーションと同様、OS レベルでのイベントが OS に対して発行されています。AIR アプリケーションからはこの OS に対して発行されている情報をアプリケーションログとして参照する機能があります。
また、特定のファイル形式でデータのやりとりを行いたい場合や、そのファイル形式にアプリケーションの関連付けを行いたい場合もあるでしょう
この関連付け情報を参照したり変更したりすることが AIR アプリケーションからも可能です。その他、ログイン時に自動起動、アプリケーションのアイドル時間を管理して入力が何も行われなかった際に特定の処理を実行、アプリケーションを強制終了、何かイベントが発生するとタスクバーを点滅させたりドック上のアイコンをジャンプさせてユーザにアテンションを喚起させるといった処理も可能です。ネットワークへの接続が必要なアプリケーションにおいては、ネットワークに繋がっているかどうかを監視する必要が出てきます。AIR アプリケーションにはサービスモニタというAPIがあり、必要に応じてネットワーク接続を監視することができます。これにより、例えばネットワークを Ethernet からワイヤレスに切り替えた場合などで、特定のポートやサービスが利用可能かを監視することができます。そしてもちろん、AIRアプリケーションからOSで設定されているブラウザやメールソフトを起動させることも可能です。最後に AIR の具体的なアプリケーション構造をまとめてみました。OS の土台の上に メディアとのやりとりを行う API群が並び、Flash とHTMLの描画エンジンが並列して存在している形になります。
さて、それでは実際にどのようなAIRアプリケーションが登場してきているのでしょうか
ぜひ頻繁に目を通していただいて、自身のアプリケーション作成の参考にしてください。あなたのビジネスにも大きく貢献しますので、この機会にぜひご投稿ください。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
新たな表現を求めるデザイナーは注目
今月号の記事
アドビのクリエーター向けWebサイトが来月オープン
Flexアプリケーション開発のためのEclipseベースのIDEとしてリリースされたものですが、これを「Flex開発を行うプログラマーの専用ツール」だと思われていませんか
0プログラミング開発環境を持っています。の鎌田貴史氏は、この手法をいち早く取り入れ、新たな表現にチャレンジしています。0ベースのプログラムが主流になっていくと思います。
0での開発は避けては通れない道ではないでしょうか
0に取り組み始めたときの率直な感想は「高度で難しい」というものでした。0では自分で管理しなければなりません。スムーズに開発していくには、より整理されたコーディング手法が必要となったのです。0よりも整理しやすくなったので、要点を掴めばすんなりと入り込むことができ、慣れるまでにそれほど時間はかかりませんでした。
だから、デザイナーとして便利というよりも、コーダーとして便利という感じですね
0での開発は可能ですし、ライブラリ管理などいわゆる既存のFlashが持つ長所との親和性が高いのはFlash CS3でしょう
ただ、開発時のコード保管機能やプロジェクト全体を通した文字検索・置換機能など挙げればキリがないのですが、コーディング環境としてはFlex BuilderとFlash CS3では天と地ほどの差があると思います。鎌田●Flashでは「パーツをステージ上に直接配置する」といったグラフィカルで直観的な操作ができます。一方、Flex Builderは高度なプログラミング機能を持っていますが「ステージ」という目に見える概念がなく、すべてプログラムで定義することになります。つまり、すべて頭の中で想像・管理しながら実装しなければならないのです。この両者の長所をうまく活かせるように使い分けています。
たとえば「大量のオブジェクトを同時に管理する」といった計算量の多い表現では、処理速度の速いActionScript 3
0での実装が必要不可欠になります。この場合、プログラム上で使用するパーツの管理はFlash CS3で行い、コーディングやクラスライブラリの管理はFlex Builderで行うようにしています。0ではその描画能力に圧倒的な差があります。
鎌田●確かバージョン3には、メモリの使用量などをかなり詳細に分析する機能が実装されるそうですが、ActionScript 3
0を使うプロジェクトではメモリリーク問題にかなり悩まされたので、この機能にはかなり期待しています。
僕のようなデザイナーベースのコーダーという立場としては、今のコーディング補助機能でも十分満足していますが、もし可能なら、現状Flash CS3と両立することによって実現しているFlash並のパーツ管理ライブラリや、簡単な描画ツールなどがあると便利かもしれませんね
JAPANインターネットクリエイティブアワードの審査員を務める。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
アドビのクリエーター向けWebサイトが来月オープン
受付開始と同時に会場に駆け込む来場者たち
席は直ぐに埋めつくされ、開始前から熱気がたちこめていました。」の言葉とともにイベントが開幕です。それぞれのバージョンが発売された時期の時事ネタも織り交ぜながら、Dreamweaver の進化の歴史が分かりやすく紹介されました。イベントの目玉企画である大喜利です。
「MT 連携でソート可能なテーブルを自動更新」
1 を使う方法などが紹介されました。
内容の詳細はこちら
「デザインビューでいきましょう
amazonが提供するXMLの商品データを別のWebページで表示させる方法などが、ライブコーディングで紹介されました。
内容の詳細はこちら
Dreamweaver のテンプレート機能を使って手がけたサッポロビールの実例をもとに、テンプレートに装備できる便利な機能や作成時のポイントなどが紹介されました。「DW があれば、アクセシビリティチェックもできる。アクセシビリティチェックの使い方や、エラーの分類の仕方、エラーへの対処方法や気をつけることなどが紹介されました。CSS の属性順序が並び替えられる拡張機能や、簡単に並び替える方法、表示される順番のルール設定などが紹介されました。
クリエイターの皆さんによるTips 紹介
株式会社エイチツーオー・スペース 代表取締役 たにぐちまこと氏
プログラマーにもDreamweaverを使ってもらい、デザイナーと仲良く仕事をしようという切り口で、プログラマにとっても有益な機能であるチェックイン・チェックアウト、ライブビュー、スニペットなどが紹介されました。
「ラクラクかんたん
6の活用方法などが紹介されました。フォーム作りで困っている来場者からの質問も寄せられ、Spryへの強い関心が伺えました。「もうテキストエディタには戻れない。コードビューで使えるキーボードショートカットを実演で紹介され、Dreamweaver が強力なエディタでもあることが証明されました。
「生活に役立つ小ネタ集」
アルファベットの大文字・小文字、復帰機能のショートカット登録、機種依存文字の変換できる拡張機能などが紹介されました。使いこなすと10倍仕事が楽になる。1が紹介されました。会場からは新機能を必死にメモする方、写真に収める方の熱気が伝わってきました。今回の記念イベントでは、Dreamweaver の誕生秘話から将来の展望までを知ることができ、来場者にとっては、過去の思い出から将来の期待を感じられる有意義な時間となりました。5時間に渡る記念イベントは、興奮冷めやらぬ中、閉幕しました。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
アドビのクリエーター向けWebサイトが来月オープン
ついに日本での販売を開始しました。日本語版の技術ドキュメントも公開しております。ぜひ製品ページをご確認ください。この新バージョンである FMS3 が、いよいよ日本国内で販売開始となりました。FMS3 はパフォーマンスが飛躍的に強化され、より安価なコストで導入できることから、Flash Video のライブストリーミングを用いた新しいサービスの実現が容易となります。tv) 」を構築した株式会社ノデラのノデラユウジ氏に、同サイトの誕生秘話と、FMS3 導入によるメリットを寄稿していただきました。
まったく新しいビジュアルコミュニケーションのあり方を目指して
私が代表を務める株式会社ノデラは、Web カメラを使って簡単にライブストリーミングを行い、さらにその映像をアグリゲートできるソリューションとして「NODERA (tv) では、登録したユーザが自身の Web カメラを使って簡単にライブ映像をストリーミング配信することができます。16の面があり、1つの面に1人の映像が表示され、1つの画面内で最大16人が同じ時間を共有できるのです。映像を使ったコミュニケーションツールやサービスは他にもありますが、それらは Skype のように1対1の閉じたコミュケーションツールであったり、USTREAM のように1対多のパーソナルキャスティングシステムであったりします。tv) で目指したのは、まったく新しいビジュアルコミュニケーションのあり方です。tv) を使えば、多対多でのコミュニケーションが可能となるだけでなく、その状況を外側から視聴する人までを含めた二層構造を持つ「多対多対多」ビジュアルコミュニケーション空間を提供できるのです。tv) は新たなメディアとして、コミュニケーションのあり方を変えていく可能性を大いに秘めていると信じています。まず手始めに、私自身の個人ブログでライブストリーミングを配信することから試しました。その後、1画面で複数の映像を同時に表示できるインタフェースを開発し、友人に配信用アプリケーション(プロジェクタ)を配布して参加してもらいました。tv) 」と名付け、登録をすれば誰でも利用できるようにして一般公開しました。
最初はユーザ数もそれほど増えず、参加しているのは友人、知人、マイミクばかりでしたが、Paperboy&Co
の家入さんがブログで紹介してくれたことがきっかけで爆発的にユーザ数が増え、常に誰かが参加している状態になりました。参加するユーザが増えたのはうれしいことですが、それによってさまざまな問題点が浮き彫りになりました。その中でも大きな問題が「CPU の振り切れ」でした。CPU が振り切れると、映像がどんどん遅れていき、時には1分ほど遅延することもありました。また、通信も不安定になり、FMS をリロードすることも頻繁に発生しました。
どこに原因があるのか
まず目をつけたのは、サーバマシンです。使用している安価なサーバの CPU スペックが低いせいだと思いました。そこで、FMS2 の推奨以上のスペックを持つサーバを用意し、実験を重ねました。他にも使用する帯域を変更したりといろいろと試行錯誤しましたが、それでも CPU 振り切り問題は解決できません。tv) 自体が実現不可能なことなのではないかと半ば諦めかけていました。それでも試行錯誤を続けているうちに、処理速度が格段に向上した FMS の新バージョン3がリリースされました。早速試してみたころ、16人が同時に参加しても CPU の振り切れ問題は発生しません。tv) が実にスームズに稼動しているのです。tv) を制作する際に最も意識したのは「シンプルにすること」です。「Web カメラを使ったライブストリーミング」と聞くと、多くの人が操作が難しいと想像すると思います。tv) では、ユーザが利用する際の敷居をできるだけ下げるように心がけ、配信側と受信側にページを分けることなく、1つのページで完結するようにしました。tv) を訪れていただくと、そこにある Flash(swf)がすべてを実現するシンプルさを実感していただけると思います。ユーザ登録をしていない方は、「JOIN」と書かれたメールのアイコンをクリックし、名前、パスワード、メールアドレスを入力して送信します。自動送信されたメール内にあるURLにアクセスすれば、ユーザ登録は完了です。tv) にアクセスして「LOGIN」と書かれたカメラのアイコンをクリックします。先ほど登録した名前とパスワード、どこから配信しているかを表す「LOCATION」を入力します。そして、プルダウンメニューから自分のパソコンに接続された Web カメラを選びます。あとは「OK」ボタンをクリックするだけで、ライブストリーミングが開始されます。
とても簡単ですよね
tv) という「多対多対多」ビジュアルコミュニケーション空間を楽しんでください。
tv) を専門に扱う株式会社ノデラドットティーヴィーを設立
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
アドビのクリエーター向け Web サイトが来月オープン
皆様の参加で大きく育つ。
アドビのクリエーター向けWebサイトが来月オープン
2月27日より、ティザーサイトを公開
今月号の記事
アドビのクリエーター向けWebサイトが来月オープン
アドビでは、Webクリエーターや、Webクリエイティブに関心のある皆様を対象に、有益な情報を紹介していくWebサイトを来月オープンします。このサイトは、ただ単に一方向で情報を発信するだけではありません。
「サイトの主役は、ブログを持っているあなた」
日々、世の中のさまざまなサイトにアンテナを張り巡らせているあなたが、ブログから参加することで大きく育つサイトなのです。jp では、Webサイト制作に携わっているという方や、Webサイトに興味・関心のある方からの“ブログでの参加表明”を募集しております。
3月に公開する正式サイトで、重要な役割を果たすこととなるあなたのブログ
今からエントリーをして、あなたとアドビのコラボレーションによる、充実したサイトづくりにご協力ください。
5人のマスクマンが繰り広げる、Webサイト制作の記録ムービー
本日より公開のティザーサイトで配信
ティザーサイトでは、3月に公開する正式サイトの制作過程を紹介していくムービーを配信中です。オリエンからアイデア会議、プレゼン、その後のデザイン作業など、サイト制作における一連の流れが、時間を追って少しずつ更新されていきます。意外な展開も待ち構えているので、何度もチェックしてみてください。
ムービーに登場するのは、サイトを制作する5人の精鋭たち
ある日、アドビのサイトを制作することとなり、担当者からオリエンに呼ばれた5人
しかし、オリエンの場で資料と共に渡されたのは、なんと5色のマスクだった。
渡されたマスクを被り、マスクマンとなったその瞬間から、アドビのサイト制作に身を捧げた5人の、熱く、そして長いバトル・ロワイヤルの幕が切って落とされる ──
3月の正式サイト立ち上げに向かって、5人のマスクマンたちが今、どんな作業(闘い)をしているのかが気になるところ
ムービーは、3月の正式サイト公開前まで、実際のサイト制作の作業工程をなぞって更新されていきます。サイト制作を仕事としている皆様なら日々の自分とオーバーラップでき、サイト制作を志している方であれば、実制作時の現場がバーチャル体験できる内容です。ぜひご覧になって、3月の正式サイト立ち上げまでの期間をお楽しみください。こちらも随時更新されますので、ぜひ定期的にチェックしてみてください。高性能な物理演算をFlash内で利用することができます。0向けに内容をバージョンアップしたものです。この記事では、ビデオショーケースの概要と、そのカスタマイズ方法について解説します。制御された環境で複数のユーザに対してFlash Playerのインストールまたは使用を管理するITプロフェッショナルまたは管理専門職向けに最新の情報を紹介します。
CSSでのフォント指定について
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
アドビのクリエーター向けWebサイトが来月オープン
3月講座にてキャンペーン実施
Flash初心者のための正しいスキル修得に最適
林 拓也のFlash基礎からプログラミング入門への3ステップ
RIA開発のための必須知識習得の決定版
0を使ってみよう
よりリッチなアプリケーションを
複数のユーザに対して Flash Player のインストールおよび管理する必要のある IT プロフェッショナル、管理専門職を対象としています。3月21日(金)講座にてワコムタブレットが抽選で1名様に当たるキャンペーンを実施中です。講座の最終目標である「簡単なバナー広告コンテンツ」を実習を通して作成するので、どこから始めるかわからなかった方でも安心して受講できます。
詳細は こちら
3日間のコースで Flash の基礎となる制作方法、環境設定、アニーション、ユーザーインターフェース、画像の挿入、テキスト、ナビゲーション、サウンド、ビデオをふくむ扱い方を習得できます。このコースでは、操作方法の習得だけでなく、Flash 制作における概念知識もしっかりと習得することができ、実務の活用にも結びつけることができます。
詳細は こちら
1 コンテンツの基本的な制作工程を学習します。
詳細は こちら
0 で、テキストファイルや XML ファイルの読み込み、CGI との連携など外部とのデータ連携について学習します。
詳細は こちら
出演は、西村真里子、森田雄、新谷剛史、森和恵ほか
詳細は こちら
Flash 初心者のための正しいスキル修得に最適
林 拓也の Flash 基礎からプログラミング入門への3ステップ
Flash 初心者の基礎の習得から、Flash を活用したインタラクティブコンテンツの制作方法を学習し、さらなる表現の可能性を高める為のプログラミング入門へ、順を追ってスキルを習得します。※お好きな1講座からお申し込み頂けます。
詳細は こちら
Flashではじめる本格的プログラミング入門
詳細は こちら
3日間のコースカリキュラムで、Dreamweaver の基本的な Web サイト構築における手順、サイトのナビゲート、CSS(カスケーディングスタイルシート)を使った Web ページの レイアウトのデザイン、大規模なサイトの構築や維持管理の手法を習得することができます。
詳細は こちら
RIA 開発のための必須知識習得の決定版
本トレーニングパックは、Flex 2 による RIA 開発に必要な基礎技術をハンズオン(実機演習)形式で習得するトレーニングコースをパックにしたものです。これから Flex 2 による RIA 開発を行う方はもちろんのこと、技術評価にもお役立ていただけます。
(日程が離れていますのでご注意ください)
詳細は こちら
」という方に最適なトレーニングコースができました。0 の必須知識や、インタラクティブな Flash コンテンツを制作するためのテクニックを、実習を通して習得します。
詳細は こちら
0 を使ってみよう
0 の新たな考え方を学習します。
詳細は こちら
よりリッチなアプリケーションを
本トレーニングは、Adobe Flex 2 における、デザインなどの視覚的要素やインタラクションを実装する手法をハンズオン(実習)形式で習得できる3日間のカリキュラムです。Flex の視覚的要素を大きくカスタマイズして、よりリッチなアプリケーションを構築したい Flex 開発者には最適なトレーニングです。
詳細は こちら
Flash で制作された Web コンテンツのスクリーンリーダーへの対応など、アクセシビリティに配慮した設計にする方法を学習します。
詳細は こちら
2008年も地元有志主導により開催します。
出演は、西村真里子、森田雄、舘田智ほか
詳細は こちら
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
0におけるパフォーマンス向上のヒント
CS4 私たちが届けたいコト
デモビデオやサンプル素材ダウンロードも可能
「見て・体感して・実践して」ください。
関連セミナーも東京・大阪・福岡で開催
一体どのようなコンテンツを作成できるのか、また、利用する際の注意点など、FLARToolKitの作者である“さくーしゃ”さんにいろいろと話を伺いました。
新しいタイポグラフィの表現を可能にするために
アドビ システムズには、Flashなどのソフトウェア開発チームだけでなく、フォント開発チームも存在します。フォント開発チームでは、文字コミュニケーションにおいて重要となるタイポグラフィに新しい可能性をもたらす画期的なデジタル・フォントを作成しようと取り組んでおり、その1つが「かづらき」書体です。本記事では、「かづらき」書体の特徴とその源について紹介します。
3D機能とインバースキネマティクス
アニメーターなら、すぐさま試したい機能でしょう
とはいえ、新機能を使いこなすには、まず操作方法を覚えなければなりません。
Suckさんに、これらの機能の使い方をステップバイステップで解説してもらいましょう
膨大な量のデータをアニメーションのように滑らかに描画するとともに、Flash Player 10から搭載されている3Dを採用することで、3D上にデータをマッピングすることを可能にしています。
これからモバイルFlashを始めたい人のための基礎知識
Flash対応のモバイル端末は続々と登場してきています。
モバイルFlashのノウハウを習得して仕事の幅を広げたいという人は多いのではないでしょうか
本記事では、「これからモバイルFlashを始めたい」という人のために押さえておきたい基礎知識を紹介します。
お客様よりお寄せいただくご質問や弊社で確認している製品の不具合情報を掲載
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
新しいタイポグラフィの表現を可能にするために
3D機能とインバースキネマティクス
という制作コンセプトへ
Hondaの純正カーナビ「インターナビ」が収集した位置情報を
これからモバイルFlashを始めたい人のための基礎知識
会場は満員御礼になったところで ---基調講演は、アドビ システムズ 株式会社社長クレイグ・ティーゲルによる挨拶から始まります。そして、US本社のCTOケビン・リンチにバトンタッチをする際に、風船からケビン・リンチが登場するという演出を行いました。風船から出てきたケビン・リンチは、早速昨年のUS MAX 2008で発表したFlashプラットフォーム戦略の話を始めます。表現力とパフォーマンスの強化を果たしたバージョンとなっていますが、その最新事例としてhobnox audiotoolを紹介しました。Flash Player上で柔軟に音の編集もできるようになり実現できたアプリケーションです。米国ヘラルドトリビューンのアプリケーションを紹介しました。5だから実現できる柔軟なテキスト周りの変更と、Flash Videoのシームレスな操作を、デモを交えて解説しました。また、COMPALというlinuxOSで動くモバイルマシン環境でも同じくヘラルドトリビューンのAIRアプリが動くことを紹介し、AIRであれば、PCデスクトップだけではなく、ユビキタスデバイスでも動くことを披露しました。更に最新事例紹介は続きます。日本のAIR事例をケビン自らデモを行っていきます。サンプルアプリケーションですが、FELICAが使えるところだとAIRと連携してアプリを制作できる未来が近くにあることを予感させます。通常のメールのようにコミュニケーションができるとともに、ノーティフィケーションが特徴的なアプリケーションです。また、日本の事例としてはニコニコ動画を紹介しました。データから見るデバイスフォーカスの重要性として、現在、携帯60%、家電30%、パソコン10%という統計を紹介しました。モバイルおよびPC以外のデバイスの重要性を解説するとともに、Flashが搭載されているモバイルの普及率も急激に伸びていることを紹介しました。2010年には10億台の携帯、デバイスにFlashが搭載されることが予測できるそうです。アドビの新たな取り組みのひとつであるOpen Screen Projectを紹介した後に、お客様事例としてドコモ様より、Flashへの取り組みおよび新たな「AIRケータイ」についてデモを交えてお話ししていただきました。
ドコモ様の携帯では、2009年1月末現在で合計1
ドコモ様の「AIRケータイ」の紹介の際には、来場者のカメラのフラッシュが多くたかれ、関心の高さが伺えました。
今年のSneak Peakで紹介する技術は、どの製品に搭載されるのでしょうか
クライアントに負荷をかけずにFlashアプリケーションを制作できるようにする技術
動画のメタデータを自動的に抽出する技術
カラー、ライト、人物の数などを自動的に判定でき、その情報をメタとして扱えるようになります。サーバーを介さず、Flashクライアント同士でコミュニケーションができるようになります。
Adobe AIRアプリケーション間でドラッグ&ドロップによってライブコンポーネントを交換できる技術
例えばDuango技術を利用したアプリ上にブラウザ情報、SWFやFlexコンポーネントを気軽にドラッグするだけで、統合できます。ネットワークコネクションも自動的に判定することができるのも魅力的です。
ビデオプロダクションの映像編集をより効率化する技術
現在PDFで行っている文書管理がビデオでも行えます。ビデオ素材のレビューの効率化、セキュリティ強化が図れます。
1枚のビットマップ(写真)を解析して、3D空間のように表示し、操作を可能にする技術
2D素材も3D素材として確認・操作・加工できるようになります。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
新しいタイポグラフィの表現を可能にするために
3D機能とインバースキネマティクス
という制作コンセプトへ
Hondaの純正カーナビ「インターナビ」が収集した位置情報を
これからモバイルFlashを始めたい人のための基礎知識
一体どのようなことができるのか、FLARToolKitの作者である「さくーしゃ」さんに話を伺いました。簡単に言うと、実写の上にリアルタイムでいろいろな情報をのせる技術です。
攻殻機動隊とか、電脳コイルのメガネとかをイメージすると分かりやすいかもしれませんね
もともと、C言語で書かれた「ARToolKit」というARを実現するためのフレームワークがありました。Flashでこれが使えたら面白いなぁと思って、移植にトライしてみたのですが、その時は難しすぎて挫折しました。0は言語的に近いので、「これならいけるんじゃ。」と思ってトライしてみたらできました。FLARToolKitが提供する機能は「マーカーを認識して3次元空間での位置を計算する」というところまでです。映像上に表示する3Dオブジェクトのレンダリングには、別のライブラリを使います。Flash CS4ネイティブの3Dへの対応も可能だと思いますが、今のところ予定していません。
言葉だけではイメージしづらいと思うので、デモムービーをお見せしましょう
Flashコンテンツの中でWebカメラの映像を表示させて、そこに紙の上に描いたマーカーを映し出すと、マーカー部分にクリスマスツリーが登場するという内容です。Adobe MAXでの講演に向けてスタートアップガイドを用意したので、そちらを参考にしてください。それと、タロタローグの太郎さんやちゃぶ台さんのブログで詳しく解説されているので、そちらも参考にしてみてください。
タロタローグの太郎さんのブログ
ちゃぶ台さんのブログ
さくーしゃ:一番気を付けなければいけないのは、「マーカーの認識に結構なマシンパワーが必要となる」ということですね
そのため、あまり複雑なオブジェクトを表示させようとすると、動作が非常に重たくなります。あと、ライセンスにも注意が必要です。簡単に言うと、「FLARToolKitを使ったコンテンツは、そのソースコードを公開しなければならない」のです(※GPLの詳細については、必ず原文を読んでください。
日本語訳もありますが、あくまで参考と考えた方がいいでしょう)
Edge:マーカーの形状にルールや制約などがありますか
さくーしゃ:基本的には、下図のように外と中が 2 : 1 の黒枠にし、中の絵柄は点対称にならないようにデザインします。点対称だとマーカーの向きが判断できなくなるからです。実は、上級者レベルになれば、枠の太さの比率やマーカーの認識精度を変更したりすることもできます。
ただ、最初のうちは基本ルールに沿ってマーカーを作成した方がいいでしょうね
将来のバージョンアップで、複数マーカーでもある程度実用的な処理速度レベルになるように改善するかもしれません。さくーしゃ:これは、ちょっと実験的にやってみた程度のものですが、クリックするとマーカーから小さな花火が打ち上がるようになっています。
この時は、まだあまりFLARToolKitを使いこなせていなくて、打ち上がった後のものもマーカーにくっついてくるので、何か違和感があったり
あとカメラが完全に固定されているのでAR感があまりないですが
こういう系のARは、カメラがブレている方が臨場感・存在感が増すでしょうね
実際にみなさんも試せるようになっているので、サイトにアクセスしてください。
それともう1つ
の2009年のお年賀コンテンツです。FLARToolKit自体は2008年の5月にリリースしていたものの、ちゃんとコンテンツとして成立させることができていなかったので何かに使いたいと思っていましたし、年賀状という紙媒体を送るイベントとのマッチングもいいよねってことで、FLARToolKitを使ったお年賀コンテンツを企画しました。年賀状には、サイトのURLとマーカーが印刷されているだけです。一見、何のことやら意味不明ですが、いざそのURLにアクセスしてWebカメラで年賀状を写してみるとあら不思議、弊社メンバーの今年の抱負が年賀状からヒュオオロロローと飛び出します。こちらも、みなさんが試せるようになっています。年賀状は上のサイトから印刷できます。
これはActiveXプラグインを別途インストールする必要がありましたが
OOH(屋外広告など)と携帯電話を絡めたようなものとか、流行りのデジタルサイネージとか、そんな感じで今年はAR的コンテンツがもっと身近にいろいろと登場してくるんじゃないでしょうか
「カメラで写すだけ」という単純な行為で、かなりのインパクトを与えられるっていうところは、いろいろと効果的ですよね
特に広告分野とか
最近だとこんなサイト作ったり
netでブログ書いてます。
新しもの好きで飽きっぽいGeek
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
新しいタイポグラフィの表現を可能にするために
日本語プロポーショナルかなフォント かづらき® の取り組み
今月号の記事
新しいタイポグラフィの表現を可能にするために
3D機能とインバースキネマティクス
という制作コンセプトへ
Hondaの純正カーナビ「インターナビ」が収集した位置情報を
これからモバイルFlashを始めたい人のための基礎知識
アドビ システムズには、Flashなどのソフトウェア開発チームだけでなく、フォント開発チームも存在します。フォント開発チームでは、文字コミュニケーションにおいて重要となるタイポグラフィに新しい可能性をもたらす画期的なデジタル・フォントを作成しようと取り組んでおり、その1つが「かづらき」書体です。本記事では、「かづらき」書体の特徴とその源について紹介します。
かづらき®Tシャツ
天空を横切る流れ星、びっくりした表情のお公家様、独特の流れるような筆書きの書体があしらわれています。しかも、その書体で何やら難しそうな言葉が印刷されています。このTシャツは、現在開発中のプロポーショナルかな書体かづらき を使ってデザインされています。書かれている言葉も、その書体の由来に関係する内容なのです。
書体デザイナーの西塚涼子
アドビ システムズ の書体デザイナー西塚涼子は、まだ美術大学生だった頃、鎌倉時代の歌人、藤原定家(1162-1241)の書風に触発されます。
それを独自に解釈することで、何とか印刷用の書体としてデザインすることができないか
そう考えて、卒業制作の課題として取り組むことにしました。大学を卒業してからも定家の書風に対する愛着は消えることはありません。さらに制作を続け、定家様式のタイプフェイスのプロトタイプを完成させます。その作品は2002年のモリサワ賞国際タイプフェイスコンテストで銀賞に輝きました。そのデザインをベースに、現在、アドビ システムズのフォント開発チームは、かづらき書体の開発に取り組んでいます。藤原定家はその自筆本が国宝となっている日記『明月記』 などで知られる歌人ですが、独特の書風でも知られます。このTシャツに書いてある言葉「客星觜参(ししん)の度に出づ。天関星に孛(はい)す。大きさ歳星の如し」は、定家が 「かに星雲」の超新星爆発の事件(1054年)について書いた言葉です。その意味は「客星(超新星または彗星の意)が、オリオン座の東の方に見えた。それはおうし座ζ(ゼータ)星の近くに現れ、大きさは木星ほどであった」ということです。超新星や彗星は不吉の前兆と考えられていました。かづらきTシャツは、不吉な星の出現に驚くお公家様の様子を描いているのです。
さて、かづらき書体は、何が従来の日本語書体と違うのでしょうか
それは、文字が正方形の枠内でデザインされているのではなく、文字ごとに文字の幅や高さが大きく異なる点にあります。かづらきの文字は欧文書体のように各文字が固有の字幅を持っています。明朝体でもゴシック体でも、従来の印刷書体は、雑誌や書籍など、長い文章の読みやすさ、制作段階での文字の組みやすさのために、通常は正方形の範囲(全角)の内側にちょうどうまく収まるようにデザインされてきました。従来の日本語の印刷書体は「等幅」とか「モノスペース」とか呼ばれて、仮名や漢字については、どの文字も同じ高さと幅を持ち、そのため、縦組みでも横組みでも同じ文字を使って、規則正しく文字が配列されます。
かづらきを用いた印字サンプル
(開発段階のサンプルのため、デザインおよび書体名は予告なく変更されることがあります)
たしかに、従来の書体は、長い文章を組む場合に読みやすく適しています。ですから、今後も明朝体やゴシック体は標準的な書体として広く使われることは間違いありません。しかし、他方で、手書きの本来の仮名文字が持っていた自由で躍動感のある形を、正方形の枠内でデザインした従来の書体で再現することは不可能でした。かづらきでは、 OpenTypeフォントの技術を用いることで、文字ごとに固有の字幅を縦組み用と横組み用双方に持たせることが可能になりました。日本語の印刷書体では文字はかならず正方形の枠内にデザインされるという制約を取り除くことができたのです。それによって、藤原定家の書風が持つ自由でダイナミックな形を現代のデジタル・フォントの書体デザインに反映させることができました。また、字幅を一定にする必要がないため、複数の文字を連続させて1つの文字にした「合字」をデザインすることも容易になりました。OpenTypeフォントの仕組みと組み合わせることで、特定の文字の組み合わせに対して自動的に連続した形の「合字」で表示することも可能になりました。ところで、定家のかなの解釈について西塚涼子の考えを聞いてみました。西塚:定家は日記以外にも、多くの物語や歌を書き写しています。究極の美を追求しているかに見える他のかな書の名品とは異なり、連綿は少なく、独立した文字で書かれています。私の想像ですが、最高の美術を残すというよりも、自らが見聞きした事柄を読み物として後世に伝えるという目的意識が強く働いていたと思います。
それは、現代の私たちがデジタル・フォントを使って文字を書き留めている状況と同様の、文字の実用性に根ざしたものだったのでしょう
そのようなことを考えつつ、かづらきのデザインに取り組んでいます。現時点ではまだ、かづらきは開発中の段階であり、リリース方法や時期などは未定です。また、かづらきは基本的にはプロポーショナルかな書体ですが、漢字についても、特に挨拶状や和食のメニューに使うことのできる 約1,000文字だけについては対応する予定です。文字種が限られているため、用途としては広告のタイトル、見出し、ロゴ、メニュー、挨拶状など限定的なものとなるかもしれませんが、既存の書体にない手書きの書風を持つ独特のデザインが新鮮でタイポグラフィックな効果を与えることが期待できます。「かづらき」という名前は、定家が詠んだ歌に由来しています。
歎くとも 恋ふとも逢はん 道やなき 君葛城の 峰の白雲
身分違いの恋の歌なのです。さて、アドビ システムズでは、クリエイターやデザイナーが新しい表現形式を積極的に切り拓いていく上で役に立つ技術やツールの開発に努めています。今回ご紹介したかづらき書体も、文字によるコミュニケーションにおいて重要となるタイポグラフィの世界に新しい可能性をもたらす画期的なデジタル・フォントになると考えています。1992年、アドビ システムズに入社、以後、日本語フォントと関連技術の開発に従事し、現在に至る。
タイポグラフィ学会(2005年設立)の設立発起人の一人で、現在副会長
2008年、「タイポグラフィにおける文字の大きさに関する考察」(『タイポグラフィ学会誌 01』所収論文・2007年発行)で「第一回本木昌造賞」を受賞
株式会社モリサワ、グラフィック系デザイン事務所勤務を経て、1997年アドビ システムズに入社
小塚昌彦氏の指導の下、小塚明朝®/小塚ゴシック®の開発に携わる。
1999年、モリサワ国際タイプフェイスコンテストにて、「ブランチレター」が佳作を受賞
その後、アドビオリジナルかな書体「りょう®」および「りょうゴシック」のファミリーを制作する。
将来的観測の開示について
本プレスリリースは、実際の業績を大幅に異ならせる可能性のあるリスクと不確実性を内包した製品発表の計画、売上、営業利益率、営業外収益、実効税率、株式数、1 株当たり利益に関連する将来的観測を含みます。そのような原因となり得る要素として、以下が挙げられますが、必ずしもこれらに限られるものではありません。
アドビ システムズ社が事業をおこなっている主要地域での不慮の経済的、政治的環境変化
新製品、または既存製品の新しいバージョンの開発や出荷の遅延
既存の、または新たな競合他社による新製品の市場投入
新たなビジネスモデルや新たな市場への移行の失敗
新規事業からの収益予測の困難性
アプリケーションソフトウェア、コンピュータおよびプリンタ需要の変動
知的財産に関する紛争、訴訟
不正なコピー、利用、開示ないし悪意ある攻撃からのアドビの知的所有物の保護
過去および将来の買収において予期される利益予測および買収による統合の難航
流通経路の変更
天災等によるビジネスの中断
製造委託業者との契約関係の中断および解除
国際的な事業展開によるリスク
外国為替相場の変動
会計基準の変更および解釈
アドビの営業権ないし無形資産の減少
予期せぬ税率の変更
主要な人材を集め、維持することができないこと
会社の株式投資にともなう市場リスク
これらおよびその他のリスクと不確実性についての詳細は、当社が証券取引委員会(SEC)に提出した書類をご参照下さい。アドビ システムズ社はこれら将来的観測を更新する義務を負うものではありません。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
3D機能とインバースキネマティクス
今月号の記事
新しいタイポグラフィの表現を可能にするために
3D機能とインバースキネマティクス
という制作コンセプトへ
Hondaの純正カーナビ「インターナビ」が収集した位置情報を
これからモバイルFlashを始めたい人のための基礎知識
Flash CS4では、タイムライン派アニメーターに嬉しい新機能がいくつか加わりました。それは、まったく新しいものが作れるようになったと言うよりは、これまでやってきたことがより効率的に行えるようになった感じです。前回は新旧モーショントゥイーンについて解説しました。2回目となる今回は3D機能とインバースキネマティクスを解説します。Flash CS4では、タイムライン派アニメーターに嬉しい新機能がいくつか加わりました。それは、まったく新しいものが作れるようになったと言うよりは、これまでやってきたことがより効率的に行えるようになった感じです。そんな新機能のうち、3DグラフィックとIKを中心にとりあげます。
CS4のツールパネルを見てみましょう
フローティング状態なら、パネルの右下をドラッグすることで、自由なサイズになりますよ
そうなると、使いやすいようにカスタマイズしたくなりますね
もちろん、CS3までと同様にアイコンを削除したり、分けたりまとめたりも自在です。私の場合は、ペンツールを使わないので削除しちゃいました。ただしアイコンを削除した場合は、そのショートカットも効かなくなりますので要注意です。また削除した次のアイコンが繰り上がるので見た目コンパクトになりますが、後でアイコンを挿入することはできません。その場合は一旦デフォルトに戻すしかなさそうです。
ツールパネルでは「スプレーブラシ」「パターン描画」や「3D」「ボーン」など、新しく追加されたアイコンに目がいきますね
しかし、消えてしまったものもあります。それはCS3まで「塗りのカラー」の下にあった「カラーなし」のアイコンです。
クリックすると線や塗りのカラーを「なし」にできるので、矩形ツールや楕円ツールと併用する人も多いでしょう
Flash 5で「白黒」「カラーの入れ替え」とのトリオでツールパネルにデビューして以来、頻繁に使っていたのですが
しかしご安心を
アイコンはなくなっても機能は残っているのです。AltキーまたはOptionキーを押しながら「線のカラー」または「塗りのカラー」をクリックすることで、描画オフにすることが可能になっています。この操作はプロパティインスペクタでも可能ですが、カラーパネルでは従来通り「カラーなし」のアイコンをクリックします。
平面のパース表現
さて、新機能のうち、私がもっとも惹かれたのは3D 回転です。2Dアニメーションでは3D的にイメージして描いたり動かしたりするからです。平面的なものであっても、ステージ上に配置する時は、その空間のパースに乗せなければ不自然です。パースとは消失点を基準とした遠近法です。
壁に貼られたポスター、床にある新聞、カルトンに置かれたお札などを思い浮かべれば、パースの影響下に存在していますよね
しかしパースに合わせて作画するのはシンドイので、Flashではノーマルな状態で描いたシンボルを変形する方がスマートです。ステージに配置された封筒のインスタンスをご覧ください。この封筒が机の上にあるのなら、机のパースに合わせて変形させるわけですが、回転や傾斜だけでは十分ではありません。そこで歪曲変形します。
そのためにはインスタンスを分解(文字が含まれていればそれも
)しなければなりません。
これって覚悟が必要ですよね
そうです、歪曲変形は手軽にパースをつけられるのですが、シェイプでなければならないのが不便でした。修正するにしても動きをつけるにしても、手間がかかるんです。CS4の3D 回転は、インスタンスそのものにパースがつけられるのです。この封筒の場合、「グローバル変形」をオフにして、X軸とZ軸を調整します。回転コントロールを直接ドラッグするよりは、変形パネルの「3D 回転」で左右にドラッグする方が操作しやすいです。
インスタンスを分解することなく、状態を見ながら簡単に回転できるのはありがたいですね
モーショントゥイーンでアニメーションもつけることができるのです。いいことづくめなんですが、縛りもあります。
インスタンスはムービークリップに限られ、ドキュメントの条件はAS 3
また、CS3形式で保存すると3Dのパラメータはなくなってしまいます。
CS3形式で保存する前に、回転した状態で分解しておけば
と考えたあなた
ぜひ試してみましょう
次に、3D 回転でやりたいこと、それは物体の回転アニメーションです。そこで、キャメラ がビルの周囲を回り込むショットを作ってみます。そのためには、ビルの建設から始めます。
安全のため、ヘルメットがあれば被って作業した方がいいでしょう
まず、ビルの壁面のシンボルを用意してステージに配置します。グラフィックインスタンスはムービークリップにしておきます。このインスタンスをさらにシンボル化します。種類はもちろん、ムービークリップです。シンボル編集に移動し、壁面インスタンスをコピーして左右に配置します。
吸着オンで、角と角をぴったりくっつけておきましょう
このような複数の面を持つ場合、Flashでは面の重なり順に注意しなければいけません。3Dソフトのような陰面処理はないので、ぐるっと回した時に奥に隠れるはずの面が手前に来てしまうことがあるからです。重なりはレイヤーにしておくと扱いやすいので、レイヤー1が左面、レイヤー2が右面、レイヤー3が正面になるように分配しておきます。左面は「カラー効果」で明度を下げてみました。
光源の当たらない面があるとちょっとリアルでしょ
3D 回転ツールを選んで、左面を選択します。回転の中心点をドラッグして右端に移動しておきます。吸着がオンなら端の中央にピッタリ合います。
変形パネルの「3D 中心点」でXの値を数値入力するのもいいでしょう
この数値は編集中のシンボルの基準点からの距離なので、壁面インスタンスの横幅から割り出せます。これで正面に対して90度になります。右側の面の回転の中心は左端に移動し、変形パネルの「3D 回転」でYの値を-90度にします。
ビルっぽくなりましたね~
もうヘルメットは不要です。親のタイムラインに戻れば、3D 回転ツールか変形パネルの「3D 回転」でビルのインスタンスをぐりんぐりん回せます。回転の中心がビルの正面になっているので、ビルの中心で回転させる場合は、変形パネルで「3D 中心点」のZの値を変更します。数値は奥行きの1/2です。回しすぎてワケがわからなくなったら、変形パネルで「変形の解除」をクリックします。それでは撮影します。と言っても、Flashには今もカメラがありませんので、モーショントゥイーンでインスタンスを動かすことになります。「グローバル変形」を有効にし、変形パネルの「3D 回転」で、Y軸に回転させた後、X軸に傾けます。回転しすぎると、前述したように重なり順によって奥の面が見えてしまいます。適切なアングルを手に入れたら、モーショントゥイーンを作成します。スパンの最終フレームで変形を一旦解除し、再び理想のアングルを見つけます。ビルが横に回転するアニメーションが完成し、キャメラが右方向に回り込んだように見えます。最後に、キャメラ に前後と上下の動きをつけます。これには3D 変換ツールか、プロパティインスペクタの「3D 位置とビュー」を使います。キャメラ を前後させる場合はZの値を、上下させる場合はYの値を操作します。また、「遠近の角度」は数値が大きくなるほど、パースが極端になります。3D変換されたオブジェクトで、手前のものほどより近くに、奥のものほど遠くに表示されます。
おかしく見えるようなら55に戻しましょう
「消失点」は1点透視によるパースの中心点で、デフォルトはステージ中央です。「ガイドを表示」がオンになっていれば、ホットテキストのドラッグ中に、ラインで示されます。
アーマチュアのアニメーション
IK(インバースキネマティクス)は嬉しいことにグラフィックインスタンスでも使えます。
ただ、ピストンやクレーンが作れると言われても、困惑しませんか
横位置の歩行アニメーションなどはアリかもしれません。
ただ、フレームアニメで描いた方が早いこともあるでしょう
もっと簡単な使い道はないものかと考えたら、ありました。複数インスタンスの一斉トゥイーンです。たとえば大勢の人がわらわらと走っているシーンでは、隊列が常に変化するはずです。そこで走る人々のアーマチュアを組んで、それぞれの位置を変化させます。通常のトゥイーンでは人数分のレイヤーが必要ですが、ポーズレイヤー1つですむのです。しかもポーズレイヤーでは自動的にトゥイーンが設定されます。ここで注意しなければならないのは各インスタンスの前後関係です。ボーンを後から追加したものほど前面にきますので、奥から順につないでいきます。
それぞれが目標を追っている場合は、アーマチュアを階層化するといいでしょう
ボーンやジョイントでインスタンスが見えにくい場合は、IK アーマチュアのプロパティで「スタイル」を線にします。シンプルで見やすくなります。アーマチュアアニメーションのシンボルをステージに配置し、モーショントゥイーンを設定すればパニックシーンのできあがりです。2回にわたって、CS4の新機能を、タイムライン派アニメーターの視点でいくつか紹介しました。この後は、とにかくタイムラインでグリグリ動かしてみてください。
って感動しますよ
そうそう、IKアニメーションや3Dトゥイーンを使用したムービーをボタンで制御する場合、AS3
これまでスクリプトアシストのおかげもあってAS1
0でやりくりしてきましたが、もうAS3
0は避けて通れないと実感しました。
少なくとも再生ボタンの作り方は覚えておいた方がいいでしょう
1979年以降、アニメーターとして多くのTV・劇場アニメの作画に携わり、1997年にFLASHでのアニメ制作に移行
ペンタブレットによる手描きとトラディショナルなアニメーション技法を活かして、WEB、TV、劇場、イベント、DVDなど、様々なアニメコンテンツを制作している。
グラフィックシンボルを好むタイムライン派
今年の5月には、アニメーター業30周年を迎える。
著書に「FLASHアニメーション制作バイブル」(オーム社)など
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
新しいタイポグラフィの表現を可能にするために
3D機能とインバースキネマティクス
という制作コンセプトへ
Hondaの純正カーナビ「インターナビ」が収集した位置情報を
これからモバイルFlashを始めたい人のための基礎知識
「情報やサービスへのアクセシビリティを確保しつつ、ブラウザやデバイスの特徴を活かしたデザインや技術を実装する」という考え方です。日本ではあまり馴染みのない考え方ですが、海外では数年前から制作者間で話題となり、確実に浸透しつつあります。これをきっかけに今後日本でも広がっていくと期待されます。たとえば、モダンブラウザの中には一部のCSS3をサポートしているものがあります。そうしたモダンブラウザのユーザにはCSS3を活かしたデザインや機能を提供し、Internet Explorer 6などのCSS3をサポートしていないブラウザのユーザにはCSS3を利用していないデザインや機能を提供するというものです。日本では、「クロスブラウザ=どのブラウザでも同じように見えるようにする」という制作コンセプトが主流です。これは「Graceful Degradation」と呼ばれ、「情報やサービスへのアクセシビリティを確保しつつ、下位のブラウザやデバイスへ同調したデザインや技術を実装する」という考え方です。先ほどの例になぞらえると、Internet Explorer 6がCSS3をサポートしていないため、モダンブラウザ向けにもCSS3を実装せず、すべてのユーザが利用できるデザインや機能を提供することになります。
Webの世界ほど技術の進歩が速い世界はないでしょう
新しい技術へ積極的に取り組むべき理由として、ひとつは、技術の進歩が速いWebの世界で新しい技術を学んで理解することは必須だからです。技術進歩の状況を世界的な観点などを踏まえずに、判断し先延ばしにするのはリスクが高いと言えます。もうひとつは、マーケティング的には他の人が使えない新しい技術を自由に実践で扱えるということは、自身がユニークな存在となり大きな武器になるからです。
ただ、今のところはCSS3の実装例が多いため、その中から代表的な例を紹介しましょう
属性セレクタを使い、同じInternet Explorerでもバージョン6とバージョン7では、まったく違うデザインが表示されるようになっています。バージョン7の方が見た目にも美しいデザインへと仕上がっています。
モダンブラウザで表示したところ
Appleの公式サイトのナビゲーションは、通常、画像を使用しています。これをCSS3で再現してみました。CSS3を使用すると、画像を使用した場合に比べて、ファイルサイズを1/10に抑えることができます。
Appleの公式サイトのナビゲーション
CSS3で再現したナビゲーション
ちなみに、以下のCSS3のプロパティとセレクタを使用しています。このようにProgressive Enhancementとして2パターンを用意しておけば、CSS3をサポートしていない古いブラウザでは画像ナビゲーションが表示され、CSS3に対応しているブラウザやデバイスではCSS3ナビゲーションが表示されるようになります。日本の回線速度は速いですが、世界では回線速度が遅い国もまだまだあります。PCのスペックも高くなってきていますが、今では各種モバイル端末をはじめとした低スペックでネット接続環境を持つデバイスが数多く登場してきています。
CSS3ナビゲーションが用意されていれば、遅い接続回線や低スペックのユーザはより快適に情報やサービスを利用できるようになるでしょう
※モダンブラウザでは一部のCSS3をサポートしています。なお、Operaはプリフィックスを付けない形でCSS3を実装することに力を入れているようです。
ユーザ体験よりも深い根本の部分を必ず大切にしながら、その上にCSSやJavaScriptなどの技術を実装していき、上位のデバイスには上位のデバイスの特徴(画面サイズ、携帯性)を活かした技術を実装するようにしましょう
しかし、考えてみてください。現在日本では、どのブラウザでも同じように見えるようにするクロスブラウザの考え方が主流だと思います。これはDTPのように見栄えを完全にコントロールできる世界で通用する考え方であり、現在のWebの世界では難しいように思えます。なぜなら、Webを利用するソフト(OS、ブラウザ)、ハード(機器)や環境(車や電車の中など)はここ数年で大きく変化しています。また、ユーザのWebサイトの見栄えは、例え同じOSとブラウザであっても必ずしも同一になるとは限りません。ユーザの設定いかんによって、文字サイズなどが異なります。つまり、クロスブラウザという考え方自体に無理があるのです。
「クライアントがクロスブラウザを求めるから」という意見もあるでしょう
しかし、クライアントはWebサイトのユーザではありません。ユーザとは、そのWebサイトを利用する人です。ユーザは異なるブラウザを使ってデザインを見比べるようなことはしません。今まで、ハックを利用したりして、ピクセル単位で見た目を合わせていたことの方が、時間や手間、費用がかかっていたのかもしれません。
また、Progressive Enhancementの考えを導入してCSS3を利用した場合、画像を利用したり余計なマークアップを減らしたりしてファイルサイズを抑えることができるので、ユーザは情報やサービスにより早くたどり着けるようになるでしょう
むしろ、この方が見栄えが完全に等しくなることより重要だと思います。しかし、海外に目を向けると着実に浸透しています。彼のMOSeに至った考え方についてプロセスを学ぶことができます。例も豊富で参考になります。CSSにフォーカスしています。CSSの読み込み方など少し違います。イギリス政府のWebサイトが全てのブラウザで同じである必要があるかという点について、Jeremy Keithを中心として議論をしています。非常に面白い内容です。イギリス政府のブラウザテストのガイドラインなども興味があれば閲覧してみてください。米国ボストンにてマーケティングを専攻、帰国後、貿易会社を米国(本社)と日本(支社)で立ち上げる。
その後、会社を共同創業者に売却譲渡しWebを独学
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
新しいタイポグラフィの表現を可能にするために
3D機能とインバースキネマティクス
という制作コンセプトへ
Hondaの純正カーナビ「インターナビ」が収集した位置情報を
これからモバイルFlashを始めたい人のための基礎知識
レイハラカミによるBGMに合わせて政令指定都市17都市のデータがランダムに描画されていきます。Flashによって描画された地図をドラッグすると、グリグリと回すことができ、スクロールホイールに合わせて拡大率も変化します。
千葉市をビジュアライズ
遠くに千葉港が見えるのがわかる。
京都府をビジュアライズ
碁盤の目のように区画された街を光の軌跡が駆け抜ける。
川崎市をビジュアライズ
東京に引けを取らないかなりの交通量があることがわかる。NEURON ROADでは、このような膨大なデータを効率よく処理するために、位置情報にはバイナリ形式のデータを用いているそうです。0(AS3)から可能になったバイトコードを直接読むことで、Flashでの負荷やファイルサイズを大幅に抑えることができるようになったとのことです。インターナビユーザから集められた位置情報は一旦インターナビサーバーに蓄積され、自動処理によりバイナリ化された後、Hondaウェブサーバーへデータを受け渡されます。作業は完全にオートメーション化しているので、更新の必要はありません。
データの変換、受け渡しはすべて自動化
今後、様々な日付のデータが追加されるとのこと
めずらしい地形や、おもしろい動きなども
キレイで美しい地形だけでなく、めずらしい地形や特徴ある地形も含まれています。
うみほたるをビジュアライズ
まっすぐに伸びるアクアラインを光の軌跡が疾走する。
そして東京都
皇居の形がくっきりと浮かび上がっている。DRIVELAPSEでは、「カーナビとドライブするって、楽しいよね」をコンセプトに、あたかも自分がドライブしているかのように感じることができる、全面映像コンテンツを展開しています。マウスクリックでナビ画面と風景画面が切り替わる。
本来、ドライブとはとても楽しいものですが、実際には渋滞に巻き込まれたり、道を間違えたり、到着時刻が遅れたり
となかなか一筋縄ではいかないですよね
このコンテンツでは、道周りの面倒なことは全部インターナビにお任せして、周りの風景をゆったり楽しむ男女の姿が切り取られています。
お気に入りのBGMをかけながら、気の合う仲間たちとドライブ
早朝に集合した4人組
彼らはどこへ向かうのだろうか
夜明けの館山を出発
だんだんと景色が白んでいき
白浜へと到着
男女4人が気持ちよさそうに海を眺めている。
ルート第一弾が館山から白浜のようですが、画面を見る限り第二弾、第三弾と続く模様
ぜひお使いください。
Webのテクニカルな側面から広告アイデアを考える、テクニカルディレクターとして、2002年から(株)電通に参加
バナー広告にも作品が多い。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
これからモバイルFlashを始めたい人のための基礎知識
今月号の記事
新しいタイポグラフィの表現を可能にするために
3D機能とインバースキネマティクス
という制作コンセプトへ
Hondaの純正カーナビ「インターナビ」が収集した位置情報を
これからモバイルFlashを始めたい人のための基礎知識
携帯電話をはじめ、Flashコンテンツを利用できるモバイル端末は続々と登場してきており、今後もますます増えていくでしょう
そうした状況を踏まえて、モバイルFlashのノウハウを習得して仕事の幅を広げたいという人は多いのではないでしょうか
本記事では、「これからモバイルFlashを始めたい」という人のために押さえておきたい基礎知識を紹介します。モバイルFlashに対する需要は高まってきている。数年前であれば、「Flash対応」というのは、携帯電話端末における1つのセールスポイントでした。しかし、今では「なくてはならない機能」となり、流通している携帯電話端末のほぼ全てにおいてFlashが利用できると言っても過言ではない状況となりました。PC環境におけるFlashのメリットは、携帯電話環境でもそのまま当てはまります。・端末依存が少ない。・「キレイ」で「ダイナミック」なグラフィック表現ができる。・開発に時間がかからない。携帯電話向けHTMLやアプリケーションで制作するコンテンツに比べて、訴求力の高いブランディングコンテンツやエンターテインメント性の高いゲームコンテンツなどを、短期間でユーザに提供することが可能なのです。こうしたモバイルFlashの可能性に、さまざまな企業が注目し始めています。実際、弊社 では事業としてモバイルFlashを手掛けていますが、モバイル業界だけでなく他の業界の方々も、「キレイ」で「ダイナミック」なグラフィック表現で、タイアップ広告ゲームや会社のブランドの世界観などを創ることができるモバイルFlashに興味を持ち始めており、ニーズが高まってきていることを実感しています。では、モバイルFlash分野における仕事内容にはどのようなものがあるかというと、主に以下の4つが挙げられます。
・オールFlashによるサイト企画・制作
・HTMLサイト内に貼り付けるインラインFlashを用いたバナー広告など
・待受画面などのアクセサリー(着せ替えケータイなど)
Flash Liteにはいくつかのバージョンがあり、バージョンによって機能や制約が異なります。モバイルFlashコンテンツを開発する上では、このFlash Liteのバージョンと端末ごとに異なる特徴を把握することが大切です。0対応)と進化してきました。※Flash Liteのバージョンごとにおける機能/制約についての詳細は、アドビ システムズ社のサイトにある「Flash Lite バージョン別機能比較表」と、同ページの「詳細な機能比較表のダウンロード」から入手できるPDFファイルを参照して下さい。コンテンツ開発を行なっていく際には、それぞれの端末に対応しているActionScriptのバージョンに注意する必要があります。すべてのActionScriptの仕様をサポートしているわけではなく、携帯電話特有の制限があったり、端末ごとの制限があったりします。現在では、それらに対応した端末も出てきています。1以降の端末では、今まで端末側に制限がかかっていた外部データの自動読み込みができるようになったため、複雑なサーバ連携を行うファイルの制作が可能になり、よりPC環境に近い機能を実現できるようになっています。0以降でも再生することが可能です。0以降でパブリッシュした場合、ZIP圧縮がかかり容量が削減されるため、その分だけグラフィックをリッチにしたり、オプション要素を追加したりすることができます。1対応端末のシェアは1/3ほどあり、無視できないシェアです。1以降の端末」を対象にしているようです。
コンテンツの制作と検証
制作したコンテンツは、目的とする携帯電話端末でしっかりと動作するか検証しなければなりません。特に複数種類の端末を対象とする場合には注意が必要です。搭載するFlash Liteのバージョンが同じでも、対応しているActionScriptの仕様や機能が異なる場合があり、また、端末ごとにハードウェアとしての性能も異なってきます。弊社 の場合は、各キャリアが公開している情報、Adobe Device Central CS4からの情報に加え、自社 独自の方法で端末検証を行っており、ここで蓄積されたデータを基に、社内共有化してコンテンツの制作を行っています。全体的に、新しい端末ほどFlash Liteのバージョンが高く、また容量/処理能力も高くなっていきます。ただし、端末のCPUやメモリなどに関しては、理論値に基づいてではなく、実際の動作環境に沿って制作する必要があります。
コンテンツ開発時のアドバイス
モバイルFlash環境は、PC環境と比べると、「容量」「処理速度」「メモリ容量」に関して厳しい制限があるため、制作の際には十分に考慮する必要があります。ユーザにとって、また企業のブランドイメージに沿って、「本当に訴えたいものは何か」を取捨選択する必要があります。PC向けのコンテンツをそのままモバイルに転用したりローカライズしたりするのではなく、モバイルユーザが「何を求めているのだろう」、「どんなシーンで利用するのだろう」ということを常に意識して、ゼロから制作するつもりで考えることが大切だと思います。の開発に携わり、これまでにFlash動的生成エンジンやその汎用ソリューションとしてASP提供モデル型のツール開発などを行う。現在は、携帯電話の特性を分析し、携帯でのユーザビリティを最大限に考慮したモバイルFlashアバターシステムや、Flash動的生成エンジンを中心としたセキュアなサーバ連携システムの開発を行う。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
新しいタイポグラフィの表現を可能にするために
3D機能とインバースキネマティクス
という制作コンセプトへ
Hondaの純正カーナビ「インターナビ」が収集した位置情報を
これからモバイルFlashを始めたい人のための基礎知識
仕事の作業効率を格段とアップ
RIA開発を目指す方におススメ
「ほんきでクスール」第12期
0を一から学べる講座
トヨタ自動車が2008年10月15日に発表した、全長が3mを切る超小型ボディに、4人乗車可能な超高効率パッケージを実現したクラスレスカー「iQ (アイキュー)」のスペシャルサイト
それぞれの冒頭にはトリックアートをモチーフにしたムービーを配置し、その先には詳細情報を用意して iQ の特長を分かりやすく説明しています。その他にも CM や様々な場所で開催される iQ イベントなどの情報もサイト内に格納することで、iQ の情報ハブ的な役割を担っています。本トレーニングコースは、Adobe Flex 2 でのサーバーとのデータ通信、およびそれに付随するデータの取り扱いに関する必須知識を、2日間で習得する講座です。5 でもそのままお役立ていただけますので、ご安心ください。
詳細は こちら
今からでも遅くない。0 の基本を適切に理解する事を目的に、独学ではなかなか理解しにくい概念的な部分を分かりやすく解説します。※お好きな1講座からお申し込み頂けます。
詳細は こちら
0初級講座」を前半と後半の2講座に分けて開講いたします。0 の基本的な考え方、シンタックスの基礎、カスタムクラス定義の方法、スクリプトでのアニメーションなど、プログラム言語としての基礎を学習します。後半では、Flash ならではのアニメーション表現、外部イメージの読み込み処理や XML の読み込みといった、実際のコンテンツ制作場面で必要とされるテクニックを学習します。0 でのコンテンツ制作において重要なカスタムイベントの基礎も本講座(後半)で学習します。※お好きな1講座からお申し込み頂けます。
詳細は こちら
仕事の作業効率を格段とアップ
本トレーニングでは、Captivate 3 の基本操作を使用したデモンストレーションプロジェクトから、学習者が操作して理解を深めるシミュレーション プロジェクト、クイズプロジェクトの作成を行います。Captivate の特長や制作におけるポイントなど、余すことなくハンズオン形式で学ぶことができます。
・社内文書の書き方やアプリケーションの操作方法を、新入社員が配属されるたびに説明するので、毎回指導するのがとても面倒
・学習者もなかなか一度で覚えられないので、二度三度と同じことを繰り返し尋ね、本来の仕事がはかどらない。など、このような悩みをお持ちの方は、本トレーニングで Captivate をマスターすることにより、あっという間に解決できます。
詳細は こちら
携帯電話向けウィジェットの注目度はますます高まっています。ウィジェットを利用し、携帯電話の特性を活かした自社プロモーションやサービス利用率の向上を図る鍵となってくると考えられています。セミナーでは、ソニー「FLO:Q」のプロジェクトリーダー竹下直孝氏を迎え、マーケット事情をご紹介いただきます。その他、ウィジェット制作やプラットフォームの提供を行う企業担当者を迎えて、さまざまな角度から「モバイルウィジェット」の可能性を探ります。
詳細は こちら
早々に定員に達し、現在、キャンセル待ちを受付中です。
ビッグパレットふくしま 1F コンベンションホール(福島県)
詳細は こちら
RIA 開発を目指す方におススメ
本トレーニングコースは、Adobe Flex 2 によるッチインターネットアプリケーション開発にあたり、知っておくべき基礎事項が凝縮されている重要なカリキュラムです。そのため、Flex 2 のトレーニングコースフローにおいて、一番最初に受講することが推奨されています。これから Flex 2 でリッチインターネットアプリケーション開発を行う方、Flex 2 の製品評価をお考えの方に、最適な講座です。6 でもそのままお役立ていただけますので、ご安心ください。また、本講座と併せて Adobe Flex 2 でのサーバーとのデータ通信、およびそれに付随するデータの取り扱いに関しても習得したい方は、まとめて習得できる Flex 2 RIA 開発パックがおススメです。
詳細は こちら
大阪の有志による主催として再起動
3月から5月までの第2火の夜に、アップルストア心斎橋にて開催
椅子数は少ないですが、事前登録は不要です。仕事帰りにフラっとお立ち寄りください。
ゲストは3組
よしだゆたか(トイプロダクション)による携帯電話向けの小さな WEB コンテンツの作成方法、大阪進出のバスキュールの田中謙一郎による Flash 制作関連
ほか1組を予定
詳細は こちら
3回目の開催となる福井版は2デイズで開催
1日目は、三富圭子(サーフボード)、山 健太郎(DA-Studio)、新出純壱(アルデザインワークス)、森下智弘(森下屋)など、福井で活躍する制作者を中心とするミニセッションで構成
詳細は こちら
「ほんきでクスール」第12期
Flash コンテンツ制作には技術を習得することと同時に、「どんなものを作るか」というアイデアを考えることが重要です。「ほんきでクスール」では受講者みずから企画を考えてもらい、それをもとに作品を作っていきます。見学も随時可能ですので、ご興味のある方は是非ご連絡ください。
詳細は こちら
0 を一から学べる講座
0 はちょっととっつきにくい・・」という方のためのコースです。0 の違いや、クラスについての説明など、オブジェクト指向プログラミングの初歩から学ぶことができます。
0では外部のライブラリを使うことが多くなりますので、ライブラリの使い方を紹介しながら、自分の企画した作品を制作していくことで、ActionScript3
0 を学んでいく講座内容です。見学も随時可能ですので、ご興味のある方は是非ご連絡ください。
詳細は こちら
ActionScript でアニメーションを扱ううえで重要な座標空間に関わる数学の基本を学習します。0プロフェッショナルガイド 』をテキストとしてプレゼントいたします。
詳細は こちら
初の新潟版はプレ版として小規模に開催
新潟近辺に在住の Web 制作者はもちろん、新潟の Web シーンを盛り上げるべく、新潟出身の方々にもご参加いただければ嬉しいです。
クロスパルにいがた 多目的ルーム2
詳細は こちら
桜が見頃な4月末に開催します。
出演は西村 真里子(アドビ システムズ)ほか
詳細は こちら
居宅を改造した「和」テイストの会場、ちおん舎にて開催(椅子でなく座布団です)
ゲストはミキチョクシ(ペタピット)ほか
ちおん舎(京都)
詳細は こちら
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。このようにColdFusionの導入が増え続けている理由としては、生産性の高さのほかにも、Flashとの親和性の高さも大きな要素として挙げられます。その長所をさらに伸ばすために、昨年秋に発表された新バージョンColdFusion 9では、RIA開発に関する大幅な機能強化が施されています。
Flexアプリケーションに設定できるキーボードショートカット
~第4回 開発環境と本番環境の切り替えでハマらない方法~
アドビストア 冬のサンクスキャンペーン
お電話で簡単な3つのアンケートにお答えいただいたお客様、または、新規に アドビストアメールにご登録(無料)いただいたお客様へ、パッケージ製品を ご購入価格に合わせて、3,000円〜15,000円OFFでご提供
までご連絡ください。
現在開発中の Flash Catalyst の最新ビルドを使い、アドビの開発チームにフィードバックを送るプレリリースプログラム(日本語)に参加しませんか
(メールに氏名、氏名(ローマ字)、会社名をご記載ください。未だに「Flash=SEOに不利」という固定観念を持っている人がいますが、それは間違いです。適切な使い方をすれば、SEOに有利に働くこともあるのです。本記事では、SEO業界の先駆者である住太陽さんに、SEOの視点で見るFlashの使い方・使いどころを解説していただきます。
ワンパクの「もっと使いこなしてみよう
近藤&杉山の師弟コンビの掛け合いも今回で最後となりました。最終回に取り上げるのは「拡張機能」です。拡張機能をインストールすれば、Dreamweaverに新たな機能を追加したり、自分好みにカスタマイズすることができます。
大重美幸の「これ見落としてませんか
0」 第6回 柔軟・多彩・高速な画像処理を実現するシェーダーフィルタ
そもそもシェーダーフィルタをご存じですか
単なるフィルタの種類ではありません。シェーダーフィルタを使えば、様々な画像処理が可能となります。
柔軟で多彩な高速シェーダーフィルタを体験してみましょう
小野田智の「世界の制作会社からコンニチハ
アクシデントが発生
予定のオーストラリアで取材できず、スケジュールもあり、次の訪問先であるアラブ首長国連邦(UAE)へ
今回は、今回はオーストラリアとアラブ首長国連邦のネット事情をお届けします。
お客様よりお寄せいただくご質問や弊社で確認している製品の不具合情報を掲載
FITCツアー他、Flashを中心にIT塾、大阪開催のハンズオンセミナー等、年度末を迎える皆様に注目の最新情報をお届けします。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
ワンパクの「もっと使いこなしてみよう
大重美幸の「これ見落としてませんか
第6回柔軟・多彩・高速な画像処理を実現するシェーダーフィルタ
小野田智の「世界の制作会社からコンニチハ
Flashコンテンツを提案して、SEOの観点から一刀両断されたことはありませんか
未だに「Flash=SEOに不利」という固定観念を持っている人がいますが、その捉え方は誤っています。適切な使い方をすれば、SEOに有利に働くこともあるのです。本記事では、SEO業界の先駆者である住太陽さんに、SEOの視点で見るFlashの使い方・使いどころを解説していただきます。始めに述べておきたいことがあります。それは、SEOにとってFlashは、テクノロジー単体としては不利に働くことも有利に働くこともない、ということです。使い方によってはSEOに不利になることもありますが、正しく使えばSEOを補強することも可能です。この記事では、SEOにおけるFlashの使い方・使いどころについて、以下の4つの視点から解説します。
検索意図によってはフルFlashサイトも検索可能
テキストとFlashを併用したコンテンツで利便性を向上する。
サイト内のリンク構造とFlashナビゲーション
リッチコンテンツの魅力をSEOに活かす。
検索意図によってはフルFlashサイトも検索可能
フルFlashサイトと検索エンジンの相性は今のところあまり良好ではない、ということはよく知られているとおりです。しかし、ユーザーの検索意図によっては、フルフラッシュによるサイト構築が問題にならない場合もあります。
まず、検索ユーザーの意図には大きく分けて次の2とおりがある、ということを確認しておきましょう
情報探索を意図した検索(一般的な語句をキーワードに使う)
ナビゲーションを意図した検索(サイト名やコンテンツ名などの固有の語句をキーワードに使う)
上記1の、情報探索を意図した検索に対しては、検索結果にフルFlashサイトを露出するのは難しいものです。しかし2の、特定のサイトやコンテンツに到達するためのナビゲーションを意図した検索においては、フルFlashサイトと検索エンジンの相性は問題になりません。サイト名やコンテンツ名で検索した場合、その対象のサイトがフルFlashで構成されていたとしても、ほとんどの場合きちんと目的のサイトやコンテンツは検索結果に表示されます。
以下の例を見てみましょう
検索結果にフルFlashサイトが表示される例
確認のために付け加えておくと、特定のサイトやコンテンツにアクセスするためのナビゲーションとして検索エンジンを使うという行動は、現在では極めて一般的なものです。
検索キーワードのランキングを見れば、上位にランクインしているキーワードの大半は特定のサイト名であり、ナビゲーションを意図してサイト名で検索するという行動がご理解いただけることでしょう
Japan が公表している検索語ランキングの総合上位ですがほとんどすべてが特定のサイトを表すキーワードで、ユーザーは調べ物と言うよりは次のサイトへの移動を意図していることが分かります。会社名や商品名、サービス名など、固有のブランド名での検索だけを想定するような場合には、フルFlashサイトでも検索エンジンからの導線を得ることが可能です。クチコミとメディアミックスを中心としたブランディング重視のプロモーションであれば、Flashの使用をためらう理由はありません。あとは十分な数の被リンクさえあれば、ナビゲーション目的で検索するユーザーのトラフィックを損失することはありません。テキストとFlashを併用したコンテンツで利便性を向上する。一般的な語句を使った検索、つまり情報探索を目的とした検索において、検索結果での露出を高めたいという場合には、残念ながらフルFlashコンテンツは向きません。情報探索を目的とする検索の検索結果で露出するためには、テキストによる情報提供が欠かせないからです。しかしこの場合も、Flashを使ってはいけないということはありません。HTML内に十分なテキストコンテンツがあれば、検索エンジンはそれを評価します。そこにFlashコンテンツが埋め込まれていても、それをマイナスに評価することはありません。むしろ、Flashコンテンツが含まれていることがユーザーの利便性を高めるようなケースであれば、情報探索に対応したページであっても、積極的にFlashを使用すべきです。ユーザーが探している情報を提供する手段として、アニメーションなどの動画を使用することが適切なケースは多いものです。
例えば、アプリケーションや機器などの操作手順を説明するような場合には、文字や静止画だけの説明よりは、動画と音声による説明を加えたほうがより親切なものになるでしょう
こうしたケースでは、Flashのようなテクノロジーの活用はユーザーのニーズに適合します。
Flashを使用することで説明を分かりやすくしている例
政府公報オンラインの「救命処置とAEDの操作方法」というコンテンツではページ遷移後に全画面のFlashを用いてAEDの操作方法を説明しています。
これなどは、AEDの操作方法を検索しているユーザーにとって価値の高いコンテンツの好例と言えるでしょう
なお、情報探索を目的としたユーザーに対応するページにFlashを使用する場合、注意したいことがあります。それは、一般的な語句での検索結果からページにアクセスしたときに、最初に見える部分に大きなアニメーションがあると、直帰率が上がってしまう傾向が見られる、ということです。この傾向は、アニメーションがイメージ重視のものであったり、ロード時間の長いものであったりすると、より強まります。情報探索を目的としたユーザーを想定する場合、ページ内に埋め込むFlashは必要以上に大きく目立つ配置にしないようにするか、どうしても大きく表示したい場合には、先に紹介した「救命処置とAEDの操作方法」のようにページ遷移後に全画面で表示する、ということも検討してください。いずれにしても、情報探索を目的とするユーザーを検索経由で集客することを考える場合には、Flashの利用はユーザーの利便性を向上する意味で必然性のあるものに集中するようにし、十分なテキストコンテンツとともに使用する、というのが適切なFlashの活用法だということです。
ユーザーのニーズに合致した形で使用すれば、SEOを行う場合であっても、Flashはマイナスになることはなく、むしろ活用することによってコンテンツの価値を高めることにつながるでしょう
サイト内のリンク構造とFlashナビゲーション
SEOの内部施策では、サイト内のリンク構造を特に重視します。これは、検索エンジンロボットがサイト内のリンクを辿るのを容易にすることでインデックスをより確実なものにするという意味があるほか、サイト全体で保持しているリンクポピュラリティをそれぞれのページに適切に再配分するという意味でも重要なものです。もちろんユーザーに対しては、ユーザーが求めるページへの適切な移動手段を提供するというナビゲーションとして重要なものです。ここで注意したいことは、Flashによるサイト内ナビゲーションの提供です。サイト内ナビゲーションをFlashで行ってもユーザーに対しては何ら問題ありませんが、SEOを行う上では少々の問題がまだ残ったままになっている、ということです。もちろん、Flashによるナビゲーションと検索エンジンの相性の問題の中でも、既に解決されたものもあります。以前であれば、検索エンジンはSWFファイル内のリンクを正確に辿ることができませんでしたが、この問題はAdobe、Google、Yahooの相互協力により現在ではほぼ解決されており、ページをインデックスするだけならばまず問題は発生しません。
XML Sitemapsを併用すれば、ほとんどの場合インデックスは確実に行われるでしょう
現在Googleでは既に、SWFファイルだけを対象とした検索もサポートされている。
上は「検索オプション」の画面で、ここで「ファイルタイプ」に「
swf」を選べばFlashだけを検索対象にすることができます。世界中の250ニンジャについてのFlashが検索結果に表示されています。ただ、問題が残っているのは、リンクポピュラリティの再配分やアンカーテキスト連関です。検索エンジンのアルゴリズムは私たち外部の人間には明らかにされていませんので、あくまでも外部からの観察によって判断しているだけですが、現在のところ、テキストや画像による通常のHTML上のリンクと、SWFファイル内に設定されたリンクでは、まったく同様の扱いにはなっていないようです。
サイトへの集客手段のうち、SEOをどれだけ重視するかはサイトによって異なりますが、SEOを重視する割合の高いサイトにおいては、現在のところサイト内ナビゲーションにFlashだけを使用することは避け、通常のHTMLによるリンクと併用するか、または通常のリンクだけを使用することが、現時点では最良の解となるでしょう
リッチコンテンツの魅力をSEOに活かす。現在のSEOにおいて最も重要なことは、どれだけ多くの質の高い被リンクを獲得するか、ということです。数多くの質の高い被リンクを獲得することによって、サイト全体のリンクポピュラリティと信頼度が高まり、サイト内のすべてのページが検索結果に露出しやすくなる効果が得られます。このことから、SEOを重視するサイトでは、被リンクを獲得するための様々な戦略を実行しています。その中でも特に多くのサイトに採用されているのが、バイラルコンテンツと呼ばれるものです。バイラルコンテンツとは、ユーザーのクチコミによって話題になるように設計されたコンテンツで、ブログやTwitterなどのミニブログなどのようなソーシャルメディアを通じて認知を拡大します。Web上でのクチコミの伝播は、そのプロセスの中でほとんど常にリンクの生成をともないます。ブログでの紹介、ミニブログでの報告、といった形でバイラルコンテンツへのリンクが生成され、人も検索エンジンもそのリンクを参照するのです。現在のSEOでは、バイラルコンテンツの作成ほど重要かつ効果的な施策は存在しないと言ってもいいほどです。バイラルコンテンツの内容としては、ニュース、ジョーク、アニメ、ビデオ、ハウツー、ゲーム、占いなどが代表的です。中でもアニメ、ビデオ、ゲームについては現状ほぼすべてのコンテンツがFlash Player を通じて視聴されています。またWeb公開用のアニメとゲームについては、Flashはまさに最適なオーサリングツールです。
SEO業者が自社のバイラルコンテンツとしてFlashゲームを制作
上の2点はいずれも、京都でWeb制作とSEOを手がける会社による自社のマーケティングのためのバイラルコンテンツです。このキャンペーンは確実な成果を上げ、数多くの被リンクの獲得に成功しています。このように、SEO事業者ですら自社マーケティングにFlashコンテンツを活用しているのを見れば、「Flashを使うとSEOに良くない」などというのが単なる迷信に過ぎず、現実はその逆で、上手く使えばFlashはSEOの役にも立つ、ということがよく分かると思います。そもそもこの記事を書くことになった理由は、SEOへのマイナス影響を恐れてFlashの提案を躊躇してしまう制作会社や、制作会社からのFlashの提案を同様の理由で却下してしまうクライアントが未だに存在するとのことで、そうした方々に対して、もう少し認識を現状に近づけていただきたい、という気持ちからでした。
ここまでの内容をリストにまとめてみましょう
フルFlashサイトでも、ナビゲーション目的の検索であれば問題なく対応できる。情報探索目的の検索に対しては、テキストとFlashを併用する。表示面積が大きく内容の乏しい動画を情報探索者に見せると直帰率が有意に上昇してしまう。テキストによる説明を補完するFlashコンテンツは、情報探索者の利便性を高める。サイト内のナビゲーションはできる限りFlashによるものは避けるか、HTMLリンクと併用する。
SWFファイル上のリンクからの参照重要度(リンクポピュラリティ)の扱いは現状不明
バイラルコンテンツで被リンクを集めるSEO手法においては、Flashコンテンツは有力な解決策になる。これらは特に、目新しいことではありません。しかし、もしみなさんが制作会社で、クライアントの偏ったSEO知識のせいでFlashの提案に難航しているというような場合には、ここまで述べてきたそれぞれを相互に理解することによって、提案がスムーズになるかもしれません。お役に立つことができたら幸いです。
SEOソリューションズ代表取締役を経て、現在ボーディ代表取締役
執筆、講師、Webサイトリニューアル時にまとめて施策する形でのSEO業務も扱う。2002年から運営してきたSEO情報サイトを最近リニューアルした。日本初のSEO書籍の著者でもある。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
ワンパクの「もっと使いこなしてみよう
今月号の記事
ワンパクの「もっと使いこなしてみよう
大重美幸の「これ見落としてませんか
第6回柔軟・多彩・高速な画像処理を実現するシェーダーフィルタ
小野田智の「世界の制作会社からコンニチハ
株式会社ワンパクの近藤&杉山の師弟コンビがDreamweaverの覚えておきたい便利な機能や、見落としていた機能などをお届けする本連載
今回で最終回となりました。拡張機能をインストールすれば、Dreamweaverには搭載されていない機能を加えることができ、自分好みにカスタマイズすることができます。そして、「杉山のこれ知ってます。」のコーナーでは、ダミー画像を簡単に用意できるイメージプレースホルダーと、ファイル操作を制限できるクローク機能について紹介します。
入れておくと便利
近藤:なんだ。
ただでさえ便利なDreamweaverが、拡張機能をインストールすると、ますます便利になっちゃうんですね
近藤:そうだな、その名のとおり、Dreamweaverに搭載されていない機能を加え拡張することができるからな
インストールされた拡張機能の一覧が表示される。インストールされた拡張機能のオン・オフ切り替え、追加・削除の管理をする。近藤:どんな拡張機能をインストールしている。
杉山:あとは、企業や個人のかたが制作されて自身のサイトで配布してくださっているものもインストールさせて頂いてますよ
【HTML5で新規追加されたタグのコードヒント表示】
※今回紹介しました拡張機能のインストールとご使用は、それぞれの制作者の説明をよくお読みのうえ、ご自身の責任においてご利用ください。
意外と難しくないってホント
作ってみよう拡張機能
杉山:みなさん、便利な拡張機能を作成して公開してくださってありがたいですよね~
でも、作るのって難しそうだなぁ
近藤:そうだな、難しいように感じるとは思うが
実は、それがそうでもないんだぞ
かなり細かく書いてある。
近藤:作成時はそのリファレンスを参考にするといいぞ
他には、同じくヘルプ内の「拡張ガイド」も参考になるぞ
ここから作成するのかな
作成しようとすると、拡張子が「
mxi」のファイルを参照しようとしますよ
近藤:mxiファイルは、拡張機能の名称・開発者の名前・対応するアプリケーションやそのバージョン・使用するファイルなど、「拡張機能の情報」を記述したファイルだ。
杉山:使用するファイル
近藤:「拡張機能の情報」を記述したmxiファイルとは別に、Dreamweaverに実行させたい「処理の内容」を記述したファイルも必要だから、どのファイルを参照するのか明記しておくんだ。
処理の内容を記述したファイルとmxiファイルの準備ができたら
近藤:そうだ。読み込まれたmxiファイルは、mxpファイルとして生成される。
杉山:作り方の流れがわかったことだし、何か拡張機能を作ってみるぞー
杉山の「これ知ってます。
ダミー画像ラクラク作成&不要ファイルのアップをロック」
杉山:制作時に、画像データがすべてそろっているとは限りませんよね
でも、レイアウトの確認をしたいときなどは、ダミーの画像をあてておいたりしますが、ダミー画像をわざわざ別のソフトで作ったりしなくても、Dreamweaver上で用意することができます。
名前・幅・高さ・代替テキストを入力
デザインビューで確認ができる(ブラウザでのプレビューはできない、一時的な確認方法)
杉山:続いては、クロークについてです。ローカルサイト内で、htmlファイルやcssファイルのほかに、素材ファイルである。flaを一緒に管理している場合、ファイルの同期をかけたときなど、素材ファイルをアップロードしてしまう可能性も出てきてしまいます。アップロードする必要のないファイルは、クロークを実行しておけば、PUTやGETなどの操作から除くことができます。クロークはファイル単位・フォルダ単位で実行することができます。
[サイトの管理]→[クローク]→[クロークを使用可能にする]にチェックをいれる([次で終わるファイルをクロークする]にチェックをいれるとクローク対象のファイルを拡張子で指定できる)
ファイルパネルで、該当フォルダもしくは該当ファイルを選択し、右クリック(Mac OSはCommandを押しながらクリック)から[クローク]→[クロークの実行]を選択 クロークが設定されたフォルダやファイルには赤の斜線が表示される。杉山:クロークを実行したファイルやフォルダは、[ファイル]パネルから選択して直接操作をすれば、その操作は反映されます。
連載を振り返って
近藤:それでは、おさらいを兼ねて今までの連載を振り返ってみようか
1回目は、「作業環境整備」についてだったな
杉山:はい、自分の使いやすいようにレイアウトした作業環境を保存しておけるって知らなくて、それまでその都度レイアウト変更してたので、無駄な手間をかけてたなーって
近藤:デフォルトのままでももちろん使えるが、自分にとって使いやすいようにカスタマイズすれば、それは作業効率アップにつながるからな
杉山:2回目は、うまく使えるようになりたかった「ライブラリ/スニペット/テンプレート」についてでしたね
その後の作業がだいぶ早くこなせるようになりました。
近藤:2回目で紹介した機能はDreamweaverの中でも基本であり、絶対覚えておかなければならない機能だな
これらの機能を使いこなせているのとそうでないのとでは、作業時間・クオリティなどに大きな差がでてしまう。テンプレートの「オプション領域」機能をうまく使って、テンプレートプロパティで少し設定をすれば、あとはテキスト入力・画像挿入程度でページが作れる、そんな状態を目指して試行錯誤中です。
近藤:連載では、テンプレートの機能の一部についてしか書けなかったが、「オプション領域」以外にもたくさん便利な機能はあるぞ
どの機能を使用すれば一番効率的か考えて使い勝手のよいテンプレートを作れるようになるんだぞ
3回目は「ショートカットキー」についてでしたね
ショートカットキーは使っているつもりでしたが、知らなかったショートカットキーもありました。
近藤:新しく覚えたショートカットキーはしっかり使えているか
やっぱり、今やっている作業に必要のない箇所はたたんでしまえば、すごくスッキリして作業しやすいですね
近藤:ショートカットキーを使って作業しているとなんかカッコイイしな
4回目は「正規表現を使った検索・置換」についてでしたよね
正規表現は、ちょっと敬遠していたんですよ、難しそうで
つきつめるにはかなり奥が深いが、よく使いそうな検索・置換パターンと、そのパターンで使うメタ文字を覚えて、少しずつ慣れていくことだな
杉山:はい、「()」で括った文字列をグループ化して記憶しておき、「$n(nは任意の数字)」で参照するというのは、ものすごく便利でした。
近藤:今後、正規表現を使っていくうちに、他にも便利な検索・置換パターンを見つけておくといいぞ
見つけたら、クエリに保存しておけば、後からすぐに呼び出して使うこともできるな
杉山:そして連載最後の今回は拡張機能についてでした。
もともと便利な機能が搭載されているDreamweaverですが、その便利度をますます上げられるなんてうれしいですよね
近藤:そうだな
連載1回目から今回まで、作業効率をアップさせるために使いこなすべき機能を取り上げてきたんだが、キサマもかなり効率アップができているようだな
もちろん、まだまだ学ぶべきところはありますが、今回の連載で取り上げてきたことはしっかりと身に付いてきたと思っています。
近藤:そうだな、Dreamweaverを使いこなせるようになる、それももちろん大切だが、それ以外のことにも目を向けていないといけないぞ
杉山:それ以外というと
近藤:ちょくちょく目にしているかもしれないが、HTMLの大きな改訂版としての「HTML5」、2012年に正式に勧告されるなんて言われているな
そのほか、まだまだ勉強しておかなければならないことばかりだ。
まだまだガンバラネバ
近藤:すべて覚え、そして使いこなせるようになるのが理想だが、なかなか難しいと思う。だからみんなで補完しあったりするんだと思うが、Dreamweaverを使いこなすことでもそれらを補完することもできる。
新しいバージョンがでるたびにより便利になり、様々な機能が追加されてきたDreamweaverだから次のバージョン(CS5)にどんな機能が追加されるか楽しみだな
本当に楽しみです。
近藤:そろそろ、真っ白な灰になりそうなので、この辺で
近藤&杉山:連載第5回目までお付き合いくださいまして、ありがとうございました。
エッジニュースレター連載記事 : ワンパクの「もっと使いこなしてみよう
第1回 まずはマイワークスペースの整備、そして作業開始
第3回 蝶のように舞い、蜂のように刺せ、ショートカットキー
第4回 正規表現を使った検索・置換にチャレンジ
杉山由起子(すぎやまゆきこ)
いくつかの制作会社に在籍した後、1PAC
師匠近藤のもと、主にマークアップを担当しつつ、デザインもこなせるようになろうと日々七転八倒中
近藤将範(こんどうまさのり)
の設立に参画する。主にテクニカルディレクターとしてコーポレートサイト等の設計・制作に携わる。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
0」第6回 柔軟・多彩・高速な画像処理を実現するシェーダーフィルタ
大重美幸の「これ見落としてませんか
第6回 柔軟・多彩・高速な画像処理を実現するシェーダーフィルタ
今月号の記事
ワンパクの「もっと使いこなしてみよう
大重美幸の「これ見落としてませんか
第6回柔軟・多彩・高速な画像処理を実現するシェーダーフィルタ
小野田智の「世界の制作会社からコンニチハ
そもそもシェーダーフィルタとは何でしょうか
フィルタの種類が1つ増えただけ
そういう風に思っているなら大間違い
シェーダーフィルタはビットマップ、ベクトル、FLVと表示オブジェクトに適用でき、複雑なエフェクトもリアルタイムで処理する実行速度の速さが特長です。
柔軟で多彩な高速シェーダーフィルタを体験してみましょう
シェーダーフィルタを使う。話の発端は前々回の宿題のFLVの画像処理はシェーダーフィルタが使ってあるということにさかのぼります。シェーダーフィルタを利用すると様々な画像処理が可能になります。
ここでもう1つシェーダーフィルタの例を見てもらいましょう
次のswfにマウスカーソルを乗せて動かすと写真が渦を巻きます。
このような画像処理を高速で行えるのがシェーダーフィルタの特長です(このムービーのスクリプトは後述します)
マウスカーソルを動かすと写真が渦を巻きます。この映像効果にシェーダーフィルタを使っています。pbkという既存のプログラム(カーネル)を使います。]を実行してフィルタを適用するイメージファイルを読み込み、[Run]ボタンをクリックしてプログラムを実行します。pbkを開き、イメージファイルを読み込みます。右の欄に表示されたスライドバーをドラッグすると、プログラムで使っているsizeパラメータの値を変更でき、その処理結果が即座に左の画像に反映されます。fig3 sizeパラメータのスライドバーをドラッグして変更すると、その結果がすぐに反映します。]を実行して、このフィルタをFlashで利用できるように書き出します。
ファイルの拡張子は
pbjのファイル名で書き出します。
シェーダーフィルタの作成とフィルタの適用
では作成したPixel Benderのpbjファイルを使ってムービークリップインスタンスにシェーダーフィルタを適用してみましょう
pbjを読み込みます。データの読み込みが完了したならばShaderクラスのshaderインスタンスを作り、そのbyteCodeプロパティに読み込んだpbjファイルのデータを設定します。最後にムービークリップインスタンスphotoのfiltersプロパティに設定すればフィルタが適用されます。pbjファイルを読み込み、シェーダーフィルタを作ってムービークリップインスタンスに適用します。赤色に見えるのは赤のステージカラーが隙間から見えているからです。
シェーダパラメータの設定
この値は配列として格納されているので、1個の値でも[3]のように配列で値を設定します。
最初のマウスで渦を作るサンプルではtwirl
ActionScriptでは最初の3つのパラメータの初期値を設定し、マウス移動のイベントに合わせて渦の中心座標を指定するcenterパラメータの値がマウス座標になるようにしています。マウス移動に合わせて画像に渦巻きを作ります。//マウス移動イベントに合わせて変形の中心座標をマウス座標に設定する。ビットマップデータにシェーダーを適用する。前回、フィルタは表示オブジェクトだけでなくビットマップデータにも適用できることを説明しましたが、シェーダーフィルタもビットマップデータに適用できます。pbjを使ってシェーダーフィルタを作り、ライブラリで書き出し指定しているビットマップIMGから作ったビットマップデータbmpdataに適用しています。このときに画像を横4×縦3に分割し、千鳥格子のように交互にsizeパラメータを4または2にしたフィルタを合成しています。ビットマップイメージにシェーダーフィルタを掛けて合成しています。//書き出し位置の設定を行う。//シェーダーフィルタを作る。fig7 ビットマップデータに千鳥格子のようにシェーダーフィルタを掛けています。緑色に見えるのは緑のステージカラーが隙間から見えているからです。
前回、前々回の宿題の答え
最後に前回、前々回の宿題の解答です。
前々回の解答はすでに今回の記事の説明で十分ではないでしょうか
次のスクリプトがシェーダーフィルタを掛ける部分です。
そして、前回の宿題は写真の輪郭までぼけているのはなぜ
という問題でした。その答えは写真のビットマップデータではなく、ビットマップにフィルタが掛けられているからです。この説明でピンとこない人は、ビットマップとビットマップデータの違いについて復習してください。次がbmpにブラーフィルタを掛けている部分です。ビットマップbmpにフィルタを適用します。
エッジニュースレター連載記事 : 大重美幸の「これ見落としてませんか
第2回 外部 swf ファイルのシンボルを利用する。第3回 配列の値の並べ替えをマスターする。第4回 FLV をウィンドウ/画面全体に表示する。
第5回 スクリプトでフィルタを適用する方法
(おおしげよしゆき)
日立情報システムズ、コミュニケーションシステム研究所を経て独立
執筆、講師、ソフトウェア開発を行う。
趣味はサーフィンとジョギング
著著は約50冊
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
小野田智の「世界の制作会社からコンニチハ
今月号の記事
ワンパクの「もっと使いこなしてみよう
大重美幸の「これ見落としてませんか
第6回柔軟・多彩・高速な画像処理を実現するシェーダーフィルタ
小野田智の「世界の制作会社からコンニチハ
前号から始まった、Flashクリエイターの小野田智さんによる世界の制作会社訪問記
第2回目はオーストラリアです。という予定でしたが、何やらアクシデントが発生したようです。
旅に不測の事態はつきもの
そうしたことも含めて、読者の皆さんと共有していきたいと思います。今回は、オーストラリアとその次の訪問先であるアラブ首長国連邦(UAE)のネット事情をお届けします。いきなりですが、ごめんなさい。連載2回目なのにいきなりやらかしてしまいました。前回の「来月は真夏のオーストラリアからお届け予定です」という予告どおり、オーストラリアのシドニーにある某エージェンシーとコンタクトをとっていたのですが、直前になって先方と音信不通になってしまいましてインタビューをすることができませんでした。というわけで、今回はそのオーストラリアと現在滞在しているアラブ首長国連邦(UAE)のドバイの雑感やネット事情をやや多めにお送りいたします。完全に英語圏なので高級デパートやお洒落カフェなどでのデザインのレベルは安定しています。洋風のデザインはまさに本流で、特にメルボルン中心部の石畳とレンガの路地裏はかなり雰囲気が出ていました。あまりのダメな見本っぷりに思わず苦笑してしまうことも多々ありました。ネット接続は、日本や前回の香港に比べるとだいぶ割高です。オーストラリアの場合、人口密度がかなり低く、高額になってしまうインフラの敷設コストがそのまま消費者に影響しているようで、ADSLなども日本のように無制限に利用できるわけではありません。毎月数ギガのダウンロード制限が決まっていて、それを超えると一気に回線速度がアナログレベルまで落ちるのだそうです。日本は世界的に見ても特にブロードバンドが安い地域というのは知っていましたが、こうやって海外の実情を体感してしまうと、日本って凄いなぁとあらためて感心してしまいます。ちなみに旅行者ならば、宿のネット接続やネットカフェ(1時間3AUD、250円程度)を使用することになるでしょうが、宿で「ネット接続有」とだけ謳っている場合は有料のことが多いので注意が必要です。また、空港や主要都市部では有料の公衆Wi-Fiが配備されており、場所によって異なりましたが、1時間あたり5~10AUD程度で使用することができました。
後は裏技的かもしれませんが、マクドナルドに行くというのもアリかと
オーストラリアのマクドナルドでは、Wi-Fiが無料で使用できます。SkypeやiPhoneアプリのようにプロトコルで制限を受けているものもありそうですが、基本的なブラウジングやメールのやり取りは問題なくできました。日本とは違って、電源までは供給してくれないので注意が必要ですが、短期の滞在で軽くメールとニュースのチェックをしたい程度ならこれで十分な気がします。次に向かったのは、アラブ首長国連邦(UAE)です。シドニーからロンドン経由で到着という無駄に長距離なフライトで降り立ったドバイ、久しぶりの「外国」感がありました。
当然のことながら辺りはすべてアラビア文字
Googleの検索結果も自動でアラビア表記に変わっているので、右揃えの検索結果と言う不思議な表示がされています。ただし意外と英語の普及率は高そうなので基本的なコミュニケーションに困ることはなさそうです。また、初めてのUAE入国だと徹底的な入国審査が行われることがあるらしく、僕の場合も個室に閉じ込められ、すべての荷物を開けて説明をし、1時間くらいでようやく解放してもらいました。
向こうも悪意を持って検査しているようには見えなかったのですが、これはちょっときつかったですね
気になるネット接続ですが、ドバイの中心地では半国営企業「etisalat」が展開しているWi-Fi網に30分単位でサインアップできます。またドバイモールという現地で一番大きなショッピングモールでは無料のWi-Fiサービスがありました。しかも、さすが高級ショッピングモール、いたるところに座り心地の良いソファーが配置されていて、iPhoneで快適にブラウジングやメールのチェックができました。ノートPCを開きながら何やら本格的に作業をしている猛者もちらほらと見かけます。また、今回の滞在で初めて知ったのですが、UAEでもネットに対する検閲が入っているようで、フィルタリング対象のサイトにアクセスすると下の画像のようなページが代わりに表示されてしまいます。ブロック基準についてetisalatのサイトにPDFがあり、中身を見るとアダルト系や反イスラム、反社会的なコンテンツを遮断するのが大きな狙いのようです。独占企業のetisalatの利益に関わるからだと言われている)まで閉じられているのには参ってしまいました。
興味本位で日本のアダルトサイトにもアクセスを試みたのですが完全にブロック
うーん、恐るべしフィルタリングシステム
今回紹介した2ヵ国を含め、現在5ヵ国ほど滞在していますが、街で見かける携帯電話はだいたい同じです。
やっぱり日本って携帯電話に関しては完全に違う文化圏にいるんですね
特にUAEではiPhoneが大ブームらしく、多くの若者が携帯でネットを閲覧しているようです。詳細は次号に掲載予定ですのでご期待ください。
どの国でも無料でネットに接続するあの方法
最後にネット接続に関する奥の手を紹介します。実は、ほぼ世界中どこにいても無料でネットに接続できる端末があるのです。あくまでも試験サービスという扱いですが、AT&Tのローミング網に無料で接続しKindle Storeでのショッピングだけでなく普通のブラウジングまでできてしまうのです。日本語に対応していないのが大きな問題ですが、Twitterでつぶやいたり、Gmailを閲覧したりとひととおりのことはできました。何かしらの非常事態にはかなり役立ってくれそうな気がしています。実はすでにインタビュー自体は終わっていまして、今回紹介したフィルタリングの詳細やモバイル事情、ドバイショックによる業界に対する影響などいろいろと話を聞いてあります。個人的にはこの後エジプトのカイロからトルコのイスタンブールまで陸路で移動する予定で、途中でヨルダンやレバノンのエージェンシーにも立ち寄れたらいいなと思っています。
旅の工程はTwitterで実況中継しつつブログにもまとめていますのでよかったら以下のリンクからアクセスしてくださいね
また、今後行って欲しい会社のリクエストも募集中です。特に東欧方面などありましたらお気軽にご連絡ください。
(おのださとし)
オーストラリアへの語学留学などを挟みながら東京でWebデザイナー/Flashクリエイターとして働くこと数年
2009年末より、長年温めていた世界一周旅行計画をついに実行に移し、現在も旅行中
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。
今月号の記事
ワンパクの「もっと使いこなしてみよう
大重美幸の「これ見落としてませんか
第6回柔軟・多彩・高速な画像処理を実現するシェーダーフィルタ
小野田智の「世界の制作会社からコンニチハ