HOME > 開発者向けBLOG > Sencha Blog >  セキュアなオフラインアプリのWeb Application Manager を利用したデプロイ

Technology Note 開発者向けBLOG

Sencha Blog

セキュアなオフラインアプリのWeb Application Manager を利用したデプロイ

こんにちは、ゼノフィseoです。

この記事は、US Sencha社ブログDeploying Secure Offline Apps with Web Application Manager (2015年11月12日 | Nick Harlow) を翻訳したものです。

ウェブアプリケーションの開発は刻々と発展しています。ウェブ開発の初期ではアプリケーションロジックのみならずUIの生成までもがサーバーサイドで処理されており、クライアントサイドのロジックや演算はわずかであるか、もしくは全くありませんでした。それに比べてモダンウェブアプリケーションはより豊富なクライアントサイドコンポーネントを提供しています。HTML5やJavaScriptの近年の改良はこの移行を促進しており、多様な端末やOSでの実行を求められるようなより洗練されて入り組んだクライアントサイド中心のアプリケーションが生み出されています。

アプリケーションの開発においてしばしば、オフラインでも処理できるような設計を求められることがあります。 Sencha のお客様の多くは新規のアプリケーション開発プロジェクトにおいて、モバイルファーストだけでなく”オフラインファースト” も取り入れています。残念ながらHTML5仕様に定義されているAppCache は正しく扱かい辛かったり、キャッシュが破損した場合の修復が難しかったりします。Sencha Web Application Manager によりオフラインアプリのセキュアなデプロイが直感的で扱いやすいものになります。

開発者の皆さんがWeb Application Manager をいかに効果的に利用してオフラインでも動くアプリをデプロイし管理できるか、この記事で解説します。この実現に向けては2つのアプローチがあります。まず一つはSencha Ext JS と Sencha Cmd を利用してアプリを開発し、展開を自動化する方法です。もう一つはSencha を利用せずに開発する方法です。どちらのアプローチにおいても、プロセスの最後でアプリケーションをデプロイする際にWeb Application Manager は役立ちます。

オフラインアプリ戦略1 -Sencha Ext JS とSencha Cmd の利用

このアプローチで、スマートフォンやタブレット、デスクトップに亘り動作するオフライン対応済みのユニバーサルアプリケーションをSencha Ext JS やSencha Cmd を利用してどのように生み出せるかを説明します。クロスプラットフォームのオフラインアプリケーションの開発を始める上ではこれが最も簡単な方法です。このアプローチによって、機能的なアプリケーションテンプレートを準備することができ、それによってウェブアプリケーションアーキテクチャのベストプラクティスをデモンストレーションしたり、強力なUIやデータ操作、およびSenchaのMVVMプログラミング方法論を確かめるサンプルを用意したりすることができます。そしてこれらはみなさん自身がコードを書かずにできます。プロジェクトのニーズに応じてこれらのサンプルを簡単に適用することができます。以上がオフラインアプリケーション開発において我々がお薦めするアプローチです

1.Sencha Cmd をダウンロード、インストールする

1.1 http://www.sencha.com/products/sencha-cmdに移動

1.2 ご利用されているシステムに適切なパッケージをダウンロード。もしすでに Java Runtime 環境 (JRE)がインストールされている場合、”No JRE” オプションを選択

1.3 アプリケーションアーカイブを解凍し、インストーラーを実行

1.4 環境変数を追加

2.テンプレートからアプリケーションを生成する

2.1 ワーキングディレクトリを作成

2.2 コマンドプロンプトで以下を入力:

sencha generate app -ext SampleApp /path/to/your/working-directory

2.3 ここで、’SampleApp’ という新規のExt JSアプリケーションがワーキングディレクトリに作成されます。以下を入力して認証します:

cd /path/to/your/working-directory
sencha app watch

全てが問題なく進めばコンソールの最後に下記のようなメッセージが出力されます:

[INF] Application available at http://localhost:1841
[INF] Waiting for changes...

2.4 http://localhost:1841 をブラウザで開くと次のようなものが表示されます:

Create a Sample App

開発するアプリケーションのモデルとなるExt JSユニバーサルアプリケーションがこれで出来上がりました。これに変更を加えてください。

3. アプリケーションをWeb Application Manager に展開する

3.1. もしまだであれば、 Web Application Managerに登録してください:https://manage.sencha.com
この手順は2分もかからずに完了します。
3.2. 下記の手順に従ってAPIキーを生成してください。これを使用してSencha Cmd はWeb Application Manager サーバーに接続します。

Generate an API Key

3.3. アプリケーションレコードをWeb Application Manager に作成してください。

Create an Application Record

Create New Application

注:このアプリケーションはオフラインでアクセスされるため、有効なURL を入力する必要はありません。ここでのURL はただの入力項目です。

3.4. ID 番号をメモに控えてください。

Note the ID Number

3.5. あなたの会社のユーザグループのうち最低一つにアプリケーションをマッピングしてください。

Map the Application to User Group

3.6. app.jsonファイルに以下を書き加えてください。Web Application Manager apiKey とsecret をこのファイル、もしくはsencha.cfgファイルに記載することができます。

"manager": {
               // the id for this application
               "id": 72063, //Replace with your app id
 
               // Web Application Manager API server
               "host": "https://api.space.sencha.com/json.rpc",
 
               // Either a zip file path or a folder to be zipped
               // this example shows how to publish the root folder for all build profiles
               "file": "${app.output.base}/../",
 
               // These may be specified here, but are best specified in your user
               // ~/.sencha/cmd/sencha.cfg file
               "apiKey": "<your-api-key/>",
               "secret": "<your-secret/>"
           }

3.7. 以下の通りに入力してアプリケーションをビルドし、新しいバージョンを作成、展開してください:

sencha app build production
sencha config -prop app.version="1.0.0" then app publish

バージョンの識別名は任意に指定することができます。

3.8. ここで、新しいバージョンをWeb Applicarion Manager のコンソールで確認できるようになります。選択し、deployボタンをクリックしてください。

New Version Number - Optimized

New Version Number - Deployed

SSLハンドシェイクの起こり得る失敗

アプリケーションをWeb Application Manager に展開するため、Sencha Cmd はWeb Application Manager API サーバーと SSL 接続を開始します。Sencha Cmd を実行するためのJRE (Java Runtime Environment) のキーストアにAPIサーバーの署名証明書が入っていないければSSLハンドシェイクは失敗し、次のように示されます:

[ERR] The following error occurred while executing this line:
/Users/nick/Documents/Sencha/code/workspace/ExtJS-sample-app/.sencha/app/build-impl.xml:449: com.sencha.exceptions.BasicException: sun.security.validator.ValidatorException: PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target

修正するには

1. パブリッシュコマンドをデバッグフラグで再実行し、アウトプットをファイルに出力してください。

sencha -d app publish >> cmd.txt

2. sun.boot.class.path というプロパティをファイル内で検索し、Sencha Cmd を実行するためのJREのホームディレクトリを見つけてください。OSにもよりますが、次のようなものが表示されます:

[DBG] Initial Ant Value => sun.boot.class.path : /Library/Java/JavaVirtualMachines/jdk1.7.0_45.jdk/Contents/Home/ …

3. JRE のホームディレクトリに移動し、cacertsファイルを見つけてください。おそらくjre/lib/security サブディレクトリにあります。

4. webappmgr_api_srv_cert.pem というローカルファイルに下記のようなサーバ証明書の内容を保存してください。

-----BEGIN CERTIFICATE-----
MIIFMTCCBBmgAwIBAgIJAJS0SvqYCBbvMA0GCSqGSIb3DQEBCwUAMIG0MQswCQYD
VQQGEwJVUzEQMA4GA1UECBMHQXJpem9uYTETMBEGA1UEBxMKU2NvdHRzZGFsZTEa
MBgGA1UEChMRR29EYWRkeS5jb20sIEluYy4xLTArBgNVBAsTJGh0dHA6Ly9jZXJ0
cy5nb2RhZGR5LmNvbS9yZXBvc2l0b3J5LzEzMDEGA1UEAxMqR28gRGFkZHkgU2Vj
dXJlIENlcnRpZmljYXRlIEF1dGhvcml0eSAtIEcyMB4XDTE1MDYxNjIzMDkzOFoX
DTE2MDYxNjIyNTI0MFowQDEhMB8GA1UECxMYRG9tYWluIENvbnRyb2wgVmFsaWRh
dGVkMRswGQYDVQQDDBIqLnNwYWNlLnNlbmNoYS5jb20wggEiMA0GCSqGSIb3DQEB
AQUAA4IBDwAwggEKAoIBAQC9JCWsnSWOP0ePmzuj3JfV+kCrVt5SxUtCMbG3uJNM
Y8wNbA2RYclI2tYFaSAuiZDEEvfJZXK080n+fco0BWcZ8zrv8auot9vkzMHSs+6T
lGXnP+4okHlgAbCeWJhrhtdNWiazmfndiQSl0GmWcx6Cne0MntwkuGjxKi0tXDsk
fnEReWZr2h7os9rfU4xJpB4qXT7SXax3uTEhJcwqKe0VV2ZX3jV48zYgP+GNpeJH
4QFX9pH+8HwlNMTITCpXm50fKZ0t7Rej+HXAt0JOiE8G6wBXZHz/ngk/w9FZDoMt
o729cIYAgPf1BCyG2Nu+9TH2NArdN1fR4/RmXG+kychxAgMBAAGjggG3MIIBszAM
BgNVHRMBAf8EAjAAMB0GA1UdJQQWMBQGCCsGAQUFBwMBBggrBgEFBQcDAjAOBgNV
HQ8BAf8EBAMCBaAwNgYDVR0fBC8wLTAroCmgJ4YlaHR0cDovL2NybC5nb2RhZGR5
LmNvbS9nZGlnMnMxLTg3LmNybDBTBgNVHSAETDBKMEgGC2CGSAGG/W0BBxcBMDkw
NwYIKwYBBQUHAgEWK2h0dHA6Ly9jZXJ0aWZpY2F0ZXMuZ29kYWRkeS5jb20vcmVw
b3NpdG9yeS8wdgYIKwYBBQUHAQEEajBoMCQGCCsGAQUFBzABhhhodHRwOi8vb2Nz
cC5nb2RhZGR5LmNvbS8wQAYIKwYBBQUHMAKGNGh0dHA6Ly9jZXJ0aWZpY2F0ZXMu
Z29kYWRkeS5jb20vcmVwb3NpdG9yeS9nZGlnMi5jcnQwHwYDVR0jBBgwFoAUQMK9
J47MNIMwojPX+2yz8LQsgM4wLwYDVR0RBCgwJoISKi5zcGFjZS5zZW5jaGEuY29t
ghBzcGFjZS5zZW5jaGEuY29tMB0GA1UdDgQWBBTnCJA5BEuivOLRTCmFrUFo0BYy
dDANBgkqhkiG9w0BAQsFAAOCAQEATcjLwZ6oikK3yxsarOvGLQsFoWvTpMx7FJSv
NjbgEXS3Uv2MaPqJWi3oVbEp2vbswGwIAh3r64q7xwauAaGk+0p5YphO1RSOfJ/J
Og+EDNbchwzGGR47hT2HQsSwIX4RqMLpBfKAenELohPNoV5kgZUqkHb3qqJnbALM
CKoh9AiACv76nCe73N9MRrDSBbMuNgm9XH9No3sg66UWTdDqFqUImACmbM1/JlbX
EyTl6ol+Y8kPQ0Iu8Hslb3oVkfM1nrVrc92ekojVUqsoekhF/w02iiTK5tVuRVzo
LlKmA+bXJdC0hfFrLtJtuteEVnacF5O4izZ2a0IFywpRs+e6rA==
-----END CERTIFICATE-----

証明書は時々無効になり別のものに置き換わるので、FireFoxを利用してその時点のサーバ証明書をAPIサーバからエクスポートしてください。APIサーバのホストアドレスをURLバーに入力た上で錠アイコンを右クリック、FireFoxビューアを使用して証明書をローカル環境上にエクスポートします。

5. 以下を入力してJDK のキーストアに証明書をインポートしてください:

sudo keytool -import -keystore cacerts -alias webappmgrsrv -file /path/to/webappmgr_api_srv_cert.pem -trustcacerts -storepass changeit

注:

  • keytoolはJREに付属している標準のユーティリティで、証明書やキーストアを管理します。jre/bin ディレクトリがお使いのシステムの環境変数に設定されていれば上記のコマンドは実行できるはずです。もしされていないのであれば、jre/bin ディレクトリをパスに追加し、コマンドを再度実行してください。
  • “changeit”cacertsキーストアのOracle のデフォルトパスワードです。必ず変更していただきたいですが、変更せずにそのまま使用することは可能です。
  • sudoが必要とされることはないと思いますが、これはUnixライクなOSにのみ適用できます。Windows のマシンでは sudo は省略してください。
  • 証明書を信頼するかとkeytoolに聞かれた場合、”yes” と入力してください。

オフラインアプリ戦略2 – Senchaを利用せずにJavaScriptアプリを開発

このアプローチでは、アプリケーションプロジェクトをゼロから始めます。つまりさらに多くの開発作業が必要になります。しかしながらアプリ開発にどのようなフレームワークや技術を採用したにせよ、Web Application Manager はあなたのアプリケーションをデプロイし、セキュアに、そして管理することができます。

1. アプリケーションの開発

JavaScriptフレームワークを選ぶことから、純粋なHTMLやJavaScriptを使うなど、アプリケーションの開発には多くの方法があります。しかしオフラインモードで実行するために必要なキーエレメントは一つで、それはプロジェクトのルートにあるindex.html です。この記事では、Web Application Manager SecureFiles のサンプルアプリを調整したバージョンを使用します。コードはこちらからダウンロードいただけます。

2. プロダクションのためのアプリケーション準備 (任意で)

必要とされているわけではありませんがプロダクションビルドのプロセスにおいて、プロダクションに必要なアプリケーションを用意することは最も良い進め方です。 これにはたくさんの利点があります。繰り返すタスクを自動化し、人的ミスを軽減、アプリケーションフットプリントを最適化し結果としてロード時間の短縮します。 アプリケーションのビルド自体が壮大なトピックですが、その中で我々は次の点にフォーカスを当てようと思います。確定したリソースのビルドディレクトリへのコピー、JacaScriptとCSSのミニファイ、デプロイのためのアプリケーションのアーカイブ。世の中には多くのビルドユーティリティが存在しますが、今回の例ではGNU make を使用しました。コードのミニファイについては、この例ではYUI Compresser とJava Runtime Environment を必要とします。このステップを後回しにされたい場合は手順3に進んでください。

このまま進められる場合はMakefile を下記のように変更して、プロダクションをデプロイするためのアプリケーションを準備します。これはUnixライクなOSでもWindowsでも実行可能で、CygwinをインストールしてGNUユーティリティのmake、sh、sed を利用できるようにする必要があります。

SHELL = /bin/sh
JS_DIR = js
CSS_DIR = css
BUILD_DIR = build
DIST_DIR = dist
LIB_DIR = lib
YUI = $(LIB_DIR)/yuicompressor-2.4.8.jar
MINIFY = java -jar $(YUI)
APP_NAME = secure-files
APP_NAME_MIN = $(APP_NAME)-min
INDEX = index.html

all : dist
	
build : 
	mkdir -p $(BUILD_DIR)/$(JS_DIR)
	mkdir -p $(BUILD_DIR)/$(CSS_DIR)
	$(MINIFY) ./$(JS_DIR)/$(APP_NAME).js -o ./$(BUILD_DIR)/$(JS_DIR)/$(APP_NAME_MIN).js
	$(MINIFY) ./$(CSS_DIR)/$(APP_NAME).css -o ./$(BUILD_DIR)/$(CSS_DIR)/$(APP_NAME_MIN).css
	sed 's~$(APP_NAME)~$(APP_NAME_MIN)~' $(INDEX) > $(BUILD_DIR)/$(INDEX)
	
	cp $(JS_DIR)/space.js $(BUILD_DIR)/$(JS_DIR)
		
dist : build
	mkdir $(DIST_DIR)
	cd $(BUILD_DIR); COPYFILE_DISABLE=1 zip -r ../$(DIST_DIR)/$(APP_NAME)-app.zip ./*

clean:	
	rm -rf $(BUILD_DIR)
	rm -rf $(DIST_DIR)

3. アプリケーションのアーカイブ

手順2を進めた場合はこの手順は飛ばしてください。手順2を飛ばした場合はindex.htmlを設置しているルートで次のコマンドを入力してください:

zip -r ../your-app-archive.zip ./*

4. アプリケーションレコードと新規バージョンをWeb Application Manager に生成

4.1. 上記の手順3.3に従ってください
4.2. アプリケーションの新しいバージョンを作成してそれをデプロイしてください

Create an Application Record and New Version

New Version

4.3. 新しいバージョンをデプロイした後、上記の手順3.8を進めてください

最後に

オフラインで利用可能なアプリケーションをWeb Application Manager を利用してデプロイする方法を2つご説明しました。一つはExt JS とSencha Cmd を利用した方法で、高度なユニバーサルアプリケーションを素早くビルドし、Web Applicaion Manager へ簡単に展開することができます。もう一つでは、標準的なHTMLやJavaScriptを使ってアプリケーションをビルドし、Web Application Manager を利用してそのアプリケーションを簡単にデプロイする方法をご説明しました。Web Application Manager を利用することでappストアのパブリケーションやネイティブパッケージ化で起こり得る煩雑さや遅れなしに、Webアプリをスマートフォンや、タブレット、デスクトップのいずれのユーザにも届けることができるようになります。

Web Application Manager について詳しくは
Web Application Manager を是非お試しください – 無料で登録

PAGETOP