schema.orgで定義されている構造化データ型

　schema.orgのスキーマは型のセットであり、それぞれがHTML microdataなどで使用されるプロパティーに関連付けられています。それぞれの型は階層構造になっています。 　schema.orgのプロパティは、次のように分類されています。

プロパティ	説明	例
Action	行為	移動, 食事, 投票など
CreativeWork	創作活動	記事, ブログ, 本, ゲーム, TV
Event	イベント	ビジネスイベント, フェスティバル, 音楽イベント
Intangible	ユーティリティクラス	ブランド, バス旅行, 試合, 注文, デリバリーサービス
Organization	組織	航空会社, 株式会社, 教育組織, NGO
Person	人
Place	場所	宿泊施設, 管理地域, 公共施設, 山/川/湖など
Product	製品やサービス	シリアルなどで特定される個々の製品, 製品モデル, 類似製品

HTML Microdata

　HTML Microdata使用すると、HTML中に既存のドキュメントと並行して、ネストされた「名前-値」のペアのグループを定義できるようになります。HTML仕様ではHTML5から使用可能となっています。 　Microdataの基本構造となるのは、「名前（name）」と「値（value ）」のペアで、これは「プロパティ（property）」と呼ばれます。プロパティをグループ化したものを「アイテム（items）」と呼びます。 　定義の順番としては、アイテムを先に作り、そこにプロパティを追加していきます。アイテムを作るには、itemscope属性を使用します。アイテムへのプロパティ追加には、アイテムの子孫のいずれかでitemprop属性が使用されます。

<div itemscope>
 <p>My name is <span itemprop="name">yamada</span>.</p>
</div>

<div itemscope>
 <p>My name is <span itemprop="name">tanaka</span>.</p>
</div>

　上の例では、「"name"-"yamada"」と「"name"-"tanaka"」の二つのプロパティが作られます。 　上記の例では構文的な誤りはありませんが、せっかくMicrodataでマークアップしたデータを再利用することは出来ません。データを再利用するには、itemscope属性のitemtype属性（アイテムの型）を指定する必要があります。 　itemtypeはURLによって識別され、様々なアイテムが定義されています。itemtypeのURLとして、以下のURLが代表的です。

URL	説明
http://data-vocabulary.org	Googleの検索エンジンで用いられている
http://schema.org	GoogleやMicrosoftなどが共同で進めている構造化データ マークアップの共通仕様策定団体が定義するプロパティ

　http://data-vocabulary.orgの定義は、ほとんどがhttp://schema.orgに移行しましたが、パン屑リストに関してはhttp://data-vocabulary.org/Breadcrumbが効果的です。 　次はパン屑リストにhttp://data-vocabulary.org/Breadcrumbで定義されている型付きアイテムを適用した例です。

<ul>
  <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://chiguhagunafugou.blogspot.jp/" itemprop="url">
  <span itemprop="title">ちぐはぐな符号 トップ</span></a> >
  </li>
  <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://chiguhagunafugou.blogspot.jp/2016/12/syntaxhighlightersyntaxhighlighter.html" itemprop="url">
  <span itemprop="title">SyntaxHighlighterの設定</span>
  </a> >
  </li>
</ul>

HTML リスト（箇条書き）

　HTMLでは、次のようなリスト（箇条書き）を記述するためのタグが用意されています。

• item 1
• item 2
• item 3

　リストの記述では、リストの開始を終了を示すタグ（<UL>や<OL>）と個々の項目（要素）を示す<LI>タグを使用します。上記の例のコードは以下のようになります。

<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>

　OLタグは本来は番号付きリストの開始と終了を示すためのタグでしたが、HTML5では仕様が変更され、項目の先頭に固定文字を置いたり、項目だけを表示することもできるようになりました。これにより従来番号無しリストで使用していたULタグの必要性がかなり少なくなっています。 　リストの先頭の文字を「マーカー」と呼びます。マーカーはstyleのlist-style-typeプロパティによって設定します。 書式

<OL style="list-style-type: プロパティ値">

プロパティ値	マーカー	例
decimal	算用数字	項目 1 項目 2 項目 3
decimal-leading-zero	算用数字（先頭に0）	項目 1 項目 2 項目 3
lower-alpha	アルファベット小文字	項目 1 項目 2 項目 3
upper-alpha	アルファベット大文字	項目 1 項目 2 項目 3
lower-roman	ローマ数字小文字	項目 1 項目 2 項目 3
lower-greek	ギリシャ文字小文字	項目 1 項目 2 項目 3
disc	黒丸	項目 1 項目 2 項目 3
circle	白丸	項目 1 項目 2 項目 3
square	黒四角	項目 1 項目 2 項目 3
none	マーカー文字無し	項目 1 項目 2 項目 3
hiragana	あいうえお順	項目 1 項目 2 項目 3
katakana	アイウエオ順	項目 1 項目 2 項目 3
cjk-ideographic	漢数字	項目 1 項目 2 項目 3
hiragana-iroha	いろはにほへと順	項目 1 項目 2 項目 3
katakana-iroha	イロハニホヘト順	項目 1 項目 2 項目 3
armenian	アルメニア数字	項目 1 項目 2 項目 3
georgian	グルジア数字	項目 1 項目 2 項目 3
hebrew	ヘブライ数字	項目 1 項目 2 項目 3
lower-latin	ラテン文字小文字	項目 1 項目 2 項目 3
upper-latin	ラテン文字大文字	項目 1 項目 2 項目 3
initial	CSSで設定したデフォルトを適用
inherit	親要素のプロパティを継承

コード例

<ol style="list-style-type: upper-latin">
<li>項目 1</li>
<li>項目 2</li>
<li>項目 3</li>
</ol>

　list-style-imageプロパティを使えば、マーカーに画像を表示することもできます。

1. item 1
2. item 2
3. item 3

書式

書式１　<OL style="list-style-image: url(画像ファイルのURL)">
書式２　<OL style="list-style-image: inherit">
書式３　<OL style="list-style-image: none">

プロパティ値	意味
url(img)	imgに画像ファイルへのURLをセットするとリストの各項目の先頭に指定された画像が表示される
inherit	親要素のプロパティ値を継承
none	項目の先頭に画像を表示しない

使用例（コード）

<ol style="list-style-image: url(http://books-nekoya.jp/Programming/faviconPrg.png)">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>

　reversed属性を使えば、リストの番号を逆順に表示することができます。

属性値	意味
"reversed"	リストの番号を逆順表示

表示例

1. item 1
2. item 2
3. item 3

　start属性を使えば、リスト番号の開始番号を指定することができます。

属性値	意味
n	リスト番号の開始番号

使用例（表示）

10. item 1
11. item 2
12. item 3

使用例（コード）

<ol start="10">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>

HTML 文字参照と数値参照

　HTMLでは、それぞれの文字に割り当てられたエイリアス名やコードを使った「文字参照」や「数値参照」で文字を表現することができます。このような参照方法は、HTMLのテキストとして直接書けない<や>などの特殊文字などに用いられます。 　文字参照の書式は、次のように&にエイリアス名が続き、最後はセミコロンで終わります。

&name;

　数値参照には10進表記と16進表記があります。10進表記の場合は、&#にHTMLで定義された10進数の文字コードが続き、最後はセミコロンで終わります。

&#d;

　16進表記の場合は、&#xにHTMLで定義された16進数の文字コードが続き、最後はセミコロンで終わります。

&#h;

　HTMLにテキストとして直接書けない<や>などの文字は特殊文字と呼ばれ、以下のような文字が代表的です。

文字	文字参照	数値参照（10進）	数値参照（16進）	説明
<	&lt;	&#60;	&#x3C;	HTMLタグで使用
>	&gt;	&#62;	&#x3E;	HTMLタグで使用
半角スペース	&nbsp;	&#38;	&#x26;	連続する半角は1つにまとめられる
&	&amp;	&#160;	&#xA0;	HTMLでは文字参照で用いられる

　文字参照や数値参照では、記号文字も参照することができます。以下に使えそうな記号をピックアップしてみました。

文字	文字参照	数値参照（10進）	数値参照（16進）	説明
©	©	©	©	copyright
®	®	®	®	登録商標
™	™	™	™	商標
°	°	°	°	度
±	±	±	±
²	²	²	²	平方
³	²	³	³	立方
¼	¼	¼	¼	1/4
½	½	½	½	1/2
¾	¾	¾	¾	3/4
¿	¿	¿	¿	逆疑問符
♦	♦	♦	੪
♢		♢	੦
♥	♥	♥	♥
♡		♡	੥
♠	♠	♠	♠
♤		♤	੨
♣	♣	♣	੧
♧		♧	੫
♨		♨	੬
〽		〽	&#303D;	歌記号

文字	文字参照	数値参照（10進）	数値参照（16進）
Α	Α	Α	Α
Β	Β	Β	Β
Γ	Γ	Γ	Γ
Δ	Δ	Δ	Δ
Ε	Ε	Ε	Ε
Ζ	Ζ	Ζ	Ζ
Η	Η	Η	Η
Θ	Θ	Θ	Θ
Ι	Ι	Ι	Ι
Κ	Κ	Κ	Κ
Λ	Λ	Λ	Λ
Μ	Μ	Μ	Μ
Ν	Ν	Ν	Ν
Ξ	Ξ	Ξ	Ξ
Ο	Ο	Ο	Ο
Π	Π	Π	Π
Ρ	Ρ	Ρ	Ρ
Σ	Σ	Σ	Σ
Τ	Τ	Τ	Τ
Υ	Υ	Υ	Υ
Φ	Φ	Φ	Φ
Χ	Χ	Χ	Χ
Ψ	Ψ	Ψ	Ψ
Ω	Ω	Ω	Ω
α	α	α	α
β	β	β	β
γ	γ	γ	γ
δ	δ	δ	δ
ε	ε	ε	ε
ζ	ζ	ζ	ζ
η	η	η	η
θ	θ	θ	θ
ι	ι	ι	ι
κ	&lappa;	κ	κ
λ	λ	λ	λ
μ	μ	μ	μ
ν	ν	ν	ν
ξ	ξ	ξ	ξ
ο	ο	ο	ο
π	π	π	π
ρ	ρ	ρ	ρ
ς	ς;	ς	ς
σ	σ	σ	σ
Τ	τ	τ	τ
υ	υ	υ	υ
φ	φ	φ	φ
χ	χ	χ	χ
ψ	ψ	ψ	ψ
ω	ω	ω	ω

文字	文字参照	数値参照（10進）	数値参照（16進）
⇐	⇐	Ⅼ	&#21D0;
⇑	⇑	Ⅽ	&#21D1;
⇒	⇒	Ⅾ	&#21D2;
⇓	⇓	Ⅿ	&#21D3;
⇔	⇔	ⅰ	&#21D4;
←	←	←	ࢎ
↑	↑	↑	࢏
→	→	→	࢐
↓	↓	↓	࢑
↔	↔	↔	࢒
↖		↖	࢔
↗		↗	࢕
↘		↘	࢖
↙		↙	ࢗ
⇄		⇄	&#21C4;
⤴		⤴	୶
⤵		⤵	୷
⇦		⇦	⇦
⇧		⇧	⇧
⇨		⇨	⇨
⇩		⇩	⇩
⏎		⏎	⏎

文字	数値参照（10進）	数値参照（16進）
①	①	জ
②	②	ঝ
③	③	ঞ
④	④	ট
⑤	⑤	ঠ
⑥	⑥	ড
⑦	⑦	ঢ
⑧	⑧	ণ
⑨	⑨	ত
⑩	⑩	থ
⑪	⑪	&#246A;
⑫	⑫	&#246B;
⑬	⑬	&#246C;
⑭	⑭	&#246D;
⑮	⑮	&#246E;
⑯	⑯	&#246F;
⑰	⑰	দ
⑱	⑱	ধ
⑲	⑲	ন
⑳	⑳	঩

文字	数値参照（10進）	数値参照（16進）
○	○	&#25CB;
◯	◯	&#25EF;
⃝	⃝	&#20DD;
●	●	&#25CF;
◎	◎	&#25ce;
◉	◉	&#25C9;
⦿	⦿	&#29BF;
•	•	ߦ
◦	◦	&#25E6;

文字	数値参照（10進）	数値参照（16進）
‣	‣	ߧ
▲	▲	&#25B2;
△	△	&#25B3;
▴	▴	&#25B4;
▵	▵	&#25B5;
▶	▶	&#25B6;
▷	▷	&#25B7;
▸	▸	&#25B8;
▹	▹	&#25B9;
▼	▼	&#25BC;
▽	▽	&#25BD;
▿	▿	&#25BF;
◂	◂	&#25C2;
◃	◃	&#25C3;
►	►	&#25BA;
▻	▻	&#25BB;
◄	◄	&#25C4;
◅	◅	&#25C5;

文字	数値参照（10進）	数値参照（16進）
⃞	⃞	&#20DE;
∎	∎	&#220E;
■	■	&#25A0;
□	□	&#25A1;
▬	▬	&#25AC;
▭	▭	&#25AD;
▮	▮	&#25AE;
▯	▯	&#25BF;
▰	▰	&#25B0;
▱	▱	&#25B1;
◆	◆	&#25C6;
◇	◇	&#25C7;
◊	◊	&#25CA;
⧫	⧫	&#29EB;
〼	〼	&#303C;

　ASCIIコード領域の文字は、そのままASCIIコードを使って数値参照することができます。

ASCII

　上記はブラウザ上で、次の様に表示されます。

ASCII

アナリティクス アカウントのアカウント

　アナリティクス関連の記事を書いていて「アナリティクスのアカウントのアカウント」という表現がアナリティクスを使ったことのない人にはわかりにくいかも知れないことに気づきました。 　アナリティクスでは、一つのアナリティクスアカウントで複数のサイト（URL）を管理することができます。このそれぞれのサイト（URL）をアナリティクスでは「アナリティクスのアカウントのアカウント」と呼んでいます。このブログでは、「サイト」とか「URL」という言葉に置き換えた方がわかりやすいかなとも思ったのですが、そうするとアナリティクスのインターフェースやドキュメントとの整合性がなくなるので「アナリティクスのアカウントのアカウント」という表現を使っています。

アナリティクス アナリティクスアカウントへのアカウントの追加

(1) 「管理」タブをクリックして管理画面に移動する
(2) 管理画面のアカウント列の一番上のプルダウンメニューの最後にある「新しいアカウントを作成」を選択する

　管理画面では、アカウント名、ウェブサイトの名前、ウェブサイトのURL、業種、レポートのタイムゾーンなどを設定します。いくつかチェックボックスがありますが、画面上に説明がありますのでそれをご覧ください。通常はチェックのままでOKです。

　最後に画面最下部にある「トラッキングIDを取得」ボタンをクリックします。すると、アナリティクス利用規約への同意確認のダイアログが表示されますので「同意する」をクリックしてトラッキングコード画面に進みます。 　トラッキングコード画面では、次のようなトラッキングコードが表示されます。

htmlの場合、これをheaderタグ内に貼り付けます。phpの場合は、これを「analyticstracking.php」というファイルに保存して、それぞれのPHP テンプレート ページに挿入します。さらにそれぞれのテンプレートページのbodyの開始タグの直前に次の行を追加します。

<?php include_once("analyticstracking.php") ?>

ソフトウェア MultiReplace（クリップボード・複数ファイル置換対応の高機能置換ソフト）

　htmlにソースコードを張り付けたりする場合に<や>などのHTML特殊文字を&lt;や&gt;などのエスケープ文字に置き換える必要があります。これをすべて手作業でやるわけにはいかなので、せめてテキストエディターの置換機能を使って次のような手順で行っていました。
(1) コードを別のエディターウィンドウに貼り付ける
(2) 対象文字を全置換する
(3) htmlに貼り付ける
　こんな風に書けば簡単な作業に見えますが、(2)の置換作業には複数回のキーストロークやクリックが必要となり、これを置換対象の文字数分だけ繰り返す必要があります。うまく正規表現やマクロを使えば、一発で置換できるかも知れませんが、それを考えるのも面倒です。それでも何とかこのバカバカし作業を改善しなければと思っていました。 　そこで今回見つけたのが、MultiReplaceです。 　今回は、MultiReplaceを使ってhtmlのコードをhtmlに貼り付けられるようにタグの<や>を&lt;や&gt;に置換してみます。
　MultiReplaceはクリップボード置換に対応していますので、作業のために「新しいテキストエディターウィンドウを開く」という「美しくない作業」（バカバカしい作業）が不要となります。
　MultiReplaceは起動直後はファイル置換モードになっていますので、まずウィンドウの右上の「クリップボード」ボタンを押してクリップボード置換モードにします。
　次にウィンドウ左側に置換リストに置換前文字と置換後文字を次のような書式で書き込みます。

置換前文字/置換後文字

今回は次のように書き込みます。

</&<
>/&>

　あとはhtmlに貼り付けたいコードをクリップボードに貼り付けて、「置換」ボタンを押せば置換結果がクリップボードに書き戻されますので、それをhtmlに貼り付ければOKです。 　置換設定は保存することができますので、次回からはさらに作業が単純化できます。 　今回、HTML特殊文字置換のための見つけたソフトですが、他にもかなり機能が充実していて、ソースファイルの編集でも便利に使えそうです。MultiReplaceはvector.co.jpからダウンロードできます。

アナリティクス アカウントのアカウントの削除

(1) 削除したいアカウントにログインする

(2)「管理」タブをクリックして管理画面に移動する
(3) アカウント列の「アカウント設定」をクリックしてアカウント設定画面に移動する
(4) アカウント設定画面右上の「ゴミ箱に移動」ボタンをクリックする

　ゴミ箱に移動したアカウントは35日を経過すると完全に削除されます。それまでは、アカウント列の最後にある「ゴミ箱」アイコンから復活することができます。 　ウェブページのheaderタグなどに張り付けてあるアナリティクスのトラッキングコードを削除します。 トラッキングコード例

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXXX-1', 'auto');
  ga('send', 'pageview');

</script>

ネット 鳥獣戯画作成キット

　日本が世界に誇れる国宝「鳥獣戯画」。そんなオモシロ画像を誰でも簡単に作れるサイトです。

鳥獣戯画作成キット

ソフトウェア Change Timestamp（Windows用タイムスタンプ変更ツール）

　makeのように処理がファイル日時によって制御されたりする場合、故意にファイルのタイムスタンプを変更したいことがあります。Unix系OSや環境ではtouchコマンドが標準的ですが、今回はWindows上で作業したいので適当なツールはないか探してみました。それで見つけたのがChange Timestampです。

　使い方は、エクスプローラーからファイルをドラッグ＆ドロップするだけ。ファイルの作成日時、更新日時、アクセス日時のすべて、またはいずれかのファイル日付や時間を変更することができます。使ってみた所、特に不便な点はなくおおむね満足しています。vector.co.jpからダウンロードできます。

Blogger テンプレートの詳細をカスタマイズ

<header>タグ内で外部のスクリプトを読み込んだりする場合、テンプレートのhtmlソースを直接書き換えることができます。Bloggerのそれぞれのブログの管理画面の「テンプレート画面」の「HTMLの編集」ボタンを押すと編集のためのページに移動することができます。編集が終わったら「テンプレートを保存」ボタンを押して編集結果をブログに反映させます。

(1) テンプレート画面で「HTMLの編集」ボタンを押す

(2) HTML編集画面

Perl 数字に三桁ごとのカンマを挿入する

金額表示など、数字に三桁ごとに区切りのカンマを挿入したいケースは良くあります。Perlではこれを1行の正規表現だけで実現することができます。

my $price = 12345;
$price =~ s/(\d{1,3})(?=(?:\d{3})+(?!\d))/$1,/g;
print "販売価格 = " . $price . " 円\n";

上記のコードを実行すると、次のようにカンマが挿入されます。

販売価格 = 12,345 円