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

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

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

https://zenn.dev/ymmt1089/articles/20220415_bookmarklet

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197285/c4006cdf-ec21-70bf-81d1-dd2ec8cbe9ee.png)

例えば、「～～の間」では特殊変数`回数`は使えないんだっけ？みたいなことです。これを解決するには、[なでしこ3 Web簡易エディタ](https://nadesi.com/doc3/index.php?%E3%81%AA%E3%81%A7%E3%81%97%E3%81%933%E7%B0%A1%E6%98%93%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF)などの実行環境にコピペして、`回数を表示`というコードを入力して・・・という手順を踏む必要があります。（注：「～～の間」では`回数`は使用できません）
せっかく、そのページにサンプルプログラムが掲載されているので、[MDNのJSリファレンス](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference)のように、その場で編集・実行できれば良いのに、と思い、これを実現するためのブックマークレットを作成し、利用しています。

```javascript:プログラム例を編集できるブックマークレット
typeof ace_editors==="undefined"||Object.values(ace_editors).forEach(e=>e.editor.setReadOnly(false))
```

ただしこのままだと、以下のような非常に狭いエディタの場合、非常に見にくいため、プログラムの編集がしづらいです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197285/123f4181-ddc1-b8bf-1167-1d34007e7200.png)

これを解決するため、以下の、[resizeが出来る](https://developer.mozilla.org/ja/docs/Web/CSS/resize)ようにしたバージョンのブックマークレットを普段は使用しています。

```javascript:プログラム例を編集できるブックマークレット改
typeof ace_editors==="undefined"||Object.values(ace_editors).forEach(e=>{e.editor.setReadOnly(false);e.editor.container.style.resize="vertical";})
```

# Ctrl+Shift+Dで実行する

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

https://nadesi.com/doc3/index.php?%E3%81%AA%E3%81%A7%E3%81%97%E3%81%933%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E3%81%AE%E4%B8%80%E8%A6%A7

手軽に使うなら、やはり[なでしこ3 Web簡易エディタ](https://nadesi.com/doc3/index.php?%E3%81%AA%E3%81%A7%E3%81%97%E3%81%933%E7%B0%A1%E6%98%93%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF)か前出のブックマークレットで編集可能にした、[なでしこ3簡易エディタ2](https://nadesi.com/v3/doc/index.php?%E7%B0%A1%E6%98%93%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BFv2)でしょう。手軽なので、私もよく使います。

一方、よく使用するエディタの手癖で、Ctrl+Shift+DやCtrl+Rで実行しようとしてしまいます。Google Chromeにおいて、Ctrl+Shift+Dは[ブックマーク系のショートカット](https://support.google.com/chrome/answer/157179?hl=ja&co=GENIE.Platform%3DDesktop#zippy=%2C%E3%82%A6%E3%82%A7%E3%83%96%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88)なので、よくこんな画面が表示されて、イラッとしてしまうことがあります。（自分の手癖なのにね）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197285/a18f43ab-9752-caf3-e9e0-44636d42f02f.png)
また、[ACE Editorのショートカット](https://ace.c9.io/demo/keyboard_shortcuts.html)が反応するときもあり、Ctrl+Zで戻すなどしていました。そこで、これらを解決するためのブックマークレットを作成します。

まず、現在フォーカスのあたっている、エディタの実行ボタンを押すプログラムは以下のとおりです。ひとまとまりのエディタに対しては、nako3というクラス名が付与されているので、nako3が付与されたdivまで遡り、その中に初めて出てくるボタン（＝実行ボタン）を押しています。
```javascript:フォーカスがあたっているエディタの実行ボタンを押す
document.activeElement.closest(".nako3").querySelector("button").click();
```
あとは、これを特定のキーが入力されたときに実行されるようにします。ただ、簡易エディタの場合と、簡易エディタ2（ACE Editorを使用している）の場合では、若干勝手が違います。まず簡易エディタの場合は、addEventListenerでkeydownを取得します。
```javascript:簡易エディタの場合
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してあげると、想定通り動作します。
```javascript:簡易エディタ2の場合
Object.values(ace_editors).forEach(e=>{e.editor.commands.addCommand({bindKey:"Ctrl-Shift-D",exec:()=>document.activeElement.closest(".nako3").querySelector("button").click()})})
```

これらを組み合わせると、次のようになります。
```javascript: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()})})
```

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197285/ae75c951-1f55-a89b-54fd-ae3c4595d568.png)

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

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

```javascript:ローカルストレージから情報を書き戻す
document.querySelectorAll("[id^='nako3_code_']").forEach(e=>{const value=localStorage["nako3start::DEFAULT"+e.id.slice(11)];if(value)e.value=value;});
```

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

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

　
  
  

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