テンプレートメンテナンスの目的と制作理念について

Font Awesomeという便利なライブラリ

非常に便利ですよね。ユーザー数はかなりの数にのぼると思います。ところが少し問題もあるっちゃーある。看過できない諸問題についての解決が今回のメンテナンスの目的の一つです。
記事内でFont Awesome(以下 FA と称す)を使ったことがない・テンプレートやプラグインにFAアイコンを追加したことがない・FAなんて知らん、という場合には全く関係がありませんので流し読みで。

• 簡単に使える利点はあれど表示が遅い
• バージョン4からバージョン5への大規模なアップグレードでいろいろ変わってしまった

スピードへの影響

FAは「アイコンフォント」「SVG」など専門用語を知らなくとも気軽に使えるのが一番の利点です。ごく簡単なhtmlを記すだけで勝手にアイコンに変換してくれるのですからものすごく便利。

ところがその性質上 ファイル参照 を避けられませんので ページの表示スピードに影響が出る ことがあります。
FAのバージョン5ではアイコンフォントのCSSとSVGのJSとが選べるようになっていますが、どちらを選んだとしても 全アイコンを一旦は参照しなければいけない んですね。たくさんあるアイコンの中から片手で足りる数のアイコンを利用したとしても、一旦は全データを参照することになります。

加えてJSの場合にはhtmlを 変換する という処理も行っていますので、体感としてかなり 遅い です。また性質上ページのDOMの一部をJSで書き換えている(i要素からsvg要素へ書き換え)のですから、即レンダリングではなくページが表示されてから一歩遅れてアイコンが出てくる、という感じです。という感じもなにも実際そうなんですが。

で、2018年後半現時点でのweb界隈だと ページ表示スピードが重要視 されています。ページスピードに影響するのは

1. 画像
2. スタイルシート
3. JavaScript

上記が三大要素です。FAのCSS(webフォント)は2に、JS(SVG)は3にそれぞれ該当します。なので 無ければ無いに越したことはない です。ページスピードに重きを置くならば、の話です(ただしCSSやJSのファイルはキャッシュが効きますので全否定はしません)

Font Awesome側の仕様変更

いろんなことが変わってしまいました(笑)
その影響はざっと以下の通り。

1. html内容が変わったのでファイルのバージョンと整合性が無い場合は表示が行われない
2. 疑似要素での利用方法も若干の変更あり
3. 無料から有料に切り替わったアイコンあり
4. lightタイプ(細め)は有料でなければ使えない

まずhtmlが変わりました。

バージョン4まで

<i class="fa fa-facebook" aria-hidden="true"></i>

バージョン5

<i class="fab fa-facebook-f"></i>

上記はFacebookのブランドアイコンですが、i要素はそのままでも クラス名 が変更になっています。バージョン5のファイルを参照して旧バージョンである4のhtmlを記した場合には 表示が行われません。FAはクラス名でアイコンを出し分けしていますので、一文字でも違えば当然表示できません。
でもって方針さえも変わっています(笑)
WAI-ARIAどうなったんや （￣∀￣；）
WAI-ARIAというのはWeb Accessibility Initiative のことでhtml, CSSの規格を束ねるW3Cの内部組織ですが、html, CSSなどと違って正規の規格ではなくアクセシビリティ向上を目指すものです。要は厳格な使用ルール(使わなければいけないというルール)は無く、余力があればやってね、という感じです。現時点では。
aria-hidden が true値 になっている場合、スクリーンリーダーはアイコンを読み上げません。その方針(WAI-ARIA準拠)は捨てたんでしょうかね(笑)

Font Awesomeの扱いの結論

テンプレートの一般利用者さんがFAを使ってみようと思えば当然本家のサイトに赴き、htmlを取得します。ところがすぐに取得できるhtmlを記してもテンプレート内のFA基本ファイルが旧バージョンだと表示されないわけなんですね。すると大抵の方はテンプレート内のファイルはそのまま残して新たにバージョン5のファイルを追加してしまうことになります。たった数種のアイコンを使いたいがためにCSSファイルあるいはJSファイルを増やしてしまうことになりかねません。あるいは諦める方も出てくるでしょう。

リリース時期の古いテンプレートはFAが旧バージョンのままですから今回のメンテナンスで5へ変更しています。過去に掲載したhtmlに影響が出ることになりますが、過去でなく未来を見据えて5への以降を行った、ということです。本当はFA自体を外してしまうのが一番良いのですが、どうも使用率が高いようなのでいきなりでは困るだろうと思いまして、CSSのFAについては削除ではなくアップグレードという道を選択しました。

JSのFAを入れてあるものについては既にバージョン5ということになりますが、メンテンスで 削除 をしています。JSの方はもう表示の遅れがハンパないですし実際重たいのでFAのJSに頼らず直接SVGのテキストデータを記すことで軽量化しています。

• CSSのFA → バージョン4から5へアップグレード
• JSのFA → 削除しインラインSVGに変更

インラインSVGというのはこういうのです ↓

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M8.309 189.836L184.313 37.851C199.719 24.546 224 35.347 224 56.015v80.053c160.629 1.839 288 34.032 288 186.258 0 61.441-39.581 122.309-83.333 154.132-13.653 9.931-33.111-2.533-28.077-18.631 45.344-145.012-21.507-183.51-176.59-185.742V360c0 20.7-24.3 31.453-39.687 18.164l-176.004-152c-11.071-9.562-11.086-26.753 0-36.328z"/></svg>

文字数が多くてびっくりするかもしれませんが、それは貴方が人間だからです。バイナリデータなどこういった数字やアルファベットの羅列というのはコンピュータの得意分野であり最も都合が良いのですから本来はこれが一番良いんですね。直にSVG要素を記すことでファイル参照が不要になり、また、html要素の変換作業も不要になりますので結構体感も変わってきます。

初心者がFAを導入したいと思った場合は JSよりもCSSの方が簡単 ですから、テンプレート内FAがCSSの場合はそのまま残しましたので、テンプレートユーザーさんがその都度FAのアップデートをして頂ければ、と思います(もちろん大きな変更があれば私の方でテンプレートレベルでのメンテナンスを行います)
FAがJSの場合には削除してしまいますので、FAで取得してきたhtmlを記載するだけでは表示されません。ですから自己責任で基本ファイルを記載してください。CSS・JSどちらを選ぶかも自己責任で決定をしてください。
新規リリースのテンプレートについてはFAのファイルは導入しない方向性です。

疑似要素について

疑似要素でのFA利用について少し触れておきたいと思います。テンプレート内容は処理済でみなさんのお手患いになることはありませんので、ご自身で追加される際のtipsとして。

JSのFAの場合には疑似要素は使えないと思った方が賢明です。実際には強引に使うことができますが、ユニコードで表記するわけではなくただ単に一定の書式を目印にSVGを追加表示しているだけです。ですから display: none が必要です。これを書かないと実際のcontentは存在しませんので豆腐が表示されてしまいます。

CSSのFAの場合の変更点は font-weight指定が必須 になったことです。何故ならバージョン5からは細身(weight 400)のアイコンは全てpro専用となりましたので、無料の場合には font-weight: 700 あるいは font-weight: 900 の明示が必要です。700はboldと同じ意味です。700か900かは アイコンによって異なります ので正しいweightを記すという注意も必要です。……め、めんどくせっ
ってゆーかこの変更点、常にweb制作してる人はすぐに見当が付くとしても一般ユーザーは無理だろこれ (´・ｪ・｀)

font指定の方もバージョン5の当初は font-family: 'Font Awesome 5 Solid' のように末尾は分類を書くようになっていましたが、現在では font-family: 'Font Awesome 5 Free' と、無料・有料の別を書くように変更されています。

jQueryという便利なライブラリ

便利シリーズ(笑)
新規テンプレートについてははFA同様jQueryもデフォルト導入しない方向です。が、既にリリース済みでjQueryの入っているテンプレートはリリースから結構な時間が経過しており既にユーザーさんが任意でjQueryプラグインを追加していたり、jQueryの書式でもって何かしらのJSを書いている可能性もありますので削除はしていません。
管理者の利便よりも閲覧者の利便、特に 表示スピード に関してはもう無視できませんので、スピード強化の一環としてのjQuery排除です。あくまでも今後のテンプレートでは、ということですね。

アニメーションの調整

結局のところ今回のメンテナンスも今後の方針もスピードを軽視しない、ということです。
アニメーションについてはローディングスピードに直接影響を及ぼすわけではないのですが、性質上動作を遅延させることになるわけですから、場合によっては「遅い」と感じてしまうことも。
「フワッ」は良いけど「フワァァ〜」はダメ、みたいな。要はゆっくりすぎる動作のアニメーションは避けるようにし、と同時に同ページ内のあちこちに散らばるアニメーションも今後はナシかなぁ、と思っています。

Lazyloading

ページ表示を遅らせる三大要素の一つが「画像」ですよ、ということで、FC2ブログのwebP, heic拡張子アップロード許可もまだまだ先でしょうし、個人が掲載する画像はさておきテンプレートレベルではやはり遅延読み込みが必要ですね。スピード計測すると必ず指摘される部分です。容量削減はもちろんのこと「below the foldの画像は遅延させてはいかが？」という指摘(笑)

lazyloadingは性質上、全文テンプレートでのデフォルト導入は難しいというよりもたぶん誰も使わない(使えない)と思いますので今後も要約タイプの特権という形になるかと思います。

Google Chromeがブラウザレベルでのlazylodingを実装予定ですが、当面はブラウザ環境設定を能動的に変更しなければ機能しないと思います。そしてChromeの独自実装という点もひっかかりますよね。じゃあ他のブラウザ使ってる人はどーすんだ、みたいな。別にどうもしないけどさ。遅延されないだけで (´・ω・｀)

「ブラウザの個人設定をxxxに変更してください」というのは製作者的にはNGだと思っています。ブラウザの環境設定をテンプレートの仕様に左右されるなんて勘弁してくれって感じですし。しかも閲覧者のブラウザ設定をコントロールできるはずが無いですしね。FC2ブログの個人設定のように管理者が設定すればそのまま閲覧者にも適用される(OGP設定や記事表示件数など)というなら話は別ですが。

Chrome限定の機能だとしても面倒な作業は一切不要で遅延されるのであれば、画像のhtml要素にlazyload属性を追加しておいても良いかもしれません。もちろん自己責任で。

<img src="URL" alt="" lazyload="on">

簡単ですね。ただしhtml構文ルール的にはlazyload属性なんてものは存在しませんのでバリデートエラーになります。ですが今後Google様のお力で正規属性になる可能性もあるかもしれません。
テンプレートのlazyloadingを利用しているという方はそのままお使いくださいね。こちらは全ブラウザ適用です。

アフィリエイトの規約は自己責任で

例えばサイドメニューの一部が画面外に流れていかないstickyや、サイドメニュー全体にスクロールストップがかかるスクロールアンカーなど。これらはASPによっては 禁止 されていることがあります。Google Adsenseなんかがそうです。規約はしっかりと確認されまして、stickyの場合はsticky部位への掲載を避ける、スクロールアンカーの場合はアンカーを解除するなど対策を行ってください。

例えばリンクを追加する際に、既にテンプレート内にあるリンクのクラス名などを参照することがあるかと思います。それは良いとしても別タブリンクの rel="noopener noreferrer" 属性を踏襲しないように気をつけてください。noreferrer はリンク元を参照しない、という意味ですから成果報酬がもらえなくなってしまいます。

アフィリエイターさんは「テンプレートにある内容をそのまま写す」「テンプレートの仕様を確認せずに追加する」のではなく、必ず規約との照らし合わせを自己責任の元で行ってください。

管理人コメントのプロフィールアイコン表示

他ブログサービスではコメントした主が同サービスブログ開設者であれば自動でアイコンが表示される場合が多いです。FC2ブログには残念ながらその機能はありません。

これまでは間に合わせでクラス名を利用した表示をしていましたが、管理人コメントのみは見分け変数が実装されましたのでなるべくそちらへ全て切り替えます。テンプレートによっては特殊な装飾をしているものもありますので、切り替えるかそのまま残すかは私の方で判断しようと思います。

ページtop, middle, bottomボタン

FC2ブログの 無料アカウント を想定して制作をしていますので、スマホで広告の出ない有料アカウントの方は右端にあるボタンが上すぎると感じるかもしれません。その場合は修正をしてください。

スマホの広告との干渉を避けるためには最低でも下に100pxの余白が必要です。でないと広告下にボタンが隠れてしまいます。100pxだと誤タップ率が高くなりますので130pxを設定しています。
ただしFC2ブログのスマホフッター広告は1種類ではありませんので、広告種によっては…お察しください(笑)

不要なJSは削除

例えばスライダーが不要だとして、htmlの部分だけを削除する方がいらっしゃいますが、JSの方も削除してください。
残しておくと例え使用していなくても読み込みは行われますので表示スピードに影響が出ますし、場合によってはJS実行エラーとなり悪影響しかありません。

また、FC2ブログ検索バー を利用しない方はhtml内に #sh_fc2blogheadbar という文字列を含むscript要素を削除しても構いません。全テンプレートではありません。一部の ナビゲーションがページ上部に固定される 系のテンプレートには含まれています。これは検索バーとの干渉を避けるために入れていますので、検索バー自体を使っていない場合には意味がありません。つまり不要。

さらに IEを無視できる という方はhtmlに MSIE 10 の文字列を含むスクリプトがある場合、それを削除しても構いません。
こちらはieではスクロールのカクつきが発生する場合にスムーススクロールの使用を強制的に止めるためのhackです。ieを無視できる場合は不要です(ただしieユーザーへ向けての注意書きは必要かもしれません)

【IE撲滅運動】IE利用者への啓蒙オーバレイ表示

ぼっちんさん に教えて頂きました。「こんなのあるぜ？」って感じで(笑) 最近は「IE非対応サイト」も徐々に増えつつあります。非対応というのは要は「IE向けCSSフォールバックは書かないからデザイン崩れてても知らーん」ってことです。大抵は。 というわけでIE利用者さんへ向けての「ごめんね。IEからはまともに見られないよ」「他のブラウザ使ってみない？」を促すためのオーバレイ表示を行う方法をご紹介くださっているサ...

vanillaice000.blog.fc2.com

Google+シェアの削除

サービス終了は2019年4月なのでまだ少し時間はありますが、今やっておかないと私が忘れる ←
ということで少し早いかもですが今回のメンテナンスでアイコン削除を行います。

モバイル表示リンクの削除

一部のテンプレートではmoble(スマホ版専用テンプレートでの表示)の切り替え用リンクを記載してあり、コメント解除することで使えるようになっています。が、レスポンシブデザインですからスマホ版と併用しない(テンプレートを共通化・一本化する)ことを大前提としています ので、今回のメンテで削除します。

テンプレート名の明記

フッターのデザイナーノートの前にテンプレート名を記載することにしました。以前「テンプレート名称がすぐにわかるようにしてほしい」というリクエストが届きましたし、名称がすぐにわかればご質問時に記事も探しやすいだろうと思います。煩わしいと感じる方は削除して頂いても構いません。デザイナーノート(Designed by 〜)は消さないでくださいね。

記事編集リンク

個別記事ページ滞在中、その記事の編集画面へすぐ飛べた方が便利ですよね。誤字・脱字を発見した時にはささっと手直しできますし。

ところがFC2ブログでは管理人と管理人以外とを見分ける変数が一部しか存在しません。その一部が「管理人コメント」です。コメントを見分けられるのだから閲覧も見分けが付くだろうと思うのですが、実装されていないので仕方がない。つまり編集用のボタンは管理人だけでなく一般閲覧者にも押せてしまうという仕様です。

無いと困るし有ると閲覧者が押して戸惑わせてしまうし… というわけでなるべく目立たない(一般閲覧者に気づかれにくい)ようにできそうなテンプレートに関してはそのように修正しています。

まとめ

一番の厄介事はFont Awesomeなんですよねぇ (´・ｪ・｀)
正直ここまで仕様が変わるとは思っていませんでした。なので今後はデフォルト導入はしません。すみません。仕様変更はつきものですからその都度対処するしかないのですが、FA関連の対処はここまでかな、と思います。ここからまた大きく変更が入るというのは考えにくいですが、メンテナンスを初めて数日でバージョンが 5.6.0 から 5.6.1 へ、そして翌日には 5.6.2、現在はもう 5.6.3 になってます(笑)

ただこれ、「Font Awesomeとかわかんないです」とか「テンプレートのカスタマイズはしないです」という方は全く関係ありません。テンプレートの方は私が管理している(つもり)ですから、ご自身で書かれる記事に集中してください。記事内でFA使ってる、という方はご自身の今後の方針なんかも併せてお考えくださいね (´・ω・｀)