Web頁をインタラクティブに見やすくするための工夫としてJavascriptを使うのはもうごく一般的な手法になっています。Javascriptは、そのまま書くのはちょっと大変なので書きやすくするための工夫が様々に凝らされています。ライブラリやフレームワークが各地で開発公開されており、百花繚乱といった状況です。中でも、大規模開発が広まるなかで、React、Angular、Vueの3つがよく取り沙汰されるようになってきています。筆者もVueを勉強中で、少しその良さがわかってきたところですが、一方で、ちょこっと何かをしたい、くらいのことであれば、こういう大がかりなものを使わなくてもよいのではという気持ちになることも少なくありません。 少し前まで、Javascriptをちょこっと使ってギミックを用意する時によく使われていたJavascriptのライブラリに、jQueryというライブラリがあります。多分、まだ現役です。Japanese Woodblock Print Search - Ukiyo-e Search というサイトを作ってしまうほど浮世絵好きなプログラマのJohn Resigさんが作り始めたもので、現在でも、読売新聞や首相官邸のサイトなど、我が国の主要Webサイトではまだまだ現役です。CSSを知っていると、あと一歩知識を深めるだけで使えてしまうという手軽さがありますので、筆者も10年ほど前から非常に重宝していました。 さて、どういう風に手軽かと言えば、たとえば みん翻検索 by SAT で使っている「資料群名をクリックすると資料の一覧が表示される」ものですが、これは、
1.「資料群名のタグにclassを与える」 2.「資料一覧を最初は隠しておく」 3.「資料群名のclassを持つテキストをクリックすると資料一覧を表示する」 4.「資料一覧がすでに開いている時は閉じる」
というような感じに書くことができます。
具体的な書き方ですが、まず、jQueryのファイルを読み込んでおく必要があります。jQueryのサイト⇒ jQuery から https://code.jquery.com/jquery-3.4.1.min.js をダウンロードして、適当なディレクトリ（フォルダ）に置いておきます。flaskを使っている場合はstaticディレクトリに 入れておくのがよいでしょう。その後、templates/index.htmlからこのファイルを読み込めるように、以下のタグを<head>～</head>の中に入れておきます。以下のような 感じです。flaskでない場合は、HTMLファイルからこのjquery-4.3.1.min.jsを読み込めるように適切なパスを書いてください。
<script src="/static/jquery-3.4.1.min.js"></script>
その後、<head>～</head>の中に、Javascriptを書いておくのですが、その前に、HTMLの方をどういう風に記述するか考えておく必要があります。
上に書いたようなことを実現するためには、以下のようにして、資料群名、資料一覧にclassをつけて、両者を操作できるようにしておきます。classにしているのは、 これが複数登場した時にも同じプログラムで処理できるようにするためです。1文書の中で1つしか操作しないことが明らかな場合にはclassの代わりにidをつけてもよいです。 さらに、資料群名と資料一覧をまとめて操作できるようにするために、両者を包むdivを作り、それにもclassをつけておきます。さらについでに、資料一覧（の要素）は、 デフォルトでは非表示にしておきます。
<html> （略） <body> （略） <div class="group"> <div class="group_name">資料群の名前</div> <div class="witnesses" style="display:none"> <ul> <li>資料一つ目 <li>資料二つ目 </ul> </div> </div> </body> </html>
このHTMLタグに対して操作を行うのであれば、「class:group_nameがクリックされたら、兄弟要素であるclass:witnessesを表示する」という風に書くことになります。 そこで、今度は、<head>～</head>の方に戻ります。先ほど書いたjqueryを読み込むタグの次に、以下のように書いてみましょう。
<script> <script> $(function(){ $(".group_name").click(function(){ if($(this).siblings(".witnesses").css('display') == 'none'){ $(this).siblings(".witnesses").show(); } else{ $(this).siblings(".witnesses").hide(); } }); }); </script>
そうすると、今目指していた機能は実現できるはずです。操作対象となる要素の指定はCSSのセレクタとほぼ同様で（これがjQueryのよさです）、 classを指定したければ .group_nameや .witnessesのように . をつけます。idや要素名の指定の仕方は自分で調べてみましょう。 その他諸々、上記のスクリプトにはjQueryの大事な要素がたくさん詰まってますので、jQueryの教科書などがあれば見ながら 確認してみてください。
次に、もう少し工夫するべく、CSSをいじってみましょう。資料群名のテキストには、カーソルをあてたら文字の色が変わってくれると うれしいですね。
CSSを書く時は、<head>～</head>の中の、>scrpt<の前に書くのが比較的一般的です。ついでに、上の方で書いた style="display:none" もこちらに書いてしまいましょう。
<html> <head> （略） <sytle> .group_name:hover{color:blue} .witnesses{display:none} </style> <script> （略）
大体、こういう感じで必要最低限のことはできるかと思います。そこから先は、私のgithubを探してみてください…。
