Help us understand the problem. What is going on with this article?

JAWS-UG CLI専門支部に捧ぐ - 手順実行の際にコピペを楽にするブックマークレット

JAWS-UG CLI専門支部 楽しいですよね。ご存じない方は 総合案内 あたり参照してみてください。

手順を実行する際に Web から CLI コマンドをコピペするのですが、ここで選択範囲をミスってコマンドエラーになると少し悲しいです。私は手先が器用ではないので、たまにありますw

というわけで、自分用のクイックハックとして「CLI コマンドをワンクリックで全選択する JavaScript コード」を書いてみました。ブックマークレット書くなんて何年振りだろう…

JavaScript コード

対象のページ をみると、CLI コードが記載されている HTML Element は以下の4種の CSS セレクターで選択できそうです。

  • pre.command
  • pre.setenv
  • pre.checkenv
  • .highlight-sh .highlight

であればコードは簡単で、HTML 要素を選択して、onClick イベントを仕込めばok。たとえば以下のようになります。

document.querySelectorAll("pre.command, pre.setenv, pre.checkenv, .highlight-sh .highlight").forEach(e => {
  e.addEventListener('click', function(){
    var r = document.createRange();
    r.selectNodeContents(this);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(r);
  });
});

JAWS-UG CLI の手順ページでコンソールを開き、上記のコードをコピペして実行すれば、CLI コードをワンクリックで選択できるようになります。
image.png
あとは Ctrl-C Ctrl-V などで、コンソールにコピペすればok。

一応、Chrome と Firefox ブラウザで動作を確認してあります。

ブックマークレット化してみる

毎回 Web ブラウザのコンソールで実行するのも面倒なので、ブックマークレットにしておきましょう。ワンクリックで機能が使えるようになります。

Chrome の場合、まずは適当にブックマークしてタイトル(名前)を入力します。
image.png
「その他」をクリックして詳細設定の画面に移動して
image.png
以下のコードを URL 欄に設定すればokです。

javascript:document.querySelectorAll("pre.command, pre.setenv, pre.checkenv, .highlight-sh .highlight").forEach(e => {e.addEventListener('click', function(){var r = document.createRange();r.selectNodeContents(this);var sel = window.getSelection();sel.removeAllRanges();sel.addRange(r);});});

後は手順ページで、この作成したブックマークレットをクリックすれば、ワンクリックでの CLI コード選択が使えるようになります。

これで手順をスピードアップし、もっと雑談チャットに参加しましょうw

yamachan360
Web系開発者。映画,特撮,功夫,酒, ロボ,アニメ,模型,ゲーム, 懐パソ(PC6001, MSX, X68000), JavaScript/NodeJS, Unity, RPGツクール, プチコン, AWS, 開発環境なんでも好き。修行中。 投稿は全て個人の見解です。 Posts are my own.
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away