JavaScript

コンテンツを開いたり閉じたりする

Level 1

(x)html
<p>
<a href="#" onclick="openConts();">クリックすると、コンテンツが開く</a>
</p>
<div id="OpenConts">
<p>コンテンツテキスト、コンテンツテキスト、コンテンツテキスト、コンテンツテキスト、</p>
<p>
<a href="#" onclick="closeConts();">クリックすると、コンテンツが閉じる</a>
</p>
</div>
css
#OpenConts{
 display:none;
 }
javascript
function openConts(){
 document.getElementById("OpenConts").style.display = "block";
 return false;
 }
function closeConts(){
 document.getElementById("OpenConts").style.display = "none";
 return false;
 }
  • クリックしないと見えないコンテンツに、id属性「OpenConts」を指定する。
  • クリックするとコンテンツが開くようにする箇所にaタグを、そのaタグにonclick属性「openConts();」を指定する。
  • クリックするとコンテンツが閉じるにする箇所にaタグを、そのaタグにonclick属性「openConts();」を指定する。

たったこれだけで、コンテンツを開いたり閉じたりすることができるようになる。

まずは満足。

でもこのままではいくつか問題がある。

  • javascript未対応やcss未対応への配慮が足りない(アクセシビリティ、ユーザビリティ面での問題)
    cssでコンテンツを非表示にし、javascriptで表示・非表示のコントロールをしている。そのため、javascriptが未対応であれば、cssでコンテンツを非表示にしたコンテンツを閲覧することができなくなってしまう。クリックしても何の変化もないのに「クリックすると、コンテンツが開く」「クリックすると、コンテンツが閉じる」というテキストが表示されているのはいかがなものか。
  • 「id」属性を指定している(運用面での問題)
    1ページにコンテンツを開いたり閉じたりするパーツを複数用意したい場合は、パーツの数だけid属性を名前を変えて用意する必要がある(html、css、javascriptの3ファイルすべてが対象)。更新作業でコンテンツを開いたり閉じたりするパーツを用意する場合もやはり3ファイルの更新が必要であり、管理が面倒である。

Level 2では、まず「javascript、css未対応への配慮」も視野に入れて考えよう。

Level 2

ポイントは、javascriptが有効でない場合、「クリックすると、コンテンツが開く」「クリックすると、コンテンツが閉じる」は表示されないようにすること。
こうすることで、反応のないリンクは排除することできる。また、コンテンツは常に開いた状態になるが、コンテンツが表示されないことによる情報の未伝達を防ぐことができる。

(x)html
<div id="OpenConts">
<p>コンテンツテキスト、コンテンツテキスト、コンテンツテキスト、コンテンツテキスト、</p>
</div>
css
.OpenConts{
 display:none;
 }
javascript

window.onload = OpenClose;
function OpenClose(){
 var OpenConts = document.getElementById("OpenConts");
 OpenConts.className = "OpenConts";
 var partsOpen = document.createElement("p");
 var partsOpenText = document.createTextNode("クリックすると、コンテンツが開く");
 partsOpen.appendChild(partsOpenText);
 var partsParent = OpenConts.parentNode;
 partsParent.insertBefore(partsOpen,OpenConts);
 partsOpen.onclick = function(){
 document.getElementById("OpenConts").style.display = "block";
 return false;
 }

 var partsClose = document.createElement("p");
 var partsCloseText = document.createTextNode("クリックすると、コンテンツが閉じる");
 partsClose.appendChild(partsCloseText);
 OpenConts.appendChild(partsClose);
 partsClose.onclick = function(){
 document.getElementById("OpenConts").style.display = "none";
 return false;
 }
}

(x)htmlファイルを見て分かる通り、無駄な記述が削除されているが、ブラウザでの表示はLevel1とほぼ同じだ(上記の例ではリンク部分のスタイルがLevel 1とは違う)。

ちなみにスクリプトの流れは以下のとおり。

  1. id属性「OpenConts」を含むタグ(要素)を抽出
  2. そのタグ(要素)にclass属性「OpenConts」を追加(id属性「OpenConts」内が非表示になる)
  3. そのタグ(要素)の前に、「クリックすると、コンテンツが開く」パーツを作成
  4. そのパーツをクリックすると、id属性「OpenConts」内が表示されるようにする
  5. id属性「OpenConts」内の最後に「クリックすると、コンテンツが閉じる」パーツを作成
  6. そのパーツをクリックすると、id属性「OpenConts」内が非表示されるようにする

とはいえ、これでも万全とは言い難い。

  • ページ内にid属性「OpenConts」が必ず存在することを前提にスクリプトが書かれている。
    (x)htmlファイル内で、id属性「OpenConts」を削除した場合、その箇所のスクリプトも削除しなければいけないが、それを忘れてしまうとスクリプトエラーになってしまう。
  • 仮にすでにid属性「OpenConts」にすでにclass属性がある場合、class属性「OpenConts」を上書いてしまうのだ。
  • window.onloadを使用しているが、スクリプトがこれだけなら問題ないが、ページがロードされた際に実行する他のファンクションへの配慮がない。

これらに加え、Level 1でも指摘した運用面の問題がある。

最近の記事

インタラクションデザイン

5年くらい前に購入した書籍「インタラクションデザイン」。この書籍内ではたくさんの事例が紹介されている。残念ながらその多くは現在閲覧することができなくなっていた・・・

デザイン

Advanced Custom Fields 名前を変更して、データも反映させる

WordPressを自作する上でもはや欠かせないプラグインの一つが、「Advanced Custom Fields」。 名前を変更しようと思って、Wor・・・

WordPress

配列の重複を削除する

配列の場合 /** * 配列の重複を削除する * * @param {array} ary* * @return {array} 処理後のary・・・

JavaScript

MAMP を 5.7 から 6.2 にアップデートした

5年以上前と比べると、アップデートが簡単で驚く。とくに記事にするまでもないと思いつつ、一応備忘録。 インストールすると、既存のディレクトリはそのままに別・・・

MAMP

Briefly unavailable for scheduled maintenance. Check back in a minute. → . maintenance を削除

プラグインを更新中に、誤って、違うページにアクセスしまいました。すると、管理画面だけでなく、公開中のすべての画面が「briefly unavailable f・・・

WordPress

GulpでERRが出てテンパった → gyp: No Xcode or CLT version detected! → PostCSS plugin autoprefixer requires PostCSS 8

Gulp。いつもは正常に動いている環境をそのままコピーして再利用するようにしている。そうすることで、案件ごとに毎回環境作りをする手間を省くことができ、何よりG・・・

制作効率化

ビジネス前提ワークシート

書籍「LEAN UX リーン思考によるユーザエクスペリエンス・デザイン」から抜粋。 「前提の宣言」「MVPの作成」「実験の実行」「フィードバックとリサー・・・

知識編

リーン思考のUXデザイン

LEAN UX は、コラボレーションと部門/領域横断的な手法によって、製品の本質を素早く明らかにするための実践的手法であり、これによって文書への過度な依存を減・・・

知識編

ES6(ES2015)の主な変更点

オブジェクト指向 クラス定義 JavaScriptは厳密にはクラスがない、プロトタイプベースのオブジェクト指向言語。ES6でclass構文が導入さ・・・

JavaScript

JavaScriptスタイルガイド

書籍「メンテナブルJavaScript」と Google JavaScript Style Guide 和訳 を参考に自分なりのJavaScriptスタイルガ・・・

JavaScript

人気の記事

WP_Queryを使って絞り込み検索するのにコレは便利!

めっちゃ参考になるページを見つけた。 絞り込みをするたびに色々ググっていたが、これがあればほとんどのことが解決できそうな気がする。 参考: これは便利!Word・・・

WordPress

overflowをautoにした要素のスクロール位置を変更する → scrollTop scrollLeft

まずはサンプル。 これは、overflowをautoにした要素のスクロール位置を変更するサンプルです。 これは、overflowをautoにした要素のスクロ・・・

JavaScript

http://localhost:8888/ → http://localhost/

http://localhost:8888/ での参照ではなく、http://localhost/ で参照できるようにします。 MAMPの設定を変更する M・・・

MAMP

アーカイブページでカスタムフィールドやタクソノミーで絞り込みした状態でリスト表示する

<?php $args = array( 'paged' => 1, 'posts_per_page' => 20, 'post・・・

WordPress

iframeの高さを自動調整する

iframeで呼び出した際、iframe自体はスクロールさせずに高さを取得してiframe全体を表示させます。 サンプル:iframeの高さを自動調整するデモ・・・

JavaScript

イラストレーターでレイヤーごとにPNGで書き出す

【2020年07月13日】 macOS Catalina(10.15.5) / Adobe iLLustrator 2020(24.2.1) にて動作確認済・・・

Illustorator

カウントアップ、カウントダウンするJavaScript

ポイントを使ったり、増やしたりしたときに、結果のポイント数に差し替えるのではなくて、カウントアップしたり、カウントダウンして動的に動かそうと思って作ってみた。・・・

JavaScript

WordPressのカテゴリー一覧ページでカテゴリー名とスラッグを取得する → get_queried_object()

やりたいこと カテゴリー一覧ページで、そのカテゴリー一覧ページに属する記事一覧を取得するためにループさせるのとは別に、タイトルやカテゴリー別にデザインを変・・・

WordPress

MAMPの日時(タイムゾーン)を変更する

MAMPを使用していて、日時の情報を制御しようとしたとき、取得している日時が日本時間ではないことに気がついた。 時差を計算してPHPでプログラミングしていたが、・・・

MAMP

管理画面のカスタム投稿一覧で並び順を変更する

WordPressの管理画面。「投稿」や「固定ページ」の一覧は、公開日順に並んでいる。ところが、カスタム投稿を追加した場合、公開順ではなく名前順に並んでいること・・・

WordPress

WEB制作マークアップJavaScriptコンテンツを開いたり閉じたりする | シンプルシンプルデザイン