ディレクター

画像などのコンテンツを すべて読み込んでから、
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(){
//ロード完了後の処理
});

デュアルピクセルCMOS AFで、
動画を撮ると、ピントが追従する件ですね。
SONYなどに先行されていた分野ですが、
初めて、この機種からCanonも追いついてきたわけです。
一眼レフの動画は、
なんといっても 35mmのレンズ資産で、
放送機材並みの奥行き感が得られることに価値があります。
ちょっとした取材ものや、小品を作るときに、
助手を連れて行かなくても、手仕舞いがいい、
クレーンがあると便利なんですね。
IFOOTAGE / MiniCraneM1
Carbon Fiber と Aluminium の構成で かなり軽量です。
System5 と ヨドバシで取り扱いがありました。
マンフロットの雲台と、固定式の重りと、
ジッツォの雲台を工夫してセッティングしてみました。
・・・センターを留める部分が、少し弱いようです。
3/8 も利用して ねじは二本使うと止まります。
Max. Load：5kg なので、
カメラは雲台と併せて 2.5kgまでとなります。
ぎりぎり使える範囲です。

ブートストラップでも利用されている、
アイコンのフォント。
Font Awesome
重宝するので、通常のWeb開発にも利用したりしますよね。
これが、まぁ普通に使う分にはよいので、
いいぞ、いいぞ、っと云うかんじで、
CMSで、XMLから選択したりできると
一般ユーザーが、
専門的なことが不明でもハンドリング可能になるんで、
　↓↓↓
スキーマに組込み設置してしまおう。という魂胆で、
意気揚々と出力すると
コンフリクトする部分が出てきます。
現象としては・・・
アイコンの閉じタグが出力されないため、
アイコンがすべてのデータの前にどんどん出てしまい、
コントロールできない不具合となります。
困ったもんです。
===================
指定されているコードの置き方は、
<i class="icon-camera-retro"></i> icon-camera-retro
この、</i> タグが閉じられない ( 出力されてこない ) ので、
特異なクラスの書き方が、xml にコンフリクトするのかと思われます。
===================
よって、回避の考え方として・・・
ただ、急須を通った出がらしのお茶のように、
ただ、スキーマを通ったデータが、
htmlで、そのまま表現できればOKなんですよ。
xmlで無理に出力せず、htmlで出力してやります。
xmlでどうしても出力したい、ギミックがあるスキーマは、
構築前に、スキーマを分割することを考えておくなど、
プロットをまとめてから着手。がよいかもしれません。
軽量で + アイコン画像も用意しなくてよく、
自由なハンドリングも得られるアイコンフォントは、
スキーマに内蔵できると、なかなか重宝するんですよね。

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">

FCKEditorというと、老舗のテキストエディターですが、
http://ckeditor.com
IE10で、管理画面を見ると、
なぜかエディター自体が見えなくなって、
これ、使えないんじゃないのという状態になっていました。
この現象について、
まぁまぁ、モダンブラウザで使えばいいじゃないの。
と、木で鼻をくくるように考えていた ( 古いおっさんの私。
先日 酒宴の席で話題になったので、対応してみました・・・
【 基本的 問題点は… 】
IE10 というのは、初めて IEの二桁になった ブラウザ なんですね。
一桁のブラウザ名にしか対応していなかったシステムのようなので、
そのあたりを中心に、JS内を修正していきます。・・・
( 次の CKEditor も出ているので、それを使えよって話もあります。)
( 開発元の、Frederico Knabbenが修正しろよという話もあります。 )
( とか云っても、もう、FCKEditorでええやん。と思っている自分。 )
では、仕方がないので、変更してみましょう。
☆ 変更してあげる ( ２ファイル名 + 合計４箇所 )
【 fckeditor.js 】
var sBrowserVersion = navigator.appVersion.match(/MSIE (.¥..)/)[1] ;
これを
var sBrowserVersion = navigator.appVersion.match(/MSIE ([¥d.]+)/)[1] ;
=======================
【 fckeditorcode_ie.js 】
e.scopeName!=’HTML’
このあたりを
if(FCKBrowserInfo.IsIE&& e.scopeName && e.scopeName!=’HTML’)
————–
D.parentElement().document!=B
このあたりを
if(D.parentElement().document && D.parentElement().document!=B)
————–
B.open("GET",A,false);
このあたりを
B.open("GET",A,false);
try {
B.responseType = "msxml-document";
} catch(e) {};
B.send(null);
=======================
☆ 管理画面のドキュメントモードを下げる
<meta http-equiv=“X-UA-Compatible” content=“IE=8” />
XOOPS / WordPress / MOVABLETYPE
それぞれテーマとか、多少ファイルを見て。
=======================
こうやってあげたらよさげです。
でも、ソースや画像を挿入できるんで、
脆弱性が突かれやすそうなツールでもあるんですよね。

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策定後には、ブラウザも進んで
変わっていくのだと思います。

Retinaディスプレイ用にデザインするとき
対策方法としては・・・
背景画像などは、CSSスプライトなどで
解像度別に指定したりしますよね。
JSを使う方法では、Retina.js など、
@2x 画像を用意するのみで対応できるものもあります。
http://retinajs.com
ここで問題なのは、
googleMapが、すでにRetinaディスプレイ用に対応しているため、
Mapを含むページ全体に、
Retina.js などの JSをセットすると、
コンフリクトするということなんですね。
やってみてください。( 笑
Mapが表示されなくなるんで。。。
じゃどうすんのよ。というのはまぁ考えてくださいね。

Apple、iMacをアップデート
最大4GBのビデオメモリ
NVIDIA GeForce GTX 780M
PCIeベースのフラッシュストレージ
４Ｋでなければ、もう十分の領域ですね。

フルハイビジョンの編集マシンは、
Hyper-Threadingに対応する
第3世代のクアッドコア Core i7 が担当しているのですが、
これがまた、
統合型グラフィックスが、アップするという話です。
Intel HD Graphics 4000
　　↓↓↓↓
GT3e(Iris Pro Graphics 5200)
現在でも Ivy Bridge ４コア、
OSXで、CPU稼働率を見ながら仕事をしていると、
クイックタイム変換など、
仮想プロセッサが立ち上がって
８スレッドを使いこなしているのがよく判ります。
同時処理が８スレです。笑っちゃいます・・・
数年前、２スレッドが 標準だった頃と比べると、
メモリーも、ガシガシに組んでも使い切らず、
CPUの演算能力はスゴイですよね。
Ivy Bridgeと同じ 22nm
メモリコントローラもDDR3-1600ですが、
グラフィックスのユニットが倍になるらしいので、
大画面での動画編集が
さらに快適になるかもしれません。
Mac に搭載されるのが楽しみです。

HTML5へのXML落とし込みで、
xslt デバッグの出来るアプリのチョイスが
過渡期に来ているようです。
デバッグといっても、
まぁ、コーディングミスというか、
タグのありかたを
どう揃えるかですが。。。
HTML5から、
面白いタグが増えたので、
article とか section とか
その文字と、xslt がコンフリクトしているのか、
２時間くらいで組んでしまうコードが、エラーでまくりで、
朝６時から14時間も、
コードばらして、デバッグしてました。
xslt は、いつも集中して数時間要るので、
充実した時間の過ごし方になるのはいいんだけどね。
★–☆–★–☆–★–☆–★–☆
ハイビジョン動画の編集をやりながら、
Webデザイン、
印刷原稿の色校とかクライアントと印刷打合せ、
で、xslt なんぞ組んでいると、
ファイルの重さが、方や数ギガと、数百mb、
落差が激しいので、
変な肩の凝り方をします。