2019/4/30 追記：
- Versionによりますが、Honoka/Umi/Nico/Rinに対応しました。
- Bootstrapのv3系/v4系に対応しました。
Honokaとは
Honokaとは、日本語を美しく表示する為のbootstrapテーマです。
凄く綺麗に日本語が表示できて色合いも美しいです。
今回はこのテーマをrails上で使用する為の方法を記載しています。
※個人的にはUmiやNicoの色合いも好きなのですがbootstrap4.3用がなさそうなので、特定Verのみ UmiやNicoにも対応しました。
Rails上でHonokaを使用する
結論から言うとGemを作ったので下記のようにGemfileに追加してもらうだけで、Honokaのテーマを使えます。
gem 'bootstrap-honoka-rails' , '~> 4.3.1' # or '~> 3.3.7' など
上記設定後、bundle updateを行いgemファイルをインストールします。
bundle update
その後、下記2ファイルを更新すればOKです。
- application.css
- application.js
application.css
rails_root/app/assets/stylesheets/application.css に、
*= require _honoka を追加します。
*= require _honoka ←コレを追加
*= require_tree .
*= require_self
※「←コレを追加」という日本語コメントは外してください。
application.js
rails_root/app/assets/javascripts/application.js に、下記のように2行を追加すればOKです。
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require popper ←コレを追加 ※bootstrap ver4以降
//= require bootstrap-sprockets ←コレを追加
//= require_tree .
※こちらも「←コレを追加」という日本語コメントは外してください。
以上で使えます。
※jQueryのRailsプラグインに関しては、別途追加してください。
UmiやNicoやRinに対応させるには
一部のVerのみUmiやNicoやRinにも対応させました。
rails_root/app/assets/stylesheets/application.css に、
*= require _umi or *= require _nico を追加するとnicoやumiのデザインになります。
*= require _bootstrap-sprockets ←コレを追加(bootstrap ver3のみ)
*= require _umi ←_honokaを指定している箇所を_umiにするとUmiに変わる
*= require_tree .
*= require_self
詳細はこちらのReadMeを参照してください。
最後に
今回はGemの自作という学習も兼ねて作った為、色々とソースコード上で問題や動作不具合があるかもしれません。その場合はご指摘下さいますと幸いです。
ソースコードはこちら です。