今まで CSS については、必要な時になって必要な部分だけ追加していたけど、それだとレイアウトの統一性がなくなるし、CSSがどんどん複雑になっていくのでなんとかしないといけないと思っていた。それで、CSS フレームワークについて調べてみた。

CSS フレームワークの一覧については、CSS Frontend Frameworks が結構綺麗にまとめている。CSS フレームワークは結構たくさんあるので、代表的なものを列挙してみた。

• Twitter Bootstrap
• Foundation
• 99lime HTML KickStart
• FRAMELESS
• BluePrint
• 52framework
• HTML5 Boilerplate
• Kube

どれを使うべきなのかというと、本来は実際に使ってみて比較すべきなのだが、Twitter Bootstrap が一番人気で Twitter Bootstrapを利用すると、簡単にTwitter 的なデザインのWebサイトを作成できそうだし、Umbraco でも既に uBootstrap というスターターキットもあって結構ダウンロードもされているので、とりあえずは、Twitter Bootstrap を使ってみようと思っている。

Google トレンドで Web アプリケーション フレームワークの人気度を調べていたら、日本だけが世界と違う動きをしていることに気がついた。そのグラフが下の図で、赤が Ruby On Rails、黄色が CakePHP、青が ASP.NET MVC、緑が Grails。グラフを見ると、日本では、2006年～2009年にかけて CakePHP の人気度が急激に伸びていて、飛びついたという感じになっている。2010年以降は、すべての国だと、CakePHP も Ruby on Rails も人気度が横ばいとなっているし、アメリカも横ばいで推移しているし、イギリスやドイツ等も見てみたが横ばいだった。しかし、日本では人気度が下がり続けていて、Web アプリケーション フレームワークなんて終わったといっているような感じのグラフになっている。

現在、企業が収益を上げるためにはIT投資は重要だし、IT投資の中でWeb アプリケーション フレームワークの役割は大きいと思う。現に他の国ではWeb アプリケーション フレームワークへの関心度が減少していないことを考えると、日本のIT企業は何をしているのかと思ってしまう。日本のIT企業は受託が多いいため、委託元が近年の不況によって投資の削減をしているからどうしてもその影響を大きく受けてしまうのかもしれない。

すべての国

日本

アメリカ

Amazon.co.jp で本のベストセラーで調べてみると、Web アプリケーション フレームワーク関係の本では、「コンピュータ・IT」の「プログラミング」の「その他」で「CakePHP2 実践入門」が92位で一番上位で、日本では CakePHP が一番人気だということと合致している。次が、「Ruby on Rails 3 ポケットリファレンス」で238位となっていて、日本ではWeb アプリケーション フレームワークの本はあまり売れていない。なお、Amazon のベストセラーの順位はすぐに大きく変わるからあくまで概数値だと思ってほしい。

   

一方、Amazon.com で見てみると、コンピュータ・IT」の「プログラミング」全体で、「Pro ASP.NET MVC 4」が9位、「Ruby on Rails Tutorial: Learn Web Development with Rails (2nd Edition)」が70位と日本と比較にならないぐらい売れている。

この結果をみていると、世界のエンジニアが Web アプリケーション フレームワークに関心を持ってきちんと学んでいるのに対して、日本のITエンジニアは無関心になってきて大丈夫なのといいたくなってくる。

それから、ASP.NET MVC の将来に関して言えば、Amazon.comで本が売れているのは結構大きいと思う。日本ではASP.NET MVC はあまり使われていないようだけど、世界的には結構普及するように思う。

最後に、Java の Web アプリケーション フレームワークについて少し補足しておくと、かっては Struts が大成功をおさめて2000年前半には事実上のスタンダードになっていた。それで、現在でもまだ多くのシステムで利用されていて、Google トレンドの人気度でもまだ一番だ。しかし、急激に人気度が落ち込んでいるのでグラフが見づらくなること、すでにセキュリティパッチやバグ修正は提供されない状態になっていることを考えて除外した。後継としては Struts 2, Spring Web MVC, Grails, Stripes 等があり、かなり混沌としているようなので、 比較的人気度の高い Grails を選択した。これらを併せると現在でも Java 系のフレームワークが圧倒的に多く使われているということは事実だ。でも、かってのような圧倒的な強さはなくなっている。

（追加 2013年5月25日）

PHP のWeb アプリケーション フレームワークに関しては、最近はCakePHP よりも CodeIgniter や Laravel の方が人気があるようだ。Google トレンドのすべての国と日本での人気度のグラフを下に載せておきますが、日本ではやっぱりWeb アプリケーション フレームワークの人気ないよね。

すべての国

日本

/img/w/2013/05/image_thumb7.png" alt="image" border="0" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;"/>

iPhone や Andoroid のスマートフォンの画面確認に便利なのが Ripple エミュレーター（現在は、Apache Ripple として開発中）です。Chrome の拡張機能ですが、下の図のように機種を選択すると機種の枠が表示されるし、ボタン一つで縦横も変更できるので、画面デザインの調整にはとても便利です。ただし、便利に使うためには、下の方に記載しましたが、インストールに注意が必要です。

WEB サービスの作成では、スマートフォンへの対応は大きな課題ですが、iPhone, iPad, Andoroido 等いろいろな機種があり、それに画面サイズも多く縦にでも横でも使えるので対応は結構大変です。今まで Andoroid での表示の確認には、Android SDK のエミュレターを使っていましたが、相当に重いソフトです。自分の場合 Andoroid アプリを作るわけではなく、画面の表示の確認ができればいいだけなので、適当なエミュレータを探していました。

Ripple エミュレーターが対応している機種は、iPhone 3G/3Gs, iPhone 4/4s, iPad, iPad 3, Nexus (Galaxy), Nexus 4, Nexus 7 (Tablet), Nexus One, Nexus S 等でとりあえず一通りの確認ができます。また、機能面では Geo Location や Cordova / PhoneGap にも対応しています。

インストールに注意！

Ripple エミュレーターについては、Gihyo.jp や KLOG でも紹介されていますが、普通に Chrome ウェブストアからインストールすると、KLOG に書いてあるように、Googleを表示してみても、モバイル用の画面が表示されません。

それではかなり不便なので、どうしたらいいかというと、HTML5 WebWorks のページから Ripple Emulator をダウンロードして、手動でインストールすればいいということです。そうやってインストールすると、Google を表示したら、上の図のようにモバイル用の画面がちゃんと表示されるようになります。

なぜこういうことになるかというと、Chrome ウェブストアで配布されている Ripple エミュレーターでは、機種を設定しても User Agent が Chrome のまま変更されないためです。その理由は Google のマニフェストにある偽装の禁止のためだ（詳細 英文）ということです。

Ripple Emulator は、現在は、Apache のインキュベーションとして開発されており将来性のあるソフトウェアです。HTML5 WebWorks のページからダウンロードしたものだと、機種を設定するだけで画面サイズ等が設定でき、モバイルの画面の確認が便利なので、是非、使ってみてください。

最後に Chrome の拡張機能の手動でのインストールについてメモしておきます。
手動インストールのためには、拡張機能の設定画面を表示させます。その操作としては、以下のどちらかでできます。

• 1. アドレスバーに、chrome://extensions/ と入力して Enter キーを押す。
• 2. 左上の Chrome 設定ボタンを押して、「設定(S)」を選択して、設定の画面を表示して、右メニューにある「拡張機能」を選択する。

拡張機能の設定画面になったら、その画面にダウンロードしたファイルをドラッグ&ドロップします。
以下のようなダイアログが表示されるので、「追加」ボタンをクリックします。

最近スマートフォンからのアクセスが増えてきている。自分の Web サイトだと 40% 弱がスマートフォンからのアクセスになってきた。そろそろスマートフォン対策を考えないといけないと思っていたので、少し詳しく調べてみた。

Webサイトへのモバイルからのアクセス割合はWebサイトによって大きな違いがあるようだ。株式会社サムライファクトリーの調査によると2013年4月でスマートフォンの割合は18.36%という結果になっているが、『忍者アクセス解析』を設置しているサイトの解析データなので個人からのアクセスが多いので日本の平均よりは高めになっていると考えられる。世界でのモバイルの割合については Netmarketshare の調査によると、下の図のようにモバイルの割合が約10%になっている。

他の調査結果をみても、BtoB の場合には、モバイルからのアクセスは10%程度のようなので、日本でのWebサイトのアクセスに占めるスマートフォンの割合は10～15%ということになりそうだ。まだ現時点では割合はそれほど高くないが、株式会社サムライファクトリーの1年前の2012年4月の調査では Android 4.63%, iPhone 3.10% だったので2倍以上に増加していることになる。

これらのことを考えると個人向けのサイトについては、スマートフォンに早く対応した方がいいし、WordPress 等の CMS を使っている場合には、テーマの変更だけで対応できる「レスポンシブWebデザイン」を使うのが最もいい方法ということになる。レスポンシブWebデザインは、CSSの機能を使って、デバイスごとにレイアウトを最適化する技術で、サーバー側ではPC向けもスマートフォン向けも今までと同じ HTMLを作成すればいいので簡潔にスマートフォン対応が可能だ。例えば、WordPress の場合だと、レスポンシブ対応のテーマに変更するだけでスマートフォン対応が可能だ。

最後に、自分が作っているWebサイトで「レスポンシブWebデザイン」を使うのがいいのかどうか考えてみた。レスポンシブWebデザインを使用してスマートフォンで見やすくするためには「モバイルファースト」でデザインする必要がある。なぜかというと、どうしてもモバイルは画面が小さいため、PC用のものをそのまま使うと非常に縦に長い画面になって重要な情報を探すのにスクロールばかりしてしないといけなくなるので見づらくなってしまう。自分の場合は、PC用には多くの情報を載せたいと思っているし、スマートフォンからも少し見づらくてもその情報を見えるようにしたいと思っている。その場合、PC用と違って、スマートフォン用には画面が小さいだけに要約版が必要になってくる。やはり、「モバイルファースト」という考え方は非常に重要である。

ただ、このケースで「レスポンシブWebデザイン」を使うのには、一つの問題があると思う。一度に画面に表示できるデータが数倍以上違うのに同一のHTMLを使うため、スマートフォン用には過剰なHTMLになってしまうか、PC用には簡略すぎるものになってしまうからだ。

幸いなことに ASP.NET MVC や Umbraco MVC では、テンプレートの変更が容易で、モバイル用とPC用でテンプレートだけを変更するようにすればそれほど大きな手間にはならない。それに、モバイル用に不要なデータをサーバー側でなくせるので、スマートフォンでの処理が軽くなる。また、PC用とスマートフォン用を別対応にするとURLが別になるというが欠点だといわれているが、このタイプだとPC用とスマートフォン用も同じURLになる。

このようなことから、自分で作っているサイトでは、「レスポンシブWebデザイン」を使わずにいこうと思う。でも、一般的には「レスポンシブWebデザイン」が便利だということは間違いがないので、このブログサイトについては時間ができたらレスポンシブなテーマに変更しようと思っている。

一人で Webサービスを作るというのは難しいという話もあるので、どういう技術が必要なのか書き出してみた。括弧内は自分が使っているものです。

• サーバー・ネットワーク （ AWS, Azure, 自宅サーバー ）
• アプリケーションフレームワーク （ ASP.NET MVC, Umbraco ）
• プログラム ( C#, R? )
• データベース （ SQL Server ）
• フロントエンド （ HTML, CSS, Javascript, jQuery ）
• ライティング
• マーケティング

今流行のものにすると括弧内は、以下のようになるようだ。

• アプリケーションフレームワーク （ Ruby on Rails ）
• プログラム ( Ruby )
• データベース （ MySQL ）

技術に関する最大のポイントは、一通りをカバーする必要があるが、基礎知識があればそのレベルに関してはそれほど問題はないということ。最近は、便利なものがどんどん出てきているので、ハードルがどんどん下がってきている。だから、簡単に作れるとは言わないけど、作れるかどうかは、どちらかというと技術よりも作りたいものがあるかどうかということが問題だと思う。それに費用も自分の時間を使うと言うこと以外には殆どかからないし、自分の時間だって土日で十分だ。だから本当に作りたいと思うものがあれば、できるだけサービスを簡単なものにしてチャレンジしてみればいいと思う。実際に完成するかどうかでは、サービスを必要最小限の簡単なものにするというのがポイントだ。