お手伝いさせていただいたコーポレートサイト「amanagroup INDEX」がYahoo! JAPAN インターネットクリエイティブアワードのHTML5賞を、受賞しました。

関係者のみなさま、おめでとうございます＆お疲れさまでした。HTML5に挑戦する最高の機会にお誘いくださいまして、本当にありがとうございました。

ちなみに今月のWebDesigning12月号(2011)の特集「先端事例に学ぶjQueryのテクニック」でも掲載されています。もし興味がありましたらそちらもチェックくださいませ。

• Web Designing 連載記事と特集掲載のお知らせ

以下、クレジットです。

produced by amanaholdings inc.
Created by amanainteractive inc.
Creative Direction: Sachiko Oyamada
Art Direction & Design: Koji Nishida (RAKU-GAKI), Tomomichi Ikeda (ungraffi)
Design: Hiromi Taketa
Technical Direction & Program: Yasunobu Ikeda (ClockMaker)
Direction: Eiji Murakami, Sachiko Oyamada
Produce: Takayuki Yukawa, Manabu Hashiguchi

昨年の参加に引き続いて、今年も現地からTwitterでレポートする「MAX野郎 Tweetチーム」というのに参加しています。期間中は、私のTwitterアカウントや特設のADC Loungeから現地の最新情報をリアルタイムで投稿していると思うので、気になる方はぜひチェックしてみてください。

今年はFlash Player 11にAdobe AIR 3、HTML5と今まで以上に気になるセッションが多いのが楽しみです。

向こうでお会いするディベロッパー、メディアの皆様、よろしくお願いいたします。

実は随分前から運用していたのですが、当ブログのbot用のTwitterアカウントがあるので紹介します。FlashやHTML5関係で話題の情報を自動的にツイートするアカウントです。

• clockmaker_bot

当ブログのRSSで私がブックマークしたネットの記事を配信していますが、思いの外、ブックマークをチェックしてくれている方が多いようで、よく「見てますよー」と反響を頂いています(たいしたことをブックマークしていないのに、ありがとうございます)。botアカウントでは上記のブックマークしたネットの記事を中心に、Webデザイン関係の勉強会のレポートなどを自動配信しています。RSSよりTwitterをチェックすることが多くなったということであれば、こちらもチェックくださいませ。

Facebookにはアンケート機能があるのですが、Flash / ActionScript関係で集計した有益なアンケート結果がありましたのでシェアします。

ActionScriptでサーバーサイド(PHPやCGI等のAPI)とやり取りする際に、レスポンスにどのフォーマットを使いますか？

• XML : 71票
• JSON : 45票
• プレーンなテキスト : 13票
• AMF : 9票
• CSV : 12票
• swf のバイナリに直接変数書き込み : 2票 (※FlashLiteでのパラメーター保存の常套手段)

主なコメント

• JSONは直接AS3やJSのObjectとして扱えるので便利​。
• システムから吐き出す場合はJSONが多いです。手動で更新する​様な場合はXMLを使ってます。
• XML。クライアント自身が修正できるように極力わかりやすい表​記を心がけてますね。
• XML以外やったことありません。((((;゜д゜)))

ActionScriptのイベント引数をどの名前で付けていますか？

• e : 79票
• event : 27票
• evt : 11票

主なコメント

• FDのデフォルトがeだったので。。
• アドビのコーディングガイドラインに従っています。
• evtだったけど、ほとんど使わないのでeで放置になっていった​ね。

CS5.5買う？買わない？

• 買わない： 16票
• 様子見：13票
• 買う：4票

主なコメント

• 買うとしてもFlashだけかな
• CS6が発表されたタイミングで買おうかな。。
• 会社のチームメンバー全員に導入が決まりました！！
• 買わないつもりなのですが、それでも買ってしまうでしょ​うw

不況のさなか大変ありがたいことに、ここ連日、日に3〜4件のお仕事の相談を頂いています。ただ、そのほとんどがスケジュールが合わないために辞退(もしくは他の方を紹介)している状況です。稼働状況が見えないためこういったミスマッチが発生していると思ったので、数ヶ月間のスケジュール感がわかるようなページを作成してみました。

• お仕事の依頼について

相談の際には次の予定表と照らし合わせると相談可能かどうかがわかりやすいと思います。お仕事のご相談の際にはぜひ参考頂けましたらと思います。

書籍「ActionScript Beautifl Code」の刊行に伴い、「Beautifl」をリニューアルしましたのでお知らせします。Beautiflはwonderfl build flash onlineに投稿されたユーザーの力作をカテゴリー別に分類したActionScriptのギャラリーサイトです。Flashの表現例を探したりインスピレーションを得るのに便利なサイト、を目標に2009年8月から運営してきました。

今回のリニューアルの目標にしたのは「HTML5対応」。リニューアルしたポイントをいくつか紹介します。

マークアップ

もともとBeautiflはXHTML+JavaScriptによるFlashみたいなインタラクションのあるサイトでしたが、時代の流れに応じてHTML5+CSS3+JavaScriptのサイトに変更しました。HTML5に関してはマークアップレベルの話でsectionとかasideとかの新しいタグを使っています。

CSS3は画像を用意する必要がなく楽に実装できるのでグラデーションや角丸処理にいくつか使ってます。ただし、CSS3でグラデーションやドロップシャドウを利用すると描画負荷が高くなるので（これはFlashのGraphicsと同じ）、描画更新の高い部分はラスタライズした画像を使っています。

JavaScriptの工夫点としてこだわったのはカスタムスクロールバーのスムーズスクロールの演出です。スムーズスクロールはFlashの世界ではごく当たり前に実装されている演出のテクニックで、スクロールバーが動かすと加減速がついてコンテンツがスクロールするというものです。スムーズスクロールのためにはJavaScriptの最適化が必要なのですが、もともとブラウザごとのJavaScript実行速度に大きな開きがあり調整に苦労しました。

JavaScriptの実行速度がSafari 5、Firefox 4、Chromeが最速で、ついでIE9、大きく離れてFirefox3.6、ついでIE8という感じでした。プログレッシブエンハンスメントということで、最新ブラウザ（Safari 5やFirefox 4、Chromeの最新版、IE9）でのみスムーズスクロールが有効になるようにしています。

検索機能

Appleのサイトなどで実装されているインクリメンタルサーチをつけました。検索 バーに単語を入力すると、候補がつぎつぎと表示されるという仕組みです。このあたりはJavaScriptとサーバーサイド側(PHP+MySQL)で実装しました。実装方法はいろんなところで紹介されているので、特記するまでもないでしょうか。

プレビュー表示

今まで別窓で展開していたプレビュー表示を、サイト内で表示するようにしました。wonderflには幸いブログパーツが提供されていたので、それを動的に表示するようにしています。よりサクサク作品を見て回れるようになったと思います。

facebookページの開設

Beautiflユーザーからの提案でfacebookにページを開設しました。「Like!」ボタンをクリックしてもられればfacebookで新作登録時に通知されるようになります。

• http://www.facebook.com/beautifl

また作品はfacebook上から直接再生できるようになっています。再生ボタンをクリックするだけでサクっとその場で確認できます。これはRSSにYahoo!が提唱するMEDIA RSSというパラメーターを加えることで実装できました。

その他の改善点

• jQuery 1.6 対応
• 作品に「NEW」や「PICKS」などのラベルを表示
• ページングの不具合修正（ユーザーからの報告）

サービスの運営方針としてユーザーからの意見は出来る限り反映していこうというスタンスでやっていまして、今回のリニューアルも多くはユーザーからの提案のものでした。今後も同じスタンスで運営していこうと考えてますので、ご要望などがあればtwitterを通してお気軽にコメントいただければと思います。それでは引き続きBeautiflをよろしくお願いします。

おまけ：今回のリニューアルに伴い管理ツールとして使っているBeautifl登録用wonderflブラウザ(Adobe AIR製)をFlex 4.5にアップデートしました。Flash Platformを使えば自前で管理ツールを作れるので便利です。

昨年の11月から月月火水木金金で働いており、一月あたり400〜500時間ぐらい仕事に時間を費やしているような生活が半年ぐらい続いてました。特に4月は激務すぎて身体に不調がでたりしたのですが、予定していた僅かな勉強会の予定を全てキャンセルしたりしてなんとか乗り切った感じです。

ところで私のブログの投稿数は仕事の忙しさと反比例する傾向があります。2010年前半から長期案件が増えてきたこともありブログ投稿数が減っているのですが、やはり上述の生活を示しているかのように昨年の11月からほとんどブログに投稿できていません。グラフの前半部分（2009年4月まで）を見ると会社勤めのときのほうが自分の時間を確保できていたようですね。

さて、最近はFlash+FlexとHTML5+JavaScriptの案件を中心にやっているのですが、ブログに投稿していなかった技術ネタもたくさん貯まっているので、少しずつアウトプットしていこうと考えています。また「カス削除くん」や「Easing Generator」などアプリの要望をたくさん頂いていたので対応していきたいと思っています。それでは今後ともよろしくお願いします。

先日 W3C から HTML5 の公式ロゴが公開されましたが、Icon Generator に HTML5 風のロゴを作れる新機能を追加しましたのでお知らせします。Icon Generator は Adobe Creative Suite を始めとしたアイコンが簡単に作成できる Web アプリケーションです。作成したアイコンは Twitter のプロフィール画像や、ソフトウェアのアイコンとして利用されていることが多いようです。

Icon Generator は次のサイトにアクセスすることで利用できます。簡単な操作でアイコンを作成することができるので、ぜひともご利用くださいませ。

• Icon Generator

謝辞

HTML5 風のロゴの実装には次の作品を参考にさせていただきました。HTML5 のロゴなのに、Flash で実装するという不思議な関係性が面白いですね。

• HTML5 Icon Generator (paqさん)
• HTML5 logo (9reさん)
  

Android アプリや iPhone アプリのアイコンにも

ところで、Icon Generator は Android アプリや iPhone アプリのアイコン書き出しにも対応しています。もしアプリケーション開発者でしたら、ぜひともアイコンジェネレーターをご利用くださいませ。

関連記事

• お手軽にCS5風のアイコンが作れるIcon Generatorをリリースしました
• Icon Generatorができるまで〜制作レポート〜
  

Web業界が最も注目する一年に一回のイベント、Adobe MAX。今年のAdobe MAX 2010は10月末にて開催され、数多くのメディアやブログで最新情報が報じられました。Web業界にいる身としては、見逃すわけにはいかない情報ばかりなので、効率よくチェックできるようにまとめてみました。

メディアによってフォーカスしている部分が違ったりするので、出来る限りすべての記事をピックアップしています。行われたセッション/分野ごとに記事を分けていますので、見逃した記事があればぜひチェックしてみてくださいませ。

Adobe MAX 基調講演1日目レポート

米国ロサンゼルスの現地時間の10月25日に行われた基調講演。アドビCTOのKevin Lynch氏の講演によるメインイベントです。Web サイト、電子出版、ビデオ、エンタープライズアプリケーション、ゲームについて、数多くの技術が紹介されました。

• Adobe MAX 2010 – 基調講演 1日目
• 「マルチスクリーンの革命」に乗り遅れるな- CNET Japan
• 「タイムラインでHTML5コンテンツ作成を可能にする」：ITpro
• HTML5とjQueryに対応したWebアニメーションツール「EDGE」などを発表 － Publickey
• Adobe MAX 2010レポート 1日目 基調講演 – IxDGだより

締めにAdobe MAX参加者にはモトローラのスマートフォン(Android 2.2, DROID2)がプレゼントされることが発表されました。

Adobe MAX 2010 基調講演2日目レポート

2日目の基調講演は「Digital Living Room」と題された、アドビ社員がTV番組のパロディーを演じるパフォーマンスでした。新製品の紹介が巧みに盛り込まれており、Adobeの意気込みが感じられる素晴らしい発表でした。

締めにAdobe MAX参加者にはGoogle TVがプレゼントされることが発表され、大盛況のうちに幕を閉じました。

• Adobe MAX 2010 – 基調講演 2日目
• 「Adobe InMarket」や「HTML5とFlashをAndroidが仲裁」をあの番組のパロディで：ITpro
• アプリ開発もエンタメ気分で楽しもう! – Adobe MAX 2010 |マイコミジャーナル
• ショー形式で行われた2日目の基調講演、FlashとHTML5との関係、コンテンツのマネタイズの将来はどうなる：CodeZine
• Adobe MAX 2010レポート 2日目 ほんとにこれが基調講演？ – IxDGだより

Adobe MAX Sneak Peeks

アドビ社内で進行中の最新の製品開発への取り組みを紹介するセッションのSneak Peeks。実際に製品やサービスになるかはわかりませんが、プロトタイプを一足早くチェックできる内容です。FlashからHTML5に変換する技術などが発表されました。

• Adobe MAX 2010 – Sneak Peeks
• Adobe MAX 2010レポート 2日目 Sneak Peeks–最新技術をこっそり見せます – IxDGだより

Android / Google TV関連の記事

(写真は ITpro から)

基調講演での「マルチプラットフォームの革命が起きている」とのことで、今年のAdobe MAXではAndroidの紹介に力が入っていました。ブースではAndroidのスマートフォン/タブレットが多数展示され、数多くの開発者達は最新の端末をチェックしていました。

• Android 端末がずらり並んだAdobe MAX 2010、スマホにタブレットにGoogle TV – ニュース：ITpro
• Adobe、スマートフォン向け新広告フォーマットの策定へ – ITmedia
• Google TVをただでほしい？ Googleがデベロッパに10000台を無料でくれるって
• AIR for Android : Media Technology Labs (MTL) : メディアテクノロジーラボ　ブログ
• GoogleTV の開発Tips : Media Technology Labs (MTL) : メディアテクノロジーラボ　ブログ

電子書籍（Degital Publishing Book）関連の記事

Adobeは電子書籍に向けた取り組みにも力を入れており「Digital Publishing Suite」ベータの発表が行われました。

• Adobe、電子出版ソリューション「Adobe Digital Publishing Suite」を発表 – ITmedia +D PC USER
• デジタル雑誌制作でConde Nastが「Adobe Digital Publishing Suite」を採用 | マイコミジャーナル
• アドビ、新たな電子出版ツール「Adobe Digital Publishing Suite」発表 | マイコミジャーナル

HTML5/jQuery関連の記事

AdobeはFlashだけではなくHTML5/CSS3にも力を入れています。FlashとHTMLをともに使って、よりよいWeb体験を目指している姿勢や取り組みなどが紹介されました。

• アドビの HTML5・jQueryサポート最新事情 − ＠IT
• Flash とHTML5の関係、今後どうなる？–Adobe MAXで聞く – CNET Japan
• アドビ、Flashアニメーションを HTML5アニメに変換する技術をデモ 【@maskin】 : TechWave

エンタープライズ関連の記事

• 【イ ンタビュー】Adobeの考える「クラウド」戦略とは – Adobe MAX 2010 |マイコミジャーナル
• 「Adobe LiveCycle ES 2.5」がリリース、モバイル対応とコラボ機能を強化 | マイコミジャーナル

AIR 2.5 / InMarket 関連の記事

Adobe MAX 201o開催と同時に公開された、マルチプラットフォームのランタイム「Adobe AIR 2.5」と、アプリケーションマーケットの「Adobe InMarket」が発表されました。

• Adobe AIR 2.5 発表。アプリストア InMarket も登場へ
• 会場で日本人参加者だけにいち早く伝えられた「Adobe AIR」最新動向：CodeZine
• Adobe AIR 2.5 公開 – akihiro kamijo
• Flash Professional CS5 Extension for Adobe AIR 2.5 ベータ版公開 – akihiro kamijo
• アドビ、「Adobe AIR 2.5」発表。サムスンがTVに採用へ -AV Watch
• 「Adobe AIR 2.5」公開、テレビやモバイル端末にも対応 -INTERNET Watch
• GoogleTVの開発Tips : Media Technology Labs (MTL) ブログ
• AIR for Android : Media Technology Labs (MTL) ブログ

Flex SDK 4.5 / モバイル向けFlex “Hero” 関連の記事

Adobe MAX 201o開催と同時に、モバイル向けFlexフレームワークの「Flex SDK 4.5 Hero」プレビュー版が公開されました。Flash開発者にとってモバイルアプリの開発が容易になる新しいフレームワークです。また次期「Flash Builder Burrito」と「Flash Catalyst Panini」のプレビュー版も公開されています。

• 【レポート】”ブリトー”の中身は何? 次期Flash Builderの新機能 – Adobe MAX 2010 | エンタープライズ | マイコミジャーナル
• Flex SDK “Hero” プレビュー版公開 – akihiro kamijo
• Flash Catalyst “Panini” プレビュー版公開 – akihiro kamijo
• Flash Builder “Burrito” プレビュー版公開 – akihiro kamijo
• AIR for Android with Flex 4.5 – Flex Coder
• Flex SDK 4.5 “Hero”を使って、お手軽Androidアプリ開発 | ClockMaker

余談ですが、「Hero」「Panini」「Burrito」はどれもサンドイッチからネーミングされたコードネームらしいです。

Flash Player – Molehill 3D APIの関連記事

Flash Player / AIRの「ゲーム」への展開を視野に、ハードウェアアクセラレーション利用への取り組みが紹介されました。GPUを利用することで従来とは比較にならないパフォーママンスに達しています。

• 次の世代のFlash Playerは凄いことに！GPUにより数十万ポリゴンが60FPSで動く | ClockMaker
• Adobe MAX 2010レポート 3日目 Flash 3Dのこれから – IxDGだより
• F-site | Flash PlayerとAIRの新3D API
• Togetter – 「Adobe MAX 2010 : 新しい Flash Player 3D API について」
• Togetter – 「Adobe MAX 2010 : New 3D Features for Flashのまとめ」

Flash に関する技術情報

Adobe MAX 2010では、各分野のエキスパートから専門的な技術情報を勉強するセッションがあります。次の記事はそれらのセッションを受講した現地参加組の方々のレポート記事です。

• [Adobe Max 2010]カンファレンス速報:最適化の重要性 : Media Technology Labs (MTL) : メディアテクノロジーラボ　ブログ
• Adobe MAX 2010レポート 1日目 Flashの未来をこっそりちら見せ – IxDGだより
• Adobe MAX 2010レポート 1日目 モバイルFlashコンテンツの最適化 – IxDGだより
• Adobe MAX 2010レポート 2日目 タッチインターフェイスアプリのデザインと開発 – IxDGだより
• Adobe MAX 2010レポート 3日目 セキュアなFlashコンテンツを作るには – IxDGだより
• Adobe MAX 2010レポート 3日目 Flash Media Serverの今とこれから – IxDGだより つむぎだすデザインと表現

Adobe MAXで持ち帰ったFlash情報がいち早くチェックできるイベント

Adobe MAX 2010で紹介された様々な技術やサービスを、紹介するAdobeの公式イベントです。 Adobe AIR、Flex、Flash Builder、Flash Catalyst、AIR for AndroidといったFlashテクノロジーにフォーカスを当てて、MAXに参加したエキスパートの方々が「これからのコンテンツ／アプリ開発」を語ります。参加費は無料です。ぜひ、ご参加ください！

• Adobe MAX 2010 RETWEET

TwitterではFlashに関する話題で議論がおこなわれることがあります。有用なやりとりはトゥギャッターというウェブサービスにまとめられることがありますが、その中でこれだけはチェックしておきたいという話題をピックアップしてみました。

見逃しがしてしまったまとめがあれば、ぜひチェックしてみてください。

Flash 関連のまとめ記事

• 「Flashあるある」
• 「Flash CS6の要望まとめ」
• 「画像処理をデザイナーがやるのかコーダーがやるのかという話」

HTML5 / JavaScirpt 関連のまとめ記事

• 「間違ったJavaScriptとFlashの使い分け」
• 「お客様の中にFlashとHTML5に詳しい方はいらっしゃいませんか！」
• 「HTML5が切り開くWebアプリケーションの未来実況まとめ」

ActionScript 関連のまとめ記事

• 「ActionScript 2.0 ってどんな存在？」
• 「デザパタ140文字」
• 「FlashでTwitterのTLを表示するにはどうしたらいいの？教えてエロい人！」

営業関連のまとめ記事

• 「CSS Nite LP11：ムチャぶり」
• 「予算がない」
• 「Web業界のフリーランスが語る仕事と見積もりの話」

関連記事

• FlasherがTwitterを使うことで得られる7つのメリット