☆Yuus Memo☆
非エンジニアの方でも業務を効率化できるプログラムを紹介します!
Laravel

【Laravel】ファイルエクスプローラーを作ろう!!

皆さんこんにちは!!
今日は、WEBサーバー上に「ファイルエクスプローラー」を作っていきたいと思います。
作ると言っても、「elFinder」というサーバ上のフォルダやファイルを簡単に操作するためのファイルマネージャ用のライブラリをLaravel6.*の環境に組み込んでいくだけですので、お手軽です。

elFinderとは

elFinderの特徴
  • WindowsのエクスプローラやMacのFinderのような操作感
  • 日本語化が、簡単にできる
  • ドラッグ & ドロップでファイルの追加(アップロード)ができる
  • フォルダをドロップするとフォルダごと一式アップロードできる
  • サーバ上のテキストファイルの簡易編集ができる
  • ファイルやフォルダをZIPで圧縮してダウンロードできたりサーバ上で解凍できる
  • 他のファイルマネージャのライブラリに比べて外観が今風でおしゃれ
  • DropboxやGoogle Driveなどとの連携が可能
  • TinyMCEやCKEditorとの連携もできる

ここまで上げただけでかなりの高機能であることが分かるかと思います!

グループウェアで、ファイル共有機能があるものがありますが、あのイメージで更に高機能なものを、Laravelアプリケーションに組み込むことができます!!

Laravelのプロジェクト作成

それでは初めていきましょう!!
「elFinder」はライブラリの性質上、デフォルトではAuth機能が必須になっています。
今回、Auth機能は「Laravel/ui」を使用して、サクッと作ります。

まず、ターミナルでWebのルートディレクトリへ移動して、プロジェクトを作成して下さい。

※今回、私は「Laravel6」で作成しましたが、7以降のバージョンでも動作します。
Laravel/uiの導入などが少し、変わるので分からない場合、コメントください。

composer create-project --prefer-dist laravel/laravel finder-sample "6.*"

その後、ターミナルで次の順番でコマンドを流して下さい。
※ 「finder-sample」は、プロジェクト名なので適宜読み替えて下さい。

cd finder-sample
composer require laravel/ui:^1.2 --dev
php artisan ui vue --auth
php artisan migrate
npm install
npm run dev
php artisan serve

これで「http://localhost:8000」へアクセスして、次のような画面が出れば、Auth機能は完成です。

画面右上に「LOGIN」と「REGISTER」が出来ていますね!!
適当にユーザー登録、ログインを行ってみて下さい。

elFinderをLaravelへインストール

それでは、本題の「elFinder」をLaravelへ入れていきます。
「elFinder」はComposerでライブラリーを公開しているので、とっても簡単に組み込めます。

ターミナルで次のように、実行して下さい。

composer require barryvdh/laravel-elfinder
php artisan elfinder:publish
php artisan vendor:publish --provider='Barryvdh\Elfinder\ElfinderServiceProvider' --tag=config
php artisan vendor:publish --provider='Barryvdh\Elfinder\ElfinderServiceProvider' --tag=views

#今回のサンプルでは、下記を共有ディレクトリにする
mkdir public/packages/barryvdh/elfinder/files 

そして、「config/app.php」「provider」配列へ下記を追記して下さい。

'providers' => [

        /*
         * Laravel Framework Service Providers...
         */
// .....中略
Barryvdh\Elfinder\ElfinderServiceProvider::class,
],

これでインストールから、「Public」ディレクトリまで「elFinder」の必要なファイルをコピーする事ができました。
ローカルサーバーを立ち上げて、「http://localhost:8000/elfinder」へアクセスしてみて下さい。
次のような画面が開きます。

エラーメッセージが出ますが、ディスクの設定を行っていないので出ているだけです。

LaravelへelFinderのディスク設定

全章でエラーが出ていたので、ディスクを設定したいと思います。
「config/filesystems.php」を開き次の箇所へ追記して下さい。

ディスクの設定は下記の書籍に詳しく解説があります。
とっても分かりやすいので、是非読んでみて下さい!!

'disks' => [

        'local' => [
            'driver' => 'local',
            'root' => storage_path('app'),
        ],
// 中略 下記を追加
        'disks' => [
            'my-disk',
            'my-disk' => [
                'driver' => 'local',
                storage_path('elfinder/files'),
                'url' => env('APP_URL').'/files',
            ]
        ],

    ],

再度、サーバーを立ち上げてアクセスすると「files」の中へアクセスした状態でエクスプローラーが開きます。

ディレクトリを作成したり、ファイルを編集したりしてみて下さい!!
サーバ上の「files」ディレクトリ以下が、変更されていると思います。

まとめ

お疲れ様でした!!
今回は、LaravelでelFinderを導入してみましたが、PHPだけでなくRubyやPythonなどの環境でも使えます。

近年は、OneDriveやGoogleDriveなどクラウドストレージを企業でも使用することが多くなってきましたが、アプリケーションレベルで、共有フォルダーを利用できるelFinderは、それらとは違った活用ができます。
使ってみる価値があるライブラリーなので、一度目を通して下さい!


ちょっと日本語の解説が少なく、癖がありますがとっても便利で使い勝手が良いライブラリーなので、是非皆さんも使ってみて下さい!!


コメントを残す