店舗不動産の実務ログ: 【インストール不要】情報漏洩を防ぐ「透明なPDF整理ツール」全コード公開

YouTubeでブラウザ上のPDF結合追加機能等を知ったが、自分の使いやすさを求め、結合・抽出・入替ができるWebツールを自作した。
Geminiの生成能力は流石と言うほかない。即座に社内共有し、組織全体の工数削減へ。ツールは使い倒してこそ価値が出る。#業務効率化 #Gemini pic.twitter.com/vVFHlHxXZ6
— (株)FIJの中の人｜サブリース歴15年の営業本部長（元ノンバンク支店長） (@FIJ_eigyou) January 17, 2026

(株)FIJ 営業本部長の岩井です。

本日は、X（旧Twitter）でつぶやいた、自作の「PDF整理ツール」のソースコードをブログで無料公開します。

業務でPDFの「結合」や「ページ抽出」が必要になったとき、皆様はどうされていますか？

「フリーソフトを入れたいが、会社のPCなので勝手にインストールできない」
「ネットの無料変換サイトは便利だが、契約書をアップロードするのは情報漏洩が怖くて使えない」

この2つの悩みは、どの企業でも共通しています。
そこで今回は、最新AI「Gemini 3」を活用し、「インストール不要」かつ「外部にデータを送信しない」安全なツールを自作しました。

プログラミングの知識は不要です。以下のコードをコピペするだけで、今日から御社の安全な標準ツールとして利用できます。

1. ブラックボックスを使うな、「透明な道具」を使え

企業において、中身のわからない（ソースコードが公開されていない）フリーソフトや、運営元が不透明なWebサービスを利用することは、コンプライアンス上の大きなリスクです。

今回公開するツールの最大の特徴は、「中身が丸見え（透明）」であることです。
コードの全てがここにあり、以下の特徴を持っています。

完全ローカル処理：
このツールは、ブラウザ（ChromeやEdge）の中だけで動作します。ファイルを選択しても、外部のサーバーにデータが送信される命令文が一切含まれていません。
インストール権限不要：
アプリをインストールするわけではないので、管理者権限は不要です。

※誤解のないよう申し上げますが、これはPDF内の文字を書き換えたりする「編集ソフト」ではありません。あくまで、バラバラのPDFを一つにまとめたり（結合）、必要なページだけ抜き出したり（抽出）、順番を入れ替えたりする「整理ツール」です。

2. 【全コード公開】PDF結合・抽出ツール

以下がツールの全ソースコードです。
まずはこのコードをコピーしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>PDF 統合・抽出・並べ替えツール</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/pdf-lib/dist/pdf-lib.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
    <script src="https://unpkg.com/lucide@0.263.1/dist/umd/lucide.min.js"></script>
    
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
        body { font-family: 'Noto Sans JP', sans-serif; }
        
        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: #f1f5f9; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

        /* Page Card Styles */
        .page-card {
            transition: transform 0.2s, box-shadow 0.2s;
            position: relative;
            touch-action: manipulation;
        }
        .page-card.selected .selection-ring {
            border-width: 4px;
            border-color: #3b82f6;
        }
        .page-card.selected .check-icon {
            display: flex;
        }
        .page-card:hover .delete-btn {
            opacity: 1;
        }
        /* Sortable ghost class */
        .sortable-ghost {
            opacity: 0.4;
            background: #e2e8f0;
        }
        
        /* Drop zone active state */
        .drop-zone-active {
            background-color: #eff6ff !important; /* blue-50 */
            border: 2px dashed #3b82f6 !important; /* Add visible border when dragging */
        }
        
        /* Ensure no border on the main container by default */
        #main-drop-zone {
            border: 2px solid transparent; /* Prepare border space to prevent layout shift */
            outline: none !important;
            box-shadow: none !important;
        }
    </style>
</head>
<body class="bg-slate-100 h-screen flex flex-col overflow-hidden text-slate-800">

    <header class="bg-white border-b border-slate-200 flex-none z-20 shadow-sm">
        <div class="w-full px-4 md:px-6 h-16 flex items-center justify-between">
            <div class="flex items-center space-x-2 sm:space-x-3 shrink-0">
                <div class="bg-blue-600 text-white p-1.5 rounded-lg">
                    <i data-lucide="layers" class="w-5 h-5"></i>
                </div>
                <h1 class="text-base font-bold text-slate-800 hidden sm:block">PDF Editor</h1>
            </div>

            <div class="flex items-center space-x-2 overflow-x-auto no-scrollbar">
                
                <div class="hidden md:flex items-center space-x-2 mr-2">
                    <button onclick="downloadPDF(false)" class="flex items-center space-x-2 px-4 py-2 bg-slate-800 hover:bg-slate-900 text-white rounded-lg text-sm font-medium transition-colors shadow-sm" title="すべてのページを結合して保存">
                        <i data-lucide="save" class="w-4 h-4"></i>
                        <span>結合して保存</span>
                    </button>
                    <button onclick="downloadPDF(true)" class="flex items-center space-x-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium transition-colors shadow-sm" title="選択したページのみ抽出して保存">
                        <i data-lucide="check-square" class="w-4 h-4"></i>
                        <span>選択ページを抽出</span>
                    </button>
                    <div class="h-6 w-px bg-slate-300 mx-2"></div>
                </div>

                <div class="hidden lg:flex items-center text-xs text-slate-500 bg-slate-100 px-3 py-1.5 rounded-full whitespace-nowrap">
                    <span id="page-count">0</span> ページ・選択: <span id="selected-count" class="font-bold ml-1 text-blue-600">0</span>
                </div>
                
                <input type="file" id="file-input" class="hidden" accept=".pdf" multiple>
                
                <button onclick="toggleHelp(true)" class="p-2 text-slate-500 hover:bg-slate-100 hover:text-blue-600 rounded-full transition-colors shrink-0" title="使い方">
                    <i data-lucide="help-circle" class="w-5 h-5"></i>
                </button>

                <button onclick="document.getElementById('file-input').click()" class="flex items-center space-x-2 px-3 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg text-xs sm:text-sm font-medium transition-colors shrink-0" title="ファイルを追加">
                    <i data-lucide="plus" class="w-4 h-4"></i>
                    <span class="hidden sm:inline">追加</span>
                </button>

                <button onclick="openDeleteConfirm()" id="btn-delete" disabled class="flex items-center space-x-2 px-3 py-2 bg-red-50 hover:bg-red-100 text-red-600 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg text-xs sm:text-sm font-medium transition-colors shrink-0" title="選択したページを削除">
                    <i data-lucide="trash-2" class="w-4 h-4"></i>
                    <span class="hidden sm:inline">削除</span>
                </button>
            </div>
        </div>
    </header>

    <main class="flex-1 flex overflow-hidden relative bg-slate-100">
        
        <div id="main-drop-zone" class="
            flex-1 overflow-y-auto transition-colors
            p-4 md:p-6 w-full mx-auto
        ">
            <div id="empty-state" class="h-full flex flex-col items-center justify-start text-slate-400 pt-8 md:pt-12 pointer-events-none">
                
                <div class="text-center mb-8 w-full max-w-md px-4 pointer-events-auto">
                    <div class="bg-blue-50 p-4 md:p-5 rounded-full shadow-sm mb-4 inline-block ring-1 ring-blue-100">
                        <i data-lucide="file-up" class="w-8 h-8 md:w-10 md:h-10 text-blue-600"></i>
                    </div>
                    <h2 class="text-lg md:text-xl font-bold text-slate-700 mb-2">PDF編集ツール</h2>
                    <p class="text-slate-500 mb-6 text-sm">ファイルをここにドロップしてください</p>
                    
                    <button onclick="document.getElementById('file-input').click()" class="w-full sm:w-auto px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-medium shadow-md hover:shadow-lg transition-all flex items-center justify-center mx-auto text-sm">
                        <i data-lucide="folder-open" class="w-4 h-4 mr-2"></i>
                        ファイルを選択
                    </button>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-3 max-w-4xl w-full px-4 text-left pointer-events-auto">
                    <div class="bg-white p-4 rounded-lg border border-slate-200 shadow-sm">
                        <div class="flex items-center mb-2 text-blue-600">
                            <i data-lucide="move" class="w-4 h-4 mr-2"></i>
                            <h3 class="font-bold text-slate-700 text-sm">1. 並べ替え</h3>
                        </div>
                        <p class="text-xs text-slate-500">ドラッグで順番を変更できます。<br><span class="md:hidden text-blue-600 font-bold">※スマホは長押し</span></p>
                    </div>
                    <div class="bg-white p-4 rounded-lg border border-slate-200 shadow-sm">
                        <div class="flex items-center mb-2 text-blue-600">
                            <i data-lucide="mouse-pointer-click" class="w-4 h-4 mr-2"></i>
                            <h3 class="font-bold text-slate-700 text-sm">2. 選択・抽出</h3>
                        </div>
                        <p class="text-xs text-slate-500">クリックでページを選択し、上の「抽出」ボタンで保存します。</p>
                    </div>
                    <div class="bg-white p-4 rounded-lg border border-slate-200 shadow-sm">
                        <div class="flex items-center mb-2 text-blue-600">
                            <i data-lucide="file-plus" class="w-4 h-4 mr-2"></i>
                            <h3 class="font-bold text-slate-700 text-sm">3. 追加・挿入</h3>
                        </div>
                        <p class="text-xs text-slate-500">選択中のページがある場合、その後ろに新しいファイルが挿入されます。</p>
                    </div>
                </div>

            </div>

            <div id="page-grid" class="hidden grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8 gap-3 sm:gap-4 pb-28 md:pb-20">
                </div>
        </div>

        <div id="action-bar" class="
            md:hidden
            absolute z-30 transition-transform duration-300
            bottom-0 left-0 right-0
            bg-white border-t border-slate-200
            p-2 pb-safe
            flex items-center justify-between
            translate-y-full
            pb-[env(safe-area-inset-bottom)]
        ">
            <div class="flex items-center justify-between w-full space-x-2">
                <button onclick="downloadPDF(false)" class="flex-1 py-2 px-2 rounded-lg hover:bg-slate-100 text-slate-700 transition-colors group flex flex-col items-center justify-center">
                    <i data-lucide="save" class="w-5 h-5 mb-1 text-slate-600 group-hover:text-blue-600"></i>
                    <span class="text-[10px] font-bold whitespace-nowrap">結合して保存</span>
                </button>
                <div class="w-px h-8 bg-slate-200"></div>
                <button onclick="downloadPDF(true)" class="flex-1 py-2 px-2 rounded-lg hover:bg-blue-50 text-blue-600 transition-colors group relative flex flex-col items-center justify-center">
                    <span id="badge-selected" class="absolute top-1 right-2 w-2 h-2 bg-blue-500 rounded-full hidden"></span>
                    <i data-lucide="check-square" class="w-5 h-5 mb-1"></i>
                    <span class="text-[10px] font-bold whitespace-nowrap">選択ページを抽出</span>
                </button>
                <div class="w-px h-8 bg-slate-200"></div>
                <div class="flex space-x-1 flex-1 justify-center">
                    <button onclick="selectAll()" class="flex-1 py-2 px-1 rounded-lg hover:bg-slate-100 text-slate-500 transition-colors flex flex-col items-center justify-center">
                        <i data-lucide="list-checks" class="w-5 h-5 mb-1"></i>
                        <span class="text-[10px]">全選択</span>
                    </button>
                    <button onclick="deselectAll()" class="flex-1 py-2 px-1 rounded-lg hover:bg-slate-100 text-slate-500 transition-colors flex flex-col items-center justify-center">
                        <i data-lucide="x-square" class="w-5 h-5 mb-1"></i>
                        <span class="text-[10px]">解除</span>
                    </button>
                </div>
            </div>
        </div>

    </main>

    <div id="delete-modal" class="hidden fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4" onclick="closeDeleteModal()">
        <div class="bg-white rounded-xl shadow-2xl max-w-sm w-full p-6 text-center animate-in fade-in zoom-in duration-200" onclick="event.stopPropagation()">
            <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <i data-lucide="trash-2" class="w-6 h-6 text-red-600"></i>
            </div>
            <h3 class="text-lg font-bold text-slate-800 mb-2">ページを削除しますか？</h3>
            <p id="delete-msg" class="text-slate-500 text-sm mb-6">選択したページを削除します。<br>この操作は元に戻せません。</p>
            <div class="flex space-x-3">
                <button onclick="closeDeleteModal()" class="flex-1 px-4 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg text-sm font-medium transition-colors">
                    キャンセル
                </button>
                <button onclick="executeDelete()" class="flex-1 px-4 py-2.5 bg-red-600 hover:bg-red-700 text-white rounded-lg text-sm font-medium transition-colors shadow-sm">
                    削除する
                </button>
            </div>
        </div>
    </div>

    <div id="help-modal" class="hidden fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4" onclick="toggleHelp(false)">
        <div class="bg-white rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto animate-in fade-in zoom-in duration-200" onclick="event.stopPropagation()">
            <div class="flex items-center justify-between p-4 sm:p-6 border-b border-slate-100 sticky top-0 bg-white/95 backdrop-blur-sm z-10">
                <h2 class="text-lg sm:text-xl font-bold text-slate-800 flex items-center">
                    <i data-lucide="help-circle" class="w-6 h-6 mr-2 text-blue-600"></i>
                    使い方ガイド
                </h2>
                <button onclick="toggleHelp(false)" class="p-2 hover:bg-slate-100 rounded-full transition-colors">
                    <i data-lucide="x" class="w-5 h-5 text-slate-500"></i>
                </button>
            </div>
            
            <div class="p-4 sm:p-6 space-y-6 text-slate-600">
                
                <section>
                    <h3 class="text-base sm:text-lg font-bold text-slate-800 mb-3 flex items-center">
                        <span class="bg-blue-100 text-blue-600 w-6 h-6 rounded-full flex items-center justify-center text-sm mr-2">1</span>
                        基本操作
                    </h3>
                    <ul class="list-disc list-inside space-y-2 ml-2 text-sm sm:text-base">
                        <li><strong>PC:</strong> ドラッグ＆ドロップで並べ替え。</li>
                        <li><strong>スマホ:</strong> <span class="text-blue-600 font-bold">長押し</span>してからドラッグで並べ替え。</li>
                        <li>クリック/タップでページを選択（青枠）。</li>
                    </ul>
                </section>

                <hr class="border-slate-100">

                <section>
                    <h3 class="text-base sm:text-lg font-bold text-slate-800 mb-3 flex items-center">
                        <span class="bg-blue-100 text-blue-600 w-6 h-6 rounded-full flex items-center justify-center text-sm mr-2">2</span>
                        保存と抽出
                    </h3>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div class="bg-slate-50 p-3 sm:p-4 rounded-lg border border-slate-100">
                            <div class="font-bold text-slate-700 mb-1 flex items-center text-sm sm:text-base">
                                <i data-lucide="save" class="w-4 h-4 mr-1.5"></i>結合して保存
                            </div>
                            <p class="text-xs sm:text-sm">画面上のすべてのページを1つのPDFとして保存します。</p>
                        </div>
                        <div class="bg-blue-50 p-3 sm:p-4 rounded-lg border border-blue-100">
                            <div class="font-bold text-blue-700 mb-1 flex items-center text-sm sm:text-base">
                                <i data-lucide="check-square" class="w-4 h-4 mr-1.5"></i>選択ページを抽出
                            </div>
                            <p class="text-xs sm:text-sm">選択したページ（青枠）だけを取り出して新しいPDFにします。</p>
                        </div>
                    </div>
                </section>

                <hr class="border-slate-100">

                <section>
                    <h3 class="text-base sm:text-lg font-bold text-slate-800 mb-3 flex items-center">
                        <span class="bg-blue-100 text-blue-600 w-6 h-6 rounded-full flex items-center justify-center text-sm mr-2">3</span>
                        ファイルの追加・挿入
                    </h3>
                    <div class="space-y-3 text-sm sm:text-base">
                        <div class="flex items-start">
                            <div class="bg-white border border-slate-200 p-2 rounded shrink-0 mr-3">
                                <i data-lucide="plus" class="w-4 h-4 text-slate-400"></i>
                            </div>
                            <div>
                                <span class="font-bold text-slate-700 block text-sm">最後尾に追加</span>
                                <span class="text-xs sm:text-sm">ページを選択せずに「追加」すると、一番後ろに追加されます。</span>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-white border-2 border-blue-500 p-2 rounded shrink-0 mr-3">
                                <i data-lucide="check" class="w-4 h-4 text-blue-500"></i>
                            </div>
                            <div>
                                <span class="font-bold text-blue-600 block text-sm">指定ページの後ろに挿入</span>
                                <span class="text-xs sm:text-sm">
                                    <strong>ページを選択した状態</strong>で「追加」すると、そのページの後ろに挿入されます。
                                </span>
                            </div>
                        </div>
                    </div>
                </section>

            </div>
            
            <div class="p-4 sm:p-6 bg-slate-50 border-t border-slate-100 text-center">
                <button onclick="toggleHelp(false)" class="w-full sm:w-auto px-8 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium transition-colors">
                    閉じる
                </button>
            </div>
        </div>
    </div>

    <div id="loading-overlay" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex flex-col items-center justify-center text-white">
        <div class="animate-spin rounded-full h-12 w-12 border-4 border-white/30 border-t-white mb-4"></div>
        <p class="text-lg font-medium" id="loading-text">処理中...</p>
    </div>

    <div id="toast" class="fixed top-4 left-4 right-4 sm:top-20 sm:left-auto sm:right-4 bg-slate-800 text-white px-4 py-3 rounded-lg shadow-lg transform transition-transform duration-300 translate-y-[-150%] sm:translate-y-0 sm:translate-x-64 flex items-center z-50 justify-center sm:justify-start">
        <i data-lucide="info" class="w-5 h-5 mr-3 text-blue-400 flex-shrink-0"></i>
        <span id="toast-msg" class="text-sm font-medium">Notification</span>
    </div>

    <script>
        // --- State ---
        let pages = []; // { id, pdfDoc, pageIndex, thumbnail, originalName }
        let nextId = 1;
        let dragCounter = 0; // Counter for drag enter/leave stability
        
        // --- DOM Elements ---
        const fileInput = document.getElementById('file-input');
        const mainDropZone = document.getElementById('main-drop-zone');
        const pageGrid = document.getElementById('page-grid');
        const emptyState = document.getElementById('empty-state');
        const actionBar = document.getElementById('action-bar');
        const loadingOverlay = document.getElementById('loading-overlay');
        const loadingText = document.getElementById('loading-text');

        // --- Initialization ---
        document.addEventListener('DOMContentLoaded', () => {
            
            // 1. Initialize Icons Safely
            if (typeof lucide !== 'undefined') {
                try {
                    lucide.createIcons();
                } catch (e) {
                    console.warn('Icon init warning:', e);
                }
            } else {
                console.error('Lucide library not loaded. Icons will be missing.');
            }

            // 2. Initialize PDF.js
            if (typeof pdfjsLib !== 'undefined') {
                pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
            } else {
                showToast('PDFライブラリの読み込みに失敗しました。リロードしてください。', true);
            }

            // 3. Initialize Sortable
            if (typeof Sortable !== 'undefined' && pageGrid) {
                new Sortable(pageGrid, {
                    animation: 150,
                    ghostClass: 'sortable-ghost',
                    delay: 150,
                    delayOnTouchOnly: true,
                    touchStartThreshold: 5,
                    onEnd: function (evt) {
                        const newIndex = evt.newIndex;
                        const oldIndex = evt.oldIndex;
                        const movedItem = pages.splice(oldIndex, 1)[0];
                        pages.splice(newIndex, 0, movedItem);
                        updateStats();
                    }
                });
            }

            // 4. Attach Event Listeners
            if (fileInput) {
                fileInput.addEventListener('change', (e) => handleFiles(e.target.files));
            }
            if (mainDropZone) {
                // Improved drag and drop logic using counter
                mainDropZone.addEventListener('dragenter', (e) => {
                    e.preventDefault();
                    dragCounter++;
                    mainDropZone.classList.add('drop-zone-active');
                });

                mainDropZone.addEventListener('dragover', (e) => {
                    e.preventDefault();
                    e.dataTransfer.dropEffect = 'copy';
                    // Ensure active class is present
                    mainDropZone.classList.add('drop-zone-active');
                });

                mainDropZone.addEventListener('dragleave', (e) => {
                    e.preventDefault();
                    dragCounter--;
                    if (dragCounter <= 0) {
                        mainDropZone.classList.remove('drop-zone-active');
                        dragCounter = 0; // Prevent negative
                    }
                });

                mainDropZone.addEventListener('drop', async (e) => {
                    e.preventDefault();
                    // Reset drag state
                    dragCounter = 0;
                    mainDropZone.classList.remove('drop-zone-active');
                    
                    if (e.dataTransfer.files.length > 0) {
                        await handleFiles(e.dataTransfer.files);
                    }
                });
            }
        });

        // --- Help Modal Logic ---
        function toggleHelp(show) {
            const modal = document.getElementById('help-modal');
            if(show) {
                modal.classList.remove('hidden');
                document.body.style.overflow = 'hidden'; 
            } else {
                modal.classList.add('hidden');
                document.body.style.overflow = '';
            }
        }

        // --- Delete Confirmation Logic (New) ---
        function openDeleteConfirm() {
            const selectedCount = pages.filter(p => p.selected).length;
            if (selectedCount === 0) return;
            
            const msg = document.getElementById('delete-msg');
            msg.innerHTML = `選択した <strong>${selectedCount} ページ</strong> を削除しますか？<br>この操作は元に戻せません。`;
            
            const modal = document.getElementById('delete-modal');
            modal.classList.remove('hidden');
            
            // Re-initialize icons just in case
            if (typeof lucide !== 'undefined') lucide.createIcons();
        }

        function closeDeleteModal() {
            const modal = document.getElementById('delete-modal');
            modal.classList.add('hidden');
        }

        function executeDelete() {
            pages = pages.filter(p => !p.selected);
            
            if (pages.length === 0) {
                emptyState.classList.remove('hidden');
                pageGrid.classList.add('hidden');
                if(window.innerWidth < 768) {
                      actionBar.classList.add('translate-y-full');
                }
            }
            
            renderGrid();
            closeDeleteModal();
            showToast('削除しました');
        }

        // --- Core Logic ---
        const { PDFDocument } = typeof PDFLib !== 'undefined' ? PDFLib : { PDFDocument: null };

        async function handleFiles(fileList) {
            // Safety check
            if (typeof pdfjsLib === 'undefined' || typeof PDFDocument === 'undefined') {
                showToast("ライブラリがロードされていません。", true);
                return;
            }

            // Loose file checking
            const files = Array.from(fileList).filter(f => 
                f.type === 'application/pdf' || f.name.toLowerCase().endsWith('.pdf')
            );
            
            if (files.length === 0) {
                console.warn('No PDF files found');
                showToast("PDFファイルが見つかりません。", true);
                return;
            }

            toggleLoading(true, `PDFを読み込み中...`);

            try {
                // Insert Logic
                const selectedIndices = getSelectedIndices();
                let insertIndex = pages.length;
                
                if (selectedIndices.length === 1) {
                    insertIndex = selectedIndices[0] + 1;
                    showToast(`${pages[insertIndex-1].originalName} の後ろに追加します`);
                } else if (selectedIndices.length > 0) {
                    insertIndex = Math.max(...selectedIndices) + 1;
                    showToast(`選択したページの後ろに追加します`);
                }

                const newPages = [];
                for (const file of files) {
                    const arrayBuffer = await file.arrayBuffer();
                    
                    // IMPORTANT FIX: Clone buffer for pdf.js to avoid "detached ArrayBuffer" error
                    const bufferCopy = arrayBuffer.slice(0);
                    
                    // Render using the copy
                    const loadingTask = pdfjsLib.getDocument({ data: new Uint8Array(bufferCopy) });
                    const pdfRenderer = await loadingTask.promise;
                    
                    // Manipulation Load using original buffer
                    const pdfDoc = await PDFDocument.load(arrayBuffer);
                    
                    const numPages = pdfRenderer.numPages;

                    for (let i = 1; i <= numPages; i++) {
                        const page = await pdfRenderer.getPage(i);
                        const viewport = page.getViewport({ scale: 0.5 });
                        
                        const canvas = document.createElement('canvas');
                        const context = canvas.getContext('2d');
                        canvas.height = viewport.height;
                        canvas.width = viewport.width;

                        await page.render({
                            canvasContext: context,
                            viewport: viewport
                        }).promise;

                        newPages.push({
                            id: nextId++,
                            pdfDoc: pdfDoc,
                            pageIndex: i - 1,
                            thumbnail: canvas.toDataURL(),
                            originalName: file.name,
                            selected: false
                        });
                    }
                }

                pages.splice(insertIndex, 0, ...newPages);
                renderGrid(true);
                
                if (pages.length > 0) {
                    emptyState.classList.add('hidden');
                    pageGrid.classList.remove('hidden');
                    if(window.innerWidth < 768) { 
                        actionBar.classList.remove('translate-y-full');
                    }
                }

            } catch (err) {
                console.error(err);
                showToast("エラー: " + err.message, true);
            } finally {
                toggleLoading(false);
                if(fileInput) fileInput.value = '';
            }
        }

        // --- Rendering ---
        function renderGrid(fullRender = false) {
            if(!pageGrid) return;
            pageGrid.innerHTML = '';
            
            pages.forEach((page, index) => {
                const div = document.createElement('div');
                div.className = `page-card cursor-pointer group select-none ${page.selected ? 'selected' : ''}`;
                div.dataset.index = index;
                div.onclick = (e) => toggleSelection(index, e);

                div.innerHTML = `
                    <div class="selection-ring rounded-lg overflow-hidden shadow-md bg-white border-2 border-transparent hover:border-blue-300 relative aspect-[1/1.4]">
                        <img src="${page.thumbnail}" class="w-full h-full object-contain bg-slate-200">
                        <div class="check-icon absolute top-2 right-2 w-6 h-6 bg-blue-500 rounded-full text-white items-center justify-center shadow-sm ${page.selected ? 'flex' : 'hidden'}">
                            <i data-lucide="check" class="w-4 h-4"></i>
                        </div>
                        <div class="absolute bottom-2 right-2 bg-black/60 text-white text-xs px-2 py-1 rounded">
                            ${index + 1}
                        </div>
                    </div>
                    <div class="mt-2 text-xs text-slate-500 truncate px-1" title="${page.originalName}">
                        ${page.originalName}
                    </div>
                `;
                pageGrid.appendChild(div);
            });
            
            updateStats();
            if(typeof lucide !== 'undefined') lucide.createIcons();
        }

        function toggleSelection(index, event) {
            if (event.shiftKey && lastSelectedIndex !== null) {
                const start = Math.min(lastSelectedIndex, index);
                const end = Math.max(lastSelectedIndex, index);
                for(let i=start; i<=end; i++) {
                    pages[i].selected = true;
                }
            } else if (event.ctrlKey || event.metaKey) {
                 pages[index].selected = !pages[index].selected;
            } else {
                 pages[index].selected = !pages[index].selected;
            }
            lastSelectedIndex = index;
            renderGrid();
        }

        let lastSelectedIndex = null;

        function selectAll() {
            pages.forEach(p => p.selected = true);
            renderGrid();
        }

        function deselectAll() {
            pages.forEach(p => p.selected = false);
            renderGrid();
        }

        function deleteSelectedPages() {
            // Replaced with custom modal
            openDeleteConfirm();
        }
        
        function updateStats() {
            if(document.getElementById('page-count')) document.getElementById('page-count').textContent = pages.length;
            const selectedCount = pages.filter(p => p.selected).length;
            if(document.getElementById('selected-count')) document.getElementById('selected-count').textContent = selectedCount;
            if(document.getElementById('btn-delete')) document.getElementById('btn-delete').disabled = selectedCount === 0;
            
            const badge = document.getElementById('badge-selected');
            if(badge) {
                if(selectedCount > 0) badge.classList.remove('hidden');
                else badge.classList.add('hidden');
            }
        }

        function getSelectedIndices() {
            return pages.map((p, i) => p.selected ? i : -1).filter(i => i !== -1);
        }

        // --- Saving ---
        async function downloadPDF(onlySelected) {
            const targets = onlySelected ? pages.filter(p => p.selected) : pages;
            if (targets.length === 0) {
                showToast("保存するページがありません", true);
                return;
            }

            toggleLoading(true, "PDFを作成中...");

            try {
                const mergedPdf = await PDFDocument.create();
                for (const pageData of targets) {
                    const srcDoc = pageData.pdfDoc;
                    const [copiedPage] = await mergedPdf.copyPages(srcDoc, [pageData.pageIndex]);
                    mergedPdf.addPage(copiedPage);
                }
                const pdfBytes = await mergedPdf.save();
                
                const blob = new Blob([pdfBytes], { type: 'application/pdf' });
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = onlySelected ? 'extracted_pages.pdf' : 'merged_document.pdf';
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
                showToast("ダウンロード完了！");
            } catch (err) {
                console.error(err);
                showToast("保存エラー: " + err.message, true);
            } finally {
                toggleLoading(false);
            }
        }

        // --- Utilities ---
        function toggleLoading(show, text = "処理中...") {
            if(loadingText) loadingText.textContent = text;
            if(loadingOverlay) loadingOverlay.classList.toggle('hidden', !show);
        }

        function showToast(msg, isError = false) {
            const toast = document.getElementById('toast');
            const msgEl = document.getElementById('toast-msg');
            if(!toast || !msgEl) return;
            
            msgEl.textContent = msg;
            toast.className = `fixed px-4 py-3 rounded-lg shadow-lg transform transition-transform duration-300 flex items-center z-50 justify-center sm:justify-start ${isError ? 'bg-red-600 text-white' : 'bg-slate-800 text-white'}`;
            
            if(window.innerWidth < 640) {
                toast.classList.add('top-4', 'left-4', 'right-4');
                toast.classList.remove('translate-y-[-150%]');
            } else {
                toast.classList.add('top-20', 'right-4');
                toast.classList.remove('translate-x-64');
            }

            setTimeout(() => {
                if(window.innerWidth < 640) {
                    toast.classList.add('translate-y-[-150%]');
                } else {
                    toast.classList.add('translate-x-64');
                }
            }, 3000);
        }

    </script>
</body>
</html>

【初心者向け】ツールの起動手順

「コードを見てもどうすればいいか分からない」という方もご安心ください。以下の3ステップで完了です。

パソコンに入っている「メモ帳」（Macならテキストエディット）を開きます。
上記のコードをすべてコピーし、メモ帳に「貼り付け」します。
保存する際、ファイル名を「tool.html」（拡張子を.htmlにするのがポイント）として保存します。
※保存したアイコンがChromeやEdgeのマークに変われば成功です。

あとは、保存したファイルをダブルクリックするだけで、PDF整理ツールが起動します。
もちろん、外部への通信は行わないため、LANケーブルを抜いたオフライン状態でも動作します。

【重要】自分で安全性を確認する（監査）

「岩井さんが公開しているから安全だろう」と盲信するのも、セキュリティ意識としては不十分です。
使う前に、必ずご自身の目で（あるいはAIの目を借りて）安全性をチェックしてください。

GeminiやChatGPTを開き、上記のコードを貼り付けた上で、以下の質問を投げかけてみてください。

AIへの指示（プロンプト例）：
「このHTMLコードをセキュリティの観点から監査してください。特に、ユーザーがアップロードしたPDFファイルの内容を、外部のサーバーやURLへ送信するような悪意あるコードが含まれていないか、厳しくチェックしてください」

AIはコードの中身を一行ずつ読み解き、「外部送信の記述がないこと」「処理がすべてブラウザ内で完結していること」を客観的に証明してくれます。

これこそが、中身の見えないフリーソフトにはできない、「透明なツール」ならではの安心感です。

【企業向け】Googleサイトで社内共有する運用術

個人のPCで使う分には上記のファイルを保存するだけで十分ですが、チーム全員で使いたい場合、一人ひとりにファイルを配るのは非効率です。

もし御社が「Google Workspace（有料版）」を利用しているなら、「Google サイト」を使って社内限定のWebツールとして公開するのが最もスマートです。
手順は以下の3ステップだけです。

Googleサイトを新規作成し、右側メニューから「埋め込む」を選択.
「埋め込みコード」のタブを選び、上記のソースコードをすべて貼り付ける.
「公開」ボタンを押し、閲覧範囲を「社内（組織内）のみ」に設定してURLをメンバーに共有.

これで、社内メンバーだけがアクセスできる安全なPDFツールページの完成です。
操作は直感的にできるよう設計しているので、マニュアル作成も不要かと思います。

まとめ：デジタルツールは「買う」から「作る」時代へ

AIの進化により、ちょっとした業務ツールなら、現場レベルで内製化できる時代になりました。
「インストールが面倒」「セキュリティが不安」という理由で業務が滞るくらいなら、サクッと自作して解決する。それがこれからの実務家のスタイルだと私は考えます。

ぜひ、今回のコードを活用し、快適な業務環境を手に入れてください。

【ブログ読者様限定】本部長直通特別相談窓口

「マニュアルではなく、実務家による具体的な解決策を知りたい」という方は、専用窓口よりご相談ください。
▶ 優先レーン・特別相談窓口はこちら

この記事の監修・執筆

(株)FIJ 営業本部長 / 岩井義浩

宅地建物取引士行政書士試験合格 2級FP技能士

元上場ノンバンク支店長（金融歴5年）、不動産サブリース実務15年。
「感情論ではなく、数字と法律でオーナーを守る」が信条のアナライザー。
年間200件以上の店舗査定 and 撤退相談を行い、AIを活用した適正な出口戦略を提案している。

▶ X (旧Twitter) でボヤキ中

店舗不動産の実務ログ

2026年1月17日土曜日

【インストール不要】情報漏洩を防ぐ「透明なPDF整理ツール」全コード公開｜Gemini 3で内製化する

1. ブラックボックスを使うな、「透明な道具」を使え

2. 【全コード公開】PDF結合・抽出ツール

【初心者向け】ツールの起動手順

【重要】自分で安全性を確認する（監査）

【企業向け】Googleサイトで社内共有する運用術

まとめ：デジタルツールは「買う」から「作る」時代へ

0 件のコメント:

コメントを投稿

飲食店経営を劇的に変える「AI活用」実務ログ総集編。契約リスクから集客まで