はじめに

先日、漢字テストメーカーというWebアプリをリリースしました。
https://kanjitestmaker.cococig.com
ブラウザだけで下のような漢字テスト風の画像が作成できるというアプリです。

漢字テストメーカーで生成した画像
この記事では、このアプリをリリースするまでの道のりや、その道中で起こった様々なトラブルを書き残しておきます。

自己紹介

Webセキュリティ系企業に務めるエンジニア2年目です。普段は社内開発的な事をやりつつ、雑多に色々やる何でも屋的な研究開発職です。好きな言語はPythonです。

事の始まり

時は2022年5月のゴールデンウィーク。何かを生み出さないといけない気がするというオタク特有の焦燥感に駆られた私は、創作意欲を持て余していました。
一方その頃、Twitterで私のTLにある方のこんなツイートが流れてきました。

これは戦姫絶唱シンフォギアという超ド級大傑作アニメの難読漢字・当て字の多さをネタにしたツイートで、私はひとしきり笑った後、自分も問題を作りたいなと思いました。シンフォギアにはまだまだ訳の分からない読み仮名が沢山あります。

「多分ジェネレータ的なWebアプリがあるだろ」と思ってググった結果。

ない。

「普通にネイティブアプリならあるでしょ」と思って再度ググった結果。

ない。

私のGWの創作物が決まった瞬間です。

画像生成のコードを書く

そういうわけで、漢字テスト風の画像を生成するジェネレータアプリを作成することに決めた私は、早速コードを書き始めました。本当はもっと真面目に設計とか技術選定とか考えたほうが良いと思うんですが、個人開発なのでとりあえずは情熱があるうちに手を動かし始めました。言語はTypeScriptです。よく使う言語はPythonですが、TypeScriptをあまり真剣に使ったことがなかったので勉強したかったのと、広く使ってもらうならWebアプリの方が都合が良いと考え、それなら全部ブラウザ上で完結してバックエンドで処理しないような設計にしようと考えたためです。

この記事ではコードの詳しい解説は省きますが、結果完成したものが以下になります。きっっったないコードでここに出すのも恥ずかしいですが、後々ちゃんとリファクタリングしたいです。

コードの概要だけ解説すると、Node.jsのnode-canvasというライブラリを使って、Canvas上に問題文を縦書きで描画していっています。ただし、CanvasのfillText()には縦書きの指定なんてものはないので、「あ」という文字の高さを1文字の基本の高さとして、1文字描画するごとに次の描画開始位置を1文字分下げるという処理を行っています。つまり、1文字ずつ改行しているようなイメージです。
他にも読み問題で問題部分の横に線を引く処理、書き問題の時の書き込み枠の生成処理、解答画像の生成処理なんかが入っていますが、結局一番苦労したのは縦書き部分の構築でした。

とはいえ、ある程度方針が固まってからは愚直に実装していくだけだったので、画像生成部分に関してはGW中に完成しました。では何故、リリースが8月の末までずれ込んでしまったのか。それは次の章に続きます。

デザインができない

メインとなるロジックの構築ができた私は、フロントエンドの作成に進みました。こちらも使ってみたかったというだけの理由でReactを利用することに決め、入門サイト等で大まかな書き方を学び、基本的な部分は習得できました。

が、何を書いていいのか分からない。
書き方は分かりますが、完成形が全くイメージ出来ていませんでした。更に、私はそれはもうとんでもなくCSSが苦手です。一応苦労して書くことは出来ますが、paddingとmarginの違いも正直ピンと来ておらず、alignとjustifyの違いもぶっちゃけよく分かってないです。そして何より、致命的なまでにデザインセンスがないため、仮にCSSがちゃんと書けても自分では何を書いたら良い感じになるのか皆目検討がつかない状況でした。

ここに悩み、しばらく何も動きが無いまま時が経ちます。もうお蔵入りかと思われたその頃、出会ったのがChakra UIでした。
https://chakra-ui.com/

これはReact向けのUIライブラリで、初めから用意してあるパーツを良い感じに組み合わせるだけでなんか良い感じのページができるという優れものです。作例となるテンプレートを集めたサイトもあり、どんな風に組み合わせたらいいのかの参考になります。使い方についてはググれば沢山記事が出てくるので割愛しますが、これのおかげで開発スピードが上がりました。
しかしながら、開発スピードが上がったと言っても相対的な話であり、私の頭の中に明確な完成イメージが無いのは変わりません。色々な類似サイトを参考にし、コンポーネントを色々と組み合わせてはボツにして、デザイン関係の本も買ったりしながら、ちょっとずつ画面の開発を進めていきました。この工程が5月から8月までの約3ヶ月弱の大半を占めています。とはいえ、Chakra UIが無かったらあと5年ぐらいは完成していなかったと思います。

公開前の細々とした手続きが面倒臭い

さて、やっとの思いでちゃんと動いて見栄えもそれなりなWebアプリが完成しました。ですが、それなりにちゃんと公開しようと思った場合、色々とやらなければならないこともあります。

公開場所の選定

まずはどこで公開するかです。あくまで趣味の個人開発なので、そこまでお金はかけたくありません。先日Herokuが無料プランの廃止を発表したりしましたが、他にも無料でWebサービスを提供してくれるところは沢山あります。ありがたい世の中です。
今回は完全にフロントだけで完結するサービスで、バックエンドのサーバ等が必要ないことから、GitHub Pagesを利用することにしました。

ドメインの取得

別にデフォルトで生成されるドメインでもいいんですが、せっかくならちゃんとしたドメインが欲しいところです。いくつかの候補で迷いましたが、後で他のサービスを作ったときにも利用できるというケチな心が働いて、cococig.comというドメインを取得し、kanjitestmaker.cococig.comというサブドメインで運用することにしました。

広告の審査申し込み

企業ならともかく、個人開発におけるCI/CDで大切なのはイカしたツールチェーンでも完璧な自動化でもなく、金とやる気だと思います。これが無ければ継続もクソもありません。
私個人としてはそろそろWeb広告というビジネスモデルは限界じゃないかとも思っているんですが、とはいえ一個人が比較的簡単にごく少額でもマネタイズできる手法としては、未だWeb広告は有効です。｀特に何も考えず、一番有名なGoogle AdSenseに申し込むことにしました。

GitHub PagesのカスタムドメインDNS Checkが中々通らない

GitHub Pagesで無事ページを公開し、カスタムドメイン設定を行い、DNSの設定を変更。この後DNSチェックが入りますが、最初はDNSの設定が浸透していないためエラーになります。数時間ほど待って試してみますが、まだ通りません。GitHub公式のドキュメントには

注釈: DNS の変更が伝播するには、最大 24 時間かかります。

と書いてあります。
結果としては、私の場合はきっかり24時間かかりました。使用したネームサーバはお名前ドットコムのデフォルトのものです。中々設定が通らないなという人は、正しく設定できているか不安だと思いますが、じっと24時間待ってみてください。
また、GitHub Actionsでデプロイする場合、actions-gh-pages@v3の設定にcnameを含めることも忘れずに。これが無いとデプロイの度にカスタムドメイン設定をやり直さなければなりません。

サブドメインだとAdSenseが申し込めない

ドメイン関連の手続きを一通り終わらせたところで、大きな壁にブチ当たりました。なんと、Google AdSenseはサブドメインでは申し込めないのです。正確には、サブドメインではないドメイン（ネイキッドドメインとかAPEXドメインとか呼ぶアレ。以降はネイキッドドメインと呼称します）で審査が通った場合、追加でサブドメインのコンテンツにも広告を掲載することが可能ですが、何もない状態からいきなりサブドメインのコンテンツにだけ広告を掲載することは出来ません。
この場合、対処法は2つあります。

ネイキッドドメインでコンテンツを作成し、そちらで審査を通す
ネイキッドドメインから301でサブドメインにリダイレクトする

1.の方法だと追加で何かコンテンツを作成しなければなりません。ネイキッドドメインにポートフォリオサイトを作ることも考えましたが、これを始めるとまたリリースが伸びてしまいそうです。ポートフォリオは後々暇なときにでも作るとして、今回は2.の方向で進めることにしました（が、結局AdSenseは使えなくなったので、これはやらなくてもよかったかもしれません。詳細は後述）。

リダイレクトするためには、ネイキッドドメインにアクセスされたときにリダイレクトを指示してくれるサーバが必要です。こちらやこちらを参考に、Netlifyというサービスでリダイレクトを行うことにしました。アップロードしたのは以下のような設定が書いてあるだけのnetlify.tomlだけです。

netlify.toml

[[redirects]]
from = "http://cococig.com/*"
to = "https://kanjitestmaker.cococig.com/:splat"
status = 301
force = true
[[redirects]]
from = "https://cococig.com/*"
to = "https://kanjitestmaker.cococig.com/:splat"
status = 301
force = true

DNSの方でAレコードを設定し、数時間ほど待つと、無事にリダイレクト出来ていることが確認できました。

ひとまず一通りの設定を済ませ公開した矢先、AdSenseの審査に落ちた事を知らせるメールが届きました。理由は次のように記載されています。

コンテンツがない、またはコンテンツの有用性が低い。

作成中である。

アラート、ナビゲーションなど、行動が目的で使用されている。

「有用性が低い」は正直ぐうの音も出ないですが、似たようなサイトでも広告がついている場合はあります。「作成中である」はんなこたねえよと言いたいところですが、「Done is better than perfect」の精神で公開したのでなんとも言えません。3つ目はもはや日本語として成り立っていませんが、調べた限りだと要するに記事を充実させてくださいということみたいです。
どうにか直そうと考えてみましたが、あまり良い案は浮かびません。色々と調べていると、以下のようなスレッドを見つけました。

要約すると、

Google AdSenseの審査基準は年々厳しくなっている
AdSenseの審査結果は価値のあるテキストがどの程度の量あるかで決まる
昔は審査通ったが、現在単純なWebアプリで審査を通すのは難しい

とのこと。~~なるほど、「いかがでしたか」系記事が乱立するわけです。~~
これをそのまま信じるなら、これ以上頑張ってみてもAdSense合格は厳しそうです。AdSenseのために色々頑張ってきましたが、広告は他のサービスを検討するとして、AdSenseは諦めることにしました。

バズらない

一応それなりに人がいそうな14時、18時あたりを狙ってツイートしてみたりもしましたが、一向に利用者が増えません。なお、告知ツイートはこれです。

バズるとは思えないクソみたいな文章ですが、これを考えたのは寝不足で吐きそうな深夜4時頃だったので許してください。
バズりは技量もあるかもしれませんが、ほぼほぼ時の運だと思うので、気長に待とうと思います。オタクは難読漢字や難読当て字大好きなので需要はあると思っています。

まとめ

個人開発で作ったアプリを初めてリリースした話でした。実際に公開するまでには思ったより細かい手続きが多く、色々と大変でした。
まだまだやることはありますが、ひとまず無事にリリースという区切りを迎えることが出来ました。やはり自分の作ったアプリがインターネット上で見られるというだけで、それなりの達成感はあります。色々と付けたい機能、直したい不具合もあるので、もうしばらく開発は続けていこうと思います。あわよくばバズって承認欲求を満たしたいところです。

推しの難読漢字/当て字で周りのオタクに差をつけろ！
https://kanjitestmaker.cococig.com

Discussion