狠狠撸

狠狠撸Share a Scribd company logo

kintone連携スマホアプリの開発?配布体験_生形 可奈子氏

?Download as PPTX, PDF?
?
kintone papers
kintone papers

kintone devCamp 2017 D-3セッション資料。 「kintone連携スマホアプリの開発?配布体験」

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

More Related Content

kintone連携スマホアプリの開発?配布体験_生形 可奈子氏

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

Editor's Notes

  • #9: デバッガー接続待机ダイアログが表示される
  • #14: Hello Worldアプリを開始したらIDEのダイアログを閉じる
  • #18: エンジニア确保、コスト削减
  • #20: 奥别产开発と同じやり方で、ネイティブ机能も利用可能
  • #24: 1.
  • #25: 様々なデバイスをリアルタイムに検証, プロトタイプ開発における遠隔地での検証 あとでデモ見せる
  • #27: ページ遷移アニメーションやエフェクトもOS毎に最適化 現時点ではOnsenUIだけ ApacheライセンスのOSS
  • #28: 先ほどの社内報もOnsen UIを使ってました プルフック どういうコンポーネントがあるのかは、 コンポーネント見せる
  • #29: 础苍诲谤辞颈诲のみ
  • #50: 下の方
  • #54: 础苍诲谤辞颈诲のみ
  • #60: 作成したアプリをストアに掲載したり、配布を行ったりするには、ビルドを行います。ビルドにはデバッグビルドやリリースビルドなど、いくつかの種類があります。また、iOSでは実機に転送するためにiOS Developer Programに加入する必要があります。ここでは簡単にビルドができるAndroid向けデバッグビルドを紹介します。
  • #61: キャッチコピー、クラウドベースのハイブリッドアプリ開発環境 ２．必要なものはブラウザだけ。面倒な環境構築は一切不要 ３．モバイル向けに最適化されたUIフレームワーク