oto-tanblog Written by oto-tan

【JavaScript】WebブラウザでJSを超簡単に実行する方法【ブックマークレット】

JavaScript

こんにちは!

おとーたんです。

JavaScriptを実行するとき、HTMLファイルを用意して、JSファイルを読み込んでから実行していたのですが、もっと簡単に実行するほうほうを見つけたのでご紹介がてらアウトプットしておきます!

[box01 title=”ここにタイトルを入力”]

  • JSコードを超簡単にWebブラウザで実行する方法

[/box01]

WebブラウザでJavaScriptを超簡単に実行する方法

めっちゃ簡単でした!
ブックマークバーに以下のコードを登録するだけ。


javascript: ( ここに実行したいJSを記述 )();

「ブックマークレット」というもので、ブックマークにJSコードを登録して実行させる方法です。

ちなみにURLに直接貼り付けることはできませんでした(笑)

ブックマークレットの作成方法

今回はアラートを表示するだけの簡単な記述で試してみたいと思います。
コードは以下のコード。


javascript: (alert('アラート'))();

  1. 「ブックマークツールバー」にブックマークを登録(どこでもOK)。
  2. 【JS】WebブラウザでJavaScriptを簡単実行【ブックマークレット】
  3. 登録したブックマークを右クリックし、登録したブックマークを編集します。
  4. 【JS】WebブラウザでJavaScriptを簡単実行【ブックマークレット】
  5. 名前は任意、URLに実行したいJavaScriptをペースト。
  6. 【JS】WebブラウザでJavaScriptを簡単実行【ブックマークレット】
    【JS】WebブラウザでJavaScriptを簡単実行【ブックマークレット】

  7. 「ブックマークツールバー」の編集したブックマークをクリックすると実行できる。
  8. 【JS】WebブラウザでJavaScriptを簡単実行【ブックマークレット】

以上、超簡単でしたね!

スマホでも実行可能

この方法はスマホのブラウザからも実行可能です。
スマホのブックマークから、登録したブックマークレットをタップすれば実行できるので、スマホで動作させたい時にはかなり便利!

私はiPhoneなので

  • safari
  • chrome

の2つは動作確認できています。
しかし、firefoxはうまくいきませんでした…

【JS】WebブラウザでJavaScriptを簡単実行【ブックマークレット】

safariは大丈夫でしたが、chromeは最初の初期ページでは動作しませんでした。
どこでもいいので、どこかしらのサイトを開いておかないと動作しないようです。

最後のカッコいらないのでは?(まとめ)

  • 記述方法は「javascript: ( ここに実行したいJSを記述 )();」
  • ブックマークのURLに記述して実行

javascriptだけ実行したい場合には、この方法が一番手っ取り早いですね!

ちなみに、おしりのほうについているカッコありますよね。


javascript: ( ここに実行したいJSを記述 )()←これ;

「これ要らないんじゃないの?」
って思ったのではずしてみたのですが、なくてもいけました…

どのサイトみてもついているので必要なのかなと思ったのですが、どうなんでしょう(笑)
詳しくはわかりませんが、簡単な記述であれば動くみたいです。
もし複雑なコードで動作しなくなったら、つけておくほうが無難なのかもしれませんね!

以上、WebブラウザでJavaScriptを実行する方法でした。