この日記に色々な機能を追加しようと考えています。様々なサイトのサンプルを見ていると、Javascript を使用しているものが多く、jQuery を使えるようにする必要があると感じました。
まず、手始めに JavaScript の ライブラリである jQuery をはてなブログで使えるように設定しました。
JavaScript とは
JavaScript（ジャバスクリプト）とは、プログラミング言語のひとつである。JavaScriptはプロトタイプベースのオブジェクト指向スクリプト言語であるが、クラスなどのクラスベースに見られる機能も取り込んでいる。
利用される場面はWebサイト・Webアプリ・バックエンド・デスクトップアプリ・モバイルアプリなど、ブラウザからサーバ、デスクトップからスマートフォンまで多岐にわたっている。
昔から名前は知っていましたが、使ったことのない言語です。私の日記に機能を追加する為に少しずつ勉強を始めた所です。
jQuery とは
jquery.com
Wikipedia によると
ja.wikipedia.org
jQuery（ジェイクエリー）は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。
Javascript で全ての機能をイチから作成するのは大変なので、便利な機能をまとめたライブラリの形で使用できるようにしたものが jQuery です。事実上の標準となっているようで、様々なサイトで jQuery を利用したサンプルがあります。コピペで使えるスクリプトも jQuery を使用しているものが多いです。
jQuery の最新(2021年2月14日現在)は2020年4月にリリースされた 3.5.1 です。
blog.jquery.com
はてなブログで jQuery を使用する方法
jQuery は jquery.com で配布されていますが、はてなブログで使用する場合には公開されている CDN (Content delivery network, Wikipedia) を利用する方法になると思います。
本家 jQuery の場合には、
code.jquery.com
のページから 'minified' をクリックすると出てくる script を利用できます。でも本家のファイルを利用するよりも、他の CDN を使用した方が良さそうですね。
Google CDN は Google Hosted Library にあります。script の利用方法も書かれています。私は此方を使用しました。
developers.google.com
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
この script を はてなブログの「設定」->「詳細設定」-> 「headに要素を追加」に書き加えます。私の場合は Google AdSense の script を書いていましたので、その後に書き加えました。
jQuery を使っている HTML, CSS を転用する場合
はてなブログの head で jQuery を読み込んだ場合に、「コピペで使える」 と謳われているサイトの HTML や CSS を転用する際には、'<script src=...' と書いている行を探して jQuery を読み込んでいる箇所は消しても大丈夫です(というか消した方がよいかも)。
複数の HTML や CSS を合わせて転用する場合には気を付けた方が良いかと思います。
まとめ
この日記に様々な機能を追加しようと考えて様々なサイトのサンプルを見て回ると、jQuery を使用していると明記されていないページを良く見かけました。jQuery を使用した機能を複数追加する場合には、head で jQuery を一度だけ読み込めば大丈夫です。この機会に、JavaScript と jQuery についてじっくり勉強してみたいと考えています。
