Drafts が外部アプリからのクリップボード受け取りに対応、その使い方あれこれ

photo credit: MTSOfan via photopin cc
photo credit: MTSOfan via photopin cc

シンプルかつ高機能な iOS 用メモアプリ Drafts に、外部のアプリからクリップボードの中身を受け取る機能が追加されました。Drafts をあちこちでコピーしたテキストの保管庫にする、クリップボードにリンクをどんどん追記していく、といった使い道がありそうです。

目次

  1. ||clipboard|| タグ
  2. 基本的な使い方
  3. URL とテキストを送る
  4. タイトルも加えて引用形式に
  5. クリップボードに追記する使い方
  6. x-success と組み合わせる方法
  7. まとめ

||clipboard|| タグ

Drafts の最新バージョンに盛り込まれたのは ||clipboard|| というタグです。

これまでもあった [[clipboard]] タグとの違いを簡単に言うと、[[clipboard]] は Drafts から外のアプリや Drafts 自身にクリップボードの中身を渡すタグ、このたび追加された ||clipboard|| は外から Drafts がクリップボードの中身を受け取るタグ、となります。

基本的な使い方

||clipboard|| タグは Drafts にテキストを送る時に使う URL スキーム drafts://x-callback-url/create?text= と一緒に使います。

URL スキームに指定する際は URL エンコードと呼ばれる処理が必要で、実際には次の形になります。

drafts://x-callback-url/create?text=%7C%7Cclipboard%7C%7C

このスキームを Safari のブックマークに登録したら、テキストをコピーします。

ブックマークをタップしてスキームを実行。コピーした内容が Drafts に送られます。

URL とテキストを送る

次に、Safari からコピーしたテキストとそのページの URL をまとめて Drafts に渡してみます。これが送りたいフォーマット。

||clipboard||
URL

クリップボードに2つ同時に含めることはできないので、JavaScript でブックマークレットを作ります。

まず、このフォーマットを Drafts に書き出すには次の URL スキームが必要ですよね。

drafts://x-callback-url/create?text=%7C%7Cclipboard%7C%7C%0AURL

クリップボードの中身だけを送るスキームに改行コードの %0A を付け足し、URL を続けます。

URL は JavaScript で取得しないとなので、この部分を書き換えます。

'drafts://x-callback-url/create?text=%7C%7Cclipboard%7C%7C%0A'+encodeURIComponent(document.URL)

document.URL が JavaScript で URL を取得する部分。それを encodeURIComponent でエンコードします。その他のところは引用符の ' で囲み、+ で連結します。

出来上がった URL をブラウザで開くには location.href= にくっつけます。そして末尾に ; を。

location.href='drafts://x-callback-url/create?text=%7C%7Cclipboard%7C%7C%0A'+encodeURIComponent(document.URL);

あとはこのコードを Safari で実行できるよう、全体をエンコードして先頭に javascript: を付け、ブックマークレットの形にします。

javascript:location.href%3D%27drafts%3A%2F%2Fx-callback-url%2Fcreate%3Ftext%3D%257C%257Cclipboard%257C%257C%250A%27%2BencodeURIComponent%28document.URL%29%3B

先ほどと同じように Safari に登録し、テキストをコピーして実行。今度はリンクも送られましたね。Web ページを見ていて気になった情報をリンクとともに保存する、といった使い方ならこれで十分です。

タイトルも加えて引用形式に

続いて応用編。ページのタイトルも取得します。コピーしたテキスト、タイトル、URL が揃えば、ブログを書く時の引用に使えます。

Drafts に書き出すフォーマットはこんな形。Markdown 形式です。

> ||clipboard|| via [TITLE](URL)

いろいろと記号が入っているので少し見にくいですが、Drafts に書き出すスキームはこうなります。

drafts://x-callback-url/create?text=%3E%20%7C%7Cclipboard%7C%7C%20via%20%5BTITLE%5D%28URL%29

あとは TITLE と URL を JavaScript の形式に変換します。最終的なブックマークレットのコードです。

javascript:location.href%3D%27drafts%3A%2F%2Fx-callback-url%2Fcreate%3Ftext%3D%253E%2520%257C%257Cclipboard%257C%257C%2520via%2520%255B%27%2BencodeURIComponent%28document.title%29%2B%27%255D%2528%27%2BencodeURIComponent%28document.URL%29%2B%27%2529%27%3B

Safari に登録後、実行すると Markdown の書式で引用文、引用元へのリンクを生成します。

クリップボードに追記する使い方

ちょっと変わった使い方としては、クリップボードにいろんなページの URL をどんどん貯めていく、なんてこともできます。

さっき取り上げたこのフォーマット。

||clipboard||
URL

クリップボードに URL(1) が入っているとします。その状態で、別のページから URL(2) をこのフォーマットで書き出すと次のようになりますよね。

URL(1)
URL(2)

この2行を Drafts でコピーして Safari にコールバックし、今度はさらに別のページで URL(3) を書き出すと・・・。

URL(1)
URL(2)
URL(3)

3行になります。1行目と2行目は、Drafts でコピーしてクリップボードに入れておいた中身ですね。これを繰り返せばクリップボードに追記していく仕組みが作れます。

気が済んだら、クリップボードの中身だけを Drafts に送る URL スキームを実行すれば、貯めた内容を書き出すことができます。

ちなみにこの方法は、次のスキームから組み立てます。

drafts://x-callback-url/create?text=%7C%7Cclipboard%7C%7C%0AURL&action=Copy%20to%20Clipboard&afterSuccess=Delete&x-success=URL

最終形はこちらです。

javascript:location.href%3D%27drafts%3A%2F%2Fx-callback-url%2Fcreate%3Ftext%3D%257C%257Cclipboard%257C%257C%250A%27%2BencodeURIComponent%28document.URL%29%2B%27%26action%3DCopy%2520to%2520Clipboard%26afterSuccess%3DDelete%26x-success%3D%27%2BencodeURIComponent%28document.URL%29%3B

これを応用すれば、タイトルと URL を Markdown のリンクの形にしてクリップボードにリスト形式で貯めていくとか、いろんなアプリからテキストをクリップボードに送り込んで最後にまとめて Drafts に出力する、といったことが可能ですね。

私はアドオンを購入していないので試せないのですが、Sylfeed の SendTo 機能と組み合わせるのもきっと便利です。

x-success と組み合わせる方法

||clipboard|| タグはエンコードさえきちんとすれば、Drafts の x-success パラメータの中でも使えます。

Drafts に何かテキストを送って、それに対してアクションを起こして、さらに何かするのが x-success の役割。さっき Safari にコールバックするために使いました。

これと組み合わせると、クリップボードの中身を Drafts に送ってアクションを起こして、さらにもう1つ(その気になれば2つでも3つでも・・・)クリップボードからメモを作って別のアクションを起こす、ということが可能です。

一例として、次の JavaScript をエンコードして頭に javascript: を付けると、Safari からクリップボードのコンテンツとページのタイトル、URL を Drafts 経由で Twitter、Facebook に連続ポストします。使う時は Twitter の username のところを書き換えてからエンコードしてくださいね。

location.href='drafts://x-callback-url/create?text=%7C%7Cclipboard%7C%7C%0A'+encodeURIComponent(document.title)+'%20'+encodeURIComponent(document.URL)+'&action=Tweet%3A%20username&afterSuccess=Delete&x-success='+encodeURIComponent('drafts://x-callback-url/create?text=%7C%7Cclipboard%7C%7C%0A'+encodeURIComponent(document.title)+'%20'+encodeURIComponent(document.URL)+'&action=Post%20to%20Facebook');

文字列のエンコードは Drafts 単体でもできますので、興味のある方は過去記事をご覧ください。

まとめ

今回は Safari を例に挙げたので全体的に JavaScript 色が濃くなってしまいました。ですが、基本的に1本の URL スキームだけで、別のアクションを組み合わせなくてもクリップボードのコンテンツを Drafts に渡せるようになったのが今回のアップデートの特徴。

Drafts にテキストを渡す側のアプリがクリップボードの出力に対応していなくても、Drafts 側で受け取れるようになったことで、また1つ Drafts の便利さが増しました。

2 thoughts on “Drafts が外部アプリからのクリップボード受け取りに対応、その使い方あれこれ

  1. Pingback: [Link] 2014-02-21 | hal's Playground

  2. Pingback: Drafts 4 と するぷろーら を中心としたモブログ実演動画。 | Feelingplace

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です