主にプログラミングに関して。Python, .NET Framework(C#), JavaScript, その他いくらか。
記事にあるサンプルやコードは要検証。使用に際しては責任を負いかねます

Windows 10: シングルページWebアプリをユニバーサルアプリ化 - Project Westminsterを試す

                
 Windows10のリリースを前にしてさまざまな新機能が発表されてきた。そのなかでiOSアプリをWindowsにほぼそのまま移植することを可能にするProject Islandwood、同様にAndroidアプリのProject Astoriaは開発者間でも話題となった。これらはWindowsのモダーンなアプリが少なく、そっち方面のアプリの数ではiOSやAndroidに水をあけられていることの対策だろう。
 そんなWindowsデバイスのアプリの数の拡充策の一つに"Project Westminster"がある。これはブラウザで動作するシングルページのアプリケーションをユニバーサルアプリ化してしまおうというもの。ぼくはこれを初めて聞いたとき、ブラウザで動くものはブラウザで使えばいいじゃんと思った。だが世の中ではそう考えない人がけっこうスマフォユーザにいて需要があるらしい。どうやらアプリとしてパッケージ化されていないとダメで、ブラウザを使うという考えは基本的にないようだ。地図などはわからないでもないが、ショッピングでさえ個別のサイトがあろうとアプリ化されたものを使いたいらしい。・・・手間だ。そんなわけでWestminster
http://japan.zdnet.com/article/35067109/


 ぼくはいつだか外国のアマゾンでCDやDVDが日本より安く買えると聞いて、アマゾンのAPIを利用して日、米、英のお値段比較が送料込みで容易に計算できるサイトを作った。サイトと言っても操作はJavaScriptによるページ内容の変更で反映されるので、シングルページで使えるようになっている。
http://amazonstinger.appspot.com/
1507121941305.jpg
 Westminsterをこれで試してみる。チュートリアルは下記にある。
http://microsoftedge.github.io/WebAppsDocs/en-US/win10/CreateHWA.htm

 やることはチュートリアルをざっと読んでも簡単そうだが、VisualStudioがあるおかげでさらに難しくない。いつものアプリと同じく新しいプロジェクトとして指定のテンプレートを選び、自動で作成されているプロジェクト内のディレクトリやファイルの一部を消し、マニフェストファイルのXMLをちょっと書き足すだけだった。チュートリアルを読みながらやって5分以内で済む程度。
1507121818010.jpg

デバッグ実行してみる。
1507121818288.jpg
 サイトとして公開していたものが、一つのアプリとして動作した。すごく楽に。あとはストア登録ぐらいで公開にはもっていけるだろう。

 チュートリアルではここからユーザへの通知をトーストというコントロールを使って行うように書き換えている。

 結果としておそろしいほどに簡単にWebサイトからユニバーサルアプリを作ることができた。ただ元のサイトがウィンドウ幅などの面で他デバイス対応などを考えていないものだったので、そこらはbootstrapなどを使ってやっておかないとユニバーサルアプリとしていろんなデバイスで動かすのが不便になりそうだ。

.NET Framework: デスクトップビデオプレーヤーアプリを超フラットに

                
 Win10のユニバーサルアプリでひさびさにXAMLを触った反動か、ずっと前に作った.NETのデスクトップビデオプレーヤーをいじりたくなったのでやってみた。おもにやったのは各種GUIアニメーションの設定のしなおしや追加。

 ビデオプレーヤーなのでウィンドウいっぱいにビデオを表示したいと考えていたのでウィンドウの余計な装飾を取っ払って背景にビデオ映像をはめこみ。再生ボタンなどの各種コントロールを透過を使ってビデオ背景の上に配置。マウスがウィンドウから外れると各種コントロールがフェードアウトしてビデオ表示のみになる。コントロール表示状態のときは他のフラットデザインのアプリと同様にウィンドウに細いボーダーがついている。コントロール表示がフェードアウトするとこのボーダーもなくなって本当にビデオのみの表示になる。

1506282046424.jpg

1506282045341.jpg

Windows 10: ユニバーサルアプリを作ってみる

                
 Windows10のプレビューにVisualStudio2015のRC版を入れてある。これがどんな具合か調べたかったのでついでにユニバーサルアプリというのを作って試してみる。ユニバーサルアプリはおそらくWindows8でストアアプリと呼ばれていたもの。Windows10という名称でOSを多デバイス展開し、その上でならどのデバイスでも動けるようにしたのでユニバーサルという名称になった・・・という経緯のはず。
 ずっとWin7を使っていたのでストアアプリは作ったことがない。.NET FrameworkでならWPFアプリをいくつか。そのWPFアプリで作っていたビデオプレーヤーアプリをユニバーサルアプリとして再構築してみることにする。

 先に一つの結論を書いておく。ユニバーサルアプリは一つのアプリでさまざまな画面サイズに対応という特徴がある。VisualStudioにエミュレータがついてくるのでさまざまな画面サイズでデバッグを試せるというのが機能の一つだが、これは仮想マシン上でWin10を動かしている場合にはできないようだ。ぼくのWin10は仮想マシン上なのでこのエミュレータによるデバッグができなかった。



 ユニバーサルアプリを作るにあたってやることは、いつものVisualStudioアプリでやることと変わらない。新しいプロジェクトとしてテンプレートにユニバーサルアプリがあるのでそれを選んでプロジェクトを初期化。そしたら作成されたプロジェクト内にUIファイルやコードファイルができているのでそれを書き足してデバッグを行っていくのが基本。

 UIは基本的にXAMLで書く。StackPanelなどWPFと同じ要素が使えるけど、WrapPanelなどなかったりでWPFそのまんまでというわけにはいかなかったりする。

 WPFアプリを書いていたときとの違いはなんといっても非同期処理。msdnの記事を参考にぼくもWPFアプリのUIをいじるのに非同期処理を入れたことがあったが、UIスレッドとは別のスレッドを呼んで新しいUI要素で使うデータを加工して、変更を加えたい要素オブジェクトのInvokeメソッドを呼んでそこにデリゲートを渡して云々と慣れればなんてことはないが、かつては書き方としてはけっこう手間があった。ユニバーサルアプリではC#の進化によってasyncやawaitというキーワードを使って書くことができ、Invokeメソッドなどを呼ばなくてもUI変更もできていた。けっこう楽。このあたりWPFアプリ作成で使えるようになってるのか知らないので今後調べておきたい。とりあえずユニバーサルアプリではC#の進化によって非同期処理の導入がわりと簡単にできるようになっているということで。

 ファイルの入出力方法の変更も大きな違いだろう。WPFアプリではそれまでの基本的なWindowsアプリと同じで、権限さえひっかからなければ、とくにファイル入出力の宣言などを前もってする必要もなくやり放題?だった。なのでビデオプレーヤーを作ったときは、マイビデオディレクトリへのパスを割り出して、DirectoryInfoクラスを使ってそのパス下のファイル情報を収集してビデオファイルを集めてというふうにやった。ユニバーサルアプリではアクセスできるファイルが基本的に制限がかかっていて、使いたいファイルやディレクトリはあらかじめ宣言しておかなければならない、package.appxmanifestファイルで。ビデオファイルがほしい場合は
Capabilitiesノードに<uap:Capability Name="videosLibrary"/>を加える。<Capability Name="videosLibrary"/>のように書けるとどっかの公式ドキュメントページに例があっても、ページをよく見るとWin10インサイダープレビューでは前者のように書けとされている。これがわからずけっこう手間取った。
https://msdn.microsoft.com/en-us/library/windows/apps/dn934783.aspx


作ったのが下記のビデオプレーヤーアプリ。

Win10でデフォルト搭載のビデオアプリはライブラリを表示するたびにビデオ再生が停止する。ビデオを再生しっぱなしでライブラリを表示するために透過や要素のスライド、フェードを入れた。


 VisualStudio2015がどの程度できているかを試したくて、ユニバーサルアプリを作ることでそれをやってみた。途中でユニバーサルアプリの新しいUI要素がまだテンプレートに入っていないなどの情報をドキュメントで見ることはあったが、ユニバーサルアプリ自体はなんの問題もなく作れた。安定性においても、作ったものが小規模なものだったこともあるだろうが、動作に問題が出ることはなかった。
 ユニバーサルアプリ作成においてはWPFを作った経験があればけっこう使いまわせる知識はある。ただ微妙な差異が出てきてそれが面白かったり調べる手間でちょっと焦らされたり。WPFとユニバーサルアプリでは動作デバイスやファイル管理などを考慮すると適当な用途というのが違ってくると思うので適宜使い分けたい。たとえばPC環境でしか使わないという前提の業務アプリがWPFで作ってあるならそれはユニバーサルアプリに移植する有効性は薄いだろうし、タブレットでしか使わないアプリをこれから作るならユニバーサルアプリのほうがいいかもしれない。

ASP.NET 5の情報を探っておく

                
 次期リリースされるASP.NET 5ではLinux、Mac対応の.NET Coreの登場やらなんやらで、これまでを踏襲しつつもまた新しい変化が盛り込まれている様子。Windows 10が出たときにぼくはそれなり早く移行したいと考えている。なので開発環境はVisual Studio 2015になり、ASP.NET 5開発を行えるので、それがどんなものになっているかを調べておく。
 Webアプリケーション作成にはスクリプト言語が人気だが、TwitterはRubyから移行があったしFacebookもPHPの独自の実行環境を用意した。一方でStackOverflowはASP.NET MVCを使い続けているので、それでやりたいことはできているということだろう。それを考えるとASP.NETを選択の一つとして持っておくのはありだ。ということで最新版となるASP.NET 5。


1..NET Framework上でも.NET Core上でも、つまりWindows上でもLinux上でも動くASP.NET 5
 マイクロソフトは従来の.NET Frameworkに加え、オープンソースの.NET Coreを発表した。.NET CoreはASP.NET 5も走らせることができる.NET Frameworkのサブセットとされていて、動作環境にはLinuxとMacを含んでいる。つまりはサーバとしてよく使われているLinuxでもASP.NETアプリケーションを動かすことができる。Windows専用?そんなことはない。
 一つのフォルダに必要なファイルをすべてまとめられるので、Windowsで作っておいてLinuxに移すというのも楽だろう。ファイルをまとめておけばいちいち.NET Coreなどをインストールしなくても済む。
http://www.publickey1.jp/blog/15/macos_xlinuxnet_core.html


2.MVC、Web API、Webページの統合
 ASP.NETを動かせる環境に変化があった。ではASP.NET自体はなにが変わったか。
 これまではASP.NETでWebアプリを作ろうとすると、Visual Studioから「MVC、Web API、Webページのどれにする?」と問われた。ASP.NET 5ではWebアプリを作る機能が統合されたので、この問いがない。これまで分離していたものが相補的に使える。
https://weblogs.asp.net/scottgu/introducing-asp-net-5
http://codezine.jp/article/detail/8537


3.Visual StudioによるBower、Grunt、Gulpのビルトインサポート
 クライアントサイドのJavaScriptやCSSをもにょもにょしたいときに使うBower、Grunt、GulpがVisual Studioのビルトインサポートとなった。このあたりのものはそれぞれ日本語解説が出てきたので使いたければ学ぶ。GruntとGulpは似ていて競合しているようなのでとりあえずどっちかだけ学んでもOKだろう。


 とりあえずASP.NET 5がどんなものか動かして試したいという場合はドキュメントを参照。
http://docs.asp.net/en/latest/index.html#
……ドキュメントがSphinxのReadtheDocsテーマで作られている。ぼくも自作ライブラリのドキュメント作成に使って便利さを痛感していたのでなるほどなーと感じる。AzureでDjangoデモの記事があったりPythonのVisual Studioサポートツール作ったりで、MSのPython利用?がかなり表に出てきているようにも思う。Windowsユーザがスクリプト言語選びで迷ってたらPythonもありと言えるかもしれない。

.NET Framework, Mono: 手の込んだUIとやら

                
 前の記事で触れたWeb技術で作ったちょっと手の込んだUIというのが、C# + GTK#で書くとどれくらいのものになるか気になるので書いてみた。というかGTK#を使ってWindowsでもLinuxでも動くGUIアプリケーションを試すネタが欲しかっただけかもしれないが。
 スクリーンショットを撮るデスクトップアプリのUI部分を作る。マウスドラッグで矩形を描いて、その部分のスクショを得るって具合。詳しくは前の記事にあるリンクを参照。



1505261820460.jpg


using System;
using Gtk;
using Gdk;

class TWindow
{
Gtk.Window window, window2, window3;
Label label_x;
int s_x, s_y;

public TWindow()
{
window = new Gtk.Window("gtk sharp");
window.Decorated = false;
window.Opacity = 0.01;
window.SetDefaultSize(500, 500);
window.Move(-50, -50);
window.AddEvents((int)(Gdk.EventMask.ButtonPressMask
|Gdk.EventMask.ButtonReleaseMask
|Gdk.EventMask.PointerMotionMask));
window.ButtonPressEvent += pressed;
window.ButtonReleaseEvent += released;
window.MotionNotifyEvent += mousemoved;
window.Show();

window2 = new Gtk.Window("rect");
window2.Decorated = false;
window2.KeepAbove = true;
window2.SetDefaultSize(0, 0);
window2.Show();
window2.Opacity = 0.01;

window3 = new Gtk.Window("size");
window3.Decorated = false;
label_x = new Gtk.Label();
window3.Add(label_x);
window3.ShowAll();
window.KeepAbove = true;
}

private void pressed(object obj, EventArgs e)
{
int x, y;
window.GetPointer(out x, out y);
s_x = x;
s_y = y;
window2.Resize(1, 1);
window2.Move(x, y);
window2.Opacity = 0.7;
}

private void released(object obj, EventArgs e)
{
window2.Opacity = 0.01;
s_x = -1;
}

private void mousemoved(object obj, EventArgs e)
{
int x, y;
window.GetPointer(out x, out y);
window3.Move(x, y + 30);
label_x.Text = x.ToString() + " * " + y.ToString();
if (s_x != -1)
{
var w = x - s_x;
var h = y - s_y;
window2.Resize(w, h);
}
}
}

class Sample
{
static void Main()
{
Application.Init();
var window = new TWindow();
Application.Run();
}
}

.NET Framework 4.0以上とGTK#のインストールが必要。Linux MintではMonoさえインストールしておけば、あとはWindowsでコンパイルしたものを移すだけで動いた(Linux Mint Debian Editionで確認。Mono Runtimeでファイルを実行)。

 タスクバー上の表示アイコンや何枚か使用しているウィンドウの表示序列などで詰めるべきところはあるが、大筋それっぽいものはできた。コードは80行程度。オリジナルの完全コピーになるように近づけるのにマウスカーソルいじりと細かい詰めの作業を行っても、そこまで長大なコードにはならないだろう。
プロフィール

h

Author:h

最新記事
リンク
作ったものなど
月別アーカイブ
カテゴリ
タグリスト

検索フォーム
Amazon