今流行りの「動画まとめサイト」が誰でも３時間で作れる（簡単なhtml/css配信してます）

By 株式会社BEC 2014/05/17

３時間で作れるバイラルメディア（動画まとめサイト）講座

今WhatsやCuRAZYなど多くの動画まとめサイトが世の中をにぎわせています。

その勢いたるや凄まじいものがあります。

Whats→月間1000万PV
Curazy→月間1500万PV
※CurazyのPVは2014年5月9日現在

一般的な広告をサイトに設置した場合でクリック率が仮に1%くらいだとすると、
1000万PV × クリック率 1% × 単価 10円 = 100万円／月
くらいの売上げに、、（あくまで上記で仮定した場合です）。

このような動画まとめサイトの事をバイラルメディアと言うそうです。
そんなバイラルメディアですが、作ってみると案外簡単に作れたりします。

今回は、今までWebサービス等を作った事がない方でも３時間くらいでバイラルメディアを作って運用までこぎ着ける手順をご紹介します（バイラルメディアの簡単なテンプレ的なのを提供しています）。
※人によって個人差がありますのでご了承ください

最初に最終成果物をお見せしておきます。

http://www.viral-media.asia/

始めはシンプルな作りですが、カスタマイズや機能追加は各々ご自由にやっていただいて構いませんのでお好きにお使いください。

それでは早速進めていきたい所ですが、事前に少し注意点と流れを書かせていただきます。

【本来であれば必要なスキル】
■ html / css
■ サーバサイド言語
■ DBをいじる言語

なのですが、、

今回は初心者向けという事で、 html / cssを書ければ（書けなくても最悪模写出来れば）、サーバに上げてリリースしたり、簡単に運用したり出来るという所までやっていきます。
すでにDBを利用したWebサービス等を開発されている方には少しもの足りなく感じるかもしれません。

# 初心者向けなので、DBは使いません。
# なので管理ツールも使用せず、動画追加する際は直接HTMLに追記していただく形になります。
# DBがないので、カテゴリでの分類もここではしないでおこうと思います。
# またデプロイサーバ(HTMLをアップするサーバ)はAWSのS3を使います。トラフィック（流入）等は一旦気にせず、とりあえず作ってみようという感じです！

流れ

ステップ１：ローカルで動かしてみよう
ステップ２：ドメインを取得しよう
ステップ３：AWSに登録してS3サーバにファイルをアップしよう（この時点でサーバ上で一定の動きは確認出来ます！）
ステップ４：ドメインの設定をしよう
ステップ５：Facebookのアプリ登録をしよう
ステップ６：Youtube動画を追加してみよう

１. ローカルで動かしてみよう

ローカルとは自分のパソコンの環境の事です。
この段階では、まだ他の人がそのサイトをみる事は出来ません。

まずは、下記のバイラルメディアの初心者用テンプレートをダウンロードして下さい。

ダウンロードする前に、Gozalのfacebookページのいいね押してもらえると喜びますm(_ _)m。。
※押さなくてもダウンロードできます。

クリックでダウンロード→viral.zip（初心者用テンプレート）

ダウンロードに抵抗がある方や「今携帯からアクセスしてるんですけど、、」という方用に
バイラルメディアソースコードページも公開しております。
宜しければそちらも合わせてご参照ください。

ダウンロードが完了したら、ダウンロードファイルをデスクトップか何かに移動させます。

次にダウンロードしたzipファイルを解凍します
（Macだと「アーカイブユーティリティ」というzipファイルを解凍出来るソフトがデフォルトで入っているのでダブルクリックで解凍出来ると思います）。

早速解凍したフォルダの中身をみてみましょう。

とりあえず、６つだけYoutube動画をデフォルトで入れておきました
（厳密にはYoutube動画の埋め込みリンクを記載しているだけです）。

まだ中身が理解出来なくても大丈夫なので、一旦「index.html」というファイルをブラウザに「ドラッグ & ドロップ」してみましょう。

すると、

このような画面が出力されたでしょうか？
現状デフォルトの６動画のみなので、６つ動画が並んでいれば大丈夫です。

２. ドメインを取得しよう

先ほどダウンロードしたファイルは一旦置いておきます。

次に、アクセスする際のドメイン（ブラウザに入力するURL）を取得しましょう。
今回は「お名前ドットコム」を使ってドメインを取得したいと思います。

まず、お名前ドットコムにアクセスして下さい。

お名前ドットコム（http://www.onamae.com/）

アクセスすると、右上に「まずは、ドメイン名を検索してみよう」という文字と入力フォームが見つかると思います。
実はドメイン名ですが、世界中の誰かが既に使っているものは取得出来ないようになっています。
なので、ここでは使いたいドメインの内使えるものを検索します。

例としてここでは「viral-media」を使いたいと思います。

検索してみると、使えるドメイン一覧が表示されます。

ここでは値段の関係もあって、年間１８０円ですむ「viral-media.asia」を取得します。
このようにドメインの取得にはお金がかかります。

お名前ドットコムを利用した事のない方はここで会員登録を行って下さい。
会員登録自体は無料です。
また、ここで何年間ドメインを取得し続けるかを選択できますが、ここでは１年間にしておきます。

登録が完了して支払いをする画面は下記のような感じです。
すぐ使いたいのでクレジットでの支払いを選んでいますが、銀行振込等も使えます。

３. AWSに登録してS3サーバにファイルをアップしよう（この時点でサーバ上で一定の動きは確認出来ます！）

話が色々な所に飛んでいますが、最終的には全部つながるのでご辛抱ください。
次はAWSです。
例に習ってまずはサイトにアクセスしましょう。

AWS（https://aws.amazon.com/jp/）

サインアップしようとするとアカウントの有無を聞かれます。

AWSのアカウントを持っていない方は、登録する必要があります。
これも登録では料金は発生しません。

※新規登録の場合

登録をしてログイン後、右上の「AWSマネジメントコンソール」をクリックします。

今回はS3サーバという種類のサーバを使います。

S3をクリックしたら早速「Bucket」（バケット）と呼ばれる物を作成します。
「Bucket」とはS3サーバに色々なファイルを載せる際のバケツのような入れ物だと思っていただければ大丈夫です。

Bucketの命名ですが、注意が必要です。
このBucketをWebサイトとして扱う場合は、「2.ドメインを取得しよう」で取得したドメイン名とBucket名を同じ名前にする必要があります。
ただ、ここでは先ほど付けたドメイン名に「www.」を付けたものをBucket名に付けて下さい（理由は後ろで説明します）。

Bucketの生成が完了したら、次にBucketの設定を行います。
作成したBucketにカーソールを合わせて「Properties」を選択します。
するとしたに文章が出てきます。

まずは、「Static Website Hosting」を選択して下さい。
ここでこのBucketをWebサイトとして使います、という設定を行います。

「Enable website hosting」にチェックを入れて下さい。
するとIndex DocumentとError Documentに入力を求められます。
これはそれぞれ「ルート（／）にアクセスが来た場合に表示するページ」と「エラーが発生した際に表示するページ」を指しています。
※例の場合だとhttp://www.viral-media.asia/がルートです。

次に「Permissions」の設定をします。
「Add Bucket Policy」をクリックしてユーザがBucketにアクセス出来るような権限を追加します。

以下の手順でBucket Policyを設定して下さい。

①

②

③

④

次に、Bucketの中にファイルを設置していきます。
Bucketの名前をクリックして下さい。

とりあえず中身が空っぽなので、「Upload」からファイルを追加していきます。

下記の手順で、「1.ローカルで動かしてみよう」の時に取得したviralフォルダ内の、「index.html」と「error.html」を追加しましょう。

①

②

③

④

追加したら、続いてフォルダを作成します。
まずは「cssフォルダ」から

作成したcssフォルダにデスクトップに保存したviralフォルダ内のcssフォルダの中身をアップロードします。

①

②

同様に「detailフォルダ」も作成してアップロードします。

①

②

「imgフォルダ」も

①

②

ここまでやると、Bucketの設定の所に記載してあるURLでアクセスが出来るようになっているはずです。

ブラウザを開いてURLに「www.viral-media.asia.s3-website-ap-northeast-1.amazonaws.com」を入力すると、

携帯で開いても

適当なURLを入力しても設定したエラーページが出力

この時点で他の方からも見ていただけるようなサイトではあるのですが、折角なので取得したドメインでアクセス出来るようにしましょう。

４. ドメインの設定をしよう

再度お名前ドットコムにアクセスします。

お名前ドットコム

先ほど取得したお名前ドットコム会員のお名前IDとパスワードでログインして下さい。

ページ上部の「ドメイン設定」をクリックして、「DNS関連機能の設定」をクリックします。

DNSレコード設定を利用するから「設定する」ボタンをクリックして下さい。
ここで、先ほど使っていたドメイン(www.viral-media.asia.s3-website-ap-northeast-1.amazonaws.com)と取得しておいたドメイン(viral-media.asia)をひもづけます。

設定するドメイン(例ではviral-media.asia)をチェックして、入力画面に進みます。

赤枠で囲った部分に情報を記載していきます。

まず、TYPEをプルダウンで選択して「CNAME」を選択して下さい。
続いて、ホスト名の欄に「www」を入力し、VALUEの欄に先ほど使っていた「www.viral-media.asia.s3-website-ap-northeast-1.amazonaws.com」を入力します。
※ここで正規のホスト名としてwwwを使用するため、先ほどのBucketの命名の際に「www.」を付けていただきました。

追加後、確認画面に進んで下さい。
その際DNSレコード設定用ネームサーバー変更確認にチェックが入っている事を確認してください。

①

②

設定後、反映に少し時間がかかりますが、その内「http://www.viral-media.asia」で接続出来るようになります。

ステップ５：Facebookのアプリ登録をしよう

Facebookのシェアボタンをサイト内に埋め込むには、Facebookアプリとして登録しておく必要があります。
現状、各ページに埋め込んでいるFacebookのシェアボタンはこちらでテスト用に作ったFacebookアプリのシェアボタンです。
これも無料なので、Facebookアプリ登録をしてご自身のアプリケーションとしてシェアボタンを埋め込んでみましょう。
※FacebookのシェアボタンとTwitterのツイートボタンに関して、デフォルトのままだと「http://www.viral-media.asia」をシェアしたりツイートしたりする事になってしまうので必ず変更して下さい。

Facebookの開発者ページにアクセスします。

Facebook開発者ページ（https://developers.facebook.com/）

新しいアプリの作成を選択します。

Display NameとNamespaceを埋めて、次に進んで下さい。

Facebookアプリが完成すると、下図のようなページが出来上がります。
ここに書いてあるアプリIDを1.htmlや他のhtmlページに入力する事で、このFacebookアプリケーションと連動させる事が可能になります。

続いては、実際にデフォルトの（ダウンロードした状態の）ソースコードを変更します。
下図のように各ページ(1.html、2.html、3.html、4.html、5.html、6.html)を変更してください。
※ダウンロードしたファイルをダブルクリックした際にブラウザが起動してしまう場合は、メモ帳やテキストエディタ等のエディタを開いてそこにファイルをドラッグしてきて下さい。

ステップ６：Youtube動画を追加してみよう

最後のステップです。
Youtubeの動画を追加して運用してみましょう。

まず「detailフォルダ」配下のhtmlを複製（コピー）します。
名前は「7.html」とかに変更します。

次に貼付けるYoutubeの動画を探します。

Youtube（http://www.youtube.com）

今回は下記の動画を貼付ける事にします。

Title 「かわいい格闘をする猫　Fighting cute cat」
http://www.youtube.com/watch?v=-hvK2zUBRbA

7.html編集

「7.html」を編集します。
headタグのtitleを変更しましょう。
今回はタイトルを『格闘猫がかわいいと話題』にしてみます。

またシェアした際に表示されるfacebook情報もheadタグの中で指定する事ができます。
こちらも title(投稿用のタイトル), description(投稿用の説明文), url(このページのURL), image(シェアする時に表示される画像) を変更しましょう。

１５行目のimageの部分の画像ですが、
「http://img.youtube.com/vi/*******/0.jpg」
この「*******」の部分を各Youtubeページ（今回でいうとhttp://www.youtube.com/watch?v=-hvK2zUBRbA）の「?v=」の後の物に置き換えるとYoutube動画の画像が取得できます。

☆変更点☆
■titleタグ
■og:title
■og:description
■og:url
■og:image

１行目〜１７行目
<変更前>

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8"/>
        
        <title>全裸男がアメリカ版SASUKEに乱入したが身体能力がすごい</title>
        <link href="../css/style.css" rel="stylesheet"/>
        <link href="../css/detail.css" rel="stylesheet"/>

        
        <meta property="og:title" content="全裸男がアメリカ版SASUKEに乱入したが身体能力がすごい">
        <meta property="og:type" content="article">
        <meta property="og:description" content="あらあら^^;この方はこの後どうなったんでしょうか。。">
        <meta property="og:url" content="http://www.viral-media.asia/detail/6.html">
        <meta property="og:image" content="http://img.youtube.com/vi/2Y2QVeWbOUc/0.jpg">
        <meta property="og:site_name" content="バイラルメディア">
    </head>

<変更後>

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8"/>
        
        <title>格闘猫がかわいいと話題</title>
        <link href="../css/style.css" rel="stylesheet"/>
        <link href="../css/detail.css" rel="stylesheet"/>

        
        <meta property="og:title" content="格闘猫がかわいいと話題">
        <meta property="og:type" content="article">
        <meta property="og:description" content="猫と猫が無言でやりあってます。和みますね☆">
        <meta property="og:url" content="http://www.viral-media.asia/detail/7.html">
        <meta property="og:image" content="http://img.youtube.com/vi/hvK2zUBRbA/0.jpg">
        <meta property="og:site_name" content="バイラルメディア">
    </head>

上で変更したのはheadタグの中身で、実際に本文に反映されるタイトルは下記の部分です。
なのでこちらも、というかこちらのタイトルを変更し忘れないようにしましょう。
※またfacebookボタンの「data-href」とwitterボタンの「data-url」も同時に変更し忘れの内容にご注意ください。

☆変更点☆
■divタグのid=title内
■facebook-buttonのdata-href
■twitter-buttonのdata-url
■twitter-buttonのdata-text

３１行目〜４９行目
<変更前>

<div id="contents" class="upmargin">
    <div id="detail-main" class="upmargin">
        <div id="title">
            
            全裸男がアメリカ版SASUKEに乱入したが身体能力がすごい
        </div>
        
        <ul class="social-buttons">
            <li class="facebook-button">
                <div class="fb-share-button" data-href="http://www.viral-media.asia/detail/6.html" data-type="box_count"></div>
            </li>
            <li class="twitter-button">
             <a href="https://twitter.com/share" class="twitter-share-button"
             data-url="http://www.viral-media.asia/detail/6.html"
             data-text="全裸男がアメリカ版SASUKEに乱入したが身体能力がすごい"
             data-lang="ja" data-count="vertical">
             ツイート</a>
            </li>
        </ul>

<変更後>

<div id="contents" class="upmargin">
    <div id="detail-main" class="upmargin">
        <div id="title">
            
            格闘猫がかわいいと話題
        </div>
        
        <ul class="social-buttons">
            <li class="facebook-button">
                <div class="fb-share-button" data-href="http://www.viral-media.asia/detail/7.html" data-type="box_count"></div>
            </li>
            <li class="twitter-button">
             <a href="https://twitter.com/share" class="twitter-share-button"
             data-url="http://www.viral-media.asia/detail/7.html"
             data-text="格闘猫がかわいいと話題"
             data-lang="ja" data-count="vertical">
             ツイート</a>
            </li>
        </ul>

もう少し下にいくと、下図のような記述があります。
ここは動画を埋め込んでいる所なので、肝心なところです。

iframeタグのsrcの部分がありますが、

http://www.youtube.com/embed/2Y2QVeWbOUc

この赤文字の部分を、

貼付けるYoutubeのURLの

http://www.youtube.com/watch?v=-hvK2zUBRbA

この緑文字のに差し替える必要があります。

最後に説明文も忘れずに変更して下さい。

☆変更点☆
■divタグのid=movie内
■divタグのid=description内

５０行目〜６２行目
<変更前>

<div id="wrap-movie" class="clearfix">
            
            <div id="movie">
                <iframe src="http://www.youtube.com/embed/2Y2QVeWbOUc" frameborder="0" allowfullscreen></iframe>
            </div>
            
            <div id="description">
                あらあら^^;この方はこの後どうなったんでしょうか。。
            </div>
        </div>
    </div>
</div>

<変更後>

<div id="wrap-movie" class="clearfix">
            
            <div id="movie">
                <iframe src="http://www.youtube.com/embed/-hvK2zUBRbA" frameborder="0" allowfullscreen></iframe>
            </div>
            
            <div id="description">
                猫と猫が無言でやりあってます。<br>
                和みますね☆
            </div>
        </div>
    </div>
</div>

index.html編集

index.htmlを編集して、7.htmlに飛ばすリンクを作る必要があります。
既存の"wrap-article"のdivタグの下に7.html用の"wrap-article"を追記するだけです。

<div class="wrap-article">
    ……
</div>
<div class="wrap-article">
    ……
</div>
<div class="wrap-article">
    <a href="detail/6.html">
        <div class="wrap-movie">
            <img src="http://img.youtube.com/vi/2Y2QVeWbOUc/0.jpg" />
            <div class="img_comment opa">全裸男がアメリカ版SASUKEに乱入したが身体能力がすごい</div>
        </div>
    </a>
</div>

この下に下記のソースを追記

<div class="wrap-article">
    <a href="detail/7.html">
        <div class="wrap-movie">
            <img src="http://img.youtube.com/vi/-hvK2zUBRbA/0.jpg" />
            <div class="img_comment opa">格闘猫がかわいいと話題</div>
        </div>
    </a>
</div>

※imgタグのURLの
http://img.youtube.com/vi/-hvK2zUBRbA/0.jpg
赤文字の部分は先ほどと同じく、貼付けるYoutubeのURLの

http://www.youtube.com/watch?v=-hvK2zUBRbA
緑文字の部分を使用するようにして下さい。

ここまで出来たら、「ステップ３のS3サーバにファイルをアップしよう」に習って、「index.html」と「7.html（新しく追加したhtml）」をアップロードします。

動画を追加する方法は以上です。

付録１

参考までにS3で運用していく上でのサーバ料金の例を載せておきます。

月間10000PVのサイトの場合

※S3サーバは実際使用した分だけお金がかかる仕組みです。

■ ストレージ容量
　料金：おおよそ$0.0330 /GB
　１つのhtmlファイルが3KBとかなので、ほとんどかかりません。

■ データ転送
　料金：おおよそ$0.201 /GB（はじめの１GBは無料）
　一回のリクエストで転送するデータの量は
　ページ3KBとロゴイメージ6KBでおよそ10KB（実際はキャッシュもあるのでそんなかかりません）。
　10,000PV × 10KB = 100MB なので
　これも10,000PVくらいであれば無料で使用出来ます。
　※ただPVが増えてきたときにかさんでくるのでお気をつけ下さい。

■ リクエスト数
　料金：$0.0037 : 10,000 リクエストあたり
　一回のリクエストでhtmlファイルとlogoイメージの２リクエスト走ります。
　10,000PVあった場合20,000リクエスト走るので、
　$0.0074となります。

ほとんど無料で利用できます。

月間100万PVのサイトの場合

※S3サーバは実際使用した分だけお金がかかる仕組みです。

■ ストレージ容量
　料金：おおよそ$0.0330 /GB
　１つのhtmlファイルが3KBとかなので、ほとんどかかりません。

■ データ転送
　料金：おおよそ$0.201 /GB（はじめの１GBは無料）
　1,000,000PV × 10KB = 10GB なので$2

■ リクエスト数
　料金：$0.0037 : 10,000 リクエストあたり
　1,000,000PVあった場合2,000,000リクエスト走るので、
　$0.74となります。

$2.74ほどで利用できます。

付録２

サイトのカスタマイズの例です。

ヘッダの色を変える

style.cssを変更します。
103行目に下記のような記述があります。

#header {
    height: 56px;
    background-color: #ff6633;
    width: auto;
    min-width: 890px;
}

background-colorの「#ff6633」を「#000080」に変更してみましょう。
ローカルのindex.htmlをブラウザで開いてみる（「１. ローカルで動かしてみよう」参照）と、ヘッダがネイビーに変わっているのがわかると思います。

この「#000080」をカラーコードと言います。
カラーコードは、
カラーコード一覧ページ（http://www.netyasun.com/home/color.html）をご参照ください。

あとは、変更したローカルのファイルを「ステップ３のS3サーバにファイルをアップしよう」に習ってアップロードすると実際のページに反映されます。

フッタの色を変える

同様にフッタの色を変える場合も、style.cssを変更します。
196行目に下記のような記述があるので、background-colorを好きな色に変更しましょう。

#footer {
    padding: 20px;
    background-color: #333333;
    height: 200px;
    margin-top: 50px;
    min-width: 890px;
}

ヘッダのロゴを変える

「imgフォルダ」の「viral-logo.png」を同じ名前で置き換えるだけです。

エラーページのCSSの指定を絶対パスに変更する

<html lang="ja">
    <head>
        <meta charset="utf-8"/>
        <title>バイラルメディア</title>
        <link href="css/style.css" rel="stylesheet"/>
        <link href="css/top.css" rel="stylesheet"/>
    </head>

上記のようにlinkのhrefにてcssのパスを設定していますが、相対パスであるためURLに入力するパスによってはcssファイルが適用されなくなっています。
そこで、下記のように絶対パスで指定すればこの問題は解決します（今回はソースをローカルで確認していただくためにデフォルトでは相対パスを設定しました）。

<html lang="ja">
    <head>
        <meta charset="utf-8"/>
        <title>バイラルメディア</title>
        <link href="http://www.viral-media.asia/css/style.css" rel="stylesheet"/>
        <link href="http://www.viral-media.asia/css/top.css" rel="stylesheet"/>
    </head>

他にも様々なカスタマイズが出来るので、興味のある方は色々変更を加えて遊んでみて下さい。