ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/598/room ーーーーーーーーーーーーーーーーーーーーーーー

1. 「wri.pe」を事例に学ぶ
自作サービスの作り方
Yuichiro MASUI / @masuidrive
∼ 開発編 ∼

2. アジェンダ
• wri.peの構造 - 10min
• サーバ = API - 15min
• クライアント = Javascript - 15min

3. source code
http://bit.ly/open-wripe

5. 欲しいメモ帳アプリ
• プログラマならMarkdown
• gmailみたいなArchive
• カレンダービュー
• 全文検索・キーボードオペレーション
• iPhone/iPad/Androidサポート

6. 設計
• 1週間以内に常用できるレベルのサービス構築
• 自分でずっと使える
• メンテナンス・バージョンアップを簡単に
• データの保全性を第一に

7. 技術選択
• 認証はGithubとFacebook
• テストも兼ねてRails 4.0.0 + Ruby 2.0
• JavascriptはBackbone.js + HTML5 storage
• 運用はPaaSで

8. Single page app
• Javascriptを使って遷移をしないWebアプリ
• データのやりとりはAjaxを使う
• サーバはAPIのみ提供

9. View
Model Controller
Browser
Ruby on RailsMySQL
WebAPI

10. rake stats
+----------------------+-------+-------+---------+---------+-----+-------+
| Name | Lines | LOC | Classes | Methods | M/C | LOC/M |
+----------------------+-------+-------+---------+---------+-----+-------+
| Controllers | 699 | 608 | 17 | 59 | 3 | 8 |
| Helpers | 50 | 47 | 0 | 4 | 0 | 9 |
| Models | 537 | 478 | 17 | 38 | 2 | 10 |
| Mailers | 0 | 0 | 0 | 0 | 0 | 0 |
| Javascripts | 2048 | 1638 | 27 | 327 | 12 | 3 |
| Libraries | 285 | 234 | 2 | 27 | 13 | 6 |
| Controller tests | 51 | 25 | 7 | 0 | 0 | 0 |
| Helper tests | 28 | 21 | 7 | 0 | 0 | 0 |
| Model tests | 35 | 15 | 5 | 0 | 0 | 0 |
| Integration tests | 0 | 0 | 0 | 0 | 0 | 0 |
| Feature specs | 476 | 342 | 0 | 8 | 0 | 40 |
+----------------------+-------+-------+---------+---------+-----+-------+
| Total | 4209 | 3408 | 82 | 463 | 5 | 5 |
+----------------------+-------+-------+---------+---------+-----+-------+

11. Javascripts!
57%
Libraries!
8%
Models!
15%
Controllers!
20%

12. サーバ = API
• Javascriptから呼ぶAPI
• クッキーを使ったセッション
• REST+JSON
• Railsのresourcesで定義

13. API
• 認証
• ページのCRUD
• Archive
• 検索

14. 認証
• GitHub / Facebookを使った外部認証
• Deviseなどを認証系プラグインを使わない
• Koala(FB)/octokit(GH)のgemを使用

15. ページのCRUD+Archive
• ページリストの読み込み + paging
• 日付ごとのリスト → カレンダー
• Archive / Unarchive

16. クライアント解説記事
http://html5experts.jp/masuidrive/594/

17. クライアント
• Single Page application → HTML5
• CoffeeScript
• backbone.js
• Local storage + App cache

18. CoffeeScript
• Javascriptを生成する言語
• あまり新たな機能はなく、文法の変更が主
• クラス指向
• Rails 3から標準

19. backbone.js
• クライアントMVCフレームワーク
• Event, Routerのみ利用
• 対抗馬: AngularJS

20. Local storage
• Javascriptから使えるKey-Valueストレージ
• ドメイン単位で保持
• ウインドー間で共有される
• 容量は5MBまで

21. Session storage
• ウインドー単位で保持されるストレージ
• 容量は5MBまで
• iOS Safariの再読み込み対策

22. App cache
• 読み込みの高速化の為
• iOSではバグあり
• 一部オフラインでも動く様に

23. 何を重視するのか
• 期日
• 速度

24. まとめ
• wri.peのソースコード公開しました
• wri.peはサーバ:クライアントが概ね1:1
• モデルを正しく作ればAPIは簡単
• Backbone.jsは全機能使う必要は無し

27. 宿題
APIを設計する上で大切なことを
書き出しなさい