スニペットとしてもドキュメント検索としても使える「Dash 6」でコードや定型文を管理する

スニペットとしてもドキュメント検索としても使えるMacユーザーにオススメのアプリ、「Dash」ですが、過去に記事にしたことがあります。
ただ、時間も経ってメジャーアップデートもあったので、今回改めてまとめ直します。

Webrandum

Macユーザーにオススメのスニペットアプリ「Dash」でコードや定型文の管理を行う

https://webrandum.net/dash

HTMLやCSSなどのコードの入力で同じような入力を何度もしていませんか？そんな方にはスニペットツールがオススメです。スニペットツールを使えばよく使う定型文を簡単にペーストできるように登録したり、入力後のカーソル位置の指定や、クリップボード内のテキストと合わせてペーストしたりといった細かい指定ができます。今回は数あるスニペットアプリの中から「Dash」について基本的な機能を紹介します。ちなみに、自分の場合は日常会話などに使う定型文はAlfredのスニペット機能を使っていて、コードの定型文はDashを使うようにして...

スニペットアプリは必須

「スニペット（snippet）」は断片という意味があり、何度も再利用して繰り返し使うコードや定型文のことです。

スニペット(英語: snippet)とは、「断片」という意味で、再利用可能なソースコード、マシンコード、またはテキストの小さな領域を表すプログラミング用語である。

スニペット – Wikipedia

これらのスニペットをまとめて管理し、簡単に呼び出しペーストできるのが「スニペットアプリ」です。
別にDashでなくてもいいですが、とにかくPCで文字やコードを入力している人に、このスニペットアプリは必須です。

• よく使うコードをすばやくペーストして時短になる
• 挨拶文や依頼文を定型化することで、変換ミス・入力ミスを防ぐ
• 必要情報をリスト化して、他人に送るときに抜け漏れを防ぐ

「入力の時短」「入力ミスの防止」「抜け漏れの防止」この3つがポイントで、その結果入力がラクになります。

入力の時短

例えば、コードの例でいくと「CSSで疑似要素を作って背景画像を設定したい」ときに下記のコードを入力します。

content: '';
display: block;
width: ;
height: ;
background: url('') no-repeat;
background-size: contain;
position: absolute;
top: 0;
left: 0;
bottom: 0;
margin: auto;

何行もあるので、さすがに毎回全部入力している人は少ないでしょう。
しかし、下記のような人は多いのではないでしょうか？

• 別のファイルから、似た箇所を探してきてコピペ
• Googleで検索してコピペ

コピペがラクですが、これだとなかなか見つからないときや、余計なコードが入っている場合もあります。
スニペットアプリだと、自分で1度登録したらあとは検索してすぐペーストできます。

「その登録が面倒くさい」と思うかもしれませんが、登録は1分かからずにできます。
毎回ファイルを探したり検索して探すよりは、はるかにラクです。

また、コード以外の普通の文章でも使えます。
自分の場合は下記のような文章を定型化していました。

@○○
おはようございます。
下記順番で課題の対応お願いします！

- 

本日もよろしくお願いします！

Slackで課題を依頼するときの定型文ですが、スニペットでペースト → 課題内容をコピペしていって送信で済みます。

ちなみに、フレーズレベルの入力は単語登録で実現できます。
たとえば「よろ」と打って変換すると「よろしくお願いします」になったりするので、それも活用すると入力スピードが上がります。

過去に記事にしているので、気になる方はそちらもご覧ください。

Webrandum

ATOKに「短縮読み」の単語を登録して、よく使うフレーズを一瞬で入力する

https://webrandum.net/atok-abbreviated-reading

意外と知られていませんが、ATOKやGoogle日本語入力には、「短縮読み」という品詞があります。うまく活用すると長い文章を短いタイプ数で入力できるので、かなりラクになります。略語は「短縮読み」に設定しておく短縮読みに設定しておくと、登録した「読み」だけで変換したときに変換されるようになります。例えば「よろ」→「よろしくお願いします」で普通に単語登録をした場合、「よろしく」と打って変換してしまうと、先頭の「よろ」に反応して「よろしくお願いしますしく」と意図しない変換になってしまう可能性があります。「よろ...

入力ミスの防止

コードにしても普通の文章にしても、1度設定してしまえばあとはそれを呼び出してペーストするだけなので、入力ミスが起こりません。

いつも打っているような内容を入力するのって面倒ですし、集中力が切れてミスしがちです。

また、コードに関しても余計な入力ミスで動かなくなることが減ります。
Lint系のツールを使っているとまだマシですが、ちょっとしたミスで時間が取られることもあるので少しでも入力ミスは防止できた方がいいです。

抜け漏れの防止

データベース情報を他人に連携して、WordPressの環境構築をしてもらうときに、下記の情報が必要になります。

データベース名：
ユーザー名：
パスワード：
データベースのホスト名：
テーブル接頭辞：

このレベルであれば抜け漏れることはありませんが、このような連携用の定型文を作っておくと、なにが必要かすぐ分かります。

また、このリストの並びは、WordPressで開発環境を構築するときに入力する順番に並んでいます。

ちょっとした気づかいですが、受け取った相手はこれを上からコピペしていけば入力できます。

毎回自分で入力していると、使っているレンタルサーバーによっては「データベースのホスト名」が上の方に表示されたりするので、並び順が安定しません。
こうした配慮も、最初に設定してしまえば後は考える必要なしになります。

その他の主要なスニペットアプリ

Dash以外に有名なのがTextExpander、あとはAlfredはスニペットアプリではありませんが、有料版であればスニペット機能が使えます。
有名なものはこの3つで、他にもマイナーなものは調べてみるといろいろ出てきますが、機能は似たり寄ったりです。

TextExpander

TextExpander – Productivity App | Text Expander

https://textexpander.com

TextExpander: Communicate Smarter. Boost business productivity by eliminating drudgery in communication.

ちなみに、Alfredのスニペット機能に関しては過去に記事にしているので、気になる方はそちらもご覧ください。

Webrandum

Alfred 4でスニペットを作成して使用する方法

https://webrandum.net/alfred4-snippets

自分はDashというスニペットアプリを使っていたり、Keyboard Maestroでスニペットを展開するマクロを作っていたりもしますが、Alfredでもスニペットの作成は可能です。使い分けが難しいのですが、今回はAlfredのスニペット機能についてまとめてみます。スニペット機能の使い方スニペット機能は［環境設定］→［Features］→［Viewer Hotkey］で設定したキーを入力してスニペットの画面を出します（デフォルトでは何も設定されていません）。もしクリップボードの設定で「Show "All Snippets" at top of Clipboard History」に...

Dash

kapeli.com

Dash for macOS - API Documentation Browser, Snippet Manager - Kapeli

https://kapeli.com/dash

Dash is an API Documentation Browser and Code Snippet Manager. Dash searches offline documentation of 150+ APIs and stores snippets of code. You can also generate your own documentation sets.

Dashは「スニペット機能」と「ドキュメント検索機能」が備わったアプリです。

スニペット機能は先ほど紹介した通りの機能があり、ドキュメント検索機能というのは、各言語の公式ドキュメントをすばやく検索できる機能です。

HTML・CSS・JavaScriptなどの基本的なウェブ用の言語から、JavaやC#などのガッツリのプログラミング言語、さらにMarkdownやEmmetなどの記法に至るまでさまざまです。
わざわざブラウザを起ち上げて検索するより早いです。

Dashのインストール

Dashは公式サイトからインストールできます。
30日間の無料お試し期間があるので、まずは使ってみてどんなものか試せます。

以前のバージョンからアップグレード

Dash 5のライセンスを持っている人は、通常より安い$19.99でアップグレードができます。

Dash 6へのアップデート後、環境設定の［Purchase］にある「Upgrade Dash」でライセンスのアップグレードができます。

アップグレード後は登録したメールアドレス宛にメールが届き、「license.dash-license」がダウンロードできるので、それを今度は「Activate Using License File」ボタンをクリックして選択すればライセンス登録完了です。

ライセンスの購入

Dashのライセンスは$29.99かかります。
公式サイトから購入すると、登録したメールアドレス宛にメールが届き、「license.dash-license」がダウンロードできます。

あとは、Dashを開いて環境設定（command + ,（カンマ））の［Purchase］にある「Activate Using License File」ボタンをクリックします。

ファイルの選択ダイアログが開くので、ダウンロードした「license.dash-license」を選択すればライセンス登録完了です。

Dashの基本操作

Dashの環境設定の［General］の「Show Dash」でDashを起動するショートカットを設定できます。
自分の場合はcontrol + spaceにしています。

設定してショートカットキーを押すと、Dashのメインウインドウが表示されるので、ここでドキュメントの検索をしたり、スニペットの検索をしたりします。

Dashでスニペットの管理

スニペット登録

スニペットを登録したいときは、Dashの検索バーで「Snippets」→「New Snippet」を選択します。

これでスニペットの新規作成画面に切り替わりました。

「Snippet Abbreviation」にはスニペットを呼び出すときのキー（名前）を入力し、真ん中の空白部分にスニペットを入力します。

コードの場合は右上の「JavaScript」と書かれた部分を別の言語に変更すれば、適切なコードハイライトをしてくれます。

Snippet Abbreviationの登録

Snippet Abbreviationは、タイトルの役割もありますが、スニペットを呼び出すときのトリガーにもなります。
そのため、簡単で日常的にも入力しそうな名前を登録していると、誤発火の原因になります。

自分の場合は誤発火しないために、スニペットには先頭に「;」を付けるにしています。
（もっと安全にしたい人は「;;」と2回入力にするなど工夫をすればさらに安全になります）

こうすることで誤発火も防げますし、Dashで検索をするときにスニペットとドキュメントが混在しなくなります。
「;」を先頭につければ出てくるのは全てスニペットなので絞り込み方法として非常に便利です。

また、検索のときに時間がかかるので、日本語も非推奨です。

• 半角英数で登録する
  • 日本語は使わない
• スニペット用の目印をつけておく
• 検索でラクをするために省略できる部分は省略する
  • 例：「;javascript_for」 → 「;js_for」
• 単語の区切りに「_（アンダーバー）」を使うか「-（ハイフン）」を使うか統一しておく

最終的に上記のポイントに注意して付ければOKです。

最初にこの辺のルールを考えておかないと、後になってから付け直すことになったり、ルールがバラバラで検索しても見つけるのに時間がかかってしまい、本末転倒です。

Snippetの登録

真ん中のメイン部分が、スニペットの登録場所です。
ここに入力した内容をあとで一気にペーストできます。

また、スニペットアプリの多くは、ペーストするだけではなく、ペースト後のカーソル位置を指定したり、変数のような仕組みを使えたりします。
Dashにもその機能がついていて、画面右上の「テキスト選択カーソルのアイコン」から設定できます。

下記の5種類の項目があり、選択すると画面上に入力されます。

これらの機能を使うと、下記のようなスニペットが作れます。

__company__株式会社
__name__様

いつもお世話になっております。
株式会社〇〇の△△です。

@clipboard @cursor

__name__様、ご検討の程よろしくお願いいたします。
@date @time

全機能を説明するために、日付や時間を無理矢理入れていたり、ムダに名前を2回繰り返したりしていますが、このスニペットをペーストすると下記のようになります。

カンパニー株式会社
山田様

いつもお世話になっております。
株式会社〇〇の△△です。

クリップボードにコピーした内容

山田様、ご検討の程よろしくお願いいたします。
Apr 1, 2021 20:00

ペースト時に「__company__」と「__name__」の中身を入力する画面が表示され、入力してenterを押すと、それが反映された状態でペーストされます。

また、クリップボードにコピーしていた内容も反映され、日時も反映されてテキストカーソルが指定した位置に移動します。

Tagsの登録

「Tags」は検索バーで絞り込みたいときに使えます。
スニペットが多くなってくると絞り込みも大変なので、タグをうまく使うことで早く検索ができます。

今回登録したスニペットサンプル

上記を踏まえて、今回下記のスニペットをサンプルとして登録しました。
JavaScriptでfor文を入力するスニペットになります。

for (let i = 0; i < __repeat__; i++){
  @cursor
}

Snippet Abbreviationは「;js_for」にしています。

スニペットの使用（入力変換）

登録したスニペットを使う方法は2種類ありますが、まずは「入力変換」の方法から紹介します。

使い方は、先ほどスニペットを登録するときに入力した「Snippet Abbreviation」を入力するだけです。

今回使いたいスニペットは「;js_for」なので、テキストエディタ上でそれをそのまま入力します。

Placeholderを使っていない場合は入力後すぐにペーストされますが、Placeholderを使っている場合は、中身の入力パネルが開きます。

今回は「__repeat__」に繰り返し回数を入力するだけなので、試しに「3」と入力してenterを押します。

これで、for文が入力できました。
わざわざ全部入力する手間が省けます。

スニペットの使用（検索してペースト）

このままだと、スニペットごとにSnippet Abbreviationを全部覚えていなければいけません。
そこで使えるのが、検索してペーストする方法です。

ショートカットキーでDashを起動し、「Tags」や「Snippet Abbreviation」に入力した内容、またスニペットの中身まで検索対象になっています。

これで検索して、使いたいスニペットを選択したらenterを2回押して使用できます。
（1回目のenterで編集画面へ移動、「Use」にフォーカスが自動で合うので2回目のenterで使用）

他にもアプリケーションとの連携で使用する方法もありますが、Dash単体だと2つのうちどちらかになります。

自分の場合の使い方

自分の場合は、DashもAlfredもどちらも使っていて、下記のような使い分けをしています。

• Dash：コード専用のスニペット
• Alfred：日常的なプレーンなテキストのスニペット

Dashはやはりドキュメント検索もできますし、コードハイライトもあるので、コード向きのスニペットアプリです。

逆にAlfredはスニペットの登録が非常にラクなので「あ、これ似たような文章を前にも打ったな」と思ったらすぐ登録できます。
また、プレースホルダー機能が非常に強力で、日付の細かいフォーマット指定もできます。

Webrandum

Alfred 4のスニペットで使えるプレースホルダー機能

https://webrandum.net/alfred4-snippets-placeholder

以前スニペット機能に関しての基本的な解説はしたのですが、今回はスニペット内で使えるプレースホルダー（正式名称：Dynamic Placeholders）についてまとめておきます。プレースホルダースニペット追加時の「Snippet:」内に波括弧{}で囲まれた特定の文字列を入れておくことで、日付やクリップボードなどの情報を入れた状態でスニペットを発火できるようになります。プレースホルダーの追加は左下にある{}アイコンをクリックして選択します。日付関連「Date and Time」内のプレースホルダーは、日付や時間に関するプレースホルダーがま...

このように用途によって2つのアプリを使い分けることもできますが、まずは1つでもスニペットアプリを使って日々の入力をラクにしてみてください。