Merry Christma ! 25回連載の最後はアプリを作るお話です。と言っても開発者じゃなければアプリは作れません。そこで今回はWebサイトをアプリ化する方法のお話です。

よく使うWebサイトは Windows 10 Mobile であればスタート画面にタイルにしておくことが出来ます。じゃ、それでいいじゃん。

でも、ちょっといじるとほかのサイトに行ってしまったり、URLの欄が出たり、やっぱり動作はブラウザであるEdgeの枠の中で動いています。そうではなくてアプリ化すればそのサイト専用でしか動かない。それはそれで便利です。なのでまずは実際にやってみましょう。

なお、Webサイトによってはアプリ化できないものもある(アプリ化しても正しく動かない)のでご了承ください。

Microsoft App Studio

紹介するのは Microsoft App Studio というサービスです。昔開発者向けに Bridge for Web という名前で公開された技術をサービス化したものです。

https://appstudio.windows.com/ja-jp

appstudio.PNG

開発してみる

今回は勝手に有名なレシピサイト CookPad  さんをアプリ化してみます。単に私の趣味がお菓子作りだからです。

早速右上の【今すぐ開始】をクリック!

appstudio2.PNG

いろいろなテンプレートが用意されており、RSSを集めて表示するタイプや、Fliker など自分のアイテムを表示するものなどがあります。Wordpress でBlogを持っている人は自分のBlogをアプリ化することもできます。とりあえず一番上の Hosted Web App はwebサイトをそのままアプリ化するものですので今回はこれを使います。

次の画面でまずはアプリ名を入れます。そして【Start now!】で次に進みます。

appstudio3.PNG

それからいよいよアプリの設定す。左上のBase Url にアプリのURLを入れます。もし縦横を指定したい場合は縦ならPortrait、よこならLandscapeにしておきます。

appstudio4.PNG

Webサイトによってはこの時点で右側のプレビューで見ることが出来る場合があります。ただここでプレビューが出来なくても最終的にアプリとして使える場合もあるのであきらめずに進めましょう。appstudio5.PNG

画面の下では細かい設定を追加できます。例えばカメラやスマフォのローカル機能を使う場合はチェックボックスを追加しておきます。また、例えば認証の際に全く違うURLに飛ぶ場合、アプリから外れてブラウザが開いてしまいますが、Uri Rules に認証先のURLを追加しておけば、すべてアプリ内で処理することもできます。この辺りは実際に動かしてみてから調整するといいでしょう。

では画面上のツールバーの【Save】を押してFinishします。

appstudio6.PNG

次の画面ではプレビューを見ることが出来ますが、これは前の画面と同じような状況なのでツールバーの【Geterate】を押してとっとと進めます。

実際にストアにちゃんと公開する場合は、前の画面でタイルの設定や各種公開用の設定をするのですが今回は自分だけで試してみるので、この画面でも Installaable Package だけONにして【Generate】 ボタンで進めます。

appstudio7.PNG

実際に実機で試す

実機で試すためには、まず画面上の 【Get QR code】 でアプリのリンク先のQR codeを表示します。

appstudio9.PNG

続けて実機側では、あらかじめ Windows App Studio Installer をインストールしておきます。インストールが完了したら、起動してメニューからQR Reader を起動して表示されているQR code を読み込ませましょう。アプリが表示されたら【Install】です。

appstudio8.PNG

そして【Open】実行すれば後は動作確認だけです。

ようこそ、アプリ開発の世界へ

そしてアプリが無事起動しました。自分の所有しているWebサイトであれば、ちゃんとアイコンやアプリ情報を整備して Windows Store に公開するのもいいでしょう。自分でアプリを作るという作業は楽しいです。いつか皆さんもアプリ開発の世界で楽しんでくれると嬉しいですね。

wp_ss_20161225_0002.png

 

 

広告