logo

あっという間にFacebookアプリを立ち上げてみる!【あなたも今から】~Rails3+ニフティクラウド C4SAで作る、Facebook画像検索アプリ~ - (page 3)

CNET Japan Ad Special2012年11月22日 12時00分
  • このエントリーをはてなブックマークに追加

 ニフティクラウド C4SAでRails3を使ったウェブサイトの構築は、いよいよウェブアプリケーションの例として「Facebook画像検索ページ」の作成に進みたい。Facebookの公開している記事から、入力したキーワードで画像とメッセージを検索するウェブアプリケーションだ。

まず用意したFacebookアプリを公開してみる

 今回は実際にキャンバス上でアプリを動かしてみたい人向けに、gitを使ったソースコードの取り込み方法を説明する。

 今回のFacebookアプリに関するソースコードなどは、githubに登録している。

 githubとは、gitというソースコード管理システムを使った、無料のソースコード共有サービスである。ニフティクラウド C4SAには、gitを使ったシステムと、連携する機能が用意されているので、これを使えば本記事のソースコードなどを自分のキャンバスに取り込むことができる。今回はあらかじめ事前準備をしておいたソースコードを利用して公開してみよう。

 1、既存のプロジェクトディレクトリが存在するので、管理画面の「ファイル」で/home配下にあるrails_appを適当な名前に変更しておく。

 2、gitを使うには、管理画面の「ファイル」から、右上にあるgit登録ボタン (WebDAVボタンの左隣)を押す。

 3、gitの情報を表示するボックスが表示されるので、リポジトリURLに(https://github.com/NIFTYCloud-C4SA/c4sa_sample.git)、ディレクトリ名に(rails_app)を入力して「実行する」ボタンを押すと、プロジェクトのファイルをニフティクラウド C4SAにダウンロード開始する。

 4、githubからのファイル取り込みが完了したら、バンドルインストールを実行して、その後に「デーモン管理」からunicornをリスタートすることで、アプリを実行することができる。

Facebook画像検索アプリの公開を確認

 これでFacebookアプリは公開状態に。さっそくアクセスしてみよう。

 http://付与されたURL/facebook_connection/indexへアクセスすると入力フォームが現れた。

 ここで、好きなキーワードを入力して検索ボタンを押すと…

 結果は見事に、成功した!Facebookで公開済の記事から、該当するものをサーチした上で、画像付きで表示されているのが、分かるだろうか。

※FacebookのAPIの関係上、タイミングによっては動作が確認できない場合がござ います。
CNETでは上記手順で動作を確認済みです。

今回利用したプラグインとライブラリ

 今回作成したアプリではFacebook公開記事にアクセスするAPIを利用するが、RubyやRailsの標準機能だけでは若干手間が掛かるため、下記のように事前準備を行った。

事前準備1 FacebookのAPIと連携するためのプラグイン「Koala」のインストール

まずFacebookのAPIと連携するためのプラグイン「Koala」のインストールを行う。 Koalaは、Facebookが様々な情報を外部に提供するために用意しているAPIをRubyから用意に使えるようにするライブラリだ。KoalaはMITライセンスで配布されており、https://github.com/arsduo/koala/ から取得することができる。

事前準備2 jQuery Masonryのライブラリ導入

HTMLの表示には、jQuery MasonryというJavascriptのライブラリを使っている。これは、表示する情報を、Pinterest(http://pinterest.com/)のように、隙間なく敷き詰めてくれるライブラリで、これを使うことで容易にPinterest風のページを作成することができる。

jQuery Masonryのファイルを設置するには、jQuery Masonryを使うには、jQuery Masonryのページ(http://masonry.desandro.com/)から、jsファイルjquery.masonry.min.jsをローカル環境ダウンロードする。キャンバスの管理画面上の「ファイル」ツールを使って、jquery.masonry.min.js を/home/rais_app/app/assets/javascriptsにアップロードして、設置完了となる。

assets配下にファイルを設置した場合、HTMLにファイルへの参照タグは自動的に追加されるので、特にファイル編集などの作業は必要ない。

Facebookアプリのコードの中身をチェック!

 ファイル画面で
/home/rails_app/app/controllers/facebook_connection_controller.rbを開くと下記のようなソースコードが表示されるのを確認してみよう。

1 : class FacebookConnectionController < ApplicationController
2 :  def index
3 :    @keyword = params[:keyword]
4 :    
5 :    if @keyword != nil and @keyword.length > 0 then
6 :      graph = Koala::Facebook::GraphAPI.new
7 :      @search_results = graph.search(@keyword, {:type => "post", :limit => 50})
8 :    end
9 :  end
10: end

 3行目は、検索実行した後のキーワードを取得している。キーワードがなければ、@keywordはnilとなり6,7行目は実行されない。

 6,7行目でKoalaが提供するAPIを使ってFacebookから情報を取得している。

 たとえば7行目のlimit => 50を100に変えれば、検索結果が50から100に変更可能だ。

 検索結果は、すべて@search_resultsに格納されている。

 次に、ビューのファイル
/home/rails_app/app/views/facebook_connection/index.html.erbを以下のようになっているのを確認する。

 各部分のポイント解説は下記の通りだ。

  • 1行目~25行目は、jQuery Masonryの仕様に従った、表示形式に関する設定である。
    jQuery Masonryは、特定のクラス名がついた<div>タグ (この場合<div class="item">)を一つのブロック単位とみなし、
    それを隙間なく配置する。あとは、列の幅や、アニメーションの速度などを設定している。
    詳しい仕様は、公式ページ(http://masonry.desandro.com/)を参照していただきたい。
  • 30行目~33行目は、キーワードを入力するフォームを表示している。
  • 37行目のループは、検索結果でヒットした記事の数だけ繰り返すためのループだ。
  • 41行目~44行目で、実際の結果を出力している。結果にメッセージがある場合は、メッセージも表示している。

まとめ-- ニフティクラウド C4SAのススメ!

 今回、ニフティクラウド C4SAを使ってRailsアプリを作成してみたが、見ていただいたとおり、キャンバスを作成して、すぐにコードを書くことを始められた。筆者が試したところ、ニフティクラウド C4SAの登録を開始してコーディングに入るまで10分もかからない。

 また、作業に必要なツールも全て管理画面上に揃っており、非常に効率のいい環境であり、クラウドで提供されているため、キャンバスを複数作成してテスト環境と本番環境で分けてみたり、スケールアウトで複数台構成による負荷分 散を実現したりする事もできる。

 そういった意味で、開発だけではなく、運用・保守に関しても大幅な効率アップが期待できるだろう。

 PHPやRubyなどでウェブアプリケーションを開発し、公開する事を考えるのであれば、まずはニフティクラウド C4SAへ登録してみて無料で試してみることをお勧めする。

ニフティクラウド C4SAの情報配信をしているFacebookファンページ
 http://www.faceebook.com/niftycloudc4sa

CNET Japanの記事を毎朝メールでまとめ読み(無料)

-PR-企画特集

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]