こんにちは！
ジョイゾーのプラグインお問い合わせ担当の伊藤です。
日頃より弊社製品をご利用いただき、誠にありがとうございます。

みなさんは、自社環境に「ジョイゾーの手書き２プラグイン」を導入されていますか？
ユーザー様からは日々、嬉しいお声をいただく一方で、

「手書き２プラグインの設定方法がわかりにくい」
「設定が正しくできているか不安」
「サンプルを見ながら試してみたい」

といった切実なお悩みをいただくこともあります。
もちろん、公式サイトでは基本的な設定手順を公開しておりますが、「文字や図だけではイメージが湧きにくい」と感じる方もいらっしゃるかもしれません。

そこで今回は、設定済みのテンプレートアプリとサンプルデータをご用意しました！

実際に動くアプリを確認しながら、設定のコツを詳しく解説していきます。
手書き２プラグインの機能について詳しく知りたい方は💡こちらのブログをご覧ください。

「どのフィールドに、何を設定すればいいのか」
「この設定を変えると、動きはどう変わるのか」

記事の手順通りに進めるだけで、完成形をベースに一つずつ仕組みを紐解いていただけます。

• これから手書き２プラグインを使ってみたい方
• より深く活用方法を理解したい方
• 過去に設定でつまずいてしまった方

そんな方々にぴったりの内容です。ぜひ最後までご覧ください！

 なぜ「手書き２プラグイン」が重要なのか？

設定方法を詳しく解説する前に、少しだけ「ジョイゾーの手書き２を使うと、現場がどう変わるのか」というお話をさせてください。

実はお問い合わせをいただく中で「設定の仕方がわからない」というお悩みと同じくらい多いのが
「手書き書類の管理をデジタル化したい」という切実な声です。

本プラグインを導入することで、2つの大きな課題が解決します。
日々ユーザー様をサポートしている「お問い合せ担当」の目線から、そのポイントを解説します！

1.その場で署名をデジタル化、関連情報もまとめて一元管理へ

同意書や受領書、作業完了報告書などの書類は、最後にお客様の署名をいただいて初めて完結しますよね。
でも実際の現場では、署名をいただいてから完了までに、ちょっとしたラグが生まれがちです。
「元の情報、どこに保存してたっけ？」「書類と案件管理が別々のシステムに存在していて、両方を開いて照合するのが手間…。」そんな経験、ありませんか？

しかし、「手書き2プラグイン」なら、タブレットをお客様にお渡ししてその場で署名していただくだけで、データは即座にkintone内へと記録されます。
案件情報から書類、署名までがすべてひとつの場所に集約されるため、「あの書類どこだっけ」と複数のシステムを探し回る必要がなくなるだけでなく、紙の印刷や持ち帰ってのファイリングといった手間も一切なくなります。

2.撮った写真にそのまま書き込み、現場の状況を一目で共有

たとえば建設現場や設備点検の作業中、気になる箇所を見つけたとき、どうやって記録・共有していますか？
「右上から30センチのところに傷があります」「入口から見て奥の壁にひび割れがあります」と文章で打ち込んでも、読んだ相手には正確なイメージがなかなか伝わりにくいものです。
かといって、別途メモを取ったり、写真と説明文を別々に管理したりするのも、手間がかかりますよね。

手書き2プラグインは、kintone上で動く「手書き入力」に対応したプラグインです。タブレットのカメラで現場の写真を撮影したら、その画像を背景にして、指やペンで直接書き込みができます。撮影から書き込みまでがひとつの画面で完結するので、作業の流れを止めずにそのまま記録できるのが大きなポイントです。

たとえばこんな使い方ができます。

• ひび割れた箇所に赤丸をつけて、一目で場所を示す
• 配置図の写真に矢印で「ここに棚を設置」とメモを加える

文章で説明するよりも圧倒的に早く、そして正確に、現場の状況を相手に伝えることができます。
写真と書き込みはそのままkintoneに保存されるので、後から見返すときも情報がひとまとまりになっていて、とても確認しやすくなります。

【事前準備】テンプレートを自身の環境に取り込もう！

いよいよ本題です。配布するテンプレートを使って、実際に設定を紐解いていきましょう。
「設定手順を読んでもピンとこなかった…」という方も、実際に動く設定画面を見ることで「なるほど、こういうことか！」と腑に落ちるはずです。
※ここでは事前に「手書き２プラグイン」をkintoneに読み込んでいる想定でご紹介します

事前準備

まずは以下のURLからファイルを読み込んでください。

本ファイルを解凍していただきファイルの内容についてご確認ください。

テンプレートアプリのインポート手順

①kintoneのポータルで、アプリにある+の［アプリを作成する］アイコンをクリックします。
※＋のアイコンが確認できない場合、アプリの作成権限がない、スペースでのアプリ作成権限がないため権限の付与をお願いします。

②kintoneアプリストア画面で、［テンプレートファイルを読み込んで作成］をクリックします。
③［テンプレートファイルを読み込んで作成］を押下したら、［参照］をクリックして、読み込むテンプレートファイルを指定します。
④［アプリを作成］を押下します。

【実践】手書き２を設定してみよう！

アプリの準備ができたら、
アプリ「手書き2（テンプレート）」の設定画面を開き、[プラグイン] から [手書き2] の設定画面を開いてみてください。

今回は、同じアプリの中で

1. 背景画像を使わず、そのまま署名してもらう設定
2. 契約書や帳票の画像を背景にして、その上に署名してもらう設定

この2パターンを用意しています。
「どの設定が、実際のどんな動きにつながっているのか」を、順番に紐解いていきましょう。

①そのまま署名をもらう設定

まずは、背景画像を使わずに、レコードに直接サインを書いてもらう設定です。
受領サインや確認サインなど、シンプルに署名をもらいたい場面で使いやすい構成です。

詳細なプラグインの設定の前に、フォーム欄に[スペース]を置いておきましょう。
ここが実際に手書きを行う場所になります。

ここが重要！：スペースには必ず「要素ID」を設定しておきましょう。
設定をしないと手書き２プラグインの設定で対象のスペースフィールドが表示されません。
設定は、フォーム設定画面で各スペースの歯車アイコンから [設定] → [要素ID] で行えます。
次はプラグインの設定です。

①-1 「手書き画像保存先ファイルフィールド」

最初に設定するのは、手書きした内容をどこへ保存するかです。
[手書き設定] の [手書き画像保存先ファイルフィールド] には、「ご署名（背景なし）」 を指定します。

ここで保存された手書きデータは、添付ファイルフィールドに画像として保存されます。
手書き2では、手書きした内容はpng形式の画像ファイルとして添付ファイルフィールドに保存されます。 

なお、[このフィールドを手書き画像の保存用のみで利用する] のチェックは、その添付ファイルフィールドを署名画像専用として使うかどうかの設定です。
基本的には専用保存先として使うならチェックありで問題ありません。
一方で、編集画面から画像を削除したい運用にしたい場合は、チェックを外しておくとよいです。

①-2 「手書き画像保存後更新フィールド」

次に、手書き画像が保存されたタイミングで、別のフィールドも連動して更新する設定です。
[手書き画像保存後更新フィールド] にはチェックボックスフィールドを、[値] には「署名済み」を指定します。

この設定を入れておくと、署名が保存された瞬間に「署名済み」という状態も同時に記録できます。
あとから一覧で「未署名のレコードだけ確認したい」「署名完了レコードを絞り込みたい」といった運用がしやすくなるので、実務上かなり便利です。

①-3 「手書き用スペースフィールド」

[手書き用スペースフィールド] には 「space1」 を指定します。
これが、先ほど説明した実際に手書きを行う場所になります。

①-4 そのほかの設定

あとは、必要に応じて以下を設定します。

• 手書きスペースサイズ
• 手書きペン初期サイズ
• 手書きペン初期カラー
• 背景画像ファイルフィールド

今回の「背景画像なし」パターンでは、背景画像ファイルフィールドは未設定でOKです。
また、スペースサイズやペン設定も、まずは初期値に近い状態で問題ありません。背景画像を使わない場合は、ここは細かく作り込まなくても運用しやすいはずです。

②帳票や契約書の上に署名をもらう設定

次は、契約書や申込書の画像を背景にして、その署名欄へサインしてもらう設定です。
紙の帳票にサインをもらっていた業務を、そのままkintone上へ載せ替えたい場合に向いています。
まずは、プラグイン設定画面の[設定]の右隣にある「＋」ボタンを押して、新しい設定を追加しましょう。

②-1 保存先・表示場所の基本設定

基本的な設定方法は、背景なしの場合と同じです。
[手書き画像保存先ファイルフィールド] には 「ご署名（背景あり）」 を、[手書き用スペースフィールド] には 「space2」 を指定します。

また、背景なしの場合と同様に、スペースフィールドにはあらかじめ要素IDを設定しておく必要があります。
要素IDが未設定だと、プラグイン設定画面で対象のスペースフィールドが表示されないため注意してください。

②-2 背景画像の設定

背景あり版で追加になるのが、[背景画像ファイルフィールド] の設定です。
ここでは 「元画像」 用の添付ファイルフィールドを指定します。

今回のサンプルでは、この「元画像」に契約書テンプレートを添付し、その画像の署名欄へサインしてもらう想定です。
背景画像を使うことで、「ただ署名する」のではなく、「帳票のどこに署名したか」がわかりやすくなります。

②-3 見やすさ・書きやすさの設定

背景画像あり版では、見た目の設定が少し重要です。

契約書のような帳票画像を表示する場合、標準の500px × 200pxだと小さくて見づらくなりやすいため、[手書きスペースサイズ] はカスタムを選び、最大サイズの「1000px × 1000px」に設定するのがおすすめです。
また、契約書の署名欄に書く場合は、線が太いと文字がつぶれやすいため、[手書きペン初期サイズ] は細いにしておくと署名しやすくなります。

③実際の動きを見てみよう！

ここまでの内容を踏まえて、以下のように設定を行いました！

ここまで設定できたら、アプリの設定を保存し、アプリを更新して実際に動きを確認してみましょう。
新規レコードを作成し、保存ボタンを押すと手書き２のフィールドが表示されます。
レコードの追加/編集画面では表示されないのでご注意ください。

背景画像なし版では、そのまま署名を書いて保存すると、署名画像が「ご署名（背景なし）」に保存され、同時にチェックボックスへ「署名済み」が入ります。

背景画像あり版では、先に 「元画像」フィールドへ契約書テンプレート画像を添付しておく必要があります。

ここで、【事前準備】でダウンロードしておいた雇用契約書サンプルを「元画像」フィールドへ添付しましょう。

そのうえでレコードを開くと、背景として表示された契約書画像の上に署名を書き込めます。

つまり今回は、プラグイン設定だけで完結するのではなく、背景画像あり版ではレコード登録時に元画像を添付する運用も必要です。
ぜひ、実際にポチポチと操作しながら、手書き２プラグインの運用イメージを体感してみてください！

自社のアプリに適用するためのステップ

テンプレートで動くイメージが持てたら、自社環境へ適用してみましょう！

ステップ１：どの業務で使うか決める

まずは、手書き2をどんな業務で使いたいか整理してみましょう。

• レコードに直接署名をもらうのか
• 契約書や申込書などの画像に署名をもらうのか
• 署名済みの状態もあわせて管理したいのか

このあたりを先に決めておくと、必要な設定が見えやすくなります。

ステップ２：署名後の運用を決める

「運用を設計する」ために、署名したあとにそのデータをどう扱うかを考えておくと良いです。

• 署名画像だけ保存できればよいのか
• 「署名済み」とわかる状態管理も必要か
• 契約書や申込書の画像を背景として残したいか

ここを先に整理しておくと、必要なフィールドや設定が見えやすくなります。
特に背景画像ありで使う場合は、背景として使う元画像をどのようにレコードへ登録するかも、あわせて決めておくのがおすすめです。

ステップ3：プラグインを設定して試してみる

準備ができたら、自社アプリに手書き2プラグインを追加し、【実践】で紹介した内容に沿って設定します。

背景画像なしで使う場合は、そのまま署名の保存動作を確認しましょう。
背景画像ありで使う場合は、背景画像用フィールドに帳票画像を添付したうえで、署名欄へ書き込めるか試してみてください。

テンプレートで一度動きを確認してから自社アプリへ適用すると、実際の運用イメージがつかみやすくなります。

まとめ

いかがでしたでしょうか。
今回は「設定が難しそう…」という不安を解消するために、テンプレートアプリを使って、手書き２プラグインの設定ポイントを紐解いてきました。

本プラグインを使うと、署名・写真への書き込み・帳票への記入といった作業を、その場でkintoneに記録し、関連する情報とまとめて管理できます。

紙でやり取りしていたときに起こりがちだった「あとで探せない」「別の場所に保存されていて見つけにくい」といった課題も、レコードと一緒に残せることで解消しやすくなります。
手書き2プラグインは、現場の記録や確認業務を、よりわかりやすく・スムーズに進めるための心強い味方です！

まずは今回配布したテンプレートを触ってみて、「自社のアプリならどう活用できるか」をイメージしていただければ幸いです。もし設定の中で「ここがうまくいかない」「こんな使い方はできる？」といった疑問が出てきましたら、いつでもお気軽にお問い合わせください。

実際の活用イメージをもっと具体的に知りたい方は、弊社プラグインをご利用いただいているお客様の「導入事例」も多数公開しておりますので、ぜひあわせてご覧ください。

また、ジョイゾーのプラグインはすべて30日間の無料お試しが可能です。
「うちの会社の業務フローに合うかな？」と迷ったら、まずは無料でお試しいただき、実際の操作感を体感していただければ嬉しいです。
ご不明点等ございましたら、よくある質問をご参照ください。
よくある質問をご覧いただいても解決しない場合は、お気軽にお問い合わせください。
また、サービスサイトの画面左下に表示されるチャットサポートからもお問い合わせいただけます。
サポート担当へリアルタイムで問い合わせることも可能ですので、ぜひご活用ください。