スマホ最適化、スマートフォン制作に関するメモ

1．デバイス依存をどう乗り切るか。

エクスぺリア、iPhone、ギャラクシーはこれといった影響なくできていたのですが、
REGZAでFirefoxなどを使った時はもうね。泣きそうになりましたよね。

原因はmoz系に対応するjsとCSS3の記述を全て行っていなかった事だと思います。
初めにどのデバイスでどこまで対応するのかという仕様策定をしてから始めないと
モバイル同様苦しむ事になるので注意が必要です。
androidのopera等。

2．横にした時の見え方。

これは意外と苦戦しました。縦だと綺麗なのにスマホサイトでよく見るwidth:100%とかを
適所に使わないといけない。
float:left; とかで2つの要素を詰めないと、縦では詰まっていたのに、横では両端に広がってしまうとか。
それによってhtmlの記述を変えないといけなくなったりとか。

2012/09/26
以前は上記の様に書いていましたが、今だと

display:inline-block;
vertical-align: center;

で、テキストのセンタリングとブロックの横並びをするケースが多いですね。

viewport

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

”user-scalable=yes”だと、ユーザーが拡大できるようになります。
色々な観点がありますが、ユーザーに自由を持たせておくのが必要だとおもいますので
自分が作成するときは入れるようにしています。

3．iPhone用のjsの実装

PCサイトによくあるlightboxなどもスマホでやるとおかしな挙動になります。
さてどうしたらよいのか、iphoneとandroidでも違ってくる。頭を悩ます原因になりました(笑)

僕は使ってないですが、こちらのサイトにありました。

ヘッダー固定のJavaScript

他にもヘッダ固定のjsがいくつか使えないので

iscroll.js

というものを使ったり、
yahoo!や楽天の商品をスライダーで魅せるような、jsを組み込んだりとか、結構技術的なトライが
多かった気がします。

iscroll.jsのダウンロード

Yahoo!Japanのスマートフォン版で使われるフリックスライドのJavaScript

ちなみにiscroll.jsですが、これを入れてしまうとiPhoneでも、androidでも挙動がやたら遅くなるのと、
タップした時の反応がなくなります。（highlightしません）

jQuerymobileとかに入っている一旦消えて、スクロールが止まった時にまた出現するjsを使った方がいいのかもしれません。
インターフェースにこだわる方はまた別のjsを探して頂いた方がいいかもしれませんが。

実際に固定ヘッダーを実装出来ているサイト

iPhoneのsafariから見たGmail

iPhoneから見たmixi

等があります。
スマホでのソースの見方はブックマークレットと呼ばれるものを使用し、
それをコピーしてメールで転送が良いですね。

こちらを見ながらJavaScriptを解読していきたいですね。

【参考サイト】
スマホでのソースの見方

URL入力欄を表示させないJavaScript

厳密にはヘッダー部分をタップすると上から降りてくるJavaScriptなのですが、
ちなみにKALEIDOSCOPEさんでこのような記事がありました。
スマホの画面で表示範囲がもう少し広ければ・・・なんて事有りますよね。
このようなUIを求められる事が多いと思いますので、ご参考までに。

スマホサイト制作：URLバーをページ読込み完了時に引っ込める方法

ちなみにソースはjQueryで

$(window).bind('load',function(){//←windowオブジェクトにloadイベントをバインド
setTimeout(function(){window.scrollTo(0,1);　//←windowオブジェクトを1ピクセルスクロール
　},1);
});

4.インターフェース

border-radius（角丸を作成について）

ボタンに関しても、ご存じの方も多いですが、グラデーションと角丸の利便性をやっと体感しました。
画像がいらないですし、使いまわしが聞く、制作が効率化。
『次へ』『前へ』のような先が角ばったボタンは、若干違うんですよね。
カンバスでやっているところもありましたが、面倒臭い。
CSS3だけで綺麗に書きたい。そんなところでかちびとさん流石です。

画像を使わずCSS3だけで尖ったBack・Nextボタンを作る方法

※しかしandroidだと形は尖るけど、工夫が大切との事です。
ndroidとiPhoneの解像度がバージョン毎でも機種でも異なるように、
この辺はPCのブラウザ同様適宜対応していくしかなさそうですね

いつもお世話になっているかちびと.netさんのスマホ最適化の記事も参考にどうぞ。
かちびと.net – スマホ最適化

『Sexy Buttons』

CSSだけでスタイリッシュな角丸ボタンが作れる『Sexy Buttons』が便利そう

こんな感じで記述する様ですが、個人的にはちょっと…

<button class="sexybutton"><span><span><span class="ok">Submit</span></span>v/span></button>

5. 諸々バグ集

フォントサイズが横にした時に変わるやつ

iPhoneでもandroidでも、横にした時と縦の時での見え方は大切ですね。
iPhoneでフォントが拡大してしまいどうしようと思った事もありましたが、
これだけでOKだなんて…

body {
-webkit-text-size-adjust: none;
}

submitボタンのテキストのズレ

これも若干めんどくさい(笑)ので、こちらのURLを参考に。

スマートフォンでのwidth

※2012/4/12追記

たまにありませんか？空白が右に空いてしまう時。
PCサイトを早急にスマホサイトにしてくれという時に、CSSやHTMLをそのまま流用して最適化するときがあります。
そういう時のためのメモ。

基本中の基本ですが、paddingやmarginの効いているものにwidth:100%;などと書いてあるとスマホですと横に空白が出来てしまいます。

スマホサイトでth,tdにrelative;をかけても効かない

上記だけかと思っていたのですが、上記の解決策として、下記のような方法が
ありますが、このdivにdisplay:table-cell;を同時に指定してしまうと結局relative;が
android2.x系で効かないバグがありました。

<table>
<tbody>
<tr>
<th>
<div>//ここのスタイルにposition:relative;をかける</div></th>
</tr>
</tbody>
</table>

一つの要素に対して同時にイベントをつけたときのandroid4.x系のバグ

Backbone.jsを使用していて、同じ要素に対して、イベントを2つ同時に実行すると
遅い方(例えばsettimeoutで実行するイベント)が効かなくなるという問題がありました。(‘A`)

簡単にポップアップみたいなものを表示して、2秒後に消えるみたいな処理です。
settimeoutの関数の中にalertを仕込んでもだめでした。

6. background-size / backgroundでのCSS Spliteとcontent

PCサイトではCSS Spliteを普通に行なっていたかと思いますが、
スマホサイトでは一枚にするとbackground-sizeで調整しますよね。
更に、常に可変する事を考慮して構造を考える必要があります。
なので、

<span class="i"></span>

のような形でTwitterなどもアイコンを表示していますね。

※2012/09/26追記
最近ではAmebaさんを参考にしています。
効率的かつ面白いコーディングしているなぁと。
Mobageさんのように、text-indent:-9999px;みたいな古い画像置換ではなく、
リーフィーラングリッジ式でもない『CSSのcontentプロパティ』を使用したもの。

.title::before {
display: inline-block;
font-family: 'AmebaSymbols'; //注目すべきはここ
font-size: 2rem;
line-height: 1;
text-shadow: 0 1px 0 white;
}

独自のfont-family創っとる！font-family: ‘AmebaSymbols’;
ソースを見る感じだと他から読み込んでいるようですね。

@font-face{font-family:'AmebaSymbols';src:url("../font/ameba_symbols.eot")

上記に書かれているものを上のfont-familyで読み込んで、そこにかかれたN
などをcontent:””;の中に反映しているようですね。

.N::before {
content: "N";
}

さらに、HTMLソースも他とは違う笑
よくcssファイルをキャッシュさせている所はありますが、.jsもキャッシュさせて、
スピードを考慮していますね。
AmebaSymbolsというfont-familyを創ったのもスピードを意識されての事かと推測しています。

ただ、下層ページになると、imgタグを直書きしていたり、
タイトルになる部分のデザインの統一姓がなかったりするので
もしかしたら別の人が書いているのではないかなぁと思ったりも…
大規模開発で全員統一したマークアップガイドラインを元に
やるのも難しいですよねぇ

とはいえ、単純にHTML5/CSS3のマークアップに関しても
メディア企業の中でもレベルが高いなぁと思いました。

Position:fixed;がiOS4以下で効かない件

PCサイトでサクッとやっていたheader固定とかが少し面倒になりましたね。
iPhone3GSでもOSバージョンアップしてない人等には効かないのですよねー。

案件で、スマートフォンでのlightbox実装になった時、
モーダル背景の黒い透過レイヤーと中央配置したい要素の作り方(iOS4以上編)

黒い透過レイヤー

body{
position:relative;
}
layer{
background-color: black;
display: block;
height: 100%;
left: 0px;
opacity: 0.7;
position: absolute;
top: 0px;
width: 100%;
z-index: 9999;
}

中の要素

layerInner{
display: block;
left: 33px;
position: fixed;
top: 169px;
z-index: 10000;
}

• ・JavaScriptのoffsetHeightとかで高さを動的に取得し、創る必要があります。
• ・中央配置したい場合もscreen.widthで、スクリーンの横幅を取って、中の要素を中央配置するようにします。
• ・iOS4以下の人ってどれくらいいるんでしょうかね。データとか見てみたい。
  ⇒プログレッシブハンスメントの考え方に乗っ取るのも必要か。

スマートフォンでのスライダー実装について

Flexsliderが一番有名ですかね。
かなり使い勝手がよく、レスポンシブデザインのサイトに良く使われている気がします。
一応ご紹介です。
flexslider

ちょっとしたバグだけどハマった事例

以前案件で、flexsliderを使った際に、AndroidやiPhoneのiOS4以下で
width:100%にしているとそれがliタグに適用されるというバグがありました。
通常の利用方法は、上記のサイトにあるように、HTMLにインラインで書いて、
関数を実行するんですよね。
今回はインラインでかけなかったため、違う方法で記述しました。

Javascriptのソース内にcallback関数でstartというものが用意されています。

start:function(){
//処理
}

ただ、start時に、widthを再取得しても上手くいきません。
DOMを取得するのに時間がかかるのか、DOMが作られる前に実行されているのか…

解決策
他のイベントの後にflexsliderの関数を実行するようにしました。
※例ですので、clickだとイベント時毎回実行されるので他のものに変更したほうが良いです。

$(function(){
   $("#hoge").click(function(){
      $('.flexslider').flexslider({
       animation: "slide"
     });
   });
});

androidアプリコーディング

最近、androidアプリ開発もしはじめて、XMLのコーディングをしはじめました。
Graphical layoutと.xmlを弄りながらデザインしていくというものです。
そこで学んだ幾つかを記事に書いております。
こちら

10.制作の際に参考になるサイト

▼リキッドレイアウトの指定とか、.htaccessの書き方とか参考になりました。
iPhone向けサイト構築 基礎文法最速マスター

▼jQuery Mobile、Titanium、Less Framework、PhoneGap、jQPadなどなどダウンロードサイトの一覧記事
iPhone向けWebサイトの制作等に役立ちそうな情報まとめ

▼iPhone向けサイト制作ノウハウ＆拡張機能「iPhone site extension for Dreamweaver CS4/5」
Dreamweaverの拡張機能について、あのたにぐちまことさんの記事です。

iPhone向けサイト制作ノウハウ＆拡張機能「iPhone site extension for Dreamweaver CS4/5」

▼WebのスキルでiPad/iPhoneアプリ風のWebアプリ作成のまとめ
WebのスキルでiPad/iPhoneアプリ風のWebアプリ作成のまとめ