はじめに

縦書き画像メーカーというアプリを作成して公開しました。
作成した理由や、使用した技術等記載していこうと思います。

サービス概要

このように縦書き・複数行の文章を出力することができます。
Twitter等で短歌を発表する際に利用されることを想定しています。
フォントが複数選択できるため、好きな字体で文章を発表することができます。

↓想定利用例

苦労したところ①

ないちさんが公開されている上記アプリを参照。
上記アプリではhtml2canvasという任意のhtml要素をcanvasに変換できるライブラリを使用している。
これを使って実装しようとしたところ、html2canvasは縦書きに対応していなかった……。
そのため、canvas要素をhtmlに直書きする方法を取ることに。

苦労したところ②

canvas要素に縦書きテキストを直書きしようとすると、こちらも縦書き非対応。
そのため、一旦横書きテキストとして出力し、それを一文字分ずつ切り取って下にずらすという方法で描画することに。

（例）
ラーメン
↓
ラ
ー
メ
ン

参考にしたソースコード
https://codepen.io/phi_jp/pen/negKRO

苦労したところ③

上記例で見たように、単純に横書きテキストを一文字分ずつ下にずらすと、「ー」のように縦書き文字にならない項目が出てくる。
他にも「。」の場合は、横書きのときは左下、縦書きのときは右上に位置するため、各記号それぞれで回転・移動処理を実装した。

感想

初めてwebアプリを作成して楽しかった。
友人がたくさん遊んでくれて、励みになった。
アプリの公開にはnetlifyを使用したが、Githubの連携や公開までの流れがスムーズで感動した。

少なくとも自分は使うアプリが作れると、モチベーションも上がるしよいことがわかった。これからも何か作って公開してみたい。