サイト改装 脱jQueryなど

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

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

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

vanillaice000.blog.fc2.com

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にしておくことも可能です)

<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を考えている方にとってはとても気の萎える記事でした(笑)