kzms2 - html,css,javascript

HTMLタグの閉じ忘れをチェックするChrome拡張機能を作ってみた

ずま/kzms2 — Wed, 24 Aug 2011 07:30:17 +0000

概要

HTMLタグ閉じ忘れチェッカー　＠Chrome拡張機能

早速ですが以下のページで公開しています。

作ったChromeの拡張機能URLはこちら

作った背景とか

この拡張機能を作った経緯ですが、単純なタグの開き・閉じ忘れを簡単に防げる方法がないかな。
と思って作成しました。

特にHTMLにそこまで詳しくない方、デバッグが苦手な方は試しに使ってみていただきたいなーと思っています。
もちろんマークアップを行う方は入れてみていただけると嬉しいです！

簡単な仕様説明

できること

表示しているページにタグの開き・閉じ忘れがないかをチェック
タグの開き・閉じ忘れがあった場合、その数を表示
どの箇所にタグの開き・閉じ忘れがあったのかを表示

今後について

確認できているバグ

たまに謎のタグエラーが検出される
scriptタグ内、コメントタグ内のタグもチェックしてしまう
複数のChromeのウィンドウを開いていると正常にチェックできないことがある

出来れば直してからリリースしたかったのですが、とりあえずは使えるのでまずリリースして、そのあと時間を見て直したいです。。

今後追加したい機能とか

細かなバグフィックスを行う
多言語対応を行う

の2点かなーと思っています。
多言語対応…英語を…覚えたいです…

他にも何か要望などあった場合、対応できるものに関しては導入したりしていきたいと思います。
ご意見などはコメントやTwitterの@kzms2までご連絡をください。

参考にさせていただいたサイト

特にHTML内のタグ閉じ忘れをチェックするブックマークレットを公開なさっている、HTML内タグの閉じ忘れをチェックするツール[ブックマークレット] – とっくりばーさんのツールに刺激を受けて作りました。
ありがとうございました！

いろいろと拡張機能大変でしたが、なんだかんだで面白かったのでまた何か作れるように頑張りたいと思います！
作り方とかまとめたら需要がありそうでしたら、そちらも合わせて記事を書いてみます。

PCでファイル保存と同時にスマホなどでリロードされるJSを書いてみた

ずま/kzms2 — Thu, 14 Apr 2011 02:14:29 +0000

概要

エディタで保存して、いちいちブラウザに切り替えてリロード。

この作業ってコーディングしていると腐るほどするので面倒くさくなりますよね。

PCだけで完結するなら昔書いたエントリー（これは便利！エディタで保存と同時に3ブラウザを更新）に書いてあるようにWindowsならどうにかできます。

ですがスマホとかになるとリロードとか非常に大変！
というわけで作ってみました。詳細は↓の動画を見てみてください。

スマートフォンで自動リロード

PCで自動リロード

特徴

使い方は簡単。編集しているファイルにJavaScriptを1～2行挿入するだけ。

1
2

※jQueryを既に使っている場合は1行ですね。

実際に埋め込んであるページはこちらになります。
※沢山見られてそうでしたこっそりリアルタイム更新してみたいと思います。

とりあえず使ってみたいという方はこちらからファイルを保存、もしくは以下のソースをコピペして、実際に編集してブラウザでひらいてみてください。

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


< meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
無題ドキュメント

編集しているファイルにJavascriptを1～2行挿入するだけ
エディターを問わずファイルを保存するだけ
相対で記載している外部ファイルの保存でもリロードされる
※linkタグで参照しているCSSや、scriptタグで参照しているJavaScriptなど

ただ、スマホは前提としてサーバーにアップしないとなので、Dreamweaverのサイト機能を使って保存と同時にサーバーにアップしたりしないと恩恵を受けづらいかもしれません。
→詳しくない方は「サイトの定義とサーバーへアップロードする方法」などをご参照ください。

注意点など

JavaScriptを記述してエラーにしてしまうと、リロードが行われなくなります。
→HTML、CSSの編集に留めるのが安全です。
サーバーにアップせずにローカルで作業して、PCでリロードを自動にさせたいという方は相対パスでCSSやJavaScriptなどを書いているとリロードされないので注意してください。
→link・scriptタグの参照先が相対だとリロードされません。
リリースするときなどに、「」の指定をはずし忘れないようにしてください。

使っている技術や仕様など

仕様言語

JavaScript（jQuery）
※今話題のnodejsは用いていません…なんかすみません…

仕組みなど

jQueryの$.ajaxを用いて、setIntervalでひたすら関連ファイルをGETして、ファイルに変更がなければそのまま。変更があればリロードという処理をしています。
↓にスクリプトを一部抜粋。

//500msごとに関数を実行
o.ARsetInterval = setInterval(function(){
	var i = 0;
	for(i;i<o .targetPath.length;i++){
		o.getSrc(i);
	}
},500);
//setIntervalで実行される関数
getSrc:function(i){
	var o = this;
	$.ajax({
		url : o.targetPath[i],
		cache : false,
		error : function(){
			clearInterval(o.ARsetInterval);
			return false;
		},
		success : function(html){
			//ここにファイルに変更があったかをチェックするスクリプトを記載。
		}
	});
}

ご意見ご要望などは

@kzms2などに気軽にご連絡くださいませ。
バグなどもあれば出来れば教えてください。

完璧なスクリプトではないですが、マークアップ時の負担が減ると嬉しいです。

Dreamweaver Town Meeting in Tokyoで公演してきました

Zuma — Sun, 30 May 2010 23:45:03 +0000

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でも動かせます（一部動きませんがだいたい動きます）。

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

Windows C:\Users\\AppData\Roaming\Adobe\Dreamweaver
9\Configuration\Commands\ZenCoding

Mac /Users//Library/Application Support/Adobe/Dreamweaver
9/ja_JP/Configuration/Commands/ZenCoding

Windows	C:\Users\\AppData\Roaming\Adobe\Dreamweaver 9\Configuration\Commands\ZenCoding
Mac	/Users//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とかで聞いてみてください。

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

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

第2回コーディングコンテスト　入賞しました。

Zuma — Mon, 26 Apr 2010 18:22:52 +0000

コーディングコンテンストについて

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のセレクタを多用して組んでみています。

1
2
3

ぶっちゃけ、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とは別の部分での評価が多かったため　という感じでした。

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

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

psdとaiファイルをwindowsで簡単にプレビューする方法

Zuma — Sun, 04 Apr 2010 16:02:29 +0000

pdsとaiファイルって…

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

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

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

導入の仕方

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

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

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

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

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

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

Illustratorの場合

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

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

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

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

まとめみたいなもの

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

という感じですかね。

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

Dreamweaver Town Meeting in Tokyo（5/29日開催）に出演します。

Zuma — Fri, 02 Apr 2010 16:09:58 +0000

Dreamweaver Town Meeting in Tokyoについて

イベント名	Dreamweaver Town Meeting in Tokyo
日時	2010年5月29日土　15:40-19:40（※予定）
会場	ベルサール新宿（LP6で使用したベルサール西新宿とは異なります）
出演	神森勉、伊原力也（ビジネス・アーキテクツ）、茂木葉子（Aqua Design Studio）、森和恵（r360studio）、千貫りこ、たにぐちまこと（H2O Space.）、石嶋未来（ウープスデザイン）、岡部和昌、國分亨（dreamseeker）、丸山章、、宮内純人（マックグラフィックアーツ）、湯口りさ（RsStudio）、渕上伸吾（カヤック）、山田恵理子（Webridge Kagawa）、鷹野雅弘（スイッチ）
主催	CSS Nite実行委員会
協賛	カゴヤ・ジャパン、Web検定、デジタルスケープ、a-blog cms、JaGraプロフェッショナルDTP&Webスクール
協力	サイバーガーデンbiz、優クリエイト
プレゼント協賛	awesome! クリエイターズショップ、 Designer’s Garage、毎日コミュニケーションズ、ワークスコーポレーション
参加費	4,000円（4月末まで早期割引アリ）
事前登録	必要
懇親会	予定しています（別途、実費）
twitterタグ	#dwtokyo

　
詳細は続きから

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

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

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

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

Dreamweaver x Zen-coding

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

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

プロフィール

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

出演するにあたって

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

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

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

css3のみ・画像無しでローディング

Zuma — Wed, 10 Mar 2010 18:03:45 +0000

概要

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

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

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

詳細は続きから。

デモ

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

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

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

ソース

HTML


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

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ですが結構細かなことをしているのですが、要約すると以下の様な感じかと思います。

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

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

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

IE6を葬るCSS5つ

Zuma — Sun, 28 Feb 2010 19:06:39 +0000

背景

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

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

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

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

続きは詳細から。

キャプチャとCSS

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

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

1
2
3

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

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

1
2
3

html{
_filter:invert();
}

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

1
2
3

html{
_filter:gray();
}

ページが薄い状態に

1
2
3

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

もういっそのこと消去

1
2
3

html{
_display:none;
}

まとめ

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

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

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

ブラウザで動くZenCodingEditorを作りました！

Zuma — Thu, 18 Feb 2010 19:37:47 +0000

動画デモ

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をいただければと思います！

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

これは便利！エディタで保存と同時に3ブラウザを更新

Zuma — Sun, 07 Feb 2010 17:31:08 +0000

デモ動画と概要

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

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

詳細は続きから

ダウンロード

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

該当ブラウザ

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

Firefox
Chrome
IE
IETester

使い方

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

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

作成ソフト

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

ご意見・ご要望など

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

kzms2 - html,css,javascript

HTMLタグの閉じ忘れをチェックするChrome拡張機能を作ってみた

概要

HTMLタグ閉じ忘れチェッカー ＠Chrome拡張機能

作った背景とか

簡単な仕様説明

できること

今後について

確認できているバグ

今後追加したい機能とか

参考にさせていただいたサイト

PCでファイル保存と同時にスマホなどでリロードされるJSを書いてみた

概要

スマートフォンで自動リロード

PCで自動リロード

特徴

注意点など

使っている技術や仕様など

仕様言語

仕組みなど

ご意見ご要望などは

Dreamweaver Town Meeting in Tokyoで公演してきました

Dreamweaver Town Meeting in Tokyoって？

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

概要とか

導入手順

Zen-codingの使い方の詳細

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

まとめとか

第2回コーディングコンテスト 入賞しました。

コーディングコンテンストについて

入賞した作品

前提みたいなもの

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

0リクエスト

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

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

css3によるビジュアライズ

まとめ・感想

組んでみた全体的な感想

その他のお話

psdとaiファイルをwindowsで簡単にプレビューする方法

pdsとaiファイルって…

導入の仕方

Illustratorの場合

まとめみたいなもの

Dreamweaver Town Meeting in Tokyo（5/29日開催）に出演します。

Dreamweaver Town Meeting in Tokyoについて

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

Dreamweaver x Zen-coding

プロフィール

出演するにあたって

css3のみ・画像無しでローディング

概要

デモ

ソース

HTML

CSS

まとめのようなもの

IE6を葬るCSS5つ

背景

キャプチャとCSS

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

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

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

ページが薄い状態に

もういっそのこと消去

まとめ

ブラウザで動くZenCodingEditorを作りました！

動画デモ

対応ブラウザなど

Zen-codingの概要

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

今回作ったものの説明

主な機能

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

まとめ

これは便利！エディタで保存と同時に3ブラウザを更新

デモ動画と概要

ダウンロード

HTMLタグ閉じ忘れチェッカー　＠Chrome拡張機能

第2回コーディングコンテスト　入賞しました。