灰色スズメの足跡

2017年10月28日土曜日

HTMLの見出しタグに連番を振るCSSの書き方

このブログで行っているHTMLの見出しタグ<h4>、<h5>、<h6>に連番を振るCSSの書き方をご紹介します。

このブログの見出しタグ周りのCSS

このブログのHTMLは、下記のように<h4>、<h5>、<h6>タグにクラス名を付与しています。

<h4 class="foacs-chapter">
<h5 class="foacs-section">
<h6 class="foacs-paragraph">

このブログの見出しタグ周りのCSSは下記のとおりです。

/*
見出し設定
class="foacs-chapter"
class="foacs-section"
class="foacs-paragraph"
*/
.foacs-chapter
{
    border-left: 0.5em solid var(--foacs-link-color);
    border-bottom: 1px solid var(--foacs-link-color);
    font-size: x-large;
    margin-top: 4em;
    margin-bottom: 1em;
    padding: 0.5em;
    counter-increment: --foacs-chapter-counter;
    counter-reset: --foacs-section-counter;
}

.foacs-chapter::before
{
    content: counter(--foacs-chapter-counter) ".";
    padding-right: 0.5em;
}

.foacs-section
{
    border-left: 0.5em solid var(--foacs-link-color);
    border-bottom: 1px solid var(--foacs-link-color);
    font-size: large;
    margin-top: 4em;
    margin-bottom: 1em;
    padding: 0.5em;
    counter-increment: --foacs-section-counter;
    counter-reset: --foacs-paragraph-counter;
}

.foacs-section::before
{
    content: counter(--foacs-chapter-counter) "." counter(--foacs-section-counter) ".";
    padding-right: 0.5em;
}

.foacs-paragraph
{
    border-left: 0.5em solid var(--foacs-link-color);
    border-bottom: 1px solid var(--foacs-link-color);
    font-size: medium;
    margin-top: 4em;
    margin-bottom: 1em;
    padding: 0.5em;
    counter-increment: --foacs-paragraph-counter;
}

.foacs-paragraph::before
{
    content: counter(--foacs-chapter-counter) "." counter(--foacs-section-counter) "." counter(--foacs-paragraph-counter) ".";
    padding-right: 0.5em;
}

このブログのCSSの説明

見出しタグに連番を振るための手順は下記のとおりです。

HTMLの見出しタグ<h4>、<h5>、<h6>にCSSで連番を振るためのクラス名を付与する
CSSの変数を作り、現在の見出しのCSS変数の値を１増やして、下位の見出しのCSS変数を０にする
CSSの変数から値を取り出して、HTMLの見出しの前に表示する

これらの手順について説明します。

HTMLのクラス名

このブログではHTMLの見出しタグ<h4>、<h5>、<h6>に下記のようにクラス名を付与しています。

<h4 class="foacs-chapter">
<h5 class="foacs-section">
<h6 class="foacs-paragraph">

「foacs」はこのブログの英語名の単語の頭文字をつなげたもので、Bloggerで元から使用されている他のクラス名と重複しないように使用している接頭辞です。

クラス名 foacs-chapter、foacs-section、foacs-paragraphを付与したHTMLの見出しタグ<h4>、<h5>、<h6>にCSSの機能で連番を振っています。

CSS変数

HTMLの見出しタグに連番を振るためにCSSの変数を使用しています。どのように変数を使って連番を振っているのか、<h4>タグの場合に絞ってご説明します。

連番の準備

<h4>タグに付与するクラスfoacs-chapterの装飾を指定している個所をご覧ください。

.foacs-chapter
{
    border-left: 0.5em solid var(--foacs-link-color);
    border-bottom: 1px solid var(--foacs-link-color);
    font-size: x-large;
    margin-top: 4em;
    margin-bottom: 1em;
    padding: 0.5em;
    counter-increment: --foacs-chapter-counter;
    counter-reset: --foacs-section-counter;
}

counter-incrementでCSS変数--foacs-chapter-counterを１増やしています。
counter-resetで--foacs-section-counterを０にしています。
CSS変数の初期値は０ですので、<h4 class="foacs-chapter">タグが最初に出現した時点で、変数--foacs-chapter-counterは１に、--foacs-section-counterは０になります。

CSS変数は宣言なし、型指定なしでいきなり使えます。変数の最初の２つのハイフン「--」は、CSSでは変数名を２つのハイフンで始めましょうというお約束になっているので、それに従っています。変数名として分かりにくいとか違和感があるというのであれば、最初の２つのハイフンはなくても問題ありません。

このブログのCSSでは下記の3種類の変数を使用して、HTMLの見出しタグに連番を振っています。

--foacs-chapter-counter
--foacs-section-counter
--foacs-paragraph-counter

連番の表示

CSS変数の値の準備ができたので、次にその値を表示します。値の表示はクラスfoacs-chapterの擬似要素beforeを指定している個所をご覧ください。

.foacs-chapter::before
{
    content: counter(--foacs-chapter-counter) ".";
    padding-right: 0.5em;
}

<h4 class="foacs-chapter">タグの前にCSS変数の値を表示するために、擬似要素beforeを使用しています。

CSS変数の値は関数counterで取り出します。関数counterで取り出した値の後ろに文字列「. 」を追加しています。 CSSでこのように指定することで下記のHTMLは「1. 見出し」と表示されます。

<h4 class="foacs-chapter">見出し</h4>

クラスfoacs-chapterで<h4>タグに連番を振ったように、クラスfoacs-sectionで<h5>タグ、クラスfoacs-paragraphで<h6>タグに連番を振っています。

ちなみに、クラス名と疑似要素の間のコロン「:」が２つになっているのは、CSS3の規則に従っているからです。 CSS3では疑似クラスと区別するために疑似要素につけるコロンが２つになっています。

CSS変数の注意点

CSS変数を使用する際に注意したい点を説明します。

擬似要素before内ではcounter-incrementとcounter-resetは動作しない

擬似要素beforeを指定したセレクタ内では、counter-incrementとcounter-resetは動作しません。下記の記述は動作しませんので注意してください。

/*
動作しない。
*/
.foacs-chapter::before
{
    counter-increment: --foacs-chapter-counter;
    counter-reset: --foacs-section-counter;
    content: counter(--foacs-chapter-counter) ". ";
    padding-right: 0.5em;
}

１つのセレクタ内で複数のcounter-incrementとcounter-resetは動作しない

１つのセレクタ内に複数のcounter-incrementを書いても最後のcounter-incrementしか動作しません。 counter-resetも同様です。

このブログでは下記のようなCSSは使っていませんが、ご参考までにご留意ください。下記の記述では、counter-increment: --foacs-counter03のみが動作します。

/*
counter-increment: --foacs-counter01とcounter-increment: --foacs-counter02は動作しない。
counter-increment: --foacs-counter03のみが動作する。
*/
.foacs-li
{
    counter-increment: --foacs-counter01;
    counter-increment: --foacs-counter02;
    counter-increment: --foacs-counter03;
}

上記のように１つのセレクタ内で複数の変数を動作させたい場合は下記のように記述します。

/*
動作する。
変数は空白で区切る。
*/
.foacs-li
{
    counter-increment: --foacs-counter01 --foacs-counter02 --foacs-counter03;
}

変数は空白で区切ります。カンマ「,」では区切らないので注意してください。

BloggerへのCSSの追加

自分で作成したCSSをBloggerの自分のブログに適用するためには以下のようにします。

［テーマ］の編集画面を表示
［カスタマイズ］ボタンを押下
Blogger テーマデザイナーを表示
［上級者向け］ー［CSSを追加］ー［カスタム CSS を追加］のテキストボックスにCSSをコピー＆ペースト
［ブログに適用］ボタンを押下

記事終わり

2017年10月19日木曜日

WindowsのExcel VBAから.NET Frameworkの暗号サービスを呼び出す方法

WindowsのExcel VBAから.NET FrameworkのSystem.Security.Cryptography名前空間に属するクラスのプロパティ、メソッドを呼び指す方法をご紹介します。これにより、WindowsのExcel VBAからHMAC-SHA1、HMAC-SHA256などの処理が簡単に出来るようになります。

Windowsに.NET Framework 3.5をインストールする

WindowsのExcel VBAから呼び出せる.NET Frameworkはバージョン3.5までのようですので、Windows 10の場合、［Windowsの機能の有効化または無効化］を呼び出して.NET Framework 3.5をインストールする必要があります。

［Windowsスタートボタン］－［Windowsの設定］－［アプリ］－［プログラムと機能］－［Windowsの機能の有効化または無効化］

上の画面で「.NET Framework 3.5（.NET 2.0 および 3.0 を含む）」のチェックボックスを■の状態（上記画面の状態）にします。

これで、WindowsのExcel VBAから.NET Framework 3.5の暗号サービスを呼び出せるようになります。

Excel VBAのプログラム

実際に使用する例としてTwitter APIとAmazon Product Advertising APIのHTTPリクエストで使用する署名作成プログラムをご紹介します。

ご紹介する例では、Excel VBAのCreateObject関数を使って.NET FrameworkのSystem.Security.Cryptography名前空間のクラスのオブジェクトを生成しています。

Twitter APIの署名作成プログラム

Twitter APIの署名作成プログラムは下記のとおりです。

' 署名の元となる文字列。使用している値についてはTwitter APIの下記文書を参照。
' https://developer.twitter.com/en/docs/basics/authentication/guides/creating-a-signature
' Developer - Documentation - Basics - Authentication - Guides - Creating a signature 参照
Dim strSourceOfSignature As String
strSourceOfSignature = "POST" _
                        & "&https%3A%2F%2Fapi.twitter.com%2F1.1%2Fstatuses%2Fupdate.json&include_entities%3Dtrue" _
                        & "%26oauth_consumer_key%3Dxvz1evFS4wEEPTGEFPHBog" _
                        & "%26oauth_nonce%3DkYjzVBB8Y0ZFabxSWbWovY3uYSQ2pTgmZeNu2VS4cg" _
                        & "%26oauth_signature_method%3DHMAC-SHA1" _
                        & "%26oauth_timestamp%3D1318622958" _
                        & "%26oauth_token%3D370773112-GmHxMAgYyLbNEtIKZeRNFsMKPR9EyMZeS9weJAEb" _
                        & "%26oauth_version%3D1.0" _
                        & "%26status%3DHello%2520Ladies%2520%252B%2520Gentlemen%252C%2520a%2520signed%2520OAuth%2520request%2521"
                        
' HMAC-SHA1を使って署名を算出。
Dim objHMACSHA1 As Object
Set objHMACSHA1 = CreateObject("System.Security.Cryptography.HMACSHA1")
Dim byteKeys() As Byte
' Signing key: kAcSOqF21Fu85e7zjz7ZN2U4ZRhfV3WpwPAoE3Z7kBw&LswwdoUaIvS8ltyTt5jkRh4J50vUPVVHtR2YPi5kE
byteKeys = StrConv("kAcSOqF21Fu85e7zjz7ZN2U4ZRhfV3WpwPAoE3Z7kBw&LswwdoUaIvS8ltyTt5jkRh4J50vUPVVHtR2YPi5kE", vbFromUnicode)
objHMACSHA1.Key = byteKeys
Dim byteTexts() As Byte
byteTexts = StrConv(strSourceOfSignature, vbFromUnicode)
Dim byteHMACSHA1s() As Byte
byteHMACSHA1s = objHMACSHA1.ComputeHash_2(byteTexts)

' 算出した署名をBase64エンコードする。
Dim objDOMDocument As Object
Set objDOMDocument = CreateObject("MSXML2.DOMDocument")
Dim objIXMLDOMElement As Object
Set objIXMLDOMElement = objDOMDocument.createElement("b64")
objIXMLDOMElement.DataType = "bin.base64"
objIXMLDOMElement.nodeTypedValue = byteHMACSHA1s
Dim strSignature As String
strSignature = objIXMLDOMElement.Text
MsgBox strSignature

Set objHMACSHA1 = Nothing
Set objDOMDocument = Nothing
Set objIXMLDOMElement = Nothing

Amazon Product Advertising APIの署名作成プログラム

Amazon Product Advertising APIの署名作成プログラムは下記のとおりです。

' 署名の元となる文字列。使用している値についてはAmazon Product Advertising APIの下記文書を参照。
' Amazon Product Advertising API Developer Guide (API Version 2013-08-01)
' http://docs.aws.amazon.com/ja_jp/AWSECommerceService/latest/DG/rest-signature.html
' Programming Guide - Requests - Request Authentication - Authenticating REST Requests - Example REST Requests 参照
Dim strSourceOfSignature As String
strSourceOfSignature = "GET" & Chr(10) & "webservices.amazon.com" & Chr(10) & "/onca/xml" & Chr(10) _
                        & "AWSAccessKeyId=AKIAIOSFODNN7EXAMPLE" _
                        & "&AssociateTag=mytag-20" _
                        & "&ItemId=0679722769" _
                        & "&Operation=ItemLookup" _
                        & "&ResponseGroup=Images%2CItemAttributes%2COffers%2CReviews" _
                        & "&Service=AWSECommerceService" _
                        & "&Timestamp=2014-08-18T12%3A00%3A00Z" _
                        & "&Version=2013-08-01"

' HMAC-SHA256を使って署名を算出。
Dim objHMACSHA256 As Object
Set objHMACSHA256 = CreateObject("System.Security.Cryptography.HMACSHA256")
Dim byteKeys() As Byte
' AWS secret key: 1234567890
byteKeys = StrConv("1234567890", vbFromUnicode)
objHMACSHA256.Key = byteKeys
Dim byteTexts() As Byte
byteTexts = StrConv(strSourceOfSignature, vbFromUnicode)
Dim byteHMACSHA256s() As Byte
byteHMACSHA256s = objHMACSHA256.ComputeHash_2(byteTexts)

' 算出した署名をBase64エンコードする。
Dim objDOMDocument As Object
Set objDOMDocument = CreateObject("MSXML2.DOMDocument")
Dim objIXMLDOMElement As Object
Set objIXMLDOMElement = objDOMDocument.createElement("b64")
objIXMLDOMElement.DataType = "bin.base64"
objIXMLDOMElement.nodeTypedValue = byteHMACSHA256s
Dim strSignature As String
strSignature = objIXMLDOMElement.Text
MsgBox strSignature

Set objHMACSHA256 = Nothing
Set objDOMDocument = Nothing
Set objIXMLDOMElement = Nothing

Excel VBAから呼び出せる.NET Frameworkの制限事項

Excel VBAからすべての.NET Frameworkのクラスを呼び出せるわけではありません。呼び出せる.NET Frameworkのクラスには制限があります。制限は下記のとおりです。

Excel VBAから使用できる.NET Frameworkのバージョンは3.5まで
クラスに引数を取らないコンストラクター（既定のコンストラクター）が必要
クラスのPrivate、Protected、Static(Shared)なプロパティ、メソッドは呼び出せない
オーバーロードされているメソッドは「メソッド名_1」「メソッド名_2」のように、メソッド名にアンダーバー「_」と数字を付け加えて呼び出す

上記の制限事項については下記のサイトに詳しく説明が載っています。
Microsoft Office と .NET の相互運用性
 .NETFrameworkの使用