はじめに
はじめまして、プロダクト開発部2年目の川島です。
1年が始まってもう1か月経ちました。
時間の流れは早いですね。
今回初のブログ記事執筆ということで、拙い文章とはなりますが、最後までお付き合いいただけると嬉しいです！
さて、突然ですがみなさんはJoplinというノートアプリをご存知でしょうか？
オープンソース&無料のメモ・ToDoアプリでMarkdown形式でノートを取ることができるアプリになります。
冬休みにプラグインを作ったので、
今回は「Joplinのプラグインを作ってみた！」ということで、紹介していこうと思います！
Joplinとは？
「はじめに」でも書いた通り、Joplinはオープンソース&無料のメモ・ToDoアプリでMarkdown形式でノートを取ることができるアプリです！
テキストだけでなく、画像や動画などのメディアを挿入できたり、ノートを階層にして管理することができます！
また、DropboxやOneDriveなどの様々なサービスと同期して、デバイス間で同期したりと機能がかなり充実してます。
さらに、Joplinには第3者が開発したプラグインを導入することができ、機能の拡張を行うことができます！！
JoplinはEvernoteの価格改定後に代替アプリとして開発された経緯があり、Evernoteから移行するような機能が備えられています。
以上のようにJoplinはかなり自由度が高いメモアプリで、筆者のおすすめのアプリです！
完成イメージ
今回は新たな構文を追加するプラグインを作成しようと思います！
Markdownでメモを取ったりしたことがある方はご存知かと思いますが、文字に色を付けたりするのって大変なんですよね、、、
例えば文字を赤くするのであれば、以下のようにHTMLの記述が必要になります。
<span style="color: red;">赤文字</span>
数回赤文字にするだけでしたら、そこまで面倒ではないのですが、何回も<span...と書くのはかなり大変です。。。
ということで！
プラグインで新たな構文
@r{赤文字}
を作っていこうと思います！
この構文を使用すると、<span style="color: red;">赤文字</span>と同等のことができるようになります。
もちろん他の色にもすることができたり、HTMLをご存知の方は、よく使うタグを構文化することができます！
準備
今回Joplinのプラグインを作成するにあたって準備が必要になります！
Joplin
Joplin本体です！これが無いとそもそもプラグインは作れません。
ダウンロードはJoplin公式サイトからダウンロードできます。
Node.js
プラグインに必要なライブラリをインストールしたり、実行したりするために使用します。
ダウンロードはNode.js公式サイトからダウンロードできます。
Visual Studio Code（VS Code）
こちらは必須ではありません。
筆者はVisual Studio Codeを使用してプラグインを開発しますので、Visual Studio Codeを使用していただくとわかりやすいかもしれません！。
（これより後はVisual Studio CodeのことをVS Codeとして省略します）
ダウンロードはVS Code公式サイトからダウンロードできます。
Yeoman
YeomanはNPMを使用してインストールします。
Node.jsをインストール後に以下のコマンドをコマンドプロンプトを起動して実行してください！
npm install -g yo
Joplin Plugin Generator
Joplin Plugin GeneratorもNPMを使用してインストールします。
Node.jsをインストール後に以下のコマンドをコマンドプロンプトを起動して実行してください！
npm install -g generator-joplin
プラグイン作成開始！
プロジェクトフォルダの作成
まずは、任意の場所にフォルダを作成してください！
筆者はD:\JoplinPluginを作業フォルダとしました。
プラグインのひな型を作成する
作成したフォルダをVS Codeで開いてください！
そして、Ctrl + @を押してVS Code上でターミナルを表示します。
（gitをインストールされている方は、このタイミングでgit initコマンドを実行しておくと後に警告が出なくなります。
git initコマンドを実行しなくても、プラグインの作成は可能なので、筆者はこのまま進みます）
開いたターミナルに以下のコマンドを入力します。
yo joplin
謎のアスキーアートが表示され、プラグインの情報を入力する画面になりますので、指示に従って入力していきます。
コマンドの実行を終えると以下のフォルダが生成されていると思います。
以上で、プラグインのひな型が完成です！
開発中のプラグインを導入する
プラグインのひな型の状態で、動作するようになっていますので、実際にJoplinに導入して動作確認をしてみましょう！
まずは、以下のコマンドを実行し、プラグインをビルドしてください。
npm run dist
そうしますと、distフォルダにプラグインをコンパイルしたファイルが配置されます。
次にJoplinを開きCtrl + ,またはツール > オプションから、設定を開いてください。
左側のタブで「プラグイン」を選択し、詳細設定を表示をクリックしてください。
「Development plugins」という入力欄が表示されますので、プラグインのdistフォルダのパスを記載してください。
入力したら、Joplinを再起動します。
ここで「×ボタン」ではなく、Ctrl + Qまたはファイル > 終了からJoplinを終了して、再度Joplinを実行してください。
「×ボタン」だとJoplinはバックグランドで動作し続け、再起動されません！
Joplin実行時に開発者ツールの新たなウィンドウが開かれるようになります！
そして、コンソールタブを押すと、「Hello world. Test plugin started!」と表示されていることがわかります。
これで、開発中プラグインの導入は完了です！
次回以降、ビルドしてJoplinを再起動すると、自動的にプラグインが読み込まれるようになります。
構文を追加するコードを書く
ここから、コードを書いていきます。
コードは、先ほど作成したsrcフォルダに記述していきます。
まずはフォルダ内にある「index.ts」を確認してみましょう。
import joplin from 'api';
joplin.plugins.register({
onStart: async function() {
// eslint-disable-next-line no-console
console.info('Hello world. Test plugin started!');
},
});
先ほど開発者ツールでみた「Hello world. Test plugin started!」が記述されていますね。
そうです！ここがプログラムの開始地点です！
ここにコードを書き進めてプラグインを作成します。
まずは、他のプログラムファイルを読み込んで、そこに記述されているコードを呼び出す構成にしましょう。
srcフォルダに「JoplinPlugin.ts（名前は任意です）」を新規作成します。
ファイル構成は以下のようになります。
JoplinPlugin └ src ├ index.ts ├ JoplinPlugin.ts // 追加 └ manifest.json
次に、「plugin.config.json」を開いてextraScriptに「JoplinPlugin.ts」を追加し、ビルドできるようにします。
{ "extraScripts": ["JoplinPlugin.ts"] }
そして、「index.ts」を以下のようにコードを書き替えて、「JoplinPlugin.ts」を読み込むように設定します。
import joplin from "api";
import { ContentScriptType } from "api/types";
joplin.plugins.register({
onStart: async function () {
await joplin.contentScripts.register(
ContentScriptType.MarkdownItPlugin,
"JoplinPlugin",
"./JoplinPlugin.js" // ※ここは拡張子をjsにする
);
},
});
ここで注意です！
registerの第3引数で指定するファイルの拡張子は「js」としてください！
作成したファイルの拡張子は「ts」ですが、ここに記述する拡張子は「js」です。
これで、追加ファイルの「JoplinPlugin.ts」を読み込めるようになりました。
次に「JoplinPlugin.ts」を開いて、構文を追加していきます。
以下のコードが完成コードです
import * as MarkdownIt from "markdown-it";
export default function () {
return {
plugin: function (markdownIt: MarkdownIt, _options) {
markdownIt.renderer.rules.text = function (tokens, idx, options, env, self) {
const token = tokens[idx];
const content = token.content;
const regex = /@r{(.*?)}/g; // @r{}で囲まれた文字を取得する正規表現
if (regex.test(content)) {
const match = content.replace(regex, "<span style='color: red;'>$1</span>");
return match;
} else {
return content;
}
};
},
assets: function () {
return [];
},
};
}
markdownIt.renderer.rules.textはmarkdown-itのレンダリングのルールの一つで、テキストのレンダリング時に読み込まれます。
今回はテキストにレンダリングを追加していこうと思いますので、markdownIt.renderer.rules.textを使用します。
他にもレンダリングルールがありますので、詳しく知りたい方はmarkdown-itのGithubを参照してください。
markdownIt.renderer.rules.text内でレンダリングを追加します。
まずは、tokens引数から、入力されたテキストを取得します。
入力されたテキストは、tokens[idx].contentに含まれているので、ここを参照しましょう。
const token = tokens[idx]; const content = token.content;
次に、「@r{赤文字}」の「赤文字」の部分にマッチする正規表現を作成します。
const regex = /@r{(.*?)}/g;
最後に、正規表現にマッチした場合は、グループ化で取得した部分を<span style='color: red;'></span>で囲うように置換します。（マッチしない場合はそのままテキストを返します）
const match = content.replace(regex, "<span style='color: red;'>$1</span>");
後は置換した結果を戻り値として返せばOKです！
ビルドして動作確認してみる
それでは、書いたコードをビルドしてみましょう。（ビルドのコマンドはnpm run distでしたね！）
コードの保存は忘れずに行ってくださいね。
Joplinを再起動し、試しに「@r{構文追加プラグイン}」と書いてみます。
ちゃんと赤文字になっていますね！
完成したプラグインをインストールする
最後に、完成したプラグインをインストールしましょう！
「え？動いているからいいじゃん」と思った方もいるかもしれませんが、Joplinを開いたときに開発者ツールが開いてしまうのはちょっと嫌ですよね。
ということで、開発中プラグインをJoplinにインストールします。
といってもプラグインをインストールするのは簡単です。
まずは、Joplinの設定のプラグインタブを開き、先ほど追加したDevelopment pluginsのパスを削除します。
次に、同画面の上側の「歯車マーク⚙」をクリックして、ファイルからインストールを押してください。
ファイルのダイアログが表示されますので、プラグイン作業フォルダ内の「publish」フォルダ内にあるjpl拡張子のファイルを開いてください。
Joplinを再起動します。
以上でプラグインのインストールが完了しました！（開発者ツールも開かれなくなったと思います）
注意点
ここまでプラグインの作り方を紹介してきましたが、ここで注意点です。
残念ながら、スマホ版にプラグインを導入することができません。。。
なので、スマホ版と同期して表示すると、「@r{赤文字}」とそのまま表示されます。
スマホ版でも赤文字で表示したい場合は、他のメモ帳アプリでもなんでも良いので、
ノート完成後に「@r{(.*?)}」を「<span style="color: red;">$1</span>」に置換してから同期しましょう！
おわりに
長い文章を、ここまで読んでいただきありがとうございました。
Joplinは仕事用のToDo管理やメモ、プライベートでもかなり使いやすいアプリです。
普段自分が使うアプリをカスタマイズできると、モチベーションも上がってきます。
Joplinのプラグインを作ってみたいという方、これを機にJoplinを使ってみたいという方に参考になれば幸いです！
お知らせ
ecbeingでは新しい技術要素に触れていきたいエンジニアを募集しています！！
