15日のvol.01 ノンプログラマのためのPHP入門はPHPを始めようとしている僕にはとても有意義なものだったのですが、さらに衝撃だったのは、Zen-Codingでした。

前々から存在は知ってましたが、使ったことはありませんでした。使ってみたところこれが超快適･･･！確かにコーディングが3倍速くなるかも知れない。これを知らなかったなんて僕のコーディング人生は何だったんでしょうか。

で、わざわざZen-Codingのよさについて書いたところで意味がないので、Zen-Codingについては以下のエントリ等が参考になると思います。

• TextMate+Zen-Codingで超速コーディング？
• HTMLコーディングが3倍速くなる？「Zen-Coding」
• Coda で Zen-Coding を使う

ブログ記事をHTMLで書いている人に超きっとおすすめ

WordPressの記事をZen-Codingで編集したいなとか話してたんですが、どうやらtextareaでZen-Codingを可能にするライブラリが公式であるんですね･･･そしてこれが素晴らしい出来でブログ記事を書く速さも3倍1.5倍くらいになりそうです。特に技術系のブログを書いてる人には手放せないツールになるんじゃないでしょうか。

以下WordPressに適用して編集した際のキャプチャです。公式サンプルそのまんまで申し訳ないですがそういうことです。

この状態でCmd+E(Ctrl+E)で･･･

このように展開できます。

WordPressに導入する方法

僕はWPユーザーなので、WordPressに導入する方法を書いておきます。ちなみに、ビジュアルエディタは邪魔なのでオフにしておきます。（どちらでもいいですが）

プラグインを使って導入する

【追記】rewさんがプラグイン化してくれました。なかなか登録が完了しないようです･･･

• WordPressにZen Codingを導入するプラグイン「WP Zen-Coding」

以下は古い内容です。WordPressのバージョンアップに伴って消えるのでプラグインを使ったほうがいいですね。

Zen Coding for <textarea>のダウンロード

まずはソースコードをダウンロードします。

ダウンロード

Download: Zen Coding for <textarea>

公式サンプル

Zen Coding for <textarea> Sample

WordPressの管理画面で読み込む

ダウンロードしたら解凍して出てくる「zen_textarea.js」か「zen_textarea.min.js」を適当なフォルダにコピーして

• /wp-admin/admin-header.php

を開いてたぶん69行目辺りが</head>のすぐ上なので、そこで読み込ませます。

わずか2ステップで実装できてしまいました。ただこの方法だと記事編集画面以外のテキストエリアにも適用されてしまうので、それが嫌な人は<?php if(){} ?>か何かで編集画面でのみ適用するようにするといいでしょう。

タグをあまり使わないWordPressユーザーにははてな記法プラグイン

そんなにタグばっかり使わない人にはrewishさん作のはてな記法プラグインがちょうどいいと思います。テーブルなどもどんどん使えますし、こちらもかなり便利です。

なんとなく使っているだろう.ready()メソッドについて詳細に見てみましょう。

.ready()メソッド

.ready()メソッドという呼び方がパッとしない人もいると思います。こういうのです↓

$(function(){
  // .ready()が呼び出されたときに実行されるハンドラ
});

jQueryを実行する際のおまじないみたいなものですね。これの中にjQueryコードを書いていくとページロード時（Documentの読み込みが完了時）に実行してくれます。

何気なく使ってる人も多いと思いますが、実際のところこれは何？ということで、少し掘り下げてみましょう。

Read more

先日公開されたGoogle Buzzですが、流行るとか流行らないは別としてとりあえずサイトにBuzzを投稿するためのボタンを実装してみましょう。と思ってAPIを見てたんですが、まだその辺については公開されてないのか見あたりませんでした。そもそもBuzzするって何て言うんですかね。Buzzる？なんか変。。

今のところ便利そうなのは以下の、Google Readerのブックマークレットを使う方法でしょうか。

• Add a “Buzz It” button to your Website, Blog or Forum

超簡単に実装できます。

Read more

jQueryを使えば単体でもフェードやスライドなどのアニメーションを誰でも簡単に使えますが、animateメソッドを使うとより便利に凝ったアニメーションを実行することができます。animateメソッドを使って何かを作るときに役立ちそうなチュートリアルと、すぐ使いたい人向けのプラグインを集めました。

Read more

コーダー・Webデザイナー向けの(JavaScript)勉強会「.coder（どっとこーだー）」 を大阪で行います。なんせ人が集まらなすぎてもあれだったので、Twitterで募集してみたら意外にもたくさんのリプライもらいまして･･･ありがとうございます。

で、なんだか誤解が生じているかも知れないので先に言っておくと、セミナー形式ではなく、みんなで5分10分ずつでもしゃべっていく形で考えています。LTみたいな感じですね。本気でやるぜ！ってなったら色々と気張ってしまうし、持続もしないでしょうし、ゆるい感じで進めていきたいです。

(JavaScript)勉強会としているのは、今後も継続して行い、回によって扱うテーマを変えることも想定しているためです。目的としては、関西（主に大阪）のコーダー・Webデザイナーなどフロントエンドの人たちの交流、情報の共有です。僕が色んな人と話をしたいというのが一番の目的とかなんとか･･･でも早い話が、Sugamo.cssの真似ですよね。すみません。

とりあえず決まっていることを以下にまとめておきます。調整中項目などは決まれば随時追加していきます。参加表明などはrewさんが調整してくれているので、そちらについてもまたお知らせします。

とりあえず興味あるよ！何か話したい！とかあればコメントにお願いします。

お知らせとか

このブログでも行いますが、連絡用Twitterアカウントを用意したので、こっちもフォローしてください。

http://twitter.com/dotcoder

第1回の概要

テーマ

JavaScript。主にjQuery関連が多いと思います。

対象

JSを少しでも触ったことのあるコーダー・Webデザイナー。（またはJSに興味があり、これから使っていきたいと思っている人。）

形式

一人3分〜10分程度の持ち時間でJS関連の話題で話すライトニングトーク形式。参加者全員が話すの必須じゃないですが、出来れば何かしら話してもらいたいです。今のところ5人くらい話す人が決まってます。

スタンス

ゆるく、楽しく。

募集人数

最大25人まで。25人も集まった場合、僕がどうしていいか分からなくなると思いますが、数字については完全にアタリです。集まらなくても最低人数で開催します。

場所

調整中。

日時

調整中。3月20〜22日のいずれかで考えていますが、会場の都合もあるので、4月になるかもしれません。

会費

調整中。たぶん500円くらい必要になるかと思います。