Sketch で Symbol 新規作成時の名前入力で入力補完してくれる Plugin 「SymbolNameAutocomplete」を作ってみた

昨晩、Sketch Plugin 「SymbolNameAutocomplete」を公開しました。

できること

Symbol の新規作成時に Symbol 名を入力する時に入力補完してくれます。

より具体的には以下のような感じに振る舞います。

  • 既に存在している Local Symbol を対象とする
  • / による階層分け毎にマッチングさせていく
  • 補完決定時に下位階層がある場合には / まで補完
  • / の前後に半角スペースなどを入れている場合には <半角スペース>/<半角スペース> まで補完

/ の前後のスペースを考慮して補完するあたりはこだわりました。候補の選択にカーソルキーが使えるのは当然のこと、Ctrl+N, Ctrl+P での移動にもちゃんと対応させています。

背景

  1. 2018年2月28日 『try! macOS meet-up』で「Symbol 新規作成時の名前入力で Safari のアドレス補完っぽく入力補完したい」と @usagimaru 氏, @dy4_268 氏 に相談するも具体的な方法まで至らず
    • その筋の人達でも即答即解決とはいかず
  2. 2018年3月頃にあるデザイナーが「命名するときに入力補完されたらええのにな！」という。
    • 需要を認識
  3. 2018年7月10日 zeplin/emoji-autocomplete-sketch-plugin: Type “:” followed by the first few letters to autocomplete emojis. 🍒 zeplin が emoji の Autocomplete プラグインをおもむろにリリース
    • 大いに参考になるとコードを読んでみる
  4. 2018年9月29日 ずむ on Twitter: "WWDC 2010 Session 145 "Key Event Handling in Cocoa Applications" を見たら入力フィールドの下に出てくる候補表示の作り方があった！ 今のところ Archive のページから入手可能。 https://t.co/rhyw9DnPAE" つぶやき発見
    • そのものズバリの情報。
    • サンプルコードもある！CustomMenus
  5. 連休で暇になりトライ

まとめ

これまでも公開していないですがいくつか Sketch Plugin は書いていましたがいずれも CocoaScript で書いたものばかりでしたが、今回はじめて Objective-C で書きました。zeplin の emoji-autocomplete-sketch-plugin のおかげで割とすんなり作れました。今はまだソースコードは公開していませんが時間が取れたら公開したいと思います。

このプラグインを使うことで Symbol の命名規則のブレをある程度抑えることができると思いますので使ってみてください。