なでしこ公式サイトを便利にするブックマークレット

はじめに

日本語プログラミング言語であるなでしこは、（母国語によるプログラミングということもあり）文章を書くように、直感的にコードを作成できます。しかし、ちょっと手軽に試したいときや、仕様を調べたい時などは、なでしこ公式サイトをよく見ます。こうした公式サイトで私が使っているブックマークレットを紹介します。

ブックマークレットの使い方や登録方法については、こちらのサイトが詳しいです。

※ここで取り上げるブックマークレットの使用の際は自己責任でお願いします。
※この記事では、特に断りのない限り、「なでしこ3」のことを「なでしこ」と呼んでいます。

ドキュメント中のプログラム例を編集する

なでしこの公式ドキュメントを眺めていると、（あれ？これはこうだっけ？）と思う事がよくあります。

例えば、「～～の間」では特殊変数回数は使えないんだっけ？みたいなことです。これを解決するには、なでしこ3 Web簡易エディタなどの実行環境にコピペして、回数を表示というコードを入力して・・・という手順を踏む必要があります。（注：「～～の間」では回数は使用できません）
せっかく、そのページにサンプルプログラムが掲載されているので、MDNのJSリファレンスのように、その場で編集・実行できれば良いのに、と思い、これを実現するためのブックマークレットを作成し、利用しています。

プログラム例を編集できるブックマークレット

typeof ace_editors==="undefined"||Object.values(ace_editors).forEach(e=>e.editor.setReadOnly(false))

ただしこのままだと、以下のような非常に狭いエディタの場合、非常に見にくいため、プログラムの編集がしづらいです。

これを解決するため、以下の、resizeが出来るようにしたバージョンのブックマークレットを普段は使用しています。

プログラム例を編集できるブックマークレット改

typeof ace_editors==="undefined"||Object.values(ace_editors).forEach(e=>{e.editor.setReadOnly(false);e.editor.container.style.resize="vertical";})

Ctrl+Shift+Dで実行する

なでしこには様々なエディタが公式で用意されています。

手軽に使うなら、やはりなでしこ3 Web簡易エディタか前出のブックマークレットで編集可能にした、なでしこ3簡易エディタ2でしょう。手軽なので、私もよく使います。

一方、よく使用するエディタの手癖で、Ctrl+Shift+DやCtrl+Rで実行しようとしてしまいます。Google Chromeにおいて、Ctrl+Shift+Dはブックマーク系のショートカットなので、よくこんな画面が表示されて、イラッとしてしまうことがあります。（自分の手癖なのにね）

また、ACE Editorのショートカットが反応するときもあり、Ctrl+Zで戻すなどしていました。そこで、これらを解決するためのブックマークレットを作成します。

まず、現在フォーカスのあたっている、エディタの実行ボタンを押すプログラムは以下のとおりです。ひとまとまりのエディタに対しては、nako3というクラス名が付与されているので、nako3が付与されたdivまで遡り、その中に初めて出てくるボタン（＝実行ボタン）を押しています。

フォーカスがあたっているエディタの実行ボタンを押す

document.activeElement.closest(".nako3").querySelector("button").click();

あとは、これを特定のキーが入力されたときに実行されるようにします。ただ、簡易エディタの場合と、簡易エディタ2（ACE Editorを使用している）の場合では、若干勝手が違います。まず簡易エディタの場合は、addEventListenerでkeydownを取得します。

簡易エディタの場合

document.body.addEventListener("keydown",e=>{if(e.ctrlKey&&e.shiftKey&&(e.key=="D")){e.preventDefault();document.activeElement.closest(".nako3").querySelector("button").click();}})

次にACE Editorを使用している場合は、addCommandにショートカットキーをbindしてあげると、想定通り動作します。

簡易エディタ2の場合

Object.values(ace_editors).forEach(e=>{e.editor.commands.addCommand({bindKey:"Ctrl-Shift-D",exec:()=>document.activeElement.closest(".nako3").querySelector("button").click()})})

これらを組み合わせると、次のようになります。

Ctrl+Shift+Dで実行するブックマークレット

typeof ace_editors==="undefined"?document.body.addEventListener("keydown",e=>{if(e.ctrlKey&&e.shiftKey&&(e.key=="D")){e.preventDefault();document.activeElement.closest(".nako3").querySelector("button").click();}}):Object.values(ace_editors).forEach(e=>{e.editor.commands.addCommand({bindKey:"Ctrl-Shift-D",exec:()=>document.activeElement.closest(".nako3").querySelector("button").click()})})

こちらのコードは、なでしこ3貯蔵庫では正常に動作しません。私があまり貯蔵庫を使っておらず、簡易エディタや簡易エディタ2と、ページ構成がやや違うので、対応しませんでした。大人しくF9ボタン（実行ボタンのショートカットキー）を押してください。
（プログラミング強強の方は、貯蔵庫対応版のブックマークレットを作成してください......）

簡易エディタで保存

こちらも手癖なんですが、やや長めのプログラムを書いていると、Ctrl+Sをついつい押してしまうんです。「なでしこ3貯蔵庫」の新規作成画面ではCtrl+Sで、ローカルストレージに保存されます。一方で、Web簡易エディタは、ローカルストレージに保存する機能はあるのに、Ctrl+Sは効きません。

ということで「Web簡易エディタ」を編集中に、手癖でCtrl+Sを押した場合、ローカルストレージの「DEFAULT」に保存されるようにするJSコードを掲載しておきます。

Ctrl+Sでローカルストレージに保存する

document.body.addEventListener("keydown",k=>{if(k.key=="s"&&k.ctrlKey){k.preventDefault();const e=document.activeElement;if(!e.id.startsWith("nako3_code_"))return;const count=e.id.slice(11);localStorage["nako3start::DEFAULT"+count]=e.value;localStorage["nako3start::__files__"].includes("DEFAULT"+count)||(localStorage["nako3start::__files__"]="DEFAULT"+count+"::"+localStorage["nako3start::__files__"])}});

なお、これの対となるような、自動的にローカルストレージの情報を読み出して、簡易エディタに反映するプログラムです。こちらは、拡張機能等を用いて、特定のページを開いた際に、自動実行するようにしていると、気分がとてもいいです。

ローカルストレージから情報を書き戻す

document.querySelectorAll("[id^='nako3_code_']").forEach(e=>{const value=localStorage["nako3start::DEFAULT"+e.id.slice(11)];if(value)e.value=value;});

おわりに

こうしたブックマークレットを押すのすら面倒な場合は、ScriptAutoRunnerなどの自動実行系のブラウザ拡張機能と組み合わせると、より便利になるかもしれません。（私もいくつか登録しています）

最後になりますが、これらのブックマークレットは、自己責任での利用をお願いします。

　

手癖は治したほうが良い。
以上。