はてなブックマーク

この記事は HTML アドベントカレンダーの 19 日目の分、兼 Perl アドベントカレンダーの 19 日目の分です。 Perl で HTML をパースするモジュールはいくつもあります。 HTML::Parser そのままの名前ですね。HTML コードをパースしていき、開始タグ、終了タグ、テキストなどを認識するとそれをイベントとして知らせてくれる、プッシュ型のパーサーです。 HTML の要素の内容モデルや、ある要素のタグが省略可能かといった知識は持っていません。あくまでもタグやテキストなどの出現を知らせるだけで、文書木を構築するわけではないからです。 逐次的なパースに対応しています。HTML 文書全体を表すコードを一気に入力として与えなくてもよく、HTTP 通信中に受け取った分からパースしていくといったことが可能です。 Web 製作者の意図を汲み取ろうと努めており、「壊れた」HTML コ

この記事は HTML アドベントカレンダーの 14 日目の分です。 HTML の属性値のパース規則は、(一般的な要素の内容として出現する) テキストのパース規則とは少し異なります。 わかりやすいところでは、属性値においては小なり記号 (<) をそのまま書けます。以下の HTML コードにおいて、span 要素の title 属性の値も内容のテキストも結果的には " < " という値になりますが、テキストに関しては内部的にパースエラー (invalid-first-character-of-tag-name; タグの名前の 1 文字目が無効) が発生しています。 <span title=" < "> < </span> 文字参照の扱いにも差異があります。以下のように amp という文字参照の名前の後に ASCII の英数字が続く場合、属性値においては "&ampm" という値に解釈されます。

この記事は HTML アドベントカレンダーの 13 日目の分です。 その昔、HTML 4 の時代には以下のようなコードは仕様違反でした。a 要素はインライン要素であり、その内容にブロックレベル要素である h3 要素は取れなかったからです。 <a href="url"><h3>見出し</h3></a> 現在の HTML 標準では、a 要素、ins 要素、del 要素などは内容モデルが透過的 (transparent) であるとされ、上述のコードも仕様に適合しています。 透過的内容モデルの要素は、その子要素から見ると透過的です。言い換えると、透過的内容モデルの要素が取れる内容は、その親要素が取れる内容を引き継ぎます。ある a 要素の親要素が div 要素なら、その a 要素の内容はフローコンテンツ (flow content) となります。親要素が p 要素なら、内容は記述コンテンツ (phr

この記事は HTML アドベントカレンダーの 5 日目の分です。 HTML 標準では、誤りのある HTML コードを Web ブラウザがどう解釈すべきかも定められています。例えば、span 要素の終了タグを書き忘れた場合、 const c = document.createElement('div'); c.innerHTML = '<p><span>foo</p><p>bar</p>'; console.log(c.innerHTML); // => "<p><span>foo</span></p><p>bar</p>" 最初の段落が終了する地点で span 要素も終了すると解釈されました。ここで span 要素を b 要素に変えてみるとどうなるでしょう。 const c = document.createElement('div'); c.innerHTML = '<p><b>foo<

この記事は HTML アドベントカレンダーの 7 日目の分です。 HTML の属性値の先頭または末尾にスペースなどの空白文字を記述したとき、それらの文字がそのまま扱われる場合と無視される場合があります。例として form 要素の属性を見ていきましょう。 <form method=" post " action=" /edit " target=" _blank " rel=" noopener "> method 属性の値は特定のキーワードであり、空白文字を含む値は指定できません。" post " は無効な値として無視され、デフォルト値である "get" を指定したのと同じ扱いになります。 action 属性の値はスペースで囲まれる可能性のある空でない妥当な URL であり、先頭と末尾の空白文字の並びは無視されます。この場合は "/edit" を指定したのと同じ扱いになります。 targe

この記事は HTML アドベントカレンダーの 4 日目の分です。 HTML の dl 要素 (説明リスト、いわゆる定義リスト) は、名前と値 (用語と説明) からなるグループの連なりを表します。ひとつのグループには dt 要素と dd 要素がそれぞれひとつ以上含まれます。 よく見るのは dl 要素の直下に dt 要素と dd 要素が来る形でしょう。以下の例では dl 要素にふたつのグループが含まれます。 <dl> <dt>琥珀</dt> <dd>寒天を使い透明感のある菓子の総称。</dd> <dd>琥珀糖のこと。</dd> <dt>琥珀糖</dt> <dt>干琥珀</dt> <dd>寒天を煮て固め表面を乾燥させた菓子。シャリっとした表面とプルっとした中身の対比が癖になる。</dd> </dl> スタイルシートを適用したり、マイクロデータの項目を作成したりするために、グループひとつずつを表す

この記事は JavaScript アドベントカレンダーの 4 日目の分です。 今やあちこちで使われている絵文字ですが、その中には 1 文字に見えるのに複数の文字 (符号位置) から構成されるものがあります。例えば「👨‍👩」という男女が並んだ絵文字は、U+1F468 MAN、U+200D ZERO WIDTH JOINER、U+1F469 WOMAN の 3 つの符号位置からなります。 JavaScript の正規表現でこのような絵文字にマッチさせようとすると正規表現パターンが長大になってしまいます。また、文字クラス [...] 内にこのような絵文字を記述すると、「U+1F468、U+200D、U+1F469 という符号位置の並び」ではなく「U+1F468、U+200D、U+1F469 のいずれかの符号位置」にマッチしてしまいます (/u フラグが有効な場合)。 これを解決するための提案

結論 type X = 'foo' | 'bar' | (string & {}); のように、文字列リテラル型の共用体型に | (string & {}) を付け足した型 X を定義します。X 型は任意の文字列を受け付けますが、IDE (Visual Studio Code など) で X 型の値を入力するときには 'foo' と 'bar' が自動補完の候補として提示されます。 解説 単純に type X = 'foo' | 'bar' | string; と書いてしまうと、共用体型の各要素がまとめられて、X は単なる string 型になってしまいます。{} 型は null と undefined を除く任意の値を受け付けるので、string & {} 型は実質的に string 型と同一なのですが、TypeScript 4.4 の時点では同一扱いされず、共用体型の各要素がまとめられ

Web ブラウザで使われる JavaScript ライブラリの中には、グローバル変数 (window オブジェクトのプロパティ) をはやすものがあります。Google Tag Manager の window.dataLayer や、Canva ボタンの window.Canva などです。 そうしたグローバル変数をあちこちのモジュールから直接操作していると保守性が下がってしまうので、ラッパーとなるモジュールを用意したいところです。グローバル変数を直接操作するのはラッパーモジュール内のみにとどめ、他のモジュールはラッパーモジュールを介して外部ライブラリにアクセスするという仕組みです。 このとき、ラッパーモジュール内でグローバル変数にアクセスしつつ、他のモジュールではそのグローバル変数にアクセスできないようにするには、どうしたらよいでしょうか。 TypeScript でのグローバル変数の宣言

Windowsで一時的にプロキシ自動設定ファイル(プロキシ自動構成スクリプト、pacファイル)を利用したいとき、 プロキシ自動設定ファイルを配信するHTTPサーバーを立てなければいけない。(以前はローカルファイルが使えたが、Windows 10 Creators Updateから使えなくなった。) Windowsの「プロキシ」設定画面で「スクリプトのアドレス」を指定しなければいけない。 という手間があります。 そこで、プロキシ自動設定ファイルを配信するHTTPサーバーを立ち上げ、そのURLをWindowsのプロキシ設定に指定するPowerShellスクリプトを書きました。 上記リンク先のスクリプトをローカルに保存し、Explorerでスクリプトファイルのコンテキストメニューから「PowerShell で実行」を選択すると、コンソールウィンドウが開き、スクリプト中に記述されたプロキシ自動設定

ECMAScript 2018で正規表現の戻り読み(lookbehind)が追加されました。 /(?<=foo)bar/.test('foobar'); // => true 'foobar'.replace(/(?<=foo)bar/, 'baz'); // => 'foobaz 正規表現の戻り読みと言えばPerlでは1998年7月リリースのバージョン5.005からサポートしており、そこから20年もたってと思いたくなるかもしれません。しかし、ECMAScript (JavaScript)のそれはPerlのものとは一味違います。なんと戻り読みの中で量指定子(*、+、?、{n}など)を使えるのです。 // JavaScriptなら(?<=...)の中で+が使える。 /(?<=fo+)bar/.test('foobar'); // => true # Perlでは(?<=...)の中で+を使お

この記事の内容は古びている。この記事が最初に執筆されたのちに、CSS Overflow Module では line-clamp プロパティが定義された。この line-clamp プロパティは max-lines、continue、block-ellipsis プロパティに対する一括指定プロパティである。 結論からいうと、CSS の -webkit-line-clamp プロパティは使わないほうがいい。現状および今後の Web ブラウザでのサポートが望めないからである。 -webkit-line-clamp CSS プロパティとは何か 複数行でも3点リーダーをきかせることができるというもの。 このプロパティはどうやって使うか -webkit-line-clamp プロパティ単体では効果を持たず、他のプロパティと組み合わせて使う。 selector { display: -webkit-b

Kyoto.js #10で「知られてそうで知られてない少し知られてるECMAScript 2015 (ES6)の新機能」というライトニングトークをしたので、そのスライドに当日しゃべった内容や補足を追記して以下に掲載します。 自己紹介 nanto_vi 情報規格調査会SC 22/ECMAScript Ad hoc委員会 editional issueの報告 ECMAScript 2015 (ECMA-262 6th Edtition) クラス構文 アロー関数 ブロックスコープ Promise etc... 2015年にECMAScriptが大幅に改定されました。クラス構文やアロー関数の追加はあちこちで取り上げられているので皆さんご存知でしょうが、ここではあまり取り上げられていない地味な新機能を紹介します。 Unicodeの符号位置 // 🍣 '\uD83C\uDF63'; // ES5 '

「flex box layoutで中に長いテキストなどを含む幅可変要素のレイアウト - くらげだらけ」という記事が興味深いです。過去に「長い英単語を途中で折り返したいときの CSS の指定方法」にて、word-wrap: break-word と display: inline-block などの組み合わせには注意が必要 (word-wrap の指定が効かないように見えることがある) と述べたのですが、似たようなことが display: flex にも言えるようです。 この挙動は認識していなかったので CSS Flexible Box Layout Module Level 1 (flexbox 仕様草案、2016 年 4 月 2 日時点のもの) を見てみたところ、「4.5. Implied Minimum Size of Flex Items」(flex アイテムの暗黙的な最小サイズ)

Windows の操作全般および MS-IME で Emacs のようなキーバインディングを利用するための個人的なメモ。 Ctrl キーの位置調整 Change Key を利用。管理者として実行する。 CapsLock → Ctrl (左) カタカナ/ひらがな → Shift (右) 半角/全角 → Esc XKeymacs の設定 XKeymacs のスナップショットバージョンを利用。Explorer を「管理者として実行」し、その上で C:\Program Files にフォルダをコピー。 dot.xkeymacs 以下の内容でファイル %APPDATA%\dot.xkeymacs (たいていは C:\Users\{user}\AppData\Roaming\dot.xkeymacs) を作成。 (fset 'browser-back [browser-back]) (fset 'br

たまに漢字にマッチする正規表現パターンを書きたいときがあります。Perl の正規表現だと Unicode のスクリプト名を使って \p{Han} で漢字にマッチさせられるのですが、JavaScript ではそうはいきません。JavaScript の正規表現には以下のふたつの問題があります。 Unicode スクリプト名の指定 (\p{...}) に対応していない。 そもそも Unicode の符号位置に対してマッチさせられない (UTF-16 における符号単位に対するマッチになる)。 BMP 外の文字にマッチさせたいときは、サロゲートペアの符号単位を記述する必要がある。 これに関しては ECMAScript 2015 で導入された /u フラグで解決する見込み。 とはいえ、解決不能な問題というわけでもないので、Perl の \p{Han} を JavaScript に移植してみましょう。\

この「いくつかのブラウザ」とは IE のことを指していると思われますが、href プロパティに絶対 URL を設定しなおすことで、URL のスキーム部分を取得できるようになります。 // http://www.example.org/ 上で実行しているものとする。 var elm = document.createElement('a'); elm.href = '/foo?bar#baz'; // IE 6 / 7 で絶対 URL を設定。 // elm.href = elm.cloneNode(false).href でもよい。 elm.href = elm.getAttribute('href', 4); // IE (少なくとも 8 ～ 11) で絶対 URL を設定。 elm.href += ''; elm.protocol // => "http:" elm.hostname

集え変態プログラマ！JavaScriptの最短コードに挑んだコードゴルフ大会 in Code 2013 | DX.univ 呼ばれてないけど、ボクもコードゴルフしてみたよ - latest log Code 2013 というイベントで出されたというコードゴルフのお題「JavaScript でデジタル時計」を見ているうちに、自分でもやりたくなったので挑戦してみました。 基本方針 出力が複数行にわたるなら 1 行ずつ処理していくのが素直な手ですが、このお題においてはそれだとひとつの文字に対する処理が細切れになってしまいます。 そこで、ある文字の出力処理をまとめてやってしまいましょう。行ごとにではなく列ごとに処理を進めていくのです。 20 分 方針が決まれば早速コーディング。以前、渋谷から 10 分のゴルフ場で似たようなお題「banner」に取り組んだときは三十六進数表記を使いましたが、とりあえ

ヨーロッパ系の言語では基本的に単語の途中に折り返しを入れません。しかし、幅の狭い領域に長い英単語を記述するときや、笑いを表す「www…www」のように欧文文字を表現に組み込むときなど、欧文文字同士の合間で折り返したいと思うかもしれません。そのような折り返しの制御を CSS で行うにはどうすればよいのでしょうか。 2013 年 6 月時点の結論 word-wrap: break-word を使うとどうなるのか word-break: break-all を使うとどうなるのか word-wrap: break-word と word-break: break-all を両方使うとどうなるのか なぜ word-break: break-all ではなく word-wrap: break-word を勧めるのか どこに word-wrap: break-word を指定するのか position:

1 月 24 日に開催された Kyoto.js meetup 4 で「jQuery のバグを見つけてから修正されるまで」と題した発表を行いました。 jQuery へのコミットに関して 2 行でまとめるとすれば次のようになるでしょうか。 jQuery のソースコードはショートコーディングの嵐なので心してかかる Contributing to jQuery と jQuery Core Style Guidelines は必読 発表の筋書きは以下の通りです。 jQuery のバグを見つけてから修正されるまで フォロー・ミー nanto_vi (TOYAMA Nao) 株式会社はてな アプリケーションエンジニア クライアントサイド (JavaScript) サーバーサイド (Perl) jQuery をバリバリ使っている Deferred イベント DOM 操作 ある日どこかで 街中にクリスマスの

12 月 13 日に Kyoto.js の第 3 回 meetup で、「jQuery で HTTP 接続するときの書き方」と題した 5 分間のライトニングトークを行いました。以下にその内容を一部再構成して収録します。 こんにちは、nanto_vi です。今日は jQuery で HTTP 接続をするときの書き方について話します。 皆さん jQuery を使うことも多いかと思います。jQuery で HTTP 接続をするとき、古いサンプルだと次のような書き方が載っています。 $.ajax({ url: '/foo/bar', data: { baz: 'qux' }, success: function (data) { console.log(data); }, }); 接続完了時の処理をコールバック関数として $.ajax() に渡してやる形ですね。しかし、現在この書き方は非推奨となっ

こんにちは、はてなでアプリケーションエンジニアをしている nanto_vi です。この記事は Hatena::Staff Advent Calendar 2011 の一環として書いています。Advent Calendar の会場ははてなブログとなっていますが、主催の antipop さんに尋ねたところ何でもよいというような返答があったのでここで書きます。 はじめに謝っておきますが、この記事ははてなとほとんど関係がありません。タイトルに「はてな」と入っているのは Advent Calendar の要件を満たすための目くらましあり、内容はといえばはてなのノウハウでもなんでもない、私が最近個人的に心がけていることです。ごめんなさい。 できれば明示的に 業務で書くコードは複数人により読み書きされメンテナンスされるので、わかりやすさが重要になってきます。わかりやすさを保つためには暗黙的に行われる操作

HTML5-WEST.jp 飲み会 UST というのがあるそうで、「参戦希望者募集」とお誘いを受けたのですが、「参戦」というからには何かしら戦の準備を整えねばなるまいと、以前から考えていたことを夜なべして実装しました。 文書間通信をより広範囲な環境で動作させるための考察 IE 6/7 を含む各種ブラウザで動作する、異なるドメイン間での通信のデモ いわゆる HTML5 の文書間通信、window.postMessage() を IE 6/7 でどう再現するかという話で、about:blank を指す隠しフレームを二つ用い、window.name を介することで双方向の通信を実現しています。 どうも IE での about:blank は、その空白ページを読み込ませた文書の生成元を継承するらしく、たとえば http://example.org/ から location.href = 'abou

Template::Plugin::JSON::Escape という Perl モジュールを公開しました。 Template Toolkit を使って HTML を出力するとき、HTML 中に JSON を埋め込みたいことがあります。そのためのモジュールとして Template::Plugin::JSON が存在するのですが、これは小なり記号 (<) などの文字を素通しするため、JSON の内容によっては不正な HTML が出力されてしまいます。 Template::Plugin::JSON::Escape は一部記号を \uxxxx の形式にエスケープするので、JSON の内容にかかわらず出力する HTML を妥当に保てます (もちろん、JSON 出力部以外が妥当な HTML を出力するのであれば、です。なお、SGML のコメント内に JSON を埋め込む場合はこの限りではありません)。

Firefox にて、ディレクトリを指す chrome URL から、そのディレクトリ以下の全ファイルの URL を返すサンプルコードを書きました。 ChromeFiles.get("chrome://browser/content/"); /* => [ "chrome://browser/content/NetworkPanel.xhtml", * "chrome://browser/content/aboutDialog.css", * ..., * "chrome://browser/content/browser.css", * "chrome://browser/content/browser.js", * "chrome://browser/content/browser.xul", * ... ] */ 特徴として、実際のファイルが (.jar または .xpi に) パッ

Firefox Developers Conference 2010 に行ってきた。全体のまとめとしては以下が詳しい。 Firefox Developers Conference 2010 アウトラインメモ | Web scratch nakamura001 @ ウィキ - Firefox Developers Conference 2010 はてなブックマークで fxdevcon タグがつけられたエントリーを見てまわるのもいい。Firefox 4 ベータ版機能概要では新しいタブインターフェース "Panorama" の紹介動画を見られる。 内容に関しては上述のページを参考にしてもらうとして、個人的に感じたことををいくつか挙げる。 Beyond Firefox 4 (Jay Sullivan) Mozilla はユーザーの選択肢を広めることを重視する、逆に言えば単一のプラットフォームを目指