program-htmlの日記

つれづれ書いてます

セクション[02]-プログラミング・本のブログ

自身のアウトプットも兼ねてつれづれと書き続けるブログ。


HTML解体新書ー仕様から紐解く本格入門 [ 太田 良典 ]

前回からの続きです。

body要素

body要素は、文章のコンテンツを表します。HTML要素の２番目の子として、head要素の次の要素として、HTML文章に必ず１つ存在します。body要素は原則として表示される内容を記述するセクションです。

 

【属性】

body要素はグローバル属性です。

 

【コンテンツモデル】

body要素のコンテンツモデルはFlowです。通常は見出しやセクショニングコンテンツを配置しますが、図のようにbody要素直下にテキストや画像を配置することもできます。

<body>

　<img src="image.png" alt="画像">

　テキスト

</body>

 

section要素

＜＜画像＞＞

section要素は、文章やアプリケーションの一般」的なセクションを表します。

 

【コンテンツモデル】

section要素のコンテンツモデルはFlowです。

通常、section要素の先頭にはh１要素などの見出しを配置します。見出しがなくても構文エラーにはなりませんが、タイトルのないセクションが出来ることは望ましくありません。

 

article要素

article要素は、自己完結型の構造を表します。サイトのページやアプリケーションの中での、ブログの投稿、ニュースの記事などが該当します。

section要素と似ていますが、article要素は、そのセクションだけで自己完結するものを表します。

 

【コンテンツモデル】

article要素のコンテンツモデルはFlowです。

 

aside要素

aside要素は、メインコンテンツと副次的には関連するものの、メインコンテンツから分類出来るセクションを表します。典型的には、サイドバーや広告、その他の補足情報などを表すために利用します。

 

【コンテンツモデル】

aside要素のコンテンツモデルはFlowです。

 

nav要素は、ナビゲーションのセクションを表します。ナビゲーションには、サイトの他のページへのリンクが含まれていることもあれば、ページ内のリンクが含まれることもあります。

コンテンツ内の全てのリンクグループにナビを入れる必要はありません。

 

【コンテンツモデル】

nav要素のコンテンツモデルはFlowです。

次未定

セクション[01]-プログラミング・本のブログ

自身のアウトプットも兼ねてつれづれと書き続けるブログ。


HTML解体新書ー仕様から紐解く本格入門 [ 太田 良典 ]

前回からの続きです。

アウトラインアルゴリズムによりセクションの決定



HTML仕様にはアウトラインアルゴリズムを定義しています。マークアップからセクション構造を定義する方法は2通りあり、見出しにより暗黙のセクション・セクショニングコンテンツにより明示的なセクションがあります

 

【暗黙のセクション】

HTMLには見出し要素が6種類（h1〜h6）用意されてあり、セクションのランクを表現できます。ある見出しが出現してから、次の同じランクもしくはその見出しより高いランクの見出しが出現するまで、１つのセクションとして扱います。

 

このように、自動的に生成されるセクションのことを暗黙のセクション（implied section）と言います。見出しを適切に使用するだけで自動的にセクションを表現できます。

 

【暗黙のセクションの注意点】

自動的にセクションを表現できますが、うまく表現できないケースもあります。下記のケースの場合、<div>要素はアウトラインに影響しない為、テキストの続きは注釈の一部として扱われます。

<h1>見出し1</h1>

<p>最初のテキスト</p>

<div class="note">

  <h2>注釈</h2>

  <p>注意書き</p>

</div>

<p>テキストの続き</p>

</div>

本当は１つのセクションにまとめて欲しいと思います。

 

【セクショニングコンテンツによる明示的なセクション】

現在のHTML仕様では、セクションの範囲を明示するための要素が用意されています。先程の例を下記のようにdiv要素をsection要素に変更すると、注釈文も１つのセクションとしてまとめる事ができます。このような表現を明示的なセクションといいます。

<h1>見出し1</h1>

<p>最初のテキスト</p>

<section class="note">

  <h2>注釈</h2>

  <p>注意書き</p>

</section>

<p>テキストの続き</p>

</div>

セクションを明示する要素にはarticle、section、aside、navの４つがあります。これらはセクショニングコンテンツ（sectioning content）といいます。

 

【セクショニングルート】

見出しやセクショニングコンテンツが、単純にアウトラインに組み込まれると困る場合があります。その典型的な例が引用です。下記の例で見ていきます。

<section>

　<h1>タイトル</h1>

　<section>

　　<h2>最初に</h2>

　　<p>最初の本文</p>

　</section>

　<section>

　　<h2>次に</h2>

　　<p>次にの本文</p>

　　<blockquote>

　　　<h1>引用</h1>

　　　<p>引用の本文</p>

　　</blockquote>

　</section>

</section>

引用にh1要素があります。本来ならh1があれば暗黙のセクションでセクションと解釈されますが、blockquote要素はそうとなりません。

HTML仕様ではblockquote要素の内側と外側で、それぞれ独立したアウトアインを持つことになっています。よって引用のh1は外側のアウトライン含まれません。

このように内側のセクションと見出しが祖先のアウトラインに影響しないものをセクショニングルート（sectioning root）と呼びます。

 

次セクション[02]

ルート要素と文章のメタデータ[02]-プログラミング・本のブログ

自身のアウトプットも兼ねてつれづれと書き続けるブログ。


HTML解体新書ー仕様から紐解く本格入門 [ 太田 良典 ]

前回からの続きです。

ルート要素と文章のメタデータ[02]

base要素

<base>

base要素は、基準URLやリンク先を表示するデフォルトのウィンドウターゲットを指定します。この要素はなくても良いですが、記述する場合１つしか存在してはなりません。

【コンテンツモデル】

Nothingです。内容を持つことが出来ず、終了タグを書くこともできません。

 

【属性】

href属性：基準となるURLを指定します。下記の例ですとaタグにnekonikoban.htmという相対URLが書かれていますが、HTMLが存在しているか関係なく、http://test.com/のリンクとして扱います。

<base href="http://test.com/">

・・・

<a href="nekonikoban.html">ページ</a>

 

target属性：リンク先をどのように開くかのデフォルト値を指定します。下記の例ですとタブブラウザーであれば常にタブでリンクを開くように指定できます。

<base target="_blank">

meta要素

<meta>

meta要素は、他の要素では表現できないさまざまな種類のメタデータを表します。

 

【コンテンツモデル】

Nothingです。内容を持つことが出来ず、終了タグを書くこともできません。

 

【属性】

meta要素は、下記の４つから最低１つは指定する必要があります。

  • charset：HTMLの文字コーティングを表します。
  • http-equiv：HTTPでウェイブサーバーから与えられる情報と等価な情報を表します。
  • name：文章レベルのメタデータを表します。
  • itemprop：microdataによるメタデータを表します。

※charset属性を指定した場合を除き、content属性も同時に指定しなければなりません。

[charset属性]

charset属性を利用すると、HTML文章の文字エンコーディングを宣言できます。この用法を文字エンコーディング宣言（charset encoding declaration）と呼びます。

<meta charset='utf-8'>

現在のHTML仕様は文字エンコーディングとしてUTF-8を要求するためcharset属性の値は、utf-8としなければいけません。また文字エンコーディング宣言を書く際には以下のような制約があります。

[http-equiv属性]

http-equiv属性を利用すると、HTTPレスポンスヘッダーと同等の情報を指定できます。

 

・文字エンコーディング宣言（http-equiv="content-type"）

文字エンコーディング宣言はhttp-equiv属性にも記入することが可能です。この記述は古い書き方で、現在のHTMLではcharset属性を利用されます。

<meta http-equiv="content-type" content="text/html; charset=utf-8">

 

・ページのリフレッシュ（http-equiv="refresh"）

http-equiv="refresh"を指定してcontent属性に整数を指定すると、指定秒数後にページを自動的に再読み込むするよう指示します。下記の例は200秒後にページを再読み込みする例です。

<meta http-equviv="refresh"content="200">

また指定秒数後にそのURLへリダイレクトする動作を指示できます。下記の例ですと30秒後にhttps://www.nekonikoban.com/に移動します。

<meta http-equviv="refresh"content="30; URL=https://www.nekonikoban.com/>

 

・CSPの指定（http-equiv="content-security-policy"）

CSP（Content Security Policy）を指定できます。CSPを指定すると、ページ上でのJavascriptの動作を制限できます。これにより、クロスサイトスクリプティングの攻撃を受けにくくなります。

 

[name属性]

name属性は、任意のメタデータを表現します。content属性でメタデータとなるテキストを指定し、name属性で任意の名前を付けます。

 

・ページコンテンツの説明（name="description"）

name="description"を指定するとcontent属性の値はページコンテンツの説明（ディスクリプション）となります。検索エンジンはこの説明文を検索結果ページに表示することがあります。

<meta name="description" content="ホームページの説明が入ります。">

 

・ページのキーワード（name="keywords"）

name="keywords"は、ページに関するキーワードをカンマ区切りで記述するものです。

<meta name="keywords" content="キーワード,キーワード,キーワード">

 

・ビューポート（name="viewport"）

name="viewport"は、主に画面が小さなモバイルブラウザーに対して、ウェブページの表示制限に関する情報を伝えます。

<meta name="viewport" content="width=device-width, initial-scale=1">

style要素

style要素は、CSSスタイルシートを埋め込む要素です。link要素が外部のスタイルシートを参照するのに対し、style要素は要素の内容にスタイルを記述します。

特定ページだけに一時的にスタイルを適応するような場合、style要素は便利です。

 

【コンテンツモデル】

テキストになります。このテキストはCSSの構文として適合するものでなければなりません。

 

[属性]

現在ではstyle要素に属性を指定することは稀です。

次 セクション[01]

ルート要素と文章のメタデータ[01]-プログラミング・本のブログ

自身のアウトプットも兼ねてつれづれと書き続けるブログ。


HTML解体新書ー仕様から紐解く本格入門 [ 太田 良典 ]

前回からの続きです。

ルート要素と文章のメタデータ[01]

html要素

<html></html>

html要素はHTML文章でもっとも上位に出現する要素です。他のすべての要素は、この要素の子孫となります。このように文章の最上位に出現する要素をルート要素（root element）といいます。

【コンテンツモデル】

head要素１つ、その後にbody要素１つとなります。

 

【属性】

lang属性：ページ全体の言語を指定する。

<html lang="ja">

 

xmlns属性：HTML文章がXML構文の場合、宣言する。名前空間宣言ともいう

<html xmlns≒"html://www.w3.org/nekonikoban/xhtml">

 

head要素

<head></head>

head要素は文章に関するメタデータの集合を表すものです。小要素にさまざまなメタデータを含みます。

【コンテンツモデル】

head要素のMetadataです。主にlink要素、meta要素、script要素、style要素を入れることができます。原則title要素を必ず１つ含まないといけません。

 

title要素

title要素のページのタイトルを表すものです。原則として、この要素はhead要素内に必ず１つ存在しないといけません。

【コンテンツモデル】

title要素の内容はテキストのみです。子要素を持つことが出来ず、タグを書いてもテキスト扱いになります。ただし文字参照は展開されます。下記の例だと「タイトル＆タイトル」と表記されます。

<title>タイトル &amp; タイトル</title>

 

 

次ルート要素と文章のメタデータ[02]

GAS ＋ Twitter adsApi -プログラミング・本のブログ

自身のアウトプットも兼ねてつれづれと書き続けるブログ。

 

久しぶりの更新。

今回は、GASの話題になります。

仕事でGAS+Twitter adsApiの実装指示があり、その記録となります。主に私自身がつまづいた箇所を書き出しています。少しでもご参考にして頂けますと幸いです。

※2023年10月18日付での内容でございます。

 

ドキュメント

Getting Started | Docs | Twitter Developer Platform

developer.twitter.com

 

はじめに

下記の内容が必要になります。

※こちらは公式らしきところから回答がありましたが、自己責任でお願いいたします。

docs.google.com

申請まで終わりますとTwitter開発者アカウントのダッシュボードで、トークンなどの取得を行います。認証方法にOAuth 1.1とOAuth 2.0  と2種類方法があります。私は今回OAuth 1.1で行いました。
[OAuth 1.1 ]

[OAuth 2.0 ]

  • Client ID
  • Client Secret

ここまで出来ましたら次はgasでの作業になります。ここまではGoogleに「ツイッター API　使い方」で検索したら、画像ありでの詳細を記載したサイトが出てくると思いますので、そちらを参考にして下さい。ただしtwitter社への申請が公式サイトから確認出来ず、noteでたまたま発見しました。なので申請は本当に自己責任でお願いいたします。

GAS

＜＜画像＞＞

[ライブラリー追加]

Twitter adsApiでは認証が必要になります。OAuth 1.1・OAuth 2.0 共にGASのライブラリーで提供されていますので活用して下さい。

[認証]

ライブラリーを使用しての認証です。各ライブラリーのreadmeを参考に実装していきます。個人的に注意した方が良いかなと思ったところはauthorizationUrlをログで見えるようにする事。

私の体験談で実行→実行中断でauthorizationUrlが分からないまま認証できたので、そこが何だかモヤモヤしてしまいます。

function showSidebar() {
  var twitterService = getTwitterService_();
  if (!twitterService.hasAccess()) {
    var authorizationUrl = twitterService.authorize();

    Logger.log(authorizationUrl ); // これ追加
    var template = HtmlService.createTemplate(
        '<a href="<?= authorizationUrl ?>" target="_blank">Authorize</a>. ' +
        'Reopen the sidebar when the authorization is complete.');
    template.authorizationUrl = authorizationUrl;
    var page = template.evaluate();
    DocumentApp.getUi().showSidebar(page);
  } else {
    Logger.log("認証済み");
  }
}

Twitterのダッシュボードで下記の設定もお忘れないようにして下さい。

Twitter開発者アカウントサイドメニュー→Overview→画面中央の歯車マーク→画面中央下User authentication settingsのeditをクリック→下にスクロールApp info callback URLに下記を追加

https://script.google.com/macros/d/{SCRIPT ID}/usercallback

 

[data取得]

認証が上手くいきますと下記のコードでAPIを叩けるようになります。urlの箇所は欲しいデータで変わりますので、ドキュメントで確認してください。

const service = getTwitterService_();

const res = service.fetch(url)

developer.twitter.com

postman

documenter.getpostman.com

菅理画面のデータ取得順序(job作成→処理監視→処理完了後データ取得urlでダウンロード)

developer.twitter.com


documenter.getpostman.com

ちなみに私は今回キャンペーンの情報取得でしたので、下記のurlでデータ取得していました。

end_time=${todayDate}&entity_ids=${entityIdsList.join()}&granularity=DAY&
entity=CAMPAIGN&start_time=${twoMouthDate}>&
placement=ALL_ON_TWITTER&metric_groups=BILLING`

urlでの注意点ですがentityで取得したいデータのグループを指定しますが、entity_idsはその指定したグループのIDを入れないといけません。仮にentity=CAMPAIGNならentity_ids=campaing_idです。体験談でLINE_ITEMにentity_idの項目がありCAMPAIGNのデータが取得できないで何時間も調べたハメになりました。

 

またデータ取得期間も注意して下さい。詳しくは分かりませんが、欲しい期間の1日プラスした日を指定して下さい。

例えば2023-10-18〜2023-08-10なら 2023-10-19〜2023-08-11で指定。

仕様だと思いますが、間違えてたらご指摘をお願いいたします。

 

entityの項目など調べる場合、下記を参考にして下さい。

developer.twitter.com

 

[gzip解凍]
Twitter adsApiでデータを取得したファイル形式はgzipです。

したがって解凍が必要です。

const dataRes = UrlFetchApp.fetch(dataUrl) // data受け取り

// gzipの解凍処理

const gzipText = dataRes.getBlob()

gzipText.setContentType("application/x-gzip")

const unGzippedfile = Utilities.ungzip(gzipText)

// オブジェクトに変換

const dataAsString = JSON.parse(unGzippedfile.getDataAsString())

後はオブジェクトに変換したデータを好きなように成型し、スプレットシートに書き出すだけです。

最後に

APIを実装すると

  • 認証処理ができた時
  • 情報のログが表示された時
  • 欲しい情報が取得できた時
  • ドキュメントが何となく理解できた時
  • GASでスプレットシートに記載できた時

このような場面に遭遇すると何だか嬉しくなります。

今回、私自身がつまづいた箇所を抜粋し書き出してみました。Twitter adsApiで悩んでる方に少しでもお役に立てれば幸いです。

HTMLの細かい構文ルール-プログラミング・本のブログ

自身のアウトプットも兼ねてつれづれと書き続けるブログ。


HTML解体新書ー仕様から紐解く本格入門 [ 太田 良典 ]

前回からの続きです。

HTMLの細かい構文ルール[08]

[タグ名に使用できる文字]

HTMLのタグ名はASCII英字（ASCII alpha）で始まる必要があり、数字で始まることは許されません。下記の例のように記入すると&lt;75と解釈されます。

<75>

1文字目だけASCII英字で2文字以降はほとんどの数字や記号類が使用できます。ただ２文字でも利用できない文字があります。

  • >：タグの終了と解釈される。
  • ASCII空白文字：属性値との区切りと解釈される。
  • /：自己終了タグもしくは属性値との区切りと解釈される。

 

【終了タグに属性は書けない】

終了タグに属性を書くことはできません。終了タグに属性を書いた場合、エラーとなり、属性は無視されます。ですが、終了タグ自体は有効に機能します。
下記の例だとclass="foo"は無視されるが、</p>は終了タグとして解釈されます。

<p>foo</p class="foo">

 

【終了タグ末尾の/】

終了タグの末尾に/を書くことはできません。単に/が無視され、終了タグ自体は解釈されます。下記の例だと/無視され、終了タグとして解釈されます。

<p>foo</p/>

 

【空タグ】

タグ名を省略した空のタグを指します。直近に開いた要素の名前を参照します。SGMLや理論上HTML4でも使用可能でしたが、現在のHTML構文では使用できません。下記の例だと<></>は直前のpを参照にpタグを解釈するそうです。

<p>テキスト</p>

<>テキスト</>

 

【開始タグを省略すると属性は書けない】

開始タグを省略できる場合があります。その一方で開始タグを省略した際に属性のみを書く方法は存在しません。つまり、属性を指定したければ必ず開始タグを書かなければいけません。

 

【重複する属性】

同一の属性は複数指定できません。下記の例ですとclass="name1"のみ解釈されます。属性の種類によっては複数の値を指定できる場合があります。classの場合はASCII空白文字（スペース）で区切って指定します。

<div class="name=1" class="name2">


<!-- 複数の値を指定 -->

<div class="name=1 name2">

 

【属性値の省略】

空の属性値の記述は省略できます。

<img alt>

<img alt="">

<img alt=''>

 

【引用符のない属性】

属性を書く場合、引用符を省略できる場合があります。引用符を省略した場合、以下のような解釈になります。

  • タブ、改行、スペース、＞が出現すると属性値が終了と解釈
  • "、'、<、=、`が出現すると構文エラーとなるが、該当の文字は属性値の一部として解釈される。

仕様上可能だが、セキュリティ観点からは、属性値は引用符で括ることを強く推奨されてます。

 

【終了タグを書き漏らした際のエラー】
終了タグを書き漏らした場合、ブラウザーで様々な解釈をされます。後述のように直感に反する挙動となることが多いため、エラーが起きないマークアップをするように心掛けたい。

直感に反するエラー

HTML Standardのエラー処理には、直感に反する特殊なルールがいくつかあります。

 

【ノアの方舟ルール】

<p><b><b><b><b>4つのb開始タグ</p>

<p>bのないp</p>

上記の例のようにわざと<b>を４つ書きエラーを起こさせた場合、下記の例のように解釈されます。

<p><b><b><b><b>4つのb開始タグ</b></b></b></b></p>

<b><b><b><p>bのないp</p></b></b></b>

<b>が１つの時と同じルールで補正されているように見えますが、2行目のp要素の外側に補われている<b>タグと</b>タグの数は3つしかありません。4つあったはずのb要素が１つ減っています。これは、要素をまたがって補われる際、同一要素名・同一クラスの要素は３つまでしか復元されないルールがあるからです。これをノアの方舟（Noah's Ark）といいます。

 

【foster parenting】
table要素には特殊なエラー処理foster parentingがあります。table要素直下には、caption, col, colgroup, thead, tbody, tfoot要素といったテーブル関連要素を入れることができます。ただし、それ以外の要素を入れると構文エラーになります。

<table>

  <tr>

    <th>見出しセル</th>

    <td>データセル</td>

  </tr>

  <p>テキスト</p>

</table>

上記の例ですとtable要素内にp要素を入れています。先ほどもいいましたが、テーブル関連要素以外の要素を入れていますので、構文エラーになり下記のような解釈をされてしまします。

<p>テキスト</p>
<table>

  <tr>

    <th>見出しセル</th>

    <td>データセル</td>

  </tr>

</table>

下にあったp要素がtableの前に移動されています。table要素ではテーブル関連要素以外の要素は前に追い出せれる仕様になっています。これをfoster parentingといいます。

特に注意したいのは全角スペースです。全角スペースもtable要素は前に追い出されます。マークアップでインデントを全角にすると、予想外の挙動になる場合もありますので注意が必要です。

 

ルート要素と文章のメタデータ[01]

コメント-プログラミング・本のブログ

自身のアウトプットも兼ねてつれづれと書き続けるブログ。


HTML解体新書ー仕様から紐解く本格入門 [ 太田 良典 ]

前回からの続きです。

コメントの基本書式[07]

<!--コメント-->

コメントは上記のような記述になります。<!--がコメントの開始、-->がコメントの終了を表すマークです。これらに囲まれた部分がコメントの内容となります。

コメントは、DOMツリー上でコメントノードとして扱われます。よってJavaScriptからコメントの内容を読み取ることもできます。

コメントの構文ルール

コメントにはさまざまな内容が記述可能です。
【複数行】

<!--

複数行にわたる

コメントも可能

-->

 

【空のコメント】

<!---->

 

【既存のマークアップを一時除外】

<!--

<h1>見出し</h1>

<p>テキスト</p>

-->

コメントには＞も記述できますが先頭には記述できない制限があります。もし先頭に＞を記述すると、構文エラーとなり空のコメントノードが追加され、＞以下マークアップ（画面に表示）されるようになります。

 

【コメントは入れ子にできない】

要素と異なり、コメントは入れ子にできません。

<!-- 前 <!--内側--> 後 -->

上記の例ですと「前<!--内側」というコメントノードと「後 -->」のテキストノードになります。

また、コメントの末尾に<!-を記述することもできません。

<!-- <!--->

上記の例ですと、コメントを入れ子にしようとして構文エラーになります。

 

【コメントの前後にスペースを挟む】

コメントの内容の先頭に>や->を書いたり、末尾に<!-を書くとエラーになります。しかし、スペースを挟めば問題ありません

<!-- >コメント -->

<!-- ->コメント -->

<!-- >コメント<!- -->

ただし、スペースを挟んでも入れ子のコメントは書けません。

<!-- <!-- -->

コメントを使用する際は、コメント前後にスペースを空ける。コメント内にコメントを入れ込まない（既存のマークアップを一時除外する時などは注意）

 

次HTMLの細かい構文ルール