見出し画像

師匠と私-Season1_ch.11☆ついに完成!kintoneプラグインを初心者がつくってみた完

前回までのあらすじ
いよいよプラグインを作っていきます。
ドキドキです。

では、いままでさんざんお世話になってきた
cybozu developer network
CDNのこちらの記事の手順をやっていきます!

kintone プラグイン開発手順

プラグイン作成の流れ
プラグイン作成の手順は、以下のとおりです。

1.プラグイン作成に必要なファイル(JavaScript, CSSファイルなど)を準備します。
2.マニフェストファイル(manifest.json)を作成します。
3.パッケージツール(plugin-packer)を利用して、プラグイン作成に必要なファイルをパッケージングします。
4.作成したプラグインファイルを kintone 環境にインストールします。
cybozu developer network より

1.ファイル準備

カスタマイズJavaScriptファイルはこれまでに作成しました。
他に必要なファイルはあるのかな?

師匠よりコメント
「たいした機能もないし、jsやCSSとかいらなくない?」
「HTMLはコンフィグ※画面用だし、cssはjsで直接流し込んでる(カスタマイズjsに書いてる)からとりあえずなしでOK!!じゃ」
なにもしないのもつまらないので説明文だけHTMLで用意することに。

コンフィグ
よく聞くけどなんだっけ?となったのでサクッと調べました。

設定をカッコ付けてカタカナで言ったのが「コンフィグ」です。
※「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典
より
https://wa3.i-3-i.info/word1685.html

言われてみたらたしかに「設定」の場面で出てきます。IT初心者つまづきポイントは、こういう独特の用語がでてくることですが、
覚えておけば(✖カッコつけて 〇相互理解のため)に便利ですね。

設定画面用HTML
「埋め込まれるやつになるから<html>とか<body>とかは要らないはずじゃ!いきなり<div>とか<span>とか、なんならテキスト書くだけでもよいのう」
そっか、たしかにkintoneはHTMLでつくられたサイト。
では遠慮なく簡単にかかせていただきます!

ー各ファイルの準備ができました!ー

=>ファイルの準備【CLEAR!】


2.マニフェストファイルを作成

マニフェストファイルは、プラグイン作成に必要なファイル情報をまとめた設定ファイルです。
このファイルは、kintoneプラグイン作成に必須です。
CDNより

必須なので、これは作らないと先に進めませんね。
師匠に「だいたいコピペと修正でイケルのじゃ!」と言われたので、やってみます!
ちょっとファイル名を変えたりするだけな様子。
作成できたみたいです。

ーマニフェストファイルもINー

=>マニフェストファイル【CLEAR!】


3.ファイルをパッケージング

「引っかかる人は引っかかるかもしれない、、、のじゃ」
プラグインを作るって言った最初から、師匠はインストールにつまづくと言っていました。どういうことなのか?
いよいよ槍ヶ岳に挑戦です!

まずはplugin-packerのインストールです。
専用の説明ページがあるので、一応みてみましょ。

plugin-packer は、kintone のプラグイン用のカスタマイズファイルをパッケージングして、プラグインファイルを作成する CLI ツールです。
CDN plugin-packerより

ふむふむ。全部まとめてZIPファイルにしてくれる便利ツールですね。
む、下準備?
事前にNode.jsと npmが必要とは…。
”アイテムをゲットするクエストが追加サレマシタ…”
言われたとおりにNode.jsをインストール。

plugin-packer を実行するには、Node.js とパッケージ管理ツールの npm が必要です。Node.js をインストールすると、npm は自動でインストールされます。
CDN plugin-packerより

なんやかやplugin-packer がインストールできました!

ー急にワーッと文字が出てきてあせりますー

しかしエラーが!マニフェストファイルの記述が間違っているようです。
いろいろ間違っていたようです!

=>2にもどる

ーまさかのつまづきポイントー

そして…マニフェストファイルをなんやかやして、
成功の文字が!

ー成功のときは1行であっさりー

ようやくZipファイルが完成しました!

ープラグインzipと謎のファイルが!ー

ある程度すすんだところで、便利ツールのページを発見。
create-plugin。初心者にプラグインのひな形をつくってくれるものもあったんですね…。
むむ。 Web 版の plugin-packerもあるんですね…。

プラグイン開発支援ツール群の案内
https://cybozudev.zendesk.com/hc/ja/articles/360000975763
CDN プラグイン開発支援ツール群の案内

=>パッケージング【CLEAR!】


4.プラグイン完成!

ようやく…やっと…あの形に完成しました!!
プラグインはZipファイルでインストールします。
あれを自分で作ったなんて!!

kintoneシステム管理でプラグインを取り込みます。
おお!自分で作ったプラグインがここに!

ー適当なバージョンもちゃんと表示ー

アプリの設定でプラグインを追加します。
いつもの画面に自作のものが表示されて感慨深い!

ーとってつけた説明ー

設定を開くとコンフィグHTMLがちゃんと反映されています。
がんばって(ないけど)作ってよかった!

ー設定画面ー

そして検証してみます。動作はjsファイルの時と同じ!
ちゃんと動きました!!!

ー世間のAIよりだいぶ遅れてるイカルくんー

ちなみにWeb 版の plugin-packerを試してみると…

ーWeb 版の plugin-packer ファイルをアップロードするだけー

あれ?”作成”を押したら瞬時にZipファイルができた!?
作成したZipファイルをダウンロードして取り込んだら
同じもの(当たり前だが)です!

ー完全に同じなプラグインー

最初からWeb版を使えば、わざわざplugin-packerインストールの苦労いらなくない?って思いましたが…が。
「何事も経験じゃよ」師匠が雲の上でいっている気がしました。

=>ALL【CLEAR!】


外伝:著作権に気を付けてみた

いままで本の引用などで著作権に気を付けてはいるのですが。
画像はどうなのか?webの画面キャプチャなどはどうなのか?
昨今なんでもできてしまうので、気にしておくかと少し調べてみました。

◆引用のルールは著作権法に書かれています。

(引用)
第三十二条 公表された著作物は、引用して利用することができる。この場合において、その引用は、公正な慣行に合致するものであり、かつ、報道、批評、研究その他の引用の目的上正当な範囲内で行なわれるものでなければならない。
https://elaws.e-gov.go.jp/document?lawid=345AC0000000048
著作権法

◆引用するときのポイントをまとめてみました。

1・オリジナルコンテンツの量 > 引用の量
オリジナルコンテンツ(自分の意見)を表現するために他の著作物を引用するのだからオリジナルコンテンツが主・引用が従の関係で、量質ともに主従が逆転していたらNG

2・引用の必要性があること
著作権法の大原則。必要性がなければそもそもNG

3・オリジナルコンテンツと引用を分けること
どちらも同じ文脈内のコンテンツにみえてしまうのはNG
改変するのもNG

4・引用元が明記されていること
Webサイトからの引用の場合:Webサイト名とURLを明記
書籍からの引用の場合:書籍の名称、著者名を明記

以上、著作権ルールは下記のサイトよりまとめてみました。
(法解釈と具体的事例がのっているので参考になります)

今回CDNの画像も入れたかったのですが、
ちょっと考えて…
考えすぎて…やめました。
なにかを表現するときに、時には慎重になるのも大事。

あ、イカルは完全オリジナルなので使い放題です!

またどこかでお会いしましょ~

感想・完走・かんそう

2022年初夏あたりから構想し、ほぼ1年くらいかけてkintoneプラグインが完成しました。
世間ではkintoneとチャットGPTとの連携もさくっとできるようになり、AIもあたりまえ?に。すでに開発中にイカルプラグインの機能は用なしになってました(開発前からという話も?)
技術の進歩はおそろしく早い…。

”役立つ”を意識せず完全に遊びだったのでとっても楽しめました。
しばらくぶりすぎてコードを全く覚えてないこともありましたが。
プログラミングがうんともすんとも言わなくて悲しくなったこともありましたが。
みんな良い思い出です!

”完成させた”というのも私にとっては大きな意義がありました。
全然わからない=>なんとなくわかる=>あ、これやったかも
こんな風に、体験からの理解ってどこかに残るんだなと。
どのくらいレベルアップしたかは謎ですがちょっとは成長した気がします。
(カスタマイズスペシャリスト30点レベル)

師匠には気軽に「教えてよ」といった手前、ぜったいに完成させたい気持ちがありました!
ここまでのサポート、感謝の気持ちでいっぱいです!
また遊んでくださいね。

…Season1 完

この記事が気に入ったらサポートをしてみませんか?