以前にも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のツールがいいとかいっていないで、どんどん使ってみたらいいと思います。

「統計メモ帳」のサイトが、今月はページビューが前月より43%増加して、月間で5万PVを超えることができました。アクセスが増加した要因は、検索での表示回数が38%増加したことが一番大きな要因だと思っています。

このようなサイトでは、自分の人件費を考えると大赤字ですが、必要経費がほとんどどないので、個人事業だと赤字にならないというのが特徴です。オープンデータで収益を上げる方法を検討中ですが、資金なしで事業は始めることができるけど、規模を大きくすることはどう考えても非常に困難です。普通に人を雇ってというわけにいかないところが難しいのです。

統計メモ帳のサイトについては、来年の3月で10万PVを目標にしたいと思っています。そのためには、価値のあるページを増やしていく必要があります。結構難しいかもしれませんが、頑張っていきたいと思います。

モバイル開発ツールの動向を Google トレンドで少し調べてみました。まず、主要な開発ツールの Xcode、Android SDK、Adobe AIR、PhoneGap、Xamarin を比較してみました。やはり純正の Xcode、Android SDK は強いです。そして、Adobe のツールの人気度が低下し、Xamarinの人気度が上昇中です。

日本で見てみると、iPhone 人気のためか Android SDK の人気度が低くなっています。

次にマルチプラットフォーム開発ツールだけにしてみると、Xamarin の人気度が急上昇しているのがよくわかります。

日本では、Xamarin の人気度はまだまだのようです。

開発ツールに関しては、基本としては自分の好きなものを選択すればいいのだけど、開発中止になると痛いので動向を簡単には抑えておいたほうがいいと思います。

総務省統計局及び独立行政法人統計センターが次世代統計利用システムで試行運用を行なっていた統計のAPI機能が、2014年10月30日から、政府統計の総合窓口(e-Stat)の API 機能として本格運用になりAPIＩ機能で利用可能な統計データが統計局が所管する国勢調査などの23統計から、34統計が追加されたという報道がありました。

そこで、統計データ API エクスプローラ の API の URL を新しいものに変更してやると、問題なく追加された統計データが表示されました。追加された統計では、労働関係の「民間給与実態統計調査」、「毎月勤労統計調査」、「賃金構造基本統計調査」、医療関係の「医療施設調査」、「患者調査」、教育関係の「学校基本調査」、「学校教員統計調査」、「地方教育費統計調査」等があり、「統計データ API エクスプローラ」で表の内容を見てみると結構面白いことができそうに思います。

「統計データ API エクスプローラ」に関しては、自分が統計のAPIを使って開発するときに便利なツールという方向で開発していこうと思っています。

「統計メモ帳」のサイトが、今月はページビューが前月より81%増加して、やっと月間で3万PVを超えることができました。

アクセスが増加した要因は、掲載順位が10以内に入るキーワードが増加して、検索での表示回数が84%増加したことです。

このサイトは、政府統計APIを中心に使っている「オープンデータ」のサイトなのですが、「オープンデータ」で食べていけるかというのが課題です。ちょっとした収入にするためにはアクセス数を現在の10倍ぐらいに増やす必要があります。また、このサイトだけで食べていこうと思えば最低でも月100万PVぐらいは必要になります。かなり厳しい道だと思います。

ただし、パソコンがあれば始められて必要経費はほぼゼロなので、チャレンジする価値はあると思います。今まで個人が「e-Stat」のようなページを作ることは不可能でしたが、データが公開されているので、これからは、個人で作ることも不可能ではありません。

これまでの経験からいえば、「0から3万PV」にするのと、「3万PVから30万PV」にするのと、どちらが難しいかといえば、「0から3万PV」にすることです。Google の検索に認識してもらうのにはかなりの期間が必要です。今回もどういうわけかこの時期になって掲載順位が上がりました。Webサイトの場合は粘り強く改善していくことが重要だと思っています。