たけぼーの備忘録

暇を持て余した人間の無意味なブログ

会員制の動画共有サイトの構築した

f:id:takebo_blog:20170706074140j:plain

こんにちは。
今日は、会員制Webページの構築についてです。

まずは、構築したきっかけから。
お急ぎの方は読み飛ばして下さい。

とある日の会話にて

ある日、こんなことを言われました。

依頼主『君はプログラミングできるから、ホームページ作れるよね。』

自分『はい?簡単そうに言いますけどそれは…』

依頼主『ホームページは会員だけが見られるようなもので、セキュリティは万全にしといてね。』

自分(もう断る雰囲気じゃないじゃん…)


みなさん、こんな無茶ぶりされたことありませんか!?笑
私はありましたよ、つい最近。

プログラミングできるから、ホームページも作れるって…

その理論でいくとプログラマー全員がホームページ作れて、Webデザイナーが仕事を失うことになるんですよ!

というツッコミを入れたいところですが、いつもお世話になってる方なので断れません。

ということで、はじめて会員サイトを作ってみました。


会員向けサイトの仕様

今回構築したサイトの仕様は以下の通りです。

  1. サーバーは有料レンタルサーバーで、十分なスペック
  2. ログイン機能にて、会員以外は見れないようにする
  3. ユーザー名とパスワードは事前に個々に送信し、全ユーザー共通
  4. ユーザーの新規登録は必要ない
  5. ホームビデオを共有
  6. SSLによるセキュリティ対策

では、詳しく見てみましょう。

①サーバーは有料のサーバーで、十分なスペック

サーバーは既に借りていたので、その空きスペースを使用。十分なスペックというのは無料サーバーでありがちな

  • 一度にアクセスが集中すると落ちる
  • サイズの大きなファイルはサーバーに置けない
  • 転送量帯域が制限されている
  • 転送速度が遅い

といったことが無いことを指します。
動画を共有するためのホームページなので、動画が見られないようでは困ります。

②ログイン機能にて、会員以外は見れないようにする

ホームページは全体を通して、ログインしなければ見られないようにします。
これは依頼主曰わく、知らない人に公開するような動画ではないから、だそうです。

認証方法として方法は多々考えられますが、今回はセッション認証でいこうと思います。

③ユーザー名とパスワードは事前に個々に送信し、全ユーザー共通

今回は、知り合いのみが見られるものにする、ということですから、パスワードは個々に配布することが出来ます
ユーザー名とパスワードは、個々に発行すると認証がやや複雑になりますので、共通のものを使用することにします。

④ユーザーの新規登録は必要ない

③より、共通のものを知り合いにのみ配布しますから、ホームページ上で会員登録をするような機能は必要ありません

⑤ホームビデオを共有

これが、今回最大の目的です。
動画はダウンロードさせるわけではなく、YouTubeのようにWeb上でみるタイプとします。

それなら、YouTubeでいいじゃないか!というお声が聞こえてきそうです。

私もそう思いました。提案もしました。
でも、依頼主から却下されました。理由はよくわかりません(笑)

SSLによるセキュリティ対策

セキュリティは万全に!と言われましたから、目に見えてわかるセキュリティをしよう、と思いました。
サイト自体を常時SSL化しておけば、ブラウザでアクセスしたときに鍵マークがでて、安全そうなアピールが出来ます。
さらに、本来あまりセキュアではない認証方法であるセッション認証でも、SSLと併用することで安全になります。

常時SSLについては以前書きました。こちらも参考にしてください。

参考にしたサイト

テンプレート

ログイン画面

ログイン画面には、こちらのデザインを使用しました。

シンプルでカスタマイズしやすそうだったので、これを採用しました。

Pugというもので書かれていて、コンパイルするとHTMLを吐き出すようです。

そんなのあるんだなあ。Pugならこれなら私でも出来るかも、なんて思ったりしました。

Pugについての記事はこちら。

メインページ

メインページは『Verti』というテンプレートを使用しました。以下のページはテンプレートのデモページです。
Verti by HTML5 UP

こちらはHTML5UPにて公開されているテンプレートです。HTML5UPについては以前書きましたので、そちらをご覧ください。

ログイン機能の実装

こちらの記事が大変参考になりました。
SSLにて保護している場合のセッション認証の方法を参考に今回のスタイルに合わせました。

動画のプレイヤー

html5では、標準のコントローラーを表示することが出来ます。
しかし、今回は動画サイトのように独自のコントローラーを搭載することにしました。HTML5に対応していないブラウザもある(?)かもしれないので。

導入の手順が簡単だった、こちらを採用しました。

MediaElement.jsは、jsとcssを読み込んで、videoタグに

class="mejs__player"

をつけるだけです。簡単ですね。

最後に

実際に作ったページはお見せできませんが、割と見た目の良いホームページができました。

毎日2時間程度の空き時間に少しずつ進めて、3日で終わりました。テンプレートを使うと本当に手早くできますね。

ということで、今回はここまで。
この内容、誰かの役に立つのかな?笑

ではまた。