Drafts5で作ろう、自作アクション入門(2)
draftを使ってみよう。
ActionMaker
Drafts 5: Capture ‣‣ Act 5.0.2HTMLプレビューも取り込みました。スクリプト内に draft.content が使われるとプレビュー用のステップを追加。draft.content の文字列を内蔵ブラウザで表示します。
ActionMakerをインポート → http://tinyurl.com/y9euku3p
今回のミッション
Markdownまわりを見てみます。Markdownプレビュー
本文をプレビューします。実質、一行で済みます。Review
draft.content = editor.getText();本文を内蔵ブラウザで表示。Drafts5はデフォルトでMarkdownに対応しているから、何も考えなくて大丈夫。draft.content に渡すだけでHTML変換してプレビューします。
スタイルを追加
そのままだと味気ないので、見た目を整えます。
Review
style = "body{font-family:Hiragino Mincho ProN;word-wrap:break-word;} h1,h2,h3,h4,h5,h6{color:darkblue;font-family:Hiragino Sans;padding:10px 0 0;border-bottom:1px #eee solid;} blockquote{font-family:Hiragino Sans;margin:0px;border-left:20px #fff groove;} pre{background:whitesmoke;padding:10px} strong{color:red;} em{background:lime;} img{max-width:340px;}";
draft.content = "<style>"+style+"</style>"+editor.getText();変数styleでCSSスタイルを定義し、draft.contentに追加します。ブログに投稿する場合はご自分のブログのスタイルに合わせておくと良いでしょう。
HTML変換
MarkdownのテクストをHTML変換して保存します。pタグが付くので、replace() を組み合わせて、使いやすいように加工したほうが良いかもしれません。Markdown
text = editor.getText();
d = Draft.create();
md = MultiMarkdown.create();
d.content = md.render(text);
d.update();Draft.create() が下書きの作成で、そのcontentを埋めてから update() すると新規作成になります。個人的には、プレビューしながらHTMLをクリップボードに保管するアクションに改造しています。最後の d.update() を app.setClipboard(d.content) に替えるだけ。
