Mobile Hack Tokyoに参加してきた

HTML5 勉強会／セミナー

Mobile Hack TokyoというFacebookのアプリ開発についての実践的なイベントに行ってきました。
前半は講義形式で後半はHackをするという流れになっていました。


以下、振り返り。

Crash Course

  • ビギナー向けセッションとあった通り、ここではFacebookについての説明や用語の説明、各言語のSDKã‚„APIについてを網羅的に説明されていました。Facebookアプリ開発の経験がなかったのでこの辺りの説明はとても有り難かったです。
  • これ以降のセッションもそうなのですが、前半に説明をして後半はライブコーディングしながら説明をしていくというスタイルでした。
  • Graph Explorerは簡単にAPIの確認が出来るのでとても便利で、開発には必須だなぁと思いました。
  • また最初に絶対読んで欲しい本として下記の本を紹介されていました。

Mobile Platform, Best Practices, HTML5

  • ここではFacebookのモバイルプラットフォームについての現状や、HTML5で実装する際にはどうしていけばいいのかについて説明がありました。
  • 日本では特にですが、モバイルの伸びは急激でGuardianã‚„Good Reads、Pinterestといったアプリの成功事例について説明されていました。モバイルの世界ではアプリを見つけてもらうことが難しいので、OpenGraphなどFacebookというプラットフォームをうまく使って成功させましょうというお話でした。
    • Pinterestは本当によく名前を聞くのでちゃんと触ってみようと思いました。
  • OpenGraphについては後ほど個別のセッションがあるので簡単に説明されていて、その他リクエスト機能やモバイルのブックマークについてをデモを交えながら説明されていました。モバイルのブックマークのところはこれまでほとんど気にしていなかったのでなるほどなぁと思いながら聞いていました。(左側から出てくるリストですね)
  • また複数プラットフォームに出す場合もそれぞれでアプリを作るのではなく、同じappIDを使ってくださいというお願いもされていました。(アプリを同一のものと認識させるため)

Open Graph on Mobile

  • これプログラムの順番だとネイティブアプリのセッションの後なのですが、確かここにあったはずです。なぜなら料理のアプリを題材にして説明されていて、ラザニア、ラザニアと言ってるとどこからともなくものすごいいい匂いが流れてきてとてもお腹が減ったので。。。
  • 他のセッションを聞いていてもこのOpen Graphというのは今回キーワードだった気がしています。
  • 正直しっかりとは理解出来ていないので、これからドキュメントをちゃんと読まないとなぁという感じですが、ユーザーの「行動」や「対象」をオブジェクトとして定義してタイムラインに表示したりユーザーを結びつけていくような仕組みという感じでしょうか。(理解出来ていないとやっぱりよくわからない説明になりますね...)
  • 方法としては、アプリの設定画面でオブジェクトを定義してあげて、ページに「meta property="og:xxx"...」のようにマークアップして埋め込み、APIを使ってページのURLを付与して投稿するとそれがタイムラインに表示されるようになります。
  • 注意点として、Permissionの「offline_access」と「publish_stream」は非推奨や廃止になっていることや、オブジェクトの情報はFacebook側でクロールしたものがキャシュされてるのでそれを更新したい場合は「scrape=true」を使ってリクエストを投げればいいことなどを話されていました。
  • 「音楽(music)」を「聴いた(listens)」情報を取得したければ「https://graph.facebook.com/UID/music.listens?access_token=xxxx」のようなリクエストをなげれば取得出来るというのはシンプルでいいなぁと思いました。

昼食

  • すでにお腹減り気味で、しかもセッションも途中からいい匂いが漂ってきていたので、待ちにまったランチ。ビュッフェ形式でたくさん種類もあって美味しかったのでとても満足でした！

Native App Development; Android & iOS

  • Objective-CでのiPhoneアプリ開発は、やりたいと思っているもののなかなか進められていないところだったので、この説明を聞けたことはとても有意義でした。説明もライブコーディングもわかりやすかったです。基本的には使いたいAPIのDelegateを実装していく流れになのかなと思いました。Delegate地獄...！？
    • GitのクライアントとしてはSoureTreeを使っているんだというのもちょっと気になりました。
  • モバイルでは認証などの際にユーザーにテキストを入力させることは極力避けるべきで、その対策としてネイティブのFacebookアプリを使ったSSOはとてもスムーズでいいなぁと思いました。（ユーザーがFacebookに対するアクセスを認可したということを意識しなくなり過ぎるとそれはそれで問題があるなぁとは思いましたが）
  • また、Facebookアプリをネイティブで作る場合はDeep Likingの対応は必須だなぁと思いました。

AudioVroom Case Study & Mobile Web Best Practices

  • AudioVroomというサービスは今回始めて知ったのですが、HTML5で作られ、Media Queryによって複数デバイス、ディスプレイサイズに対応されたデザインはああっすごいなぁと単純に感動しました。
  • 実装についてのTipsもたくさん聞けてとても刺激的なセッションでした。アプリ・セッションのクオリティの両方が高くてHTML5で出来ることはたくさんあるし、もっと勉強しないとなと思いました。
  • それらの要素が詰まったToolSetであるMandible2もとても興味深かったです。
  • iPadを使ったプレゼンには「Refrection」というアプリを使っていてオススメということでした。

PhoneGap

  • PhoneGapについては、Titaniumの方は追っていたもののこちらはあまり追えていなかったので話が聞けて勉強になりました。ドキュメントがサンプルコードもいっぱいあってわかりやすそうでした。

パネルディスカッション

  • ここではこれまでの発表者の方が会場からの質問に答えてくれました。開発用のアプリとリリース用のアプリの扱いについての質問があり、開発用のアプリは別アプリとして作られていることが多いということなど今後開発する際に役立つ情報が聞けました。

HACK!

  • OpenGraphを使ったアプリということでどうしようかなと考えていたけどとりあえずご飯行きました。

夕食

  • お昼とはメニューが変わっていて、こちらも豪華で美味しかったです！参加者の人と話したり、何を作ろうかずっと考えていたのでもっと食べておけばよかったなぁと帰りに思いました。
  • BeerとかWineもあった！

HACK!(続き)

  • 迷ったものの、一応作ってみようかなというものが浮かんだのでとりあえず今回は一人で作ることにしました。
  • OpenGraphとか関係ない場合であれば、Facebookのチュートリアルをやりながら実装してみた日本語を英語に翻訳して投稿してくれるサービスをどうにか拡張していこうかなぁとも思っていました。HTML一枚とAPI(サーバー側)はpsgiファイル一枚だけなシンプル構成です。
  • ただ、これをただの翻訳のサービスではなく、ソーシャル翻訳サービスにするのもアリだったなぁと後から思いました。
  • 結局作ろうと思ったのは、Facebookの友達を一覧にして、最新の投稿などを一件だけを見ることが出来るサービスです。フィードだと一部の友人しか確認できないので、自分の友だちみんなの状況を確認できるページがあるといいなぁというところから発想しました。OpenGraph対応としては、近況のようなステータスをこのサービスから投稿できるようにしていけばいいかなとぼんやり考えていました。
  • 出来たのは「/me/home」のAPIを使って友達ごとの最新の投稿を表示するところまでです。実際にサービスとするならAPIはサーバー側でたたく形になるとは思いますが、この段階ではJSで実行するようにしています。JSのSDKで「FB.api」を使った場合にページングできるのかも結局調べられず。。サーバー側でやるならlimit, offsetを渡せばいいことは確認したのですが。。後は全員分を如何にして取得するか。。。
  • デザインをどうするかでBootstrapからこれまで一度も使ったことなかったjQueryMobileに変更したのですが、そのことで変なことにハマって時間を使ってしまったことももったいなかったなぁと思いました。
    • 動的にListViewを生成していたので生成後に「$('ul').listview('refresh');」を呼ばないといけないことに気づいていませんでした。。考えてみたら当たり前なんですが。。。

サプライズ！

  • Hackの途中でザッカーバーグが突然やってきてビックリしました！ろくろ回していました。

審査＆表彰式

  • かなり多くのグループの発表があり、終わったのが結局23時を過ぎていましたが、たくさんをアイデアを聞けてとても勉強になりました。すでに存在しているアプリのFacebook対応を今回のHackで行って発表されているグループもありましたが、今回イチからアプリを作っているグループもいくつかあって本当にすごいなぁと思いました。
  • 飲食店のレビューのアプリは、アイデアとしては自分も考えていたことがあったものの何も出来ていなかったので、実際にアプリとなっているのを見てすごいなぁと思っていました。
  • 発表を聞いてるだけではやっぱり悔しいので、次回があって参加出来たなら絶対発表しないとなぁと思いました。
  • というわけで、Facebookアプリについての開発についての知識はもちろんですが、Facebookアプリを開発しようというモチベーションを得ることが出来たのが一番の収穫でした。
  • 関係者の皆様、素晴らしいイベントをありがとうございました！