リブライズの裏側を見てみよう

2,512 views

Published on

Facebook Night 10で使用したスライドです。

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,512
On SlideShare
0
From Embeds
0
Number of Embeds
51
Actions
Shares
0
Downloads
7
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • リブライズプロジェクトの地藏です。今日はリブライズの裏側を見てみよう、と題して、内側の仕組みや、リブライズを拡張する方法などについてご説明します。\n
  • \n
  • リブライズ正式公開から今日でおよそ50日程度ですが、公開冊数は1万を超え、70カ所以上で利用されるようになりました。20以上のメディアでも紹介され、WBSにまで出たことに驚いています。また、リブライズの公開をきっかけに、自分たちの図書館を作ろうという具体的な動きもいくつかあるようです。これもひとえに、使ってくださるみなさんのおかげです。改めてお礼をしたいと思います。\n
  • \n
  • じぞうではなくちくらです。よろしくお願いします。\n
  • \n
  • ざくっとしてますが、だいたいこんな感じです。ちょっとざっくりしすぎなので、もう少し細かく説明していきます。\n
  • リブライズはRailsで作られたFacebookアプリですが、ひな形として、facebootstrapというものを使いました。自作のテンプレートです。いかにもTwitter Bootstrapを真似したような名前ですが、あれよりも前に作りました。以前はRailsアプリをgenerateしてから手を入れたものをgithubに上げていましたが、今は、テンプレートにして公開しています。FacebookアプリのIDとsecretを設定するぐらいで、サイトの基本形がすぐに作れます。ただ、テンプレートを見ていただくとわかりますが、かなりオレオレな感じなので、自分なりのものを作ってもよいと思います。\n
  • Gemfileに入っているgemはこんな感じです。devise+omniauthでFacebook認証をさせるところ以外はあまり特筆すべき点はありません。Facebookとのやりとりはkoalaでやっています。foursquare2というのが微妙な感じですがまだ表には出していません。まあ、そのままなくなるかも知れません。\n
  • サーバ構成はこんな感じです。さくらのVPS 4Gを使っています。というとなんだか凄そうな感じですが、仕事で作っている他のアプリもいくつか同居しています。ただ、今後の拡張を見越してAWSを準備し始めています。\nwebからdbまでもシンプルです。全文検索はSolr、キャッシュ周りはmemcached、メモリ上にあるけど永続化しておきたいところはredisを使っています。といってもマスターはPostgresにあるのであまり気にしなくてもいいかも知れません。デプロイはcapistranoを使ってます。\n
  • 次に使っているAPIです。書籍の検索、書影の取得にはAmazon、補足的にGoogle、もう少ししたらNDLのAPIも許可が下りるので使えるようになります。このあたりを組み合わせて本の検索をしています。\n
  • Facebook関連のAPIですが、ユーザのログインのほか名前などを取得する部分、OpenGraphで寄贈や貸し借りをFacebookに投げる部分で主として使っています。本棚を作るときにFacebookページが必要なのですが、この情報を得るためにページ管理パーミッションを取得しています。ただ、これはページの情報を読み込むときだけに利用しています。何か書き込んだりとかはしません。\n
  • 本とは関係なく、サービスの運用上利用しているAPIもいくつかあります。今はバックアップだけですがAmazon S3。将来的には画像などはCloudFrontに置こうと思っています。SESはメール送信。dkimでサインしたメールを送っています。bitlyはあたりまえですが短縮URLを作るため。\n
  • ここまではアプリの構造についてでしたが、これからバーコードUIについてご説明したいと思います。\n
  • スキャンの流れはだいたいこのようになります。\n(1) バーコードリーダーでスキャン (2) Amazonに問い合わせて結果を得る (3) 次にGoogleへ問い合わせ (4) それでも見つからなければ国立国会図書館に問い合わせ (5) しかるのちに本の情報を返します。利用者のスマートフォンの読み込みでは(2),(3),(4)はなく、ユーザのデータベースとつきあわせます。\n
  • バーコードUIはこのような形です。\n本棚を開設していない、ログインしていない人には出ません。\n数字 -> 読み取ったあと、ISBNとして正しくないものはサーバに送らない、ということはやっています。\nクラス化したものはCoffeeScript、HTML中に埋め込まざるを得ないところはJavaScriptをそのまま書いています。\n
  • スキャンする対象は、本の場合ISBN、スマホの場合Facebook IDです。\nそれぞれ、読み込まれた直後は、本のページや本人のページに移動しますが、本の場合は本棚に登録されていなければ登録も行います。また、本のスキャンと前後してFacebook IDをスキャンすると、寄贈や貸し借りのアクティビティとして認識されます。\n
  • 寄贈や貸し借りですが、本のスキャンとスマホのスキャンが短い間に行われたことで関連づけをしています。\nこれにより、最低限の操作で完了します。同じタイミングでFacebookへActionをポストします。\n
  • 続いてFacebook連携について\n
  • 連携が起きるのは、今のところ「寄贈」と「借りる」が発生したときのみです。それぞれ事前にFacebookの承認を得たOpen Graphのアクションを送り出します。内容としては、誰が、どの本を、どこでアクションしたかですが、リブライズではFacebookページと本棚を紐づけてあるので、「どこで」にはFacebookページのIDを指定しています。これにより、本人のタイムラインだけでなく、Facebookページにも寄贈・借りるというアクションが残ります。また、「返す」についてはFacebookには送信しません。返すアクションをみても特に周辺が喜ぶことはないかなあと思ってのことです。\n
  • 続いて、リブライズが持つAPIについてご説明します。\n
  • リブライズAPIは、現段階では、リブライズ上で開設された本棚に並んだ本を返すだけのものです。しかし、サイトに埋め込んで利用することができます。\n
  • リクエストは、本棚につけられたID=(数字)で指定されるURLに対し、何件表示するかをパラメータで指定します。\n
  • レスポンスはJSON形式です。\n
  • 実際の利用例をご覧ください。リブライズを一緒に作っていて、下北沢オープンソースカフェのマスターでもある河村さんが作られたウイジェットです。オープンソースカフェのトップページ下部に本の一覧を表示しています。このプログラムはオープンソースで提供しています。\n
  • WordPressのプラグインもあります。CakePHP2実践入門という本を出されている安藤さんが、リブライズのリリースを記念して作られたものです。今日はこの会場にも来られているようですので、わからないことがあればご本人に直接説明してもらってください。\n
  • 今後提供予定のAPIですが、本棚の内容のランダムに表示、貸し出し中のものがわかるようなパラメータをくっつけることから始まり、ISBNのない本を登録するインターフェースや、ISBNベースで本の有無や置いてある本棚の一覧を得る、というものも準備中です。リリース時期は未定ですが、来月ぐらいには出せるかなあというところです。\n
  • \n
  • リブライズ運営スタッフは現在のところ日本時間で生活していますが、起きている時なら、いくつかの手段でコンタクトを取ることができます。Facebookページだけでなく、公開用のディスカッショングループもありますし、Twitter、メールアカウントも用意しています。今のところリブライズ導入の相談がメインですが、技術的なことにもできる限りお答えしたいので、遠慮せずに投げてみてください。\n
  • リブライズはこれからも、本棚が面白くなっていく仕掛けをどんどん用意していきたいと思います。\nご清聴ありがとうございました!\n
  • リブライズの裏側を見てみよう

    1. 1. リブライズの裏側を 見てみよう! 地藏 真作 リブライズ・プロジェクト
    2. 2. まずはご報告
    3. 3. 10月23日現在• 70カ所で10,000冊の登録• 北は仙台、南は日本を超えてマニラまで• WBSでも紹介されました • http://j.mp/librize-wbs• 新たに本棚を作るプロジェクトもいくつか始動• 使ってくださるみなさん、ありがとうございます! http://librize.com
    4. 4. ちょっと落ち着いて自己紹介
    5. 5. プロフィール• 地藏 真作 ☞ ちくら しんさく と読む。まだ親戚以外で同姓に会ったことなし• Javaに使われるのがイヤになって5年ほど前からRails使いになったフリーランス エンジニア• 基本バックエンド系で、API作って終わりにしたいけどできないのでフロント も少々• 一昨年PAX Coworkingに行ったことで人生が変化し、去年Startup Weekend Tokyoに行ったらもっと変化した• コンセプトシェアハウスを紹介するサービスColish、ビジネスを楽しくする バックオフィスサービスMerryBizとかに参加 http://librize.com
    6. 6. 今日の本題、リブライズの裏側
    7. 7. ざっくりと•Railsアプリ•サーバはさくらのVPS•いろいろAPI使ってます http://librize.com
    8. 8. Railsアプリ•facebootstrap•RailsでFacebookアプリを作る 時の自作テンプレート•☞ https://gist.github.com/ 2943435 http://librize.com
    9. 9. Gemfile• rails, pg, sass-rails, coffee-rails, therubyracer, uglifier, bootstrap-sass, font-awesome-sass-rails, jquery-rails, slim-rails, formtastic, formtastic-bootstrap, tabulous, configuration, devise, omniauth, omniauth-facebook, koala, rolify, unicorn, memcached, memcache-client, capistrano, amazon-ecs, isbn, cobravsmongoose, chunky_png, barby, browser, rspec-rails, factory_girl_rails, database_cleaner, foursquare2, ruby_tweaks, bitly, kaminari, sunspot_rails, progress_bar, sunspot_solr, state_machine, flag_shih_tzu, geokit, dkim, aws-ses, paperclip, thin, newrelic_rpm, awesome_print, redis• see https://gist.github.com/3912617 http://librize.com
    10. 10. サーバ•nginx ☞ Unicorn ☞ Rails app ☞ PostgreSQL•Solr, memcached, redis•デプロイ ☞ Capistrano http://librize.com
    11. 11. 使っているAPI (本の検索)•Amazon Product Advertising API•Google Book Search API•NDL(国立国会図書館) OpenSearch API (近日予定) http://librize.com
    12. 12. 使っているAPI (Facebook)•ユーザアカウント•Open Graph •寄贈・貸し借り•Facebookページの一覧 http://librize.com
    13. 13. 使っているAPI (その他)•Amazon S3, SES•bit.ly http://librize.com
    14. 14. ここからが核心、バーコードUI
    15. 15. スキャンの流れ (1) リブライズ (2) Amazon (3)(5) (4) Google b c NDLa http://librize.com
    16. 16. バーコードUI• 本棚を開設している人だけに表示• バーコードリーダーは数字と改行 コードを発行するキーボード• 数字を読み取ってサーバに送ればOK• CofeeScript,JavaScriptで記述 http://librize.com
    17. 17. スキャン内容による分岐• バーコードリーダーで数字を読み込み • ISBN? ☞ 本のページに移動 or 本の 登録 • Facebook ID ☞ 本人のページに移 動 or 寄贈・貸し借りなどのアクショ ン http://librize.com
    18. 18. 寄贈や貸し借り•実現方法はシンプル•本のスキャンとFacebook IDの スキャンが短いタイミングで行わ れたときに紐づける http://librize.com
    19. 19. Facebook連携
    20. 20. 連携の内容•寄贈と借りたときのみ•Open GraphのActionをポスト•誰が、どの本を、どこで、(寄贈¦ 借りる)したか http://librize.com
    21. 21. リブライズAPI
    22. 22. リブライズAPIとは•ブログなどに本棚の情報を表示さ せることができるAPI•すでに下北沢オープンソースカ フェのサイトで利用•WordPressのプラグインも登場 http://librize.com
    23. 23. リクエスト• 本棚の新着情報を[n]件得るには • http://librize.com/places/(数字)/ place_items.json?limit=[n]• 本棚の番号は、本棚ページのURLが、 places/(数字)となっていればその数字。そう でなければ、「最新の返却本」のリンクにある places/(数字)/returned の数字部分。 http://librize.com
    24. 24. レスポンス• JSONが返されます。• フォーマット • title: 本の題名 • url: 本のURL • date: 登録した日付 • image: 書影画像へのURL • content: 本の説明文(空の場合もある) http://librize.com
    25. 25. サイトに埋め込み <div class="librize-widget latest" data-place="5"></div> ☞ github.com/librize/widgets 河村 奨さん作 @cognitom下北沢オープンソースCafe http://www.osscafe.net/ http://librize.com
    26. 26. WordPressプラグインプラグイン説明から引用公開されているリブライズのAPIを利用して指定した本棚から最新の書籍情報を任意の件数表示します。使うには`[librize place=場所ID limit=件数]`のショートコードを投稿やページ、テキストウィジェットの中に記述します。 @yando 安藤 祐介さん作 ソース ☞ https://github.com/yandod/wp-librize ダッシュボードからインストール、有効化。 http://librize.com
    27. 27. 今後提供予定のAPI•本棚にある本のランダム表示、貸し出し状況•ISBNを持たない本の登録•特定の本の有無、置いてある本棚の一覧を得る http://librize.com
    28. 28. いつでもどこでも何でも誰にでも
    29. 29. オープンです (起きてるときのみ)• Facebook ☞ http://facebook.com/ librize• Facebook公開グループ ☞ http://j.mp/ TsZ1li• Twitter ☞ @librize• メール ☞ welcome@librize.com http://librize.com
    30. 30. librize.com あなたの本棚がもっと面白くなりますように♪

    ×