こんにちは、財前です。
最近、Reactを使ってYouTube動画を自動で生成するプログラムを書いて、YouTube動画を沢山アップしています。
この記事では、どうしてReactでそんなことをしようと思ったのかという背景と、活動の現状についてお伝えします。
なぜReactで動画を作ってYouTubeにあげようと思ったか
一応、なんでそんなことをしようと思ったのか、僕のクズな思考回路を簡単に説明します。
2018年から海外向けに日本のことを発信していた
現在から遡ること３年。時は2018年。
僕はフィリピンの現地企業でブリッジエンジニアをしていました。
英語のライティングが苦手なくせにブリッジエンジニアになってしまった僕は、訓練のために英語で何かアウトプットをしようと、外国人が日本語を学ぶためのブログを開設しました：
2018年に記事を50記事ぐらい書いて、現在はそのまま放置しています…
そして日本に帰国後、仕事でReactとASP.NET Coreを使うことになり、その練習も兼ねて、ブログとは別に、日本語学習用のReactアプリを作りました。
ブログ等のアクセスが多少あったので、収益化したいと考えたが…
仕事の傍らそんなことをやりながら暮らしていると、いつの間にか、ブログに１日150人ぐらいの訪問者がいることに気づきました。（放置してたのでしばらく気づきませんでしたが…）
１日150人という数字は大したことないですが、「50記事しかないブログの訪問者なんて0人だろう」と思い込んでいた僕は、予想以上にアクセスがあったことにテンションが上がり、何か収益化する方法はないかと考えました。
ブログの収益化の方法としてまず思いついたのは、以下の２つです：
- Adsense
- アフィリエイト
Adsenseはお手軽なので、すぐに設置しました。
ただ、この程度のアクセスでは、１か月に1000円ぐらいにしかなりませんでした…
まぁ、根本原因は「そもそもアクセスが少ない」ということなので、そこを解消する必要があるのですが、何だかこれからもう一度記事を頑張って書くのも面倒くさかった僕は、他の収益化の方法を探してみることにしました。
そこで考えたのが、「アフィリエイトで商品を売ったら、もっと儲かるんじゃね？」ということでした。
そこで、良いアフィリエイト商材はないかと、しばらく探してみることにしました。
そして、１つの問題にぶち当たります。
売る商材が、全然ねぇ
アフィリエイトで何か売ろうと思ったら、そのサイトのテーマに沿った物を売る必要がありますが、「日本語学習」というマイナーなテーマの商材が、ほとんど見つかりませんでした。
唯一みつかったまともな商材が、以下のJapanesePod101のアフィリエイトプログラムです：
JapanesePod101は、日本語学習界隈では、かなり有名なサービスだと思います。
そのため、「ネームバリューの力で、飛ぶように売れるのではないか」と考え、さっそくやってみることにしました。
…
しかし、このアフィリエイトプログラムも、全然収益にはなりませんでした…
リンクをクリックしてくれる人は沢山いるのですが、おそらくみんな無料版で満足してしまい、課金までは至らないのだと思います。
正直JapanesePod101は、課金しなくても十分学習できるサービスなので、紹介している僕自身も、課金する必要性が、いまいち腑に落ちていませんでした。
このプログラムは、課金額の25％が紹介者に入るシステムなので、誰も課金しなければ収益は0です。
「今、YouTubeが儲かる！」って、数年前に誰かが言ってたような…
そんな時に、ふと、
数年前にどこかのインフルエンサーが
「今、YouTubeが儲かる！」
って言っていたような気がすることを思い出しました。
その言葉を思い出した僕は、
「これからはYouTubeの時代だ！」
と奮起し、動画を作ることにしました。
ブログにYouTube動画を埋め込めば、再生される度に広告収益が入り、ぼろ儲けできるのではないかと考えたのです。
実は2018年にブログを書き始めた時点で、既に1本だけ動画は撮って、YouTubeにあげていました。
当初の動画は、以下のようなものです…
１本だけ動画を作ったのですが、その時点で、
「動画１本作るために、労力かかり過ぎ… これを続けても、割に合わない…」
と判断し、YouTubeチャンネルは数年間放置していました…
プログラムで、動画を自動生成すれば良いんじゃね？
さて、YouTubeにチャレンジしたいけどできるだけ労力をかけたくないクズな僕は、プログラムで動画を自動生成できないかと考えました。
完全に０からプログラムのみで動画を生成するには、高度な人工知能が必要になる気がするので、コンテンツの種になる簡単な情報だけは人間が入力して、動画生成の部分をプログラムにやってもらうことはできないか… と考えました…
幸い、以前Reactで作った日本語の単語クイズなどのアプリのデータがあったので、これを使いまわせば、動画が生成できるのではないかと考えました。
単語のデータは既にDBに入っていますし、各単語の読み上げ音声も、既にストレージ上に用意されていました。
それらを使って動画を生成してみた結果は、以下のようなものです…
単語クイズ
生成元のReactアプリ：
生成された動画：
日本昔話
上記の単語クイズアプリ以外にも、日本昔話から日本語を勉強するための機能も作っていたので、そこからも動画を生成することにしました。
生成元のReactアプリ：
生成された動画：
上記の「単語クイズ」と「日本昔話」の動画を合わせると、約100本ぐらいの動画が生成できたので、YouTubeにあげてみました。
採用した実現方法
動画生成の機能は、Reactを用いて開発を行いました。
なぜReactを用いたのかと言うと、単純に生成元のアプリがReact製だったからです。
Webアプリの延長で動画生成を行いたかったので、「Webフロントエンドで動画生成を完結させたい」という思いがありました。
Canvas要素を用いれば、JavaScriptから動画の生成ができるのですが、音声を重ねるのが面倒くさそうだったのと、ReactとCanvasの相性が良くないことから、Canvasは用いない方針で作ることにしました。
結局行き着いたのは、単純に「ReactでDOM要素をアニメーションさせて、ブラウザの内容を画面録画する」というものでした。
録画には、Windowsにデフォルトで搭載されている、動画キャプチャ機能を用いました：
「画面を直接録画する」というのは、ソリューションとしてなんだかダサい気もしましたが、個人的にはこのやり方が一番、実装のコストも低く、やりやすかったです…
あとは単純に、DBやストレージからデータを読み込み、Reactによってブラウザに表示した要素を、音声の切り替わりに合わせてアニメーションさせるだけです。
録画用の動画生成ページは、以下のようなものになりました。
単語クイズ 動画生成ページ：
日本昔話 動画生成ページ：
結局、楽をせずに地道にやるのが一番効率が良いのか…
さて、収益化を目指して始めた動画生成ですが、
YouTubeの仕様を調べるうちに、
収益化までの道のりが長いことに気づきました。
そもそも、チャンネル登録者数が1000人以下のYouTubeチャンネルには、収益化に申し込む資格すらありません。
収益化を行うためには、多くの人にチャンネル登録をしてもらう必要があるのですが、自動生成したコンテンツでは、あまりチャンネル登録してくれる人も現れません。
（日本昔話からは、たまにチャンネル登録してくれる人がいますが…）
そこで試しに、顔出しで真面目に動画を作って、アップしてみました。
真面目に日本語を教える動画：
真面目に日本の文化を教える動画：
くしくも、自動生成された動画よりも、顔出しで真面目に作成した動画の方がウケが良く、チャンネル登録者数も少し増え始めました。
それでも、2021年5月現在、まだ110人ほどですが…
1000人までの道のりは遠い…
やはり、自動生成で楽などしようとせず、地道に動画を作るのが一番の近道なのかもしれません。
しかし、
「これは、エンジニアである僕がやるべきことなのか？？」
「地道に動画を作るのなんて、プロの日本語教師がやった方が良いのではないか？？」
という思いが常にあり、自分を見失いかけております。
まぁ、時間があるときに気が向いたら、今後も真面目に動画を作成してみようと思います…
（多分続かないな…）
プログラムから動画を生成する試みも、引き続きやっていけたらと思います。
以上、最近取り組んでいたことを、記事にまとめてみました。
この記事が役に立つ方がいらっしゃるのかは分かりませんが、
最後まで読んで下さり、ありがとうございました！！！
コメント