久々の投稿ですが、

4月から6月にかけて、プログレッシブウェブアプリを勉強目的で当サイトに公開しました。

https://dninja-lab.com/app/CameraWithTemplate/

このアプリは、ただのカメラアプリですが、

図形をカメラの領域上に配置することができて、

その状態でカメラをとると、その図形と共に写真に写るというシンプルなものです。

そもそも、プログレッシブアプリの魅力の一つとして、

ブラウザ上のアプリが、オフライン状態でも動くことができる

という利点があったことから、

試しレベルでやってみた次第です。

まだ確認できていない点もあり、不具合があるかもしれませんが、

今後は作成済みのテンプレートをzip形式で提供できればと思います。

今回のアプリで工夫した点は、

カメラの領域の上に、canvas要素を配置して、

さらに図形というオブジェクトを配置できるという点です。

この点に関しては、だれでもできるのではないか

という思いでしたが、既に公開されているアプリを調べたら(浅はかかもしれん)、

あまりなかったのが、当アプリを作るきっかけです。

今までのアプリでいうと、

既に撮った写真に対して、図形を配置したり、文字を描いたりできるのですが、

このアプリは逆のプロセスを考えてみました。

つまり、先に図形を配置したあとで、写真を撮る流れになります。

しかも、それをプログレッシブウェブアプリで実現するという変わったものです。

プログレッシブウェブアプリを作ってみて感じたことは、

多少の調査が必要でしたが、HTML、Javascript, CSSのフロントエンドだけで実現できるので、

新しい技術を身に着けることが少なく、既に身に着けたものだけですぐに開発できるのが、

すばらしいところです。

ただ残念なことに、2020/6時点でブラウザ上で、

端末内のファイルを直接保存・上書きができません。

もしこれができるようになれば、より簡単な操作になると思います。

今後も新しい技術に期待しましょう。