スマートフォン用APIを使ってみよう！（2016年12月アップデート版）

（著者： サイボウズ 三宅 智子）

Index

• はじめに
• アプリの準備
• カスタマイズ
• サンプルプログラム（まとめ）
• 最後に

はじめに

2016年12月のアップデートで以下のスマートフォン用のkintone JavaScript APIが追加されます。今回は「問い合わせ管理アプリ」を使って、それらのAPIを触ってみたいと思います。
まだ部分的ではありますが、PC同様の動きをスマートフォンでも実装できるようになり、活用の幅が広がりました！

本記事では、以下の３つのカスタマイズをご紹介します。

　①ラジオボタンの選択によって、フィールドの表示非表示を切り替える（レコード追加/編集/詳細画面）
　②ドロップダウンフィールドの値を変更に合せて、テーブルの行追加をする（レコード追加/編集画面）
　③アラートを表示する（レコード保存実行前）

使用API

次のスマートフォン用の新機能をふんだんに使っております！

• イベント
  • レコード追加画面のフィールド値変更時イベント　（①, ②で使用）
  • レコード編集画面のフィールド値変更時イベント　（①, ②で使用）
  • レコード追加画面の保存実行前イベント   （③で使用）
  • レコード編集画面の保存実行前イベント　（③で使用）

• 操作
  • フィールドの表示/非表示を切り替える（追加画面） （①で使用）
  • フィールドの表示/非表示を切り替える（編集画面） （①で使用）
  • フィールドの表示/非表示を切り替える（詳細画面） （①で使用）
  • テーブルの行の追加/削除（レコード追加画面）　（②で使用）
  • テーブルの行の追加/削除（レコード編集画面）　（②で使用）

※本記事のサンプルプログラムでは、比較検証用にPC用のAPIも使用しています。

アプリの準備

今回はアプリストアにある「問い合わせ管理アプリ」を利用します。

アプリの具体的な作成方法は、以下のヘルプをご覧ください。
アプリをはじめから作成する ～FAQアプリを作ってみよう～

利用するフィールドとフィールドコードは以下の通り設定してください。
※アプリストアのアプリから追加しているフィールドもあります。

フィールド名	フィールドコード	フィールドタイプ	アプリストアのアプリとの比較
問い合わせ種別	QType	ラジオボタン
その他	Other	文字列（一行）	新規追加
対応種別	CType	ドロップダウン	新規追加
-	Table	テーブル
対応日時	Date	日時	フィールドコード修正
対応種別	CType2	ドロップダウン	新規追加、フィールドコード修正
対応詳細	Content	文字列（複数行）	フィールド名/フィールドコード修正
添付ファイル	File	添付ファイル	フィールドコード修正

カスタマイズ

さて、ここからは追加されたAPIを使って、ひとつずつ「問い合わせ管理アプリ」にカスタマイズを加えていきましょう。

①ラジオボタンの選択によって、フィールドの表示非表示を切り替える

レコード追加/編集/詳細画面で、フィールドの表示/非表示を切り替えることができるようになったので、そのカスタマイズを実装したいと思います。

• フィールドの表示/非表示を切り替える（追加画面）
• フィールドの表示/非表示を切り替える（編集画面）
• フィールドの表示/非表示を切り替える（詳細画面）

カスタマイズ例

• ラジオボタンの選択肢によって、文字列フィールドの表示/非表示を切り替える

<PCでの成功イメージ>

<スマートフォンでの成功イメージ>

　

サンプルプログラム

問い合わせ種別のラジオボタンで「その他」を選択したときのみ、文字列フィールドの「その他」が表示されるようにカスタマイズしています。
フィールドの表示/非表示の切り替え方法は回答の条件によって別フィールドの表示/非表示を切り替えるを参照しています。

「問い合わせ管理アプリ」に、以下のJavaScriptファイルを適用させてください。ファイルの適用方法についてはこちらをご参照ください。
※忘れずにPC用のJavaScriptファイル、スマートフォン用のJavaScriptファイル、両方の欄に適用してください。

②ドロップダウンフィールドの値を変更に合せて、テーブルの行追加をする

今回、PC同様にスマートフォン用にフィールド値変更時イベントが追加されたので、そのイベント発火時に、テーブルの行の追加をしてみたいと思います。

• レコード追加画面のフィールド値変更時イベント
• レコード編集画面のフィールド値変更時イベント
• テーブルの行の追加/削除（レコード追加画面）
• テーブルの行の追加/削除（レコード編集画面）

カスタマイズ例

以下のカスタマイズを実装します。

• ドロップダウンフィールドの値をドロップダウンフィールドの選択肢を変更する毎に、テーブルの行を末尾に追加する
• ドロップダウンフィールドの値をテーブル内のドロップダウンフィールドにも引き継ぐ

<PCでの成功イメージ>

<スマートフォンでの成功イメージ>

サンプルプログラム

ドロップダウンの選択を変更した時点で、changeイベントが発火してテーブルの末尾に行が追加されるようにカスタマイズしています。

「問い合わせ管理アプリ」に以下のJavaScriptファイルを適用させてください。ファイルの適用方法についてはこちらをご参照ください。
※忘れずにPC用のJavaScriptファイル、スマートフォン用のJavaScriptファイル、両方の欄に適用してください。

③アラートを表示する

こちらもPC同様に、スマートフォンでもレコード追加/編集画面の保存実行前イベントを使えるようになったので、Cybozu CDNにもあがっているSweetAlertのライブラリを使ってアラートを表示させたいと思います。

• レコード追加画面の保存実行前イベント
• レコード編集画面の保存実行前イベント

カスタマイズ例

• レコード保存実行前に、アラート表示をする

<PCでの成功イメージ>

<スマートフォンでの成功イメージ>

サンプルプログラム

レコードの保存ボタンを押すと、アラート表示させるというカスタマイズです。コーディングにおいての注意点は２つです。

1.
PCの場合は、JavaScriptファイルもCSSファイルもアップロードする場所がkintoneの設定画面上にありますが、スマートフォンの場合は、CSSのファイルをアップロードする場所が現状ありません。
ということで、レコードの追加/編集画面でSweetAlertというライブラリのJavaScriptファイルとCSSファイルをまとめて読み込むように設定しています。

2.
アラート表示するという部分は、SweetAlert-を使って-メッセージをスタイリッシュに表示させようを参照しています。
リンク先の記事にもあるようにSweetAlertをそのまま記述すると、OKボタンを押す前に画面がリロードしてしまうので、非同期処理としてPromiseの書き方を用いています。つまづきやすいポイントだと思います。

「問い合わせ管理アプリ」に以下のJavaScriptファイルを適用させてください。ファイルの適用方法についてはこちらをご参照ください。
※忘れずにPC用のJavaScriptファイル、スマートフォン用のJavaScriptファイル、両方の欄に適用してください。
※CSS読み込みをしている以下のコード部分は、kintoneのアップデートのタイミングでheadの要素IDが変更になると動かなくなる場合がありますので、ご注意ください。
　var head = document.getElementsByTagName('head')[0];

サンプルプログラム（まとめ）

上記３つのカスタマイズのサンプルプログラムをまとめて記述すると以下のようになります。

最後に

今回は新規追加になったスマートフォン用APIの活用方法をご紹介しました。スマートフォンならではの使い方はまだまだ他にもあると思うので、ぜひ違う使い方も試してみてください。

PC/スマートフォン早見表もアップデートされています。APIの索引として、ご活用ください。

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