Voicyのチャンネルがランダム表示される【Voicyチャンネルルーレット】作った！ソースコードも大公開しちゃいます
2019/11/9更新：新たにチャンネルを63個追加しました。
こんにちは！IT女子のちーさんです。
CodeCampで学んだプログラミング知識を生かしてちょっとしたwebサービスを作ったので、コードの中身を大公開してどうなってるのかを解説しようと思います。ソースコード解説の部分は、パッと見難しいですが、私自身エンジニアではないので、エンジニアじゃなくても理解できるように優しい言葉で解説しました。
プログラミングにちょっとでも関心がある方はぜひコード部分も見てみてください。興味ない人はルーレットで遊ぶだけで全然OKです！
作成したサービス
今回作ったのは「Voicyチャンネルルーレット」というもので、Voicyで配信されているチャンネルからランダムにチャンネルを表示するというサービスです。
Voicyチャンネルルーレットの遊び方
使い方はあなた次第！ですが、主な用途を紹介します。
新しいチャンネルとの出会いに
VoicyアプリのUIだと、ランキングや新着がメインになっており、埋もれているチャンネルも多くあるので、「こんなチャンネルもあったんだ」という出会いの場にご活用いただければと思います。
昔配信されていたお宝チャンネルとの出会いに
Voicyチャンネルルーレットは、昔配信されていたチャンネルも含まれています。
Voicyのチャンネルは月更新制になっており、更新がされなかったパーソナリティは「配信終了」という形でその後配信されなくなり、アプリのランキングやおすすめにも表示がされなくなります。しかし、アーカイブは全て残っているので、過去回を聴くことでコンテンツを楽しむことができます。
有名なあの人も実はVoicyで配信していた⁈なんてことが分かるかもしれません。
ビンゴゲームをする
先日長野で開催されたVoicyのチャンネル「ろりラジ」のオフ会で、Voicyチャンネルルーレットを活用した「Voicyビンゴゲーム」で遊んでみました。
Voicyビンゴ
— いろは (@iroha_iro_tw) May 4, 2019
「#あいにゅー （リーチ）」
「#ろりラジ（ビンゴ）」
で、1番ぬけ♡ pic.twitter.com/Ogu8mB9u0W
#ろりラジ
— 村田 優介 (@yusukeb28513086) May 4, 2019
ビンゴ大会
知らないチャンネルも知れて面白い！ pic.twitter.com/uYGtsZ85V6
詳しいやり方は、こちらのページで解説しているので、参考にしてみてください。
ルールはろりラジ仕様になっているので、適宜修正いただければと思います（笑）
【ゆるぼ】ボランティアさん募集
Voicyでは、月初めにどんどんチャンネルが追加されていきます。
チャンネルIDから新しい配信URLを調べて、データに「チャンネル名」と「パーソナリティ名」を書き加えてくださる方を募集します（笑）
「追加したよ」と私にDMいただければ、データベースを更新して最新チャンネルもルーレットに出るようにします。
「やってもいいよ！」という方がいらっしゃれば、DMをいただけましたら、Voicyの配信URL一覧スプレッドシートを共有いたします！
まぁ、自分でもできるので気が向いたら自分でやります（笑）
では、ここからはプログラミング的な解説になります。
サービスの全体像
使った言語は、「HTML」「CSS」「PHP」「MySQL」「JavaScript」です。JavaScriptは一行だけで、動かす部分はほとんどPHPで作りました。
さらに、データベースとの連携もしています。
サービスの構造は、先日公開した銭湯サイトの簡易版となっています。
VoicyのチャンネルのURLには、数字が割り振られており、新しいチャンネルになるにつれて数が大きくなっています。今回は、この仕組みを利用してサービスを作りました。
ちなみに、Voicyファンラボ同期の「や」さんが書いたノートに一覧が載っています。
データベースには
・No
・配信中のURL
・チャンネル名
・パーソナリティ名
の4列のデータが入っています。
チャンネル名とパーソナリティ名のデータ収集は、ろりラジリスナーのあおいさんにご協力いただきました。
開発環境は、CodeCampのシステムを使ってるので、ドメインが「codecamp」になっています。
ソースコード解説
それではここからソースコードを解説していきます。ここから先はPCでの閲覧推奨です。
前半部分がルーレットを回すための下準備、後半部分がデザインとなります。
データベースに接続する
まず、別で「phpMyAdmin」に保存しているデータベースを読み込む必要があります。「const.php」というファイルにphpMyAdminのログイン情報が記載してあるのでそれを呼び出します。「$link〜」と書いてあるコードでデータベースに接続することができます。これは、いつも同じ書き方なので「こういうもの」として覚えます。
変数を定義する
ルーレットを回すために、変数を使う必要があります。変数とは、データを入れる箱のようなもので、状況に合わせて中身を変えることができます。
まず「$rand」という変数ですが、これはランダムに出す数字を入れるための箱です。「$data」は、「配列」と呼ばれる変数の書き方で、配列にはデータを複数入れることができます。
変数を使うときは、いきなり処理をすると「この変数はなんなんだ」というエラーが出るので、使う前に「$rand=''」のように初期値を設定しておく必要があります。
「mt_rand()」は、「関数」です。関数は、色々計算したりデータを処理したりするための命令文のようなものです。エクセルで使われてるSUM()とかも関数ですね。
「$rand=mt_rand(1,432)」と命令すると、ページを読み込むごとに1~432からランダムに数を取ってきて、$rand変数に入れるということをやってくれます。
データベースからデータを持ってくる
ここがサービスの肝となる部分です。何をしているかというと、 先ほどランダムに出した数字を元に、データベースに入っているデータを取ってくるという作業をしています。変数やら関数やら混じっていてわかりにくいですが、下記の型はデータベースからデータを持ってくるときに使う決まった構文のようなものなので、そのまま覚えて使うのが良いと思います。
if ($link) {
$query =（処理内容）
$result = mysqli_query($link, $query);
while ($row = mysqli_fetch_array($result)) {
$data = $row;
}
まず、データベースと接続しているならばというif文を作って、$queryという変数の中に処理内容を書きます。この処理内容の記述は、PHPではなく、「MySQL」というデータベースを操作するための言語で書きます。
処理内容の「'SELECT * FROM VoicyID WHERE NO='.$rand」は、「VoicyID」というテーブル（表）から「NO」列で「$rand」と一致するデータを引っ張ってきて、という命令です。以下のようなデータが入っているので、もし$randで「1」が出たら、一行目のデータを引っ張ってくることができます。
ここまでやると、サービスの根幹は大体完成です。
あとは、デザインをして、引っ張ってきたデータを適切なところに出してあげればOKです。
ちなみに、この処理の後「$data」のデータの中身を表示すると以下のようになります。
ちょっとややこしい感じで書かれてますが、ちゃんと「イケハヤラジオ」や「イケハヤ」といった必要なデータが入っているのがわかると思います。
データの中身を意味ごとに改行するとこんな感じ。
array(2) {
[0]=> array(0) {
}
[1]=> array(8) {
[0]=> string(3) "237" ["NO"]=> string(3) "237"
[1]=> string(28) "https://voicy.jp/channel/585" ["URL"]=> string(28) "https://voicy.jp/channel/585"
[2]=> string(22) "#イケハヤラジオ" ["channel"]=> string(22) "#イケハヤラジオ"
[3]=> string(12) "イケハヤ" ["personality"]=> string(12) "イケハヤ" }
}
「array」は配列という意味で、()はデータの個数です。 $dataには2重で配列が入っていて、「[0]=> array(0)」 は空になっており、「[1]=> array(8) 」に必要なデータが入っています。数字で紐づいているのとデータベースの列の名前で紐づいているのが2つずつ入っていますね。「string(3)」というのは、3文字以内の文字列が入ってますという意味です。このデータ取得に成功すれば、あとはPHPでweb上にデータを表示できます。
サービスページのheadを作る
ここから先は、webサイト上で見える部分になります。上記は、HTMLでwebサイトを作る時の定型文です。使用するHTMLの種類やCSSの情報、ページタイトルなどが書かれています。
データを表示する
ここが見た目で一番目立つ「このチャンネル！」枠の部分です。見出しや枠などのデザインは、「copypet」というとてもセンスがいいデザインサイトからコピペしたものをカスタマイズして実装しました。
ちなみに、この部分はHTMLとPHPが混ざっているのですが、PHPを書く場合は<?php ?>で囲った中に書かないとエラーになります。
$dataのデータを表示するために「foreach」というPHP言語の関数を使っています。これは繰り返し処理をするための変数で以下のように使います。
foreach( 配列 as 値を入れる変数）{
繰り返し行う処理内容
}
foreachの中にある「isset」も関数ですが、これは()内の変数に値が入っているかどうかを調べる関数で、入っていたら「TRUE」となります。「if (isset($value) === TRUE)」は、$valueという変数に値が入っているならばという意味になります。これをしないと$valueに値が入っていないときに処理できなくなりエラーとなります。
処理内容の「<?php print $value['channel'];?>」は、$valueの中に入っているデータのうち「channel列」のデータを表示してね、という意味です。URLやパーソナリティ名も同様に表示させます。
ボタンを作る
最後に、押すとページを読み込むボタンを作ります。ここだけ一瞬JavaScriptの登場です。「onclick="window.location.reload()"」という処理が「クリックでページを読み込んでね」ということです。
これで、
⒈ボタンを押すたびに$randの値が変わって
⒉その値に基づいてデータベースからデータを取ってきて
⒊表示する
という一連の流れが完成します。
長々と解説してみましたが、よくわからない人は遊ぶだけで全然OKです！ぜひ遊んでみてくださいね。
それでは！
