モバイルAPIの大幅アップデートの解説とモバイル版カスタマイズビューを試す

（著者：kintone エバンジェリスト 村濱 一樹）

Index

• はじめに
• デモ環境
• モバイルAPIに関するアップデート情報
• 今回の大幅アップデートによりできるようになること
• モバイル版カスタマイズビューを試す
• モバイル版カスタマイズビューの補足と注意事項
• おわりに

はじめに

2018年11月と12月（※）でモバイルに関するkintoneの大幅アップデートがあります。（※12月9日リリース）
特にモバイル版のkintone JavaScript APIのアップデートが多いです。

kintoneはPC版とモバイル版でビューが分かれており、従来のモバイルビューは保存成功後のイベントを取得できなかったりとできることが限られていたため、
カスタマイズ開発がしにくかった実情がありました。

しかし今回の11月12月のアップデートでは、モバイルでもかなりたくさんのことができるようになります。
中でも注目のモバイルでのカスタマイズビューサポートについて、早速どんなことができるか試してみました。 

デモ環境

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

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

モバイルAPIに関するアップデート情報

2018年11月と12月のモバイル版 JavaScript APIの追加情報のまとめは次のとおりです。

11月 APIアップデート内容

• レコード追加画面の保存成功後のイベント（mobile.app.record.create.submit.success）
• レコード編集画面の保存成功後のイベント（mobile.app.record.edit.submit.success）
• プロセス管理のアクション実行イベント（mobile.app.record.detail.process.proceed）
• グループフィールドの開閉（kintone.mobile.app.record.setGroupFieldOpen）

11月 APIアップデート内容詳細はこちら

12月 APIアップデート内容

• レコードIDを取得する(kintone.mobile.app.record.getId)
• スペースフィールドの要素を取得（kintone.mobile.app.record.getSpaceElement）
• 関連レコード一覧の参照先のアプリIDを取得する(kintone.mobile.app.getRelatedRecordsTargetAppId)
• ルックアップフィールドの参照先のアプリIDを取得する（kintone.mobile.app.getLookupTargetAppId）
• アプリID取得（kintone.mobile.app.getId）
• グラフが表示されたときのイベント(mobile.app.report.show)

12月 APIアップデート内容詳細はこちら

モバイル版カスタマイズビューが使える機能（12月9日公開）

• モバイルビューでもPCビューと同じようにカスタマイズビューを利用できる機能
  本対応に伴い、カスタマイズビューの表示範囲が選択できるようになります。

kintoneの主要なアップデート に記載があります。

今回の大幅アップデートによりできるようになること

今回の大幅アップデートによる変化は大きく3つあると考えます。

1. レコード保存後の制御
   レコード保存前/保存後の処理ができるようになったことで、保存時にレコードのデータを加工するなど、細かな制御ができるようになります。
2. プロセス管理が有効なアプリへの対応
   プロセス管理のアクション実行時のイベントを取得できるため、プロセス管理機能が重要なアプリでもモバイルで作り込むことができるようになります。
3. モバイルユーザーの使い勝手の向上
   モバイル版カスタマイズビューへの対応、グループフィールドの開閉やスペースフィールド利用により、モバイル使用時の使い勝手をあげることができます。

中でもインパクトが大きいのはカスタマイズビューへの対応でしょう。
そこで今回はモバイル版のカスタマイズビューを試してみたいと思います。

モバイル版カスタマイズビューを試す

今までモバイルビューではレコードのタイトルしか表示することができませんでした。
自動計算フィールドを駆使するとある程度情報を載せられますが、PCビューと異なり、一度に表示できるものは限られてました。
今回使うサンプルの顧客リストアプリには、会社名以外にも、会社の住所や連絡先などの情報も載っていますので、営業担当者がモバイルからでも顧客にアプローチを取りやすくするべく、ビューを改善してみたいとおもいます。 

▼通常の一覧（左）とカスタマイズビューを使って見やすくした例（右）のイメージ

カスタマイズビュー作成手順

1. サンプルアプリ「顧客リスト」の作成
   kintoneアプリストアからサンプルの「顧客リスト」アプリを作成してください。
   
2. カスタマイズビューの設定
   作成したアプリの設定画面にて、カスタマイズビューを作成します。
   下記画像の通り設定してください。
   カスタマイズビューのHTMLは、下記のように設定してください。

   <div id="view"></div>

   
   
   
3. プログラミング
   設定したカスタマイズビューにJavaScriptカスタマイズで必要な項目を出すために下記コードを作成します。
   

   12行目の「0000000」の部分を、手順2の一覧IDに書き換えてください。

   作成したコードは「スマートフォン用のJavaScriptファイル」の欄に指定してください。
   また、今回はjQueryも使用していますのでCybozu CDNのjQuery(https://js.cybozu.com/jquery/3.3.1/jquery.min.js)もその上に指定します。
   
   
   解説: サンプルコードは、余白などを調整するために、下記のイメージで要素を組んでいます。
   
4. 設定を保存し、モバイルから見るとカスタマイズビューが選べるようになっています。
   さらに、電話番号をタップすれば電話を、メールアドレスをタップすればメールを開くようになっています。
   

   

モバイル版カスタマイズビューの補足と注意事項

• 新規に作成するカスタマイズビューについて、「PC版のみで表示する」または「PC版とモバイル版で表示する」が選択できるようになります。
• 既存のカスタマイズビューについて、アプリ管理者が設定変更しない限り「PC版のみで表示する」のままです。
• モバイルビューでカスタマイズビューを表示しても、ページネーションは表示されません。
• モバイルビューでカスタマイズビューを表示しても、絞り込みの設定は機能しません。
• 本対応に伴い、一覧の設定API（/k/v1/app/views.json）に、カスタマイズビューを表示する範囲のプロパティが追加されます。

おわりに

上記のようにカスタマイズビューを作成すれば、モバイルでの使い勝手がかなり向上すると思います。
サンプルコードを参考に、現在利用しているアプリをモバイル用にカスタマイズしてみてはいかがでしょうか。

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

Top