PHP｜Font Awesomeの一覧制作

こんにちは。フリーランスのＷｅＢうぇぶやさんです。自サイトにウェブアイコン（Font Awesome 6.2.1 FREE）の一覧を制作しました。カテゴリによる逆引き機能を設けています。制作を通じて学んだことを共有しますね。

---

環境

Font Awesome 6

Font Awesome 6 ：Downloads

https://fontawesome.com/download　より「Free For Web」をダウンロードし解凍。「metadata」フォルダ内の次のファイル２種のみが必要となります（試行錯誤の結果論です）。

• categories.yml

• icons.json

spyc.php：YML形式のデータを解析するライブラリ

.yml（または.yaml） はデータ構造の一種でヤムルと呼ばれるそうです。解析するにあたり、spycというライブラリを利用しました。
入手先：https://code.google.com/archive/p/spyc/

Google Code Archive - Long-term storage for Google Code Project Hosting.

データ解析

categories.yml

<?php

require_once("spyc.php");

class yml {

  function __construct() {
    $yamlArr = spyc_load_file("categories.yml");
    var_dump($yamlArr);
  }

}

$yml = new yml;

上記がサンプルコードです。categories.yml は以下のような構造となっています。カテゴリ名と属するアイコンリストの構成となっています。

alert:
  icons:
    - bell
    - bell-slash
    - circle-exclamation
    - circle-radiation
    - exclamation
    - question
    - radiation
    - skull-crossbones
    - triangle-exclamation
  label: Alert
alphabet:
  icons:
    - a
    - b
    - c
    - circle-h
    - d
    - e
    - f
    - g

icons.json

<?php

class json {

  function __construct() {
    $jsonArr = json_decode(file_get_contents("icons.json"));
    var_dump($jsonArr);
  }

}

$json = new json;

icons.json は以下のような構造となっています。

  "bell": {
    "aliases": {
      "unicodes": {
        "composite": [
          "1f514",
          "f0a2"
        ],
        "secondary": [
          "10f0f3"
        ]
      }
    },
    "changes": [
      "2.0.0",
      "5.0.0",
      "5.2.0",
      "5.11.0",
      "6.0.0-beta1",
      "6.0.0-beta2",
      "6.0.0-beta3",
      "6.2.0"
    ],
    "ligatures": [],
    "search": {
      "terms": []
    },
    "styles": [
      "solid",
      "regular"
    ],
    "unicode": "f0f3",
    "label": "bell",
    "voted": false,
    "svg": {
      "solid": {
        "last_modified": 1660321785,
        "raw": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><path d=\"M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416H416c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z\"/></svg>",
        "viewBox": [
          0,
          0,
          448,
          512
        ],
        "width": 448,
        "height": 512,
        "path": "M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416H416c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z"
      },
      "regular": {
        "last_modified": 1660014464,
        "raw": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><path d=\"M256 32V49.88C328.5 61.39 384 124.2 384 200V233.4C384 278.8 399.5 322.9 427.8 358.4L442.7 377C448.5 384.2 449.6 394.1 445.6 402.4C441.6 410.7 433.2 416 424 416H24C14.77 416 6.365 410.7 2.369 402.4C-1.628 394.1-.504 384.2 5.26 377L20.17 358.4C48.54 322.9 64 278.8 64 233.4V200C64 124.2 119.5 61.39 192 49.88V32C192 14.33 206.3 0 224 0C241.7 0 256 14.33 256 32V32zM216 96C158.6 96 112 142.6 112 200V233.4C112 281.3 98.12 328 72.31 368H375.7C349.9 328 336 281.3 336 233.4V200C336 142.6 289.4 96 232 96H216zM288 448C288 464.1 281.3 481.3 269.3 493.3C257.3 505.3 240.1 512 224 512C207 512 190.7 505.3 178.7 493.3C166.7 481.3 160 464.1 160 448H288z\"/></svg>",
        "viewBox": [
          0,
          0,
          448,
          512
        ],
        "width": 448,
        "height": 512,
        "path": "M256 32V49.88C328.5 61.39 384 124.2 384 200V233.4C384 278.8 399.5 322.9 427.8 358.4L442.7 377C448.5 384.2 449.6 394.1 445.6 402.4C441.6 410.7 433.2 416 424 416H24C14.77 416 6.365 410.7 2.369 402.4C-1.628 394.1-.504 384.2 5.26 377L20.17 358.4C48.54 322.9 64 278.8 64 233.4V200C64 124.2 119.5 61.39 192 49.88V32C192 14.33 206.3 0 224 0C241.7 0 256 14.33 256 32V32zM216 96C158.6 96 112 142.6 112 200V233.4C112 281.3 98.12 328 72.31 368H375.7C349.9 328 336 281.3 336 233.4V200C336 142.6 289.4 96 232 96H216zM288 448C288 464.1 281.3 481.3 269.3 493.3C257.3 505.3 240.1 512 224 512C207 512 190.7 505.3 178.7 493.3C166.7 481.3 160 464.1 160 448H288z"
      }
    },
    "free": [
      "regular",
      "solid"
    ]
  },

私は、svg->raw のみ利用しています。

処理フロー

処理の概略です。

1. ２種ファイルの解析。

2. データベース（MySQL5.7）に保存。アイコン名、所属カテゴリ、SVGデータ（svg->raw）。

3. カテゴリごとのHTMLファイルに出力。

工夫（ページまたぎのためのサブクエリ）

一覧は複数ページにまたがるため、「各アイコンが何ページ目」に表示されるのかを取得する必要がありました。試行錯誤の結果、以下のSQLを用いて実現できました。

SELECT t.row_num
  FROM (SELECT @rownum:=@rownum+1 as row_num, font.*
        FROM (SELECT @rownum:=0) AS ROW_NUM_TBL, font WHERE /* カテゴリの絞り込み条件 */) AS t
WHERE t.id = /* フォントを指定 */

指定したフォントの表示順（t.row_num）を取得するためのサブクエリです。

結果

以下に実現できました。

ＷｅＢやさん｜ウェブフォント一覧（Font Awesome）

カテゴリによる逆引き機能も設けています。今後は、お気に入りアイコン保存機能や、クライアントさまに応じた振り分け機能などを追加する予定です。