■Web

■スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

■スマートフォン対応

「既存のサイトのスマホ対応」の課題をもらいセコセコとやってきました。

以下、自分用のメモなので興味ない方はスルーしてください。



UserAgentを判別し、スマホ用に作ったSPディレクトリにアクセスする方法ではなく、既存のHTMLソースを使ってCSSでスマホ最適化をしようということ。

まず最初にやったことは、

UserAgent(以下、UA)を判別して、スマートフォンからのアクセスだった場合、sp_style.cssを。
PCからのアクセスだった場合、style.cssを適用させようということ。




<?php
if (preg_match('/(iPhone|iPod|Android)/i', $_SERVER['HTTP_USER_AGENT'])) {
$userDevice = 'smartPhone';
}
if ($userDevice === 'smartPhone') {
echo '<link rel="stylesheet" type="text/css" href="/css/sp_style.css" />';
} else {
echo '<link rel="stylesheet" type="text/css" href="/css/style.css" />';
}
?>


ここで iPhone,iPod,Androidのいずれかであれば、 変数'userDevice'に 'smartPhone'を入れています。

そして if文
'userDevice'に'smartPhone'が入っていたら スマホ用である'sp_style.css'を出力する。
'smartPhone'でなければ、PC用である’style.css’といった処理をしました。

私のサイトだと


<?php
if (preg_match('/(iPhone|iPod|Android)/i', $_SERVER['HTTP_USER_AGENT'])) {
$userDevice = 'smartPhone';
}
?>


上記の部分はuseragent.php



残りの部分(CSSを読み込む部分)は


<?php
if ($userDevice === 'smartPhone') {
echo '<link rel="stylesheet" type="text/css" href="/css/sp_style.css" />';
echo '<link rel="stylesheet" type="text/css" href="/css/スマホ用javascriptで使用してるCSS" />';
} else {
echo '<link rel="stylesheet" type="text/css" href="/css/style.css" />';
echo '<link rel="stylesheet" type="text/css" href="PC用javascriptで使用してるCSS" />';
}
?>


上記部分は ua_css.php(仮)としています。

HTML内で

<?php include_once(dirname(__FILE__) . "./~/useragent.php"); ?>
<?php include_once(dirname(__FILE__) . "./~/ua_css.php"); ?>

という風に記述しています。

他のページでも共通で出力したい場合、このように外部ファイル化しておくと変更の時に楽ちん。というわけです。

ua_css.php(仮)でわかると思いますが、PC用ページで使うjqueryとスマホページで使うjqueryも分けています。

この部分はHTML内に


<script type="application/javascript">
<!--
$(function(){
<?php if ($userDevice === 'smartPhone'): ?>
$('#対応させたいdiv要素名 ul li').flickSlide({target:'#対応させたいdiv要素名>ul', duration:5000});
<?php else: ?>
$('#対応させたいdiv要素名 a').lightBox();
<?php endif; ?>
});
-->
</script>


このように書いています。

PCからのアクセスの場合
$('#対応させたいdiv要素名 a').lightBox();
のみが出力されています。

できるだけHTMLソースコードはシンプルに、そしてページのソースを見た時に不必要なものは見せないということが可能です。



UA偽装しなければ、スマホとPCで違う表示になっているはずです。

PC用ではjQuery lightBox plugin

スマホ用ではflickslideを使用しています。


サイトのソースを見るとphpで最終的に選ばれた出力結果しか表示しないからそのデバイス専用に作られた1ページのように見えるし、すっきりする。

これはとても便利でした。


javascriptでUA判別してもいいのですが(実はjavascriptでも書いてみたけどうまく動かなかったw)

1.ユーザエージェント判別ロジックがバレる
2.それぞれのデバイスによって読み込むファイルがバレる
3.(表示される)htmlソースコードが長くなる
4.現在ではjavascriptが使えない環境がほぼ無いので関係ないけど、念のためサーバーサイドで処理する

結論は、閲覧者の環境で不要なものは極力表示しないほうが望ましい

という理由でphpを使いました という話。


まだスマホ最適化が終わったわけではないのですが、一区切りついたかなって思ったので一度復習を兼ねて記事にしてみました。

ゼロからここまでこれたのは、とある方の助けと協力があったお陰です。

スマホサイトが完成したら十万石饅頭を持って伺いますね。



スポンサーサイト

プロフィール

おもてぃ

Author:おもてぃ
anime,PCゲーム,Motorcycle,Camera,
American vintage clothesを愛してやまない男の子。
美少女フィギュアとアンティークグッズに囲まれて生活しております

ましろ色シンフォニー

ヨスガノソラ

カレンダー

05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -

応援バナー

PASTA! -PALETTE PREMIUM FESTA- 2013年10月20日(日)開催決定!

amazon

応援バナー

『ワルキューレロマンツェ』応援中です!

アクセスカウンター

検索フォーム

ブロとも申請フォーム

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。