この次に何をかける? 「NEX::TUBE」を公開しました(製作記録)

この1ヶ月間、みっちりrubyとrailsについて勉強していました。
このたび、はじめてWebアプリケーションが作れたので、公開の連絡と、どんな具合に制作していったかを記録しておきたいと思います。

NEX::TUBEとは?

非常にシンプルなWebアプリケーションです。説明要らずで始められると思います。
NEX::TUBE

概要を説明しますと、こんな感じです。

NEX:TUBEは、「誰かの選んだ動画の、次にかけたい動画」をセレクトするWebサービスです。
カラオケで「その曲入れるなら、この曲はどうよ?」みたいな、それのネット版です。

というわけで、ジャンルは「音楽」を想定していますが、公序良俗に反しなければズレていくことも可です。

ユーザー登録せずに始められるので、ぜひ一度試してもらえれば幸いです。
感想や要望などありましたら、ぜひtwitterでご意見をお聞かせください。

バックグラウンド

このWebアプリケーションは、2つのテーマを背景に作成されました。

ひとつは、「キュレーション」に対する不満です。
「キュレーション」という言葉が一般化して4,5年ほど経ちますが、私はキュレーションに不満がありました。それは主に「精度の高さ」についてです。「こんなのオススメしないでよ!」ではありません。「これオススメされても驚かないよ!」です。
言い換えれば、「想定内のレコメンド」に対して飽きがありました。できれば、もっと違う方向から、「こういうオススメあるの!?」と思うようなレコメンドが欲しいな、と思っていました。

そこで、もうひとつのテーマが結びつきました。「他者の介入」です。
twitterやfacebookは、基本的には「知人との交流」、少なくとも「共通点のある他者との交流」がサービスの根幹をなしています。もちろん、これ自体を否定する気はありませんし、NEX:TUBEも同様です。
しかし、その関係性にヒビが入るようなものが理想的でした。

NEX::TUBEは、動画の投稿者を表示しません。あなたが投稿する/投稿されるレコメンドは、「はるか遠いところから届く、愛情の質・量もランダムなラブレター」のようなものになるはずです。

今後実装してみたいこと

現在、下のようなことを考えています。実装すべきか/できるかを、今後判断できればいいな。

  1. 利用率増加を目指して、twitter、facebookと連携する
  2. 「いいね!」的なボタンを設置して、それぞれの繋ぎを評価できるようにする
  3. ユーザーを表示して、好きなユーザーが投稿している動画をチェックすることができる。
  4. ジャンル(ヒップホップ)やテーマ(かわいい)を限定して、アーカイブに統一性を持たせる

NEX::TUBEを使っていて、何か「こういう機能があれば」というのがありましたら、ぜひtwitterでご意見をお聞かせください。

制作記録と感想

便利なruby、rails

プログラミング未経験(HTMLとCSSは少しできる)という状態から、この1ヶ月間rubyとrailsを勉強していました。その中でとくに感じたのは、「rails(ruby)覚えれば、なんか作れるなー」ってことでした。
とくに、この言語はphpなどと比べて記述量が短いそうなので、今回つくったようなものなら自分でも2,3日で作れるようになりました。

素人的に感心した点は、「データを保存したり引き出したりできるだけで、こんなに想像力って掻き立てられるのか!」ということです。
いわゆる動的なサイトを作れるようになったことで、やってみたいことが増えました。

一方で、「プログラミングを理解したか?」と言われると、ちょっと不安で。rubyだけを勉強して終えるよりは、他のクラシックなプログラミング言語も押さえたい気持ちが出てきました。

ローカル環境さえ整えれば、あとは自学できそう

railsは、WEBアプリケーションを作れます。つまり、ローカル内にサーバーが建てられないと、開発もテストもできません。

これ、意外とクリティカルで、初心者はローカル内にサーバーを建てられないから、何もチャレンジできない。
言い換えれば、サーバーさえ建てれば、あとは好きなだけトライ&エラーをすれば良いんです。

NEX::TUBEの制作手順

おおまかに記述すれば、以下のような流れです。正しい方法かどうかは、今後わかるでしょう。

  1. サービスを考える
  2. ページ遷移と、各ページの表示イメージをつくる
  3. HTMLとCSSだけページをつくる
  4. railsを組み込んでいって、完成形をつくる
  5. 一通りテストしてみて、微調整する

サービスを考える

まず、サイトの目的(自分と誰かの音楽の趣味を広げていく)を考え、これを達成するために必要な機能を短く記述します(誰かの選んだ曲の「次にかけるべき曲」を選んだり、自分の選んだ曲の「次にかけるべき曲」を提案される)。
その後、ターゲット(10〜30代男性?)と、どのようなシチュエーションで使われるか(ヒマ潰し。電車の中とか)を想像しながら、組み込む機能を書き出しました。

ページ遷移と、各ページの表示イメージをつくる

サービスの概要ができたら、次に必要なページと、それぞれのリンクの仕方を考えます。
NEX::TUBEは全部で10ページほどと簡単でしたが、大きなサービスになるとこの作業は大変そうですね。

HTMLとCSSだけページをつくる

イメージができたら、とりあえずHTMLとCSSで全体図を作りました。
この作業は、サービスについてもう一度考えなおす必要が出てきたり、ページ遷移をやり直したり、なかなか大変でした。
(言い換えれば、これがスムーズに進んでいれば、強固な計画を立てていたことの証明になるでしょう。)

データを表示する箇所は、HTMLに手動で打ち込んだり、コメントアウトで「あとで作る」とか書いておきました。

railsを組み込んでいって、完成形をつくる

ページが完成したら、手動で打ち込んでいた箇所をrailsを使って表示できるようにしていきました。
テーブルに書き込む/テーブルから読み込む機能や、youtubeのURLを抜き出す機能や、ユーザー登録の機能を実装していきました。

一通りテストしてみて、微調整する

完成したら、とりあえずそれぞれのページから全てのページへのリンクをクリックしたり、ユーザーになったつもりで動いてみました。知人にも触ってもらえれば最高でしょうか。
自分の場合は、「現在のページから、次の行動への誘導が適切にできているか?」という点に悩みました。はじめてサイトを訪れた人が迷うことなくサクサクと進んでいけるか。これがすごい大事なんじゃないか、と思いました。

一歩を踏み出してよかった

結論としては、これに尽きます。

プログラミング/エンジニアリングって、いわゆる専門的なもので「ちょっとカジったぐらいじゃね…」みたいに思っていましたが、現在は「ちょっとカジったぐらい」でも面白いことを始めることができるなと感じました。発想の勝負をする土俵には立てた。
そして、スタートしてしまえば、必要な技術はどんどん身につくし、いろんな刺激があって面白いです。

実は、このアプリ/記事を書きながらも、もうひとつ作っていまして(笑)、それもいずれ公開したいと思っています。
このあとはJavascript覚えて、時間が余ればMySQLやサーバー関係のことを知れば、より楽しくなるかなと。

皆さんも興味あれば、ぜひ始めると楽しいですよ。以上です。