大人の発達障害者の挑戦日記

30代後半で成人発達障害者となった私の日記

はてなブログ側のjQueryを利用する記述方法


スポンサーリンク

こんにちは。エイキチです。

jQueryというJavaScriptライブラリがあります。今回ははてなブログ側のjQueryを利用する方法を書きます。

はじめに

なにが問題でどう解決したかを書いていきます。結局どうすれば良いのかを知りたい方は一番最後をお読みください。

f:id:otona-hattatsushougai-challenge:20180303221420p:plain

問題を見つけた経緯

はてなブログでjQueryを使おうと思ったのです。ためしに$マーク使って、HelloWorldのサンプルコードをネットで見つけて試してみました。以下のようにdiv要素に文字を出力するものです。

<script>
$(function(){
  $("#test").html("Hello World!")
});
</script>

はてなブログのデザインでフッタという入力箇所に上記コードを入れてみました。

f:id:otona-hattatsushougai-challenge:20180303221424p:plain

そうしたら、動作しませんでした。Google Chromeで調べたら、以下のエラーが出てました。

  • ReferenceError: $ is not defined

はてなブログはjQueryをインポートしてないのかなと思ったのですが、それは違いました。ソースを見たら以下の記述を見つけることが出来ました。

<script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3"></script>

ただし、上記の記述の位置が問題でした。ソースのかなり下の方にありました。idが「bottom-editarea」である要素よりもっと下にありました。この要素はデザインのフッタで入力したhtmlが出力される場所です。もっと下の方でjQueryがインポートされるため、、「$」が未定義ということでエラーになりました。なぜ、jQueryのインポートが下の方にあるのか不思議ですが、今のところそのような仕様なので仕方ありません。

どうすれば良いか

調べた結果、「window.onload」というものを使えば良いことが分かりました。以下の記述にしたら、HelloWorldが出力されました。

<script>
window.onload = function () {
  $("#test").html("Hello World!")
}
</script>

つまり、以下のように記述すれば、はてなブログ側のjQueryを使うことが出来ます。

<script>
window.onload = function () {
    /* ここに処理を書く */
}
</script>

動作としてはHTMLの読み込み終わってから、functionの内容を実行するようです。読み終わっているので、jQueryはインポート済みで、「$」は定義されているということです。

ただし、jQueryのバージョンは古いのだと思います。「version=1.12.3」という記述があるので、これがjQueryのバージョンなのだと思います。新しい機能を使う場合は、結局、jQueryを外部からインポートする必要があると思います。私の場合、新しい機能を使うわけではないので、はてなブログ側のjQueryで十分でした。

20180305追記

以下の記述もできます。

addEventListener("DOMContentLoaded", function() {
    /* ここに処理を書く */
}, false);

最後に一言

今回の方法は有名なのでしょうか。とりあえず記事にしました。