はんこ風四字熟語アイコン「よじメーカー」を作ってみました！【個人開発】

皆さんこんにちは！現役大学生のKamichan_R(@Kamichan_R)です。
約半年前からプログラミングの勉強をしていて、今回初めてWebサービスの公開＆Qiita記事作成をします！

#作ったもの
今回私が作ったサービスは「よじメーカー」(yozimaker.xyz)です。
これは、簡単にはんこ風四字熟語アイコンを作れるサービスです。
PC・スマホ対応で画像の保存やTwitterに簡単に投稿が簡単にできます！

【よじメーカー始動！】
オリジナルの四字熟語はんこが作成できる「よじメーカー」を公開しました！
あなたが考えた四字熟語をあなた好みのデザインではんこにすることができ、画像としてダウンロードできます！アイコン等に使うこともできます！

「よじメーカー」はこちら→https://t.co/UM81MpT44Q

— Kamichan_R@プログラミング学習中 (@Kamichan_R) August 10, 2021

#作った目的
Vue.jsを勉強していたのでそのアウトプットをするため。
また、こんなサービスがあったら面白そうというアイデアを形にするため。

#使用技術

• Vue.js
• 双方向バインディングが特徴的なJavaScriptフレームワーク
• ルーティングの設定やデータ保持が便利
• Tailwind CSS
• 最近流行りのCSSフレームワーク(Bootstrapのようなもの)
• HTML内に指定のクラスを書くだけでデザインを変えられる便利なフレームワーク
• JavaScript
• canvasの操作
• canvas
• 実際に完成するアイコンを描くために使用

#制作過程
##全体像のイメージ

とりあえずはんこ風のアイコンにするために必要最低限な枠と文字の設定や入力欄を配置しました。
よりカスタマイズができるように色や大きさの設定も導入しました。
さらにTwitterでのツイートや画像保存のために作品名や作者名の欄も加えました。

##プロトタイプ作成
初めは文字を固定して、枠の動作や文字の色が正しく設定できるかを確認しました。
その次に任意の文字を入力してそれが正しくcanvasに出力できるかを確認しました。
その後は文字位置の調整やその他動作確認をしました。
最終的にアイコンの編集画面は以下のようになりました。

##アイコン完成画面の作成
アイコンの画像保存をする部分とTwitterにツイートするための部分を作成しています。
画像保存はサイズを選べるようにするためにcanvasのheightやwidthにそれそれ1920, 1080などの値を保持してダウンロードボタンに反映させました。

YoziAfterCreated.vue

downloadImage() {
  let yoziImageCanvas = document.getElementById('yoziImageCanvas')  // canvasを取得
  let tmpImg = document.createElement('img')  // 一時的に保存される画像の箱ようなものを生成
  tmpImg.src = yoziImageCanvas.toDataURL() // 上の行の箱にcanvasの画像データを入れる感じ

  let tmpCanvas = document.createElement('canvas')  // 新しいcanvasを生成
  let tmpCanvasCtx = tmpCanvas.getContext('2d')  // 2d描画するためのcontextを取得
  tmpCanvas.setAttribute('width', this.selectedSize)  // widthをユーザーが指定した値に設定
  tmpCanvas.setAttribute('height', this.selectedSize)  // heightをユーザーが指定した値に設定
  tmpCanvasCtx.drawImage(tmpImg, 0, 0, this.selectedSize, this.selectedSize)  // 新しいcanvasにリサイズされた画像を描かせる

  let a = document.createElement('a')  // ダウンロードのためのaタグを生成
  a.href = tmpCanvas.toDataURL()  // リンク先はcanvasからのURLを入れる
  a.download = this.title + '.png'  // ユーザーが設定した作品名を保存名にする
  a.click()  // 生成したaタグを起動してダウンロードが開始される
}

そしてTwitterのツイートボタンのリンクは

YoziAfterCreated.vue

https://twitter.com/share?url=https://yozimaker.xyz/&via=[作者名]&hashtags=よじメーカー&text=[作品名]を作りました！

として、作者名や作品名がツイート内に柔軟に含まれるようにしました。
ちなみにアイコン完成画面はこのような感じです。↓

#作り終えての感想
今回は初めてVue.jsを使ってサービス（大分小規模だけど）を作りました。事前に基礎的な書き方や関数の実行方法・データ保持は勉強していたので思い通りの機能はつけることができました。
しかし、canvasの動作に悪戦苦闘したりダウンロードの縦横サイズが変わらないなどのトラブルもありました。

• 文字の位置が違う
• 値を変更してもcanvasが変わらない
• 一旦リセットされないで何重にも上書きされてしまう

実際にインプットしたことをアウトプットしようとすると何かしら躓くところがありますね。これを実感できただけでもいい経験です。そして、初めから大規模な開発を目指さなくてもいいと思いました。本当はみんなが作成した四字熟語はんこをサイト上で表示したり、Twitterみたいに「いいねボタン」やYoutubeの「急上昇ランキング」みたいな機能があっても面白いと思いました。
でも、複雑すぎても実力的に途中で挫折してしまうかもと思ったので断念しました。凝ったものを作るよりもとりあえず動くものを作ることの重要性を実感しました。
次はスマートフォンアプリの作成をしてみたいと思っています！