2026-05-01

Gemini ほか）

AI JavaScript

※便利な半面、攻撃の対象にもなり得るので、安易にAIのリンクを開いちゃだめですね。

この記事でできるようになること

URLに ?q=プロンプト を付けるだけで、チャットUIへプロンプトを自動入力・実行可能なAIがどれなのかを知る
対応サービスごとの挙動の違いを把握（Notion AI / Grok / Google AIモード / Felo / Claude / ChatGPT / Gemini ほか）
非対応サービス（Gemini）でも、Tampermonkeyスクリプトで同じことを実現
ブックマーク・ショートカット・ユーザースクリプト連携で、ワンクリックでAIに仕事を振れるようにする

この記事でできるようになること
TL;DR
対応状況サマリ（2026-05-01 時点）
Notion AI — 標準機能でいけるのが強い
- 使用例
- 発見の経緯
Gemini — Tampermonkeyで補う
- 使用例
- コピペで動くTampermonkeyスクリプト
参考: Notion AI 用 Tampermonkey
共通テクニック
- 活用シナリオ
- ハマりポイント
各サービスの個別メモ
- Grok
- Google AIモード
- Felo AI
- Claude
- ChatGPT
- GenSpark / Sakana AI
- Tampermonkeyスクリプト比較
セキュリティリスクの話
- 攻撃ベクトル
  - プロンプトインジェクション via URL（最大リスク）
  - Tampermonkeyスクリプトの信頼チェーン
  - history.replaceState による痕跡消去
- リスクマトリクス
- 緩和策
まとめ

2025-09-28

【コピペでOK】PDFファイル一括ダウンロード。ブラウザで開かずにダウンロードさせる方法

スクレイピング JavaScript

この記事でできるようになること

Webページ内のすべてのPDFリンクを一括ダウンロードできるようになる
ブラウザでPDFファイルを開かずに直接ダウンロードさせる設定ができるようになる
JavaScriptを使ってaタグにdownload属性を付与する方法を理解できる
ブラウザの「名前をつけて保存」ダイアログを省略する設定ができるようになる
URLからファイル名を抽出する方法を学べる

※複数ページを横断して実行する場合は以下記事を参考にサブウィンドウを活用してみてください

codelife.cafe

サンプルコード: ページ内のすべてのPDFリンクにdownload属性付与して開く

F12でブラウザコンソールを開いてコピペで動きます

// ファイル名取得関数
const getFilename = url => new URL(url).pathname.split('/').pop();

// スリープ関数
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

// PDFファイルのaタグにdownload属性を付与
const links = [...document.querySelectorAll("a")]
    .filter(a => /\.pdf/.test(a.href))
    .map(a => {
        const fileName = getFilename(a.href);
        a.setAttribute("download", fileName);
        a.setAttribute("target", "_blank");
        return a;
    });

// 全てのリンクを順番にクリック
for (const link of links){
    await sleep(1000);
    console.log(link.href);
    link.click();
}

2025-03-31

はてなブログで書いたコードブロックにコピーボタンを追加する方法

JavaScript HTML

このブログはプログラミングメモブログと題していて、便利だったからまた使うかもしれないコードスニペットを書くのがメインテーマだったりするのですが、何故か今まで実装していなかった「コードをコピーするボタン」。

ちょこっとJavaScript書けばできるだろうなと思いつつやってなかったのですが、ChatGPT先生にお願いして書いてもらったものが一発で動いたのでシェア。

設定方法

設定はわりと簡単で、以下のコードをはてなブログのデザイン設定→フッターに入れるだけ。

コード

アイコンを全部絵文字でやってくれたので画像ファイルも用意しなくてOK。助かる。

コードブロック自体のシンタックスハイライトは過去記事を参考に設定ください。

codelife.cafe

<script>
document.querySelectorAll("pre").forEach((pre) => {
  // ボタン要素を作成
  const button = document.createElement("button");
  button.textContent = "📋 Copy";
  button.style.position = "absolute";
  button.style.top = "5px";
  button.style.right = "5px";
  button.style.padding = "5px 10px";
  button.style.fontSize = "12px";
  button.style.cursor = "pointer";
  button.style.border = "none";
  button.style.borderRadius = "5px";
  button.style.background = "rgba(0, 0, 0, 0.7)";
  button.style.color = "white";

  // `pre` の親要素を relative にする
  const wrapper = document.createElement("div");
  wrapper.style.position = "relative";
  pre.parentNode.insertBefore(wrapper, pre);
  wrapper.appendChild(pre);
  wrapper.appendChild(button);

  // コピー処理
  button.addEventListener("click", async () => {
    const codeLines = Array.from(pre.querySelectorAll("div"))
      .map((div) => div.textContent)
      .join("\n");

    try {
      await navigator.clipboard.writeText(codeLines);
      button.textContent = "✔ Copied!";
      setTimeout(() => (button.textContent = "📋 Copy"), 1500);
    } catch (err) {
      console.error("Copy failed", err);
      button.textContent = "❌ Error";
      setTimeout(() => (button.textContent = "📋 Copy"), 1500);
    }
  });
});
</script>