「wri.pe」を事例に学ぶ
自作サービスの作り方
Yuichiro MASUI / @masuidrive
∼ 開発編 ∼
アジェンダ
• wri.peの構造 - 10min
• サーバ = API - 15min
• クライアント = Javascript - 15min
source code
http://bit.ly/open-wripe
欲しいメモ帳アプリ
• プログラマならMarkdown
• gmailみたいなArchive
• カレンダービュー
• 全文検索・キーボードオペレーション
• iPhone/iPad/Androidサポート
設計
• 1週間以内に常用できるレベルのサービス構築
• 自分でずっと使える
• メンテナンス・バージョンアップを簡単に
• データの保全性を第一に
技術選択
• 認証はGithubとFacebook
• テストも兼ねてRails 4.0.0 + Ruby 2.0
• JavascriptはBackbone.js + HTML5 storage
• 運用はPaaSで
Single page app
• Javascriptを使って遷移をしないWebアプリ
• データのやりとりはAjaxを使う
• サーバはAPIのみ提供
View
Model Controller
Browser
Ruby on RailsMySQL
WebAPI
rake stats
+----------------------+-------+-------+---------+---------+-----+-------+	
| Name | Lines | LOC | Classes | Me...
Javascripts!
57%
Libraries!
8%
Models!
15%
Controllers!
20%
サーバ = API
• Javascriptから呼ぶAPI
• クッキーを使ったセッション
• REST+JSON
• Railsのresourcesで定義
API
• 認証
• ページのCRUD
• Archive
• 検索
認証
• GitHub / Facebookを使った外部認証
• Deviseなどを認証系プラグインを使わない
• Koala(FB)/octokit(GH)のgemを使用
ページのCRUD+Archive
• ページリストの読み込み + paging
• 日付ごとのリスト → カレンダー
• Archive / Unarchive
クライアント解説記事
http://html5experts.jp/masuidrive/594/
クライアント
• Single Page application → HTML5
• CoffeeScript
• backbone.js
• Local storage + App cache
CoffeeScript
• Javascriptを生成する言語
• あまり新たな機能はなく、文法の変更が主
• クラス指向
• Rails 3から標準
backbone.js
• クライアントMVCフレームワーク
• Event, Routerのみ利用
• 対抗馬: AngularJS
Local storage
• Javascriptから使えるKey-Valueストレージ
• ドメイン単位で保持
• ウインドー間で共有される
• 容量は5MBまで
Session storage
• ウインドー単位で保持されるストレージ
• 容量は5MBまで
• iOS Safariの再読み込み対策
App cache
• 読み込みの高速化の為
• iOSではバグあり
• 一部オフラインでも動く様に
何を重視するのか
• 期日
• 速度
まとめ
• wri.peのソースコード公開しました
• wri.peはサーバ:クライアントが概ね1:1
• モデルを正しく作ればAPIは簡単
• Backbone.jsは全機能使う必要は無し
宿題
APIを設計する上で大切なことを
書き出しなさい
増井雄一郎の「wri.pe」を事例に学ぶ、自作サービスの作り方〜開発編 先生:増井 雄一郎
増井雄一郎の「wri.pe」を事例に学ぶ、自作サービスの作り方〜開発編 先生:増井 雄一郎
増井雄一郎の「wri.pe」を事例に学ぶ、自作サービスの作り方〜開発編 先生:増井 雄一郎
Upcoming SlideShare
Loading in …5
×

増井雄一郎の「wri.pe」を事例に学ぶ、自作サービスの作り方〜開発編 先生:増井 雄一郎

737 views

Published on

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

Published in: Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
737
On SlideShare
0
From Embeds
0
Number of Embeds
284
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

増井雄一郎の「wri.pe」を事例に学ぶ、自作サービスの作り方〜開発編 先生:増井 雄一郎

  1. 1. 「wri.pe」を事例に学ぶ 自作サービスの作り方 Yuichiro MASUI / @masuidrive ∼ 開発編 ∼
  2. 2. アジェンダ • wri.peの構造 - 10min • サーバ = API - 15min • クライアント = Javascript - 15min
  3. 3. source code http://bit.ly/open-wripe
  4. 4. 欲しいメモ帳アプリ • プログラマならMarkdown • gmailみたいなArchive • カレンダービュー • 全文検索・キーボードオペレーション • iPhone/iPad/Androidサポート
  5. 5. 設計 • 1週間以内に常用できるレベルのサービス構築 • 自分でずっと使える • メンテナンス・バージョンアップを簡単に • データの保全性を第一に
  6. 6. 技術選択 • 認証はGithubとFacebook • テストも兼ねてRails 4.0.0 + Ruby 2.0 • JavascriptはBackbone.js + HTML5 storage • 運用はPaaSで
  7. 7. Single page app • Javascriptを使って遷移をしないWebアプリ • データのやりとりはAjaxを使う • サーバはAPIのみ提供
  8. 8. View Model Controller Browser Ruby on RailsMySQL WebAPI
  9. 9. 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 | +----------------------+-------+-------+---------+---------+-----+-------+
  10. 10. Javascripts! 57% Libraries! 8% Models! 15% Controllers! 20%
  11. 11. サーバ = API • Javascriptから呼ぶAPI • クッキーを使ったセッション • REST+JSON • Railsのresourcesで定義
  12. 12. API • 認証 • ページのCRUD • Archive • 検索
  13. 13. 認証 • GitHub / Facebookを使った外部認証 • Deviseなどを認証系プラグインを使わない • Koala(FB)/octokit(GH)のgemを使用
  14. 14. ページのCRUD+Archive • ページリストの読み込み + paging • 日付ごとのリスト → カレンダー • Archive / Unarchive
  15. 15. クライアント解説記事 http://html5experts.jp/masuidrive/594/
  16. 16. クライアント • Single Page application → HTML5 • CoffeeScript • backbone.js • Local storage + App cache
  17. 17. CoffeeScript • Javascriptを生成する言語 • あまり新たな機能はなく、文法の変更が主 • クラス指向 • Rails 3から標準
  18. 18. backbone.js • クライアントMVCフレームワーク • Event, Routerのみ利用 • 対抗馬: AngularJS
  19. 19. Local storage • Javascriptから使えるKey-Valueストレージ • ドメイン単位で保持 • ウインドー間で共有される • 容量は5MBまで
  20. 20. Session storage • ウインドー単位で保持されるストレージ • 容量は5MBまで • iOS Safariの再読み込み対策
  21. 21. App cache • 読み込みの高速化の為 • iOSではバグあり • 一部オフラインでも動く様に
  22. 22. 何を重視するのか • 期日 • 速度
  23. 23. まとめ • wri.peのソースコード公開しました • wri.peはサーバ:クライアントが概ね1:1 • モデルを正しく作ればAPIは簡単 • Backbone.jsは全機能使う必要は無し
  24. 24. 宿題 APIを設計する上で大切なことを 書き出しなさい

×