When it’s ready.

出来るまで出来ない

GDD2011 JPに参加した

google

年に一度のGoogleJapanの最大のイベント「Googleデベロッパーデー 2011」に参加しています。
どのセッションも見たいものばかりですが、体は一つなので泣く泣く1つ選んで聞いたものをエントリーします。
他のセッションも、きっと誰かがエントリーしてくれているでしょう・・・見たいぉ
Liveで書き込んでいるので、多分に漏れ・間違いがある可能性があります。あらかじめご了承下さい。

ウェブアプリのマネタイズ方法 @Peng Ying @302

Webを作成した後、その後のステップをどのようにやってメークマネーするのかお伝えします。

現在であればWebAppStoreがあるので、それを利用することでユーザーにリーチできます。

  • WebStoreに載せるためには、$5払うだけで載せることができます。
  • 売り切りも、サブスクリプションも、アプリ内課金が出来ます
  • 色々な規制も無いので使いやすいよ

ではどうやって作っていくのか？紹介して行きましょう

manifestファイルを作成します
  1. app, permissions, name, description, versionの各項目を設定します。
  2. アイコンの画像を作成します、16^2, 128^2 px
  3. ScreenShotを作成する 400x275（この他にもビデオとか説明画像を添付できます）
  4. アップロードします（マニフェストとIconをZipしたもの）
  5. アップ後に、追加したり編集したりできます
  6. カテゴリーを設定
  7. 金額を設定する

ここ半年の統計では、フリーミアムモデルのモデルのほうがDLが盛んに行われるようになってる

Googleプラットフォーム上でinAppPaymentが出来るようになりました。
これを利用するデベロッパーのメリット

  • 手数料は5%です。
  • カード情報やユーザー情報はプラットフォーム側で管理
  • シンプルAPIが利用可能
  • 大量のユーザーが既にいる

ユーザー(購入)側のメリット

  • １つのアカウントだけで色々購入できる

Google Chromeの Tip アンド トリックス @agektmr @502

今回は、聞かないようなるツールを紹介できればと思います。＞DevTool自体がWebアプリです。
目次

  • CSS とデザイン
  • ネットワークとのやり取り
  • コンソール
  • スクリプトのデバッグ

CSSをいろいろエディターでいじるるよ、セレクタ追加したり別途保存出来たりするぉ

ネットワークとのやり取り

Timeline：ネットワークとレンダリングの情報を表示する

コンソールAPI

console.log だけじゃないよ。他にも便利なのあるよ。
dom要素を詰め込むこともできるよ＞ console.log(document.body)

コマンドラインAPIと互換性があるよ。FFでも、IEでも使えるから覚えておいて損はないよ

dir(document.body) とやると、JSのオブジェクトで取得できるよ。
inspect(document.querySelector[''])でも抜けるよ

$0で、現在DevToolで選択しているDOM要素が抜けるよ

copy($0.innerHTML)で、選択してるDOM要素をOSのクリップボードにコピーするよ

スクリプトのデバッグ

監視したい要素に対して、右クリからサブツリーに対してブレークポイントを作成
監視対象に変更が発生すると、ブレークしてJSをステップ実行する事ができる。（＞コレハスゲー）

特定イベントだけで選択いてブレークポイント仕込むには、DevToolのElementの最下部のパネルから指定する

DevToolから、JSをオンライン編集できるのでその場でconsole.log等を追加して、特定変数を見ることが出来るよ

再読み込み不要の継続開発ができるよ！

デベロッパーなら、devチャンネルかカナリーを使うべき、もし先立ってBugを見つけた場合には率先して
new.crbug.com にアクセスをして登録して下さい。バグだけではなくて、機能リクエストも受付中なので
新規登録して下さい。

OAuth と OpenID @502

様々なWebサービスで同一のID、Passwd使ってないですか？ 危ないですよね。かと言って

OAuth2.0: Roles
  • クライアント
  • リソースサーバー
  • プロテクテッドリソース
  • オーソライゼーションサーバー
  • リソースオーナー

クライアントは、リソースサーバー内のプロクテッドリソースにアクセスしたい。

クライアントタイプとして、スタンドアロンソフトや少ない回数のアプリの場合

  1. client_id
  2. redirect_uri
  3. scope
  4. response_type>Token

を指定してオーソライゼションサーバーにアクセスする。
オーソライゼーションサーバーは、Tokenをクライアントに返す

Tokenの寿命ないであれば、クライアントは自由にプロテクテッドリソースにアクセスできる。

Tokenの仕込み先
  • HTTP headerに仕込む（これがオススメ）
  • GET paramに仕込む
  • ペイロードに仕込む

セキュアなウェブアプリ、重たい処理が発生するアプリ、長時間アクセスしたいとき

  1. client_id
  2. redirect_uri
  3. scope
  4. response_type>code

を指定してオーソライゼションサーバーにアクセスする。
オーソライゼーションサーバーは、authorization_codeをクライアントに返す
ココでもらったコードを元に、access_tokenを取得する。
（Googleの場合、3920の寿命。それ以降は、リフレッシュトークンして再発行をリクエストする）

OAuth2.0 のメリット

利用者サイド

  • 安全にデータをアクセスさせられる
  • ID.Passwdは重要なことを告知できる
  • アプリ毎にアクセス可能範囲をコントロールできる

開発者サイド

  • IDとPasswdをサービス毎に保存管理から解放される
  • 業界標準

OpenID Connect for フェデレーション について

OpenIDは、OAuth2.0ベースで作られてるのでとってもシンプルになって使いやすいぉ

ユーザーメリット

  • ID,Passwdをサービス毎に作らなくてよくなる
  • 新規にサービスを使いやすくなる（新規登録要らなくなる）


開発者メリット

  • IDとPasswdをサービス毎に保存管理から解放される
  • シビアなデータ管理しなくていい
  • 新規アカウント獲得しやすくなる

今後は、Account Chooser な方向？（accountchooser.com)

  1. シンプルにアカウント管理できる
  2. 簡単にアカウント切り替えができる（1台のPCを複数人で共有しててもOK）

Google Identity Tool Kitを使えば簡単にあなたのサービスに組み込むことが出来る。

  1. コンソールで生成されるJSをHTMLにコピペする
  2. 多少サーバー側にコードを書き足す（簡単だぉ）

Keynote