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

はじめてのkintoneポータルカスタマイズ 2023/11/29

自己紹介 • 神戸のweb制作会社で、kintoneを使ったシステム開発などをやってます。 • 元々バックエンド寄りのエンジニアです。 • kintoneポータル・スペースカスタマイズ用のプラグイン開発やサービスをしています。 @Tam4641

ポータルでカスタマイズできる事は、１つだけです。

帯の下を...

広げてHTMLを埋め込むだけ!

HTML書けば何でも入れられます。スペースも同じやり方♪

ちなみに、標準設定で隠せれます他のパーツはDOM操作で触っちゃダメ

ポータルカスタマイズのやり方

今日は３つの型を紹介します

ポータルカスタマイズ壱の型 Javascript, cssアップロード～基本の型～

Javascript, cssアップロード • kintoneシステム管理画面から javascriptと、対応するcssをアップロードするだけポータルを含む全画面に反映されます。

サンプルコードアプリのデータをkintoneRestAPIで取得して表示などもできます♪

ポータルカスタマイズ弐の型 Kintone Portal Designer

ポータル開発用の公式ツールがあります

設定画面 • タブを切り変えて、 html,css,javascriptを編集可能。 • 保存すると自分の環境（Chrome）だけに、即反映できる

効率良くポータルカスタマイズができる！生産性爆上がりツール！

使用して、思った点 • html、css 、javascript がわからないユーザーが使用するのは、難しい。(テンプレサンプルがあるので学習可能。) • ポータルはコードが長くなりがちだが、 HTML,CSS,javascriptそれぞれ1ファイル管理なため、コードが肥大化すると、画面のパーツ管理が辛くなってくる
次のスライドつなぐためネガティブな事書いてますが、コード触る人には、お勧めツールです。

ポータルカスタマイズ参の型～秘奥義～ Javascriptライブラリ埋め込み

更なるポータルカスタマイズの高みを求めて

ポータルに、Reactを埋め込みます。

Reactとは超ざっくり • javascriptのライブラリ • 画面のパーツ(コンポーネント)ごとにソースコードをつくって、組み合わせて動かすのが得意 • 各パーツの状態によってさまざまな表現が可能。 •
kintone UI Componentのような、UIライブラリも多数

いろんなライブラリーやパーツを組み合わせてこんな画面の作成が可能

サンプルコードさわりだけ kintoneのイベントで、コンポーネントを入れるここから先は、次の機会に

ご清聴ありがとうございました。 • 今後も、kintoneポータル、プラグイン開発などの情報を発信しますので、よろしくおねがいします。 • （宣伝）ポータルをドラッグ操作でカスタマイズできるこだわり kintone プラグイン β版を公開しています。
無料なのでダウンロードして遊んでみてください。 https://kanaeru.design/plugin#contact ダウンロードはこちらのQRフォームから

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

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

hiroshi tamura

More Decks by hiroshi tamura

Featured

Transcript