Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

kintone 連携スマホアプリの開発・配布体験

665 views

Published on

kintone devCamp 2017 ハンズオンセッション資料

Published in: Engineering
  • Be the first to comment

kintone 連携スマホアプリの開発・配布体験

  1. 1. 1URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. kintone devCamp 2017 kintone連携スマホアプリの 開発・配布体験 アシアル株式会社 生形 可奈子
  2. 2. 2URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 連携の概要 D&Dで素早くDB作成 データ連携はkintone SDK HTML, JavaScriptで 手軽にアプリ開発 デバイスとアプリの 運用、配布
  3. 3. 3URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 今回作成するアプリ
  4. 4. 4URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. アンケートアプリ スマホアプリのアンケート画面で入力された情報をkintoneに蓄 積するサンプルを題材として、kintoneとスマホアプリの連携方 法を学んでいただきます。
  5. 5. 5URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. (事前準備)Monacaアカウント登録
  6. 6. 6URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. Monacaのアカウント登録 ブラウザの新規タブでMonacaのWebサイトを開き、「サインアッ プ」をクリックして下さい。 http://ja.monaca.io/
  7. 7. 7URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. アカウント情報入力 メール受信可能なメールアドレスとパスワードを登録して下さ い。
  8. 8. 8URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. アカウントの本登録 確認用のメールが送信されます。記載されたURLにアクセスす ることで登録完了です。 しばらくするとダッシュボードという画面に遷移します。
  9. 9. 9URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. IDEを起動する プロジェクトの「開く」ボタンをクリックすると、IDEが起動し ます。
  10. 10. 10URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. IDEの起動 IDEの各部の役割は以下の通りです。
  11. 11. 11URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 開発の流れ コードエディタ で編集し、保存する コードエディタで編集したファイルを、プレビューとデバッガー で確認しながら開発を進めていきます。 簡単な確認はプレビューで 実際の表示確認はデバッガーで
  12. 12. 12URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. Monacaデバッガーのインストール Google PlayまたはApp Storeにて「monaca」で検索し、アプリ をスマートフォンにインストールして下さい。 アイコンはこちらです。
  13. 13. 13URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. Monacaデバッガーの起動 Monacaデバッガーを起動すると、左のロ グイン画面が表示されます。 Monacaに登録したアカウントでログイン を行ってください。
  14. 14. 14URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. Monacaデバッガーでアプリを実行 する デバッガーを起動すると自動的にクラウドへ接続し、プロジェク トが一覧表示されます。 プロジェクトをタップするとアプリがシミュレートされます。
  15. 15. 15URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. Monacaデバッガーのメニュー
  16. 16. 16URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. HTML5モバイルアプリの概要
  17. 17. 17URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. モバイルアプリ開発に関する課題 開発言語がOS毎に異なるため、 1. 開発工数がかかる 2. ソースコード管理の複雑化 3. エンジニアの確保が困難
  18. 18. 18URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. HTML5モバイルアプリの登場 Webの標準技術(HTML5/CSS/JavaScript)を使って、 ワンソースでiOS/Androidの両OSに対応したモバイル アプリ開発を行えます。
  19. 19. 19URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. HTML5モバイルアプリ用フレーム ワーク Cordova(旧PhoneGap) Apacheソフトウェア財団
  20. 20. 20URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. Cordovaの仕組み アプリ本体は HTML5で実装 CordovaがOSに 合わせたネイティブ コードを提供 1. JavaScriptでAPI実行 2. Cordovaがネイティブ 機能を実行
  21. 21. 21URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. プラグインでネイティブ機能を拡張 ネイティブの各種機能は、プラグイン形式で実装され ています。 標準プラグインの他にも、第三者によって提供された プラグインを取り込んで機能を拡張できます。 標準プラグイン ・カメラ ・位置情報 ・電話帳 ・加速度センサー ・ファイルアクセス サードパーティ製 プラグイン ・Bluetooth ・プッシュ通知 ・アプリ内課金 ・バーコード読取 ・IoT 自作プラグイン
  22. 22. 22URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. Monacaの紹介
  23. 23. 23URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. Cordova開発環境:Monaca 15万人が利用する Cordova開発環境 実機でのリアルタイム 検証が可能 UIフレームワーク Onsen UI搭載 安心の日本語サポート Monacaは日本でもっとも普及しているCordova開発 環境の一つです。
  24. 24. 24URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. Monacaの仕組み IDE デバッガー ビルドシステム クラウド ターゲットOSに 合わせた環境で アプリをビルド 開発環境として提供 IDE、ビルド環境はクラウドサービスとして提供。 どんな環境でもアプリ開発を始められます。 ソースコードは クラウド上に
  25. 25. 25URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. Monacaデバッガー ①ファイルを編集 ②実機ですぐに動作確認 コンパイル処理やUSB経由での実機転送などは不要。 デバッグ専用アプリがネットワーク経由で変更箇所を 取得するため、リアルタイムに動作検証できます。 推奨環境 Google Chrome
  26. 26. 26URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. HTML5モバイルアプリのための UIフレームワーク搭載
  27. 27. 27URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. Onsen UI • ハイパフォーマンスなUIを実現 • プラットフォームを判別して自動でスタイルが変化
  28. 28. 28URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 使い方は独自タグを記述するだけの 簡単設計 <ons-toolbar></ons-toolbar> <ons-list-item></ons-list-item> <ons-tabbar></ons-tabbar>
  29. 29. 29URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 外部サービスとの連携
  30. 30. 30URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 連携サービス例
  31. 31. 31URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 外部サービスの利用方法 掲載されているサービス以外でも、以下の3つのいずれか が提供されていればMonacaからの利用が可能です。  Cordovaプラグイン  JavaScript SDK  REST API
  32. 32. 32URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. kintoneのセットアップ
  33. 33. 33URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. kintoneアプリの作成(1/10) システム管理者アカウントでkintoneにログインし、アプリの追 加を行います。
  34. 34. 34URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. kintoneアプリの作成(2/10) 「アンケート」アプリの「このアプリを追加」リンクをクリッ クして登録を完了します。
  35. 35. 35URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. kintoneアプリの作成(3/10) アンケートアプリの設定ボタンをクリックします。
  36. 36. 36URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. kintoneアプリの作成(4/10) フォームタブを選択してフォームの編集を行います。 今回は「お名前」「メールアドレス」「kintoneのご利用満足度 をお知らせください。」以外の項目を削除します。
  37. 37. 37URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. kintoneアプリの作成(5/10) 項目を3つまで減らしたら、次に「お名前」項目の「設定」を選択 してフィールドコードを編集します。 編集ボタン
  38. 38. 38URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. kintoneアプリの作成(6/10) フィールドコードを「name」に変更して保存します。 同様に、他2つの項目のフィールドコードも変更して下さい。 • メールアドレス:mail • ご利用満足度:cs フィールドコードは、各項目を識別 するためのIDです。 スマホアプリからデータを登録する 際に、フィールドコードを指定して 登録します。
  39. 39. 39URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. kintoneアプリの作成(7/10) フォームの設定が完了したら、「設定」タブの「APIトークン」 を選択します。
  40. 40. 40URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. kintoneアプリの作成(8/10) 「生成する」ボタンをクリックし、アクセス権の「レコード追 加」にチェックを入れ、「保存」ボタンをクリックします。 ※ APIトークンはMonacaアプリなどの外部からkintoneアプリ にアクセスする際に必要となります。コピーしてメモ帳などに 貼り付けておいてください。 ② ③ ① この値は後で使うのでメモ帳な どにコピーしておいてください
  41. 41. 41URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. kintoneアプリの作成(9/10) 最後に、「アプリを更新」ボタンをクリックします。
  42. 42. 42URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. アプリIDの確認(10/10) 以下の画面に戻ったら、ブラウザのアドレスバーのURL末尾の 数字(アプリID)を確認します。 アプリID
  43. 43. 43URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. Monacaによるアプリ開発
  44. 44. 44URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 新しいプロジェクトを作成する Monacaにログインした状態で、ブラウザのアドレスバーに以 下のURLを入力して開きます。 http://bit.ly/2tb3hCQ 「インポート」ボタンをクリックすると プロジェクトのインポートが完了します。 インポート後、プロジェクトの「開く」 ボタンをクリックしてIDEを起動して下さい。
  45. 45. 45URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. アプリIDの変更 Monacaでソースコードを変更します。index.html 17~19行目 を、ご自身の環境に合わせて書き換えてください。 アンケートアプリの アプリIDに変更 自分のkintone環境の サブドメインに変更 APIトークン貼付
  46. 46. 46URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. kintoneUtilityの利用準備① メニューバーの [設定] > [外部サービス連携…] を選択し、 『kintone』の [詳細を見る] [インストール] の順にボタンをク リックします。
  47. 47. 47URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. kintoneUtilityの利用準備➁ 以下の画面が表示されたら、一番上の 「components/kintoneUtility/docs/kintoneUtility.js」にチェッ クを入れて、[保存する]ボタンを押せば設定完了です。
  48. 48. 48URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. kintoneUtilityとは kintone REST APIをラップしたJavaScriptのSDKです。Monaca などの外部アプリからkintoneへのアクセスを容易に行えるように なります。 (参考URL)https://github.com/kintone/kintoneUtility
  49. 49. 49URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. kintoneUtilityを利用した実装方法 以下の手順で実装します。 1. kintoneのドメイン情報を設定 2. 認証情報を設定(APIトークンによる認証のほか、 ユーザー名、パスワードによる認証も可能) 3. CRUD処理(登録・参照・更新・削除)の実行
  50. 50. 50URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. index.html 37行目以降に追記 // ドメイン情報の設定 kintoneUtility.rest.setDomain(appInfo.domain); // 認証情報の設定 kintoneUtility.rest.setApiTokenAuth(appInfo.token); // レコードの登録 kintoneUtility.rest.postRecord({ app: appInfo.id, record: data }).then(function(r) { alert("登録しました"); // 登録成功時の処理 }).catch(function(e) { console.log(e); // 登録失敗時の処理 });
  51. 51. 51URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. Monacaデバッガーで実行する MonacaデバッガーにMonacaのアカウントでログインし、プロ ジェクト一覧画面の中から「kintone devCamp 2017」プロ ジェクトを選択するとアプリが実行されます。
  52. 52. 52URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. アプリを実行する アンケート情報を入力して、送信します。「登録しました」と いうメッセージが表示されれば成功です。
  53. 53. 53URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. kintone上でデータを確認する 送信したアンケートデータは、kintone上に登録されています。 kintoneでアンケートアプリを開き、レコードが追加されている ことを確認してください。
  54. 54. 54URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. (参考)アプリのビルド
  55. 55. 55URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. アプリ設定 メニューバーの [設定] > [Androidアプリ設定] または [iOSア プリ設定]を選択し、アプリ名やパッケージ名、アイコン画像等 を設定します。
  56. 56. 56URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 【Android】リリース向け設定 (1/3) ビルド設定画面で、[リリース向けビルド][リリースビルド]の順に 選択し、[キーストアとエイリアスを管理する]をクリックします。
  57. 57. 57URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 【Android】リリース向け設定 (2/3) [クリアして新規作成][OK]の順に選択し、任意のエイリアス名、 エイリアスパスワード、KeyStoreパスワードを入力して下さい。
  58. 58. 58URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 【Android】リリース向け設定 (3/3) 作成が完了したら[戻る]ボタンで前の画面に戻り、エイリアスの パスワードを入力してリリースビルドを開始して下さい。
  59. 59. 59URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. スマートフォンにインストールする QRコードから直接インストールできます。またダウンロードした apkファイルはそのままストアに公開可能です。
  60. 60. 60URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 【iOS】ビルド設定 iOSアプリのビルドには、有償のApple Developer Programへの 参加と、証明書の発行が必要になります。 以下のドキュメントを参考に作業を行ってして下さい。 https://docs.monaca.io/ja/monaca_ide/manual/build/ios/
  61. 61. 61URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. https://ja.monaca.io/

×