![見出し画像](https://assets.st-note.com/production/uploads/images/85712131/rectangle_large_type_2_ffa5e399e03e24c8bbf1cd6aa69c26bb.png?width=800)
師匠と私-Season1_ch.2☆kintoneプラグインはかんたんにつくれるの?
ー前回までのあらすじー
師匠との雑談で、軽い気持ちでkintoneアプリプラグインを作ることに。
プロジェクト名「イカル☆プラグイン」
※cybozu developer networkのことはCDNと略してます。
軽い気持ちで「アプリプラグインを作る!」と宣言したのですが、そもそもkintoneのプラグイン作成の難易度がまったく見当つきません。
そこで、まずは下調べです。
…もし無理そうだったら師匠に土下座です。
アプリプラグインの作り方は、CDNに公開されてました。
プラグイン開発
kintoneプラグイン開発入門 【Part3: 情報の隠匿方法 実践編】
kintoneプラグイン開発入門 【Part2: 情報の隠匿方法編】
kintoneプラグイン開発入門 【Part1: メリット編】
プラグイン開発支援ツール群の案内
kintoneプラグイン開発でつまずきやすいポイント
プラグインの設定でカスタムビューを作成する方法
入力値チェックプラグイン作成例
kintone プラグイン開発手順
https://developer.cybozu.io/hc/ja/sections/200644024
この中の、プラグイン開発手順を見ていくと、なんだかカンタンそう!
(※個人の感想です)
必要なファイルを色々そろえて、まとめてパッケージング(plugin.zip)すればいいのよね。直感でできる!と感じました。
(※個人の感想です)
![](https://assets.st-note.com/img/1661672936863-z4xOtBEaen.png)
アプリプラグインの作成の難易度は、エベレストかと思ってたら、高尾山くらいかも。
(※気持ちの問題)
多分一番の山場は、JavaScriptのコーディングです、絶対そうです。
師匠の教えどおり「こまけぇことはおいといて」(難しいことが書いてあるけどとりあえずは無視して)やってみることにしました!
(素人の私でも)できそうだと分かったので、次は実装する機能を考えます。
イカル☆プラグインで具体的に何ができるか、です。
もともとのコンセプトは「Excelのイルカのヘルプ」の再現です。
■ヘルプ
⇒イルカの画面がポップアップ
⇒文字を入力すると検索できる
![](https://assets.st-note.com/production/uploads/images/86637390/picture_pc_4a181919275e4d10d7e6daf61ddd0f9f.gif)
【案1】
画面表示は必須なので最初はこのように考えました。
■ヘルプボタン
⇒イルカの画面がポップアップ
⇒ある条件で消える
![](https://assets.st-note.com/img/1662864583513-9bbMN1tUkt.jpg?width=800)
【案2】
そのあと、邪魔さを再現するためにちょっと変えました。
■レコード詳細画面を開く
⇒自動的にイルカの画面がポップアップ
⇒ある条件で消える
![](https://assets.st-note.com/img/1662864619763-BV2HC7PxhH.jpg?width=800)
この仕組みを師匠に相談したところ。
「邪魔さの再現は案2がいいのう。あと、文字入力フィールドの近くに検索ボタンも必要じゃ」
え?初心者に検索とか無理でしょ?と言うと、
「ぶわっかもーん。文字を入力するからには検索機能は必要じゃ。検索できないなんてそんなのダメじゃ!」
レコード表示したときに機能発動はできそう。
でも検索なんてどうすれば…?
しばらく考えて。
あ、kintoneにはアプリ内検索というものがある。もともとある機能を使えないだろうか?
師匠に相談したところ「さすが、kintoneのことだけは詳しいのう。それで実装できるかもしれん。」とほめられました。
そして。
案3
レコード詳細画面を開く
⇒自動的にイルカの画面がポップアップ
⇒文字入力+検索
⇒A・検索結果の表示
(または)⇒B・「お前を消す方法」と入力したときだけ検索せず、ポップアップは消える
※Bが実装できるかどうかはいまのところ不明
![](https://assets.st-note.com/img/1662864649784-1XTmeEf09q.jpg?width=800)
とりあえずの実装する機能がきまりました!
さあ、JavaScriptのコーディングへ。
その前に。
テキストエディタ。
よくコードを書く人が使う黒い画面です。緊張するけどテキストエディタを使ってコーディングしていこうと思います。
エディタの種類はいろいろあり、人によって大きく好みが違うそうです。
※師匠はVimmerだそうです。Vimを使う人のことをVimmerというのですが、独特なキー操作をするらしいです。一度使ったらやめられないらしいです。師匠はほかのものを目の敵にしています。(あまり言うとVimmerから攻撃されそうなのでこの辺で)
私は、VSCodeというポピュラーなものを使うことにしました。
(保存は自動かな?ファイルはどうやって作成するの?)
戸惑っていると
「エディタの設定は難しいから、最初はそのままでもよい。メモ帳程度の機能でも書ければいいのじゃよ」と優しいことを言ってくれました。
とにかく実践!手を動かすことが師匠流。
さて環境が整ったのでいよいよJavaScriptのコーディングです。
…ch.3へ続く
この記事が気に入ったらサポートをしてみませんか?