× Mobile Cloud Night First Session 2015年10月14日

Mobile Cloud Night
First Session
2015年10月14日
×
講師紹介
×
•  森住 祐介（もりずみ ゆうすけ）
•  クラウド事業統括
•  エコシステム・デベロップメント
•  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 Record
従来型の提携業務処理システム
SCM
ERP
Systems of Engagement
新しい個客接点システム
HR
CRM
Systems of Record (SoR)
Systems of Engagement (SoE)
主な役割
企業の業務効率化、業務用データ処理
個客エンゲージメント、新規事業の創出、ビジネス変革
重要な要素
堅牢性、信頼性、確実性、機密性
柔軟性、俊敏性
開発のアプローチ
ウォーターフォール
アジャイル、トライ&エラー
コードの主体
スクラッチ、パッケージ
APIエコノミー、組み合わせ
システム運用
開発とは別プロセス
DevOps（一体的）
リソース所要量
予測は可能
予測が困難
改良のサイクル
組織主体で計画的
状況に合わせて適宜
Why Mobile Cloud Night?
×
•  アプリ開発におけるコスト
アプリ開発・運用で見えているコストは全体の30%
残りの70％のコストは隠れている
Why Mobile Cloud Night?
•  両者を効率的に学び明日のビジネスに活かせる勉強会を！
×
Bluemixのご紹介
×
×
IBM Bluemixのご紹介
•  IBM 次世代クラウド・プラットフォーム： IBM Bluemix
クラウド・アプリケーション開発・稼動のためのPlatform as a Service 環境。数多くのIBM製、
3rd Party製、ならびにオープンソースのランタイム (Runtime)、サービス (Service)、などを提供。
Bluemixのプライシング
Bluemixとは
!  様々なプログラミング言語に
対応したアプリケーションの
実行環境を提供
!  オープン・スタンダードを活用
した環境
!  既存システム (SoR) との
統合サービスを提供
!  モバイル用の数多くのサービス
!  DevOps サービス提供
アプリケーションの
コンポーザブル な環境
Compose applications
IBMテクノロジーだけではなく、
パートナーや、オープンソース等の
豊富なランタイムとサービスを提供
大きくは以下の3種類
!  PAYG (PAY AS YOU GO) モデル
!  サブスクリプション・モデル
!  Bluemix Local
加えて以下を提供
!  フリートライアル（30日間）
!  テクニカルサポート（有償）
デプロイとスケール
信頼性の高いコード
IBM Softlayer のインフラを
利用した、新規アプリケー
ションやサービス
オープンPaaSであるCloud Foundry
をプラットフォームとし、セキュリティや
ユーザーインターフェイスなどを拡張
Deploy and scale
Code with confidence
×
IBM Bluemixのご紹介
•  IBM Bluemixの活用イメージ
z
c
c
8TB
Analytics
Warehouse
Push
IoT
i
cf tool
Cloudant
c
c
API
AT
Cloud
Integration
SQL DB
DevOps''
Services
Salesforce
1QY RO
c
IBM SaaS
Google
Azure
IBM Bluemixのご紹介
•  言語環境
–  +Polyglot（多言語）環境
–  +開発者がベストの環境を選択
–  +コミュニティーのBuildpackランタイムを追加可能
×
IBM Bluemixのご紹介
×
•  豊富で多様な機能コンポーネント
Mobile
Security
Web & Application
Data
Mgmt
Business
Analytics
IoT
Big Data
IBM Bluemixのサービスご紹介
サービス名（抜粋）
×
サービス概要
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.フレキシブルなスキーマ
5.dashDB (DWH)との連携
6.豊富な実績
" JSONと呼ばれるデータフォーマット " CloudantデータをRDBデータへ自動 " CloudantのDBaaSを世界25,000社
を使用
変換
以上が活用
"  { name : John Smith , age : 33}
" DWaaSの提供
といった可読性が高く簡潔に構造化され
たデータをフィールドの数や長さに特に
制限はない形で出し入れ可能
" 複雑で多種多様に変化するデータ構
造に対応が可能
dashDB
IBM Bluemixのサービスご紹介
×
•  リッチなモバイルアプリケーション提供のために柔軟なデータ保存
とアクセスならびに可用性を実現
!  サーバーとローカル・デバイスにデータを保存
!  Cloudantからデータのプッシュとプルを行うこ
とによって、複数デバイス間のデータを同期
!  ネットワークに接続できない場合は、ローカ
ル・ストレージからの読み取り処理と書き込み
処理を提供
ローカル・
ストレージ
!  接続が復旧すると、サーバーにデータの同期が
行われ、同じデータソースに接続するその他の
デバイスのデータの同期も行われます。
!  修正履歴のレプリケーションによって、データ
の一貫性を維持
ローカル・
ストレージ
Monacaのご紹介
×
×
アシアル株式会社のご紹介
アシアルは、「エンジニアリングでインターネットの成長
を牽引する」という事業コンセプトのもと、 B : 、
9G GAI OUXを中心としたD H技術をベースにした、デベ
ロッパー支援事業を行っております。
e
3
3
opw
l
m
r
M
p
M
×
講師紹介
アシアル株式会社 Monacaエバンジェリスト
生形 可奈子 （うぶかた かなこ）
著書：スラスラわかるJavaScript （翔泳社刊）
×
モバイルOSシェア
全世界のスマホ出荷台数は毎年10億台以上。日本では
AndroidとiOSがOSシェアを二分しており、クロスプラッ
トフォーム対応モバイルアプリの需要が急増中
2015 6
Other*
4%*
Kanter*Worldpanel
モバイルアプリ開発に関する課題
×
×
開発言語がOS毎に異なるため、
1.  開発工数がかかる
2.  ソースコード管理の複雑化
×
3.  エンジニアの確保が困難
HTML5という選択肢
×
×
e
Webアプリとネイティブアプリの特徴をいいとこどりしたアプリ
を「ハイブリッドアプリ」と呼びます。
5
e
I
wf
e
ハイブリッドアプリは、Webの技術を使って開発しますが、生成
されるアプリはネイティブアプリと同等のものになります。
×
ハイブリッドアプリの仕組み
ハイブリッドアプリは、Cordova（PhoneGap）というライブラ
リを利用して開発します。 CordovaはHTMLで作成されたコード
をネイティブコードでパッケージングします。
HTML5
5
4 F
wf
lM
*
*
*
*
*
HTML5モバイルアプリ開発環境：Monaca
• 
• 
• 
• 
×
世界中で10万人以上が利用
クラウドベースのモバイルアプリ開発環境
iOS, Android, Windows, Chrome Apps対応
無料から利用可能
×
Monacaによるアプリ開発
インストール不要。ブラウザだけですぐに開発をはじめられ
ます。実機に専用アプリを入れておけば、リアルタイムに動
作検証できます。
vn
6TTMQ 2N TR
×
Onsen UI
手軽に利用できてハイパフォーマンスなモバイルアプリのための
UIフレームワーク「Onsen UI」を標準搭載。
•  フラットデザイン/マテリアルデザイン
対応
•  ネイティブと遜色ないアニメーション
•  豊富なUIパーツ
•  SPAの構築が容易
•  UIガイドラインに準拠
×
Onsen UIの使い方
独自タグを埋め込むだけでモバイルライクなUIを簡単に構築する
ことができます。
<ons-toolbar></ons-toolbar>
<ons-list-item></ons-list-item>
<ons-tabbar></ons-tabbar>
今回作成するアプリ
×
サンプルアプリの説明
×
•  カメラを起動して写真を撮影し、位置情報とセットでCloudant
データベースに登録するアプリを作成します。
環境概要
•  モバイルのローカルストレージ
•  クラウド環境（Bluemix）のCloudant DB
-シンプルな構成による非同期通信
×
Bluemixハンズオン
×
Bluemixアカウントの取得
×
•  Bluemix Webサイトから、無料トライアルのアカウントを作成し
て下さい。
「Bluemix」で検索
×
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のアカウント登録
×
•  ブラウザでMonacaのWebサイトを開き、「サインアップ」をク
リックして下さい。
http://ja.monaca.io/
アカウント情報入力
×
•  メール受信可能なアドレスとパスワードを登録して下さい。
アカウント仮登録完了
×
•  ダッシュボードという画面に遷移します。先程のメールアドレスに
確認のメールが届きます。
アカウントの本登録
×
•  確認メールに記載されたURLにアクセスし、必要事項を入力するこ
とで登録完了です。
プロジェクトの作成
×
•  「開発をスタート」「Monaca.ioで開発」の順に選択します。
プロジェクトのインポート
×
•  「Import Project」を選択するとプロジェクトのインポート画面が
表示されるので、以下の情報を入力してインポートを実行します。
#  プロジェクト名 ： Bluemixアプリ
#  URLを指定してインポート ： http://bit.ly/1LKVjVu
×
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の実装①
×
•  Onsen UIを使って実装します。index.htmlの82∼86行目に、以下
のソースコードを追記して下さい。
<div class="setting">
<span>位置情報</span>
<ons-switch var="locationSwitch"></ons-switch>
</div>
×
スイッチUIの実装②
•  app.jsの72∼74行目に、以下のソースコードを追記して下さい。
if(locationSwitch.isChecked()) {
location = address;
}
×
位置情報の登録確認
•  スイッチON時に位置情報が登録されることを確認しましょう。
OFF
ON
×
ハンズオンは以上になります!
IBM MobileFirst Platformのご紹介
×
Why MobileFirst Platform?
×
•  アプリ開発におけるコスト
アプリ開発・運用で見えているコストは全体の30%
残りの70％のコストは隠れている
×
IBM MobileFirst Platformとは
•  モバイルアプリ開発・運用に必要な機能を包括的にカバー
継続的な改善
セキュリティー
パーソナライズ
高度なデータ
×
IBM MobileFirst Platformのご紹介
•  すべてのステークホルダーに価値を提供する
モバイル・エンタープライズ・プラットフォーム
継続的な改善
セキュリティー
パーソナライズ
Quality Assurance
Application
Scanning
Presence
Insights
モバイル・アプリの
脆弱性を特定
および修正
お客様の店舗内の
行動を分析し、
洞察を獲得
モバイル・アプリの開発
ライフサイクル全体を
通して品質プロセスを
サポート
-‐‑‒
1
a
c
B
高度なデータ
Cloudant
2
c
クラウドで利用できる
NoSQLのデータスト
ア
×
IBM MobileFirst Platformのご紹介
•  IBM MobileFirst Platformの進化
(
(
(
(
) (
c
Ms
c
c
O A 0SJ TOJ DOS -‐‑‒ ( CSO
C8
B :
xMt
r
wfM
c
A :
BB
A0
c
s
AB5YQ
WGQ
EGRG OS 8TSOI
0 Y
3GXG
TA :
IBM MobileFirst Platformのご紹介
•  IBM MobileFirst Platform全体構成
×
×
MobileFirst Platform Foundation on Bluemix Containers
•  Bluemix上でDocker Imageを元にMobileFirst Platformが稼働
より早く、よりシンプルに環境構築
×
Demo
Admin Console
Admin Service
MFPF Runtime
×
MobileFirst Platform Foundation Developer Edition
•  Developer Editionは無償提供
•  stackoverflowなどでのサポート
•  自習資料や参考資料が満載!
Empowering the IBM ecosystem
81
6QTHGQ SX U S Y
,0s
参加条件
特典
IBMソフトウェア
ご活用
ビジネス
協業推進
y
ie
• 
• 
•  81
•  i
• 
e
d
o
a
x
c
z
a
c
d
c
p
j
tz
hz
bf
c
a
hp
hz l
v
e
THOQ 5O WX :GXLT Rd
A AA AXGXOWXOIWd
e AX GRWd
1OM8SWOMNXWd GJTTUe 31) 1:Cd c
•  81
• 
L
t
•  81
• 
i
,-‐‑‒
TM GRd6
c
e 2TMSTW 18d
c
c e D0Ad0
c
e
e
e
c
NXXU/ OHR HO
6
PGUGS
© 2015 IBM Corporation
d
Empowering the IBM ecosystem
81
e
u
6QTHGQ SX U S Y
(
,
2
L
/
d
c
,.
j
c
o
c
r
z
m
u
v
c
c
p
v
c
tz
8GGA
v
GGA
F A
(
d
c
rhb f
l
(
u
h
j
o
e1QY RO
h
j
ObL
x
y
6
IQTYJ
e1QY RO
ATLX:G
(
F A
(
d
NXXU/ OHR HO
ATLX:G
v
l
vni
X
c
h
81
h
e
g
c
• 
• 
• 
ATLX:G
(
• 
BdW
(
v
1QY RO
g
c
TM GR LT 2QTYJ AXG XYUW
a
• 
• 
v
ObL
x
y
© 2015 IBM Corporation
×
1QY RO CW
,
1 EC6
6 TYU
MnM
S
V
a
c
1 EC6d
c
c
U
L
v
r
c
U
e
L
アシアルスクールからのお知らせ
Mobile*Cloud*Night*
*
30%OFF
*
mcn1014
×
10 26
13:00 18:30*
HTML5×CSS
*
hJp://peaLx.com/event/118845*
*
10 28
10:00 19:00*
JavaScript&jQuery
*
hJp://peaLx.com/event/118844*
*
10 29
10:00 19:00*
JavaScript
*
hJp://peaLx.com/event/118842