カテゴリー内の他の記事

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

フォローする

(著者:kintone エバンジェリスト 村濱 一樹

Index

はじめに

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

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

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

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

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

11月 APIアップデート内容

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

12月 APIアップデート内容

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

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

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

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

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

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

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

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

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

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

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

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

  1. サンプルアプリ「顧客リスト」の作成
    kintoneアプリストアからサンプルの「顧客リスト」アプリを作成してください。
    kintone________.png

  2. カスタマイズビューの設定
    作成したアプリの設定画面にて、カスタマイズビューを作成します。
    下記画像の通り設定してください。
    カスタマイズビューのHTMLは、下記のように設定してください。
    <div id="view"></div>
    _______.png

    ________2018_11_30_18_07.png

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

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

    作成したコードは「スマートフォン用のJavaScriptファイル」の欄に指定してください。
    また、今回はjQueryも使用していますのでCybozu CDNのjQuery(https://js.cybozu.com/jquery/3.3.1/jquery.min.js)もその上に指定します。JavaScript___CSS_________.png

    解説: サンプルコードは、余白などを調整するために、下記のイメージで要素を組んでいます。
    _______2.png

  4. 設定を保存し、モバイルから見るとカスタマイズビューが選べるようになっています。
    さらに、電話番号をタップすれば電話を、メールアドレスをタップすればメールを開くようになっています。

    2018_11_30_18_24.png

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

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

おわりに

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

デモ環境

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

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

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

Top

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

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

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