Dreamweaver Town Meeting in Tokyoって？

2010年5月29日、ベルサール新宿で行われたDreamweaverのパワーユーザー向けのイベントです。
Dreamweaverをこう使うと便利ですよ！とか基本的なところから応用まで色々とお話がありました。

自分はこのイベントの7分間セッションの大喜利に出演してきました。

当日の様子はTogetter – まとめ「Dreamweaver Town Meeting in Tokyo」にまとめてあるようです。

詳細は続きから。

自分のセッションについて

自分は「Dreamweaver x Zen-coding」というセッションを行いました。
7分間に収めるというのが本当に大変でした。。。

有料イベントということでスライドや動画はまだ公開されていません。

概要とか

Zen-codingはDreamweaverの拡張機能としてインストールする事ができます。（厳密に言うとZen-coding自体は色んなエディターに対応しています）
少ない記述でたくさんの量のコードを書くことができ、コードタイピングを早くしてくれます。

導入手順

基本的にはCS4から動かすことができます。が手順3以降をこなすことでDreamweaver8でも動かせます（一部動きませんがだいたい動きます）。

1. 公式のダウンロードページからZen.Coding-Dreamweaver.v0.6.zipをダウンロード、解凍します。
2. Zen Coding v.0.6.mxpをダブルクリックして拡張機能としてインストールします。
3. 「Issue 121 – zen-coding – Not working in Dreamweaver CS3 – Project Hosting on Google Code」からzen_editor.jsをダウンロードしてきます。
4. zen_editor.jsを上書きします。場所はOSやDreamweaverのバージョンによって異なるので注意してください。
   

   Windows	C:\Users\<username>\AppData\Roaming\Adobe\Dreamweaver 9\Configuration\Commands\ZenCoding
   Mac	/Users/<username>/Library/Application Support/Adobe/Dreamweaver 9/ja_JP/Configuration/Commands/ZenCoding

Zen-codingの使い方の詳細

別のエントリーで「マークアップ効率化 – zen-codingでコーディングを倍速に (Yahoo! JAPAN Tech Blog)」を書いていますのでそちらを見ればだいたい分かるかと思います。

セッションで言えなかったこと

いっぱいありすぎて困るので別途エントリーを書きたいと思います。
取り急ぎ気になったのが、以下の様なTweetです。

#dwtokyo izuizuさんがいい事言った。「Zen-codingは、箱から作る。デザインビューは原稿ありき。物により使い分けるとよい。」 (via @crema)

確かにZen-codingは箱から作ることに一番秀でています。
が実務でも使うのですが原稿ありきの書き方があります。これ簡単には伝えられないのですが動画を撮ってみたのでそれを見てもらうのが早いと思います。

Ctrl+hを使って書く方法です。
値に連番を振りながら原稿ありきの書き方をできるという寸法です。
書き方はアスタリスクの書き方の応用で、数値抜きのアスタリスクを記述することで実現できます。

詳しくはまた別の機会に何かで説明できたらうれしいですね。

まとめとか

基本的に入れておいて損はない拡張機能だと思います。
ショートカットキーだけでも使う価値があるのではないでしょうか。
足らない部分はDreamweaverの機能を使えばどうとでもできてしまいます。

難しそうだとか怖がらずに入れてみて、とにかく触ってみてください！
うまいこと扱えると本当に早くマークアップできるようになると思います！

何か気になることなどあればTwitterとかで聞いてみてください。

会場にいらっしゃった皆様、また出演された皆様、運営陣の方々
本当にありがとうございました。

また是非こういった機会を頂けたら嬉しいです！

4月17日に開催されたCSS Nite LP, Disk 9「Coder’s Higher」にて、第2回コーディングコンテストの審査結果発表が行われたのですが、そちらで入賞を頂きました。

CSS Nite LP, Disk 9「Coder’s Higher」については当日のTwitterのTLを参照して頂ければなんとなく雰囲気が伝わるかと思います。

入賞した作品

応募したのは以下のHTMLになります。

• Movable Type 5

他のcssファイル、画像ファイルは0ファイルなので、このindex.htmlだけを応募しました。
ちなみに1枚にする前のファイルはこちらにまとめてあります。

詳細は続きから。

前提みたいなもの

ちゃんと手を付けたのが締め切り日の13時付近で、まあ11時間くらいあれば終わるだろうなんて思っていたら…
まったく持って終わらない雰囲気が…！

そしてまさに23時59分30秒くらいまで作業をしていて、ぎりぎり2秒前に応募できました…
ちなみに一番最後の応募だったらしいです（汗

そして提出後、Webkitで画像がうまいこと表示されないことが判明して優秀賞などは無理と判断！

という流れがありました。

提出したものの特長や注力した点

0リクエスト

index.html内からのリクエストを0にするために、cssを直書き・画像をbase64形式で埋め込みなどを行いました。
要するにindex.htmlだけを応募したわけです。

idとclassを多用しないコーディング

良いか悪いかは別として、実験的にidとclassをあまり用いずにコーディングしてみました。
css3のセレクタを多用して組んでみています。
<header></header>
<div id="contents"></div>
<footer></footer>

ぶっちゃけ、idとclassはもっと振ったほうがいいと思いました！

:targetを用いたライトボックス

右上部分にある画像をクリックするとオーバーレイしてライトボックスが出るんですが、そこはJavascriptを使わずに実装しています。
body>aside:last-of-type li{
position:absolute;
top:0;
left:0;
width:100%;
text-align:center;
background:rgba(0,0,0,0.5);
height:100%;
-webkit-transition:opacity 3s ease-in-out;
}
body>aside:last-of-type li span{
position:absolute;
top:0;
left:50%;
padding-top:10px;
margin-left:-480px;
text-align:center;
width:960px;
height:100%;
-webkit-transition:opacity 3s ease-in-out;
}
li[role="zoomImg"]{
display:none;
opacity:0;
}
li[role="zoomImg"]:target{
display:block;
opacity:1;
}
若干表示崩れを起こしていますが…ご愛嬌ということで。
アニメーションを付け忘れたのが無念…！

css3によるビジュアライズ

各ボタンなどのグラデなどにcss3によるグラデーションや角丸などを使用しています。
というかこれはむしろ当たり前な感じがするので特に触れる必要はないかと思います。

ちなみに地味に苦労したのはヘッダー上部の黒線にシャドウがかかった部分でした。
自分はcss3の「:before」を用いて実装してみました。
header:first-of-type:before{
content:"";
display:block;
background-color:#152427;
height:6px;
position:absolute;
left:0;
width:100%;
-moz-box-shadow:0 1px 2px #666;
-webkit-box-shadow:0 1px 2px #666;
}
という感じです。

まとめ・感想

組んでみた全体的な感想

• idやclassを無駄に振らずにすんだ。
  →これは自分が無理やり実装したからなのですが、命名しなくてよいというのはかなり時間短縮にはつながりました。
• リッチな表現がcss3のみでかなり出来た
• 本来ならJavascriptを用いなければならない部分がcss3で対応が可能になった
  →ライトボックスなどが該当
• 今までグラデなどはスライスすればよかったものが、ピッカーなどを使って再現する必要があったため、逆に時間を浪費した

というように、良いことばかりでは無く悪い点もいくつか見受けられました。

正直穴だらけのコーディングでお恥ずかしい限りですが、沢山勉強になりました。
また名のある審査員の方々に見ていただけて大変光栄でした！

その他のお話

当日の懇親会などで審査員の方何名かにお話をお伺いしたところ　マニアック　や　変　だの　キモかった　だの、非常に嬉しいお言葉をいただけました！

致命的だったのがSafariで画像が表示されなかったことだったそうです。そりゃそうだ…！
あとはそもそも、css3とは別の部分での評価が多かったため　という感じでした。

理由はどうあれ、審査員の方々に目が止まるような物を作れてよかったと思います。
ただまったく持って未熟なものを提出してしまったので、次回はもっと時間をかけて作業できたらと思いました。

他の応募者様もおつかれさまでした！！

WindowsだとPhotoshopやIllustratorを開かないと中身が確認できなくて不便ですよね。
一部のビューアー(IrfanView32など)で見れたりはしますが…サムネイルを見たいだけなのにとりあえず開かなければならないのがもう…！

MacにはQuick LookというSpaceキーを押すだけでプレビュー出来るという神がかった機能があるので非常に嫉妬です。

Windowsでもそれらしいこと出来ないのかなぁ、と調べてみると色々設定すればJPGなどと同じく小さいサムネイルなら見れるように出来るのですね！
やり方や詳細は続きから。

導入の仕方

• PSDファイルをエクスプローラでサムネイル表示する：常患室さんより引用しています。

以下に導入の手順を明記します。検証できていないですが、恐らくPhotoshopとIllustratorが入っていないパソコンではプレビューを見ることは出来ないと思います。
※自分はCS2での動作を確認しています。レジストリをいじることになるので、導入の際は各自の責任でお願いいたします…
レジストリのバックアップや、システムの復元ポイントの設定を行うことを推奨します。

1. 「PSD thumbnails in explorer」からzipファイルをダウンロードして展開します。
2. 「C:/Program Files/Common Files/Adobe/Shell」ディレクトリに「psicon.dll」をコピーします。
   →「Shell」フォルダが無ければ作成
3. 「Adobe.reg」をダブルクリック

その後、表示→縮小版と設定を変えることによって以下の様にpsdファイルのサムネイルが見ることが可能となります。

また、過去に紹介したタブ式ファイラーのMDIEを使うことによって、詳細モードでもサムネイルが見れるようにもなります。

→作業効率をUPさせるお勧めフリーソフト4つを参照

Illustratorの場合

• Illustrator(.ai)ファイルのサムネイルを表示する方法 – Mithril Blog – Yahoo!ブログさんより引用しています。

こちらも同様の手順で出来るようですが、自分の環境だとうまくいきませんでした…
というか元々aiファイルを判定出来ていないのが原因かもですが…
一応手順を載せておきます。

1. Adobe Photoshop CS2 Thumbnails PSD File in Windows Explorerの”1. Download this file to a temporary folder.”の「this file」リンクからaiicon.zipをダウンロードします。
2. psdのサムネイル対応をした方は既にpsicon.dllが入っていますので、aiicon.dll、aiicon.dll.regだけ使います。
3. 「C:/Program Files/Common Files/Adobe/Shell」ディレクトリに「aiicon.dll」をコピーします。
   →「Shell」フォルダが無ければ作成
4. 「aiicon.dll.reg」をダブルクリック

あとはpsdと同じ手順で見れるようになるかとは思います…が自分は出来てません！

まとめみたいなもの

• レジストリを書き換えちゃうのがちょっと不安
• Quick Lookにはちょっと及ばなすぎるかも
• でも結構便利。

という感じですかね。

QuickLookをWindowsで出来ちゃえばかなりステキになるんですけどねぇ
それはまた機会があれば探して載せたいと思います。

　
詳細は続きから

10周年記念イベントに参加された方からは「あの“大喜利”をもう一度」という声をいただき、今回は大喜利スペシャルを中心にお届けします。

とのことなので、Dreamweaverの祭典です。
業務と家でDreamweaverを使っている僕にとってはステキなお祭りになりそうです。
ドリちゃんが大好きな方は是非参加してみてください。

また、僭越ながら自分も7分間のミニセッションに参加いたします。
有名な方々の中にこっそり紛れて何かを伝えられたらと思います！
新入社員で会社に入って初めて出たセミナーであるCSSNiteにまさか出演できるとは…感無量です。

自分のセッションについて

Dreamweaver x Zen-coding

Dreamweaverには元々、基本的な入力補完が備わっていますが、その入力補完とは別の入力補完を追加する拡張機能「Zen-coding」を導入することによって、その双方の利点を使用したコーディングが可能になります。 このZen-codingの基本・発展、業務における実例などをデモを交えてご紹介します。

というようなことをやりたいと思います。
またまたZen-codingの内容ですが…心のお師匠様に恥じないような内容に出来るように頑張りたいと思います！

プロフィール

遷移先にどの道載っているので…こんな感じになっています。
お恥ずかしい…！

出演するにあたって

沢山の方のご協力やお力添え、また応援などをして頂きこのような機会をいただけた事を感謝しております。
本当にありがとうございます。

またデザイナーとして仲良くさせて頂いているまめこやネコゼさんとも一緒に出られるというのは嬉しい限りです。

• ウープスデザインブログ (デザイナー まめこ)
• necoze LOG2 [ネコゼログログ]

皆さんで協力してよいイベントに出来たらと思います！

よく画像でグルグル回って、ローディングを表現するのがあると思うのですが、それをcss3のみで作成してみました。

↑こんな感じのやつのことですね。

css3のアニメーションを使用しているのでChrome3やSafari4などで見てみてください。
iPhoneでも動くと思います。多分…
※確認したら動きました。

詳細は続きから。

デモ

• 10%
• 20%
• 30%
• 40%
• 50%
• 60%
• 70%
• 80%
• 90%
• 100%

よかった。ちゃんと動いていますね。
サンプルはこちらにも用意してあります。

HTMLとCSS、解説は以下を参照してください。

ソース

HTML

<ul class="kzms2loading">
<li class="kzms2loading1">10%</li>
<li class="kzms2loading2">20%</li>
<li class="kzms2loading3">30%</li>
<li class="kzms2loading4">40%</li>
<li class="kzms2loading5">50%</li>
<li class="kzms2loading6">60%</li>
<li class="kzms2loading7">70%</li>
<li class="kzms2loading8">80%</li>
<li class="kzms2loading9">90%</li>
<li class="kzms2loading10">100%</li>
</ul>

CSS

/* ローディングを入れる箱の設定
--------------------------------*/
.kzms2loading{
/* 100x100の箱を作成 */
margin:0;
padding:0;
list-style:none;
width:100px;
height:100px;
position:relative;
/* scaleの値をいじれば大きさを変更可能 */
-webkit-transform:scale(1);
}
/* リスト内の共通設定
--------------------------------*/
.kzms2loading li{
/* 絶対配置で中央に配置 */
position:absolute;
top:50%;
left:50%;
height:0;
width:0;
margin:-10px 0 0 -10px;
/* リセット用css */
padding:0;
list-style:none;
/* テキスト飛ばし */
text-indent:-9999px;
/* 初期設定で透過に */
opacity:0.1;
/* ボーダーで無理やり●を表現 */
border:10px solid #666;
background-color:#666;
-webkit-border-radius:10px;
/* アニメーション設定 */
-webkit-animation-duration:2.5s;
-webkit-transform-origin:50% 50%;
-webkit-animation-name:kzms2loading;
-webkit-animation-iteration-count:infinite;
}
/* ●の個別設定（配置と遅延設定）
--------------------------------*/
.kzms2loading1{-webkit-transform:rotate(0deg) translate(0,-40px);}
.kzms2loading2{-webkit-transform:rotate(36deg) translate(0,-40px);-webkit-animation-delay:0.25s;}
.kzms2loading3{-webkit-transform:rotate(72deg) translate(0,-40px);-webkit-animation-delay:0.5s;}
.kzms2loading4{-webkit-transform:rotate(108deg) translate(0,-40px);-webkit-animation-delay:0.75s;}
.kzms2loading5{-webkit-transform:rotate(144deg) translate(0,-40px);-webkit-animation-delay:1s;}
.kzms2loading6{-webkit-transform:rotate(180deg) translate(0,-40px);-webkit-animation-delay:1.25s;}
.kzms2loading7{-webkit-transform:rotate(216deg) translate(0,-40px);-webkit-animation-delay:1.5s;}
.kzms2loading8{-webkit-transform:rotate(252deg) translate(0,-40px);-webkit-animation-delay:1.75s;}
.kzms2loading9{-webkit-transform:rotate(288deg) translate(0,-40px);-webkit-animation-delay:2s;}
.kzms2loading10{-webkit-transform:rotate(324deg) translate(0,-40px);-webkit-animation-delay:2.25s;}
/* フェードイン・アウトのアニメーション
--------------------------------*/
@-webkit-keyframes kzms2loading{
0%{
opacity:0.1;
}
50%{
opacity:1;
}
100%{
opacity:0.1;
}
}

まとめのようなもの

どんなHTMLにしようか悩みましたが、とりあえずリストにしてみました。
正直深い意味はないです。
HTML5で考えればよかったですねどうせなら…

そしてCSSですが結構細かなことをしているのですが、要約すると以下の様な感じかと思います。

1. olとliをcssで位置調整
2. liのwidthとheightを0にして、borderとborder-radiusで●を表現
3. CSS3アニメーションをliに設定
4. 各liを適切な位置に配置して、アニメーションを遅延する設定にする
5. アニメーションをフェードイン・アウトさせる

順番が若干入れ替わってたりしていますが、大体こんなことをさせています。
まだまだいろいろなことが出来てしまいそうですねっ

説明がアバウトすぎるかもしれませんが過去に書いた以下の関連する記事などを眺めて感じ取ってみてください！

「Internet Explorer（IE）6は2010年3月1日に亡くなった」という設定で葬式を挙げようという企画が米国で盛り上がっている。

IE6よ、安らかに眠れ――“葬式”を米企業が企画 – ITmedia Newsより

なにやら3月1日からGoogleさんがIE6のサポートを取りやめるので、米国でIE6の葬式をしちゃおうって話らしいです。
なので便乗してIE6を葬る（？）CSSTipsを5つほど紹介します。
5つというのは特に意味は無く、キリがよいため無理やり5つ用意しました。

※ネタですのでネタ嫌いな方はスルーしてください。

続きは詳細から。

キャプチャとCSS

さくっとキャプチャとcssのサンプルを乗せてみます。

ぼかしが入ってちょっと見づらく

html{
_filter: blur(add=1,direction=135);
}

色を反転させてショッキングに

html{
_filter:invert();
}

白黒でちょっとレガシーに

html{
_filter:gray();
}

ページが薄い状態に

html{
_filter:alpha(style=1,startx=0,starty=0, finishx=0, finishy=100,opacity=50,finishopacity=20;
}

もういっそのこと消去

html{
_display:none;
}

まとめ

なんの事はない8割方IE独自CSSのfilterをただ使っただけです。すみません
_（アンダーバー）ハックを使ってIE6以下だけに適用させてるだけですね！

この流れに乗って是非IE6とおさらば出来たら、幸せな方が沢山出てきそうなのですけどねっ
…とは言ったものの、日本でのIE6のシェアはまだまだ多いはずなのでどうなっていくのかはちょっと判断が難しいですね！

今後の動向に注目したいところです。

Zen-Codingをブラウザ上で触って、リアルタイムプレビューが出来るものを作成してみました。
エディター持って無くてもブラウザだけあればOkですよ！

• kzms2 zen-coding editor

対応ブラウザなど

見た限りですとIE、Firefox3.5、Chrome4、Opera10、Safari4などで動くようです。
※ただし、Webkit系はHeader内に書いた要素がうまくリアルタイムにプレビューされない模様です。styleタグをbody内に書けば表示されます…

使い方や詳細は続きから

Zen-codingの概要

Zen-codingはショートカットキーを用いることでコーディングする時間を早めることが出来るソフトのようなものです。

TextMate-and-ZenCoding from komori, masaaki on Vimeo.

以下のリンクが詳しいです。

• HTMLコーディングが3倍速くなる？「Zen-Coding」

ショートカットキーについて

公式にある、PDFのチートシートを印刷して見て置くと良いと思います。
html形式で見たい方は以下の2リンクを見ればよいと思います。

• HTML
• CSS

今回作ったものの説明

やっとこさ今回作ったkzms2 zen-coding editorの説明をしたいと思うのですが、基本的にはzen-codingの形式でコーディングを行えるリアルタイムプレビューつきのエディターになります。

主な機能

• Zen-codingを用いたコーディング
• マルチブラウザ対応（大体のブラウザで動くと思います）
  ※ただし、モバイルなどを除く
• エディターの文字サイズ変更
• エディター内容をHTML形式でダウンロード保存

並べてみるとこんなものでしょうか。

ショートカットキーについて

メニューのhelpを押せば説明が出てきますが、一応ある程度説明をしておきます。（MetaというのはWindowsだとCtrl、Macだと…なんていうんですかアレ）

• Meta+E（Tabも可） — Zen-coding用タグの展開
• Meta+D — タグ内の要素を外側に順番に選択
• Shift+Meta+D — タグ内の要素を内側に順番に選択
• Shift+Meta+A — 任意のタグで囲む
• Ctrl+Alt+→ — 次点の編集場所へ移動
• Ctrl+Alt+← — 前点の編集場所へ移動
• Meta+L — 今居る位置の行を選択
• Meta+Shift+M — 今いる要素内を1行にする
• Meta+/ — 今居る位置の要素をコメントアウト、インする
• Meta+J — 今居る位置の要素をくっつける
• Meta+K — 今居る位置の要素を削除する

あとは適当に触ってみてください。
※特に裏側とつなげてはいないので、オフラインでも動きますが、リロードすれば消えちゃいますので注意してください！

まとめ

• iframe内にhtmlを吐き出すのに苦労した
• 結構さくさく動いて使いやすいかも
• zen-coding変換をするとtextareaの一番上に行くのがちょっと使いづらいかも（Zen-coding側の仕様…）
• まだまだプロトタイプ

とこんな感じかと思います。
需要があればどんどん機能を足して行きたいと考えているので、コメントやTweetをいただければと思います！

目指せなんちゃってエディター！

上記動画のデモは、EmEditorを用いた場合の使用例となります。

エディタを保存していちいちブラウザでリロードするのは大変だし面倒です。
色々調べていたら保存したタイミングで、自動的に更新出来る方法を見つけたので調整して作成してみました。
デュアルディスプレイの人とかはかなり恩恵を受けるんじゃないでしょうか。

詳細は続きから

ダウンロード

下記から自分が使っているエディター用のexeをダウンロードしてください。ちなみにWindowsのみです。

• dreamweaver対応版
• 秀丸対応版（動作未確認）
• TeraPad対応版
• EmEditor対応版

該当ブラウザ

該当ブラウザは以下の4つのものとなります。（Operaは何故かうまく動かない…）

• Firefox
• Chrome
• IE
• IETester

使い方

1. 
   ダウンロードしたcoding_save_and_reload-**.exe（**はエディタ略名）を起動します。タスクトレイに「K」というロゴが出ていれば起動出来ています。
2. エディターとブラウザを起動している状態で、Ctrl+sを押すことで保存と同時に該当ブラウザがリロードされます。

手順を書こうと思ったら手順2で終わってしまいました…
※自動保存を一時的に無効にしたい場合は、「Suspend Hotkeys」を有効にしてください。

作成ソフト

使用したソフトはAutoHotKeyというフリーソフトです。下記参照サイトを見るとどんなソフトかがわかるかと思います。

• AutoHotKey
• AutoHotkeyを流行らせるページ

ご意見・ご要望など

うまく動かない！もっとこうしたい！
なんてことがあったら、出来たら対応するかもなので何かTwitterなりコメントなりでご意見をいただけたらと思います。

上の動画の様な1行で、縦にロールしながら表示する手法をcss3で表現したサンプルを書きたいと思います。

いつもの様に、Webkit系（Chrome、Safari）のブラウザでご覧下さい。

詳細は続きから

実働デモ（CSS3アニメーション対応ブラウザのみ）

ソース

サンプルはこちら<style type="text/css"><!--
/* リセット（自ページにあわせて調整して下さい） */
#kzms2scroll,
#kzms2scroll *{
margin:0!important;
padding:0!important;
line-height:1!important;
}
/* リストを1行に見せるための調整 */
#kzms2scroll{
overflow:hidden;
height:1em;
}
#kzms2scroll ul{
/* アニメーション全体で10秒となるように */
-webkit-animation-duration:10s;
/* アニメーションを無限ループさせるように */
-webkit-animation-iteration-count:infinite;
/* アニメーション名を指定 */
-webkit-animation-name:kzms2scroll;
}
@-webkit-keyframes kzms2scroll{
/* 1st line */
0%{/* リストの位置を調整する */
opacity:0;
margin-top:0;
}
6.25%{/* 表示する */
opacity:1;
margin-top:0;
}
18.75%{/* しばらく表示する */
opacity:1;
margin-top:0;
}
24.99%{/* 非表示にする */
opacity:0;
margin-top:0;
}
/* 2nd line */
25%{/* リストの位置を調整する */
opacity:0;
margin-top:-1em;
}
31.25%{/* 表示する */
opacity:1;
margin-top:-1em;
}
43.75%{/* しばらく表示する */
opacity:1;
margin-top:-1em;
}
49.99%{/* 非表示にする */
opacity:0;
margin-top:-1em;
}
/* 3rd line */
50%{/* リストの位置を調整する */
opacity:0;
margin-top:-2em;
}
56.25%{/* 表示する */
opacity:1;
margin-top:-2em;
}
68.75%{/* しばらく表示する */
opacity:1;
margin-top:-2em;
}
74.99%{/* 非表示にする */
opacity:0;
margin-top:-2em;
}
/* 4th line */
75%{/* リストの位置を調整する */
opacity:0;
margin-top:-3em;
}
81.25%{/* 表示する */
opacity:1;
margin-top:-3em;
}
93.75%{/* しばらく表示する */
opacity:1;
margin-top:-3em;
}
100%{/* 非表示にする */
opacity:0;
margin-top:-3em;
}
}
--></style>
<div id="kzms2scroll">
<ul>
<li>表示させたい内容その1</li>
<li>その2！</li>
<li>何らかの内容その3</li>
<li>内容その4</li>
</ul>
</div><!-- /#kzms2scroll -->
かなり強引に％と時間を設定していますが、上記のようなソースでJavascriptを使わずに現在あるアニメーションを実装することができます。

%の配分の考え方

1. まず全体として何秒で終わらせたいのかを考える（今回の場合は10秒）
2. アニメーションの大枠で区切る（今回は4動作なので25%ずつ）
3. その中で何動作あるか考えて、さらに区切る（今回は基本1フレームを6.25％と考えて配分）
4. あとは動かしてみて、%の配分や「-webkit-animation-duration」の設定を変更する

上記の考え方を行うことで、アニメーションさせるにはどう考えればよいかがわかるかと思います。

まとめのようなもの

• アニメーションを秒単位で考えにくい
  →全体の秒数は決められるが、個別のアニメーションの時間を考えにくい（%で考える必要があるため）
• script慣れしていない人でも、比較的さわりやすい
  →上のような欠点があるものの、%で割り振るだけでいいため、scriptに慣れていない人はもしかしたらこちらの方が判りやすいのかもしれません
• Javascriptオフでも挙動、動作も軽い。
  →当たり前ですがJavascriptオフでも動きます。iPhoneでも動きますもちろん。

何秒後に動かす！などの考え方とは少し概念が異なるため、扱いにくい部分があるかと思いますが体感的にはわかりやすい表記にはなっているかと思います。

ですが、厳密にアニメーションさせたい場合は、やはり現在だとJavascriptを使わないと難しいのではないかなという印象を受けました。

今度はJavascriptと比較、もしくは絡めて説明出来たらなと考えています。

2010年初エントリーとなります。本年もよろしくお願いいたします。

さて、今回は業務での効率を向上させるソフトの紹介をします。
実際に作業で使ってる流れなどもあわせて説明できればなーと思っております。

以下の感じで困っている人向けに今回は書いています。

1. PC内のフォルダを沢山開く方
2. タスクバー上にあるタスクボタンを整理整頓したい方
3. 沢山ファイルを扱って、一覧を一気に書き出したい方
4. 沢山のURLを開いて表示チェックをしたい方

と上の3つの条件どれかがちょっとでも気になったら見てみてください。
※ちなみにOSはWindowsの場合です。

詳細は続きから

MDIE – タブ式ファイラー

MDIEのダウンロード

タブ式のファイラーです。
通常のエクスプローラーだと新しいフォルダを開くとどんどん増えますが、こちらだとタブで管理が出来ます。
また画像のサムネイルや、そのファイルの情報なども見れて作業がしやすくなります。

1. 現在開いているフォルダ名。起動時に開くフォルダも指定できたりします。
2. サムネイル表示。画像や動画などのサムネイルが表示されます。
3. 画像の情報の詳細が表示されます。ファイルの縦横サイズや、容量など

※MDIEの設定をいじって、表示される部分もあるので色々オプションを触り倒してみてください。

taskbarshuffle – タスクボタンの並び順を変更

taskbarshuffleのダウンロード

タスクバー上にあるタスクボタンの並び順を変更できます。
並び順をドラッグアンドドロップで自分が好きなように変えることができます。

LS – フォルダ内のファイルパス書き出し

LSのダウンロード

フォルダを指定して、その中にあるファイルのパスをテキスト形式で書き出します。
ある程度量のあるファイルパスを一覧にしたいときにとても便利です。

1. 書き出したいファイルが入っているフォルダのパス
2. テキストを吐き出すファイルを保存する場所とファイル名

また吐き出されるテキストファイルは以下の様な内容になります。
[パス名][フォルダ名][ファイル名]
D:\test\zuma_face.png
D:\test\zuma_face_new.png
フォルダ数合計 = 0 個
ファイル数合計 = 2 個

CopyAllUrls（Firefox拡張機能） – 複数行のURLを一気にタブで開く

CopyAllUrlsのダウンロード

複数のURLを一気にFirefoxのタブで開くことが出来る様になる拡張機能です。
たとえば以下のような内容をコピーして、貼り付けることで一気に3タブが開くことになります。
http://kzms2.com/2009/12/28/easy_clearfix/
http://kzms2.com/2009/12/16/css3_tab-without_js/
http://kzms2.com/2009/11/27/advantage_of_css3/
Ctrl+Alt+vがショートカットキーになります。または右クリックからでも可能です。

上で説明しているLSと併せる事で、沢山のファイルを一気にFirefoxで開いて表示確認することが出来ます。

まとめ

整理したり、まとめたり、一括で作業すると作業効率がよくなる！
と　少なくとも僕はこう考えています。
知らなかったものがあったら是非ためしにでも使ってみてくださいっ

今回はこの4つのソフトの説明で終わらせて頂きたいと思います。
開発に便利なソフトなどはまたの機会に説明します！