なんでも、このWebPuttyはオンラインのCSSエディタでありながら、CSSのファイルのホスティングも兼ねているようです。さらには「Sass」や「Compass」もサポートしているらしく、そっち系を使ってらっしゃる方でも使える、と。ちなみに、公開時のファイルはちゃんとMinify & Gzipされるようです。

何はともあれ、Googleアカウントでログインだ

登録に特別なことは必要なく、Googleアカウントでログインできます。

ログインするとこんな画面。左が保存されたCSS、右に新規サイトの登録のボタンが並んでいます。右上の「HELP」を押せばいろいろ教えてくれます。

こんな感じですね。で、開いてみると…。

左ペインにプレビュー画面（公開されてる画面）、右ペインにCSSのソースコードが表示されます。表示はCSSのソースコードの上のボタンで変えれるのかな。

CSSのサンプルソースの上にSassの書き方でもOKよ、とかCompassの@importとかが入ってますね。参考にしてください。

で、編集が終わったらPublishをポチッと。そんな流れ。

link要素とscript要素をHTMLにペタッと

新規サイト登録時には特に何も言われないのですが（サイト登録とユーザー管理ぐらい）、編集したCSSはWebPuttyの用意しているホスティングからMinify & Gzipされて配信されます。HTML側には、指定されたコードを貼り付けておけば良いみたいですね。

読み込みのコードを確認するには左ペインの上のボタンをクリック。

こいつをHTMLに貼っておくわけですね。

どうでしょう。割と動作も軽快ですし、Sassのセットアップもいりません。日本語サイトのプレビューまでは試していませんが、WebPuttyいかがでしょうか？

Google+はまだフィールドテスト中なので正式版で変わるんでしょうが、いまのテスト中の画面はGoogleさんにしては珍しくいまひとつ読みやすさにかけてる気がします。文字回りのメリハリがあまりないからか、要素間のマージンが足りないからか若干窮屈な印象が…（※個人の感想です）。

そういうのを一時的に解消して読みやすくするのがこの拡張機能の役目です。これをインストールするには、Googleさんのブラウザ「Chrome」が必要です。

※このようなサイトに便利機能をくっつけてくれるような拡張機能は確かに便利なのですが、中のデータにアクセスできたりするわけなのでね。便利便利っていろいろ入れてると…、皆さんくれぐれもお気を付けください。

Usability Boost をインストール

とりあえず完全版としてリリースされるまでのその場しのぎとして、手っ取り早く見た目を変えるならこの拡張機能が一番かな、と。

もともとの見た目はこんな感じ。

拡張機能をインストールするとこうなります。Google+の画面に薄いグレーの背景色がついて、個々の書き込みが罫線でかこまれて間隔が調整されます。「+1」の数やコメント数の部分、コメント部分にも背景色がついています。あと、上の黒いツールバーがスクロールにあわせて追随してきますね。

全体をみるとこんな感じ。はい、終わり（笑）。

Stylebotを使ってもう少し改良

Usability Boost を入れるだけでだいぶ読みやすさは改善します。でも、これはこれでまだバランスが悪い部分もあったりします。背景色がつくのはいいんですけど、全体のブロックの左右に余白が足りなかったり。

（追記）最新のアップデートで余白が修正されたり、グレーの背景色を使うかどうか選べるようになっています。

もともとボクは自分自身のために「Stylebot」という拡張機能を使って、書き込みの中の要素間のマージンの調整、コメントの文字サイズを一段小さく気持ちグレーに、知り合いかも的なSuggestionsのブロックを非表示、といったことをする「plus-minus」を作って公開していました。

Stylebot をインストールしてからリンクを開くと右上に「Install」ってボタンが見えますので、それを押してあげればインストールされます。ちなみにこのStylebotのサイトでは、FirefoxとかでいうところのUserStylesみたいな感じでいろんなサイトの見た目を変えるCSSが公開されいます。

せっかくなので、今回のこの拡張機能を使った場合の改良版「Usability Boost for Google Plus + plus-minus」を作って公開しましたので、それを入れてあげることでこの全体ブロックの左右の余白も調整されてごらんのようになります。

背景色のしかれた全体ブロックの左右に余白がつきました。

本文の文字サイズはそのままで、微妙な要素間のマージンを調整しています。あと、Usability Boost で追加された+1の数とコメント数の部分の背景を除去して、ほとんど見えるか見えないかの点線の区切り線を入れてます。

ストリームの画面をみるとこんな感じになりますね。

ちなみにUsability Boostを使わなくて「plus-minus」だけ入れてあげたらこのようになります。

え？サークルが丸見えだって？ 大丈夫、たいして分けてないので（笑）。

あくまでその場しのぎですから

近いうちにGoogle+も正式版としてリリースされるでしょう。それまではフィールドテスト中ということもあっていろいろ変更も加えられていくはずです。サイト内の仕様に変更があった場合は、この類のものを入れてると画面表示がおかしくなったりする可能性が多々ありますのでくれぐれも自己責任でご利用ください。

あくまでもその場しのぎ、ってことでひとつよろしくお願いします。

（追記: 2011.07.15）連続して同じ画像が再共有されてうざったい人は、上のStylebotを入れて以下のコードを追加すれば消えますよ。

div.ea-S-C.ea-S-rg-pa.d-s-r.ea-S{display:none;}

リンクの概要とかに入ってくる画像は消えないので大丈夫です。

まったくなくなっちゃうのも困るな、って方は上のコードの代わりにマウスオーバーした時だけ見えるように以下のような記述を追加しても良いですね。

div.ea-S-C.ea-S-rg-pa.d-s-r.ea-S{opacity:0.1;}
div.ea-S-C.ea-S-rg-pa.d-s-r.ea-S:hover{opacity:1;}

そこで、「Chromeで見ようかな」と思ってるのですが、以前からTwitterのUIのフォントサイズが嫌いで、それは新しくなってもやっぱり（日本語で見てるってのもあるのですが、全体的にフォントサイズのバランスが微妙に悪いんじゃないかと…）。

他のブラウザは文字サイズだけの拡大縮小ができるけど、Chromeの場合はページ全体の拡大縮小しかできないんですよね。読みたいサイズに縮小するとレイアウトも小さくなる（笑）。よく「文字が小さいと見えない」とか言われますが、その逆に「大きすぎて読みにくい」って人もいるのです、世の中には。覚えといてください。

で、拡張機能をいくつか追加して、見た目と使い勝手をカスタマイズした記録です。

StyleBotでCSSを微調整

先日からぽろぽろ話題に出てるみたいですが、Chromeで見るWebページのCSSをカスタマイズできる拡張機能で「Stylebot」ってのがあります。

これを入れるとURLのバーのところに「CSS」って書かれたボタンが出てきます。それをクリックしてダイアログを出して、ページ内の任意の箇所をクリックしてそこを指定しているセレクタにスタイルを追加することができます。

で、それで主たるテキスト部分（テキストエリアとかつぶやきのリストなど）の文字サイズと行高を変更して、「Who to follow」とか「Trends」みたいな要らないものを非表示に変えました。それが上のキャプチャです。

これで自分が読みやすい感じに変更できました。ぱちぱち。

Twitter Extenderでボタンを追加

非公式RT（というか、オールドスタイルなRT）は、自分のつぶやきを再掲したりとかでたまに使うこともあるので、それをやりやすくするために「Twitter Extender」という拡張機能を追加しました。

もともと「PowerTwitter」という拡張機能（Firefox用もSafari用もあり）を入れて、非公式RTのリンクの追加、つぶやき内の画像や動画、短縮URLなどが自動展開されるようになっていましたが、それがまだ新しいUIに対応していないので応急措置で。

で、そのTwitter Extenderをいれると、それぞれのつぶやきのReplyなどと並んで「Reply to all」と「RT」、「DM」のボタンが追加されます。いやいや、これは地味に便利です。非公式RTとか使わなくてもまとめて返信したい時があるでしょう？

とまぁ、新しいUIがイヤだとか言ってる人もいますが、そんなこんなでカスタマイズもできたことでボクは大好きです（笑）。

追記: Twitter FIlterで特定のワードやユーザーをフィルタする

まぁTwitterをやってると、時としてタイムラインに複数のユーザーによる特定のハッシュタグ付きの実況的なつぶやきが溢れたり、そもそもの発言数の多いユーザーもいます（ボクみたいなね）。

実況が流れ始めたら見ないのが一番だし、発言数の多いのがイヤならアンフォローすればいいだけですが、まぁそこまでしなくても…という気もするわけで。専用のクライアントなどでは、以前から特定のキーワードやユーザーをミュートする機能がついてるんですが、Webをブラウザで見ている限りはその機能はありません。

「Twitter Filter」は、そんな特定のキーワードやユーザー名をカンマ区切りで指定してタイムラインから非表示にすることができる拡張機能です。新しいUIだとMentionsやListsなんかのタブの並びに追加されます。そこで、一時的にでもオフにしたいハッシュタグなどを設定すれば、精神衛生上楽になります。

こんな感じでフィルタしているユーザーとかが右に表示されます（笑）。

＃特定の人のRTがいらない場合は、Twitter公式の機能としてその人のページに行けばオフにできますからそれを使いましょうね。

＃FirefoxなどUserScriptを追加できる場合は、以下の2つを入れることで同じことが実現できるかと（試してません、ごめんなさい）。
→ Twitter add RT button （説明）
→ Filter Tweets （説明）

本セッションで使用したスライドについては、別途実行委員会の方から公開先URLを連絡していただくことにして、セッション中で紹介したことのいくつかをこちらでフォローアップさせていただきたいと思います。

Dreamweaver CS3 でZen-Codingを使用する方法

現在配布中の「Zen-Coding for Dreamweaver」はCS4対応版ということになっています。残念ながら、それをCS3にインストールしても正常に動作しません。

そこで、配布サイトのIssuesにおいて、CS3で現在のバージョンを動作させるために入れ替える「zen-editor.js」というファイルが公開されてます。こちらのファイルをシステム内のDreamweaverのConfigurationフォルダ内にある「Commands → ZenCoding」の中の「zen-editor.js」と入れ替えてください。

展開される内容を変更するには

Zen-Codingでは「en-US（本家はru） / UTF-8」が初期設定になっています。これが影響するのは「html」を展開した際に出てくるlang属性やmeta要素ぐらいですが、気になる場合はあらかじめ上記フォルダ内にある「zen-settings.js」の中の冒頭あたりにある指定を変更すれば大丈夫です。それ以外にも、展開後にあらかじめ属性を入れたい場合などは、こちらのファイルの該当部分を修正しましょう。

Zen-Codingのチートシートの所在

HTMLにしてもCSSにしても、基本的に省略形を入力し展開しなければなりません。HTMLは基本的に要素名と同じのものが多いのですが、中には「:」を使ったオプションもいくつか用意されています。CSSも基本的にプロパティの頭文字の組み合わせになりますが、やはり「:」を使って特定の値まで一気に入力することも可能です。

こちらの省略形やオプション指定については、配布サイトで公開されているチートシート「ZenCodingCheatSheet.pdf」に詳しく載っておりますので参考にしましょう。慣れないうちは、なかなか大変かと思いますが、普段使うものなんて限られてるのですぐ覚えられます（笑）。

Zen-Codingは不定期にアップデートされています

Zen-Codingは実は2年ぐらい前からあるんですが、不定期にバージョンアップされていますので、たまには配布サイトを覗いてみましょう。新しいバージョンが公開されたら、追加された書式の使い方などもあわせてそちらに掲載されます。

Zen-Codingが使用できるエディタなど

そもそも欧米圏で利用者の多いテキストエディタやIDE用のプラグインとして公開されていたZen-Codingですが、国内で利用者の多いエディタやCMSなどにも導入できるようにしたものがいくつか公開されています。Dreamweaver以外でも使いたいな、という方は「使用中のエディタ名 Zen-Coding」といった感じで検索してみましょう。

最後におまけ

先日のセッションでは基本操作を中心に解説したのですが、デモ中で使用していたラフを実際にコーディングしていく様子をPV的に編集したものがあります。あの程度の内容であれば、HTMLとCSSの双方をコーディングし完成させるまで30分ほどあれば大丈夫かと。興味のある方は以下のリンクよりご覧ください。
→ WebDevelopment with TextMate and Zen-Coding

以上でフォローアップとさせていただきます。
仙台は素敵な街ですね。また遊びに行きます。ありがとうございました。

Zen-CodingとはもともとTextMateとNetBeans用に書かれたプラグインのことです。HTMLとCSSのコーディング作業をより高速におこなうための機能追加をしてくれるものですね。前述の2つ以外に、AptanaやCoda、Espressoといったエディタ、最近ではDreamweaverのMXPファイルもダウンロードできるようになってます（*1）。

というわけで、今回はボクが普段使っている「TextMate」とZen-Codingの組み合わせでコーディングがどう変わるのかをご紹介しようかと。タイトルに超速とか書いてますけど、まぁどうでしょうかね。

TextMateって何よ

Zen-Codingの話の前に「TextMateがなんぞや」ってところから話しておきますか。TextMateは、欧米のプログラマさんやエンジニアの方の間では超有名なというか大好きな方が多いテキストエディタです（よくビデオのデモなんかでも登場します）。

単純に入力補完ができるぐらいならDreamweaverや他のエディタでも十分なわけですが、このTextMateはあらかじめ登録された略語（といっても頭文字的な）を入力してタブキーで展開することで、必要なコードを一瞬で書ける素敵なエディタなんです。要は最初からマクロだスニペットだが入ってると。もちろん自分の登録したコードに書き換えることもできます。

もちろんHTMLとCSSだけではなく、PHP、JavaScript、Ruby、Pythonなどをはじめ数え切れないほどの言語に対応してます。それぞれの言語毎にバンドル（プラグインみたいなもの）が公開されてるので、新規で追加したりアップデートすればどんどん拡張していくことができるのも特徴のひとつでしょうか。ちなみにこの方法を模したWindowsのエディタに「InType」ってのがあります。

ただ残念なことにこのTextMate、現在のバージョンでは日本語の取り扱いが下手でして…（*2）。それをどうにかするには、SafariStandなどでも有名なhetima.comさんで公開されているプラグイン「CJK-Input.tmplugin」を導入してどうにか…なんですね。実際、骨組みだけ作る段階ではあんまり関係ないんですけどね、日本語。

とまぁ、そんなエディタです。

TextMateの基本的な使い方

このTextMateを使ってコーディングするとこういう風になります。

例えば、「doctype」と入力してTABキーをポチッと、

こんな感じで展開されます。ここまではDreamweaverなんかでも見慣れた感じではないでしょうか。で、このリストから目当てのものを選択すると、

こうなっちゃうんですね。

他にも、h1 → TABキーで「<h1 id=”"></h1>」が入力され、カーソルは開始タグと終了タグの間に移動します。その状態で文字列をちょちょっと入力すると自動的にid属性にも同じ内容が入っていくと。複数の属性間の移動もTABキーです。

このような略語ベースの入力以外に、選択範囲を作って後から任意の要素でラップしたり、終了タグやコメントを挿入したりはショートカットでできます。できることを挙げ始めればキリがないぐらい。もちろんこれがHTMLやCSSだけじゃなくて、PHPやJavaScriptでも同様に動作します（*3）。

特定の要素を入れることでそれに適用できる属性が補完され、その中から選択して入力して〜みたいな流れよりは、おそらく数段早いかなぁと。Dreamweaverのスニペットをショートカットなどで反映させるのともちょっと違いますね。

そんなわけでボクは辞書登録（*4）もしてないし使い回しできるコードみたいなのも何も用意してません（作るモノは全部違うしね）。TextMateさまさまです（笑）。

さらにZen-Codingを追加すると…

TextMateにはもともとHTMLとCSSのバンドルがありますが、Zen-Codingはさらにそれらを拡張したものです。冒頭でも書いたようにプラグインの形で公開されているので、ファイルをダウンロードしてダブルクリックすれば自動的にインストールされます（TextMateでもCodaでも）。

では、拡張されてる例を。「html:4t」を展開すると、

こんな感じ。HTML 4.01のTransitionalの文書型からはじまる一連のコードが入ります。これを「html:5」とするとHTML 5のコードがどーんと入力されます（※軽くHTML5のコードも入ってる）。

この「略語:ほげほげ」の記述が良い働きをします。TextMateの標準バンドルでは「html」だけだと開始タグと終了タグしか入りません。「:ほげほげ」は言ってしまえばオプション指定。例えば「link:css」だとスタイルシート、「link:rss」だとRSSのコードが自動的に展開されます。

同じ要領でCSSのスタイル指定もちゃっちゃっと書いていけちゃいます。

他にも標準のバンドルに足りない部分とかも補足されて至れり尽くせり。もう素敵すぎザマス。こういうものを公開してくださって誠にありがとうございます（多謝）。

と、こればっかりは使ってみるか目の前で実演でもされない限り、いまいちわかりにくいんですよね…。ってことで超簡単でのんびりですが4分弱のビデオを撮ってみましたのでそれでもご覧ください（コントローラーで大きくした方がわかりやすいかな）。

TextMate-and-ZenCoding on Vimeo.

最後に。TextMateはOS Xのみですし有償です（トライアルはあり）。Windowsの皆さんはZen-Codingは使えないけどTextMateと同じスタイルで書けるInTypeなど（もう一個あるんだけど失念…）を使ってみると良いかも。

＃InTypeは今月発売のWeb creatorsにちろっと書いておきました。

*1: Codaのプラグインは現在「TEA for Coda」としてメンテされてるのかな？、フルサポートとされてますがTextMateで使うのとは操作が異なります。MXPの方は一部サポートってことですが、正直なところあんまり…（笑）略語から展開する、構造を展開するなどの機能は実装されているようです（うちのCS3ではもっさり動いてます 笑）

*2: 次期バージョンで2バイト文字にも対応するといった感じでしたが、残念ながらいつリリースされるかわかりません…

*3: PHPはSmarty、JavaScriptはjQueryやPrototype、YUIなど用のバンドルも公開されています。バンドルの追加やアップデートはSubversionでやると簡単です

*4: IMEへの単語登録とかは文字数制限とかがあるのでコードをまるっと全部入れることができなかったりします。OS Xな方は「TextExpander（日本語化済）」というユーティリティを使えば、任意の略語を展開してカーソルを移動するといったことが可能です。オフィシャルで公開されているHTMLやCSSのスニペットファイルもあるので、これをベースに改良を加えればTextMateとZen-Codingライクなコーディングが可能かな？、たぶん

WebディレクターのためのHTML+CSS基礎講座

12/10、11開催　全2日 10時間 10:00～16:00

タイトルにもあるように、対象は一応Webディレクターさんとなっていますが、内容的にはこれからWebの業界に入りたい方でも大丈夫です。

http://blog.gaspanik.com/html-css-session-200911

と、前回の告知の時に、セミナーの内容についてはグダグダ書いてますので、そちらのページをご確認いただければ幸いです。

WebディレクターのためのHTML+CSS基礎講座

11/19、20開催　全2日 10時間 10:00～16:00

タイトルにもあるように、対象は一応Webディレクターさんとなっていますが、内容的にはこれからWebの業界に入りたい方でも大丈夫です。

Webサイトのディレクションなどを担当される皆さんは、実際にあまり手を動かすことはないかもしれませんが、制作の現場がどういったことを考えて仕事しているのかを知らないというわけにはいきません。変化し続けるWebの世界の現状を把握しながら、今どういうことが求められていてどういったことに注意しておくべきか、実務にいかすにはどうしたらいいのかみたいな話とあわせて、Web制作の基本ともいえるHTMLとCSSの仕組みや考え方を押さえましょうといった内容になっております。

が、私の場合どちらかというと教科書でおしえてくれないこと（*1）を余談として口にする傾向にありまして、時間の許す限りHTMLとCSSに関することだけでなくFlashやモバイルの話、検索エンジンがどうしたこうしたとか、作業を楽にするツールを紹介したり、まだ日本では知られてないことなどもあれこれ喋るのではないかと。
※内容がそれない程度にですけど（笑）

興味のある方は是非この機会に（定期開催ではないものですから…）。

→ WebディレクターのためのHTML+CSS基礎講座

*1: 内容こそ違いますがたとえばこんなことだったりです。

（追記: 2009.10.15）
えー、告知をしてあまり日も経ってないのですが、おかげさまでまたまた満員御礼になったようです（ありがとうございます）。12月もひょっとしたらあるかもしれませんので、その際はまたあらためて…