2023年9月、子どもの作品を展示するインスタグラム的アプリCobonnoというウェブアプリをリリースし、その経緯を書いたQiita記事「【個人開発】わが子の可愛さあまりフルスタックエンジニア化した男の話」を想像だにしないほどの多くの方々に読んでいただきました。ありがとうございます。
今回、自分自身が欲しかった機能を搭載できたのでその機能紹介と開発裏話を共有させていただきたいと思います。
機能紹介
展示(=投稿)しているモーメント（=コンテンツ）を印刷物にするための機能です。「出版」と呼んでいます。
印刷データとして生成するのは簡易用のPDFと、製本用のPhotoshopに流し込むためのcsvファイルです。
美術館などで販売しているクリエイターの作品集的なものが作成できます。
「実物は心苦しくも捨ててデジタルアーカイブにする」という発想から始まったこのアプリケーションですが、やはりどこかでまとめてリアルな本にして、こどもに渡したいというのがあり、設計初期段階からこの機能は考えていました。
出版ための設計時からの施策
裏側の話ですが、この機能のために3つの施策をしていました。
1. 印刷用のデータをもっている
このアプリでは展示した画像は3つに分かれて格納されています。
- タイムラインビュー用（画質 中）
- グリッドビュー用(画質 低)
- 印刷用（画質 高）
出版機能では印刷用のデータを使います。
ちなみに元画像からタイムラインビュー用とグリッドビュー用の画像を作っているのは読み込みを早くするためと通信負荷を軽減するためです。
2. 展示は1モーメントに1画像のみ
作品集としてのレイアウトのシンプルさを担保するため、1モーメント1ファイルという設計にしました。
いろんな角度から残しておきたいという親としての気持ちと、開発者としての割り切りのせめぎ合いが今でもあります。
3. 動画や音声のURLをQRコード画像にして格納している
動画や音声のアップロードもしたいのですが、私には難易度が高く延期中です。cloudinaryというサービスを使ってテスト的に実装しましたが、色々問題があり引っ込めました。ただ、アップロードをしたときにurlをQRコードにして保存するというロジックは実装していて、出版時にはQRコードがされるようにはしています。いつか日の目を。
実装と課題
チャレンジ1：PDF化の実装
まず、PDFでコンテンツを発行するようにpdf-libというライブラリを使って取り組んだのですが、下記の問題が発覚しました。
1. フォントが重い
モーメントと呼んでいる投稿には、画像とタイトルと説明文が入れられるようになっていて、これらを印刷対象としています。日本語表示にはフォントファイルを埋め込まねばならず、これがファイルを重くします。PDFファイルは数十MBくらいになると破損しやすくなり、PDF化はできたけれども破損して開けないという事態に。
[解決策] PDFを1枚1枚に分割してzipでダウンロードするようにしました。
2. フォントが対応していない文字がある
Noto Sans JPという日本語を広くカバーするフォントを使ったのですが、それでも一般的ではない漢字が含まれておらず、そのような文字が空白になることが発覚。
[解決策] 模索中。フォントの対応する平易な言葉選びをするしかいまのところありません。
3. 画像が粗い
プリンタで印刷するとそうでもないのかもですが、画面上だと若干粗い気がします。しっかり製本したときに粗さが目立つかもという懸念を感じます。
[解決策] 無料で使えるので許容してくださいというスタンス。
4. PDFが入稿データとして使えない
製本は外注になります。PDFも生成できて、入稿しようとしたときにはじめて、使おうとしているサービスがpngかjpgしか受入れしていないことが発覚...。ここまでやっての重大過失。
[解決策] 次のセクションへ
チャレンジ2：Photoshop用の流し込みデータ作成機能の開発
PDFを画像にするという手もありますが、それではフォントの問題が解決できません。
そういえば昔名刺デザインでデータを流し込みしたなと思い出し、Photoshopでデータの流し込みをすることで解決できるのではないかと考えました。調べたところPhotoshopを使えばフォントの問題も、画質の問題も、解決できそうで、印刷データのjpgエクスポートもできて一石三鳥。ということで、アプリでは完結できませんが、アプリ上で出版データを作ってローカルで入稿データを作るという手法にしました。
ステップ1 ウェブアプリ上でcsvファイルを作る
カバー用とモーメント用の2つのcsvファイルを作ります。
カバー用には
- 子どものニックネーム
- アバター画像URL
- 作品集タイトル
モーメント用には
- 日時
- 題名
- 説明
- 画像URL
に該当するデータをデータベースから取得してcsvファイル生成（作品集タイトルだけはDBからではなく出版時に入力）。
これは比較的容易でとくに問題なく完了。
現状はモーメントを24以上展示している方がこの機能を使うことができます（ないと生成ボタンを押せません）。
ステップ2 pythonで画像ダウンロードアプリを作る
ステップ1で生成されたcsvを流し込んで発覚しましたが、Photoshopはウェブ上の画像は埋込できません。ということで、
- csvにあるURLから画像をローカル上に保存する
- ローカル上に保存したパスとcsvのURLとを置換する
というpythonスクリプトを作成しました。
ステップ3 javascriptで流し込みスクリプトをつくる
ステップ2で編集したcsvを取込み、画像をリサイズし、配置するスクリプトを作成しました。pdf-libの原点とphotoshopの原点の位置が違うので最初混乱したり、絵文字や改行がエラーを起こしたりと色々なトラブルがありましたが、なんとか実装できました。
ちなみに絵文字や改行のエラーは、このアプリを使用する出口を「印刷物にする」と設定し、モーメントの展示の際にその障壁となる絵文字・改行を使えなくする、という方法を採りました。
PDF化機能は引っ込めてもよかったのですが、製本までしなくともダウンロードしてもっておきたいというニーズもあるかと思い、両方ユーザーは使えるようにしています。
ただ、既述のように24モーメント以上あるというのが条件です。”いまのところは”ですがどちらも無料ですので是非お試しください。
成果物
できあがった入稿データを、しまうま出版さんに入稿して製本しました。
いい感じです。
生成したPDFデータをご自身で印刷されてもまったくOKですが、Cobonnoを応援頂くお気持ちのある方は、当方に印刷を有料にてご依頼いただけるといい感じに製本してお送りできるかと思います。ご依頼はアプリ内のご意見箱からデータとともに。
とりあえず今回は機能を追加したのですが、今後は入稿しやすいように入稿フォームや見積もり・決済がスムーズにできるページも開発予定です。
おわりに
最初からあった「展示したモーメントを作品集にしたい」という想いを、ようやく実現することができました。作品集は子どももとても喜んでいて、作ってよかったなと心から思えました。
ただ、私がしばらく放置してユーザー獲得に動いてこなかったということもあり、アクティブユーザーの少ないアプリケーションになってしまっています。
タイトルや説明を入れるために「これはなんていうの？どこをがんばったの？」というやりとりが親子のコミュニケーションになったり、親がちゃんと見ている姿勢がこども伝わったり（多分）、こども自身が創作物についてレビューして新たな創作の火が付くきっかけになったりする、手前味噌ながらとてもいいアプリだと思いますので、是非お子さんをお持ちの方はみなさん使っていただければ嬉しいです。
離脱されたorされる方はどこを改善すべきかアプリ内のご意見箱からフィードバックいただければ頑張って改善します。
最後までお読みいただきありがとうございました！
今後は使ってくれる人が増えるようブラッシュアップを含め色々と手を打っていこうと思っています。
