@GT86iのブログ一覧

２月１５～１６日の冬季運転教習会に行った帰り道、中央高速で飛び石被害に遭い、フロントガラスに小さなヒビが入ってしまいました。（涙）
この他にもそれ以前に飛び石による細かい傷が結構沢山あって傷だらけだった（←写真参考）ので、保険更新する前にガラス交換することにしました。

交換部品	部品番号	数	金額
ｶﾞﾗｽｾｯﾄ，ﾌﾛﾝﾄｳｲﾝﾄﾞｼｰﾙﾄﾞ	73111S2A003	1	59,430
ﾗﾊﾞｰｾｯﾄ，ﾌﾛﾝﾄｳｲﾝﾄﾞｼｰﾙﾄﾞﾀﾞﾑ	04731S2A000	1	1,176
ﾓｰﾙﾃﾞｨﾝｸﾞ，ﾌﾛﾝﾄｳｲﾝﾄﾞｼｰﾙﾄﾞ	73150S2A013	1	5,985
ｼｰﾙA，ﾌﾛﾝﾄｳｲﾝﾄﾞｼｰﾙﾄﾞﾓｰﾙﾃﾞｨﾝｸﾞ	73122S04000	2	240
ｼｰﾙ，ﾌﾛﾝﾄｳｲﾝﾄﾞｼｰﾙﾄﾞ	73127S04000	2	492
ﾌｧｽﾅｰA，ﾌﾛﾝﾄｳｲﾝﾄﾞｼｰﾙﾄﾞ	91568SX0003	2	440
ﾌｧｽﾅｰB，ﾌﾛﾝﾄｳｲﾝﾄﾞｼｰﾙﾄﾞ	91569SX0013	2	734
ｸﾘｯﾌﾟ，ｶｳﾙﾄｯﾌﾟ	90602SX0003	1	68
ｸﾘｯﾌﾟ，ｶｳﾙﾄｯﾌﾟ	90602S2A003	8	1,216
ｸﾞﾛﾒｯﾄ，ｶｳﾙﾄｯﾌﾟ	90603S2A003	8	624
ｸﾞﾛﾒｯﾄ，ｶｳﾙﾄｯﾌﾟ	90601S30003	1	89

『すーぱードライビングテクニック養成マシーン』は今年６月で１２年目になりますが、また一つ部品が新しくなり、視界良好になりました。
喜んでいいのか、悲しんでいいのか。（苦笑）

ちなみに、飛び石被害でガラス交換したのは今回が２回目で、他にも駐車中に車の形が一部変形してたのは４回（内２回は当て逃げ）と、神様に見放された不幸なワタクシ。

ワタクシは１２年以上 交通違反で警察にお世話になったことのない、
しかも１４年間のサーキット走行でまだ一度も赤旗を出した事もない、
超・ウルトラ・スーパー・すっげ～優良なドライバーなのに．．．。

あまりこのブログには登場回数が少ないワタクシの愛車「BMW 328iクーペ」ですが、
２ドアの「BMW 328」といえば BMW の中でも名車だけに与えられる名前の車で、
“真のBMW 通”の誰もが憧れる車なのです。（←ほんまかいな、笑）


２週間前の話になりますが、
その２０世紀に造られた名車『黒い３６くーぺ２号』の
の車検でした。

６回目の車検まではディーラーで受けていましたが、
今回は古いBMW の整備が得意？とするこちらにお願いしました。


これを機に、新車並みにリフレッシュしたかったのですが、
お金がなかったので、『悪いところは見なかったことにして下さい』と言いました。（笑）
お蔭様で安く車検を通すことができ、ありがとうございました。m(_ _)m


無事に？車検も終わり、もう２年乗れる２０世紀の名車「BMW 328iクーペ」。
E46 Ｍ３ cslに飽きたあなた、この名車のオーナーになれるチャンスです。
ワタクシの車と交換しましょう！

YouTbe では1月20日、Flashがなくても動画を再生できるHTML5ベースの動画プレイヤーをテスト公開しました。 それにともないYouTbe 動画をWEBサイトに貼り付けるための標準の埋め込みコードが<iframe ～></iframe>タグに変り、そのままでは【 みんカラ 】ブログに動画を貼り付けることができなくなって困った方もおられると思います。
この新しい埋め込みコードを使用すると、Flashがインストールされている場合はFlashで再生し、「Internet Explorer 9」「Firefox 4」「Google Chrome」「Safari 4」といったHTML5動画対応のブラウザを使用していて、YouTube HTML5 動画設定を有効にしている場合はHTML5プレーヤーで再生されるといった具合に、状況に応じて切り分けてくれるハイブリット仕様になっているようです。
残念ながら、【みんカラ】ブログでは<iframe ～></iframe>タグは無効になるようになっているため、この埋め込みコードで動画を貼り付けることはできませんが。

◇ YouTube 動画プレイヤー

現在のところYouTube 動画プレーヤーはActionScript 2 player，ActionScript 3 player，HTML5 player の３タイプのビデオプレーヤーがあるようです。
ActionScript 2 player，ActionScript 3 playerで動画をみるには、ブラウザにAdobe Flash Playerがインストールされている必要があります。

HTML5 playerで動画をみるには、次世代Web標準技術の一つで HTML 5 の<video>タグと、H.264 動画コーデックまたは WebM 形式（と VP8 コーデック）をサポートしているブラウザが必要です。

YouTube HTML5 Video player 対応ブラウザ のサポートビデオコーデック

ブラウザ	MPEG-4	H.264	Ogg/Theora	WebM
Internet Explorer 9		○	×
Google Chrome 6 以上	×	○	○	○
Firefox 4 以上	×	×	○	○
Safari 4 以上	○	○	×	×
Opera 10.6 以上		×	○	○
備考 Internet Explorer 6、7、8でもGoogle Chrome Frameをインストールすることで対応可能

再生の手順としては、まず上記対応ブラウザで 「http://www.youtube.com/html5/」にアクセスし、
「HTML5 試用版を有効にする」と書かれたリンクをクリックしてから見るか、
もしくは、見ようとするその動画の単独ページのアドレスの後に「&html5=True」を追加したＵＲＬで見ます。

【 例 】

http://www.youtube.com/watch?v=OiKFCzMxJik&html5=True

YouTubeでは現在、新規にアップロードされる動画はすべてWebMフォーマットに変換するようにしているようですが、既存の動画については変換を進めている最中なのでエンコードされていない動画は見られない場合もあります。
広告付きの動画はサポートされていません（Flash プレーヤーで再生されます）。 動画アノテーションは、HTML5 動画プレーヤーではサポートされていません 。

YouTube HTML5プレイヤーの便利な機能の一つに再生速度が変えられるようになりました。
例えば、公開されている車載映像をスロー再生することができるのです！
ただし、今のところ対応コーデックに関係からか？Google ChromeでないとワタクシのＰＣではスロー再生はできないようです。（Internet Explorer 9 については未確認）


AS2プレイヤーとは従来の動画プレイヤーで、YouTube 動画の単独ページから埋め込みコードを取得する際に「古い埋め込みコードを使用する」を選択した際に表示されるものです。

AS3プレイヤーは通常、YouTube 動画の単独ページ等で表示されるタイプのプレイヤーです。
AS2プレイヤーとの見た目の違いは動画下のビデオコントロールバーのデザインが少し違うだけです。
今のところ、埋め込みコードのYouTube 動画 SWF URL のビデオＩＤの後の?より後にversion=3パラメータを追加するとAS3プレイヤーで表示されます。
なお、AS3プレイヤーでは以前紹介した動画コントロール バーの背景色と境界線のサブ カラーを設定するパラメータには対応していないようです。

YouTube動画でサーキット攻略を研究しておられる方、HTML5 動画プレーヤーをお試しあれ。（笑）

前回のブログでは、HTML5/CSS3といった次世代Web標準技術の一つで背景色や文字の色などを透過（半透明）指定する方法（RGBaプロパティバリュー）について紹介しましたが、今回のブログテーマはそのRGBaプロパティバリューを用いて【みんカラ】ブログをカスタマイズする方法を紹介したいと思います。

その前に【みんカラ】ブログのページ全体の背景に背景画像を表示させる基本的な方法は、みんカラ　サポートブログでの「カスタムスタイルシートについて」「簡易編集｜ページの背景」などを参考にしてください。

まず 「みんカラブルー」や「みんカラブラック」などの基本スタイルにあるプロフィール ページ以外の各ページにあるグレーの外枠線で囲まれた部分のページのスタイルを変更するには、ログインしてマイページ ＞ スタイルシート ＞ スタイルシート詳細編集 ＞ コンテンツ共通 のページに進みます。
■ ユーザーコンテンツ(共通)の下にあるコンテンツ表示上部，コンテンツ表示，コンテンツ表示下部の中の background:～; が背景を指定するためのプロパティです。

コンテンツ領域 div#BodyBlockMain	overflow:hidden;
コンテンツ表示上部 div.contentsHeader	margin:0px; padding:0px; background:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/010/contentsHeader.gif) no-repeat bottom left; height:4px; width:620px; clear:both;
コンテンツ表示 div.contents	margin:0px; padding:10px 20px 8px 20px; background:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/010/contents.gif) repeat-y; width:580px;
コンテンツ表示下部 div.contentsFooter	margin:0 0 10px 0; padding:0px; background:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/010/contentsFooter.gif) no-repeat top center; height:4px; width:620px;

上記の表は、「みんカラブラック」を基にした基本スタイルのスタイルシート例で、プロフィール ページ以外の各ページにあるグレーの外枠線で囲まれた部分をスタイル指定する箇所です。
この部分は３種類の背景画像を組み合わせて四隅が角丸になった外枠線を表示させていますが、背景画像を使わなくてもスタイルシートで背景色と外枠線のスタイル指定をすることで同じように表示することが出来ます。
（※ 『Internet Explorer 8』以下のバージョンでは角丸にするスタイルシートに対応していません）

背景色を設定するには background-color:～;、
外枠線を設定するには border:～;、
外枠線の四隅を角丸にするには border-radius:～;
というプロパティで指定します。

透過形式の背景画像を用いないで背景色を透過させるには前回のブログで紹介したRGBaプロパティバリューで背景色を指定します。

「みんカラブラック」を基にした基本スタイルのスタイルシート変更例

コンテンツ領域 div#BodyBlockMain	overflow:hidden;
コンテンツ表示上部 div.contentsHeader	margin:0px; padding:0px; height:0px; width:620px; clear:both;
コンテンツ表示 div.contents	margin:0px; padding:13px 19px 11px 19px; background-color:#000; background:rgba(0,0,0,0.7); width:580px; border:1px solid #666; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
コンテンツ表示下部 div.contentsFooter	margin:0 0 10px 0; padding:0px; height:0px; width:620px;

上記表のコンテンツ表示（div.contents）部分のbackground-color:#000;は
RGBaプロパティバリューに対応してないブラウザで見た場合に黒色の背景色で表示させるためのスタイルシートで、 その下のbackground:rgba(0,0,0,0.7);は対応するブラウザで透明度70%の黒色の背景色で表示させるためのスタイルシートです。
透明度は、0.0（完全に透明）～1.0（完全に不透明）の数値で指定します。
仮に透明度50%の白色の背景色にしたい場合には、
background-color:#fff;
background:rgba(255,255,255,0.5);
と表記します。
※なお、スタイルシートは半角英数で記入することが基本です。

border:1px solid #666;は灰色（#666）の1pxの太さで外枠線を表示させるスタイルシートです。

-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;は外枠線の四隅を半径5pxの角丸にするためのスタイルシートです。ただし、『Internet Explorer 8』以下のバージョンでは対応していませんので、未対応のブラウザでは直角の外枠線で表示されます。


コンテンツ表示部分中にある点線下のブログ投稿日時などを表示する部分や愛車紹介ページの愛車の登録日を表示する部分にも別途で背景色が設定されていますので、この部分も変えたい場合は下記の黄緑で指定しているカラーコード部分（#000）だけを削除するとよいと思います。

マイページ ＞ スタイルシート ＞ スタイルシート詳細編集 ＞ ブログ → ■ ユーザーコンテンツ(ブログ)
ブログ本文 div.blogMemo
ブログ情報 div.blogPosted	clear:both; text-align:right; background:#000 url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/010/line.gif) repeat-x top; margin-top:2em; padding-top:10px; font-size:12px; width:100%;

マイページ ＞ スタイルシート ＞ スタイルシート詳細編集 ＞ 愛車紹介 → ■ ユーザーコンテンツ(愛車紹介)
愛車リスト-愛車の登録日 userCarListEntryDate	text-align:right; background:#000 url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/010/line.gif) repeat-x top; clear:both; width:100%; padding:5px; font-size:12px;

透明度を指定したＰＮＧ画像を使ったスタイルシート変更例

RGBaプロパティバリューは前回説明したように、「Internet Explorer 9」や「Google Chrome 2」以上，「Firefox 3」以上，「Safari 3.1」以上のブラウザでないと対応していませんので、「Internet Explorer 7」や「Internet Explorer 8」などのブラウザでも透過表示させるには、透明度を指定したＰＮＧ画像を用意して背景を指定する必要があります。

コンテンツ表示上部 div.contentsHeader	margin:0px; padding:0px; height:0px; width:620px; clear:both;
コンテンツ表示 div.contents	margin:0px; padding:13px 19px 11px 19px; background:url(表示するPNG画像のURI); _background:#000; width:580px; border:1px solid #666 -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
コンテンツ表示下部 div.contentsFooter	margin:0 0 10px 0; padding:0px; height:0px; width:620px;

ＰＮＧ画像を使わないで背景透過させる方法として Ａｌｐｈａフィルタ filter:alpha(opacity=透明度);や Opacityプロパティ opacity:透明度;を使うという方法もありますが、この方法では前回のブログでも指摘したように、このプロパティを適用した要素内の内包する画像や文字まで半透明になり見難くなってしまいます。
Ａｌｐｈａフィルタに関してはこれを回避する裏技？として、内包する透過させたくない要素にposition:relative;と指定するとその要素は透過されません。

4月26日、「Internet Explorer 9」（以下、IE9）の日本語正式版が公開されました。（残念ながらワタクシのＰＣは Windows XP なのでサポート外のためダウンロードできませんが。）
IE9は、HTML5/CSS3といった次世代Web標準技術への対応も拡充されたということで、久しぶりにマニアックな（笑）スタイルシートねたでもしようと思います。

以前、｢背景の透かし｣テクニックについてお話したことがありましたが、今回は背景色や文字の色などを半透明表示させるプロパティーをご紹介します。
まずは前回の復習です。
上の例のように背景を透かす方法には、透過形式の背景画像をもちいる方法とスタイルシートだけで透過させる方法があります。 ある調査によれば国内の『 Internet Explorer 6 』のブラウザシェアも１割を切っている状況なので透明度を指定したＰＮＧ画像をもちいるのが今のところベストかもしれませんが、任意の色や透明度にするにはそのたびに専用ソフトで画像を作らなくてはならないため手間が掛かります。
かと言って、Ａｌｐｈａフィルタや opacity などで透過させようとすると簡単ではありますが、内包する画像や文字まで半透明になり見難くなってしまいます。
そこで登場したのがHTML5/CSS3といった次世代Web標準技術の一つでRGBaプロパティバリューです。OpacityプロパティとRGBaプロパティバリューは、どちらも透明度を指定し背景やテキストを透けさせることが可能なプロパティです。
Ａｌｐｈａフィルタや Opacityプロパティは背景色や文字だけでなく画像も透過させることができるのがメリットなのですが、指定した要素に含まれるすべてに適用されてしまいます。
対してRGBaプロパティバリューは画像を半透明にすることができないかわりにbackground-color（背景色）/ color（テキストカラー）/ border-color（外枠線色）といった要素ごとに色と透明度を細かく指定をできるのがメリットです。
ディメリットとしては新しい技術ゆえに下記表のように古いブラウザに対応していないことです。

RGBaプロパティバリュー ブラウザ対応表
Internet Explorer 9	○	Internet Explorer 8 以下	×
Firefox 3 以上	○	Firefox 2	×
Safari 3.1 以上	○	Safari 2 以下	×
Opera 10 以上	○	Opera 9 以下	×
Google Chrome 2 以上	○
Mobile Safari ( iPhone / iPod Touch / iPad )	○
BlackBerry Storm Browser	○

下の例をご覧下さい。
写真上にある３つのブロックはテキストカラーと外枠線を白色に指定していますが、上のブロックには背景色を指定していないのでバックの写真がそのまま背景となっています。
真ん中のブロックは背景色をRGBaプロパティバリューで透明度50％の黒色で指定しているので対応ブラウザではそのように見えているはずですが、Internet Explorer 8 以下のように対応していないブラウザでは上のブロックのように背景色が表示されてないと思います。（Safari 5 でのスクリーンショット）
下のブロックではテキストカラーと背景の色が似ていると見難くなるので、対応ブラウザには透明度50％の黒色の背景色に、未対応ブラウザには普通の黒色に表示するように指定しています。

以前にもお話したことがありましましたがWebサイトで色を表現する方法には、ある一つの同じ色を表すにもカラーネイムで指定する方法と色情報を数値化した16進数表記カラーコードや10進数表記カラーコード（RGBカラーモデル）など、様々な指定方法があります。
RGBカラーモデルとは、光の3原色とも呼ばれる赤（Red），緑（Green），青（Blue）の3色を組み合わせて色彩を表現する方法のことです（加法混色）。
スタイルシートで背景色をRGBカラーモデルで指定するには下記のように記入します。
例えば黒色はrgb(0,0,0)、赤色はrgb(255,0,0)、白色はrgb(255,255,255)です。

関連情報ホームページURL：

Web Safe Color一覧表/カラーチャート
ウェブカラーコード

RGBカラーの３色にアルファ（Alpha）と呼ばれる透過度の情報を加えたものが「 RGBaプロパティバリュー 」です。
RGBAカラーモデルで色を指定する際には、カンマ（ , ）区切りにした３つの数値でRGBの色を指定した後に、数値で透明度を指定します。
スタイルシートで背景色をRGBaカラーモデルで指定するには下記のように記入します。
例えば透明度50%の黒色はrgba(0,0,0,0.5)と表記します。

なお、CSS 3ではRGBと同じようにHSLでも色を指定することができます。HSLは、色相（Hue）、彩度（Saturation）、輝度（Lightness）で色を指定するものです。アルファチャンネルを加えたHSLAで色を指定することもでき、RGBaと同じようにH（色相）、S（彩度）、L（輝度）、A（アルファチャンネル）の値を「,（カンマ）」で区切って指定します。
例えば透明度70%の白色はhsla(0,100%,100%,0.7)と表記します。

マニアックな内容でしたので、興味のない方には何のことかさっぱり解からないと思いますが、次回は 【みんカラ】ブログで透過形式の背景画像を使わないで背景を透かす スタイルシートのカスタマイズ例を解説したいと思います。