いさぢちん日記

OppaiよりもOpera好き。

Opera Mobile 11.5.4

HoneycombでのFlash対応が修正されるとの噂だった待望のアップデートがやってまいりました。

――が。
ドジッ子おぺらたんらしく、これまた妙なバグが発生してますね。

f:id:mosshm:20120201105437j:image:w240

スクロール乱れまくりでした。

よく見ればステータスバーをOFFで使っているのに表示されているし、下の方に目をやればナビゲーションバーがめり込んでる。

で、ようやく気付きました。アドレスフィールドやサーチフィールドへフォーカスすると、たとえステータスバーが非表示でも一時的に表示され、フォーカスを外すと再度非表示になるのが通常の動作ですが、11.5.4ではこの段階で非表示に戻らないようなのです。そしてそのステータスバーの高さ分だけナビゲーションバーが下へずれてしまっているわけですね。さらに、その状態でスクロールすると上の画像のようになってしまいます。

対処法は、ステータスバーをONで利用すること。

少々不便かもしれませんがアップデートで不具合が修正されるまで待ちましょう。おぺらたんと上手く付き合うにはバグと仲良くすることが肝要です。

それでは、よいOpera Mobileライフを。

11.5.5で修正されました。

Opera Mobile 11.50のサイトごとの設定でのUA変更

@isaji Weblioをモバイル表示にしようと悪戦苦闘した結果挫折したことがあるので、もしかしたらUA変更については効かないのかもしれません。他は確かめて無いですね。

http://twitter.com/izaten/status/152299268407963648

@izaten User Agent|Spoof UserAgent ID=7でMobile UA選択時もPC表示になるので効いてるとは思うのですが、値が1の場合は効いてないような気がします。

http://twitter.com/isaji/status/152301770134134784

という事で、詳細ツールで変更できるUserAgent、DesktopとTabletの両方で、override.iniでSpoof UserAgent IDを変更した際のUAを調べてみました。

詳細ツールのUA Spoof UserAgent ID User Agent
Desktop 1 Opera/9.80 (X11; Linux zbov; U; ja) Presto/2.9.201 Version/11.50
2 Mozilla/5.0 (X11; Linux zbov; ja; rv:2.0) Gecko/20100101 Firefox/4.0 Opera 11.50
3 Mozilla/5.0 (compatible; MSIE 9.0; X11; Linux zbov; ja) Opera 11.50
4 Mozilla/5.0 (X11; Linux zbov; ja; rv:2.0) Gecko/20100101 Firefox/4.0
5 Mozilla/5.0 (compatible; MSIE 9.0; X11; Linux zbov; Trident/5.0; ja)
6 Opera/9.80 (X11; Linux zbov; U; ja)
7 Opera/9.80 (X11; Linux zbov; U; ja) Presto/2.9.201 Version/11.50
Tablet 1 Opera/9.80 (Android 3.2; Linux; Opera Tablet/ADR-1111101157; U; ja) Presto/2.9.201 Version/11.50
2 Mozilla/5.0 (Android 3.2; Linux; Opera Tablet/ADR-1111101157; ja; rv:2.0) Gecko/20100101 Firefox/4.0 Opera 11.50
3 Mozilla/5.0 (compatible; MSIE 9.0; Android 3.2; Linux; Opera Tablet/ADR-1111101157; ja) Opera 11.50
4 Mozilla/5.0 (Android 3.2; Linux; ADR-1111101157; ja; rv:2.0) Gecko/20100101 Firefox/4.0
5 Mozilla/5.0 (compatible; MSIE 9.0; Android 3.2; Linux; ADR-1111101157; Trident/5.0; ja)
6 Opera/9.80 (Android 3.2; Linux; Opera Tablet/ADR-1111101157; U; ja)
7 Opera/9.80 (Linux; U; ja) Presto/2.9.201 Version/11.50

Tablet(Android 2.xの場合はMobile)を選択した場合、override.iniでDesktopに偽装することは可能だけれど、Desktopを選択しているとpoof UserAgent IDの値は1-7いずれにおいてもTablet(Mobile)に偽装することは出来ないようです。

普段は詳細ツールでDesktopを選択し、煩わしいスマホ表示を回避しつつ、モバイル向け表示のほうが見やすいサイトに限ってはoverride.iniでMobileに偽装する、という使い方をしたかったのですが、無理でした。

なお、自由にUser Agentを変更可能なUserPrefs|Custom User-Agentはoverride.iniでは使えませんでした。

新はてブのレイアウトのこと

こちらのUserCssを見て、やっぱり2カラムがいいなー、と思った。でも、自分は「よく見るブックマーク」は表示させたいなぁ。【新はてブUserCSSを書いた - いさぢちん日記】 http://t.co/cFdIB9fS

http://twitter.com/akizuki_b/status/140493193392304128

消してる右カラムをfloat:right;してセンターはposition:absolute;のleft:0px;してマージンを調整すれば、2カラム可変で両サイドカラムを右にまとめた感じになるけど、今おふとんの中でCSS書きながらOpera Mobileで確認しただけなのでアレ。

http://twitter.com/isaji/status/140519395037429760

というわけで。
f:id:mosshm:20111127132547p:image

横幅が決まっているOpera Mobileならうまいこといったんだけど、Desktop Operaで確認したら横幅を狭めると#right-containerがカラム落ちどころか行方不明になるので諦めた。

だれか頼む。

というか3カラムソリッドレイアウトを止めてください、はてなさん。

新はてブのUserCSSを書いた

3カラムで横幅固定だと見にくいので。

/*新はてブレイアウト対策*/
.wrapper-container-inner {
	width:100%!important;
	padding-left:0!important;
}
.wrapper-container-inner.left-column-line {
	background-image : none!important;
}
#left-container {
	float:right!important;
	width:200px!important;
}
#center-container {
	width:auto!important;
	float:none!important;
	margin-right:200px!important;
	margin-left:0!important;
}
#right-container {
	display:none!important;
}

左カラムの横幅を広げて右に配置し、今のところ重要な情報がほとんど無い右カラムは削除、中央カラムの横幅を非固定に。

コメントを一行にしたい場合は

/*新はてブ一行コメント*/
ul.main-entry-list .header {
	display: inline!important;
}
ul.main-entry-list img.profile-image {
	width:16px!important;
	height:16px!important;
	margin-left:-30px!important;
}
.main-entry-list .entry-comment .entry-comment-fold .profile-image {
	margin-left:0px!important;
}

例としてこんな感じ。アイコンを小さくし、表示位置を微調整しています。

編集、削除ボタンの並びが縦なので、コメント表示を一行にすると隠れてしまうため、横並びにする。

/*編集削除ボタンを横並びに*/
.inplace-delete-icon,
.inplace-edit-icon {
	position:static!important;
	float:right!important;
}

こんな感じで。

ヘッダが横幅固定のため、ウインドウサイズを大きくすると中央寄りになってしまい気持ち悪いので

/*ヘッダ修正*/
#header-body {
	width:auto!important;
	min-width:0px!important;
	margin-left:10px!important;
	margin-right:10px!important;
}

横幅を修正。

f:id:mosshm:20111125203853j:image