Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 61 Ad
Advertisement

More Related Content

Slideshows for you (20)

Similar to kintone 連携スマホアプリの開発・配布体験 (20)

Advertisement

More from アシアル株式会社 (15)

Advertisement

Recently uploaded (20)

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/

×