今就活で、３～5年前に作ったページをポートフォリオ掲載のため改修しているのですが、どれもhead内の情報が古くなっています。大きく表示が崩れるなどの理由がない場合はダミーテキスト中の日付やコピーライトと併せて新しくしておきたいところです。
忘備録として、またコードの理解を深めるためにも具体的にどう書き換えたのかを簡単に書いておきますね。途中で書き換えている部分もあるので完全に当時のままではない事をご了承ください。タイトルやページ概要などは省略しています。
コピペ自由ですがFont AwesomeとjQueryは公式のファイルを使う場合固有の文字列が必要になりますので気をつけていただけたらと思います。オリジナルのスタイルシートのディレクトリも適宜変更してください。また、当然時間が経てばどんどんバージョンが上がりますので都度現在のバージョンをご確認ください。
Head内
Before
<head>
<!-- 省略 -->
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Noto+Sans+JP:wght@100;300;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
<link rel="stylesheet" href="./public/assets/css/style.css">
</head>After
<head>
<!-- 省略 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" as="style" fetchpriority="high" href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Noto+Sans+JP:wght@100;300;500;700&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Noto+Sans+JP:wght@100;300;500;700&display=swap" media="print" onload='this.media="all"' />
<link rel="stylesheet" href="./public/assets/css/style.css">
</head>解説
変わった点は以下の通りです。
1、Swiper➩8系から11系へ
単純に@8を@11に変えるだけでも大丈夫っぽいですが、公式の案内が UNPKGではなくjsdelivr.netになっているのでそれに従ったほうが無難だと思います。後述しますがbodyの閉じタグ直前にjsのコードも入れます。
参考リンク
2、Google Fontsの読み込み方の変更
単に読み込むだけではなく適切な順序で読み込まれるようプロパティを３つ追加しました。完全にTAKLOGさんの真似です。
参考リンク
4、Font AwesomeはCSSではなくjsを使う
以前は登録しなくてもコードがコピペできた気がしますが数年前から登録が必要になってます。サブドメインもuseだった部分がkitになっています。登録が面倒な方はcloudflare.comのCDNも使えるようですのでそちらを使ってみては。
後述しますが取得するのはjsのコードですのでbodyの閉じタグの直前に挿入します。
参考リンク
次にbodyの閉じタグ直前の記述について説明します。
Body閉じタグ直前
Before
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></sc
<script src="./public/assets/js/script.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script src="./public/assets/js/swiper.js"></script>
</body>After
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/xxxxxxxxxxxx/xxxxxxxxxxxxxxxxxxxxx/xxx/xxx=" crossorigin="anonymous"></script>
<script src="./public/assets/js/script.js"></script>
<script src="https://kit.fontawesome.com/xxxxxxxxxx.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="./public/assets/js/swiper.js"></script>
</body>解説
変更点は以下の通りです。
1、jQueryを最新版に
公式サイトのjQuery Coreからお好きなバージョンと形式を選んでクリックするとコードが出ます。今回は「jQuery Core 3.7.1 minified」を選びました。integrityとcrossoriginというタグはセキュリティを強化するために入っているそうです。xxx…となっている部分はご自身の文字列に置き換えてください。
参考リンク
2、Font Awasomeはjsのコードワンライナーに
公式のKitを使った場合こちらに1行書けば済みます。xxxxxxxxxx.jsとある部分は固有のファイル名に変えてくださいね。
3、Swiperのコードは上と下の二か所
人によると思いますが私の場合UNPKGからjsdelivr.netにCDNを変更しましたのでURLも新しくしました。二か所入れる点は同じですね。
おわりに
サイトの正常な挙動を保つためにもセキュリティのためにも時々見直したいところですね。自動でアプデできるプログラムとかもあるのかもしれませんが今回はここまでにしておきます。
24.12.23追記 : こういう部分こそ生成AIが得意とするところかもしれませんね。頻繁に変更をする場合にはCorsorのドキュメント参照機能が便利です。そうでない場合はVS CodeのGitHub Copilotか、直接Chat GPTなどに訊いてもいいと思います。
コメント