Category Archives: スマホ

JavaScriptでスマホ判定する2つの方法

Webページを閲覧しているデバイスがスマホかどうかをJavaScriptで判定するには、様々な方法があります。
UserAgent文字列から判定するのが代表的な方法ですが、ブラウザサイズから判定する方法や、デバイス判定ライブラリを使う方法もあります。

しかしながら、UserAgentはOSやブラウザのバージョンアップによって変更されたり、デバイス判定ライブラリによっては日本で発売されている端末に対応していなかったりと、注意すべき点もあります。

そこで今回は、日本で利用されているスマホを対象として、Javascriptで正しくスマホ判定するための方法を2つ解説します。
続きを読む

スマホのCookieを特定サイトだけ削除する方法 | スマホ | Webサイト開発

Cookieを使うWebサイトをテストするとき、特定サイトのCookieだけクリアしたいときがあります。
「すべてのCookieをクリアする」という手順はすぐにわかるのですが、特定サイトのCookieを削除する方法、特にスマホブラウザで行う方法についての情報は多くありません。

そこで、今回はスマホの代表的なブラウザで特定のドメインのCookieを削除するやり方をまとめてみました。

続きを読む

スマホ向けページャデザイン 3選 | スマホ | Webサイト開発

商品一覧や検索結果のように、一覧を表示するページでは、ページを切り替えるためのページャー(ページナビゲーション)がよく使用されます。スマートフォンサイトでも、ページャーを使用することが多いのですが、PCサイトで使われるページャーといくつかの違いがあります。

続きを読む

スマホサイトで画像サイズはいくつにすべきか? | スマホ | Webサイト開発

スマートフォン端末が急増してきて、スマートフォンサイト制作をお考えの方も多いことでしょう。そこで素朴な疑問として出てくるのが画像サイズを何を基準に作成するべきか?ってことです。各スマートフォンが持つブラウザ横幅と解像度が必ずしも一致しないので、一体何を基準に作ればよいかわからなくなります。今回はこの疑問を解決すべく、実際に主なスマートフォン端末の画面解像度である320px、480px、640pxについて種類の異なる画像を用意し、、実機で見たときにどの程度の違いがあるかを検証してみました。

調査結果としては、以下の通りでした。

iPhone3GS iPhone4 Xperia arc
640px画像
480px画像
320px画像 ×
画像解像度の違いによるメニュー画像の視認レベル
iPhone3GS iPhone4 Xperia arc
640px画像
480px画像
320px画像

 

画像解像度の違いによる写真画像の視認レベル

 

私の結論を先に言ってしまうと、

480px基準の画像で作成し、通信量を抑えつつも画像の綺麗さも担保する

が一番ベストな方法だと思います。

では、次から今回の結論に至った、実際の調査内容について触れていきたいと思います。

続きを読む

入力フォームを数字キーボードに設定するには? | スマホ | Webサイト開発

フィーチャーフォンでは、フォームでテキストを入力する際の文字入力モードをHTMLの属性(istyle=”4″など)で指定できる。文字入力モードは「ひらがな」「カタカナ」「英字」「数字」のように文字種を指定できるから、入力モード切替が煩わしい携帯では切り替えの手間が省け、ユーザビリティが良くなる。

zipcodeではスマートフォンは入力モードに対応しているか?いや、Androidに搭載されたブラウザは標準HTML準拠だからダメに違いない・・・。そう思ってあきらめていた。

が、調べてみるとAndroidブラウザでも数字モードに設定する方法があった。

 

 

 

続きを読む

スマホサイトで画像をコピーガードするには?| スマホ | Webサイト開発

Webページ上の画像は、Webに公開する以上閲覧者に保存されたり複製されるのは仕方のないことです。基本的にPCブラウザと同じ構造のスマートフォンブラウザで複製を完全に防止する対策法はありません。しかし、フィーチャーフォンでは画像の保護や転送をブロックすることが一般的に行われており、スマートフォンでも同様のことをしたいという事情もあると思います。

調べたところ、「dwImageProtector Plugin for jQuery」というjQueryプラグインで画像保存をブロックする方法がありました。スマートフォンはJavaScriptが動作しjQueryも使えるので、これを利用したプロテクト方法を紹介します。

続きを読む

「ホーム画面に追加」したときのアイコンを設定するには? | スマホ | Webサイト開発

iPhoneのホーム画面に以下のようなURLショートカットアイコンを表示できることを知ってましたか?

01_1.png

今回はこのURLショートカットアイコンをホーム画面に追加する方法と、サイト制作者がこのアイコンを指定する方法について紹介したいと思います。

続きを読む