「UL」を含む日記

<map title="Introductory Links" id="introLinks" name="introLinks">
  <div class="banner">
    <span class="invisible">
      <a href="#technologies" title="Skip introductory links and the mission statement" class="bannerLink">
        Skip to Technologies
      </a> |
    </span> 
    <a href="/Consortium/activities" accesskey="A" title="W3C Activities" class="bannerLink">
      Activities
    </a> | 
    <a href="/TR/" accesskey="T" title="Technical Reports and Recommendations" class="bannerLink">
      Technical Reports
    </a> | 
    <a href="/Consortium/siteindex" accesskey="S" title="Alphabetical Site Index" class="bannerLink">
      Site Index
    </a> | 
    <a href="/Consortium/new-to-w3c" accesskey="N" title="Help for new visitors" class="bannerLink">
      New Visitors
    </a> | 
    <a href="/Consortium/" accesskey="B" title="About W3C" class="bannerLink">
      About W3C
    </a> | 
    <a href="/Consortium/join" accesskey="J" title="Join W3C" class="bannerLink">
      Join W3C
    </a> | 
    <a href="/Consortium/contact" accesskey="C" title="Contact W3C" class="bannerLink">
      Contact W3C
    </a>
  </div>
</map>

…えっと、普通はっていうか、一般的には、ナビゲーションってul,li要素にしない？map要素ってなにこれ、なんでこんな場所で使われてんの？map要素ってイメージマップに使う要素じゃないの？

http://www.zspc.com/html40/structure/object.html#map

タイトルはhttp://pha22.net/hotentry/

Permalink | トラックバック(1) | 04:18

2008-12-24

■http://anond.hatelabo.jp/20081224111139

そんな増田にこのブックマークレットをあげよう。

javascript:(function(){d=document;t=d.getElementsByTagName('ul')[1];a=t.getElementsByTagName('a');for(i=0;i<a.length;i++){if('#'==a[i].getAttributeNode('href').value)a[i].onclick();}})();

ちょびっと短くした。動作に変更はない。

Permalink | トラックバック(1) | 11:52

2008-11-08

■http://anond.hatelabo.jp/20081108144655

違法動画を見まくるユーザーが増えても、売り上げには貢献しないから無駄。

俺も違法UL 動画が減ってから使わなくなったけど、当時の俺はニコニコの売り上げにまったく貢献してなかったよ。むしろシステム付加の原因になるやっかいモノなんじゃん？

そもそも動画サイトで儲かっているとこってエロ系だけじゃないの？

Permalink | トラックバック(0) | 14:50

2008-10-11

■http://anond.hatelabo.jp/20081010235635

<tr>
<th>名前</th>
<th>生年月日</th>
</tr>
<tr>
<td >近藤淳也</td >
<td >1975年11月2日</td >
</tr>

このマークアップであれば、近藤淳也は「名前」であり、1975年 11月2日は「名前が近藤淳也の人の生年月日」というのを、視覚関係なく定義できるって言いたいだけなんだけどな。リストだとこうはうまくいかないでしょう？

TABLEってのは視覚的に把握しやすくなるだけじゃなく、「ここには名前の情報が入る」「ここには生年月日の情報が入る」って定義できるわけで、その点ではhttp://anond.hatelabo.jp/20081002194359で書いてあるULでプロフィールをマークアップするよりも意味のある論理構造になるんじゃないかな。

って俺が書いたのに

「視覚的に把握しやすくするためにtable要素を使うべき」って主張するなら、「［視覚効果］を得るために［論理構造であるHTML］を編集し［視覚構造であるCSS］を編集しない」ということの意味を書けよ。

とかいう返信が書けるバカは、一生「リストなのにどうしてTABLE使うの？」とか言ってUL使い続ければいいと思うよ、俺がそんなマークアップ見せられたら突っ返してやり直しさせるけど。

Permalink | トラックバック(0) | 01:10

2008-10-10

■http://anond.hatelabo.jp/20081010220640

どう表現したいか、によるんじゃないかな。

重要なのはあくまでリストだってことであれば、ULでマークアップするのはアリ。各LIの中に情報書き込めばいいんじゃないかな。

ただ、TABLE要素が不適だとも思わないけどね。

たとえば、名前の列と生年月日の列があれば、社員同士を比べてどっちが年上かなどを把握しやすい論理構造になる。TABLEってのは視覚的に把握しやすくなるだけじゃなく、「ここには名前の情報が入る」「ここには生年月日の情報が入る」って定義できるわけで、その点ではhttp://anond.hatelabo.jp/20081002194359で書いてあるULでプロフィールをマークアップするよりも意味のある論理構造になるんじゃないかな。

もちろん、LI要素にclass 属性つけて「何の情報か」を付け加えてもいいけれど、単にLI要素の中にテキストで「○年○月○日」と書き込んであっても、それが「生年月日」であるか「入社日」であるかはわからないわけだ。

だから、俺は社員「リスト」だけれどもTABLEでマークアップしてもいいと思う。

Permalink | トラックバック(1) | 22:45

■http://anond.hatelabo.jp/20081005225902

tableで組んだときと同じように表示

するつもりだったのなら、talbeにするのがもっとも適切なんじゃないの？

CSSの小手先で表でないものを「表のような表示」にする意味が分からない。

HTML＝文書の論理構造をあらわすもの
CSS＝文書の視覚構造をあらわすもの

社員リストを表っぽく見せるために論理構造を無視しtableで（表として）マークアップするよりも、社員リストを論理構造を考慮しul,liでマークアップして表っぽく見せるために視覚的構造をCSSで変更するほうが適切だろう。

むしろ論理構造を無視したHTMLを使って視覚構造を変え、視覚構造を変更するためのCSSをあえて使わないことに何の意味があるのか疑問だ。

Permalink | トラックバック(1) | 22:06

2008-10-05

■http://anond.hatelabo.jp/20081005221600

分かりやすく見やすいから、だ。

tableで組むのがわかりやすいっていうのは作成側の都合だよね？作成側の都合に合わせるのが適切とは思えないなぁ、少なくとも一般人の私には。

CSSを使えばul,liで組んでもdl,dt,ddで組んでもtableで組んだときと同じように表示させられるから、「見やすいから」っていうのもいまいちよくわからないんだけどなぁ。

Permalink | トラックバック(1) | 22:20

2008-10-02

■http://anond.hatelabo.jp/20081002194359

定義済みリストを使うのもいいかも。

<dl>
<dt>名前</dt>
<dd>
写真
<ul>
<li>生年月日</li>
<li>所属など</li>
</ul>
</dd>
</dl>

Permalink | トラックバック(0) | 20:46

■例えば、社員の一覧としてこんなページを作るとき

顔写真と名前・生年月日・所属・趣味・特技ををまとめたページを作るとき、どんなマークアップをするべきなのかを考えていた。まず社員の一覧であるから、リストでマークアップすべきだ。

<ul>
<li>社員１</li>
<li>社員２</li>
<li>社員３</li>
</ul>

普通に考えると、社員の最も基本的な情報は顔と名前だと思う。すると

<ul>
<li>社員１
<ul>
<li>顔写真</li>
<li>名前</li>
</ul>
</li>
<li>社員２・社員３は省略</li>
</ul>

とすべきか。すると、残りの生年月日や所属などはどこにいれるべきか。顔写真と並べるほど重要な情報とは考えづらい。だとすると

<ul>
<li>社員１
<ul>
<li>顔写真</li>
<li>名前</li>
<li><span>プロフィール</span>
<ul>
<li>生年月日</li>
<li>所属</li>
<li>趣味</li>
<li>特技</li>
</ul>
</li>
</ul>
</li>
<li>社員２・３は省略</li>
</ul>

とすべきか。（プロフィールはdisplay:none;で消すためにspanでくくった）

どんな風にマークアップするべきなのか、もしよければアドバイスが欲しい。

Permalink | トラックバック(6) | 19:43

2008-08-22

■http://anond.hatelabo.jp/20080821224627

おー、使ってくれてる奇特な奴がいるとはうれしいねぇ。

感謝の気持ちを込めて実はアレから少しバージョンアップしてるのでそれを公開しますよ！

改善点は2点。

終了判定の変更

で、以前取得したことのある画像にぶつかるとそこでプログラム終了。

これを修正。これ微妙なんだよね。4u.pl動かしてる最中に画像が投稿されるとページングしたときに既に取得した画像にぶつかってしまって止まっちゃうんだよねー。

なので、最後に取得した画像にぶつかったらプログラム終了するように変更した。

元画像が無い場合の挙動

元のURLの画像が削除されてしまって取得できなかった場合に、今までは.plainとかいうダミーデータが保存されてしまっていたが、それを4Uの画像を取得するように変更。

これで元画像が消えてても一応4Uから取得できるので取りこぼしが無くてヤッターって感じだねー。

でわでわコードは以下。


#!/usr/local/bin/perl -w
use strict;
use warnings;

use Web::Scraper;
use URI;
use Perl6::Say;
use MIME::Type;
use LWP::UserAgent;
use Path::Class;
use Data::Dumper;sub p { print Data::Dumper::Dumper(@_) };

my $page = shift || 10000;
unless ( $page =~ /^\d+$/ ) {
    die 'perl 4u.pl [page as int]';
}

my @files = dir('./img/')->children;
my $cache = {};
my $end_file = { mtime => 0 , file => '' };
for my $file (@files) {
    if ( $file->basename =~ /^(.+)\.(.+)$/ ) {
        $cache->{$1} = $2;
    }
    if ( $end_file->{mtime} < $file->stat->mtime ) {
        $end_file->{mtime} = $file->stat->mtime;
        $end_file->{file} = $file;
    }
}

for my $i (1..$page) {
    
    my $url = sprintf 'http://4u.straightline.jp/?page=%s' , $i;
    
    say "request url>".$url;
    
    my $tmp = scraper {
        process 'ul.entry-list>li>div.entry-body>div.entry-photo>a', 'link[]' => '@href';
        process 'ul.entry-list>li>div.entry-footer>div.wrapper-entry-description>div.entry-description>p.entry-img-src', 'img[]' => 'TEXT';
        result 'link','img';
    }->scrape(URI->new($url));
    
    my $links = $tmp->{link};
    my $imgs  = $tmp->{img};
    
    if ( ref $links ne 'ARRAY' ) {
        say "end program.";
        exit;
    }
    
    for my $link (@$links) {
        $link =~ m{/([^/]+)$};
        my $sesid = $1;
        
        if ( $end_file->{file} &amp;&amp; $end_file->{file}->basename =~ /^$sesid\./ ) {
            say "file exsits end program >".$sesid;
            exit;
        }
        
        if ( $cache->{$sesid} ) {
            say "file exsits next >".$sesid;
            next;
        }
        
        sleep 1;
        
        my $image_url = shift @$imgs || next;
        $image_url = 'http://'.$image_url;
        
        say "get image url    >".$image_url;
        
        my $ua = LWP::UserAgent->new;
        my $req = HTTP::Request->new(GET => $image_url);
        my $res = $ua->request($req);
        my $content = $res->content;
        my $content_type = $res->headers->header('content-type');
        my $ext = MIME::Type->new( type => $content_type )->subType || 'bin';
        
        if ( $ext eq 'plain' ) {
            say "not found image  >".$image_url;
            # 本家の画像が消えてたら4Uの奴を保存する。
            my $image_url = 'http://www.straightline.jp/html/found/static/upload/l/l_'.$sesid.'.jpg';
            say "get 4u image url >".$image_url;
            my $req = HTTP::Request->new(GET => $image_url);
            my $res = $ua->request($req);
            $content = $res->content;
            $ext = 'jpeg';
        }
        
        my $write_path = './img/'.$sesid.'.'.$ext;
        
        open my $FH, '>', $write_path;
        binmode $FH;
        print $FH $content;
        close $FH;
        
        say "write image      >".$write_path;
    }
}

言わずもかなコードはカオスなのでよろしゅうたのんます。

Permalink | トラックバック(2) | 14:26

2008-07-22

■[greasemonkey]関連エントリーのツリーをたどれるグレモン

結局概要表示機能追加した。unsafeWindow使いまくり。大丈夫かいな。

// ==UserScript==
// @name	Hatena Bookmark Tree Expander
// @namespace	http://anond.hatelabo.jp/
// @include	http://b.hatena.ne.jp/entry/*
// ==/UserScript==
// <div class="info">
//   <ul id="similar_entries" class="bookmarklist">
//     <li></li>
//   </ul>
// </div>
// <div class="info">
//   <ul id="referred_entries" class="bookmarklist">
//     <li id="referred-entry-\d+"></li>
//   </ul>
// </div>
// <div class="info">
//   <ul id="relation_diary" class="bookmarklist">
//     <li id="diary-{id}-\d+"></li>
//   </ul>
// </div>
(function() {

function main() {
	loadBookmarkCommentViewer();
	similar.prototype.rootAppend();
	referred.prototype.rootAppend();
}

function HBTM(target) {
	this.target = target;
	this.targetXPath = "//ul[@id='"+target+"']/li";
	this.targetRegExp = new RegExp('<ul id="'+target+'"(.|\\s)*?</ul>');
}
HBTM.prototype = {
	openIcon:
		'<img width="15" height="15" class="icon" style="opacity: 0.6" src="http://anond.hatelabo.jp/images/common/open.gif"/>',
	closeIcon:
		'<img width="15" height="15" class="icon" style="opacity: 0.6" src="http://anond.hatelabo.jp/images/common/close.gif"/>',
	loadingIcon:
		'<img width="13" height="13" class="icon" src="http://anond.hatelabo.jp/images/common/loading.gif"/>',
	commentIcon: function(url) {
		return '<img class="hatena-bcomment-view-icon" src="http://r.hatena.ne.jp/images/popup.gif" onclick="iconImageClickHandler(this, \''+url+'\', event);">'
	},
	create: function() {
		this.comment = document.createElement("span");
		this.comment.innerHTML = this.commentIcon($X("string(descendant::a/@href)", this.node).value());
		this.open = document.createElement("a");
		this.open.href = "javascript:void(0)";
		this.open.innerHTML = this.openIcon;
		this.close = document.createElement("a");
		this.close.href = "javascript:void(0)";
		this.close.innerHTML = this.closeIcon;
		this.close.style.display = "none";
		this.loading = document.createElement("span");
		this.loading.innerHTML = this.loadingIcon;
		this.loading.style.display = "none";
		this.node.appendChild(this.comment);
		this.node.appendChild(document.createTextNode(" "));
		this.node.appendChild(this.open);
		this.node.appendChild(this.close);
		this.node.appendChild(this.loading);
		this.open.addEventListener("click", bind(this.openAct, this), false);
		this.close.addEventListener("click", bind(this.closeAct, this), false);
	},
	openAct: function() {
		this.open.style.display = "none";
		if (this.tree) {
			this.tree.style.display = "block";
			this.close.style.display = "inline";
		} else {
			this.loading.style.display = "inline";
			this.load();
		}
	},
	closeAct: function() {
		if (this.tree) {
			this.tree.style.display = "none";
			this.close.style.display = "none";
			this.open.style.display = "inline";
		}
	},
	load: function() {
		var url = $X("string(descendant::a[starts-with(@href, '/entry/')]/@href)", this.node).value();
		GM_xmlhttpRequest({
			method: "GET",
			url: "http://b.hatena.ne.jp"+url,
			onload: bind(this.loadCallback, this)
		});
	},
	loadCallback: function(result) {
		var match = result.responseText.match(this.targetRegExp);
		if (match) {
			var sandbox = document.createElement("div");
			sandbox.innerHTML = match[0].replace(this.target,"");
			this.tree = sandbox.firstChild;
		} else {
			this.tree = document.createElement("ul");
		}
		this.append();
		this.loading.style.display = "none";
		this.close.style.display = "inline";
	},
	append: function() {
		this.tree.style.backgroundColor = "transparent";
		this.tree.style.listStyleType = "circle";
		this.node.appendChild(this.tree);
		$X("li", this.tree).each(function(n) {
			var a = $X("a",n).node();
			var c = $X("count(//li/a[@href='"+a.href+"'])").value();
			if (c > 1) n.parentNode.removeChild(n);
		});
		$X("li", this.tree).each(bind(function(node){new this.constructor(node)}, this));
	},
	rootAppend: function() {
		$X(this.targetXPath).each(bind(function(node){new this.constructor(node)}, this));
	}
};

function similar(node) {
	this.node = node;
	this.create();
}
similar.prototype = new HBTM("similar_entries");
similar.prototype.constructor = similar;

function referred(node) {
	this.node = node;
	this.create();
}
referred.prototype = new HBTM("referred_entries");
referred.prototype.constructor = referred;

function loadBookmarkCommentViewer() {
	var head = document.getElementsByTagName("head")[0];
	var script = document.createElement("script");
	script.type = "text/javascript";
	script.src = "http://b.hatena.ne.jp/js/BookmarkCommentViewerAllInOne.1.2.js";
	head.appendChild(script);
	var css = document.createElement("link");
	css.rel="stylesheet";
	css.href="http://d.hatena.ne.jp/css/base.css";
	css.type="text/css";
	css.media="all";
	head.insertBefore(css, head.firstChild);
	window.addEventListener("load",function(){
		var BCV = unsafeWindow.BookmarkCommentViewer;
		BCV.options['screenshot'] = true;
		var asyncCommnetView = BCV.asyncCommnetView;
		BCV.asyncCommnetView = function(url, onCompleteCallback) {
			var div = asyncCommnetView(url, function(){
				onCompleteCallback.apply(this, arguments);
				new unsafeWindow.Ten.XHR("http://b.hatena.ne.jp/entry/rss/"+url, {}, function(result) {
					if (! result.responseText.match(/<description>(.*?)<\/description>/))
						return;
					if (! RegExp.$1)
						return;
//					var desc = document.createTextNode("desc: "+RegExp.$1);
					var desc = document.createElement("li");
					desc.appendChild(document.createTextNode("desc: "+RegExp.$1));
					div.lastChild.insertBefore(desc,div.lastChild.getElementsByTagName("li")[0]);
				});
			});
			return div;
		};
		BCV.asyncCommnetView.origin = asyncCommnetView;
	}, false);
}

function bind(f,o) {return function() {return f.apply(o, arguments)}}

function $X(xpath, context) {
	if (!(this instanceof $X))
		return new $X(xpath, context);
	this.xpath = xpath;
	this.context = context || document;
}
$X.prototype = {
	evaluate: function() {
		var result = document.evaluate(this.xpath, this.context, null, this.type, null);
		switch (result.resultType) {
			case XPathResult.STRING_TYPE : return result.stringValue;
			case XPathResult.NUMBER_TYPE : return result.numberValue;
			case XPathResult.BOOLEAN_TYPE: return result.booleanValue;
			case XPathResult.FIRST_ORDERED_NODE_TYPE: return result.singleNodeValue;
		}
		return result;
	},
	node: function() {
		this.type = XPathResult.FIRST_ORDERED_NODE_TYPE;
		return this.evaluate();
	},
	value: function() {
		this.type = XPathResult.ANY_TYPE;
		return this.evaluate();
	},
	each: function(func) {
		this.type = XPathResult.ORDERED_NODE_SNAPSHOT_TYPE;
		var result = this.evaluate();
		for (var i=0; i<result.snapshotLength; i++)
			func(result.snapshotItem(i));
	}
};

main();

})();

Permalink | トラックバック(1) | 01:37

2008-07-07

■もん毛スター for firefox

動作未確認。すんげー冗談半分。

// Hatena Monge Star user script
// 2008-07-07
// by masda. (http://anond.hatelabo.jp/20080707043247)

// ==UserScript==
// @name           Hatena Monge Star
// @namespace      http://anond.hatelabo.jp/20080707043247
// @description    Hatena Monge Star
// @include        http://b.hatena.ne.jp/entry/*
// @version        0.3.1
// ==/UserScript==

// deriving from [http://d.hatena.ne.jp/Hamachiya2/20080707/HatenaBlackStar2] ver Firefox
//               [http://f.hatena.ne.jp/hatenacinnamon/20070109001332]
// Thx! and CUTE!


location.href = 'javascript:(' + function() { (function (w) {

	if (typeof(w.Ten) == 'undefined') {
		return;
	}

	HatenaBookmarkMongeStar = new Ten.Class({
		initialize: function(li, entryTitle) {
			var comment = '';
			var tags    = '';
			var commentSpans = Ten.DOM.getElementsByTagAndClassName('span', 'comment', li);
			if (commentSpans.length > 0) {
				comment = Ten.DOM.scrapeText(commentSpans[0]);
			}

	        var tagsSpans = Ten.DOM.getElementsByTagAndClassName('span', 'user-tag', li);
			if (tagsSpans.length > 0) {
				$A(tagsSpans[0].getElementsByTagName('a')).each(function(a) {
					tags += '[' + Ten.DOM.scrapeText(a)+ ']';
				});
			}

			var title = tags + comment;
			if (title.length == 0) {
				var name = Ten.DOM.scrapeText(li.getElementsByTagName('a')[1]);
				title = name + 'のブックマーク';
	        }

			// this.uri   = 'http://b.hatena.ne.jp/keyword/' + li.getElementsByTagName('a')[1].href;
			var u = li.getElementsByTagName('a')[1].href;

			if (u.indexOf('#') == -1) {
				this.uri = u + '#_HatenaMongeStar';
			} else {
				this.uri = u + '_HatenaMongeStar';
			}

			this.title = title + ' - ' + entryTitle;

			this.comment_container = Hatena.Star.EntryLoader.createCommentContainer();
			var target = commentSpans[0] || li;
			target.appendChild(this.comment_container);

			this.star_container = Hatena.Star.EntryLoader.createStarContainer();
			this.star_container.className = 'hatena-star-star-container MongeStarContainer';
			target.appendChild(this.star_container);
		}
	});


	var tryCount = 0;
	var tryMax = 300;
	function waitForHatenaStar() {
//		if (Hatena.Star.EntryLoader.loaded) {
//			Hatena.Star.EntryLoader.loaded = false;
		var s = document.getElementsByClassName('hatena-star-add-button');
		if (s.length) {

			Hatena.Star.EntryLoader.loaded = false;

			Hatena.Star.EntryLoader.loadEntries = function() {
				var entries = [];
				var title = Ten.DOM.scrapeText(Ten.DOM.getElementsByTagAndClassName('span', 'title', document.body)[0]);
				var ul = document.getElementById('bookmarked_user');
				if (ul) {
					$A(ul.getElementsByTagName('li')).each(function(li) {
						if (li.className != 'more') {
							entries.push(new HatenaBookmarkMongeStar(li, title));
						}
					});
				}
				return entries;
			}
			new Hatena.Star.EntryLoader();

		} else {
			if (++tryCount > tryMax) {
				setTimeout(waitForHatenaStar, 400);
			}
		}
	}

	setTimeout(waitForHatenaStar, 500);

})(window); }.toString() + ')()';



GM_addStyle(<><![CDATA[

	.MongeStarContainer {
		margin-left: 4px;
	}

	.MongeStarContainer .hatena-star-add-button {
		background-color: #fc6 ! important;
	}

	.MongeStarContainer a {
		text-decoration: none ! important;
		color: #f80 ! important;
		font-size: 10px;
		position: relative;
	}

	.MongeStarContainer a:before {
		content: '毛';
		font-size:small;
	}

	.MongeStarContainer a .hatena-star-star {
		filter: alpha(opacity=00);
		-moz-opacity:0.00;
		opacity:0.00;

		position: absolute;
		top: 0;
		left: 0;
	}

	.MongeStarContainer .hatena-star-inner-count {
		color: #f90 ! important;
	}

]]></>);

動いたらいいな-

Permalink | トラックバック(0) | 04:32

2008-06-06

■http://anond.hatelabo.jp/20080606205802

<ul>
  <li> 親 </li>
  <ul>
    <li> 子1 </li>
    <li> 子2 </li>
    ...
  </ul>
</ul>

ノー！これ違うよ。

<ul>
  <li>親
    <ul>
      <li> 子1 </li>
      <li> 子2 </li>
      ...
    </ul>
  </li>
</ul>

コウね、コウ。

Permalink | トラックバック(1) | 21:22

■http://anond.hatelabo.jp/20080606204654

~~あんま関係無いけど、<li>要素の中に<ul>を書くのって邪道じゃね？~~

<ul>
  <li> 親 </li>
  <ul>
    <li> 子1 </li>
    <li> 子2 </li>
    ...
  </ul>
</ul>

~~って書くべきだと思うんだけど。~~

上のコードは間違いでした(汗)

文法の参考 http://memo.blogdns.net/html.html

W3Cのドキュメント http://www.w3.org/TR/REC-html40/struct/lists.html#h-10.2

Permalink | トラックバック(2) | 20:58

■ちょとｓYレならんしょこれは・・？

<ul id="menu">
	<li><a href="#">だらだら</a></li>
	<li><a href="#">だらだら</a></li>
	<li><a href="#">だらだら</a><ul><li>だらだら</li><li>だらだらだらだらだらだら</ul></li>
	<li><a href="#">ゆっくり</a><ul><li>していってね！</li></ul></li>
</ul>

こんな感じのリストに

#menu li{
	display:block;
	float:left;
	margin-left:0;
	padding-left:0;
	margin-right:1em;
	border:1px dashed red;
}
#menu li ul{
	position:absolute;
	display:block;
	margin-left:0;
	padding-left:0;
	border:1px dashed black;
}
#menu li li{
	list-style:none;
	border:0 none;
	float:none;
	width:auto;
}

こんな感じのスタイル書いて

window.onload=function(){
	var li=document.getElementById("menu").childNodes;
	for(var i=0;i<li.length;i++){
		if(li[i].childNodes[1]){
			var submenu=li[i].childNodes[1];
			li[i].onmouseover=function(){
				this.childNodes[1].style.display="block";
			}
			li[i].onmouseout=function(){
				this.childNodes[1].style.display="none";
			}
		}
	}
};

みたいなスクリプト書いたときのIEの挙動がおかしい！助けて！

Permalink | トラックバック(1) | 20:46

2008-06-05

■Amazonの商品ページから広島市立図書館を検索するブックマークレット

地域ばれするので増田にメモ。

ブックマーク登録用（1行）

javascript:var li = document.evaluate('//table/tbody/tr/td/div/ul/li/text()', document, null, 6, null); var isbn = []; for (var x = 0; x < li.snapshotLength; x++) { if (li.snapshotItem(x).nodeValue.match(/[0-9]{10}/)){isbn.push(li.snapshotItem(x));} }; document.location.href=('http://www.library.city.hiroshima.jp/cgi-bin/Sopcsken.sh?p_mode=1&g_mode=0&ryno=c_key=&c_date=&list_cnt=10&mad_list_cnt=&brws=ncdet&ktyp9=shk|atk|spk|kek&itfg9=c&ser_type=1&stkb=&srsl1=1&srsl2=2&srsl3=3-0&srkbs=00|10|01|11|02|12|13|21|20|30|40&lckns=01|02|03|04|05|06|07|08|09|10|11|12&tgid=tyo:010A&tkey=' + isbn[0].nodeValue);

編集用（元のコード）

var li = document.evaluate('//table/tbody/tr/td/div/ul/li/text()', document, null, 6, null);
var isbn = [];
for (var x = 0; x < li.snapshotLength; x++) {
  if (li.snapshotItem(x).nodeValue.match(/[0-9]{10}/)) {
    isbn.push(li.snapshotItem(x));
  }
}; isbn[0];
document.location.href=('http://www.library.city.hiroshima.jp/cgi-bin/Sopcsken.sh?p_mode=1&g_mode=0&ryno=c_key=&c_date=&list_cnt=10&mad_list_cnt=&brws=ncdet&ktyp9=shk|atk|spk|kek&itfg9=c&ser_type=1&stkb=&srsl1=1&srsl2=2&srsl3=3-0&srkbs=00|10|01|11|02|12|13|21|20|30|40&lckns=01|02|03|04|05|06|07|08|09|10|11|12&tgid=tyo:010A&tkey=' + isbn[0]);

Permalink | トラックバック(1) | 00:37

2008-04-23

■4Uの画像が美しすぎてPerlでプログラム組んでみた

4Uって知ってるかい？

http://4u.straightline.jp/

”世界中の美女画像を皆でシェアするソーシャルイメージブックマークサービス”

とのことさ。それはほんともう美しい画像が満載で毎日見てても飽きないわけさ。

そこでローカルに画像を保存しようと思い、ちょっくら実装してみた。


#!/usr/local/bin/perl -w

use strict;
use warnings;
use Web::Scraper;
use LWP::UserAgent; 
use Perl6::Say;
use MIME::Type;
use URI;
use Data::Dumper; sub p { print Data::Dumper::Dumper(@_) };

my $page = shift || 1000;
unless ( $page =~ /^\d+$/ ) {
    die 'perl 4u.pl [page as int]';
}

for my $i (1..$page) {
    
    my $url = sprintf 'http://4u.straightline.jp/?page=%s' , $i;
    
    say "request url>".$url;
    
    my $tmp = scraper {
        process 'ul.entry-list>li>div.entry-body>div.entry-photo>a', 'link[]' => '@href';
        process 'ul.entry-list>li>div.entry-footer>div.wrapper-entry-description>div.entry-description>p.entry-img-src', 'img[]' => 'TEXT';
        result 'link','img';
    }->scrape( URI->new($url) );
    
    my $links = $tmp->{link};
    my $imgs  = $tmp->{img};
    
    if ( ref $links ne 'ARRAY' ) {
        say "end program.";
        exit;
    }
    
    for my $link (@$links) {
        $link =~ m{/([^/]+)$};
        my $sesid = $1;
        
        sleep 1;
        
        my $image_url = shift @$imgs || next;
        $image_url = 'http://'.$image_url;
        
        say "get image url >".$image_url;
        
        my $ua = LWP::UserAgent->new;
        my $req = HTTP::Request->new(GET => $image_url);
        my $res = $ua->request($req);
        my $content = $res->content;
        my $content_type = $res->headers->header('content-type');
        my $ext = MIME::Type->new( type => $content_type )->subType || 'bin';
        
        my $write_path = './img/'.$sesid.'.'.$ext;
        
        if ( -f $write_path ) {
            say "file exsits end program >".$write_path;
            exit;
        }
        
        open my $FH, '>', $write_path;
        binmode $FH;
        print $FH $content;
        close $FH;
        
        say "write image >".$write_path;
    }
}

「それPlaggerでで・・・」モウココウハザン！ドスッ！

貴様、うるせーんだよ。

今回俺としてはWeb::Scraper使いたかったので自力実装してみますた。

使い方を試しながらだったので製作時間2時間くらいかかたお。次からはもっと短縮できそうだ。

まーがーっと書いた後に整理してないからコード自体はかなり汚ねぇのでご了承を。ふへ。

とりあえず4u.plを叩くとカレントディレクトリのimgフォルダに取得した画像を次々書き込んでいく。

ちゃんと次のページにも遷移しながらどんどんがんがん書き込んでいくのさ。

で、以前取得したことのある画像にぶつかるとそこでプログラム終了。

ちゅーかなんつってもWeb::Scraperってばスゲエよな。俺のクリオアがびんびん反応するぜ。え？クオリアだって？うっせぇ野暮なこと言うなよ。

プログラ増田のあなぐら

Permalink | トラックバック(2) | 12:36

2008-02-19

■はてなブックマークを2ちゃんねるっぽくするユーザー スタイルシート

インスパイヤ元 - http://anond.hatelabo.jp/20080219145538

@-moz-document domain("b.hatena.ne.jp") {
  ul#bookmarked_user{
    font-size: 105%;
  }
  #bookmarked_user li{
    list-style-type: decimal;
  }
  #bookmarked_user li:before{
    content: '\FF1A';
  }
  #bookmarked_user .timestamp:before{
    content: '\756A\7D44\306E\9014\4E2D\3067\3059\304C\306F\3066\306A\3067\3059\FF1A ';
    font-size: 110%;
    font-weight: bold;
    color: #008000;
  }
  #bookmarked_user img.hatena-id-icon,
  #bookmarked_user .user-tag,
  #bookmarked_user .hatena-star-comment-container,
  #bookmarked_user .hatena-star-star-container{
    display: none;
  }
  #bookmarked_user a[href*='bookmark-']:before{
    content: 'ID:';
  }
  #bookmarked_user a[href*='bookmark-']:link,
  #bookmarked_user a[href*='bookmark-']:hover{
    color: black;
    text-decoration: none;
  }
  #bookmarked_user a[href*='bookmark-']:hover{
    color: blue;
    text-decoration: underline;
  }
  #bookmarked_user span.comment{
   display: block;
   padding: 8px 1em;
   margin-left: 1.5em;
  }
}