気ままなタンス*プログラミングなどのノートブック

プログラミングやRPGツクール、DTM、VOCALOIDについてのんびり書きます。

【WinJS】Windowsストアアプリのチュートリアルで記述したメモ

学習のきっかけ

先日より、Windowsストアアプリ開発のチュートリアルをやっている。

開発に興味を持ったきっかけとしては、Windows10へのアップグレードだ。

Windows8.1まではストアアプリがフルスクリーンで起動されていたが、Windows10では個別のウィンドウで起動される。(もちろんフルスクリーンにもできる)

アプリとしての使い勝手が良くなったことから、自分でも何かしらのツールを作ってみたくなった。

開発言語

以下5つの方法で開発が可能らしい

Create your first app - Windows app development

個人的に、JavaScriptに興味があるので、今回はJavaScriptでの開発チュートリアルに取り組むことにした。 というか、JavaScriptでストアアプリが作れることに驚いた。

取り組んだチュートリアル

パート1~パート5

JavaScript を使った初めての Windows ストア アプリの作成 - Windows app development

チュートリアルで記述したメモ

パート1:

パート 1: "Hello, world" アプリを作成する (HTML) - Windows app development

  • WinJSコントロールのイベントハンドラ
    • WinJSコントロールのイベントハンドラを登録する方法は、標準のHTMLコントロール登録とは少し異なる
    • Promiseオブジェクトを使って、WinJS.UI.processAllが完了したときに通知を受け取るようにする
    • WinJS.UI.processAllメソッドは非同期メソッドである。
    • WinJSコントロールは必ずこれが終わった後でないとイベントハンドラ―を追加できない。
    • そのため、thenを使って、それが終わったタイミングを検知する必要がある
    • args.setPromise(WinJS.UI.processAll().then(function completed(){ }));

パート2:

パート 2: アプリのライフサイクルと状態を管理する (HTML) - Windows app development

  • 中断時のデータ保存
    • Windows.Storage.ApplicationDataオブジェクトのroamingSettingsプロパティは、ApplicationDataContainerを返す
    • ユーザーセッションに関する一時的なデータは、WinJS.Application.sessionStateオブジェクトを使う
    • セッションデータもアプリデータも、変更されたときに少しずつ保存することを推奨する

パート3:

パート 3: PageControl オブジェクトとナビゲーション (HTML) - Windows app development

  • ナビゲーションアプリにおける復元

    • アプリの復元について、PageControlは直前の実行状態を確認する方法は組み込まれていない
    • アプリの直前の状態をWinJS.Application.sessionStateオブジェクトに保存して、PageControlがこの情報にアクセスできるようにすることで実現可能
    • データを復帰するコードもreadyの中
  • PageControlでのprocessAllの扱いについて

    • IPageControlMembersインタフェースメンバーの1つであるready関数を定義
    • WinJS.UI.processAllの呼び出しはコードに含まれない・・・PageControlが自動的に呼び出すため
    • ready関数が呼び出されるまでに、WinJS.UI.processAllが呼び出されている

パート4:

パート 4: レイアウトと方向 (HTML) - Windows app development

  • display:-ms-grid; -ms-grid-columns: auto 100px 1fr 2fr
    • 1fr, 2fr・・・残りの領域を補助単位で分割したn個分の領域
    • width:800px、子の要素が5つの場合
    ----------------------------------------
       ①    ②      ③         ④
    * 100px|100px|200px(1/3)|400px(2/3)|
       ⑤
    * 100px|
    ----------------------------------------
    ・③の時点で、残りの要素は3つ
      1frが指定されているので、残り600px * 1/3が適用
    ・④の時点で、残りの要素は2つ
      2frが指定されているので、残り600px * 2/3が適用
    
    

パート5:

パート 5: ファイル アクセスとファイル ピッカー (HTML) - Windows app development

  • Windows.Storage.Pickers.FileOpenPicker
    • loadImageメソッドは、pickSingleFileAsyncにより、返されたPromiseオブジェクトが正常に終了した場合に呼び出される
    • ユーザーが開いているファイルピッカーで、キャンセルをクリックした場合でも、ピッカーは正常に終了したPromiseオブジェクトを返す
      • その際のパラメータはnullを渡す
    • 画像自体を取得するには、URL.createObjectURLメソッドを使って、Blobオブジェクトを作成する
    • メモリリークを防ぐために、trueを設定したoneTimeOnlyという名前のプロパティも指定してあげる
  • データバインディング
    • データバインディングを作成するには、ターゲットのHTML属性にdata-win-bind属性を追加する
    • 設定するターゲットプロパティの名前とデータを提供するプロパティの名前を値として受け取る
    • データバインディングを開始するにはWinJS.Binding.processAllを呼び出し、ターゲット要素またはターゲット要素の親と、ソースオブジェクトを渡す