2020-04-13

Webアプリを作った話

1枚の紙を折って作る折本用の画像をお手軽に生成するツールを開発しました。よろしければご利用ください〜！https://t.co/HXpiy9yCAr pic.twitter.com/g1pD95daLc
— comi (@comi_lab) April 9, 2020

折本制作支援ツール orie

1枚の紙を折って作る折本というもの（小学校の遠足のしおり等で作ったことがあるかも）があるんですが、個人的に面付けがとても面倒だったので、簡単にできるWebアプリを作りました。
よければ使ってください。お手軽に自分だけの本が作れます（宣伝）。

何をやっているのか

「画像を選択」ボタン（中身はただのinput[type="file"]要素）で画像を選ぶ
選択された画像をcanvas要素で読み込み
折本の大きさに合わせてリサイズ・回転・連結を行う
指定されたフォーマットで保存させる

全てフロントエンドで動作しています。バックエンドなし。

開発期間

4/3の夜に思いついて開発開始、4/5にデモ公開。
そのあと機能追加や修正を行い、4/9にリリースしました。

なぜ4/9だったかと言うと、FF7Rの発売までに一段落つけたかったからです。
発売後は絶対そっちやると思ったんで…FF7R面白いよ皆やりましょう。

環境

構成

Nuxt.js + TypeScript
BootstrapVue
fontawesome
lodash
dayjs
jsPDF

上5つは使い慣れているので採用。jsPDFはPDFファイル生成に使用。
Nuxt使うような大規模システムじゃない（なんとVuexすら使ってない）し、大仰かなあーとも思ったんですが、最終的に静的ファイルでデプロイすることにしたんで、結果的には良かったかなと思ってます。

サーバ

URL見てもらえれば分かりますがNetlifyで動いています。
バックエンドがいらないというのが大きな理由、次点がNetlifyを使ってみたかったから。
デプロイがめちゃくちゃ楽でした。GitHubと連携させて、コマンド設定して、あとはpushすればOK。
SSLも自動設定。自分のサーバでLet's Encryptをcron定期実行とかせんでよかったんや…このブログも移したい…（そのうちやります）。

軽量化

せっかくなんでこの辺も頑張ってみようと思いました。

静的ファイル生成

「SSRとかよく分からないし…」という感じで、最初はSPAモードで開発してたんですが、途中でユニバーサルSSRに切り替えました。
初期表示に時間がかからないし、jsファイルの容量も減るしでこれは良いですね。今回のようなルートの少ないアプリではデメリットなく採用できると思います。windowとdocument変数の扱いだけ気をつけましょう（process.client変数で分岐）という感じで。
今回は途中からの移行で既存のコードがたくさんあるのもあって、移行直後にエラーが発生したけど原因が分からない（該当行も不明）…ということが起こりました。こういう場合の良い解決法ってあるんですかね。自分はコメントアウトとかで動作させるコードを減らして、泥臭くチェックをしました。

ライブラリの容量削減

nuxt build --analyzeで、どのライブラリが大きいかをチェック。

before

before
GZipで365KB。
BootstrapVue / fontawesome / lodashはまるっと読み込んでいたので目立ちます。

BootstrapVue

nuxt.config.jsで、以下のような感じで必要なモジュールだけ読み込むよう修正。

bootstrapVue: {
  components: [
    'BModal'
  ],
  directives: [
    'VBModal'
  ]
}

fontawesome

cssとフォントを直接読むのをやめて、@nuxtjs/fontawesomeを使って必要なアイコンだけ読み込むように修正。

// nuxt.config.js

- css: [
-   '@fortawesome/fontawesome-free/css/fontawesome.css',
-   '@fortawesome/fontawesome-free/css/solid.css'
- ],

+ fontawesome: {
+   component: 'Fa',
+   suffix: true,
+   icons: {
+     solid: [
+       'faDownload'
+     ]
+   }
+ }

あとは.fas.fa-downloadなどとクラス表記していた箇所を<fa-icon icon="download">という感じに変更。

lodash

必要な関数だけimportする。

- import _ from 'lodash'

+ import debounce from 'lodash/debounce'

after

after
GZipで282KB。fontawesomeのフォントデータも削れているので実際の差はもっと大きいはず。
jspdfが目立ちますが、これは削れないので諦めます。

苦労したこと

iOSのsafariで大きなcanvasを作れない

これを知らなかったので、何故かiPhoneでだけ動かないんですけど！？という問題がずっと発生してました。
印刷用のデータを作りたいので、どうしてもcanvasサイズが大きくなってしまうんですよね。でも最近はスマホユーザが多いからスマホ対応は捨てたくない…。
というわけで、A4ファイルだけ動くようにして、他サイズで生成失敗した場合はモーダルを出すことにしました。androidだと動くのにな…なんだこの制限…。

UI全然わからん

どうやったら使いやすいUIが作れるのかさっぱりわからん。
レビューとかもらえるならいいんですけど、そういうのもなければ手探りでやるしかないですよね。
でもある程度は良いものにしないと使ってもらえなくなるし…難しいです。今もどうしたらいいのかわからん。
UIの勉強してた時期もあったのにどうしてこうなってしまったのか…。

どうやって広めるか

基本的にはわたしが使いたいという理由で作ったので、別に使ってもらえなくても良いんですけど、でもこういうアプリを探してる人が世界に数人くらいはいると思うんですよね。
だけどその人たちに存在を伝える方法がなくて、どうしたものかなあ…と思ってます。
SNSで定期ツイートしたり専用アカウント作ったりすればいいのかもですが、でもあんまりやるのもウザそうだなあーとか。まあ自分が満足してればとりあえずOKなのかな。

今後について

「ちょっと小さめにページに画像を配置する機能」を開発中です。
家庭やコンビニで印刷する（コンビニの印刷は不要不急であれば今はやめときましょうね！）ことを想定しているので、紙の四方ギリギリの部分は印刷されなくなってしまうんですよね。あと折り目がずれて中央に来ないとか。
これは各ページに5mmほどの余白をつけることで対策できるので、そのように配置できるようにしたいと思ってます。

その後についてはアイデアor要望があれば…って感じです。