部屋の中の水分量U - アプリリリース2015年08月12日 12:42


部屋の中の水分量U

「部屋の中の水分量U」の名称で、ユニバーサルWindowsアプリをリリース。上図はWindows10のストアの掲載の様子。Windows8.1用ストアアプリのユニバーサルアプリへの移植版。PCと電話で利用できるので、スクリーンショットは電話のものを選択。まだ、電話の実機はないけど。

開発時間は、30時間弱。移植の割に時間を要したのは、ユニバーサルアプリの要領をつかむのに苦労したため。最初、基本のUIをHubで作り始め、途中でPivotに切り替えるくだりで10時間ほどの寄り道。他、色々は「UWPアプリ開発、所感」のとおり。次回からは半分以下で済みそう。

移植のポイントを挙げると、

1)VisualStateManagerの仕様変更への対応。
VisualState.Triggersはまずまず便利。WidthやHeightがこの値を越えたら、画面構成を変える、という設定なので、最小サイズから順に組み立てる。この値を下回ったら、というトリガはないので。

2)チャームで呼び出していた機能をAppBarButtonからの呼び出しに変更。
ここは、決められたやり方はなく、各人で工夫。MS側によるWindows8.1用ストアアプリの変換では、(通称)ハンバーガーメニューに置き換え。

3)ロゴとスプラッシュ画像の種類が変わったのに対応。
数が増えたのと、サイズが微妙に変わった。

4)Mobile版のエミュレータの設定と、それを用いてのテストの実施。
VMware上のWindows10で動作に苦労したのは、既出の通り。バリエーションが増えるので、その分、単純にテスト時間は増える。

DELL Venue8 ProにWindows102015年08月13日 14:32

そうこうするうちに、手元のDELL Venue8 ProにWindows10へのアップグレード可能の通知が。テスト環境でもあるので、さっそく実施。事前バックアップは取っておきました。

DELL Venue8 Pro Windows 10 upgrade

「Windows10の更新を構成しています」の画面が100%に到達すると、上図のアップグレード画面に。時間はかかるが、無事にアップグレード終了。DELLのサイトに情報がなく、心配もあったが、まずは問題なさそう。

Tabletモード縦

最初は縦画面。初期状態で画面ロックがかかっており、外さないと横にならない。何度もタブレットを空中で回す羽目に。タブレットモードは、初期状態でオフ。オンにすると、上図のような画面。タイルは余裕を持った配置。画面下にタスクバーがあり、デスクトップ画面と融合したイメージ。

Tabletモード横

横置きにすると、タイルの配置が変わる。

8.1でインストールしていたストアアプリは、ほとんど移行しており、困らない。プリインストールのOffice2013も動く。ただし、タブレットモードで起動すると、全画面モードになる。8.1の時のようにデスクトップになって開くわけではない。エクスプローラの挙動も同じ。複数画面を開いて作業するには、タブレットモードをオフに。

Humburgerメニュー

チャームがなくなった代わりに、画面左上にハンバーガーメニュー。開くと、アプリ選択。左下には、電源メニュー。8.1では、チャームなどの操作を知らないと途方に暮れることがあったが、そこは改良された感じ。ハンバーガーメニュー自体は、開くまで何が入っているかわからず、あまり評判はよろしくないようだけど。

UWP:PCと電話でDatagramSocketの挙動が異なる2015年08月14日 13:25

ユニバーサルWindowsアプリ、Mobileエミュレータでテストを始めると、Datagram SocketのConnectAsyncの2回目からエラーが出る。

a blocking operation in progress

ブロッキング操作が実行中?

a blocking operation in progress

Windows Socketのエラー一覧を見ると、WSAEINPROGRESSのエラー。エラー対処では、時間をおいて再試行、とあるが、ずいぶん待っても解消しない。PCでのテスト実行では問題なかったところ。

※Windows Socketのエラー一覧:10036番

試行錯誤してみたところ、Mobileでは、Datagram Socketの使い回しを止めて、毎回、再作成するようにすると回避できる。

AnalyticsInfo

ほめられたコーディングではないが、Windows.System.ProfileのAnalyticsInfoから、デバイスの識別情報を取って、条件分岐。

PC:コンストラクタでDatagram Socketを用意して、使い回し
Mobile:コンストラクタではDatagram Socketを用意せず、時刻更新ボタン押下の度、都度作成

UWPとはいっても、若干の挙動の違いは残る様子。これからもいろいろ悩まされそう。

UWP:Mobile画面のepx(有効ピクセル数)2015年08月14日 14:26

UWPでは、レスポンシブデザインということで、様々な大きさの画面を考慮して設計せよ、とあるが、一筋縄ではいかない。

※レスポンシブデザインについて
https://msdn.microsoft.com/ja-jp/library/windows/apps/dn958435.aspx

VisualStudio 2015のMobileエミュレータは、5種。画面の大きさでいうと、WVGA、WXGA、720p、1080pの4種。4~6インチの画面をサポート。それぞれで縦と横、動作確認を行うが、なかなか思い通りにならない。2つのListViewの縦横の並び、広い用と狭い用のTemplateの選択、など。

Page_SizeChangedイベントハンドラ

しびれを切らして、PageのSizeChangedイベントで、縦横の有効ピクセル数をデバッグ出力させてみる。整数値でないものもある。(小数点2位四捨五入)

WVGA:533.3 x 320
WXGA:568.9 x 341.3
720p:640 x 360
1080p:768 x 432
デスクトップの最小:500 x 320

エミュレータの見た目は変わらないが、結構幅がある。Mobileは1種類と考えてはいけない。

VisualStateのStateTriggersの例

ListViewの大きさとこれら有効ピクセル数を考慮し、VisualStateを必要なだけ、StateTriggersで画面の縦横のサイズごとに切り替わるように設定。上図は、WVGAの縦と横の設定例。TargetのPropertyのうち、Grid.Rowなどは、()で囲んで指定する。上段のGridは2行1列、下段は1行2列。

Network Time U - アプリリリース2015年08月18日 06:54


Network Time U

「Network Time U」の名称で、ユニバーサルWindowsアプリをリリース。これも、Windows8.1用ストアアプリのユニバーサルアプリへの移植版。もともとは、Winodws Phoneで時刻の設定が狂っているために、アプリのインストールができなくて悩んだことから発想したアプリなので、Windows10のMobileが出れば、ようやく念願叶う。まあ、すでに時刻同期機能はついているのかも。

開発時間は、20時間ほど。時間を要したのは、Datagram Socketの挙動の違いの追求と対処、Mobileの各機種の縦横の有効ピクセル数に合わせたVisualStateを用意するところ。そのほかは、移植2回目なので、あっさり。

漢字フォントをイメージファイル(png)に埋め込む2015年08月26日 20:01

漢字の神経衰弱パズルを作ろうと思い立つ。WinRT XAML ToolkitのImageToggleButtonを用い、ボタンを押すと、カードの裏の漢字を表示する。必要になるのが、漢字フォントを埋め込んだイメージファイル(png)。1000文字以上あるので、事前に用意せず、都度、作りたい。

ところが、ストアアプリ(UWP)では、Font class、Graphics class、Bitmap class などは使えない。GDIでの手法は使えない。見栄えの問題はあるが、RenderTargetBitmapを使うことにする。元来、画面に表示するイメージのサムネールを作る用途などで使われる。

Fontを埋め込んだpngファイル

上段のGridにTextBlockを置き、文字を入れ替えながら、表示をイメージファイルに落とし込む。下段のGridにはImageToggleButtonを並べる。作成したイメージファイルは、ImageToggleButtonのImageSourceに登録する。

Fontをpngファイルに埋め込む - XAML

該当するXAMLの定義部分。内側のGridがイメージの取り込み元。その中のTextBlockを切り替える。

Font

コード例。RenderTargetBitmapのRenderAsyncでイメージを生成。Gridのサイズとは異なってよい。多様な画面に対応するため、大きめで用意。GetPixelsAsyncで生成したデータを取り込む。byte列に変更してから、BitmapEncoderでファイルに出力。

一時フォルダ

出力先は、一時フォルダ。

それなりに手間はかかるが、なんとかできるもの。

SJISのCSVファイルの読み込み2015年08月26日 20:51

アプリで使う漢字データを、Excel2010で作成し、CSVで保存。そのまま取り込むと文字化け。Cygwinを起動し、"od -t x1"で覗くと、SJIS。Unicodeにしなくては。あらかじめファイルを変換してしまう方が楽だが、ストアアプリ(UWP)での変換も習得しておいたほうがいい。

SJISのCSVファイルを読み込んでUTF-8にする

そのままでは、SJISは使えない。最初の2行のおまじないが要る。

CSVファイルに対してFileStreamを用意し、StreamReaderで読み込む。最初、Encoding(sjis)を指定しなくて失敗。読み込んでから壊れたデータをいくらコード変換しようとしてもだめ。

読み込んだStringをGetBytesでbyte列に変換の上、Encoding.ConvertでUTF-8にコード変換。ここから逆戻り。byte列をchar配列に変換の上、Stringに戻す。ここまで来てはじめて、Splitでカンマ区切りの文字列を分解。

変換ばかりで手間がかかるが、まあ、できる。

ImageToggleButtonへのImageSource登録2015年08月26日 21:50

WinRT XAML ToolkitのImageToggleButtonでは、Buttonの8つの状態別にイメージファイルを登録し、状態ごとに様々な外観を提供できる。

ImageToggleButtonのXAML定義

Gridで作った盤上にImageToggleButtonを並べるXAML定義。見えている部分では、通常の状態を示すNormalStateImageSourceにイメージファイル(png)を設定している。この設定はダミーで、プログラムで必要なイメージに付け替える。

ImageToggleButtonへのImageSource登録

付け替えるイメージファイルは、一時フォルダに置く。ファイルは、"ms-appdata:///temp/"でアクセスできるとある。

最初は、BitmapImageのUriSourceにこのパスを登録し、ImageToggleButtonの各ImageSourceに設定すれば済むと考えたが、例外になる。ネットワークアクセスのための機能の指定も足りないと言われる。パスが"http:"や"ftp:"でなく不正だ、と言ってくる。これが通る場所もあるのだが。

こうなると手間はかかるが正攻法。イメージファイルをStreamとしてオープンし、RandomAccessStreamに変換の上、BitmapImage.SetSourceAsyncで登録。ここでは、ボタンが押された状態に対応するPressedStateImageSourceが登録先。対象のImageToggleButtonは、親のGridからFindNameで検索。