iOS（iPad）でOfficeアドインをデバッグする

前の記事で、1日でOfficeアドインを開発した経験について話しました。 その日の結果はXLToolsカレンダーアドインで、これは機能していて、Officeストアで公開する準備ができていました。 その後、デスクトップバージョンで開発およびテストされたExcelアドインが 、Excel for iPadおよびWebで動作することを期待していました。 APIはどこでも同じです。したがって、このAPIを使用するコードは同じように機能するはずです。特に、追加の変更なしですべてのプラットフォームで機能する多数のアドインが既にあるためです。 これはカレンダーでは発生しませんでしたが、 Office Storeの出版物からの「失敗」の苦しさを知っていました。 この記事では、XLTools.net Calendarアドインが初めてテストに合格しなかった理由と、それを回避する方法について説明します。

Office Storeでの最初の出版物「ゴツゴツした」

昨年末、 セラーダッシュボードにより、 OfficeアドインをiOSで利用可能としてマークすることが可能になりました 。 このオプションを使用すると、iPad、OfficeストアのモバイルバージョンでExcel、Word、およびPower Pointのアドインを公開できます。 この記事の執筆時点では、約10個のアドオンが配置されていました。 私たちもそこに着くことができるかどうか疑問に思っていたので、XLTools.netカレンダーを公開したときに、このオプションをオンにしました。

以前に公開されたOfficeアドインをモバイルディレクトリに含めるには、再度公開する必要があります。 更新されたバージョンをリリースして、このオプションを有効にします。

iOSで利用可能なOfficeアドインには1つの大きな制限があります-支払いはできません。

Officeストアチームによるカレンダーチェックの結果に基づいて、公開が拒否されました。 失敗の原因は、ExcelのWebおよびiPadバージョンでのアドインの動作のエラーでした。 すぐにウェブを見つけました。複雑なことは何もありません。 デバッグには、任意のブラウザーで開発者ツールを使用できます。 しかし、iPadには困難がありました。 当初、iPadでアドインを起動してOfficeストアをバイパスする方法さえ想像できませんでした。 デバッグは言うまでもありません。



MSDNは部分的に支援し、このトピックに関するいくつかの有用な記事を見つけました。

1. iPadおよびMacでOfficeアドインをサイドロードする
   
   
2. iPadおよびMacでOfficeアドインをデバッグする
   
   

デバッグ用にiPadにOfficeアドインをダウンロードする

iPadにアドインをダウンロードするプロセス（サイドローディング）については、最初の記事で詳しく説明しています。 ダウンロードするには、PCにiTunesをインストールし、iPadをPCに接続するためのケーブルが必要です。 Excelがアドインを「表示」して実行できるようにするには、iPad用Excelアプリケーションのマニフェストファイルをダウンロードする必要があります。 これを行うには：

1. iPadをiTunesがインストールされているコンピューターに接続します。
2. iTunesを起動します。
3. iPadのコントロールセクションに移動します。
4. [アプリ]セクションに移動します。
5. [ファイル共有]セクションまでスクロールします。
6. Excelアプリケーションを見つけて選択します。
7. マニフェストファイルをエクスプローラーからExcelドキュメントウィンドウにドラッグします。

その後、アドインはExcelインターフェイスから利用可能になります。











iPadで実行するには、 アドイン WebサイトにHTTPS経由でアクセスできる必要があるという事実に特に注意する必要があります 。 これで私は長い間苦しみました。なぜなら 最初にマニフェストファイルで、SSL証明書がインストールされていない稼働中のコンピューターに展開されたサイトへのリンクを示しました。 その結果、アドインは開始されましたが、エラーがスローされました。











自己署名証明書も機能しません。信頼できる証明書、またはエラーテキストが示すように「有効な」証明書が必要です。



HTTPSを使用してアドインを起動する問題を調べたところ、2つの有効なオプションが見つかりました。

• HTTPSをサポートするテストサイトでの予備公開。 これは、サブドメインyoursite .azurewebsites.netを使用する場合、信頼できるSSL証明書を持つ独自のサイト、またはHTTPSをデフォルトでサポートするAzure上のサイトのいずれかです。
  
  
• ngrokプログラムを使用して、ローカルサイトにHTTPS経由で外部からアクセスできるようにします。
  
  

デバッグの目的では、2番目のオプションはより興味深いものです。 アドインのサーバーコード（存在する場合）をデバッグできます。

ngrok経由でOfficeアドインを起動する

ngrokは、インターネット上のローカルサイトのトンネルとして機能するコンソールユーティリティです。 起動すると、ngrokはサイトに動的ドメイン名を割り当てます。 このドメインへのすべてのリクエストは、ngrokサービスによってローカルサイトにリダイレクトされます。これにより、インターネットで公開された実際のアドオンの動作をエミュレートし、ローカルデバッグの可能性が残ります。 追加のボーナスは、動的ドメインがHTTPおよびHTTPS接続をサポートすることです。 これはまさに、Excelでアドインを実行するために必要なものです。



ngrokを機能させるには、サイトをローカルIISサービスに展開する必要があります。 IIS Expressでngrokを「設定」することもできますが、もう少し難しくなります。 IIS Expressの詳細については、 こちらをご覧ください 。



ローカルのIISサーバー、ポート8081にサイトを展開したとします。ngrokを介してトンネルを作成するには、次のものが必要です。

1. ngrokからアーカイブをダウンロードし、ローカルコンピューターのフォルダーに解凍します。
2. コンソールに移動して、コマンドngrok http 8081を実行します。

ngrokは一連のURLを提供しますが、その中で、httpsで始まるURLに関心があります。











結果のURLをマニフェストファイルに転送します。 アドインサイトへのすべてのリンクは、ngrokによって生成された新しいアドレスに置き換える必要があります。







その後、上記のように、マニフェストファイルをiPadにコピーする必要があります。 そして出来上がり-アドオンが獲得しました：

Weinreを使用したOfficeアドインのデバッグ

iPadおよびMac用のアドインのデバッグプロセスについては、上記の記事の2番目で説明しています。 MSDNの記事の著者が考慮しなかった唯一の微妙な点は、再びHTTPSです。 よく見てみましょう。



Weinreは、開発者ツールに似たWebページデバッガーですが、モバイルデバイスで実行されているWebページをリモートでデバッグするように設計されています。 NodeJSで書かれています。



Weinreを起動するには、次のものが必要です。

1. https://nodejs.org/からNodeJSの最新バージョンをインストールします 。
2. コンソールでnpm -g install weinreコマンドを実行してWeinreをインストールします。
3. weinreコマンド--httpPort 8080 --boundHost localhostを使用してWeinreを起動します。
4. localhost ：8080メインページに移動して、Weinreをテストします。

MSDNの記事では、リモートデバッグを行うには、アドインWebページに次のスクリプトを追加する必要があると書かれています。

<script src="http://<ipaddr>:8080/target/target-script-min.js#anonymous"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そうすると、何も機能しません。 覚えているように、アドインはHTTPSで動作します。 つまり、ページ上のすべてのリソースもHTTPS経由でロードする必要があります。 ページコードにHTTPスクリプトを追加すると、ブラウザーによってブロックされ、Weinreは機能しません。 この状況では、ngrokが再び助けになります。 新しいコンソールを開き（既にngrokとweinreを起動した古いコンソールを閉じることはできません）、 ngrok http 8080コマンドを実行して、 Weinreの別のHTTPSトンネルを作成します。











ngrokからURLを受け取った後、Weinreスクリプトをアドインに含めます。

 <script src="<ngrok https address>/target/target-script-min.js#anonymous"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、 ngrok httpsアドレスは、ngrokがWeinreサービスに割り当てたURLです。



準備が完了したら、デバッグに進むことができます。 これを行うには、モバイルデバイスでアドオンを実行し、接続されたデバイス（ターゲット）のリストを表示するWeinreページに移動します。http：// localhost：8080 / client /＃anonymous







JavaScriptをアドインページのテキストに追加する場合、キャッシュに問題がある可能性があることに注意してください。 iPad上のExcelは、以前にロードしたのと同じバージョンのページを（Weinre用のJavaScriptを追加せずに）ロードします。 この場合、「バージョン」 getパラメーターをマニフェストファイルのURLに追加すると、 home.html？V = 1に役立ちます 。

Weinreを使用した機能のデバッグ

MSDNのデバッグプロセスの説明にも不正確さがあります。 デバッグには「お気に入りのブラウザのF12開発者ツール」を使用する必要があると書いていますが、「お気に入りのブラウザ」と言う方が正確です。 開発者ツールはここでは役に立ちません。なぜなら、 デバッグインターフェイスは、Weinre自体によって提供されます。 機能の点では、Chromeのデベロッパーツールに似ており、ブレークポイントと段階的なJavaScriptデバッグを除き、まったく同じ機能を提供しますが、これは強力な制限です。



たとえば、「要素」セクションに移動して、要素のテキストとその色を変更しましょう。 すべての変更は、iPadのアドインに自動的に表示されます。











JavaScriptは、Weinreコンソールを介してのみデバッグできます。 コンソールを使用すると、グローバル変数にアクセスして必要なコマンドを実行できます。 それがカレンダーのデバッグ方法です 私の場合、問題はJavaScriptコードにありました。

結論

現在、モバイルデバイス用のOfficeアドインのデバッグは、 Visual Studioが提供するエクスペリエンスとはかけ離れています。 それでも、それなしではできない場合があり、そのようなデバッグオプションは、原則として、何もしないよりも優れているという事実です。 このデバッグ方法の難点と欠点にもかかわらず、XLTools.net Calendarアドインのエラーを修正することができました。その後、テストに合格し、Officeストアで公開されました- ダウンロードして、使用してください！



Officeアドインのデバッグの経験についてコメントを残してください。 どのような問題に遭遇しましたか？ どのようにしてそれらを解決しましたか？ 質問してください、私はすぐにそれらに答えようとします。

---

著者について

Petr Lyapin-Wave Point LLCのテクニカルディレクター



ビジネスプロセスを自動化するプロジェクトを実装した10年以上の経験。 彼は多くのロシアおよび外国の会社で働きました。 XLTools.netプロジェクトの創設者。 2013年以来、XLToolsプロジェクトチームと共に、Office 365のアドインを作成および推進しており、Officeストアで公開されている7つ以上のソリューションの著者です。