メインコンテンツへスキップ
見出し画像

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

    へろん

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

    伺った際にはマガジンへの登録をさせて頂いていきますが、それはやめてほしいなどありましたら、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外から見にきてくださったかたも、もしよければハートマーク押して頂けたら励みになります😊


     
     
     
    50代から、AIを相棒に新しい「遊び」を始めました。 なんとなく過ぎる毎日に、自分の手で形を作るワクワクを。 一歩踏み出す日々の試行錯誤や、小さな成功の瞬間を等身大の視点で発信していきます。 Amazonのアソシエイトとして、へろんは適格販売により収入を得ています。

    あなたへのおすすめ