Enviar pesquisa
Carregar
kintone 連携スマホアプリの開発・配布体験
•
2 gostaram
•
1,458 visualizações
アシアル株式会社
Seguir
kintone devCamp 2017 ハンズオンセッション資料
Leia menos
Leia mais
Engenharia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 61
Baixar agora
Baixar para ler offline
Recomendados
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)
アシアル株式会社
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド(体験版)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド(体験版)
アシアル株式会社
HTML5×Monacaプログラミング教育事例セミナー・ワークショップ資料
HTML5×Monacaプログラミング教育事例セミナー・ワークショップ資料
アシアル株式会社
JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)
JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)
アシアル株式会社
Gartner summit 2016
Gartner summit 2016
アシアル株式会社
デブサミ2015「実践!クロスプラットフォーム モバイルアプリ開発」
デブサミ2015「実践!クロスプラットフォーム モバイルアプリ開発」
アシアル株式会社
Monacaによるモバイルアプリ開発ことはじめ
Monacaによるモバイルアプリ開発ことはじめ
アシアル株式会社
HTML5プロフェッショナル認定試験対策講座
HTML5プロフェッショナル認定試験対策講座
アシアル株式会社
Recomendados
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)
アシアル株式会社
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド(体験版)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド(体験版)
アシアル株式会社
HTML5×Monacaプログラミング教育事例セミナー・ワークショップ資料
HTML5×Monacaプログラミング教育事例セミナー・ワークショップ資料
アシアル株式会社
JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)
JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)
アシアル株式会社
Gartner summit 2016
Gartner summit 2016
アシアル株式会社
デブサミ2015「実践!クロスプラットフォーム モバイルアプリ開発」
デブサミ2015「実践!クロスプラットフォーム モバイルアプリ開発」
アシアル株式会社
Monacaによるモバイルアプリ開発ことはじめ
Monacaによるモバイルアプリ開発ことはじめ
アシアル株式会社
HTML5プロフェッショナル認定試験対策講座
HTML5プロフェッショナル認定試験対策講座
アシアル株式会社
Monaca事例から学ぶHTML5モバイルアプリの活用ポイント
Monaca事例から学ぶHTML5モバイルアプリの活用ポイント
アシアル株式会社
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
アシアル株式会社
Cordovaの特徴と開発手法概要
Cordovaの特徴と開発手法概要
アシアル株式会社
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
アシアル株式会社
Web標準技術でiOS、Android両対応アプリを開発
Web標準技術でiOS、Android両対応アプリを開発
アシアル株式会社
Monacaでつくるハイブリッドアプリ
Monacaでつくるハイブリッドアプリ
Monaca
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Shin Ogata
120分聞けばドヤ顔で語れる apache cordova スーパー勉強会
120分聞けばドヤ顔で語れる apache cordova スーパー勉強会
Monaca
Onsen UIが目指すもの
Onsen UIが目指すもの
アシアル株式会社
Html5/JSモバイルアプリ最前線
Html5/JSモバイルアプリ最前線
アシアル株式会社
はやわかりHTML5ハイブリッドアプリ開発事情
はやわかりHTML5ハイブリッドアプリ開発事情
Monaca
モバイル用Webフレームワーク最前線
モバイル用Webフレームワーク最前線
アシアル株式会社
Monacaで簡単スマートフォンアプリ開発体験講座
Monacaで簡単スマートフォンアプリ開発体験講座
Monaca
HTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティス
アシアル株式会社
iOS App Storeの話
iOS App Storeの話
アシアル株式会社
CordovaでAngularJSアプリ開発
CordovaでAngularJSアプリ開発
アシアル株式会社
エンタープライズ要件に対応する高品質なCordovaアプリ開発のポイント
エンタープライズ要件に対応する高品質なCordovaアプリ開発のポイント
アシアル株式会社
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
アシアル株式会社
Cordova (PhoneGap) で始める、スマホアプリ開発
Cordova (PhoneGap) で始める、スマホアプリ開発
Kenichi Inoue
Visual Studio 2015 を使用した Cordova アプリの開発
Visual Studio 2015 を使用した Cordova アプリの開発
Osamu Monoe
kintone連携スマホアプリの開発・配布体験_生形 可奈子氏
kintone連携スマホアプリの開発・配布体験_生形 可奈子氏
kintone papers
クロスプラットフォーム開発を可能にするMonaca
クロスプラットフォーム開発を可能にするMonaca
Monaca
Mais conteúdo relacionado
Mais procurados
Monaca事例から学ぶHTML5モバイルアプリの活用ポイント
Monaca事例から学ぶHTML5モバイルアプリの活用ポイント
アシアル株式会社
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
アシアル株式会社
Cordovaの特徴と開発手法概要
Cordovaの特徴と開発手法概要
アシアル株式会社
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
アシアル株式会社
Web標準技術でiOS、Android両対応アプリを開発
Web標準技術でiOS、Android両対応アプリを開発
アシアル株式会社
Monacaでつくるハイブリッドアプリ
Monacaでつくるハイブリッドアプリ
Monaca
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Shin Ogata
120分聞けばドヤ顔で語れる apache cordova スーパー勉強会
120分聞けばドヤ顔で語れる apache cordova スーパー勉強会
Monaca
Onsen UIが目指すもの
Onsen UIが目指すもの
アシアル株式会社
Html5/JSモバイルアプリ最前線
Html5/JSモバイルアプリ最前線
アシアル株式会社
はやわかりHTML5ハイブリッドアプリ開発事情
はやわかりHTML5ハイブリッドアプリ開発事情
Monaca
モバイル用Webフレームワーク最前線
モバイル用Webフレームワーク最前線
アシアル株式会社
Monacaで簡単スマートフォンアプリ開発体験講座
Monacaで簡単スマートフォンアプリ開発体験講座
Monaca
HTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティス
アシアル株式会社
iOS App Storeの話
iOS App Storeの話
アシアル株式会社
CordovaでAngularJSアプリ開発
CordovaでAngularJSアプリ開発
アシアル株式会社
エンタープライズ要件に対応する高品質なCordovaアプリ開発のポイント
エンタープライズ要件に対応する高品質なCordovaアプリ開発のポイント
アシアル株式会社
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
アシアル株式会社
Cordova (PhoneGap) で始める、スマホアプリ開発
Cordova (PhoneGap) で始める、スマホアプリ開発
Kenichi Inoue
Visual Studio 2015 を使用した Cordova アプリの開発
Visual Studio 2015 を使用した Cordova アプリの開発
Osamu Monoe
Mais procurados
(20)
Monaca事例から学ぶHTML5モバイルアプリの活用ポイント
Monaca事例から学ぶHTML5モバイルアプリの活用ポイント
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
Cordovaの特徴と開発手法概要
Cordovaの特徴と開発手法概要
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
Web標準技術でiOS、Android両対応アプリを開発
Web標準技術でiOS、Android両対応アプリを開発
Monacaでつくるハイブリッドアプリ
Monacaでつくるハイブリッドアプリ
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
120分聞けばドヤ顔で語れる apache cordova スーパー勉強会
120分聞けばドヤ顔で語れる apache cordova スーパー勉強会
Onsen UIが目指すもの
Onsen UIが目指すもの
Html5/JSモバイルアプリ最前線
Html5/JSモバイルアプリ最前線
はやわかりHTML5ハイブリッドアプリ開発事情
はやわかりHTML5ハイブリッドアプリ開発事情
モバイル用Webフレームワーク最前線
モバイル用Webフレームワーク最前線
Monacaで簡単スマートフォンアプリ開発体験講座
Monacaで簡単スマートフォンアプリ開発体験講座
HTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティス
iOS App Storeの話
iOS App Storeの話
CordovaでAngularJSアプリ開発
CordovaでAngularJSアプリ開発
エンタープライズ要件に対応する高品質なCordovaアプリ開発のポイント
エンタープライズ要件に対応する高品質なCordovaアプリ開発のポイント
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
Cordova (PhoneGap) で始める、スマホアプリ開発
Cordova (PhoneGap) で始める、スマホアプリ開発
Visual Studio 2015 を使用した Cordova アプリの開発
Visual Studio 2015 を使用した Cordova アプリの開発
Semelhante a kintone 連携スマホアプリの開発・配布体験
kintone連携スマホアプリの開発・配布体験_生形 可奈子氏
kintone連携スマホアプリの開発・配布体験_生形 可奈子氏
kintone papers
クロスプラットフォーム開発を可能にするMonaca
クロスプラットフォーム開発を可能にするMonaca
Monaca
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
SPIRAL Inc.
HTML5ハイブリッド アプリ開発実践編
HTML5ハイブリッド アプリ開発実践編
Monaca
サイネージを使う顧客創出のシナリオ
サイネージを使う顧客創出のシナリオ
CRI Japan, Inc.
【Code for向け】保育園・消火栓mapを作れるアプリを作ろう!
【Code for向け】保育園・消火栓mapを作れるアプリを作ろう!
史識 川原
実践 Web App for Containers! ~コンテナ開発の基礎からDevOps環境の構築まで~
実践 Web App for Containers! ~コンテナ開発の基礎からDevOps環境の構築まで~
Saki Homma
クロスプラットフォーム活用のポイント
クロスプラットフォーム活用のポイント
Monaca
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Tsutomu Ogasawara
20160120 gpsロガーアプリを作ろう
20160120 gpsロガーアプリを作ろう
史識 川原
mBaaS/C4SA howto
mBaaS/C4SA howto
史識 川原
はじめてのAzure Web App for Containers! -コンテナの基礎から DevOps 環境の構築まで-
はじめてのAzure Web App for Containers! -コンテナの基礎から DevOps 環境の構築まで-
Saki Homma
NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」
NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」
アシアル株式会社
コンテナDojo #4:VSCodeを使ったPodmanコンテナアプリ開発.pdf
コンテナDojo #4:VSCodeを使ったPodmanコンテナアプリ開発.pdf
Teruyoshi Matsushima
Node-REDのノード開発容易化ツールNode generator
Node-REDのノード開発容易化ツールNode generator
BMXUG
企画者が押さえておきたいHtml5アプリ開発の要点
企画者が押さえておきたいHtml5アプリ開発の要点
Monaca
SharePoint Framework による Viva Connections アプリの開発
SharePoint Framework による Viva Connections アプリの開発
Hiroaki Oikawa
Adobe セッション for Enterprise x HTML5 Web Application Conference 2014
Adobe セッション for Enterprise x HTML5 Web Application Conference 2014
Tsuyoshi Nakao
ICT ERA+ABC 2012東北講演
ICT ERA+ABC 2012東北講演
Monaca
PhoneGapの始め方
PhoneGapの始め方
akabana
Semelhante a kintone 連携スマホアプリの開発・配布体験
(20)
kintone連携スマホアプリの開発・配布体験_生形 可奈子氏
kintone連携スマホアプリの開発・配布体験_生形 可奈子氏
クロスプラットフォーム開発を可能にするMonaca
クロスプラットフォーム開発を可能にするMonaca
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
HTML5ハイブリッド アプリ開発実践編
HTML5ハイブリッド アプリ開発実践編
サイネージを使う顧客創出のシナリオ
サイネージを使う顧客創出のシナリオ
【Code for向け】保育園・消火栓mapを作れるアプリを作ろう!
【Code for向け】保育園・消火栓mapを作れるアプリを作ろう!
実践 Web App for Containers! ~コンテナ開発の基礎からDevOps環境の構築まで~
実践 Web App for Containers! ~コンテナ開発の基礎からDevOps環境の構築まで~
クロスプラットフォーム活用のポイント
クロスプラットフォーム活用のポイント
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
20160120 gpsロガーアプリを作ろう
20160120 gpsロガーアプリを作ろう
mBaaS/C4SA howto
mBaaS/C4SA howto
はじめてのAzure Web App for Containers! -コンテナの基礎から DevOps 環境の構築まで-
はじめてのAzure Web App for Containers! -コンテナの基礎から DevOps 環境の構築まで-
NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」
NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」
コンテナDojo #4:VSCodeを使ったPodmanコンテナアプリ開発.pdf
コンテナDojo #4:VSCodeを使ったPodmanコンテナアプリ開発.pdf
Node-REDのノード開発容易化ツールNode generator
Node-REDのノード開発容易化ツールNode generator
企画者が押さえておきたいHtml5アプリ開発の要点
企画者が押さえておきたいHtml5アプリ開発の要点
SharePoint Framework による Viva Connections アプリの開発
SharePoint Framework による Viva Connections アプリの開発
Adobe セッション for Enterprise x HTML5 Web Application Conference 2014
Adobe セッション for Enterprise x HTML5 Web Application Conference 2014
ICT ERA+ABC 2012東北講演
ICT ERA+ABC 2012東北講演
PhoneGapの始め方
PhoneGapの始め方
Mais de アシアル株式会社
MonacaとEducation活動の紹介
MonacaとEducation活動の紹介
アシアル株式会社
PWA 4 Business
PWA 4 Business
アシアル株式会社
書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)
書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)
アシアル株式会社
Onsen UI 2 開発における JS フレームワーク衝突事例集
Onsen UI 2 開発における JS フレームワーク衝突事例集
アシアル株式会社
Onsen UI の最近とこれから 〜 国内サポートはじめました
Onsen UI の最近とこれから 〜 国内サポートはじめました
アシアル株式会社
最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法
最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法
アシアル株式会社
Monacaソリューションセミナー20160621
Monacaソリューションセミナー20160621
アシアル株式会社
20160308seminar2
20160308seminar2
アシアル株式会社
Nifty cloud mbaas
Nifty cloud mbaas
アシアル株式会社
創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ
創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ
アシアル株式会社
HTML5ハイブリッドアプリ開発で拓くビジネスチャンス
HTML5ハイブリッドアプリ開発で拓くビジネスチャンス
アシアル株式会社
HTML5ハイブリッドアプリの活用ポイント
HTML5ハイブリッドアプリの活用ポイント
アシアル株式会社
Onsen UI 2.0とUIライブラリの未来
Onsen UI 2.0とUIライブラリの未来
アシアル株式会社
Cordova×業務システム:失敗しないモバイル開発の秘訣
Cordova×業務システム:失敗しないモバイル開発の秘訣
アシアル株式会社
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
アシアル株式会社
Mais de アシアル株式会社
(15)
MonacaとEducation活動の紹介
MonacaとEducation活動の紹介
PWA 4 Business
PWA 4 Business
書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)
書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)
Onsen UI 2 開発における JS フレームワーク衝突事例集
Onsen UI 2 開発における JS フレームワーク衝突事例集
Onsen UI の最近とこれから 〜 国内サポートはじめました
Onsen UI の最近とこれから 〜 国内サポートはじめました
最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法
最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法
Monacaソリューションセミナー20160621
Monacaソリューションセミナー20160621
20160308seminar2
20160308seminar2
Nifty cloud mbaas
Nifty cloud mbaas
創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ
創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ
HTML5ハイブリッドアプリ開発で拓くビジネスチャンス
HTML5ハイブリッドアプリ開発で拓くビジネスチャンス
HTML5ハイブリッドアプリの活用ポイント
HTML5ハイブリッドアプリの活用ポイント
Onsen UI 2.0とUIライブラリの未来
Onsen UI 2.0とUIライブラリの未来
Cordova×業務システム:失敗しないモバイル開発の秘訣
Cordova×業務システム:失敗しないモバイル開発の秘訣
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
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. 連携の概要 D&Dで素早くDB作成 データ連携はkintone SDK HTML, JavaScriptで 手軽にアプリ開発 デバイスとアプリの 運用、配布
3.
3URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. 今回作成するアプリ
4.
4URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. アンケートアプリ スマホアプリのアンケート画面で入力された情報をkintoneに蓄 積するサンプルを題材として、kintoneとスマホアプリの連携方 法を学んでいただきます。
5.
5URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. (事前準備)Monacaアカウント登録
6.
6URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. Monacaのアカウント登録 ブラウザの新規タブでMonacaのWebサイトを開き、「サインアッ プ」をクリックして下さい。 http://ja.monaca.io/
7.
7URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. アカウント情報入力 メール受信可能なメールアドレスとパスワードを登録して下さ い。
8.
8URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. アカウントの本登録 確認用のメールが送信されます。記載されたURLにアクセスす ることで登録完了です。 しばらくするとダッシュボードという画面に遷移します。
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. IDEの起動 IDEの各部の役割は以下の通りです。
11.
11URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. 開発の流れ コードエディタ で編集し、保存する コードエディタで編集したファイルを、プレビューとデバッガー で確認しながら開発を進めていきます。 簡単な確認はプレビューで 実際の表示確認はデバッガーで
12.
12URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. Monacaデバッガーのインストール Google PlayまたはApp Storeにて「monaca」で検索し、アプリ をスマートフォンにインストールして下さい。 アイコンはこちらです。
13.
13URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. Monacaデバッガーの起動 Monacaデバッガーを起動すると、左のロ グイン画面が表示されます。 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. Monacaデバッガーのメニュー
16.
16URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. HTML5モバイルアプリの概要
17.
17URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. モバイルアプリ開発に関する課題 開発言語がOS毎に異なるため、 1. 開発工数がかかる 2. ソースコード管理の複雑化 3. エンジニアの確保が困難
18.
18URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. HTML5モバイルアプリの登場 Webの標準技術(HTML5/CSS/JavaScript)を使って、 ワンソースでiOS/Androidの両OSに対応したモバイル アプリ開発を行えます。
19.
19URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. HTML5モバイルアプリ用フレーム ワーク Cordova(旧PhoneGap) Apacheソフトウェア財団
20.
20URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. Cordovaの仕組み アプリ本体は HTML5で実装 CordovaがOSに 合わせたネイティブ コードを提供 1. JavaScriptでAPI実行 2. Cordovaがネイティブ 機能を実行
21.
21URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. プラグインでネイティブ機能を拡張 ネイティブの各種機能は、プラグイン形式で実装され ています。 標準プラグインの他にも、第三者によって提供された プラグインを取り込んで機能を拡張できます。 標準プラグイン ・カメラ ・位置情報 ・電話帳 ・加速度センサー ・ファイルアクセス サードパーティ製 プラグイン ・Bluetooth ・プッシュ通知 ・アプリ内課金 ・バーコード読取 ・IoT 自作プラグイン
22.
22URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. Monacaの紹介
23.
23URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. Cordova開発環境:Monaca 15万人が利用する Cordova開発環境 実機でのリアルタイム 検証が可能 UIフレームワーク Onsen UI搭載 安心の日本語サポート Monacaは日本でもっとも普及しているCordova開発 環境の一つです。
24.
24URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. Monacaの仕組み IDE デバッガー ビルドシステム クラウド ターゲットOSに 合わせた環境で アプリをビルド 開発環境として提供 IDE、ビルド環境はクラウドサービスとして提供。 どんな環境でもアプリ開発を始められます。 ソースコードは クラウド上に
25.
25URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. Monacaデバッガー ①ファイルを編集 ②実機ですぐに動作確認 コンパイル処理やUSB経由での実機転送などは不要。 デバッグ専用アプリがネットワーク経由で変更箇所を 取得するため、リアルタイムに動作検証できます。 推奨環境 Google Chrome
26.
26URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. HTML5モバイルアプリのための UIフレームワーク搭載
27.
27URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. Onsen UI • ハイパフォーマンスなUIを実現 • プラットフォームを判別して自動でスタイルが変化
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.
29URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. 外部サービスとの連携
30.
30URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. 連携サービス例
31.
31URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. 外部サービスの利用方法 掲載されているサービス以外でも、以下の3つのいずれか が提供されていればMonacaからの利用が可能です。 Cordovaプラグイン JavaScript SDK REST API
32.
32URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. kintoneのセットアップ
33.
33URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. kintoneアプリの作成(1/10) システム管理者アカウントでkintoneにログインし、アプリの追 加を行います。
34.
34URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. kintoneアプリの作成(2/10) 「アンケート」アプリの「このアプリを追加」リンクをクリッ クして登録を完了します。
35.
35URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. kintoneアプリの作成(3/10) アンケートアプリの設定ボタンをクリックします。
36.
36URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. kintoneアプリの作成(4/10) フォームタブを選択してフォームの編集を行います。 今回は「お名前」「メールアドレス」「kintoneのご利用満足度 をお知らせください。」以外の項目を削除します。
37.
37URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. kintoneアプリの作成(5/10) 項目を3つまで減らしたら、次に「お名前」項目の「設定」を選択 してフィールドコードを編集します。 編集ボタン
38.
38URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. kintoneアプリの作成(6/10) フィールドコードを「name」に変更して保存します。 同様に、他2つの項目のフィールドコードも変更して下さい。 • メールアドレス:mail • ご利用満足度:cs フィールドコードは、各項目を識別 するためのIDです。 スマホアプリからデータを登録する 際に、フィールドコードを指定して 登録します。
39.
39URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. kintoneアプリの作成(7/10) フォームの設定が完了したら、「設定」タブの「APIトークン」 を選択します。
40.
40URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. kintoneアプリの作成(8/10) 「生成する」ボタンをクリックし、アクセス権の「レコード追 加」にチェックを入れ、「保存」ボタンをクリックします。 ※ APIトークンはMonacaアプリなどの外部からkintoneアプリ にアクセスする際に必要となります。コピーしてメモ帳などに 貼り付けておいてください。 ② ③ ① この値は後で使うのでメモ帳な どにコピーしておいてください
41.
41URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. kintoneアプリの作成(9/10) 最後に、「アプリを更新」ボタンをクリックします。
42.
42URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. アプリIDの確認(10/10) 以下の画面に戻ったら、ブラウザのアドレスバーのURL末尾の 数字(アプリID)を確認します。 アプリID
43.
43URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. Monacaによるアプリ開発
44.
44URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. 新しいプロジェクトを作成する Monacaにログインした状態で、ブラウザのアドレスバーに以 下のURLを入力して開きます。 http://bit.ly/2tb3hCQ 「インポート」ボタンをクリックすると プロジェクトのインポートが完了します。 インポート後、プロジェクトの「開く」 ボタンをクリックしてIDEを起動して下さい。
45.
45URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. アプリIDの変更 Monacaでソースコードを変更します。index.html 17~19行目 を、ご自身の環境に合わせて書き換えてください。 アンケートアプリの アプリIDに変更 自分のkintone環境の サブドメインに変更 APIトークン貼付
46.
46URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. kintoneUtilityの利用準備① メニューバーの [設定] > [外部サービス連携…] を選択し、 『kintone』の [詳細を見る] [インストール] の順にボタンをク リックします。
47.
47URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. kintoneUtilityの利用準備➁ 以下の画面が表示されたら、一番上の 「components/kintoneUtility/docs/kintoneUtility.js」にチェッ クを入れて、[保存する]ボタンを押せば設定完了です。
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.
49URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. kintoneUtilityを利用した実装方法 以下の手順で実装します。 1. kintoneのドメイン情報を設定 2. 認証情報を設定(APIトークンによる認証のほか、 ユーザー名、パスワードによる認証も可能) 3. CRUD処理(登録・参照・更新・削除)の実行
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.
51URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. Monacaデバッガーで実行する MonacaデバッガーにMonacaのアカウントでログインし、プロ ジェクト一覧画面の中から「kintone devCamp 2017」プロ ジェクトを選択するとアプリが実行されます。
52.
52URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. アプリを実行する アンケート情報を入力して、送信します。「登録しました」と いうメッセージが表示されれば成功です。
53.
53URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. kintone上でデータを確認する 送信したアンケートデータは、kintone上に登録されています。 kintoneでアンケートアプリを開き、レコードが追加されている ことを確認してください。
54.
54URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. (参考)アプリのビルド
55.
55URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. アプリ設定 メニューバーの [設定] > [Androidアプリ設定] または [iOSア プリ設定]を選択し、アプリ名やパッケージ名、アイコン画像等 を設定します。
56.
56URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. 【Android】リリース向け設定 (1/3) ビルド設定画面で、[リリース向けビルド][リリースビルド]の順に 選択し、[キーストアとエイリアスを管理する]をクリックします。
57.
57URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. 【Android】リリース向け設定 (2/3) [クリアして新規作成][OK]の順に選択し、任意のエイリアス名、 エイリアスパスワード、KeyStoreパスワードを入力して下さい。
58.
58URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. 【Android】リリース向け設定 (3/3) 作成が完了したら[戻る]ボタンで前の画面に戻り、エイリアスの パスワードを入力してリリースビルドを開始して下さい。
59.
59URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. スマートフォンにインストールする QRコードから直接インストールできます。またダウンロードした apkファイルはそのままストアに公開可能です。
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.
61URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved. https://ja.monaca.io/
Baixar agora