いつも診断メーカーをご利用いただきありがとうございます。
この度、診断をした際に表示される「診断結果」を画像に変換できる機能をリリースしました。
これまで、表示された診断の結果をTwitterなどに投稿する内容は、テキストが基本となっておりました。診断結果にチャートや画像が表示された場合は、そのチャート・画像はURLに変換され、すべての内容がテキストとしてシェアできる仕組みとなっておりました。
一方、画面のスクリーンショットを撮り、それをSNSやブログに投稿する、といった形でも多くご利用いただいてきました。
スクリーンショットは、「診断結果の文章が長い場合」は画面をスクロールして撮る必要があります。「診断結果の文章が短く、表示される枠が画面より小さい」場合は、スクリーンショットを撮った後に不要な部分を取り除く（トリミングする）必要も出てきます。したがって、診断結果を画像で残す事は、テキストよりも多くの手間がかかってしまう状態となっておりました。
上記の理由から、診断結果をワンボタンで画像に変換できるようにしたいと考え、その機能を実装するに至りました。
画像への変換方法
診断結果を画像に変換する方法は、とても簡単です。表示された診断結果の下にTwitterなどへのシェアボタンが並んでいますが、そこに「画像でシェアする」というボタンが表示されています（一部のブラウザでは「画像に変換する」と表示されています）。このボタンを押すだけで、診断結果が画像に変換され、Web Share APIが起動します。
2種類の変換形式
診断結果は、フル画像と分割画像の2種類の形式で変換することができます。
フル画像
フル画像は、診断のタイトル・説明文、診断結果を一枚の画像にしたものです。診断結果の文章が長い場合は、縦長の画像となります。
分割画像
分割画像では、診断タイトルと診断結果が別画像になります。また診断結果の文章の長さに応じて内容が分割され、すべての画像が1080x1080pxの正方形になって生成されます。
分割画像を生成したい場合は、画像へ変換するボタンの隣のドロップダウンメニューから選ぶことが出来ます。
Web Share APIによる画像の送信・保存
診断結果を画像に変換した後、Web Share APIに対応しているブラウザでは、ご利用アプリへの画像の送信が可能です。
Twitter、instagramなどのSNSへの送信だけではなく、カメラロールやメモ帳への保存、メールへの添付なども可能です。
- Web Share APIに対応していないブラウザでは、画像に変換された後自動的にダウンロードされます。
- Web Share API・ダウンロード機能に対応していない一部のOS・ブラウザでは、画像に変換するボタンそのものが表示されません。
- Web Share APIで起動するアプリによっては複数の画像を正しく処理できないケース（1枚しか送信できない、画像の順番が変わる等）があります。その場合は他のアプリをお試しいただくか、画像を一度保存してからご対応ください。
- 「画像でシェア」を押した際にWeb Share APIへ送信されるデータは、変換された診断結果の画像と診断結果のテキスト両方となります。
テキストが長い場合や分割画像が多い場合は、Twitter用に省略されたテキストおよび最大4枚の画像が送信されます。
「画像でシェア」の横にあるドロップダウンメニューでは、フル画像・分割画像、テキストの有無などを選択して生成することができます。「テキストなし」の選択肢がある理由は、Web Share APIを実行する際にテキストのデータがあると起動されないアプリがあるためです。例えばiOSでは、テキストデータがあるとTiktokへ送信することができません。この場合は、「画像 テキストなし」を選択して下さい。
以上となります。ぜひご活用いただけますと幸いです。
今後とも診断メーカーをどうぞ宜しくお願い致します。
