Soumettre la recherche
Mettre en ligne
kintone連携スマホアプリの開発・配布体験_生形 可奈子氏
•
Télécharger en tant que PPTX, PDF
•
1 j'aime
•
1,957 vues
kintone papers
Suivre
kintone devCamp 2017 D-3セッション資料。 「kintone連携スマホアプリの開発・配布体験」
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 60
Télécharger maintenant
Recommandé
webpackを使ったワンランク上のモダンJSカスタマイズ_門屋 亮氏
webpackを使ったワンランク上のモダンJSカスタマイズ_門屋 亮氏
kintone papers
WordPress × kintone API連携実践_たにぐち まこと氏
WordPress × kintone API連携実践_たにぐち まこと氏
kintone papers
ノンプログラミングで API はじめて体験!_築山 春木氏
ノンプログラミングで API はじめて体験!_築山 春木氏
kintone papers
kintone & Azure & Office 365 ハンズオン_松崎 剛氏
kintone & Azure & Office 365 ハンズオン_松崎 剛氏
kintone papers
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Shotaro Suzuki
Azure Static Web Apps を試してみた!
Azure Static Web Apps を試してみた!
一希 大田
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
Masanori Ishigami
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
Shotaro Suzuki
Recommandé
webpackを使ったワンランク上のモダンJSカスタマイズ_門屋 亮氏
webpackを使ったワンランク上のモダンJSカスタマイズ_門屋 亮氏
kintone papers
WordPress × kintone API連携実践_たにぐち まこと氏
WordPress × kintone API連携実践_たにぐち まこと氏
kintone papers
ノンプログラミングで API はじめて体験!_築山 春木氏
ノンプログラミングで API はじめて体験!_築山 春木氏
kintone papers
kintone & Azure & Office 365 ハンズオン_松崎 剛氏
kintone & Azure & Office 365 ハンズオン_松崎 剛氏
kintone papers
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Shotaro Suzuki
Azure Static Web Apps を試してみた!
Azure Static Web Apps を試してみた!
一希 大田
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
Masanori Ishigami
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
Shotaro Suzuki
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
Shotaro Suzuki
WebAssemblyとBlazor 、WebAssembly System Interfaceでコンテナライズの設計を解説
WebAssemblyとBlazor 、WebAssembly System Interfaceでコンテナライズの設計を解説
Takao Tetsuro
ASP.NETの進化とASP.NET Core Blazorの凄さ
ASP.NETの進化とASP.NET Core Blazorの凄さ
Sho Okada
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
ssuser070fa9
Static website + Piplelines
Static website + Piplelines
Akiyoshi Tsuchida
ASP.NET Core WebAPIでODataを使おう
ASP.NET Core WebAPIでODataを使おう
DevTakas
Azure DevOps 関西 2019 - Overview
Azure DevOps 関西 2019 - Overview
Keiji Kamebuchi
Wasm blazor and wasi 2
Wasm blazor and wasi 2
Takao Tetsuro
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
miso- soup3
Rancherでwindows server上のコンテナを管理できるか
Rancherでwindows server上のコンテナを管理できるか
Takashi Kanai
.NET の今と今後に思うこと
.NET の今と今後に思うこと
Akira Inoue
Ignite 2021 振り返り(DevOps)
Ignite 2021 振り返り(DevOps)
Kazushi Kamegawa
Azure DevOpsとセキュリティ
Azure DevOpsとセキュリティ
Kazushi Kamegawa
Introduce TFSUG and Azure DevOps Server 2020
Introduce TFSUG and Azure DevOps Server 2020
Kazushi Kamegawa
「Atomic Design × Nuxt.js」コンポーネント毎に責務の範囲を明確にしたら幸せになった話
「Atomic Design × Nuxt.js」コンポーネント毎に責務の範囲を明確にしたら幸せになった話
gree_tech
Azure DevOps Management in Organization
Azure DevOps Management in Organization
Kazushi Kamegawa
WebIntentsにより拓かれる次のWeb
WebIntentsにより拓かれる次のWeb
Kensaku Komatsu
コードの自動修正によって実現する、機能開発を止めないフレームワーク移行
コードの自動修正によって実現する、機能開発を止めないフレームワーク移行
gree_tech
2016/05/01 Visual Studio with Cordova
2016/05/01 Visual Studio with Cordova
miso- soup3
新登場!Surface Laptop 4
新登場!Surface Laptop 4
Tomokazu Kizawa
kintone 連携スマホアプリの開発・配布体験
kintone 連携スマホアプリの開発・配布体験
アシアル株式会社
JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)
JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)
アシアル株式会社
Contenu connexe
Tendances
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
Shotaro Suzuki
WebAssemblyとBlazor 、WebAssembly System Interfaceでコンテナライズの設計を解説
WebAssemblyとBlazor 、WebAssembly System Interfaceでコンテナライズの設計を解説
Takao Tetsuro
ASP.NETの進化とASP.NET Core Blazorの凄さ
ASP.NETの進化とASP.NET Core Blazorの凄さ
Sho Okada
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
ssuser070fa9
Static website + Piplelines
Static website + Piplelines
Akiyoshi Tsuchida
ASP.NET Core WebAPIでODataを使おう
ASP.NET Core WebAPIでODataを使おう
DevTakas
Azure DevOps 関西 2019 - Overview
Azure DevOps 関西 2019 - Overview
Keiji Kamebuchi
Wasm blazor and wasi 2
Wasm blazor and wasi 2
Takao Tetsuro
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
miso- soup3
Rancherでwindows server上のコンテナを管理できるか
Rancherでwindows server上のコンテナを管理できるか
Takashi Kanai
.NET の今と今後に思うこと
.NET の今と今後に思うこと
Akira Inoue
Ignite 2021 振り返り(DevOps)
Ignite 2021 振り返り(DevOps)
Kazushi Kamegawa
Azure DevOpsとセキュリティ
Azure DevOpsとセキュリティ
Kazushi Kamegawa
Introduce TFSUG and Azure DevOps Server 2020
Introduce TFSUG and Azure DevOps Server 2020
Kazushi Kamegawa
「Atomic Design × Nuxt.js」コンポーネント毎に責務の範囲を明確にしたら幸せになった話
「Atomic Design × Nuxt.js」コンポーネント毎に責務の範囲を明確にしたら幸せになった話
gree_tech
Azure DevOps Management in Organization
Azure DevOps Management in Organization
Kazushi Kamegawa
WebIntentsにより拓かれる次のWeb
WebIntentsにより拓かれる次のWeb
Kensaku Komatsu
コードの自動修正によって実現する、機能開発を止めないフレームワーク移行
コードの自動修正によって実現する、機能開発を止めないフレームワーク移行
gree_tech
2016/05/01 Visual Studio with Cordova
2016/05/01 Visual Studio with Cordova
miso- soup3
新登場!Surface Laptop 4
新登場!Surface Laptop 4
Tomokazu Kizawa
Tendances
(20)
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
WebAssemblyとBlazor 、WebAssembly System Interfaceでコンテナライズの設計を解説
WebAssemblyとBlazor 、WebAssembly System Interfaceでコンテナライズの設計を解説
ASP.NETの進化とASP.NET Core Blazorの凄さ
ASP.NETの進化とASP.NET Core Blazorの凄さ
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
Static website + Piplelines
Static website + Piplelines
ASP.NET Core WebAPIでODataを使おう
ASP.NET Core WebAPIでODataを使おう
Azure DevOps 関西 2019 - Overview
Azure DevOps 関西 2019 - Overview
Wasm blazor and wasi 2
Wasm blazor and wasi 2
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
Rancherでwindows server上のコンテナを管理できるか
Rancherでwindows server上のコンテナを管理できるか
.NET の今と今後に思うこと
.NET の今と今後に思うこと
Ignite 2021 振り返り(DevOps)
Ignite 2021 振り返り(DevOps)
Azure DevOpsとセキュリティ
Azure DevOpsとセキュリティ
Introduce TFSUG and Azure DevOps Server 2020
Introduce TFSUG and Azure DevOps Server 2020
「Atomic Design × Nuxt.js」コンポーネント毎に責務の範囲を明確にしたら幸せになった話
「Atomic Design × Nuxt.js」コンポーネント毎に責務の範囲を明確にしたら幸せになった話
Azure DevOps Management in Organization
Azure DevOps Management in Organization
WebIntentsにより拓かれる次のWeb
WebIntentsにより拓かれる次のWeb
コードの自動修正によって実現する、機能開発を止めないフレームワーク移行
コードの自動修正によって実現する、機能開発を止めないフレームワーク移行
2016/05/01 Visual Studio with Cordova
2016/05/01 Visual Studio with Cordova
新登場!Surface Laptop 4
新登場!Surface Laptop 4
Similaire à kintone連携スマホアプリの開発・配布体験_生形 可奈子氏
kintone 連携スマホアプリの開発・配布体験
kintone 連携スマホアプリの開発・配布体験
アシアル株式会社
JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)
JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)
アシアル株式会社
Monacaによるモバイルアプリ開発ことはじめ
Monacaによるモバイルアプリ開発ことはじめ
アシアル株式会社
デブサミ2015「実践!クロスプラットフォーム モバイルアプリ開発」
デブサミ2015「実践!クロスプラットフォーム モバイルアプリ開発」
アシアル株式会社
クロスプラットフォーム開発を可能にするMonaca
クロスプラットフォーム開発を可能にするMonaca
Monaca
Monacaで簡単スマートフォンアプリ開発体験講座
Monacaで簡単スマートフォンアプリ開発体験講座
Monaca
クロスプラットフォーム活用のポイント
クロスプラットフォーム活用のポイント
Monaca
20160120 gpsロガーアプリを作ろう
20160120 gpsロガーアプリを作ろう
史識 川原
【Code for向け】保育園・消火栓mapを作れるアプリを作ろう!
【Code for向け】保育園・消火栓mapを作れるアプリを作ろう!
史識 川原
mBaaS/C4SA howto
mBaaS/C4SA howto
史識 川原
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
SPIRAL Inc.
HTML5×Monacaプログラミング教育事例セミナー・ワークショップ資料
HTML5×Monacaプログラミング教育事例セミナー・ワークショップ資料
アシアル株式会社
HTML5ハイブリッド アプリ開発実践編
HTML5ハイブリッド アプリ開発実践編
Monaca
サイネージを使う顧客創出のシナリオ
サイネージを使う顧客創出のシナリオ
CRI Japan, Inc.
Monacaでつくるハイブリッドアプリ
Monacaでつくるハイブリッドアプリ
Monaca
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
アシアル株式会社
【JavaScript SDK ver.2】MonacaとmBaaSでプッシュ通知を体験しよう(for Android & iOS)
【JavaScript SDK ver.2】MonacaとmBaaSでプッシュ通知を体験しよう(for Android & iOS)
natsumo
Spring social の基礎
Spring social の基礎
Takuya Iwatsuka
【Monaca×mobile backend】 プッシュ通知をカンタン実装! スピード感ある開発をしよう!
【Monaca×mobile backend】 プッシュ通知をカンタン実装! スピード感ある開発をしよう!
natsumo
インフラ刷新プロジェクト「Neco」が目指す最高のクラウドとは
インフラ刷新プロジェクト「Neco」が目指す最高のクラウドとは
Shin'ya Ueoka
Similaire à kintone連携スマホアプリの開発・配布体験_生形 可奈子氏
(20)
kintone 連携スマホアプリの開発・配布体験
kintone 連携スマホアプリの開発・配布体験
JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)
JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)
Monacaによるモバイルアプリ開発ことはじめ
Monacaによるモバイルアプリ開発ことはじめ
デブサミ2015「実践!クロスプラットフォーム モバイルアプリ開発」
デブサミ2015「実践!クロスプラットフォーム モバイルアプリ開発」
クロスプラットフォーム開発を可能にするMonaca
クロスプラットフォーム開発を可能にするMonaca
Monacaで簡単スマートフォンアプリ開発体験講座
Monacaで簡単スマートフォンアプリ開発体験講座
クロスプラットフォーム活用のポイント
クロスプラットフォーム活用のポイント
20160120 gpsロガーアプリを作ろう
20160120 gpsロガーアプリを作ろう
【Code for向け】保育園・消火栓mapを作れるアプリを作ろう!
【Code for向け】保育園・消火栓mapを作れるアプリを作ろう!
mBaaS/C4SA howto
mBaaS/C4SA howto
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
HTML5×Monacaプログラミング教育事例セミナー・ワークショップ資料
HTML5×Monacaプログラミング教育事例セミナー・ワークショップ資料
HTML5ハイブリッド アプリ開発実践編
HTML5ハイブリッド アプリ開発実践編
サイネージを使う顧客創出のシナリオ
サイネージを使う顧客創出のシナリオ
Monacaでつくるハイブリッドアプリ
Monacaでつくるハイブリッドアプリ
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
【JavaScript SDK ver.2】MonacaとmBaaSでプッシュ通知を体験しよう(for Android & iOS)
【JavaScript SDK ver.2】MonacaとmBaaSでプッシュ通知を体験しよう(for Android & iOS)
Spring social の基礎
Spring social の基礎
【Monaca×mobile backend】 プッシュ通知をカンタン実装! スピード感ある開発をしよう!
【Monaca×mobile backend】 プッシュ通知をカンタン実装! スピード感ある開発をしよう!
インフラ刷新プロジェクト「Neco」が目指す最高のクラウドとは
インフラ刷新プロジェクト「Neco」が目指す最高のクラウドとは
Plus de kintone papers
kintone Café Kagoshima Vol.6
kintone Café Kagoshima Vol.6
kintone papers
kintone Café 広島 Vol.6(kintone AWARDとhackダイジェスト)
kintone Café 広島 Vol.6(kintone AWARDとhackダイジェスト)
kintone papers
kintone evaCamp 2017 Preview
kintone evaCamp 2017 Preview
kintone papers
KintoneConnecttoPlay20171103
KintoneConnecttoPlay20171103
kintone papers
KintoneConnectPlay201710v1
KintoneConnectPlay201710v1
kintone papers
TwilioKintone20171012
TwilioKintone20171012
kintone papers
kintone café 信州 vol.1
kintone café 信州 vol.1
kintone papers
kintone REST API Handson 2017-1
kintone REST API Handson 2017-1
kintone papers
MA2017 kintone説明
MA2017 kintone説明
kintone papers
gusukuではじめるデベロッパーフレンドリーなキントーンのアプリ管理_金春氏&どりぃ氏
gusukuではじめるデベロッパーフレンドリーなキントーンのアプリ管理_金春氏&どりぃ氏
kintone papers
Cisco Spark x kintoneで今すぐ作ってみよう!Botな世界_大園 通氏
Cisco Spark x kintoneで今すぐ作ってみよう!Botな世界_大園 通氏
kintone papers
情シスが語る!社内カスタマイズ事例_渡辺拓
情シスが語る!社内カスタマイズ事例_渡辺拓
kintone papers
Kintone Connect Play Vol.1 201707
Kintone Connect Play Vol.1 201707
kintone papers
kintone Café HIROSHIMA Vol4-20170629v1
kintone Café HIROSHIMA Vol4-20170629v1
kintone papers
kintone Café 愛媛 Vol.7
kintone Café 愛媛 Vol.7
kintone papers
170520 DataSpider DevConn Hackathon
170520 DataSpider DevConn Hackathon
kintone papers
kintone Café Akita Vol.1 対面開発
kintone Café Akita Vol.1 対面開発
kintone papers
kintone dev camp vol.11 kintoneの基本説明
kintone dev camp vol.11 kintoneの基本説明
kintone papers
kintone dev camp vol.11 kintone rest api ハンズオン初級編
kintone dev camp vol.11 kintone rest api ハンズオン初級編
kintone papers
kintone Café 愛媛 vol.6 (シェア用)
kintone Café 愛媛 vol.6 (シェア用)
kintone papers
Plus de kintone papers
(20)
kintone Café Kagoshima Vol.6
kintone Café Kagoshima Vol.6
kintone Café 広島 Vol.6(kintone AWARDとhackダイジェスト)
kintone Café 広島 Vol.6(kintone AWARDとhackダイジェスト)
kintone evaCamp 2017 Preview
kintone evaCamp 2017 Preview
KintoneConnecttoPlay20171103
KintoneConnecttoPlay20171103
KintoneConnectPlay201710v1
KintoneConnectPlay201710v1
TwilioKintone20171012
TwilioKintone20171012
kintone café 信州 vol.1
kintone café 信州 vol.1
kintone REST API Handson 2017-1
kintone REST API Handson 2017-1
MA2017 kintone説明
MA2017 kintone説明
gusukuではじめるデベロッパーフレンドリーなキントーンのアプリ管理_金春氏&どりぃ氏
gusukuではじめるデベロッパーフレンドリーなキントーンのアプリ管理_金春氏&どりぃ氏
Cisco Spark x kintoneで今すぐ作ってみよう!Botな世界_大園 通氏
Cisco Spark x kintoneで今すぐ作ってみよう!Botな世界_大園 通氏
情シスが語る!社内カスタマイズ事例_渡辺拓
情シスが語る!社内カスタマイズ事例_渡辺拓
Kintone Connect Play Vol.1 201707
Kintone Connect Play Vol.1 201707
kintone Café HIROSHIMA Vol4-20170629v1
kintone Café HIROSHIMA Vol4-20170629v1
kintone Café 愛媛 Vol.7
kintone Café 愛媛 Vol.7
170520 DataSpider DevConn Hackathon
170520 DataSpider DevConn Hackathon
kintone Café Akita Vol.1 対面開発
kintone Café Akita Vol.1 対面開発
kintone dev camp vol.11 kintoneの基本説明
kintone dev camp vol.11 kintoneの基本説明
kintone dev camp vol.11 kintone rest api ハンズオン初級編
kintone dev camp vol.11 kintone rest api ハンズオン初級編
kintone Café 愛媛 vol.6 (シェア用)
kintone Café 愛媛 vol.6 (シェア用)
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 /
Notes de l'éditeur
デバッガー接続待機ダイアログが表示される
Hello Worldアプリを開始したらIDEのダイアログを閉じる
エンジニア確保、コスト削減
Web開発と同じやり方で、ネイティブ機能も利用可能
1.
様々なデバイスをリアルタイムに検証, プロトタイプ開発における遠隔地での検証 あとでデモ見せる
ページ遷移アニメーションやエフェクトもOS毎に最適化 現時点ではOnsenUIだけ ApacheライセンスのOSS
先ほどの社内報もOnsen UIを使ってました プルフック どういうコンポーネントがあるのかは、 コンポーネント見せる
Androidのみ
下の方
Androidのみ
作成したアプリをストアに掲載したり、配布を行ったりするには、ビルドを行います。ビルドにはデバッグビルドやリリースビルドなど、いくつかの種類があります。また、iOSでは実機に転送するためにiOS Developer Programに加入する必要があります。ここでは簡単にビルドができるAndroid向けデバッグビルドを紹介します。
キャッチコピー、クラウドベースのハイブリッドアプリ開発環境 2.必要なものはブラウザだけ。面倒な環境構築は一切不要 3.モバイル向けに最適化されたUIフレームワーク
Télécharger maintenant