サイトアイコン Embarcadero RAD Studio, Delphi, & C++Builder Blogs

Delphi / C++Builder で Windows 10 ストアプリ制作！ [JAPAN]

Embarcadero Archives

Author: Toby

 このデスクトップブリッジは、OS側においてはWindows 10 Anniversary Updateにて提供されている機能でありますので、デスクトップブリッジでWindowsストアアプリとしてビルドしたアプリは、Windows 10 Anniversary Update 以降のOS上で動かすことができます。お試しになる場合には、OSのアップデートをお忘れなく行っておいてください。

では早速、ストアアプリを作って、使ってみることにします。

今回は、ストアアプリをローカル（自分のパソコン）上で使うための手順を試してみます。（※ストアアプリの作成機能はは無料のStarter Editionには付属しておりません。Starterユーザーの皆さまあしからずご了承ください。）

 

■まずは簡単なアプリの準備から

  1. RAD Studioを起動
  2. [ファイル] – [新規作成] – [VCLフォームアプリケーション] を選択します。
    ※「マルチデバイスアプリケーションの新規作成」を選択してFireMonkeyを使ってもストアアプリの作成は可能ですが、今回はVCLを使ってみます。
  3. いつものVCLフォームが出現します。
    どんなアプリを作ってもいいのですが、今回はカレンダーを表示する至極簡単なアプリを作ります。
  4. VCL上に TCalenderView をドラッグアンドドロップします。
    CalendarView1としてフォーム上に配置されます。
  5. CalendarView1のプロパティAlignを「alClient」に設定します。

これでカレンダー表示アプリの準備は完了！かんたんですね(笑)

 

■次に、Windowsストアプリのビルド手順にはいります。

  1. プロジェクトマネージャの[ターゲットプラットフォーム] – [32ビット Windows] (※64ビット Windows でも可) – [構成] とクリックして表示される [アプリケーションストア]をダブルクリックして選択（アクティブ）状態にします。
  2. 同じくプロジェクトマネージャのビルド構成をDebugかReleaseか、開発状況に合わせて設定しておきます。
    ここではデフォルトのDebugのままにしておきます。

これでビルドされるアプリがストアアプリとして設定されました。他にも設定しておいたほうがよいアイテムなどもあるのですが、もっとも簡単な手順で作るためにその設定は後回しにしておきます。なぜなら、その設定が足りなければ、RAD Studioが「これ設定して！」と聞いてきてくれるので、今やっておかなくても良いわけです。親切です。

 

■ビルドの開始

それでは、早速ビルドします。

  1. ウインドウ上部の三角マークのビルドボタンをクリックするか、[Shift]+[Ctrl]+[F9]キーを押してビルドを開始します。

…コンパイル状況を示すダイアログが表示され、次にプロビジョニング情報を読み取っていることが表示されます。

ここでプロジェクトのオプションダイアログが表示されます。プロビジョニング情報がストアアプリ向けに設定し終えていないと、このプロジェクトのオプションダイアログが表示されます。ただ、プロビジョニングをどのように設定するかまでは教えてくれません。中途半端な優しさです。

■プロビジョニング情報の設定

  1. プロジェクトのオプションダイアログの左側に表示されている[プロビジョニング]をクリックします。
  2. プロビジョニング設定には Adhoc と Storeの二つの設定をラジオボタンで選択するようになっています。ここはAd hocを選択しておきます。
    ※ローカル（自分のPC）で動作するストアアプリを作る際にはAd hocを選びます。
  3. Create self-signed Certificate…ボタンをクリックします。
  4. 「証明書の新規作成」ダイアログが開くので、「ファイル」項目の横の[…」ボタンをクリックします。
  5. 「新規の証明書」ダイアログが開きます。これから新規の証明書が作られるので、その証明書の保存場所と証明書のファイル名を指定します。
    ということで、このダイアログでお好きなフォルダを指定し、証明書としてお好きなファイル名を決めて記載します。今回はデスクトップ上に「オレオレ証明書」として保存することとしました。
  6. サブジェクトの欄は、デフォルトのままでよいでしょう。
  7. パスワードには今回作成する証明書のパスワードを設定します。
    後ほど、必要になりますので、覚えておいてください。
  8. 「証明書の新規作成」の[終了]ボタンをクリックします。
  9. 「新しい証明書が正常に作成されました」とダイアログが表示されるはずですので、[OK]ボタンをクリックします。
    ※指定した場所に.pfx 拡張子をもつ証明書ファイルが作成されます。
  10. プロビジョニング情報の Certificate Infoの欄に証明書情報が表示されるのを確認できます。そうしたら、プロジェクトオプションの[OK]ボタンをクリックします。

ここまで手順を終えると、さらにビルドが進行します。問題なくビルドが終わると、ビルドされたappxファイル（ストアアプリファイル)がどこにあるかお知らせするダイアログが開きます。

このアプリのある場所、結構深いところになりますので、記載されているパスを追ってAPPXファイルを見つけてください。先ほどのダイアログで、場所がわかるものの、当該フォルダを開いてくれたりはしません。優しくないです。

 

また、上記の手順の「3.]以降で行っている証明書の作成について補足しておきます。ストアアプリはアプリ内に「署名」を行っていなければならない決まりになっています。その「署名」をするために証明書が必要となります。この証明書の作成を手助けしてくれる機能がついているのです。気が利いてます。

 

■ストアアプリをインストールする

出来上がったストアアプリをインストールします。ストアアプリをインストールするためには、そのアプリの持っている署名が正しいものだと証明されていないとインストールできません。そこで先ほど「プロビジョニング情報の設定」で作った証明書が必要となります。

まずは、証明書のインストールから…

  1. 先ほど作った証明書ファイル(.pfx 拡張子）（本記事の手順ではデスクトップ上に作っておいた「オレオレ証明書.pfx」）を右クリックして表示されるコンテキストメニューから「PFXのインストール」を選択します。
  2. 証明書のインポートウイザードが表示されます。
  3. 保存場所にローカルコンピューターを選び「次へ」をクリックします。
  4. ユーザーアカウントコントロールのダイアログが表示されるので「はい」をクリックします
  5. インポートするファイルを指定するよう表示されますが、先ほどの証明書のファイル名がすでに表示されているはずですので、そのまま[次へ]をクリックします。
  6. パスワードを求められます。先ほどの「プロビジョニング情報の設定」の手順７で設定したパスワードを入力して、「次へ」をクリックします
  7. 証明書ストアをどこに保管するかを聞いいる部分で、「証明書をすべて次のストアに配置する」のラジをボタンを選択し「参照」ボタンをクリックします。
  8. 証明書ストアの選択ダイアログが表示されるので「信頼されたルート証明機関」を選択し[OK]をクリックします。
  9. 「証明書ストア：」欄に「信頼されたルート証明機関」が表示されたことを確認し、「次へ」をクリックします。
  10. 「証明書インポートウイザードの完了」と表示されます。 このまま「完了」ボタンをクリックしてウイザードを閉じてください。
  11. 「正しくインポートされました」と小さくダイアログが表示されますので、[OK]ボタンをっクリックして閉じます。

これで証明書がインストールされ、先ほど作ったストアアプリに入っている署名が、このパソコン（OS)に信頼されたってわけです。

次に、ストアアプリのインストールをおこないましょう。

出来上がったappxファイル、今回の手順であれば、おそらくproject1.appxというファイルネームで

C:\Users\[ユーザー名]\Documents\Embarcadero\Studio\Projects\Win32\Debug\Project1\bin フォルダの中に入っているはずです。

  1. このappxファイルを右クリックして表示されるコンテキストメニューから[プログラムから開く」 – [アプリインストーラー] を選択します。
    ※このアプリインストーラーはWindows 10 Anniversary Update にアップデートしていないと出てこないはずであります。OSのアップデートをお忘れなきよう…
  2. アプリをインストールするか問い合わせるダイアログが開くので[インストール]をクリックします。
  3. インストールが終わると「起動」のボタンが表示されますので、[起動]をクリックします。
  4. ストアアプリが起動されました！

このアプリはWindowsのスタートメニューから[すべてのアプリ]にても起動できます。

以上でストアアプリ UWP向けアプリの開発・はじめの一歩となります。

開発環境から直接にUWP ストアアプリをビルドできるのは大変に便利であります。

ところで、今回、作成したストアアプリとして表示されるアイコン・タイルはデフォルトのエンバカデロ用意のDXマークのままです。 これを変えたい場合は[プロジェクト] – [オプション] で表示されるオプション内の「アプリケーション」の項目で変更できます。見た目のイメージも大事でありますのでご参考まで。

余談ですが、ストアアプリを、「ストアで公開してダウンロードしてインストール」するというプロセスを経ずに、自分のPCに直接インストールすることを「サイドローディング」と言うそうです。

ということで、今回は、サイドローディング用のWindowsストアアプリの制作とインストールを試してみました。

 

この UWP Windows ストアアプリを含む10.1 Berlin Update 2については、第33回 エンバカデロ デベロッパーキャンプでも紹介する予定です。

デベロッパーキャンプ会場において実際にご覧ください。 デベロッパーキャンプについての詳細はこちらから。

http://forms.embarcadero.com/developer-camp-overview

 

※2016/12/26追記：当記事ではストアアプリを作成ししてローカルPCにインストールする方法をご紹介しています。Windowsストアに申請、アップロードするための手順については、こちらの記事をご参照ください。

 

https://community.embarcadero.com/blogs/entry/desktop-bridge-app-windows-store

 

[DownloadButton Product=’RAD’ Caption=’無料のトライアル版でアプリ制作をお試しいただけます’]

 

モバイルバージョンを終了