Sketchプラグインでファイル選択ダイアログを表示する方法

2020年7月14日火曜日

Mac Sketch

t f B! P L




Sketchの操作を自動化してくれるSketchプラグイン。便利ですよね。
最近ちょっとした理由で、自作Sketchプラグインでファイル選択ダイアログを表示させたかったので実装方法を調べてみました。

Sketch API では複雑なダイアログ制御ができない

Sketchプラグインの開発で主に使用することになる Sketch API 。
LayerやArtboard、Page の操作といった Sketchドキュメント内の操作自動化に使える機能が一通り揃っています。
しかしこのAPI、UI周りがとにかく貧弱で 表示用途で使えそうなAPIは下記の2つくらいしか用意されていません。

いずれも表示できるのはテキストのみで、使い道は確認用のメッセージ表示くらい。
よってファイル選択ダイアログについては別の方法で実現する必要があります。

解決策

Cocoa API の NSOpenPanel クラスを使用することで実現できました。

// パネルインスタンスを生成
let panel = NSOpenPanel.openPanel();

// ファイル選択:有効
panel.setCanChooseFiles(true);

// 選択可能なファイル種別:テキスト
panel.setAllowedFileTypes(["txt"]);

// ディレクトリ選択:無効
panel.setCanChooseDirectories(false);

// 複数選択:無効
panel.setAllowsMultipleSelection(false);

// 新規ディレクトリ作成ボタンの表示:無効
panel.setCanCreateDirectories(false);

// ダイアログのタイトルを設定
panel.setTitle("select text file");

// ダイアログ表示
if (panel.runModal()  == NSOKButton) {
    // ファイル選択時の処理
    let textPath = panel.URL().path();
    let textBuffer = stringWithContentsOfFile_encoding_error(textPath, NSUTF8StringEncoding, nil);
    log("text : " + textBuffer);

} else {
    // ファイル選択キャンセル時の処理
    log("cancel.");
}

これでファイル選択ダイアログを表示することができます。

ちなみに、Sketchプラグイン自体は CocoaScript という JavaScript と Objective-C の文法を組み合わせた気持ち悪い特殊なスクリプトで動いていて、Sketch API が JavaScript、Cocoa API が Objective-C (※) でそれぞれ提供されています。
(※)Objective-CのIFは上記サンプルコードのように全てJavaScriptの文法で記述することも可能

Cocoa API は Macアプリ開発でも使用されているので、他にも調べれば色々なことができそう。
機会があればもう少し調べてみようと思います。

自己紹介

SESから工場へ転職 ⇒ その後SESへ出戻った底辺客先常駐エンジニアです。 主に組み込み、オープン系の現場で詳細設計~実装を担当しています。 使用言語:C/C++/C#/Java/JavaScript (Node.js)/Python etc..

QooQ