コピペするだけ！簡単「ブラウザ画面録画」

読ませて頂いた記事をマガジンに追加させて頂いております。

伺った際にはマガジンへの登録をさせて頂いていきますが、それはやめてほしいなどありましたら、DM / コメントで一言頂けましたら幸いです😊

ブックマークに置いとくだけ！

コピペするだけの簡単小道具！

Geminiで簡単！ツール作成！

一発作成プロンプトも紹介！

先日ブラウザ画面の録画をしてみたので、応用してブックマークでできないか試してみました。
ですが、粘ってみたもののSafariでは動かず。
なのでiPhoneやiPadでは使えず。
パソコンのChromeとEdgeでは動きました。

ブックマークを押すと録画許可画面を表示！

許可するとブラウザの中身を録画します！

もう一度押すと録画を停止してダウンロード！

※ webm形式なのでmp4にするには変換が必用です

🛠️ 使い方（PC版）

1. 適当なページをブックマークする

まずは、今見ているこのページなど、何でもいいので一度ブックマークに登録します（Ctrl + D または Command + D）。

2. 「編集」を開く

ブックマークバーにある今作ったブックマークを右クリックして、「編集」を選択します。

3. 内容を書き換える

表示された設定画面で、以下の2箇所を変更して保存します。

• 名前： （自分が分かりやすい名前）

• URL： もともと入っているURLをすべて消して、コードを貼り付ける。

ブックマークを押すだけ簡単！

📋これを貼ります！

javascript:(function(){if(window.myMediaRecorder&&window.myMediaRecorder.state!=='inactive'){window.myMediaRecorder.stop();return;}navigator.mediaDevices.getDisplayMedia({video:{displaySurface:'browser'},audio:true,preferCurrentTab:true}).then(stream=>{const chunks=[];const recorder=new MediaRecorder(stream);window.myMediaRecorder=recorder;recorder.ondataavailable=e=>chunks.push(e.data);recorder.onstop=()=>{stream.getTracks().forEach(t=>t.stop());const blob=new Blob(chunks,{type:'video/webm'});const a=document.createElement('a');a.href=URL.createObjectURL(blob);a.download=`recording_${Date.now()}.webm`;a.click();console.log('%c[録画終了] 動画を保存しました', 'color: green; font-weight: bold;');};recorder.start();console.log('%c[録画開始] もう一度ブックマークを押すと停止します', 'color: red; font-weight: bold;');}).catch(err=>console.error('録画エラー:',err));})();

一発作成プロンプト！

# 目的
閲覧中のブラウザタブの画面と音声をキャプチャし、同じブックマークレットをもう一度押すことで停止できる、トグル（オン／オフ）駆動式の画面録画ブックマークレットを出力してください。

# 機能・コード仕様（超厳守・書き換え禁止）
1. トグル停止ロジック:
   - 起動時に「window.myMediaRecorder」が存在し、かつステータスが「'inactive'」ではない場合は、録画中と判断して「window.myMediaRecorder.stop()」を実行して安全に処理を終了（return）する仕組みにすること。
2. キャプチャ設定:
   - 「navigator.mediaDevices.getDisplayMedia」を使用し、ビデオ設定は「displaySurface: 'browser'」、オーディオは「audio: true」、さらに現在のタブを優先選択させるため「preferCurrentTab: true」を必ず指定すること。
3. データ処理とダウンロード:
   - 録画データは「ondataavailable」でchunks配列にプッシュし、停止時（onstop）にすべてのトラックを確実にストップ（t.stop()）させること。
   - chunksから「type: 'video/webm'」のBlobを生成し、一時的に生成したa要素の「download」属性に、テンプレートリテラルを用いて「`recording_${Date.now()}.webm`」というファイル名を指定して自動クリック（a.click()）で保存させること。
4. コンソールの色変え演出（重要）:
   - 録画開始時と終了時には、必ずコンソールに視覚的な演出を入れること。
   - 開始時: 「console.log('%c[録画開始] もう一度ブックマークを押すと停止します', 'color: red; font-weight: bold;');」
   - 終了時: 「console.log('%c[録画終了] 動画を保存しました', 'color: green; font-weight: bold;');」
   ※AIの勝手な判断で「%c」や第2引数のカラー指定をパージすることは絶対に禁止とする。

# 構成制約
- エラーハンドリングとして、末尾に「.catch(err=>console.error('録画エラー:',err))」を実装すること。
- 全体を「javascript:(function(){ ... })();」形式で包み、改行のない完全な1行の文字列として出力すること。

# 出力形式
コードブロックに1行のコードだけを出力してください。前後の解説文や挨拶、説明はすべて省略してください。

この記事について！

今更ながら、Gemini 3分クッキング記事について注意点など｜へろん

何でもどうぞ！答えられるものは全て答えます！

設置はお済みですか？図らずも人の庭でnote質問箱を試す！｜へろん

メンバーシップ始めました！

まだ手探りですが、ご要望/無茶振り/質問、可能な限りお受けします！

参加させて頂いています！是非チェックしてみてください😆

有料記事、今回は問題提起と警告！

note生活1ヶ月の総括記事を書きました！大事な部分は全て無料公開中！
何を考え何をしてきたのか、500人記念のワンコインで公開します！

小道具すべて、こちらに置きました！

☕ お時間あればこちらも是非！

気に入ったらスキ、フォローよろしくお願いします！
note外から見にきてくださったかたも、もしよければハートマーク押して頂けたら励みになります😊