ひとりでできるもん！サーバープログラム不要、Java Scriptだけで作るハイブリッドアプリ(iphone,android,web)実践作成

TECHNOMOBILEGROUP　

HEAD OFFICETOKUSHIMA development section

|　 5floor Column Minamiaoyama,7-1-5,Minamiaoyama,Minato-ku,Tokyo 107-0062,Japan|　 3floor Tokushimakenkohkagaku-center,Hiraishisumiyoshi,Kawauchi-cho,Tokushima-shi Tokushima 771-0134,Japan

ひとりでできるもん！サーハーフロクラム不要で、 JavaScriptたけで作るハイフリットアフリ (iPhone,Android,Web)実践作成　

MonacaとMBaaS(KiiCｌ oud)を使い JavaScriptたけで本格アフリを作りましょう。PHPなどのサーハー処理は全く不要で JavaScriptたけで一人で作成しちゃいましょう。

COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.2

一人でアフリを作るのって大変じゃないですか？

６

サーハーと通信しないゲームならなんとかりそう。。。でも

Androidの開発では Javaの技術が必要。

iOSでは Swiftが必要

Webでは HTML＋ JavaScriptが

サーハーでは PHPを勉強しないと

データベースはMySQLを。。。。

AWSのクラウトも構築しないと。。。

etc.....


じゃあ協力者を集めてつくりますか。。

６

そんな、リーダーシッフないし。。。。説得する自信もない。どんたけ人数必要なの？

コミュ症たし。。。

そもそも友達がいないorz


６

みなさん、これたけの人を集めて、自分が作りたいサービスを作る自身がありますか？

すべて自分で勉強できますか？


６

どんたけ勉強すればいいんたよ。。。

チームが作れるならとっくに独立して会社作ってるわｗ


できるんです。ひとりで！

６

HTML5ベース＋MBaaSで！！！使う言語は JavaScriptたけ！

それってWebたけじゃん

Cordovaを使えば、 Push通知、 GPS、加速度センサ、 Beaconなどスマホの機能も使えるんです。


６

JavaScriptの知識たけでハイフリットな本格アフリを作りましょう！


６

ひとりでできるもん！


６

この学びの対象者は？→JavaScriptは使えるけど、 PHPなどのサーハー側の処理は難しいと思っている人。JavaScriptたけでサーハー処理が実現できます。Macユーザ向けに作成していますが、Windowsでも動く

教えないことは？→ばりばりの JavaScriptフロクラマーではないので深い知識はありません。難しい質問はしないで。


講師Gashfara,Inc.代表　　デジタルハリウット大学院客員講師茂木健一[email protected]　[email protected]　http://facebook.com/mogikenhttp://www.slideshare.net/mogiken1

　

自己紹介[フロフィール /実績 ]もぎ・けんいち●青山学院大学大学院卒。 Gashfara,Inc.代表。本社はハワイですが出社したことなし。ホノルルマラソンには参加ｗ青山学院大学大学院卒：エニックスでオリジナルゲーム制作 (Z80アセンフラ　CP/M)、 SmallTalkで人工知能開発（企業買収）。

（株）東洋情報システム退社後、（株）エイチアイ、クランスフィア（株）、（株）ファッションウォーカー（えびもえの EC）など数社のベンチャー企業の立ち上げ・創業期に参画し、ガシュファラ・インクを USで起業。システム開発ではゲーム、 TOL（ツタヤオンライン）の立ち上げ。動画配信システム (USENの Gate01： Gyaoの前進 )、電子マネーシステム（ Bitcash）、 ECフルフィルメントシステムなど、多彩な分野を経験。 IT関連教育では 1998年ころからデジハリの２．５階に間借りしながら教育コンテンツ作成（ JIB社）。 Brew、 Java、セキュリティーなどの講師として活躍。現在、（株） HUGGを設立し、スマホのカッフル向け SNSサービス [HUGG]をクローハルに展開。㈱テクノモハイルにて技術サポート。

【著書】BREWフロクラミンク実践ハイフル [ 共著 ] （インフレス）、 PHP 逆引き大全 516の極意 [ 共著 ]（秀和システム）

mailto:[email protected]



http://facebook.com/mogiken

http://www.slideshare.net/mogiken1



11

成長を実現させるシステム”モハイルトータルソリューション”

Webシステム

１

スマホアフリ

2 ゲームアフリ

3

モハイルトータルソリューション

B2B2C

コンシューマ向けの大規模 Webシステムの開発からアフリ・ゲーム開発までをマルチデハイスで対応

Technology 高い技術力 Market　市場ニーズとマッチ

大規模Webシステムに強い

Java,PHP

Strong1最先端技術・独自フレームワークで

効率的な開発

Strong2高トラフィック、

インフラネットワークに強い

Strong3 フライマリーベンダー、

ヒアリンク・要件定義に強いStrongⅠ

情報資産の活用最先端と知見に強い

StrongⅡ

最先端のマルチデハイス

ウェアラフルに強い

StrongⅢ

Mashup Awards 5 年連続受賞会社名株式会社テクノモハイル

設立 2008年

資本金 2,500 万円

代表播田　誠

従業員数 100 名（クルーフ合計）

本社所在地〒 107-0062　

東京都港区南青山 7-1-5 コラム南青山

5F

開発室〒 771-0134

徳島県徳島市川内町平石住吉 209-5

徳島健康科学総合センター 3F


どんなアフリを作るの？

６

SNS（情報共有）アフリ。ID, パスワートでユーザ登録をし、メッセージを共有できます。

※ 応用範囲は広く、画像投稿、いいね機能を追加すれば、フリーマーケット、Airbnb 空き部屋共有、デート情報共有などに改造しやすい。


Monacaとは？

６

HTML5を使ったアフリ開発環境です。・開発環境はフラウザで動作します。 Gitなどと連携したい時は LocalKitという PCで動くツールを使います。・ JavaScriptで作ります。・ SPAになります。・実行環境

こんなことができる： https://ja.monaca.io/book/support/　

Monaca

Cordva(ハート処理： GPS、加速度センサ、 Beacon)

HTML5Onsen UI(AngularJS、 Bootstrap)

https://ja.monaca.io/book/support/

https://ja.monaca.io/book/support/


MBaaS(KiiCloud)とは？

６

クライアントから APIを実行するたけでサーハ側のデータやファイル、ユーザ認証ができるクラウトサービスです。MBaaS

従来のアフリ構成

アフリ (iPhone,Android,JavaScript) サーハー (PHP,Java...)

データベース

ファイルサーハーアフリとサーハーフロクラム、データベースなどの複数の知識が必要

MBaaSのアフリ構成

アフリ (iPhone,Android,JavaScript) MBaaS(ユーザ認証 ,データベース ,ファイルサーハー )

アフリのフロクラミンク知識たけで開発可能SDKの APIを実行するたけ。 DBも JSON 形式で自由に登録できます。テーフルを用意するなどの準備は不要。

ユーザ認証、データ保存(JSON 形式 )、ファイル UPなどの機能を SDK（ JS Android iPhone）で提供

SDK


KiiCloudの情報

６

http://documentation.kii.com/ja/guides/javascript/quickstart/http://www.riaxdnp.jp/?p=6722　

API

参考

http://www.riaxdnp.jp/?p=6722







Monacaのユーザー登録をしましょう

６

https://ja.monaca.io/　ここにアクセスしてユーザ登録してくたさい。

https://ja.monaca.io/

https://ja.monaca.io/


サンフルを動かしてみましょう

６

無償版では最大３フロジェクトまで作成できます。

HelloWorldを動かしましょう。

①

②QRコートからアフリをダウンロート

③ 登録アカウントでロクイン


６

① 接続メッセージが表示されれば OKです。PCとアフリは同じWiFiに接続していないと認識されません。


６

①アフリを動かしてみましょう。

②フロクラムをのぞいてみましょう。


KiiCloudのユーザー登録をしましょう

６

http://jp-cloud.kii.com/　ここにアクセスしてユーザ登録してくたさい。

①

②

③

http://jp-cloud.kii.com/

http://jp-cloud.kii.com/


６

①

②

③

KiiCloudにロクインしましょう


６

KiiCloudのアフリ環境を作りましょう

①②

③

④

⑤


６

KiiCloudの SDKをダウンローしてアクセスキーをメモ

①JSの SDKファイルをダウンロート。拡張子が .jsになっていない時は修正してくたさい。

②

③アクセスキー２つをメモしてくたさい。これを使ってクライアントアフリからアクセスします。

④


Monacaでフロジェクトを作りましょう

６

①

②


６

①

②

③


Monacaのフル機能をつかって本格アフリを作りましょう

６

今回作成したフロジェクトファイルを下記からダウンロートして下さい。

https://goo.gl/G0TZta





フロジェクトをインポートします。

６

①

②


６

①

②

③

④


KiiCloudのアクセスキーを設定しましょう

６

Kii.initializeWithSite("自分のアクセスキーに変更 ", "自分のアクセスキーに変更 ", KiiSite.JP);

index.htmlの下記の部分を自分の KiiCloudのアクセスキー (app id,app key)に変更してくたさい。 KiiCloudの管理画面で確認できます。


Monacaでデハックするには

６

①アフリでエラーが発生すると Consoleにエラーが表示されます

※abcの Functionはありません（エラー）

フレークポイントの機能はありません。


６

①フレビューを使うとフラウザで動作確認できます。

②エラーメッセージはChromeなどの JavaScriptコンソールに表示されます。たたし、MonacaIDEのエラーも表示されるのでデハックしにくい。スマホでエラーが出なければOK.console.log()が表示されないことも多い。


保存データを見るには？

６

KiiCloudの管理画面で DataBrowserで確認できます。


フロクラムの解説

６

index.html

regist.htmllist.html

post.htmlapp.js

ファイル構成・ app.jsに JavaScriptをまとめて記載します。　


６

index.html　全体のページ・ loader.jsが componentsのライフラリーを読み込むための JS。コンポーネントはMonacaの UIから編集できます。・ html5-cloud-sdk-xx.jsが KiiCloudの SDK・ app.jsに自由に JSの関数を定義しておく。 HTMLは含まないように！・<ons-xxx>は OnsenUIのタク。ここを一読：　　　　　

http://ja.onsen.io/guide/overview.html　・ ng-controllerが AngularJSのコントローラです。このコントローラ毎に処理を記述します。複数定義することも出来ます。 ng-xxが AngularJSの機能になります。・ ons-navigatorが画面表示と遷移を制御します。・ ons-templateが表示部品を管理します。

regist.html 新規登録・ロクイン画面・ ons-pageが表示ページです。・ ons-toolbarがツールハーの表示・ ons-buttonが OnsenUIのボタン。 ng-clickが便利なので。・ ng-clickで属しているコントローラの関数が実行できる (app.controllerで定義した $scope.xxxという関数 )。

http://ja.onsen.io/guide/overview.html




６

list.html　一覧表示・ ons-toolbar-buttonがツールハーのボタンを表示・ ons-listがテーフル表示・ ons-list-itemでデータ１件を表示します・ ng-repeat=“message in messages”で $scope.messagesの配列を繰り返し、変数messageに代入します。 AngularJSの機能。・ {{ message.message }}　表示するデータを {{}}で指定します。

post.html 投稿・他と同じ。データの保存も JSON 形式で保存します。


画面・機能を追加するポイント

６

画面の追加・<ons-page>を記載した htmlファイルを追加する。・ onClick=“myNavigator.pushPage(‘xxx.html’)”のように画面遷移する

機能追加・ ng-clickで実行したい関数はコントローラーで $scopeに追加する。

$scope.functionName = function() { xxxx; };・ずっと保持したい変数は $scope.xx = yyyのように $scopeに代入しておく。・データクラス（ Entity）は app.factoryで定義する ( 例：Message)。使用するコントローラの引数に追加する。 app.controller('MyController', function($scope,Message) ...

　　


６

応用範囲は広く、画像投稿、いいね機能を追加すれば、フリーマーケット、 Airbnb 空き部屋共有、デート情報共有などに改造しやすい。


KiiCloudTips 画像を UPするには？　アクセス権は？

６

●画像の UP:KiiCloudの APIリファレンスにサンフルがあるのでこれを参考にしてくたさい。ハケットに FileBodyが追加されるイメージです。

http://docs.kii.com/references/js/storage/latest/symbols/KiiObject.html#uploadBody　

●アクセス権：今回使用したハケットmessageDataはフリケーションスコーフに作成され、ロクインユーザであれば誰でも操作できます。特定のユーザたけ、クルーフたけでデータを共有したい時は、ユーザースコーフ、クルーフスコーフにハケットを作成して ACLで権限を付与します。参考：http://documentation.kii.com/ja/guides/javascript/managing-data/buckets/setting-acl/http://www.riaxdnp.jp/?p=6770　　

http://docs.kii.com/references/js/storage/latest/symbols/KiiObject.html%23uploadBody



http://documentation.kii.com/ja/guides/javascript/managing-data/buckets/setting-acl/






６

●Push通知トピックを作成して購読する。

http://documentation.kii.com/ja/starts/cloudsdk/managing-push-notification/push_kiicloud/push-to-user/

http://documentation.kii.com/ja/guides/javascript/managing-push-notification/　




http://documentation.kii.com/ja/guides/javascript/managing-push-notification/




AppleStoreにリリースするには

６

通常の iOSアフリと同じように申請することが出来ます。ここに詳細手順が記載されています。

http://docs.monaca.mobi/cur/ja/manual/deploy/appstore/reg_appstore/　

http://docs.monaca.mobi/cur/ja/manual/deploy/appstore/reg_appstore/

http://docs.monaca.mobi/cur/ja/manual/deploy/appstore/reg_appstore/


もっとMonacaを学ぶには？

６

http://goo.gl/xbq7Vy



Documents

ひとりでできるもん！サーバープログラム不要、Java Scriptだけで作るハイブリッドアプリ(iphone,android,web)実践作成