開発基盤部会 Blog

開発基盤部会 Blog >> 記事詳細

2017/02/27

Open 棟梁の使い方(実践編)第2回

Tweet ThisSend to Facebook | by nishino

第 2 回 Open 棟梁でモバイルアプリ開発 (2)

こんにちは!前回は、Open 棟梁をモバイルアプリ開発でどのように利用できるのかをご紹介いたしました。

今回は、実際の活用サンプルをご紹介したいと思います。

ハイブリッドアプリでの Open 棟梁の利用

前回もご紹介しましたように、ハイブリッドアプリで Open 棟梁を利用する場合、以下の 2 通りの方法がございます。

  • サーバーサイドプログラムのみ Open 棟梁を利用する
  • 既存の ASP.NET Web アプリケーションを Web View に表示する

それぞれ、見てみましょう。

前提環境

  • Visual Studio 2015
  • Apache Cordova Tools for Visual Studio 2015

あらかじめ、MSDN に記載のインストール手順を参考に、Apache Cordova Tools for Visual Studio をインストールしてください。
また、本ブログでは「ハイブリッドアプリで、Open 棟梁をどのように利用できるのか」に焦点を当てていますので、Apache Cordova の詳細な使い方などはご紹介していません。 Apache Cordova Tools for Visual Studio 2015 の詳細な使い方は、CodeZine@ITなどに詳しく書かれていますので、こちらもご参照ください。

サーバーサイドプログラムのみ Open 棟梁を利用する

前回もご紹介いたしましたが、これは、以下のようなアプリケーション方式です。

  • 画面部分の HTML ファイルはデバイス内のローカルファイルを表示する。
  • データアクセスなど、サーバーサイドプログラムに Open 棟梁を利用する。
    • 利用範囲は、Open 棟梁の F(Function) 層および D(Data Access) 層フレームワーク。
    • デバイスからは Web API 経由でサーバーサイドプログラムを実行する。(Web API は要作成)
ハイブリッドアプリ

Web API アプリケーションを作成する

まず、サーバーサイドプログラムを実行するための Web API アプリケーションを作成しましょう。 Open 棟梁を使用した Web API アプリケーションの作成には、Open 棟梁の SPA(シングルページ アプリケーション) テンプレートが有効です。

メモ:
デバッグ時など、Web API アプリケーションを IIS Express 上に配置する場合は、外部からのアクセスを可能にしておく必要があります。

  • IIS Express の設定ファイルを修正する
    • [Web API アプリケーションのソリューションフォルダへのパス].vs\config\applicationhost.config を開く
    • configuration - system.applicationHost - sites から、Web API アプリケーションの設定部分を探す
    • 以下のように設定部分を修正する
      <site name="[アプリケーション名]" id="2">
      <application path="/" applicationPool="Clr4IntegratedAppPool">
        <virtualDirectory path="/" physicalPath="[Web API アプリケーションへのパス]" />
      </application>
      <bindings>
        <!-- bindingInformation を、"localhost" から "*" に変える -->
        <binding protocol="http" bindingInformation="*:[portnumber]:*" />
      </bindings>
      </site>
  • 管理者権限でコマンドプロンプトを開き、以下のコマンドを実行する
    netsh http add urlacl url=http://*:[portnumber]/ user="NT AUTHORITY\INTERACTIVE"

Apache Cordova アプリケーションを作成する

次に、Apache Cordova アプリケーションを作成します。

  • Visual Studio で、新規プロジェクトを作成する
    [新しいプロジェクトの追加] ウィザードで、[JavaScript]-[Apache Cordova Apps]-[空のアプリ (Apache Cordova)] を選択し、Apache Cordova アプリケーションを作成してください。
  • 画面を実装する
    それでは、画面を作っていきましょう。表示する画面は、ソリューションエクスプローラーの [www]-[index.html] です。
    • Web API へのアクセスを有効にする
      デフォルトでは、セキュリティの理由により、Web API へのアクセスはブロックされます。Web API へのアクセスを有効にするためには、Web API のホストをホワイトリストに登録する必要があります。
      • Apache Cordova アプリケーションに、Whitelist プラグインを追加する
        Web API のホストをホワイトリストに登録するには、Apache Cordova の Whitelist プラグインが必要です。ソリューション エクスプローラーで config.xml を開いてください。 [プラグイン]-[コア] から、[Whitelist] を選択して、「追加」ボタンでプラグインを追加してください。
      • Whitelist プラグインの追加
      • Web API のホストをホワイトリストに登録する
        Web API のホストをホワイトリストに登録する方法は、Whitelist プラグインのページが参考になります。 ここでは、以下のように META タグを定義しました。 ここで、connect-srcは XMLHttpRequest などによる通信を許可する属性であり、10.0.2.2は、Android エミュレーターから、実行マシンの localhost を参照する際の特別な IP アドレスです。
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' connect-src: http://10.0.2.2 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
  • 画面をデザインする
    Apache Cordova の Web View に表示させたい画面を index.html に定義します。 ここでは、Web API を呼び出すボタンと、Web API の結果を表示する DIV タグを定義します。
    <button id="btnSample">サンプル</button>
    <br />
    <div id="result" style="color: white"></div>
    作成した HTML ファイルは以下のとおりです。
    <!DOCTYPE html>
    <html>
        <head>
    <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"/>
        <!--
            必要に応じて、次のメタ タグでコンテンツ セキュリティ ポリシーをカスタマイズします。default-src に 'unsafe-inline' を追加して、インライン JavaScript を有効にします。
            詳細については、http://go.microsoft.com/fwlink/?LinkID=617521 を参照してください。
        -->
            <meta http-equiv="Content-Security-Policy" content="default-src 'self' connect-src: http://10.0.2.2 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
    
            <meta name="format-detection" content="telephone=no">
            <meta name="msapplication-tap-highlight" content="no">
            <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
            <link rel="stylesheet" type="text/css" href="css/index.css">
            <title>CordovaApp</title>
        </head>
        <body>
            <div class="app">
                <h1>Apache Cordova</h1>
                <div id="deviceready" class="blink">
                    <p class="event listening">デバイスに接続しています</p>
                    <p class="event received">デバイスの準備が完了しました</p>
                </div>
                <button id="btnSample">サンプル</button>
                <br />
                <div id="result" style="color: white"></div>
            </div>
            <script type="text/javascript" src="cordova.js"></script>
            <script type="text/javascript" src="scripts/platformOverrides.js"></script>
            <script type="text/javascript" src="scripts/index.js"></script>
        </body>
    </html>
  • JavaScript に処理を実装する
    次は、ボタンを押したときに Web API を呼び出す処理を実装します。処理は、ソリューションエクスプローラーの [www]-[scripts]-[index.js] に実装します。onDeviceReady 関数の最後に、以下の処理を追加します。
    var button = document.getElementById('btnSample');
    var result = document.getElementById('result');
    
    // ボタンクリックイベントを実装
    button.onclick = function () {
        var request = new XMLHttpRequest();
    
        // SPA テンプレートに含まれる Web API へのパスを指定する
        request.open('POST', encodeURI('http://10.0.2.2/SPA_Sample/api/GetCount'), true);
    
        request.setRequestHeader('Accept', 'application/json');
        request.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
        request.onreadystatechange = function () {
            if (this.readyState === 4) {
                request.onreadystatechange = null;
                switch (this.status) {
                    case 200:
                    case 204:
                        try{
                            // Web API の結果を画面に表示する
                            result.innerHTML = JSON.parse(this.responseText).message;
                        }
                        catch (e) {
                            result.innerHTML = '結果の取得に失敗しました';
                        }
                        break;
                    default:
                        var error;
                        try{
                            error = JSON.parse(request.response).error;
                        }
                        catch (e) {
                            error = new Error('Unexpected Error');
                        }
                        result.innerHTML = error;
                        break;
                }
            }
        };
    
        // Web API に渡すデータ
        var data = {
            ddlDap: 'SQL', 
            ddlMode1: 'individual', 
            ddlMode2: 'static', 
            ddlExRollback: '-'
        };
    
        // Web API を呼び出す
        request.send(JSON.stringify(data));
    };

実行確認

それでは、実際に動かしてみましょう。 Visual Studio で、Apache Cordova プロジェクトをデバッグ実行してみます。 「サンプル」ボタンをクリックすると、以下のように結果が表示されることを確認してください。

Android エミュレーターで動作確認

次に、Open 棟梁のログを確認してみましょう。 Open 棟梁はデフォルトでは C:\root\files\resource\Log フォルダにログを出力しますので、ここに ACCESS.xxxx-xx-xx.log や SQLTRACE.xxxx-xx-xx.log (xxxx-xx-xx は実行日付) のようなログが出力されていることを確認してください。たとえば、SQLTRACE.xxxx-xx-xx.log には以下のようなログが出力されていると思います。

[2017/01/16 14:42:22,271],[INFO ],[7],105,0,[commandText]:SELECT COUNT(*) FROM Shippers [commandParameter]:

既存の ASP.NET Web アプリケーションを Web View に表示する

次は、既存の ASP.NET Web アプリケーションを Web View に表示する方法です。 これには、以下の手順が必要です。

  • デバイス側
    • Apache Cordova の Web View への Web アプリケーションの表示を許可する
    • アプリ起動時に Web アプリケーションに遷移する処理を実装する
  • Web アプリケーション側
    • Cordova プラグインを使用したデバイス連携を行う場合
      • Apache Cordova や、各種プラグインの JavaScript を追加する
      • プラグインの実行に必要な JavaScript コードを実装する
    • デバイス連携を行わない場合
      特に何もする必要はありません。
この手順の詳細については、MSDN ブログに詳しく書かれていますので、こちらが参考になると思います。

次回は、ネイティブアプリで Open 棟梁を活用する方法を見ていきます!


09:11 | 投票する | 投票数(0) | コメント(0) | お知らせ