WordPressを使って画像やファイルなどの保管(ファイルサーバー)サイトを作ろう

撮りためた写真やファイルの整理どうしてますか??パソコンの中にどんどん溜めてる、外付けハードディスクに保管してる、メディアカードに保管してる、ディスクに焼いて保管してる・・・などなどいろいろ方法がありますね。

スマホやデジカメで撮影した動画や画像、仕事上で大切なファイルなどどうやって保存してますか?データを保存する方法はいろいろありますね。最近では大容量のハードディスクやメモリーカードも安価に買えるようになりました。でもそのデータを読みだそうとしたら・・・あれ?ってことありませんか??

でも書かせていただいている通り、ハードディスクはディスク故障の心配があるし、メディアカードはデータが蒸発してしまうこともあるし、ディスクは傷がついたり経年劣化で読み込めなくなったりとどれをとっても「これが絶対安全!!」という方法はありません。少なくとも重要なものは2~3か所に保管しておかないと消失してしまう可能性があります。

ただ2~3か所に保存するには簡単にアクセスできて、簡単にダウンロードなどができて、簡単に移動・削除ができる、しかもダウンロードしたものはコピーとして保存されるというのが重要。特に操作に慣れていない人がこうしたデータを扱うときには誤って移動してしまって元データがいなくなる・・・なんてこともあります。

これらを包括しつつ、さらにどこからでもアクセスできたら最高!!ということで思いつくのがオンラインストレージサービス。Googleドライブなどが有名どころですね。でも容量に従って毎月費用が発生するし、無料版は画像が勝手に圧縮されたり公開されてしまったりするし・・・自身でコントロールしてるわけではないのでなかなか使いにくいものです。

そこで目をつけたのがサイトを公開するために借りているサーバー、いわゆるレンタルサーバーというやつです。最近のレンタルサーバーは安いものでも結構大容量、とても1サイトでは使いきれないですよね?

今回はレンタルサーバーの空き容量を使って、本来公開するサイトを構築するためのツールであるWordpressを使って、自分だけの、自分ですべてコントロールできるオンラインストレージを作ってみたいと思います。プライベートなので「このサイトです」って全容の紹介はできませんが、いくつかスクリーンショットを載せておきます

今回作ったサイトのスクリーンショットいろいろ

  1. ログイン画面(サイトにアクセスするととにかくこの画面が表示される)
  2. ログインするとこの画面が表示される(フロントエンド)
  3. ボタンをクリックして画像のアップロードや画像の一覧を見ることができます

  4. 画像のアップロード画面(通常のバックエンドのメディアアップローダーです)
  5. ギャラリーの一覧
  6. 画像にカテゴリーを設けてWordpress標準のギャラリーを使うことで自動的にサムネイルの一覧ができます

  7. 画像スライダー
  8. おまけですけどサムネイルをクリックするとこんな感じの拡大表示&スライダー表示するようにしてみました

どうですか?なんだかおもしろそう!!と思いませんか??それでは早速製作を進めていきましょう!!

※毎度のごとく作りながらの紹介になります。今回も文字ばかりで長~い記事になりますからブックマークしてゆっくり読むようにしてくださいね。

スポンサーリンク



WordPressでプライベートなオンラインストレージを作る方法

オンラインストレージに必要な要件

オンラインストレージに必要な機能は何か?を列記してみます

  1. どこからでもインターネット経由でアクセスできる
  2. 登録ユーザーでなければ操作できない
  3. 登録ユーザーでなければURLを入力してアクセスしても中身は見えない
  4. ファイルのアップロードができる
  5. ファイルの検索・ダウンロードができる

こんなところでしょうか?あとは容量の問題ですが、これは契約しているレンタルサーバーによるものなのでより大容量なスペースが必要ならそういったサーバーを借りるしかないでしょう。

3の要件が一番難しそうですね(これを行ったから前述したように作成したオンラインストレージのURLを紹介できてます)。

これを満たすための方法を順を追ってこれから紹介していきますね。

サブドメインまたはサブディレクトリを作りWordpressをインストールする

まずはWordpressをインストールしないと始まりません。インストールする場所はサブドメインでもサブディレクトリでもいいとは思いますが、プライベートコンテンツだけのサイト?ですからメインサイトの一部として検索エンジンから認識されるサブディレクトよりも、別サイトと認識されるサブドメインで運用、または専用にドメインを登録したほうがいいでしょう(サブドメインは大抵のサーバーでは無料で作成できます)。

間違ってインストールすることがないようにするために、サブドメインを作ったらサーバーで提供されている自動インストールサービスではなく手動でインストールするようにしましょう(この辺は簡単に書かせていただきます)。

  1. WordPressの日本語バージョンを入手する
  2. 解凍したファイルの中身をサブドメインの公開フォルダの中へアップロードする
  3. データベースが複数持てる場合には新規のデータベースを作成する
  4. 「wp-config-sample.php」を「wp-config.php」へリネームし、データベースの接続情報を元にの編集をしてサブドメインの公開フォルダへアップロードする
  5. サブドメインのURLへアクセスし、必要事項を入力してインストールを完了する

ざっくりした手動インストール手順です。この手順だと何も重複するファイルはないのでFTPクライアントソフトでアップロードしたときに「上書きしますか?」というメッセージは出ないはず。もしも出たら間違った場所(メインサイトの公開フォルダ内など)へアップロードしようとしている可能性がありますから「はい」とする前に一旦「いいえ」にして確認するようにしてください。

もしも3で新規のデータベースが作成できない場合は以下のようにします。

  1. 1~2の手順は同じです
  2. メインサイトの「wp-config.php」をパソコンにダウンロードする
  3. 2のファイルを開き、中ほどにある「$table_prefix = ‘〇〇〇’;」の〇〇〇の部分を変更する
  4. 3のファイルをサブドメインの公開フォルダの中へアップロードする
  5. サブドメインのURLへアクセスし、必要事項を入力してインストールを完了する

ここで接頭辞(table_prefix)の値そのままでサブドメインの公開フォルダへアップロードしたりすると最悪の場合メインサイトのすべてのデータがまっさらになってしまいますから神経を研ぎ澄まして作業するようにしてください

インストールが終わってログインしたらブックマーク(お気に入り登録)しておきましょう。これでWordpressの準備は完了です。

オンラインストレージサイトの基本設定

インストール時にも聞かれる項目ですが、「設定」→「表示設定」をクリックして「検索エンジンがサイトをインデックスしないようにする」にチェックが入った状態かを確認しましょう(検索エンジンに登録してもらう必要はありませんからね)。

基本的にバックエンド(管理画面)でのみ作業をするサイトですからテーマは何でもかまいません(インストールしたままで大丈夫です)

「投稿」も「固定ページ」も作ることがありませんからインストールしっぱなしでもいいですし、気になるようなら空の固定ページを作ってフロントページにし、サイドバーウィジェットなどもすべて削除すればまっさらなサイトになります。

余分な画像が生成されないようにする

WordPressはいろいろな場所で最適なサイズの画像が表示できるよう、メディアアップローダーを使用して画像をアップロードすると複数のサイズの画像が自動生成されるようになっています。

今回はオンラインストレージですからこうした画像は必要ないので自動生成をストップさせましょう。

  • ダッシュボードから「設定」→「メディア」をクリックします
  • いろいろな画像サイズの設定がありますのですべて「0(ゼロ)」にして更新します
  • 簡単ですけどこれでWordpressの標準機能で自動生成される画像が一切なくなり、オリジナルな画像だけが保存されるようになります(余談ですけどこの作業だけで長々と1記事作っている人もたくさんいます・・・)。

    更に完璧にするため

    「Stop Generating Image Sizes」はサイト内でメディアアップロードする際に生成される画像サイズのリストをすべて表示し、チェックを外していくことで画像が生成されないようにするプラグインです

    というプラグインをインストールします。これはテーマや他のプラグインが都合のいいように生成させるいろいろな画像サイズを検知でき、チェックを入れるだけで生成されないようにする便利なプラグインです。使い方は上の紹介記事で詳しく解説してます。

    プラグインを入れたら画像を何か1つアップロードしてから確認してみてください。勝手に(自動で)生成されてしまうサイズが登場したら生成しないようにしておきましょう。

    どんな画像が作られてるのかの確認は、Wordpressのメディアアップローダーを通じてアップロードした画像が格納されている「サーバーの中」→「wp-content」→「uploads」にある画像ファイルを確認して1つの画像名に対して複数の画像が作られていないかを確認すれば大丈夫です。

    WordPressのインストール時にFTPを使っている場合にはそれを使って確認、そうでない場合は

    「File Manager」プラグインを使うと、Wordpressの管理画面で操作しているのにも関わらず、パソコンのエクスプローラーやFTPソフトのようにファイルの操作、移動、コピー、アップロード、ダウンロードができるようになります。

    などのプラグインを使って確認するといいでしょう

    ※ちなみに今回デフォルトで使用している「Twentyseventeen」テーマでは別の画像サイズがいくつか生成されるようになっていますから全部チェックを入れて生成されないようにしました

    ログインしないと何もできないようにする

    サイトの性質上フロントエンド(閲覧画面)はすべてログインしないと見えない状態にする必要があります。同時にバックエンド(管理画面)へ直接アクセスされたり、管理画面のログインページへ直接アクセスされたりしても跳ね返すようにする必要があります。

    これも自身で何とかするよりもプラグインを使った方が簡単です。おすすめは

    【subway】はすべてのページを非公開(登録ユーザーがログインしないと閲覧できないようにする)にしたり、一部のページだけを閲覧可能にしてあとはログインユーザーのみ閲覧可能にするといった完全な会員制サイトを構築するためのプラグインです。

    実際に私がサーバー内で運用している「http://phbk.momosiri.info」でトップページへアクセスしたりログインページURLを入力したり、管理画面のURLを入力したりしてアクセスしてみてください。

    ・・・ね!全部フロントエンドのログイン画面に飛ばされますよね?

    このプラグインで設定はとても簡単

    1. 固定ページを1つ作り、[subway_login]というショートコードを挿入して公開します
    2. プラグインの設定画面を開きます(「設定」→「Subway」)
    3. 「ログインページ」を1で作成されたものに指定します
    4. 「リダイレクトの種類」を「デフォルト動作」にします

    たったこれだけでサイトのプライベート化が完了します

    このプラグインの設定が完了すると前述したとおり何が何でもフロントエンドのログイン画面が開きますので、そのフォームからログインした後上部の管理バーからバックエンド(管理画面)へ移動して作業します。

    ※ユーザーの設定によっては「サイトを見るときにツールバーを表示する」にチェックが入っていない場合があります。このプラグインを導入する前にチェックが入っているかを確認するようにしましょう。もしもログイン後管理バーが表示されず何もできなくなってしまった場合にはFTPを使ってこのプラグインフォルダを「xxsubway」などにリネームすればプラグインの動作が一旦停止しますのでユーザー設定を見直してください。その後プラグインのフォルダ名を元に戻してプラグインの有効化を行えば正常に動作するようになります。

    アップロードした画像やファイルをダウンロードできるようにする

    ここまででもう十分にファイル保管庫としての役割を果たすサイトが完成しました。残るは「サイトから必要な画像をパソコンにダウンロードできる」機能です。

    これも便利なプラグインを使います(プラグインって本当に便利ですネ)

    個人使用でおすすめは

    【WordPress Media Select Bulk Downloader】は画像の一覧を表示したところでダウンロードするファイルを選択してあと何回かクリックするだけで簡単にメディアにある画像がダウンロードできるプラグインです

    です。詳しくはリンク先のページで紹介していますがとにかく簡単にダウンロードができるようになります。

    企業で使ったりする場合には誰がダウンロード用のファイルを作ったのか?といった情報が必要ですよね?そんなときには

    【Bulk Attachment Download】はいつも使っているメディアメニューの画像を見ながら1枚または複数の画像を簡単にダウンロードできるようになる便利なプラグインです。

    のプラグインを使って少しカスタマイズすることで実装できます。

    ただし、「誰がダウンロードしたのか?」までは分からないので、リンク先ページ末で紹介している方法などで実装する必要があります。


    以上で基本的なデータストレージサイトの制作は完了です。案外簡単にできるものですよね?

    ここで使ったプラグインなどをチョイスし直したりすることで今既に運用している社内サイトなどに機能追加なんてこともできそうですね。

    さて、ここからはおまけ情報としてこの機能を使う上で「こんなことがありそうだなぁ」という事柄について解決策などを紹介していきます。サイト作りをする上では作成よりもこうした情報の方が役に立つのかもしれません・・・。

    おまけ 大容量のファイルを扱う方法

    ストレージの使い方によっては大きなファイルを扱ったり、すごい数のファイルをどんどんアップロードしたい・・なんてケースもあると思います。特に複数の人で管理する場合には「エラーが出てアップロードできない」なんて言われてしまうこともあるかもしれません。

    単純にアップロードできるファイルの容量を増やすことでこの問題は解消できます。手順等は以下の通りです。

    今回作ったサイトのディレクトリにある「.htaccess」ファイルを編集します(一番下に追記すれば大丈夫です)。レンタルサーバー内で直接編集できる機能がある場合はそこで修正した方がいいと思います(ダウンロードして編集した後アップロード・・という手順だと間違いが起こる可能性がありますから)。

    追記するのは以下のコードです(既に記述がある場合には変更等を行います)

    php_value memory_limit 100M
    php_value post_max_size 50M
    php_value upload_max_filesize 30M

    例ではアップロードできるファイルの大きさを「php_value upload_max_filesize」で「30メガバイト」にしています。これを適宜変更することでサイズを自由に設定できます。

    が、注意点があります。それは↑の3行のコードそれぞれのサイズの関係

    upload_max_filesizepost_max_sizememory_limit

    このようになっていなければなりません。簡単に解説すると、画像をアップロードする容量よりもそのファイルが表示(添付)される可能性がある投稿の容量の方が多く、かつその投稿を表示させるために使用するメモリの容量がそれよりも大きくなければならないという半ば当たり前の設定ということになります。

    ・・・ということは、使用できるメモリの限界量が低ければそれに伴って他の値も低くする必要が出てくるので、使っているレンタルサーバーの性能によってはアップロードできる画像の容量に制限があるということになりますね。

    おまけ 古い画像やファイルをアップロードして認識させる方法

    WordPressではメディアアップローダーを使ってアップロードしていない画像はメディアの中で扱われないようになっています(要するに一覧に表示されない)。

    これも便利なプラグインで簡単に解消できます。おすすめは「Media from FTP」というプラグインです。これはFTPなどでアップロードしたフォルダをメディア内のフォルダとして認識させることができるプラグインです。詳細はリンク先の公式ページを見てくださいね。

    さいごに

    いかがでしたか?一からファイルのアップ/ダウンロードができ、それらが管理できる機能を構築するのは大変ですが、Wordpressの使い方をちょっと工夫すれば、基本機能と数個のプラグインで簡単に実現できますね。

    懸念事項としては冒頭でも書いた通り、「こうしたからデータはもう大丈夫」なんてことはないということです。今回紹介した方法もサーバーに障害が起きて復旧できなければデータは無になってしまいます。

    そうならないためにも今回の方法を唯一とせず、いろいろな方法でデータの保存をするようにしましょう。

    長い文章を読んでいただきありがとうございました。以上Wordpressで公開しないサイトを作る方法を応用して作るデータストレージの作り方でした。お役に立てれば幸いです。

    実際に使用したテーマやプラグインを全部この記事で紹介しているとより長くボケた記事になってしまうので、

    Wordpressは何も公開サイトを作るだけのものではありません。今回はデジカメなどで撮影した画像の管理が楽になるサイト作りの例で使用したプラグインやテーマを一挙公開します。

    で一挙に紹介していますから参考程度に見てみてください。

    Wordpressの本

    Amazonの人気商品楽天市場の人気商品
    CS Shop
    【送料無料】 WordPressレッスンブック HTML5 & CSS3準拠 スマートフォン・タブレット対応 / エ・ビスコム・テック・ラボ 【本】

    【送料無料】 WordPressレッスンブック HTML5 & CSS3準拠 スマートフォン・タブレット対応 / エ・ビスコム・テック・ラボ 【本】

    3,024 円 (税込) 送料込
    基本情報ジャンル建築・理工フォーマット本出版社ソシム発売日2014年06月ISBN9784883379248発売国日本サイズ・ページ319p 24×19cm関連キーワード 9784883379248 【FS_708-2】出荷目安の詳細はこちら>>楽天市場内検索 『在庫あり』表記について 
    【中古】 WordPressレッスンブック ステップバイステップ形式でマスターできる / エビスコム / ソシム [単行本]【メール便送料無料】【..

    【中古】 WordPressレッスンブック ステップバイステップ形式でマスターできる / エビスコム / ソシム [単行本]【メール便送料無料】【..

    323 円 (税込)
    著者:エビスコム出版社:ソシムサイズ:単行本ISBN-10:4883377245ISBN-13:9784883377244■通常24時間以内に発送可能です。午後1時までのご注文は通常当日出荷。■メール便は、1冊から送料無料です。※宅配便の場合、2,500円以上送料無料です。※あす楽ご希望の方は、宅配便を..
    楽天ウェブサービスセンター CS Shop
    トップへ戻る