「ぼくのさいきょうツール」で書いたとおり、新規プロジェクトを始める際のHTMLテンプレートには今のところ “HTML5 Boilerplate” を使っています。勉強になることも多くかなり役には立っているのですが、しかし。

• レスポンシブ デザインでCSSが複雑化の一途を辿る傾向にありCompass+Sass無しの環境ではちょっとしんどくなってきた。
• 重いし格好悪いので本来あまり好きではないのだけど、どのページにもだいたいソーシャル ボタンを設置する必要がある。
• SNS上でのシェアに備えてFacebook ogタグを記述したり、Twitter Cardタグの挿入も求められるようになってきた。
• その他にBoilerplateに追加しても良いのではないかという個人的なTipsがある。
• Sassのコンパイルに使用しているCodekitへの設定も毎度必要になる。

と諸々あり、コーディングを始めるまでに実際には毎回、ディレクトリ構造を変更したり、テンプレート内のコードをかなりの部分で追加・修正する必要が出てきてしまっています。

ひじょうにめんどうくさい。

なので。自分用にCompass+Sass対応し、Codekitに放り込んだ時点で多くの部分で自分環境が整っている、本当の意味ですぐにコーディングを始められるべアボーンを作った。

Compass H5bp Codekit Barebone

ある程度の汎用性は維持していますが、あくまで自分がやりやすい（・・・・・・・・）をモットーにかかげた構成なので、人によっては「この設定は要らない…」とか「このディレクトリ構造ではやりにくい…」などあるに決まっています。ただ、書かれていないものを書くよりも、必要でないものを削除する方が幾分楽なのではという気がする。。

細かなことはREADME.mdを見ていただければと思いますが、

• Compassの環境設定
• Codekitの環境設定
• CssUserAgent (cssua.js)によるUser Agentの判別処理
• Facebook, Twitter, Google+のソーシャル プラグイン コード
• Google AnalyticsによるFacebookおよびTwitterのソーシャル トラッキング
• Facebook ogタグ
• Twitter Cardタグ
• “Adobe Blank” webfontsの追加、(S)CSSへ@font-familyプロパティを設定
• browserconfig.xmlおよび関連ファイル
• rel=”logo”設定

あたりを追加設定・設置済みとなっています。ベースとなっているのは “HTML5 Boilerplate” と “Compass-h5bp (Compass H5bp compass extension)” となります。これらのアップデートはちょくちょく反映させていきたいと思いますし、自分が良いと思ったもの・良くないと思ったものも随時追加・削除してアップデートしていく予定。jQueryのプラグインなども、本当に毎回使うようなものは、予め入れてしまうかもしれない。

あんまり役に立つ気はしなのですが、使いたい方はお使いになっていただければと思います。社内向けに、次の記事でCompass+Sass, Codekitの導入方法を書きます。