www.tsukutarou.net
www.tsukutarou.net
こんにちは、つくたろうです。
今回は、JavaScriptによるコンテンツ切り替えを実装するコードについて紹介していきます。
はじめに
コンテンツ切り替えとは、同じページ内の同じ部分について、閲覧者のクリックなどによって動的にコンテンツを切り替えることです。
例えば以下のような、「色違い」と「通常色」について切り替えるものがそうですね。
動的な切り替えなので、もちろんJavaScriptを使っています。
はてなブログでもJavaScriptが動くためになせる業ということですね。
はてなブログはページ分割も可能
はてなブログでは出来ないとされているページ分割ですが、可能です。
以下の記事でやり方を紹介しています。
実際のコード
コードの例としては以下のような感じです。
<script type="text/javascript"> function Display_Contents(page){ if(page == "p1"){ document.getElementById("Content").innerHTML = "<p>これは、ページ１の内容です。</p>"; }else if(page == "p2"){ document.getElementById("Content").innerHTML = "<p>これは、ページ２の内容です。</p>"; }else if(page == "p3"){ document.getElementById("Content").innerHTML = "<p>これは、ページ３の内容です。</p>"; } } </script> <div id="Content"> <p>これは、ページ１の内容です。</p> </div> <p>ページ番号を選択：<br> <b> <a href="javascript:;" onclick="Display_Contents('p1')"> <span style="margin-right:1em;">１</span> </a> <a href="javascript:;" onclick="Display_Contents('p2')"> <span style="margin-right:1em;">２</span> </a> <a href="javascript:;" onclick="Display_Contents('p3')"> ３ </a> </b> </p>
上記のコードの出力結果：
上のボックス内の数字をクリックすると、表示内容が切り替わっているのが分かるかと思います。
コードの説明
このコードでは、function Display_Contents(page)という、引数pageの値によってinnrtHTMLで挿入する値を切り替える関数を作っておき、<a href="javascript:;" onclick="Display_Contents('p1')">でクリックによってその関数に各引数が送られてコンテンツの切り替えが発生する、という処理が起こっています。innrtHTMLで挿入する先はid属性を指定したdivタグです。
切り替えたいコンテンツは各関数のinnerHTMLの中に記述してください。
切り替えるコンテンツにはテキスト以外にも、画像や表など様々なものを指定することができます。
注意点
このコードをコピペしてinnerHTMLの中身を書き換えることで、はてなブログでも動的にコンテンツを切り替えることができます。
ただ注意しないといけないこととして、はてなブログでJavaScriptを動かすためには「見たまま記法」以外の記法で記事を作る必要があります。
この切り替えを行う場合は、Markdown記法とかで書きましょう。
また、innerHTMLでタグなどを囲む際は、"と'の使い分けに注意です。
innerHTML = '<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/t/tsukutarou/20210306/20210306203118.jpg" alt="20210306203118" width="128px" height="128px"></p>';
というように、innerHTMLに与える一番外側のクオーテーションとタグ内のクオーテーションで"と'を使い分けて、干渉しないようにしないとうまくいきません。
思ったように動かないな？と思ったら、まずクオーテーションを確認してみてください。
JavaScriptについてのオススメ書籍
はてなブログに限らず、JavaScriptについて学ぶなら以下の書籍あたりがおすすめです。
・独習JavaScript 新版 (翔泳社)
・JavaScript 第7版 (オライリージャパン)
他にもたくさんの指南書などがありますが、僕が使ってみた上でオススメできるのが以上の２冊です。
どちらも独学に使いやすい書籍となっています。僕は独学が好きなので、自分が独学しやすい本でないと選びません。
オライリーは情報系の教授や学生からも厚い信頼がありますね。僕は情報系の学生ですが、オライリーはマジでどこの教授の本棚にも置いてあります（笑）（オライリーで有名なのはやはり、python系の本だと思います。ゼロから作るDeep Learning ―Pythonで学ぶディープラーニングの理論と実装とか。）
書籍などでJavaScriptを学ぶ際は、ぜひ手に取ってみてください。
おわりに
今回は、はてなブログにおいてJavaScriptを使ってコンテンツを動的に切り替える方法を解説しました。
コンテンツ切り替えを使えば、複数の情報を簡潔に記すことが可能です。
バリバリ使いこなして、はてなブログ上級者を目指していきましょう！
ここまで読んでくれて、ありがとうございました！
2022/02/02 つくたろう
