【JavaScript】document.designMode で Web ページを直接編集する
はじめに
JavaScript の document.designMode を使って、Web ページを直接編集する方法をご紹介します。
※ Chrome を使っている方が対象です。
サクッと試してみる
手軽に試してみます。
まずは Chrome のデベロッパーツールを開きましょう。
F12キーを押すか、何もないところで右クリック → 「検証」を選択することで開けます。
次に、デベロッパーツールの上部にあるタブから「Console」を選択します。
最後に以下のコードをコピペし、Enter キーを押して実行しましょう。
document.designMode='on';
これで Web ページが直接編集できるようになりました。
ただし、ページをリロードすると元の状態に戻ってしまうので注意しましょう。
コードをブックマークレットに登録する
ページをリロードする度にコードを実行するのは大変だと思います。
そこでコードをブックマークレットに登録し、ブックマークから呼び出す形にすると便利です。
まずは Chrome のブックマークマネージャーを開きます。
次に右上の三点リーダーをクリックし、「新しいブックマークを追加」を選択しましょう。
「新しいブックマークを追加」を選択すると、ブックマークを作成するフォームが表示されると思います。
その後は URL 欄に以下の値を入力します。
javascript:document.designMode='on'; void 0
名前の欄は何を入力しても大丈夫です。
入力できたら保存ボタンをクリックします。
これでブックマークレットの登録が完了です。
Chrome のブックマークバーから先程登録したブックマークレットをクリックすることで、開いているページで javascript:document.designMode='on'; が実行できます。
さいごに
今回は JavaScript の document.designMode を使って、Web ページを直接編集する方法を紹介しました。
この技は非常に便利ですが、以外と知らない方が多いです。
様々な場面で活用できるので、ぜひ使っていきましょう。
Discussion