スタート画面の上品なタイル グラデーションを真似する試み

以前から気になっていた事なのですが... Windows 8 のスタート画面上のタイル、微妙なグラデーションと細い枠線が使われていて、例えば単にSolidColorBrushでGridViewのタイルをベタ描くよりもずっと上品でオサレな感じだなぁと感心していました。

このタイル一つ一つのグラデーションが上品で綺麗ですよね！ね？という話なんですが
同意してもらえるか一抹の不安を抱えつつ記事を書いています

年末年始で時間もあることですし、どういうロジックでこの上品な描画を行っているか確認してみようぜ！そして出来れば真似してみよう！という企画です。

アプリの場合、ソリューションの Package.appxmanifest でアプリケーション タイルの背景色を指定します。
しかし、この色がそのままFlatに描画されている訳ではないです。

下の画像がタイルサイズ「小」での実際の描画を拡大した様子なのですが、判ります？

・1px のボーダーが設定されている
・ボーダー・タイル内部 共、色は左辺から右辺へのGradient Brushになっている

例えば WiFiSD8 を例にとると、Appxmanifestで設定しているタイル色は#759AC4 なのですが、実際の描画はこの色で塗りつぶされている訳では無く、以下の様なGradient 付きで描画されています。

場所	左辺	右辺
サイズ大(310x310)　タイル内部	759AC4	91B2D1
サイズ大(310x310)　ボーダー	83A4CA	9CBAD6
サイズワイド(310x150)　タイル内部	759AC4	91B2D1
サイズワイド(310x150)　ボーダー	83A4CA	9CBAD6
サイズ中(150x150)　タイル内部	759AC4	91B2D1
サイズ中(150x150)　ボーダー	83A4CA	9CBAD6
サイズ小(70x70)　タイル内部	759AC4	90B2D1
サイズ小(70x70)　ボーダー	83A4CA	9CBAD6

つまり元の#759AC4 からタイル内右辺の#91B2D1(サイズ小の場合は#90B2D1), ボーダー（枠線）左辺の#83A4CA と右辺#9CBAD6, を何らかの方法で計算しているという事になります。

他アプリのタイルのデータも取ってみます。

場所	左辺	右辺
ストア　タイル内部	1A961A	1AAF1A
ストア ボーダー	83A4CA	9CBAD6
IE　タイル内部	2672EC	2E8DEF
IE　ボーダー	3C80EE	4399F1
ミュージック　タイル内部	D24726	DC572E
ミュージック　ボーダー	D75A3C	E06843
カメラ　タイル内部	95008C	AE00A7
カメラ　ボーダー	A01A98	B61AB0

GreenとRed・Blueの増分差を見ると単にRGB値に定数掛け算している訳では無さそうなので、Windows的にお馴染みのHSL（HSVでは無く）に変換してみると

Excelとか持ち出して完全に見失っている様子

………うううーｎ……HSL に変換することでRGB 値から独立した変換係数的なのが出てくるかと思ったんですが、何か別の要素があるみたいです。又はHSL ではなくHSV でやっているのかもしれない。
とは言っても大体の傾向は判ります。左辺の値に「Saturation 1.01 / Lightness 1.10」 程度を掛けてあげると右辺の値になると。また、タイルのベースカラーからBorderへの変換は「 Saturation 0.9 / Lightness 1.10」あたりで。若干無理がありますが。

という事で、こういう掛け算をしてタイル・ボーダーのGradient Brushを作るとスタート画面っぽい上品なグラデーションが得られる、はず、です。やってみましょう。

（余談ですが、この記事30分くらいでちゃちゃっと書くつもりだったんですが、この時点でもう数時間経っている…RGB2HSL変換コードとか書いちゃうし何かもう見失っている 僕がマネージャーなら止めさせるレベル）

伝わらないかなぁ…

おおおお！！！！スタート画面のタイルっぽい！！かなり良い感じなのではないかと！僕は興奮しているのですが！
…でもなー…やっぱり、そもそものスタート画面のグラデーションの美しさが共有できていないとこの興奮も伝わらないのでは無いかという不安が消えません。

最後に

ストアアプリ、というかMetro Design Initiative では「Chrome排除！！」(※1）が鉄の掟、マントラな訳ですが…その割にはスタート画面で微妙にChromeってるのがずっと気になっていたのでした。人はマントラだけでは生きていけないのか。でもこれくらいなら上品で良いなと思います。

※１）Google Chrome の事では無いです。ウィンドウにドロップシャドウ落とす、XPのLunaみたいにつやつやさせる、左上からライトが当たっている前提でUI部品に変化つけたり、的な描画上の装飾（クロム）を排除しようぜ！という。Authentically Digital, 俺のカラダの筋肉はどれをとっても機械だぜ！(意訳)と並ぶ、Metro Designの柱です。

Segoe UI Symbol を手入力するには

Windows 8 でのUI 用フォントである所のSegoe UI Symbol、ストアアプリを作るには超便利で、futa8・WiFiSD8 共アイコンはほぼ全部これで間に合っています（futa8の塩辛アイコンは別）。

が、たまに…Segoe UI Symbol に何か書き足したい、少し弄りたい時があります。そういうときは Paint.netのようなペイントソフトに文字を入力し、編集して.PNGにしてアプリ内に持つのですが…その文字入力方法を毎回忘れては探しまた忘れ、を繰り返しているので…忘れた時用に記録しておきます。

WiFiSD8 Release 2

ストアアプリ版 FlashAir Client WiFiSD8 Release 2 を公開しました。Windows ストア からダウンロードできます。
既にインストール済みの場合、順次自動的に更新されます。

Click で ダウンロード

インストール・更新が成功した場合、設定→アクセス許可 に表示されるバージョン が「1.1.0.15」になります。

バージョン表示 設定チャーム→アクセス許可 で表示されます

変更点

一括ダウンロードの動作変更

動作がどう変わるのか

Release 1 では、WiFiSD8 が中断している間もダウンロードが継続していました。
Release 2 では、WiFiSD8 が中断している間、ダウンロードも中断します。

「WiFiSD8 の中断」とは？

Windows8 ではアプリが他のアプリの後ろに隠れると、数秒でアプリはOSに「中断」されます。
中断している間、アプリは一時停止している状態になります。ダウンロードも停止します。
アプリを前面に出して表示すると、アプリは再開し、ダウンロードも再開します。

「ダウンロードの中断」を避けるには？

一括ダウンロードの間、アプリを表示し続けることで中断を避けることができます。
一括ダウンロード中に他のアプリを使用したい場合、画面分割でWiFiSD8 を画面脇に表示する事で中断を避けることができます。

WiFiSD8 を画面左に寄せて表示している様子

Release 1 のほうが便利なのでは？何故変更を？

FlashAir Class 10 タイプ（W-02）用に「インターネット同時接続機能」対応ファームウェアが2013年11月にリリースされました。モバイルルータ等をお持ちの場合、外出中でも FlashAirに接続したままインターネット接続が可能となる画期的な機能です。

ところが、この新ファームウェアで追加された機能の一つ「リダイレクト」をOnにしていると、OSが「このシステムはインターネットから切断されている」と判断する場合が有ることが判りました（しない場合もあります）。
OSがこう判断した場合、Release 1 で使っていた「アプリ中断中もダウンロードを行う」機能 「Background Transfer」 は使えず、ダウンロードができなくなってしまうのです。
このため、WiFiSD8 Release 2 では 「Background Transfer」を使わず、一般的なAPI 「HttpClient」 で一括ダウンロードを行うよう変更しました。

WiFiSD8 側でリダイレクトモードのOn/Offを検知して情報を表示する、というデザインも検討したのですが、基本的に外出先で使う WiFiSD8 上で「リダイレクトをOffにして下さい」と表示したとしても、FlashAir のリダイレクトOn/Off 切り替えは FlashAir カードをSDカードスロットに挿入し、設定変更ツールを使う必要があります。大抵の場合、外出先でこの設定を変更することは出来ません。

また、新ファームウェアでは既定ではリダイレクトがOnとなっています。既定値の設定変更を前提としたアプリのデザインは無理があると判断し、今回の動作変更となりました。
ご理解頂ければと思います。

画像の全画面表示でのダウンロード・切り替えの改善、UIの変更

画像の全画面表示 モデルは友人のJ君です（掲載許可を貰いました）

全画面表示中の素早い画像切り替えでダウンロードが停止する場合がある不具合を修正しました。
また、ダウンロードキャンセルボタンを追加し、ボタン配置を見直しました。

Microsoft Application Insights サービス の追加

アプリの使用状況を取得するサービスです。アプリの起動回数、アプリ内の各ページの表示回数等が個人を特定出来ない形で送信されます。
既定ではオンになっています。
送信を停止するには、設定チャーム→WiFiSD8 設定→「Microsoft Application Insights の使用」をオフにして下さい。

Application Insights の設定

BackgroundTransfer を諦めた技術的背景 （その１）

今回、ストアアプリ WiFiSD8 で、所謂ダウンローダ…IriaやIrvineのような、複数アイテムを順次ダウンロードする機能…を実現しようとしました。

が、結果的には
「ストアアプリ特有のApplication Lifecycle Management 環境下ではBackground Transfer機能をもってしても中断・終了への対応は困難であり、ユーザーにアプリを前面に表示し続けてもらわない限り、複数アイテムの順次DLは難しい」
という事になってしまいました。

以下はこの結論に至るまでの逡巡の記録です。
こうすれば出来たのでは、というツッコミは大歓迎です。是非真似させてください。

StoreApp の Application LifeCycle Management について

ストアアプリの終了・中断は基本的にOSにより管理されます。これをApplication Lifecycle Management, ALM と呼びます。
ALM下では、アプリは３つの状態で管理されます。

動作(Running)　アプリが前面に表示されている状態。ユーザーと対話し、普通に動作している状態です。

中断(Suspend)　アプリが背面に移動すると、OSはアプリを中断します（アプリに拒否権は無い）。アプリが前面に表示されるとすぐに動作状態に復帰します。

終了(Terminated)　システムのメモリがきつくなってくる等した場合、OSはアプリを終了します（アプリ側に拒否権は無い）。

アプリが背面に移動すると数秒で中断されます。また、アプリを複数同時起動していると、アプリはそこそこ頻繁に終了されます。

Desktop Appと大きく異なる点として、

• Appを（いつでも）中断・終了する権利をOSが持っていること
• Suspend状態があり、極めて頻繁にSuspend状態に入れられる事　またそこそこ頻繁に終了されること

 が挙げられます。

前者により、ストアアプリは何時OSに叩き殺されても構わないようにデータをマメに保存し、後者により、長い時間のかかるタスクは結構困る、という特徴（弱点）を持っています。
反面、Desktopのように長い時間使っているとプロセスがやたら増えてなんとなく不調、DiskやNetworkのような資源をアプリが使い放題、的な状況は起きにくい、という事でもあります。
 

BackgroundTransfer

さて、今回の…いわゆるダウンローダ、複数アイテムを一括で順次ダウンロードするアプリの場合、普通にHttp Clientを使うとアプリ中断でダウンロードも中断してしまうので困ったことになります。

このため、Win8/8.1では「BackgroundTransfer」という機能がOSに用意されています。
これは、OSに「このURLからファイルをDLして下さい」と頼むと、OSがダウンロードを行ってくれる、という機能です。ダウンロードの主体はOSであるため、アプリが中断している間も継続します。

…ですがこの機能、二つ問題があります。

1. 複数アイテムのDLが使いにくい
2. アプリが終了されるとバッチDLが終了してしまう

まず「1 複数アイテムのDLが使いにくい」　について説明します。

この機能、APIの設計やサンプルを見るに、大きな１つのファイルをDLするためにデザインされている機能で、複数アイテムを一括でDLすることは（あまり）考えられていないのかな？という気がします（APIが用意されてはいるが、事実上動作として意味が無い）。

BackgroundTransfer が想定しているフローは、

1. OSにDLアイテムを1個登録
2. OSがDLを終え、アプリに通知
3. アプリは次のDLアイテムをOSに登録

であるようです。
ですがこれはバッチダウンローダとしてはNGです。アプリが中断している間に2. に至った場合、次のアイテムを登録する事ができず、バッチプロセスが中断してしまいます。

このため、WiFiSD8 Release 1 では、（多分）想定外の使い方をしていました。

1. OSにDLアイテムを一気に全部登録
2. OSはひたすらDL

（想定外と言うのは…本来アイテム登録は await RunAsyncで行い、DLが終了したらawaitから返ってくる、のですが…Release1ではこのCallをasync voidのMethodに押し込み、Callしたら後は知らんぷりでぶん投げるという。酷い。でも、これでもDLの進捗・終了はCallbackで取得可能です。）

この場合、アプリが中断されてもOSは次から次へとDLを繰り返します。
ですがSideEffectがありまして…1の全部登録に結構時間が掛かります。100アイテム登録に一分くらい掛かってしまう。AsyncAwaitのお蔭でアプリのUIが固まる事こそ無いものの、1分はかなりの数のDLが済ませられる時間であり、どうしたものか…という所でした。
 
ですが（この文章ですがだらけですが！）、この想定外の使用をもってしても、
「２ アプリが終了されるとバッチDLが終了してしまう」
これは克服できません。
 正確には、１アイテムのDLはアプリが終了しても継続します。
が、次のアイテムのDLが始まらず、バッチ処理が止まってしまうのです。

ここまでの話をまとめると、

・BackgroundTransfer を使う事で、（開始に時間は掛かるが）アプリ中断でも終了しない一括ダウンロードを実現可能。ただしアプリ終了に対しては無力。

となります。WiFiSD8 Release 1はこの方法を取っていました。
アプリ中断に対しては大変有効な方法なのですが、困るのは…アプリが中断されるか終了されるか、ユーザーから見ると全く予測ができない所です（開発者でも無理ですが）。
そして、アプリ終了をユーザーが防ぐ唯一の方法は、

「アプリを背面に持っていかず、前面に表示し続ける」

これだけです。
・・・あれ？と。ここまで読んで頂いた忍耐深くまた賢明な貴方様なら、議論が循環している事にお気付きかと思います。

「前面に表示し続けるのがアリなのなら、そもそもBackgroundTransfer 使わなくても良くね？HttpClient 使っても同じじゃん！！」

という。
そういう矛盾をWiFiSD8 Release 1 は孕んでいたのでした。
矛盾はありますが、それでも機能を実装することで中断に対応する事が出来、損はしていないはずでした。

ですが、この状況は全く別の要因で大きく変わり、結果的にはBackgroundTransferを使わないRelease 2を作る事になるのでした。
長すぎなので章を分けます。
待て次号。

※ 今回、Background Taskについては15分にCPUTime 2秒ではDLには使えないだろうということで上の考察には入れていません。

ListViewにItemを幅一杯にみつしり表示させるには

WiFiSD8 の作業中に気付いた話。
Win8.1でアプリの幅が可変になりました。
それで、狭幅用の1次元なListViewを持とう、とXAMLを弄っていて、あれ？と。

左中のアプリがそれです。幅一杯にアイテムを広げて表示したかったのですが、モノによっては短く表示されてしまう。？？？

なんでかなーとパソコンに向かって呟いていたら(twitter)、超イカすTwitterClient App "Mevy"を作っておられる雪猫氏に「ListView/ListViewItemのHorizontalContentAlignmentをStretchにすればいいのでは？」という情報を頂き、さっそく試してみたのだけれども…結果は同じでした。
無念。

んんんnーー何故ーと上の画面を見ていて気づくのは、日付の下の数字が「１」のアイテムだけ幅の変化が出来てないと。

このDataTemplate、中にはFlipViewが入っていまして、

 こんなのです。
「１」というのは、アイテムが内包する写真の数が１、つまりFlipViewに載っているアイテムの数が１、という意味です。

 今回の様に可変長域にみつしり詰めたいとき、「これだけ幅が欲しい」と親のコンテナに要求を出せるElementが必要です。
例えば上のTemplateで、もし一番幅が大きいのが幅300のStackPanelだったとしたら、このTemplateがはまるListViewの幅がなんぼ大きくても別に広がったりはしないと。

上の場合、そういう要求を出す原動力になっているのはFlipViewの中のImage"FlipViewItemOriginalImage"だけです。ここでStretchが「UniformToFill」になっているが故に、親に「くれるだけ幅をくれ！幅を！」という要求が通り、みつしり表示されると。

で、今回の場合・・・どうも、FlipViewの中のアイテムが1個だけの場合、意図したようなRequestが飛んでいかないがために、一番上の画像のような事になっているのかな、と。
何故？というのは今回わからなかったです。すみません。

回避策として・・・カッコ悪いのですが、FlipViewの代わりに親に幅を寄越せとRequestできるアイテムを一個置くことにしました。上のDataTemplateでコメントアウトされているRectangleです。Color#00000000のため見えないですが、Stretch=UniformToFillな為親に「幅をくれるだけ寄越せ！！」と要求します。

このWorkaroundで、意図した動作をさせることが出来ました。

WiFiSD8 動作の様子（動画）

WiFiSD8 動作の様子を動画で撮影してみました。
FlashAir Card が動作に必須なアプリのため中々動作を伝えづらい、というのが理由です。



撮影方法は、

1. Giffing Tool でスクリーンキャプチャ撮影・Gifアニメ化 を行う 50-60MB程度のアニメGIFファイルが出来上がる
2. gfycat.com にアップロード gfycat はGIFアニメをHTML5 VideoにEncodeして公開してくれるWebサービス
3. アップロードすると外部リンク用のiframe linkが出てくるので、それをBloggerのHTML編集モードで貼り付ける

GIFアニメの割には結構良い感じに撮れていて、ストアアプリの紹介・チュートリアル等に使えるなと思うのですが、どうでしょうか。


Giffing Tool (シェアウェア、支払料金は任意)
http://www.giffingtool.com/

gfycat
http://gfycat.com/

WiFiSD8: 一括転送が始まらない不具合について

WiFiSD8には複数画像を一括で転送する機能があるのですが、場合によっては転送が始まらない不具合が有ることが判りました。

確認できた再現条件

「FlashAir Class10 モデルで、リダイレクトモードを「On」にしている場合」

リダイレクトモードがOnの場合、FlashAir にWiFi接続すると自動的にFlashAirのWebページが開きます。
又は、FlashAir Tool で確認できます。

なお、Class10 モデルでFW2.00.02（インターネット同時接続をサポートするVersion）にアップデートしている場合、既定値は「リダイレクトモードOn」です。

FlashAir Tool 「ネットワーク設定」画面

確認できた現象

WiFiSD8の一括ダウンロードにファイルを追加し、「Start」ボタンを押すと、ダウンロードが始まるはずの最初のアイテムが「中断」表示のまま状態が進行しない。

問題が発生する場合、囲み部分が「中断」のままになります

回避方法

FlashAirの「リダイレクトモード」 をOff にして使用する。

Offにした場合、接続時にWebブラウザが自動的に開かなくなります。
また、この場合でもインターネット同時接続機能はお使い頂けます。

または、

WiFiSD8 の一括ダウンロード機能を使わない。
画像表示によるファイル保存は正常にお使い頂けます。

原因

WiFiSD8 は、一括ダウンロード時に WinRT API 「BackgroundTransfer」を使用しています。このAPI を使うとダウンロードはOSにより行われ、アプリケーション（WiFiSD8）がOSによりApp Suspendされている間も、ダウンロードが継続します。
ですが、このダウンロードは「インターネットからシステムが切断された」とOSが判断すると転送を中断します。
リダイレクトモードOn はOSに「インターネットからシステムが切断された」と判断され、以上のような現象になっているようです。
（OSが何を持って「切断された」と判断しているのか不明のため、最後の歯切れが悪く申し訳無いですが…）

なお、画像の画面表示でダウンロードを行う場合、BackgroundTransfer では無く、WiFiSD8 が自分でHttpClient API を使って行っているため、この問題は発生しません。

その他

手持ちのカードで確認した限りでは、FlashAir Class6 ではこの問題は発生しないようです（そもそもClass6にはリダイレクトモードが無いためと思われます）。

WiFiSD8 をリリースしました

WiFiSD8 TopPage

 

 

WiFiSD8 は、WiFi機能付きSDカード内の写真を閲覧・保存するための Windows 8.1 / Windows 8.1 RT 向け Store Applicationです。

東芝 FlashAir に対応しています。

Windows Store からインストールできます。
http://apps.microsoft.com/windows/ja-jp/app/wifisd8/1f490d0d-4c05-4417-ac24-f51c24e29c2b

WiFiSD8 を使う利点

 

 今回対応したFlashAir はWeb ブラウザ UIを内蔵しており、アプリ無しでも写真を閲覧することができるのですが、
 WiFiSD8 は専用のWindows StoreAppとして、

• StoreApp の作法に沿った、タッチ・マウス共に使いやすいUI 　…　Gridで表示する大きなサムネイル、フルスクリーン表示で左右にスワイプして画像切り替え等
• 保存の簡略化  元画像を表示後自動でユーザーの指定したフォルダに日付毎に保存
• 複数画像を一括で転送・保存
• リサイズ・共有をDesktopに降りずにアプリ上で実行

等、Webブラウザ では得られない機能・使い勝手を提供できていると考えています。

 

…以下、「WiFi機能付きSDカードって何？」という背景話を簡単にまとめました。

......

 

WiFi機能付きSDカード とは?

WiFi アクセスポイント と、Webサーバを内蔵したSDカードです。

カメラに挿して使うと、カメラからは一般のSDカード同様に写真を記録できます。

同時にアクセスポイントとWebサーバが動作しており、タブレット・PC・スマートフォン等よりアクセスポイントにWiFiで接続すると、Webサーバが写真を見せてくれる、という動作をします。

（画像はFlashAir Developersより拝借）

基本的に、どんなカメラでもSDカードさえ使えればWiFi対応カメラに化けさせることができるのがポイントです。

今回対応した東芝 FlashAir は、

• HTML Interface
• CGI Interface

の二通りのInterfaceがあり、両者とも仕様が公開されています。

FlashAir Developers
https://www.flashair-developers.com/ja/

WiFiSD8 は後者を使ってファイルリストを取得し、画像を表示します。

 

※カメラによってはノイズの影響で通信が不安定になることもあります。対応カメラかどうかを確認するのが大事です。

FlashAir™ Class6 動作確認機器一覧
http://www.toshiba.co.jp/p-media/compati/flashair_c6_list.htm

FlashAir™ W-02 Class10 動作確認機器一覧
http://www.toshiba.co.jp/p-media/compati/flashair_list.htm

 

現状

この種のデバイスが登場したきっかけの一つは、おそらく、iOS系デバイスやスマートフォン・タブレットにカメラを接続するのが中々めんどくさい、事があります。SDカードを挿すには変換アダプタが要りますし、USBも直接は刺さりません。
今までPCでやっていた作業の多くがスマートフォン・タブレットに移行している中、カメラが置いて行かれている所がありました。

また、上とも重複する話ではあるのですが、「写真の使われ方」が変化しているという部分もあります。
出先で写真を撮ったらすぐツイート・共有する、という近年の「写真の使われ方」は専ら携帯電話・スマートフォン内蔵カメラでのユーザー体験であり、一々PCに繋げて転送して…という「単体カメラ」はこのシナリオから置いて行かれている感がありました。

他方、携帯のカメラでなく、良いレンズを持った「単体カメラ」で撮った写真を出先からツイート・共有したい、というニーズもあります。

それらを橋渡しするデバイスとして、WiFi機能内蔵 SDカードが使われるようになってきている、又WiFi機能内蔵カメラが増えている、というのが現状であろうと考えています。

futa8 Release 16

futa8 Release 16 が Windows ストア からインストール出来るようになりました。

Click でWindows ストアに移動します

Note - English description available at the bottom of this post.

既にfuta8をお使いの場合、Windows ストア を開くと右上に「更新プログラム」が表示され、ここをクリックすると更新ページに移動します。

インストールに成功すると、futa8のバージョン情報が v1.0.0.122 になります。確認するには、チャーム→設定→アクセス許可 を開きます。

futa8 Release 16
30 November 2013

修正

4chan の閲覧が不可能になっていた問題の修正

4chan API のホストが boards.4chan.org から a.4cdn.org に移行したため、接続できなくなっていました。
今迄に追加済みのboards.4chan.org の板は、このRelease 16 で自動的にa.4cdn.org にブックマークを修正します。
新規に板を追加する場合、a.4cdn.org/a の様に入力してください（ boards.4chan.org/a と入力して頂いてもOKです。futa8 側で4cdnに書き換えます。）
サービス一括追加も同様です。

Changes - futa8 Release 16

futa8 Release 16 available at Windows Store:
http://apps.microsoft.com/windows/app/futa8/17a26f04-9d9d-4614-ae0f-f807f4938ee9

Bug fix - Can't browse 4chan service

4chan API host is changed from boards.4chan.org to a.4cdn.org. As of this, futa8 couldn't browse 4chan contents.
By using this release, 4chan bookmarks are replaced with 'a.4cdn.org' automatically.

futa8 Release 15

futa8 Release 15 が Windows ストア からインストール出来るようになりました。
http://apps.microsoft.com/windows/app/futa8/17a26f04-9d9d-4614-ae0f-f807f4938ee9

Note - English description available at the bottom of this post.

既にfuta8をお使いの場合、Windows ストア を開くと右上に「更新プログラム」が表示され、ここをクリックすると更新ページに移動します。

インストールに成功すると、futa8のバージョン情報が v1.0.0.121 になります。確認するには、チャーム→設定→アクセス許可 を開きます。

futa8 Release 15
08 November 2013

修正

スレッドを開くたびに全画面モードでの画像アイテムが増えていく問題の修正

変更 

リスト ビューで表示する広告のサイズを728x90から250x250に変更

Win8.1での表示の様子

これまでは、リスト表示…縦位置・Fill (他アプリをSnap表示している状態) で主に使われる1次元のリストでスレッドを表示するモードでは幅728x縦90 の広告を表示していましたが、Release 15からは250x250 の広告が表示されます。

変更理由は、

1) 728x90 サイズの広告配信がとても少ない事。 

2) Win8.1の画面分割により、(配信されたとしても) アプリの横幅上 728x90 サイズ の広告を表示できない場合が増えている事。

になります。

正直今までより場所を食うサイズなのですが、ご容赦頂ければと平に願う次第です。

Changes - futa8 Release 15

futa8 Release 15 available at Windows Store:
http://apps.microsoft.com/windows/app/futa8/17a26f04-9d9d-4614-ae0f-f807f4938ee9

Changes - Ad unit size for listview is changed from  728x90 to 250x250.

Bug fix - Full screen mode issue

futa8 Release 14

futa8 Release 14 が Windows ストア からインストール出来るようになりました。
http://apps.microsoft.com/windows/app/futa8/17a26f04-9d9d-4614-ae0f-f807f4938ee9

Note - English description available at the bottom of this post.

既にfuta8をお使いの場合、Windows ストア を開くと右上に「更新プログラム」が表示され、ここをクリックすると更新ページに移動します。

インストールに成功すると、futa8のバージョン情報が v1.0.0.119 になります。確認するには、チャーム→設定→アクセス許可 を開きます。

futa8 Release 14
02 November 2013

変更

全画面モードで、既定で画像の全部分が表示される倍率に調整するよう変更

全画面モード

また、ピンチイン・アウトで倍率変更後、画像のダブルタップで既定の倍率に戻ります。

スレッドのリスト表示でID・IP 表示を行うよう変更

この件についてはストアのレビューでご指摘頂きました。有難うございます。

修正

Alt＋左右キーでページ遷移を行う際、アプリケーションが終了する場合があった問題の修正

この件についてはこのblogのコメントでご報告頂きました。有難うございます。

全画面モードで、1MBを越えるファイルサイズを表示していなかった問題の修正

割り算を3桁間違えていたという…

------

Changes - futa8 Release 14

futa8 Release 14 available at Windows Store:
http://apps.microsoft.com/windows/app/futa8/17a26f04-9d9d-4614-ae0f-f807f4938ee9

Full Screen Mode: Default Zoom ratio is changed to fill the screen with image

Bug fix - Alt+Left/Right navigation cause app crash

futa8 Release 13

futa8 Release 13 が Windows ストア からインストール出来るようになりました。
http://apps.microsoft.com/windows/app/futa8/17a26f04-9d9d-4614-ae0f-f807f4938ee9

Note - English description available at the bottom of this post.

既にfuta8をお使いの場合、Windows ストア を開くと右上に「更新プログラム」が表示され、ここをクリックすると更新ページに移動します。

インストールに成功すると、futa8のバージョン情報が v1.0.0.118 になります。確認するには、チャーム→設定→アクセス許可 を開きます。

futa8 Release 13

02 October 2013

追加

全画面表示モード：　マウスで掴んで画像をスクロールする機能の追加

タッチ操作の場合、変更はありません。

修正

スレッド画面から投稿を行う際、画像の添付が出来なくなっていた問題の修正

「参照」ボタンからの画像の選択操作が、画面上に反映されていませんでした（送信自体は出来ていました）。

スレッド画面 左脇のカタログパネルからスレッドを切り替えると、透明モードがキャンセルされてしまう問題の修正

------

Changes - futa8 Release 13

futa8 Release 13 available at Windows Store:
http://apps.microsoft.com/windows/app/futa8/17a26f04-9d9d-4614-ae0f-f807f4938ee9

Grab-To-Scroll feature is added for image full screen mode

You can scroll the image by mouse drag. No changes for touch operation.

Bug fix - Fail to attach the image for res submission

Bug fix - Thread Page: Invisible mode is cancelled when you switch the thread from catalog panel

futa8 Release 12

futa8 Release 12 が Windows ストア からインストール出来るようになりました。
http://apps.microsoft.com/windows/app/futa8/17a26f04-9d9d-4614-ae0f-f807f4938ee9

Note - English description available at the bottom of this post.

既にfuta8をお使いの場合、Windows ストア を開くと右上に「更新プログラム」が表示され、ここをクリックすると更新ページに移動します。

インストールに成功すると、futa8のバージョン情報が v1.0.0.116 になります。確認するには、チャーム→設定→アクセス許可 を開きます。

futa8 Release 12

28 September 2013

追加

「暗い色」テーマの追加 

「暗い色」「明るい色」テーマを選択できるようになりました。

「暗い色」テーマ / Dark theme

既定の「明るい色」テーマ / Light theme - default

テーマの選択は、設定チャーム → futa8 設定 → テーマ カラー から行います。
なお、テーマ カラーの変更を適用するにはアプリケーションの再起動が必要です。

• Alt + F4
• マウス・タッチで画面上部を掴んでから下に投げる
• マウスを画面左に持って行ってタスクリストを表示し、futa8 の上で右クリックして「閉じる」

 等で終了した後、再びスタート画面からfuta8 を起動してください。

テーマ カラーの設定 / Theme color settings

修正

全画面モードでアプリが終了する場合があった問題の修正

スレッド画面をロード中に、スレの一枚目の画像をクリックして全画面モードに移行した場合にアプリが終了する事があった問題を修正しました。

ふたば img, dat 日付表示が崩れる場合があった問題の修正

------

Changes - futa8 Release 12

futa8 Release 12 available at Windows Store:
http://apps.microsoft.com/windows/app/futa8/17a26f04-9d9d-4614-ae0f-f807f4938ee9

'Dark' color theme is added.

To change the theme, open 'futa8 settings' charm. App restart is required to apply the change.

Bug fix - App crash issue at full screen mode

In some cases, app crash occurred by following process. This issue was fixed by this release.
1. Open thread page
2. Click the first-res image during the thread loading.
3. App Crash

Bug fix - Res No and dates are truncated at futaba - img, dat boards

Incoming futa8 Release 12

I've got some suggestions and bug report about futa8 via twitter and store review. He kindly made some Gif animations to show the bug/suggestions, then I could realize what's happen easily. Thanks Steveo-san!

Target date of release 12 is end of this September.

Full screen mode - crash bug

The root cause of this bug is identified. It'll be fixed by release 12.

Full screen mode - Grab-to-scroll feature

I've implement this, but there is a problem to release it... Recently, My test machine - ASUS VivoTabRT - was broken, then I can't test the new code with touch-capable system. The feature is designed for mouse system, but I should confirm that there are no side effects on touch-capable system. Since, release schedule of this feature is open...depend on ASUS support ;)

Adding 'Dark' theme

I've implement the following. You can switch the light (White and brown - current one) and dark theme from 'futa8 settings' charm. It'll be included in release 12.

…恥ずかしい英語力を晒してしまいましたが、ReviewとSuggestionを送ってくれたのが嬉しかったので英語圏？の彼に判り良いように書きました。
なお、上に出てくるGif Animationは Giffing Tool で作成したとの事です。

全画面モードのバグ・「暗い色」テーマは9月末目標のRelease 12 に乗る予定です。
「マウスで掴んでスクロール」はテストが出来ないため、どのRelease に乗せられるか不定な状況です。

バグ：全画面モードで素早い動作を繰り返すとクラッシュする

futa8 では、スレッドをグリッド表示する際、画像の1枚目だけはオリジナルの画像をロードして表示します。
このオリジナル画像をロードしている途中に1枚目をクリックして全画面モードに遷移した場合、全画面で又同じ画像をロード・ローカルにセーブしようとしてCrash してしまっていました。

提案：全画面モード 「マウスで掴んでスクロール」機能のサポート

大きい画像をスクロールする場合、スクロール バー・ホイールだけでなく、マウスのドラッグでスクロールできればいいのに！という提案でした。
簡単に実装でき、使ってみると大変便利ですのでRelease に含めたいのですが、現在テストマシンが修理に入っており・・・タッチ環境で副作用が無い事の確認が出来ずにいます（開発は普通の非タッチPCで行っています)。

提案：暗い色調も選択できないだろうか

ご覧の通りです。明るい色調（現在使っている白・茶色のふたば系カラー）と、上に挙げた暗い色調を設定チャームから切り替えられるようになります。

futa8 Release 11

futa8 Release 11 が Windows ストア からインストール出来るようになりました。
http://apps.microsoft.com/windows/app/futa8/17a26f04-9d9d-4614-ae0f-f807f4938ee9

既にfuta8をお使いの場合、Windows ストア を開くと右上に「更新プログラム」が表示され、ここをクリックすると更新ページに移動します。

インストールに成功すると、futa8のバージョン情報が v1.0.0.115 になります。確認するには、チャーム→設定→アクセス許可 を開きます。

futa8 Release 11

16 September 2013

修正

スナップ ビュー でコメント欄・ボタンが正しく表示されない不具合の修正

Release 10 で入れたreCAPTCHA サポートを入れる際、スナップ ビューの変更が不完全で、reCAPTCHA を必要としないふたばのスレを開いている際にコメント欄・ボタンのリサイズが正しく行われていませんでした。

Release 11 でのスナップビュー
空きが広くてカッコ悪いのは現在の仕様です、すみません

追加

スナップ ビュー のレス欄・スレ作成欄に画像添付ボタンを追加

スナップ ビュー の状態で「参照」ボタンを押すと、スナップビューが解除されファイル ピッカー が開きます。

AdDuplex (3/3) 自アプリの広告作成

AdDuplex の紹介シリーズ、最後は一番大事な「自アプリの広告作成」です。
Dashboard の 「EDIT AD」から、自アプリの広告を作成・編集することができます。

自アプリ広告の編集（テキストベース）

テキストベース広告の場合、Dashboard 上で 広告文を4行入力するだけです。実際のアプリ上では、「太字のLine 1 ＋ Line 2」画面と「Line 3 + Line 4」画面が交互に表示されます。色はランダムに選ばれるようです。
広告サイズには種類があります。勿体無いので全部作るべきでしょう。なお、292 x 60 はMicrosoft Advertisement では使用が終了しているサイズなので注意してください。

絵心がある場合は、画像ファイルを登録することも可能なようです（僕は絵心が無いので使っていません…)。

また、今のところ、特に言語毎に広告文を持てる機能は無く、全言語で同じ文が表示されます。ユーザー数の多い英語で揃えるのもいいですし、2画面目だけで日本語を使ってみるという手もあります。

最後に…「広告文は短い方がクリック率が高い！」という面白い調査結果をAdDuplexのエンジニアがBlogに書いています。色々アピールしたくなる所ですが、ぐっと我慢して言葉を選ぶのが大事なようです。

「簡潔さは才能の妹」 チェーホフの言葉だそうです
ちなみにAdDuplexはリトアニアのスタートアップ

Size Matters: Shorter Ads Get More Clicks
http://blog.adduplex.com/2011/08/size-matters-shorter-ads-get-more.html

………

以上、思わぬ長さになってしまいましたが、AdDuplex の紹介、アプリへの埋め込み、広告作成、について簡単に説明してきました。

AdDuplexでユーザー数が増え、広告収入が増え、結果的に…好きな時にトンカツが食べられるくらいの上がりが得られればなぁ…と…(今は食えてません）

とんかつ食べたいなぁ……

AdDuplex とは何か (1/3)
AdDuplex (2/3) アプリへの埋め込み
AdDuplex (3/3) 自アプリの広告作成

AdDuplex (2/3) アプリへの埋め込み

前回の概要に続いて、今回の記事ではAdDuplex への登録、アプリへの埋め込みについて…引っ掛かるかも？という所を簡単に説明します。

前回紹介したイメージ画像ですが…股間が光り輝いているのは何の暗喩なのか

なお、この記事ではWindows 8, C#/XAML ストアアプリ での例を元に説明しています。

アプリの登録

画面の指示に従ってアカウントを作成し、アプリを登録します。
一通り登録が終わった所が下の画面です。

「App Details」画面

「App ID」は、AdDuplex によって振られるアプリのID です。これをアプリに埋め込む事になります。
「Status」は、最初…開発マシンで使っている間は「Inactive」、ストアアプリが実際にリリースされ、広告を出し始めると「Active」になります。

Inactive からActive への移行に当たって、特にAdDuplex ダッシュボード上で必要な作業はありません。各地であなたのアプリが使用され、広告が表示されるようになるとAdDuplex はそれを察知して勝手にActive になります。

「Package Family Name」は、ストア上のファミリーネームです。ソリューション内の「Package.appxmanifest」→「パッケージ化」タブに表示されている「パッケージ ファミリ名」を入力します。

パッケージ ファミリ名：「Package.appxmanifest」の「パッケージ化」に書いてあります

ここの「パッケージ ファミリ名」はアプリが開発者アカウントを使ってパッケージが作成されるまで確定しない（はず）です。頭にアカウント名が入っていない、GUID のような名前の間はAdDuplex のPackage Family Name に入力しても受け付けられません。

又、Package Family Name は一度ストアに登録すると変わるものでは無いので、バグ修正・機能追加などでストアアプリを更新したとしても、AdDuplex ダッシュボード上での作業は特にありません。

SDK のインストール

Windows8 版のAdDuplex SDK は、NuGet で配布されています。
埋め込むストアアプリのソリューションを開き、Visual Studio のメニュー 「ツール」→「ライブラリ パッケージ マネージャー」→「ソリューションの NuGet パッケージの管理」を選択すると、NuGet パッケージ管理画面が開くので、右上の検索窓から「AdDuplex」を検索し、「AdDuplex SDK for Windows 8」をソリューションに追加します。

NuGet を開いて

SDK をソリューションに追加

表示コードの追加

Namespace の追加

（ここ以降はDataTemplate/DataTemplateSelectorを使う普通の話で、AdDuplex Uniqueな話はあまり出てきません。）

ここでは、futa8 で使っている、GridView 上のアイテムとしてAdDuplex の広告を表示するコードを元に説明します。
アプリケーション上に固定の広告枠を持つタイプだと又方法が異なるかもしれません。

まず、表示するページのXAML・C# Code behind に Namespace の宣言を追加します。

Code behind に追加

XAML に追加

DataTemplate の作成

GridView に表示するので、DataTemplate 「FutaGridAdDuplexTemplate」を作成します。上の登録画面で貰ったAdDuplex のAppId はここに入ります。
futa8 では 「Microsoft Advertisement の広告が無かったらAdDuplex を表示する」というフォールバックを行うため、同じ大きさのMicrosoft Advertisement 用のDataTemplate 「FutaGridAdTemplate」も作成しています（以降、Microsoft Advertisement は、コードの中では「PubCenter」の表記になっています）。

XAML DataTemplate の作成

DataTemplateSelector の作成

futa8 では、レス一つ一つ・広告をそれぞれアイテムとして持つ ObservableCollection をデータとして持ち、それをGridView のItemsSource としてバインドすることでレス・広告の表示を行っています。
アイテムの内容によってDataTemplate を切り替える為、DataTemplateSelector を用意します。UniqueId に入っている文字列でDataTemplate を切り替える訳です。普通のレスの場合、UniqueId にはレス番が入ります。

XAML DataTemplateSelector の宣言

DataTemplateSelector の Code
item の追加はfutaba のHTML・4chan のjson をParse する際に行っています

……これで、「AdDuplex」をUniqueId に持つItem をObservableCollection に追加するとAdDuplex 広告が表示される、ようになりました。
なお、広告をクリックすると、Windows 8 の「ストア」が起動し、アプリの紹介ページが開きます。起動等はAdDuplex のコンポーネントが行うので特にアプリ側でコーディング作業は必要ありません。

フォールバックの仕掛けを作る

最後に、フォールバックの仕掛けを作ります。Microsoft Advertisement の広告が無い場合、Errcode.NoAdAvailable をパラメータとするイベント ErrorOccurred が発生します。
futa8 では、それを受けて、ObservableCollection からPubCenter アイテムを引っこ抜いて捨て、AdDuplex アイテムを追加するという（雑な）方法で広告を差し替えています。下の例では「fdt.Items」がObservableCollection です。このObservableCollection は GridView にバインドされているため、これだけで直ぐにUI に反映されます。

PubCenter Item を捨て、AdDuplex Item を挿入

GridView 上のアイテムとして表示

この状態で、お手元の開発マシンでは色々な他アプリの広告が表示されるようになっているはずです（が、AdDuplex Dashboard 上は inactive）。
このアプリをストアに送り、審査が通り、各地で使われるようになると晴れて Active となります。

しかし…最後に、もう一つやらねばならない「自アプリの広告作成」が残っています。
長くなってしまったので再び章を分けます。

AdDuplex とは何か (1/3)

AdDuplex (2/3) アプリへの埋め込み

AdDuplex (3/3) 自アプリの広告作成