FURYU Tech Blog - フリュー株式会社

フリュー株式会社の開発者が技術情報を発信するブログです。

プリにスマホの画像を投影✨マイシーン取り込み機能を実現する技術について

挨拶

初めまして ! (お久しぶりです ! )

プリントシール機のソフトウエア開発担当の前川です💜

この記事では、プリントシール機(以下、プリ)の「Misel(ミセル)」で新しく搭載された「マイシーン取り込み」機能の実現にあたってのお話をさせていただきます。

はじめに


「マイシーン取り込み」機能とは…!

「Misel(ミセル)」で新しく搭載された ユーザーのスマートフォンでお気に入りの画像を選択し、 その画像をトリミングしてプリの筐体に送信する機能です。

これまで、フリューでは「PURI&(プリアンド)」や「SUKELU factory(スケルファクトリー)」にて、同様の取り込み機能を搭載してきましたが、本機能はプリの筐体に取り込むことで、お気に入りの画像と一緒に撮影することができる機能になってます💗

マイシーン取り込みについて

マイシーン取り込みの実現


今回は、この機能の実現までの道のりと実現手法についてお話しさせていただきます!

🌟ユーザーのスマートフォンとの通信

根本の話ですが、画像のやり取りをする為には、プリの筐体とユーザーのスマートフォンでの通信が必要になってきます。 それをどのように実現するかというと...

プリの筐体にはそれぞれWi-Fiが搭載されています。 本機能ではまず、筐体でローカルサーバーを立ち上げ、Wi-Fiを使ってローカルネットワークを構築します。

次に、そのネットワークにユーザーのスマートフォンを接続させます。

そうすることで、プリ筐体とユーザーのスマートフォン間の通信が可能な状態にします。

プリ筐体とユーザーの通信

ただし、プリのユーザーの多くは学生です。 ネットワークに関する専門用語や複雑な説明には明るくない方が多いです。

複雑すぎる機能説明は、ファーストインプレッションで離脱してしまう事がほとんどです。

できるだけ、難しい事は意識させないようにするために、本機能ではQRコード*1を用いて接続させるようにしました !

接続画面

QRコード*1読み取りでは、下記を行えるように実装しています。

  • ピクトリンクアプリを介して、QRコード*1を読み取るように誘導
  • ローカルネットワークへのアクセス要求
🌟お気に入り画像の選択

Wi-Fiへの接続が完了すると、いよいよ送信する画像の選択をさせます。

ローカルネットワークを使用する為、画像選択の為のサイトページはあらかじめ筐体内に組み込みで搭載しておき、そのサイトへとアクセスさせます。

先ほどのQRコード*1読み取り時に、Wi-Fiへの接続が完了後、サイトへアクセスするようにしています。

サイト内では、下記を行えるように実装しています。

  • スマートフォンのライブラリから画像の選択
  • 選択した画像のトリミング調整とプレビュー確認
  • トリミング調整した画像の送信

トリミング調整についてですが、前述の通り、このマイシーン取り込みで選択して送信した画像は、筐体で実際に撮影する際に使用します。 その際に、画像をプロジェクターに投影させてカメラで撮影するため、 それぞれの角度の都合上で歪みが生じたり、切り捨てが生じたりします。

その結果、ユーザーが映したかったところが、プリに写っていない😭なんて事が起きないように 意図した内容になるよう、このサイトで調整してもらう機能です。

各画像の範囲の縮図

実際のサイトのトリミング調整

このトリミング調整は、プリの画面で行ってもらうと、2人同時の操作が難しく時間がかかってしまったり、トリミングしてみてやっぱり違う画像に戻す事が難しかったりするため、使い慣れたスマートフォン内で操作してもらうようにしました!

詳細な値は省きますが、プロジェクターやカメラの物理学的な扱い・プリの画像処理・サイトビューの知識が必要で、とても複雑な画面になっています...

今回、特に時間をかけて検討・調整した画面で、お互いの知識を持ち寄って複数回話し合い、プリ開発・アプリ開発のメンバーの力を結集して実現する事ができました!

🌟送信画像の確認

こうしてスマートフォンからプリ筐体へと画像が送信されます。

サイトでは、送信前に画像の容量(大きすぎないか?)・ファイル拡張子(有効な静止画か?)を確認して、不正データの送信をブロックしています。

プリ筐体では、送信された画像のサイズ(小さすぎないか?)・bit深度(有効な静止画か?)の確認を行い、以降のゲーム内容に反映していきます!

🌟結果

取り込んだ画像はプロジェクターに投影されて、一緒に撮影する事が出来ます。

投影されるので雰囲気たっぷりの画像でかわいいです🥰

実際の撮影画像

ちなみに、

⇩プリでプロジェクターに画像を投影する手法については、過去にこちらの記事で紹介されています🎀 tech.furyu.jp

おわりに


ピクトリンクアプリと、プリ筐体の機能をふんだんに使用した本機能で、 今までのプリよりもユーザーからのアクションの自由度が高くなり、新しい楽しみ方が生まれることを期待しています!

写真を使って、写真を撮る。という新しい体験、 プロジェクター投影で雰囲気から映える体験📷

ぜひ、マイシーン撮影してみてくださいね~✨

*1:QRコードは(株)デンソーウェーブの登録商標です。