長い英単語を途中で折り返したいときの CSS の指定方法: Days on the Moon
ヨーロッパ系の言語では基本的に単語の途中に折り返しを入れません。しかし、幅の狭い領域に長い英単語を記述するときや、笑いを表す「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:
jQuery のバグを見つけてから修正されるまで: Days on the Moon
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 操作 ある日どこかで 街中にクリスマスの
Firefox Developers Conference 2010: Days on the Moon
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 はユーザーの選択肢を広めることを重視する、逆に言えば単一のプラットフォームを目指
リンクのようなボタンを作る: Days on the Moon
こんばんは、JavaScript Advent Calendar 2010、15 日目担当の nanto_vi (なんと) です。12 月 15 日が何の日か調べてみると東北本線が宮城県に到達した日とのこと。当時は上野から仙台まで 12 時間 20 分かかったそうです。それから 123 年を経た現在では同じ時間で鹿児島中央から新青森まで行けるようになり、鉄道の速度にも JavaScript の実行速度にも日進月歩を感じる今日この頃です。 さて、アプリケーションを作っていると、見た目はリンクのようだがリンクでない UI 部品を使いたくなるときがあります。ここで「リンクでない」とは、クリックしてもページ遷移が発生しないということです。このような UI 部品は、ページ遷移の代わりにメニューの表示といった何らかのアクションを引き起こす、すなわちボタンとして振舞います。 ユーザーインターフェース記述
JavaScript の Iterator、関数とコンストラクタ: Days on the Moon
オンライン勉強会の Jetpack 入門に参加して Jetpack のソースコードを読んでいたら、Iterator を関数として呼び出したときとコンストラクタとして呼び出したときとでは挙動が違うということを知りました。 Iterator の動作 オブジェクト o に対して for-in 文、for-each-in 文を実行したとき、及び Iterator 関数、Iterator コンストラクタを呼び出したときの (SpiderMonkey の) 動作は、それぞれ次のようになります。 コード o が __iterator__ メソッドを持つとき o が __iterator__ メソッドを持たないとき for (... in o)
Firefox 3.6 での XPath による要素取得: Days on the Moon
Firefox 3.6 にしたら、動的に生成した文書からの XPath による要素取得ができなくなったという報告が挙がっています。 Firefox3.6でdirect_bookmark.jsとdirect_hb.jsのはてブのタグを取得できていない問題(未解決→解決) - ヴィンペラートル・オクタウィアヌス - vimperatorグループ subscldr.jsが動かなくなったのを直してみた - mountain_dewの日記 この原因は、Firefox 3.6 で HTML 要素の名前空間の扱いが変わったことにあります。Firefox 3.6 (Gecko 1.9.2) では、HTML5 に従い、HTML 要素が (XML 文書中でなくても) XHTML の名前空間 (HTML5 でいうところの「HTML の名前空間」) http://www.w3.org/1999/xhtml に属す
Firefox Developers Conference 2009: Days on the Moon
11 月 8 日に行われた Firefox Developers Conference 2009 にて、secondlife さんとともにはてなブックマーク Firefox 拡張に関する発表を行いました。発表資料は次の通りです。 Firefox Developers Conference 2009 発表資料 - 川o・-・）＜2nd life (secondlife さん発表分) はてなブックマーク Firefox 拡張 実装の舞台裏 資料中に約 3500 行の XML とありますが、この中には XBL 内に直接書かれた JavaScript コードの行数も含まれていると思います。XBL は、特定の機能を持つ要素が複数存在する場合に威力を発揮します。Mozilla のウィジェット (ボタンやメニューなど) のソースを読むためには XBL のあらましを知っておく必要があると思うのですが、意外
HTMLDocument の動的な作成: Days on the Moon
ブラウザ上で、JavaScript を使って HTML のソースから HTML 文書を生成するのに、どんな方法があるのか調べました。なお、以下のスクリプトは HTML 文書上で実行することが前提です。 表の見方 XSLT の HTML 出力 createHTMLDocument メソッド createDocument メソッド createDocument メソッドと名前空間の指定 createDocument メソッドと文書型宣言の指定 createDocument メソッドと文書型宣言及び名前空間の指定 cloneNode メソッド iframe 要素 ActiveXObject CID からの作成 まとめ 表の見方 以下の表において、各項目の意味は次の通りです。 doc HTML 文書を作成できれば○、XML 文書を作成できれば△、それ以外なら×です。HTML 文書かどうかは、cre
Kanasan.JS JavaScript 第 5 版読書会 #7: Days on the Moon
Kanasan.JS JavaScript 第 5 版読書会 #7 に行ってきました (当日のチャットログ)。範囲は前回に引き続き CSS の操作、そしてイベント周りと、一般に「JavaScript」といったとき話題になりやすい部分です。参加者のブログ記事は「JavaScriptでCSSとイベントを扱う from Kanasan.JS | Blog.37to.net」のほか読書会のページからたどれます。 display: inline-block; サイ本では解説されていませんが、CSS の display プロパティの値 inline-block に関して話が盛り上がりました。inline-block 及びそれがどのようなレイアウトに使えるかについては以下で解説されています。 書籍などに紹介されていない display : inline-block について (ヨモツネット) inlin
SpiderMonkey の判別とブラウザ判別: Days on the Moon
1 行でブラウザ判別を行うスクリプト (IE 用の日本語紹介記事、Firefox、Safari 用の日本語紹介記事) が注目を集めています。それによると Firefox の判別は次の 15 文字で行えるそうです。 //Firefox detector 2/3 by DoctorDan FF=/a/[-1]=='a' いったいなぜこれで Firefox が判別できるのか、少し探ってみました。 何を判別しているのか SpiderMonkey のソースコードを探る より短い SpiderMonkey の判別法 「ブラウザ判別」としての不備 まとめ 参考文献 何を判別しているのか 実際に探っていく前にひとつ注意しなければいけないことがあります。それは、上記のコードが Firefox を判別するものではないということです。このコードには Web ブラウザ固有のオブジェクトモデルに関する情報が含まれて
第 7 回アルゴリズムイントロダクション輪講会資料: Days on the Moon
すでにニュースでも伝えられている通り、12 月 1 日に第 7 回アルゴリズムイントロダクション輪講会がありました。今回の担当は私だったので、その発表資料を公開します。 中央値と順序統計量 (その 1) 予定 順序統計量とは 選択問題とは 最小値と最大値 平均線形時間選択アルゴリズム 中央値と順序統計量 (その 2) 最悪線形時間選択アルゴリズム 3 つずつのグループに分割した場合 7 つずつのグループに分割した場合 参考文献 中央値と順序統計量 (補足) 4 つずつのグループに分割した場合 6 つずつのグループに分割した場合 Lazy-Select Randomized-Partition スタッフロール 「どうせ後から Web で公開するんだから、PDF とか見るのに手間がかかるものは使ってられないよね。やっぱ時代は XML 複合文書でしょ!」と、数式を表現するのに MathML を使
誰が AutoPagerize を提供すべきか: Days on the Moon
はてなブックマークがリニューアルしました。新しいはてなブックマークの個人ページにはページ自動ロード機能、通称 AutoPagerize 機能 (そう呼んでいる人がどれだけいるかは知りませんが) がついています。さて、AutoPagerize のような一般の Web ページにも適用しうる機能は誰が提供すべきでしょうか。ページの製作者でしょうか? ユーザー側が (ブラウザの拡張機能も含む) ユーザースクリプトとして導入すべきでしょうか? はたまたブラウザ側の仕事でしょうか? Twitter 上でそのことに関するやり取りがあったので少しまとめてみました。 hotchpotch bbeta ってデフォルトで AutoPagerize ついてるんだ。変なボタン押すと有効になるっぽい(haihai sakura sakura) (2008-11-10 11:50) os0x はてなブックマークβ の
ユーザースクリプトと製作者スクリプト: Days on the Moon
あと、動作の細かな話ですが、オリジナルのAutoPagerizeとかぶってしまう（二重に読み込まれてしまう）ため、あえてa要素のrel属性（rel=”next”）を外して対処しています。 そろそろAutoPagerizeを標準的に導入していったらどうか - Liner Note 同じ機能を提供するユーザースクリプト (Greasemonkey スクリプト、Web ページに変更を加えるブラウザの拡張機能など) と製作者スクリプトがあった場合、その競合をどう解決するかということについて。最初は単にユーザースクリプト (ここでは特に AutoPagerize) を製作者スクリプトから無効化できるようにすればいいのかなと思いましたが、「3:14 - UserAgentの使い方について」を読んで考えを改めました。 ユーザースクリプトはブラウザの機能を補うものであり、ブラウザがもともと持っている機能と
Kanasan.JS JavaScript 第 5 版読書会 #6: Days on the Moon
Kanasan.JS JavaScript 第 5 版読書会 #6 に行ってきました (当日のチャットログ、参加者のブログ一覧)。今回は 14 章「ブラウザウィンドウの制御」から 16 章「CSS とダイナミック HTML」の途中まで読み進めました。 タイマーの仕様 (14.1、p. 282) setTimeout などのタイマーはブラウザが独自に実装したもので、標準化された仕様は存在しません。HTML 5 の草案には一応含まれているものの、独立した仕様に移すことが示唆されています。かといって、その場合の受け皿となるであろう W3C WebApps WG にもはっきりとした動きは見られず (Apple の人から高精度タイマーの提案が出ていましたが)、タイマーの標準化がどうなるのかよくわかりません。 Navigator オブジェクト (14.3.3, p. 289) Navigator オブ
選択範囲のリンクを取得する: Days on the Moon
Web ページの選択範囲に含まれるリンクを取得する方法として、Piro さんによる DOM 2 Range の compareBoundaryPoints メソッドを使ったやり方があります。これはリンクを探すのに DOM Core の機能を使って文書ツリーをたどっていますが、今現在ノードを探すといわれて真っ先に思いつくのは XPath でしょう。そこで、XPath を使って選択範囲のリンクを取得する方法を考えてみました。もちろん、選択範囲を扱う以上 DOM 2 Range も利用します。 基本的な考え方 Range オブジェクトの取得 選択範囲の始点より前にあるリンクの数の取得 選択範囲の終点より前にあるリンクの取得 選択されているようには見えないリンクの除外 まとめ 基本的な考え方 基本的なアイデアは、選択範囲の終点より前にあるリンクで、選択範囲の始点より前にはないものが求めるリンクとい
JS オタが非オタの彼女に JavaScript 世界を軽く紹介するための 10 実装: Days on the Moon
アニオタが非オタの彼女にアニメ世界を軽く紹介するための 10 本が流行っているようで (◯◯オタが非オタの彼女に◯◯世界を紹介するための 10 本まとめ)。えっ、もうブームは去った? まあそんなこと気にせず勝手にいっちゃいます。 軽く紹介するための 10 本 まあ、どのくらいの数の JS オタがそういう彼女をゲットできるかは別にして、「オタではまったくないんだが、しかし自分のオタ趣味を肯定的に黙認してくれて、その上で全く知らない JavaScript の世界とはなんなのか、ちょっとだけ好奇心持ってる」ような、ヲタの都合のいい妄想の中に出てきそうな彼女に、JavaScript のことを紹介するために見せるべき 10 実装を選んでみたいのだけれど。(要は「脱オタクファッションガイド」の正反対版だな。彼女に JavaScript を布教するのではなく相互のコミュニケーションの入口として) あくま
無限リストと遅延評価: Days on the Moon
IT 戦記で Haskell のリストを JavaScript で書くというのをやっている。これは面白い。ただ、そのまま書くと無限リストが無限再起に陥ってしまうので、遅延評価を行わなくてはいけない。 関数式を使った遅延評価 JavaScript で遅延評価を行うにはどうすればいいか。その答えのひとつが関数式だ。リストの各セルを、先頭の値と後続のリストという構造ではなく、先頭の値と後続のリストを返す関数という構造にしてやれば、リストの最初のセルを評価した時点で残りのセルがすべて評価されるという事態を防げる。 具体的には、リスト構築の際、後続のリストそのものの代わりにリストを返す関数を渡し、後続のリストを得るときは関数呼び出しを伴うようにすればよい。なお、ここでは空リストを表現するのに nil という特殊な値を用いる。nil は先頭の値も後続のリストも nil 自身であるリストである。 var
Kanasan.JS JavaScript 第 5 版読書会 #2: Days on the Moon
Kanasan.JS の JavaScript 第 5 版読書会 #2 へ行ってきました。今回は午前ライトニングトーク、午後読書会という二部構成。他の参加者の感想等は参加者のブログ記事一覧からどうぞ。参加人数が 50 人近くという大規模な読書会を企画し、無事成功に導いてくださった Kanasan さんはじめスタッフの方々、そして参加者の皆さん、本当にありがとうございました。 ライトニングトーク Lightning Talk 一覧および Lightning Talk 発表資料一覧から各 LT に関する情報が見られます。 Mozilla Developer Center 翻訳事始 私も LT に参加したのですが、JavaScript に関することなら何でも OK とあるのを見落としていてほとんど関係ない話 (一応翻訳作業の実演は Core JavaScript 1.5 リファレンスの arug
JavaScript の変数と delete 演算子: Days on the Moon
Kanasan.JS JavaScript 第 5 版読書会 #1 にて delete 演算子の動作が話題に上ったそうです。そこで、それについてちょっとまとめてみようかと思い立ったはいいものの、ずるずると引き伸ばしているうちに年を越してしました。しかし、読書会 #2 の開催も決まり、もうこれ以上引き伸ばしているといつまでたっても書けなさそうなので、いい加減腹をくくって個人的にまとめてみようと思います。 JavaScript の変数 delete 演算子の対象 変数に対する delete 演算子 削除できるプロパティとできないプロパティ 変数の属性 delete 演算子の返り値 JavaScript の変数 delete 演算子の話に移る前に、変数とは何なのかおさらいしておきましょう。JavaScript において、変数とはプロパティの別名です。といっても、すべてのプロパティを変数というわけ
Safari 3 の XPath のバグ: Days on the Moon
Mac OS X v10.5 Leopard 上では一足早く正式版が公開された Safari 3。JavaScript でのゲッタとセッタのサポートや DOM 3 XPath の実装など、新機能が山盛りです。しかし、Safari 3.0.4 の DOM 3 XPath 実装にはいくつかバグがあるので、それらをここで取り上げてみようと思います。 逆方向軸に関するコンテキスト位置 XPath 1.0 では、式を角括弧で囲んだ述語を用いることで、ノードセットから結果を絞り込んでいくことが可能です。例えば、child::*[position() mod 2 = 0] なら、子要素のうち偶数番目のものだけを選び出すといった具合です。 ここで、position 関数により得られるコンテキスト位置は、元のノードセットを文書順で並べ替えたとき、現在処理中のノードが何番目になるかを示しています。ただし、an
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
