概要

Responsive Filemanager 9 は TinyMCE 向けの高機能ファイル管理プラグインで、ドラッグ＆ドロップ対応の UI と複数画像一括挿入機能を提供します。本記事ではインストール手順からセキュアな運用設定まで網羅的に解説します。

提供機能

• 画像・PDF・動画など複数ファイルのアップロード／ダウンロード
• リアルタイムサムネイル生成（JPEG／PNG／WebP 対応）
• ファイル／フォルダのリネーム・削除・移動
• ユーザーごとの独立ディレクトリ自動生成
• 日本語フォルダ名対応

ディレクトリ構成

project-root/
 ├─ assets/
 │   ├─ filemanager/          ← プラグイン本体
 │   ├─ uploads/              ← 実ファイル格納先
 │   └─ thumbs/               ← 自動生成サムネイル
 └─ js/
     └─ tinymce/
         └─ plugins/
             └─ responsivefilemanager/

TinyMCE 統合手順

1. プラグイン配置
   responsivefilemanager フォルダを tinymce/plugins/ にコピー
2. 初期化スクリプトに追加
   

   tinymce.init({
     selector: '#editor',
     language: 'ja',
     plugins: 'image link responsivefilemanager',
     toolbar: 'undo redo | bold italic | responsivefilemanager image',
     relative_urls: false,
     remove_script_host: false,
     external_filemanager_path: '/assets/filemanager/',
     filemanager_title: 'ファイル管理',
     external_plugins: {
       filemanager: '/assets/filemanager/plugin.min.js'
     }
   });
   

セキュアな設定（config.php）

<?php
// プロトコル自動判定
$base_url = (isset($_SERVER['HTTPS']) ? 'https' : 'http') . '://' . $_SERVER['HTTP_HOST'];

// ユーザー別ディレクトリ
session_start();
$userDir = isset($_SESSION['user_id']) ? $_SESSION['user_id'] : 'guest';
$upload_dir = '/assets/uploads/' . $userDir . '/';
$thumbs_base_path = '/assets/thumbs/' . $userDir . '/';

// アップロード制限
$MaxSizeUpload = 5 * 1024 * 1024; // 5MB
$ext_img = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'];
$ext_file = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'];
$ext_video = ['mp4', 'webm', 'ogg'];
$ext_music = ['mp3', 'wav', 'flac'];

日本語環境調整

1. MIME タイプ判定の修正

PHP 8 以降で非推奨となった関数を置換

// include/utils.php
function get_file_mime($file) {
    $finfo = finfo_open(FILEINFO_MIME_TYPE);
    $mime  = finfo_file($finfo, $file);
    finfo_close($finfo);
    return $mime;
}

2. 日本語フォルダ名対応

// include/utils.php
function sanitize_filename($str, $transliteration = false) {
    if ($transliteration) {
        $str = transliterator_transliterate('Any-Latin; Latin-ASCII;', $str);
    }
    return preg_replace('/[^\p{L}\p{N}_\-\.]/u', '_', $str);
}

3. ローカル jQuery 利用

<script src="/assets/filemanager/js/jquery-3.6.0.min.js"></script>
<script src="/assets/filemanager/js/jquery-ui-1.13.1.min.js"></script>

実装例：ユーザー別アップロード先

// config.php
function getUserUploadDir() {
    session_start();
    if (!isset($_SESSION['user_id'])) {
        die('ログインが必要です');
    }
    $userId = $_SESSION['user_id'];
    $path = $_SERVER['DOCUMENT_ROOT'] . "/assets/uploads/{$userId}";
    if (!is_dir($path)) {
        mkdir($path, 0755, true);
        mkdir($path . '/thumbs', 0755, true);
    }
    return "/assets/uploads/{$userId}/";
}

$upload_dir = getUserUploadDir();
$thumbs_base_path = str_replace('/uploads/', '/uploads/', $upload_dir) . 'thumbs/';

トラブルシューティング

CDN 連携（任意）

CloudFront などを利用する場合、config.php の $base_url を CDN のドメインに変更します。

$base_url = 'https://cdn.example.com';