HOME > 開発者向けBLOG > Sencha Blog >  Sencha Space は一貫したランタイムとデバッグサポートでアプリ開発をより簡単にします

Technology Note 開発者向けBLOG

Sencha Blog

Sencha Space は一貫したランタイムとデバッグサポートでアプリ開発をより簡単にします

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

この記事は、US Sencha社ブログ Sencha Space Makes App Development Easier with Consistent Runtime and Debugging Support を翻訳したものです。

リモートデバッグ、デスクトップサポート、Android ユーザー体験の改善

Sencha Space の最新版のリリースにより、Android や iOS でのモバイルアプリケーションの開発やデバッグはより簡単になりました。Android や iOS を使用する開発者がリモートデバッグができるように、Space クライアント アプリケーションの特殊なインスタンスを提供することで、Sencha Space はプラットフォーム間での HTML5 アプリケーションのデバッグを面倒をなくしました。

リモートデバッグ、デスクトッププラットフォームへのデプロイメント、オンプレミス管理のサポートに加え、Android 用の Sencha Space クライアントに カスタム化された Chromium ベースの WebViewを作りました。これにより、Android 4.0 以上を使って Space でデプロイされたアプリケーションは、同じ様にハイパフォーマンスで、機能も完全に揃った Web ランタイムを持ちます。それに加え、たくさん断片化されている現状の Android の環境ではなく、開発者はたった1つのバージョンの Chrome をターゲットに、どんな Android 4.x デバイスでもデバッグを行うことができます。

これらの新しい機能を掘り下げていきましょう。

Android の断片化問題を解決

Google は Androide での Web アプリケーションやハイブリッドアプリケーションの開発を難しくしてしまいました。どのバージョンの Android も、HTML5 機能の多くが欠けていたり、パフォーマンス面で大きな問題を抱えた Webkit ベースの WebViewを含んでいました。Android の標準 WebViewを使っての Web アプリケーションの開発は、多くの互換性が欠けパフォーマンスに限界のある Android のプラットフォームでのテスト、デバッグを意味します。さらには Android 4.4 以前は、 WebViewがリモートデバッグに対応していなかったため、このプロセスは非常に難しいものでした。

Sencha Space は、 Web アプリケーションのデバッグを、Android 4 の全てのバージョンでのリモートデバッグに対応した WebViewを提供することで簡単にしています。これは Sencha Space の中で実行されている Android 用のアプリは全て同じ WebViewを使うということになります (どのバージョンの Android をインストールしていても) – これにより全ての Web アプリケーションは、一貫した機能を持っている最新の Chromium ランタイムを使用することができます。

Android でのデバッグ

Sencha Space はセキュリティにフォーカスした商品であるため、Play Store からダウンロードされた Space クライアントアプリケーションのプロダクションのデバッグは無効化させています。デバッグとローカルテストを有効化するために、直接インストールできる開発者バージョンの Android 用 Space クライアントアプリケーションを用意しました。

こちらから Android 用 Space クライアントアプリケーションはこちらからダウンロードしてください。

デバッグクライアントは Play Store からのものと同じデバイスにインストールすることも可能です。アプリケーションの各バージョンからのデータは隔離されていて、プロダクションデータに影響を及ぼしません。

次に、この端末でデバッグを行ったことがなければ、手順に従い Chrome でのリモートデバッグを有効化 させる必要があります。デバイスでのリモートデバッグを有効化ができたなら、デバイスをパソコンに USB ケーブルで繋げましょう。

Android で Space アプリをリモートデバッグする方法は2つあります:

  1. パソコンで Google Chrome を起動し、chrome://inspect にアクセスする
  2. GapDebug を使う

次に、Android デバイスの Space クライアントを開き、ログインします。使用しているリモートインスペクター内に、各 Space アプリケーションの WebView が見る事ができるはずです。

Sencha Space は各アプリケーションを独自の WebView で実行します。つまり、開くたびに Chrome のインスペクター (もしくは GapDebug) にリストされます。また、Space クライアントの中でアクティブな WebView でなくても同時にアプリケーションをデバッグすることができます。

インスペクターを1度開くと、全てのデバッグ機能を使う事ができます。

iOSでのデバッグ

Android でのリモートデバッグの様に、Apple は Mac ベースの Web 開発者が Safari を使ってハイブリッド Web アプリケーションをデバッグすることを簡単にしています。Apple Xcode は無料でダウンロードでき、ほとんどの開発者が既に Xcode を開発している機器にインストールしているはずですが、そうであれば iOS Simulator もインストールされているということです。iOS Simulator と Safari のリモートデバッグ機能をあわせて使用すれば、素早くモバイルやハイブリッド Web アプリをデバッグすることができます。

Andoroi クライアントのように、Sencha は iOS Simulator 用のデバッグクライアントを提供しています。つまり、物理的に iOS デバイスなしで、直接 Mac 上でSencha Space アプリケーションをデバッグすることができるようになりました。

物事を簡単にするために、Node.js と ios-sim を使用します。これは npm を通してインストールすることができます (ソースは GitHub にあります) 。もし、npm と Node.js がシステムにインストールされてなければ、まずそちらを先にお願いします。

npm がインストールされていることを前提にですが、コマンドラインに以下を入力してみましょう。

npm install ios-sim

次に、 iOS Simulator 用の Space デバッグクライアント をダウンロードし、アーカイブを解凍しましょう。

依存関係がインストールされたことになるので。コマンドラインに以下を入力することで Space デバッグクライアントをインストールできます。

ios-sim launch [PATH To Space]/sencha-space-ios-debug/Space-Dev.app   --tall  --64bit

これで iOS Simulatorが起動します。そこで Space の組織に資格情報を使ってログインし、アプリケーションを開きましょう。

iOS Simulator では Space アプリをリモートデバッグする方法が2つあります。

  1. Safari を開き、デバッグメニューを開きましょう。iPhone Simulator メニューアイテムと、Space 内でアクティブな WebView のリストを見ることができます (スクリーンショット参照)
  2. GapDebug (Android と同じプロセス) を使う

リストからアプリケーションを選択すると、JavaScript コンソール、リソース、DOM インスペクターなど様々な見慣れたデバッグツールを表示させることができます。

注:GapDebug を使用している場合、同じインターフェースから同時に Android と iOS Simulator アプリケーションをデバッグすることができます。

Apple iOS simulator は、非常に質の高い iOS 環境の再製を提供してくれます。しかし、どうしても実際のハードウェアがないと解決できないバグも存在します。もしプロの Apple 開発者であれば、iOS デバイスで実行できるデバッグクライアントを現在準備しています。現在はこのクライアントを特定のパートナーやお客様とテスト段階です。もしこのハードウェアデバッグクライアントを早い段階で使用したい場合、是非 ご連絡下さい。

結論

最新版のリリースにより、Sencha Spare はセキュアで管理された Web ランタイムプラットフォームを提供します。それによりデスクトップ、Android、iOS、Windows Phone で一貫したハイパフォーマンスな、開発者体験とユーザー体験を感じることができます。開発者は HTML5 アプリケーションをたった1度作成し、デバッグするだけで、様々なデバイスを使用するエンドユーザーに届けることができる様になるまで1歩近付きました。

Sencha Space について詳しく知りたければ、アップデートされたばかりの製品ページをご覧になるか、 Sencha Space の無料体験にお申し込み下さい。

PAGETOP