![見出し画像](https://assets.st-note.com/production/uploads/images/120003115/rectangle_large_type_2_7d0d7691bd396d18147667e1772761aa.png?width=1200)
【kintoneプラグイン】Customize Editorの使い方!
kintoneカスタマイズ用のエディタープラグイン「Customize Editor」について、その使い方をご紹介します。
1. ファイルの作成・アップロード
各フォルダに3つのボタンがあり、左から
・ファイルの作成
・URL指定でアップロード(CDNなどを活用する場合)
・ファイルのアップロード(ドラッグ&ドロップでも可能)
となっています。
![](https://assets.st-note.com/img/1698368111309-w65KZW6a0g.png)
2. ファイルの削除・ダウンロード
ファイルを右クリックすると、コンテキストメニューが開きます。
コンテキストメニューから、ファイルのダウンロードや削除ができます。
![](https://assets.st-note.com/img/1698368607958-P8XVz0woJg.png)
3. ファイルの保存
エディターにフォーカスが当たっている状態でCtrl+Sで保存できます。
※Macの場合はcmd+S
またエディターの右上にある、保存ボタンでも保存可能です。
![](https://assets.st-note.com/img/1698366815934-3C1Ov7Pt8H.png?width=1200)
4. ファイルの並び替え
ファイルの左側にある三本線のアイコンを掴んでドラッグ操作でファイルを並び替えることができます。
![](https://assets.st-note.com/img/1698366884869-ZUC9Ll01NA.png)
5. 画面の拡大・縮小
右上の拡大ボタンからエディターをフルスクリーン表示できます。
![](https://assets.st-note.com/img/1698367418577-1iqQTJkKgS.png)
6. kintone Javascript API, REST APIの引用
画面右側にある◀をクリックすると、kintone Javascript API, REST APIの一覧が表示されます。
こちらの一覧内の項目をクリックすると、そのAPIをエディターのフォーカス部分に差し込むことができます。
![](https://assets.st-note.com/img/1698367178578-sqKC288fdU.png)
7. 各種設定
画面右上にある⚙マークから各種設定ができます。
〇エディターの設定
- Theme:テーマ設定
- Font Size:フォントサイズ設定
- Tab Size:タブサイズ
- Margin Column:余白列線の設定
〇ChatGPTの設定
- Open AI APIKEY:Open AIのAPIKEY
APIKEY取得方法
〇GitHubの設定
- Access Token:GitHubの個人用アクセストークン
アクセストークン取得方法
- Repository Name:リポジトリ名を任意で入力
アクセストークンを保存し、リポジトリ名を入力して「リポジトリ作成」からGitHubにリポジトリを作成します。
![](https://assets.st-note.com/img/1698370562560-d6n4ytYLHQ.png)
7. Chat GPTとの連携
ChatGPTの設定からAPIKEYを設定するとエディターの上にChatGPTのアイコンが表示されます。
アイコンをクリックすると、モーダルが表示されますので、そこからChatGPTにkintoneのカスタマイズコードを書いてもらえます。
![](https://assets.st-note.com/img/1698370875679-G2KFf5rvBw.png)
![](https://assets.st-note.com/img/1698370940804-zGFu1rlhgG.png?width=1200)
8. Git Hubとの連携
GitHubの設定からアクセストークンを設定し、リポジトリを作成するとエディターの上にGitHubのアイコンが表示されます。
〇コミットする
現時点のファイルをGitHubにコミットします。
〇コミット一覧
コミット履歴を一覧で表示します。
またコミットを選択し、その時点の状態に戻すことが可能です。
※選択したコミットに戻しても、それ以降のコミットが消えることはありません。
![](https://assets.st-note.com/img/1698371137042-4LHqcs8OUu.png)
![](https://assets.st-note.com/img/1698371903495-9hN5BTer1r.png?width=1200)
![](https://assets.st-note.com/img/1698371926015-hL6ZKI0uiM.png?width=1200)
#KAIZEN
#kintone
#kintoneプラグイン
#kintoneカスタマイズ
#無料プラグイン
#カスタマイズ
#エディター
#CustomizeEditor
この記事が気に入ったらサポートをしてみませんか?