Help us understand the problem. What is going on with this article?

Monaca × IBM Bluemix で始めるモバイルアプリ

More than 3 years have passed since last update.

はじめに

MonacaはHTML5をベースにしたWebアプリとネイティブアプリのいいとこ取りをしたアプリ開発を可能にしたプラットフォームです。

以下のような特徴があり、非エンジニアや文系の学生にも始めやすいアプリ開発環境ということで筆者個人的にも非常に注目しています。

  • 世界中で10万人以上が利用
  • クラウドベースのモバイルアプリ開発環境
  • iOS, Android, Windows, Chrome Apps対応
  • 無料から利用可能

とくに2番目。Monacaデバッカーをお手持ちのスマホにインストールすると、すぐに実機で確認ができるという代物!!

image

開発しているのもアシアルさんで日本の企業ですので、サポートも充実!
個人的にはネイティブも大事だと思っています。Bluemixのようなものと組み合わせてプロトタイプ開発で評価するような場合、ネイティブでゴリゴリ作り込むよりサクッと作れてしまうMonacaを利用するのが近道なのかなと最近は思っています。

それではさっそく始めて参りましょう。

この記事で作るアプリ

image

Bluemix上でCloudant DBを作成し、Monacaで作成したアプリと連携します。この記事で学べることは以下のようなものです。

  • Monacaからカメラの起動
  • IBM BluemixでのCloudant DBの作成
  • Cloudant DBへ画像データのアップロード

1.Bluemixの準備

サービス一覧から「Cloudant NoSQL DB」を選択、デフォルトのまま「作成」ボタンをクリック。

image

Bluemixダッシュボードに戻ると新しくCloudantサービスが増えているので、クリックしてCloudantダッシュボードを開きます。

image

ダッシュボード右上の「Add New Database」をクリックして、データベース名として「report」を入力し「Create」ボタンを押します。

image

image

image

image

これでCloudantデータベースの構築は完了です。つづいて、MonacaアプリからCloudantデータベースへの登録処理を行います。

2.Monacaの準備

Monacaにログイン後、「開発をスタート」「Monaca.ioで開発」の順に選択します。

image

Import Project」を選択するとプロジェクトのインポート画面が表示されるので、以下の情報を入力してインポートを実行します。

プロジェクト名 : Bluemixアプリ
URLを指定してインポート : http://bit.ly/1LKVjVu

image

プロジェクトが作成されたら、「開く」ボタンをクリックしてIDEを開きます。
image

3.モバイル環境の準備

Google PlayまたはApp Storeで、「monaca」で検索し、スマートフォンにインストールして下さい。
image

アプリを動かしてデータの登録ができることを確認しましょう。
image

4.Cloudantへの接続

Bluemixダッシュボードに戻り、「サービス資格情報」を選択します。
"username"と"password"の値をコピーします。

image

Monaca IDEで、ファイルツリーからjsフォルダ内の「app.js」ファイルを開き、2行目と3行目にコピーした値を貼り付けます。
image

Monacaデバッガーでデータを登録した後、Cloudantダッシュボードの「All Documents」を選択すると登録されたデータを管理画面で確認できます。

image

データをダブルクリックすると詳細画面が開きます。
「View Attachments」をクリックすると画像を見ることができます。

image

ひとまずここまで!解説は別途更新します!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away