カテゴリー内の他の記事

Monacaを使ってkintoneのモバイルアプリを作ろう(集荷状況確認アプリ)

フォローする

2017/02/21 Cordovaのバージョンを 4.1 から 6.2 へアップデートしました。

(著者:菊地 宏司)

Index

はじめに

今回のTipsはモバイルアプリを作っていきたいと思います。
モバイルアプリと言ってもkintoneのカスタマイズではなく、モバイル端末にインストールするネイティブのスマホアプリの開発です。
スマホアプリって言うと一般的にはAndroid OSはJava、iOSはObjective-C、Swiftで作られていますが、難しそうでなかなか手が出せなかったり、試してみたけど挫折しちゃった。って人も結構いるんじゃないかと思います。 今回はそれらのプログラミング言語は一切使わず、いつもkintone開発で使っているHTML と JavaScript と CSS で作っていきます。
しかもAndroid OSとiOSの両方で使えるアプリ ←ココポイント! では早速はじめていきましょう!

 

    

 

作成するアプリ

今回作成するアプリはQRコードを読み込むとQRコード内に登録された内容と、モバイル端末で取得した現在位置情報をkintoneに登録するアプリです。
イメージとしては集荷業者が各店舗や営業所で集荷をするたびにQRコードを読み込んで集荷状況をkintoneに登録する感じです。

Monacaについて

まずはタイトルにMonacaとありますが、初めて聞く人もいると思うので簡単に説明したいと思います。

Monacaとは?

Monaca は、アシアル株式会社が提供する、スマートフォン向けアプリの開発環境の呼称です。
Monacaは、クラウドベースの開発プラットフォームです。HTML5とJavaScriptを用いることで、iOSとAndroidの両OSに対応したクロスプラットフォームなアプリ開発を実現しました。
また、MonacaではWebブラウザを通じて全サービスが提供されます。そのため、クライアントソフトのインストールなく、誰でも簡単にアプリ開発が行えます。

 

Monacaの特徴

Monacaプラットフォームが実現するのは、1つのコンテンツを様々なデバイスで使えるようにすること。
そのため、Monacaでは最新のWeb技術であるHTML5+JavaScriptを採用しました。
その結果、誰でも簡単にアプリが開発できるクラウドサービスが誕生しました。

Monacaが対応するプラットフォーム

Monacaには、異なるOS、デバイスの違いを吸収する「Monacaフレームワーク」が搭載されています。同じアプリを、下記のさまざまなデバイスで動かすことができます。

サポートOS

サポートブラウザ

参考 サイト

http://docs.monaca.mobi/cur/ja/

http://www.asial.co.jp/business/mobile/

 

Monacaを利用したモバイルアプリの作成

      

プロジェクトの作成

以下の手順を参考にプロジェクトの作成を行います。
#テンプレートには最小限のテンプレートを使います。

http://docs.monaca.mobi/cur/ja/quick_start/cloud_ide/starting_project/#step-1-login-to-monaca

本ページ最後に本プロジェクトのテンプレートも用意しているのでご利用ください。

 

プラグインの追加

プロジェクトを作成したあとはプラグインを追加します。

今回はQRコードを利用するのでBarcodeScanner プラグインを利用します。

http://docs.monaca.mobi/cur/ja/reference/third_party_phonegap/barcode_scanner/

 

ファイル構成

www/
├── css
│   ├── style.css
│   └── sweetalert.css (ライブラリ)
│
├── js
│   ├── app.js (画面制御、kintoneへの登録処理)
│   ├── setting.js (kintoneのログイン設定処理)
│   ├── base64.js (ライブラリ)
│   ├── sweetalert.min.js (ライブラリ)
│   └── underscore-min.js (ライブラリ)
│
├── index.html (各ファイルのロード処理)
├── reader.html (QRコード読み込み画面)
└── setting.html (kintone接続情報設定画面)

参考

今回のTipsではAngularJSというJavaScriptフレームワークが出てきます。 こちらについてはAsialさんのブログで紹介されていますので参考にしていただければと思います。

 

アプリ共通

HTML

index.html

QRコード読み込み画面

画面イメージ

 

HTML

reader.html

こちらはQRコードの読み込みを行う画面になります。

 

各アクションに関わる部分は以下の通りです。

画面表示時の初期化処理を行います。

 

ヘッダ右側に表示するボタンで、押下時には「kintone接続情報設定画面」へ遷移します。

 

Google Map表示範囲を設定します。

 

QRコード読み込みボタンです。QRコード読み込み処理が開始されカメラが起動します。

 

JavaScript

app.js

app.controller("ReaderController", function() {})

「QRコード読み込み画面」の処理はReaderControllerにまとめています。 こちらではQRコードの読み込みと現在地取得、地図の表示を行っています。

 

viewSettings()

ヘッダ右側の歯車ボタンを押下した場合のアクションです。 myNavigatorに指定のhtmlをpushPage()することで表示画面の変更を行います。 遷移時のエフェクト効果として「slide」を指定しています。

 

readCode()

バーコードの読み込み処理を行う関数です。

 

checkSettings()

接続情報が入力済みか確認する関数です。

 

sendRequest()

kintoneへの登録処理を行う関数です。

 

inputItemCount()

QRコード読み込み成功時のコールバック関数です。QRコードで読み込んだ値からアイテム名とアイテムコードを取得し、さらにアイテムをいくつ取り扱ったのか個数を入力するダイアログを表示します。

 

今回想定しているQRコードのフォーマットは以下になります。

アイテム名:アイテムコード

ダイアログはOnsen UIで用意されているons.notification.prompt()を利用しています。 正常に入力を行われた場合kintoneへの登録処理のsendRequest()を実行します。

ローカルストレージ上にkintone接続情報があるかチェックを行います。 保存されていない場合は警告ダイアログを表示します。

BarcodeScanner プラグインで用意されたwindow.plugins.barcodeScanner.scan()を使いQRコード読み込みを行います。 読み込みに成功時のコールバックではinputItemCount()が呼び出されます。

 

kintone 接続情報設定画面

画面イメージ

 

HTML

setting.html

こちらはkintoneの接続設定をする画面になります。
各アクションに関わる部分は以下の通りです。

 

画面表示時の初期化処理を行います。

 

ヘッダ左側に表示するボタンで、押下時は入力をキャンセルし「QRコード読み込み画面」に遷移します。

 

kintoneへの接続確認を行います。

 

入力された接続情報をローカルストレージに保存します。

 

ヘッダ右側に表示するボタンで、押下時はローカルストレージに保存されている情報を削除します。

 

JavaScript

setting.js

app.controller("LoginController", function() {})

「kintone接続設定画面」の処理はLoginControllerにまとめています。 ここでは入力した接続情報の保存、削除の他に接続確認の処理を行っています。

 

loginInit()

画面表示時の初期化処理を行います。
すでにkintone接続情報がローカルストレージに保存されている場合はそれを入力フィールドに設定します。

 

testConnect()

「kintone接続情報設定画面」で入力された設定値を元に接続確認を行います。 入力された情報からheaderとbodyを作成し、$httpモジュールを使いkintoneアプリに対してGet Requestを送ります。 接続結果はダイアログに表示します。

 

saveSetting()

「kintone接続情報設定画面」で入力された内容をローカルストレージに保存します。 必須入力値としてドメイン、アプリID、ログインID、ログインパスワードをチェックしています。

 

clearSetting()

「kintone接続情報設定画面」のヘッダ右側にある削除ボタンを押されたときのアクションです。 接続情報としてローカルストレージに保存している値を削除します。

 

kintoneアプリの設定

連携するkintoneアプリ側のフィールド設定は以下のとおりです。

フィールド設定

フィールド名 フィールドタイプ フィールドコード
アイテム名 文字列(1行) itemname
アイテムコード 文字列(1行) itemcode
個数 数値 itemcount
住所 文字列(1行) address
緯度 文字列(1行) lat
経度 文字列(1行) lng
- スペース Map

 

カスタムJS

モバイルアプリで動かしてみる

それでは作成したアプリを実際に動かしてみたいと思います。 Monacaにはデバック用のモバイルアプリがあり開発中アプリの動作確認が簡単に行えます。 まずは以下のページを参考にデバックアプリを端末にインストールしましょう。

https://ja.monaca.io/debugger.html 

インストールが完了したら自身のアカウントでログインします。ログインしますとプロジェクト 一覧が表示されるのでそこで対象のプロジェクトを選択してください。

 

 

プロジェクトを選択すると読み込み処理がされてアプリが起動します。 ヘッダ部分にはアプリ名と設定ボタン、画面中央にはGoogle Map、そして一番下にQRコードの読み込みボタンが表示されています。 まずは設定ボタンを押して「kintone接続情報設定画面」を開いて設定を行います。 入力したら「Connection Check」ボタンを押して正常に接続できているか確認してください。

 

  

 

 

接続の確認ができたら「QRコード読み込み画面」に戻りQRコードの読み込みをしてみましょう。
「Read QR Code」ボタンを押すとカメラが起動してQRコードの読み込みができる状態になります。

 

 

  

 

カメラが起動したら以下のQRコードを読み込んでみましょう。

QRコード
アイテム名 宅配便-60 サイズ 宅配便-120 サイズ 宅配便-90サイズ 宅配便-60サイズ
アイテムコード BA-001 BA-002 BA-003 BA-004

 

QRコードの読み込みが完了するとダイアログでてきて「アイテム名」「アイテムコード」「個数入力フィールド」が表示されます。個数を入力して「OK」を押すとkintoneへのレコード登録が実行されます。

 

  

 

それではkintoneアプリのほうを見てみましょう。

 

一覧画面で地図が表示されていれば成功です。

 

さいごに

Monacaを使ったモバイルアプリ開発いかがだったでしょうか。

JavaScriptの開発経験がある方はとても入りやすいツールかと思います。


今回はQRコード読み込みだけでしたが、それ以外にもネイティブ機能を利用できるプラグイン、APIが豊富に用意されています。また、サンプルなどもMonaca Developerサイトに公開されているので興味のある方はぜひ見てみてください。

大事なことを言い忘れてましたが、Monacaで作成したプロジェクトはビルドすることによりAndroidOS、iOS用のインストールファイル(.apk、.ipa)を作成できます。

一つのプログラムで2度おいしいMonaca今後モバイルアプリ開発があった時はぜひ利用してみてください。

 

テンプレート

Monaca プロジェクト

monaca-project-kintoneCargoStatus_20170221.zip

2017/2/21 Cordovaのバージョンを 4.1 から 6.2 へアップデートしました。

kintone アプリテンプレート

kintoneApp_MobileQrCodeReader_.zip

kintoneアプリ用カスタムJS

※文字化けする可能性があるため、右クリックし、直接ダウンロードしてください。

kintone_viewmap.js

リンクまとめ

Monacaについて

http://www.asial.co.jp/business/mobile/

Monaca Developer サイト

http://docs.monaca.mobi/cur/ja/

Monaca プロジェクトの作成

http://docs.monaca.mobi/cur/ja/quick_start/cloud_ide/starting_project/#step-1-login-to-monaca

Monaca BarcodeScanner プラグイン

http://docs.monaca.mobi/cur/ja/reference/third_party_phonegap/barcode_scanner/

Monaca Debugger

https://ja.monaca.io/debugger.html

Asial Blog OnsenUI(AngularJS)でMonacaアプリを作ろう

http://blog.asial.co.jp/1239

Asial Blog AngularJSに触れてみる その1

http://blog.asial.co.jp/1197

Asial Blog AngularJSに触れてみる その2

http://blog.asial.co.jp/1208

kintone 住所から地図を表示する

https://cybozudev.zendesk.com/hc/ja/articles/202640950

kintone 顧客訪問リストを地図にピン表示する

https://cybozudev.zendesk.com/hc/ja/articles/202341964

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

ログインしてコメントを残してください。
Powered by Zendesk