5509

Site Search

WordPress等の投稿もZen-Codingで楽々編集できるJSライブラリ Zen Coding for <textarea>

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

zen-wordpress0

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

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

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

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

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

zen-wordpress1

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

zen-wordpress2

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

WordPressに導入する方法

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

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

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

以下は古い内容です。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>のすぐ上なので、そこで読み込ませます。

zen-wordpress3

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

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

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

今さら聞けないjQuery実行パターンまとめ

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

.ready()メソッド

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

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

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

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

Read more

Goolge BuzzのBuzz Itボタンをブログに実装する

buzz1

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

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

超簡単に実装できます。

Read more

VMWareの仮想OS内のVM共有フォルダ以外のフォルダにMacから接続する

VMWare Fusion3(2)を使ってインストールしたWindowsにはデフォルトでVMWare共有フォルダがあり、どちらのOSからでも同じようにアクセスできるようになっていますが、MacからWindows内のフォルダ・ファイルを直接操作する方法は、VMWare自体には用意されていません(たぶん)

用意はされていませんが、仮想OSとはローカルでファイル共有サーバーにMacから接続ができるため、権限さえ適切に用意されていれば、Macから自由に変更することができるので、その方法を紹介します。(ただし共有できるディレクトリはWindows7ではUsers以下に限る)

Read more

VMWare Fusion3にWindows7をインストールしたのでメモなど

s6

Windows7VMWare Fusion3にインストールしたときのメモ。
今までFusion2とXPを使っていたのですが、どうもSpacesを使ってMacからWindowsに移動するときにひっかかるし、プチフリーズ的なものが多発していました。原因はFusion2だったので、Fusion3はその辺の改善もされているということで一緒にアップグレードしてみました。なので面倒くさいので、Fusion2にWindows7を入れたりするような実験はしてみてません。

※ ちょうどASCII.jpで詳しめの解説記事が公開されてました。

Read more

Author

nori
nori
- Director
Location
- Osaka