ダリの雑記：WEBプログラム版

metaタグのviewportの設定にて、「target-densitydpi=device-dpi」とすると、表示する解像度がそのままデバイスの解像度となります。

スマホの横幅（短辺）のサイズが640px時代だったら、これでも特に問題なかったんですが、今や1080pxや1280pxなんて機種も登場しています（横幅がですよ！）。

この高解像度スマホの場合、問題となるのがSNSのボタン（「いいね」とか「ツイート」とか「Google +」ボタン）

これがめっちゃ小さくなります。米粒レベル。

サンプル（高解像度のスマホをお持ちの方は下記のURLにアクセスしてみてください）：
https://nandani.sakura.ne.jp/phptest/sns_button.php

これらはボタン専用コードを埋め込んでおくと、自動的に表示されるボタンため、スタイルシートによるサイズ調整ができません。

これの解決方法は「target-densitydpi= medium-dpi」にするか、「target-densitydpi」をそもそも記述しない（デフォルトがmedium-dpiだから）

もし解像度によってスタイルシートを切り替えている場合は、サイズの基準が変わりますので注意しましょう。

もしくは、width=320とする手もあります（もはや古いやり方らしいですが。）

<meta name="viewport" content="width=320, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

サンプル：
https://nandani.sakura.ne.jp/phptest/sns_button.php?dpi=medium

これで、幅320pxの場合のみ考えておけば良いので非常に楽です。

欠点としては、タブレットで見たとき、やたら文字や画像が大きく感じてしまいます。（どんな解像度でも320pxの画面を引き延ばして表示するようなものだから。）

やっぱりこれからはレスポンシブ・ウェブデザインしかないのかな～。

参考サイト

htmlをiPhoneに対応させる

これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ - てっく煮ブログ

現象がニッチすぎて需要があるかどうかは分からないけど、つまったので一応メモ。

Lightbox系javascript「Mediabox」でIE8にてうまく動作しない現象が発生しました。

IE Testerで実行したところ、

container = new Element("div", {id: "mbContainer"}).inject(center, "inside");

部分でエラーが発生しているらしい。

記述自体は他のサイトを作成したときに使った記述をそのまま持ってきたのに（もちろんそのサイトではIE8以下でも正常に動作してます）おかしいな～と思っていたら、HTMLの記述に問題がありました。

id="container"というIDを全く関係ないdivタグに使ってたせいで、干渉しエラーが発生してしまっていたようです。

これを別のID名に変更したところIE8以下でも動作するようになりました。

う～ん、ニッチすぎる^^;

メモ

MP4（H.264）動画をHTMLに埋め込む場合、下記のようにvideoタグで埋め込むことになるかと思います。

<video src="video.mp4" width="320" height="200" controls preload></video>

が、ブラウザによってはH.264をサポートしていなかったり（Firefox）、そもそもvideoタグが利用できなかったり（IE8）で、結局はそれぞれのブラウザ用の動画を用意したり、タグを振り分ける必要がありました。

しかし、それを一気に解決する方法がこちらのサイトに書かれておりました。

IE8でHTML5のvideoタグを使う方法 - [Swb:]渋谷に住むWEBデザイナの備忘録

やり方はとにかく簡単！

1. スクリプトをダウンロード＆解凍。
2. apiフォルダのみサーバに丸ごとアップロード。
3. head内に<script src="（apiフォルダのアップロード先）/html5media.min.js"></script>を記述。
4. 普通にvideoタグを書く。<video src="video.mp4" width="320" height="200" controls preload></video>

これだけ。

これでIE8、Firefoxでも再生可能となりました。

もともと再生可能なブラウザもありますが、以下のブラウザで再生が確認されました。

• IE8・IE9
• Firefox
• Chrome
• Safari（Windows・Mac・iPad・iPod touch）
• Androidのブラウザ

この記事は2012年に作成されたものです。内容が古くなっている可能性があります。

【2013/06/17追記】こちらの記事もあわせてどうぞ。
target-densitydpi=device-dpi　に注意【viewport】

スマホサイトを作る際は、viewportの設定を行なわないと、デフォルトの横幅980pxで設定してしまうので注意、とのことだったので、いろんなサイトが良く設定している

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

を設定してみました。

しかし、FirefoxのFireMobileSimulatorで一通り整えて、実記テストしてみたところ、おかしな点が出てくる出てくる。

まず、ズーム（ピンチイン・ピンチアウト）が効かない。

これは「minimum-scale」と「maximum-scale」と「user-scalable」をしっかり設定しないとダメみたいです。

「minimum-scale」はデフォルトのスケールである「initial-scale」にあわせればいいとして、「maximum-scale」は「minimum-scale」よりも大きい値にし、「user-scalable」は「yes」にします。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=2.0,user-scalable=yes" />

そもそも「minimum-scale」「maximum-scale」「user-scalable」は設定しない（記述しない）と言うのもありです。ちなみにこの設定は一部機種には全く効かない（つまりuser-scalableがnoでもズームできてしまう）場合があります。機種に依存してしまうので深く考えないほうがいいかもですね。

続いて、「device-width」の値。

iphone3Gは幅320pxですが、iphone4からは640pxになるはず。

しかし、「width=device-width」の設定ではiphone4だろうが4Sだろうが、第４世代のipod touchだろうが幅のサイズは320pxになります。（こう書くと誤解を生みそうな感じですが、もちろん画面の半分しか表示されないわけではなく、320pxのサイズのものが640pxに引き伸ばされて表示されるという感じになります。）

しかも、幅480あるはずのXperiaでさえ320pxになってしまう・・・

よくよく調べてみると、幅320pxでサイトを作れば、大体の機種に合うようにできているそうです（例外はもちろんありますが）

Androidケータイの場合は、１つの機種で解像度が３種類に分かれており、通常はミドルの解像度で表示されているとのこと。

参考サイト：

• Androidの「target-densitydpi」でviewportの調整[to-R]
• 解像度 - Jimdoでマルチ・デバイス対応のホームページ

幅のサイズをきっちり、機種の解像度に合わせたい場合は（ただしiphone除く）、さらに「target-densitydpi=high-dpi」を足しましょう。

【８月16日追記】「target-densitydpi=high-dpi」の場合、Andoroid タブレットなどで表示がおかしくなる可能性があります（※１）。「target-densitydpi=device-dpi」としたほうが良いようです。

<meta name="viewport" content="width=device-width,target-densitydpi=device-dpi,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

通常はこの「target-densitydpi」は「medium-dpi」となっています。

（）書きでも触れましたが、これはAndroid向けなので、iphoneでは効きませんので注意！

「initial-scale」を0.5にしたりすると、640pxで表示されるようになるので、iphone4・4Sの場合は

<meta name="viewport" content="width=device-width,initial-scale=0.5,minimum-scale=0.5,maximum-scale=0.5,user-scalable=no" />

を記述する、というように振り分けられれば良いのですが、3Gとの振り分け方がイマイチよくわからない・・・

というわけで、現在まだまだ模索中です。

※１：具体的には短辺800pxのタブレットで表示した際、画面の３分の２くらいのサイズでしか表示されませんでした。（機種や設定などによるかもしれませんが。）

【2013/06/17追記】こちらの記事もあわせてどうぞ。
target-densitydpi=device-dpi　に注意【viewport】

参考サイト

• Android対応スマートフォンサイトのレイアウト（viewport・コンテナ編）
• iPhone 4 (Retina) での device-width は320 - [ぴ](2010-08-30)
• Androidの「target-densitydpi」でviewportの調整[to-R]
• 解像度 - Jimdoでマルチ・デバイス対応のホームページ
• スマートフォン用に最適化サイトを作る最小マークアップ | 風俗店サイト構築用CMS「CASTPRO4」

作成していたサイトがIEで文字化けする現象が発生しました。

100%ではないけど、リロードやURL直打ちすると勝手にShift JISと判断されて文字化けしてしまいます。（ちなみにそのサイトはUTF-8で作成）

当然ながらmetaタグで

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

は記述してますし、titleタグやmetaタグのkeywords、desicriptionより前に記述しています。

これまた結構悩んでしまいましたが、ちょっと気になる点が・・・

このmetaタグ、実はこんな感じでincludeしていたのです。

<?php include_once("meta.php"); ?>
<meta name="description" content="(概要)" />
<meta name="keywords" content="(キーワード)" />
<title>(タイトル)</title>

このmeta.phpは汎用的なmetaタグを記述して一括で管理しようと思って作ったものなんですが、どうもこれをincludeでやってるせいで文字化けが起こっているみたい。

このように中身を直書きしたら直りました。

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-script-type" content="text/script" />
<meta http-equiv="content-style-type" content="text/css" />
<meta name="description" content="(概要)" />
<meta name="keywords" content="(キーワード)" />
<title>(タイトル)</title>

う～ん。

でもPHPってサーバーサイドだよね～、なんでこれで直るんだろ？

include方式でもほぼ100%文字化けが起こらないサイトも存在するし、違いは一体何なのか分からんな～

何年やってても同じミスをしてしまうのでメモ。

pngで保存された画像はWindowsで見ると大丈夫なのですが、MacのSafariで見ると色が変わってしまうことがあります。

その画像が単体で存在する場合ならあまり目立つこともありませんが、スタイルシートで設定している背景色の上に同じ色のpng画像を表示させてしまうと、その色の違いが明確に出てしまい、マカーのお客さんから怒られることになってしまいます^^;

解決方法は、

１．photoshopで画像を開く

２．編集＞プロファイルの設定を選択。

３．プロファイルの設定ウィンドウにて「このドキュメントのカラーマネジメントを行わない」にチェックを入れて「OK」ボタンを押す。

４．保存

で完了です。

なお、jpegの場合でもICCプロファイルが埋め込まれていると、同じくMacで色が変わってしまうので、こちらの場合は保存時に、「ICCプロファイル：○○○○」のチェックを外してから保存してください。

ブラウザによってレイアウトに誤差が出てしまうことは多々有ります（特にIE vs それ以外）

が、同じFirefox6.0を使用しているのに、自分が使っているパソコンと先輩の使っているパソコンでレイアウトに誤差が出てしまいました。

floatして並べているボタンが１つずれるという程度のものでしたが、同じブラウザしかも同じバージョンなのになぜ誤差が？

アドオンのせい？

単に以前のキャッシュが残っているだけでは？

など、いろいろ原因を探ってみたところ、１つ重大な違いが有りました。

それは自分が使っているOSは「Windows 7」であるのに対し、先輩が使っているのは「Windows XP」ということ。

ためしに他のXPマシンでも見てみたところ、やっぱりずれが発生していました。

ブラウザのみならずOSでまで誤差が発生するのかよ・・・orz

なんだかんだでXPは未だシェアNo1ですからね～。

このOSチェックまでしなきゃならんのかと思うとうんざりした気分になりますが、誤差が発生する以上、チェックしとかなならんよな～・・・

ある意味XPでIE9を出さないというマイクロソフトの判断は正しかったのかも・・・

inline-blockといえば、インライン要素でありながら、ブロック要素であるwidthやheight、marginやpaddingなどを使えるようになるというスタイルです。

たとえば

<p class="e_date">2010.09.08</p>

<p class="e_title">記事のタイトル</p>

というhtml記述に対して

<style>

.e_date{
display:inline-block;
width:72px;
height:20px;
padding:5px;
background-color:#000000;
color:#FFFFFF;
}

.e_title{
display:inline-block;
width:200px;
}

</style>

というスタイルを設定すると以下のようになります。

サンプル

しかし、Firefoxなどモダンブラウザでは使用できますが、IE6、7ではまだ実装が不十分です。IE8でもサーバによってはなぜか実現できたりできなかったりします。（このサクラインターネットでは使えませんでした。）

これをIEでも実現させるには、ブロック要素をinline-blockにするのではなく、インライン要素をinline-blockにしてみてください。

<span class="e_date">2010.09.08</span>

<span class="e_title">記事のタイトル</span>

スタイルは上記のと同じです。

以下実行結果

サンプル２

メモ書き。

携帯向けサイトでは、１ページに表示するテキストや画像のサイズを気にする必要があります。

そこでこちらのサイト。

http://wolfside.com/i/x/pake2.php

このサイトにURLを入力すると、そのページの合計サイズ、テキストサイズ、画像サイズが測れます。

<input type="submit" class="button" value="検索" />

というようなボタンを画像に差し替える場合、このようにスタイルを設定します。

input.button{
 background-image:url("images/search_button.png");
 background-repeat:no-repeat;
 background-color:#000000;
 border:none;
 width:28px;
 height:28px;
 text-indent: -9999px;
 cursor: pointer;
}

サンプル [新しいウィンドウで開く]