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

フォローする

このTipsは2016年12月11日に公開予定のAPIを使っています。

(著者: サイボウズ 三宅 智子)

Index

はじめに

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

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

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

使用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での成功イメージ>

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

サンプルプログラム

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

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];

サンプルプログラム(まとめ)

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

 

最後に

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

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

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

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

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
HAYATO

手順の通り行いましたが、スマートフォンで

①ラジオボタンの選択によって、フィールドの表示非表示を切り替える(レコード追加/編集/詳細画面)

のみ動きません(②,③は動作しました)

PCでは3つ全て動きましたが、'mobile.app.record.edit.change.QType'のイベントが発火していないようです。
確認する方法はあるでしょうか。

Avatar
cybozu Development team

HAYATOさん

ご指摘いただきありがとうございます。cybozu developer network運営チームです。
以下の個所に表記ミスがあり、イベントが発火しておりませんでした。
誤 'mobile.app.record.create.QType'
正 'mobile.app.record.create.change.QType'

記事内でも上記の表記ミスを修正済みです。再度コードファイルを適用の上、ご確認お願い致します。大変失礼致しました。

Avatar
HAYATO

修正して正しく動作することを確認できました。ありがとうございます。

ログインしてコメントを残してください。
Powered by Zendesk