Model)のouterTextとinnerTextの違いについてVBAのIE(InternetExplorer)制御でのouterTextとinnerTextの違いについて解説しています。前回は、outerHTML・innerHTML・outerText・innerTextプロパティを利用して指定した要素オブジェクトのHTMLコードを取得する方法について解説しました。前回の値の取得ではouterTextプロパティとinnerTextプロパティの違いが分かりませんでいたが、今回は4つのプロパティの値の設定も含めてouterTextプロパティとinnerTextプロパティの違いについて解説していきます。Model」の略称で、html・head・body・p・aなどのHTMLドキュメント要素にアクセスして取得や操作ができる仕組みのことです。以下はHTMLドキュメントをツリー構造に表したものでDOMツリーと呼ばれます。階層状のツリー構造でHTMLドキュメントを表現します。Language」の略称で、Webページを作成するために開発された言語です。世の中に公開されているWebページのほとんどがHTMLで作成されています。こちらのサイトもHTMLで作成されています。HTMLは基本的に以下のような構成でできており「<タグ名>★テキスト★</タグ名>」が1つの要素(エレメント)になります。この中の特定の要素に対してデータの取得や操作を行っていきます。<p>こちらはpタグのテキストです。href="★リンクURL★">リンクのアンカーテキストです。</body></html>タグと要素(エレメント)の違いHTML言語では、「タグ」と呼ばれる仕組みを利用して構築していきます。以下のイメージを確認すると分かりやすいと思いますが、タグとは「<」と「>」で構成されており、開始タグと終了タグまでの括りで1つの要素を形成します。具体例で説明するとWebページのタイトルを表す「titleタグ」を利用して開始タグの「<title>」と終了タグの「</title>」で括り、タグの中の文字列が「要素内容」となります。こちらでは「VBAのIE制御入門」の文字列が要素内容となります。こちらの「開始タグ+要素内容+終了タグ」の全体を「要素」と呼びます。別名では「エレメント」と呼ばれますので、どちらも同じ意味であることを理解してください。指定した要素オブジェクトに値を設定する処理の流れ以下が今回の処理の流れになります。利用するサブルーチン・プロパティ・VBA関数について今回利用するサブルーチン・プロパティ・VBA関数は以下になります。ieViewサブルーチンieCheckサブルーチンDocumentプロパティとはAllプロパティとはouterHTMLプロパティとはinnerHTMLプロパティとはouterTextプロパティとはinnerTextプロパティとはMsgBox関数プロパティとはieViewサブルーチンとはieViewサブルーチンは指定したURLをInternetExplorerで起動させ、Webページが完全に読み込まれるまで待機処理をするマクロです。ieView("IEオブジェクト","表示させたいURLの文字列","IE表示・非表示の値[省略可]","Y位置の値[省略可]","X位置の値[省略可]","幅の値[省略可]","高さの値[省略可]")ieViewieCheckサブルーチンとはieCheckサブルーチンは指定したInternetExplorerオブジェクトのWebページが完全に読み込まれるまで待機処理をするマクロです。ieCheck("IEオブジェクト")ieCheckDocumentプロパティとはInternetExplorerオブジェクトのDocumentプロパティはHTMLドキュメントのオブジェクトを返すプロパティです。これによりHTMLドキュメントを操作することができます。objIE.document.プロパティ/メソッドDocumentプロパティAllプロパティとはDocumentオブジェクトのAllプロパティはHTMLドキュメント内の全ての要素オブジェクトを返すプロパティです。objIE.document.All.プロパティ/メソッドobjIE.document.All(添え字).プロパティ/メソッドouterHTMLプロパティとは要素オブジェクトのouterHTMLプロパティは指定した要素オブジェクトの要素タグとその中に含まれるHTMLコードを取得するプロパティです。objIE.document.All(添え字).outerHTML赤文字がpタグのouterHTMLの取得範囲になります。class="colorRed">outerHTML</span>の取得範囲</p>innerHTMLプロパティとは要素オブジェクトのinnerHTMLプロパティは指定した要素オブジェクトの要素タグの間に含まれるHTMLコードを取得するプロパティです。指定した要素オブジェクトの要素タグは含まれません。objIE.document.All(添え字).innerHTML赤文字がpタグのinnerHTMLの取得範囲になります。class="colorRed">innerHTML</span>の取得範囲</p>outerTextプロパティとは要素オブジェクトのouterHTMLプロパティは指定した要素オブジェクトの要素内のテキスト部分のHTMLコードを取得するプロパティです。objIE.document.All(添え字).outerText赤文字がpタグのouterTextの取得範囲になります。class="colorRed">outerText</span>の取得範囲</p>innerTextプロパティとは要素オブジェクトのouterHTMLプロパティは指定した要素オブジェクトの要素内のテキスト部分のHTMLコードを取得するプロパティです。objIE.document.All(添え字).innerText赤文字がpタグのouterTextの取得範囲になります。class="colorRed">outerText</span>の取得範囲</p>MsgBox関数とはMsgBox関数はダイアログボックスにメッセージとボタンを表示し、どのボタンが押されたかを示す整数型の数値を返します。"表示させる文字列"MsgBox関数outerHTMLプロパティを利用して値を設定するサンプルコードこちらのVBAコードは、IE(InternetExplorer)の指定要素のouterHTMLプロパティを利用して値を設定するマクロです。StringこちらはSubステートメントに引数の設定がないsampleプロシージャになります。」を、変数宣言しています。"http://www.vba-ie.net/code/all.html")次に他のプロシージャを呼び出すCallステートメントを利用してieViewサブルーチンを呼び出しています。引数にはオブジェクト変数の「objIE」を第二引数には表示させるURLの「http://www.vba-ie.net/code/all.html」を設定しています。これによりInternetExplorerでデータ抽出用ページが表示されます。color="blue">リスト変更</font>"ここからはouterHTMLプロパティを利用して値を設定する部分になります。以下は理解しやすい様にVBAコードとキーワードの関連性を列挙したものです。関連性ですので必ずしも「=(イコール)」ではありません。1番目のli要素オブジェクトの要素タグとその中に含まれるHTMLコードまず、InternetExplorerオブジェクトのdocumentプロパティを利用してHTMLドキュメントのオブジェクト(Documentオブジェクト)を取得します。次にDocumentオブジェクトのallプロパティを利用してHTMLドキュメントの全ての要素を取得します。Allコレクションのtagsメソッドに添え字の「0」を設定して、1番目のli要素を取得します。color="blue">リスト変更</font>」を代入します。IE(InternetExplorer)を確認するとリストマークが消えてfontタグのblueが適用されていることが分かります。次に値を設定したことでどのように変化したのかを確認していきます。Withこちらは4つのプロパティがどのような値を取得するのかを確認する処理になります。以下は処理の結果ですが、結果を見るとなぜか「リスト2のli要素」の各HTMLコードを取得しています。ここだけでは原因が分からないので、次の検証でli要素を全て抽出してみます。strListこちらは全てのli要素を抽出しています。以下の結果を確認すると1番目のli要素が「リスト2のli要素」になっており、元々の「リスト1のli要素」が無くなっていることが分かります。そこで今度は親要素のul要素を見ていきましょう。objIE.document.all.tags("li")(0).parentElement.outerHTMLこちらでは、1番目のli要素の親要素「ul要素」のHTMLコードを抽出しています。color="blue">リスト変更</font>」に変更されているのが分かります。このことからouterHTMLプロパティは、指定した要素オブジェクトの要素タグも含めてHTMLコードの値を設定するプロパティと言えます。値を設定したことでli要素ではなくなったので、先ほどの1の結果が「リスト2のli要素」が1番目のli要素に変わったことになります。続いてinnreHTMLプロパティを見ていきましょう。innerHTMLプロパティを利用して値を設定するサンプルコードこちらのVBAコードは、IE(InternetExplorer)の指定要素のinnerHTMLプロパティを利用して値を設定するマクロです。color="blue">リスト変更</font></li>解説こちらはinnerHTMLプロパティを利用した値の設定についての解説ですが、ページ表示までの処理は先ほどと同様ですので割愛します。color="blue">リスト変更</font>"ここからはinnerHTMLプロパティを利用して値を設定する部分になります。color="blue">リスト変更</font>」を代入します。IE(InternetExplorer)を確認するとリストマークはそのままでfontタグのblueが適用されていることが分かります。次に値を設定したことでどのように変化したのかを確認していきます。With結果を確認すると変更された「リスト変更のli要素」の各HTMLコードを取得しています。今回は、li要素として認識されています。次にli要素を全て抽出してみます。strListこちらは全てのli要素を抽出しています。以下の結果を見ても1番目のli要素はそのままで「リスト変更のli要素」になっています。fontタグもHTMLコードとして認識されているのが分かります。続いて親要素のul要素を見ていきましょう。color="blue">リスト変更</font></li>」に変更されているのが分かります。このことからinnerHTMLプロパティは、指定した要素オブジェクトの要素タグの間に含まれるHTMLコードの値を設定するプロパティと言えます。値を設定したことでli要素内の値は変わりましたが、li要素はそのままになります。続いてouterTextプロパティを見ていきましょう。outerTextプロパティを利用して値を設定するサンプルコードこちらのVBAコードは、IE(InternetExplorer)の指定要素のouterTextプロパティを利用して値を設定するマクロです。color="blue">リスト変更</font>"ここからはouterTextプロパティを利用して値を設定する部分になります。color="blue">リスト変更</font>」を代入します。IE(InternetExplorer)を確認するとリストマークが消えてfontタグも文字列として表示されていることが分かります。次に値を設定したことでどのように変化したのかを確認していきます。With結果を確認するとouterHTMLプロパティの処理と同様に「リスト2のli要素」の各HTMLコードを取得しています。次にli要素を全て抽出してみます。strList結果を確認するとこちらもouterHTMLプロパティの処理と同様に1番目のli要素が「リスト2のli要素」になっており、元々の「リスト1のli要素」が無くなっていること分かります。そこで今度は親要素のul要素を見ていきましょう。color=&quot;blue&quot;&gt;リスト変更&lt;/font&gt;」に変更されているのが分かります。「&lt;」「&quot;」「&gt;」は実態参照と呼ばれるもので、HTMLで特殊な文字を出力するために使用される特殊な単語になります。HTMLは「<」と「>」で構成されていますが、こちらをそのまま記述してWebページで表示させようとするとHTMLタグと認識されてしまい表示させることができません。そこで、こちらを文字として出力するために「&lt;」と「&gt;」で記述しておくとWebページ上は「<」と「>」で表示されます。このことからouterTextプロパティは、設定値を全て文字列として扱い、指定した要素オブジェクトの要素タグも含めてHTMLコードの値を設定するプロパティと言えます。最後にinnerTextプロパティを見ていきましょう。innerTextプロパティを利用して値を設定するサンプルコードこちらのVBAコードは、IE(InternetExplorer)の指定要素のinnerTextプロパティを利用して値を設定するマクロです。color="blue">リスト変更</font>"ここからはinnerTextプロパティを利用して値を設定する部分になります。color="blue">リスト変更</font>」を代入します。IE(InternetExplorer)を確認するとリストマークはそのままでfontタグの文字列が表示されていることが分かります。次に値を設定したことでどのように変化したのかを確認していきます。With結果を確認すると変更された「リスト変更のli要素」の各HTMLコードを取得しています。こちらは、li要素として認識されています。次にli要素を全て抽出してみます。strListこちらは全てのli要素を抽出しています。以下の結果を見ても1番目のli要素はそのままで「リスト変更のli要素」になっています。fontタグはHTMLタグとして認識されておらず、文字列として扱われているのが分かります。続いて親要素のul要素を見ていきましょう。color=&quot;blue&quot;&gt;リスト変更&lt;/font&gt;</li>」に変更されているのが分かります。こちらも設定値が全て文字列として扱われHTMLタグが実態参照で表示されています。このことからinnerTextプロパティは、設定値を全て文字列として扱い、指定した要素オブジェクトの要素タグの間に含まれるHTMLコードの値を設定するプロパティと言えます。outerHTML・innerHTML・outerText・innerTextの違いについてここまで4つのプロパティの値の設定について見ていきました。値を取得する際には特に違いが分かりませんでしたが、値を設定するとそれぞれの違いが見えてきたかと思います。以下は上記の結果をまとめた一覧になります。それぞれの特徴を理解した上で利用するようにしましょう。リスト1まとめ元々は前回のouterHTML・innerHTML・outerText・innerTextプロパティの値を取得する際にouterText・innerTextプロパティの違いが分からないということで今回検証しましたが、実際に検証すると全てのプロパティでそれぞれ特徴があることが分かりました。値を取得する場合は、outerText・innerTextプロパティどちらを設定しても問題ないですが、値を設定する場合はそれぞれの特徴を理解した上で利用しましょう。ここまでAllプロパティなどを利用して大きく特定のオブジェクトを取得してきましたが、次回からはピンポイントに特定のオブジェクトを取得する方法を中心に紹介していきます。次回はその1つとしてGetElementByIdメソッドについて詳しく解説していきます。寛IEのデータ収集&自動操作のプログラミング本はこの1冊だけ!IEの起動やポップアップウィンドウ、表示を制御する基本的なコードはもちろん、テキストボックスやラジオボタン、表、ハイパーリンクなどのHTML部品を制御する方法など、自動操作に欠かせないノウハウを丁寧に解説。↑こちらはExcelのVBAをマスターできるよう初心者向けのエクセルVBA入門コンテンツになります^^RSSフィードを登録すると最新記事を受け取ることができます。Model)についてHTMLドキュメント(全ての要素)を取得するHTMLドキュメントの要素数を取得するhead要素とbody要素を取得する親要素と子要素を取得する要素のHTMLコードを取得するouterTextとinnerTextの違いについてid名から要素を特定するname名から要素を特定するclass名から要素を特定するタグ名から要素を特定するaタグから要素を特定するid・name属性を持つaタグから要素を特定するimgタグから要素を特定するtableタグから要素を特定するtable要素のセルを特定するエクセルVBAでHTMLエレメント実践操作meta要素のkeywordsとdescriptionを抽出するmetaデータを抽出するプロシージャ開いているページのタイトルを抽出するHTMLエレメント実践操作一覧(21)エクセルVBAでHTMLフォーム基本操作テキストボックスに入力するパスワードボックスに入力するテキストエリアに入力するフォームテキストの入力プロシージャラジオボタンを選択するHTMLフォーム基本操作一覧(16)エクセルVBAでHTMLフレームの基本操作テキストボックスに入力するフォームテキストの入力プロシージャフォームボタン・ボックスを選択するフォームボタンの選択プロシージャHTMLフレームの基本操作一覧(8)エクセルVBAでIE制御の応用編Twitter(ツイッター)[3]アメブロ[1]FC2ブログ[1]IE制御の応用編一覧(7)【ダウンロード】IE操作に便利なツールこちらでは、これまでに紹介したIE(InternetExplorer)操作で便利な機能をツール化しています。無償でダウンロードできますので、目的に合わせたご利用ください。リンクIEオブジェクトのメソッド・プロパティこちらでは、IE(InternetExplorer)オブジェクトのメソッド・プロパティをまとめています。IE操作に利用されているVBA関数こちらでは、エクセルVBAのIE(InternetExplorer)操作で利用されたVBA関数をまとめています。リンクIE操作に利用されているステートメントこちらでは、エクセルVBAのIE(InternetExplorer)操作で利用されたステートメントをまとめています。ExcelのVBAで基本的な部分になりますので、しっかり理解しましょう。IE(InternetExplorer)制御のVBAコードこちらでは、これまでに作成したIE(InternetExplorer)操作で役立つサブルーチンをまとめています。全てをコピーする必要はありませんが、目的に合わせたサブルーチンをご利用ください。Applications)を利用したIE(InternetExplorer)の制御についてまとめています。ExcelのVBAでIE(InternetExplorer)を操作することで自動ログインや自動データ入手などができますので、非常に便利なプログラムです。