公開鍵と秘密鍵

暗号化

暗号化の流れ

公開鍵(public key)と秘密鍵(secret/private key)を使った暗号化の流れは以下のとおり。

  1. 受信側が公開鍵と秘密鍵を準備し、公開鍵を公開
  2. 送信側は公開鍵を使って平文を暗号化し、受信側に送信
  3. 受信側は秘密鍵を使って暗号文を平文に復号(秘密鍵を持っている受信側しか複合できない)

この手順を、もう少し詳しく見ると以下のとおり。

  1. 受信側が、公開鍵として(p, n)、秘密鍵として(s, n)を準備し、公開鍵を公開する
  2. 送信側は、公開鍵を使って平文(plaintext)を暗号化し、暗号文(ciphertext)を生成、受信側に送信
    • T_c = T_p^p \mod n
  3. 受信側は、受け取った暗号文を秘密鍵を使って複合
    • T_p = T_c^s \mod n

公開鍵・秘密鍵の算出手順

素数の組の準備

まず、受信側で2つの素数q, rを準備する。例えばq=5, r=11とする。

素数の積nの計算

次に、q, rの積を計算し、その値をnとする。

(1)    \begin{equation*} n = qr \end{equation*}

例えばn=5 \times 11 = 55

計算準備

q-1, r-1の最小公倍数を計算しておく。

(2)    \begin{equation*} L = LCM(p-1, q-1) \end{equation*}

例えば、L = LCM(4, 10) = 20

公開鍵の計算

p, Lが互いに素であるようなpを選ぶ。ここで公開鍵は(p, n)となる。

(3)    \begin{equation*} p \; : \; GCM(p, L) = 1 \end{equation*}

例えば、p = 3とすると、公開鍵は(3, 55)

秘密鍵の計算

(4)    \begin{equation*} s \; : \; sp \mod L = 1 \end{equation*}

例えば、e = 7とすると、3 \times 7 \mod 20 = 1となり、秘密鍵は(7, 55)

簡略化した暗号化の例

鍵の準備

先の公開鍵・秘密鍵の算出で例示した値を使って、暗号化の流れを見てみる。

2つの素数の組p=5, q=11を準備し、n = pq = 5 \times 11 = 55を計算した。

さらにLCM(q-1, r-1)の値から、公開鍵(p, n)、秘密鍵(s, n)を以下の様に得た。

(5)    \begin{eqnarray*} (p, n) &=& (3, 55) \\ (s, n) &=& (7, 55) \end{eqnarray*}

暗号化

平文として数列12, 26, 33を考え、送信側で公開鍵を使って、この平文を暗号化する。

(6)    \begin{eqnarray*} 12 &\rightarrow& 12^p \mod n = 12^3 \mod 55 = 1728 \mod 55 = 23\\ 26 &\rightarrow& 26^p \mod n = 26^3 \mod 55 = 17576 \mod 55 = 31 \\ 33 &\rightarrow& 33^p \mod n = 33^3 \mod 55 = 35937 \mod 55 = 22 \end{eqnarray*}

復号

受信側は受け取った暗号文を、秘密鍵を使って複合する。

(7)    \begin{eqnarray*} 23 &\rightarrow& 23^s \mod n = 23^7 \mod 55 = 3404825447 \mod 55 = 12\\ 31 &\rightarrow& 31^s \mod n = 31^7 \mod 55 = 27512614111 \mod 55 =  26\\ 22 &\rightarrow& 22^s \mod n = 22^7 \mod 55 = 2494357888 \mod 55 = 33 \end{eqnarray*}

電子証明

電子証明の流れ

公開鍵と秘密鍵を使う順序を逆にすると、電子証明に仕える。その流れは以下のとおり。

  1. 発信側が公開鍵と秘密鍵を準備し、公開鍵を公開
  2. 発信側は秘密鍵を使って平文を暗号化し、受信側に送信
  3. 受信側は公開鍵を使って暗号文を平文に復号し、証明を確認(秘密鍵を持っている発信側しか公開鍵で正しい平文に復号可能な暗号文を生成できない)

簡略化した電子証明の例

暗号化の例と同じ公開鍵・秘密鍵を使って、電子証明の例を確認する。

証明書の暗号化

発信側で証明書の平文12, 26, 33を準備し、これを秘密鍵を使って暗号化。

(8)    \begin{eqnarray*} 12 &\rightarrow& 12^s \mod n = 12^7 \mod 55 = 35831808 \mod 55 = 23\\ 26 &\rightarrow& 26^s \mod n = 26^7 \mod 55 = 8031810176 \mod 55 = 16 \\ 33 &\rightarrow& 33^s \mod n = 33^7 \mod 55 = 42618442977 \mod 55 = 22 \end{eqnarray*}

受信側は、公開鍵を使って暗号文を復号し、平文を確認(秘密鍵で暗号化した文のみ、公開鍵で適正に複合できる)。

(9)    \begin{eqnarray*} 23 &\rightarrow& 23^p \mod n = 23^3 \mod 55 = 12167 \mod 55 = 12\\ 16 &\rightarrow& 16^p \mod n = 16^3 \mod 55 = 4096 \mod 55 = 26 \\ 22 &\rightarrow& 22^p \mod n = 22^3 \mod 55 = 10648 \mod 55 = 33 \end{eqnarray*}

 

ハッシュ

ハッシュ関数のことを考えてみようと、自分なりにトライしてみた。

簡単すぎる例
文字列の文字コードを足し込んでいくという単純な方法。

剰余を使った例
剰余を使った例。文字列が短い場合はある程度の長さに拡張して、キーとなる数で割った余りをハッシュとしている。

 

ハッシュ – 剰余を使った例

考え方

以下のように考える。

  • 文字列を文字コード化し、眺めのバッファーに先頭から収めていく
  • バッファーが余った場合は、終わりまで0x00で埋める
  • バッファー全体を一つの整数として、特定の値で割った余りを求める
  • 余りの下位で適当なバイト数の値を取り出し、ハッシュ値とする

コード全体

上記の考え方を、クラスに実装してみる。テスト用なので、引数やオーバーフローなどのチェックはしていない。

この実装例では、バッファーの長さを16バイト、ハッシュのバイト数は下位8バイトとし、余りを計算するための除数は実行時に引数として与えるようにしている。

実行結果

除数で変わる結果

これに適当な文字列と除数を与えてみる。

1文字だけ変えると、値が大きく変わり、なんとか使えそう。

簡単な文字列で除数を変えて試してみると、除数を「ややこしそうな値」にするとハッシュはばらつくが、除数の設定によっては入力文字列そのままの値が出たりする。

除数→ 0xfedcba98 0xffffffff
A 9ED40708 41000000
AA 24FECD68 41410000
AB B81E0A58 41420000
AC 4C608CB0 41430000
BA EB7C9820 42410000
BB 7FBF1A78 42420000
BC 14019CD0 42430000

除数の影響

被除数の値によって、なぜハッシュ値が単純になるのか。

たとえば10進数で以下の様な例を考える。

 \begin{array}{rcrcrcr} 0000 & = & 99 & \times & 0 & + & 0 \\ 0100 & = & 99 & \times & 10 & + & 10 \\ 0200 & = & 99 & \times & 20 & + & 20 \\ & \vdots \\ 9000 & = & 99 & \times & 90 & + & 90 \\ 9100 & = & 99 & \times & 91 & + & 91 \\ & \vdots \\ 9800 & = & 99 & \times & 98 & + & 98 \\ 9900 & = & 99 & \times & 100 & + & 0 \\ \end{array}

除数未満の値が余りに出ているが、上位桁のパターンがそのまま順番に現れており、先の2進数と同じ結果となっている。

そこで、より簡単な例を考えてみる。

以下の表は、左の列が被除数で、それらに対して最上段の除数で割ったときの余りを示している。被除数の1/2の桁の除数では、7あたりが最も結果がばらつき、その他の値では単純な余りの値が繰り返される。

 \begin{array}{r|ccccccccc} & 9 & 8 & 7 & 6 & 5 & 4 & 3 & 2 & 1 \\ \hline 0 & 0 & 0 & 0 & 0 & 0 & 0 & 0 & 0 & 0 \\ 10 & 1 & 2 & 3 & 4 & 0 & 2 & 1 & 0 & 0 \\ 20 & 2 & 4 & 6 & 2 & 0 & 0 & 2 & 0 & 0 \\ 30 & 3 & 6 & 2 & 0 & 0 & 2 & 0 & 0 & 0 \\ 40 & 4 & 0 & 5 & 4 & 0 & 0 & 1 & 0 & 0 \\ 50 & 5 & 2 & 1 & 2 & 0 & 2 & 2 & 0 & 0 \\ 60 & 6 & 4 & 4 & 0 & 0 & 0 & 0 & 0 & 0 \\ 70 & 7 & 6 & 0 & 4 & 0 & 2 & 1 & 0 & 0 \\ 80 & 8 & 0 & 3 & 2 & 0 & 0 & 2 & 0 & 0 \\ 90 & 0 & 2 & 6 & 0 & 0 & 2 & 0 & 0 & 0 \\ \end{array}

これを細分化すると、余りの値の繰り返しはより顕著であることがわかる。

 \begin{array}{r|ccccccccc} & 9 & 8 & 7 & 6 & 5 & 4 & 3 & 2 & 1 \\ \hline 0 & 0 & 0 & 0 & 0 & 0 & 0 & 0 & 0 & 0 \\ 1 & 1 & 1 & 1 & 1 & 1 & 1 & 1 & 1 & 0 \\ 2 & 2 & 2 & 2 & 2 & 2 & 2 & 2 & 0 & 0 \\ 3 & 3 & 3 & 3 & 3 & 3 & 3 & 0 & 1 & 0 \\ 4 & 4 & 4 & 4 & 4 & 4 & 0 & 1 & 0 & 0 \\ 5 & 5 & 5 & 5 & 5 & 0 & 1 & 2 & 1 & 0 \\ 6 & 6 & 6 & 6 & 0 & 1 & 2 & 0 & 0 & 0 \\ 7 & 7 & 7 & 0 & 1 & 2 & 3 & 1 & 1 & 0 \\ 8 & 8 & 0 & 1 & 2 & 3 & 0 & 2 & 0 & 0 \\ 9 & 0 & 1 & 2 & 3 & 4 & 1 & 0 & 1 & 0 \\ \end{array}

先のコードは、上記の例で言えば除数を9に設定した場合に、その結果がきれいにもとの値と同じとなることに相当する。

衝突状況のチェック

除数を変化させて、アルファベット大文字1~4文字の文字列でハッシュ値の衝突が出るか確認してみた。各文字数に対するバリエーションの数は以下の通り。

  • 1文字→26通り
  • 2文字→26*26=676通り
  • 3文字→26*26*26=17,576通り
  • 4文字→26*26*26*26=456,976通り
  • 合計、475,254通り

その結果は次の通り。

0xFEDCBA98
アルファベット1~4文字で衝突なし。

0xFEDCBA9
まだ衝突なし。

0xFEDCBA
衝突が多数発生。みな2つの文字列で衝突。たとえば
0071BB5E : [‘SZQA’, ‘ZRZW’]
003C0D52 : [‘SZQB’, ‘ZRZX’]
00065F46 : [‘SZQC’, ‘ZRZY’]
00CF8DF4 : [‘SZQD’, ‘ZRZZ’]
除数の10進値は16,702,650と文字列のバリエーションより大きいが、衝突が出始めた。

0xFFFFFFFF
意外にも衝突なし。

0xFFFFFFF
衝突が多数発生。これも2つの文字列で重複。たとえば
05A5CA5A : [‘JZZX’, ‘ZZZW’]
05A5DA5A : [‘JZZY’, ‘ZZZX’]
05A5EA5A : [‘JZZZ’, ‘ZZZY’]
除数の10進値は268,435,455とかなり大きいが、単純なパターンの値ほど衝突が起こりやすいのかもしれない。

コード詳細

コンストラクタ__init__()

  • インスタンス生成時にハッシュを生成する文字列を受け取り、空のバッファーを準備
  • バッファーの長さを16バイト、ハッシュ値の長さを8バイトに設定
  • 引数で与えられた文字列から1文字ずつ取り出し、文字コードを追加
  • バッファー長までの余った部分に0を追加

内部用メソッドget_nbytes()

文字コードを追加し終わったときのバッファー長を計算する処理を独立させたメソッド。

ハッシュ値計算get_hash()

  • バッファーの内容を整数として、引数で与えられた除数から剰余を計算する
  • 計算結果の下位バイトを取り出して、ハッシュ値として返す

文字列化メソッド__str()__

インスタンスの文字列化メソッド。

 

ハッシュ – 簡単すぎる例

ハッシュ関数のイメージを掴むために、簡単な例を考えてみる。

まず、任意の文字列が与えられたとき、文字列中の全ての文字コードを加えた値を返す関数を考える。

この関数を以下のような文字列で実行すると、1文字加えたり入れ替えただけで結果が違ってくるのがわかる。

長い文字列で試してみると、1文字入れ替えると値が変わってくるが、1文字分の足し込むコードが変わるだけなので、大きな変化は期待できない。

この方法で致命的なのは、同種の文字を順序違いで並べても結果が同じになる点。

このやり方は、あまりに単純すぎて使えない。

 

Evernoteでノートが読めなくなった件

症状

Android版のEvernoteで特定のノート(多数)を読もうとしたとき、”このノートをロードできません”とダイアログに表示されて、リロードボタンを押しても反応がない。

当初は検索結果で少し古いファイルで発生していたが、そのファイルを直接読もうとしたときにも同じ症状になった。

PC版のEvernoteアプリでは問題はなく読める。

対処方法

概要

Evernoteのバージョンを7.16から7.15にダウングレードする。

注意点

  • apkファイルのダウンロードができない場合の対応が必要
  • apkファイルのインストールが進まない場合の対処が必要
  • Evernoteが勝手に7.16にアップグレードされるのを抑止する必要がある

手順

apkファイルのダウンロード

Androidのほか様々なアプリケーションの旧バージョンをダウンロードできるuptodownから7.15のapkファイルをダウンロードする。このとき、WiFi接続で作業すること。

Android端末のブラウザからuptodownに飛び、Android→Evernote→V7.15を選択。

トラブルと対応

  • Androidオリジナルのブラウザ、ドルフィンブラウザではダウンロードできなかった
    • オリジナルのブラウザでは”安全な接続が確立できませんでした”と表示されて進まない
    • ドルフィンブラウザでは何の反応もない
  • Chromeを使うことでダウンロードできた

apkファイルからインストール

ブラウザのダウンロード履歴から”evernote-7-15.apk”を選択してインストール。

トラブルと対応

  • apkの内容が表示された後、”次へ”ボタンを押しても反応がなく、次へ進めない
    • “キャンセル”ボタンは機能し、ダウンロード履歴の画面に戻れる
  • 常駐アプリで影響があるものを停止させる
    • 設定→アプリケーションの管理→実行中タブ→関連アプリを選択・停止
    • 今回は”Battery Mix”のみが影響していた

アプリの自動更新を禁止

V7.15をインストール後の同期中には元の通りファイルが読めていたが、同期後にV7.16に自動更新されてしまって元のようにノートが読めなくなってしまった。

これを回避するため、Google Playでアプリの自動更新を禁止する。

  • Google Playのメニューから、設定→アプリの自動更新→アプリの自動更新しない、で自動更新を禁止
  • これで全アプリの自動更新はされないが、通知をonにしておけばアプリごとの確認は可能

Evernoteにログイン・同期

Evernoteにログインすると、自動的にノートが同期される。

 

HTML5 – 大きなテーブルのスクロール

横幅が長いテーブルの表示

セルの内容が連続した長いASCII文字列の場合、それが一つのワードとみなされて改行されず、表が横に伸びて表示が乱れる。

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccccccccccccccccc
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccccccccccccccccc
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccccccccccccccccc

通常の英文の場合は、表示領域の幅に合わせてワード境界で自動改行される。

The rain in Spain stays mainly in the plain Daisy, Daisy, Give me your answer do! Salagadoola mechicka boola bibbidi-bobbidi-boo
The rain in Spain stays mainly in the plain Daisy, Daisy, Give me your answer do! Salagadoola mechicka boola bibbidi-bobbidi-boo
The rain in Spain stays mainly in the plain Daisy, Daisy, Give me your answer do! Salagadoola mechicka boola bibbidi-bobbidi-boo

マルチバイト文字の場合は、各文字がワード扱いになり、任意の位置で自動改行される。

いいいいいいいいいいいいいいいいいいいい ろろろろろろろろろろろろろろろろろろろろ はははははははははははははははははははは
いいいいいいいいいいいいいいいいいいいい ろろろろろろろろろろろろろろろろろろろろ はははははははははははははははははははは
いいいいいいいいいいいいいいいいいいいい ろろろろろろろろろろろろろろろろろろろろ はははははははははははははははははははは

横スクロール

基本形

切れ目のないASCII文字列を画面幅に合わせて横スクロールさせたい場合。

実行例

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccccccccccccccccc
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccccccccccccccccc
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccccccccccccccccc

 

自動改行の抑止

英文やマルチバイト文字列の場合、スクロール表示させようとしても、自動改行されて常に表示領域に収まるように表の幅が調整されるので、スクロールが効かない。

そこで空白(ワード境界)での改行を抑止させると、折り返されずに票の横幅が長くなり、横スクロールの対象となる。

実行例:英文

The rain in Spain stays mainly in the plain Daisy, Daisy, Give me your answer do! Salagadoola mechicka boola bibbidi-bobbidi-boo
The rain in Spain stays mainly in the plain Daisy, Daisy, Give me your answer do! Salagadoola mechicka boola bibbidi-bobbidi-boo
The rain in Spain stays mainly in the plain Daisy, Daisy, Give me your answer do! Salagadoola mechicka boola bibbidi-bobbidi-boo

 

実行例:和文

いいいいいいいいいいいいいいいいいいいい ろろろろろろろろろろろろろろろろろろろろ はははははははははははははははははははは
いいいいいいいいいいいいいいいいいいいい ろろろろろろろろろろろろろろろろろろろろ はははははははははははははははははははは
いいいいいいいいいいいいいいいいいいいい ろろろろろろろろろろろろろろろろろろろろ はははははははははははははははははははは

 

表幅の固定

自動改行の抑止では、一文が一行となって表の幅が広すぎる。適当なところで折り返したい場合には、表やセルの幅を指定するとよい。

幅指定の際は、ピクセルやセンチ/インチなどのデバイス依存単位より、emなどの文字相当の単位がよい。

実行例:英文

The rain in Spain stays mainly in the plain Daisy, Daisy, Give me your answer do! Salagadoola mechicka boola bibbidi-bobbidi-boo
The rain in Spain stays mainly in the plain Daisy, Daisy, Give me your answer do! Salagadoola mechicka boola bibbidi-bobbidi-boo
The rain in Spain stays mainly in the plain Daisy, Daisy, Give me your answer do! Salagadoola mechicka boola bibbidi-bobbidi-boo

 

実行例:和文

いいいいいいいいいいいいいいいいいいいい ろろろろろろろろろろろろろろろろろろろろ はははははははははははははははははははは
いいいいいいいいいいいいいいいいいいいい ろろろろろろろろろろろろろろろろろろろろ はははははははははははははははははははは
いいいいいいいいいいいいいいいいいいいい ろろろろろろろろろろろろろろろろろろろろ はははははははははははははははははははは

幅と高さの指定

幅と高さをピクセル単位で指定した例。

 

実行例

aaaaaaaaaaaaaaa bbbbbbbbbbbbbbb ccccccccccccccc ddddddddddddddd eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa bbbbbbbbbbbbbbb ccccccccccccccc ddddddddddddddd eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa bbbbbbbbbbbbbbb ccccccccccccccc ddddddddddddddd eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa bbbbbbbbbbbbbbb ccccccccccccccc ddddddddddddddd eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa bbbbbbbbbbbbbbb ccccccccccccccc ddddddddddddddd eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa bbbbbbbbbbbbbbb ccccccccccccccc ddddddddddddddd eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa bbbbbbbbbbbbbbb ccccccccccccccc ddddddddddddddd eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa bbbbbbbbbbbbbbb ccccccccccccccc ddddddddddddddd eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa bbbbbbbbbbbbbbb ccccccccccccccc ddddddddddddddd eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa bbbbbbbbbbbbbbb ccccccccccccccc ddddddddddddddd eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa bbbbbbbbbbbbbbb ccccccccccccccc ddddddddddddddd eeeeeeeeeeeeeee

Illustrator – 基本操作

表示

表示範囲の移動 [SPC] + Drag
拡大 [CTRL] + [SPC] + Click
縮小 [CTRL] + [ALT] + [SPC] + Click

編集

選択 v
ダイレクト選択 a
ペンツール p
アンカーポイント追加 [Shift] + [+]
アンカーポイント削除 [-]

 

Illustrator – 画像の配置~リンク/埋め込み

概要

単に画像ファイルをレイヤにドラッグ・アンド・ドロップすると、画像のリンクが埋め込まれる。

これに対して画像ファイルそのものを埋め込みたい場合は「配置」メニューから画像を配置する。

手順

  1. メニューから「ファイル」→「配置」でダイアログ起動
  2. 配置したいファイルを選択
  3. 下方の「リンク」チェックボックスを選択
    • on→リンク配置(link)
    • off→埋め込み配置(embed)

 

Linuxコマンド – ln

概要

ファイル/ディレクトリへのリンクを作成する。リンクにはハード・リンクとシンボリック・リンクの2種類がある。

ハードリンク

ハードリンクは、ソースのiノード番号をターゲットとして持ち、ソースが移動されたり、名前が変更されても有効。

実行例

  • 1~4行目でソースとその内容を確認
  • 5行目でハードリンクを作成
  • 6~7行目でリンクを確認
  • 8~9行目でリンクで参照されるソースの内容を確認
  • 10行目でソースの名前を変更
  • 11~12行目、変更後もハードリンクは有効

シンボリックリンク

シンボリックリンクでは、リンクファイルにリンク先にソースへのパスが保存され、これを参照してソースがアクセスされる。

ソースの位置や名前が変更されてもリンクファイルのパスは変わらないため、変更後のソースにはアクセスできなくなる(デッド・リンク)。

実行例

  • 1~2行目でソースの内容を確認
  • 3行目でソフトリンクを作成
  • 4~5行目でソフトリンクを確認(パスが表示されている)
  • 6~7行目でソフトリンクからソースの内容を表示
  • 8行目でソースの名前を変更
  • 9~10行目、変更後はソフトリンクからアクセスできない

 

HTML5 – IE互換性

CSSの指定前の処理(IE対応)

IE8以下ではHTML5に対応していないため、新要素は無視されてしまう。IEをHTML5に対応させるJavaScriptがhtml5shivサイトで公開されており、これを最初に読み込んで対応する。

  • 新要素に対してCSSの設定をしている場合、スクリプトがCSSの設定をオーバーライドしないよう、スクリプトの記述をCSS呼び出しの前に置かなければならない。
  • IEの判定部分を<!–[if IE]>としている例もある。
  • HTML5ではscript要素のtype属性の初期値は”text/javascript”として設定されているので省略可能。

IEの条件付きコメント

Microsoft Internet Explorer (MSIE)において、HTMLソースコード中にある条件付きのステートメント。 IE5で初めて導入され、IE9までサポートされた。IE10以降この機能は廃止され、単なるコメントとして扱われる。

コメントの種類 記述
標準のHTMLコメント <–コメント–>
下の階層が隠れる <!–[if expression]>HTML<![endif]–>
下の階層が見える <![if expression]>HTML<![endif]>

下の階層が隠れる条件付きコメント

ブラウザがIEの場合のみHTMLが解釈され、IE以外の場合はブラウザからHTMLが見えない。たとえば、ブラウザがIEの場合のみスクリプトを実行するような場合。

下の階層が見える条件付きコメント

以下は、Microsoftのデフォルトの記法で、ブラウザがIEの場合にはHTMLが解釈されず、IE以外のブラウザにはHTMLが見える記法。

の表現をIEから見ると、ブラウザがIEなのでifの中身は無視される。一方IE以外のブラウザからみると前後のタグ自体が無視されるため、ifの中身だけが見えて実行される。

この記法は正当な(X)HTMLに準拠したものではなく、IE以外のブラウザで前後のタグが無視されることを期待しているにすぎない。そこで、W3C標準を順守するため、以下のような表現が考えられる。

この記法は、正当な(X)HTMLである。ただし条件式のパターンによっては、条件が真となる場合に、HTMLの解釈の前に”–>”を表示してしまう。