blog

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

    • Ryuichi Nonaka
    この記事は書かれてから1年以上経過しており、内容が古い場合があります。

    今回は小ネタの紹介。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が使えるようになります。
    以上、小ネタの紹介でした。

    参考

    シリーズ

    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で管理されているフォントファイルをインポートする

    コメント・フィードバック