Embed Size (px)
Citation preview
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}:="[email protected]"
$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
