JavaScriptを使用したOS Xアプリケーションの構築

最近、OS X YosemiteはJavaScriptを使用して自動化する機能を導入しました。 これにより、JavaScriptからネイティブOS X *フレームワークにアクセスできる可能性が広がります。 私はこの新しい世界を駆け回って、いくつかの例を集めました。 この投稿では、基本を説明し、 小さなアプリケーションを作成するプロセスを段階的に示します 。

JavaScriptを使用した自動化に関するセッションがWWDC 2014で開催されました。 AppleScriptの代わりにJavaScriptを使用してアプリケーションを自動化できることがわかりました。 これ自体が刺激的なニュースです。 AppleScriptを使用して繰り返し操作を自動化する機能は、かなり前から存在していました。 AppleScriptで書くのは楽しい経験ではないので、代わりに使い慣れた構文を使用することは非常に良いでしょう。

このセッション中に、スピーカーはObjective-Cとブリッジについて話しました。 ここからが楽しみです。 ブリッジを使用すると、Objective-CフレームワークをJSアプリケーションにインポートできます。 たとえば、標準のOS Xコントロールを使用してGUIを作成する場合は、Cocoaをインポートする必要があります。

ObjC.import("Cocoa");
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Freymork Foundationは、その名前が示すとおりのものです。 OS Xアプリケーションのブロックを組み立てることができ、クラスとプロトコルの膨大なセットがあります。 NSArray 、 NSURL 、 NSUserNotificationなど あなたはそれらのすべてに精通していないかもしれませんが、それらの名前はそれらが何のためにあるかを示唆しています。 このフレームワークは非常に重要であるため、新しいアプリケーションにインポートする必要なく、デフォルトでフレームワークを利用できます。

私の知る限り、JavaScriptでもObjective-CやSwiftと同じことができます。

例

注：この例を機能させるには、Yosemite Developer Preview 7+が必要です

何かを学ぶための最良の方法は、それを受け取って何かをしようとすることです。 コンピューターの画像を表示できる小さなアプリケーションを作成するプロセスを紹介します。

私のリポジトリから完全な例をダウンロードできます 。



作成するアプリケーションの画面。



アプリケーションには、ウィンドウ、テキストブロック、入力フィールド、ボタンがあります。 さて、またはクラス名： NSWindow 、 NSTextField 、 NSTextField 、 NSButton 。

「ファイル選択」ボタンをクリックすると、 NSOpenPanelが開き、ファイルが選択されます。 ユーザーが.jpg、.png、および.gif以外の拡張子を持つファイルを選択できないように、パネルを構成します。

画像を選択した後、ウィンドウに表示します。 ウィンドウのサイズは、画像の幅と高さ、およびコントロールの高さに合わせて調整されます。 また、コントロールが消えないように、最小ウィンドウサイズも示します。

プロジェクトのセットアップ

Applictions> UtilitiesでApple Script Editor アプリを開きます。 これは私が試した最高のエディターではありませんが、今では必要です。 JSでOS Xアプリケーションを構築するために必要な機能がいくつかあります。 フードの下で何が起こっているのかはわかりませんが、彼はスクリプトをアプリケーションとしてコンパイルして実行する方法を知っています。 また、Info.plistファイルなど、追加の必要なものも作成します。 他の編集者に同じことを強制する機会があるように思えますが、私はまだそれを理解していません。

File> Newまたはcmd + nで新しいドキュメントを作成します。 最初に行う必要があるのは、ドキュメントをアプリケーションとして保存することです。 File> Saveまたはcmd + sで 保存します 。 一度に急いで保存しないでください。 プロジェクトをアプリケーションとして実行するために必要な2つの設定があります。



必要な設定を備えたスクリプトエディター



フォーマットを「アプリケーション」に変更し、「閉じない」ボックスにチェックを入れます**

重要な注意：これらの設定は変更できます。[ファイル]メニューを開き、オプションボタンを押し続けます。 これにより、「名前を付けて保存...」アイテムが開きます。 保存ダイアログで、設定を変更できます。 しかし、プロジェクトを作成するときはすぐにこれを行う方が良いです。

[閉じない]チェックボックスをオンにしないと、アプリケーションが開き、すぐに閉じます。 インターネット上のこの機能に関するドキュメントはほとんどありません。 キーボードで額を叩いて数時間後にこのことを知りました。

すでに何かをしましょう！

次の行をスクリプトに追加し、 Script> Run Applicationまたはcmd + rを使用してすべてを実行します。

 ObjC.import("Cocoa"); $.NSLog("Hi everybody!");
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ほとんど何も起こりませんでした。 表示される変更は、メニューバーとドックのみです。 アプリケーションの名前と項目FileおよびEditがメニューバーに表示されました。 アイコンがドックにあるため、アプリケーションが実行されていることがわかります。

「こんにちは、みなさん！」という行はどこにありますか？ また、jQueryのドル記号とは何ですか？ File> Quitまたはcmd + qでアプリケーションを閉じて、このNSLogが発生した場所を見つけましょう。

コンソールを開きます ： アプリケーション>ユーティリティ>コンソール 。 各アプリケーションは、コンソールに何かを書き込むことができます。 Chrome、Safari、Firefoxの開発者ツールと大差ありません。 主な違いは、サイトではなくアプリケーションをデバッグしていることです。

多くのメッセージがあります。 右上隅の検索バーに「アプレット」と書くことでフィルタリングします。 スクリプトエディターに戻り、 opt + cmd + rを使用してアプリケーションを再度実行します。



見ましたか！？ 「こんにちは、みなさん！」というメッセージがコンソールに表示されます。 存在しない場合は、アプリケーションを閉じて再度実行します。 何回も閉じるのを忘れて、コードが起動しませんでした。

ドル記号はどうですか？

ドル記号は、Objective-Cのブリッジへのアクセスです。 Objective-Cクラスまたは定数にアクセスする必要があるたびに、 $ .fooまたはObjC.fooを使用する必要があります。 後で$を使用する他の方法について説明します。

コンソールアプリケーションとNSLogはかけがえのないものであり、常にデバッグに使用します。 文字列以外のログを記録する方法については、 NSLogの例をご覧ください。

ウィンドウを作成する

やり取りをしましょう。 コードを追加します。

 ObjC.import("Cocoa"); var styleMask = $.NSTitledWindowMask | $.NSClosableWindowMask | $.NSMiniaturizableWindowMask; var windowHeight = 85; var windowWidth = 600; var ctrlsHeight = 80; var minWidth = 400; var minHeight = 340; var window = $.NSWindow.alloc.initWithContentRectStyleMaskBackingDefer( $.NSMakeRect(0, 0, windowWidth, windowHeight), styleMask, $.NSBackingStoreBuffered, false ); window.center; window.title = "Choose and Display Image"; window.makeKeyAndOrderFront(window);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、アプリケーションを実行します。 opt + cmd + r 話しましょう！ 少量のコードで、移動、最小化、および閉じることができるアプリケーションを作成しました。



JSを使用して作成されたシンプルなNSWindowウィンドウ



私のように、Objective-CやCocoaを使用してアプリケーションを作成する必要がなかった場合、これは少しおかしく見えるかもしれません。 メソッド名の長さはそのように思えました。 わかりやすい名前が好きですが、Cocoaは行き過ぎです。

ただし、これはJavaScriptです。 コードは、Webサイトを作成しているように見えます。

styleMask値を設定した最初の行で何が起こりますか？ スタイルマスクは、ウィンドウをカスタマイズするために使用されます。 各オプションは、追加する内容を示します。 タイトル、閉じるボタン、最小化ボタン。 これらのオプションは定数です。 ビット単位または（ "|"）を使用して、ある設定を別の設定から分離します。

多くのオプションがあります。 それらについてはすべてドキュメントで読むことができます 。 NSResizableWindowMaskを追加して、何が起こるかを確認してください。

構文に関するいくつかの興味深いことを覚えておく必要があります。 $ .NSWindow.allocは、 NSWindowオブジェクトのallocメソッドを呼び出します。 メソッドを呼び出した後は括弧がありません。 JavaScriptでは、これによりメソッドではなくプロパティにアクセスできます。 どう？ OS XのJSでは、ブラケットはパラメーターを渡す場合にのみ許可されます。 引数なしで括弧を使用しようとすると、実行時エラーが発生します。 問題が発生した場合は、コンソールでエラーを確認してください。

以下は、超長メソッド名の例です。

 initWithContentRectStyleMaskBackingDefer
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

NSWindowのドキュメントでは、このメソッドは少し異なります。

initWithContentRect:styleMask:backing:defer:





Objective-Cでは、このようなウィンドウは次の方法で作成されます。

 NSWindow* window [[NSWindow alloc] initWithContentRect: NSMakeRect(0, 0, windowWidth, windowHeight) styleMask: styleMask, backing: NSBackingStoreBuffered defer: NO ];
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

メソッドの元の説明のコロン（ "："）に注意してください。 JSでObjective-Cメソッドを使用するには、それらを削除し、次の文字を大文字に置き換える必要があります。 角括弧（ "[]"）は、クラス/オブジェクトメソッドの呼び出しです。 [NSWindow alloc]は、 NSWindowクラスのallocメソッドを呼び出します。 JSでは、これはNSWindow.allocに相当し、必要に応じて角かっこを追加します。

残りのコードは非常にシンプルだと思います。 彼女の詳細な説明が恋しいです。 次に何が起こるかを理解するには、多くの時間を必要とし、多くのドキュメントを読む必要がありますが、それを処理できます。 ウィンドウが表示されている場合、それはすでに素晴らしいです。 他のことをしましょう。

コントロールを追加する

ラベル、テキストボックス、ボタンが必要です。 NSTextFieldとNSButtonを使用します。 コードを更新して、アプリケーションを再度実行します。

 ObjC.import("Cocoa"); var styleMask = $.NSTitledWindowMask | $.NSClosableWindowMask | $.NSMiniaturizableWindowMask; var windowHeight = 85; var windowWidth = 600; var ctrlsHeight = 80; var minWidth = 400; var minHeight = 340; var window = $.NSWindow.alloc.initWithContentRectStyleMaskBackingDefer( $.NSMakeRect(0, 0, windowWidth, windowHeight), styleMask, $.NSBackingStoreBuffered, false ); var textFieldLabel = $.NSTextField.alloc.initWithFrame($.NSMakeRect(25, (windowHeight - 40), 200, 24)); textFieldLabel.stringValue = "Image: (jpg, png, or gif)"; textFieldLabel.drawsBackground = false; textFieldLabel.editable = false; textFieldLabel.bezeled = false; textFieldLabel.selectable = true; var textField = $.NSTextField.alloc.initWithFrame($.NSMakeRect(25, (windowHeight - 60), 205, 24)); textField.editable = false; var btn = $.NSButton.alloc.initWithFrame($.NSMakeRect(230, (windowHeight - 62), 150, 25)); btn.title = "Choose an Image..."; btn.bezelStyle = $.NSRoundedBezelStyle; btn.buttonType = $.NSMomentaryLightButton; window.contentView.addSubview(textFieldLabel); window.contentView.addSubview(textField); window.contentView.addSubview(btn); window.center; window.title = "Choose and Display Image"; window.makeKeyAndOrderFront(window);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべてがうまくいけば、コントロールのあるウィンドウができました。 フィールドに何も入力することはできず、ボタンは何もしませんが、ちょっと待ってください。すでに前進しています。



ウィンドウコントロール



ここで何をしましたか？ textFieldLabelとtextFieldは互いに似ています。 どちらもNSTextFieldのインスタンスです。 ウィンドウを作成したのと同じ方法で作成しました。 initWithFrameとNSMakeRectが表示される場合、ほとんどの場合、UI要素がここに作成されています。 NSMakeRectは、その名前でレンダリングされることを行います。 指定された座標と寸法で長方形を作成します。 （x、y、幅、高さ） 。 これにより、Objective-Cで「構造」と呼ばれるものが作成されます。 JSでは、同等のものはオブジェクト、ハッシュ、または辞書である可能性があります。 キーと値のペア。

テキストフィールドを作成したら、いくつかのプロパティをそれぞれ設定して、目的の結果を取得します。 Cocoaには、htmlラベル要素のようなものはありません。 それでは、背景と編集機能をオフにしてください。

テキストボックスをプログラムで設定し、同時に編集を無効にします。 これが必要なければ、1行で管理できます。

ボタンを作成するには、 NSButtonを使用します 。 テキストボックスと同様に、構造が必要です。 プロパティには、 bezelStyleとbuttonTypeの 2つがあります。 両方の値は定数です。 これらのプロパティは、要素の描画方法と要素のスタイルを決定します。 NSButtonのその他の操作については、 NSButtonのドキュメントを参照してください。 また、さまざまなスタイルと動作中のボタンのタイプを示す例もあります。

ここで行っている最後の新しいことは、 addSubViewを使用してウィンドウに要素を追加することです 。 を使用してこれを最初に試みたとき

 window.addSubview(theView)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

NSViewで作成する他の標準ビューでは、これは機能しますが、 NSWindowインスタンスでは機能しません。 理由はわかりませんが、 windowsのcontentViewに要素を追加する必要があります 。 ドキュメントには、「ウィンドウ階層で使用可能な最上位のNSView」とあります。 それは私のために働いた。

ボタンを機能させる

「画像の選択」ボタンをクリックすると、コンピューター上のファイルを表示するパネルが開きます。 その前に、ボタンをクリックしたときにコンソールにメッセージを追加してウォームアップしましょう。

JSでは、クリックを処理するためにイベントハンドラーが要素にアタッチされます。 Objective-Cは、わずかに異なる概念を使用しています。 メッセージング***と呼ばれるものを使用します。 つまり、メソッドの名前を含むメッセージをオブジェクトに渡します。 オブジェクトには、そのようなメッセージを受け取ったときに何をすべきかについての情報が必要です。 これは最も正確な説明ではないかもしれませんが、私は理解しています。

最初に、ボタンにターゲットとアクションを設定する必要があります。 ターゲットは、 アクションに含まれるメッセージの送信先のオブジェクトです。 明確になっていない場合は、次に進んでください。コードを見れば、すべてを理解できます。 ボタンが構成されているスクリプトの部分を更新します。

 ... btn.target = appDelegate; btn.action = "btnClickHandler"; ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

appDelegateとbtnClickHandlerはまだ存在しません。 それらを作らなければなりません。 次のコードでは、順序が重要です。 新しいコードがどこにあるかを示すコメントを追加しました。

 ObjC.import("Cocoa"); //   ObjC.registerSubclass({ name: "AppDelegate", methods: { "btnClickHandler": { types: ["void", ["id"]], implementation: function (sender) { $.NSLog("Clicked!"); } } } }); var appDelegate = $.AppDelegate.alloc.init; //    //  ,    var textFieldLabel = $.NSTextField.alloc.initWithFrame($.NSMakeRect(25, (windowHeight - 40), 200, 24)); textFieldLabel.stringValue = "Image: (jpg, png, or gif)"; ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アプリケーションを起動し、ボタンをクリックしてコンソールを見てください。 ボタンをクリックすると、「Clicked！」メッセージが表示されますか？ もしそうなら、それはただのジャークですよね？ そうでない場合は、コンソールでコードとエラーを確認してください。

継承

ObjC.registerSubclassとは何ですか？ 継承は、別のObjective-Cクラスを継承する新しいクラスを作成する方法です。 叙情的な余談：ここで、私が間違った用語を使用する可能性があります。 私と戦え。 registerSubclassは1つの引数を取ります：新しいオブジェクトのプロパティを含むJSオブジェクト。 プロパティには、 name 、 superclass 、 protocols 、 propertiesおよびmethodsがあります 。 これが完全なリストかどうかは100％わかりませんが、これはリリースノートに記載されています 。

これはすべて順調ですが、ここで何をしましたか？ スーパークラスを指定しなかったため、 NSObjectから継承します。 これは、ほとんどのObjective-Cクラスの基本クラスです。 nameプロパティにより、今後$またはObjCを介して新しいクラスにアクセスできるようになります。

$ .AppDelegate.alloc.init; クラスAppDelegateのインスタンスを作成します。 繰り返しますが、引数を渡さないため、 allocメソッドとinitメソッドの呼び出しの括弧は使用されないことに注意してください。

相続人の方法

メソッドは、任意の文字列名を割り当てることにより作成されます。 たとえば、 btnClickHandler 。 型と実装プロパティを持つオブジェクトを渡します。 types配列に含まれるべきものに関する公式ドキュメントは見つかりませんでした。 試行錯誤を通して、私はそれが次のように見えることに気付きました。

 ["return type", ["arg 1 type", "arg 2 type",...]]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

btnClickHandlerは何も返さないため、最初の要素は無効になります。 1つのパラメーター、メッセージを送信するオブジェクトが必要です。 私たちのケースでは、 NSnと呼ばれるNSButtonを使用しました。 タイプの完全なリストはここで利用可能です 。

実装は通常の機能です。 その中にJavaScriptを記述します。 オブジェクトの外部と同じように$にアクセスできます。 また、関数の外部で宣言された変数を使用できます。

プロトコルの使用に関するちょっとした注意

Cocoaプロトコルからサブクラスを継承できますが、落とし穴があります。 プロトコル配列を使用すると、スクリプトがエラーなしで単純にクラッシュすることがわかりました。 例と説明を書いたので、それらを使って作業したい場合は、それを読んでください。

画像の選択と表示

パネルを開いて、画像を選択して表示する準備ができました。 機能コードの更新

  btnClickHandler: ... implementation: function (sender) { var panel = $.NSOpenPanel.openPanel; panel.title = "Choose an Image"; var allowedTypes = ["jpg", "png", "gif"]; // NOTE:    JS   NSArray panel.allowedFileTypes = $(allowedTypes); if (panel.runModal == $.NSOKButton) { // NOTE: panel.URLs -  NSArray,   JS array var imagePath = panel.URLs.objectAtIndex(0).path; textField.stringValue = imagePath; var img = $.NSImage.alloc.initByReferencingFile(imagePath); var imgView = $.NSImageView.alloc.initWithFrame( $.NSMakeRect(0, windowHeight, img.size.width, img.size.height)); window.setFrameDisplay( $.NSMakeRect( 0, 0, (img.size.width > minWidth) ? img.size.width : minWidth, ((img.size.height > minHeight) ? img.size.height : minHeight) + ctrlsHeight ), true ); imgView.setImage(img); window.contentView.addSubview(imgView); window.center; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最初に、 NSOpenPanelのインスタンスを作成します。 ファイルを選択したか、このファイルを保存する場所を選択したことがある場合、パネルが動作しているのを見ました。

アプリケーションに必要なのは、画像を表示することだけです。 allowedFileTypesプロパティを使用すると、パネルで選択できるファイルの種類を決定できます。 NSArray型の値を取ります。 有効な型でJS配列を作成しますが、それでもNSArrayに変換する必要があります。 これは次のように行われます： $（allowdTypes） 。 これは、ブリッジを使用する別の方法です。 このメソッドを使用して、JS値をObjective-Cに変換します。 逆の操作は$（ObjCThing）.jsのように行われます。

panel.runModalを使用してパネルを開きます。 コードの実行は一時停止しています。 [ キャンセル ]または[開く ]をクリックすると、パネルは値を返します。 [開く ]ボタンを押すと、定数$ .NSOKButtonが返されます。

panel.URLsに関する次のコメントは非常に重要です。 JSでは、配列値へのアクセスは次のように行われます： array [0] 。 URLはNSArray型であるため、角括弧を使用できません。 代わりに、 objectAtIndexメソッドを使用します。 結果は同じになります。

画像URLを取得した後、 NSImageの新しいインスタンスを作成できます 。 ファイルURLを使用して画像を作成する方法は広く普及しているため、これには便利な方法があります。

initByReferencingFile





NSImageViewは、他のUI要素の作成に使用したのと同じ方法で作成されます。 imgViewは画像の表示を制御します。

ウィンドウのサイズを画像の幅と高さに合わせて調整する必要がありますが、高さ/幅の下限を維持する必要があります。 ウィンドウのサイズを変更するには、 setFrameDisplayを使用します 。

したがって、 imageViewの画像を設定し、ウィンドウに追加しました。 幅と高さが変更されているため、ウィンドウを中央に配置する必要があります。

そして、ここに小さなアプリケーションがあります。 いくつかのファイルを開いてください。 そして、はい、アニメーションGIFも機能するので、忘れないでください。

おいしいニュース

ここまで、アプリケーションをopt + cmd + rで実行しました 。 ただし、アイコンをダブルクリックして通常のアプリケーションを起動します。



アイコンをダブルクリックして、アプリケーションを起動します



アイコンは、 /Contents/Resources/applet.icnsを置き換えることで変更できます。 アプリケーションリソースにアクセスするには、アイコンを右クリックして[パッケージの内容を表示]を選択します。

どうしてそんなに興奮したの

私は大きな可能性があると思うからです。 それが理由です。 Yosemiteが登場すると、誰でも座ってネイティブアプリケーションを作成できます。 そして、最も一般的なプログラミング言語の1つを使用してそれを行うことができます。 ダウンロードしたりインストールしたりする必要はありません。 必要ない場合は、Xcodeをインストールする必要はありません。 エントリーのしきい値は大幅に削減されます。 これは信じられないです。

OS X用のアプリケーションの開発は、ひざまずいてスクリプトを書くよりもはるかに深いプロセスであることを知っています。 JavaScriptがMacの開発を開始するための事実上の標準になるという幻想はありません。 これは、開発者が自分自身や他の人々の開発を容易にする小さなアプリケーションを作成するのに役立つと信じています。 チームには、コマンドラインでの作業が難しいと感じる人がいますか？ クイックGUIを作成します。 構成をすばやくまたは視覚的に作成または変更する方法が必要ですか？ このための小さなアプリケーションを作成します。

他の言語にもこれらの機能があります。 PythonとRubyは同じネイティブAPIにアクセスでき、人々はそれらを使用してアプリケーションを作成します。 ただし、これにJavaScriptを使用することは異なります。 これにより、すべてが逆さまになります。 ウェブ開発のDIYの原則が、デスクトップの下での開発の扉をノックしているように。 アップルはドアのロックを解除したままにしました。



翻訳者のメモ：

*-ネイティブ、たとえば、HTML5アプリケーションと従来の

**-ハンドラーの実行後は開いたままにします。スクリプトエディターのロシア語版でのセットアップの名前がわからない

***-メッセージの受け渡し