この記事は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タグ。
このタグを使うと
ここをクリックすると
———ここから————
普段は隠れているこの文言が表示されるようになるよ！
わーい
———ここまで————
こんな風に表示することができます。
使い方
使い方はとてもシンプルです。
- 隠したい文字列を
<details>で囲います。 - 閉じているときに表示する文言を
<details>タグ内で<summary>タグで囲います。
以上！
実際に設置するときはこんな感じになります。
※ ＜と＞ はエスケープされてしまうので全角にしています
＜details＞ ＜summary＞ここをクリックすると＜/summary＞ 普段は隠れているこの文言が表示されるようになるよ！ ＜/details＞
<detail> で囲っている部分ではHTMLタグを記載することもできますし、githubで使うときにはmarkdown形式や記載を行うことができるので結構好き放題な書き方ができますよ！1)ここでお見せできないのが残念です・・・
対応しているブラウザが限られているので要注意
もうこれがあればjQueryUI2)もうあまり聞かなくなりましたね・・・のaccordionや
先日私がトラブったbootstrapのtab何かを使わなくても折りたたんで表示することができるようになります！
とはいえいいことづくめではなく注意点もあります。
この <details> と <summary> はまだすべてのブラウザで対応しているわけではありません。
※ 詳細はこちらから確認してみてください。
結構便利なタグなので、もっといろんなブラウザで対応してくれればいいのになぁと思わずにはいられません。
終わりに
<detail> タグに対応していないブラウザで今回の記事を読んだ方は「なんぞこれ？」と思われたかもしれませんね・・・。
全ブラウザに対応していないのは残念ですが、表示項目をたたむのための方法としてはもっとも簡単な実装方法だと思います。
うっかりgithubで長いコメントをかくことになってしまったときなどには是非お試しくださいね！
明日は3日目ですね。
どんな記事が出てくるのか楽しみですね！
