見出し画像

【Boushitsu Advent Calendar】「教えて！ハカセ ジェネレータ」開発記

arkw

これは Boushitsu Advent Calendar 14日目の記事です。

　ウェブアプリ「教えて！ハカセ ジェネレータ」を1時間半で開発したので、その記録を時系列で残しておきます。「教えて！ハカセ ジェネレータ」は、文章を入力するだけで「教えて！Twitter絵師ハカセ」の画像を作成できるツールです。

画像1

12月10日　12:00

某室にて。

ちゃそ先輩「『教えて！Twitter絵師ハカセ』のジェネレーター作れそうだよね」
僕「作れますよ？」
ちゃそ先輩「えっ」

…という経緯で、開発が始まった。

　とりあえず arkw.net にFTP接続し、「支離滅裂な思考・発言ジェネレータ」のソースコードをダウンロード。作業フォルダに展開し、手始めに素材画像のダウンロードと調整、HTMLのコーディングをした。30分ほど作業したが、17時から地元でバイトのシフトが入っていたのでここで帰宅。眠かったのでバスや電車の中では作業しなかった。

12月10日　15:00

　帰宅後、JavaScriptのコーディング。出来るだけ早く完成されたかったので、長文が入力された際の自動改行を行わないなど、文字列処理の面ではかなり手を抜いた。コーディング作業は約30分で終わったが、バイト前に昼寝をしないと眠くなる習性があるので、ここで作業終了。

12月10日　22:15

　バイトから帰宅し、夕食と入浴を済ませた後はコーディングの続きとデバッグ作業を行った。CSSも元の「支離滅裂な思考・発言ジェネレータ」からほぼ全て転用したが、モバイル用のCSSを新たに作成した。また、ヘッダーの作成やラッパー幅の調整、色変更も行っている。元のCSSは2018年夏に書いたものだが、この頃はまだネット上のカラーパレットを使っておらず、「color: navy;」のように古の方式で色を指定していた。ひえっ…（今は16進数で指定しています）

　保存用の画像を生成するコードも追加した。ジェネレータではHTML5のcanvasで画像を生成している。canvasに描画した内容はパソコンなら右クリックメニューで保存できるが、スマートフォンやタブレット端末では長押ししても保存できないため、保存用の画像を生成しimgタグで表示するコードが必要になる。この部分、実装をケチったのでバグ報告が来てしまった。この件については後述。

　デバッグを終えたらウェブサーバにアップロード。Twitterを確認したところ、22:46に告知のツイートをしていたので、バイトから帰宅した後の実質的な作業時間はアップロード作業含め30分ほどか。正確な計測はしていないが、おそらく全体の作業時間は1時間30分くらい。別のウェブアプリのコードをほぼ全て転用したこともあり、かなり短時間で公開できた。

これに対する先輩の反応

12月11日

　Twitterでバグ報告。余りにプログラムで手を抜いたので、スマートフォン上で画像を保存できないバグが起きていた。最初は「画像を保存する」リンクを押すとcanvasの内容をPNG形式の画像に変換し、新しいタブにbase64のURLで投げていたのだが、この方式はiOSやAndroidでは動かない。開発時間短縮のためにモバイル端末用のデザインチェックはFirefoxの開発者ツールで行っており、実機でのデバッグを全くしなかったため、バグに気付かなかった。反省。「画像を保存する」リンクを押すとその下に保存用の画像を表示する方式に変更したため、現在はスマートフォン上でも画像を保存できるようになっている。

まとめ

　先輩からの唐突な提案だったが、既存のウェブアプリのソースコードを流用することによって、僅かな作業でウェブアプリを公開することができた。下積みマジ大事。それにしても、自分で書いた古いコードを見ると死にたくなるのは何故でしょうか…

この記事が気に入ったらサポートをしてみませんか？