Sharingvideoという動画キュレーションメディアを爆速で作ったった！！その工程と技術を解説する。
- Tag To
- 爆速
- つくってみた
- キュレーションメディア
2014年は動画元年になる！という事でボクもこの波に乗ろうかと思いまして、爆速でSharingvideo(シェアリングビデオ)という動画キュレーションメディアを開発してみましたので、期間と工程と、どのような技術が使われているかという所にスポットを当てて今回は記事を書いていきます。
Sharingvideo(シェアリングビデオ)とは？
まず初めにどんなサイトなの？って事なんですが、社会的に意義のある動画を僕たちが選んで紹介していくサイトです。細かい内容についてはaboutを引用してリンクを貼っときます。
Sharingvideoについて
動画はどんなコンテンツよりも人に伝わりやすく、人を変える力を持っています。Sharingvideoは人の心を捉え、人生の糧となる動画をシェアリングしていく事を目的としています。日々、「新しい発見を見つける事が出来る動画」を紹介していきますので、動画の中で「何か」を感じる事がありましたらコメントを添えてシェアして頂けましたら幸いです。そのコメントと動画はあなたと繋がりのあるサービスを通じて流れ届いてゆき、伝わった人がまた違う視点でシェアしてくれるかもしれません。動画の在り方として「好きなものを視聴するコンテンツ」から「人生を変えるかもしれないコンテンツ」へと移り変わっていく中で、共有の体験をあなたと共に。
引用元:about | Sharingvideo -シェアする動画キュレーションメディア-
Sharingvideo -シェアする動画キュレーションメディア-
動画メディアの動向がわかる記事
次になぜ動画なんだって疑問を解決してくれる記事を紹介します。
海外における新興ウェブメディアの隆盛 〜12のメディアから見えてくるもの〜
国連も乗っかるバイラルメディアの波！ 「UN Free & Equal」を知っていますか？
開設14ヵ月で月間ユニークユーザー数が3000万! ～史上最速で急成長するバイラル･メディアサイト「Upworthy」の秘密
作ったきっかけは一つの動画を見て感動したから
ボクの中で動画というのはYouTubeでお笑いを観るか好きな曲を聴くくらいにしか思っていませんでした。ですが、一つの動画で変わる事ってあるんですね。ボクの中で動画は「好きなものを視聴するコンテンツ」から「人生を変えるかもしれないコンテンツ」へと変わりました。
そこで「人生を変えるかもしれないコンテンツ」を広めたくて、そのハブ役みたいなwebサービスを育てて行こうと考え、爆速で開発し、完成に至った次第です。
In The Fall
In The Fall from Steve Cutts on Vimeo.
開発期間は10日(7割はテストで時間を食っています)
根幹システムに限っていえばタイムリーでプログラマーボックスを再構築したばかりでしたので、それをそのまんま流用したので3時間くらいでしょうか。
他の構築にどのくらいかかったかを作業別に説明していきます。
基礎システムに3日
そのまんま流用出来ると言っても思い描いた内部構成とだいぶ違いましたので、その違いを変更する為に3日くらいかかりました。
無限スクロールに2日
昔、SNS作った時に実装したのを思い出して、思い出しながら実装しました。いかに気持よく読み込むかをもっと吟味してテストを引き続き行いたいと思います。
全デバイス対応のドロワーメニューに2日
全デバイスに対応させるには意外と難しくて試行錯誤しながら実装しました。ここは大枠のみで、まだデザインを施していません。
デザインに2日
ここも全てのデバイスで見ても、全く同じUIになるように心掛けてデザインしました。
通信を考慮して最適な記事読み込み数を決めるテストに1日
ここが一番大事なので200回くらいテストしました。現状だと3つの記事を表示するのがベストな答えです。
言語はPHPでフレームワークはFuelPHP
前回の記事でFuelPHPでプログラマーボックスを再構築したので、このフレームワークの良さを伝えてみる。FuelPHPを覚えたので、使いたくて使いたくて採用しました。
工程と技術を説明していく
実際にどのような実装をしたのか、順序を追って説明していきます。
プログラマーボックスのシステムを流用＆改良
プログラマーボックスで構築したソースは色々と課題がありましたので、そこらへんを直しつつ、Sharingvideo仕様に改良を行いました。
Ajaxで無限スクロールを実装する
jQueyを使用しつつ、AjaxでTwitterやFacebookのような無限スクロールを実装した訳ですが、そこまで難しくありません。フラグ概念を取り入れフラグを立てたり折ったりするだけで記事を取得出来た場合のみにフラグを立てる事によって何度もAjaxが走らないようにしました。
どちらかと言えばJavaScriptで現在いるセグメントを取得する関数を作る方が大変でした。こんな感じ。
//--------------------
//最後のセグメント取得
//--------------------
function category_segment_get() {
var category_segment = '';
segment = location.pathname.split('/');
// ローカルでも動く為に削除
var del_array = ["sharingvideo", ""];
for(var i=0; i<segment.length; i++) {
for(var ii=0; ii<del_array.length; ii++) {
segment[i] = segment[i].replace(del_array[ii], '');
}
}
for(var iii=0; iii<segment.length; iii++) {
if(segment[iii].length > 1) {
category_segment = segment[iii];
}
}
return category_segment;
}
www.とか、テストしてません。
コンテンツ読み込みテストを重ねる
読み込んだ時の時間といいますか。回線を光回線の場合、WiFiの場合、3Gの場合の三つ用意して、デバイスを13インチMacBook Pro Retina、エイサーの小さいノートPC、iPad mini、iPhone5、Android（機種不明）の5つ用意して、コンテンツ量を調整して一番快適な記事数を決めました。
@Vine版という概念を作る
実は完成してからVineの動画も取り入れて行こうと決めました。ですが、他の動画と比率等々が違うので、カテゴリ分けという概念ではなく、別TLともいいますか、全く別のページにしました。
全てのデバイスに対応させる
モバイルファースト思想で構築していき、簡単なレプポンシブを取り入れ、どのデバイスで閲覧してもUIが変わる事がないように力を入れました。
ドロワーメニューも一応テクい事をしている
こんなやつ。
レスポンシブにするにあたってモバイルファーストの為に実装したドロワーメニューが皮肉にも邪魔をしてしまい、ここも苦労しました。というのもドロワーメニューは固定サイズなのですが、ブラウザの大きさが変わってくるとドロワーメニューがコンテンツと被る隙間って変わるんですよ。(魔の900px〜768pxあたり)そこでどんなブラウザの大きさでも自動で計算して一番見やすい場所にドロワーメニューを移動する事を実装しました。
デザインは最後に手をつけた
デザインは最初に行った場合の方がテンションが高くなるのですが、今回開発するサービスに至ってはコンテンツの色や映像が変わるので最初にデザインを行うと後々破綻する恐れがあるので一番最後に致しました。と言っても大枠は最初から変更に次ぐ変更で作り込んで行きます。で、最後にテーマカラーを決めて配色する感じですね。
人間工学に基づいたUI思想
時間は掛けていませんが、人間工学に基づいてUIを設計しました。ボクは左利きなのですが、日本に至っては殆どの方が右利きなので右利きの人がもっとも楽に操作でき、コンテンツを流れるように見るかという所に重点を置き、ロゴの位置をあまり見受けられない右寄りに配置し、ドロワーメニューを右に配置しました。
何故その配置かといいますと、殆どの人間は左から右に見る癖があります。右寄りの情報はあまり脳には入って来ません。ボクが見て欲しいのはロゴではなくて、コンテンツなんですね。同じ理由でカテゴリーバンドも右に配置しています。
Sharingvideoをどのように運営しているか？
現在、Sharingvideoチームはボク含め2名です。もう一人は記事を書く事を生業としていた方で2年前に東京でシェアハウスに住んでいた事がありまして、そこで出会った友人です。
Sharingvideoは一緒に運営してくれる方を募集しています
記事内容から逸れてしまって大変申し訳ないのですが、Sharingvideoを一緒に運営しくれる方を探しています。現在2人で運営しているんですけど、デザイナーと動画を探してくれる方、アプリ開発者が足りませんのでコミットしてくれる方がいらっしゃいましたら是非お願いしたいです。みなさん忙しいと思いますので、コミットの量は自由です。 要は土日プロジェクトみたいなもんです。ただ、マネタイズの出来ていないサービスですので、お金という報酬は現状ではありません。ですが、ゆくゆくは成長した時に、このプロジェクトの中枢を任せたいと思っております。
-
- webデザイナー
- ロゴやドロワーメニュー内のカテゴリーアイコンをメインに全てのデザインを任せたいと考えています。
-
- キュレーター
- 新鮮で社会に出す意義がある動画を探して良質なタイトルを考え記事をupしてくれる方を募集しています。
-
- アプリ開発者(Objective-C)
- サイトをアプリケーションに昇華させたいと考えていまして、ネイティブアプリを開発してくれる方を募集しています。
お手伝い出来るよ！って方は是非@mtoksuy宛にリプライか、お問い合わせからご連絡頂けたら幸いです。
まとめ
久々に真面目なプロジェクトを立ち上げてみました。どうなるかなんてわかりませんが、そこも楽しみつつ運営して行きたいと考えています。
webサービスが初期の段階でどのように作られるかを分かって頂けたでしょうか？Yahooが爆速を掲げていたようにスピードというのはかなり重要で、初期にあたっての品質は重要ではないんですよね。初めの立ち上がりはスピードが大事です。ボロでも良いのでプロトタイプを見て未来が見えるか見えないかを重要視しています。実際に運営してみて分かる事も多いです。
10日でプロトタイプが完成しないようであれば70%そのプロジェクトは失敗と見ていいでしょう。なので、今回はギリギリのラインなんですよね。
最後に、この記事を見ているみなさんがwebサービスを作る時に、少しでも参考になるようであれば幸いです。共に頑張りましょう。
