第4章.写真撮影機能を使用してみよう

この章では、第3章.機能を追加してみようで作成した機能に、カメラ機能を追加していきたいと思います。

Rhodesでは端末のカメラ機能を呼び出して使用する機能が備わっています。
それでは、実際にカメラ機能を追加していきたいと思います。

第1節.カメラを使用する準備

まず、Rhodesでカメラを使用するには、build.ymlで、カメラを使用するための設定をする必要があります。RhoStudioから「Project Explorer」でbuild.ymlファイルをダブルクリックで開いてください。
開きましたら、「Capabilities:」項目を変更します。「Capabilities」は、端末の機能を利用する場合に設定をする機能です。「Capabilities」項目の右にある、「Add」ボタンをクリックしてください。「Add」ボタンをクリックすると、使用できる機能を選択する画面が開きますので、一覧の中から、「camera」の項目にチェックをいれ、「Ok」ボタンを押してください。

 

image038.jpg

 

「Ok」ボタンをクリックすると、build.ymlの画面に戻り、「Capabilities:」項目に、「camera,」と入力されています。

 

第2節.カメラ機能を使用する

それでは、実際にカメラ機能を使用したいと思います。名簿管理機能で作成した名簿の詳細画面で、写真の追加が行えるようにしたいと思います。

まず、Rosterテーブルに画像のパスを保存するようにカラムを設定します。

/app/Roster/roster.rbファイルを開いてください。項目を追加するには、propertyメソッドを使用します。PropertyBagでは、カラムを明示的に指定する必要が無いのですが、Blob型のカラムを指定するときは、明示的にpropertyメソッドで指定をする必要があります。

それでは、roster.rbファイルの10行目に以下を追記してください。

 

property :image_uri, :blob

 

image040.jpg

 

これで、image_uriというカラムが追加されました。

つづいて、画像の撮影処理と保存処理を実装します。/app/Roster/roster_controller.rbファイルを開いてください。

59行目から以下を追加してください。

 

59 |def capture
60 |  id = strip_braces(@params["id"])
61 |  # カメラ機能の呼び出し
62 |  Camera::take_picture(url_for(:action => :capture_callback, :id => id))
63 |  render :back => url_for(:action => :show, :id => id)
64 |end
65 |
66 |def capture_callback
67 |  # @params["status"]には、カメラの撮影結果が入る
68 |     if @params["status"] == "ok"
69 |       @roster = Roster.find(@params["id"])
70 |       # 該当の名簿に既に写真が保存されている場合、その写真を削除する
71 |       if @roster.image_uri && File.exists?(@roster.image_uri)
72 |         File.unlink(@roster.image_uri)
73 |       end
74 |       @roster.update_attributes("image_uri" => @params["image_uri"])
75 |       Alert.show_popup("写真を登録しました。")
76 |       WebView.navigate(url_for(:action => :show, :id => @roster.object))
77 |     else
78 |       # カメラの撮影に失敗した場合
79 |       Alert.show_popup("写真の撮影に失敗しました。")
80 |       WebView.navigate(url_for(:action => :show, :id =>
       strip_braces(@params["id"])))
81 |     end
82 |   end

 

以上を追加したら、保存してください。captureメソッドは、カメラ機能を呼び出す機能になります。capture_callback機能は、カメラ撮影を行った後の処理を行うメソッドになります。

 

image042.jpg

 

次にカメラ機能を呼び出すために、画面のERBファイルを修正します。/app/Roster/show.erbファイルを開いてください。

36行目から以下を追加してください。

 

36 | <li>
37 |   <div data-role="controlgroup" data-type="horizontal">
38 |    <% unless @roster.image_uri.nil? || @roster.image_uri == "" %>
39 |                 <img src="<%= Rho::RhoApplication::get_blob_path(@roster.image_uri)
      %>" />               
40 |      <% end %>
41 |    <a href="<%= url_for(:action => :capture, :id => @roster.object) %>">
      写真設定</a>
42 |     </div>
43 |  </li>

 

以上を追加したら、保存をしてください。

 

image044.jpg

 

つづいて、カメラの撮影処理中画面を作成します。「Project Explorer」のRoster/app/Rosterフォルダの上で右クリックをして、「New」→「File」を選択します。
選択すると、「New File」画面が表示します。この画面でファイルの追加を行います。「File name:」項目に「capture.erb」と入力して、「Ok」ボタンをクリックしてください。

 

image046.jpg

 

Roster/app/Rosterフォルダにcapture.erbファイルが作成されました。つづいて、capture.erbファイルを以下のように編集してください。

 

01 |<div data-role="page">
02 |  <div data-role="header" data-position="inline">
03 |    <h1>画像処理中</h1>
04 |  </div>
05 |  <div data-role="content">
06 |    <p>
07 |      画像処理中です。<br />
08 |      しばらくお待ちください。
09 |    </p>
10 |  </div>
11 |</div>

 

image048.jpg

 

これで、カメラの撮影、表示の機能ができました。ビルドしてエミュレータに転送したいと思います。

 

image050.jpg

 

image052.jpg

システム工房エムのサイトへのリンク

住所〒690-0017 島根県松江市西津田3-2-3 TEL.0852-23-8590 FAX.0852-23-8591
Copyright 2008-2010 System Maker M,All right reserved