皆さんこんにちは。関タクミゼイアンです。もうね、来ちゃったよね。もうやりすぎのカメラがここまで来ちゃってるんだよね。皆さんはこの記事を覚えているでしょうか?私は入力した数字を悪魔の数字かどうかを判定するツールを作っちゃったんだよね。

とうとうこのツールが完成したんだよね。完全にパンドラの箱開けちゃってるよね。以下のリンクで利用できるんだよね。

今回の記事では、変更点や追加した点を取り上げていくんだよね。

1. トップページの追加

前回の記事では、悪魔の数字判定ページしかなかったんだけど、それじゃ味気ないよね。だから、トップページを作っちゃったんだよね。赤文字の部分が悪魔の数字判定ページへのリンクになってるんだよね。

f:id:takuminv:20181003005012p:plain:w500

ちなみに、赤文字にマウスが乗ると次のように炎が表示されるギミックがあるんだよね。この炎はgif画像だから、すこしホラーチックなんだよね。

f:id:takuminv:20181003005350p:plain:w500

このギミックは、mouseoverイベントとmouseoutイベントを利用しているんだよね。以下がそのコードなんだよね。赤文字のリンクには、link-akumaというidを振っていて、炎にはfireというクラス名を割り振っているんだよね。 link-akuma(赤文字のリンク)にマウスが乗ったときに、fireクラスのdisplayをinline(表示)にして、マウスが離れたときに、displayをnone(非表示)にしているんだよね。簡単なんだよね。

$("#link-akuma").mouseover(function() {
    $(".fire").css("display","inline");
}).mouseout(function() {
    $(".fire").css("display","none");
});

2. フォントの変更

悪魔の数字を扱っているのに、普通のフォントじゃ味気ないんだよね。だから、ホラーチックなフォントに変更したんだよね。変更前と変更後を比べてみるね。フォントを変えるだけでここまで印象が変わっちゃうんだよね。

f:id:takuminv:20181003011401p:plain:w500

f:id:takuminv:20181003011404p:plain:w500

使用したフォントは怨霊フォントなんだよね。暗黒工房日本語フリーホラーフォント怨霊

ひらがな、カタカナ、数字、漢字に対応していて理想的なフォントだったんだよね。 CSSに以下のようなコードを追加することで、font-familyで怨霊フォントをしようできるようになるんだよね。

@font-face {
    font-family: "Onryou";           /* フォント名 */
    src: url("../font/Onryou.ttf");  /* フォントファイルへのパス */
}

3.色の変更

もっとホラーチックにするために、背景色やグラフの色を変更したんだよね。背景は白から黒に変更したんだよね。この方がホラーチックだってこと。グラフの色も黄色と紫に変更したんだよね。選択基準は特にないんだよね。直感ってこと。

f:id:takuminv:20181003011819p:plain:w500

4. GitHub Pagesの利用

GitHubには、GitHub Pagesという機能があるんだよね。これは、GitHubが提供している、Webページを公開することができる機能なんだよね。使い方は以下のサイトを参考にしたんだよね。

https://www.tam-tam.co.jp/tipsnote/html_css/post11245.html

それで、公開してみたんだよね。すると、ページの表示にめちゃくちゃ時間がかかっているんだよね。だから、Chromeの開発者用ツールを利用して、原因を調べてみたんだよね。それが次の画像になるんだよね。これを見ると、フォントファイルの読み込みに11秒もかかっているんだよね。原因は13Mとかいう容量の大きさだよね。

f:id:takuminv:20181003013352p:plain:w500

4-1. フォントファイルの圧縮

フォントファイルの読み込みを速くするために、ファイルの圧縮を行うんだよね。これには、サブセット化という手法を用いるんだよね。フォントファイルの容量が大きい理由は、膨大な文字に対応しているからなんだよね。つまり、ページで使用しない無駄な文字にも対応しちゃってるってこと。サブセット化というのは、無駄な文字を省くことでファイルを圧縮する手法なんだよね。サブセット化には、サブセットフォントメーカーというフリーソフトを使用したんだよね。ダウンロードと使い方は以下のサイトを参照したらいいんだよね。

サブセットフォントメーカー

フォントファイルをサブセット化したファイルに変更して、もう一度GitHubPagesで公開してみたんだよね。すると次のようになったんだよね。読み込み時間は、0.6秒、ファイルサイズは54kまで減少したんだよね。圧縮のおかげでスムーズに表示されるようになったんだよね。

f:id:takuminv:20181003013323p:plain:w500

4-2. gif画像の圧縮

よく見ると、gif画像も874kBとちょっと容量が大きいんだよね。こいつも圧縮しちゃうんだよね。圧縮には以下のサイトを使ったんだよね。これは、ブラウザ上でgif画像を無料で圧縮できるんだよね。画像の見た目もほとんど変わらないから便利なんだよね。

www.iloveimg.com

gif画像を圧縮して、もう一度公開した結果が以下の通りなんだよね。圧縮した結果、読み込み時間が1.2秒から0.9秒に短縮できているんだよね。容量も、531kBと40%くらい圧縮できているんだよね。これで、皆さんも安心、快適に悪魔の数字ツールを使うことができるんだよね。人類の選別はもう始まってるんだよね。

f:id:takuminv:20181003015105p:plain:w500