JavaScriptでテキストエディタmiのプラグインを作成する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでテキストエディタmiのプラグインを作成する方法について解説しています。miはmacOS用のテキストエディタです。ここではJavaScriptで記述した処理をプラグインとして実装する場合の手順について説明します。ぜひ活用してみましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

JavaScriptでテキストエディタmiのプラグインを作成する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

テキストエディタmiのプラグインを作成する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

テキストエディタmiとは

mi(エムアイ)はMac用の無料エディタです。言語ごとのキーワードの色分けや、自動インデントに関数や変数の補完入力など開発に便利な機能を搭載しています。

下記のmiのサイトからダウンロードできます。

miのサイト

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

JavaScriptでmiのプラグインを作成する方法

miをインストールしたら、miの配下のpluginsの中にJavaScriptで記述した処理を置くことでプラグインとして動作させることができます。

また、miには「モード」という概念があり、モードごとにプラグインが別れています。JavaScriptのモードで使うプラグインは、pluginsの上の階層でJavaScriptのディレクトリを選択してください。

例えば、JavaScriptモードで使うプラグインのファイルを置く場所は下記のようなディレクトリになります。

/アプリケーション/mi/Contents/Resources/default/JavaScript/plugins/

そして、プラグインを作成する際に提供されているAPI(平たく言うと機能のあつまり)は、miエディタを起動した後に

  1. ヘルプ
  2. miテキストエディタヘルプ
  3. 開いたヘルプページのサイドメニューからJavaScriptツール/プラグイン
  4. その中にあるmiテキストエディタAPI

の中に記述されています。

 

実際に作成してみよう

まずは簡単な記述でJavaScriptファイルを保存する際にメッセージを出すだけのプラグインを作成します。

下記のソースをプラグインのディレクトリ(mi/Contents/Resources/default/JavaScript/plugins/)に保存してください。ファイル名は、拡張子が.jsならなんでもかまいません。

var pluginId = "saveMessage";  //プラグインのID
var modeName = 'JavaScript';  //対象のモード

//プラグイン登録(デフォルトenabled)
mi.registerPlugin(modeName,pluginId,"saveMessagePlugin",true,"");

//イベントリスナー追加
mi.addEventListener(modeName,pluginId,["onSaved"],
                    function(doc,event,parameter) {
             mi.showDialog("ダイアログのタイトル","お疲れ様でした");
});

解説

プラグインをmiに認識させるためにIDが必要になります。一意になればなんでも良いので、好きな名前をつけてください。今回のソースではsaveMessageとしています。変数miにはインスタンスが生成されているので、mi.〜とすることで用意された関数が使えます。

mi.registerPluginにて、第1引数にプラグインの対象モードの名前(今回はJavaScript)を指定します。

第2引数に自分でつけたプラグインIDを指定します。

第3引数にプラグインの説明メッセージ(今回はsaveMessagePluginとしていますが何でもかまいません)を指定します。

第4引数にtrueを指定することでデフォルトでプラグインが有効となります。

第5引数にオプション文字列(なくても良いので空文字としています)を指定します。

mi.addEventListenerにて、保存時に実行する処理を紐付けています。mi.showDialogでメッセージ出力です。第1引数がダイアログのタイトルになり、第2引数が表示するメッセージになります。

これで保存をするたびに下記の画像のようなメッセージが表示されるようになりました。

 

まとめ

最小の記述でmiのプラグインを作成しました。APIを参照して必要な処理を追加することで、お好みのプラグインを作れます。

 

監修してくれたメンター

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。