キンコミ kintone user community

みんなの投稿

2020/08/04 11:14

WordPress×kintoneで製造現場のスマホ日報をつくれないか動作テストしています。
まだまだつくりかけなんですが、YouTubeに動作させてるとこの動画をアップしてみました!(動画で表示されるライン名等は架空の名称になります)
https://youtu.be/0uLJJJqNL6E

ちなみ、これつくるに至った理由はいくつかあるのですが、そのうちの一つとして、kintoneのCSSカスタマイズで、スマホ版はどうやるかわからなかったというのがあります。
どうやってやるかご存知の方いらっしゃいますか?

3件のコメント (新着順)
藤田 隆
2020/08/05 17:10

モバイル表示のカスタマイズを行う場合、下記が参考になると思います。
PC のChrome上でモバイル表示を行って、DOM構造やCSS を調べることができます。

kintone 開発で Chrome デベロッパーツールを使おう モバイル表示
https://qiita.com/rex0220/items/58122efda9f94f669ec4#%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E8%A1%A8%E7%A4%BA

WordPress で作られたような画面だと、kintone 標準の編集画面を CSS で実現するのは、なかなか大変そうですし、DOM構造の仕様編変更のリスクもあります。
画面のデザインにこだわるのであれば、一覧画面のカスタマイズを利用してみてはいかがでしょうか?


kobochan
2020/08/05 17:29

藤田さん、ありがとうございます!

なるほど、デベロッパーツールでスマホ認識させてクラス、ID確認するやり方でできそうですね!
カスタマイズビューも挑戦してみる価値ありそうですね!頑張ります!!

kobochanさん

面白いですね。WordPressをフロントエンドにしてkintoneのスマホ用入力画面を作ってるって事ですよね。
kintoneアプリの設定にスマホ用CSSのアップロード機能はありますが、多分そういうレベルの話ではないと思います。
Web入力画面表示なら「Form Bridge」を使うとかも考えられますが、ドロップダウンを動的に変更できるかは私は未検証です。

developer networkで以下情報を見つけました。
【フォームブリッジ】ドロップダウンの選択肢を動的に変更する方法
https://developer.cybozu.io/hc/ja/community/posts/360055065212--%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%83%96%E3%83%AA%E3%83%83%E3%82%B8-%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%83%80%E3%82%A6%E3%83%B3%E3%81%AE%E9%81%B8%E6%8A%9E%E8%82%A2%E3%82%92%E5%8B%95%E7%9A%84%E3%81%AB%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95

あと、ジョイゾーさんが以下のようなプラグインを出しています。
ドロップダウン絞り込みプラグイン
https://www.joyzo.co.jp/plugin/originalpulldown

応援しています!また進展あったら教えてください!^^


kobochan
2020/08/05 17:23

西村さん、ありがとうございます!

プラグイン色々試してみたいです!ほんとkintoneはやれることがたくさんあって、一人では時間が足りないです笑
なんとか社内でチームでつくれればいいのですが。。。チーム発足にむけての活動もしていかないと。。。

応援ありがとうございます!今日も結構手を加えて良い感じになってきました!また機をみて内容発信していきます!!

CSSは全くわからないのですが、
TISさんの「項目選択フィールド連動各種設定プラグイン」や「条件分岐処理プラグイン」を使えばkintone単体で運用できるのではないでしょうか?
スマホで思ったように動くかはわかりませんが・・・。


kobochan
2020/08/04 16:34

中尾さん、ありがとうございます!
概要さらっとみただけですが、とても便利そうですね!
プラグインで解決できそうなところはどんどんチャレンジしていきたいと思います!!