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おもしろいですねぇ。

この著者の最新の記事

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

募集中!(o゜▽゜)o

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

コッチもヨロシク!





最近のネタ!

  1. 2018-12-15

    エージェントグローで働く30代SEが活用している福利厚生/教育制度の話【Agent Grow Advent Calendar 2018:15日目】

    ご挨拶 この記事はAgent Grow Advent Calendar 2018 15日目の記事で…
  2. 2018-12-14

    ベイビー・トーク・ウィズ・モンキー【Agent Grow Advent Calender 2018:14日目】

    グッド・モーニング この記事はAgent Grow Advent Calendar 2018 14…
  3. 2018-12-13

    第12回テーブル部活動~脱毛ガールズと星空超月爆破~【Agent Grow Advent Calender 2018:13日目】

    この記事は  Agent Grow Advent Calendar 2018  13日目の記事となり…
  4. 2018-12-12

    第1回 倶楽部ぽじてぃぶ ~初活動! ボルダリング~

    名古屋オフィスの社内サークルである「倶楽部ぽじてぃぶ」。 「今後の人生に役立つような頭や身体を刺激…
  5. 2018-12-12

    第二回リアル脱出ゲーム部~謎の部屋からの脱出 in 下北沢~【Agent Grow Advent Calendar 2018:12日目】

    はじめに この記事はAgent Grow Advent Calendar 2018 12日目の記事…
ページ上部へ戻る