機構は残すところ、今回で最後のようす。
いままで漠然としていた必要なコードもまとまってきました。
やりたいことを細分化してコツコツ作っていく。
山を乗り越えた感があります。
「まだまだじゃぞ…」
師匠の声が聞こえてきたような…空耳?
今回やりたいことはただ一つ
JavaScriptでポップアップウィンドウを表示すること!
簡単そうと思い調べてみると、初心者を誘う迷路が待っていました。
それっぽい方法がいくつもあり、どれがいいのか迷います。
表示したウィンドウには入力フォームと検索ボタン、それからイカルの絵を入れたい。
🐟”alert”でできるか?
🐟画面をかぶせる技
ただのアラート画面では実現できないと思ったため、他を探すことに。
JavaScriptを使ってHTMLを表示させるという方法を採用。
用意するもの
JavaScript
CSS
HTML
通常はそれぞれのファイルを用意します。
(kintoneのカスタマイズで取り込めるのはJavaScriptファイルだけ。
どうしたらいいのだろう・・・?)
🐟jsファイルのみにまとめたい!
JavaScriptの中にCSSとHTML記述!?
以前、師匠が「JavaScriptの中にHTMLを書いちゃえばいいのじゃ」と言ってたが、実際どうすればいいのか?
…降参!師匠に聞いてみよう。
「Domでエレメントを取得した後、.innerHtmlにHTMLテキストを設定してしまえば、そのHTML要素の中身まるまるっと書き換えられるのじゃよ!
だからテキストとしてHTML文を用意しておいても良いのじゃ!」
「とくにこの後どんなHTMLが追加されるかわからない場合なんかは、innerHtmlつかってそうやって生成したりするのじゃー!
もちろんふつうは、必要な要素全部記述したHTMLを用意して、表示非表示を切り替えるのが基本的じゃが。
今回はkintoneプラグインを作るとなると、HTMLはいつもみてるkintoneの画面のもので、それを一から用意するのはできないから、後から書き換えるしかないということになるぞ。」
2行でまとめるとこういうこと
kintoneにもともとあるHTMLを
JavaScriptで書き換えちゃえ!
🐟画像をどうしよう?
🐬画像は必須です。
🐬イカルが現れないとただの検索ウィンドウになってしまいます。
プラグインパッケージ化したときに取り込む画像をリンクにすればいいか、と考えていたのですが、師匠に「裏技じゃぞ」と教えてくれたのがこれ。
べ、Base64!?
小難しいのが出てきた💦と見てみると意外と簡単。
「画像をテキスト文字列に変換して、それを直接imgタグのsrcにしちゃうって感じじゃ!」
作り方もChrome Developer Toolsを使うとあっという間に!
なっが~いコードを入手できました。
ひとまずコードは書きあげました!
これをJavaScriptカスタマイズ、kintoneに実装してみます。
🐟kintoneに実装すると…(結果)
お~!!出てきました!
ついに姿を現しました!
レコード詳細画面をひらくと、イカルが「何について調べますか?」と聞いてきます。
検索フォームに「お前を消す方法」と入れると
🐬『そんなこといわないで~』と言ってきます。
しかし意地でも消えません。
別の検索ワードを入れると
ちゃんとアプリ内の検索ができました。
成功!!!
そもそも、kintoneには元々アプリの検索機能あるし、
大した機能ではないですが…
調べながら師匠とのザツダンを楽しみながら
ようやくできたイカルプラグインのJavaScriptファイル。
ここまで4か月近くかかりました💦
・・・
忙しいのを言い訳にしばらく開発がストップしてたのですが
なんとなく…黒い画面が…プレッシャーだった気が…します。
それなら画面を変えてみよう、と。
VSCodeの背景を変えたら、なんかかわいくなりました。
師匠も好みのカラーテーマを設定しているようで
「好きなのだと断然やる気が出るのじゃ!」と、一緒に探してくれました。
なんか落ち着く。
これでもう。画面開くのがこわくな~い。
「かわいいは正義」とはよく言ったものです。
さて、実装するJavaScriptファイルが出来上がったので、
いよいよkintoneプラグイン化!?🐬
…ch.10へ続く