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-4-17

    第8回 麻雀部活動記録~まるで個室のような雀卓で~

    3月末の桜が満開な季節に恒例の麻雀部を開催してきました! 例によって活動記録を書いていこうと思いま…
  2. 2019-4-15

    JetBrains の IDE に新色登場! IntelliJ でも PhpStorm でも新しい色を体験しよう!

    JetBrains の IDE に新しいテーマが作られていました! こんにちは、江嵜です。 みな…
  3. 2019-4-8

    やっぱり JavaScript (TypeScript) でも アノテーション (Decorator) 使いたい!

    JavaScript でもアノテーションしたい! こんにちは、江嵜です。 JavaScript …
  4. 2019-4-3

    2019年03月度社員総会&懇親会@Tokyo☆

    2019年3月15日(金)に、エージェントグロー東京オフィスの社員総会&懇親会が開催されまし…
  5. 2019-4-2

    第2回 倶楽部ぽじてぃぶ ~ボードゲーム~

    2019年2月23日に、第2回となる倶楽部ぽじてぃぶの活動が開催されました! 今回は、その様子をお…
ページ上部へ戻る

当サイトに掲載されているコンテンツ(文書、画像等)は、許可なく複製・転用等する事を禁じます。

「フェアネス方式」は、株式会社エージェントグローが日本国内において出願中の商標です。

当サイトでは最低限必要と考えられる場合において、会社名/サービス名/商品名などを記載している場合があります。
これらはあくまでも説明の必要性に応じて用いているものであり、各社の権利等を侵害を目的とするものではございません。
不適切と考えられる場合には、当社お問い合わせフォームよりご連絡ください。

当サイトでは®や™などの表記を省略させていただいております。