2018.12.31こんにちはー!ニアです。先週から開発していた、すぱこーRSSフィードリーダーのUWPアプリ「すぱこみっく!ユニバース」を先日、Windowsストアにリリースしました。理由は2つあり、1つは先月末にWindowsストアの開発者アカウントを作成できたので、それを機に何か1つUWPアプリを作って公開しようと思ったからです。8がリリースされた時からWindowsストアアプリの開発に興味があり、何か作って公開したいと思っていたのですが、Windowsストアの開発者アカウントを作成するのにクレジットカードが必要で、当時持っていなかった私は、中々その機会に恵まれなかったのです。(「え、学生がクレカ取得するのは簡単じゃないの?」と思う方もいるかもしれませんが、それについてはちょっと込み入った話になるので、ここでは控えさせてください。10をインストール後、開発したアプリを実機にサイドローディングしてぼちぼち動かしていましたが、今月になって、念願のストアアプリ開発&リリースがついに叶うことができました。アプリ開発を極めるなら、ストアへのリリースまでやってみたいよね!もう1つは、すぱこーRSSフィードがリリースされたのを見て、よし、私もすぱーこのアプリを作ろうと思ったからです。WebからRSSフィードを取得して情報を表示するプログラムは今まで沢山していたので、3週間あれば完成できる自信がありました。Phoneを購入したので、モバイル用のアプリも作りたいなと思ったからです。UWPは1つプロジェクトでデスクトップ用やモバイル用に加えて、Xbox用や組み込み用アプリまで作れるのが魅力的ですね。あとは、久しぶりにIT勉強会に参加したいので。本アプリの開発した期間アプリを作り始めてから完成するまでが10日間、審査及びリリース処理が3日間なので、約2週間です。前年度のマスコットキャラ文化祭で作成したライブラリ、すぱーダの動作確認のために作ったプログラムをベースに、RSSフィードを表示するリストと漫画画像を表示するページを作りました。↓また、今年のマスコットアプリ文化祭で、すぱこーリーダーのアプリを作ることを宣言しました。アプリを本格実装(※2日目は別の用事があったので、何もしていません)この期間にかけて、アプリのアクセントカラーをプログラミング生放送と同じ緑系に設定したり、RSS取得中の画面にプロ生ちゃんを召喚したりと、アプリを本格的に実装していきました。先日の記事に書いた通り、偶然通りかかった親に「漫画アプリを作っているの?」とツッコまれたのを機に、漫画表示部分にて左右にスワイプ操作で前後の話に移動できるように、改造してみようと思いました。RSSフィード一覧のコントロールをListBoxからGridViewに換装してみました。スマホの画面であれば、ListBoxでも十分なのですが、画面の大きいタブレットやPCでは、各項目の右側で大きな余白ができるので、グリッド表示にした方がよいと思ったのです。アプリ提出に向けてアプリの開発始めて1週間後、アプリはほぼ完成したので、ストアのアップロードするためのパッケージを作成しました。Windowsストア認定キットには無事に合格することができました。※当時のスクリーンショットを取り忘れたので、本記事執筆時点で最近テストしたバージョンのものを載せています。ページサイクルの見直ししかし実際にアプリをリリースするには、2点の大きな課題がありました。GridViewでアイテムでないところをタップしても、コミックビューに飛ばされるSplitViewのDeisplayModeがCompactOverlayの状態でパネルを開き、パネル内のボタン(Button)を押して、PageのFrameから別のページに遷移すると、その処理を呼び出す前後でIsPaneOpenをfalseに設定したにもかかわらず、設定ページから戻った時にパネルが閉じない前者については、TappedイベントをGridViewに設定するのではなく、そのItemsTemplate内のコントロールに設定することで解決しました。問題は後者で、SplitViewのパネルを閉じるタイミングを変えても、問題は解決しませんでした。false;}パターンAでは、戻るボタンを2回押さないとページが戻らず(しかも設定ページから戻った時点でパネルは閉じない)パターンBでは、パネルは閉じるもののGridViewがフリーズするパターンCでは、戻るボタン1回で設定ページから戻れ、GridViewにも影響はなかったものの、SplitViewのパネルは閉じずSplitViewと画面遷移についてインターネットで色々調べてみました。@ITこの記事を見て、私はアプリのページ構成を少し変えることにしました。具体的には、メインとなるページにSplitViewを配置し、そのContentの中にすぱこーRSSフィード一覧やコミックビュー、設定画面をセットできるFrameコントロールを設置します。そのFrameがページ遷移を行うことで、前述のパネルが閉じない問題が発生しなくなりました。いえ、現在申請しているバージョンでは、SplitViewのパネルにボタンを4つ入れて、どのページからでも遷移できるような構成にしたので、結果オーライね。ちなみにメインのページに設置したタイトルテキストは、Frameが格納しているPageのTagとバインドし、ページ構成を変える前と同じように表示することができました。アプリ提出~リリース大きな問題も解決したので、アプリのパッケージをストアにアップロードし、12日深夜に申請を行いました。先週から開発していた、すぱこーRSSフィードリーダーのUWPアプリを、たった今ストアに提出しました!早ければ、今週中にリリースできます。※当時のスクリーンショットを取り忘れたので、本記事執筆時点で最近テストしたバージョンのものを載せています。審査通るかな?(ドキドキ)待つこと2日間、13日夕方に審査が通り、アプリをリリースできるようになりました。2016年10月13日その後リリースの申請をして14日の夕方、ついに開発したアプリがストアで公開されました。本アプリの工夫点(リリース時のバージョン)本アプリは、RSSフィードリーダーとコミックリーダーの2つ機能を持っています。他にも、以下のような工夫をしています。SplitView+ハンバーガーボタンのデータバインディングによる、ナビゲーションメニューの実装GridViewでウィンドウの幅によるItemsTemplateの選択により、スマホとタブレット、PCでRSSフィード一覧の表示方法を切り替え(前者はリスト表示、後者はグリッド表示)コミックビューにはFlipViewを使用して、前後の話に切り替えられる漫画画像はピンチイン・アウト及びダブルタップで拡大・縮小できる取得したRSSフィードはローカルに保存され、次回以降の読み込みを高速化Webから取得した画像はメモリ内にキャッシュされ、アプリを閉じるまで保持アプリ起動時に、Web上にすぱこーの最新話があるかどうかチェックし、ある場合、トースト通知するまた、マスコットアプリ文化祭に参加するアプリということで、RSSフィード取得中とエラーダイアログ、トースト通知のアイコンにプロ生ちゃんを召喚しました。ちなみに次のバージョンでは、プロ生ちゃんが登場するエリアをさらに増やしました。トースト通知のアイコンは、ノリで「プロ生ちゃん、マジ天丼」の画像を入れてみましたが、実際に表示させて面白かったので、アイコンとして採用しました。天丼美味しいですよね。本アプリ開発で苦労したところ前述のSplitViewの問題も苦労したところですが、もう1つ、FlipView上にセットした漫画画像の拡大・縮小処理(以下の3点)の実装で苦労しました。コミックビューを開いた時は、漫画の画像をウィンドウ中に収まるようにサイズを調整する漫画画像はピンチイン・アウトで拡大・縮小できる漫画画像をダブルタップで、原寸大⇔画面に収まるようにサイズ調整の切り替えができる2.はScrollViewerを入れてズーム機能を有効にすることで実装出来ました。1.が曲者で、ただズーム機能を有効にしただけでは、漫画の画像を拡大するとScrollViewerが画像を強制的に左にスナップしました。そのためスマホでかつ漫画画像を拡大した状態で右側の方を読むには、スクロールした状態で画面に指をタッチし続けなければならなかったのです。こんなユーザーエクスペリエンスじゃ不便ですよね。読めないよ~ScrollViewerのHorizontalScrollBarVisibilityをAuto(もしくはVisible)に設定すると、先ほどの強制スナップ問題は解決されましたが、今度はコミックビューを開いた時に、画像が原寸大の状態で表示されてウィンドウの中に収まらない問題が発生しました。画像を開くたびに一々縮小しなければならないのって・・・(汗)。こんなユーザーエクスペリエンスじゃ、ストレスが溜まってしまいますよね。解決方法を探していた所、とてもいい記事が見つかりました(タイトル名を見て、もしかしたらと思い、記事を開いたらドンピシャでした)。ralicその記事によると、ViewModelにPageの幅と高さを格納するプロパティ(※値のセット時にプロパティ変更通知をするようにします)を追加し、ImageのMaxWidthとMaxHeightにデータバインディングすることで解決するとのことでした。実際に本アプリに実装してみると、問題は解決することができました。コンテンツの幅を表します。コンテンツの高さを表します。}}本アプリでは、FlipViewの幅と高さをImageのMaxWidthとMaxHeightにデータバインディングしています。SpacoContentsView1は、このPageの名前です。spacomicComicViewModelは、SpacomicComicViewModelのインスタンスです。FlipViewのサイズが変化した時に実行します。Ralicさん、ありがとうございました!なお、3.はScrollViewerのDoubleTappedイベントで、ZoomFactorの値が1.0が1.0より大きいかを判別し、拡大・縮小処理を行うようにしました。おわりに今回は、すぱこみっく!ユニバースのリリース後記を色々と書きました。UWPアプリ開発で、不安とワクワク感でいっぱいでしたが、実際にストアへの提出までやってみて、UWPの画面遷移やSplitView、GridView、FlipViewコントロールの使い方、パッケージ作成、ストアへの申請など、新しいことを色々学ぶことできました。Playに公開してみたいです。あの時「アプリをリリースしたら、今度のプロ生勉強会でLTする」と、Twitterで宣言したのでした。半年ぶりに参加するプロ生勉強会が楽しみです。ニア、UWPアプリを作るってよ)こんにちはー!ニアです。PlayのDeveloperアカウ...アプリ開発すぱーダにクロスプラットフォーム・Xamarin用とUWP用のパッケージが加わりましたこんにちはー!ニアです。昨年末にリリースしたすぱこーRSSフィードリーダー「すぱーダ(SPADA)」に新たな仲間が加わりました。UWPアプリWindowsサンドボックスの構成ファイルが簡単に作れるUWPアプリ「WSBマネージャー」をリリースしました!こんにちはー!ニアです。先日、3年ぶりにUWPアプリを作り、リリースしました!アプリ開発C#とXamarinでAndroidのウォッチフェイスアプリが作れるプロジェクトテンプレートを作りました!こんにちはー!ニアです。Wearのウォッチフェイスアプリが作れるプロジェクトテンプレート「Chronoir_net.Chronica.WatchFaceTemplates」を作りました。SPADAシリーズは2022年1月をもちまして、開発を終了いたしました。2016年冬のリリースよりご愛顧いただき、誠にありがとうございました。2015)こんにちはー!ニアです。2015でプロジェクトを作ろうとしたら、以下のようなエラーダイアログが現れたのです。コメントをキャンセルメールアドレスが公開されることはありません。※サイト上に表示された文字を入力してください。コメントデータの処理方法の詳細はこちらをご覧ください。Tomonaka)湘南生まれのITエンジニアです(最近はブロックチェーン技術を探究中)。C#/PHP/TypeScript/Golang/Docker/Solidityを利用。紅茶とコーヒー、シラス丼が好き。Chronoir.net.メニューホームコンテンツアプリWordPressのプラグイン旧Chronoir.netの記事プログラミングアプリの活用法アプリ開発Web開発Aboutプロフィールお問い合わせプライバシーポリシーホーム検索トップサイドバータイトルとURLをコピーしました。