2007-11-05

EM ONE の Opera Mobile で User CSS を使うそのいち

おもちゃオタ PC

庭 | 071231

ノヴム・オペラヌム：Opera MobileでUser CSSを使う
- http://my.opera.com/Watanabe/blog/show.dml/285343

↑のとおりにやってみたら使えた。おもしろかった。おわり。

2007-11-05

EM ONE の Opera Mobile で User CSS を使うそのに

おもちゃオタ PC

上記のとおり、とりあえずユーザ CSS が使えることは確認できた。で、やったーユーザ CSS が使えるぜーこれでいろんなインターネットのブログサイトとかを好き勝手に表示いじって見やすくできるぜー、あと糞うざったい新デザインになってからますます使いづらくなったといってもべつに旧デザインの時代からまともに表示できてなかったんだからどちらかといえば新デザインのおかげでユーザ CSS で好き勝手いじれてハッピーな mixi とかもまともに表示してやれるぜー、とか意気込んだんだけどダメだなこれはどうも。というのも、

おれがユーザ CSS で可読性を上げたいようなサイトっていうのは、元々情報量が多くてモバイル環境では読みづらいようなページ。
- 縦画面モードで読みやすいというのは 1 カラム制のサイトだけといってよい。複数カラムが並列表示されるサイトは全部読みづらい（3 カラム横並びのサイトなど読めたものではない）。横幅を取れない場合段組を崩して表示するようになってるサイトなら、まだやりようはあるかんじ。
そういうサイトは、読み込みにも表示にも時間がかかりがち。
ユーザ CSS は、一旦そのページの内容が全部表示され終わってから、改めて適用される。
ということは、十分な時間待って表示されたあとから、ようやく読みやすくカスタマイズされた表示に切り替わるというわけだが、この「待ってる時間」が長すぎるので、あんまり問題が解消されない（面倒になってユーザ CSS 適用前に結局ページを閉じてしまう）。
- 画像や Flash など含めて全部。ということは、そのままの状態でも読もうとする場合「画像などは展開中だけど一応基本的なレイアウトはだいたい決まってる」時点からスタートだが、ユーザ CSS の適用を待とうとした場合、画像など含めた全部のファイルの読み込みが終わってからようやくスタートということになる。
- とくに読む気がもともとないようなバナー広告などの展開に時間がかかってしまうことが多いので、なんか納得いかない度がタカマレタカマルタカマルレー。

というか、そもそもいい具合のユーザ CSS を書くこと自体が面倒。調べればどうにかなるんだろうけどたるい。だれか d.hatena.ne.jp 全体適用とかで EM ONE 縦画面表示に最適化したいいかんじ CSS とかかいてくれんかのー。もちろんサイドバーとか全部要らんし /mobile というほどシンプルでもないけど読みやすくタッチ操作に適している、というようなかんじの。素直に /mobile のほうの装飾を強化する方向で考えたほうが面倒がなくていいかなー。ていうかいまのところ「つくってよかったユーザ CSS」的な感覚って、ひとの Tumblr のモバイル版に line-height : 1.5em ; text-align : right ; て付け加えた一件だけなんだよね。携帯版なので行が詰まってて読みづらかったのと、あと左寄せの「next」が押しづらかったので右寄せにした、というだけの。

2007-11-05

EM ONE の Opera Mobile で使っているスタートページのサンプル

おもちゃオタ PC

Opera で常時開きっぱなしにして使っているスタートページ（http://d.hatena.ne.jp/matakimika/20071001#p2）について、ばらばらと個別に「サンプル貰ってカスタマイズするのでソースくれ」と何件か言われたりしたので、もしかして需要でもあるのか？と思ったので一応公開。あんまひとにお見せできるような状態ではないのだがアレだ。あと HTML チェッカにかけたらものすごい勢いで色々怒られたので直した。でも「target とかいまどき流行らねえんだタコ」と「アンカーに何度も同じ文字列使うなボケ」に関してはスルーした。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>■</title>
<style type="text/css">
<!--
body	{
	background    :  #fff ;
	font-family   :"arial";
	margin        : 200 0 200 0 ;
	padding       :     0 ;
	}

h1      {
	text-align    : right ;
	padding       : 0.5em ;
	padding-bottom:     0 ;
	border-bottom : solid 1px #449 ;
	}

ul	{
	list-style    :  none ;
	line-height   : 2.8em ;
	text-align    : right ;
	margin        : 0 50 0 0 ;
	padding       :     0 ;
	}
ul a	{
	padding       : 0.5em ;
	border        : solid 1px #449 ;
	}

.google	{ width : 75% ; height : 2em ; padding : 0.4em ; }
.search	{ width : 25% ; height : 2em ; padding : 0.4em ; }

a	{ color : #000 ; text-decoration : none ; }
a.mb	{
	margin-left   : -0.2em ;
	padding-left  : 0.9em ;
	padding-right : 0.9em ;
	}
a:hover	{ background : #449 ; color : #fff ; }

-->
</style>
</head>

<body>

<!-- 基本形 -->
<h1>example</h1>
<ul>
	<li>
	<a target="_blank" href="http://example.com/">example</a>
	<a target="_blank" class="mb" href="http://example.com/mobile">mb</a>
	</li>
</ul>

<!-- たとえばこんなかんじで使う  -->
<h1>Status</h1>
<ul>
	<li>
	<a target="_blank" href="http://twitter.com/account/archive">archive</a>
	<a target="_blank" class="mb" href="http://movatwitter.jp/user/なんかユニークな文字列/log">MovaTwitter</a>
	<a target="_blank" class="mb" href="http://movatwitter.jp/user/なんかユニークな文字列/replies">Reply</a>

	</li>
	<li>
	<a target="_blank" href="http://live.xbox.com/ja-JP/profile/Friends.aspx">MyXbox</a>
	<a target="_blank" href="http://mixi.jp/home.pl">mixi</a>
	</li>
</ul>

<h1>Search</h1>
<ul>
	<li>
	<!-- Google  -->
	<form method=get action="http://www.google.co.jp/search" target="_blank"><input class="google" type=text name=q size=28 maxlength=255 value=""><input type=hidden name=ie value="Shift_JIS"><input type=hidden name=oe value="Shift_JIS"><input type=hidden name=hl value="ja"><input class="search" type=submit name=btnG value="Google"></form>
	<!-- Google -->
	</li>
	<li>
	<a target="_blank" href="http://www.archive.org/web/web.php">web.archive</a>
	<a target="_blank" href="http://dictionary.goo.ne.jp/">dictionary</a>
	<a target="_blank" href="http://www.excite.co.jp/world/">translation</a>
	</li>
</ul>

<h1>killtime</h1>
<ul>
	<li>
	<a target="_blank" href="http://buzztter.com/ja">Buzztter</a>
	<a target="_blank" href="http://mao.s151.xrea.com/tumbrowser/">Tumbrowser</a>
	</li>
	<li>
	<a target="_blank" href="http://ninjinel.sakura.ne.jp/wolf/index.rb">WolfBBS</a>
	<a target="_blank" href="http://wolfbbs.jp/%C4%B6%A4%AA%A4%B9%A4%B9%A4%E1%A5%ED%A5%B0.html">best bout</a>
	</li>
	<li>
	<a target="_blank" href="http://zian.org/cgi-bin/nfa/list.cgi?h=0&lm=100&r=1&kw=&ngw=">zian.org</a>
	<a target="_blank" href="http://zian.org/cgi-bin/game/list.cgi?h=0&lm=100&r=1&kw=&ngw=">__game</a>
	<a target="_blank" href="http://203.138.211.206/cgi-bin/vote+/list.cgi?lm=100&h=0&r=1">zianplus.net</a>
	<a target="_blank" class="mb" href="http://203.138.211.206/cgi-bin/vote+/ilist.cgi?lm=50&h=0&r=2&kw=&ngw=">mb</a>
	</li>
</ul>

<h1>id:sample</h1>
<ul>
	<li>
	<a target="_blank" href="http://b.hatena.ne.jp/sample/">H::Bm</a>
	<a target="_blank" class="mb" href="http://b.hatena.ne.jp/sample/mobile">mb</a>
	<a target="_blank" href="http://d.hatena.ne.jp/sample/">H::Diary</a>
	<a target="_blank" class="mb" href="http://d.hatena.ne.jp/sample/mobile">mb</a>
	</li>
	<li>
	<a target="_blank" href="http://www.example.com/">EXAMPLE</a>
	<a target="_blank" href="http://r.hatena.ne.jp/sample/">H::RSS</a>
	<a target="_blank" class="mb" href="http://r.hatena.ne.jp/sample/mobile">mb</a>
	</li>
</ul>

<h1>EM ONE</h1>
<ul>
	<li>
	<a target="_blank" href="http://emobile.jp/">Official</a>
	<a target="_blank" href="http://hikaku.fxtec.info/emonewiki/">EM ONE Wiki</a>
	</li>
</ul>

</body>
</html>

そもそも EM ONE で消費できるコンテンツの量を増やしていかないとアレかなー。人狼 BBS のログとかちょうどいい具合の横幅で読めるのでよさげだから、一応ブックマークしてんだけど、まだ実際読んでみてない。

matakimika@hatenadiary.jp

WELCOME TO MY HOME PAGE(Fake) ! LINK FREE ! Sorry, Japanese only. 私のホームページへようこそ！

EM ONE の Opera Mobile で User CSS を使うそのいち

EM ONE の Opera Mobile で User CSS を使うそのに

EM ONE の Opera Mobile で使っているスタートページのサンプル