スポンサードリンク

2012年02月01日

モバイル、スマホ、パソコンサイトの振り分け

WEBサイトを携帯電話、スマートフォン、パソコンとアクセスしてきたデバイスによって振り分ける設定。

1. .htaccessに 書き込む


/smart/スマホ用アドレス
/m/ モバイル用アドレス
*****************************
RewriteEngine On

# iPod
RewriteCond %{HTTP_USER_AGENT} iPod
RewriteRule ^$ /smart/ [R]
RewriteCond %{HTTP_COOKIE} !viewmode=pc


# iPhone
RewriteCond %{HTTP_USER_AGENT} iPhone
RewriteRule ^$ /smart/ [R]
RewriteCond %{HTTP_COOKIE} !viewmode=pc




# Android
RewriteCond %{HTTP_USER_AGENT} Android
RewriteRule ^$ /smart/ [R]
RewriteCond %{HTTP_COOKIE} !viewmode=pc



# DoCoMo
RewriteCond %{HTTP_USER_AGENT} DoCoMo
RewriteRule ^$ /m/ [R]

# Softbank
RewriteCond %{HTTP_USER_AGENT} J-PHONE
RewriteRule ^$ /m/ [R]
RewriteCond %{HTTP_USER_AGENT} Vodafone
RewriteRule ^$ /m/ [R]
RewriteCond %{HTTP_USER_AGENT} SoftBank
RewriteRule ^$ /m/ [R]

# AU KDDI
RewriteCond %{HTTP_USER_AGENT} KDDI
RewriteRule ^$ /m/ [R]
RewriteCond %{HTTP_USER_AGENT} UP.Browser
RewriteRule ^$ /m/ [R]

# DDI Pocket
RewriteCond %{HTTP_USER_AGENT} DDIPOCKET
RewriteRule ^$ /m/ [R]

# WILLCOM
RewriteCond %{HTTP_USER_AGENT} WILLCOM
RewriteRule ^$ /m/ [R]


*****************************


2.スマートフォンは PCモードに切り替えれるようにする

スマホのページに

<script>

 function changeView() {

  $.cookie("viewmode", "pc", { path: "/" });

 }

 </script>




3.PCサイトへのリンクを張る

<a href="../index.html" onclick="changeView()">PCサイトへ</a>





posted by shige at 17:11| Comment(0) | WEBサイト制作 | このブログの読者になる | 更新情報をチェックする

独自ドメインブログと無料ブログ比較

ブログを作る時に大きく2つ種類があります。 
独自ドメインを取得してMovableTypeやWordPressなどのソフトを使う方法と
アメブロやFC2などの無料のブログを使う方法です。

それぞれ長所と短所があるので僕なりにあげてみました。

無料ブログ
長所:簡単に始めれる、最初からアクセスが見込まれる、デザインがすぐに変更できる、ユーザー同士のコミュニケーションがはかれる
短所:広告がはいる、自由度が少ない、突然閉鎖される時もある、ブログ間の移行ができない場合がある

独自ドメインブログ
長所:自由度が高い、閉鎖されることはない、ブログの移行が自由にできる、プラグインがたくさん用意されている
短所:始める時に手順が多い、技術が必要、有料である、最初のアクセスが少ない

企業等の社員さんや社長さんのブログは会社のドメインを使ったブログの方が会社のドメインを検索エンジンに強くするという意味でも独自ドメインが良いでしょう。



posted by shige at 09:17| Comment(0) | WEBサイト制作 | このブログの読者になる | 更新情報をチェックする

2012年01月31日

スマホサイト作るときの注意点

ボタンとボタンの間隔は7mm以上にする
Androidは1.6以降 iphone3以降で考える
リキッドレイアウトが良い 縦横両方の画面表示に対応させるため。
マウスオーバーが使えないので見ただけでリンクとわかるようにデザインする。
電話番号に対して手動で電話発信機能をつける 072-233-0214
ルートに apple-touch-icon.pngファイルを置くとiphoneでホーム画面に追加するとアプリのようなアイコンを表示できる。
それぞれの解像度
iphone3 320×480
iPhone4 640×960
アンドロイドはそれぞれ違う。 例:X06HT 480×800
.htaccessファイルを利用して PCとスマホの表示を振り分ける
画像はPNG形式
text-shadowをスタイルシートに使えば文字を目立たせることができる。
動画を再生させるときは m4v(m4vは圧縮コーデックがh264)
posted by shige at 22:38| Comment(0) | WEBサイト制作 | このブログの読者になる | 更新情報をチェックする
ゆず茶日記」の先頭へ
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。