HTML | tilfin's note

JavaScript で HTML の参照文字をアンエスケープするには

HTML 文字列のアンエスケープ(unescape)とはタグに使われる文字をエスケープした文字実体参照などを実際の文字などに戻すことです。例えば tilfin's note を tilfin's note と変換します。RSS Feed などに HTML が埋め込まれるときに必要になったりします。最近のブラウザでは、 DOMParser という HTML/XML/SVG パーサーが実装されているのでこれを使います。サポート状況 https://caniuse.com/#search=DOMParser parseFromString メソッドの第2引数に MIME タイプを指定します。 1 2 3 4 function unescapeHTML(escapedHtml) { const doc = new DOMParser().parseFromString(escapedHtml, 'text/html'); return doc.documentElement.textContent; } 上記のようにユーティリティ関数を定義して試します。 > unescapeHTML("tilfin's note") "tilfin's note"

背景色に応じて文字色を白と黒で切り替える

ユーザーが背景色を指定できる要素の文字色をその背景色に応じて切り替えたいときの方法です。固定で白や黒にすると、背景色によっては見辛くなってしまうためです。そのためには背景色の輝度を算出します。RGBに対して R × 0.299 + G × 0.587 + B × 0.114 で算出できます。下記の例では背景色が暗ければ白を、明るければ黒となるように計算しています。 1 2 3 4 5 6 7 8 9 10 11 12 13 const backColor = '#0033ff'; let r = backColor.substr(1, 2), g = backColor.substr(3, 2), b = backColor.substr(5, 2); r = parseInt(r, 16); g = parseInt(g, 16); b = parseInt(b, 16); const y = 0.299 * r + 0.587 * g + 0.114 * b; // 輝度 const foreColor = v < 128 ? 'white' : 'black';

モバイルサイト用のヘッダ出力を Python で書いてみた

モバイルサイトを３キャリアでほぼ共通化して作りたい - http://d.hatena.ne.jp/tilfin/20080530/1212376626 上記のエントリで DoCoMo, au, SoftBank 用のモバイルサイトを XHTML で作成する場合のそれぞれの書き方を調べた。その書き方に従って HTTP ヘッダと XHTML 宣言部分を出力する CGI サンプルを Python で書いてみた。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 #!/usr/bin/env python \# -*- coding: utf-8 -*- import os import codecs class UserAgent: def \_\_init\_\_(self, ua): if ua.startswith("DoCoMo"): self.kind = 1 elif ua.startswith("KDDI"): self.kind = 2 elif ua.startswith("SoftBank") or ua.startswith("Vodafone") or ua.startswith("MOT"): self.kind = 3 else: self.kind = 0 def is_mobile(self): return self.kind > 0 def is_docomo(self): return self.kind == 1 def is_au(self): return self.kind == 2 def is_softbank(self): return self.kind == 3 def get\_content\_type(self): if self.kind > 0: return "Content-Type:application/xhtml+xml; charset=Shift_JIS" else: return "Content-Type:text/html; charset=UTF-8" def get_declare(self): if self.kind == 1: return """<?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.0) 1.0//EN" "i-xhtml\_4ja\_10.dtd">""" elif self.kind == 2: return """<?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML 1.0//EN" "http://www.openwave.com/DTD/xhtml-basic.dtd">""" elif self.kind == 3: return """<?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//J-PHONE//DTD XHTML Basic 1.0 Plus//EN" "xhtml-basic10-plus.dtd">""" else: return """<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">""" agent = UserAgent(os.environ.get("HTTP\_USER\_AGENT", "N/A")) print agent.get\_content\_type() + "\\r\\n\\r\\n" \+ agent.get_declare() print '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">' print "<body>" file = "content.html" if agent.is_mobile(): f = codecs.open(file, "r", "utf-8") s = f.read() print s.encode('cp932') f.close() else: f = open(file, "r") print f.read() f.close() print "</body></html>" クラス UserAgent のコンストラクタには、クライアントのユーザーエージェント値を渡す。文字エンコーディングは、モバイルでは Shift_JIS 、通常は UTF-8 とした。サンプルの最後のところで body 内のコンテンツを別ファイルから読み込んで書き出している。Shift_JIS へのエンコーディングを shift_jis と指定したところエラーになり、cp932 としたら成功した（この件については後で調べてみることにする）。 get_content_type() で Content-Type 部分が取れる。ケータイ以外のときが、Content-Type:text/html; となっているのは IE では MIME Type 判別がうまくいかないためか、ファイルのダウンロードしよう（保存するかどうかのダイアログが阿上がった）とするのでこうした。get_declare() ではそれぞれのキャリアに対応した XHTML 宣言部を返す。

モバイルサイトを３キャリアでほぼ共通化して作りたい

フルブラウザ搭載機種が増えてきたとはいえ、実際に使うにはそれなりに定額サービスを利用しなければいけないし、操作性などを考えるとまだまだモバイルサイトを作る需要はある。未だに iモード向けコンテンツ (C-HTML) で作るのが一番簡単に共通化できるようだが、3G機種に焦点をあてて DoCoMo、au、SoftBank の最近の動向（2008年 5月現在）を探ってみた。なお、PC サイトのモバイルサイトを作るための情報収集のため、絵文字の利用については考慮しない。各キャリアのコンテンツ制作者向けサイト DoCoMo 開発者向け情報 | サービス・機能 | NTTドコモ DoCoMo は i-CSS といって外部CSSファイルをサポートしていないのでインラインで定義しかできない。 iモード対応XHTML 2.0 から table 要素に対応している。 au KDDI au: EZfactory SoftBank 文字エンコーディング SoftBank の機種を考慮すると、Shift_JIS での統一だけでは辛いようだ。ネット上情報を探し回った結果文字エンコーディングは UTF-8 にほとんど対応しているものの Shift_JIS にしておき、そして CGI で受け取ったデータは、Shift_JIS → UTF-8 の順で判別するのがマシに思えた。表示のみであれば、UTF-8 での統一は可能である。 au は GET, POST された情報が UTF-8 のページでも Shift_JIS になるらしい。 SoftBank の 3GC型（Shift_JIS非対応）機種はページが Shift_JIS でも GET, POST されたデータは UTF-8 になる。 HTTP ヘッダ Content-Type の出力 application/xhtml+xml; charset=Shift_JIS ...