はじめてのkintoneポータルカスタマイズ

LT用

Transcript

1. はじめてのkintoneポータル カスタマイズ 2023/11/29
2. 自己紹介 • 神戸のweb制作会社で、kintoneを使ったシステム開発などを やってます。 • 元々バックエンド寄りのエンジニアです。 • kintoneポータル・スペースカスタマイズ用のプラグイン開発 やサービスをしています。 @Tam4641
3. ポータルでカスタマイズできる事は、 １つだけです。
4. 帯の下を...
5. 広げてHTMLを埋め込むだけ!
6. HTML書けば何でも入れられます。 スペースも同じやり方♪
7. ちなみに、 標準設定で隠せれます 他のパーツはDOM操作で触っちゃダメ
8. ポータルカスタマイズのやり方
9. 今日は３つの型を紹介します
10. ポータルカスタマイズ 壱の型 Javascript, cssアップロード ～基本の型～
11. Javascript, cssアップロード • kintoneシステム管理画面から javascriptと、対応するcssをアップロードするだけ ポータルを含む全画面に反映されます。
12. サンプルコード アプリのデータをkintoneRestAPIで取得して表示などもできます♪
13. ポータルカスタマイズ 弐の型 Kintone Portal Designer
14. ポータル開発用の公式ツールがあります
15. 設定画面 • タブを切り変えて、 html,css,javascriptを編集可能。 • 保存すると自分の環境（Chrome）だけに、即反映できる
16. 効率良くポータルカスタマイズができる！ 生産性爆上がりツール！
17. 使用して、思った点 • html、css 、javascript がわからないユーザーが使用するのは、 難しい。(テンプレサンプルがあるので学習可能。) • ポータルはコードが長くなりがちだが、 HTML,CSS,javascriptそれぞれ1ファイル管理なため、 コードが肥大化すると、画面のパーツ管理が辛くなってくる 次のスライドつなぐためネガティブな事書いてますが、 コード触る人には、お勧めツールです。
18. ポータルカスタマイズ 参の型 ～秘奥義～ Javascriptライブラリ埋め込み
19. 更なる ポータルカスタマイズの 高みを求めて
20. ポータルに、Reactを埋め込みます。
21. Reactとは 超ざっくり • javascriptのライブラリ • 画面のパーツ(コンポーネント)ごとにソースコードをつくって、 組み合わせて動かすのが得意 • 各パーツの状態によってさまざまな表現が可能。 • kintone UI Componentのような、UIライブラリも多数
22. いろんなライブラリーやパーツを組み合わせて こんな画面の作成が可能
23. サンプルコード さわりだけ kintoneのイベントで、 コンポーネントを入れる ここから先は、次の機会に
24. ご清聴ありがとうございました。 • 今後も、kintoneポータル、プラグイン開発などの情報を発信 しますので、よろしくおねがいします。 • （宣伝）ポータルをドラッグ操作でカスタマイズできる こだわり kintone プラグイン β版を公開しています。 無料なのでダウンロードして遊んでみてください。 https://kanaeru.design/plugin#contact ダウンロードは こちらのQRフォームから