第四回 DSP Sandboxでモバイルアプリを作ろう

Transcript

1. 第四回 DSP Sandboxで モバイルアプリを作ろう Developer Dojo - DSP Sandboxシリーズ 2021年6⽉25⽇ ⽇本アイ・ビー・エム株式会社 Developer Community
2. 1 © 2021 IBM Corporation ⾃⼰紹介 正⽊ 達也 Tatsuya Masaki Advisory IT Architect Solution Strategy, FSS Business Solutions, GBS, IBM Japan 経歴 2009年 ⽇本IBM⼊社。 2009-2015年 インターネットバンキングシステムのデリバリー担当。 ITスペシャリストとして⼤規模更改プロジェクト等を経験。 2016-2020年 シンガポール赴任。邦銀の海外拠点向けコアバンクシステム更改 プロジェクト等を歴任。 2020年末帰任 ⾦融機関向けソリューション戦略チームに在籍。 スキル Java, Web関連 (HTML, CSS, JavaScript) Linux, AIX, Windows, VMWare, bash, ksh, Powershell, Python, Excel VBA, etc. テスト⾃動化(Selenium, JMeter, etc.), 構築⾃動化(Ansible) (鋭意勉強中) IBM Cloud, OpenShift, Kafka,モバイル(React Native) https://www.linkedin.com/in/tatsuya-masaki-ta28093 https://www.ibm.com/think/jp-ja/business/dsp-front-2021/ DX成功の鍵を握るフロントサービスの変⾰に向けて、IBMが提供する「共創の場」 - IBM THINK Business Blog
3. 2 © 2021 IBM Corporation 講義の進め⽅ • 講義中の質問 : WebExのQ&Aにて受け付け、 サポートメンバーにより可能な限り回答します。 また参加者の皆様に関係があるご質問については、 講義後の時間が許す限りで回答します。 • 講義後の質問︓ Connpass申込ページのFeed機能にて 頂戴した質問についても確認します。 （確実な回答を保証するものではありません。） • 講義＋ハンズオンの形式で実施します。 講義資料は追ってConnpass上にリンクを⽤意します。 ハンズオンはゆっくり進めるよう⼼がけますが、追いつけない場合も鑑み ⼿順書をお⼿元にご⽤意いただくことを推奨します。 本講申込ページの[Media]よりアクセス可能です。 • 講義後アンケート︓ 下記URLから回答をいただけますと幸いです。 https://app.sli.do/event/3claglpv • 講義中の進捗確認 : ハンズオンの要所要所で、WebExのPoll機能にて 様⼦を確認します。
4. 3 © 2021 IBM Corporation アジェンダ 1. 本シリーズの⽬的 2. 概要 … サンプルアプリと環境の概要を説明 3. 動かしてみよう … (ハンズオン１) サンプルアプリ起動までの操作をガイド 4. アプリを覗いてみよう … サンプルアプリ構成ファイルの詳細を説明 5. 作り替えてみよう … (ハンズオン２) アプリの編集⽅法をガイド 6. モバイル開発の論点 … ⼀般的なモバイル開発における論点を説明 7. 今⽇の成果 … 講義内容振り返り Appendices 今回は少し⻑くなりますので、全体像をご案内します。 (5分休憩)
5. 1.本シリーズの⽬的
6. 5 © 2021 IBM Corporation 1-1．IBMのオープン・ソーシング戦略フレームワーク https://enterprisezine.jp/news/detail/14229 本活動は、IBMのオープン・ソーシング戦略フレームワークの⼀環として、 「デジタルサービス層を活⽤してフロントサービス層を創るスキル」の向上を⽬指しています。
7. 6 © 2021 IBM Corporation 1-2．DSPとその価値 IBMの提唱する「次世代アーキテクチャ」では、デジタルサービス層がフロントサービスの柔軟・迅速な開発を可能にします。 デジタルサービスプラットフォーム(DSP)は、このデジタルサービス層をクラウド上に構築、共同利⽤するソリューションです。 [ 価値 ] フロントサービスとの容易な接続性 オープンAPIにより外部接続を標準化 事前準備された機能・サービス 重要な差別化要素となる 新しい⾦融サービス開発への専念が可能 デジタル開発の効率化 共通サービスの共同利⽤ 安全・安⼼のクラウド利⽤ DSP基盤 ソフトウェア / コンテナ層 アプリケーション層 CICD 資⾦移動 ⼝座管理 諸届 共通機能 ⽣体認証 多要素認証 認証 AI 分析 既存業務 新業務 ユーティリティ部品 API API API API API API フロントサービス (特定銀⾏) ホワイトラベル (銀⾏間) 外部サービス (FinTech 等) IBM⾦融業界 ソリューション 基 幹 系 連 携 バ ック エ ン ド ア ダ プ タ ー 銀⾏ 勘定系システム 共同化 基幹系システム フロントサービス層 デジタルサービス層 ビジネスサービス層
8. 7 © 2021 IBM Corporation 1-3．DSP Open API Sandbox環境 DSP OpenAPI Sandboxは、このDSPの応答を擬似的に体験できる環境です。 本シリーズでは、この環境を⽤いてどのようなことができるかを「実際に動かして」体験していただきます。 基盤 ソフトウェア / コンテナ層 アプリケーション層 CICD 資⾦移動 ⼝座管理 諸届 共通機能 ⽣体認証 多要素認証 認証 AI 分析 既存業務 新業務 ユーティリティ部品 API API API API API API 基 幹 系 連 携 バ ック エ ン ド ア ダ プ タ ー Sandbox 擬似応答環境 第1回 第2回 第3回 第4回 第5回 2 課題に寄り添った継続的改善 1 早期のプロトタイピングと洗練 3 より具体的で実現可能性の⾼い企画⽴案 コスト、リスク、サービスインまでの時間の低減が期待できます。 実際に動くプロトタイプをでの実証と、早期のフィードバックから、 より的確なゴールへ到達できるようになります。 利⽤者に近い⽴場の⽅が迅速かつ継続的に改善を続けることで、 社内外のシステム評価を⾼めることができます。 広がる活躍の機会
9. 8 © 2021 IBM Corporation 1-4．全5回のゴール 全5回で、APIを使⽤したフロントサービス開発に関して、知識・スキルを広げていただけるように準備しています。 ⾃分だけの経験、知識、問題意識、 アイディアと掛け合わせて 今までにない顧客体験を「共創」しよう︕ 第５回 ⾃分だけのSandboxを作ろう • Open APIを活⽤して⾃在に応答を操作できるスタブを作れる • APIファースト開発について語れる もっと 動くものを作りたい︕︕ 第２回 DSP Sandboxで考える銀⾏システム • 銀⾏の各種サービスで、システムがどう連携するかをイメージできる、図⽰できる • 銀⾏のシステム間の「責務」について語れる 第３回 DSP Sandboxでメッセージングアプリ残⾼照会 • DSP SandboxのAPIを使って、残⾼照会サービスを構築できる • 他のAPIと組み合わせた銀⾏サービスについて具体的にイメージできる 第１回 さわってみようDSP Sandbox • APIとは何か、なぜ良いのかを語れる • フロントサービス層の銀⾏システムになったつもりでAPIを呼び出せる 第４回 DSP Sandboxでモバイルアプリを作ろう • DSP Sandboxのサービスを呼ぶモバイルアプリを作れる • モバイルアプリのアーキテクチャについて語れる
10. 2. 概要
11. 10 © 2021 IBM Corporation 2-1．配布したアプリの概要 今回配布したモバイルアプリは、React Nativeというフレームワークを使⽤して作成したアプリです。 iPhone/Androidの実機や端末上のシミュレータ上で稼働させることができます。 ログイン画⾯ LoginScreen.js ホーム画⾯ HomeScreen.js ログアウト画⾯ LogoutScreen.js 新規画⾯ NewScreen.js APIテスト画⾯ APITestScreen.js ID/PW ログイン 普通預⾦MS.残⾼照会 普通預⾦MS.残⾼照会 メニュー
12. 11 © 2021 IBM Corporation 2-2．React Nativeとは︖ React NativeはFacebook社が開発したオープンソースのモバイルアプリケーション開発フレームワークです。 JavaScriptを使って開発し、クロスプラットフォーム(*)のモバイルアプリケーションを作成できます。 * Android, iOS, Android TV, macOS, tvOS, Web, Windowsなどに対応 https://reactnative.dev/docs/getting-started import React from 'react'; import { NavigationContainer } from '@react- navigation/native'; import MainStackNavigator from './navigators/MainStackNavigat or' const App = () => { return ( <NavigationContainer> <MainStackNavigator /> </NavigationContainer> ); } export default App; JavaScriptで開発 他のフレームワークとの⽐較も 後で説明します︕
13. 12 © 2021 IBM Corporation 2-3．ハンズオン環境 ハンズオンでは、React Nativeの開発ツールであるExpoを利⽤して⼿元にモバイル開発環境を作ります。 皆さんのPC 皆さんのスマホ Expo Go Node.js アプリ プログラム VS Code*1 iPhone シミュレータ*2 Expo Go Android エミュレータ*2 Expo Go H/W (*3) S/W アプリ プログラム アプリ プログラム アプリ プログラム *2 PC上で動作させたい場合。今回講義ではオプションとなっています。 配布 編集 *1 テキストエディタでも可。今回講義ではオプションとなっています。 App. expo-cli *3 モバイルOSを含みます。 開発 実⾏
14. 13 © 2021 IBM Corporation (余談) React Nativeの本番開発差異 React Nativeの開発環境 (Expo) では、PCからモバイル上のExpo Goにプログラムを配布します。 実際にモバイルアプリとして公開する際に「ビルド」を⾏い、Expo GoやPC不要で稼働するアプリになります。 開発 ビルド〜事前検証〜本番 皆さんのPC iOS/Android Expo Go Node.js アプリ プログラム アプリ プログラム 配布 expo-cli アプリ プログラム ライブラリ Native SDK Javascript エンジン Expo GoがモバイルOSと対話し、PCから配布された アプリを実⾏可能にします。 iOS/Android Native SDK Javascript エンジン ビルドされた アプリ (*.apk,*.ipa) モバイルOSと対話するライブラリを含めてアプリとして ビルドされ、PCやExpo Go不要で稼働します。 このNode.jsプロセスは 「BFF」じゃないよ~
15. 3. 動かしてみよう
16. 15 © 2021 IBM Corporation 3-1．環境確認 まずは、実⾏のための前提ソフトウェア（Node.js/expo-cli）がインストールされていることを確認します。 1 １ ２ 2 Node.js の環境があることを 確認してください。 Expo CLI の環境があること を確認してください。 ハンズオン(1)の流れ 環境確認 3-1 アプリダウンロード 3-2 PC スマホ Expo Go Node.js アプリ expo-cli 起動 3-3 PC スマホ Expo Go Node.js アプリ expo-cli PC スマホ Expo Go Node.js アプリ expo-cli 動作確認 3-4 PC スマホ Expo Go Node.js アプリ expo-cli アプリ
17. 16 © 2021 IBM Corporation ハンズオン(1)の流れ 環境確認 3-1 アプリダウンロード 3-2 PC スマホ Expo Go Node.js アプリ expo-cli 起動 3-3 PC スマホ Expo Go Node.js アプリ expo-cli PC スマホ Expo Go Node.js アプリ expo-cli 動作確認 3-4 PC スマホ Expo Go Node.js アプリ expo-cli アプリ 3-2．アプリのダウンロード GitHubから、アプリケーションをダウンロードします。 [リポジトリ] https://github.com/ta28masa/MobileApp ブラウザ経由なら Gitクライアント構築済なら お⼿元のGUIでClone, もしくはコマンドラインから下記を実⾏して下さい。 $ git clone git@github.com:ta28masa/MobileApp.git Download ZIPのリンクからダウンロードし、 解凍してください。
18. 17 © 2021 IBM Corporation ハンズオン(1)の流れ 環境確認 3-1 アプリダウンロード 3-2 PC スマホ Expo Go Node.js アプリ expo-cli 起動 3-3 PC スマホ Expo Go Node.js アプリ expo-cli PC スマホ Expo Go Node.js アプリ expo-cli 動作確認 3-4 PC スマホ Expo Go Node.js アプリ expo-cli アプリ 3-3．起動 1 ダウンロードしたアプリケーションのディレクトリに移動してください (例: cd MobileApp) 1 2 npm install と⼊⼒し、Enterを押してください 3 npm start と⼊⼒し、Enterを押してください 2 3
19. 18 © 2021 IBM Corporation package.json 1 ダウンロードしたアプリケーションのディレクトリに移動してください (例: cd MobileApp) 2 npm install と⼊⼒し、Enterを押してください 3 npm start と⼊⼒し、Enterを押してください 前ページのガイド内容 3-3．起動 – コマンドの意味 npm (Node Package Manager; Node.jsのパッケージマネージャ)に働きかけ、 必要なパッケージ(*)の取得と、プログラムの起動をしています。 *ライブラリの集合 • 実⾏ディレクトリにあるpackage.jsonの内容に 基づき、インターネット経由でパッケージを取得。 • 依存関係の解決も⾏う。 • 実⾏ディレクトリに”node_modules”ディレクトリを 作成し、その下にファイルを配置。 • 実⾏ディレクトリにあるpackage.jsonの内容に基づき、 “start”として定義された”expo start”コマンドを実⾏。 • “expo start”でPC上にサーバプロセスが起動し、 Expo Goにアプリを配布可能な状態になります。 package.jsonは直接編集しないファイルです。 npm initコマンド(React nativeの場合expo init)で⾃動⽣成 され、npm install <package名>コマンドで更新されていきます。 (package-lock.jsonも同様) npm install npm start
20. 19 © 2021 IBM Corporation ハンズオン(1)の流れ 環境確認 3-1 アプリダウンロード 3-2 PC スマホ Expo Go Node.js アプリ expo-cli 起動 3-3 PC スマホ Expo Go Node.js アプリ expo-cli PC スマホ Expo Go Node.js アプリ expo-cli 動作確認 3-4 PC スマホ Expo Go Node.js アプリ expo-cli アプリ 3-4．動作確認 成功するとWebブラウザが起動し、下記のような画⾯が表⽰されます。 実機 Android emulator iPhone Simulator カメラでQRコードを読み取ってください。 ※モバイル端末とPCは同⼀のLAN上にある必要があります。 Android Studioでエミュレータ端末を作成の上、 「Run in android device/emulator」をクリックしてください。 XCodeでシミュレータ端末を作成の上、 「Run in iOS simulator」をクリックしてください。 「dojouser/password」でログインできます。 ダミーのログインの仕組みはapicall.callApiLogin()にあります。
21. 4. アプリを覗いてみよう
22. 21 © 2021 IBM Corporation App.jsは起動時に最初に表⽰される画⾯。ここではMainStackNavigatorを表⽰するように設定している。 App.jsonはアプリケーションの基本的な設定を⾏うファイル。 Expo-cliが⾃動⽣成するディレクトリ。特に意識不要。 画像を格納するディレクトリ。 icon(アプリのアイコン), favicon (Web⽤ブックマークアイコン), splash (アプリロード時のSplash画像) adaptive-icon(デバイスモデルごとに異なる図形を表⽰したい場合のアイコン)はexpo initで⾃動⽣成されるので 適宜置換する。 その他にlogo(ログイン画⾯で表⽰するロゴ)もここに配置している。 npmが使⽤するディレクトリ。今回は特に意識不要。 Git(バージョン管理)の対象外ファイルを記述するファイル。今回は特に意識不要。 アプリケーションの概要を記載するファイル。Markdown形式で記述されている。 (オリジナル) 共通関数、共通デザインなどを格納するディレクトリとして作成。 apicall.jsはDSP Sandboxと接続する関数を格納。 colors.jsは共通のスタイルシートを、util.jsにはその他の共通関数を格納する想定。 (オリジナル) Navigator (画⾯遷移を制御するコンポーネント)を格納するディレクトリとして作成。 MainStackNavigatorでログイン前〜ログインの遷移を制御し、 MenuDrawerNavigatorでログイン後のメニューによる遷移を制御。 (オリジナル) 画⾯ファイルを格納するディレクトリとして作成。 この下に１画⾯１ファイル作成する想定。 Expoの環境に関する設定。今回は特に意識不要。 npmが使⽤するファイル。今回は特に意識不要。 4-1. フォルダ構成
23. 22 © 2021 IBM Corporation 4-2. 画⾯遷移(1) App.js まずは全体のベースとなる部分を、最初に呼び出される画⾯であるApp.jsに定義します。 ここでは、MainStackNavigatorを呼び出しています。 NavigationContainer MainStackNavitgator React-Navigationを使っています。 https://reactnavigation.org/docs/getting-started/ Reduxなどの選択肢もあります。 https://redux.js.org
24. 23 © 2021 IBM Corporation 4-2. 画⾯遷移(2) MainStackNavigator ここでは、Stack Navigator(画⾯遷移の度に積み重なっていき、戻るボタンを押す度に⼀番上が除去される形式） を使った画⾯遷移を定義しています。 NavigationContainer MainStackNavitgator Stack Navigatorの上にDrawer Navigatorを重ねて います。これを「Navigatorのネスト」と⾔います。 https://reactnavigation.org/docs/nesting-navigators LoginScreen MenuDrawerNavigator APITestScreen APITestScreen APITestScreen 操作に伴い 積み重なる
25. 24 © 2021 IBM Corporation 4-2. 画⾯遷移(3) MenuDrawerNavigator ここでは、ログイン後の画⾯遷移をDrawerNavigator(引き出し型メニューを使った遷移)として定義しています。 NavigationContainer MainStackNavitgator MenuDrawerNavigator メニュー選択すると ⼊れ替わる HomeScreen NewScreen LogoutScreen 最近はTab Navigationも増えています。 https://reactnavigation.org/docs/tab-based-navigation 振込などの画⾯遷移*にはさらにStackNavigatorをネストします。 (* 例: ⾦融機関選択＞⽀店検索>⼝座番号⼊⼒>確認>完了 完了時には「戻る」ができないようにする⼯夫も必要ですね。)
26. 25 © 2021 IBM Corporation 4-3. 画⾯(1) LoginScreen.js スタイルシートは別ファイルにする派もいますが、 結局1:1で作成するくらいなら、と考え ここでは同ファイルに記載しています。 TopContent Animatable Image Bounce-inする。 BottomContent 下からせり上がる ここより下はスタイルシート。 HTMLのようだが、RNの独⾃定義。 「React Nativeの学習」が要る。
27. 26 © 2021 IBM Corporation 4-3. 画⾯(2) APITestScreen.js APIを呼び出す部分。 第1回、第3回同様 開発者ポータルの Sampleを参考に React Nativeのfetch関数 で実行するよう作成。 ボタン押下でtestAPI関数を実行、 ツリー表示する。 DSP SandboxのAPIを呼べるか、 応答が想定通りか、などをテストできます︕
28. 27 © 2021 IBM Corporation 4-3. 画⾯(3) HomeScreen.js いろいろと⼯夫の余地がありますね。 Effect Hookを使い、画面ロード後に 非同期でDSP SandboxのAPIを呼ぶ。 応答をトリガーに表示を更新する。 https://reactjs.org/docs/hooks- effect.html 各項目毎にActivity Indicator（ロード中の クルクル）を表示していますが、 塊で扱うことも可能。
29. 28 © 2021 IBM Corporation 4-4. デザイン(1) 各画⾯のスタイルシート 基本⽂法はCSS (Cascading Style Sheet)と同じ style={“styles.*”}で参照 JavaScriptなのでコードも 実⾏可能
30. 29 © 2021 IBM Corporation 4-4. デザイン(2) アイコン オープンソースのアイコンライブラリを使うことで、アイコンの準備にかかる時間とコストを⼤幅に節約できます。 https://icons.expo.fyi Featherを読み込み Featherの”menu”を表⽰ Featherの”bell”を表⽰
31. 30 © 2021 IBM Corporation 4-5. 共通関数(1) apicall.js DSP SandboxのAPI呼び出しのロジックをまとめる想定のファイル。 各画⾯のファイルに直接書かないことで再利⽤利⽤可能としています。 本来はサーバに問い合わせる内容。 ここでは簡易な認証を実装。 React Nativeのfetch関数で 普通預⾦MS.残⾼照会を呼び出す。 .thenで同期していることで、 応答を待つ。
32. 31 © 2021 IBM Corporation 4-5. 共通関数(2) util.js 複数の画⾯で使う可能性のある共通ロジックを書いています。 画像を横幅いっぱいに合わせたときの ⾼さを計算する関数。 トップ画⾯のロゴに使⽤。 ⼝座タイプを和名に変換する関数。 (ただし、ここはダミーロジック。） 他のファイルから参照可能にする。
33. 32 © 2021 IBM Corporation ５分間休憩です... 休憩の間にちょっと宣伝です Developer Dojo DSP Sandboxシリーズの シーズン２を鋭意検討中です︕ - この業務領域・技術領域にフォーカスして欲しい - もっとインタラクティブな開催形式がいい - 横のつながりを作りたい - もっと具体的な構築の話 or もっと抽象的な上流の話がいい などなど、ご意⾒をアンケートに頂戴できますと幸いです︕ アンケート︓ 下記URLから回答をお願いします。 https://app.sli.do/event/3claglpv
34. 5. 作り替えてみよう
35. 34 © 2021 IBM Corporation 5-1．⽂⾔の変更 画⾯の⽂⾔を変更し、即時反映されることを確認しましょう。 1 2 モバイル画⾯(ログイン後)のメニューから 「新規」画⾯に遷移してください。 “Hi there ! This is a new screen!”と 書いてあることを確認してください。 ハンズオン(2)の流れ 文言の変更 5-1 アイコンの変更 5-2 5-3 画面の追加 １ 2 4 3 3 エディタ(VS CodeやNotepad)で MobileApp/pages/NewScreen.jsを開き、 ⽂⾔を変更して「保存」して下さい。 4 数秒後に変更がモバイル画⾯に反映される ことを確認してください。
36. 35 © 2021 IBM Corporation 5-2．アイコンの変更 ハンズオン(2)の流れ 文言の変更 5-1 アイコンの変更 5-2 5-3 画面の追加 アイコンを使いこなしましょう。アイコンライブラリを使うことで、直感的なUIにすることができます。 1 2 ログイン画⾯を表⽰して下さい。 MobileApp/pages/LoginScreen.jsを開き、 Entypo name=“”と書かれた部分を お好きなアイコンの名前に書き換えて下さい。 4 サンプルはname=“location”としています。 数秒後に変更がモバイル画⾯に反映される ことを確認してください。 １ 3 4 Entypo以外のアイコンライブラリ もImportして使ってみよう︕ 13,14⾏⽬のimport⽂を参考。 https://icons.expo.fyi 2 https://icons.expo.fyi で”Entypo”でフィルタ し、お好きなアイコンを選んでください。 3
37. 36 © 2021 IBM Corporation 5-3．画⾯の追加(1) ハンズオン(2)の流れ 文言の変更 5-1 アイコンの変更 5-2 5-3 画面の追加 1 1 MobileApp/pages/NewScreen.js をコピーし て、同じディレクトリにペーストして下さい。 1ʼ 2 3 ファイルの名前を MyScreen.js に変更してくだ さい。 2 画⾯を追加してみましょう。まずは画⾯ファイルを追加します。 ファイルを開き、⽂⾔を変更してください。
38. 37 © 2021 IBM Corporation 5-3．画⾯の追加(2) ハンズオン(2)の流れ 文言の変更 5-1 アイコンの変更 5-2 5-3 画面の追加 次に、Navigatorを編集して画⾯遷移に新しい画⾯を追加します。 1 1 エディタでMobileApp/ navigators/MenuDrawerNavigator.js を開いて下さい。 2 3 MyScreenを読み込むコード(import⽂) を追加して下さい。 2 コード import My from '../pages/MyScreen'; 3 コード <Drawer.Screen name="マイスクリーン" component={My} /> Menu項⽬を追加するコード(Drawer.Screen タグ)を追加して下さい。
39. 38 © 2021 IBM Corporation 5-3．画⾯の追加(3) ハンズオン(2)の流れ 文言の変更 5-1 アイコンの変更 5-2 5-3 画面の追加 保存して反映されたら、以下のような画⾯遷移ができるか確認してください。
40. 6. モバイル開発の論点
41. 40 © 2021 IBM Corporation 6-1．公開までの道のり React Nativeでアプリが完成(構築完了)した後、ビルド〜検証〜審査を経てストアに公開することになります。 アプリケーションディレクトリで 下記コマンドを実⾏するとコードが Expoサーバに転送され、ビルド開始。 しばらくすると公開⽤ファイルが ダウンロード可能となります。 (Android: APK, iOS: IPA) $ expo build:android $ expo build:ios 実機検証 審査 ストア公開
42. 41 © 2021 IBM Corporation 6-2．フレームワークを考える (1) ハンズオンはReact Nativeをベースに実施しましたが、2021年6⽉現在、様々な選択肢があります。 特に「クロスプラットフォームか純ネイティブか」については様々な意⾒があります。 OS ブラウザ ブラウザコンテンツ (HTML/Javascript/CSS) OS ネイティブアプリ Framework SDK(*1) アプリコード(*1) OS ネイティブアプリ 開発部位 OS ネイティブアプリ WebView アプリコード (JavaScript) (*1) 採⽤フレームワークにより、 ⾔語、SDKは異なる (*2) Progressive Web Apps (*3) Single Page Application 純ネイティブ クロス プラットフォーム ハイブリッド Web • Webブラウザから利⽤ するアプリケーション として開発する • ネイティブに近い使⽤ 感を実現するPWA(*2) や、シングルページで データのみを送受信す るSPA(*3)などがある • Webベースの共通コー ドで開発する • ネイティブ機能へのア クセスは可能だが限定 的である • 独⾃開発環境・⾔語に よる共通コードで開発 する • ⼀部の⾔語では、 Native UI部品の活⽤ が可能である • OS毎に提供される公 式開発環境/⾔語で開 発する • OS毎に開発が必要と なる⼀⽅で、各OSに 最適化されるため、画 ⾯デザインと操作感等 の性能に優れる JavaScript, HTML, CSS +AngularJS, Vue.js, React 等 Apache Cordova (含むMonaca,Phonegap) React Native Flutter (Google) Xamarin (Microsoft) [iOS] Swift, Objective-C [Android] Java, Kotlin 配布不要 ストア配布 概 要 FW 配 布
43. 42 © 2021 IBM Corporation 6-2．フレームワークを考える (2) クロスプラットフォームのフレームワーク同⼠でも競争は激しく、かつその理想を「完全には」叶えられていないことから、 断定的に「これを使うべき」とは⾔えない現状があります。 出典︓Stack Overflow Developer Survey 2020, Most Popular Technologies - Other Frameworks, Libraries, and Tools https://insights.stackoverflow.com/survey/2020#technology-other-frameworks-libraries-and-tools • プラットフォームで共通のコード管理／リリース管理 • クロスプラットフォーム⾔語のみでの開発 • 開発／テスト⼯数の削減 • 容易なアプリ品質確保 理想 現実 • 結局、プラットフォーム毎のコード／リリース管理が必要 • 結局、プラットフォーム毎のテスト実施、問題判別が必要 • 結局、ネイティブ⾔語のスキルも必要 • 結局、開発／テスト⼯数削減できず 阻害要因 • 吸収し切れないプラットフォームの違い (端末固有機能、周辺機器、UI部品) • プラットフォーム別で提供される外部サービスSDK • 拭えない実機検証の必要性 • フレームワークでサポートされない機能の存在 • フレームワーク⾃体の変化スピードと学習コスト • 要員調達の難しさ
44. 43 © 2021 IBM Corporation ⾦融機関所管 6-3．Backend for Frontend (BFF) デモアプリは可搬性(Portability)を優先してBFFサーバを使わない形を取っています。 実際のシステムでは「モバイルBFF」を設けることが殆どです。これをDSP基盤に配置することも可能です。 モバイル BFFサーバー • デバイスID • 明細メモ • 認証トークン • アプリログ etc. 勘定系 システム モバイル バンキング アプリ FinTechアプリ FinTech BFF サーバー 既存システム 既存システム 既存システム 各種インターネットサービス ソフトウェア / コンテナ層 アプリケーション層 基 幹 系 連 携 バ ック エ ン ド ア ダ プ タ ー DSP基盤 APIの集約 (API Aggregation/ Server-Side Rendering) チャネル固有要件の実装 セキュリティ向上 後段APIとの通信を集約するこ とで、端末の通信量抑制と パフォーマンス向上を実現。 例︓ ログイン時に認証、⼝座情報取得、 残⾼照会、会員ランク取得を⾏い、 画⾯パーツとして応答 ユーザ体験(UX)・アプリ画⾯ (UI)に関するフロントチャネル 固有要件を吸収。 例︓ ⽂⾔の保持・更新、プッシュ通知、 チャネル固有データの保管、 アプリバージョン管理・強制更新 クライアントID・クライアント シークレット、認証トークンな どの機密情報をフロントエンド アプリから秘匿することで、攻 撃を困難にする／被害を最⼩化 する。 障害対応 後段サーバのエラー応答をその ままユーザに⾒せず、 適切なリトライや⽂⾔変換によ り、ユーザに⾒える障害等の影 響を最⼩化。ログ出⼒によりト レーサビリティも確保。 • FinTech アカウント • OAuth2.0 トークン API API API API API API
45. 44 © 2021 IBM Corporation 開発/テスト • アプリ構造︓ハイブリッド／クロスプラット フォーム／ネイティブ • スキル調達︓アーキテクト, 開発⾔語技術者 • 開発テスト⽅式︓アジャイル、ツール、環境、 DevOps、CI/CD • バリエーションテスト︓OS level, スマホ機種 アプリ管理 • アプリ審査／アプリ配布 • アプリバージョン管理、アプリ強制更新 • 継続的な改善︓クラッシュログ収集、利⽤分 析、ユーザレビュー 端末管理 (B2E*1) • 端末管理⽅式（MDM） • 端末配布／キッティング • 端末保守対応︓故障時対応、追加配布 • サポート機種定義／管理 セキュリティ • ユーザ認証 / ⽣体認証 / ⼆要素認証 • 盗難・紛失時の不正利⽤防⽌ • アプリ改ざん防⽌ / 難読化 • 情報漏洩対応 ⽬的・要件 • ソリューションを提供する⽬的・成功条件 • ターゲットユーザ • 提供する顧客体験、UX/UIデザイン • 使⽤する情報、連携先の既存システムと連携⽅式、ソリューションアーキテクチャー ユーザ サポート • ユーザレビュー対応 • コールセンター︓電話、チャット • 店舗対応︓利⽤促進、導⼊サポート • 必要設備︓デバイス配信、デモアプリ配布 • サポート要員への教育 通知・配信 • 配信計画︓プッシュ／コンテンツ、配信先、 タイミング、スケジュール、等 • 配信メッセージ管理︓作成、削除、取消、等 • 通知実績管理 • デバイストークン管理 6-4．多岐にわたる検討事項 下に挙げるような内容を検討し、開発していくことになります。 *1 Business to Employee … 社員・⾏員に端末またはアプリを配布するもの
46. 45 © 2021 IBM Corporation 6-5．モバイルアプリ vs モバイルブラウザアプリ 考慮事項の多いモバイルアプリ開発ですが、モバイルブラウザ(Web)アプリでは出来ない多くのことができます。 ⻁⽳に⼊らずんば⻁⼦を得ず︕ - 圧倒的なユーザー拡⼤スピード - ⾼い利⽤頻度 - ストア(Google Play/Apple Store) 評価での知名度・評判の向上 - 応答速度、操作性 - オフライン使⽤ - 明細をダウンロードして通帳機能など - ハードウェア(モバイル端末)機能の利⽤ - ⽣体認証(指紋／顔認証) - ⾮接触ICカードリーダー - GPS - カメラ - Bluetooth など - ⾼度なロジックのエッジ処理 - ワンタイムパスワード⽣成 - リアルタイムでのAI顔・表情判定 - VR/AR - データ保持 - ダウンロード・インストール不要 - 構築が容易 ハードウェア差異はブラウザが吸収 Web技術者は調達容易 ストア審査不要 - 保守が容易 アップデートは全てサーバ側で実施 ログ等もサーバ側で保持 https://xxxxx/xxx モバイルアプリ モバイルブラウザ(Web)アプリ
47. 7. 今⽇の成果
48. 47 © 2021 IBM Corporation 7-1．今⽇の成果と次回以降の予告 第２回 DSP Sandboxで考える銀⾏システム • 銀⾏の各種サービスで、システムがどう連携するかをイメージできる、図⽰できる • 銀⾏のシステム間の「責務」について語れる 第３回 DSP Sandboxでメッセージングアプリ残⾼照会 • DSP SandboxのAPIを使って、残⾼照会サービスを構築できる • 他のAPIと組み合わせた銀⾏サービスについて具体的にイメージできる 第４回 DSP Sandboxでモバイルアプリを作ろう • DSP Sandboxのサービスを呼ぶモバイルアプリを作れる • モバイルアプリのアーキテクチャについて語れる 第５回 ⾃分だけのSandboxを作ろう • Open APIを活⽤して⾃在に応答を操作できるスタブを作れる • APIファースト開発について語れる 第１回 さわってみようDSP Sandbox • APIとは何か、なぜ良いのかを語れる • フロントサービス層の銀⾏システムになったつもりでAPIを呼び出せる ⾃分だけの経験、知識、問題意識、 アイディアと掛け合わせて 今までにない顧客体験を「共創」しよう︕ いろいろ作れそう︕ でも実際のテストではもっと 応答パターンあるよね。 お⼿元に、実際に動作するプログラムができました。 応答をもっと⾊々と変更して、挙動を試したくなっていると思います。
49. 48 © 2021 IBM Corporation 7-2．次回の準備 • DSP Open API開発者ポータルへのアクセスをお願いします。 • IBMidを作成されていない⽅は、作成をお願いします。 上記リンク先[Login]>[アカウントをお持ちでない場合: IBMid の作成]から作成可能です。 • OpenJDKのインストールをお願いします。 • Apache Mavenのインストールをお願いします。 • Open API Generatorのインストールをお願いします。 • (推奨)VS Codeのインストールをお願いします。 • 下記の知識があるとよりスムーズです。 Open API Generator Open API2.0/3.xの定義ファイルからスタブ やドライバを⽣成するツールです。 https://openapi-generator.tech Spring Boot Javaのフレームワークです。こちらを使⽤し たコードを⾃動⽣成します。 https://spring.io/projects/spring-boot Apache Maven Javaのビルドツールです。こちらを使⽤して 依存関係の解決と起動を⾏います。 https://maven.apache.org/what-is-maven.html https://qiita.com/tarosa0001/items/e5667cfa85752990 0216 Java 基本⽂法 Javaのコードを扱います。 https://www.tohoho-web.com/java/index.htm
50. 49 © 2021 IBM Corporation 7-3．シーズン２準備中︕ Developer Dojo DSP Sandboxシリーズ・シーズン２を鋭意検討中です︕ - この業務領域・技術領域にフォーカスして欲しい - もっとインタラクティブな開催形式がいい - 横のつながりを作りたい - もっと具体的な構築の話 or もっと抽象的な上流の話がいい などなど、ご意⾒をアンケートに頂戴できますと幸いです︕ 講義後アンケート︓ 下記URLから回答をお願いします。 https://app.sli.do/event/3claglpv
51. Appendices
52. 51 © 2021 IBM Corporation 免責事項 公開している資料は個⼈の⾒解であり、必ずしも所属法⼈の⽅針や意向を表すものではありません。 IBM Developer Dojoは開発者の⽅を対象に、IBM Cloudを主とした技術情報をお伝えする⽬的で開催し ております。講師や運営スタッフにより、開催毎に最適と判断した内容でお届けしています。 ハンズオンを伴う講義はお客様の費⽤負担が発⽣しない環境と⼿順にてご案内しております。 クラウド上に構築した製作物は、お客様ご⾃⾝で適切に削除をお願い致します。 クレジットカード情報の登録を伴わない場合は費⽤は⼀切発⽣しませんが、ご登録いただいているお客様 はご注意下さい。 講師陣は皆様のご利⽤状況を個別に確認することはできません。ご理解とご協⼒をお願い致します。 当シリーズではサードパーティのサービスやソフトウェア(LINE API、React Native、VS Codeなど)を使 ⽤しますが、本番環境での使⽤をこれに限定するものではありません。 ご⾃⾝の状況等を鑑み、適切にご判断いただきますよう、お願い申し上げます。 当シリーズで提供するソースコードは講義⽤のものです。実際の⾦融機関で使⽤するにはセキュリティや エラーハンドリングなど数々の考慮、設計、実装が必要です。このハンズオンでは『動くものを作ってみ る』ことに主眼を置いていますので、そういった点は含まれないことをご了承ください。 本⽇はご参加いただき、誠にありがとうございました。
53. 講義後アンケート︓ 下記URLから回答をお願いします。 https://app.sli.do/event/3claglpv