Webアプリを創る

5374 徳島市版を作成してみました

2015年5月17日

Windows 10 Insider Preview と Visual Studio 2015 RC のテストを兼ねて、Code for Kanazawa が作った「いつ、どのゴミが収集されているのか」をわかるWebアプリ 5374.jp の徳島市版を作ってみました。

Windows 10 も VS 2015 も自分の使った限りでは、エラーが発生することなく使えています。今年の夏に発売予定ですが、準備の方は順調に進んでいるようです。VS 2015 で、ASP.NET 5 については、あまり使っていませんが、ASP.NET 4.6 では製品版といってもいい状況で、実際の運用環境で使ってもいいという "Go-Live" ライセンスになっているというのもうなづけます。

5374.jp については、徳島市の場合は隔週及び4週毎のごみの収集があるのに、それに対応していないため、カスタマイズをしてみました。詳しくは、GitHub の方に記載しています。

徳島市版を作成した理由の一つには、JavaScript をどこまで使うのがいいのかということに対するテストという意味合いもあります。結局は、JavaScriptにどれぐらい慣れているのかということが一番大きな要素になると思いますが、自分の場合はロジックについてはC#で書いた方が楽です。JavaScript は一般的には手軽なのですが、Date を使うのは結構ややこしいです。自分の場合は、メンテナンスまで考えると今までどおり JavaScript は、UI 部分だけで使った方がいいと思いました。

5374.jp の場合、収集日を通知してくれる機能が欲しいと思うので、Cordova で作るのがいいのか、Xamarin で作るのがいいのか試してみたいと思っています。1月にアプリを作りかけたときは、表示の項目数が多かったので、Xamarin.Forms ではレイアウトの処理に時間が掛かりすぎました。5374.jp の場合は、それと比較するとかなり簡素なので Xamarin.Forms でも余り問題がないと思うので、比較するのには丁度いいと思っています。

フリーになって2年になりました

2015年4月17日

フリーになって2年が過ぎました。1年前には、Web アプリをスマートフォンアプリにしていく作業を重点的にしようと思っていますと書きました。でも結局スマートフォンアプリを作ることは手間がかかりすぎるので中止状態です。やっぱり自分としては、このブログの題名のとおり Web アプリ中心にやっていこうと思っています。

去年は「統計メモ帳」の方は放置状態に近いですと書きましたが、やっと月6万PVのサイトになりました。「統計メモ帳」のサイトについてあまり多くのことをする時間はありませんが、少しずつでも改善していこうと思っています。それと同じように簡単でもいいからスマートフォンアプリも作れたらいいなと思っています。

今年は Windows 10 が発売予定で、来年の1月には IE8 がサポート切れになります。また、ASP.NET 5 も正式に公開予定です。それで、今年度の重点は HTML5、CSS3、TypeScript でフロントエンドを改善することだと思っています。デザイン+プログラムを一人でするのは厳しいですが、コミュニケーションコストを考えると一人でしようと思っています。

ASP.NET 5 Preview を使ってみた

2015年3月2日

Visual Studio 2015 CTP 6 が公開されるとともに、スコット・ガスリー氏が「Introducing ASP.NET 5」とういうブログを公開しました。その記事を読んで、今回の ASP.NET 5 は、なかなか面白そうだと思って、Visual Studio 2015 CTP 6 をインストールして、ASP.NET 5 を使ってみました。ASP.NET 関係で使ってみたいなと思ったのは本当に久しぶりのことです。余談ですが、Visual Studio 2015 CTP 6 は、容量が多くてインストールが大変でした。コントロールパネルをみると容量が実に11.5GBになっていてマンモスです。

image

まず、既存のWEbアプリの移行にどれぐらい手間がかかるかを、ASP.NET MVC 4 で作成した weather.ecitizen.jp を使って試して見ました。Visual Studio 2015 CTP で ASP.NET 5 の」プロジェクトを作ると左の図のように、ファイルが wwwroot の静的部分とASP.NET部分に別れるのが大きな特徴です。現時点では移行ツールはないのですが、Models、Views、Controllers といったメインの部分は、コピーして少し修正してやれば動作するので、移行に少し手間はかかるけどそれほど難しくはないと感じました。

クライアント関係のライブラリーの管理については大きく変更されています。ASP.NET のサイトに「Manage Client-Side Web Development in Visual Studio 2015, Using Grunt and Bower」という解説がでているので、それを見て設定してみました。ライブラリーの管理は、NuGetではなく Bower で行い、その後の設定を Grunt でするようになっています。Bower、Grunt も実際に使ってみるとかなり使いやすいツールです。Visual Studio 2013 では、そういう作業には NuGet と Web Essentials 2013 を使っていましたが、Web Essentials にはまだバグらしきものがあるので、何でも独自に作成するよりは実績のあるツールを使った方が確かにベターだと思います。Web Essentials 2015 CTP 6 も公開されていますが、以前よりもずっとシンプルになっています。また、LESS、Sass、CoffeeScript 等のコンパイル機能は、Grunt 等のツールを使えということで、対応しないそうです。

Visual Studio 2015 では、従来の ASP.NET MVC 5 と互換のある ASP.NET MVC 5.2 の Webアプリケーションも開発できますが、HTML 5 を使うような Webアプリの開発だと Bower、Grunt を使わないと不便になるという気がします。自分のような場合だと、Visual Studio 2015 に移行するときには、できるだけ早く ASP.NET 5 に移行した方がベターなように感じました。

最後に、現在の weather.ecitizen.jp と ASP.NET 5 に移行したもののスピードを「WebPagetest」を使って比較してみました。ASP.NET 5 アプリは、.NET Core CLR か 従来からの .NET CLR でも発行できます。.NET CLR で発行すると容量は約100MB、.NET Core CLR だと約70MBあります。それを Windows 2012 R2 サーバーにインストールしました。結果は以下のとおりで、上が ASP.NET 5 アプリで、下が従来のものです。DNS Lookup は、ASP.NET 5 アプリの方が時間が掛かっていますが、それ以外ではレスポンスの時間には特に差はありませんでした。DNS Lookup については、サブドメインを新たに作成したばかりなので伝播があまりできていなかった影響がでているかもわかりません。ASP.NET 5 はまだ CTP の段階なので、リリース版までにはチューンナップがされると思うので処理速度の面でも期待したいと思いす。

image

image

 

 

オープンデータ先進国イギリスの主要都市のオープンデータの状況を調べてみた

2015年2月16日

最近、地方自治体でもオープンデータの利活用に力を入れるところが増加してきたようです。じんぐる氏がブログに「オープンデータ先進県「福井」の残念なデータに思う」という記事を書いていたので、オープンデータの公開をどうしたらいいのかを少し調べてみました。

まず、オープンデータの先進国であるイギリスの主要都市のオープンデータの状況をしらべてみました。都市については、ロンドンとそれに続く「Second city of the United Kingdom」の8都市をまず選択しました。残り3都市は人口の多いところを選びました。

調べてみると、カーディフ以外の11都市は、オープンデータのホームページを持っていました。公開しているデータとして「500ポンド以上の支出」が目につきましたが、「Local Government Transparency Code 2014」で、地方自治体が公開すべきデータになっているのが影響しているのかもしれません。

都市名リンク 専用サイト 主な公開形式
ロンドン(London) リンク CMS xls, csv, pdf, html
ベルファスト(Belfast) リンク   xml, rss
バーミンガム(Birmingham) リンク   csv, xlsx
カーディフ(Cardiff) -    
エディンバラ(Edinburgh) リンク GitHub csv
グラスゴー(Glasgow) リンク CKAN csv, xlsx, geojson
リーズ(Leeds) リンク   xls, csv
リバプール(Liverpool) リンク   xlsx
マンチェスター(Manchester) リンク CMS csv
ブリストル(Bristol) リンク   csv, pdf, html
シェフィールド(Sheffield) リンク   準備中
ブラッドフォード(Bradford) リンク   準備中

xml を中心にして公開しているのは、ベルファストだけです。ベルファストはデータセットが6つ公開し、その内の4つがXmlです。xml はメタデータを作るのが大変なので、地方自治体では多くのデータセットを公開するのは難しいようです。また、csv で公開するのがいいのか、xls, xlsx で公開するのがいいのかというのは、イギリスでも微妙な問題のようで、都市によって分かれています。

公開方法については、都市のWebページの中で公開しているところが多いですが、専用のサイトを作っている所もあるという状況です。また、data.gov.uk で地方自治体もオープンデータを公開できるようになっていて、ブリストルはそれを利用しています。こう見てくると、イギリスにおいてもオープンデータについては課題が多いように思います。

じんぐる氏が残念だといっている坂井市のケースでは、珍しくxlmでデータを公開していると思ったら、既に「坂井市WebMap」というものがあってそのデータを使っているためのようです。坂井市WebMapは、坂井市のさまざまな位置情報を電子地図にて提供するWEBシステムだそうで、そのデータは KMLです。例えば、津波避難場所情報については、以下のようになっています。

http://www.city.fukui-sakai.lg.jp/map/data/hazard/hinan_tsunami.kml

自分の疑問は、なぜKMLで公開しないの?どうしてわざわざXMLにするの?ということです。KMLの方だと KML のスキーマがあるのでデータの構造は理解しやすいです。また、KMLということであれば、<description>タグの中を構造的なタグにしない理由もわかります。それに、順次公開予定となっているデータもすぐに公開できます。

地方自治体がオープンデータを公開する場合は、最初はできるだけ既存のデータを使った方がいいと思います。市町村にはITエンジニアは殆どいないのでエンジニアフレンドリーなデータを最初から公開できるということは期待しない方がいいでしょう。また、改善を要求する時には、コストのことは考えた方がいいでしょう。xml をきれいな形で公開しようと思えば、「利用者側にこんな不毛な苦労が必要なのか」という下のようなコードを、市町村側で作成しメンテナンスしていく必要がある場合が多いと思います。それでは、市町村側もこんな苦労するんだったらデータなんか公開しない方がいいと思うのではないかと思います。坂井市のこのデータであれば、空間データなので今は既存の KMLで公開しておいて、将来的には協力して 坂井市WebMap と共通で GeoJSON に持って行くのがいいように思います。

var data = attribute.Value
         .Split(',')
         .Select(x => x.Split('='))
         .Select(x => new
         {
             Key = x[0],
             Value = x[1]
         })
         .ToArray();

オープンデータは、オープンソースと同じで協力して育てていくことが重要だと思います。それに、坂井市のレベルは、決して絶句するレベルではないと思います。

Bootstrap を使ってレスポンシブ Web でモバイル対応しています

2015年2月14日

最近は、「統計メモ帳」のサイトのモバイル対応をしています。当初は、ユーザー エージェントによる振り分けで対応しようと思っていたのですが、作業中にレスポンシブ Web でもできるのではないかと言うことに気づいて、テストしたら問題がないようなので、Bootstrap を使って、レスポンシブ Web でモバイル対応を進めています。

image

統計メモ帳だけで、テンプレートが60ページあるので、もし振り分けにしていたら、テンプレートが120ページになったということで、後の管理を考えると、できるだけレスポンシブ Web で対応した方がいいと思っています。

自分が管理で一番大変だと思っているのは、テンプレートの修正や CSS の管理です。今回もまだ50ページ以上のテンプレートの修正作業が残っていて、かなり大変な作業です。プログラムの部分は、Visual Studio が結構優秀なのと、ソースは Git に入れてあるので意外とスムーズにいっています。

CSS には、デザイン能力も必要ないし、変数も関数もないのでプログラムの能力も必要ないしで、3ヶ月も勉強すれば誰でもできると思われていて、webコーダーは最底辺の職種になっています。そのためかどうかは分かりませんが、CSS の管理はあまり考えられていなかったと思います。しかし、CSS には、名前空間がないので、そのクラスがどこで使われているかを調べるのに手間がかかります。だから本当は命名規則をきちんとしておくことが非常に重要です。

Bootstrap を実際に使ってみて感じたことは、普段に使うコンポーネントを一通り作ってくれて、そのコンポーネントに名前をつけてくれたということが偉大だと思います。CSS のクラスの名前にデファクトスタンダードを作ったということは大いに評価すべきで、以後の管理は少しは楽になると思います。

Bootstrapは、所詮はコンポーネントの集まりで、利用する人の能力によってどうにでもなります。Bootstrap は、カスタマイズをするのが難しく Bootstrap 臭がするからダメだという人は、CSS をカスタマイズする能力がない人です。自分のようにデザイン能力がない人間が使えばしょぼいデザインのものしかできません。

レスポンシブ Web では、以前は Google アドセンスを入れるのが難しかったのですが、レスポンシブ広告ユニットが使用できるようになっているので、それほど問題なく導入することができました。