MyScriptsでZen-Codingできるスクリプトを作った

iPhoneでもZen-Codingを使いたかった

これに尽きる。iPhoneのモブログ環境はかなり充実している。こんなに充実している環境は他に無いんじゃないかと思う。でも、望み過ぎとは思えど、Zen-Codingみたいなものがずっと欲しかった。簡単だもの。

前置き終わり。基本的にHTMLのマークアップ用途を考えて作りました。もちろん他にも使えますが、以下もHTMLが基準で説明しています。

Zen-Coding for MyScripts

というわけで作りました。今は亡きDisplay Recorder for App Storeで動画を撮ったので御覧ください。


Zen-Coding for MyScripts

よく使うだろう2種類だけ使えるようになっています。

導入

Zen Coding for textareaが必要です。公式サイトからダウンロードできます。

zc4ms_01

日本向けに編集したものをDropboxに置いたのでよろしければどうぞ。html:5jqmというHTML5 + jQuery Mobileのテンプレートをスニペットに追加しておきました。(zen_textarea.js)。

解凍してzc-powered.pngとzen_textarea.jsをiTunesのファイル共有からMyScriptsにコピーしてください。

完了したら(MyScriptsを起動している場合は再起動)、Zen-Coding for MyScriptsをインストールします。ItemExporterも必要なので両方インストールしてください。

なお、過去に作成したスクリプトと一緒にforMyScriptsでも公開しています。

使い方

ヘルプを用意しました。スクリプトを実行すると、下に丸いiのアイコンがあるのでタップすると開きます。

Expand Abbreviationとは

TextExpanderを使っている人は想像しやすいと思います。省略語を入力すると予め用意されているスニペットを展開する。

例えば、入力欄に div と入力してExpand Abbreviationを実行すると、 <div></div> と展開されます。

もう一例。 #main>h1{見出し}+ul>li*3>a[href=“link$”] と入力したらこうなる。(説明用の画像は別のアプリで撮影しています。)

zc4ms_02

これが基本です。それを応用したのが以下。

Wrap With Abbreviationとは

動画でもやっているので簡単に説明します。例えば4行の箇条書きがあったとする。これをULでマークアップしたい。その場合は箇条書きを範囲選択してWrap With Abbreviation実行。すると入力欄が出てくるので省略語を入力。

za4ms_03

こうなります。柔軟ですね。文章をマークアップするというHTML本来の書き方を実践できます。

あとがき

今の所2つの機能だけです。他の機能は使えないのかというと、そんな事は無く、Zen Coding for textareaで使える機能は全て使えるんじゃないかと思います(確認してません)。

やった事はググってコピペがほとんどです。もっと効率よく書けるようになりたい。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中