［トップページ］
■パソコン・通信 一通り、勉強したので整理してみた。
iPhoneの解像度は、下記の通りである。
iPhone1-3： 320× 480px
iPhone4 ： 640× 960px
iPhone5 ： 640×1136px
ここで重要なのは、Webページでスマホ用の設定を施さなければ、幅980pxで表示されると言うことである。言うまでも無く、小さく表示される。
スマホ用に追加された記述に、viewportがある。
<meta name="viewport"
content="width=device-width">
iPhoneでは、"width=320px"と解釈される。つまり、iPhone専用Webページは、表示幅320pxを基調に作成すれば最適となる。
Webページ幅が指定してあると、その幅に自動的に合わせてくれるようだ。ただし、Webページ高が表示高より短いと、表示幅に収まらない。正式には、initial-sizeプロパティで縮小する。縦置きでは正確に表示するが、横置きにしても自動的に大きさが調整されない問題が生じている。現時点では、initial-sizeプロパティは使えない。
上記の記述が無ければ、"width=980px"の記述と同じ。文字サイズは、980/320=約３倍でないと読めない。
iPhoneの解像度は、下記の通りである。
iPhone1-3： 320×
iPhone4
iPhone5
ここで重要なのは、Webページでスマホ用の設定を施さなければ、幅980pxで表示されると言うことである。言うまでも無く、小さく表示される。
スマホ用に追加された記述に、viewportがある。
<meta
iPhoneでは、"width=320px"と解釈される。つまり、iPhone専用Webページは、表示幅320pxを基調に作成すれば最適となる。
Webページ幅が指定してあると、その幅に自動的に合わせてくれるようだ。ただし、Webページ高が表示高より短いと、表示幅に収まらない。正式には、initial-sizeプロパティで縮小する。縦置きでは正確に表示するが、横置きにしても自動的に大きさが調整されない問題が生じている。現時点では、initial-sizeプロパティは使えない。
上記の記述が無ければ、"width=980px"の記述と同じ。文字サイズは、980/320=約３倍でないと読めない。
スマホにおけるホームページの作成を勉強中だが、勉強を進めていると、意外に使っていない記述にめぐり合える。
ホームページにアクセスして、ページを完全に読み込んだ後に関数を行う記述をスマートにやってみよう。htmlのbodyタグのパラメータに、イベントハンドラーであるonload="関数"の記述が無くなる。ほとんど変わらないじゃないかと思われるが、htmlタグとjavascriptを分離できることは、大いに意味がある。javascriptが利用できるすべてのブラウザでＯＫ。
【昔風】
<html>
<head>
<script>
function _alert(){
alert("ok!");
}
</script>
</head>
<body onload="_alert();">
<p>window.onload のテスト</p>
</body>
</html>
【今風】
<html>
<head>
<script>
function _alert(){
alert("ok!");
}
window.onload = _alert;
</script>
</head>
<body>
<p>window.onload のテスト</p>
</body>
</html>
他にzoomプロパティで、全体を拡大縮小する記述がある。IE独自の記述だが、Google Chrome, Safari(パソコン), Opera, Lunascape(Trident, WebKit)でも正常に作動する。Firefox, Lunascape(Gecko)では作動しない。iPhone5cのSafariでは、正確に拡大縮小しない。Safariでも、パソコンとスマホでは異なることが、また示された。
document.body.style.zoom = 1.5;
ホームページにアクセスして、ページを完全に読み込んだ後に関数を行う記述をスマートにやってみよう。htmlのbodyタグのパラメータに、イベントハンドラーであるonload="関数"の記述が無くなる。ほとんど変わらないじゃないかと思われるが、htmlタグとjavascriptを分離できることは、大いに意味がある。javascriptが利用できるすべてのブラウザでＯＫ。
【昔風】
<html>
<head>
<script>
function
}
</script>
</head>
<body
<p>window.onload
</body>
</html>
【今風】
<html>
<head>
<script>
function
}
window.onload
</script>
</head>
<body>
<p>window.onload
</body>
</html>
他にzoomプロパティで、全体を拡大縮小する記述がある。IE独自の記述だが、Google
document.body.style.zoom
不思議なもので、iPhone5cをゲットしたとたんに、スマホ用のホームページ作成依頼があり、急遽スマホの研究を進めている。まあ、そういう時代ということだ。
結論として、ホームページ作成において、パソコン用とスマホ用と分けて作らねばならないだろう。インターネットや本では、分けなくてもいい方法とか、色々述べられているけどね。
さて、スマホは、画面こそ小さいが、解像度は高いというのが、パソコンとの最大の違い。ブラウザ(Safari等)での表示や操作も異なる。
iPhone5cの解像度は1136x640ピクセル(16:9)とあるが、縦長での閲覧で、表示幅640pxのところ、写真幅960pxがきちんと幅に収まって表示される。縮小表示されているのだ。ダブルタップで、文章や埋め込み画像が、表示幅に収まるように拡大縮小する等、操作も異なる。
余談ではあるが、スマホにおいて、現在の最高解像度はフルHD(1920×1080)であるが、2014年にはWQHD(2560×1440)に、2015年にはUHD(3840×2160=4K)になり、液晶画面を折り畳めるようになるとの報告がある。今後、スマホ本体は、急激に進化するのだ。
『子猫の手』では、携帯電話ブラウザや旧スマホでも表示できるように、表示幅480pxを基調としており、写真のサムネールは幅240pxとしている。解像度の高いスマホでは、ページを切り替える度に、拡大しなければならない等、完全対応していない。
パソコン用Safariで表示できたら、スマホでも大丈夫だろうと踏んでいたのが大間違い。文字の大きさも、拡大すれば問題ないと考えていた。拡大すると横スクロールが発生し、縦スクロールのつもりが横ブレしたりして、閲覧性が悪くなる。やはり、あらかじめフォントサイズを大きく調整しておく必要がある。
font-sizeでフォントサイズを指定すると、パソコンでよく利用する12pt,18pt,24ptが、大きく表示される。25pt以降は正確に表示されている。理屈は分からないが、記述次第では、ほぼ正確に表示できる。それでも12ptと24ptが若干大きい。
フォントサイズをCSS3の新単位remで倍率指定したほうが便利とある。rem=root+em(M)という意味である。ほとんどのブラウザにおいて、ベースのフォントサイズが12pt(16px)なので、rootを1px/16px=6.25%にすると、remはpxと同じ数字で同じ大きさとなる。残念ながら、12pt,18pt,24ptに相当する16rem,24rem,32remが、大きく表示される。きっと、12pt,18pt,24ptが、特殊なフォントサイズなんだな。rootの数字次第では、もっとゲトゴトになる。実際には36pt以上でないと読みづらいので、小さいフォントは使わない。
『子猫の手』では、パソコン表示で、看板21pt／見出し18pt／メモ12pt／写真サムネール幅240px／表示幅480pxを基調としている。スマホ表示のために、看板を24ptに変更して、２倍返し、３倍返し、４倍返し。remにおけるrootの数字を変更するだけで良いというわけか。
スマホのホームページ作成で重要なことは、フォントサイズと埋め込み画像のサイズを、切り離して考えるということだね。
くどくど言ってきたが、現状を簡潔に整理すると、iPhone5cにおいて、ちょっと以前のパソコンの幅1024pxを、スマホの幅5cmに、960px相当で表示しているということだ。
P.S. Androidスマホは、新徳くんに今夜試してもらおう。
P.S.2 新徳くんに試してもらうのを忘れていた。
http://neconote.jp/sp/
結論として、ホームページ作成において、パソコン用とスマホ用と分けて作らねばならないだろう。インターネットや本では、分けなくてもいい方法とか、色々述べられているけどね。
さて、スマホは、画面こそ小さいが、解像度は高いというのが、パソコンとの最大の違い。ブラウザ(Safari等)での表示や操作も異なる。
iPhone5cの解像度は1136x640ピクセル(16:9)とあるが、縦長での閲覧で、表示幅640pxのところ、写真幅960pxがきちんと幅に収まって表示される。縮小表示されているのだ。ダブルタップで、文章や埋め込み画像が、表示幅に収まるように拡大縮小する等、操作も異なる。
余談ではあるが、スマホにおいて、現在の最高解像度はフルHD(1920×1080)であるが、2014年にはWQHD(2560×1440)に、2015年にはUHD(3840×2160=4K)になり、液晶画面を折り畳めるようになるとの報告がある。今後、スマホ本体は、急激に進化するのだ。
『子猫の手』では、携帯電話ブラウザや旧スマホでも表示できるように、表示幅480pxを基調としており、写真のサムネールは幅240pxとしている。解像度の高いスマホでは、ページを切り替える度に、拡大しなければならない等、完全対応していない。
パソコン用Safariで表示できたら、スマホでも大丈夫だろうと踏んでいたのが大間違い。文字の大きさも、拡大すれば問題ないと考えていた。拡大すると横スクロールが発生し、縦スクロールのつもりが横ブレしたりして、閲覧性が悪くなる。やはり、あらかじめフォントサイズを大きく調整しておく必要がある。
font-sizeでフォントサイズを指定すると、パソコンでよく利用する12pt,18pt,24ptが、大きく表示される。25pt以降は正確に表示されている。理屈は分からないが、記述次第では、ほぼ正確に表示できる。それでも12ptと24ptが若干大きい。
フォントサイズをCSS3の新単位remで倍率指定したほうが便利とある。rem=root+em(M)という意味である。ほとんどのブラウザにおいて、ベースのフォントサイズが12pt(16px)なので、rootを1px/16px=6.25%にすると、remはpxと同じ数字で同じ大きさとなる。残念ながら、12pt,18pt,24ptに相当する16rem,24rem,32remが、大きく表示される。きっと、12pt,18pt,24ptが、特殊なフォントサイズなんだな。rootの数字次第では、もっとゲトゴトになる。実際には36pt以上でないと読みづらいので、小さいフォントは使わない。
『子猫の手』では、パソコン表示で、看板21pt／見出し18pt／メモ12pt／写真サムネール幅240px／表示幅480pxを基調としている。スマホ表示のために、看板を24ptに変更して、２倍返し、３倍返し、４倍返し。remにおけるrootの数字を変更するだけで良いというわけか。
スマホのホームページ作成で重要なことは、フォントサイズと埋め込み画像のサイズを、切り離して考えるということだね。
くどくど言ってきたが、現状を簡潔に整理すると、iPhone5cにおいて、ちょっと以前のパソコンの幅1024pxを、スマホの幅5cmに、960px相当で表示しているということだ。
P.S.
P.S.2
http://neconote.jp/sp/
ウイルスにやられて、Windows Updateできない「エラーコード:0x80073712」は厄介だ。下手すると、再インストール並みのことをやらなければならない。
Windows7,Vistaの場合、方法は４つあり、１から順番に試していく。方法４は、最後の手段である。
【方法１】システム更新準備ツール(Checksur.exe)を実行する。
【方法２】使用中のWindowsのバージョン用の最新のService Packをインストールする。
【方法３】sfc/scannowコマンドを使用してシステムファイル チェッカー(SFC.exe)ツールを実行する。
【方法４】インプレースアップグレード(in place upgrade)を実行する。
・Windowsの再インストールを行う場合と同等の時間が必要となる。
・また、この処理中に、カスタマイズしたWindows設定の一部が失われることもある。
・この修復インストールを実行しても、コンピューターに現在インストールされているファイルやアプリケーションが損なわれることはない。
お客さんのパソコン修理で、ようやく方法１にまで漕ぎ着けたが、未だ正常にWindows Updateできていない。次回、方法２から試してみる。時間がかかる作業である。
なお、IEでダウンロードしようとすると、MSEの誤動作なのかウイルス検知ということでダウンロードできない。Google Chromeがインストールされていたので、こちらでダウンロードしてみると、最後まで正常にダウンロードできる。もしものために、IEと別のブラウザもインストールしておくことをお勧めする。
http://support.microsoft.com/kb/957310/ja
Windows7,Vistaの場合、方法は４つあり、１から順番に試していく。方法４は、最後の手段である。
【方法１】システム更新準備ツール(Checksur.exe)を実行する。
【方法２】使用中のWindowsのバージョン用の最新のService
【方法３】sfc/scannowコマンドを使用してシステムファイル
【方法４】インプレースアップグレード(in
・Windowsの再インストールを行う場合と同等の時間が必要となる。
・また、この処理中に、カスタマイズしたWindows設定の一部が失われることもある。
・この修復インストールを実行しても、コンピューターに現在インストールされているファイルやアプリケーションが損なわれることはない。
お客さんのパソコン修理で、ようやく方法１にまで漕ぎ着けたが、未だ正常にWindows
なお、IEでダウンロードしようとすると、MSEの誤動作なのかウイルス検知ということでダウンロードできない。Google
http://support.microsoft.com/kb/957310/ja
携帯電話のメールは、２種類ある。電話番号だけで利用できるSMS（ショートメッセージサービス）と、インターネットメールと同じMMS（マルチメディアメッセージサービス）である。
SMSは、各会社の携帯同士でしか利用できないと思っていたが、2011年7月13日から全会社間で利用できるように改善されていたんだね。最大文字数は、基本的に半角160文字＆全角70文字である。
しかし、auのCメールは、2011年夏モデル以降で半角140文字＆全角70文字、2011年春モデルまでで半角100文字＆全角50文字である。ウィルコムは、ライトメールで半角90文字＆全角45文字、Pメールで半角20文字である。注意が必要である。auでも、iPhoneのサービスはSMS(i)となり、半角160文字＆全角70文字である。
送信料金は、まちまちである。国際SMS送信は、ウィルコムを除いて対応しているが、50円または100円/通でバカ高い。
なお、SMSでスパムメールを大量に送信する業者がいる。この対策として、「SMS受信を拒否する」と設定している人も多い。国内送信料金が、安に無料とならないのも、対策の一環だろう。
SMSは、各会社の携帯同士でしか利用できないと思っていたが、2011年7月13日から全会社間で利用できるように改善されていたんだね。最大文字数は、基本的に半角160文字＆全角70文字である。
しかし、auのCメールは、2011年夏モデル以降で半角140文字＆全角70文字、2011年春モデルまでで半角100文字＆全角50文字である。ウィルコムは、ライトメールで半角90文字＆全角45文字、Pメールで半角20文字である。注意が必要である。auでも、iPhoneのサービスはSMS(i)となり、半角160文字＆全角70文字である。
送信料金は、まちまちである。国際SMS送信は、ウィルコムを除いて対応しているが、50円または100円/通でバカ高い。
なお、SMSでスパムメールを大量に送信する業者がいる。この対策として、「SMS受信を拒否する」と設定している人も多い。国内送信料金が、安に無料とならないのも、対策の一環だろう。
お問い合わせby Network Communication Note