スマートフォン


世界40,000局以上のウェブコンテンツを
一貫した使いやすいインターフェースで
安全に自動車に提供するクラウドサービス。
ポッドキャストなども色々と入っています。
http://www.aharadio.com/what-is-aha/in-your-car

スマートフォン


Bootstrap 3.0でも利用されていますが、
140個ほどのアイコンがあります。
ライセンスは少し複雑ですので、利用する前に確認しましょう。
http://glyphicons.com/license/
Bootstrap Glyphicons
http://marcoceppi.github.io/bootstrap-glyphicons/

スマートフォン


定番のjQueryのプラグインですね。
1.X.X などでは、ライセンスがゆるめでした。
http://fancybox.net
★バージョン2になってからレスポンシブに対応、
ディスプレーサイズが変更されたり、小さいサイズにも可変するんですね。
コーダーは、利用する際にライセンスを確認し、
必ずすべて見ておくべきですよね。
http://fancyapps.com/fancybox/
★シングルドメイン / マルチドメイン
ライセンスの購入
http://sites.fastspring.com/fancyapps/product/store
レスポンシブ対応で、最も重宝するのは、
この書き出しをCMSから自動化している際に、
ウィンドウのレスポンシブを、自社でコーディングしなくて良い、
という点ですね。
開発側としては、マルチライセンスで購入。
委託案件でも設置しますが、クライアントがリリースする部分は、
リリースドメインの数か、範囲を鑑みて自社購入となります。

スマートフォン


画像などのコンテンツを すべて読み込んでから、
JS を動作させたいという場合があります。
( JS 動作が先だと、空のコンテンツのため、崩れる )
そういったときに、
開発環境が高速回線だと、崩れる現象が見えないので
気にならないのですが、
実際の利用環境では、デバイスによって、
・アンテナが、シングルだったりデュアルだったり、
・回線が 3Gだったり、LTEだったりと、
まちまちなので、
低速な環境を想定した上で、行っておきたいのですね。
================
1、
コンテンツの読み込みを先にさせるため、
jQueryの 通常のファンクションを変更する。
$(function() { ・・・
ロードしてから ( ページがすべて読み込まれてから関数実行 ) に変更する。
$(window).load(function(){ ・・・
2、
読ませる順序を意識することでスムーズにさせる。
head 内に 置かないで、
body 閉じタグ直前に JS を下ろしてやる。
3、
JS を なるべく一つのファイルにして、さらに圧縮をかける。
4、
CSSの参照タグを JS の参照タグよりも先に記述する、
5、
favicon.icoを設置する。
ブラウザはバックグラウンドで favicon.icoを要求してきている。
さっさとキャッシュさせておく。
==================
JS 内部コーディングの高速化は別途。
追記 : イメージーズローデッドをつかう書き方もありました。
$("#XXXXX").imagesLoaded( function(){
//ロード完了後の処理
});

スマートフォン


HTML5は、スマートフォンサイト、
一般的なレスポンシブ対応でもよく使いますが、
ビューポートや、各種CSSなどの適応後に、
Google Mapで地図拡大などの
コントロール表示が崩れることがあります。
( スケールとかバルーンの窓枠の崩れ etc… )
レスポンシブでは、
テキストの折り返しだけでなく、
画像など imgの最大表示幅を % 設定で
伸縮させるコードを置いたりするのですが、
これが、コンフリクトするんですね。
( G-Mapと合わせてはじめて発生する経験値 )
■ G-Mapの img / max-width を解放してやります。
#gmap img {
max-width: none;
}
■ あわせてコードのV3mapバージョンを外しておくと、
コントロール表示が自動最新になっていたりします。
( 3.9 とか 3.10 とか書かない )
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true または false">

スマートフォン


YouTubeをホームページに埋め込みたい案件があります。
その際に、ただ埋め込むのではなくて、
レスポンシブデザインにしたいんじゃ。という場合もあるんですね。
( 端末・デバイスに合わせて伸縮 )
レスポンシブなら、インラインフレームにして、
その枠を100%にしておけば、いいだろうと、
まぁ単純に考えたりしがちですが、
これがまた、PCでは見れても、
iPadで見ると、再現できなかったりするんですね。
ホホウ。何でじゃ。どうするんじゃ。( By 寛平
具体的には、レスポンシブ案件なら、
iPhone / iPadのSafariで <iframe> の扱いに不具合がある部分、
YouTubeかApple側が改善するまで、
グーグルの公式ブログにある対応策を使って回避してあげるんですね。
■ iframe 埋め込み式 YouTube Player 向け
  JavaScript Player API のご紹介

これを、自社スキーマのCMSに改変した XSLTで提供中。
======================
Bootstrapなどのコードでも、外国のサイトだと、
余裕でYouTubeの埋め込みサイトを 普通に iPad でも見ていそうですが、
大学のサイトなんかでも、あまり再現対応できていないようです。・・・
( オリジナル レスポンシブWebで埋め込みYouTubeが iPadで見れない )
・・では、あまり格好よくはないですよね。
======================
動画は、Flashベースであったとしても、
ブラウザによったり、
iOSベースの扱いによったりして、
見ている動画が、すべて同じファイルとは限らないんですが、
一般には、ひとくくりで 動画だと思われているだけなんですね。
まだまだ、HTML5策定後には、ブラウザも進んで
変わっていくのだと思います。