検索
Close
カテゴリー内の他の記事

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

作成日
更新日

このカスタマイズで利用している kintone Utility Library for JavaScript は現在推奨されていません。今後は kintone JavaScript Client (@kintone/rest-api-client) を利用するように書き換えてください。

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

はじめに

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

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

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


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

デモ環境

こちらのデモ環境から実際に動作を確認できます。
https://dev-demo.cybozu.com/k/278/

デモ環境の利用は、事前に cybozu developer network のメンバー登録が必要です。画面右上の「サインイン」ボタンよりご登録ください。
デモ環境アカウントとパスワードは、サインイン後にこちらのページでご確認ください。

Bootstrapとは

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

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

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

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

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