PR

ネットワーク通信に対応した写真アルバムアプリを作ろう!

2013年4月12日(金)
大塔 中(おおとう あたる)アシアル株式会社

Monacaでネット通信をしてWebサービスと連携する

これまで作成してきたアプリは、すべてのコードが端末内に配置されており、インターネット接続がなくても動作するものでした。今回は、いよいよモバイルアプリの真骨頂であるインターネット通信を行うことで、外部にあるデータを用いるアプリを開発します。

※ Android版は現時点で最新であるMonacaデバッガー1.7.1をダウンロード、もしくはビルドしてお試しください。

題材として選んだのが写真アルバムです。本アプリでは、起動時にFlickr(※)のAPIに接続し、最新の投稿写真を取得して表示します。スマホらしく、スワイプしたら横スクロールして写真を切り替えられるようにしましょう。

  • ※ Flickrは米Yahoo!社が提供する写真共有サイトです。今回はFlickrが公式に提供するAPIを用いて写真の取得と表示を行います。
画面1-1 1-2 1-3:完成した写真アルバムアプリ(iPadでの実行結果、クリックで拡大)

事前準備

Monacaの会員登録が済んでいない方はMonacaのWebサイトからサインアップを行ってください。現在Monacaは無料で提供されており、ブラウザーとスマホ端末さえあれば、誰でもアプリ開発を始められます。

会員登録が完了したら、ダッシュボード画面から新しいプロジェクトを作成します。スケルトンは「最小限のプロジェクト」を選択してください。名前(「写真アルバムアプリ」など)と説明文を入力しプロジェクトが作成できたら、「IDEを起動」でMonaca IDEを起動します。

起動すると、ブラウザー内にIDE画面が表示されます。正しく起動しない場合は、最新版のGoogle ChromeやSafariブラウザーをインストールして試してください。

またMonacaの開発では、実機上で動作を確認するための「Monacaデバッガー」も必要です。Google PlayApp Storeから無料でダウンロードすることができます。

手順1:画像パーツをアップロードする

今回のアプリでは、画面の背景に画像を利用しています。利用する画像パーツを下記のリンクからダウンロードし、デスクトップ上で解凍してください。

ダウンロード:プロジェクトで利用する画像ファイル一式

解凍したファイルは、Monaca IDEを通じてプロジェクトにアップロードします。まずは、アップロード先であるimagesフォルダーをwwwフォルダー直下に作成してください。具体的には、Monaca IDE左側のツリーにて、wwwフォルダーを右クリックし「新規フォルダー」をクリックします。次に、作成するフォルダー名として"images"と入力し、新しいフォルダーを作成します。

次に、作成された「images」フォルダーを右クリックし、「アップロード...」をクリックします。画面の中央に、アップロードダイアログが表示されると思います。アップロード先が「images」フォルダーになっていることを確認し、先ほど解凍した2つの画像ファイルをドラッグ&ドロップで転送してください。

画面2:ファイルのアップロードダイアログ

ファイルアップロードが終了したら、ファイルのツリーは下記の画面のようになるはずです。

画面3:ファイルアップロード後のファイル一覧

手順2:jQueryを有効にし、bxSliderプラグインを追加する

本アプリではスワイプ操作による写真表示を行うために、jQueryとjQueryプラグインであるbxSlider(※)を使用します。本連載の第2回で説明した通り、Monacaではプラグインという仕組みを通じてjQueryなどの著名なJavaScriptライブラリーを手軽にプロジェクトに組み込むことができます。

まずは「ファイル」メニューから「プラグイン設定...」を選択します。Monacaアプリから参照できるプラグインが一覧で表示されますので、「jQuery」と表示されている部分をチェックしてください。

今回は執筆時点での最新版である jquery.js (1.9) を選択しましたが、今回のサンプルを試す範囲ではどのバージョンを選んでも動作に支障はありません。画面4のように設定を行ったら、「保存する」をクリックして保存してください。

画面4:MonacaプラグインでjQueryを有効にする

次に、jQueryと共に利用するbxSliderを組み込みます。こちらはMonacaのプラグインとしては提供されていないため、公式サイトから「Download」をクリックし、プラグイン本体をダウンロードしてください。解凍したなかに含まれる「jquery.bxslider.js」を「js」フォルダーにアップロードします。先ほどの画像ファイルのアップロード手順と同様に、wwwフォルダー直下にjsフォルダーを作成し、そこにjquery.bxslider.jsをアップロードしてください。

著者
大塔 中(おおとう あたる)
1987年生まれ。以前は金融関係で為替ディーラーの仕事をしていたが、心機一転して退職。アシアルに入社してMonacaのテクニカルサポートとなる。アシアルに入る前までにはVBAやJavaなどの経験しかなかったが、入社後にJavaScriptなどクライアンサイドの技術を学ぶ。虫や植物の図鑑を眺めるのが子供の頃から趣味。

PHPとモバイルの開発を得意としたテクノロジーベンチャー。2002年7月の設立以来、PHP技術者のためのコミュニティサイト「PHPプロ!」や教育サービス、スマホアプリ開発プラットフォーム「Monaca」の提供など、Web システムの開発に留まらずさまざまなサービスを展開している。
http://www.asial.co.jp/

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています

ネットワーク通信に対応した写真アルバムアプリを作ろう! | Think IT(シンクイット)

Think IT(シンクイット)

サイトに予期せぬエラーが起こりました。しばらくたってから再度お試しください。