ひまつぶし雑記帖

iPhone Android スマホ対応(?)HTML

2011/6/20 [20:13:11] (月) 天気

なんもしてない困った状態だし、「趣味は読書2」のテコいれでもやるか、と。スマホでも見られるようなページを作ってみた。
グーグルさまで5分ほど調べたところ、どうやら

横幅320pxでレイアウトデザインしておけば、まず大丈夫

らしい。
まあ、ただちにレイアウトが崩れることもなさそうだし、一定のめどがつくまでは320pxで、ということか。すでにデータの出し入れする部分のライブラリは作ってあるんで、そこは使いまわし。表示部分だけを新規に作る、という感じ。ひとつのソースで横幅に応じてレイアウトが変わる、というのが今後は主流だろうと言われてるけど、暑いし蒸すしよくわからないんで、USER_AGENTで振り分ける。

改めて、ケータイサイトとかブログとか、あちこち覗いてみたけど、よくもまあこんな小さな解像度にきちっときれいにレイアウトデザインしてるなあ、と真面目に感心してしまった。
ページ内に飛び先が多いと起点がわからなくなって、そのうちページ移動するのが面倒になる・使いにくいサイトになる。横幅320に詰め込むとそれがますます顕著。なので、見た限り、シンプルで、リンク領域も分かりやすいサイトが多かった。ページ内の情報は、文章なら全部じゃなくて、キャッチのみをまず見せて全容をそこで把握できるようにして、個々の詳細へ誘導する、てな作りか。

といったことを踏まえつつ、どうせなら、流行のHTML5で構成してみた。「趣味は読書2」スマホ版 http://doncha.net/sp/

…レイアウトデザインはやっぱり難しい。データうんぬん、プログラムのところは決め事があるのでそのとおりにやればどうにでもなるけど、「見た目」のところは決め事がないので面倒。HTML5は効果・表現が増えてますます、「見た目」のところにコストがかかりそう。…って、実際は、ただ声がデカイ人間のゴリ押しで決め事ができるんだけど。


[06/29 11:42:38]
てなこと書いてたけど、jquery.mobile を使えば簡単に移植できる。

「jquery mobileがあれば簡単スマホ対応」 http://t2aki.doncha.net/?id=1338631302

 

»電子書籍制作代行についてはこちら

昨日はバタンキュー(死語)

2011/5/10 [16:01:42] (火) 天気

週末に処方された薬のせいかどうかはともかく、体調がひどくて、昨日はフラフラ眩暈がする上に吐き気も胸元にあって、メシを食ったらもう転がるだけだった。皮膚もかさかさひりひりで、抗生物質がいやな感じで影響してるようなしてないような、だった。久しぶりに、くるくるバタンキュー状態で驚いた。
とりあえず、今日はどうにか昨日ほどではなく。

サイトをいじっていて、はたと気づく、今さら。
アマゾンのデータを使うには、アマゾンへのリンクが規約上必要だった(あやふや)。
そりゃそうだよねえ。無償でデータを提供してくれているワケじゃない。送客しないとダメだろ。てことで、趣味は読書2 http://doncha.net/ のDBに急遽amazonアソシエイトのトラッキングIDを仕込むためのテーブルを追加して、ユーザーさんがアマゾンのアフィリエイトIDを持っていればそれをリンクに、持ってなければわたしのアフィリエイトIDをリンクに仕込むようにした。
アマゾンはこうやって、こんなどうでもいい小さなところからも客を獲得していくんだなあ、と改めてしみじみと。適当な囲い込みとオープンな仕組みのバランスがいいんだろうか。

既知のバグ。IEだとAjax表示のコンテナがうまく高さを親に伝えてくれない。CSSの書き方の問題だと思うんだけど、解決できない。面倒なんでこれもJavascriptで判定を入れて、親を引き伸ばすようにした…ダメなやり方なのは100も承知のすけ。とほほ。
1億5千万回いっちゃうけど、同じソースを食わして、表示が違うってありえんだろ。ちくそお。

 

»電子書籍制作代行についてはこちら

案の定、IE8のバグだった

2009/12/14 [22:28:50] (月) 天気

アクセスログに残る、404エラー。ありえないURLを要求してくるんだから当たり前。HTMLの一部をブラ下げてるのだ。

などなど。どこをどうすればこんなURLを組み立ててきやがるんだ、と。

いろいろ検索クエリを変えて、「IE8 バグ リクエスト」で、ようやくヒット。
http://bluewatersoft.cocolog-nifty.com/blog/2009/10/ie8-lookahead-d.html
IE8の中途半端な先読み機能がこんなマヌケなことを引き起こす、らしい。なんじゃそりゃ。てか、うんざり。上記記事によるとxhtmlのサイトは軒並み被害に遭いそう。(てのはちょっと違うけど、HTMLの規格で行くという話だ。結局xhtmlって規格企画倒れだったんかなあ)
面倒だから対応しない。仕事でやってるサイトならともかく、辺境の地だ、IEは確認動作環境から外してしまうか。

twitterのタテ表示、たてたったー、が予想以上に面白い、おれ様だ。
ttp://www.holeinthewall.jp/~butch/zakki/tatetatter.pl
スタイルシートを調整してちょっとは見やすくなった、かも。javascriptを使って、記入時にタテ表示の確認ができるなら、面白くなりそうなんだけど、そんなスキルはないのがとても残念。

 

»電子書籍制作代行についてはこちら

IE8で表示がバグってた

2009/11/8 [12:16:58] (日) 天気

読書SNSの本棚のタブメニューがIE8で表示バグ。いや、気づいてたんだけど、IEなんてもうイラね、と放置。
image 
タブメニューが4つほどあって、その各々でやることが違う=コンテンツ量が違うので、コンテンツ部分のdiv要素の高さが違う。
これをjavascriptで display:block noneを切り替えるわけだが。
FireFox、Safari、IE7は意図どおり、コンテンツ部分の高さに合わせて、親要素の高さを広げてくれるんだけど、IE8はコンテンツ部分の高さを広げてくれない。ケイ囲み(親要素)からべろ~んとコンテンツがはみ出してみっともないったらありゃしない。floatした子要素の高さを親要素に伝えるためのハックをスタイルシートには適用してあるんだけど、なんでやねん、と。ごそごそスタイルシートをいじったりHTMLに直接styleを埋め込んでみても、ちっともいうことを聞きやがらず、すっかり放置だった。

朝から団地の掃除、イトーヨカドーの特売、と地域密着活動の合間を縫って、見直してみた。結果。
javascriptで切り替えるときに、親要素もいじれば意図どおりになった。
id.style.display='none'
id..parentNode.style.display='none'
id..parentNode.style.display='block'
id.style.display='block'
IE8はけっこうまともという話なので、本来こうすべきところ、なのかな。

ちなみに、
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
こんなのヘッダに入れると強制的にIE7互換表示モードにしてくれるんだけど、このIE7互換がいい加減っぽくて、本当のIE7と表示が違ってたりするんで困ったちゃんでした。

 

»電子書籍制作代行についてはこちら

スクロールバーでセンタリングがズレる

2009/3/20 [10:05:40] (金) 天気

~butch/zakki/ 以下は同じフレーム同じ雛形なのに、FireFoxで見てると、ページによってはセンタリングがずれてページがピコっと動くことがあって、気持ち悪かった。cssを疑ってピクセル指定しなおしたりしても変わらず。
ググれ、カス。
だった。検索したらあっさり見つかった。

FireFoxなど、タテスクロールが起こる場合にだけスクロールバーが現れるので、スクロールバーの幅の分横幅が変わって、センタリングのやり直しになるから、ズレる。なので、最初からどのページもスクロールバーが出てればいい、らしい。定番は以下。
html {} に、height:100% margin-bottom:1pxを指定して常にスクロールバーを出させる。

いろいろあるもんだ。

»電子書籍制作代行についてはこちら

あー。また、IE6のアレだ

2009/1/14 [23:52:00] (水) 天気

腐れIEだ。
zoom:1
とか。

<!--[if IE 6]>
 <link rel="stylesheet" href="./css/ie6.css" type="text/css" media="screen,projection,print" />
<![endif]-->

とっとと退場しくされ。

なんとか今月末にはリニューアルしようと思って、バグ取りやってんのに、こんなどーでもいいところに割く時間とか労力とか1ミリもねえぞ。ちくそお。

MSの生産物にはうんざりさせられることばかり、だ。

»電子書籍制作代行についてはこちら

profile

profile

 
doncha.net
名前:
飯田哲章
mail:
t2aki@mrh.biglobe.ne.jp
twitter:
t2akii

WEBサービス制作/電子書籍制作

検索
<<2020/4>>
   1234
567891011
12131415161718
19202122232425
2627282930

リンク

WINDOWS版サウンドノベル
おかえりください PC WINDOWS版サウンドノベル
『おかえりください』体験版

iPhone電子書籍アプリ
小説同人誌Select iPhone電子書籍アプリ
『小説同人誌Select』

[3 Page]« »
1 2 3

TOTAL:2887

2020 (9)
1 (2)
2 (6)
4 (1)
2019 (17)
1 (3)
2 (4)
3 (2)
4 (2)
5 (1)
6 (1)
8 (1)
10 (1)
12 (2)
2018 (21)
1 (3)
2 (2)
3 (2)
4 (1)
5 (1)
6 (6)
8 (1)
9 (1)
10 (2)
12 (2)
2017 (32)
1 (2)
2 (1)
4 (2)
5 (1)
6 (6)
7 (3)
8 (5)
9 (3)
10 (2)
11 (2)
12 (5)
2016 (41)
1 (5)
2 (5)
3 (2)
4 (3)
5 (4)
6 (6)
7 (2)
8 (2)
9 (3)
10 (1)
11 (4)
12 (4)
2015 (99)
1 (11)
2 (12)
3 (9)
4 (6)
5 (8)
6 (8)
7 (3)
8 (5)
9 (16)
10 (6)
11 (1)
12 (14)
2014 (112)
1 (16)
2 (5)
3 (6)
4 (12)
5 (16)
6 (19)
7 (9)
8 (6)
9 (4)
10 (8)
11 (6)
12 (5)
2013 (145)
1 (24)
2 (15)
3 (18)
4 (23)
5 (14)
6 (11)
7 (7)
8 (11)
9 (5)
10 (4)
11 (6)
12 (7)
2012 (103)
1 (1)
2 (1)
3 (4)
4 (3)
5 (7)
6 (26)
7 (17)
8 (5)
9 (8)
10 (10)
11 (11)
12 (10)
2011 (54)
1 (4)
3 (7)
4 (4)
5 (14)
6 (6)
7 (3)
8 (3)
9 (1)
10 (4)
11 (2)
12 (6)
2010 (70)
1 (12)
2 (7)
3 (6)
4 (6)
5 (3)
6 (10)
7 (6)
8 (4)
9 (3)
10 (4)
11 (3)
12 (6)
2009 (144)
1 (15)
2 (12)
3 (12)
4 (6)
5 (15)
6 (6)
7 (10)
8 (9)
9 (17)
10 (12)
11 (14)
12 (16)
2008 (148)
1 (10)
2 (6)
3 (10)
4 (11)
5 (13)
6 (10)
7 (13)
8 (19)
9 (18)
10 (12)
11 (13)
12 (13)
2007 (106)
1 (7)
2 (5)
3 (3)
4 (7)
5 (5)
6 (9)
7 (8)
8 (13)
9 (18)
10 (11)
11 (8)
12 (12)
2006 (158)
1 (28)
2 (28)
3 (25)
4 (7)
5 (9)
6 (7)
7 (12)
8 (13)
9 (10)
10 (7)
11 (6)
12 (6)
2005 (350)
1 (31)
2 (26)
3 (26)
4 (27)
5 (29)
6 (30)
7 (32)
8 (30)
9 (30)
10 (32)
11 (29)
12 (28)
2004 (292)
1 (24)
2 (24)
3 (29)
4 (27)
5 (28)
6 (25)
7 (26)
8 (24)
9 (12)
10 (19)
11 (26)
12 (28)
2003 (318)
1 (22)
2 (25)
3 (21)
4 (28)
5 (28)
6 (28)
7 (28)
8 (29)
9 (26)
10 (29)
11 (28)
12 (26)
2002 (317)
1 (29)
2 (26)
3 (26)
4 (25)
5 (28)
6 (30)
7 (27)
8 (21)
9 (25)
10 (27)
11 (28)
12 (25)
2001 (277)
1 (17)
2 (21)
3 (23)
4 (20)
5 (31)
6 (18)
7 (26)
8 (25)
9 (29)
10 (19)
11 (24)
12 (24)
2000 (53)
6 (9)
7 (4)
8 (2)
9 (3)
10 (1)
11 (15)
12 (19)
1999 (3)
7 (1)
10 (2)
1998 (18)
9 (9)
10 (7)
11 (2)