スマートフォン専用のサイトを構築した際に、PCでスマートフォンサイトを閲覧してほしくない、逆に、スマートフォンでPCサイトを閲覧をしてほしくないといった要件は少なくありません。
Webページにアクセスしてきた端末情報を判定し、リダイレクトさせてしまえばいいのですが、その手法でも「.htaccess」を使ったり、javascriptやPHPを使ったりといくつか方法があります。
今回はjavascriptを使った方法を紹介します。
レスポンシブが主流になった昨今ですが、
レスポンシブはコンテンツ幅に関わらずあらゆるデバイスでダイナミックな表現を実現するメリットがあります。
今回、そんな中でのテクニックを1つ。
例えば、横幅が800pxのコンテンツエリアをもつサイトがあると仮定します。
そこに1000pxの画像を設置すると、ブラウザの横スクロールが表示されてしまい、コンテンツの中央がずれてしまいます。
※当サイトはコンテンツエリア指定のないレスポンシブサイトなので、十分に再現できていません。すみません。。
画像を背景として設置するのも1つの解決策ですが、
コンテンツとして画像を設置したい場合に、以下の方法があります。
レスポンシブ対応のサイトにGoogle Mapsを設置する方法です。
Google Mapsの埋め込みコードをそのまま設置すると、レスポンシブサイトの画面サイズを変更した際に、地図表示エリアが画面をはみ出したり、他のコンテンツに重なったりと、表示崩れが発生します。
そこで、以下のようにレスポンシブ対応することで崩れを回避することができます。
<div id="map_canvas"> <iframe...（埋め込みコード略）.../iframe> </div>
#map_canvas{
position: relative;
padding: 0 0 56%;
height: 0;
overflow: hidden;
}
#map_canvas iframe{
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
レスポンシブなので、サイズを横幅100%に対しての縦幅を「padding-bottom: 56%;」の割合で指定しています。
ここでは16:9のサイズを想定して9/16≒0.56で計算しています。
以下は、実際に貼り付けた例です。
ちなみにJavaScript APIで設置する場合、iframeにあたるタグには「position: absolute;」などのスタイルが効いているため、以下のようにするだけでレスポンシブ対応が可能です。
（APIを呼び出すJavaScriptコード略）
var map = new google.maps.Map(document.getElementById("map_canvas"),
#map_canvas{
position: relative;
padding: 0 0 56%;
height: 0;
overflow: hidden;
}
※「#map_canvas」直下のタグに「position: absolute;」などのスタイルが効いている
さくらレンタルサーバ上でWordPressのマルチサイト機能を有効にしてみました。
WordPressは基本的に1本で1サイトしか管理できませんでしたが、バージョン3.0からマルチサイト機能が追加され、これにより複数サイトを管理することができます。
これまで何度かトライしては失敗していたのですが、ネットで実装例の記事も充実してきたので、それらを頼りに再チャレンジです。
また、多くは新規WordPressインストール時を奨励していますが、今回はあえてハードルを上げて既存のWordPressを一か所に集約する目的で、マルチサイト化にチャレンジしてみたいと思います。
半角英数で、途中にスペースのない長い文字をHTMLに書くと、ブラウザはそれを「１つの単語」と認識して改行してくれません。
具体的にはこういう感じ↓
abcde12345abcde12345abcde12345abcde12345abcde12345abcde12345abcde12345abcde12345abcde12345
ちなみに日本語など全角文字であれば、どのタイミングでも改行してくれます。２バイト文字は複雑で、種類も多く、「単語」とは判定しづらいんでしょうね。
さて、この問題、これまでだと、PHPで無理やり処理して、１文字毎に空文字やスペースをサンドイッチ状に挟みこむことでごまかして改行したり、クライアントに対して「そんな長い単語ないでしょ」で説得したり、妥協ともいえる方法で片付けてきました。
しかし、調べてみるとあっさりとした解決法が見つかりました。CSSのword-wrapプロパティです。
例えば以下のように指定してあげます。
.sample{
word-wrap: break-word;
}
そうすると、先ほどの文字列がこのようになるんですね↓
abcde12345abcde12345abcde12345abcde12345abcde12345abcde12345abcde12345abcde12345abcde12345
簡単ですね。IE6、最新のFirefox、Google Chromeでも問題ないようです。
しかし、このプロパティはCSS3のプロパティを先行採用したものらしく、validationチェックを通らない場合がありますので、場面に応じて使いわけたほうがよいかもしれませんね。
いや、でもやっぱりそんな長い単語はないでしょう。
PHPでは取得した任意のTIMESTAMPから、フォーマットを指定して柔軟に表示可能な便利なクラス「DateTime」があります。
$date = new DateTime('2009-02-25 14:52:10');
echo $date->format("Y/m/d");
例えば上記の場合、「2009/02/25」と表示される。とても便利です。
しかし、これがPHP5.2以降でしか使えません。
eclipseに代わるWeb統合開発環境として以前から「Brackets」を検討していのですが、思い切って乗り換える事にしました。
Brackets – A modern, open source code editor that understands web design.
eclipseは私がJavaプログラマだった頃から愛用していて、それに慣れていたということもあり、Web業界に入ってからも利用し続けていました。
しかし、jQuery、WordPress、HTML5、CSS3やSassなど新技術への対応がいまいちです。プラグインを入れたり、細かく設定すればよいのですが、それが面倒なこともあります。がんばった割には完全に機能させることができずに四苦八苦というこの頃でした。
そして何より動作が重い。やたらメモリを消費するので、最近のモバイルPCでの開発には向いていません。
そこで、以前から話題になっていた「Brackets」に注目していました。
IEやChromeなど一部ブラウザで、スタイルでフォントサイズをピクセルなどで指定すると、ブラウザの文字サイズ変更機能が効かなくなるという問題があります。解決策としては、フォントサイズをパーセントで指定すればよいのですが、構築の際に毎回「○○pxは何%だっけ？」と調べることが多いので、ここで一覧としてまとめてみます。
こちらでは以下の環境で検証した結果を一覧としています。
- OSはWindows7 64bit Professional
- IE8以上、Firefox最新版、Google Chrome最新版（IE6、IE7は切り捨て）
- フォント指定は「メイリオ」
最近よく耳にするようになったBootstrapをインストールしてみました。
Bootstrap
BootstrapはHTML、CSS、Javascriptをベースとしたフレームワークで、活用することでコーディング作業を軽減することができます。
これまで、クロスブラウザのために、reset cssやjQueryなどのベースライブラリが開発されてきましたが、こられのしくみをまとめて、パッケージ化したものと考えればイメージしやすいかもしれません。（jQueryについてはBootstrap導入に必須です）
Bootstrapを活用して開発を進めれば、レスポンシブ対応も可能で、iPhoneやAndroidのモバイル端末、iPadなどのタブレット用のサイト対応もコストを抑えることができます。