kzms2 - html,css,javascript » soft

ブラウザで動く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なりコメントなりでご意見をいただけたらと思います。

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

Zuma — Wed, 06 Jan 2010 15:12:41 +0000

業務効率向上の為に使うツール

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

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

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

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

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

詳細は続きから

MDIE – タブ式ファイラー

MDIEのダウンロード

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

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

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

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

taskbarshuffleのダウンロード

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

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

LSのダウンロード

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

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

また吐き出されるテキストファイルは以下の様な内容になります。
[パス名][フォルダ名][ファイル名] 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つのソフトの説明で終わらせて頂きたいと思います。
開発に便利なソフトなどはまたの機会に説明します！