クックパッド×グリー合同スマートフォン勉強会
主催:グリー、クックパッド
開催日時:2011/03/02水曜日 19:30〜
公式:http://techlife.cookpad.com/2011/02/18/greepad/
「GREE Android SDKの実装について」
グリー株式会社 メディア開発本部 海老原 智氏
GREE Android SDKはネイティブアプリ用のクラスライブラリ
サンプルアプリもあります
Eclipseでの開発が前提なのでビルド支援Eclipseプラグインを合わせて実装したい
GREE SNSとのシームレスな統合
・認証/登録
・フルスペックなSNSブラウザ(標準のものよりもUXがよい)
・SNSと強調するアプリUI(ステータスバーくらい、ダイアログなどを出せる)
・Restful Platform/Game API(アバターの画像など、ゲームごとのランキングなどのAPIを簡単に叩ける)
Android MarketにだしているSNSアプリとゲームの実装はSDKをもとにしているのでほぼ同じ
実装のトピック(苦労話)
認証実装
・認証処理自体は#-legged OAuth
・Cons Key/Secretをアプリのどこに保存する?
ハードコード
dexは普通に中を見られる(逆アセンブルでみられてしまう)
ProGuard?
NDKを利用
SDKプロジェクトにCons Key/Secret取得用NDKライブラリソースを同梱
ハードコーディング
Facebookは?
application signatureをサーバーサイドとやり取りして認証
速く同じことをしたい・・・
シングルサインオン
・SNSアプリを認証のハブとしている
・別のゲームアプリが起動した場合は、GREEアプリを使えばシングルサインオンできるという内容のダイアログを表示している
・OAuth風
・暗号化したセッションをユーザの許可を得て持ち回す
スクリーンショット
・Androidは素直にスクリーンショットを撮らせてくれない
・アプリのメイン画面はSurfaceView/GLSurfaceViewで描画されていると仮定して
View#dispatchDrawを適時オーバーライドする独自SurfaceViewを提供
SurfaceView:クライアントコードに任せる
GLSurfaceView:glReadPixelsで描画
アクティビティスタックの管理
・UXを上げるために
・バックボタンを押したときの処理を奪い合、SDK側で自前でアプリのActivityだけスタックとして振舞うよう管理するようにした
雑多なトピック
・標準ブラウザの完全コピー
1.6はlocal strageに対応していない
・端末依存問題
開発での実感
2.1は鬼門
HTCは素直
画像の回転情報をメタに持っているかどうか
galaxy sやmilestone系はメタに持っているかとか
カメラをアプリからカスタムで利用した時に
ContentsProviderに暗黙的に保存されるかどうかが
端末とOSバージョンによって変わる
最悪既知の端末のみハードコーディングしていかなければならない(悪戦苦闘中)
GREE SNSアプリの今後
・C2DMベースのPush通知
・絵文字対応
・各種SNS機能への対応
日記
伝言板
アルバム
・さらなるネイティブ/HTML5ハイブリット対応
検証端末はどうしているのか
・今のところなんとか集めている
・iOS3.0とか古いものはディレクタや会社に用意してもらうように交渉してる
SNSアプリとゲームアプリ ゲームアプリ単体で起動できるのか?
・できる
「Trying out Android 3.0」
クックパッド株式会社 UXグループ フェルテス ジュリアン氏
・2つのListViewを表示できるようになった 2.0ではできなかった???→多分出来る
・Menuボタンが上部の横からでるようになった
・Activityにあまり実装しなくなった、レイアウトを指定するくらい、レイアウト側にフラグメントクラスを指定する
・Activityの起動ステートメントが複雑になった
・2.Xのテーマと変わったのでコピペしてもだめかも
・メインスレッドでネットワークアクセスができなくなった
・ListViewのインスタンスから直接操作しても動かなくなったメソッドもある(getListViewから操作すれば大丈夫)
・メニューは少し変わった showAsAction属性が増えてifXXXとか指定できるようになって、レイアウトで少し条件分岐できるようになった???
・回転の対応が大変そう
・フレームワークのアニメーションがさらに増えたけど、エミュレータが重いから対応していない
・使い辛いところは少し改善した
・データの読み込みが楽になった
・Fragmentの存在が大きい、2系でもStaticなライブラリがでる予定
「クックパッドでのスマートフォン開発」
クックパッド株式会社 会員事業部 西岡 拓人氏
@ntaku
個人でもアプリ作っています
Android
さがす
スマフォページ一部のみ
API
・スマホ版開発の背景
Android端末の普及
ブラウザへの直接アクセスが増加
MYキッチン
自分の料理記録を管理できる
ヘッダで私専用ページ感を演出 クックパッドロゴは控えめにし個人のアイコンを全面に
レシピページ
スマホページ
時間をあまりかけない
アプリメイン
Ajaxは使わない
Rails
jQuery 1.5
jQuey Mobile 1.0a3
ajaxEnabledしている
HTML5のdata-role属性をしていしてスマホふうに
data-themeをしていするとさらにスマホふうに
・jQuery Mobileつかってみて
スマホ特有の問題に悩まされなかった
・クックパッドアプリ
1年で150万ダウンロード
・のせるアプリ
つくれぽがついたらPush通知をだしてる
・アプリ開発のポイント
提供する価値を明確にする
さがすあぷり
載せるプアり
・開発サイクルを小さく速く
・企画書は書かない、動くもので共有する
・失敗しても問題ない、思い切りやる
・完成度に関係なく全部捨てることも
ユーザーテスト
・直感的に利用出来るUIか
・2秒で理解できる?
・ユーザテストを繰り返し洗練させる
開発速度をあげる
・UIパーツの配置 すにぺっつで高速化
よく利用するパーツを登録
InterfaceBuilderよりも高速(プロトタイプ作成に最適)
・通信処理全般 独自ライブラリ
通信周り全般
モデル全般
裏で非同期に通信し、Delegateメソッドがコールバック
・メモリ管理
ユーザテストでは気にしない
製品に仕上げる段階で一気にリファクタリング
Xcodeについているやつ
Instrumentsでリークを検知
まとめ
・jQuery Mobileつかえる
・開発のポイントを常に意識しながら作ることが大切
・UIWebViewでクロスプラットフォーム開発が容易に
Androidの一部の端末など古い端末はどこまで対応するのか?
・古いものはあまり気にしない、jQueryに任せたり、sectionタグは利用しないようにしている
規模にかかわらずアジャイル開発を行っている
機能単位で専任の担当者を設けている
デザイナーと開発者はどう関わっているのか?
デザインと開発並行して行う
プロトタイプではデザインは重視していない
スマートフォンページでjQueryのロードは重くないのか?
今のところページが少ないのでとくに問題はないが、今後全面的に展開するときには検討する
APIを公開する予定はないのか?
今のところ予定はないです
ユーザーテスト社内で行っているのか?
社内の人で料理をする人にユーザーテストしている
その後、一部のユーザに公開している
料理中に見る工夫をしているのか?
ロックがされないようにしている
第五回 ライブドア・テクニカルセミナーに行ってきた
開催概要
開催: 第五回 ライブドア・テクニカルセミナー
主催: 株式会社ライブドア 技術部会
日程: 2011 年 2 月 26 日(土)
時間: 14:00 〜 17:05 (13:30 開場 / 17:15 閉場)
規模: 100人前後
セミナー参加費: 無料
会場: 新宿NSビル 30F NSスカイカンファレンス ホールB
(東京都新宿区西新宿2-4-1 新宿NSビル 30F)
ハッシュタグ:#ldtech
14:10 - 14:35 「開発者視点で見たAndroidアプリとiOSアプリの違い」
佐孝 太郎 氏 株式会社ライブドア 開発部開発2G(スマートフォンチーム)
アプリの設計思想の違い
iOS:内部構成:密結合、アプリ間連携:閉鎖的、独自URLで起動、データ共有:限定的、機能の共有:スタティックライブラリ
Android:内部構成:疎結合、アプリ間連携:開放的 Intentでシームレスな連携、データ共有:ContentProvider、機能の共有:他のアプリも部品として扱う
デバイスの違い
iOS Android
開発 Appleのみ 端末各社
種類 iPhone/iPad 多数
デバイス/OSの世代交代 比較的速い OSの普及度が端末シェアに依存
UI/機能 統一 多様
拡張 独自規格のアタッチメント 独自ハードウェア搭載端末
その他 ー ハードウェアボタンが存在
14:45 - 15:10「HTML5で動くFlash Playerを作ってみた」
紀平 拓男 氏 株式会社 ブロードテイル 代表取締役
HTML5とは
・新しい機能
Canvas/SVG、Movie/Audio、Geolocation、WebSocket、WebWorkers、WebStrage、etc...
乱暴に言うとHTMLのタグとJavaScriptのAPIが増えた
HTML5の表現力はFlashに匹敵するのか?
Flash Player作成の障害
・普通の案件とは大きく違う
・仕様書がない
・入力と出力は実機のみで確認可能
・どれくらい完成しているのかわからない
ではどうするか?
・内部実装の仮説を立て、テストを書き、コーディングし、その結果をもとに新しい仮説を立てる
・このループをひたすら繰り返す
今回のFlash Playerのコードは、どの部分であっても2回書きなおしている
Flash Playerの内部構造
・以下の3つに分けて実装している
Engine:タイムラインの制御
VM:ActionScriptの実行
Render:内部構造をHTML5で描画
Canvas VS SVG
・Canvasを使うか、SVGを使うか
Canvasはラスター、SVGはベクター
どちらでもFlashを表現可能
実装方法は大きく違う
CanvasはJSのAPIで描画
SVGはHTML5のタグで表現
SVGは現在Androidでは使えない
SVGの2回目の実装
8fps
DOM木との変更があった場合のみ属性値を変更する
SVGの限界
・ブラウザの内部実装で描画されているため改善できない
・描画は速いが、パフォーマンス改善の限界が近い
Canvasを用いたキャッシュの方法
drawImageを使ってキャッシュ
Canvasの2回目の実装
・描画する際に、1階描画したオブジェクトをすべてキャッシュしておき・・・
8fps→11fps
15:30 - 16:10「対談: 新進気鋭のSAPに聞いた現場事情」
スピーカー 石井 武 氏 株式会社オルトプラス 代表取締役
聞き手 伊勢 幸一 氏 株式会社ライブドア
ブラウザ三国志を事業として立ち上げ
さらに別の会社を作った
GREE向けの「ダービーズキングの伝説」、「グランサモナー」を開発
登録者数は右肩上がり
アクティブユーザ数を維持していきたい
データセンタでは日々増設
ライブドアのDCを利用
1日8回は修正アップデートをしている
通常のソーシャルゲームは5千から1万のアクティブユーザ数だが10万は珍しい
人物金がない場合、モバイルコンテンツが企業の体力的に見合っている
ブラウザ三国志は企画上大人数がいないとゲームが成立しないタイトルだったがmixiのローンチタイミングでローンチしたので成功した
小さく産んで大きく育てよう
アップデートを繰り返しているが当初の企画をまだすべて実装出来ていない
お金を使ってもらえるフェーズ
WEBベースだけど重たいMMORPGと同様な課金を狙った
ユーザに辞められない・忘れられないようにするためには比較的速いタイミングで課金をして忘れられないようにする
PC市場とガラケー市場の違い
・ガラケーは少額課金しやすい(心理的障壁も)
・伝えられる情報量が少ない
・検索よりもクチコミでスタートすることが多い
ブラウザゲームは6人月開発で2人月テスト
ダービーズキングは4人で開発、ガラケー向けは2桁から3桁安い
DSでのゲーム開発は3千万円程度
Wiiなどコンソール系は二桁くらい上
SAPはコストは低い、参入障壁が低いため競争は激化している
海外(中国)から大きなタイトルがやってくるので海外とは違うもの開発した
10万人くらいになるとバイラルが広がり始める
中国では2年くらい前から面白さが理解出来ないようなゲームが流行っている
グリーからの流入はiPhoneが4割、スマホの人のほうがお金払いがいい
ただ、iPhoneに対応していないためロスしている
徹夜すると効率が良くないので会社に寝るところを用意している
積極的に意見を書きこんでくれるユーザは肌感覚で5%くらい
離脱がどこで大きく起きているかを調査している
ユーザが考えて入力しなければならない項目で離脱してしまう
ただ、修正をする際になにも不満を持っていない98%のユーザが離脱してしまわないようにしている
16:25 - 16:50 「グリーのスマートフォン開発」
伊藤 直也 氏 グリー株式会社 メディア開発本部 ソーシャルメディア統括部
スマートフォンビジネスのトレンド
2年後から3年後はスマートフォンのCPUは現在のPCよりも速いCPUが載る
それに向けて開発していくのが楽しい
2年後にはスマートフォンが6000万台を超えると予想
ananにも「女子にやさしいスマートフォンは?」取り上げられている
スマートフォンの利用率はWebよりもソーシャルアプリで遊んでいる人達が多い
AngryBirds
4200万ダウンロード、有料は1200万ダウンロード(有償率:30%)
1200万DL × 100円 = 12億円/年
Free版はAdmobの広告収入
Twitter
アクティブユーザの46%がモバイルアクセス
新規ユーザの16%がモバイルから
アプリ内課金
iPhone 2009年からアプリ内課金できる
全体の50%がアプリ内課金
NFC
Android2.3(Nexus SはNFC搭載)
iPhone5、iPad2にも搭載との見方
taglet
Android2.3 + NFC による情報共有サービス
tagletでmixiチェックイン
フィーチャーフォンのゲーム市場もまだ伸びている(1兆円程度)
GREEのスマートフォン開発
HTML5+CSS3+JS
Android,iOSともにWebKitベースブラウザ 新技術を積極的に採用
サーバーサイドではできないこと
・カメラにはアクセス出来ない
・スマフォの連絡先を読み取る
・プッシュ通知
HTMLだけでできないことをネイティブが補う
ネイティブアプリでHTML5をラップしてあげている
定期的にイベントが起きるので(バレンタインイベントなど)
iPhoneAppでは確実にリリースできるとは限らないのでハイブリット型がよい
単にHTML5のサイトだけだとAppStoreなどで配信できないのでマーケティング的に不利
AndroidではGIFアニメを表示できないのでjsでアニメーションGIFを再生するようにした
海外のアプリではネイティブアプリで開発していて必要なときだけ通信するようにしている
クロスプラットフォーム開発のトレンド
・Titanium Mobile
JSでiPhone/Android/BlackBerryのネイティブアプリにコンパイルできる
IDEではなくJSをネイティブのソースに変換してくれる
ラムダで直感的にかける
・PhoneGap
ハイブリット(HTML5 + ネイティブ)アプリの開発フレームワーク
・HTML5 Webアプリフレームワーク
jQuery Mobile
Sencha Touch
jQTouch
Cinco
・Unreal Engine
3Dゲーム開発ミドルウェアの大御所
C/C++開発 Android対応はこれから
・Corona SDK
Luaで2D開発
ActionScriptライクに開発
・Airplay SDK
C/C++でWrite once
コンソールゲーム機もサポート
・Unity Game Development tool
JS,C#,Lua etcで3D開発
ActionScript的に
本命
ライセンスが安い
海外の会社ではよく使われている
マルチプラットフォーム対応
まとめ
・2011年スマートフォンビジネスが本格化
・Mobile = Global
・アプリ内課金がビジネス的トレンド
・NFC
・ソーシャルゲームと新しいタイプのソーシャルアプリ
・クロスプラットフォーム開発ウェアは急発展の最中
■
MacBook Air 11インチ欲しい!
はてなさん太っ腹だなぁ
11インチモデルなら外出先でも記事描きやすいでしょうなぁ
http://d.hatena.ne.jp/keyword/MacBook%20Air%2011%A5%A4%A5%F3%A5%C1%CD%DF%A4%B7%A4%A4%A1%AA
Android Bazaar and Conference 2011 Winterに行ってきた
開催日:2011/01/09
場所:東京大学本郷キャンパス
http://www.android-group.jp/abc2011w/
雑感、まとめなど
招待講演 総務省情報通信国際戦略局情報通信政策課長 谷脇康彦氏
「ITの利活用 特に教育、医療、電子政府が日本では遅れている」
政府、役所の手続きで電子化されているものがあまりにも少なく感じる
決まりきった業務は電子化し、余剰人員を先進的な内容に割り当ててほしいものだ
電子カルテは自分もほんのちょびっとかじったし、徐々に浸透してきている(もちろん、まだ活用しきれているようには思えないが)
教育分野については現在の小学校や中学校がどのように活用しているかわからないが、
先生ごとにカリキュラムを練って授業をするのは少し勿体無いかなぁと思う
せめて、各先生の授業や教材を電子化し、人気や為になる授業を後進のために貯めておいて欲しいと思う
サイバーエージェント Ameba for Android ~来るべきスマートフォン時代へのデバイス対応~ 株式会社サイバーエージェント 執行役員 新規開発局 局長 長瀬慶重氏
・数字系の話
サイバーエージェントの数字系の発表はありがたい
日本国内でのAndroidの端末の分布状況がわかる数字だった
また、Androidのトラフィックがスマートフォンのうち20%もあるというのが驚きだ
すでに無視できない数だが、Android対応を各コンテンツプロバイダは真剣に考えなければならないだろう
Androidの開発の自由度は周知の事実だが、すぐにでもバージョンアップ版を配信できる点がアジャイル開発向きというのはたしかにそうだなぁと感じた
・Amebaの開発カルチャー
社員にiPhone、Android配布というのはうらやましい
毎週のように経営陣に提案ができるのもスピード感があり素晴らしい
「企画書よりもプロトタイプ!」も技術者は手を動かしたい人が多いからなぁ
NFC SONY ソニー株式会社FeliCa事業部プロダクト&サービス部 マネージャー 相馬功氏
iPhoneにチップを提供しているBrodocomがNFCのベンダーを買収したからiPhoneもNFC/Felicaが実装されるかもしれないというのはわくわくしますね
ただ、NFCに関してAndroid自体対応が読み込みのみだったり、FelicaのSDKがないから高度なことはまだできなそう
HTML5によるリッチクライアント開発手法についてあれこれ 白石俊平氏
「オフライン対応などをするためにUIとデータの分離をより厳密にする必要がある HTTPリクエストを減らすためにブラウザ側でキャッシュすることが必要」
スマートフォンはブラウザが限られているから先行してHTML5に対応できる
ネイティブアプリをつくらなくてもリッチなコンテンツが作れる
Android・ウェブアプリケーション連携術 はてな 渡辺博文氏
実装でつまずいたことが事細かに発表されていて開発者にはありがたい内容
さっそく自分のアプリにも反映しよう
Android Usabilltiy Seminar 2010に行ってきた
場所:代々木ビジネスセンター二号館
13:20に開始
http://itpro.nikkeibp.co.jp/android/AUS2010/index.html
◆13:05〜13:55 使いやすさをデザインするということ
講師:山中俊治氏(慶應義塾大学大学院教授、LEADING EDGE DESIGN代表)
タッチパネル操作可能なスマートフォンは、幼い子どもでも扱えるユーザー・インタフェースを実現している点で画期的なデバイスです。
説明抜きに直感的に使えるユーザー・インタフェースは、どこがポイントで、どうやって実現できるのでしょうか。
本セッションでは、「Suica」対応自動改札機など多くの工業機器のデザインを手掛けた山中氏の講義を通じて、「使いやすさとは何か」「使い勝手(ユーザビリティ)検証の在り方」などを学びます。
●導入
マンガを書くのが趣味だった
マンガを抱えて日産に行ったらプロダクトデザイナーにしてもらえた
車やカメラ、時計などを手がけた
色や形だけではなくて機能や使い勝手 いわゆるファンクションの設計にも関わっている
つかいやすい、さわりたい、ほしい、わくわくする 人間の感じることにかかわれたらよいと思っている
●ユーザビリティ調査について
Suica自動改札機アンテナ面の最適化に関わった
直感だけではうまくいかないのでプロトタイプをなんこも作って最適なものを探り当てた
ユーザに説明をしないでSuicaをどうかざすかを探り当てた
ユーザの行動にフィットさせる形を探した
人間は傾きがあるものに対しては動作を止めてくれた
人間は光っているものに惹かれる
「触れてください」とかいておくとカードをかざしてくれる
インジゲーターは遠くに置かないと混同する
●ユーザビリティ調査のポイント
一期一会と考え、周到に準備する
二度と同じことはやれないことが多いので一発でやるつもりで進めたほうが良い
開発者同士が自分自身の経験で語るので意見や使い方が衝突する
被験者に負担をかけないように配慮する
何分も待たせないようにする
多重の記録装置と多数の観察者
被験者の表情なども観察する必要がある
分単位のタイムテーブルとマニュアルの整備
他の被験者の真似をされないようにひとりづつやらなければならないので時間がかかる
被験者への説明は全く同じにしなければならない(マニュアル化する)
使い方のヒントを与えないようにする
実際の使用環境に近くする
テストは企画の一環である
最終確認ではない
フレキシブルなプロトタイプを用意する
早めにテストする
少数の被験者をていねいに観察する
観察の直後にアイデアを出し合い、速やかに実装、再び調査を行う
→ 出来る限り早く実装し再度テストする できればその場で変更する
参加することに意義がある
企画者自身も他人の前で使ってみる
被験者の行動を関係者全員で観察する
被験者の体験・問題点を共有しなければならない
体験と問題点の共有が出発点
キーパーソンの参加(報告書を見るだけではダメ)
キーパーソンの思いつき、体験だけで語るのはダメで実際に被験者の問題点を見て、認識する必要がある
ケータイのフェリカの端末側、リーダライタも設計した
ケータイはモックでPCにつながっていてUIはFlashで設計した
結果としてはケータイ側でなにも反応を返さないほうが良かった
リーダライタ側が反応を返したほうがよい
ケータイ側でなにか表示させようとするとディレイが長くなる
ユーザビリティのテストは自分たちが思ったものと違う方向になることのほうが多い
●キッチンツール(OXO)のユーザビリティテスト
レイドル
アメリカでは太いグリップで手で握るが
東洋人はペンを持つように指を使って握る
トング
アメリカ人握るようにもつ
東洋人はピンセットのようにもつ
丁寧に観察して写真などで比べてみることが必要
大根おろし
各家庭に二個か三個あるが使い勝手が良いものがないのでユーザビリティテストを行った
刃にランダムさがないとうまくすれない
職人が作った昔ながらの大根おろしはきれいにすりおろせるが、機械で作った大根おろしは一定の方向に刃が向いていて轍のようなものができてすれなくなってしまう
殆どの人が取っ手を使わずに、大根おろしの本体を押さえていることがわかった
3000円近い大根おろしになったが売れている
●時間がないとき
被験者を減らす(内容を薄めるのは危険)
ひとりでも、ふたりでもその装置について知らない人に被験者になってもらう
クライアントに参加してもらう
クライアントに納得してもらう為にその場で見てもらう
説得に時間がかかる
早いうちにやる
プロトタイプマシンを用意する
後で膨大な手間とコストをかける
皮肉です
例えば新幹線の改札機 二枚切符を入れるというのは開発としては素晴らしいが、ユーザのメンタルモデルとしては二枚入れることを考えないので
駅に二、三人立っていて説明しなければならなくなった
改札機に赤い文字で二枚入れてくださいと説明しなければならない
●iPhoneは1歳4ヶ月の子どもでも動かせる
アイコンや記号、文字で説明しなければならない機能は子供では操作できない
何をやってもまずいこと(失敗)が起きないことが重要
警告(アラート)は子供は喜んで押してしまう
●QA
・どういう人が被験者に向いているか?
開発者や経験者、社内の経理の人は向かない
どうしても一人しか選べないのならば商品のメインターゲットに近い人を選ぶ
太っている人やお年寄りなども使えるか試してみたほうが良い
思ったことをはじから話してくれる人のほうが良い
・ユーザビリティテストで啓蒙をしないほうが良いのか?
啓蒙をしようと、しまいと商品が世に出て普及しまったら
ユーザが変化してしまうので結果的に啓蒙してしまう
もちろんテストの開始時に啓蒙・説明をしてはいけない
・アイフォンベイビーはタッチパネルネイティブだが我々はペンのネイティブ・・・???
わかった気にはなるが、半年経つと感覚が変わってしまう
キッチンツールなどベーシックなものは一年、二年経っても変わらない
◆14:00〜14:50 Flash PlatformによるAndroidアプリ開発のこれから
講師:Flashデベロッパー/テクニカルライター 池田 泰延氏
Android OSは2.2以降Flashに対応するようになり、表現力が向上することが期待されています。
本セッションでは、先日開催されたアドビシステムズ主催の「Adobe MAX 2010」の報告を交え、
「Adobe AIR 2.5を用いたアプリ開発」「スマートフォンでのFlash Player 10.1とHTML5」などを解説します。
●ADOBE MAX 2010レポート
・次世代Flash PlayerはGPUが熱い
3D API
Flash Playerの新しい3DのAPI
0%CPU(GPUで処理)
DirectX9,OpenGL1.3,OpenGL ES2,ソフトウエアレンダリング
現状のポリゴンはFPS30で1000〜3000程度だが、およそ百倍のポリゴンが表示可能
大量の陰影や炎などの表示が可能になった
StageVideo
GPUを利用したビデオ再生
現状はデコードまではできるがエンコードはCPUで演算していた
動画の上に画像を合成してもスムーズに表示ができる
●Adobe AIR 2.5を用いたアプリ開発
・マルチ環境 Mac、Windwos、Linux、TV、モバイル
いままではデスクトップアプリケーションだったが
タッチスクリーン式のアプリやタブレット向けの開発も行えるようになった
・Air for Androidで開発されたアプリケーション
宇宙船着陸アプリ
傾きセンサーや加速度センサーを利用したアプリ
・オーサリング環境
AIR SDK
コマンドラインだがフリー
Flash Professional CSS(Extension for Adobe AIR 2.5)
タイムラインアプリケーションに特化している
時間の流れに沿って柔軟に作れる Photoshop/Illustraterとの連携に優れている
端末に直接転送できる、apk作成もできる
Flash Builder Burrito
Flexフレームワーク
Eclipse向け
RIA向け
端末に直接転送できる、apk作成もできる
いろんな端末でのエミュレーションができる(Android SDKのエミュレータではない)
UIの作成が簡単で、ネイティブアプリのUIより綺麗
・Flex SDK Hero
コマンドラインだけどUIはFlash
・各ブラウザのHTML5対応状況
http://www.html5test.com
●HTML5とFlashの機能比較
ブログに載せています
Flashは1社独占だがその分開発スピード、機能追加が早い
モバイルでHTML5のCanvasとFlashで比較してみた
・3DはHTML5だと重いが、Flashだとサクサク動く
・線のレンダリングはHTMLだとちょっと重いが、Flashだとサクサク動く
Android版のFlashはGPUで処理しているのでHTML5よりも速い
スクリプトは比較していないがあまり変わらないと思う
●QA
・Flash10.1は標準搭載か?
標準搭載かどうかはわからないがMarketからダウンロード出来る
・Android端末は乱立しているがパフォーマンスの違いを吸収できるか?
パフォーマンスに影響は当然出る
機種間の差は古い端末を基本に考えて開発すれば良い
・Androidは画面幅が乱立しているが解像度の違いの吸収はできるのか?
Flex FrameworkのHeroは画面サイズに合わせてフィットする
Flashの仕組みで画面幅のパターンを3パターン〜4パターンそんざいする
固定幅、縦横比固定で画面幅にフィットさせる、縦横比を保ったままフィットさせる
固定幅で作成して、余白の情報を取得して自力で動的に表示することもできる
◆15:10〜16:00 ユーザビリティと満足度向上の勘所 デザイン・イン型UI開発と3Dの活用
講師:エイチアイ インタフェース技術部門デザイン課 工藤重人氏
本セッションでは、モバイル端末向けユーザー・インタフェース(UI)デザイン開発の経験を踏まえ、ユーザビリティと満足度の向上方法などを解説します。
さらに、Androidアプリで注目を集める3次元(3D)グラフィックスのUIへの適用についても、各種アプリケーションにおける実現方法を紹介します。
●デザイン・インとは
上流工程・開発のはじめの段階でエンドユーザを意識した開発をすすめる
製品化直前ではなく、利用者視点でUIを改善するために仕様決定前にユーザビリティテストを行ったほうが良い
●具体的なユーザビリティテスト
利用者の声を反映できるだけでなく、デザインに一貫性が増す
カラオケのリモコンのテスト
・60代の女性の場合はメモを取り出して直接番号を入力し始めたりする
→ 番号入力を分かりやすい位置に変更した
・目が不自由な方
ヘルパーさんが同行して曲を予約している
→ 音声読み上げ機能を追加した
ユーザビリティテストをナレッジ化して次の機会にも活かす
●満足度向上の為のエスノグラフィー
利用者の観察
入力・ユーザの行動ログを蓄積して利用することができる
ログを4つに分類した
・ユーザの行動ログ
・行動ログを解析・表示向けに最適化したもの
・表示向けログから時間帯別の推薦IDを記載したもの
・推論結果に対する修正履歴
デモアプリ
ユーザが過去に利用したサイトから未来に表示するサイト・機能を予測する
未来の予測を編集することができる
開発途中 3Dライブラリの会社なので3Dバリバリ使っています
独自の学習/推論アルゴリズムを利用している
Xperia、Desireで動きます
●自社開発のコンポーネントの紹介
3Dを描画させる機能
3Dと2Dを混在させるコンポーネント
3DのListView
3Dトランジション
裸眼立体視が容易になる(昔のiアプリと互換性がある)
CとJNIを利用しているのでJavaからOpenGL ESを呼び出すよりも2倍から3倍速い
IS03向けのフィットネスアプリで使われている???
●開発効率と長期的ユーザビリティ
開発効率化のポイント
早期にターゲットを見極め、以下にユーザの求める声を取りいれるか
要素技術に着目し、パフォーマンス・クオリティ面を早期に解決する
長期的ユーザビリティのポイント
コンテキストを取得し、利用する
評価ポイントをサイクル化させ、次なる課題をナレッジ化する
●二極化と飽和
●QA
・二次元ディスプレイで3D UIだと2Dより情報量が減ってしまうが利点はあるのか?
ジレンマがある
ボタンを押したときのフィードバックに3Dを利用するのもよい
トランジションとかで徐々に試している
◆16:05〜16:45 「アメーバピグ」に見るデザイナーと開発者の協業
講師:サイバーエージェント 新規開発局 システムディベロップメントグループ 切通伸人氏
サイバーエージェント 新規開発局 フロントクリエイティブグループ 馬場絵美氏
パソコン版で約500万人のユーザーを集めているサイバーエージェントのコミュニティサービス「アメーバピグ」が、
11月1日にAndroid端末向けアプリ「アメーバピグfor Androidβ版」をリリースしました。同アプリはAndroid 2.2に対応、
10月に発表されたばかりのAdobe AIR for Androidを活用しています。本セッションでは、同ソフトの開発プロセスを紹介、
アメーバピグfor Androidβ版におけるデザイナーとソフトウエア開発者の協業、スマートフォンならではのユーザビリティを実現するためのアプローチなどを学びます。
●pigg for Androidβ
pigg自体は50名で開発
11/1にアプリ版はリリース
5人(ディレクター2名、開発者2名、デザイナー1名)
業務外でひっそりと開発
1ヶ月半で開発、業務時間外で開発
●ワークフロー
・デザインチーム確認
・プロジェクトチーム確認
・アートディレクター確認
・プロデューサー確認
・社長確認
1ヶ月半で開発するにはどうすれば良いのか考えた
デザイン確定後、変更や修正が多発する
デベロッパーの業務が巻き戻る
→ Mockを作って実機で確認する
重要なキーパーソンに聞いてまわった
→ 明確なゴールをディレクターが決めてブレを起こさないようにした
デザインチェックを通常行うが今回のメンバにはデザインチェックをする人がいなかった
普段はワークフローどおり五名それぞれの承認が必要だったが
改革を行い50名のユーザレビューを行ってもらった
5名もその50名に混ざってユーザー目線の評価を行った
レビュー会実施して通常の確認系統を補完した
●そもそも、Androidで動くの?
Android2.2からFlash Player10.1が動く
デバイスはネクサスワンを入手しておこなった
ブラウザでさわるとアドレスバーが邪魔、IMEが邪魔でチャットが出来ない、ボタンが小さすぎて押せない
AIR for Androidで移植した
移植は簡単だったのでデザインに注力した
●デザインについて
機能を絞ってアイコンを減らした
主要機能のアイコン化した、メニューボタンを作成しその中にアイコンを移したり
アイコンを単純化した
●画面サイズ
ネクサスワンの解像度をもとに開発した
Androidアプリではミスタッチを防ぐために余白を十分にとった
ボタンを縦配置にしてしまうとミスタッチをしてしまうので横配置にした
(指の腹で押すのか、先で押すのか人によって異なるため)
●開発環境
Flash Builder4
AIR SDK2.5
Android SDK
ネクサスワン
移植が簡単だった理由
・汎用性のある設計
フレームワークが疎結合になっていたので
ほとんどView層の変更だけですんだ
・元々スペックの低いPCでも動作するように開発していた
パフォーマンスチューニングせずに済んだ
●問題
ギャラクシーSだとマーケットにアップしたが検索ヒットしない
5方向ナビゲーションが付いていないのが原因だった
●これから
基本的な機能しか追加していないので機能追加します
GPSなどを使用したいAndroid独自の機能
海外版のPicoも
●課題
今後増えてくる画面サイズへの対応
PC版とのソース管理
PC版のFlashを動的に読み込んだりしているのでAndroid側で落ちてしまうことがある
●QA
・ユーザ50名でのレビューはどのように行なったのか?
社内の人間でリテラシーの低い人間を集めて3回から4回に繰り返して行なった
・デザイナー、開発者、ディレクターは近くで開発していたのか?
階が別々で離れている
やりとりをスムーズにする秘訣は作ってしまった方が速い
開発者が試しにリサイズしてみて実際に見せたりしてデザイナーとコミュニケーションをとっていた
MySQLのFEDERATEDにはまった
OracleでいうDBLinkみたいな機能らしい。
FEDERATED自体の解説は下記が詳しい。
http://www.thinkit.co.jp/free/article/0608/1/5/
http://www.klab.jp/media/mysql/index2.html
自分はインストールの時点でつまずいてしまった。
ソースから入れたのだが、「./configure」時に「--with-federated-storage-engine」を入れてコンパイル、インストールしただけでは有効にならなかった。
英語のマニュアルに書いてある
Beginning with MySQL 5.1.26, the FEDERATED storage engine is not enabled by default in the running server; to enable FEDERATED, you must start the MySQL server binary using the --federated option.
が日本語のマニュアルに書いていなくて数時間はまった。
一回だけ使うならmysqldのオプションに「--federated」をつければOK。
普段から使うなら「my.cnf」の「[mysqld]」に「federated」を追加すればOK。
皆さんは気をつけてね。
日本語のマニュアル
http://dev.mysql.com/doc/refman/5.1/ja/federated-storage-engine.html
英語のマニュアル
http://dev.mysql.com/doc/refman/5.1/en/federated-storage-engine.html
新MacBookProを購入
旧MacBookを既に持っていたが、画面が小さいのでそろそろ大画面と思っていたところ新MacBookProが発表されたので早速購入。
池袋ビックは定価+5%ポイント
現在巨人優勝セールをしているが新MacBookProは値引きしてくれないっポイ。
まあApple製品は価格統制が厳しいので仕方ないと思いヤマダ電機LABIへ。
こちらは定価+5%ポイントに斜線が。
店員さんに聞いたら+8%ポイントとのこと。
だめ元で「おまけとかつきませんか?」と聞いてみたものの「ポイントがおまけです」との回答。
「そりゃそうだ。」と思ったが食い下がって「10%ポイントになりませんか?」と尋ねたら裏に聞きにいってくれました。
っでもどってきたら10%ポイントOKとのこと。
ヤマダ電機太っ腹!
早速レビューを。
新しいタッチパッドはボタンがなくなりタッチパッド全体がボタンの役割をしているのだがのクリックは少し押しづらいかも。
タッチパッド下の方は思った通りにクリックできるんだけど、上の方に行くにつれて思った位置でクリックできないです。