Google API 第21回

投稿者: | 2015年11月26日
0件のコメント

今回はGoogle Fonts APIについて紹介します。
Google FontsとはGoogleのウェブフォントをクラウドで利用できるサービスのことです。
それをAPI化したものがGoogle Fonts APIです。

フォントはウェブサイトのデザインに大きく関わる要素です。
通常、フォントはユーザの端末に依存するため意図しないフォントで表示されてしまうことがあります。それを改善するための技術がウェブフォントです。

そのようなウェブフォントサービスを簡単に受けることができるのがGoogle Fontsです。
Google Fontsには700以上のウェブフォントがあるので、より良いデザインを選ぶことができます。

ここではまずウェブフォントのメリットとデメリットを述べ、その後にGoogle Fontsのライセンスなどについて説明します。

■ウェブフォントのメリットとデメリット
○メリット
・ユーザの端末に依存しない
・拡大、縮小してもぼやけない

○デメリット
・インターネットへの接続環境が必要

■Google Fontsのライセンス
・クラウド上から使用する場合はオープンソースライセンスなので商用、非商用問わず無償で利用可能
・ダウンロードして使用する場合はウェブフォントに適用されているライセンスを確認しましょう
適用されているライセンスはOFL v1.1、Apache License v2.0、Ubuntu Font Licence v1.0のいずれかです。

■Google Fontsの対応ブラウザとモバイル端末
○ブラウザ
・Internet Explorer ver6以降
・Firefox ver3.5以降
・Chrome ver4.249.4以降
・Safari ver3.1以降
・Opera ver10.5以降

○モバイル端末
・Android 2.2以降
・iOS 4.2以降

■Google Fonts APIの使用方法

Google Fonts APIを使用するにはAPIを有効にし、API KEYを作成する必要があります。
※Google Developers ConsoleでAPIを有効にする方法とAPI KEYを作成する方法は
参考サイトにあるGoogle API 第6回を参照してください。

まずjQueryの$.getJSONメソッドを用いてウェブフォントを取得するURLを読み込ませます。

<script>
$.getJSON( "https://www.googleapis.com/webfonts/v1/webfonts?key={API_KEY}", 
    ...
);
</script>

keyには取得したAPI KEYを指定します。
その他fieldsとsortのパラメータがあります。
fieldsには取得したい項目を指定します。例：fields=items%2Ffamily
fieldsを指定しない場合は全ての項目が取得されます。
sortはフォントの並び順で、「alpha」「date」「popularity」「style」「trending」
から並び順を選択することができます。例：sort=alpha

返り値は下記のようなJSONで取得できます。
リクエストしたデータはitemsに配列として格納されています。
items内の主要なパラメータを説明します。
kindはitemの種類を示しています。
familyはフォントのfamily名です。
categoryはフォントのカテゴリーです。
variantsはfamilyのために利用される色々なスタイルです。
versionはフォントfamilyのバージョンです。
filesは使用可能なフォントのファイルです。

{
  "kind": "webfonts#webfontList",
  "items": [
    {
      "kind": "webfonts#webfont",
      "family": "ABeeZee",
      "category": "sans-serif",
      "variants": [
        "regular",
        "italic"
      ],
      "subsets": [
        "latin"
    ],
    "version": "v4",
    "lastModified": "2015-04-06",
    "files": {
      "regular": "http://fonts.gstatic.com/s/abeezee/v4/mE5BOuZKGln_Ex0uYKpIaw.ttf"
    }
  },
...
}

次に下記のようなJSONを処理するコールバック関数を記述します。
bodyにウェブフォントが適用されます。

function(json) {
  var fontName = json.items[0].family;
  var fontURL = json.items[0].files["regular"];

  var style = document.createElement('style');
  style.appendChild(document.createTextNode("@font-face{font-family: '" + fontName + "';src: url('" + fontURL + "');}"));
  style.appendChild(document.createTextNode("body{font-family: '" + fontName + "';}"));
  document.head.appendChild(style);
}

※完全なコードは付録にあるので参考にしてください。
フォントの適用前と適用後の画像を表示します。
google_api21-1
フォントがきちんと適用されているのがわかります。

以上がGoogle Fonts APIの説明になります。
上記の通りGoogle Fonts APIを使用すると簡単にウェブサイトに
ウェブフォントを組み込むことができます。
Googleのウェブフォントの読み込み時間が気になる方はウェブフォントをダウンロードして
サーバに配置して使用することをおすすめします。

ウェブフォントはデザイン性を高めてくれる便利なフォントなので、
ライセンスをよく把握してより良いウェブサイトを作成しましょう。

次回はGoogle Fonts APIに関連したWeb Font Loaderについて紹介します。

＜参考サイト＞
・Google API 第6回
・Google Fonts API

＜付録＞
・Google Fonts APIを用いた簡単なサンプル

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>サンプル１>/title>
<script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
(function(){
$.getJSON( "https://www.googleapis.com/webfonts/v1/webfonts?key={API_KEY}", 
    function(json) {
        var fontName = json.items[0].family;
        var fontURL  = json.items[0].files["regular"];

        var style = document.createElement('style');
        style.appendChild(document.createTextNode("@font-face{font-family: '" + fontName + "';src: url('" + fontURL + "');}"));
        style.appendChild(document.createTextNode("body{font-family: '" + fontName + "';}"));
        document.head.appendChild(style);
    }
);
})();
</script>
</head>
<body>
<h1<Test>/h1>
</body>
</html>