Backbone.js

Backbone.jsでGooleアカウントにOAuth2でログインしてGmailのタスクリストと同期するToDoリストをつくるというチュートリアル

投稿日:

dailyjs.com/2012/11/29/backbone-tutorial-1/

たぶんまだ4割くらいしか理解できてない

JavaScriptで、nodeのhttpサーバとgrunt.jsで圧縮、テストはmochaという組み合わせ

テンプレートはtext.jsっていうの

純粋なhtmlとjsなのでS3でもDropBoxでも公開できる

解説は基本的に超丁寧

GitHubで完成コードを公開していて、毎回コミットしているので、そのコミットまでリセットすれば、その時点のコードが得られる

そのコミットのdiffをみれば、どこを変えたかわかる(重要 ←本文中に書いてないこともあるからこれをみて確認する必要がある 名前空間の追加とか)

*diffの見方

毎回最後にコミットもふくめたソースへのリンクがある

screenshot

ここからlatest commitのリンクでdiffが見られる

screenshot

 

* チュートリアルやってるとpart4 で詰まる

なぜかというとBackboneのバージョン0.9.10で内部のoptions.successっていうメソッドの引数が変わったから

その指摘はpart 9にあるので、それをみるか完成コードをみる

 

スケルトンの準備

httpサーバの用意

grunt.jsの用意

require.jsの用意

Google APIの使い方

まず登録してAPI keyとClient IDを取得しておく

code.google.com/apis/console/

Google API JavaScript用クライアントライブラリ client.js

code.google.com/p/google-api-javascript-client/wiki/Authentication?hl=ja

OAuth2

こちらも登録してproduct nameとhomepage urlを登録しておく

localhost:3000/でも使える

tasklists API

タスクリストのCRUD

developers.google.com/google-apps/tasks/v1/reference/tasklists#resource

tasks API

タスクのAPI

developers.google.com/google-apps/tasks/v1/reference/tasks

Backbone.Eventsを継承

Google TasksのAPIを使うには認証が必要

一番基本クラスであるBackbone.Eventsを継承してGoogleアカウントに認証するAPIマネージャをつくる

認証が成功すると”ready”というイベントを発行するようにして、これが発行しないと進まないようにしておく

Oauth2

code.google.com/p/google-api-javascript-client/wiki/Authentication

認証コードの例はここにある

Bakcbone.syncの書換え

あとは、Backbone.syncをオーバーライドしてBackbone.jsの出力にあわせればOK

Backbone.sync(method, model, options)のmethodを”read”、”create”、”update”、”delete”の4つにswitchでわけて処理する

これに対して、Google Apiのメソッドは”list”、”insert”、”update”、”delete”だからこれを変換する

ここではBackbone.gapiRequest(request, method, model, options)という関数に渡すことにして、gapiRequestを順に拡張している

あと、最終的に必要なのは、urlとデータだから、このurlをrequest引数に、データはrequestContentというグローバルぽい変数(少なくともBackbone.syncからもBackbone.gapiRequestからもアクセスできる)にいれる

といっても、それがそうそう簡単ではなく、ステップ・バイ・ステップでREAD、CREATE、UPDATE、DELETEを順番に実装していく

 

-Backbone.js
-

執筆者:

関連記事

Backbone.jsとjQuery Mobileを一緒に使うためのリンクメモ

  By: Rick Turoczy jQuery Mobileの公式から jQuery Mobile, Backbone.js and Require.js 一例だけどエレガントなのはjQ …

Backbone.js0.9.10以降のクライアントサイドでのvalidate

Rails3.2とBackbone.jsでサーバーサイドのページネーション

By: Haldane Martin – CC BY 2.0   前提 Rails3.2とBackbone.jsでサーバーサイドのフィルタリング Rails3.2とBackbon …

三目並べゲームのAI〜原始モンテカルロ法

By: Luca Galli – CC BY 2.0 目次1 ゲーム用のAI2 シャローコピー3 AI4 勝率 ゲーム用のAI 三目並べのAIを考えてみた. 有効手をリストアップして、おの …

Backbone.jsでモデルとフォームを関連づける〜backbone_datalink.js

By: See-ming Lee – CC BY 2.0     こんなコードでフォームからjQueryでいちいち指定しているのを [crayon-5ada6a52a9 …