カテゴリー内の他の記事

Kintone Portal Designer でポータルから添付ファイルをアップしよう

(Author : Fuji Business International Mamoru Fujinoki)

Index

はじめに

kintone のポータル画面では、社員へのアナウンスメントや頻繁に使用するアプリの表示、アプリへアクセスするリンク等を集約できます。
例えば、経費精算アプリを作成すると経費の情報にレシートを添付して、社員が容易に会計に提出することが可能となります。
本来のやり方ですと、ポータルに経費精算アプリへのリンクを設置し、経費精算アプリ画面に遷移してから、
レコードを追加して、レシートの画像を添付ファイルとしてアップロードしてレコードを保存するといった複数のステップが必要でした。
ただ、本来のやり方では、頻繁に経費精算が必要な社員にとっては操作が多く、思った以上に手間がかかってしまいます。
そこで、今回はポータルをカスタマイズして、ポータル上で経費精算ができ、レシートがドラッグ&ドロップでアップロードできるようにすることで操作の手間を減らし、業務改善を実現したいと思います。

経費精算アプリの作成

下記画像および、フィールドの設定を参考に経費精算プリを作成します。

フィールドの種類 フィールド名 フィールドコード
文字列(複数行) 概要 description
添付ファイル レシート receipt
数値 費用(税抜) cost
日付 日付 date

Kintone Portal Designerの設定

こちらの記事(Kintone Portal Designer を使ってポータルをデザインしよう)を参考に Kintone Portal Designer をインストールします。

インストール後、kintone のポータルを表示して、ツールバーの「</>」ボタンをクリックして、起動します。

以下のような画面が表示されますので、それぞれのタブの項目を以下を参考に HTML, CSS, JavaScript を編集して、保存します。

HTML の編集

以下を参考に HTML を編集し、保存します。

CSS の編集

以下を参考に CSS を編集し、保存します。

JavaScript の編集

以下を参考に JavaScript を編集し保存します。今回は、MDN Web Docs の「File drag and drop」を参考にしています。

動作の確認

Design Portal にて上記の設定を保存し、左上のスイッチにて Design Portal を有効化します。

kintone のポータル画面を開き、ページを更新すると以下のような画面が表示されます。

必要事項を入力し、経費精算用のレシートのファイルをドロップして、登録ボタンをクリックすると上記で作成した経費精算アプリに新規レコード登録されます。

経費精算アプリを開き、レコードが登録されていれば成功です。

他のウィジェットを表示させる

Kintone Portal Designer の「Export」ボタンをクリック後、表示されたサブメニューで「Export as JavaScript (Desktop)」をクリックします。すると、作成したポータルデザインの JavaScript ファイルがダウンロードフォルダーにダウンロードされます。

次にポータル画面に戻り、ギアアイコンをクリックして、「kintone システム管理」をクリックして、設定画面に入ります。

「カスタマイズ」ー「JavaScript/CSS でカスタマイズ」メニューをクリックして、カスタマイズ設定画面に入ります。

PC 用の JavaScript ファイルの「アップロード」ボタンをクリックして、先ほどダウンロードしたポータルデザインの JavaScript ファイルをアップロードし、保存します。

Kintone Portal Designer の画面の戻り、Default Portal のスイッチをオフにします。

 再びポータル画面に戻ると他のウィジェットも同時に表示されるようになります。

尚、表示されるウィジェットをカスタマイズする場合は、右上の「・・・」をクリックし、「ポータルの設定」を選択します。

「ポータルの表示するコンテンツ」より、表示したいコンテンツをチェックして、保存します。

コードの解説

こちらの関数は、ファイルが、div エレメントの Class 名、drop_zone 内にドロップされた時に呼ばれる関数です。

こちらのメソッドで、ファイルをドロップ時に、ファイルが開くのを防止しています。

「ev.dataTransfer.items」インターフェースでドラッグされた全てのデータのリストを所得して、タイプがファイルの場合のみデータの内容を取得します。(こちらのインターフェースは最新のブラウザー Chrome 等でサポートされています。)

ev.dataTransfer.files」インターフェースにて、ドラッグされたファイルのリストを取得しています。(このインターフェースは旧式のブラウザーでサポートされています。)

こちらのコードは、ファイルが div エレメントの Class 名、drop_zone 内にドラッグされた時に呼ばれる関数です。こちらでも、ファイルが開くのを防止しています。

こちらの関数では、div エレメントの Class 名、drop_zone 内にドロップされたファイルおよび、入力された内容を kintone へ新規レコードとして登録しています。また、{kintone App ID}には、お使いの kintone で作成した経費精算アプリの ID を設定してください。

こちらのコードで、経費精算の各フィールドの値を取得し、レコードを新規作成しています。
こちらでは、ファイルのデータは保存していません。

新規レコード作成に成功した後、レコード ID を取得し、ファイルをアップロードする関数を呼び出します。

こちらの関数で、ファイルアップロードの kintone API を呼び出し、ドロップされたファイルデータを kintone にアップロードします。
アップロード成功の際に返される File Key の値を取得します。
その後、レコード ID と File Key を紐づけるためにレコードを更新する関数を呼び出します。

レコード ID と File Key を紐づけるための関数です。

参照サイト

まとめ

普段、頻繁に使用するアプリは、本来 kintone ポータルに表示してリンクをクリックすることで運用が可能でした。
しかし、該当のアプリのページに移行して運用する必要がありました。
Kintone Portal Designer をカスタマイズすることで、ポータル画面にいながら経費精算のようにレシートの画像ファイルをドラッグアンドドロップでアップロードし、該当のアプリにレコードを追加することが可能になり、システム運用の改善につながります。

この Tips は、2021 年 10 月版 kintone で確認したものになります。

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

サインインしてコメントを残してください。