stryhのノート ~stryh/changelog

DraftPadのプレビューアシストを作成!

6930180018 7e7ccbb7b9 m
遂にDraftPadでBlogの下書きプレビューが出来るアシストを作成。
DraftPadにもHTML Previewがありますが、それでは物足りなく自分で作りました。
今回作るにあたり次の3点を意識。

  • MarsEditみたいなプレビューを見てみたい。
  • WPTouchみたいなプレビュを見てみたい。
  • jQuery Mobileの表示もしてみたい。

で、試行錯誤の上なんとか作成できました。

意外に作り終えると難しいことではないんだなと。
難しく考えていた自分が情けない…orz

宜しければ使ってみて下さい。

DraftPadアシスト作成デビューエントリー

DraftPadのアシストを作ってみた – Headingタグへの置換(h1~h6タグ) | stryhの日記 ~stryh/changelog
で、Headingタグ(h1~h6)の置換のアシストなら作れるんしゃねー?ってノリで作ってみました( ›◡ु‹ ) …
Headingタグへの置換アシスト作成のエントリー

DraftPad

DraftPad 1.5.4(無料)App
カテゴリ: 仕事効率化, ユーティリティ
販売元: Manabu Ueno – Manabu Ueno(サイズ: 3.3 MB)
全てのバージョンの評価: (412件の評価)
+ iPhone/iPadの両方に対応

その前に・・・

このプレビューアシストはHTMLでBlog下書きを書く際に有効です。
なので、<br/>タグを書かないと改行はされません。
少々使い方が限定されてしまいますが、もしHTMLでBlogを書かれてるのであればお役に立つアシストではないかなと思っています。

MarsEdit風 Preview

MarsEdit風のPreviewです。
アシストのURLにCSSへのリンクを含めています。
CSS 1
自分の場合は必要なCSSだけを外部ファイル(今回であればDropbox上に作成)にしそれを指定しています。
もし、Blogで複数つかっているのであれば↓な感じで。

それとHTMLの構造によってCSSの適応が違ってくるのでそれもアシストのURLに含めています。

MarsEditのPreview時にCSSを適応する方法

あまり関係ないですが、少しでも参考になれば。
Happy-Go-Lucky: MarsEdit のプレビューにブログの CSS を適用する
@toshiya240さんのエントリー

[Mac App]コレしかない!No.1ブログエディタ「MarsEdit」 | nori510.com
@nori510さんのエントリー

下記のアシストはCSSは当BlogのCSS、HTMLになっています。
適宜変えて使用して下さい。

実際のプレビュー画面

Draftpadpre1

WPTouch風 Preview

WPTouch風は下記アシストのURLをDraftPadに入れてアシストを起動してください。

実際のプレビュー画面

Draftpadpre2 1

jQuery Mobile Preview

個人的にやってみたかったjQueryMobileの表示。
見て分かる通り、アシストのURLにベタに諸々を渡しているだけです。

実際のプレビュー画面

Draftpadpre3

参考にさせて頂いたエントリー

DraftPadで縦書きプレビューに挑戦してみました – W&R : Jazzと読書の日々

最後に

需要は・・・多分ないと思います (; ^ω^)
個人的に欲しいなと思ったアシストを作っただけなので (; ^ω^)

もし使ってみたいと思いましたらDraftPadに入れて使って頂ければと思います。

URL :
TRACKBACK URL :

Comments & Trackbacks

  • コメント ( 0 )
  • トラックバック ( 4 )

No commented yet.

  1. […] plus ライフハック! ) [5] apps2 ◆ DraftPadのプレビューアシストを作成!http://stryh.com/2012/04/14/draftpad%E3%81%AE%E3%83%97%E3%8…(via stryhの日記 ~stryh/changelog ) [5] apps2 ◆ […]

  2. […] …G-ToolsのBookmarkletとDraftPad連携。 DraftPadのプレビューアシストを作成! | stryhの日記 ~stryh/changelog遂にDraftPadでBlogの下書きプレビューが出来るアシストを作成。 […]

  3. […] DraftPadのプレビューアシストを作成! | stryhの日記 ~stryh/changelog遂にDraftPadでBlogの下書きプレビューが出来るアシストを作成。 DraftPadにもHTML Previewがありますが、それでは物足りなく自分 […]

  4. […] DraftPadのプレビューアシストを作成! | stryhの日記 ~stryh/changelog遂にDraftPadでBlogの下書きプレビューが出来るアシストを作成。 DraftPadにもHTML Previewがありますが、それでは物足りなく自分 […]

Leave a reply

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Return Top