「統計メモ帳」のサイトが、1月は月間で6万PVを超えることができました。11月から約1万PVの増加です。

それは良かったのですが、1月の末にウェブマスターツールで「http://ecitizen.jp/ でモバイル ユーザビリティ上の問題が検出されました」というメッセージがきました。それで、ウェブマスターツールで検索クエリを見てみると、下の図のようにモバイルからの検索が半分を占めるようになっていました。

統計メモ帳では、セッションの割合ではモバイルからのアクセスは29%しかなかったので、モバイルからのアクセスを考慮していなかったのですが、モバイルからのアクセスを見逃していたようです。

それで、統計メモ帳でもモバイル対応の作業を始めました。今までは、モバイル対応に jQuery Mobile を使っていたのですが、今回は、Bootstrap を使おうと思っています。統計メモ帳では、jQuery Mobile のモバイル的なデザインはあまり必要ではなく、グラフと表がうまく表示できればいので、Bootstrap の方が軽くできると思っています。

また、Bootstrap を使うといっても、単純にレスポンシブにするというのではなくて、データ量をPC用よりかなり減らさないといけないので、ユーザー エージェントによる振り分けもしようと思っています。

Xamarin.Forms は、iPhone と Android の両方のアプリが一つのソースで作れるという魅力的な開発ツールです。それで、アプリを作ろうと思って試してみました。

自分にとっての一番の問題点は、Xamarin.Forms の画面表示が意外と遅いことです。Grid と Label を使って、カレンダー1年分の表示をする下の図のようなプログラムを作って、Nexus 5 で表示させてみたら、ボタンを押してから表示されるまでに3秒以上かかりました。iPhone 5s だとそれよりはかなり早くなりますが、それでも1秒以上かかっている感じです。

今回のカレンダーだと日付だけですが、実際のアプリにするためには、さらに色を変えたりアイコンを追加したりする処理が必要なので、日付だけでこれだけ時間が掛かってしまうと厳しいと思います。

ところが、WebView を使って HTML の Table でカレンダーを作ってみると、今度はほとんど遅延せずに動作します。Grid+Label より WebView の方が遙かに早いようで、Android では特にその傾向が強いように見えます。

なお、プログラムは、GitHub の方に SpeedTest として公開していますので、興味のある方は実際に試して見てください。

Xamarin.Forms の Grid+Label を使った画面表示が遅い原因を調べてみると、stackoverflowに Why is Xamarin.Forms so slow when displaying a few labels (especially on Android)? という質問があって、どうも Label の表示が遅いようです。

stackoverflow 方では、40個のLabelで、表示に 100ms 以上かかり、Android の場合は約300ms かかるとなっています。今回のカレンダーの場合は、約460個のLabelをつかっていて stackoverflow の約10倍なので話としては一致しています。

stackoverflow には、改善策も書いてあます。Xamarin.Forms で処理を速くする方法としては、UI にはできるだけネイティブを使えばいいようです。

自分の場合は、Web の方を主力にしたいので、UI にネイティブを使うのは時間的にはかなり厳しいです。それで、当面は WebView を使ったハイブリッドアプリを検討していこうと思っています。そして、Xamarin.Forms の処理が早くなることに期待したいと思います。

今年初めてのブログなので、今年の抱負とかを書こうと思ったのですが、昨年の後半はスマートフォン・アプリを作ろうと思っていろいろ検討してきたので、そのメモをしておきます。

Cordova

PhoneGap といった方が有名ですが、HTML+Javascriptの技術を使って、iPhone/Androidのネイティブアプリケーションの開発が可能になります。以前に使ってみたときには、デバッグがしづらいと思っていたのですが、Microsoft から Visual Studio Tools for Apache Cordova が公開されて、開発がすごく楽になっています。Webアプリにプッシュ通知だけをつけたい場合のように、少しだけネイティブの機能を追加したい場合には適していると思います。

Visual Studio Tools for Apache Cordova は、VS の　Express ではインストールできません。しかし、昨年の11月に個人や5人以下の企業向けに Visual Studio Community 2013 が公開され無料で利用できるので一度試して見るといいと思います。

Xamarin

Xamarin は、C#やF#といった.NET系の技術を用いてiPhone/Android のアプリ開発を可能にするクロスプラットフォームツールです。Xamarin 自体は、各プラットフォームの API の薄いラッパーで、アプリのUIを作る場合には各プラットフォームのことを知っていないと作れないのでかなり苦労しています。Model の部分は共通で使えるので、アプリ側で多くのロジックが必要な場合には適していると思います。

昨年の5月に公開された Xamarin.Forms は、UI 部分も共通化しようというもので魅力のある製品ですが、実際に使ってみるとまだまだベータ状況という感じがしています。製品として早く成熟して欲しいと思っています。

Swift

iOS のソフトらしいヌルヌル動作するアプリを作りたければ、Apple 純正の Swift を使うのがいいようです。C# を知っていれば Objective-C よりはモダンになっているのでかなり取っつきやすいと思います。Apple が Swift を公開したことに対して、また独自の言語を開発してという非難をする人がいますが、iOS の特徴を生かすための言語が必要というのはやむを得ないことだと思います。

ベストな開発環境を確認するのはその環境を熟知していないと無理なので、結局は自分の能力や作りたいアプリの特徴に応じてだいたいのところで選択するしかないというのが実態のようです。今年は、Webアプリのスマートフォンアプリ版を作りたいと思っていますが、最初は、Xamarin から始めようと思っています。最終的にはどうなるかはわかりませんが、ぜひ公開できるようにしたいと思っています。

Xamarin から始めようと思っているのは、現在は ASP.NET MVC で Web サイトを作っているためです。Cordova を使うためには、Razor が使えなくなって、HTML + CSS + JavaScript だけで画面を作る必要があります。そういう制作方法に変更してもいいとは思うのですが、Xamarin であれば、WebView で Razor も使えるので Web アプリと iOS/Android アプリの共通部分を増やせるのではないかと思っています。

「Rubyで経済指標自動巡回プログラム作成しました。 - 人生、徒然なるままに。」というブログをみて、このブログの筆者は、.Net や Java を使えるのに、なぜ、新たに勉強してまで Ruby を使ったのかということに興味があったので、同じようなものを C# で作り、GitHubで公開(https://github.com/awoni/GetMarketCalendar)してみました。

今回のプログラムでは、データの取得には HTTPClient を使って直接 Url をたたいて該当ページのHTMLを取得しています。一方で、Ruby の方では、「フレームワークとしてCapybara、レンダリングドライバー・javascriptドライバーとして poltergeist, PhantomJS」を選択しているそうで、プログラムでボタンをクリックして取得したデータをもとに解析しています。今回のデータの場合は、HTML のみで必要なデータが取得できましたが、JavaScriptを使ったインターラクティブな Webページが増加しているので、Javascriptが動作する環境でブラウジングしてデータを取得する必要がある場合も多くなってくると思います。

Html のパースには、Html Agility Pack を使っています。LINQ を使って記述していますが、意外と簡単にパースすることができます。

データの保存については、データベースではなくて、そのままで API として使いやすい Json で保存するようにしてみました。 Newtonsoft の Json.NET でシリアライズしています。設定ファイルについても、Json にしてみました。

その他に NuGetのパッケージとしては、NLog を使っています。Html のパースルーティンでは、どの程度までエラー処理をすべきかが問題になりますが、画面の変更に対応しようと思うとプログラムがどんどん複雑になってくるので、自分としては、プログラムは余り複雑にせずに、画面の変更によるエラーに早く気づくようにした方がいいのではないかと思っています。NLog をログのメール送信にも対応しているので、こういう点に関しては便利だと思います。ただ、今回公開しているプログラムでは、時間の関係でとりあえずの状況なのですが、実際にアプリケーションを作る場合は、ログをどうとるかは結構重要だと思っています。

C#で実際に同じようなプログラムを書いてみて、実務的にいえば C# は十分優秀だと思います。LINQ や 今回は使っていませんが await async による非同期処理は便利です。ではどこが Ruby より劣るのかということを考えてみると、ブログの筆者のいう「rubyは面白いらしい」ということに尽きるのではないかと思います。それに、日本では情報量の差も大きいと思っています。

C#がどうすれば面白くなるかはよくわかりませんが、ブログの作者が巡回プログラムを作る動機になった「Rubyによるクローラー開発技法 巡回・解析機能の実装と21の運用例」という本は、amazon.co.jp の「ソフトウェア・開発言語」で7位にランクされています。クローラーは意外と興味がある人が多いようなので、自分もクローラーであれば結構ネタはあるので、時々ブログに書いてみようと思っています。

以前にもBootstrapを使おうと思って調べてことがあったのですが、Moongiftの記事には、欠点として、Bootstrap臭があるとして以下のようなことが書いてありました。

Bootstrapのデザインは我が強く、Bootstrapを使っているなとすぐに感じられてしまいます。これを嫌うデザイナーはとても多いです。個人的にもそれは致し方ないと思っていたのですが、最近【難しく考えすぎ！？】bootstrap臭のしないお洒落なレスポンシブWEBデザインの作り方 | WEBデザイナーの憂鬱という記事を読み、グリッドだけ採用するというのはやはりありなのだと気付かされました。

他のブログを見ても同じようなことを書いていたし、自分の場合はグリッドを使う機会はあまりないので、それじゃ使うのやめとこうかということになっていました。

しかし、最近、jQuery UI を使ったり素材をいろいろなところから取ってきていると、バランスの取れないデザインになってきていたので、もう一度 Bootstrap はどうなのかを調べ直してみました。そうしたら、bootstrap.css を単に使うのではなく、Sass 版の Bootstrap である、bootstrap-sass を使うことでカスタマイズがすごくやりやすくなるのがわかりました。それで、bootstrap-sass の使い方を少しメモしておきます。

Bootstrap 自体が、Less で開発されているのだから、それを機械でコンパイルして作った bootstrap.css を修正しようと思ったら無理があるのは当然ですよね。それから、Bootstrap は Less で開発されているのですが、Sass の方が下の方でも少し触れるのですが、機能が少し多くて少し便利なので、初めて使うのだったら Sass を使った方がいいと思います。

Visual Studio は、2013 update 2 以降でSass に標準対応しており、インストールの手順は、stackoverflowの「How To Use SASS in Visual Studio 2013」を参考にしました。

1. メニューの「ツール」→「機能拡張と更新プログラム」を使って、VS2013 に Web Essentials 2013 をインストールします。Web Essentials 2013 には、Sass のコンパイラも含まれているので、これだけの作業で Sass が使えるようになります。

2. SASS の設定は、メニューの「ツール」→「オプション」でできますが、インストール時の設定が下の図のようになっているので、特に設定をしなくても、.scss ファイルを保存した時に自動的にコンパイルされます。

3. プロジェクトに Bootostrap-sass をインストールするには、NuGet を使うと便利です。

4. Bootostrap-sass をインストールすると下の図のようにファイル構成になります。

4. そこで、_bootstrap.scss をコピーして、例えば、bootstrap-custom.scss という名前を付けて保存します。_bootstrap.scss の内容は、下の図のようなものです。例えば、不要なコンポーネントがあれば、ダブルスラッシュでコメントアウトして保存すれば除外できます。

5. bootstrap-custom.scss を保存すると、自動的にコンパイルされて下の図のように bootstrap-custom.css が作成されます。

Visual Studio で、2013 update 2 が公開されたのが今年(2014年)の5月なので結構最近のことですが、それ以降は本当に簡単に Sass が使えるようになっています。

次に、Web デザイナーがよく使っている Dreamweaver の場合はどうかというと、Adobe の連載記事「SassをDreamweaver＆Edge Codeではじめよう」に説明があります。この記事の第１回は、Sass のいい説明になっていると思います。ただ、Dreamweaver 自体は Sass に対応していないので、Compass を直接使った方がはるかに便利だし、Windows PC の場合だと Visual Studio を使った方がずっと効率的だとは思うのですが、慣れたツールを使いたいという人は多いのでこういう使い方になるのかなと思いました。

Bootstrap のカスタマイズについては、オンラインツールとして本家のCustomize and downloadやライブでカスタマイズができる Bootstrap Live Customizer がありますが、それと同じカスタマイズを、Sass では、bootstrapフォルダーにある_variables.css を編集することで行うことができます。当然のことですが、下の図を見るとオンラインツールと同じ順番に変数が並んでいるのが分かると思います。だから、Sass を使って変数を修正するのに難しいことは全然ありません。

Sass のいいところは、上の図をみたら変数に !default が付いているところです。その場合、直接 _variables.css を編集する必要がなくて、先ほど作成した bootstrap-custom.scss で、bootstrap/variables を読み込む前に、変数を定義しておいてやると、その場合には default が定義されていると定義された変数の方が優先されます。だから、bootstrap-custom.scss を編集するだけでカスタマイズをすることが可能です。例えば文字の色を brand-danger と同じ色のしたいのであれば下の図のように @import “bootstrap/variables” の前に $text-color を定義してやればOKです。

こういうやり方だとカスタマイズした所がよく分かります。また、Bootstrap は、よくバージョンアップをしますが、Bootrap-sass のファイルを全く触らずにカスタマイズしているので、スムーズにバージョンアップをすることができます。

変数のカスタマイズ以上のことをしようとすれば、Sass のことを勉強する必要が出てきますが、基本は CSS ファイルと同じなので慣れるのは早いと思うし、Sass のページには、英語ですがきちんとしたドキュメントもあります。自分も、もう少しカスタマイズをしたいところがあるので Sass のことをもう少し勉強しようと思っています。

最後に、Visual Studio のことについてですが、Web デザインの関係では、自分が使い始めた数年前は本当にひどかったですが、現在では非常に優秀になっています。下の図のように、コードの変更をすぐに Page Inspector を使って見ることができるし、エディターは入力の補完機能が強力だし、カラーピッカーも備えています。自分のようにデザインなんかしたことがない人間でも、こういうWebデザインをする（させられる）時代になってきたので、Microsoft としては今後も力を入れていくと思います。その機能を Visual Studio Community 2013 か Express 2013 for Web であれば無償で利用できるので、WebデザインはAdobeのツールがいいとかいっていないで、どんどん使ってみたらいいと思います。