jQuery と CSS3 の :target セレクタを使ってスライドショーを作ってみた

jQuery CSS JavaScript

:target セレクタの便利さを試してみたかったので作ってみた．


デモ： jQuery Slideshow with CSS3 :target selector


上下キーでページ切り替え．単純なページ切り替えしか実装していない．文字が追加で表示されるとか横から何か飛び出てくるとかはできない．
JavaScript 側ではフラグメント識別子を変更しているだけという手抜き仕様．


スライドショーといえば Opera Show が手軽なんだけど，Opera 以外じゃ動かないからね．


コード

使い方

HTML
<div>
	<p>page 1</p>
</div>
<div>
	<p>page 2</p>
</div>

<script type="text/javascript">
$("div").slideShow(); //それぞれの div を 1 スライドに
<script>

指定した要素に "slide" というクラスをつけている．

CSS
/* html と body を height: 100% にしているのは .slide の height を 100% にするため*/
html {
	height: 100%; 
}
body {
	height: 100%;
}
.slide {
	height: 100%;
	display:none;
}
.slide:target {
	display:block;
}

あとは .slide をお好みのスタイルにするだけ．

文字列から曜日を返す

javascript 
function getDay(s) {
    return ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"][new Date(Date.UTC.apply(this,s.match(/(\d{4})?[^\d]*(\d{1,2})[^\d]*(\d{1,2})/).slice(1).map(function(e,i){switch(i){case 0:return e?e:(new Date()).getFullYear();case 1:return e-1;default:return e}}))).getDay()];
}

/*
getDay("2010/10/15") // Fri
getDay("2010年/10/16") // Sat 
getDay("10/17") //Sun **2010年に実行した場合
getDay("2010/9/1") // Wed
getDay("121") // 12月1日と解釈されてWedを返す.こういう場合1201 や 0121のように4桁で書くよね？
*/

1行で見にくい．
最後の例のように少し穴があるように思われる．
Firefox 3.6 + Firefbug 1.5.4 で動作確認

以下コードの解説

続きを読む

delicious netowrok の既読リンクは表示しない

delicious userjs greasemonkey 
// ==UserScript==
// @include http://www.delicious.com/network/*
// ==/UserScript==

(function() {
	var style = document.createElement("style");
	document.getElementsByTagName("head")[0].appendChild(style);
	var sheet = style.sheet;
	sheet.insertRule("a:visited { font-weight: 800 }", sheet.cssRules.length);

	var posts = document.querySelectorAll("li.post");
	for(var i = posts.length; i;) {
		var post = posts[--i]
		var postlink = post.querySelector("a.taggedlink")
		if(window.getComputedStyle(postlink, "").fontWeight == 800) {
			post.style.display = "none";
		}
	}
})();


Opera 10.63 動作確認．

参考

できあがるまで

Network に並ぶページはすべて目新いものではない．さっき見たページもたくさん並んでいる．そんなページへのリンクは消してしまおう．
a:visited を JavaScript でいじれるのをどっかで見た気がする．
ふむ，スタイルをつけてそれをよみとればいいわけだな．
どういうスタイルにするかはどうせ消える要素なんだからどうでもいいわけで，参考サイトの font-weight を採用．
はじめは ユーザCSS を適応させてそれを ユーザJS で操作するという方法をとった．
ここで最初のつまづき
"element.style.fontWeight" だとユーザCSSで変更した値を取得できない．というわけで初めてgetComputedStyle を使ってみる．これで一応完成．
さらに思う．どうせなら ユーザJSだけで完結させたい．
で stylesheet.insertRule．これも初めて使う．
で，完成．
と思いきや @include が聞いていないのかいかなるページでも動いてしまう．なぜ？未解決．
Greasemonkey でも動かしてみたが問題なし．ほかのスクリプトはまともに動いているのに？？？

delicious から twitter に

delicious twitter greasemonkey

設定にあったんだね．
https://secure.delicious.com/settings/bookmarks/sharing
friendfeed や twitterfeed を間にかませるというめんどくさいことをやってた．
twitterfeed はアクセス数を測れるという利点はある．


本題．
delicios から twitter に投げると



のように，メッセージとurl のみが投稿される．これでは何がなんだかわからんので delicious でブックマークしたものであるとわかりやすくしてみた．

// ==UserScript==
// @include http://www.delicious.com/save*
// ==/UserScript==

// delicious から twitter にポストはメッセージと url(icio.us/foobar) しか投稿されない
// 自動でページのタイトルをメッセージに追加するように
// さらに notes に何か書くとそれもメッセージに追加するようにした

(function() {
	if(document.getElementById("send").value.indexOf("@twitter") >= 0) {
		var title = document.getElementById("title").value,
			prefix = "[d] ",
			note = document.getElementById("notes"),
			message = document.getElementById("messageField"),
			t = prefix + title;
			message.value = t;
		note.addEventListener("blur", function() {
			var v;
			message.setAttribute(
				"value",
				(v = this.value) != "" ?  
					v + " " + t:
					t
			);
		}, false);
	}
})();

ソース上のコメントにある通り， title と notes をメッセージに追加するようにしてある.
動くページが /save のみとなっているところをどうにかしたい．


動作確認: Opera 10.62

jQuery プラグイン 書いた

jQuery JavaScript

http://gist.github.com/590362
要素を縦方向のみリサイズできるように．要素の下につかんでドラッグできる要素を追加．

http://gist.github.com/592245
テキストエリアを自動で伸ばす．動作がカクカクで気持ち悪い．


デモ

Good bye, Bloglines

Ask.com - What's Your Question?

2010年9月末をもって Bloglines がサービス停止するそうだ．


RSSフィード をもってウェブを楽しむというすばらしい体験を私に教えてくれた存在が消えてしまうのを非常に悲しく思う．
使い始めたのが 2004年5月10日．今から6年も前の話．それから，今も使っている livedoor Reader に乗り換えるまでの 2年半お世話になった．


このブログで Bloglines と検索してみるとたくさんのエントリがある．livedoor Reader が発表されて話題を集めている中なかなか以降できなかったこともあった *1．ただダウンしてることを伝えているエントリもある（このころは twitter っていう便利なものがなかったんだな）．ほんと懐かしい．


後発の Google Reader にシェアを奪われたり，twitter は使うけどいまどきフィードリーダーなんて使わないよなんて人も多かったり．Bloglines 終了のお知らせ記事に書かれているように twitter，facebook(まともに使ったことがないのでわからないが)と違ってリアルタイムで情報を得ることができないのがユーザが離れた最大の原因．これは他のものにもいえるので，Google Reader も無くなる日がくるのかもしれない．


完璧に代わりになるようなものがないので私はフィードリーダーを捨てることはまだないだろうが，いつかは捨てる日が来るのかもしれない．ここでいうフィードリーダーはただフィードの中の記事を羅列するだけというもの．フィード（RSS, Atom etc.）自体はなくなるものじゃなさそうなので広い意味でのフィードリーダーは消えることは無いだろうけどね．


Bloglinesさんありがとうございました，そしてご苦労様でした．安らかにお眠りください．

*1:単に livedoor Reader が Opera と相性が悪かったともいう