サイト改装 脱jQueryなど

投稿 2018年05月25日
6
カスタマイズ
EducationMFITipsSEO高速化上級者向け

現在自身のブログを改装中です。まだ続行中。

作業のメインは 脱jQuery です。もしかしたらみなさんの中にも同じように書き換えをしよう・したいと思っている方がいらっしゃるかもしれません。
私が今やっているのはあくまでも私自身のブログテンプレートへの修正であって、既存共有テンプレートや今後のテンプレートも同じ方針にするかどうかはまた別の話し。

脱jQueryの目的は平たく言うと サイト高速化 だったりするのですが、実際には目に見える改善はさほど無いというかなんというか。

書き換え指南の記事ではありません(すみません)
作業にあたり考えた事、結論などなど。

使用テンプレートはAxisです。

Axis - FC2ブログテンプレート - テンプレート

Axisテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 スマートフォン版を非表示にしてご利用ください。 設定ページ 最終更新 2018.3.23 タブレットの表示不備を修正...

jQueryからネイティブJSへの修正項目

Axisテンプレート環境(共有されているものと同じ仕様です)

  • グローバルナビゲーションを横スクロールに (jQuery → CSS + ネイティブ)
  • 要約記事の文字数制限方法を変更 (jQuery → CSS)
  • スクロールアンカー (jQuery → CSS)
  • 汎用ページ送り (jQuery → ネイティブ)
  • 個別記事サムネイルつきページ送り (jQuery ajax → ネイティブ XMLHttpRequest)
  • スムーススクロール (jQuery → ネイティブ)
  • スライダープラグイン (jQuery「Flex slider」→ ネイティブ「Swiper」)

個人環境

  • TOC見出し目次 (jQuery → ネイティブ)
  • 汎用ページ送り (jQuery → ネイティブ)
  • 画像拡大表示 (jQuery → ネイティブ)
  • 開閉スクリプト(文章用) → (jQuery → html5+CSS)

グローバルナビゲーションを横スクロールに

グローバルナビゲーションというのはサイト内の主要ページを行き来するためのリンクの集合体のことで、大抵の場合ページの上部に設けられています。
グローバルナビはSEO的にも閲覧者利便の観点でもとても重要ですので、無くすだとかスマホでは非表示(代替なし)といったことはナシの方向で。

えと。書き忘れましたがスマートフォン版のことは念頭にありません。
レスポンシブデザインについての記事ですので、スマホ版を併用している方は読む必要はありません(笑)

現在主流のナビスタイルは

  • ハンバーガーメニュー(展開型)
  • 横スクロール

でしょうかね。これまでよく見かけたようなリンクが横に並んで画面に収まらない場合は下へ折り返してまた横に並べていく、といったスタイリングは少なくなっているように思います。
個人的にスマホではメニューを固定したい方なんですね。
上記のようなナビでは固定した場合リンクの内容量によっては画面を削られることになりますので(ナビの縦幅が大きくなるという意味)、ハンバーガーか横スクロールを選ぶ機会が多くなるかと思います。

デフォルト (ハンバーガー)

ハンバーガーメニュー

修正後 (横スクロール)

横スクロールメニュー

個人的にはハンバーガーの方が好きなんですよね (´・ω・`)
ハンバーガーメニューはGoogleによると「クリックする人が少ないかも。気づかない人居るかも。」ということで、リンクは開いてある方が好ましいのではないか、だそうです。
とか言いながらGoogleの検索トップページはハンバーガーメニューじゃん。
(ちなみにYahoo!検索は横スクロールです)
それにこれだけスマホデバイスが浸透しているのですから、ユーザーの方から慣れる。ハンバーガーはもうスタンダードと言って良いのではないか (´・ω・`)

デフォルトのハンバーガーアイコン変化についてはCSSを利用しておりJS利用はありません。
一定横幅を下回った際に折りたたみに変更されますので、折りたたみの開閉にjQueryを利用。
それにプラス、一定スクロールでナビの下部にシャドウが付くようにしてあります。
こちらもjQuery。
さらに加えることの、下方向にスクロールした際にはナビを上に飛ばし、上方向にスクロールすると降りてくるという動作もjQueryで実装。
基本動作 --- jQuery3
ハンバーガー動作 --- CSS

横スクロールへの変更は、まずハンバーガーアイコンが不要なので関連CSSを削除。
折りたたみも不要となりますのでjQuery削除。
横にスクロールさせるためのCSSを追加し、シャドウ用のJSは温存するもjQueryからネイティブに変更、といった内容です。
基本動作 --- ネイティブ1
スクロール動作 --- CSS search仕様変更 --- html, CSS追加

ソースコードを掲載しようかと思いましたが、とっても煩雑な作業内容(煩雑コードではなく煩雑作業内容)ですので希望があればということにします。
横スクロールメニューの注意点というか… もうこれは不可抗力に近いのでアレですが、リンクが画面内に綺麗に収まっているとまだ横にリンクが隠れていることに気づいてもらえないことがあります。
なのでページが表示される際にナビを少し横からスライドインするようなアニメーションをつけておく。
それで多少は目を引くことができるのかなぁ、と。
また、変更時にはリンク内の「検索(search)」がとても使いづらくなりますので、オーバーレイに変更するなどの工夫も必要です。

あー、あとデフォルトに「jQuery3」と、jQuery実行コードが3つになっているのですが、これはカスタマイズを考慮してわざと分けているだけで実際には一つにまとめられる内容です。コードはまとめられるけど実行内容は3つあるよ、ということでもあります。念のため。

要約記事の文字数制限方法を変更

こちらについてはクロスブラウザ問題があり。
CSSには「文字数」ではなく「行数」を制限する方法が存在します。

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;

3行に設定、3行を超える場合には末尾に…リーダーが表示され、残りは非表示、という指定です。
これがとても便利ですが、ご覧頂くとわかる通り webkitブラウザ限定 です。

ここでちょっと、もしかするとご存じない方もおみえになるかもなので説明。
ブラウザはベンダー毎に「レンダリングエンジン」というのを持ってます。

  • Google Chrome --- Blink (旧 webkit)
  • Safari --- Webkit
  • Firefox --- Quantum (旧 gecko)
  • Microsoft Edge --- EdgeHTML

といった具合です。
レンダリングエンジンとは読んで字のごとく「データの生成・描画」を司るもので、ブラウザによって表示が異なったりするのは概ねこれが原因です。

iOSはご存じの通りAppleの独占スマホOSで、デフォルトブラウザはSafari。つまりwebkitです。
で、Appleは第三ブラウザに独自エンジンの使用を許可していませんので、iOS上のブラウザは全てwebkit です。
ChromeもFirefoxもEdgeもApp storeからインストールできますが、全部webkit。
Androidは違いますよ。

なので必然的にスマホブラウザでの挙動を語る場合にはブラウザ名ではなくOS名やレンダラー名で説明することになる、という点のご理解をお願いします。

で、webkitのベンダープリフィックス付きですのでwebkit互換の無いブラウザでは動作しません。
パソコン版Firefoxがそうですね。iOS版はしつこいですがwebkitですから利用可能。
なのでFirefox用のフォールバックが必要です。この場合は末尾の三点リーダーは出ません。

  height: calc(1.3rem * 1.5 * 3);
  overflow: hidden;

こんな感じでしょうかね。1.3remは文字のサイズ、1.5は行間指定、3が行数。

最初がChrome、次がFirefoxでの表示です。
文章末尾の三点リーダーを確認。
リーダー表示に目を瞑れるのであれば有効な方法かと思います。といっても文字数制限のJS自体ほとんど負荷は無いのですが。
そしてjQueryの利点は ブラウザ間格差の吸収 もその一つですから、本記事内容もその点を念頭に置いた天秤(検討)という感じになります。

デフォルト
文字数制限 --- jQuery1

修正後
文字数制限 --- CSS

スクロールアンカー

メインとサイドのコンテンツ差分がある場合、いずれかがスクロールで画面外に流れていかないようにする「スクロールアンカー」
デフォルトで導入しているものはjQueryで、とても使い勝手が良いのですが無くすことでJS及びhtmlの一部を減らすことができます。
ただし同じ使い勝手というわけにはいかない。
使いやすさという点ではデフォルトのjQueryの方が遥かに勝っています。

  position: -webkit-sticky;
  position: sticky;

これだけ。もちろんどこに指定するか、固定ナビの場合は被ってしまいますので topプロパティあるいはbottomプロパティを追加した調整が必要です。
こちらに変更する際には html内容の修正必須
ラッパーを減らすというか減らす「ことができる」という表現でも良いと思います。

汎用ページ送り

FC2ブログのページ送りは独自変数の利用が必須なので外部ファイル化が難しいですよね。
とはいえFC2独自変数にJS変数を代入すれば可能です。
ですが今回は外部化せずインラインで書きました。
せっかく外部ファイルにしても結局別でコードが必要なわけで、それが非常に気持ち悪かったから (´・ω・`)
デフォルトjQueryも当然そうなのですが、せっかく書き換えるならまとめたかったというわけです。

外部ファイル化するかインライン(html内に直接書くこと)にするかは悩みどころだと思います。

インラインのメリット(pros)

  • 通信リクエストが発生しない

インラインのデメリット(cons)

  • キャッシュが効かない

外部ファイル化のメリット(pros)

  • キャッシュが効く

外部ファイル化のデメリット(cons)

  • 通信リクエストが発生する

pros と cons が真逆。
初回訪問を大事にするならインライン、サイト内回遊を大事にするなら外部ファイル、ですかね。
ここは結論を出せない人の方が多いかも。私だってそうです。

デフォルト
基本動作 --- jQuery1 (外部ファイル + インライン)

修正後
基本動作 --- ネイティブインライン1

個別記事サムネイルつきページ送り

こちらについては画像をなくしてしまうというのが最も軽量化に結びつく対策です。
が、今回サイドにつけていたカテゴリ間移動のページャーも時系列ページャーの下にまとめたのでサムネイルが無いとどうもわかりづらい。
なので画像の取得は排除しませんでした。

ホントはfetch APIを利用したかったのですが、premise, thenの理解が全く追いついていないため、古い手法「XMLHttpRequest」で行いました。
や、fetchでもできるはできるんだけど、複数処理しようと思うと動かなくなる。
それが何故だかわからない。つまり理解できていない((((笑)

デフォルト
基本動作 --- jQuery1
カテゴリ用ページャ --- jQuery1

修正後
基本動作(カテゴリ含む) --- ネイティブ1

スムーススクロール

スムーススクロールも悩みの種なんですよねぇ (´・ω・`)
JSのソースコード見て頂くとわかると思うのですが、大抵こんな記述があります。

$('html,body').animate ....

html と body
2つ指定してありますよね。
これは何故かと言うと、ブラウザ毎にどちらをスクロールイベント対象に指定できるかが違うから。

webkitの場合は body です。それ以外のブラウザは html
html, body と書けば双方に指定できますけどもコールバックが二回呼ばれてしまいます。
わかりやすいのは不透明度なんかをつけると「あぁ、これはアカンやつ…」ってなります(笑)
スムーススクロールでopacityを組み合わせることは稀でしょうからそうそう気づくこともあまりありませんが。
ただこの件については「webkitを見分ける」(つまりUA判定)ことで対策可能。
でもさ、私今回IE対応も思い切って辞めたんですよね。
IEだったらこう、IEの場合はこっち、という 見分けに疲れた
なのにwebkitも見分けなアカンのかい、と。

JSを用いずCSSでスムースなスクロールを実装する方法は実は結構前から有るんです。

body {
  scroll-behavior: smooth;
}

これだけです。なんて簡単。
ところが まさかのwebkitで未実装
webkit未実装ということは iPhoneで動作しない ということです。
それはダメだろう。どう考えても。

iPhoneは元々独自の慣性スクロールを持っていますので、なんだかんだで実装が遅れそうな気が… (∵`)
あと最近有名サイトからページTOPボタンが消えていることに気づきました。
マークアップ言語を扱っているサイトほどその傾向が。
ページTOPボタンとかもう廃れてるんですかね。え?どうなんですか?(笑)
確かに読ませる実力のあるサイトに「TOPへ戻る」は要らない気がするな。ナビとかが固定してあればなおさら。
でも私のブログとかならちょっと流してすぐさまページTOPに戻りたいじゃないですか。ねぇ?(自虐)

個人的に「ページ内移動である」ことが事前に不明である場合にはアニメーションが必要だと思います。
でないと閲覧者は何が起こったかわからない。
ページが遷移したのかと思ってしまうことも。
でもページTOPやBOTTOMへの移動ボタンって押す前にもうページ内での動作だとわかりきっているのでアニメーション不要な気がしてきましたよね。書いてるうちに(笑)
とりあえずスムーススクロールについては自身の中で未解決事項です。

scroll-hebavior を試したい方でAxisをご利用の方は #primary に指定してある overflow: hidden; を削除し、min-width: 0; を追加してください。
でないと動きません。

デフォルト
基本動作 --- jQuery1インライン

デフォルト
基本動作 --- ネイティブ1外部ファイル

開閉スクリプト

いわゆるアコーディオンのことです。
まだ始めてはいませんが近々に直す予定。
文章を開閉するのにもこれまでだとJS一択という感じでしたがhtml5でできます。
html5では「装飾はhtmlで行わない」という理念がありますが、こちらについては「詳細情報」という定義で、詳細情報は最初からオープンにしておく必要はない、読む場合はクリックして開くという感じで「装飾」という捉え方ではないということでしょうね。
(初期設定をopenにしておくことも可能です)

Lorem ipsum dolor sit amet, fabellas iracundia gubergren vim te. Pri in justo etiam omittantur. Nemore dictas ne duo. Vim dicta dolorem persequeris an, vim dico expetenda et. Tractatos similique est no. Eam cu quando quodsi, habeo semper ne vix.
<details class="acmenu">
  <summary class="actitle" aria-expanded="false">表示テキスト</summary>
  <div class="acmenu-inner">ここに収納する内容</div>
</details>
@keyframes ac-slideInDown {
    0% {
        opacity: .3;
        transform: translateY(-30px)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}
.actitle {
    margin: 30px auto 0;
    background-color: white; /* タイトルの背景色 */
    border: 1px solid rgb(100,100,100); /* タイトル周りボーダー */
    color: rgb(51,51,51); /* タイトル文字色 */
    line-height: 50px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}
.acmenu[open] .actitle {
    color: red;
    transition-duration: .3s
}
.acmenu[open] .acmenu-inner {
    padding: 30px 0;
    animation: ac-slideInDown .8s
}

これならわざわざJS使う必要が無いので簡素ですよね。
サンプルと同じで良いならば上記の通りです。CSSカスタマイズはご自由に。
テキスト横のマーカーは自動で付きます。消したくなりますが消すにはwebkitベンダープリフィックスが必要。言い換えるとwebkitとその互換を持つブラウザしか使えないので無理に消さない方が良いかもです。

.actitle::-webkit-details-marker {
  display: none;
}

どうでも嫌ならpositionと疑似要素を駆使してマーカーを「隠す」とか。
やりたいと思わないのでサンプルコードはありません(笑)
記事内でアコーディオンを導入したいと思った時に簡単に使えます。

まとめ

まだ修正中なので中間報告という形ですが、JSをjQueryからネイティブに直すというのは かなり困難な作業 です。
知識が無い場合よほどの覚悟が無い限り手を出さないのが賢明。
そして労力と見返りが見合わないと思います(笑)
確かにパフォーマンスは挙がっているのですが、目をみはるほどの改善というわけにはいかない。

ともかく全てのjQueryを排除してようやくjQueryライブラリのファイルを外せるようになりますので、一旦整理した後は常にネイティブJSを書くという決意も必要です。
で、やっぱり共有に出すテンプレートの脱jQueryは厳しいと思います。
みなさんが某のJSプラグインを追加しようと思った場合、大抵それはjQueryです。
ネット上に溢れているちょっとしたJSのtipsもほとんどがjQuery
どうしても使いたければjQueryファイルを追加すればすぐに使えるようになりますが、それでは苦労が水の泡。
jQueryを捨てる理由はjQueryライブラリを読み込まなくて済ませるためなのですから意味ないですよね。

jQuery、昔は100KBを余裕で超えていましたが、現在最新の3系では80KBぐらい?
70KB弱のスリムビルドの提供も始まってます。
(アニメーションなどを利用したい場合はスリムでなくオリジナルの方を利用)
80KBと引き換えの便利さ。まぁ80KBの代償ならば安いと思いますね。

結論としては「安易な気持ちでやるな」です。
それよりも 今使っているプラグインなどが本当に必要かどうか を見直すとか。
記事内で数回利用しただけのファイルを常駐させていないか
とくにCSSファイルですよね。webアイコンを動かすだとか、写真を装飾するだとか。
滅多に使わないのであれば常駐させないことです。html5ではstyle要素が使えますので記事内に直接CSSを書けば良いんですよ。

というわけで脱jQueryを考えている方にとってはとても気の萎える記事でした(笑)

YOU MAY ALSO LIKE
もっと見る
vanillaice (Akira)
vanillaice (Akira)

6 COMMENTS

There are no comments yet.

ロビンソン  

お世話になります。
この記事内にもある#tocのcssですが、Akira様のソースを覗かせて頂き下記のように修正しました。

修正前
#toc:before {
content: "\f03a";
display:none;
font-family:'Font Awesome 5 Solid';
}

修正後
#toc::before {
content: "目次";
display: flex;
align-items:center;
justify-content:center;
position:absolute;
top:0;
width:100%;
height:3em;
}

下記を削除
#toc .svg-inline--fa {
margin-left:-7px;
position:absolute;
top:1em;
left:50%;
}

修正の目的はFontAwesome5の疑似要素利用の排除です。(脱jQueryは自分には不可能だし、「目次へ戻る」も残したかったので)
見た目では問題ないようですが、この修正で大丈夫か見ていただけたらありがたいのですが。

https://filipinadating.blog.fc2.com/blog-entry-19.html

厚かましいお願いで申し訳ありませんが、もしお時間がありましたらよろしくお願いします。

追伸:テンプレートはClassicaです。

2018/06/02 (Sat) 13:33
vanillaice (Akira)

Akira  

To ロビンソンさん

こんにちは (o'ω')ノ

はい。問題無いと思いますよ。
疑似要素でテキストを入れる場合にはcontentの値にそのままテキスト内容を入れるだけです。
記号などの場合にはユニコード表記が必要です。

Font Awesome5はSVGへの変換のためにi要素を利用した宣言(合図)を行っているだけなので、その宣言を見つけると問答無用で変換が行われてしまうんですね。
なのでblockquoteの場合クラス名の付いたblockquoteや深層指定(div > blockquote など) ものにcontent: none; を指定しても変換が行われてしまいます。
要素に直接スタイルをあてる弊害でもあります。
ちょっと説明しづらいですがなんとなく伝わるでしょうか ^^;

2018/06/03 (Sun) 15:11

ロビンソン  

お世話になります。
ご回答頂き安心しました。

>ちょっと説明しづらいですがなんとなく伝わるでしょうか ^^;

正直言うと、さっぱり分かりません(爆)
説明が分かりにくいとかではなく、私自身のスキルです。
それでもご親切に教えていただいた事は覚えておいて、何かの折にはまた読み返します。

blockquoteでのFontAwesome5の疑似要素については、記事内でblockquoteをほとんど利用しておりませんので、テンプレートのアップデートまたは今後の新作テンプレートの中身を参考にさせていただきます。
その前に表示崩れなどが見られたら、<p>タグで何かセレクタを当てて代用します。

ありがとうございました。

2018/06/03 (Sun) 18:05
vanillaice (Akira)

Akira  

To ロビンソンさん

ですよねー ( ̄∀ ̄;)

もう一度チャレンジ。難しくとも問題ありません。私の方で今後の対処をする予定です。

-----
前提
1. blockquoteの装飾はセレクタでなく要素に直接行う
(ユーザーが引用を行う際にクラス名をつけるとは思えない・強制も徹底も不可能であるため)

FA問題点
・バージョン5 SVGの特徴はi要素をそのままi要素として表示するのではなく、単にSVGへの書き換え合図として利用しているだけ。
(JSによって変換処理が行われる)

・疑似要素で利用した場合にもユニコード表記が行われるわけではなく、SVGへ変換される。
(そのためxxx::before に display: none の指定が必要となる)

・xxxはセレクタ名を指定できず(前提があるため) blockquote::before とせざるを得ない。

・blockquote全てにFAの変換が行われてしまう

・その他のblockquote(ブログカードなど)が仮にセレクタを持っており、.yyy とする。
その .yyy に
.yyy::before {content: "none"}
と指定した場合、本来は全blockquoteから.yyyが装飾対象から外されるが、既にSVGへの変換がされており表記不明の!と?の明滅となる。
つまり除外が効かない。
FAの指定をセレクタに限定すれば可能であるが前提があるため不可

----
こういうことですね (´・ω・`)
要素に直接スタイルをあててしまうと、同じ要素で除外をしたい場合がそもそも面倒です。
それでもその除外要素がセレクタを所有していれば可能ですが、FAの「変換」という特徴が先に適用されるため不可、という流れ。
なので先回「z-index: -1 を削除しないでください」とお伝えしました。
これはスタイルの取り消しが効かないのでレイヤーの下(下位)に潜り込ませるためです。

初心者の方にはとても難しい理屈だと思います。
やはり使いづらくなりましたよね。
CSSの方を利用すればこれまでと同じ感覚でできますし疑似要素も同じように使えますが、通常はみなさん「推奨」とされる方法を使いたいですよね。
もしかしたらFAが今後CSSの配給を辞めるかもしれないし。

というわけで疑似要素にFAを利用しない方向が一番良いと思います。

2018/06/03 (Sun) 23:58

ロビンソン  

お世話になります。
前回も丁寧に教えていただきましたが、実はまだ理解出来ていません。
svgがjpgやpngのようなカメラ等で取り込んだ画像ではなく物理的にデザインした要素のような感じなのと、z-indexがレイヤーの前面に表示される順のような感じだと理解している程度なので、対処していただけるという言葉に救われる思いです(苦笑)

鍵付きコメントを止めた事で、やり取りを読んで「こんなブログをやっている人にも対応してくれる」と分かるので、もしかして私のようなカテゴリのブログのレベルアップに役立てれば本望です。

今後ともよろしくお願いします。


2018/06/04 (Mon) 01:29
vanillaice (Akira)

Akira  

To ロビンソンさん(終了のご報告)

お疲れ様です ('0')/

対処するといっても「使わない」というだけです(笑)
はい。こちらこそよろしくお願いします (o'ω')ノ

2018/06/05 (Tue) 01:15