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自身にdata要素をもたせる

By: See-ming Lee – CC BY 2.0 目次1 外から追加2 最初からView内で設定 外から追加 $.dataはうまくいかないので、attrでやった [crayon-5 …

Backbone.Marionette+NedbでElectron♪

By: Jairo – CC BY 2.0 目次1 はじめに2 環境3 yarnのインストール4 electronのインストール5 開発環境の概要6 webpackでライブラリの同梱7 g …

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

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

Underscore.jsのリファレンスなどのリンクメモ

By: Anne-Lise Heinrichs – CC BY 2.0 Underscore.jsは便利な関数ライブラリ. Backbone.jsが依存している.一部でアンスコと呼ばれてい …

ecoテンプレートでヘルパーを使う

By: Stephanie Dillingham – CC BY 2.0   参照 backbonecoffeescript.com/eco-helpers-tutorial e …