safariのUAを変更する

PCでスマートフォン用のサイトを閲覧したい

スマートフォン用のサイト作成を学ぶのであれば、既存の企業サイトを研究するのが
一番良いと思います。しかしスマートフォンではソースを表示させるのも大変です。
 
スマートフォン用のサイトはアドレスを直接入力すればPCでも閲覧できるものも
多いのですが、そもそもスマートフォン用のアドレスが分かりませんし、サイトに
よってはPCでアクセスすると強制的にPC用のサイトに飛ばされてしまいます。
 
そこで活用するのがユーザーエージェント(UA)の偽装です。UAを変更して
スマートフォンになりすませばPC上でスマートフォン用のサイトを閲覧することです。
実際に今回紹介するテクニックを利用してiPhoneと偽装してYahooにアクセス
しました。すると以下の様にスマートフォン用のサイトを表示してくれました。
しかし勘違いしないようにしましょう。これはUAを偽装しているだけでiPhoneの表示をシミュレートしているわけ
ではありません。同じsafariですが細かい部分で仕様が異なっていると思います。ですのでソースの解析などにのみ
利用するようにしましょう。

 

 
 
 

UAの設定方法

いろいろなブラウザでUAを偽装することは可能だと思うのですが、safariでは
プラグインの追加なしに簡単に変更可能なので、ここで紹介したいと思います。
まずはsafariの環境設定を開き「詳細」の最下段にある「メニューバーに”開発”
メニューを表示」にチェックを入れます。
 

 
そうすると以下の様に「開発」メニューが追加されるので、このメニューから
「ユーザーエージェント」で設定すればOKです。
 

 
 
おしまい
 
 
 

html5の学習サイト

スマートフォン用のサイトを作成してみたいので、html5やcss3もきちんと
学習したい今日この頃。良さそうなサイトがあったので備忘録として
ここにメモ。Mdn様のサイトです。
 

 
 
とりあえず流し読みして気になった点を箇条書き。
・ページ内アンカーがdivのidを指定できるのはステキ。
・5ページ目のセクションの項目は必読
 html5の構文自体は簡単だけれど、どのように構成するかを説明している
 サイトは少ないので。
 
 
 
 

jQueryは未使用だけどjavaScriptを駆使したサイト(2)

jQueryを使っているのかな?とソースを除くとjQueryは使われて無く
オリジナルのJavaScriptで作成されているものが幾つかあったので、
そんなサイトの紹介
 
 

・内山建設


コンテンツのスクロールや画像の切り替えなど、
javaScriptでエレガントに仕上がっていてステキです。

 
 

・IBM


ショーケース右下部分のメニューで画像が切り替わります
(文字と画像が分離した多重スクロール)。
 
 
 

jQueryは未使用だけどjavaScriptを駆使したサイト(1)

jQueryを使っているのかな?とソースを見るとjQueryは使われて無く
オリジナルのJavaScriptで作成されているものが幾つかあったので、
そんなサイトの紹介
 
 

・日産


ショーケース下部のタブでページの内容を切り替えます。また左の「カーラインアップ」
メニューの各項目上にマウスオーバー(クリックしない)するとサブメニューが開きます
(クルマが右からスライドインする演出付き)。
 
 

・ユニクロ


ショーケース左右にある矢印で画像切り替え。またコンテンツボタンに
マウスオーバーすることで説明の出るものがあったり、一定時間で
コンテンツボタン内の画像を切り替えています。
 
  
 

部分的なjQueryの利用(2)

これまでFlashで作成されていたような小さなインタラクティブパーツが
どんどんjQueryに置き換わってきています。その2
 
 

・トヨタ


ショーケースの切り替え、ボタンクリックでサブメニューがポップアップや
PickUpのスクロール
 
 

・ボルボ


上部メニューのプルダウンメニュー表示。
 
 

・ウェッジウッド


左のアコーディオンメニューとショーケースの画像切り替え。
 
 

・なめこぱらだいす


左のメニューをクリックするとサブメニューが展開。
 
 
 

部分的なjQueryの利用(1)

これまでFlashで作成されていたような小さなインタラクティブパーツが
どんどんjQueryに置き換わってきています。
 

・野村證券


ショーケースの切り替えや、タブでのコンテンツ切り替え。
 
 

・三菱電機


ショーケースの切り替えや、ボタンにロールオーバーしたさいの説明表示。
 
 

・パナソニック


ショーケースボタンの画像切り替えとマウスオーバーした際のメニュー表示。
 
 
 

トヨタ:プリウス



jQueryの使いどころは、左上メニュー(グレードとかデザイン)で開くコンテンツ部分。
jquery-json-plugin.jsが利用されているので、外部からデータを読み込んでいる
のだと思います。
 
制作会社がページを作成して、更新は企業内の担当の方がおこなうという運営形式では
更新にプログラムの知識が必要となるような構成はNGになりがちです。しかし
JSONで更新に対応できるようにすればOKになるのかもしれません。
 
JSONはXMLよりもシンプルな記述ができる記述言語です。
参考サイト:Think IT様
 
 
 

博報堂DYメディアパートナーズ


トップページは動くものが多すぎな気がしないでもないサイト。でも
一部のページだけでなくサイト全体で統一された演出になっているところがステキ。
 
jQueryのプラグインとしてはeasingsocialbuttonが利用されています。
あとIE6向けの透過PNG対策用のDD_belatedPNGも。