iPad 独特の CSS トラブルに javascript で対策してみました。
iPad(MobileSafari) だとこんなことがトラブルんだな、という
珍しい問題を見つけたので
簡単に対策しつつ
レポしたいと思います。
HTML + CSSデザインの話ですので
Web に詳しくない方、以下はおもしろくありません。あしからず。
------------------------------------------------
CSSデザインを行う際、
テキストを箱で囲み、
その背景画像の大きさとテキストをバランスよく配置しつつ
しかしテキストの分量は可変で考えたい場合
こういう手法を取ることがあります。
（文字の分量が増減するテキストの背景を指定する方法）
文字列の箱にでかい背景画像を指定するのではなく
箱をあえて二つの div に小分けし
別々の背景画像を充当する方法です。
増減する部分を {background-repeat : repeat-y;} と指定すれば
背景の画像を細い短冊状にしてデータを軽くできますし
ブラウザのバージョンやクライアント（MacとWindowsの）毎に文字の行数などが変わる場合も
デザインを一貫させることが可能になります。
Windows7 の IE9 や Firefox、Mac の Safari で確認する限り、
これはうまくいってます。定石ですし。
が、しかし iPad では
こんな表示になってしまいました。
（線が出た！）
なんと div と div の間に黒い線、つまり「隙間」ができてしまったのです。
繰り返しになりますが、
Windowsパソコンや Macの液晶画面では現れていない隙間です。
こりゃいかん。
...ということで
理由をあれこれ考えたのですが
おそらく「iPad 特有のピンチ処理（拡大縮小）に依存しているのでは」
と考え
指でびーっと拡大してみたところ
（ほらね）
隙間が消えた！のです。
おそらく
「iPad が div をレンダリングして配置する際、
画面の拡大率によって
割り算の切り上げ・切り捨ての違いが生まれ、
１ピクセル程度の隙間が
現れたり消えたりする」
ということのようです。
拡大や縮小をすれば微妙にデザインが崩れる
ことはiPad(MobileSafari) の仕様といえなくもないので
あきらめようかという気にもなりますが
どうしても僕が気になったのは
「拡大縮小をする前、つまり
iPad でこのWebサイトにアクセスして
一発目の表示なのに隙間が生まれている」
ということ。
こんなデザインにしたんだ、と思われるのはなんか気持ちわるいです。
そこで、対策するため javascript で 次のようなコードを書きました。
function show_divheight(){
var h1;
var h2;
var targetDiv;
targetDiv = document.getElementById("content");
h1 = targetDiv.clientHeight; /* div の描画時の縦幅ピクセルを取得 */
h2 = Math.round(h1/10) * 10; /* １の位を四捨五入 */
alert("h1 = "+ h1 + " / h2 = " + h2);
}
…どういうことかというと、
HTML がクライアント環境にダウンロードされ、
描画処理されて表示された、そのときの
div の縦サイズ(pixel数）を
DOM 操作で取得しようと考えたのです。
「iPad が算出した div の描画サイズの一桁目が
中途半端な数字になっている場合、
割り算が上手くいかないのではないか」という
仮説をたてたわけです。だから四捨五入でもしてやろうかと。
このjs を走らせたところ
まず Windows7 の IE9beta では 縦が 1370px と表示されました。
ところが iPad ではこうなったのです。
（h1がそのままの数字、h2が四捨五入の数字）
１４９１ピクセル。なんと中途半端。
そりゃー iPad も困るわな...
ということで、１の位は四捨五入し、
クライアントにダウンロードされた後 div の表示サイズを指定してやると
（具体的にはさっきの関数にこんな一行を加えただけ）
$("#content").css("height", h2);
…こうなりました。
（線が消えた～）
ということで
マニアックな話題ですが
iPad の、というか拡大縮小機能を有するタブレット全般の？
CSSトラブル対策でした。
珍しい問題を見つけたので
簡単に対策しつつ
レポしたいと思います。
HTML + CSSデザインの話ですので
Web に詳しくない方、以下はおもしろくありません。あしからず。
------------------------------------------------
CSSデザインを行う際、
テキストを箱で囲み、
その背景画像の大きさとテキストをバランスよく配置しつつ
しかしテキストの分量は可変で考えたい場合
こういう手法を取ることがあります。
（文字の分量が増減するテキストの背景を指定する方法）
文字列の箱にでかい背景画像を指定するのではなく
箱をあえて二つの div に小分けし
別々の背景画像を充当する方法です。
増減する部分を {background-repeat : repeat-y;} と指定すれば
背景の画像を細い短冊状にしてデータを軽くできますし
ブラウザのバージョンやクライアント（MacとWindowsの）毎に文字の行数などが変わる場合も
デザインを一貫させることが可能になります。
Windows7 の IE9 や Firefox、Mac の Safari で確認する限り、
これはうまくいってます。定石ですし。
が、しかし iPad では
こんな表示になってしまいました。
（線が出た！）
なんと div と div の間に黒い線、つまり「隙間」ができてしまったのです。
繰り返しになりますが、
Windowsパソコンや Macの液晶画面では現れていない隙間です。
こりゃいかん。
...ということで
理由をあれこれ考えたのですが
おそらく「iPad 特有のピンチ処理（拡大縮小）に依存しているのでは」
と考え
指でびーっと拡大してみたところ
（ほらね）
隙間が消えた！のです。
おそらく
「iPad が div をレンダリングして配置する際、
画面の拡大率によって
割り算の切り上げ・切り捨ての違いが生まれ、
１ピクセル程度の隙間が
現れたり消えたりする」
ということのようです。
拡大や縮小をすれば微妙にデザインが崩れる
ことはiPad(MobileSafari) の仕様といえなくもないので
あきらめようかという気にもなりますが
どうしても僕が気になったのは
「拡大縮小をする前、つまり
iPad でこのWebサイトにアクセスして
一発目の表示なのに隙間が生まれている」
ということ。
こんなデザインにしたんだ、と思われるのはなんか気持ちわるいです。
そこで、対策するため javascript で 次のようなコードを書きました。
function show_divheight(){
var h1;
var h2;
var targetDiv;
targetDiv = document.getElementById("content");
h1 = targetDiv.clientHeight; /* div の描画時の縦幅ピクセルを取得 */
h2 = Math.round(h1/10) * 10; /* １の位を四捨五入 */
alert("h1 = "+ h1 + " / h2 = " + h2);
}
…どういうことかというと、
HTML がクライアント環境にダウンロードされ、
描画処理されて表示された、そのときの
div の縦サイズ(pixel数）を
DOM 操作で取得しようと考えたのです。
「iPad が算出した div の描画サイズの一桁目が
中途半端な数字になっている場合、
割り算が上手くいかないのではないか」という
仮説をたてたわけです。だから四捨五入でもしてやろうかと。
このjs を走らせたところ
まず Windows7 の IE9beta では 縦が 1370px と表示されました。
ところが iPad ではこうなったのです。
（h1がそのままの数字、h2が四捨五入の数字）
１４９１ピクセル。なんと中途半端。
そりゃー iPad も困るわな...
ということで、１の位は四捨五入し、
クライアントにダウンロードされた後 div の表示サイズを指定してやると
（具体的にはさっきの関数にこんな一行を加えただけ）
$("#content").css("height", h2);
…こうなりました。
（線が消えた～）
ということで
マニアックな話題ですが
iPad の、というか拡大縮小機能を有するタブレット全般の？
CSSトラブル対策でした。
商業音楽の歌詞はあなたたちを映す鏡です。
Ｊ－ＰＯＰの歌詞のボキャブラリーが貧弱だ、という
２ちゃんねるのスレッドが話題になっているらしい。
そのスレッドはこちら
ＪＡＳＲＡＣに預かられている作詞家の端くれとして
言わせてもらいたいです。
Ｊ－ＰＯＰの歌詞の中身は
そのまま
Ｊ－ＰＯＰのリスナーの欲求を反映しているということでしかない。
つまり
Ｊ－ＰＯＰを消費する若者が望む表現は何か
毎日それを模索し続ける
商業音楽の作詞家たちが
長い時間をかけて技を磨き
ステレオタイプな言葉使いに収斂させていっただけの話。
プアな言葉使いは経験・努力のたまもの。
プロとはそういうもの。
１９７０年代の歌謡曲に
そうとうぶっとんだ歌詞の作品が多く見られたとしたら
その原動力は
当時の若者が持っていた
「差別化・多様性への活力」を反映している。
海外旅行や外車の購入に意欲的な若者が
多彩な表現を受け入れ、育てていった。
「飛んでイスタンブール」なんて
それこそとんでもないタイトルの曲が大ヒットしたりしていた。
世相。世代。それだけ。
僕が青春を謳歌した８０年代には
尾崎豊が校舎の窓ガラスを割ったり
バイクを盗んで走り出したりするわけですが
そして
それを普通の感覚で感動していた高校生の僕がいたりするわけですが
よくよく考えれば
明治や大正、昭和も戦後まもなくして育った世代から見れば
つまり
「教育を受けたくても受けられない悲しみ」
「学校に通える喜び」に満ちた
貧困を知る世代なら
整備されたリッチな教育環境から単に逃げて自由になろうとする
尾崎豊の戯れ言など相手にしないだろうと思われる。
そういうもんじゃないですか？
流行歌なんですから。
僕が僕より前の世代のヒット曲「飛んでイスタンブール」を
おいおい、そりゃ流行らないよと
バカにするのと同じ理屈で。
つまり
昨今のＪ－ＰＯＰの歌詞がプアなら
それは
すべて
すべて君たちのことなんだよ、と。
商業音楽は鏡なんだよ、と。
作詞家なんて
そんなもんですよー、と。
おわりです。
２ちゃんねるのスレッドが話題になっているらしい。
そのスレッドはこちら
ＪＡＳＲＡＣに預かられている作詞家の端くれとして
言わせてもらいたいです。
Ｊ－ＰＯＰの歌詞の中身は
そのまま
Ｊ－ＰＯＰのリスナーの欲求を反映しているということでしかない。
つまり
Ｊ－ＰＯＰを消費する若者が望む表現は何か
毎日それを模索し続ける
商業音楽の作詞家たちが
長い時間をかけて技を磨き
ステレオタイプな言葉使いに収斂させていっただけの話。
プアな言葉使いは経験・努力のたまもの。
プロとはそういうもの。
１９７０年代の歌謡曲に
そうとうぶっとんだ歌詞の作品が多く見られたとしたら
その原動力は
当時の若者が持っていた
「差別化・多様性への活力」を反映している。
海外旅行や外車の購入に意欲的な若者が
多彩な表現を受け入れ、育てていった。
「飛んでイスタンブール」なんて
それこそとんでもないタイトルの曲が大ヒットしたりしていた。
世相。世代。それだけ。
僕が青春を謳歌した８０年代には
尾崎豊が校舎の窓ガラスを割ったり
バイクを盗んで走り出したりするわけですが
そして
それを普通の感覚で感動していた高校生の僕がいたりするわけですが
よくよく考えれば
明治や大正、昭和も戦後まもなくして育った世代から見れば
つまり
「教育を受けたくても受けられない悲しみ」
「学校に通える喜び」に満ちた
貧困を知る世代なら
整備されたリッチな教育環境から単に逃げて自由になろうとする
尾崎豊の戯れ言など相手にしないだろうと思われる。
そういうもんじゃないですか？
流行歌なんですから。
僕が僕より前の世代のヒット曲「飛んでイスタンブール」を
おいおい、そりゃ流行らないよと
バカにするのと同じ理屈で。
つまり
昨今のＪ－ＰＯＰの歌詞がプアなら
それは
すべて
すべて君たちのことなんだよ、と。
商業音楽は鏡なんだよ、と。
作詞家なんて
そんなもんですよー、と。
おわりです。