手書キーボード

OVERVIEW

手書きでひらがなを書き、書いたひらがなをキーボードで入力できるアプリです。

このアプリは、canvasとされている部分に手書きでひらがなを書き、キーボードで書いたひらがなを入力できるアプリです。書いたひらがなは書き直し可能です。また、キーボードで入力された文字は打ち直し可能で保存することができます。

インスタグラムで、アルファベットを手書きで書きキーボードで入力できるアプリがあり、そのアプリのコメント欄に「日本語」もあればいいなというコメントがあったので作ってみようと思いました。

使用している主な技術は

  • React.js
  • fabric.js
  • HTML5
  • CSS

です。

このアプリを開発する過程で苦労した点は、canvasをどう扱うかということと、入力した画像をどのように保存するかということです。canvasという技術自体はじめて使用するものだったので、たくさん記事を読みfabric.jsを使用するというところにたどり着きました。また、連続した画像をどのように保存するかというところでつまずき、最終的に画面内の任意の部分を画像化できるhtml2canvasという技術を使用しました。


(作成期間:約一か月)



WEBSITE