githubでも使える!<details>と<summary>で表示を折りたたもう!【Agent Grow Advent Calendar 2018:2日目】

この記事はAgent Grow Advent Calendar 2018 2日目の記事です。

2日目の今日はちょっとした技術ネタを投稿しようと思います。

先日開発に必要なSQLをgithubのissueに張り付けたときに、あまりに長すぎてコメントを見る気をなくしてしまうという悲しい出来事がありました。

数日間はそのまま放置していたのですが、何日か経っていよいよいたたまれなくなってコメントをいい感じで表示する方法を探し始めました。

最悪jsでも埋め込んで何とかしようと思ったのですが、探してみると思っていたより簡単に対応できることがわかり、正直かなり焦りました。

こんないい方法あったよーとチーム内で話してみたら思いのほかドヤ顔できたので、せっかくだからブログに書いてみようと思います。
HTMLタグを使うだけなのでgithubに限らず色々なところで使えると思いますよ!

まずは悩みごとから・・・

私がissueのコメントに貼り付けたSQLは↓のようなものでした。

SELECT
  hoge,
  hogehoge,
...
LEFT JOIN fuga
  ON ~
...
;

× n個

データ移行のためのSQLだったのでかなり容赦ない長さのSQLが複数個まとめて記載されているイメージで、全長が500行くらいありました。

なのでスクロールバーが悲しい小ささになっていました・・・。

この状況を何とかするために、google先生に聞いてみました。

タグを使えば万事解決!

そこで見つけたのがこの <details><summary> というHTML5タグ。

このタグを使うと

ここをクリックすると

———ここから————
普段は隠れているこの文言が表示されるようになるよ!

わーい
———ここまで————

こんな風に表示することができます。

使い方

使い方はとてもシンプルです。

  1. 隠したい文字列を <details> で囲います。
  2. 閉じているときに表示する文言を <details> タグ内で <summary> タグで囲います。

以上!

実際に設置するときはこんな感じになります。
※ <と> はエスケープされてしまうので全角にしています

<details>
<summary>ここをクリックすると</summary>
普段は隠れているこの文言が表示されるようになるよ!
</details>

<detail> で囲っている部分ではHTMLタグを記載することもできますし、githubで使うときにはmarkdown形式や記載を行うことができるので結構好き放題な書き方ができますよ!1)ここでお見せできないのが残念です・・・

対応しているブラウザが限られているので要注意

もうこれがあればjQueryUI2)もうあまり聞かなくなりましたね・・・のaccordionや
先日私がトラブったbootstrapのtab何かを使わなくても折りたたんで表示することができるようになります!

とはいえいいことづくめではなく注意点もあります。

この <details><summary> はまだすべてのブラウザで対応しているわけではありません。

※ 詳細はこちらから確認してみてください。

結構便利なタグなので、もっといろんなブラウザで対応してくれればいいのになぁと思わずにはいられません。

終わりに

<detail> タグに対応していないブラウザで今回の記事を読んだ方は「なんぞこれ?」と思われたかもしれませんね・・・。

全ブラウザに対応していないのは残念ですが、表示項目をたたむのための方法としてはもっとも簡単な実装方法だと思います。

うっかりgithubで長いコメントをかくことになってしまったときなどには是非お試しくださいね!

明日は3日目ですね。
どんな記事が出てくるのか楽しみですね!

注訳はこちら   [ + ]

1. ここでお見せできないのが残念です・・・
2. もうあまり聞かなくなりましたね・・・
とっつぁん

とっつぁんカレー魔神

投稿者プロフィール

気づいたら人生の半分以上プログラムを組んで生活していた技術者。
組み込みからwebまで大体何でもやります。
カレーと麻婆豆腐とワインが好きです。

最近ではPHPでのwebシステム開発がメインになっています。
League of Legendsおもしろいですねぇ。

この著者の最新の記事

関連記事

コメントは利用できません。

募集中!(o゜▽゜)o

エンジャパン
求む、社長!
follow us in feedly

コッチもヨロシク!





最近のネタ!

  1. 2019-2-18

    第9回ボルダリング部 ~まさかのワールドカップ優勝者登場!?~

    今回は、1月に開催されましたボルダリング部活動の様子をお届けします(`・ω・´)ゞ 今年もB-PU…
  2. 2019-2-18

    GitHub のプランを Pro から Free へダウングレードすると制限がかかる機能全 6 つ紹介

    GitHub のアカウントを Pro から Free へダウングレードしました! こんにちは、江嵜…
  3. 2019-2-12

    第三回リアル脱出ゲーム部~さよなら、僕らのマジックアワー~

    はじめに 2019年初のリアル脱出ゲーム部の活動が02/02(土)にありました! というわけで活…
  4. 2019-2-12

    第4回アウトドア部 ~まさかのみんな初心者!?~

    2019/2/2(土)、アウトドア部の4回目の活動!! 前回終了時点では、真冬だろうし寒いから室内…
  5. 2019-2-11

    target=”_blank” すると飛び先のサイトから情報取れるって知ってました?

    target="_blank" はリンク先を新しいタブで開くときの書き方ですが… こんにちは、江嵜…
ページ上部へ戻る