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