【開発】スマホ用ウェブページの作成のはじめ

開発ざれごとchrome,safari,webkid,ウェブ,スマホ対応

ウェブクライアントというと、もうPCベースの考え方では古過ぎのようで、気づいたら実際自分も就寝時のウェブは、Android端末でウェブしてます。

自分が管理してるサイトの幾つかはまだ未対応で、いつかやんなきゃ・・とか思いつつまったく手付かずです(;´Д`)

幸い、世のスマホは高機能すぎるので、表示自体はしてくれるが、解像度や動作速度の問題から閲覧には問題がアリアリです。

んで、実際に始めてみると、結構簡単です。

ググッてみても、そんなにヒットしないのもその性でしょうか。ブログなどのCMSを利用してたら、プラグインインストールするだけだし、実際製作の需要って無いのかもしれないけど。

携帯電話(ガラケー)のような機能制限などはほぼ皆無、HEAD部分に、以下のマジナイを書くだけで基本的にOK。あとは、(リキッド対応に向けて)CSSでグリグリ書けばほぼ終了でしょう。

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

これは、デバイスの解像度に対して、どのように表示するかを指定するものですが、基本的には変更する事はないかと思います。

これで、縦方向のみにスクロールするシンブルでまさにスマホ向けサイトのように見えます(但し、デバイス横サイズを超える記述すると、要スクロールとなります。後述)

ユーザーがズーム変更できるようにするには、user-scalableを変更する訳ですが、これを可能にすると、position:fixedなどの浮きブロック要素などに不具合があるのを確認してます。

手持ちに、AndroidのXperia Arcしか無くて、確実な事を言うことはできないんですけどね(それと、公式のエミュレータ(DVM)での動作確認)

ここで注意するのが、デバイスの解像度です。

いくら高解像度の液晶を搭載していても、ウェブで認識するのは全然違うもので、横サイズは、古いものは240pxや320pxなどが帰ってきます。

ちなみに、Xperia Arcは240pxでした。古いiPhoneは320pxのようです。

最近の端末はどうなんでしょう。わかんない。ただ、iPhoneに習って、320pxでデザインするのが良いようですね。

つまりは、ユーザーに余計なスクロールをさせたくない場合は、固定サイズ要素は、このサイズ以下で抑えておく必要があります。

ちなみに、回転される事も考えないといけません。

あと重要なのが、リキッド化(サイズ自由)の記述です。

ちなみに写真は、リキッド・スネークのおっさんですね。記事とは無関係

回転されるので、サイズに対して臨機応変に対応しておかないといけません。

簡単にいえば、CSSでWidth:100%;と書くだけのお仕事になります。

これに限らず、サイズが変更されても大丈夫なように書くだけです。

現在、普及しているスマホのほとんどが、iPhoneかAndroidのどちらかですので、とっても製作者サイドが楽なんです。

いずれもWebKidベースなので、PCにあるようなブラウザ互換を意識しなくても良いんです。

WindowsPhoneがどんだけシェアを伸ばすか次第なんですけどね。

WebkidやCSS3には、便利な機能があるので、グラデーションをしたいがための画像を用意とか、角丸のための画像とか、一切不要です。CSSだけで書けちゃいます。

border-radius: 8px;

角丸はこれだけ(4点それぞれに指定できます)

background: -webkit-gradient(linear, left top, left bottom, from(#ffeeee), to(#995544));

グラデーションもこんな感じです。細かく書けます。

でも、いまこんなWebkidベースの機能を使っちゃうと、後々面倒になってしまうかもしれませんので、リスクも抑えつつ利用すべきです。

開発ざれごとchrome,safari,webkid,ウェブ,スマホ対応

Posted by nabe