iPad用ブログエディタ『Drift Writer』が、今般、内蔵ブラウザからAppHtml等のブックマークレット実行や、プレビューテンプレートを指定できるようになるなど非常に魅力的なアップデートがなされました。
（ご存じない方のために）Drift Writerには以下の特長があります。
- 動作が非常に軽い
- Flickr画像やAmazonアフィリエイトタグを簡単に挿入できる
- 文字を書いた後からでもstrongなどのHTMLタグで簡単に囲むことができる
- カーソルヘルパーやCut、Copy&Pasteキーが便利
- 内蔵ブラウザでAppHtml等のブックマークレットが動く（URLスキームはdpad:）
- 自分のブログデザインでプレビューが可能
今回は自分のブログデザイン、レイアウトに合わせてプレビューする方法をご紹介します。
Drift Writer HTML Editor 2.0.2
仕事効率化, ソーシャルネットワーキング
App Storeで詳細を見る
ブログデザインを反映したプレビューとは
これは自分のブログデザインと関係なく普通にHTMLをプレビューした状態です。
そして、これがわたしのブログデザインに合わせてプレビューした内容です。CSSを反映させたプレビューが可能で、レイアウトも反映させることができるのでヘッダーやサイドメニューがしっかり表示されています。
自分のブログデザインのテンプレートを用意する
自分のエントリ（TOPページではなくエントリの単一ページ）を開きソースを表示します。
適当なエディタに貼り付けます。
プレビューテンプレートにするために余分な部分を削除します。編集が必要なのは、エントリのタイトル名、日付、body内の本文です。
- Drift Writerはタイトルは指定できないのでエントリのタイトル部分の文字列を削除し、適当にタイトルであることが分かるようにしておきます。
- 日付は適当に「20XX年XX月XX日」のようにしておきます。
- 本文は全て削除し、Drift Writerエディタで置き換える本文を %@ とします。わたしの場合、divでclass=entryが指定されている部分に本文がありますのでdivで囲まれている本文をすべて削除しました。
これはあくまでWordPressでわたしが使っているThemeの例なので、自分が利用しているブログシステムやテーマに合わせて編集する必要があります。
ちなみに、Google Analyticsのようなアクセス解析プログラムはプレビューするとロードされ、PVにカウントされてしまう可能性があるので、気になる方は削除しておいた方が良いと思います。
テンプレートファイルの保存場所
Dropboxや自分のドメイン配下でかつパスワードなしに閲覧可能な場所に保存します。わたしの場合はDropboxのパブリックフォルダにしました。設定アプリのDrift WriterからTemplate URLを指定します。
これで準備完了です。
エディタ画面からプレビューする方法
プレビューする方法は2つ。二本指で下から上にスワイプするか、画面下のプレビューボタンを使います。
テンプレートファイルを準備するための応用編
Macエディタアプリの定番のMarsEditで自分のブログデザインでプレビューするためのテンプレートを利用している方は、MarsEditプレビュー画面の下にあるPreview Text FilterからEdit Templateで簡単に取り出すことができます。#body##extended#部分を%@に置き換えるだけです。
MarsEdit 3.5.8
ソーシャルネットワーキング, 仕事効率化
App Storeで詳細を見る
また、テンプレートファイルは可能な限り小さい方がよいので、余分なヘッダーやフッターのコメントシステム部分、サイドメニューは削除し、プレビューに不要な外部スクリプトは外しておくことをお勧めします。
Drift WriterはiPad版の定番ブログエディタになる可能性
dPadというアプリ名で前からあるiPad用ブログエディタですが、今般のアップデートでかなり定番アプリに近づいたような気がします。特長は冒頭の通りですが詳細は別の機会に紹介したいと思います。
Drift Writer HTML Editor 2.0.2
仕事効率化, ソーシャルネットワーキング
App Storeで詳細を見る