署名(イラスト)入力フォーム

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

署名入力フォームとは

署名入力フォームを使えば手書きの署名(サイン)が入力できるフォームを日報に埋め込むことができます。 PCではマウスを使って描画できますが、操作性の観点からタブレットやタッチパネル対応のPCで利用を推奨しています。

署名モードとして日報テンプレートに追加すると署名サイズのキャンパスが表示されます。スタイラスペンなどがあればよりスムーズに署名を書くことができます。

iPad miniとApple Pencilを使って手書きの署名をタブレットに書き込んでいる様子
iPad miniとApple Pencilを使って手書きの署名をタブレットに書き込んでいる様子

スマートフォンからも利用できますがその際は画面を横に向けて使用してください。ただやはり画面サイズの制限があるため、操作性はタブレットに比べると劣ります。

キャラクター

タブレットで署名する記事も併せて御覧ください

署名のキャンパスエリアを拡大すれば手書きのイラストエリアとしても利用できます。署名・イラストどちらにも対応しているのが特徴です。署名用にするか、イラスト用にするかは初期設定で選択できます。

署名入力フォームの初期設定

署名入力フォームの初期設定項目で特に注目すべき項目はキャンバスサイズと幅です。 キャンバスサイズは署名サイズと全画面サイズから選べます。全画面サイズを選ぶとイラスト用として振る舞い、描画時にカラーパレットや線の太さなどを変えるボタンが表示されるようになります。 一方で署名の場合はカラーパレットなどのボタンが表示されません。 また幅については極端に狭いと描画後の署名やイラストが小さくなってしまうため、最低でも幅4以上はキープするようにしてください。

共通の設定項目については「各種入力フォームの共通設定項目」を参照してください。 以下は本入力フォームにのみ存在する設定項目です

名称説明
入力必須これがONの場合、イラストが描画されていないと日報の提出ができません
キャンバスサイズ署名サイズと全画面サイズから選択できます。署名用であれば署名サイズを選択してください。手書きの地図など、イラスト目的の場合は全画面サイズを選択してください

署名を含んだ日報テンプレートを作成

署名入力フォームを3つ含んだ日報テンプレートを作成しました。1つは極端に幅を狭くしています。 これはアンチパターンとして紹介するためで、本来は幅を4以上にすることを推奨しています。

署名入力フォームだけで構成された日報テンプレートを作成しました。この例をもとに入力・出力画面をご紹介していきます
署名入力フォームだけで構成された日報テンプレートを作成しました。この例をもとに入力・出力画面をご紹介していきます

また、下段はイラスト用として設定しています。イラスト用と署名用の違いについても次の章で詳しく見ていきます。

署名入力フォームの入力画面

署名入力フォームを含んだ日報を作成する画面イメージは次のようになります。なお、以下のサンプル画像はすでに署名やイラストを書き終えたあとの例です。

入力画面イメージ
入力画面イメージ

幅3の領域に書かれた署名は非常に小さく表示され、一方で幅9の領域では署名が比較的大きく表示されていることが確認できます。 バランスを見ながら社内でちょうどよいと思うサイズを模索してください。公式NipoPlusでは署名の推奨幅を4〜6としています。

署名もイラストもタッチパネルから自由に描けるという点では同じですが、イラストの場合は線の色や太さも調整できます。 対する署名は黒文字限定で、且つ先の太さも固定です。それぞれの入力画面の違いを実際にみてみましょう。

署名サイズのキャンパスについて

さて、署名を実際に書くウインドウもみてみましょう。署名作成ボタンをクリックするとポップアップで署名入力用のキャンバスが表示されます。

署名入力画面イメージ。キャンパスがポップアップで表示され、そこに署名を書きます。
署名入力画面イメージ。キャンパスがポップアップで表示され、そこに署名を書きます。

スマートフォンでも署名エリアは表示できますが、スマートフォン本体を横向きにしないと全体が表示できませんので注意してください。スマートフォンの横向きの枠を用意していないため例示は省略させていただきます。 署名のキャンパスサイズはS・M・Lの3段階で調整できます。タブレットであれば常にLサイズで良いです。一方でスマートフォンの場合は画面サイズによっては署名キャンパスがはみ出してしまう場合があります。 小さいスマートフォンの場合は画面サイズに応じて自動でキャンバスサイズがSかMに切り替わります。

イラスト用のキャンパスサイズについて

キャンパスサイズをイラスト用にした場合は、描画可能な領域が署名に比べてかなり広くなります。

イラスト用キャンバスの画面。カラーパレットや線の太さを調整するボタンなどが表示されている
イラスト用キャンバスの画面。カラーパレットや線の太さを調整するボタンなどが表示されている

スマートフォンとタブレットでは画面サイズが異なるため、使用できるキャンバスのサイズも大きく異なります。 キャンバスをオープンするときの画面の向きでキャンバスが自動作成されます。スマートフォンの場合は縦向きでキャンバスを開くと縦長のキャンパスになります。 横向きのキャンパスが必要な場合は予めスマートフォンを横向きにした状態でキャンパスを開いてください。

キャラクター

そもそもこの機能はタブレットやタッチパネル対応のPCで利用を想定していますのでスマホは少し使い勝手が悪いです

署名入力フォームを受け取った画面

署名入力フォームを含んだ日報を受け取り、画面に表示した例です。特筆すべき点は有りません。 素直に手書きの署名がそのまま日報に埋め込まれて表示されます

署名入力フォームを含んだ日報を受信したときの見え方
署名入力フォームを含んだ日報を受信したときの見え方

データ活用編

署名入力フォームではPDFへの出力に対応していますが、それ以外の出力や検索には対応していません。

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

署名をPDFに出力する

なお、PDFに出力したときはこのように表現されます

署名入力フォームを含む日報をPDFに出力したときの画面
署名入力フォームを含む日報をPDFに出力したときの画面

アンチパターンとして設定した幅3の欄に書かれた署名は少しはみ出してしまっている事がわかりますね。このような理由から署名の幅は4以上に設定を推奨しています。 一方で幅9はかなり余白が空いています。署名の場合はもう少し狭くても良いでしょう。 イラストのエリアは幅12としていますのでかなり大きくPDFに埋め込むことができている様子がわかります。

署名・キャンバスデータをまとめてダウンロード

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

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

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

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

キャラクター

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

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

サンプルデータ

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

nipoplusアプリ起動ボタン

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

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