Cordova  と  IBM  Bluemix  の  Mobile  Data  サービスを利利⽤用して ハイブリッド・モバイル・アプリを作成する クラウド事業統括

Cordova と IBM Bluemix の
Mobile Data サービスを利利⽤用して
ハイブリッド・モバイル・アプリを作成する
クラウド事業統括
エコシステム・ディベロップメント
森住 祐介
事前準備
事前準備
•  Node.jsのサイトからインストール
https://nodejs.org/en/
•  Cordovaのインストール（管理理者権限で実⾏行行）
sudo npm install –g cordova
•  Android SDKのインストール
https://developer.android.com/intl/ja/sdk/index.html
事前準備
•  Android SDKのインストール
https://developer.android.com/intl/ja/sdk/index.html
Stand Aloneのみダウンロードした⽅方はパス設定が必要
★以下のサイトをご参考★
Win↓
http://matome.naver.jp/odai/2141480427409191001
Mac↓
Qiita「Cordovaを導⼊入してIBM Bluemixと連携させてみる」
3.1 PATHの通し⽅方
3.2 Android SDKへのPATH設定
⾃自⼰己紹介
森住 祐介（もりずみ ゆうすけ）
•  ⼊入社以来、⾦金金融業界のメインフレーム（System z）のSE
•  メインフレームのSoRの世界とクラウドのSoEの世界をつなげ、 イノベーションを推進するためクラウド事業に異異動
•  スターアップ⽀支援、アカデミックプログラム⽀支援の活動と共に、モ
バイルにフォーカスしたソリューションの勉強会や講演、ハッカソ
ンの⽀支援を通じてクラウドのエコシステムを形成する現在の仕事に
従事
IBM Bluemixとは？
IBM Bluemixご紹介
•  IBM 次世代クラウド・プラットフォーム：”IBM Bluemix”
クラウド・アプリケーション開発・稼動のためのPlatform as a Service 環境。数多くのIBM製、
3rd Party製、ならびにオープンソースのランタイム (Runtime)、サービス (Service)、などを提供。
Bluemixのプライシング
Bluemixとは
§  様々なプログラミング言語に
対応したアプリケーションの
実行環境を提供
§  オープン・スタンダードを活用
した環境
§  既存システム (SoR) との
統合サービスを提供
§  モバイル用の数多くのサービス
§  DevOps サービス提供
大きくは以下の3種類
§  PAYG (PAY AS YOU GO) モデル
§  サブスクリプション・モデル
§  Bluemix Local
加えて以下を提供
§  フリートライアル（30日間）
§  テクニカルサポート（有償）
アプリケーションの
コンポーザブル な環境
デプロイとスケール
信頼性の高いコード
Deploy and scale
Code with confidence
Compose applications
IBM Softlayer のインフラを
利用した、新規アプリケー
ションやサービス
オープンPaaSであるCloud Foundry
をプラットフォームとし、セキュリティや
ユーザーインターフェイスなどを拡張
IBMテクノロジーだけではなく、
パートナーや、オープンソース等の
豊富なランタイムとサービスを提供
Bluemix ご活⽤用イメージ
顧客
新たな顧客体験
社内ユーザー
IoTクラウド
アプリケーション
開発者
Analytics
Warehouse
Push
IoT
お客様データセンター
サービス Cloudant
cf tool
SoR
ランタイム
SQL DB
DevOps Services
API
Cloud
Integration
アドオン
Bluemix プラットフォーム
Salesforce
IBM SaaS
Google
Azure
部品を組み合わせてアイディアを形に
Mobile Services
Watson Services
Cloud
Integration Services
Database services
Big Data services
Web and application services
Security Services
クラウドサービス概要図
・OpenStackベースのオープンなインフラ
・レガシーに相性のいい⾼高性能なベアメタルも
・Fusion IOや3TBメモリーのマシン等々
・グローバルサービスで、⽇日本DCも
IaaS IBMクラウド ・オープンスソースのCloud Foundryベースの
Java、Node.jsやRubyを対応するPaaS
・Docker対応やDevOpsサービスも
・約30秒で実⾏行行環境をセットアップが可能
PaaS ・・・ ・コンポーザブルな開発環境・エコシステム
・開発者は、構成済みのサービス、ランタイム
などを使ってブロックを組み⽴立立てるように⼿手間
少なくアプリやシステム構築が可能に
SaaS APIエコノミー APIエコノミープラットフォーム
RabbitMQ エンタープライズ 固定IP 脆弱性 分析 モバイル SDK モバイル セキュリティ ワークフロー キャッシュ モバイル アクセス SSO 翻訳 Ustream プッシュ 通知 MQ Light Twi>er スケジューラ 音声認識 Twilio IoT ウェブアプリ セキュリティ New Relic DevOps モバイル Cloudant NoSQL Redis PostgreSQL DWH IoT Watson Hadoop Geo 画像解析 監視 オートスケール MongoDB セッション キャッシュ トレードオフ アジャイル JMeter ElasDcSearch ビジネウ プロセス 性格解析 品質管理 Sendgrid Spark オンプレ 連携 DB+分析 連携 API管理 11 本⽇日のハンズオン
Cordova と IBM Bluemix の
Mobile Data サービスを利利⽤用して
ハイブリッド・モバイル・アプリを作成する
Cordovaって？
HTML5ハイブリッドアプリ開発を⽀支えるOSS
ハイブリッドアプリ？
仕組みについて
ネイティブアプリ
ハイブリッドアプリ
Java
Swift
Java/Swift
ハイブリッドアプリ開発のメリット
HTML5やCSS3、Javascriptで横断的に開発可能
Ionicって？
Cordovaを拡張して作られた
美しいUIのフレームワーク
Googleが開発しているJavascriptフレームワーク
Mobile Dataって？
クラウド上のデータ・ストアを提供
JSON形式でデータを保存するMBaaS
• 
• 
• 
• 
• 
Cloudantベース
異異なるモバイル・クライアントとデータ共有
シンプルなAPI/SDKを提供
Object-‐‑‒C、Java、Javascript
ファイル同期
本⽇日のデモアプリ
Mobile Data
非同期更新
認証
Mobile ApplicaDon Security
Node.js
https://ibm.biz/BdHrmf
ソースコードは
IBM DevOps Serviceの
リポジトリにあります
https://ibm.biz/BdHrKf
⼿手順はこちら
追加でインストール頂くもの
①Bowerのインストール
BowerはJavaScript⽤用のパッケージマネージャー
bower.js内にインストールする依存ライブラリを
書いて使う（後ほど使います）
npm install –g bower
②ionicのインストール
美しいシンプルなUIのフレームワーク
npm install -‐‑‒g ionic
Bluemix SDKの初期化
本来はSDKを開発フォルダに
ダウンロードし使⽤用します
Bluemix SDKの初期化
Bluemix Mobile SDK
・IBMBluemix.js
・IBMData.js
初期化処理理が必要↓bluelist.jsにId、Secret、Routeを⼊入れてください
{
"applicationId": "09608f39-‐‑‒b631-‐‑‒4804-‐‑‒bc3b-‐‑‒5343c61e6fe1",
"applicationSecret": "ef4d81f528ab8c2255fc8fba2386392e9f51e14b",
"applicationRoute": "http://mz-‐‑‒mobilecloud-‐‑‒z003.eu-‐‑‒gb.mybluemix.net"
}
Buildエラーになった場合
•  CordovaでセットされたSDKのターゲットと、Android SDKでセットされたバージョンが違う
ERROR: Error: Please install Android target: "android-‐‑‒22".
bluelist.json編集後
アプリケーションのディレクトリから以下の順序で実⾏行行する。
（・・/bluelist-‐‑‒mobiledata-‐‑‒cordova内）
•  1. bower install JavascriptやCSSのフレームワークをInstall
•  2. web securityのOFF （Mac）open -‐‑‒a Google\ Chrome -‐‑‒-‐‑‒args -‐‑‒-‐‑‒disable-‐‑‒web-‐‑‒security
（Win）start chrome.exe -‐‑‒-‐‑‒disable-‐‑‒web-‐‑‒security
•  3. cordovaコマンドからアンドロイド環境のセットアップ
cordova platform add android
•  4. Cordovaがサーバーと通信するためのプラグインを追加する
cordova plugin add cordova-‐‑‒plugin-‐‑‒whitelist
•  5. www/index.html内にsecurityポリシーのヘッダを追加する
<meta http-‐‑‒equiv="Content-‐‑‒Security-‐‑‒Policy" content="default-‐‑‒src *; style-‐‑‒src 'self' 'unsafe-‐‑‒inline'; script-‐‑‒src 'self' * 'unsafe-‐‑‒inline' 'unsafe-‐‑‒eval'">.
•  6. ビルド
ionic build android
•  7. サンプルを起動させる
ionic run android
ハンズオンは以上です!
お疲れ様でした!!
Bluemix User Group -‐‑‒ BMXUG（ビーザグ）
Bluemixのユーザー会が発⾜足しました！
ぜひご参加ください！
BMXUGはユーザー様主体、有志によって運営される
情報交換・ネットワーキングの場です
BMXUGへの参加⽅方法
で「グループに参加」
http://ibm.biz/bmxug-‐‑‒facebook
で「コミュニティに参加」
http://bmxug.doorkeeper.jp