いま見ているページをそのままブラウザ上で編集する方法

先日ツイートしたブラウザ上でいま見てるページをその場で編集する方法について、ブックマークレットの作り方を紹介します。ちなみにPCのみでスマホではできません。

ちなみにブックマークレットとは？

ブックマークレット (Bookmarklet) とは、ユーザーがウェブブラウザのブックマークなどから起動し、ウェブブラウザで簡単な処理を行う簡易的なプログラムのことである [注釈 1]。 携帯電話のウェブブラウザで足りない機能を補ったり、ウェブアプリケーションの処理を起動する為に使われることが多い。(wiki参照)

wikiですがまあ間違ったことは書いてないので参照しました。つまりいつも便利に使ってる「ブックマーク」という機能がありますよね。アレを利用してプログラムを起動できる、というのがブックマークレットです。今回Twitterで紹介したのは、このブックマークレットに「いま見ているページをそのままブラウザ上で編集できるようにする」プログラムをかき込んだものになります。

やり方はめちゃくちゃ簡単。

1）新規ブックマークを作成します。(chromeなら chrome://bookmarks/ にアクセスしていただき、右上の点3つのボタンから新しく作れます。)
2）以下のコードをブックマークのアドレス欄に入れて保存します。ブックマーク名はなんでも大丈夫です。
3）編集したいページでそのブックマークをクリックするだけ

▼コード

javascript:document.body.contentEditable = 'true'; document.designMode='on'; void 0

僕がTwitterで紹介している動画の中ではEDITという名前にしてあります。このブックマークの中身はこんな感じ。ちなみに利用しているのはGooglechromeです。

これを見た上で最初に紹介した動画を改めて見てみると何が起きてるか分かりやすいかと。

以上です。もし何か質問あれば上のツイートに返信もらえたら余力のある限りお答えします。
ではよい週末を。

【2020/03/13追記】
この記事は、フォロワー数などは簡単に変更できる数字なのでスクショなどで簡単の信用して欲しくないから書いたもので、数字をごまかして使う事を推奨するものではありません。