書くことないです。

ayamadoriが独り言を呟く日記。

UWPアプリのタイルアイコンを作るのは苦行。(Visual Studio 拡張機能編)

Programming Windows

(2017/3/14)
Visual Studio 2017でアイコンをまとめて作成する機能が入った。
https://www.visualstudio.com/ja-jp/news/releasenotes/vs2017-relnotes#uwptools

前回の続き。せっかく拡張機能が使えるVisual Studio Communityを使ってるので、探してみたら2つ見つかった。

UWP Tile Generator

https://visualstudiogallery.msdn.microsoft.com/09611e90-f3e8-44b7-9c83-18dba8275bb2visualstudiogallery.msdn.microsoft.com
MSの中の人が作ってるっぽい。公式ブログでも紹介されてる。
ソースファイルを右クリックするだけでappxmanifestまで設定してくれてすごく楽。
今までは一部のファイルがガイドライン通りに生成できない不具合があったけど、最新バージョンで解決した模様。
Syncfusion Metro Studioで生成したSVGをソースファイルにすると図形が崩れる気がする。PNGなら大丈夫なのであまり気にならない。

UWP Visual Assets Generator

https://visualstudiogallery.msdn.microsoft.com/b3c94468-96bc-4860-8860-4458ab3bc467visualstudiogallery.msdn.microsoft.com
UWP Tile Generatorの不具合が直るまではこちらを使ってた。
基本的な機能はUWP Tile Generatorとほぼ同じだけど、別途ウインドウを出す必要があって少し手間がかかる。
その代わり生成するファイルを選択できたり、あえてガイドラインを外れたアイコンサイズにできたりと、設定の柔軟性が高め。
生成するファイルの数が多い（基本解像度以外のファイルも生成する）ためか、全てのファイルを出力するのにやや時間がかかる。

UWPアプリのタイルアイコンを作るのは苦行。

Windows Programming

公式ガイドラインを見てみる

基本的には、以下のサイトにすべて書いてある、と思う。

Tile and icon assets

それに加えて、拡張子の関連付けをしたい場合にはこちらも対応しなければいけない*1。

Handle file activation

さまざまなフォームファクタに対応するためか、必要な画像ファイルの種類がとても多い。
さらにネックになるのが、
『画像サイズだけでなく、画像に占めるアイコンの割合がアイコンの種類によって異なる』
という点。画像の高さ基準で100%/75%/66%/50%/33%の割合にアイコンサイズを調整しなければならない*2。画像サイズだけなら単純な拡大/縮小で対応できるのだけど、アイコンサイズを考え始めるとトリミングする必要もあって、作成に非常に手間がかかる。

拡張子の関連付け用のアイコンについては

Match the look of the app tile logo and use your app's background color rather than making the icon transparent. Have the logo extend to the edge without padding it. Test your icons on white backgrounds.

とあるけど、正直言ってることがよく分からない。エクスプローラで確認する限り、アイコンの背景は透過でも問題ない*3し、パディング無し（すなわちアイコン割合100%）だと、他のアイコンと比較して大きくなりすぎる。
というわけで結論として自分は『背景白色、前景ダークグレー、アイコン割合75%』とした。これが正解かはわからない。

タイルアイコンを作る

上記したようにサイズとアイコン割合の異なる非常に多くの種類の画像を用意する必要があるので、そういうのが自動で行えそうなソフトを探した。
その結果、もともとアイコン作成が面倒でSyncfusion Metro Studioを使っていたということもあり、Xamarin Logo Makerを使うことにした。
www.microsoft.com
もともとはXamarin用にiOSやAndroidをも含めたアイコン画像を自動生成するソフトのようだけど、Metro StudioからエクスポートしたXamlファイルをそのまま読み込めるので、UWP用だけで使ってもとても便利。
ただし使用にあたっていくつか注意点というか、自分がつまづいたところがあるので覚書。

  • ディスプレイスケーリング100%の環境で使用すること。
    • アプリ上でプレビューされているアイコン画像をそのまま出力するようで、ディスプレイスケーリングが100%でないとそれに合わせてアイコン画像の出力サイズが変わってしまう。
  • 設定可能なアイコン割合は3種類。
    • 上記したように、ガイドライン上では100%/75%/66%/50%/33%の5種類のアイコン割合が必要だが、このアプリでは3種類しか設定できないので、一部のアイコンはガイドラインに適合しない。僕の場合は基本的に100%/75%/33%で設定している。別途調整・出力しなおせばもちろんガイドラインに厳密に一致させることは可能だがめんどくさい。

詳細は上記リンクを参照するとして、とりあえずこの設定で小タイルが75%になる（正しくは50%）以外はガイドラインに適合するはず。
f:id:ayamadori:20160216001942p:plain

チラシの裏

ホント、もうちょっと何とかならなかったんですかね。。。表示されるアイコン割合の種類自体を減らすか、自動トリミング使うとかしてもう少し種類を減らしてほしい。まあ今更変わってもそれはそれで面倒なことになりそうだけど。。。

Visual Studio 拡張機能編(完結編)を追記。
ayamadori.hatenablog.com

*1:しなくても一応動作はする

*2:100%と66%はどちらもターゲットベースのアセットに必要で、いずれか一方があれば良いのかもしれない

*3:もちろん背景透過+前景1色だとアプリ側の背景によってはアイコンが見えなくなることがあるので、最低2色使用するなどの調整は必要

Nokia Asha 230のXpress BrowserをOpera Miniに更新した@カンボジア

Diary Trip Mobile Phone

http://www.opera.com/blogs/mobile/2015/02/how-to-upgrade-from-xpress-opera-mini/www.opera.com

by December 2015, all browsers will be updated to Opera Mini.

とあり、12月までに通知は来なかったし更新もできなかったので不安だったのだけど、1月に入ってからでも無事にできた。
更新方法は適当にいじっていたので曖昧なのだけど、端末内のXpress Browser上でどこかのURLにアクセスしようとするか、他のブラウザで http://m.opera.com/nokia にアクセスすればOpera Miniがダウンロードされてくるはず。
なお上記リンク中には言及がないけど、Asha 230に適用されたのはVersion 8.0.40377だった。

このOpera Mini、Opera Mobile Storeでダウンロードできるものと違って、ちゃんとAsha Platform向けにカスタマイズ*1されていて、僕が今までOpera Miniに対して持っていた不満がかなり解消されている。
具体的には以下。

  • 文字のインライン入力（ストア版Opera Miniもアプリ内蔵キーボードでは可能だった）
  • ハードウェアバックボタン対応
  • FastLane対応
  • [Share]メニュー対応（ストア版Opera MiniではTwitterとFacebookにしか共有できないけど、システムの共有に対応することでメールやメッセージング、自作の翻訳アプリなどにも共有できる）
  • ローカルに置いたhtmlファイルの表示
  • ブックマークはXpress Browserから引き継ぎ（そのかわりサービス終了したOpera Linkも、新しい同期サービスにも非対応。新しい同期サービスは、 https://sync.opera.com/web/ にアクセスすれば項目編集以外の作業は可能）
  • ホームスクリーンへのウェブサイトのショートカット作成（ただしこれについては作成できても実際に開こうとするとファイルブラウザが起動してしまう。バグ？）
  • プラットフォーム側へのOAuth認証対応

ちゃんとデフォルトブラウザとしての機能は押さえてる。まあどれもXpress Browserでは普通にできてたことだし、複数タブを開けない*2ところまで真似しなくても良いのにな。。。とは思う。

おかげで、写真のTwitterへのインスタントアップロードもできたし、


自作の日本語入力アプリを使って日本語ツイートもできた。

とりあえず、Asha PlatformもOpera Miniもサポートは一応まだ終わってない*3ので、これで引き続き使い続けられそう。とても気に入っているので嬉しい。

チラシの裏

ツイートのクライアント名が"Nokia"から"Microsoft Connect"に変わってる。当然と言えば当然だけど寂しい。

公式Twitterアプリはなぜかログインできなかった。サポートはまだ続いているはずだし、フィンランドではログインできたので、回線側の問題か？


本屋にカンボジア版六法全書のようなものが売っていたけど、それを買ってまで調べるモチベーションはなかった。

*1:システムインテグレートと言うべきか

*2:Asha Platform端末のうちAsha 230のみ、リソースの問題なのかこういう仕様になっている

*3:Opera Miniは次いつアップデートするんだ。。。って感じの放置っぷりだけどｗ

UWPアプリを作ってみた。

Windows Programming

手元のPCはもうWindows 10になったし、MADOSMAももうすぐなりそうなので、練習を兼ねてとりあえず今わかってる困り事を何とかしようとした。
まずはハンズオンの資料を使って練習。

最初に作ったのは、ブラウザで開いたGoogle Mapsなどの地図サイトと同じ場所を、Windows 10標準マップアプリで開きなおすアプリ。
www.microsoft.com
Get it on Windows 10
ブラウザでレストランやホテルを探すとだいたいGoogle Mapsで表示されているので、それをマップアプリで開けばお気に入りに登録したりルート案内できるなーと。海外であればさらにオフラインマップが使えるというメリットもある。
ルート案内については、ウェブで検索した結果をそのまま開きなおすのが難しそうだったので、スタートとゴールだけをコピーしてる。Googleとbingの検索結果の違いがわかってちょっと楽しい。
一応bing Maps(web)とYahoo! Maps（日本）にも対応してみたけど、まあ微妙ですな。
とりあえず、UIがほぼ不要だったのであっという間にできたし*1、『アプリを作ってストアに通す』という一番基本的なところだけを体験できたのは良かったかな。

お次はOutlook Expressなどで使われる、EMLファイルを開くだけのアプリ。
www.microsoft.com
Get it on Windows 10
301Zからサーバメール転送をすると、本文がEMLファイルとして添付されて送られてくるので、それを開けるようにするのが目的。Windows 10標準のメールアプリでは開けないのだけど、PCならWindows 8.1向けのアプリが使えるし、Windows Phone 8.1の標準メールアプリではそのまま開けるので、今は特に困ってない。ただ近い将来にMADOSMAがWindows 10 Mobileになると困るなと。
一番肝心なEML（MIME形式）のパースは外部ライブラリにお任せなので特にやることがなかった。UIとかファイルハンドラのいい勉強になったかな。ドラッグ&ドロップなんかはUWPで初対応のはずだし。


Windows 10 Mobileはまだ実機を使ったことないからね。

*1:実働2日くらい？

Microsoft Edge の同期設定が有効にできなかった。(解決)

Diary Gadget Windows

Windows 10 のメジャーアップデートがついにやって来た。
blogs.windows.com
ということで、うちのPCもアップデートした。


ここで1つ不具合が出たので覚書。

不具合

  • Edgeの同期設定がグレーアウトして無効から有効に変更できない
  • [設定]にて行うOSの同期設定はすべて有効にしてある
  • Edge上に『同期するには、[設定]でWindowsの同期を有効にします。』という文言と[設定]へのリンクが表示される(しかしリンク先に飛んでも上記の通りすべて有効になっている)

Edgeの設定同期は今回のアップデートの目玉の一つで、個人的にも期待していた機能なので使えないのは痛い。

対策

http://answers.microsoft.com/en-us/insider/forum/insider_internet-insider_spartan/favorites-not-syncing-build-10565/359f9428-e485-4b4d-b127-292f18423a34

1. Edgeを終了する
2. レジストリエディタで以下のキーを削除する

HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\SettingSync\SyncPolicy

3. Edgeを起動し、同期設定を有効にする

もしかしたらアップデートをメディア作成ツール経由で行ったのが原因かもしれないけど、不具合が発生したのはWindows 8からアップデートしたPCで、Windows 7からアップデートしたPCでは再現しなかったのでよく分からない。

超簡易Ustreamアプリを作った。

Programming Windows Phone Mobile Phone


Ustreamのライブ動画を再生するだけのアプリ。
去年だかおととしだかにテスト的に作ったんだけど、MADOSMA使ってたら出したくなった。
やってることはUstream*1公式の自動トランスコードシステム

Ustream Asia Inc.｜お知らせ
HTMLでiPad用のUstreamViewerを作ってみた- hoelog

を使用してHttp Live Streaming(HLS)に変換されたライブ動画を、
Windows Phone Streaming Mediaphonesm.codeplex.com
を利用して再生しているだけ。

トランスコードを利用している関係でライブ動画しか再生できない。
それだけじゃなーってことでWebBrowserコントロールにウェブ版のソーシャルストリーム画面をそのまま貼り付けて、とりあえずコメントがリアルタイムで見られるようにはなっているのだけど、コメント投稿は基本的にはできない。ストアでもそう明記している。

しかし実はTwitterアカウントでだけはコメントできるかもしれない。いったんログインした後チャンネル検索画面に戻って再度開くと、ログイン状態が維持されていてコメントできることがある。たぶんWebBrowserコントロールの初期化とCookieの扱いに問題があると思ってるのだけど、原因がよく分からないのでしばらく放置。

どうせWindows 10 MobileになればHLSがネイティブでサポートされるし、たぶんこんなアプリがなくても見られるようになると思ってるのでこれ以上のやる気がもはや無い。。。

以下は開発時の覚書。

*1:おそらくUstream Asiaだけ？

続きを読む

開発環境を Visual Studio 2015 に更新した。

Windows Phone Programming

Visual Studio 2013 の削除

VS2013と共存できるとのことだけど、そんなつもりもなかったのでまずはアンインストールから。完全に削除できたのかよく分からない。。。

インストール&日本語化

Downloads | Visual Studio

ログインしてないと日本語版がダウンロードできないらしい。最初、インストールしたら英語版になって、日本語Language Packを追加でインストールしてた。めんどくさかった。ちゃんとインストールできたか不安。。。

プロジェクトの互換性はある？

Visual Studio 2015 Preview の互換性

プロジェクトはWindows Phone 8のものが使えるようだったので、VS2013のものをそのまま開いたらデプロイ先*1が選択肢に出てこない。ターゲットをWindows Phone Silverlight 8.1に変更したら出てくるようになったので、ひとまずそれで解決とする。Windows Phone 8のサポートを今の時点で打ち切るのは少し心苦しい。*2

Windows Phoneエミュレータが起動しない

stackoverflow.com
今度はエミュレータを起動しようとすると『UDPポートを設定できない』というエラーが出て起動しない。上記リンクに従って仮想スイッチをいったんすべて削除したあと再作成して解決。

Windows Phoneエミュレータがインターネットに接続できない

原因はよく分からないのだけど、いったん仮想マシンをすべて削除したうえで、同時にインストールしたAndroid Emulatorを先に起動するとインターネットに接続する設定をしてくれるようだ。そのあとにWindows Phoneのエミュレータを起動すると無事にインターネット接続できた。

*1:[Device]とか[Emulator...]とか

*2:ダウンロード統計によると、まだ2割くらいはWindows Phone 8のままだったりする