クックパッド×グリー合同スマートフォン勉強会

主催:グリー、クックパッド
開催日時: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アプリとゲームアプリ ゲームアプリ単体で起動できるのか?
・できる

unity提携とSDKの今後は?
・Unityプラグインを用意する予定

「Trying out Android 3.0」

クックパッド株式会社 UXグループ フェルテス ジュリアン氏

・2つのListViewを表示できるようになった  2.0ではできなかった???→多分出来る
・Menuボタンが上部の横からでるようになった
・Activityにあまり実装しなくなった、レイアウトを指定するくらい、レイアウト側にフラグメントクラスを指定する
・Activityの起動ステートメントが複雑になった
・2.Xのテーマと変わったのでコピペしてもだめかも
・メインスレッドでネットワークアクセスができなくなった
・ListViewのインスタンスから直接操作しても動かなくなったメソッドもある(getListViewから操作すれば大丈夫)
・メニューは少し変わった showAsAction属性が増えてifXXXとか指定できるようになって、レイアウトで少し条件分岐できるようになった???
・回転の対応が大変そう
フレームワークのアニメーションがさらに増えたけど、エミュレータが重いから対応していない

・使い辛いところは少し改善した
・データの読み込みが楽になった
・Fragmentの存在が大きい、2系でもStaticなライブラリがでる予定

クックパッドでのスマートフォン開発」

クックパッド株式会社 会員事業部 西岡 拓人氏
@ntaku
個人でもアプリ作っています

スマートフォン全体像
iPhone
さがす
のせる

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

http://blog.livedoor.jp/techblog/archives/65434269.html

14:10 - 14:35 「開発者視点で見たAndroidアプリとiOSアプリの違い」

佐孝 太郎 氏 株式会社ライブドア 開発部開発2G(スマートフォンチーム)

iOSAndroidでは様々な違いがある
言語と開発環境の違い

iOS:動的、柔軟、低レイア、XcodeC/C++とコード内で共存
Android:静的、堅牢、高レイア、EclipseC/C++Javaの連携はJNI

アプリの設計思想の違い

iOS:内部構成:密結合、アプリ間連携:閉鎖的、独自URLで起動、データ共有:限定的、機能の共有:スタティックライブラリ
Android:内部構成:疎結合、アプリ間連携:開放的 Intentでシームレスな連携、データ共有:ContentProvider、機能の共有:他のアプリも部品として扱う

バイスの違い

iOS Android
開発 Appleのみ 端末各社
種類 iPhoneiPad 多数
バイス/OSの世代交代 比較的速い OSの普及度が端末シェアに依存
UI/機能 統一 多様
拡張 独自規格のアタッチメント 独自ハードウェア搭載端末
その他 ー ハードウェアボタンが存在

アプリ開発者視点での「作り易さ」

Android 見慣れた言語とツール オープンなプラットフォーム、最初のハードルは低い
iPhone ???

マルチデバイス、複数OS対応
差異を考慮して、「使い易いUI」を考える難しさ
パフォーマンスチューニング
「スマート」でもモバイル端末だということ
奇跡も、魔法も、ないんだよ

iOSAndroidで「同じアプリ」は作れるか

「違い」があるということを認識する
特にツール系のアプリ
特性にあったプリ作りを
アプリでやるべきこと、Webでやるべきこと

14:45 - 15:10「HTML5で動くFlash Playerを作ってみた」

紀平 拓男 氏 株式会社 ブロードテイル 代表取締役

HTML5とは

・新しい機能
CanvasSVG、Movie/Audio、Geolocation、WebSocket、WebWorkers、WebStrage、etc...
乱暴に言うとHTMLのタグとJavaScriptAPIが増えた

Canvasはあまり使われていない

1位:セマンティック要素
2位:フォーム
3位:Audio/Video
4位:Canvas
Canvas 扱いは難しいが効果は大きい

Canvasの主な機能

ピクセル単位の描画できる
Jpegの写真などを分析変形できる
ベクターグラフィクスも扱える
ベジェ曲線を利用しての自由な図形の描画ができる

HTML5の表現力はFlashに匹敵するのか?
Flash Playerの作り方

・今回のターゲットはFlash Lite1.1
・携帯用のFlashの代表
・日本のガラケーにてシェア99%
・PC Flashのバージョン4相当+α

Flash Player作成の障害

・普通の案件とは大きく違う
・仕様書がない
・入力と出力は実機のみで確認可能
・どれくらい完成しているのかわからない

swfの仕様書は・・・

Adobeから仕様書が提供されている
”swf specification”で検索

・もちろんいくるか問題がある
必要な情報が書かれていない
間違いが堂々と書いてある

ではどうするか?

・内部実装の仮説を立て、テストを書き、コーディングし、その結果をもとに新しい仮説を立てる
・このループをひたすら繰り返す
今回の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では使えない

Canvasの最初の実装

・毎フレームCanvas全体を背景色で塗りつぶし、最初から描画する
・「沈黙の潜水艦」が2fps
携帯アプリはだいたい12fps

SVGの最初の実装

SVGのDOM木を生成
4fps

iPhoneではSVGのDOM木に大して全く同じ属性を書きこんでも再描画をする

SVGの2回目の実装

8fps
DOM木との変更があった場合のみ属性値を変更する

SVGの限界

・ブラウザの内部実装で描画されているため改善できない
・描画は速いが、パフォーマンス改善の限界が近い

Canvasを用いたキャッシュの方法

drawImageを使ってキャッシュ

Canvasの2回目の実装

・描画する際に、1階描画したオブジェクトをすべてキャッシュしておき・・・
8fps→11fps

Flash特化キャッシュアルゴリズム

・描画する際に、オブジェクトIDを描画順でリストに保存しておく
・・・

15FPSを達成

まとめ

HTML5Flashの代替となるだけのポテンシャルを十分に秘めている
泥臭い作業を延々と続けるときに、「心を折らない」のはとてもっ大切な事である
Canvasの描画は遅いが、工夫次第ではSVGの倍程度速くなる

ブラウザでダブルバッファすると落ちる・・・
特に携帯・スマホ

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搭載)
iPhone5iPad2にも搭載との見方

taglet
Android2.3 + NFC による情報共有サービス
tagletでmixiチェックイン

スマートフォンビジネス&Androidはじまったな

フィーチャーフォンのゲーム市場もまだ伸びている(1兆円程度)

GRESNS、プラットフォーム、アプリ開発の垂直で持っているので世界的にまれ

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的に
本命
ライセンスが安い
海外の会社ではよく使われている
マルチプラットフォーム対応

GREE iOS SDK + Unity
GREEプラットフォームで2/27公開予定

まとめ

・2011年スマートフォンビジネスが本格化
・Mobile = Global
・アプリ内課金がビジネス的トレンド
NFC
ソーシャルゲームと新しいタイプのソーシャルアプリ
クロスプラットフォーム開発ウェアは急発展の最中

Android Bazaar and Conference 2011 Winterに行ってきた

開催日:2011/01/09
場所:東京大学本郷キャンパス
http://www.android-group.jp/abc2011w/

雑感、まとめなど

基調講演 日本Androidの会会長 丸山不二夫氏

「高機能化=高価格化は深刻」は同意
せっかくコモディティ化し、高性能化してきているのに水を指しているように感じる

招待講演 総務省情報通信国際戦略局情報通信政策課長 谷脇康彦氏

「ITの利活用 特に教育、医療、電子政府が日本では遅れている」
政府、役所の手続きで電子化されているものがあまりにも少なく感じる
決まりきった業務は電子化し、余剰人員を先進的な内容に割り当ててほしいものだ

電子カルテは自分もほんのちょびっとかじったし、徐々に浸透してきている(もちろん、まだ活用しきれているようには思えないが)

教育分野については現在の小学校や中学校がどのように活用しているかわからないが、
先生ごとにカリキュラムを練って授業をするのは少し勿体無いかなぁと思う
せめて、各先生の授業や教材を電子化し、人気や為になる授業を後進のために貯めておいて欲しいと思う

サイバーエージェント Ameba for Android ~来るべきスマートフォン時代へのデバイス対応~ 株式会社サイバーエージェント 執行役員 新規開発局 局長 長瀬慶重氏

・数字系の話
サイバーエージェントの数字系の発表はありがたい
日本国内でのAndroidの端末の分布状況がわかる数字だった

また、Androidトラフィックスマートフォンのうち20%もあるというのが驚きだ
すでに無視できない数だが、Android対応を各コンテンツプロバイダは真剣に考えなければならないだろう

Androidの開発の自由度は周知の事実だが、すぐにでもバージョンアップ版を配信できる点がアジャイル開発向きというのはたしかにそうだなぁと感じた

Amebaの開発カルチャー
社員にiPhoneAndroid配布というのはうらやましい
毎週のように経営陣に提案ができるのもスピード感があり素晴らしい
「企画書よりもプロトタイプ!」も技術者は手を動かしたい人が多いからなぁ

NFC SONY ソニー株式会社FeliCa事業部プロダクト&サービス部 マネージャー 相馬功氏

iPhoneにチップを提供しているBrodocomがNFCのベンダーを買収したからiPhoneNFC/Felicaが実装されるかもしれないというのはわくわくしますね
ただ、NFCに関してAndroid自体対応が読み込みのみだったり、FelicaSDKがないから高度なことはまだできなそう

HTML5によるリッチクライアント開発手法についてあれこれ 白石俊平氏

「オフライン対応などをするためにUIとデータの分離をより厳密にする必要がある HTTPリクエストを減らすためにブラウザ側でキャッシュすることが必要」
スマートフォンはブラウザが限られているから先行してHTML5に対応できる
ネイティブアプリをつくらなくてもリッチなコンテンツが作れる

Androidウェブアプリケーション連携術 はてな 渡辺博文氏

実装でつまずいたことが事細かに発表されていて開発者にはありがたい内容
さっそく自分のアプリにも反映しよう

Android2.3(Gingerbread)のAPI解説 日本Androidの会

新機能をざっと説明してもらえた
NFCが読み込みくらいしかできないのが残念だなぁ
StrictModeはデバッグで使ってみようと思う
2.3ではないけど重要な話としてはHoneycomb リリースではメインスレッドでのHTTP通信はfatalエラーになるってのはユーザに取ってはエラーが少なくなって良いかも、実装する人間は気を付けないといけないけど

Android Usabilltiy Seminar 2010に行ってきた

場所:代々木ビジネスセンター二号館
13:20に開始
http://itpro.nikkeibp.co.jp/android/AUS2010/index.html

◆13:00 - 13:05 Android Application Award 2010-11 Winterの紹介

日経BP社 ITpro 菊池隆裕

春に開発者から聞いたらユーザビリティについてのセミナーが聞きたいということがあったのでセッティングした

◆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」などを解説します。

フリーランスFlash Developer

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

HTML5Flashの機能比較
 ブログに載せています
 Flashは1社独占だがその分開発スピード、機能追加が早い

 モバイルでHTML5CanvasFlashで比較してみた
  ・3DはHTML5だと重いが、Flashだとサクサク動く
  ・線のレンダリングはHTMLだとちょっと重いが、Flashだとサクサク動く

  Android版のFlashGPUで処理しているので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でも動作するように開発していた
 パフォーマンスチューニングせずに済んだ

AIR for Androidだったから
 動作確認が楽

●問題
 ギャラクシー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とのこと。
ヤマダ電機太っ腹!

早速レビューを。
新しいタッチパッドはボタンがなくなりタッチパッド全体がボタンの役割をしているのだがのクリックは少し押しづらいかも。
タッチパッド下の方は思った通りにクリックできるんだけど、上の方に行くにつれて思った位置でクリックできないです。

以上、使用数分での感想。