JavaScript

[JavaScript] W3C-DTF形式の文字列をDate型に変換 – www.be-styles.jp
http://www.be-styles.jp/archives/5328

作った Data を文字列に変換するのはカンタン。ビルトイン関数があるのでこれを使えばおっけー…だが、なんかWebブラウザーによって挙動がだいぶ違うような気がする。気にしないという手もあるのだけど、練習がてら関数にしてみる。

function DateToString(date) {
	return date.getFullYear() + '/'
		+ ('00' + (date.getMonth()+1)).slice(-2) + '/'
		+ ('00' +  date.getDate()    ).slice(-2) + ' '
		+ ('00' +  date.getHours()   ).slice(-2) + ':'
		+ ('00' +  date.getMinutes() ).slice(-2);
}

(‘0×n個’ + 数字).slice(-n) は、0を挿入して桁数を合わせる処理のイディオムとして覚えておくとよいのかな？ 月に1足しておくのを忘れずに。なんで月だけ0-11にしたんやろ…

function W3CDTFtoDate(w3cdtf) {
	var m = w3cdtf.match(/(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/);
	var date = new Date(m[1], m[2] - 1, m[3], m[4], m[5]);
	date.setTime(date.getTime() + 9 * 60 * 60 * 1000);
	return date;
}

W3CDTF ってのは、RSS などで利用されている日付形式。2010-05-22T23:37.30+9:00 といった形式であらわされる。たまに最後が「Z」と表記されていることもあるけれど、それは UTC で表記されているということらしい。

やってることは簡単で、正規表現でW3C-DTF文字列をばらして Date オブジェクトを作成するだけ。ちょっと気をつけなきゃいけないのは、月が0-11であらわされるということ。なので、月は -1 しておかないとね。

最後は +9時間決めうちで時間をずらしている。汎用性を高めるには、引数に逃がしておくべきだけど、自分が使うだけなのでキニシナイ。あと、W3CDTF は日付だけ、分まで、ミリ秒までなどなど、さまざまな形式があるので、全部に対応するのはちと面倒そうだ。この程度のことは、標準で対応しておいてほしいなーとか、にわか JavaScripter の私は思うんですよね。

<blockquote cite="urn:isbn:8158-0179-7" title="カンティロン『商業一般の本性にかんする試論』">
<p>土地はそこから富が引き出される源泉、あるいは素材である。人間の労働はその富を生み出す形式である。そして富それ自体は食料や日常の便利で快適な品々にほかならない。</p>
</blockquote>

これを HTML5風にマークアップするとこうなる。

<figure>
<blockquote cite="urn:isbn:8158-0179-7" title="カンティロン『商業一般の本性にかんする試論』">
<p>土地はそこから富が引き出される源泉、あるいは素材である。人間の労働はその富を生み出す形式である。そして富それ自体は食料や日常の便利で快適な品々にほかならない。</p>
</blockquote>
<figurecaption>
カンティロン<cite>『商業一般の本性にかんする試論』</cide>より
</figurecaption>
</figure>

メンドクサイである。できたら、最初のようにマークアップするだけで、スクリプトで自動変換できるとありがたいかなぁーとか思った。

Continue reading

昔ドコかからいただいてきたモノを利用させていただいていたんだけど、jQuery の勉強ついでに全部書き直した。なので、動作には jQuery が必要。

改善点は、

• FriendFeed のAPIエントリポイントを v2 にした（それに伴ないデータ構造が変わったのでロジックを書き直し）
• 取得したアイテムが時系列じゃない場合があるので、自分でソートした
• アイコン表示のロジックを簡素化、Favicon を直に取りに行くようにした（しかし、16×16 のアイコンが取得できるとは限らなくなったので、スクリプト側でサイズをコントロールする必要が生じたので、アイコンを background ではなく <img> で扱うようにしている）
• アイテム全体にソースへのリンクを貼る方法をやめた。アイテムへURLがあっても、直接クリックしてリンク先へ飛べないため。

Continue reading

ブラウサーの横スクロールバーは鬱陶しい。

なので、なるべくコンテンツはブラウザ幅以内に収めたいものだ。しかし、それを事前に設計することは不可能。というわけで、ここはスクリプトの出番だ。ブラウザ幅を変更したときに、それに追随して記事（<article>タグ: HTML5で定義された要素）内の画像や映像（<video>タグ）をリサイズしよう。

Continue reading

自分のドメイン内はページ内リンク、自分のドメイン外は"target=_blank"で別ウィンドウで表示したい場合。

<script type="text/javascript">
<!--
var p = location.protocol;
var h = location.hostname;

window.onload = function () {
  var nodes = document.getElementsByTagName('a');
  var i = nodes.length;
  while (--i >= 0){
    var l = nodes[i].getAttribute('href');
    if ( (l.indexOf(p) == 0) && (l.indexOf(h) < 0) )
      nodes[i].setAttribute('target', '_blank');
  }
}
// -->
</script>

JavaScript はあまり書きなれていないのだけど、こんな感じでいいのだろうか。とりあえず動いてるっぽ。でも、これだと厳密には http://exsample.com/my-domain/ だと別ウィンドウで表示されないよな。

l.indexOf(h) < p.length + ‘//’.length + h.length

だったら完璧かな。そこまでする気はないけれど。location.host を使えばいいのかな？

ってか、 foreach ないの？ JavaScript って。知らんかった。

Continue reading

Twitter で、「はてなって、なんで<strong>とか<em>のための記法がないのん？」ってつぶやいたら、ブログのサイドバーにおいてある FriendFeed を表示するスクリプトがエラいことになった。サニタイズしてなかたデース。

JavaScript の文字列を無害化するには、

• escapeHTML(): < を &lt; なんかへエスケープする
• stripTags(): タグを取っ払う

の二種類があるっぽいケド、もち今回はescapeHTML()でいくのですよ。こういうのって脆弱性につながるやもしれんしなぁ…さっさと直しておくべ。自分で攻撃コードをつぶやいて自爆したりしたらかなわんし。

今度こそおやすみなさい。

FriendFeed を サイドバーにおいてみました の続きで、今度は”はてブ”も統合してみました。

FriendFeed は”はてブ”などの日本のサービスには対応していないので、ブログのRSSと同じように登録する必要があります。これだと、WebサービスのアイコンがただのRSSのアイコンになってしまって、とても見づらい。

そこで、昨日のJavaScriptを改造して、ムリヤリはてなFaviconを表示させるようにしてみました。

イイ感じ。

今度の目標は、Scriptを整理して、より汎用性を持たせられたらなと思います。画像・動画のサムネイルや、はてブのコメントなんかも表示できればいいかなぁ。
だんだんサイドバーに収まらなくなってきた（＋＋？

FriendFeed はさまざまなWebサービスが生成しているRSSを統合して表示できるサービス。つまり、ユーザーがYouTubeに画像を投稿したとか、ブログ書いたとか、Flickrに画像をアップロードしたとか、つぶやいたとか、そういうコトを時系列に並べてFeedで吐いてくれるのです。お友達を登録して誰が何をしたのかを把握することもできるほか、それぞれのActivitiyにコメントをつけることも可能。

Continue reading