初めての Middleman シリーズ初めてのMiddleman：Bowerで管理されているフォントファイルをインポートする

今回は小ネタの紹介。Sprocketsを使ったBowerファイルのインポートについてです。Sprocketsでフォルダごとインポートしようとしてもフォントファイルはインポートしてくれません。Font Awesomeのフォントファイルを例に手堅いインポート方法を紹介します。

Sprocketsの設定

すでにBowerを使ってFontAwesomeをインストールしてあることを前提に紹介します。bower_componentsの場所は自身の環境に合わせて調整してください。

# fonts
set :fonts_dir,    'assets/fonts'

# sprockets setting
after_configuration do
  # append path
  sprockets.append_path '../../vendor/bower_components'

  # import font-awesome fonts
  sprockets.import_asset('font-awesome/fonts/fontawesome-webfont.eot') {|p| "#{fonts_dir}/fontawesome-webfont.eot"}
  sprockets.import_asset('font-awesome/fonts/fontawesome-webfont.svg') {|p| "#{fonts_dir}/fontawesome-webfont.svg"}
  sprockets.import_asset('font-awesome/fonts/fontawesome-webfont.ttf') {|p| "#{fonts_dir}/fontawesome-webfont.ttf"}
  sprockets.import_asset('font-awesome/fonts/fontawesome-webfont.woff') {|p| "#{fonts_dir}/fontawesome-webfont.woff"}
  sprockets.import_asset('font-awesome/fonts/fontawesome-webfont.woff2') {|p| "#{fonts_dir}/fontawesome-webfont.woff2"}
end

インポート対象のファイルが指定の場所にインポートされているかsitemap画面localhost:4567/__middleman/sitemap/から確認できます。

フォントのパス指定

SCSS上の@font-faceパスも適切なものに変更します。フォントのパスは変数$fa-font-pathで操作できます。FontAwesome本体をインポートする前に指定しておきます。

$fa-font-path:   "../fonts";
@import 'font-awesome/scss/font-awesome';

asset_hashを有効にしている場合

assethashを有効にしている場合、ファイル名がビルド毎に変わってしまうため、@font-faceの指定をアセットパイプラインに対応したfont-url()を使ったものに書き換えるか、assethashの対象から除外する必要があります。ここでは除外する方法を紹介します。

configure :build do

  activate :asset_hash do |options|
    options.ignore = [/^assets\/fonts/]
  end

end

これでフォントファイルをインポートできFont Awsomeが使えるようになります。
以上、小ネタの紹介でした。

参考

• アセットパイプライン
• FontAwesome を Bower から入れてアイコンを表示させる
• middleman+bowerでfontsが読み込まれないやつ

シリーズ

1. 初めてのMiddleman：rbenv, bundler 環境でMiddlemanを使ったHello World
2. 初めてのMiddleman：レイアウト機能でレイアウトとコンテンツを分離する
3. 初めてのMiddleman：パーシャルを使ったコンテンツのモジュール化
4. 初めてのMiddleman：SCSSのコンパイルとテンプレートの基礎
5. 初めてのMiddleman：Sass MixinライブラリのBourbon, Neatを導入してみる
6. 初めてのMiddleman：データファイルとデータファイルを使った動的ページ生成
7. 初めてのMiddleman：サイトにブログ機能を追加する
8. 初めてのMiddleman：Amazon S3にビルドされたファイルを同期する
9. 初めてのMiddleman：HTML/CSS/JS/画像をビルド時に圧縮する
10. 初めてのMiddleman：設定について
11. 初めてのMiddleman：静的サイトのキャッシュとasset_hash拡張を使ったキャッシュのパージ
12. 初めてのMiddleman：Middleman::S3Syncで使うAWS IAMユーザーのアクセスキー管理方法について
13. 初めてのMiddleman：Helperを使ってGravatarのアイコンを表示する
14. 初めてのMiddleman：アセットパイプラインを使った外部アセットファイルの読み込みと結合
15. 初めてのMiddleman：Bowerを使ってjQueryなどのライブラリをロードする
16. 初めてのMiddleman：スケルトンを自作する方法
17. 初めてのMiddleman：Middleman Blogの記事データを使いやすく管理する方法
18. 初めてのMiddleman：Middleman-blogのシングルブログを前提としたSkeletonを作った
19. 初めてのMiddleman：Middleman-blogでマルチブログを試してSkeletonを作った
20. 初めてのMiddleman：Markdown EngineをkramdownからRedcarpetに切り替える
21. 初めてのMiddleman：RedcarpetとMiddleman::Rougeを使ったシンタックスハイライト
22. 初めてのMiddleman：Middleman-Syntaxを使ったシンタックスハイライト
23. 初めてのMiddleman：Middleman-Blogで記事毎に画像を管理する方法
24. 初めてのMiddleman：Gulpを使ってサムネイル画像を生成する
25. 初めてのMiddleman：Middleman-OGPのOGP画像指定を相対パスで設定する
26. 初めてのMiddleman：Middleman-OGPでMiddleman-BLogにOGPを設定する
27. 初めてのMiddleman：Middleman-Titleでタイトルタグを手軽に設定する
28. 初めてのMiddleman：多言語化 - 言語ファイルの作成とヘルパーの埋め込み
29. 初めてのMiddleman：Middleman-blogにカテゴリやシリーズなどのカスタムコレクションを追加する方法
30. 初めてのMiddleman：Bowerで管理されているフォントファイルをインポートする