日本語も美しく表示できるBootstrapテーマ Honoka が使いやすくなった

f:id:windyakin:20151201205155p:plain

これは Bootstrap Advent Calendar 2015 1日目の記事です。

リリースから半年が経った、日本語も美しく表示できるBootstrapテーマ Honoka ですが、コリス様に取り上げていただいてからは知名度も増し、GitHub リポジトリのStarも300個になり、今では企業サイトのベースにも使われるようにもなるなど、予想以上の反響に若干戸惑っています。

この半年間、Honokaもちゃんとメンテナンスを続けていて、Bootstrap(本家)と同等のアップデートを施したり(v3.3.5・v3.3.6)、色違いのForkテーマの Umi や Nico が出てきたりと賑やかさもあるプロジェクトとなっています。その結果、公開当初に比べて格段に使いやすくなっていっているので、この場を借りてアップデート内容を紹介させてもらいたいと思います。

Travis CI / AppVeyor のテストを導入した

当初完全にオレオレプロジェクトだったので自分の環境でコンパイルできればいいと思って適当にやってたのですが、 Nico の作者さんでもある id:kubosh0 さんがNicoのリポジトリにTravis CIを導入していたので、見よう見まねで Honoka にもCIを導入しました。

Travis CIのバッジ付けれた(うおおお pic.twitter.com/qfHZuofK2S
— じゅりあん (@MITLicense) July 11, 2015

それまでは正直まったくもってCIというものがわかってませんでしたが、いざ触ってみると割と簡単なほうでかつ大変便利です。最近ではWin環境のテストも行えるようにAppVeyorにも対応しています。

Compass をやめて Sass に移行した

Honoka はv3.3.5-cまでSCSSのコンパイル環境にCompassを使用していましたが、それは私がCompassとSassの差についてあまりわかっていなかったためで(一緒のものだと思っていた)、結果的にVendorPrefixやminifについてはCompassに依存する形になっていました。しかしいつだったか「Compassは、VendorPrefix付与の管理情報が古い」というエントリをどこかで見たのでそれを期に Sass に完全移行し、今までCompass側で行っていた処理はGruntのAutoprefixerとcssminに移行し、本家Bootstrapとほぼ同様の形式を取ることができるようになりました。

なので現在は Sass(Ruby Sass) の環境だけあればコンパイルすることができるようになっています。さらに将来的には libSass に移れればと考え中です。

Git Submodule をやめて Bower に移行した

v3.3.5-c まで本家BootstrapのSassコードを読み込む際にはGitのSubmodule機能を用いて読み込んでいましたが、地味に管理が面倒であまりよくないということになったので Bower を使って取り込むようにしました。だいぶ楽になってます。

Bower に対応した

v3.3.5-c からフロントエンドのパッケージマネージャである Bower からのインストールにこっそりと対応しています。例えば3.3.6をインストールしたい場合は以下のコマンドでインストールされるはず。

bower install --save-dev Honoka#3.3.6

他プロジェクトに取り込みやすくなった

Honokaの欠点として、どうにも他のプロジェクトへの動的な取り込みが難しいという難点がありましたが、Bowerに対応したことにより改善されています。

一番ベーシックな取り込み方としては、姉妹プロジェクトの Eli が参考になるかと思います。Bowerを用いてBootstrapのSassコードとHonokaを取り込み、Sassのプロパティにそれぞれのパスを指定します。こんな感じ。

sass: {
    options: {
        loadPath: [
            'bower_components/bootstrap-sass/assets/stylesheets/',
            'bower_components/Honoka/scss/'
        ]
    }
}

SCSSのフォルダに bootstrap.scss とかの名前をつけたファイルを作り、以下の内容を書いてコンパイルすればHonokaが出力されるはずです。（MIT Licenseは著作者の情報を消すことは許諾されてないので、コメントは消さずに書こうね）

@charset "UTF-8";
/*!
 * Honoka v3.3.6
 * Website http://honokak.osaka/
 * Copyright 2015 windyakin
 * The MIT License
 * Based on Bootstrap v3.3.6 (http://getbootstrap.com)
 */
@import "honoka/honoka";

Honokaからさらにカスタマイズもできますが、詳しくはさきほどの Eli のリポジトリを見てもらったほうが速いかもしれません。

ビルド方法を詳細に記したWikiを解説した

某技術系質問サイトで「Honokaのビルド方法がわからない」といった質問があったので、READMEだけだと不足してしまう環境構築に関する情報などを記すために Wiki を開設しています。現在はビルド方法を記したページしかありませんが、今後プロジェクトへの取り込み方やForkテーマの作り方などを記せればなと思っています。

v4対応にご期待ください！

もうすぐBootstrapがv4になるみたいです。ついに本家もLESSをやめてSassに完全移行ということで、Honokaとしても「やりやすくなるなあ〜」とすごく歓迎しています。ちなみにHonokaはv4にも対応する予定で、少しだけですが準備も進めています(branch:v4-dev)。ただ変更点が多くついていくのがやっとな状態ですが。

是非皆さんも興味があればHonokaの開発に加わってください！Pull Requestはいつでも受け付けています！

というわけで今後もHonokaをよろしくお願いいたします！

P.S.

Bootstrap Advent Calendar ですが全く埋まってない感じです（明日が既に空き状態）。誰か書いてください＞＜

windyakinってなんて読む

うぃんぢゃきんではない