絵が描けないからファンサイトを作った

ファンサイトを作る上で考えたこと、実際にやったことのまとめ。

はじめに

私はVTuberにハマっている。
テレビ番組を見るようにVTuberの動画や配信を見るのが日課である。

何かの推しをしていると目に入るファンアート

Twitter等でファンアートをアップすると推し本人から”いいね”が貰える。稀にリプまで･･･。
ズルい、羨ましい。

私は絵が描けない。
「下手でもいいから」と言われても全く手が動かないし、模写でも無理。
人生を3周しても絵が描けるようにならない自信がある。

ファン活動として

自分にできるファン活動として何があるかと考えた時、Webサイトを作ってそこを情報発信の一部にできないかと思いついた。
ファンアートが第一次ファン活動とすれば、ファンサイトは第二次ファン活動である。
そして、私が表に出なくていい(頑張らなくていい)システムを作ってしまえば、あとはオートマチックになんとかなるのでは？と考えた。

ファンサイトを作るにあたって

1.ファン活動なので無理はしない
ここで身銭を切るくらいならスパチャやグッズ購入費にまわす。
なので自分の作業時間以外は制作費も運用費もゼロ。

2.自分の限界点を知っておく
「無理はしない」からの流れで、自分が出来ないことを無理にやろうとしない。
掲示板だったりお知らせだったりをサイト内に設置することも可能だったが、「管理」という手間が生まれるのでやらないことにした。
自分を甘やかしていけ。

3.もしもに備える
ここで言う「もしも」は自分に何かあった時のこと。
サイトの運営を放棄する自体になった時、自分だけが触れるものであった場合にそのサイトは墓場と化す。
ほとんど更新の無いサイトほど寂しいものはない。(自戒)

やったこと

1.Herokuの無料サーバーの利用
使用言語がRailsのこともあり導入もスムーズで24時間365日稼働可能。

2.セキュリティ上の問題が発生するような機能を実装しない
最たる例が掲示板。ユーザー管理から書き込み管理。やることが多すぎる。

3.基本的に自動更新を導入
ファンアートのまとめ、Tweetのタイムライン、YouTubeの再生リスト
どれも自分が操作せずともシステムが勝手に更新してくれる。
数ヶ月前の情報が残る、なんてことはほとんどない。
出来事の情報は都度更新が必要だが、必要データを外部からの入力方式にすることで半自動化した。

4.必要情報の公開
システム上、裏で何をやっているのかを明らかにするのは大切。
隠すべきソース(API Key等)以外を公開して、わかる人が見ればわかる状態にしておく。
わからない人でもどんな手順を踏めば実現可能なのかのヒントを載せる。

自動更新の方法

ファンアートのまとめ

TwitterAPIを使い、ハッシュタグを単語検索している。
該当ページの読み込み時にAjaxで実行される。
取得制限は180回/15分(=5秒に1回)で、アクセス自体は多くないと踏んでSleepは1秒で設定。

CONSUMER_KEY = 'API Key'
SECRET_KEY = 'API Key'

client = Twitter::REST::Client.new(
         consumer_key: CONSUMER_KEY,
         consumer_secret: SECRET_KEY,
         )

result_tweets = client.search(
                   '検索するタグ',
                   count: 50,
                   result_type: "recent",
                   locale: "ja",
                   exclude: "retweets",
                   filter: ["images","safe"]
               )

exclude: "retweets"　でリツイートされたものを除外。
filter: ["images","safe"]　で画像付きでR指定の無いものに限定。

YouTubeの動画リスト

再生数トップの動画を取得している。

        DEVELOPER_KEY = 'API Key'
　      CHANNELID = '対象チャンネルID'

        def get_start(video_id)
         service = Google::Apis::YoutubeV3::YouTubeService.new
         service.key = DEVELOPER_KEY
         opt = {
             id: video_id
         }
         begin
             streaming = service.list_videos(:liveStreamingDetails, opt)
         rescue
             streaming = nil
         end
       end

       service = Google::Apis::YoutubeV3::YouTubeService.new
       service.key = DEVELOPER_KEY
       opt = {
         channel_id: CHANNELID,
         order: 'viewCount',
         type: 'video',
         max_results: 3
       }
       begin
           playlists = service.list_searches(:snippet, opt)
       rescue
           playlists = nil
       end

       unless playlists.nil?
       playlists.items.each do |item|
           (略)
           start_datetime = get_start(item.id.video_id).items[0].live_streaming_details.actual_start_time
           (略)
       end
       end

APIの仕様上、list_searchリクエストだけでは配信開始時間等を取ってきてくれないので、最初のリクエストで返ってきた動画IDで元にもう一度APIに投げている。

出来事 / 配信まとめ

ここで困ったのが以下の2点
1.Herokuの無料枠の都合上、データベースは1万件が上限になっている
2.新しくデータを入れる場合にどう入れるか

1の解決法としては「データを絞る」「上限に達しそうな時点で有料に切り替える」というのを考えたが、やはり管理の問題がつきまとう。

2の問題も「専用ページを作る」「APIで受け付ける」「どこかのページをスクレイピング」というのを思いついたが、ここにはセキュリティの問題がある。

ならば、外部のデータベースに接続しようと考えた。
それも共同編集ができるデータベースにして、「もしも」に備えることができるデータベース。

思い付いたのは「Google Spreadsheet」
ここから取得すればHerokuのデータベースを圧迫することなく情報を蓄積させることができる。
そして、その情報は私だけでなく共同編集者からも寄せられる。
シート管理という手間は発生するが、入力規則や禁則事項を設定すればXSSやSQLインジェクションに怯えることが少なくなるのは大きい。

DEVELOPER_KEY = 'API Key'
spreadsheet_id = 'スプレッドシートID'
range = 'A2:E10000'

service = Google::Apis::SheetsV4::SheetsService.new
service.key = DEVELOPER_KEY
response = service.get_spreadsheet_values(spreadsheet_id, range)

「もしも」に備えて

必要なソースと手順・参考資料をまとめてGitにアップし、
Discordのファンサーバーで共有

まとめ

絵も動画編集もできなくても、プログラミングで推し事はできる。
どんどんファンサイトを作って推していけ。

最後に

作ったサイト：りすみゃ～広報
※noteに書いたことを再編集して載せました