iPhoneやAndroidなどスマフォサイトでtableを閲覧する場合に、以下のように横にボリュームが大きいと表示崩れが発生する場合があります。
| dummy | dummy | dummy | dummy | dummy | dummy |
|---|---|---|---|---|---|
| dummy | dummy | dummy | dummy | dummy | dummy |
この問題の回避策のひとつとして、横スクロールさせる方法があります。
スマフォブラウザではframe、iframe要素などでスクロールバーを表示させない仕様ですが、
実は、スタイルで指定してあげれば、スクロールバーが表示されなくとも、スクロール操作は可能なのです。
jQueryプラグインを組込む場合、jQueryのバージョンに依存して動作したりしなかったりという事が稀にあります。
例えば、以下のようにjQuery 1.4.4を読み込んでいる既存のページを考えます。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script src="jquery.sample.js"></script>
任意のプラグイン「jquery.sample.js」は1.4.4には対応しておらず、1.8以上のjQueryを必要とするため、
上記のような順でライブラリを読み込むとエラーが発生します。
ここで、1.4.4はCMSのテンプレートとして組み込まれており、サイト全体への影響なども踏まえて簡単にはバージョンアップはできません。
本来、それらの影響を踏まえてバージョンアップすることが望ましいですが、
「バージョンアップできない」という判断に至ったとします。
最近マシンが重くなり、eclipseを使った開発も少しストレスを感じるようになりました。
そこで別のIDEへの乗り換えを検討しているのですが、今回はeclipse orionの環境構築にチャレンジです。
「eclipse orion」はeclipseを更に静的web開発に特化させた開発環境で、HTML、CSS、JavaScriptエディタです。
（基本的にPHPなどプログラムには対応していないので注意が必要です）
webベースでブラウザ上にエディタを展開するのが大きな特徴で、ブラウザでそのままプレビュも行えます。
いわゆるクラウド風ですね。
基本的には以下のサイトからサービスアカウントを作成し、ソースはクラウド上で管理します。
Orion – Open Source Web and Cloud Development Environment
ブラウザ上で動作させるので、eclipseに比べるとだいぶ動作は軽くなるというメリットがあります。
さらに、クラウド上で完結するため、開発の場所を選びません。
しかし、仕事上、ソースなどの管理をクラウドに移行するにはセキュリティや運用上のハードルがあります。
そこで、今回はorionの開発環境をローカルに構築し、ローカルのソースで開発できる環境を作ってみます。
ちなみに私が試した今回の内容は、Windows 7上でorion 8.0をインストールしました。
アプリ開発ブーム？の中、私は個人的にその市場への参入をためらっていました。
100年先に残っているのは結局Webなのではないか、という考えから、とりあえずWeb一本で通していく所存でした。
しかし、「deep link」や「PhoneGap」といったキーワードの登場により、アプリとWebの境界線がなくなるのではないか、今後共存の道が開けていくのではないかという考えに変わりました。
スマートフォン専用のサイトを構築した際に、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以降でしか使えません。