michinoko blog

Information

date: 2010/08/31
category: seminar.

Adobe BE READY for the new Web market

先週ですが、「Adobe BE READY for the new Web market セミナー」に行ってきました。

何と半年弱くらいぶりのセミナー。いやはや、インプット大事にしないと!すでに置いてかれ気味な、とてつもなく流れの速い業界、ついてけません(汗

さてさて、今回はFlashというよりは、メインはすまーとふぉん。僕は持ってないのですが、そろそろ、そろそろなのでしょうねぇ。今秋ラッシュで発売されると思われるAndroidタブレットは最低でも買おうと思っているのですが。

んで、メモ。間違った解釈、内容あったらゴメンナサイ。


□■■来るべきマルチデバイス時代に備え、今起きつつある事を理解しよう
■Session1:マルチデバイス時代に向けてのYahoo! Japanの取り組み
講師:
ヤフー株式会社 R&D統括本部 制作本部 ウェブデベロップメント部 制作5 伊東宣之氏、藤木裕介氏、木村尚敬氏

#Yahoo!Japanの基本制作体制
・インタラクションデザイナー(UI設計)
・ビジュアルデザイナー(UI設計)
・ウェブデベロッパー(UI実装)
#UI設計
・iphone版についてのポイント
1.デバイスの特性を知る。(端末のスペック、ブラウザの仕様、環境など)
2.iOSのデザイン
3.新しい技術(html5)
1.デバイスの特性
・タッチインターフェース:操作性、タッチ領域
・HVGA:視認性、構成
・3G/Wi-Fiアクセス:遅く、安定しない速度
2.iOSのデザイン
 ・カルーセル(丸三つのギャラリーなどで使用しているもの)
・などなど
3.新しい技術へ
・バージョンによる機能差を把握する

#iPhone版Yahoo!Japan
・細かな文言に対しての配慮をしっかり
 →ラベル(ボタンの文言)に対してのレギュレーションをしっかりと決める
  ex.「完了」:編集を完了
・タッチ領域
 →縦横29pxを最少サイズとして決める
 →ボタンのビジュアルとタッチ領域は必ずしも一致しない

#UI実装
・Local Storage
→クッキーなどを使わずに、ローカルに保存領域を持たす
→文字列のみの保存のため、jsonを使用する
・Geolocatioin API
→現在地の位置を取得
・ CSS Transform
→YUIやjQueryよりもスムーズ
→ボタンの左右、せりあがるアニメーション、カルーセル
・CSS Gradation
→閉じるボタンなどのグラデーション。画像は使わないので軽い。
・CSS Media Query
→縦横切り替え時のピクセルのずれを管理
→高解像度向けの画像切り替え
・Touch Support
→タッチした座標を入手して、スムーズなアニメーションを実装
・Android対応
→CSS Media Queryが効かない(動的に動かない)ので、JavaScriptで頑張る
→アニメーションが重い
→タッチの精度が悪い
→仕様書がないので、実機検証してナレッジを溜めているところ
→HTC Desireは、metaタグで拡大を止めれないなどのバグがあるので、拡大したときのレイアウトに工夫が必要

#方針
・css、htmlは共通でJavaScriptで差異を吸収している
→いずれは、デバイス固有の機能を活用するために分布させると思われる
・アクセス解析により、ある一定のパーセントを超えたらサポートする
→伸び率の高い端末などは、優先的に注力する

#体制
・営業:ビジネスモデルの構築
・開発:カスタマー向けのプロダクト
・R&D:会社としてのプロダクト(企画)、UI/制作部隊(土台となる部分、モック)

■Session1.5:アドビソリューション(HTML5 pack for Dreamweaver CS5)
・Dreamweaverの拡張機能
・HTML5/CSS3のコードヒント(コードナビゲーター)
・マルチスクリーンプレビュー
・Webkit対応
・HTML5対応レイアウト

→9月初旬より日本語版の予定。(製品版は自動アップデートされる模様)

■Session2:【iPhoneアプリ「PhoneBook」開発事例紹介
講師:
加賀谷友典氏、株式会社 電通 黒須正治氏、株式会社 電通 村井陽介氏、深津貴之氏(fladdict)、株式会社ロボット 田中朝子氏ほか

#企画
・デジタルの価値 x アナログの価値 → 「アナログな目標」親子の時間
→仕組みでなく、気持ちをデザインする

#カタチにしていく
・どんな世界観?/どんなアウトプット?/どんなインターフェース?
→STORY/ILLUST/PRODUCT
→乗り物/動物、ターゲットは子供、ナビゲーションは親

#Flashによるプロトタイピング(ディレクター/落とし込み)
・明確なビジョン
・映像などアリ
・全て込みで2ヶ月の実装(内1ヶ月はプロトタイプに使用した)
→テストにデバイスが必要
→触れるまでに時間がかかるので、as3でプロトタイプを制作しX-codeに移植する

#非効率?何故Flashを使うのか?
・Flashのスピード感
・共有するときに、PCで見せて修正や遠方の人にもブラウザでの確認が可能

#iphoneアプリにしていく!アニメーションの感覚をいかにプログラムに持っていくか
・アニメをそのままプログラムにすると、コマ数が多く容量が大きい。速度とのバランス調整が必要
・OpenGLに入る容量
・動画アニメーションを制作して、Flashの静止画素材として納品
・フレームレートの違い
・タッチパネル
・iphone同士の違い、世代間の個体差
・基本的には、古いものに合わせてから新しいもので確認する

#マルチプラットフォーム
・web/AIR、プロトタイプで公開する
→iphone版
→Android版(Android for Flashのみ)
・iphoneのライブラリ
→cocos2dをカスタマイズしたり。cocos2dは、感覚的にDisplayObjectモデルなど使用しているのでFlashに近い感覚で触れるライブラリ

■Session2.5:アドビソリューション(AIR for Android, Test&Target, SiteCatalyst)
・英語版プレリリースされている、Flash Builderで開発。またCS5向けのextensionでAir For Androidファイル新規作成可能に
→カメラアクセス/電話/SNS/加速度/マルチタッチ対応
→Intentはまずは非対応
・Android、CS5のDevice Centralにて傾き等の検証可能
・Omniture、CS5からwebサイトの連携が簡単に出来るようになっている

■Session3:【楽天のアクセス解析とスマートフォンへの取組みマルチデバイス時代に向け、アクセス解析の可能性と課題を探る】
講師:
楽天株式会社
清水誠氏、脇坂善則氏

#タッチポイントの多様化、共通のマナー、UIのテンプレート化、共通ログイン画面

#スマートフォン対応
・itunes storeランキングに左右

#アクセス解析のお話
・2005年SiteCatalyst導入
・2009年全社導入(経営判断)、Test&Target

#マルチデバイス時代のアクセス解析
・アクセス解析をクリエイティブに使いこなす
→サイト間の回遊性分析
→クリエイティブに数字を見る(クリック率/コンバーション/スクロール率)
・Google Analyticsの場合、Excellent Analytics(Google Analytics のデータを取り込み、Excelで見られるというアドオン)を使うとレポートの自動化が可能

#ケータイサイト
・端末IDで正確な訪問を計測出来る
・phpやアパッチモジュールの導入が必要

#Flashの解析
・インタラクションの解析
・CS5の場合、extensionでサイトカタリストの実装が簡単に可能

#twitterの解析
・Twitter APIから検索結果をとってきて SiteCatalystに入れ直す
・つぶやきのURLのクリックも。