[モブログ]ThumbEditでHTMLのタグ打ちを加速する!

投稿日:2013年8月30日
html

photo credit: Kris Krug via photopin cc

本文の入力とHTMLのタグ打ち、同時にやる派ですか?
やすも(@yasumoha)はタグ打ちは後で別にやる派です。
今回はモブログで特に面倒なHTMLのタグ打ち(以後、タグ打ち)がThumbEditを使ったらスッゲーはかどったので紹介します。


この記事を読んでほしい人

この記事を読んで欲しいのはこんな方々。

  • HTMLについて少々の知識がある
  • iPhoneでモブログする
  • モブログでタグ打ちはしない
  • モブログでタグ打ちするが面倒だと感じている

まず、HTMLについての知識が少々必要となります。
さらに、今回はiPhoneでモブログをする方に向けた記事です。
なので、HTMLのタグなんて意識したこと無い。
モブログもしないという方はごめんなさい。

ここからはiPhoneでモブログして、タグ打ちまでするという方向けの内容です。
特に、タグ打ちが面倒に思っている方には是非、読んでいただきたい。
ThumbEditを使うとタグ打ちが簡単にできますぞ。

ThumbEditとは

まずは今回活躍してくれるThumbEditのご紹介。
親指だけで操作することにこだわったテキストエディタです。

ThumbEdit – 親指テキストエディタ 1.2.6(¥250)
カテゴリ: 仕事効率化, ユーティリティ
販売元: Shamrock Records, Inc. – Shamrock Records, Inc.(サイズ: 4 MB)
全てのバージョンの評価: 無し(0件の評価)
iPhone/iPadの両方に対応

DropboxやURLスキーム、TextExpanderとの連携。
フリックによるカーソル移動まで可能。
モブログに必要な要素は全て備えていると言っても過言ではないステキなエディタです。
以前、こんな記事を書かせてもらいました。

ThumbEditがDropbpoxに対応して、ますます便利になりましたよ! | Rondo

ThumbEditのタグ打ちに注目!

ThumbEditの数あるステキ機能の中で今回注目するのがHTMLのタグ打ち
brとかpとかdivという単語が < や /> に囲まれているあれです。

こいつらをモブログ、つまり、iPhoneの標準キーボードで入力するのって大変じゃありませんか?
僕にとては地獄のような苦しみです…

その苦しみから開放してくれるのが、ThumbEditなのです。

ThumbEditのタグ打ち機能

ThumbEditでタグ打ちをするには、キーボードの上、画面中央にみえるHTMLタグというボタンを使います。

Thumbedit html

このボタンを長押しすると以下のタグ編集画面に切り替わります。

Thumbedit tag

この画面でこれから使うHTMLのタグを入力、または選択します。
すでにbrやpといったタグがリストになっていますが、これは僕が入力した履歴が残っているから。
つまり、一度使ったタグならば、次回はこのリストから選ぶだけ。
初めて使う人、またはこれまで使ったことのないタグを使う人は、入力欄にタグを入力して下さい。

このとき、 < や /> は必要ありません。
これらの記号は「タグ付け」、あるいは一つ前の画像にあった「HTMLタグ」というボタンをタップすると自動で記入されますので。

ちなみに、brのような文の前後に入力する必要のないタグは後ろに/(スラッシュ)を付ければOKです。
上の画像で入力されているようにです。

それでは、このボタンを使ったタグ打ちの方法を実際の例と合わせて紹介します。

よくあるタグ打ちパターン

モブログしていて頻度の高いタグ打ちのパターンがこちら。

  • 同じタグを繰り返し入力
  • 特定の範囲をタグで囲む

まずは使用頻度の高いこの2つをやっつけてしまいましょう。

同じタグを繰り返し入力

このパターンの使い所は、brを入力する時です。
本文の入力とタグ打ちを同時にする人は連続して入力する機会は少ないかもしれません。
しかし、僕のように本文を作り終わった後、まとめてタグ打ちをするタイプの人には、これができると
ものすごーーーく助かります。
はっきり言って、TextExpanderよりも快適です。

基本的な手順はこちら。

  1. タグの決定
  2. カーソルの移動
  3. タグ打ち

動画を作ってみました。
内容は、brタグを連続して入力している様子です。

まずは「HTMLタグ」ボタンを長押ししてタグの編集画面へ移動します。
リストからbrタグを選択して「タグ付け」ボタンをタップ。
すると、本文入力画面へ戻ります。

あとは、カーソルを移動して「HTMLタグ」ボタンでタグの入力を繰り返しています。
手打ちはもちろん、TextExpanderでスニペットを入力するよりも簡単じゃありませんか?
簡単過ぎて、最後は無駄に連続してしまいました。

特定の範囲をタグで囲む

次は特定の範囲をタグで囲む場合です。
pやdiv、spanといったタグでよくあります。
こちらも動画にしてみました。

タグで囲みたい範囲を選択状態にしてから、「HTMLタグ」ボタンで編集画面に遷移後、pを選んでいます。
このあと、別の範囲をpタグで囲みたい場合は、範囲を選択してから「HTMLタグボタン」をタップすればできます。
別のタグで囲みたくなったら、「HTMLタグボタン」を長押ししてタグを切り替えれば良いという訳です。

ThumbEditは範囲選択がやりやすい

先ほどの特定の範囲をタグで囲む動画で、範囲を選択する際に「行選択」というボタンをタップしていることに気がついたと思います。
このボタンのおかげで、ThumbEditはすこぶる範囲選択がやりやすいのです。
ThumbEditの範囲選択についてはAppBankさんのこちらの記事をご覧下さい。

[iPhone, iPad] ThumbEdit: 親指だけで楽に範囲選択!置換・タグ挿入もOKなテキストエディタ。 – たのしいiPhone! AppBank

行選択ボタンよりもさらに快適な範囲選択が可能なんですよ。
ぜひ、こちらの記事を見て試して下さい。

やすもは思った

Bati2
僕は通勤時間が長いので、その間はモブログしています。
本文の入力はそれほど苦ではありません(フリック遅いけど…)。
しかし、HTMLのタグ打ちだけは厳しいのです。
TextExpanderを使っていますが、最近どうにも調子が良くありません。
動いた時は快適ですが、動かないことが続くとイライラするだけ。

そんなときに別の手段として選んだのがThumbEdit。
今回紹介した方法でかなり快適になりました。
毎回ちゃんと動作しますしね。

モブログでタグ打ちが苦痛。
あるいは、タグ打ちだけPC/MACで済ます。
こうした方々は、ぜひ、ThumbEditを試してみて下さい。
iPhoneでブログ作業が全て完結しますよ。
それでは!

今回登場したアプリ

ThumbEdit – 親指テキストエディタ 1.2.6(¥250)
カテゴリ: 仕事効率化, ユーティリティ
販売元: Shamrock Records, Inc. – Shamrock Records, Inc.(サイズ: 4 MB)
全てのバージョンの評価: 無し(0件の評価)
iPhone/iPadの両方に対応

TextExpander 2.0.1(¥450)
カテゴリ: 仕事効率化
販売元: SmileOnMyMac, LLC – SmileOnMyMac, LLC(サイズ: 3.6 MB)
全てのバージョンの評価: (55件の評価)
iPhone/iPadの両方に対応


シェアして頂けたら感涙にむせびます

Rondoをまた読みたいなと思ってくれたら

是非、定期購読を!