kzms2 - html,css,javascript » editor http://kzms2.com HTML、CSS、Javascript、Actionscriptなどページを作るのに必要なものならなんでも取り扱います。某ポータルのトップページをコーディング担当。 Mon, 31 May 2010 03:27:08 +0000 http://wordpress.org/?v=2.9.2 ja hourly 1 Dreamweaver Town Meeting in Tokyoで公演してきました http://kzms2.com/2010/05/31/dreamweaver-town-meeting-in-tokyo_followup/ http://kzms2.com/2010/05/31/dreamweaver-town-meeting-in-tokyo_followup/#comments Sun, 30 May 2010 23:45:03 +0000 Zuma http://kzms2.com/?p=694

Dreamweaver Town Meeting in Tokyoって？

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とかで聞いてみてください。

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

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

]]> http://kzms2.com/2010/05/31/dreamweaver-town-meeting-in-tokyo_followup/feed/ 10 ブラウザで動くZenCodingEditorを作りました！ http://kzms2.com/2010/02/19/zencoding-editor/ http://kzms2.com/2010/02/19/zencoding-editor/#comments Thu, 18 Feb 2010 19:37:47 +0000 Zuma http://kzms2.com/?p=607

動画デモ

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

対応ブラウザなど

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

使い方や詳細は続きから

Zen-codingの概要

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

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

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

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

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

今回作ったものの説明

やっとこさ今回作った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をいただければと思います！

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

]]> http://kzms2.com/2010/02/19/zencoding-editor/feed/ 10 これは便利！エディタで保存と同時に3ブラウザを更新 http://kzms2.com/2010/02/08/editer_save_with_browser_reload/ http://kzms2.com/2010/02/08/editer_save_with_browser_reload/#comments Sun, 07 Feb 2010 17:31:08 +0000 Zuma http://kzms2.com/?p=565

デモ動画と概要

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

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

詳細は続きから

ダウンロード

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

該当ブラウザ

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

  • Firefox
  • Chrome
  • IE
  • IETester

使い方


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

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

作成ソフト

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

ご意見・ご要望など

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

]]> http://kzms2.com/2010/02/08/editer_save_with_browser_reload/feed/ 8