kintoneモバイル用のカスタム一覧をいい感じにするtips

5年 ago

この画面、スマフォでも見れるようにしてくれへん？

kintoneをお客さんに導入しているとまあまあな頻度で言われますよね。スマフォに対応させようと思ったら、プラグインの対応可否確認したり、JSで書いてるところがあれば、モバイル用にも作ったり、あーーレイアウトの調整もしやなあかんなあ、とか考えながら、場合によっては、

いや～PCで見てくださいよ笑

とかいいつつ、でもやっぱりスマフォに対応したいときってありますよね。今回はkintoneモバイルでカスタマイズビューをいい感じにするためのtipsを紹介します。

カスタマイズビューって？

こちら「第7回カスタマイズビューを利用してみよう」をどうぞ！！まあ要するに、kintoneの一覧画面をhtmlから自作できるやつってことですね。

このカスタマイズビューをkintoneモバイルでいい感じにしていくにはいくつかコツが必要です。

さっそくtipsを！と行きたいのですが、まず、PCでもモバイル版のレイアウトを確認する方法を紹介します。これ大事。画面の大きさとかではなく、モバイル版の画面の確認ができます。普通に画面のサイズ変えるだけだと、適用されるJSファイル変わらないですからね。

やり方は簡単で、普通のURLに/m/をくわえるだけです。こんな感じ

https://hoge.cybozu.com/k/31/

というアプリ（URL）があったとして

https://hoge.cybozu.com/k/m/31/

これでOKです。

さて、では本題へ。一覧画面（ビュー）では各レコードの詳細にいける必要がありますね。まず、レコード詳細へのリンクの貼り方が違います。以下の通りです。

https://hoge.cybozu.com/k/31/show#record={{レコードid}}

https://hoge.cybozu.com/k/m/31/show?record={{レコードid}}&view={{カスタマイズビューのid}}

URLに/m/が入ることと、パラメータを付けるときに#→?とすること、あとはviewのIDをパラメータに付与する点が違います。ちなみに、viewIdはなくても動きますが、kintoneモバイルのときに出てくるパンくずリスト的なやつに、一覧画面へのリンクが表示されなくなります。

上のURLのhoge（サブドメイン）、{{レコードid}}、{{カスタマイズビューid}}をご自身の環境に合わせてお使いください。

ここを拘るかどうかは人によると思いますが笑、PC版だと必要なCSS（51-modern-default.css）を読み込んでいれば、

<span class="recordlist-detail-gaia"></span>

だけで、勝手にノートのアイコンを出してくれますが、kintoneモバイルでは出ません笑、下記のように直接ファイルを指定します。

<img src="https://static.cybozu.com/contents/k/image/gaia/mobile/v2/record_detail_icon.svg" alt="">

これで出てきます。

これはもう、がんばって分かってもらうしかないですが笑、どう考えてもスマフォではたくさん項目を表示することに向いていません。ですので、必要最小限の情報を表示させるだけにして、項目数を抑えることが望ましいです。

しかし、

いや、あれもこれもそれも必要なんや！！！

と横長になってしまうときには、

PCと同じ項目数を用意して、width:100%でやってみてください。相当楽しいことになります笑

ですので、もうここはスクロールをすること前提に、PC画面並みの横幅を指定しましょう。1024pxとかね。これで割といい感じになるので、情報量が多めでも大丈夫。

基本的に、kintoneではスマホ向けにCSSを適用することはできませんが、Webpackを使ってなんとかする方法もあります。

ジョイぞーさんのこちらの記事「Webpackを使ってkintoneモバイルカスタマイズにCSSを入れる」が参考になります。

ちなみに、WindowsでやるときはPowerShellでやることをおすすめします。コマンドも作ったディレクトリ上で

./node_modules/.bin/webpack

こんな感じになるかと思います。

以上が、とりあえず、現状私が考える、kintoneモバイルでカスタマイズビューをいい感じにするためのtipsです。kintoneモバイルのアップデートで解消されるものや、他のtipsもあるかと思うので、何かあればコメントください～！

ではでは、がんばってモバイルでも機嫌よくkintone使ってもらいましょう！