レンタルサーバーに写真一覧ページを作って公開する手順

レンタルサーバーを使うと、「手元にある写真画像を一覧表示する Webページを作って公開する」といったこともできます。

ここではその手順について説明します。

※ レンタルサーバーにはいくつか種類がありますが、ここでは「共用サーバー」を使った場合を説明します。

1. どのような人に向けた内容であるか
2. 前提
3. シンプルな例
4. JavaScriptのライブラリを使って画像を表示する例
5. Webページのパスワード制限
6. まとめ

1. どのような人に向けた内容であるか

レンタルサーバーで何ができるか知りたい人
レンタルサーバーを借りているが、何をしてよいのか分からない人
レンタルサーバーで簡単な Webページを作成する手順を知りたい人
写真画像を、遠くに住んでいる誰かに見せたい人（「特定の人だけに」という場合も含む）

2. 前提

HTML, CSS, JavaScript などの詳細な説明はしていません。まずは真似してみて、分からないところだけ個別に調べた方が早く覚えられると思います。

但し、全く分からない方は、基礎的なところだけは先に覚えておくことをお勧めします。その際に使えるコンテンツも用意したいと思っています。

3. シンプルな例

まず、写真画像を並べた以下のような Webページを作る例を説明します。

用意するファイルは以下です。

index.html
画像ファイル（今回は以下の3つとします）
- yama1.jpg
- yama2.jpg
- yama3.jpg

画像ファイル以外は、index.html しかありません。

この index.html は以下のように記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge"  >
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>写真一覧</title>
</head>
<body>
  <h1>写真一覧</h1>
  <main>
    <a href="./yama1.jpg" title="山その1"><img src="./yama1.jpg" alt="山その1" width="300"></a>
    <a href="./yama2.jpg" title="山その2"><img src="./yama2.jpg" alt="山その2" width="300"></a>
    <a href="./yama3.jpg" title="山その3"><img src="./yama3.jpg" alt="山その3" width="300"></a>
  </main>
</body>
</html>

画像の数だけ以下の部分を追加します。

<a href="./yama1.jpg" title="山その1"><img src="./yama1.jpg" alt="山その1" width="300"></a>

それぞれの属性は以下を参考にしてください。

タグと属性	説明
a タグの href 属性	画像ファイルへのパス
a タグの title 属性	画像ファイルのタイトル
img タグの src 属性	画像ファイルへのパス
img タグの alc 属性	画像ファイルを表す言葉（タイトルでよいです）
img タグの width 属性	画像ファイルを表示する幅（ホントは、heightも指定した方が良い）

FTPクライアントソフト（FileZillaなど）を使って、これらのファイルを同じ階層にアップロードします。今回の Webページ用に新たにディレクトリを作り、そこにアップロードするのがよいと思います。

ここでは、photos というディレクトリを作り、そこにアップロードします。

では、Webブラウザからこのディレクトリにアクセスしてみましょう。

すると、最初にも載せた画面が表示されるはずです。

写真画像が並んで表示されています。

どれか1つクリックすると、その画像だけが表示されます。

Webブラウザのアドレスバーを見ると、この画像ファイルがそのまま表示されていることが分かります。これは、画面が遷移したということです。

4. JavaScriptのライブラリを使って画像を表示する例

先ほどの場合、画像を拡大表示した後に元の画像一覧ページに戻るには、再度アドレスバーに元のURLを入力してアクセスするか、Webブラウザの「戻る」を使うことになります。この操作はちょっと面倒です。

ですので、今後は画像をクリックしたら画面の遷移を行うのではなく、そのまま画像が前面に拡大表示されるようにしてみましょう。そのために、JavaScriptのライブラリを使います。

画像を表示するのに使える JavaScript のライブラリはいろいろあるのですが、今回は Lightbox を使います。

用意するファイルは以下となります。

index.html
画像ファイル（今回は以下の3つとします）
- yama1.jpg
- yama2.jpg
- yama3.jpg
Lightboxのファイル（複数あります）

先ほどと比べて、Lightbox のファイルが増えただけです。

`index.html`

index.html は以下のように記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" >
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>写真一覧</title>
  <link rel="stylesheet" href="./lightbox2/css/lightbox.min.css" type="text/css" media="screen" />
</head>
<body>
  <h1>写真一覧</h1>
  <main>
    <a href="./yama1.jpg" data-lightbox="yama" title="山その1"><img src="./yama1.jpg" alt="山その1" width="300"></a>
    <a href="./yama2.jpg" data-lightbox="yama" title="山その2"><img src="./yama2.jpg" alt="山その2" width="300"></a>
    <a href="./yama3.jpg" data-lightbox="yama" title="山その3"><img src="./yama3.jpg" alt="山その3" width="300"></a>
  </main>
  <script type="text/javascript" src="./lightbox2/js/lightbox-plus-jquery.min.js"></script>
</body>
</html>

以下の2箇所でLightbox のファイルを読み込んでいます。

CSS ファイル

<link rel="stylesheet" href="./lightbox2/css/lightbox.min.css" type="text/css" media="screen" />

JavaScript ファイル

<script type="text/javascript" src="./lightbox2/js/lightbox-plus-jquery.min.js"></script>

どちらにおいてもファイルパスを指定しています。少し後で、ここのパスに合うようにディレクトリ名を調整します。

また、画像の数だけ以下の部分を追加します。

<a href="./yama1.jpg" data-lightbox="roadtrip" title="山その1"><img src="./yama1.jpg" alt="山その1" width="300"></a>

それぞれの属性は以下を参考にしてください。

タグと属性	説明
a タグの href 属性	画像ファイルへのパス
a タグの data-lightbox 属性	Lightbox のための属性です。何でもよいのですが、すべて同じ文字列をセットしておくと Lightbox はそれらを 1つのグループだと見なしてくれていろいろ便利な動きをしてくれます。今回の場合、すべて “yama” をセットします。
a タグの title 属性	画像ファイルのタイトル
img タグの src 属性	画像ファイルへのパス
img タグの alc 属性	画像ファイルを表す言葉（タイトルでよいです）
img タグの width 属性	画像ファイルを表示する幅（ホントは、heightも指定した方が良い）

Lightbox のファイル

Lightbox の Webサイトから、ライブラリをダウンロードします。

上記サイトの「DOWNLOAD」リンクをクリックすると、lightbox2-master.zip というファイルがダウンロードされますので、これを解凍します。

解凍したディレクトリの中にある「dist」というディレクトリだけ使うのですが、今回は、この dist ディレクトリを lightbox2 という名前に変更します。これで、index.html の中での CSSファイルと JavaScriptファイルへのパスが一致するはずです。

ファイルの準備はこれで終わりです。
以下のファイルとディレクトリをサーバーにアップロードすることになります。

ファイルをサーバーにアップロードします

先ほどと同じように、FTPクライアントソフト（FileZillaなど）を使って、こられのファイルを同じ階層にアップロードします。

サーバー側に photos2 というディレクトリを作り、そこにアップロードすることにします。

Webページにアクセスします

では、Webブラウザからこのディレクトリにアクセスしてみましょう。

見た目は、先ほどと変わりません。

では、一番左の画像をクリックしてみましょう。

すると先ほどとは違い、画像が手前にズームして表示されました。
Webブラウザのアドレスバーも元のままです。これは、画面遷移は起きずに、画像が拡大表示されたということです。

ここで、画面右下の×（バツ）をクリックすると画像の拡大表示が元に戻ります。

しかし、続けて次の画像が見たい場合は、拡大画像の右半分のどこかをクリックします。すると、右隣の画像の拡大表示に切り替わります。これは、右矢印キーを押しても同じです。

同様の操作で、3枚目の画像まで進むことができます。

逆に、拡大画像の左半分をクリックすると左の画像に移動しますし、左矢印キーでも同様の操作ができます。

もちろん、画像を右クリックして「名前を付けて画像を保存」することもできます。

JavaScriptのライブラリを1つ使うだけで、随分と便利になることが分かると思います。

5. Webページのパスワード制限

大抵のレンタルサーバー（共用サーバー）で、パスワード制限を掛ける機能が用意されているので、それを使って特定の人だけに今回のページを公開することもできます。その場合は、レンタルサーバーの管理パネルから行うことになります。

レンタルサーバー（共用サーバー）のパスワード制限機能（BASIC認証）について

2018.03.23

6. まとめ

レンタルサーバーを使って、写真画像を一覧表示する Webページを公開する手順について説明しました。更に、JavaScriptのライブラリを使うことで、機能を追加するやり方についても説明しました。

最近ですと、クラウドストレージサービスを使って画像ファイルを共有することもできますが、今回のような Webページを用意して見てもらうのも良いのではないでしょうか？

また、インターネット上には、便利な JavaScriptライブラリや、見た目をよくする CSSのライブラリが多数存在しています。無料で使えるものも多いです。お好みのライブラリを探し、今回紹介した Webページをもっと豪華にしてみるのも面白いと思います。