ポイントはエラーを出さないこと

これが上手く行く秘訣

ウェブサイトからUWPアプリを作るということ

ウェブサイトをアプリに変換する前にチェックしなければならないのは、htmlが正しく書かれているかどうかをバリデータでチェックすることだ。これをやっておかないと、Visual Studio 2017はエラーメッセージを提出して動作を停止するから先へは進めなくなる。


ゲームアプリと違って、ウェブサイトはデバッグ(debug)の心配がない。但し、バリデータでチェックしていることが前提になる。

UWPアプリへ変換するには何を使う?

当初、デスクトップアプリはnodo.jsのNativefierを使って簡単に作れた。今度はそれをUWPアプリへ変換すれば大丈夫と考えたので、「Desktop App Converter」、「Windows Bridge」、などのコンバーターを試すことになった。Windows PowerShellからコマンドを実行するタイプのものだ。

ここで閉口したのが、ERROR MESSAGEである。このメッセージが示す内容が不明なので、対処に困ることになる。いくつかはこなしていったが、それでもエラーが出るので、ここで方向を変えざるを得ない。

エラーを出さないUWPアプリ作り

折しもVisual Studio 2017がリリースされたばかりであった。Visual Studio 97から20年間の進化が期待できる代物だから、これでいこう。

Visual Studio 2017の大変なのは、PCの環境設定とその確認

Visual Studio 2017が動作する環境、UWPアプリを動かせる(作る)環境、その二つの環境をWindows10 Pro上で整備しなければならない。

ここのところが少々ややこしいのである。煩雑な作業になるので、私の場合はこのあたりからノートに纏めていくことになった。その全てはMicrosoftのページにあり、リンクを辿って解決策を見出すことが出来るのだが、縦横無尽に解説が拡がっているので、纏め上げるにもかなり時間を要すこととなった。思い返せば、上述のコンバーター時のエラーは、もしかしたら完全なる環境設定が行われていなかった上で生じたメッセージかもしれない。エラーを潰すには、準備万端で環境設定に臨むことが必須だ。

しかしだ。「今時、馬鹿親切なリファレンスは存在していないのか?」そこで、ここからはhtmlを使って纏め始めた。

ウェブサイトからUWPアプリを作る

UWPアプリ作成の要点

UWPアプリ作成の要点

ひととおりの制作を終えて感じたこと

Visual Studio 2017は目的の制作物に依りUWPアプリを制作できる環境(Visual Studio 2017を使える)を整える作業が多く、確認作業にも多くの時間が必要になる。ここでは、チェック項目数とその内容を押さえる水先案内人がいないと迷子になってしまうかもしれない。

個人的な趣向で脱線するときもあるかもしれないので、いつでも最初からやり直せるようにバックアップは必須である。それから、DLLファイル、レジストリ等のトラブルが起きた際に復旧させる復元ポイントを設定することも忘れてはならない。拡張やプラグインの類も多く提供されているが、タイミングを考えた導入が賢明だ。ここは後回しで大丈夫だろう。

Visual Studio 2017 はマイクロソフトの提供している統合開発環境だが、その中のひとつの開発環境であるJavaScriptを使って既存のwebsite から Universal Windows Platform アプリに変換し、テストを経て、アプリをストアに登録するまでを分かりやすく纏めた。

その解説した内容をkindleにアップした。構成は以下の通りである。

  • Desktop アプリをNativefierで作成
  • 本稿を検証するPCとプログラムについて
  • backup / restoration important
  • Visual Studio 2017のシステム要件
  • 古いVisual Studio をアンインストールする
  • Visual Studio 2017をAdministrator Authorityに設定
  • Visual Studio 2017 installer
  • Visual Studio 2017 installer─Component
  • Visual Studio 2017 Update the program
  • Visual Studio 2017 アプリ開発者として登録する
  • Visual Studio 2017 アイコンとライブタイルの準備
  • Visual Studio 2017 プロジェクトを作ってプログラムを編集する
  • Visual Studio 2017 UWP アプリを動かす
  • Visual Studio 2017 ストアメニューを済ませて準備を整える
  • Visual Studio 2017 アプリを申請する
アマゾンのkindleで調べる