【超会議で】 RocketLink 【Chrome拡張機能をハッカソンしてみた】
※2012/5/7 追記 ニコニコ動画とYoutubeにRocketLinkの解説動画をアップしました。
【超会議で】 RocketLink 【Chrome拡張機能をハッカソンしてみた】
一昨日、昨日の超会議、皆さんお疲れ様でした。
僕は超エンジニアミーティングの付随イベント、超ハッカソンに参加したりしてました。
「超エンジニアミーティング」
20120428123823.jpg
http://www.chokaigi.jp/tenji/conference/engineer.html
http://info.nicovideo.jp/conference/cho-engineer-meeting/
途中に兄貴や神主に遭遇するなど、エキサイティングで歪みないハッカソンとなりましたが、運良くハッカソンのテーマであった「1-click!」を体現する下記のアプリを完成、リリースすることができましたので、ドキドキしながらLT（ライトニングトーク）に登壇させて頂きました。
「RocketLink」
https://chrome.google.com/webstore/detail/mndnhmghbknomfjacklolhekkeolfocd?hl=ja
番手は二日目のトップバッターという、なかなか興奮するポジションでしたがなんとか任務を完遂できました。素晴らしい機会を与えて下さった運営、関係者の皆様にこの場を借りて改めて御礼申し上げます。本当にありがとうございました。
さて、以下にて「RocketLink」の資料を公開したいと思います。
基本的には引用、拡散ウェルカムですのでどうぞご覧下さいませノシ
------------------------------------------------------------
【RocketLink設定資料】
■概要
・インストールした後、ウェブページの読込完了後、そのページのリンクを長押しすると、そのURLを引用しているtweetがMacのRocket Dock風のUIとなって飛び出す仕様
・上記によって、例えばニコニコの動画視聴ページへのリンク元で使うと、tweetによってその動画の評判をソーシャルに、且つ画面遷移、細かな設定、複雑な操作等無しに確認することができる（↓こんな感じ）
■製作時間
・仕様決めからChromeウェブストアにリリースするまで大体２日
・実際にコード書いたのは多分６、７時間くらい
・あとは調査、超会議巡り、超会議並び。。。ｗ
※あ、でも２日目はそこそこすんなり入れました。運営さんの超対応でした
■やりたかったこと
・ニコニコ動画の動画自体の評判が「今」、「ソーシャルに」どのようなものであるかを気軽に確認してもらい、その動画を見るきっかけをサムネ、動画内コメント等のニコ動以外のサービスで増強したかった。
・また、動画というシステムの制約上、遷移後の読み込み待ち時間の長さというWebサービスにとってはおそらく最もfatalなユーザストレスがわりと存在する。
・それによるユーザの「1-click」に対する心理的コストはわりと高い
・よって、普通のウェブページのように気軽にクリックできない
例えば、「せっかく待ったのにこれ釣りかよー（#^ω^）ﾋﾞｷﾋﾞｷ」とか
・なんで、その動画を見るコストをソーシャルサービスのリアルタイムの評判を即座に確認することによって下げ、また自分の予想に反した面白い評判のノイズによって、下げる
・だってー、なんかー、Rocket DockのUIってかっこいいじゃないですかー（作った一番の動機かもｗ）
■LT用時のKeynote
①表紙
③DEMO
※三枚とかワロチwww
■細かい仕様
①ウェブページの読み込み完了イベント後に長押しするとそのリンクのURLを引用したつぶやきをポストしたユーザの画像がそのリンク近くに出るよ
②その画像をクリックするとつぶやきが１５件程Rocketするよ
③①の画像をもう一回クリックするとRocketしたつぶやき達が元の鞘に収まるよ
④③後ロストフォーカスすると①の状態に戻るよ
⑤①の画像を長押しするとtwitterの当該URL検索画面に遷移するよ
※これsearch.twitter.com/search?q=[当該URL]とかでwindow.openしてるんだけど、なぜかencodeしても[当該URL]に"/"が入ると上手く遷移できてなかったので、"/"を" "に置換してます。当日時間もなかったし、それっぽく動いてるんでまあ、いいかと。
■これから
・たかだか６、７時間で作ったプロダクトなので、まだまだバグが多い(；・∀・)
・例えば、長押し後、RocketLinkのペインが画面の一番左上に行っちゃうとかｗ
・なんで、バグフィックスをまずは最優先で取り組みます！！
・それがあらかたすんだら、あとは例えば下記のような必要と思われる機能追加をやろうかなと
１． つぶやきの表示件数を今の１５件固定から設定できるようにするとか
２．個別のつぶやきをクリックしたらtwitterの当該画面に遷移するとか
３．今だと検索条件が単純にそのリンク先のURLだけ（正確にはhref属性値）なので、
なんかいい感じのヤツをいい感じに設定するとか
４．自分がフォローしているtwitterアカウントを優先的に、且つ見た目も派手にするとか
５．tweetのポストとか
６．つぶやきが取れなかった時にもなんかお知らせするとか
７．使い方周知用のてってってー動画の投稿とか
・でも基本的には使ってくれる方々のレスポンスで上記の機能追加は決めて行きたいなあというのが本音ですねえ。
まあ、レス、あればですが(ﾉ∀`)ｱﾁｬｰ
------------------------------------------------------------
以上、最後になりましたがこの度は、ハッカソン会場で心良くご対応下さったスタッフの皆様、そして最近ではおそらく一番感激したオファーを下さった @cho_hackathon さん、そして当日LTにお越し下さった全ての超会議参加者の皆さん、本当にありがとうございました。
日本のCGMが半端ではないことをこれからも片隅で生温かく享受しつつ、自分も隙があればどしどしCGMしてきたいと思います。
それでは、cgm strong! ノシ
TiLE20
＜Titanium SDK 2.0＞
■Titanium webも同時リリース
■レイアウト
・速度アップ
・レイアウト完了時のイベント追加
・バッチ新機能
・長さのauto指定
⇒定数で指定（fill、size）
⇒画面に対してなるべく大きくか、小さくかを指定
・レイアウト指定のコードをStartlayout endlayoutで括るとそれらの間の指定が一挙に描画される
・Updatelayoutも同様の描画
・Postlayoutで描画完了時のフックができる
・dp等、すべてのsize単位に対応
＜ACS module＞
■Appcelerator Cloud Service module
■2.0以降は、SDKにバンドルされている。使用するにはTi.Cloudをrequire
■通信は暗号化とOAuthでセキュア
■APIキーよりOAuthが優先される
■Cloud db
・SQLiteのD層の書き換えも1時間ほどでいける
・よく使う機能であれば、フィーチャーを組み合わせることでサーバーサイドはわりとノンプログラミングでいける
＜Mobile Web RC1＞
■Mobileと同様のコードでWebの開発ができるよ
■全てではないが、大体のTi Mobile APIは実装済み
■写真等、モバイルにしかないAPIは実装無し
■Module API ドキュメント
＜Titanium studio＞
■400を超える改善
■Cloud service enableボタンで既存のプロジェクトもCloud Serviceを利用出来る
■Cloud Serviceを非対応にしたい場合は、tiapp.xmlの中のacsタグを削除でおｋ
■ModuleのGUIコンソールができた
＜質疑応答＞
■ACS6月までフリー、料金の詳細はその後？
■データセンターは今はwest coast
■ブラックベリー対応はあと3ヶ月くらいで公開？
■ACSへのFileアップロードは多分、10M程度？
＜LT＞
■@donayamaさん（Titanium News）を肉眼で確認
いつも土曜日を楽しみに待っております。陰ながら応援しておりますm(_ _)m
■xib2jsの@daoki2さん（Frog on Mobile）を肉眼で確認
なんとCommonJS対応をされているとのこと（リリースは来週？）！！
しかもボンジュール介してエミュでWYSIWYGできとる！！！
これはもう使いわない手はないですな、ありがたや〜
※Appcの中の人や、200人近い方々の熱気が伝わる良いパーティーでした。
僕も明日からまたモリモリTiしようと思います。
ABC2012Spring - PhoneGap+jQueryMobile
「WebデザイナーがPhoneGap/jQueryMobileで生み出す『AndroidアプリのUX』」
GMO：稲森
■メニュー
・PhoneGapとjqeury mobileとは
・基本的な導入・開発
・デモ
■自己紹介
・yaplog,GMOクリック証券,gゲー,ソーシャルアプリその他色々
・@inamoly
・今はgゲー
ex. ソニック、KOF
・google playでgゲーと検索
■PhoneGap
・Web言語でネイティブ相当
・2011/8/1に正式版がリリース
・cs5.5でphonegapが使える
・PhoneGap:Build
->Web上でビルドできる
・CS5.5でデザイナが作れる
■jQuery Mobile
・2011/11/18 に正式版
・ワンソースで複数のデバイス
・メディアクエリ
->デバイスの画面サイズを絶えず見て、CSSを切り替えている
■導入／開発
・JQM
テーマローラーでカスタムテーマを設定
->WYSYWYG
・PhoneGap
->様々なIDEで使える
->google play用のパッチを当てる
■jqmデモ
・1.1.0がおすすめ
・究極的にはロゴとテキストを置き換えればそれで完成
・DTPのパイを奪えるかも
・PCで見ると動くけど、モバイル端末では動かないという場合も。。。
■jqm＋pgデモ
・汎用性：eclipse、スモールスタート：Dw
・ビルド３０秒くらい、デバッグも時間がかかる。。。
■メリット
・GMOとくとくショップの作成
->開発工数を抑えられる
->エンジニア２名で１ヶ月検証、１ヶ月開発
->実質：２週間
->デザイナ１名で２週間デザイン＆コーディング２週間修正
->バックエンドはほぼ作り込み無し
■デメリット
・バージョンアップが早い
・日本語のコミュニティがほとんどない、リファレンスは英語
■苦戦
・２週間jqm、デザイン崩れで一度断念
->ver.1.0のとき
->共有htmlタグにcssがガチガチに切られている
->リセット系css
・思い切ってcssを外す
->スライドのエフェクトが効かない
・ひとつづつcssを見直していけば？
->クラス数が500と膨大で無理
■条件を選べば使い勝手が良い
・画像点数が少ないのにリッチなUI、読込速度も早い
->3G回線でもはやい
・遷移エフェクトはアプリと遜色ないUIで強み
■スマホWebサービスの質を上げるTips
・ローカルストレージ
->jsonObjectをString形式で保存(キャッシュ)して利用
->API：2278.2ms / ストレージ：81ms
->圧倒的に速い
・タッチイベント
->Androidイベント(0,5s)、タッチ(0.1s)で発火
->速い
・Apacheの設定でWebの表示速度向上
->mod_pagespeed
・devicePixelRation
->画面がぼやける問題
->画像サイズを複数用意
->metaタグでdevicePixelRationごとのcss設定
■まとめ
・簡単にできる
->お客さんに手軽に見せれる
・UI仕様書はみといた方が良い
->android design
->ios human interface guidline
ABC2012Spring - appMobi
「知って得するHTML５とJavaScriptでネイティブアプリ開発、最前線」
レキサス：安田、熊澤
■自己紹介
・沖縄にある会社
・６０人ほど
■開発例
・BeatMaster Professional Edition
->リズム感を鍛えるアプリ
・ADOC
■いまシリコンバレーで流行っているもの
・HTML5 Dev Conf
->むちゃむちゃ混んでた
->HTML5,JSでゲームを作る
->オープンなWebな技術でハッピーになろう
■appMobi
・プラットフォームフリー
・HTML,Javascript,CSSでクラウドベースのIDEを提供
・TiとPGと何が違う
■appMobi XDK
・chrome上で動く
・主要端末のエミュを実装
・ネットワーク経由ですぐに実機テストが可能
・クラウド上でiOS/Androidのアプリを無料で生成可能
・各種アクセラレータ、高速の物理計算のエンジン等が乗っている
・高速化エンジン付きWEbブラウザ
・Canvas 10倍高速化
・Box 25倍高速化
■決済機能
・Apple,Google,PayPalなど任意のシステムと連携できる、「ワンタッチ決済機能」
・ユーザ情報をクラウドには置かない
■Demo
・ローカルにサーバを立ち上げる
・好きなエディタで編集
・IDEで再読込
・外部アプリとの連携
・クラウド上にデプロイ
・コンソールからアプリをメールで送信
・apkファイルを書きだす
->プラグインを使うと独自のJSと連携することもできる
->ビルド時間は日によって変わる。。。(デモでの個人的体感：1分ほど)
■appMobiに関する日本語情報
・appmobi.lexues.co.jpで提供している
■質問
・appMobiのマネタイズは？
->投資家から数億くらい投資を受けている
・デメリットは？
->サービスとして常駐起動しているアプリ等が作れない
・ファイルサイズは？
->簡単なHTMLファイルで、平均的に3M〜3.2Mくらい
・jqライブラリは？
->自由に使える
・デザインは？
->基本的にはiOSとAndroidどちらかに合わせて開発
・Androidの開発スキンはある？
->色々ある
・センサーを使った開発は？
->加速度センサー、GPS、カメラ（AR）
ABC2012Spring - GREE_DeNA_mixi
「今までのトークセッションを覆す」
GREE：梶原
DeNA：山口
mixi：田中
■自己紹介
・３人が並ぶのは久々
■Device
・DeNA：SDKいくつあるの？４つ？
->NGコアを一番押している
->「逆襲のファンタジア」
・mixi：SSOの仕組み、とても薄い物
・GREE：いいミドルウェアがあればその都度対応。いいミドルウェアないかな
->次に作るのは完全オリジナル
->WebのアプリをそのままNative用に出す
->タイトルを増やす、更新とかあまり考えなくていいのがいい
・ゲーム機
->DeNA：福利厚生で次に買うデバイス
->PS Vitaはメモリが貧弱？
->mixi：周りでいる。あまり売れていない？
->mixi：キネクトを使ってわりと自由にいろんなもの作ってる
・ブックリーダー
->全：あまり使わない
■どんどんエンジニアがしらなきゃいけないことが増えてきた
・エンジニアの役割、専門性
->DeNA：より専門化してきた
->GREE：Webの場合はなんでもできる人がいたが、Nativeはグラフィック等分業化
->GREE：専門化は特にはさせない。
->DeNA：専門家が入ってきたらそうなっていく。
->GREE：マネージメントとアーキテクトは別れてきている
->全：一緒にやるべきものではない
■スマートフォンができる人が持て囃されてる
・mixi：UIの変革が一番大きい。なんでユーザの使うデバイスが変われば。。。
->将来的にはWebにはまとまる？
・mixi：NGコアだとWebの技術がコアになっているから対応しやすい
->Webエンジニアの給料を上げた？
->とはいえ、もうあまりOpenSocialを考えなくなってきた。
->完全に一緒のAPIにするのは難しい。
・DeNA：標準の罠。海の向こうではガラケーの話（仕様）が通じないw
・mixi：ガラケーの仕様は日本ベースだったが、次の仕様でdeprecatedに。。。
->軒並みOpenSocialから抜けて、エンタープライズの方に行っている。
->対コンシューマ向けに関しては。。。
・mixi,DeNA：FacebookのAPIはきれいですよねー。。。
・mixi：最低限の互換性。あんまり独自にするのはやりたくない
■互換性
・DeNA：メリット無い。共通化しようがない。共通化をスタートするタイミングが重要。
・mixi：例えばデータのやり取りを3社で
・GREE：危険なユーザの情報が欲しいw
・mixi：ゲームのデータを引き継げる
・mixi：ユーザの情報、認証が一緒だと良い。幸いそのような仕組みは既にある
・GREE：ユーザの登録が一番大変
・mixi：そういう仕組みをここにいるだれかが作ってくれるかなｗ
■匿名と実名
・mixi：実名性の方が運用上楽かな。暗黙的なフィルタがかかる（言っちゃいけないこととか）
・DeNA：匿名のレコメンデーションはあまり意味はない。あと友達ができない
・mixi：匿名だと人物を探せない
・全：匿名だとどうやって初めていけばよいかわからない
■ヲチ
・Socialの未来
->明るい
ABC2012Spring - Titanium
「Scaling Titanium Mobile」
キュニップ：おぐら じゅんや
■CommonJSを使おう
・Titanium Studioのテンプレートでも使われている
・ウィザードで選択して作れる
・複数人の開発
・CommonJSと異なりResourcesからの相対パスで書く
・パフォーマンスの問題がない
・メンテンナンス性が高い
・単体テストしやすい
■underscore.jsを使おう
・配列や関数に対する操作を簡単に
・関数プログラミング由来のものを多数持っている
・requireでよみこむ
・JSONをUI用のデータに整形・変換に向いてる
・人によって異なる配列の扱いを共通化させる
■CoffeeScript.jsを使おう
・Javascriptに比べて記述量減る
・バグ・ケアレスミス減る
・コールバック記述が簡潔に
・ループがシンプルになる
ex. for each when
・後置ifでプラットフォームゴトの場合分けをシンプルに
・クラスベースに設計しやすい
・文字列の変数を展開ができる
・Auto compile with Guard
■プラットフォームごとのコードを隠蔽する
・普通にやるとiOSとAndroidの場合分けが多数出てくる。。。
・分岐処理をラップして別関数にし、別モジュールにして、差異を隠蔽
■カスタムイベント
・UIだけとはかぎらない
・Application Level Event
->アプリケーション無いでグローバルに有効
->全てのコンテキスト、関数スコープ、CommonJSモジュールから参照できる
->利用にはTi.Appモジュールを使う。
->ハンドラの設定とイベントの発生
・エラー処理が分散する
->イベントを活用
・addEventListenerでfireEventするだけ
・注意
->アプリケーションレベルのイベントハンドラ内で生成したオブジェクトは、
ハンドラを明示的に削除するまでメモリに残る
->不要になったタイミングハンドラを削除
->removeEventListener
・アプリケーション全体に伝播させるイベントでなければ、ビューオブジェクトにaddEventListener
ABC2012Spring - Unity
「Unityで実践する次世代モバイルゲーム開発ワークフロー」
ユニティ・テクノロジーズ・ジャパン合同会社：大前広樹
■自己紹介
■初心者向け紹介
・誰にでも使える事を念頭にしたオープンなゲーム開発環境
・コンソールゲームの開発者の技術を手軽く使える
・いかにチェックボックス一つで使えるようにするか
・ほとんどのゲームエンジンが何かのゲームをフォーカスしてできたもの
->１０年つくってきたが、俺らゲーム作る才能ないんじゃね？
->ゲーム作りからゲームエンジン作りにメタった
■UNITYエディタ
・作りながらいじれる
・カスタマイズもあるよ
・UNITYでつくる時のスクリプトでエディタもカスタマイズできる
■プラットフォーム対応
・もともとMac向け
->競合もお客さんもいなかったw
・ターゲットを分けてビルド
■ネットワークの対応
・三つの会社がMMOの実装を提供
->すでにデモあるよ
・100コネクションまでただ？
->わりと胸厚
■UNITY ASSET STORE
エディターの機能拡張をエディタから直接検索・購入してすぐ使える
・7:3ビジネスモデル
・ex. PlayMaker
・ex. cave creator
->洞窟のテクスチャ
・ASで適当に買って、一番お金かけたいとこにお金をかけることができる
■オープンなメリット
・ぐぐればだいたい出てくる
・UNITYできる人来てという求人も増えてきてる
・UNITYでアウトソーシングもしやすくなる
■事例
・モバイルプラットフォーム
■日本のみんな使ってる？
・全世界で売上2位
・成長率1500%
・導入300社
・ユーザ10000人超えてる？
■助け合い所（Facebookコミュ）
・中のエバンジェリストが３人くらい結構エヴァンジェっている
・公式のサポートだとコストがかかるので非公式
■でもお高いんでしょ
・個人・スタートアップ企業
->無料！
->売ってもよし
・Android / iOS 基本ライセンス(34000円ずつ)
・なんと4/8まで０円！！
・Unity Pro(127500 円 / 人)
->ロイヤリティなし
・何本作ってもok
・Photoshopとかと同じ
->バージョンとかかわっても使い続けられるよ
・30日間は仕様できる
■AndroidでUnityってぶっちゃけどうなの
・実行速度
->描画や剛体物理に関してかなりいい線いってる
->自分でやると相当な熟練度が必要
・どのくらいのスペック？
->Android 2.0+, AEM7+OpenGL ES2.0対応の機種が基本動作レベル
・ただ初期の上記スペックはボロボロ
・使えるよ
・AndroidJavaObject
■Android版のUnityってJavaでかかれているの？
・Unity実装の基本はC++
->速いよ
・AndroidはNDKを使って実現
・JITも使ってる
■デバッグ
・実機につないでパフォーマンスのプロフィル
->メモリ、描画負荷、物理演算の負荷とかリアルタイムで
・MonoDevelopでAndroidにつないでスクリプトにブレークポインを設定してデバッグ
■機種依存対応
・Unity側でも相当テストしてる
->Jenkinsとか使ってガリガリやってる
・日本のユーザーで試した微妙な7機種をテストベッドに追加
・色々やってるけどやっぱり大変
・こういうツールで何が良いか
->グラフィックリッチでUXにこりたいアプリにはすごく向いてる
->Flashクリエイターとかにむいてる
->１０倍位の開発パフォーマンス
■何が変わらない？
・ちゃんと作りきれる人がいないとアプリはできない
->逆に言えば一人でできる
・開発期間は短くならない
->短くなった期間他のことやると思うのでｗ
->他のクオリティ上がる？
・色々簡単にできるから仕様のスケールには注意
->最後にまとめるのが大変
■ShadowGun
・Androidのテグラ2くらいならこのくらい動く
・GPUの特性を理解している職人のテクが必要
->Shadowgunのデータが今日公開されてるじゃん！！
->モバイルに優しい作りかたのノウハウがわんさか載ってる
->みんな見ましょう
