こんにちは。スマートフォン版Amebaでディベロッパーをしている宇納です。

本日は普段の業務とは離れて、ちょっとだけ便利なTipsのご紹介です。

Mac OS用のクリップボード・ユーティリティソフトClipMenuをJavaScriptで拡張する方法と、それを使ったサンプルをご紹介します。
とても簡単にできますので、プログラミングが苦手な方も是非挑戦してみてください!

ClipMenuとは

クリップボードの履歴を保持しておけるフリーのアプリケーションで、これを使うとコピー+ペーストを何度も繰り返さなくても、コピーした履歴から呼び出してペーストができます。
また、よく使う定型文を保存しておいて、簡単に呼び出すスニペット機能もあります。


http://www.clipmenu.com/

有名なソフトですので、すでに使われている方も多いのではと思います。
僕もずっと使っていますが、個人的には、コピーしたテキストをJavaScriptで加工できるJavaScriptアクション機能が素晴らしいと思っています。
本日フォーカスしたいのはこの機能です。


あらかじめ用意されているアクションを使ってみる

まずは自分で書く前に、ClipMenuにあらかじめ用意されているアクションを使ってみましょう。

試しに「Ameba」というテキストをコピーして、ショートカットキーでClipMenuを開きます。


リストから「Ameba」を選択してCtrl + Enterを入力すると、さらにメニューが開きます。
ここでは Case → UPPERCASE.jsを使ってみます。
(メニューが開かない方は環境設定を確認してください。)

「AMEBA」と全部大文字に変換されてペーストされましたね。これが基本的な使い方です。

あらかじめ用意されているアクションをさらに追加してみる

大文字・小文字を変換したりできるのももちろん便利ですが、
実は最初からもっと色々と用意されているので使ってみることにします。


環境設定の「アクション」を開きます。
「タグで囲む...」というのがあるので追加してみましょう。
左側のメニューに追加されたら、設定画面を閉じて完了です。

試しに使ってみると、


プロンプトが開いて、タグ名を入力すると、そのタグで囲んでくれました。
とても簡単ですね。

さっき設定画面にあった「Markdown → HTML」というのも気になりましたよね。
これも追加して使ってみましょう。


はい、本当にMarkdownがHTMLに変換されました。

オリジナルのアクションの追加方法

それではいよいよ、自分でアクションを作ってみましょう。
まず、フォルダを用意して、新しくJSファイルを追加する必要があります。
場所はこちらです。
/Users/<ユーザ名>/ライブラリ/Application Support/ClipMenu/script/action/


ここに以下のような内容のJSファイルを、「test.js」という名前で保存してみます。
return clipText.split('').join('\n');

処理の仕組みは、あらかじめclipTextという変数にクリップボードのテキストが入って実行されるので、これを使って加工して、最後に結果をreturnしてあげるだけです。

保存すると、設定画面のアクションからUser'sのメニューに追加されていると思います。
(反映されない場合はClipMenuの再起動を試してみてください。)
あとはこれを先ほどと同じように選択して左側のメニューに追加して使います。


さて、1文字が1行ずつに変換されたでしょうか。
これが何かの役に立つかはわかりませんが、仕組みはこんな感じです。

また、先ほどの「タグで囲む...」というアクションでもあったように、
prompt()を使って、実行時に入力した文字列と組み合わせることもできます。

アクションのサンプル集

それでは、試しに作ってみたサンプルをいくつかご紹介します。
JavaScriptがわからない方は、リンク先のコードをコピペして使ってみてください。
(画像をクリックするとgithubに遷移します)

行ごとに引用記号を追加するアクション


"> "を各行の先頭につけただけです。チャットとか、メールとか、テキストエディタとか、アプリケーション問わずよく使うものはClipMenuのアクションにあると役立ちます。


行番号を追加するアクション


先ほどの"> "のかわりに、"1. ", "2. "...と行番号を追加していきます。100行あったとしても、行のラインが崩れないように工夫するのがコツです。


URLのクエリストリングをパースするアクション


たくさんクエリのついた長いURLを、見やすくペーストできると嬉しい時ありませんか?URLとJSONの形で複数行になるように書いてみました。


カラーコードの16進数←→RGB 相互変換アクション


おなじみのカラーコード「#FFF」←→「255, 255, 255」を相互変換できるようにしてみました。CSSを書く時とかにちょっと便利かも?今まで16進数と10進数の変換をするような機会はなかったのでちょっとした頭の体操にもなりました。


Windows←→Macの共有ファイルパス 相互変換アクション


共有ファイルサーバーなどを利用していると、Windowsユーザーから\(バックスラッシュ)区切りのファイルパスで場所を共有され、Macユーザーがそれを/(スラッシュ)区切りのファイルパスに書き換えないといけないとか(その逆とか)が発生することがあるので書いてみました。


ExcelからコピーしてMarkdownのテーブル記法に変換するアクション


Markdownで表を書いていると、だんだんわけがわからなくなってくるのは僕だけでしょうか。修行が足りないのかもしれません。Excelからコピーするとタブ区切りになるようなので、それを利用してMarkdownに変換してみました。他のWiki記法にも応用できるかもしれませんね。


JSONを整形するアクション


色々なツールを使ってもいいですが、JSON.stringify()の第三引数を使えば簡単に整形できてしまうので、用意しておいても損はないでしょう。サクッとコピーしたJSONをメモ帳やWikiなどに貼る時に便利です。パースできない文字列が渡されてJSエラーになるのを回避するために、try catchを利用しています。


JavaScriptを整形するアクション


Chrome Dev ToolsでMinifyされたJSを展開してデバックできたりしますが、僕はたまにライブラリの一部のメソッドのコードだけをコピーして、そこの部分だけ展開してサクッと読みたい、ということがあったりします。そこで、以前GPLライセンスで配布されていた、JS製JSデコーダーのライブラリを利用して、整形アクションを作ってみました。

ここでは、ライブラリの部分をscript/lib配下に置いて、ClipMenu.require()を使って呼び出してみました。require()の戻り値が、Node.jsのようなモジュールへの参照ではなく、読み込み結果を示す値になっていて、ライブラリの参照はグローバルからになる点に注意してください。

おわりに

大雑把な解説となってしまい申し訳ありませんが、なんとなくご理解頂けたでしょうか?
「ClipMenuは前から使っていたけど、JSで拡張ができるなんて知らなかった」という方もいらっしゃるのではないでしょうか。

今回は触れませんでしたが、リッチテキストの状態でコピーされたデータのフォントを変更するなんてこともできるようです。興味がある方は、公式サイトの解説のページか、アプリケーションと同梱されている「JavaScriptアクションの書き方.txt」などを読んでみることをオススメします。

普段JavaScriptを書く方はもちろん活用して頂きたいですが、そうでないデザイナーの方やディレクターの方もこの機会にチャレンジ頂けたら嬉しいです。
「こんなことできたらいいなー」という気持ちが、きっとプログラミング学習の意欲をかき立ててくれるはずです・・・!!

ではまた。

http://www.clipmenu.com/