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でViewのrender前後にコールバック処理を追加する

By: Michael Gil – CC BY 2.0 afterRender() callback in Backbone.js Views [crayon-599da1e34a7fd3 …

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

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

Rails4でMarkdownをリアルタイムプレビュー〜backbone-on-rails&marked.js

By: Kool Cats Photography over 2 Million Views – CC BY 2.0 目次1 前回2 サンプルアプリ3 Gemfile4 generate5 …

Hallo.jsのMarkdownをWYSIWYGで編集できるサンプルがぐう便利だったのでRails3.2とBackbone.jsでやってみた

hallojs.org/demo/markdown/ これ  とにかく一度さわってみて欲しいんですけど 目次1 サンプルの便利ポイント2 Rails3.2とBackboneで動かしてみる サンプルの便 …

Yeomanで最新のJavaScript開発環境を最速で整える

環境 mac OSX Lion Yeomanは最新のJavaScript開発のための統合環境を提供してくれます yeoman.io/index.html 紹介動画 目次1 インストール2 さっそくアプ …