Hatena::ブログ(Diary)

W&R : Jazzと読書の日々 このページをアンテナに追加 RSSフィード

2018/04/24

Drafts5で作ろう、自作アクション入門(2)

draftを使ってみよう。


ActionMaker

HTMLプレビューも取り込みました。スクリプト内に 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) に替えるだけ。


まとめ

Markdownプレビューが内蔵されているので、表示に待たされないのが流石です。ただ、そのためのアクションを作ろうとすると「ステップ」を考えなければいけなくなる。今回は単純に draft を表示する方法でしたが、さらに凝ったものとなると無料のままでは難しい。

2018/04/22

Drafts5で作ろう、自作アクション入門(1)

無いなら自分で作ればいいじゃない。


ActionMaker

Drafts5のアクション・リストに登録するアクション、それがActionMakerです。無料ユーザーでもアクションを作ることができます。このActionMakerを前提に解説します。

ActionMakerの登録はこちら → http://tinyurl.com/y7ye7dj6


今日のミッション

Drafts5のテキストを他のアプリに転送する方法を考えてみます。


URLスキームで転送

Simplenoteにテクストを渡すアクションを作ります。まず、Drafts5に下記スクリプトを書きます。一行目の「Simplenote」がアクション名で、それ以降がJavascriptになります。書き終わったらActionMakerを起動します。インポート先に答えれば登録終了です。

Simplenote
text = editor.getText();
url = "simplenote://new?content="+encodeURIComponent(text);
app.openURL(url);
editor.focus();


スクリプト解説

スクリプトの内容を見ていきます。

text = editor.getText();

Drafts5の本文はeditorで扱われます。読み込みは editor.getText() 、書き込みが editor.setText() です。このスクリプトでは本文を取得し変数textに代入しています。

url = "simplenote://new?content="+encodeURIComponent(text);

SimplenoteのURLスキームは「simplenote://new?content=テクスト」です。なので、先ほどの変数textをコード化して連結し、変数urlに代入します。

app.openURL(url);

Drafts5の拡張コマンドはappにまとめられています。URLスキームの起動は app.openURL() なので、これを呼び出しSimplenoteにテクストを転送します。

editor.focus();

アクション・リストを開いたままなので、エディタに戻る呪文を唱えます。editorにfocus()で、フォーカスがエディタ画面に移ります。無かっても実害はありません。


クリップボードの使用

本文をクリップボードに保存し、HandyFlowyを起動します。HandyFlowyは直接テクストを転送する方法がないのでクリップボードを経由します。

HandyFlowy
text = editor.getText();
app.setClipboard(text);
url = "handyflowy://";
app.openURL(url);
editor.focus();

クリップボードの読み込みは app.getClipboard()、書き込みは app.setClipboard() になります。あとはSimplenoteと同じです。ほら、何か作りたくなったでしょ?


まとめ

Editor · agiletortoise/drafts-documentation Wiki · GitHub
A global "editor" object is available in all action scripts. This object allows manipulation of the ...

テクストの転送について考えてみました。URLスキームで受け渡しするアプリは上記の応用で凌げると思います。URLスキームが無い場合はWorkflow経由でなんとかなるかも。

Drafts5はGitHubにまとめてあるのですが、いくつか動かないコマンドもあります。まだ未実装なのでしょうか。使い方のわかったところから今後も解説していきます。

2018/04/20

Drafts5でカンタンにアクションを作成する方法 ActionMaker

プロ版にしなくてもアクションは作れます。


Drafts5

Drafts5でアクションを書いて、そのまま登録できれば良いじゃないか。そう考えたら、とてもシンプルな方法になりました。下記アクションを登録してください。

ActionMakerのインポート → http://tinyurl.com/y7ye7dj6


使い方

Drafts5でスクリプトを書きます。一行目をアクション名、二行目以降をスクリプト本体としてください。ActionMakerを実行するとDrafts5自体にインポートします。


スクリプト本体

uuidを決め打ちしているので、不具合が出るかも知れません。たぶん、ライブラリーに登録するときIDが重複するんじゃないかな。個人で使う分には大丈夫でしょう。

line = editor.getText().replace(/\\/g,"\\\\").split("\n");
title = line.shift();
script = line.join("\\n").replace(/"/g,"\\\"");
s = '{"uuid":"F754805C-1E93-0000-0000-000000000000","steps":[{"type":"script","data":{"script":"'+script+'"},"uuid":"CA2BDFD3-773C-0000-0000-000000000000"}],"shortName":"","shouldConfirm":false,"disposition":0,"keyCommand":{"optionKey":false,"input":"","controlKey":false,"commandKey":false,"type":"action","discoverabilityTitle":"'+title+'","shiftKey":false},"logLevel":0,"notificationType":0,"tintColor":"none","actionDescription":"","keyUseIcon":true,"icon":"action_script","visibility":2,"supportedPlatform":"any","groupDisposition":0,"name":"'+title+'"}';
url = "drafts5://action?data="+encodeURIComponent(s);
app.openURL(url);


まとめ

取り急ぎ。仕事中なので(小声で。

  • Drafts5で作ろう、自作アクション入門(1)
  • Drafts5で作ろう、自作アクション入門(2)