サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
買ってよかったもの
hi-posi.co.jp
※ほぼ備忘メモで説明をかなり省いているので、ある程度制作知識のある方向けのエントリーです。 ※JavascriptはjQueryを使う場合が多いので読み込んでいる前提です。 目次 振り分け系 ユーザーエージェントを判別する ページを横幅320pxに合わせて拡大(zoom)する 画面の回転(Landscape-Portrait)イベントを取得する 現在Landscapeモードか、Portraitモードかを調べる スクロール制御系 タップするとページの一番上にスクロールで戻る タップすると指定したidの位置までスクロールで戻る タップすると指定した位置までスクロール無しで戻る iPhoneのSafari(iOS7含む)でスクロールを禁止する タッチ制御系 タッチ開始を検知する タッチ中を検知する タッチの終わりを検知する フォーム制御系 フォームのラベルのタップを有効にする フォームのペース
[SVGファイルの作り方はこちらを参照] SVG 形式で書き出す方法 (Illustrator CC) – Adobe Nexus5(Android4.4 Chrome) 問題無し ARROWS Z ISW13F(Android4.1 Chrome) 上下にマージンはあけていないのに、スキマが出来てしまう。比率も合っていません。 AQUOS PAD SHT21(Android4.1 Chrome) アスペクト比率がおかしい 解消方法 SVGファイルをテキストエディタ等で開き、名前空間(<svg></svg>)の宣言のところに 「preserveAspectRatio=”none”」 を追記します。 追記前 <svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.
iPhoneやAndroidでもHTML5のvideoタグを利用することで、 YouTubeなどのアプリを立ち上げる事無くブラウザ内で動画を再生することができます。 しかしこのビデオタグ、、、 端末によって動作が本当にまちまちで扱いにかなり苦労します。 以下、iPhone/Androidのブラウザ内で動画を再生させる時にハマりそうな部分を まとめました。 ここで書いた内容は細かい部分なので、「videoタグって何?」ということを知りたい方は、 こちらのページ が参考になるかと思います。 【目次】スマホでvideoタグを扱うときにハマりポイントとその対処法 再生方式の違い Basic認証をかけているとAndroid端末で動画が再生されない(´Д )=з Basic認証をかけているとiPhoneでPoster属性が反映されない(´Д )=з Android2系で再生ボタンを押しても何
クライアントから「サイト内の画像を保存できないようにしてほしい!」というご要望をいただくことがたまにあります。 ウェブサイトに画像を掲載している以上、画像保存を完全に阻止するということは不可能です。 ソース読めば画像のパスなんてわかるし。最後は画面キャプチャしちゃえばいいし。 なので完全に阻止することはできませんが、できる限り画像保存までの手間を増やす対策をご紹介します。 1:jQueryで「contextmenu」イベントを使って右クリックを禁止にする 2:スマホの場合 CSSを使って長押しアクションを禁止する 3:スマホの場合2 jQueryのタッチイベントを使って画面の長押し後に表示されるメニューを表示させないようにする 4:jQueryライブラリ「dwImageProtector Plugin」を使って対象画像の上に透過画像を重ねる 1:jQueryで「contextmenu」
iPhoneとAndroidでは入力フォームの仕様・タグの対応状況に違いがあります。 実際に実機で検証してみました。 ※端末に搭載された標準ブラウザーで検証を行っています。 入力フォームにプレースホルダーを表示する HTML5から実装された「placeholder=””」を使います。 これは、入力フォームに予め文字を表示させておくタグです。 HTML5に対応していないブラウザでは、Javascriptで制御したりと面倒だったプレースホルダーですが、 「placeholder=”文字列”」と書くだけで実装できてしまいます!
HTML5のVibration APIとは 端末のバイブレーション機能へアクセスするためのHTML5のAPIのひとつです。 Vibration APIを使うと、端末を震わせることが可能になります。ブラウザ上で動くゲーム系のコンテンツで演出として使うと効果的ですよね。 バイブレーションを制御する バイブレーションAPIが対応しているか調べる 一応、各ブラウザのベンダープレフィックスをつけて調べます。 var isVibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate; if(isVibrate){ alert("対応している!"); }
ページの傾きを検知したり、端末を振って操作するなどスマホならではの操作方法を活かしたサイトをいくつか集めてみました。どのサイトも凝っていて、参考になります。 1:左右どちらかに傾けるとストーリーの目線が変わる「シーブリーズ Wサイドストーリー」 端末を左に傾けると男の子目線でのストーリーが展開され、右に傾けると女の子目線でのストーリーが展開していくコンテンツです。 途中で目線を切り替えることも可能です。 コンテンツの内容と、操作方法がマッチしていて良いですね! 「瞬間アセきゅんコンテンツ!」だって! シーブリーズ Wサイドストーリー http://www.seabreezeweb.com/wsidestory/ 2:動画とHTMLページを組み合わせた「THE LUXURY TEST」 TOYOTA ALPHARDのスペシャルコンテンツ。 出題映像(動画)が表示され終わったあとに、問
若者向けではなく、主に50代以降をターゲットにしたサイト(スマートフォン向けサイト)のUIの好事例ついてまとめてみました。 ひとくくりに「50代」といってもスマホを使いこないしている方も多いと思うので、以下のような人物像で考えました。 ・50代後半の女性 ・スマホは持っているけど通話、家族とのメールやLINE利用がメイン ・インターネット通販では商品を購入したことがない。 ・お気に入り登録しているサイト以外はあまり見ない ・小さい文字は読みづらい、老眼。 事例1:フォントサイズは大きめ・テキストリンクには下線を フォントサイズは通常よりも大きめにしておくと老眼の方に読みやすくなります。サイトによっては、テキストのサイズを「大・中・小」で切り替える機能がある場合もありますが、そもそもこの切り替えボタンに気づいてもらえない可能性もあるので、サイトのターゲットが50代以降と決まっている
クライアントから「サイト内の画像を保存できないようにしてほしい!」というご要望を…
このページを最初にブックマークしてみませんか?
『hi-posi.co.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く