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

　ニフティクラウド 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の画像検索に成功！手元で試してみたところ、FacebookのAPIでは、検索キーワードに日本語を入力するより、英語やローマ字の方が多くの結果にヒットするようだ。
※クリックで拡大

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

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

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

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

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

　次に、ビューのファイル
/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