Webサイトにファイルエクスプローラーを実装。AgWORKSのエクスプローラー風ファイル管理画面開発

➡︎【事務局運営ショーケース｜事務局のWebサイト、こんなことまでできます】

WebサイトやWebシステムで、多数のファイルを扱う場合、

• ファイルを一覧で見やすく表示したい
• フォルダ構成をそのままWeb上で見せたい
• PCのエクスプローラーのような画面にしたい
• ファイルを検索・並び替えできるようにしたい
• ユーザー自身がファイルをアップロード・更新できるようにしたい

といった要望が出てくることがあります。

単純にファイルへのリンクを並べるだけなら簡単ですが、ファイル数が増えたり、利用者が多くなったりすると、それだけでは使いにくくなります。

そこで、Webサイト上に「ファイルエクスプローラー」のような画面を作るという方法があります。

AgWORKSでは、WebサイトやWebシステムに合わせて、エクスプローラー風のファイル管理画面を開発できます。

Web上で使える「ファイルエクスプローラー」

例えば、次のような画面です。

左側にフォルダやディレクトリの構成を表示し、右側に選択したフォルダ内のファイルを表示します。

PCのファイルエクスプローラーに近い感覚で、Web上のファイルを探したり、必要なファイルを開いたりできます。

Webサイトに合わせてデザインや操作方法を調整できるため、単なるファイル一覧ではなく、そのサイトやシステム専用のファイル管理画面として構築することも可能です。

よくあるファイル管理の悩み

Webサイトでファイルを扱う場合、次のような悩みがあります。

ファイルへのリンクを並べるだけでは分かりにくい

PDFやExcel、画像などのファイルが増えてくると、リンクを一覧表示するだけでは、どこに何があるのか分かりにくくなります。

フォルダ構成を表示できれば、ファイルの分類や位置関係も分かりやすくなります。

管理画面を利用者に触らせたくない

WordPressなどの管理画面には、ファイルをアップロード・管理する機能があります。

しかし、Webサイトを見る人や会員、取引先などに管理画面を操作してもらうのは適切ではない場合があります。

そこで、必要な操作だけを切り出した専用画面を作ることができます。

検索や並び替えをしたい

ファイル数が増えると、

「ファイル名から探したい」
「更新日の新しい順に並べたい」
「特定の種類のファイルだけ表示したい」

といった機能も必要になります。

こうした機能も、利用方法に合わせて設計できます。

「エクスプローラー風」の画面を開発できます

AgWORKSでは、WebサイトやWebシステムに合わせて、ファイル管理のためのUIを開発できます。

例えば、

• フォルダ・ディレクトリの表示
• フォルダを選択してファイルを表示
• ファイル名による検索
• ファイルの並び替え
• ファイルのアップロード
• ファイルの更新・差し替え
• ファイルのダウンロード
• ファイルの削除
• 必要な操作だけを表示

といった機能を組み合わせることができます。
すべての機能を入れる必要はありません。

「閲覧だけできればよい」
「管理者だけアップロードできればよい」
「会員は自分の資料だけ見られるようにしたい」

など、実際の運用に合わせて必要な機能を設計します。

Webサイトだけでなく、Webシステムにも組み込めます

このようなファイル管理画面は、単独のページとして作るだけでなく、既存のWebサイトやWebシステムに組み込むこともできます。

例えば、

• WordPressサイト
• 会員サイト
• 社内向けシステム
• 業務システム
• マニュアル・資料配布サイト
• プロジェクトごとのファイル管理
• 関係者向けの資料共有

などです。

特に、「管理する人」と「ファイルを見る人」が違う場合には、専用の画面を作るメリットがあります。

ファイル管理の仕組みは、表示画面だけではありません

ファイルエクスプローラーのような画面を作る場合、見た目だけを作ればよいわけではありません。

実際には、

「誰がファイルを登録するのか」
「誰が見られるのか」
「誰が削除できるのか」
「フォルダは誰が作るのか」
「同じ名前のファイルが登録されたらどうするのか」
「ファイルを差し替えた場合、古いファイルはどうするのか」

など、運用上のルールも考える必要があります。

そのためAgWORKSでは、単純なUI制作としてではなく、Webサイトや業務の運用方法に合わせたファイル管理の仕組みとして考えることができます。

既存のサービスでは合わない場合は、専用開発という方法もあります

ファイル管理には、既存のサービスやプラグインを利用する方法もあります。

ただ、

「デザインをWebサイトに合わせたい」
「必要な機能だけにしたい」
「ユーザーごとに見られるファイルを変えたい」
「既存の会員システムと連携したい」
「WordPressの管理画面とは別の操作画面にしたい」

といった要件になると、既存サービスだけでは対応しにくいことがあります。
その場合は、必要な機能を整理して、専用の仕組みとして開発することができます。

「こういうファイル管理ができる？」という段階からご相談ください

ファイルをWeb上で管理したいけれど、

「エクスプローラーのような画面にできる？」
「WordPressに組み込める？」
「会員によって表示するファイルを変えられる？」
「今使っているシステムと連携できる？」
「そもそも、どういう仕組みにすればよいか分からない」

という段階でも構いません。

AgWORKSは、Webサイトを作るだけではなく、業務や運営方法に合わせて、必要な仕組みを設計・開発します。

実際の仕組みや管理画面をご覧いただきながら、「自分たちの業務ならどうできるか」を一緒に考えます。

関連するショーケース

➡︎【事務局運営ショーケース｜事務局のWebサイト、こんなことまでできます】
➡︎【会員・関係者向けファイル管理｜資料を安全に管理・公開する仕組み】
➡︎【Webでのファイル管理を業務改善につなげる方法についてはこちら】