[3002] HTML5ドキュメントのひな形を作ろう

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■明日もデザインで食べていこう！［10］CSS3グラデーションのコードを書き出すエディタの改良版のご紹介／秋葉秀樹
< https://bn.dgcr.com/archives/20110207140400.html
>
───────────────────────────────────
こんにちは、秋葉です。

「まもなく登場IE9とWP7！─加速するHTML5」

告知なんですが、今月、マイクロソフトのエバンジェリストの一人、春日井良隆さんと、わたし秋葉が共演するイベントが、東京（新宿）と大阪（堺筋本町）の2ヶ所で開催されます。

◎かぷっと秋葉が聞く「IE9はどうなるの？　WP7（Windows Phone 7）はスゴイの？　教えて春日井さん！」
< http://seminar.fsv.jp/program/110219.html
>

こないだ春日井さんにWindows Phone 7の実機を見せてもらい、触ってみたんですがなんともおしゃれ！　マイクロソフトらしくない！（誤爆）
うそうそ、最近のMSがおしゃれなんでいいなと思ったり。。
IE9のRC版を見つつ、僕が春日井さんに「IE9のここって大丈夫なの？」ってツッコミを入れながらトークするというものです。

◎CSS Nite in OSAKA, Vol.26 with Microsoft ─HTML5+IE9 Web Camp1─
< http://osaka.cssnite.jp/vol26/
>

さらに今月27日は、HTML5で有名な羽田野太巳さんにお話をしていただきます。
会場も大阪のマイクロソフト株式会社関西支店さん、いつもお世話になります！！
で、僕は今ある書籍を執筆中なんですが、その関連のCSS3の事を話します。
あんまり技術的な話より、案件でどう使うかの話を交えたいと思っています。

さて、本題です。

先日CSS3 Easy Gradation Editor "Grad2" を公開しました。
< http://grad2.ecoloniq.jp/
>　。

なのに、、、気になる記事を見かけました、
［FirefoxとWebKit、CSS3グラデーションの指定方法統一|エンタープライズ|マイコミジャーナル］
< http://journal.mycom.co.jp/news/2011/01/21/017/index.html
>

Webkit系とMozilla系のCSS3グラデーションの記述が、下記の規定に統一されるらしく、記述がひとつにまとまるって話を聞きました。
< http://dev.w3.org/csswg/css3-images/
>

ありがたい話です、実は2つのレンダリングエンジンでグラデーションの記述が全く異なるのです。

【Webkit系】
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ff7400), color-stop(0.00, #ffa443));

【Mozzila(Gecko)系】
background: -moz-linear-gradient(top, #ffa443 0%, #ff7400 100%);

これは上から下の縦方向に#ffa443から#ff7400のグラデーションをひきます。

今後は【Mozzila（Gecko）系】の方に近くなるらしいです。
自作のエディタも近いうち、吐き出されるコードを見直す必要があるんです。
タイミングが難しいな、と。

以前、CSS3グラデーションを生成するサイト「Grad? Gradient!」を作って公開しましたが、使ってみると非常に使いづらい点がいくつかあり、悶々としていました。そこで、以下の点を改善点として新しく作り直しました。

・スライダーをダブルクリックしても、カラーピッカーのデフォルトの色がスライダーの色にならない。
・そもそも色が選びにくい！　色を編集するには使いたくない。
・無駄にborderプロパティとか色々ソースが吐き出されるけど、大抵そこは自分で書くだろう。

で、以下のように手段を変更しました。

・カラーピッカーは有名でしっかりしてるプラグイン「Farbtastic: jQuery color picker plug-in」があるので、使わせていただく。
・グラデーションスライダーのドラッグは「jQuery UI Draggable plug-in」を使わせていただく。
・スライダーは前回canvasで全部を描画していたが、今回はp要素であるHTMLを使う。
・今回はグラデーションのソースだけ吐き出させる。
といったように、jQueryさまさま。

Farbtasticカラーピッカーはすばらしくって、ホントにしっかりしています。
< http://acko.net/dev/farbtastic
>
もちろん、色をget / setするためにプロパティやメソッドも用意されているので、「このスライダーがクリックされたから、スライダーが持っている色をカラーピッカーにセットする」ということが楽にできます。

設定はこんな感じです。

// HTML側

<p><input type="text" id="colorCode" name="color" value="#123456"></p>
<div id="colorPicker"></div>

// JavaScript側

var picker = $.farbtastic('#colorPicker'); // div#colorPickerにカラーピッカーを生成させる
picker.linkTo($("#colorCode")); // input#colorCode内とリンクしてカラー値を表示させる

これだけで、カラーピッカー単体はもう完成です。
すごい。

で、あとはセットするために

var val = "#ff0000";
picker.setColor( val );

とすると、その色の場所にカラーピッカー内のアイコンが移動します（つまり赤を指す）。今現在ピッカーの色の何色が選択されているかを知りたい場合

picker.color

で、カラー値が返ってきます。

もうこれだけで使える！　と思ったんですが、独自のイベント（例えばマウスドラッグ中のイベントとか）については公式サイトには詳しく触れてなくてちょっと困ってました。中身のソースを読めるほどの知識がないもんだから、どうしようと。。

要は色を選んでいる最中、mousemoveのようなイベントがあれば使いたかったんですが、どうやら取れず、別の方法を使ってマウスを押しながら動かしている間はcolorプロパティを取得し続けて、ボタンの色にリアルタイムに反映させることにしました。

今回はjQueryプラグインを使わせていただきました、2つともとても安定していてさすがだな、って思います。というわけで、一度試してみてください、どうぞよろしくお願いします！！

【あきば・ひでき】hidetaro7@gmail.com
< http://www.akibahideki.com/blog/
>

テクニカルディレクター・デザイナー。DTP黎明期からグラフィックデザインを学び、東京都営団地下鉄など交通広告を多数手がける。同時に音楽活動も活発に行い、西日本半全国ツアーなどを展開、某専門学校のテーマソングを作詞作曲、編曲から楽器全てを演奏してレコーディングするなど、マルチなクリエイティブ活動も。最近では東京と大阪の教育施設などで講師業をも務める。HTML CSS JavaScript Flash ActionScript 3DCG Movie DTP GraphicDesign...多種スキルを持つ。Web標準技術だけに執着せず、全てのメディアで説得力のある表現にチカラを注ぎたい、そんな仕事をしたい。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■クリエイター手抜きプロジェクト［267］AfterEffects CS3/CS4/CS5編　複数のプロジェクトから項目を検索する／古籏一浩
< https://bn.dgcr.com/archives/20110207140300.html
>
───────────────────────────────────
今回は、複数のプロジェクトから項目を検索するものです。AfterEffectsには、プロジェクト内にあるフッテージ等を検索する機能があります。プロジェクトをひとつしか使っていないのであれば、このような検索でも問題ありません。しかし、プロジェクトが複数あり、それぞれが異なるフォルダに保存されているような場合には、検索すること自体が大変です。

そこで、以下のスクリプトを使うと、サブフォルダ内にあるプロジェクトも検索して、一致したプロジェクトファイルを開いてくれます。ただ、同じ名前の項目がある事が多いため、見つかった際には検索を継続するかどうかのダイアログを出すようにしています。


// サブフォルダ内にある全てのプロジェクトを開いて検索する（部分一致）
(function(){
var findName = prompt("検索するフッテージ／フォルダ名の一部を入れて下さい", "コンポ");
if (!findName) return;
var folderObj = Folder.selectDialog("親フォルダを選択してください");
if (!folderObj) return; // キャンセルされたら処理しない
var flag = false; // フラグと開くファイルを共用
getFolder(folderObj);
if(!flag) {
alert(findName+"の名前を持つ項目は見つかりませんでした");
}
// フォルダ内の一覧を取得
function getFolder(folderObj){
var fileList = folderObj.getFiles();
for (var i=0; i<fileList.length; i++){
if (fileList[i].getFiles) {
getFolder(fileList[i]);
if (flag) return;
}else{
if (fileList[i].name.indexOf(".aep") > -1){ // .aepの文字が含まれる場合に処理
app.open(fileList[i]);
for(var j=1; j<=app.project.items.length; j++){
var iName = app.project.item(j).name;
if (iName.indexOf(findName) > -1) {
var pName = File.decode(fileList[i].name);
var f = confirm(pName+"に"+iName+"が見つかりましたが、検索を続けますか?");
if (!f){
flag = fileList[i];
return; // 見つかったので終了
}
}
}
app.project.close(CloseOptions.DO_NOT_SAVE_CHANGES);
}
}
}
}
})();

上記のスクリプトは部分一致になっていますが、完全一致で検索したい場合は以下のように変更してください。

if (iName.indexOf(findName) > -1) {
　↓
if (iName == findName) {


【古籏一浩】openspc@po.shiojiri.ne.jp
< http://www.openspc2.org/
>

コミPo!をMacOS X＋VMWare Fusionで動かした場合に、顔の色がおかしくなるのですけど、解決する方法が載ってました。MacでコミPo!使っている人は少なそうですが......。というか、デジクリ読んでいる人だと、すらすら絵が描けそうな人が多そうだから、コミPo!は注目度低いのかも。

MacOS X＋VMWare Fusionで顔色を直す
< http://www.comipo.com/faq/answer03.html
>

顔色が直ったところで、しぶとく古い8ビットパソコン（当時はマイコン）の漫画を作ってみました。読む前にSTAR DRIVERを見ておくと、より楽しめるかもしれません。
< http://www.star-driver.net/
>

・Retro Driver
< http://www.openspc2.org/reibun/comipo/RetroDriver/story01/
>

・HTML5+JavaScriptアイデア＆実践サンプル
< http://www.amazon.co.jp/dp/4048704486
>

・JavaScriptコーディング ベストプラクティス
< http://www.amazon.co.jp/dp/4844361791
>

・Google API Expertが解説するHTML5ガイドブック
< http://www.amazon.co.jp/dp/4844329278
>

・プロならば知っておくべきWebコーディング＆デザインの定石100
< http://www.amazon.co.jp/dp/4844361538
>

・ハイビジョン映像素材集
< http://www.openspc2.org/HDTV/
>

・Adobe Illustrator CS3 + JavaScript 自動化サンプル集　発売中
< http://www.openspc2.org/book/PDF/Adobe_Illustrator_CS3_JavaScript_Book/
>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■講師だって、最初は初心者だもの［01］HTML5ドキュメントのひな形を作ろう／森　和恵
< https://bn.dgcr.com/archives/20110207140200.html
>
───────────────────────────────────
ご無沙汰です。森和恵です。1月は都合でお休みでした。
のっけからすみません（汗）

さて。
前回は、準備編にVisual Web Developer 2010 Express の導入を行いました。
< https://bn.dgcr.com/archives/20101213140100.html
>
※Visual Web Developer 2010 Expressは、以降VWDEと略します。

今回は、HTML5形式ドキュメントの骨格部分を作成します。更に、作成したドキュメントをVWDEの新規ファイルのひな形に登録します。
では、始めましょう！

▼Webサイトの開き方

VWDEでは、Webサイト単位でデータを扱います。前回登録したWebサイトを開いてから操作を始めます。

1/ VWDEを起動します。
2/ ［ファイル］-［Webサイトを開く］メニューをクリックします。
3/ ［フォルダー］でWebサイトの保存先フォルダを指定します。
4/ ソリューションエクスプローラーに保存データが表示されます。

　｜ソリューションエクスプローラーが画面にない場合は、
　｜［表示］-［その他のウインドウ］-［ソリューションエクスプローラー］
　｜メニューをクリックします。

続きで新規ページを作成しましょう。

5/ ［ファイル］-［新しいファイル］メニューをクリックします。
6/ ［Visual Basic］から［HTMLファイル］を選びます。
7/　ファイル名を［名前］に指定します。
【画面】< >

　｜VWDEの変わってるなと思うのは、ファイルを作成した時点で保存まで出来
　｜ているところです。今回作成した templete.htmlが、既に保存フォルダに
　｜あります。ソリューションエクスプローラーで確認することができます。

▼HTML5の基本ページ

［HTMLファイル］テンプレートから作ったページはXHTML1.0です。HTML5形式にに書き換えていきましょう。

1行目：DTD宣言を以下に書き換えます。

<!DOCTYPE html>

　｜HTML5のDTD、短くなりましたね。これなら覚えられそうですね。
　｜これは、どのブラウザーでも標準モードのレンダリングができます。
　｜HTML5非対応ブラウザでもです。後方互換に考慮されてますね。

2行目：html要素を以下に書き換えます。

<html lang="ja">

　｜XHTMLではないので、名前空間指定がなくなりました。
　｜更に、言語指定(日本語)を加えています。

4行目：下記を追加します。

<meta charset="UTF-8" />

　｜HTML5の文字エンコーディング宣言です。こちらも短くなってます。

6行目：下記を追加します。

<meta name="description" content="サイトの紹介文">

　｜HTML5だから必要というわけではないですが、
　｜検索対策も兼ねて指定するほうがベストですね。

【画面】< >


▼Internet Explorer対応

HTML5非対応のInternet Explorer8以前では、新しい要素を認識できません。つまり、新要素にCSSやJavascriptプログラムを適応出来ないということです。また、IE6や7では未知の要素を空要素として認識してしまいます。ユーザー数がそこそこあるブラウザを「無視しちゃえ！」というわけにはいきません。

そこで、何とか認識させるために対策をとります。非対応のブラウザでも、document.createElement（"新要素"）;とJavascriptスクリプトですべての新要素を宣言すれば認識させることができます。

さらに、自前でこのプログラムを作成しなくても、Remy Sharp氏作成のhtml5.jsを利用する方法があります。下記のようにgooglecodeに登録されたhtml5.jsを直接URLで指定します。また、この指定をIE8以下バージョンだけに適応する条件指定も加えます。

<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js
" type="text/javascript"></script>
<![endif]-->

【画面】< >
【ソース】< http://r360studio.com/dgcr/templete.html
>

これで、HTML5形式のドキュメントが完成です。
以前のものより、シンプルになったという印象を受けました。

▼テンプレートに登録

次に、HTML5ドキュメントを簡単に呼び出せるように、VWDEの新規ファイルのテンプレートとして登録します。

1／［ファイル］-［テンプレートのエクスポート］メニューをクリックします。
2／［テンプレート種類の選択］画面で「項目テンプレート」を選びます。テンプレート作成元のプロジェクトとテンプレートを表示する言語を選択します。
【画面】< >
3／［エクスポートする項目の選択］で登録するファイルを選択します。
【画面】< >
4／［項目参照の選択］では何も選ばず進みます。
【画面】< >
5／［テンプレートオプションの選択］では、テンプレート名（表示名）などを指定します。
【画面】< >

これでテンプレートの登録が完了です。
新規ファイルを作成する時のテンプレートの一覧で利用できます。
定型のひな形を作るときに便利ですね。
【画面】< >

...はい。今回は、ここまでにしましょう。次回は、HTML5の文書構造系の新要素などを紹介します。どうぞよろしく。（＜ゝω・）綺羅星☆

※記事へのご意見・ご要望は下記より受付ま〜す。お手柔らかに。
< http://bit.ly/gIHFfu
>

【森和恵 r360studio　〜 Web系インストラクター 〜 】
< site: http://r360studio.com
>　< twitter: http://twitter.com/r360studio
>
< mail: r360studio@gmail.com >

近況報告：お正月早々にひどい風邪をひきました。しんどかった......。日々のうがい・手洗いが大切だということを実感しました。喉の消毒には、イソジン最強です。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■セミナー案内／RIAC：RIAコンソーシアム:［Bセミ-XVIII］〜クラウド・SaaS時代のUI/ユーザビリティ〜
< http://www.riac.jp/2011/01/b-xviiisaasui.html
>
< https://bn.dgcr.com/archives/20110207140100.html
>
───────────────────────────────────
〈主催者情報〉

Rich Internet Applicationを考える際に、もはやクラウドを外せなくなってきました。パッケージ製品ではなく、サービスとしてある機能を活用するスタイルは、今後も益々広がるものと思われます。そうしたビジネス環境の変化の中で、ユーザビリティやUIはどのように変化していくのでしょうか。

UIの基本をソシオメディア様から、実際にプロジェクト管理ツールをSaaS展開している裏話をヌーラボ様からお話し頂き、その後UIライブラリを販売しているインフラジスティックス様、B2Bよりのセールスフォース様らと共に会場全体でディスカッションをしたいと思っております。
お時間ありましたら、是非是非ご参加下さい。三井（電網悠語）が司会する予定です。

日時：2月14日（月）14:00〜17:30　13:30より受付開始
会場：東京カンファレンスセンター・品川
　　< http://www.tokyo-cc.co.jp/access.html
>
参加費：3,000円
講演者：篠原稔和氏（ソシオメディア）、縣俊貴氏（ヌーラボ）、他
詳細：サイト参照

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記（2/7）

・いや〜なCMにたびたび遭遇する。妻は「お前みたいな不細工が言えるセリフか」と怒っている。たしかに不愉快な日東電工CMである。まさかのストーリーに、もしかしたらきょうだいの設定かと思った。テレビ画面を見いる男「いやーきれいだよ」後ろで飲み物を用意して立つ女「なにも出ないんだけど〜」男「いやいやきれいになったよ」女「やっぱりコンタクトにして正解かな」男「あれ？　勘違いしたでしょ」女「えっ」男「液晶画面のことだよ」ちょっと憮然の女「液晶画面きれいですよね」男「敬語こわいんだけど」。どうやら恋人らしい。だが、このかわいい女の子の立場を失わせる、ユーモアとはほど遠い展開はなんだ。しかも男はこの娘にはもったいないくらいの凡庸な奴で、変なしゃべり方が不快。実生活でアニメ声か。ところで、コンタクト云々という娘、メガネかけてるんですけど。和田アキ子が「ナナナナ〜」と歌うパチンコ屋のCMはひど過ぎる。音程云々ではなく、違う音。冗談なのだろうか。まさかね。ものすごく気持ち悪い。あれが気にならない人がいるとは信じられない。スポンサーやCM制作関係者は全員、耳がご不自由なのか。チャイコフスキーにもうしわけない。（柴田）
< http://www.nitto.co.jp/about/ad/cm/index.html
>
日東電工CM

・人間の体つきは一ヶ月もあれば変わると聞いた。筋トレの効果は二週間ぐらいで感じるとも言う。甘いもの好きだが、板チョコを一人で一日で食べるなんてことはなかった。仕事がハードで、一日一枚ぺろっといけ、飽和状態で食べたくなくなるぐらいになった。もう一年近くお稽古バレエやっていないし、スポーツジムは会費だけが引き落とされる状態（休会したらいいんだけど、もう通えるようになるだろうと思ってずるずる）。引越して室内に階段のない生活。一ヶ月以上もの間、まともに外出も家事もしていない。顔は少しやつれた気はするが、からだは無惨なことに。徒歩3分のスーパーに食料品を買いに行くと膝や足が痛くなった......。朝起きると、手足がむくんでいて、手袋や靴下をつけているような厚み、遠い感触がある。だからといってマッサージする時間なんて、と思いついたのが、以前IさんからもらったMARNAの魚の骨型のツボ押しを、仕事中やキッチンでゴロゴロ、踏み踏みすること。これがまぁ気持ち良くて、しばらくやったら、血行が良くなり、手足の感覚が戻るよ〜。（hammer.mule）
< >
これ。探したけどネットで見つからなかった
< http://www.marna-inc.co.jp/ja/
>
マーナ