Bootstrapでタブレットでも入力しやすい画面を作る

（著者：サイボウズ 竹内 能彦）

はじめに

タブレットでkintoneアプリにレコード登録する場合、できるだけ操作数を減らしたいですよね。
今回はマスターアプリからレコードの内容を参照して、登録するサンプルを紹介します。

具体的には以下の流れになります。

1. 登録用アプリに参照用アプリのレコードの内容を表示します（タブ切り替えで表示する内容を変更できます）
   
2. 個数を選択して、「選択！」ボタンをクリックすると
3. 登録用アプリにレコードを登録します
4. 登録したデータの詳細画面に移動します

別アプリの内容取得にはルックアップフィールドを使うこともできますが、操作数を減らすためにカスタマイズビューを使います。
また、簡単に綺麗な画面を作りたいので、Bootstrapを使います。
 

Bootstrapとは

Webページを作成するフロントエンド用のフレームワークです。
HTMLやCSSの知識がなくてもお洒落なWebページを作成できます。（とは言っても最低限の知識は必要です）
もうすぐv4がリリースされそうですが、まだβのため今回はv3.3.7を利用します。

 

デモ環境

まず、結果から確認しましょう！

https://dev-demo.cybozu.com/k/278/

※デモ環境についての説明、アカウントとパスワードはこちら

 

kintone アプリ（参照用）の作成

フォーム設定

下記のフィールドをフォームに設置します。

フィールド名	フィールドタイプ	フィールドコード	備考
種類	ドロップダウン	type	選択肢は「文房具」、「パソコン」、「その他」を用意
品名	文字列（1行）	name
型番	文字列（1行）	typenum
画像	添付ファイル	image

 

アプリIDの確認

参照用アプリのアプリIDはこの後の設定で利用するのでメモしましょう。
アプリIDはURLから確認できます。
作成した参照用アプリを開きます。そのURLが「https://{subdomain}.cybozu.com/k/789/」の場合、「789」がアプリIDになります。

 

kintone アプリ（登録用）の作成

フォーム設定

下記のフィールドをフォームに設置します。

フィールド名	フィールドタイプ	フィールドコード
品名	文字列（1行）	name
型番	文字列（1行）	typenum
個数	数値	count

 

カスタマイズビューを設定

一覧画面から以下のコードを設定したカスタマイズビューを作成します。一覧名は「登録画面」にしてください。

 

JS/CSS設定

「アプリの設定 > JavaScript / CSSでカスタマイズ」の「PC用のCSSファイル」に以下のURLを設定します。

• https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

「アプリの設定 > JavaScript / CSSでカスタマイズ」の「PC用のJavaScriptファイル」に以下のURL/ファイルを設定します。

• https://js.cybozu.com/jquery/3.2.1/jquery.min.js
• https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
• https://kintone.github.io/kintoneUtility/kintoneUtility.min.js
• 以下のサンプルコードをエディタにコピーして、5行目を参照用アプリのアプリIDに書き換えます。
  ファイル名を「sample.js」、文字コードを「UTF-8N」で保存、アップロードします。
  ※ファイル名は任意ですが、ファイルの拡張子は「js」にしてください

 

kintone アプリ（参照用）にレコード登録

アプリが作成できたら、先ほど作成した参照用アプリにレコード（データ）を登録します。

 

確認

レコードが登録できたら、登録用アプリの一覧「登録画面」を開きましょう。

参照用アプリのレコードの内容が表示されていればバッチリです！
個数を選択して、「選択！」ボタンをクリックしてみましょう。

 

注意点

画面を開くたびにREST APIを使って参照用アプリのデータ（文字と画像）を取得しています。
取得するデータ数が多い場合や利用する頻度が高い場合はAPIのリクエスト上限に達する可能性があります。
そのような場合は画像をAWSなどのWebサーバーに設置するなどの対策をご検討ください。
参考）よくあるご質問 APIリクエスト数を超過した場合、直ちに使えなくなりますか？

 

おわりに

Bootstrapを使うことで簡単に綺麗な画面を作ることができました。
今回のサンプルは画像を参照しながら簡易入力するというサンプルとしても利用できそうです。ぜひ使いやすく改良してください！