スマホでPDFがダウンロードできない原因
開発中のサイトで、スマートフォンではpdfのダウンロードができないことがありました。最終的にダウンロードできるようになりましたが、条件が複雑怪奇だったので、今回はこの話題にしたいと思います。 関連記事： iPhone向けSafari、HTML拡張属性を使いこなす スマホサイトで画像をコピーガードする …
Webサイト開発
スマホ向けページャデザイン 3選
商品一覧や検索結果のように、一覧を表示するページでは、ページを切り替えるためのページャー（ページナビゲーション）がよく使用されます。スマートフォンサイトでも、ページャーを使用することが多いのですが、PCサイトで使われるページャーといくつかの違いがあります。 関連記事： 画像をピッタリ横並び表示させる …
iPhone でHTTPプロキシを使用する際の制限
iOS8のsafariでは、フォワードプロキシを使用した場合に制限があります。iOS7までにはなかった制限なので、注意が必要です。 関連記事： HTTPリダイレクト4種類の違いとは？ スマホサイトで画像をコピーガードするには？ スマホでPDFがダウンロードできない原因 HTTPリダイレクト4種類の違 …
スマホサイトで画像サイズはいくつにすべきか？
スマートフォン端末が急増してきて、スマートフォンサイト制作をお考えの方も多いことでしょう。そこで素朴な疑問として出てくるのが画像サイズを何を基準に作成するべきか？ってことです。各スマートフォンが持つブラウザ横幅と解像度が必ずしも一致しないので、一体何を基準に作ればよいかわからなくなります。今回はこの …
HTTPリダイレクト4種類の違いとは？
HTTPではリダイレクトするときに300番台のステータスコードを使用する。具体的に言うとリダイレクトを表すステータスコードには301/302/303/307の4種類があって、用途によって使い分けられるようになっている。 が、モバイルの世界では4種類のステータスコードを自由気ままに使えるわけじゃない。 …
スマートフォンのラジオボタンを使いやすいサイズにするには？
スマートフォンは画面をタッチして操作をするので、フォームを使ったページではラジオボタンとチェックボックスのサイズは入力のしやすさに大きく関わってきます。 情報を入力しているときにボタンサイズが小さくてタッチしにくいと、イライラしてしまったり入力を諦めてしまったりするので、ECサイトなどでは購入機会の …
入力フォームを数字キーボードに設定するには？
フィーチャーフォンでは、フォームでテキストを入力する際の文字入力モードをHTMLの属性（istyle=”4″など）で指定できる。文字入力モードは「ひらがな」「カタカナ」「英字」「数字」のように文字種を指定できるから、入力モード切替が煩わしい携帯では切り替えの手間が省け、ユーザ …
スマホサイトで画像をコピーガードするには？
Webページ上の画像は、Webに公開する以上閲覧者に保存されたり複製されるのは仕方のないことです。基本的にPCブラウザと同じ構造のスマートフォンブラウザで複製を完全に防止する対策法はありません。しかし、フィーチャーフォンでは画像の保護や転送をブロックすることが一般的に行われており、スマートフォンでも …
「ホーム画面に追加」したときのアイコンを設定するには？
iPhoneのホーム画面に以下のようなURLショートカットアイコンを表示できることを知ってましたか？ 今回はこのURLショートカットアイコンをホーム画面に追加する方法と、サイト制作者がこのアイコンを指定する方法について紹介したいと思います。 関連記事：
maxlengthで半角文字数で制限するには？
入力フォームではおなじみのmaxlength属性。携帯ブラウザでも使えるけど、やっぱり機種依存がある。機種依存の影響は大きく、場合によっては画面遷移やDB定義にまで手をつけないといけないことも・・・。 まずは手元にある端末を使って実機調査を敢行した。 関連記事：
iPhone向けSafari、HTML拡張属性を使いこなす
iPhone向けSafariでは、W3C標準のHTMLタグ・属性をサポートしているのはもちろんだが、iPhone固有の拡張属性・拡張CSSプロパティが使用できる。具体的には、テキストの入力方法を制御するものからタッチパネル操作専用のイベントハンドラ、バックライトの制御といった機能まである。 今回はi …
CSS3 擬似クラス
CSS2までの擬似クラスは、閲覧者が単純なアクションを起こした際にスタイルを適応させるための仕組みとして主に使用されていました。CSS3では、非常に多くの擬似クラスが追加されました。これにより、これまでの擬似クラスの用途を大きく超えた可能性が拡がった印象を受けました。 今回は、CSS3において追加さ …
円記号をiPhoneのブラウザに表示するには？
iPhoneのブラウザ上に「￥」を表示しようとしても、「＼」（バックスラッシュ）になってしまう。一体どうすればいいのか？ Durianの開発中にこんな問題に直面した。何としてもiPhone対応したいという一心で、試行錯誤した結果は・・・。 関連記事： スマホサイトで画像サイズはいくつにすべきか？ ス …