タダケンのEnjoy Tech

楽しみながらラクに成果を上げる仕組みを考える

Javascriptで作るMacアプリ!JXA入門編

f:id:tadaken3:20180325122642p:plain こんにちは!
タダケン(@tadaken3)です。

Macユーザーのあなたに業務効率化のテクニックをお伝えします。Mac OSはYosemite以降であれば、なんとjavascriptでMacの自動操作ができるんです。通称JXA(javascriprt for Automition)といいます。今回はJavascriptでMacを操作するJXAをご紹介します。JXAは簡単なMacアプリも作れてしまいます。

JXAで何ができるの?

具体的にJXAでどんなことができるのでしょうか。例えば以下の様なことができます。

  • MailやiTunesなどMac標準のアプリを操作
  • ファイルやFinderの操作やMac自体の設定変更
  • EvernoteやChrome、Adobe PhotoshopなどApple以外のアプリも操作可能

複数のアプリを組み合わせて、ちょっとした作業を自動化する自分だけのアプリが作れるのです。例えば、ある画像ファイルをMailとEvernote両方に保存するアプリやiTunesのタイマー起動するアプリなどが作れます。基本はjavascriptなので、学習コストが低いこともメリットです。デザイナーの方でもjavascriptなら普段のWEB制作でも触れることは多いと思いますので、応用できますね!

JXAでアプリを作ってみよう

ではさっそくJXAでアプリを作っていきましょう。JXAを使うには「スクリプトエディタ」を使います。「Lancepad」の中の「その他」を開いてください。

f:id:tadaken3:20170708133953j:plain

その他を開くと中に「スクリプトエディタ」があります。スクリプトエディタを立ち上げてみましょう。

f:id:tadaken3:20170708134004j:plain

スクリプトエディタが立ち上がりましたね。

早速JXAを書いていきましょう!と言いたいところなんですが、ひとつ注意があります

スクリプトエディタでは、JXAの他にAppleScriptを書くことができます。Macの自動操作はもともとAppleScriptが標準だったのですが、Yosemite以降Javascriptにも対応し、JXAが使えるようになりました。両方に対応しているため、どちらのスクリプトを書いているのか明示する必要があります。

といってもとても簡単です。メニューバーの左上の部分を「javascript」に変更するだけです。

f:id:tadaken3:20170708134032j:plain

これで準備はオッケーです。早速スクリプトを書いて、アプリを作っていきましょう。

Macに入っているアプリを呼び出すには以下のように書きます。

Point var app = Application("アプリ名");

Macのシステムイベントを呼び出して、ダイアログにメッセージを表示させてみましょう。

//Macのシステムイベントを呼び出す
var sys = Application("System Events");

//StandardAdditionsという命令の集合があります。
//displayDialogがStandardAdditionsに含まれているため、機能をオンにします。
//最初はおまじないみたいなものと思ってください
sys.includeStandardAdditions = true;

//ディスプレイにダイアログを表示させる命令です。
sys.displayDialog("君はすごいフレンズなんだね");

できましたでしょうか。アプリとして保存するには、保存時にファイルフォーマットを「アプリケーション」に変更します。デスクトップにHello.appと保存してみてください。

f:id:tadaken3:20170708204529j:plain

ダブルクリックするとアプリが起動して、ダイアログが表示されます。簡単です!

f:id:tadaken3:20170708203611p:plain

ファイルをドラッグ&ドロップすると定型メールを作成するアプリを作ろう

次は実践的なアプリのサンプルをご紹介します。フリーランスで仕事をしていると定期的に成果物をメールで送信する必要があります。たいした作業ではないのですが、毎日のことなので自動化できるとトータルで結構な作業時間の短縮になります。

ファイルをドラッグ&ドロップしたら、定型的なメールを作成するアプリを作りましょう。

以下のコードをスクリプトエディタに打ち込んでみてください。contentの部分とadressの部分を自分が送りたい相手先に変更してください。

openDocumentsの部分で、ドラッグ&ドロップされたファイルを受け取り、createEmailの部分でメール本文を作成しています。スクリプトの詳細は、次回ご説明しますね。

//openDocumentsでドラッグ&ドロップされたファイルを受け取る
function openDocuments(docs) {
    //件名を今日の日付に設定する
    var today = new Date();
    var month = today.getMonth() + 1;
    var date = today.getDate();
    var subject = month + "月" + date + "日の成果報告";
    
    var content = "tadaken3さん\n\n" + "本日の作業分です、ご確認ください。\n\n";
    var address = "tadaken3@hogehoge.com";//宛先のアドレス
    
    //件名、アドレス、本文、ファイルをもとにmailを作成する
    createEmail(subject,address,content,docs);
    }

function createEmail(subject,address,content,docs){
    var Mail = Application("Mail");//Mailアプリを呼び出す
    var msg = Mail.OutgoingMessage({
        subject: subject, //タイトル
        content: content, //本文
        visible: true
    });
    Mail.outgoingMessages.push(msg)
    var rec = Mail.ToRecipient({
            address : address   // 送信先を指定
    });
    msg.toRecipients.push(rec); 
    
    //ファイルを添付する
    for (d in docs) {
        var attachment = Mail.Attachment({fileName: docs[d]});
        msg.characters.push(attachment);
    }
        
    Mail.activate();  
}

先程と同様にアプリケーションとして保存しましょう。アプリ名はautoMailer.appとしました。 デスクトップにアプリができましたね。

f:id:tadaken3:20170708210314j:plain

作成したアプリに成果物のファイルをドラッグ&ドロップすると、、、

f:id:tadaken3:20170708210419j:plain

添付ファイル付きのメールが自動で作成されました。確認して送付すればオッケーですね!

まとめ

今回はJXAの最初の一歩として

  • スクリプトエディタの使い方
  • アプリの作成方法

をお伝えしました。Macユーザーには心強い味方ですね。Javascriptで書けるのもとても魅力的です。次回もJXAの実践的なテクニックについてお伝えしますね。

今回の記事はいかがでしたか?

副業やプログラミングに関する記事を書いています。(ときどき、それ以外のことも)
読者登録してもらうと更新の励みになりますのでよろしくお願いいたします。