Node.jsでgulpを使わずにGoogle Fontsをダウンロードしてローカルで使う

2016.08.30.火
JavaScript技術

今回は、Node.jsで、gulpではなくgulp-google-webfontsを使って、Google Web FontsのダウンロードとCSSの生成を行います。

Node.jsでソースのトランスパイルなどのタスクを記述する場合、少し前までは、gulpやGruntなどのタスクランナーを使うことが多かったと思います。しかし、最近ではgulpなどに頼らず、npm runを使ってタスクを定義する流れがあるようです。私自身も少し前までgulpを使っていましたが、webpackによるコードのビルドしか、主に行なっていなかったので、gulpを使わずに、webpackのコマンドをnpm runで直接実行するようになりました。

gulp-google-webfontsはgulpとはついているものの、コマンドも用意されており、gulpを使わなくても利用できるので、npm runにコマンドを記述して取得したいと思います。

準備

以下の3つのファイルを用意します。
  • package.json
  • fonts.list
  • index.html
package.json
まずは、以下の「package.json」を作成します。最低限の項目のみ記述しています。

dependenciesの定義で、gulp-google-webfontsをインストールします。

scriptsの定義によって、「npm run google-webfonts」コマンドを使えるようになります。このコマンドを実行することで、フォントの取得、CSSの生成ができます。
「node ./node_modules/.bin/google-webfonts」としているのは、google-webfontsのシェバンで「/usr/bin/node」が直接指定されているので、NVMなどを使って他の場所にnodeコマンドをインストールしている場合でも、実行できるようにするためです。
--out-base-dirでベースのフォルダを、--fonts-dirでフォントの出力フォルダ、--css-dirでcssの出力フォルダ、--css-filenameでフォントの読み込みを定義したCSSファイルの出力先を指定できます。上記のコマンドのように指定して実行した場合は、以下のような出力になります。

fonts.list
次に、以下のファイルを用意して、google-webfontsコマンドで指定した「fonts.list」というファイル名にします。フォントは、Google Fontsから探すことができます。
Google Fontsのサイトで、フォントを選択すると、画面下部分に、「1 Family Selected」のように記述されたバーが現れます。バーをクリックすると、「<link href="https://fonts.googleapis.com/css?family=Roboto:500,500i&subset=greek" rel="stylesheet">」のように、linkタグが表示されると思います。このときのURLの、「Roboto:500,500i&subset=greek」に当たる部分がリストに記述する内容です。

個々のフォントのライセンスについては、Google Fontsのサイトの各フォントのページに書いてありますので、各自ご確認ください。

index.html
次に、サンプル表示のための、HTMLファイルを準備します。ここでは、「index.html」として保存します。

以下のようなファイル構成になります。

コマンドの実行

package.jsonのあるディレクトリに移動して、「npm i」を実行すればライブラリがインストールされます。
次に、「npm run google-webfonts」を実行すると、cssディレクトリ以下にフォントとCSSファイルが生成されます。

表示の確認

index.htmlをブラウザで開いてください。
以下のように、指定したフォントの表示が確認できます。

最後に

わざわざWebフォントとCSSを、ローカルに用意して使いたい機会は少ないかもしれませんが、インターネットに繋がらない環境で開発する場合など、あえてCDNを使いたくない場合には、有効かもしれません。







キー・ポイントでは、なんでもコマンド一発でこなすエンジニアを募集しています。