師匠と私-Season1_ch.9☆なんだかんだでkintoneに🐬イカル登場！

2022年12月27日 16:03

ー前回までのあらすじー
師匠との雑談で、軽い気持ちでkintoneアプリプラグインを作ることに。
プロジェクト名「イカル☆プラグイン」
※cybozu developer networkのことはCDNと略してます。

■今できていること=>
①（レコード詳細画面を開いた時に）自動的にポップアップ画面を表示
②入力フィールドの値を取得
③値を取得したものをリンク先に取り込み、検索画面を表示

■このあとの主な機構=>
機構④
ポップアップ画面にイルカの絵を出す

機構は残すところ、今回で最後のようす。
いままで漠然としていた必要なコードもまとまってきました。
やりたいことを細分化してコツコツ作っていく。
山を乗り越えた感があります。

「まだまだじゃぞ…」
師匠の声が聞こえてきたような…空耳？

今回やりたいことはただ一つ
JavaScriptでポップアップウィンドウを表示すること！
簡単そうと思い調べてみると、初心者を誘う迷路が待っていました。

JavaScriptでウィンドウを出す方法
警告アラート（alert）
入力フォーム（prompt）
確認・承認（confirm）

それっぽい方法がいくつもあり、どれがいいのか迷います。
表示したウィンドウには入力フォームと検索ボタン、それからイカルの絵を入れたい。

🐟”alert”でできるか？

JavaScript - alertの使い方を徹底解説！　より
https://www.modis.co.jp/candidate/insight/column_101

✅alertはテキストとOKボタンをポップアップ表示させるメソッドで、
Webページを読み込んだ際にブラウザの上部にウィンドウがポップアップします。⇒GOOD

✅alertは標準では色の変更などのデザインはできない
⇒NG　…テキスト＋ボタンだけだと💦肝心の🐬画像がでない！

✅jQueryのスクリプトであるSweetAlertなどのライブラリを使用することで外観もカスタマイズ
⇒NG　…SweetAlertはすてきだけど、オリジナル画像🐬を使いたい！

✅一読させるためにブラウザの閲覧を阻害するため、アラートのポップアップを嫌がるユーザーも少なくありません。
⇒むしろGOOD　…イカルは目障りなポップアップが特徴！

🐟。。alertの使い方メモ
例１　カンタン！
alert("ワシは甘いものに目がないのじゃ！");

例２　変数が使える
const age = 100;
alert("今年で" + age + "歳になるのじゃ！");
⇒「今年で100歳になるのじゃ！」

例３　改行できる
alert("いつまでも\nあると思うな\n箱の菓子\n");
いつまでも
あると思うな
箱の菓子

🐟画面をかぶせる技

ただのアラート画面では実現できないと思ったため、他を探すことに。
JavaScriptを使ってHTMLを表示させるという方法を採用。

promptの外観を変更する　🌟これよさそう！？！？
https://note.affi-sapo-sv.com/js-alert-confirm-prompt.php#i3

用意するもの
JavaScript
CSS
HTML
通常はそれぞれのファイルを用意します。
（kintoneのカスタマイズで取り込めるのはJavaScriptファイルだけ。
どうしたらいいのだろう・・・？）

🐟。。JavaScriptの技メモ
イカルに「お前を消す方法」と入れたときだけ
イカルからのメッセージを表示したい！

💡JavaScript 要素を表示/非表示
JavaScript 要素を表示/非表示にするサンプル(displayとvisibility)
https://itsakura.com/javascript-display#s2
💡もしも～だったら
すっきり書きたい JavaScriptの条件分岐
https://qiita.com/taiju_suzuki/items/e2bf11fcf1645623235f

ｰｰｰ今回はこのように記述！ｰｰｰ
ikaruVanishMessageElement.style.visibility = 'hidden';
👈最初は消しておく
if (searchTextElement.value == 'お前を消す方法') {
👈検索ワードがお前を消す方法
ikaruVanishMessageElement.style.visibility = 'visible';
👈メッセージを表示

🐟。。JavaScriptの技（調べたら深みにはまったこと）メモ
Promise　のこと
●Promiseを使った非同期処理の関数は、コールバック関数を引数に取るのではなくPromiseオブジェクトを返します。「今は値を返せないけどあとでちゃんと返すよ」と約束するオブジェクトのことです。
-pending（保留）: まだ非同期処理は終わっていない（成功も失敗もしていない）
-fulfilled（成功）: 非同期処理が正常に終了した
-rejected（拒否）: 非同期処理が失敗した

●Promiseのコンストラクターは、関数を引数に取ります。この関数は以下の特徴があります。
その関数は2つの関数（resolve, reject）を引数に取る
-1番目の関数（resolve）に引数を渡して実行すると状態がfulfilledになり、引数の値がPromiseオブジェクトが保持する値になる
-2番目の関数（reject）に引数を渡して実行すると状態がrejectedになり、引数の値がPromiseオブジェクトが保持する値になる
https://knowledge.sakura.ad.jp/24890/

Async/await
●async は関数が promise を返すことを保証し、非promise をその中にラップします。
●await は promise が確定しその結果を返すまで、JavaScript を待機させます。
https://ja.javascript.info/async-await

はっきりいってまったく使わなかった内容。。。

🐟。。CSSの技メモ
💡position: fixed;
指定した位置に要素を固定
💡z-index
要素の重なりの順番を指定する。
０を基準として数字が大きいほど上に重なる。
必ず position プロパティと一緒につかう。
-----------------------
CSSをJavaScriptで追加（変更）する方法
例①styleプロパティ
const ikaruStyle = {fontSize: '32px',}
https://www.sejuku.net/blog/55437

例②jQueryのcss()
$('p').css({'font-size':'28px',});
https://www.sejuku.net/blog/38778

けっきょくjQueryまでは要らなかった

🐟jsファイルのみにまとめたい！

JavaScriptの中にCSSとHTML記述！？
以前、師匠が「JavaScriptの中にHTMLを書いちゃえばいいのじゃ」と言ってたが、実際どうすればいいのか？

…降参！師匠に聞いてみよう。

「Domでエレメントを取得した後、.innerHtmlにHTMLテキストを設定してしまえば、そのHTML要素の中身まるまるっと書き換えられるのじゃよ！
だからテキストとしてHTML文を用意しておいても良いのじゃ！」

「とくにこの後どんなHTMLが追加されるかわからない場合なんかは、innerHtmlつかってそうやって生成したりするのじゃー！
もちろんふつうは、必要な要素全部記述したHTMLを用意して、表示非表示を切り替えるのが基本的じゃが。
今回はkintoneプラグインを作るとなると、HTMLはいつもみてるkintoneの画面のもので、それを一から用意するのはできないから、後から書き換えるしかないということになるぞ。」

２行でまとめるとこういうこと
kintoneにもともとあるHTMLを
JavaScriptで書き換えちゃえ！

const ■■ = document.createElement('div');
const ▲▲ = document.createElement('p');
👈HTML要素を追加
▲▲.innerHTML = ' ○○○ ';　👈中身を追加

createElementとnnerHTMLで書き換え

🐟画像をどうしよう？

🐬画像は必須です。
🐬イカルが現れないとただの検索ウィンドウになってしまいます。
プラグインパッケージ化したときに取り込む画像をリンクにすればいいか、と考えていたのですが、師匠に「裏技じゃぞ」と教えてくれたのがこれ。

画像をBase64でHTMLファイルに直接埋め込む方法
https://edge.sincar.jp/web/base64-inline-image/

べ、Base64！？
小難しいのが出てきた💦と見てみると意外と簡単。
「画像をテキスト文字列に変換して、それを直接imgタグのsrcにしちゃうって感じじゃ！」
作り方もChrome Developer Toolsを使うとあっという間に！
なっが～いコードを入手できました。

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0CAYAAADL1t+KAAAAAXNSR0IArs4c6QAAIABJREFUeF7t3N15NbexbWEyEwfgnX8gcgDOZO1H8p8skSZ6oVAoFN5ze7qBwpiTGF9T3vx8vV6vD/8PAQQQQAABBI4m8EnoR+dneAQQQAABBH4jQOiKgAACCCCAQAMChN4gREdAAAEEEECA0HUAAQQQQACBBgQIvUGIjoAAAggggACh6wACCCCAAAINCBB6gxAdAQEEEEAAAULXA・・・長すぎて以下略

ひとまずコードは書きあげました！
これをJavaScriptカスタマイズ、kintoneに実装してみます。

🐟kintoneに実装すると…（結果）

お～！！出てきました！
ついに姿を現しました！
レコード詳細画面をひらくと、イカルが「何について調べますか？」と聞いてきます。

検索フォームに「お前を消す方法」と入れると
🐬『そんなこといわないで～』と言ってきます。
しかし意地でも消えません。

別の検索ワードを入れると
ちゃんとアプリ内の検索ができました。
成功！！！

そもそも、kintoneには元々アプリの検索機能あるし、
大した機能ではないですが…
調べながら師匠とのザツダンを楽しみながら
ようやくできたイカルプラグインのJavaScriptファイル。
ここまで４か月近くかかりました💦

・・・
忙しいのを言い訳にしばらく開発がストップしてたのですが
なんとなく…黒い画面が…プレッシャーだった気が…します。

それなら画面を変えてみよう、と。
VSCodeの背景を変えたら、なんかかわいくなりました。
師匠も好みのカラーテーマを設定しているようで
「好きなのだと断然やる気が出るのじゃ！」と、一緒に探してくれました。

Vimカッコイイ計画　👈※そういえば、師匠はVimmerだった。
https://cocopon.me/blog/2013/02/hybrid/
VS Code Themes
https://vscodethemes.com/?type=light
※キーボードのキーキャップとか、カラフルかわいいものが好き

なんか落ち着く。
これでもう。画面開くのがこわくな～い。
「かわいいは正義」とはよく言ったものです。

さて、実装するJavaScriptファイルが出来上がったので、
いよいよkintoneプラグイン化！？🐬

…ch.10へ続く

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