写真入力フォーム スマートフォンやタブレットで撮った写真を日報へ添付可能

写真入力フォームを含んだ日報テンプレートの例
写真入力フォームを含んだ日報テンプレートの例

日報にjpeg / pngのファイルを添付できます。画像ファイルは1枚あたり5MBまで、合計で10ファイルまでアップロードできます。PDFファイルやエクセルファイルなど、写真以外のファイルを添付したい場合はファイル入力フォームの利用を検討してください。 ファイル入力フォームでも写真を添付できます。一見するとファイル入力フォームのほうが完全に優れており写真入力フォームの価値が無いように思うかもしれませんがそれは誤りです。 写真入力フォームは写真に特化しているため、日報に写真をそのまま埋め込むことができるため視認性が高くなります。

キャラクター

ファイル入力フォームだと写真ファイルへのリンクが表示されるだけだから都度ダウンロードが必要だよ。

また、写真入力フォームでは写真を自動で圧縮しますので余分な通信量の削減にも貢献します。 写真の含まれた日報をPDFに出力する際も、PDF内に写真が埋め込まれてセットされます。この点もファイル入力フォームとの違いです。ファイル入力フォームはPDF出力に対応していません。 このような理由から写真は写真入力フォームを使用したほうが利便性の面で優れています。写真は本フォームを使い、ZipやPDFにはファイル入力フォームを使い、手書きのイラストや手書きのサインを添付したいときは署名入力フォームを使います。

キャラクター

PDFに出力する際、添付した画像が複数枚ある場合は先頭の1枚目のみ出力されます。2枚目以降は出力されない点に注意してください

写真入力フォームの初期設定

写真入力フォームは初期設定項目が非常に少ないです。最も気にかける項目は幅の指定です。 添付された写真データは幅いっぱいになるように画像を表示する仕組みのため、幅が広いと写真が大きく表示できます。一方で幅が狭いと写真も小さく表示されます。

名称説明
表示名項目見出しエリアに表示される文字です
項目見出しエリアの背景色を設定できます。灰色・茶色・緑色・紺色・赤色から選択してください。初期値は灰色です
サイズ表示名の文字サイズを最小・小・中・大の4段階から設定できます。初期値は「中」です。表示名が長すぎる場合は設定が無視されます
メモ入力エリアの画面左上に赤文字で表示されます。日報・チェックシートの作成者が迷うことのないように補足文として活用できます
入力必須これがONの場合、ファイルが添付されていない場合日報の提出ができなくなります
初期値日報の新規作成時に値をセットしたい場合は数値を入力してください。不要の場合は空欄にしておきます
1〜12の幅を選択できます。写真入力フォームでは幅が重要な項目になります。幅が極端に狭いと写真が見切れたり、PDF出力時にはみ出す恐れがあります。推奨幅は用途にもよりますが6〜12を推奨しています。12の場合は全幅のため、非常に大きく写真を表示できます。

写真入力フォームを使う

写真入力フォームだけで構成された日報テンプレートを作成してみました。写真入力フォームではとくに幅が見た目に大きな影響を与えますので、あえて極端に差をつけた形式で作成しています。

写真入力フォームのみで構成されたテンプレートを自作した。幅を極端に変えることでどのように見え方が変わるのかを確認してください
写真入力フォームのみで構成されたテンプレートを自作した。幅を極端に変えることでどのように見え方が変わるのかを確認してください

写真入力フォームの含まれた日報を書く

早速写真入力フォームで構成された日報を作成する画面を表示します。

PCから操作する場合は写真入力フォームに画像データをドラッグするだけで追加できます。スマートフォンやタブレットでは「画像を選択」をタップして追加する画像を選びます。 写真の追加は、

写真入力フォームの含まれた日報作成画面のイメージ。写真を添付できる枠がありそこから写真を追加できる。PCの場合はドラッグ操作で追加も可能
写真入力フォームの含まれた日報作成画面のイメージ。写真を添付できる枠がありそこから写真を追加できる。PCの場合はドラッグ操作で追加も可能

写真入力フォームの日報を読む

写真入力フォームの含まれた日報では、写真に対する表示切り替えスイッチが付属してきます。 ONのときとOFFののときの見え方をそれぞれ比較してください。

まずはスイッチがONの場合です。

表示切り替えスイッチON時。ホームページなどでもよく利用される「スライダー」形式で表示されます。画像は中央に寄り、幅が足りない箇所は見切れます
表示切り替えスイッチON時。ホームページなどでもよく利用される「スライダー」形式で表示されます。画像は中央に寄り、幅が足りない箇所は見切れます

ONの場合、できるだけ写真を大きく見せようとします。縦列比率の関係で見切れるケースもあります。特に最近のスマートフォンは画面が縦に長いため、横向きで撮影した写真は極端に横長な写真となり、見切れることが多くなります。 高さについては最大で400Pxとなり、オーバーした部分が見切れる仕組みです。

一方でスイッチをOFFにする場合は以下のように見えます。

表示切り替えスイッチOFF時。写真全体を表示します。写真の幅いっぱいをテンプレートの枠に広げます。テンプレートの幅によっては画像が小さくなり見えにくい場合もあります。
表示切り替えスイッチOFF時。写真全体を表示します。写真の幅いっぱいをテンプレートの枠に広げます。テンプレートの幅によっては画像が小さくなり見えにくい場合もあります。

各入力フォームの幅いっぱいに写真全体を表示するように写真の表示サイズが変化します。見切れはなくなりますが全体を表示するため、テンプレートの設定によっては写真が極端に小さく表示される可能性もあります。 ある程度の大きさを維持したい場合は、テンプレート自作時に「幅」の設定をできるだけ大きく取るようにしてください。 枠組みの幅が広いほど表示可能なエリアが広がるため、結果として写真を大きく見せることができます。

キャラクター

今回使用したテンプレートは左側が幅3、右側が幅9です。幅3だと縦長の写真であればきれいに収まりますが横長の写真は難しいですね

またスイッチがOFFの場合、お気づきと思いますが複数枚の写真が添付されている場合はすべての写真を同時に表示します。

データ活用編

写真データはCSV出力や集計、検索に対応していません。唯一対応しているのがPDF出力になります。

集計可否CSV出力PDF出力文字検索

PDF出力は▲マークが付いています。これは複数枚まとめて添付した場合でも最初の1枚目のみ出力されるためで、すべての写真を出力できるわけではないため▲サインになっています。 写真の添付された日報をPDFに出力した例。次のようになります。

日報をPDFに出力
日報をPDFに出力

1つの枠には1枚までしか写真は出力されません。もしPDFに出力して保存することを想定している場合は、写真入力フォームを複数用意してそれぞれの入力フォームに1枚だけ写真を添付するように してください。また、極端に小さい幅だと最小画像サイズがあるため、それを下回った場合に枠線からはみ出すことがあります。PDF出力を前提とする場合、写真入力フォームの幅は最低でも5以上を取るようにしてください。

写真データをまとめてダウンロード

Version 1.12.0から日報に添付された画像の一括ダウンロードが可能になりました。CSV出力オプションから「写真・ファイル等を出力する」をONにします。

日報に添付されたバイナリーデータをダウンロードするオプションの設定
日報に添付されたバイナリーデータをダウンロードするオプションの設定

これで写真入力フォーム署名入力フォームファイル入力フォームそれぞれののデータがCSV出力時にまとめてダウンロードされます。

ダウンロードしたCSV.zipを解凍すると、reportsというフォルダがあります。更にreportsの中は1件1件の日報ごとにフォルダ分けされます。各フォルダは「日報の日付+日報の文書ID」という名称になります。

キャラクター

たとえば202208300931_wQ9jKWAyAeflv7GXuPGfのようになります。 _が区切りで、前半が日付(年月日時分)、後半が文書IDです。

それぞれの日報フォルダの中に写真や署名・データファイルなどがまとめられます。

サンプルデータ

このページで使用した実際のサンプルをダウンロードできます

  • pdf.pdf (58 KB)
  • picture.pdf (513 KB)
  • 最終更新日: 2022/09/06
    nipoplusアプリ起動ボタン

    一切の企業情報を入力せずに手軽に体験できます

    • メール・パスワードの設定なしで体験可能(匿名機能
    • クレジットカードの登録も不要
    • Webアプリだからインストール不要
    nipoplusアプリ起動ボタン
    ios App Store
    Android Google Play Store