×

Mobile Cloud Night 2015年11月11日

×講師紹介 •  森住 祐介（もりずみ ゆうすけ） •  クラウド事業統括 •  エコシステム・デベロップメント

•  2009年 日本IBM株式会社入社 •  入社以来、金融業界のメインフレーム（System z）を担当 •  メインフレームのSoR（システムオブレコード）の世界とクラウドのSoE（システムオブエンゲージメント）の世界をつなげ、　イノベーションを推進するためクラウド事業に異動

•  スターアップ支援の活動と共に、モバイルにフォーカスしたソリューションの勉強会や講演、ハッカソンの支援を通じてクラウドのエコシステムを形成する現在の仕事に従事

×はじめに •  Mobile Cloud Night って何？

–  モバイルアプリ開発の最新情報やHints&Tipsなどについてゆる～く情報交換やワークショップを交えた勉強会を実施する

–  全3回 •  第1回　2015年10月14日（水） •  第2回　2015年11月11日（水）★本日★ •  第3回　2015年12月09日（水）

×Why Mobile? Why Cloud? •  ビジネスの世界で起きている変化 クラウドを含む新しいテクノロジーの出現により、私たちは今、転換期にあるといえます。 タイムリーなマーケティング・キャンペーン

ある店舗でクレジット･カードを 使用すると、近隣の店舗から クーポンが送られてきます。 その結果、

109% の売り上げ増を実現

ジャスト･イン･タイムのメンテナンス

迅速なビッグデータ分析

国際的な航空エンジン製造業者では、 1年でサービス収益が

12%

国際的な証券取引所での市場監視アルゴリズムでビッグデータ分析 プラットフォームを活用し、

99% 35%

向上。 リアルタイムのモニタリングと予測障害検知を活用。

応答時間を 短縮

ITリソースの 削減

×Why Mobile? Why Cloud? •  いまどきの開発に求められること

×Why Mobile? Why Cloud? •  「個」の理解と顧客エンゲージメント向上の必要性

Systems of Engagement 新しい個客接点システム

Systems of Record 従来型の提携業務処理システム

ERP

CRM

HR SCM

Systems of Record (SoR) Systems of Engagement (SoE) 主な役割 企業の業務効率化、業務用データ処理 個客エンゲージメント、新規事業の創出、ビジネス変革 重要な要素 堅牢性、信頼性、確実性、機密性 柔軟性、俊敏性 開発のアプローチ ウォーターフォール アジャイル、トライ&エラー コードの主体 スクラッチ、パッケージ APIエコノミー、組み合わせ システム運用 開発とは別プロセス DevOps（一体的） リソース所要量 予測は可能 予測が困難 改良のサイクル 組織主体で計画的 状況に合わせて適宜

×Why Mobile Cloud Night? •  アプリ開発におけるコスト アプリ開発・運用で見えているコストは全体の30%

残りの70％のコストは隠れている

×Why Mobile Cloud Night? •  両者を効率的に学び明日のビジネスに活かせる勉強会を！

×

×

Bluemixのご紹介

×

•  IBM 次世代クラウド・プラットフォーム：”IBM Bluemix”

IBM Bluemixのご紹介

アプリケーションの “コンポーザブル”な環境 Compose applications IBMテクノロジーだけではなく、 パートナーや、オープンソース等の 豊富なランタイムとサービスを提供

信頼性の高いコード Code with confidence オープンPaaSであるCloud Foundry をプラットフォームとし、セキュリティや ユーザーインターフェイスなどを拡張

デプロイとスケール Deploy and scale IBM Softlayer のインフラを 利用した、新規アプリケーションやサービス

大きくは以下の3種類 !  PAYG (PAY AS YOU GO) モデル !  サブスクリプション・モデル !  Bluemix Local 加えて以下を提供 !  フリートライアル（30日間） !  テクニカルサポート（有償）

Bluemixのプライシング !  様々なプログラミング言語に 対応したアプリケーションの 実行環境を提供

!  オープン・スタンダードを活用した環境

!  既存システム (SoR) との 統合サービスを提供

!  モバイル用の数多くのサービス !  DevOps サービス提供

Bluemixとは

クラウド・アプリケーション開発・稼動のためのPlatform as a Service 環境。数多くのIBM製、 3rd Party製、ならびにオープンソースのランタイム (Runtime)、サービス (Service)、などを提供。

×

•  IBM Bluemixの活用イメージ

IBM Bluemixのご紹介

1U]NVR gggggm

Salesforce Azure

Google

SQL DB

Cloudant

CloudIntegration

DevOps''Services

API

Push

u m m

AX

IoT

XB

Analytics Warehouse

m m

cf tool

IBM SaaS

×

IBM

'API ' SaaS'

PaaS'IaaS'

'

j YNWA JLT m mj m ss

j5][RXW ” B1 m lj m m “h 32

j m m 2UX]M 5X]WM a m9J Jh XMN S[” ]Ka JJA

j3XLTN ”3N Y[ mj ( “ w

j m jj –h • m h

• ty ” w

クラウドサービス概要図

×

13'

DB+ 'IoT'

'

''

'DevOps'

Watson'

'

'

'

'

'

Twilio'

''

'

'SDK'

''

''

'

New'Relic'

'

'

JMeter'

Ustream'

''

'

MQ'Light'

''

'

'

RabbitMQ'

Sendgrid'

'IP'

API '

''

Hadoop'

Spark'

Cloudant'NoSQL'

DWH'

ElasFcSearch'

Geo'

Twi>er'

MongoDB'

PostgreSQL'

Redis'

''

SSO'

IoT'

APIエコノミープラットフォーム

×

サービス名（抜粋） サービス概要 Advanced Mobile Access

リアルタイムのパフォーマンスおよびデータ使用から運用状況を分析し、iOS 8 アプリケーションを微調整します。 バックエンド・システムとの通信が必ず保護されるようにしてください。 アプリケーション・ユーザーが、カスタム・アカウントまたは既存のソーシャル・アカウントを使用してログインできるようにします。

Mobile Application Security

ベーシックなモバイルのセキュリティを提供するサービス。アクセス制限等の機能を備え、バックエンドサーバーのセキュリティーを堅牢にします。

Mobile Data Cloudantで提供されるシンプルでスケーラブルなデータベース。

Mobile Quality Assurance

Mobile Quality Assuranceはセンチメント分析、空中ビルド配布、自動化されたクラッシュ報告、アプリ内のバグ報告とユーザーフィードバックを基にモバイルアプリのテスト、ユーザー検証、および合理化された品質フィードバックを可能にします。

Presence Insights このサービスは、物理ロケーションでのモバイル・デバイスの動きにたいして、リアルタイム分析とヒストリカル分析を実行します。これらの洞察はコンテキストに即した関連性を持つ関与戦略を強化し、ユーザー・エクスペリエンスを最適化して、アプリケーション内のコンバージョンを促進します。

Push 適切な場所とタイミングで、プッシュ通知サービスを提供します。

IBM Bluemixのサービスご紹介

×

•  NoSQLベースの 　 DBaaSとしてマネージド・サービスを提供

" スモールスタート可能 " 水平拡張可能なスケーラビリティ " 日時で数百万人のアクティブ・ユーザもサポート可能

" 複数データセンターとデバイスにデータを分散

" マルチマスタ・レプリケーションによる高可用性とスケーラビリティを実現

" データベースの管理タスクではなく新規開発に注力

" パフォーマンスとアップタイムを保証

１.即時に適切な処理能力を提供 ２.高可用性とハイ・パフォーマンス ３.24x7体制での管理サービス

4.フレキシブルなスキーマ " JSONと呼ばれるデータフォーマットを使用

"  {“name”: “John Smith”, “age”: 33} といった可読性が高く簡潔に構造化されたデータをフィールドの数や長さに特に制限はない形で出し入れ可能

" 複雑で多種多様に変化するデータ構造に対応が可能

5.dashDB (DWH)との連携 " CloudantデータをRDBデータへ自動変換

" DWaaSの提供

dashDB

6.豊富な実績 " CloudantのDBaaSを世界25,000社以上が活用

IBM Bluemixのサービスご紹介

×

•  リッチなモバイルアプリケーション提供のために柔軟なデータ保存とアクセスならびに可用性を実現

IBM Bluemixのサービスご紹介

!  サーバーとローカル・デバイスにデータを保存 !  Cloudantからデータのプッシュとプルを行うことによって、複数デバイス間のデータを同期

!  ネットワークに接続できない場合は、ローカル・ストレージからの読み取り処理と書き込み処理を提供

!  接続が復旧すると、サーバーにデータの同期が行われ、同じデータソースに接続するその他のデバイスのデータの同期も行われます。

!  修正履歴のレプリケーションによって、データの一貫性を維持

ローカル・ ストレージ

ローカル・ ストレージ

×

Monacaのご紹介

×アシアル株式会社のご紹介

アシアルは、「エンジニアリングでインターネットの成長を牽引する」という事業コンセプトのもと、7B ,、9J JAL RY を中心としたENK技術をベースにした、デベロッパー支援事業を行っております。

p n 2, 2 y L w L u

×講師紹介

アシアル株式会社　Monacaエバンジェリスト 生形　可奈子　 （うぶかた　かなこ） 著書：スラスラわかるJavaScript （翔泳社刊）

×モバイルOSシェア

全世界のスマホ出荷台数は毎年10億台以上。日本ではAndroidとiOSがOSシェアを二分しており、クロスプラットフォーム対応モバイルアプリの需要が急増中

Other'4%'

Kanter'Worldpanel

2015 6

×モバイルアプリ開発に関する課題

開発言語がOS毎に異なるため、 1.  開発工数がかかる 2.  ソースコード管理の複雑化 3.  エンジニアの確保が困難

×

×

×HTML5という選択肢

×

Webアプリとネイティブアプリの特徴をいいとこどりしたアプリを「ハイブリッドアプリ」と呼びます。 　 ハイブリッドアプリは、Webの技術を使って開発しますが、生成されるアプリはネイティブアプリと同等のものになります。

I4 n p o n

ハイブリッドアプリの登場

×

ハイブリッドアプリは、Cordova（PhoneGap）というライブラリを利用して開発します。 CordovaはHTMLで作成されたコードをネイティブコードでパッケージングします。

ハイブリッドアプリの仕組み

p o

4

'HTML5 '

'''

×HTML5モバイルアプリ開発環境：Monaca

•  世界中で10万人以上が利用 •  クラウドベースのモバイルアプリ開発環境 •  iOS, Android, Windows, Chrome Apps対応 •  無料から利用可能

×

インストール不要。ブラウザだけですぐに開発をはじめられます。実機に専用アプリを入れておけば、リアルタイムに動作検証できます。

Monacaによるアプリ開発

“g

“ zg

XXPUN 2 XVN

×

手軽に利用できてハイパフォーマンスなモバイルアプリのためのUIフレームワーク「Onsen UI」を標準搭載。

Onsen UI

•  フラットデザイン/マテリアルデザイン対応

•  ネイティブと遜色ないアニメーション •  豊富なUIパーツ •  SPAの構築が容易 •  UIガイドラインに準拠

×

独自タグを埋め込むだけでモバイルライクなUIを簡単に構築することができます。

Onsen UIの使い方

<ons-toolbar></ons-toolbar>

<ons-list-item></ons-list-item>

<ons-tabbar></ons-tabbar>

×

第一部：Monaca×Bluemixハンズオン

×今回作成するアプリ

•  カメラを起動して写真を撮影し、位置情報とセットでCloudantデータベースに登録するアプリを作成します。

×Cloudantの利用開始 •  Bluemixにログインして、ダッシュボードから、「サービス＆API」を選択します。

API

×Cloudantの追加 •  サービス一覧から「Cloudant NoSQL DB」を選択、デフォルトのまま「作成」ボタンをクリック

×Cloudantダッシュボードを開く •  Bluemixダッシュボードに戻ると新しくCloudantサービスが増えているので、クリックしてCloudantダッシュボードを開きます。

Cloudantダッシュボード

×データベースの作成 •  ダッシュボード右上の「Add New Database」をクリックして、データベース名として「report」を入力し「Create」ボタンを押します。

データベースが作成されると以下の 画面が表示されます。

×インデックスの作成 •  歯車のアイコンをクリックして「Query Indexes」を選択します。 •  説明文中にある { "index": {}, "type": "text" } を黒枠内にコピーして「Create Index」ボタンをクリックします。

×Cloudantデータベース構築完了 •  これでCloudantデータベースの構築は完了です。つづいて、MonacaアプリからCloudantデータベースへの登録処理を行います。

×Monacaのアカウント登録 •  ブラウザでMonacaのWebサイトを開き、「サインアップ」をクリックして下さい。

http://ja.monaca.io/

×アカウント情報入力 •  メール受信可能なアドレスとパスワードを登録して下さい。

×アカウント仮登録完了 •  ダッシュボードという画面に遷移します。先程のメールアドレスに確認のメールが届きます。

×アカウントの本登録 •  確認メールに記載されたURLにアクセスし、必要事項を入力することで登録完了です。

×プロジェクトの作成 •  「開発をスタート」「Monaca.ioで開発」の順に選択します。

×プロジェクトのインポート •  「Import Project」を選択するとプロジェクトのインポート画面が表示されるので、以下の情報を入力してインポートを実行します。

#  プロジェクト名 ： Bluemixアプリ #  URLを指定してインポート ： http://bit.ly/1l8I1Gu

×IDEの起動 •  プロジェクトが作成されたら、「開く」ボタンをクリックしてIDEを開きます。

ファイルの管理を行います

ファイルの編集を 行います プレビューを

表示します

デバッグ情報を表示します

ダッシュボードを 開きます

×Monacaデバッガーのインストール Google PlayまたはApp Storeで、「monaca」で検索し、スマートフォンにインストールして下さい。

アイコンはこちらです。

×Monacaデバッガーの使い方 •  Monacaアカウントでログインすると、プロジェクト一覧画面が表示されるので、「Bluemixアプリ」プロジェクトを選択するとアプリが実行されます。

×Monacaデバッガーで動作検証する •  アプリを動かしてデータの登録ができることを確認しましょう。

×自分のCloudantデータベースに接続する① •  Bluemixダッシュボードに戻り、「サービス資格情報」を選択します。

•  "username"と"password"の値をコピーします。

×自分のCloudantデータベースに接続する② •  Monaca IDEで、ファイルツリーからjsフォルダ内の「app.js」ファイルを開き、2行目と3行目にコピーした値を貼り付けます。

Monaca '

×登録データの確認 •  Monacaデバッガーでデータを登録した後、Cloudantダッシュボードの「All Documents」を選択すると登録されたデータを管理画面で確認できます。

•  データをダブルクリックすると詳細画面が開きます。「View Attachments」をクリックすると画像を見ることができます。

×位置情報の登録 •  写真撮影場所の情報を併せて登録できるようにします。

ON '

×スイッチUIの実装 •  スイッチボタンは初期状態では非表示に設定されているので、index.htmlの13行目のCSSを変更して表示状態に切り替えます。

以下のように変更 #new-page .setting { display: block; }

×スイッチUIの実装 •  スイッチボタンは、index.htmlの87～90行目で定義されています。CSSを書き換えることにより、以下のタグが表示されるようになります。

<ons-switch>タグが スイッチボタンを表す

×位置情報の登録確認 •  スイッチON時に位置情報が登録されることを確認しましょう。

OFF

ON

×

以上でMonacaのハンズオンは終了です!

×

IBM MobileFirst Platformのご紹介

×Mobile Enterprise Application Platformの必要性

# 企業向けアプリケーションが必要とするセキュリティ、アプリケーション管理、ログ、オフライン・データの暗号化やバックエンド・サーバーとの連携などの機能を提供し、開発・保守の生産性を向上させます。

業務アプリA 業務アプリB 業務アプリC API

業務アプリA 業務アプリB 業務アプリC API

iOS Android Windows

セキュリティー

アップデート機能

ログ管理

Online/offline ログ管理etc. ダイレクトアップデート セキュリティー

iOS Android Windows

HTTP (REST, SOAP), JMS SAP SQL

HTTP, Cast Iron

業務アプリB 業務アプリC

業務アプリA 業務アプリA 業務アプリB 業務アプリC API

クラウド サービス クラウド

サービス

SAP バックエンド・サービス バックエン

ド・サービス

APS

DB

mWeb m

m mm/

jm

j m

Bean

m m

'[Model]

'[

]'

JSP'[View]'

JSP'[View]'

m m

JavaEE m m

[]

REST war

JavaEE m m XKRUN5R [ m m

m

7B

JavaScript'( )

0HDRN I

0HDRN I

7B , mo ENK p

7B

JavaScript'( )

0HDRN I

0HDRN I

XKRUN5R [

p

war

m m

warwar

p

XKRUN5R [

ObjecFveZC'Swi['Java'C#

ENK

war

SAP

CICS'z/OS

Cloud

２つのWebアプリのアーキテクチャー

c m –h iV m V Sln b r s si m ”

“ m m y sif

c –h b a t o ws i – if

c n x d b il –h m m m m

“x s v sif

c l m m–h b b ps i v – y

y s if

モバイルアプリの4つの課題

'''

'

'

mm

rw

m

m m

mv

h m

mm

“m m

h

モバイルプラットフォームのサービスを活用した 優れたアプリ開発

, B 0 dp n b

l L L W w m

×IBM MobileFirst Platformのキーとなる機能 •  すべてのステークホルダーに価値を提供する 　 モバイル・エンタープライズ・プラットフォーム

高度なデータ セキュリティー 継続的な改善 パーソナライズ

/ B B , 1

j m m

Application Scanning

モバイル・アプリの 脆弱性を特定 および修正

Quality Assurance

モバイル・アプリの開発ライフサイクル全体を 通して品質プロセスを

サポート

Cloudant

クラウドで利用できるNoSQLのデータスト

ア

Presence Insights

お客様の店舗内の 行動を分析し、 洞察を獲得

×IBM MobileFirst Platformの全体構成

MobileFirstの一般的な構成

DataCenter'(DMZ)' Backend'

System'1'

Backend'System'2'

-‐‑‒ 0X

E0A X BXVLJ

(Web)'

������ �

(Proxy�)'Internet'

MobileFirst''Server'

MobileFirst''Server'

Mobile'Device'

�"�$���� #�$����

(Web)'

MobileFirst''Studio'

DataCenter'

DB2'

MobileFirst APPL'DB'

DB2(�) or Oracle or MySQL Cloudant

���$����$��

ApplicaNon'Center'

����!����$�$(iOS,Android, Windows Phone)

•  MobileFirst Web AP Active-Active•  DB HA

New 7.1 XW RWMNYNWMNW mmw

XKRUN5R [2 m

A3: FLXMN

A3: FLXMN

×MobileFirst Platform Foundation Developer Edition •  Developer Editionは無償提供

•  stackoverflowなどでのサポート •  自習資料や参考資料が満載!

×MobileFirst Platform Foundation on Bluemix Containers •  Bluemix上でDocker Imageを元にMobileFirst Platformが稼働

より早く、よりシンプルに環境構築

×IBM Containersとは

• IBM Bluemix上で稼働可能なアプリケーションの種類の一つ • Dockerの稼働環境としてご利用可能 • オンプレミス環境や他のクラウドサービスとの可搬性に優れている

×Dockerの特徴

Build Ship Run

Anywhere

Any'App'

•  m j m m•  m m j m“ m mw) ((•  1 NM 7J JLT[YJLN D EJ N XXPUN RL X[XO 0EA

×コンテナ技術を実現するDockerエンジン

インフラストラクチャ オペレーティング・システム

ハイパーバイザー

ゲスト OS

ゲスト OS

ゲスト OS

ﾊﾞｲﾅﾘ ﾗｲﾌﾞﾗﾘ

ﾊﾞｲﾅﾘ ﾗｲﾌﾞﾗﾘ

アプリ1 ﾊﾞｲﾅﾘ ﾗｲﾌﾞﾗﾘ

アプリ2 アプリ3

インフラストラクチャ オペレーティング・システム

Dockerエンジン

ﾊﾞｲﾅﾘ ﾗｲﾌﾞﾗﾘ

ﾊﾞｲﾅﾘ ﾗｲﾌﾞﾗﾘ

アプリ1 ﾊﾞｲﾅﾘ ﾗｲﾌﾞﾗﾘ

アプリ2 アプリ3 仮想マシン コンテナ

コンテナの特徴 • コンテナ型の仮想化によりゲストOSからホストする仮想マシンと比べ、必要とする計算機資源が減少 • コピー・オン・ライトのファイルシステムを使用し、アプリケーションごとに異なるファイルなどレイヤーごとにサポート。また共通化できる部分は再利用を促進。

ハイブリッド・コンピューティングの利用でモバイル戦略を加速

+  ”+  m m “ m

+  “ j

fi o+  “ m

+  j m+  B m+  m” m

Private

Public On-premises IT

Mobile App Server

Hybrid'Cloud'

"  m h“ m

"  5 5X]WMJ RXW “h1U]NVR “ “

"  m g3N Y["  j y

" "  m d"  “

m

m

なぜMFPFをBluemixで動かすのか

想定されるユースケース

XKRUN5R [ UJ OX Vj

m hh m

w j“x m “

h

“– u r *(), “ •e  u wr h n s se  j m –1U]NVR “ v s

m h m “

×

5分でつくる! IBM MobileFirst Platform on Bluemix ハンズオン

×ハンズオンの内容

Admin Console

Admin Service

MFPF Runtime

WebSphere Liberty

Derby DB

HTTP Adapter LocalStore Adapter post'

pull'get'delete

get'post'

×

×

×

×

×

×

×

×

×

×

×

×

サンプルアプリを動かしてみよう!

×

•  お近くの席でAndroid StudioあるいはXcodeの環境がある方を中心に作業を進めます。

×

×

×

×

*Android Studioの方 •  Android Studioの起動 -> File -> Open -> （解凍したフォルダ） •  以下ファイルを編集

–  app > assets > wlclient.properties wlServerHost = xxx.xxx.xxx.xxx ← コンテナーのパブリックIPを指定

*Xcodeの方 •  Xcodeの起動 -> File -> Open ->（解凍したフォルダ） •  以下ファイルを編集

–  ParkStore > Products > worklight.plist

・protocol　　http→httpsへ変更 ・host 　　　 xxx.xxx.xxx.xxx ← コンテナーのパブリックIPを指定

×

×

•  USERNAME –  user

•  PASSWORD –  password

WishListに商品が追加されたことを確認してください。

×

×

•  Catalogを表示するなどして再度アクセスしてみてください。

•  メッセージが通知されていることをご確認ください。

×

Android studioあるいはXcodeをお持ちの方 •  IPアドレス（Xcode/Androidおよびシミュレーター）の箇所を周りの方のコンテナーのアドレスを指定して、サーバーにアクセスしてください。

•  MobileFirstPlatformのコンソール画面を確認してステータスを確認してください。

×

以上でハンズオンは終了です!

×

1U]NVR C[N X]Y 1 FC o m p

F x V V MXe S U M

1 FC – m m hj m “

© 2015 IBM Corporation

Empowering the IBM ecosystem

1 UXKJU W NY NWN] XP JV OX 2UX]M A J ]Y[Faifb1 -‐‑‒ m l l (

() MO (

o p h m

Y/ RKV KRb LUX]M

m h h m m JJAm JJA

.-‐‑‒

•  – 1U]NVR AXO JaN m “– s•  , “r•  w ) “r

G A hh

() P Mo p1U]NVR AXO JaN )( w

•  m v s•  m m v v

s•  1 “x

G A hh

( P Mo p1U]NVR AXO JaN

s zu •y sk

o p h mggg x i