LoginSignup
3
3

More than 3 years have passed since last update.

Laravel日本語ドキュメント(readouble.com)にページ内メニューを常に表示する

Last updated at Posted at 2019-07-22

2019/9/20 追記

GitHubにコードを上げたのでサクッと使いたい方はこちらをご確認ください
https://github.com/tomoeine/readouble-menu

経緯(またの名を茶番)

Laravelの日本語ドキュメントは読みやすいのだけど、ページ内リンクのメニューがないのが辛いな〜と常々感じていたので、メニュー表示するブックマークレットを作った。

Laravel日本語ドキュメントでキーボードの「A」を押すかヘッダーの⚓️をクリックするとページ内リンクのメニューが出ます
image.png
いやーいこれは便利。

え、もちろん以前から知ってましたよ?うん、マジマジ。
「メニューなくて不便だな〜」と思いながらスクロールしまくったり、英語のドキュメントと行ったり来たりなんて、してるわけないじゃないですか、やだな〜もう。

ここからが本題

というわけでブックマークレットを作りました。
本家とは違いなんと!!!!ドキュメントを読みながらメニューを常に表示しておくことができます😉
なんて便利!!!!!
image.png
べっ、別に本家のメニューを知らなかったから作ったわけじゃないんだからねっ・・・!

使い方

さておき、これはこれでニーズあるかもしれないので公開しておきます。

以下のコードをブックマークバーに登録します。

javascript:var b=document.getElementById("laravelDocumentSideMenu");if(null!=b)b.parentElement.removeChild(b);else{var e=document.getElementById("content").querySelectorAll("h2, h3"),a=document.createElement("div");a.style.position="fixed";a.style.top="30px";a.style.left="0";a.style.backgroundColor="rgba(255,255,255,0.8)";a.setAttribute("id","laravelDocumentSideMenu");b=document.createElement("ul");a.appendChild(b);Array.prototype.forEach.call(e,function(a){var c=a.innerHTML;if("\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u7ae0\u5225\u30da\u30fc\u30b8"== c)return!0;a.setAttribute("id",c);var d=document.createElement("li");"H3"==a.tagName&&(d.style.marginLeft="20px");d.innerHTML='<a href="#'+c+'">'+c+"</a>";b.appendChild(d)});document.body.appendChild(a)};

適当なブックマークをブックマークバーに登録して、URL部分を↑で書き換えればOK。
ブックマークレットの登録方法

ブックマークバーで登録したブックマークを押すと、左側のメニューが開いたり閉じたりします。
image.png

常に出しっぱなしにしたいなら

自動でJavaScriptを実行してくれる、便利なChrome拡張機能をコメント欄で教えていただきました!
上記のコード(からjavascript:を除いたもの)を、hostname readouble.com に対して設定しておくと、ドキュメントにアクセスしただけではじめからページ内メニューが表示された状態になります😆
ScriptAutoRunner

(これができるなら、閉じるボタンもつけよう・・・)

その他

ブックマークレットの処理でh2、h3タグにidを振ってアンカーリンクできるようにしてますが、アンカーリンクを他の人に送っても該当箇所には飛べないので気をつけてください。
(これを押してもドキュメントのトップを表示するだけ)
https://readouble.com/laravel/5.8/ja/queries.html#WHERE句

個人的には、何も押さなくても常にメニュー出しておいてくれると嬉しいのでChrome拡張も考えようかしら。。
→「常に出しっぱなしにしたいなら」を追記

3
3
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3