Friction River Software - CakePHP5入門【コラム⑤】Webページのアイコン

Ｃ菜

このまえ作った画像投稿掲示板（正式名称「BBS with Image」）ですけど、ブラウザで表示した際のアイコンが赤いケーキなんですよね～

あれって変えられないでしょうか～？

Ａ子

あぁー、あれね

確かに掲示板っぽくはないよね

Ｂ美

あれは「faviconファビコン」よ
（「favoriteフェイバリット iconアイコン」の略…直訳すると「お気に入りアイコン」）

「CakePHP」ではドキュメントルート（webroot）の直下に「favicon.ico」というファイル名で置かれてるわ

Ｃ菜

特殊な画像形式フォーマットなんでしょうか～？

Windows付属の「ペイント」では、拡張子「ico」の保存ができませんでしたけど～

Ｂ美

普通の画像ファイルとはちょっと違うわね

でも「普通の画像ファイル」を用意しておけば、その画像から新たに「ico」ファイルを作成することは可能よ

Ａ子

なんかソフトをインストールしなきゃダメ？

Ｂ美

いいえ
Web上には画像変換サービス（「ico」ファイルを作るWebアプリケーション）がいくつもあるから、それらを利用するのが一番お手軽ね

例えば、私が使っているのは「Faviconジェネレーター」よ
（クリックすると別ウィンドウで開きます）

Ｃ菜

変換元の画像を選択して、サイズ（解像度）を指定して、「画像を変換する」ボタンを押すだけみたいです～

めちゃくちゃ簡単ですね～

Ｂ美

でしょ？
（ドヤ顔）

Ａ子

あんたが作ったんじゃないのに、なんでそんなに偉そうなのよ（苦笑）

というか、あんたは作ら・ないの？
まさか作れ・ないの？（巧妙な煽あおり（笑））

Ｂ美

もちろん作れるわよ

でも既存の一級品があるのに、自作の三級品を作るのは時間の無駄よね？
（これを「車輪の再発明」と言います）

Ｃ菜

なぜ「作れる」と断言できるんですか～？

Ｂ美

作ったことがあるからよ…（苦笑）
（一般公開はしてないけどね）

Ａ子

へぇー

あ、「サイズ（解像度）」ってどれを選べば良いの？
選択肢が多過ぎるんだけど…

Ｂ美

私はどのWebサイトも一律で「48×48」ドットにしているわ
（もし迷ったら、複数種類を選択しておけば大丈夫よ）

うーん、そうねぇ
「16×16」と「32×32」、それに「48×48」の三つがあれば良いと思うわよ

Ｃ菜

その場合、一つのファイル内に三種類の画像が格納されるということでしょうか～？

Ｂ美

その通り

それが「マルチアイコン」と呼ばれるものね

Ａ子

うーん、とにかくやってみよう

まずは元となる画像ファイルの作成だね
掲示板っぽい画像をネット上のフリー素材から拾ってこようか？

Ｂ美

フリー素材だとしても、著作権関係が面倒くさいから自分で作りましょう

てかＡ子、あんたが作りなさい

Ａ子

えぇ、面倒な…

・・・

Windowsに付属してる「ペイント」で、なんとかそれっぽいやつを作ったよ
あ、保存形式は「PNG」で良いの？

Ｂ美

さっきのサイトにも書かれてたけど、「JPEG」「PNG」「GIF」のどれかで保存すればOKよ

Ａ子

こんなもんでどう？

5分で作ったやっつけ仕事だけど…（苦笑）
（ちなみに元画像の解像度だけど、256×256ドットで作ったよ）

Ｃ菜

良い感じです～

では、それをさっきのサイト（Faviconジェネレーター）に指定して、解像度は「16×16」「32×32」「48×48」の三つにするです～

Ａ子

あとは「ダウンロード」ボタンを押すだけか

Ｂ美

ふむ、なかなか良いわね

それじゃあとは、この画像ファイル（favicon.ico）を「bbsapp/webroot」の下にアップロードするだけよ
（開発環境と本番環境の両方ね）

Ｃ菜

開発環境にはUSBメモリ経由でコピーすれば良いですよね～

で、そのあと開発環境から本番環境へは、「gFTP」を使ってアップロードするです～

Ａ子

本番環境へアップロード後、ブラウザで見てみたけどアイコンが変わってないよ

Ｂ美

あぁ、faviconってブラウザキャッシュに残っちゃうから、キャッシュを削除するか、強制更新してね

強制更新のやり方は簡単よ
[Ctrl]キーと[F5]キーを同時に押すだけ…

Ｃ菜

あ、変わりました～

Ａ子

おぉ、我ながら良い感じ（自画自賛）

Ｃ菜

掲示板っぽいです～