師匠と私-Season1_ch.5☆DOMを制する者はなんでもできるのじゃ！
ー前回までのあらすじー
kintoneアプリプラグインを作成する、プロジェクト始動！
プロジェクト名：「イカル☆プラグイン」
※cybozu developer networkのことはCDNと略してます。
■今できていること=>
①（レコード詳細画面を開いた時に）自動的にポップアップ画面を表示
←これだけ！
■このあとの主な機構=>
機構②
文字入力フォームの値を取得する
機構③
値を取得したものをリンク先に取り込み、検索画面を表示
機構④
ポップアップ画面にイルカの絵を出す
まだまだ完成まで先は長い！宿題がどっさりです。
今回は、機構②「文字入力フォームの値を取得する」をやってみます。
「DOMじゃ！」
DOM…なんだか聞いたことはあるけど？
師匠が早口でまくしたてました。
「kintoneにHTMLを取り込めれば、文字の取得もイルカの絵もDOMでできるのじゃ」「あとCSSでイルカの配置を～」「それからリンクは～」※このあたりはちょっと理解不能。とりあえず無視。（本当に無視はしてないです、いったん置いておくという意味です。）
「DOMで簡単に実装できるぞい」
ひとまずDOMを調べることにします。
師匠にポイっと投げられたリンクを見てみます。※
※このサイトMDNは、開発者がよく使うものです。
（以下ウィキペディアによる説明）
「MDN Web Docsは開発者向けの資源であり、開発者や技術ライターのコミュニティによって維持されており、HTML5、JavaScript、CSS、ウェブAPI、Django、Node.js、WebExtensions及びMathMLといった様々な話題に多くの文書をホストしている。」
(;ﾟДﾟ)…わからない！
もっと初心者にDOMを説明して～！
DOMとは何ぞや？調べてみると。
DOMとは「Document Object Model」の略だ。直訳すると、「ドキュメントを物として扱うモデル」になる。プログラムからHTMLやXMLを自由に操作するための仕組みだ。
例えばブラウザに表示される文字の色を変更したり、大きくしたりと、Webページの見た目をプログラムで処理をしたい場合があるだろう、しかし何もしていない状態のHTMLファイルではJavaScriptから手を出す事が出来ない。そこでファイルの特定の部分に目印を付けて「この部分」に「こういう事をしたい」という処理を可能にするための取り決めがDOMである。
https://eng-entrance.com/what-is-dom
HTMLのファイルとJavaScriptをつなげるための仕組みということか。と、何となく理解。それなら、HTML画像を取得したりHTMLから入力された文字を入手したりできそう。
調べている最中、師匠からメッセージが。
「ずいぶん適当に投げた気がするので、一応、フォロー入れておくのじゃ」
「このサイトのここを見ておけばわかるのじゃ～要素の操作がなーんとなく理解できたら次は実行イベントじゃ！～～もう何でも出来るのじゃっ！！」
うっ…相変わらず情報量が多い…。
ひとまず「何でもできるのじゃっ！」だけは理解しました！
☆ここまで必要そうな情報☆
DOMのこと
・「DOM」は、簡単に言うとHTMLなどのドキュメントにJavaScriptからアクセスするための仕組みのこと。
・DOM＝Document Object Model
HTML文書をオブジェクトデータのように考えます。
・DOMによってHTML文書がオブジェクト化されると、JavaScript側から自由に操作できる
HTMLのツリー構造
・「html」フォルダの中には、「head」「body」という2つのフォルダがある。そして、「head」の中には「meta」という要素があり、「body」の中には「h1」という要素が格納されている。
このように、一番上の階層から順番にHTML要素が規則的に格納されてオブジェクトデータとしてまとめられている。
https://www.sejuku.net/blog/25221
DOMでできること
１・HTML要素を操作するっ
２・実行イベントを制するっ
「HTML要素の取得をなんとなーく理解するのじゃ」
１・HTML要素を操作するっ
HTMLのIDを目印に、中身（要素）を○○できるようです。
○○は、読み込み、書き換えなどです。たしかにこれで自由自在。
■DOMを使ってHTML要素を取得する方法
document.getElementById('foo');
■DOM操作例
①HTML要素をJavaScript側から書き換える方法
【 HTML要素.innerHTML = HTML要素 】
div.innerHTML = "<h1>サンプルタイトル</h1>";
②DOMを使ってHTML要素を作成する方法
【 document.createElement( HTML要素 ) 】
var p = document.createElement('p');
↓ 要素を作成したら
③HTML要素を追加する方法
「appnedChild()」
p.textContent = 'これはサンプルです'; ←テキストを追加している
document.body.appendChild( p ); ←body要素のなかにp要素を配置する
「要素の操作がなーんとなく理解できたら次は実行イベントが大事じゃ！」
「実行イベントには、色んなものがあるのじゃ」
ページロード時、ボタンのクリック時、マウスが動いた時、キーが押された時、などなど
「kintoneでも独自の仕組みがあるのう」
レコード詳細が表示された時、レコード保存した時、などなど
○○が発生したら => DOM要素が変更される
（例：ボタンをクリックしたらイルカのImgタグが追加される）
「これが実現するので、もう何でも出来るのじゃっ！！」
■DOMが作られるタイミング
DOMによりオブジェクト化⇒JavaScriptを実行OK
①「onload」イベント
←「onload」は複数同時に処理NG（処理内容が上書きされる）
window.onload = function() {
//ここに処理を書く
}
②「addEventListener」←上書きされないので、同時に複数の処理OK
window.addEventListener('load', function() {
//処理１
})
第1引数にイベント名（load）・第2引数に実行する関数処理
kintoneのイベント処理は以前調べたので（ch.2）大丈夫。
※まだテスト段階なので、kintoneイベントはひとまず置いておくことに。
ではコーディングしてみます。
HTML 各要素にIDをつけていきますよー
<div id='app'>イカル☆登場！</div>
<p><input type='text' id='text' value=''></p>←入力フィールドの値
<p><input type="submit" id='btn' value="検索" ></p>←検索ボタン
※input にもつけられるんですねー
JavaScript IDから要素を取得していきますよー
document.getElementById('app');
var text = document.getElementById('text');
var searchButton = document.getElementById('btn');
HTMLの表示できました！
searchButton.addEventListener("click", () => {
console.log(text.value);
※値Valueを取得したいので～.valueにしています。
そしてボタンをクリックしたら値の取得が…できました！
ここまで、ずいぶんいろんなサイトで調べました。
それでも師匠のアドバイスがなかったら、一人でうなり続けて止まったままだったと思います。
〇完成したら師匠の好きな大福を買ってあげようかな。
…ch.６へ続く
この記事が気に入ったらサポートをしてみませんか？