[[📒Productivityを上げるために大切な100のこと]] No52. 🥈 ---- 今までに[[📗何度でも挑戦する]]、[[📗毎年新しい言語を学ぶ]]といった話をしてきたが、そうは言っても**モチベが上がらない..**という人は多いと思う。ただそれは普通だ。 > したい人、10000人。始める人、100人。続ける人1人。 [[女子高生サヤカが学んだ「1万人に1人」の勉強法]]の表紙に記載された言葉だ。何かを始められる人はせいぜい1%、そしてそれを続けられる人は0.01%しかいない..ということを意味する。 そんな99.9%の方へ、ことプログラミングに関してオススメの勉強法がある。それは、**好きなツールのプラグインをつくってみる**ことだ。 ## なぜプラグインなのか? プラグインを推すには3つの理由がある。 1. 好きなツールであれば**提供されていない欲しい機能**が大抵1つはあるから 2. 最低限の手間と知識で最大限の恩恵を得られるから 3. プラグインシステムの設計を目の当たりにすることで**設計力が上がる**から 普段なんとなく使っているツールには大抵必要な機能が揃っている。愛着がそこまでなければ必要以上にカスタマイズしたいと思うこともないだろう。 一方、好きなツールなら話は別だ。使用している時間や用途も長いことが想像でき、自分の痒い所まで手が届く機能が欲しいと思う瞬間があるはずだ。更にそれは**自分だけのニッチな需要であることも多く、だからこそ自作する必要性と意義ができる**ためモチベに繋がる。 また、プラグインシステムは基本的なバックボーンやUIが既に作成済みだ。プラグイン開発者はツールの一部処理に対してちょっとした手を加えるだけでいい。**ソースコードにして高々数十行の実装で欲しい機能を作成できる**ことも珍しくない。フルスクラッチは魅力的ではあるが、ほとんどの人は熱が冷めた途端に諦めてしまうものだ。 最後に、**プラグインの実装をすると設計力が上がる**というメリットがある。なぜなら、ツール全体におけるプラグインのインターフェースを意識することになり、結合度の低い開発を体験できるからだ。たとえ、**自分が開発するプロダクトにプラグインシステムが不要であっても、プラグインを意識したインターフェースを設計することでメンテナンス性は格段に上がる**。 ## 今までに作ってきたプラグイン 私が今までにプラグインを開発したことのあるツールと、可能なものはプラグインも紹介しよう。 ### [[Sublime Text]] 当時、2013年頃はバージョン2が流行っていた。[[VSCode]]は勿論のこと[[Atom]]さえ無かった時代だ。[[Sublime Text]]は触れ込みの通り、まさしく『恋するエディタ』であった。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://www.sublimetext.com/images/icon.png" /> <span class="link-card-v2-site-name">www.sublimetext.com</span> </div> <div class="link-card-v2-title"> Sublime Text - the sophisticated text editor for code, markup and prose </div> <div class="link-card-v2-content"> Available on Mac, Windows and Linux </div> <img class="link-card-v2-image" src="https://www.sublimetext.com/images/og-full.jpg" /> <a href="https://www.sublimetext.com/"></a> </div> [[Sublime Text]]は[[Python]]でプラグイン開発ができ、当時[[Python]]を学び始めたばかりだったのでプラグイン開発にチャレンジした。何を作ったのかもはや覚えていないし、公開もしていない。実際に作って、[[VSCode]]に移行するまでの間使っていたという事実だけ述べておく。 ### [[VSCode]] しばらくして、今では皆知っている[[VSCode]]が登場した。[[VSCode]]は[[TypeScript]]を使ってプラグインを開発できる。2017年頃、[[VSCode]]はメインエディタとして使用しており、ちょうど[[TypeScript]]も始めたところだったのでチャレンジをした。 作成したプラグインは[[Markdown]]の見出し作成をサポートするものだ。マーケットには公開していないが、[[GitHub]]では[[🧊owlcode]]というリポジトリを公開している。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicons/favicon.svg" /> <span class="link-card-v2-site-name">GitHub</span> </div> <div class="link-card-v2-title"> GitHub - tadashi-aikawa/owlcode: A VSCode extension for owl 🦉 </div> <div class="link-card-v2-content"> A VSCode extension for owl 🦉. Contribute to tadashi-aikawa/owlcode development by creating an account on GitHub ... </div> <img class="link-card-v2-image" src="https://opengraph.githubassets.com/2312978bd12fc1f5f87927429dea8a8d292ca5609d5ab771c729f3945eb6f17d/tadashi-aikawa/owlcode" /> <a href="https://github.com/tadashi-aikawa/owlcode"></a> </div> その後、[[Markdown]]エディタとしての役割は[[IntelliJ IDEA]]や[[Obsidian]]に移っていったので今では使っていない。ただ、[[VSCode]]が好きな人は多いと思っているので、貴方がもしそうであれば是非チャレンジしてほしい。 ### [[Keypirinha]] [[Keypirinha]]は[[📗できる限りステートレスな操作を採用する]]でも紹介した[[ランチャー]]だ。こちらも[[Python]]でプラグインを開発できる。同様に[[GitHub]]でリポジトリを公開している。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicons/favicon.svg" /> <span class="link-card-v2-site-name">GitHub</span> </div> <div class="link-card-v2-title"> GitHub - tadashi-aikawa/keypirinha-OwlTodoist </div> <div class="link-card-v2-content"> Contribute to tadashi-aikawa/keypirinha-OwlTodoist development by creating an account on GitHub. </div> <img class="link-card-v2-image" src="https://opengraph.githubassets.com/1493e4057c53a0bb656600a1c365c146ff9092a82a35b39087a4fb66c5fafee2/tadashi-aikawa/keypirinha-OwlTodoist" /> <a href="https://github.com/tadashi-aikawa/keypirinha-OwlTodoist"></a> </div> [[ランチャー]]は限られたUIで実装しなければならないが、すべての操作のベースとなるためアイデアを持っている人も多いのではないだろうか。私の場合は[[Googleカレンダー]]のテキスト形式から[[Todoist]]のタスク形式に変換して、クリップボードに保存するためチャレンジした。 ### [[Google Chrome]] 2018年頃に初めて本格的な[[Google Chrome]]のプラグインを作った。いわゆる[[Chrome Extension]]は[[JavaScript]]や[[HTML]]、[[CSS]]といったWebの技術を使って開発できる。もちろん[[TypeScript]]でもOKだ。 当時、[[Todoist]]と[[Toggl]]を使っていたが、[[Toggl]]の画面から[[Todoist]]のタスク名で計測を開始したり、計測結果を[[Slack]]に通知したかったのでチャレンジしてみた。マーケットに公開こそしていないが、[[GitHub]]にアーカイブされたリポジトリは残っている。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicons/favicon.svg" /> <span class="link-card-v2-site-name">GitHub</span> </div> <div class="link-card-v2-title"> GitHub - tadashi-aikawa/zzz-togowl: A Google Chrome extension for toggl :owl: </div> <div class="link-card-v2-content"> A Google Chrome extension for toggl :owl:. Contribute to tadashi-aikawa/zzz-togowl development by creating an ac ... </div> <img class="link-card-v2-image" src="https://opengraph.githubassets.com/84e45a85c73852d328180c574a86c4bf941024007fdca1661f4b05d6b97cde39/tadashi-aikawa/zzz-togowl" /> <a href="https://github.com/tadashi-aikawa/zzz-togowl"></a> </div> なお、こちらを[[PWA]]として1からフルスクラッチしたツールが、度々紹介している[[🧊Togowl]]である。アイコンや名前が同じなのはそういうわけだ。 ### [[IntelliJ IDEA]] [[IntelliJ IDEA]]は[[Java]]や[[Kotlin]]を使ってプラグイン開発ができる。当時はちょうど[[Markdown]]の編集を[[VSCode]]から[[IntelliJ IDEA]]に移したところであり、[[🧊owlcode]]をパワーアップさせた[[🧊Markowl]]を開発した。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicons/favicon.svg" /> <span class="link-card-v2-site-name">GitHub</span> </div> <div class="link-card-v2-title"> GitHub - tadashi-aikawa/markowl: Markdown extended plugin for Jet Brains IDEs and owl🦉 </div> <div class="link-card-v2-content"> Markdown extended plugin for Jet Brains IDEs and owl🦉 - tadashi-aikawa/markowl </div> <img class="link-card-v2-image" src="https://opengraph.githubassets.com/f6d465c6697e836960e23200a173fbe8464acc8889008092570b9367eb59e186/tadashi-aikawa/markowl" /> <a href="https://github.com/tadashi-aikawa/markowl"></a> </div> [[🧊Markowl]]は**はじめてマーケットに一般公開したプラグイン**という意味で非常に感慨深いプロダクトである。嬉しいことにそこそこダウンロードしていただき、Issueもいくつか作成してもらった。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://resources.jetbrains.com/storage/ui/favicons/favicon.ico" /> <span class="link-card-v2-site-name">JetBrains Marketplace</span> </div> <div class="link-card-v2-title"> Markowl - IntelliJ IDEs Plugin | Marketplace </div> <div class="link-card-v2-content"> Markdown extended plugin for JetBrains IDEs and owl🦉 Features Format Table Draw H1/H2 Line Draw H1/H2/H3/H4/H5 ... </div> <img class="link-card-v2-image" src="https://plugins.jetbrains.com/assets/icons/default_icon.png" /> <a href="https://plugins.jetbrains.com/plugin/14116-markowl"></a> </div> 当時は[[Kotlin]]のプラグイン開発情報が乏しかったため、調査はかなり大変だったが、[[Kotlin]]だけでなく[[Unicode]]、他国の言語文化など勉強になることが多かった。開発の詳細はブログ [[📘IntelliJ IDEAのプラグインを作ってみた]] でも紹介している。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/favicon-64.png" /> <span class="link-card-v2-site-name">Minerva</span> </div> <div class="link-card-v2-title"> 📘IntelliJ IDEAのプラグインを作ってみた </div> <div class="link-card-v2-content">IntelliJ IDEA向けにKotlinでMarkdown編集を拡張するプラグインを開発しました。テーブル整形や見出し補完などの機能や、Gradle・プラグイン配布方法、互換性設定、開発手順を詳しく解説しています。開発や導入に興味のある方はぜひご覧ください。</div> <img class="link-card-v2-image" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/%F0%9F%93%98Articles/attachments/2020-04-22.jpg" /> <a data-href="📘IntelliJ IDEAのプラグインを作ってみた" class="internal-link"></a> </div> %%[[📘IntelliJ IDEAのプラグインを作ってみた]]%% ### [[Obsidian]] そして最後は、まさにこの記事を執筆している[[Obsidian]]だ。周知のとおり、私が現時点で一番愛着を持っているツールだ。[[Obsidian]]の良さは[[📘Obsidianは10年後の礎になると半年間使って確信した話]]を見てほしい。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/favicon-64.png" /> <span class="link-card-v2-site-name">Minerva</span> </div> <div class="link-card-v2-title"> 📘Obsidianは10年後の礎になると半年間使って確信した話 </div> <div class="link-card-v2-content">Obsidianを半年使い、NotionやScrapbox、PKM（個人知識管理）、Markdown、Zettelkasten、LYT、プラグイン開発、Obsidian Publish、コミュニティの魅力を実感しました。エンジニア視点で10年後も使える理由を詳しく解説しています。詳しくは記事へどうぞ。</div> <img class="link-card-v2-image" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/%F0%9F%93%98Articles/attachments/2021-07-14.jpg" /> <a data-href="📘Obsidianは10年後の礎になると半年間使って確信した話" class="internal-link"></a> </div> %%[[📘Obsidianは10年後の礎になると半年間使って確信した話]]%% [[Obsidian]]は[[TypeScript]]を使ってプラグインを開発できる。私も今まで3つのプラグインを開発しており、[[🦉Various Complements]]と[[🦉Embedded Code Title]]はコミュニティプラグインとして公開中、[[🦉Another Quick Switcher]]はレビュー通過待ちだ。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicons/favicon.svg" /> <span class="link-card-v2-site-name">GitHub</span> </div> <div class="link-card-v2-title"> GitHub - tadashi-aikawa/obsidian-various-complements-plugin: This plugin for Obsidian enables you complete words like the auto-completion of IDE. </div> <div class="link-card-v2-content"> This plugin for Obsidian enables you complete words like the auto-completion of IDE. - tadashi-aikawa/obsidian-v ... </div> <img class="link-card-v2-image" src="https://opengraph.githubassets.com/4e0da74006d66f85b45c105ebefa89b7a1a15bbcd41f84c23f1f2b5ea6333f5f/tadashi-aikawa/obsidian-various-complements-plugin" /> <a href="https://github.com/tadashi-aikawa/obsidian-various-complements-plugin"></a> </div> <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicons/favicon.svg" /> <span class="link-card-v2-site-name">GitHub</span> </div> <div class="link-card-v2-title"> GitHub - tadashi-aikawa/obsidian-embedded-code-title: It is an Obsidian plugin which can embeds title to code blocks. </div> <div class="link-card-v2-content"> It is an Obsidian plugin which can embeds title to code blocks. - tadashi-aikawa/obsidian-embedded-code-title </div> <img class="link-card-v2-image" src="https://opengraph.githubassets.com/70950f5086f5854e3f30728fb9d923500943931e0c0ac8f59f5879337c610b2f/tadashi-aikawa/obsidian-embedded-code-title" /> <a href="https://github.com/tadashi-aikawa/obsidian-embedded-code-title"></a> </div> <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicons/favicon.svg" /> <span class="link-card-v2-site-name">GitHub</span> </div> <div class="link-card-v2-title"> GitHub - tadashi-aikawa/obsidian-another-quick-switcher: This is an Obsidian plugin which is another choice of Quick switcher. </div> <div class="link-card-v2-content"> This is an Obsidian plugin which is another choice of Quick switcher. - tadashi-aikawa/obsidian-another-quick-sw ... </div> <img class="link-card-v2-image" src="https://opengraph.githubassets.com/005e3afe657e81b62dd9ed614391bd4ecfd9d5d0c36664003c7afa209ac1d974/tadashi-aikawa/obsidian-another-quick-switcher" /> <a href="https://github.com/tadashi-aikawa/obsidian-another-quick-switcher"></a> </div> [[Obsidian]]は2020年に誕生したこともあり、かなり早熟なプロダクト・コミュニティだ。他のツールなら存在するようなプラグインがまだ作られていなかったりする。また、[[VSCode]]や[[IntelliJ IDEA]]と異なり、エンジニアが主なユーザー層ではない点もユニークだ。 だからこそ、プラグインを開発・公開したときのリアクションもひとしおだ。エンジニア向けの開発ガイドを [[📕Obsidianプラグイン開発チュートリアル]] にまとめたので、興味があれば是非チャレンジしてほしい。そして共に[[Obsidian]]を盛り上げていこう。