iOSアプリ - 日本ftp.4d-japan.com/00_DevCon/2017/slides/ios-app.pdf · 2017-05-10 ·...

iOSアプリIonic / 4D

4D ➡ iOS

4D

Web/Mobile

iOS native

Ionic

代表的なハイブリッド・モバイルアプリ・フレームワーク

ハイブリッドとは・・・ WebViewを利⽤してネイティブ⾵に動作するアプリ

Onsen (https://onsen.io) Meteor (https://www.meteor.com) React Native (https://facebook.github.io/react-native/)

類似のフレームワーク

①ドラッグ/ドロップの画⾯作成ツール（Ionic Creator） ②おおきなコミュニティ・情報が豊富 ③4D Mobile powered by Wakandaとの親和性

ポイント

HTML

JavaScript

Ionic Creator Pro

PRO

FREEテキストエディター

オンラインツール

HTTPS

ワークフロー

フリー版

Ionic Creator HTML/JS/CSS

4D REST API

Web ⬇

REST API

iOS Native ⬇

REST API

① ② ③ ④

① Ionic Creatorで画面のプロトタイプを作成してダウンロード

② 4DデータベースにJSON/REST APIを追加

③ ダウンロードしたファイルを書き換えて4DのREST APIに接続

④ プロジェクトをビルドしてデバイスから4DのREST APIに接続

⽤意するもの : Web

4D Developer ProWeb Server local + 1 IP address

Ionic無料アカウント 1 プロジェクト（公開） 基本エクスポート

⽤意するもの : iOS

Mac

iPhone

X codeApple Developer Network アカウント

⽤意するもの : iOS

① Xcode ② コマンドラインツール ③ Homebrew ④ Node ⑤ Cordova ⑥ Ionic ⑦ Deployment Tools ⑧ iOSシミュレーター

App Store xcode-select --install https://brew.sh/ brew install node npm install -g cordova npm install -g ionic npm install -g ios-deploy npm install -g ios-sim

iOSアプリをビルドするにはMac, Xcode, Deployment Tools, Ionicが必要

Ionicを使用するためにはコマンドラインツールとiOSシミュレーターが必要

WebアプリをネイティブアプリにラッピングするにはCordovaが必要

CordovaをインストールするにはNodeが必要

NodeをインストールするにはHomebrewが必要

iOSアプリを実行するためにはiPhone, Apple Developerアカウントが必要

1

2

3

4

5

67

8

⽤意するもの : HTTPS

Let's Encrypt認証局発⾏証明書

http://kb.4d.com/assetid=77671

認証局発⾏証明書

⾃⼰署名証明書

OpenSSL

GENERATE CERTIFICATE REQUEST

GENERATE ENCRYPTION KEYPAIR

v14 MD5

v15 SHA-256

署名

⾃⼰署名証明書

コマンドライン

openssl req -x509 -sha256 -nodes -newkey rsa:2048 -days 365 -keyout key.pem -out cert.pem

アルゴリズム ビット数

1年有効

Country Name (2 letter code) [AU]:JP State or Province Name (full name) [Some-State]:Tokyo Locality Name (eg, city) []:Setagaya Organization Name (eg, company) [Internet Widgits Pty Ltd]:4D Organizational Unit Name (eg, section) []: Common Name (e.g. server FQDN or YOUR name) []:localhost

⾃⼰署名証明書

$address:="localhost" ARRAY TEXT($k;6) ARRAY TEXT($v;6)

MAKE CERTIFICATE (SHA256;2048;365;$k;$v;$req;$cert;$pubkey;$privkey)

$v{1}:="JP" $v{2}:="Tokyo" $v{3}:="Setagaya" $v{4}:="Miyako" $v{5}:=$address $v{6}:="keisuke.miyako@4d.com"

$k{1}:="C" $k{2}:="ST" $k{3}:="L" $k{4}:="O" $k{5}:="CN" $k{6}:="emailAddress"

https://github.com/miyako/4d-plugin-convert-certificate

プラグイン

アルゴリズム

ビット数

1年有効

ワークフロー

フリー版

Ionic Creator HTML/JS/CSS

ログイン

https://creator.ionic.io/app/dashboard/projects

ログイン

ログイン

https://apps.ionic.io/apps/

Creator

Apps

ログイン

https://apps.ionic.io/apps/

ログイン

https://creator.ionic.io/app/dashboard/projects

+New Project

https://creator.ionic.io/app/dashboard/projects

Blank

プロジェクト

https://creator.ionic.io/app/dashboard/projects

プロジェクト

https://creator.ionic.io/app/designer/

リスト

List

https://creator.ionic.io/app/designer/

リスト

https://creator.ionic.io/app/designer/

ページタイトル

Page

https://creator.ionic.io/app/designer/

ページタイトル

Contacts

https://creator.ionic.io/app/designer/

リストアイテム

list item

https://creator.ionic.io/app/designer/

リストアイテム

いちばん

https://creator.ionic.io/app/designer/

リストアイテム

にばん

https://creator.ionic.io/app/designer/

リストアイテム

さんばん

https://creator.ionic.io/app/designer/

ページ

Add Page

https://creator.ionic.io/app/designer/

ページ

Blank

https://creator.ionic.io/app/designer/

ページタイトル

Page

https://creator.ionic.io/app/designer/

ページタイトル

Contact

https://creator.ionic.io/app/designer/

段落

paragraph

https://creator.ionic.io/app/designer/

段落

https://creator.ionic.io/app/designer/

リンク

Linklist item

https://creator.ionic.io/app/designer/

リンク

Contact-/page2

https://creator.ionic.io/app/designer/

プレビュー

Preview

https://creator.ionic.io/app/designer/

プレビュー

https://creator.ionic.io/app/designer/

プレビュー

https://creator.ionic.io/app/designer/

ダウンロード

ダウンロード

https://creator.ionic.io/app/designer/

ダウンロード

https://creator.ionic.io/app/designer/

テスト

ワークフロー

フリー版

Ionic Creator HTML/JS/CSS

4D REST API

① ②

公開メソッド

C_TEXT($1)

QUERY([Contacts];[Contacts]ID=$1) C_OBJECT($record) OB SET($record;\ "LastName";[Contacts]LastName;\ "FirstName";[Contacts]FirstName;\ "id";[Contacts]ID;\ "Organization";[Contacts]Organization;\ "email";[Contacts]Email)

WEB SEND TEXT(JSON Stringify($record);\ "application/json")

公開メソッド

C_TEXT($1)

ALL RECORDS([Contacts]) C_OBJECT($template) OB SET($template;\ "LastName";->[Contacts]LastName;\ "FirstName";->[Contacts]FirstName)

WEB SEND TEXT(\ Selection to JSON([Contacts];$template);\ "application/json")

公開メソッド

C_TEXT($1)

$param:=Replace string(Substring($1;2);"@";"";*) QUERY([Contacts];[Contacts]LastName=$param+"@";*) QUERY([Contacts]; | ;[Contacts]FirstName=$param+"@") C_OBJECT($template) OB SET($template;\ "LastName";->[Contacts]LastName;\ "FirstName";->[Contacts]FirstName;\ "id";->[Contacts]ID;\ "Organization";->[Contacts]Organization;\ "email";->[Contacts]Email)

WEB SEND TEXT(\ Selection to JSON([Contacts];$template);\ "application/json")

公開メソッド

C_TEXT($1;$path;$template;$json)

$path:=Get 4D folder(HTML Root folder)+\ "4D"+Folder separator+"contacts.4dtag" $template:=Document to text($path;"utf-8") PROCESS 4D TAGS($template;$json;$1) WEB SEND TEXT($json;"application/json")

公開メソッド（プロパティ）

ワークフロー

フリー版

Ionic Creator HTML/JS/CSS

4D REST API

Web ⬇

REST API

① ② ③

Angular

テンプレートcontact.html

contacts.html

サービスservices.js

ルーティングroutes.js

コントローラーcontrollers.js

ワークフロー

フリー版

Ionic Creator HTML/JS/CSS

4D REST API

Web ⬇

REST API

iOS Native ⬇

REST API

① ② ③ ④

エミュレーター

ionic serve

cd ~/desktop

ionic start Contacts blank --v1

エミュレーター

ionic build ios

ionic emulate ios

デバイス

X codeアカウントの設定

デバイス

X codeアカウントの設定

デバイス

X code署名の設定

デバイス

X code署名の設定

デバイス

ionic build ios --device

ionic run ios