[[📒Articles]] > [[📒2023 Articles]] ![[2023-08-25.jpg|cover-picture]] [[Obsidian Memos]]の影響を受けて、[[🦉Mobile First Daily Interface]]という[[Obsidianプラグイン]]を作りました。 本記事では[[🦉Mobile First Daily Interface]]について、なぜ作ったのか? 何ができるのか? どう使うのか? を紹介します。 ## [[🦉Mobile First Daily Interface]]を作ったワケ [[Obsidian Memos]]というプラグインが既にありながら、敢えて[[🦉Mobile First Daily Interface]]を作るに至った経緯を紹介します。 ### [[Obsidian Memos]]とは [[Obsidian Memos]]は[[𝕏]]のようなインターフェースでメモを投稿したり閲覧したりできる[[Obsidian]]の[[コミュニティプラグイン]]です。 <div class="link-card"> <div class="link-card-header"> <img src="https://github.githubassets.com/favicons/favicon.svg" class="link-card-site-icon"/> <span class="link-card-site-name">GitHub</span> </div> <div class="link-card-body"> <div class="link-card-content"> <div> <p class="link-card-title">GitHub - Quorafind/Obsidian-Memos: A quick capture plugin for Obsidian, all data from your notes.</p> </div> <div class="link-card-description"> A quick capture plugin for Obsidian, all data from your notes. - GitHub - Quorafind/Obsidian-Memos: ... </div> </div> <img src="https://opengraph.githubassets.com/e4cd63101ed7e77a38bbb4a4849790768e2e045e29dc4500090f6a7ca371a1bb/Quorafind/Obsidian-Memos" class="link-card-image" /> </div> <a href="https://github.com/Quorafind/Obsidian-Memos"></a> </div> 日々の投稿数が表示されたり、画像を投稿できたり、タグで検索できたりと至れり尽くせりです。プラグインが作られたのは2022年上旬と1年半前であり、[[Discord]]でも連絡されていたので私も存在は把握していました。当時はスター数が100～200程度だったと思います。 ### 当時は[[Obsidian Memos]]を試さなかった 私はチャットUIが苦手です。わざわざ[[Slack]]のインターフェースを通してやりとりするくらいなら、専用のアプリケーションで直接操作した方が遥かに快適で効率的だと思っていました。今でもそれは変わりません。 [[PKM]]についても同様にでした。せっかく[[Obsidian]]という専用のエレガントなツールがあるのに、わざわざ[[Twitter]]のように限られたUIを使うなんて何を考えているんだろうか...と思っていました。これは私がWeb開発を得意分野としているため、バイアスが入った意見かもしれません。それを自分以外の他に強要する気は一切ありませんが、少なくとも自分はそう思っていました。 **🦉『[[Vim]]のキーバインドや各種プラグインの恩恵、自由なレイアウトを捨ててまでたどり着いたその先に一体何があると言うのだい?』** ### 最近になって[[Obsidian Memos]]を試したきっかけ 最近になって[[Obsidian Memos]]をようやく試しました。正直なところ、[[Obsidian Memos]]という発想自体には好感を持っていました。実際に自分がそれを使うかは別として、プラグイン自体は素晴らしい発想だと今でも思っています。正直なところ、当時も少し試してみようか迷ったことはありました。 あれから1年半弱。[[Obsidian]]の記事は日々チェックしていますが、ふとその記事は目に入りました。 <div class="link-card"> <div class="link-card-header"> <img src="https://shunyaueta.com/favicon.ico" class="link-card-site-icon"/> <span class="link-card-site-name">Shunya Ueta</span> </div> <div class="link-card-body"> <div class="link-card-content"> <div> <p class="link-card-title">Twitter 形式でメモが残せる Obsidian Memos で「考えるな、書け」を体現できるくらい筆が進むようになった</p> </div> <div class="link-card-description"> Obsidian-Memos という Obsidian のプラグインを Twittier で見かけて1ためしてみたら、Obsidian が更に便利になったので紹介。https://github.co... </div> </div> <img src="https://shunyaueta.com/ogp.jpg" class="link-card-image" /> </div> <a href="https://shunyaueta.com/posts/2023-06-16-1452/"></a> </div> [[はてぶ]]でもバズってたこの記事。[[Obsidian Memos]]としての真新しい情報はほとんどありませんでしたが、実際に使ってみた生の声を聞けたので、また少し興味を持ち始めました。ほら、記事がバズるとそれを参照した[[𝕏]]上の声がわんさか出てくるので、興味は相乗効果で上がっていきます。 ### [[Obsidian Mobile]]に対する不満 とはいえ、一度効果がなさそうと感じたものを、興味だけで触ってみようかというと、そう腰軽ではありません。他にも触ってみようと思う動機がありました。 ちょうどこの頃、夜に散歩をする機会が増え、信号の待ち時間や休憩時間にスマホで調べものをしたりメモをする機会が増えていました。以前は[[Slack]]に投稿して、家に帰ってから[[Obsidian]]でまとめる...ということをしていましたが、どうせなら初めから[[Obsidian Mobile]]に書いてしまった方が楽です。せっかく有料の[[Obsidian Sync]]を契約していますし。 ただ、[[Obsidian Mobile]]の利用には踏み切れませんでした。PCでの[[Obsidian]]によるノートテイキングは非常に快適なのですが、スマホでの[[Obsidian]]はあまり快適ではないのです。あの小さなスマホの画面とキーボードでは。 ![[Screenshot_20230822-212450-r1.png|frame]] *[[Obsidian Mobile]]でキーボードを出した状態* また、[[Obsidian Mobile]]では、ノートの内容を追加したかっただけなのに、意図せず既存の内容を削除や変更してしまったこともありました。スマホでの操作はPCよりも難しいため、ちょっとした操作ミスが起こりやすくなります。 ### [[Obsidian Memos]]への期待 そんな時、[[Obsidian Memos]]が日本語ユーザーの間で流行り始めます。そして、私の考えも以前とは少し変わりました。 **🦉『[[デイリーノート]]だとどうも気軽に書きにくいことが、慣れ親しんだ[[𝕏]]のようなIFだと書きやすいってのは一理ある気がする...』** **🦉『PCはまだしも、スマホで[[Obsidian Mobile]]を操作するんだったら、何も考えずに入力だけすればOKなら[[Obsidian Memos]]のインターフェースの方が楽まである...』** **🦉『しかも、[[Obsidian Memos]]のインターフェースから投稿すれば、==既存のコンテンツを破壊するリスクがゼロになる..!!== これはプログラミングで[[Immutable]]が好まれるのと同じ感覚なのでは...!?』** ということで、後半は普通のユーザーと異なる観点かもしれませんが、[[Obsidian Memos]]を使い始めるには十分な動機でした。これからはスマホから[[Obsidian Mobile]]を使うときは[[Obsidian Memos]]経由でメモしてみよう。真剣にそう決心していました。この時は。 ### だが断る [[Obsidian Memos]]は使えず 早速 [[Obsidian Memos]]をインストールして起動してみましたが、いきなり問題が発生しました。 **『カクカクで重すぎて使えない...』** 当時の私の[[デイリーノート]]数は900程度。そこそこの量ではありますが、時間で言うと3年も経っていない程度です。どうやら[[Obsidian Memos]]はすべての[[デイリーノート]]を読みにいくみたいなので、数が多いとパフォーマンスが厳しい印象でした。 常時フィルターを設定すれば、利用できるレベルにはなりましたが、デフォルトでフィルタ設定する方法も分からなかったので、毎回フィルタ設定してまで使うのは厳しいなと感じました。 ### 使えないなら作ればいいじゃない 当然こうなりますね。[[𝕏]]のようなIFがもたらすメリットの可能性に気づいてしまったのであれば、今更引き返すわけにはいきません。幸い、[[React]]のキャッチアップをしたいと思っていたので、その動機付けという意味もこめてプラグインを新たに作ることにしました。 [[🦉Mobile First Daily Interface]]という名前はv1.0リリース時につけたものであり、当初は『Free Writing』という別の名前でした。もともとは『[[フリーライティング]]をしやすいようなインターフェースを提供する』というターゲティングにしていたのですが、リリースを重ねていくうちに『モバイル環境に最適な[[デイリーノート]]のインターフェースを提供する』というターゲティングの方がしっくりくるという理由で変更しました。 時間が許せば開発秘話を語りたいところですが、それを始めると[[🦉Mobile First Daily Interface]]の説明に入らず記事が終わってしまいそうなので、今回はスキップします。その辺が気になる方は過去の[[📰Weekly Report]]をご覧ください。 - [[📰2023年26週 Weekly Report]] - [[📰2023年27週 Weekly Report]] - [[📰2023年28週 Weekly Report]] - [[📰2023年29週 Weekly Report]] - [[📰2023年30週 Weekly Report]] - [[📰2023年31週 Weekly Report]] - [[📰2023年32週 Weekly Report]] ## [[🦉Mobile First Daily Interface]]の機能と便利な使い方 ここからは機能を紹介していきます。 ### メインView (投稿モード) の使い方 鉛筆マークの『Mobile First Daily Interface』をクリックするとメインViewが表示されます。この画面では、ある日付の投稿を作成/確認したりできます。以下の画像はメインViewでモードは投稿モードになっています。 ![[Pasted image 20230822233752-r1.png|frame]] *メインView (投稿モード)* | 番号 | 名前/説明 | クリックしたときに起こること | | ---- | ---------------- | ------------------------------------------------ | | 1 | 1日前ボタン | 現在日付の前日に移動する | | 2 | 現在日付 | カレンダーUIが展開される | | 3 | 1日後ボタン | 現在日付の翌日に移動する | | 4 | ノート開くボタン | 現在日付の[[デイリーノート]]を開く | | 5 | 投稿本文 | キーボードが開いて投稿文章作成できる | | 6 | 投稿ボタン | 投稿本文の内容が投稿される | | 7 | 投稿モード | 投稿モードになる | | 8 | タスクモード | タスクモードになる (後で補足する) | | 9 | 投稿内容 | 何も起きない | | 10 | 投稿日付 | [[デイリーノート]]の該当コードブロックに移動する | | 11 | コピーボタン | クリップボードに投稿内容をコピーする | #### 投稿する 現在日付(2)を設定(基本的には今日)し、投稿本文(5)に文章を打ち込み、投稿ボタン(6)で投稿します。すると投稿内容(9)が更新されます。基本はこれの繰り返しです。 #### 投稿内容を修正/削除する 投稿内容(9)は[[デイリーノート]]にコードブロック形式で反映されます。逆に[[デイリーノート]]のコードブロックを編集すると、[[ノート]]が保存されたタイミングで投稿内容(9)にもリアルタイムで反映されます。 ![[Pasted image 20230822235119.png|frame]] *[[デイリーノート]]での投稿内容にあたるコードブロック* 投稿内容(9)を削除/編集したい場合は、[[デイリーノート]]の該当する部分を直接編集します。投稿日付(10)をクリックすると[[デイリーノート]]の修正箇所にジャンプできます。専用のUIは用意していません。 #### 投稿内容を共有する 地味に便利なのがコピーボタン(11)です。[[Android]]の[[Google Pixel 5]]ならば、コピーボタン(11)を押すと、共有ボタンが表示されます。共有ボタンを押せば、そのまま別のアプリで共有できます。 ![[Pasted image 20230823000603.png|frame]] *[[Google Pixel 5]]でコピーボタンを押した後の流れ* たとえば、[[🦉Mobile First Daily Interface]]で投稿した内容と全く同じ内容を[[𝕏]]で投稿する場合は以下の手順となります。 1. [[🦉Mobile First Daily Interface]]で投稿する 2. コピーボタン(11)を押す 3. シェアボタンを押す 4. [[𝕏]]のアイコンを押す 5. [[𝕏]]の画面が開くので、そのまま『ポスト』を押す はじめから[[𝕏]]だけで投稿すれば、2と3のアクションをスキップできるので楽です。逆に言うと、[[🦉Mobile First Daily Interface]]で投稿しても、**2と3のアクションを追加するだけで[[𝕏]]やその他のアプリで投稿できる**のです。時間にして数秒なので、下手するとAPIで連携するより速いまであります。 今回紹介した画像にある2つ目の投稿は、その後すぐに[[𝕏]]でも投稿しています。全く同じですよね😊  ### メインView (タスクモード) の使い方 先ほどまでは投稿モードの使い方を説明してきました。もう1つのモードであるタスクモードの使い方について説明します。なお、モードは投稿モード(7)とタスクモード(8)の領域をタップするたびに切り替わります。 ![[Pasted image 20230823203908.png|frame]] *メインView (タスクモード)* 投稿モードと同じパーツの説明は省略します。 | 番号 | 名前/説明 | クリックしたときに起こること | | ---- | ---------------------------- | -------------------------------- | | 1 | 未完了タスクエリア | 何も起きない | | 2 | 完了タスクエリア | 何も起きない | | 3 | 未完了タスクチェックボックス | タスクを完了させる | | 4 | 完了タスクチェックボックス | タスクを未完了に戻す | | 5 | タスク追加ボタン | 入力された名称でタスクを追加する | #### タスクを追加する タスク名を記載し、タスク追加ボタン(5)を押すとタスクが追加されます。追加されたタスクは未完了状態なので、未完了タスクエリア(1)に表示されます。 指定日付の[[デイリーノート]]に存在するタスクは、すべて[[🦉Mobile First Daily Interface]]に表示されます。投稿と同様、[[🦉Mobile First Daily Interface]]の表示状態と[[デイリーノート]]の状態は同期されます。 ![[Pasted image 20230823205116.png|frame]] *[[デイリーノート]]でのタスク* #### タスクを完了する 未完了タスクエリア(1)のタスクに対して、未完了タスクチェックボックス(3)をタップすると、タスクが完了します。完了したタスクは完了タスクエリア(2)に表示されます。 #### タスクを未完了に戻す 完了タスクエリア(2)のタスクに対して、完了タスクチェックボックス(4)をタップすると、タスクが未完了に戻ります。未完了に戻したタスクは未完了タスクエリア(1)に表示されます。 #### タスクを修正/削除する タスクの修正や削除は[[🦉Mobile First Daily Interface]]からはできません。[[デイリーノート]]から直接タスクを修正/削除してください。それ以外にも、タスクの追加や完了状態変更なども反映されます。 ### コンテンツのプレビュー表示 [[🦉Mobile First Daily Interface]]は一部コンテンツのプレビュー表示に対応しています。 #### Markdownプレビュー [[GitHub Flavored Markdown]]の仕様に従った[[Markdown]]を表示できます。 ```markdown ## 持ち物 - [ ] かばん - [x] 傘 - [x] スマホ --- **明日の朝にまた確認する** ``` 表示は以下のようになります。 ![[Pasted image 20230825185647.png|frame]] *[[GitHub Flavored Markdown]]に対応* スマホから投稿することはあまりないと思いますが、テーブルにも対応しています。 #### URLプレビュー サイトや画像の[[URL]]を投稿すると、[[Slack]]や[[Discord]]のように展開されます。 ![[Pasted image 20230825190244.png|frame]] *サイトプレビュー* ![[Pasted image 20231014193404.png|frame]] *画像プレビュー* 1つの投稿に複数[[URL]]を貼ると、その数だけプレビューされます。今のところ制限は設けていません。 URLプレビューは見ていて楽しいですし、直感的で分かりやすい機能です。[[URL]]を解析して、[[favicon]]画像、タイトル、カバー画像、説明を生成する処理は独自実装しているため、[[URL]]によってはうまく表示できない場合があるかもしれません。もしそのような[[URL]]がありましたら、[[𝕏]]や[[🦉Mobile First Daily Interface]]のGitHub Issuesから報告いただけると助かります。(可能な限り対応します) ## 開発者は[[🦉Mobile First Daily Interface]]をどう使っているのか? 最後に私が[[🦉Mobile First Daily Interface]]をどのように使っているかを少し紹介します。 ### インプットと感想の記録として Webサイトや[[ツイート]]など、単発的なインプットに対する記録と感想を記載するために使います。これは[[𝕏]]などで技術的なつぶやきをするのと同じモチベーションですが、異なる点もあります。[[🦉Mobile First Daily Interface]]を使うことで以下のメリットがあります。 - [[#投稿内容を共有する]]ことができるので、[[𝕏]]や[[Slack]]などへの再共有も簡単にできる - [[📰Weekly Report]]の作成などで後から見返すときに[[🦉Mobile First Daily Interface]]の投稿だけを見返せばよいので楽 ([[𝕏]]を見返すのは結構大変) > [!hint] > [[📰Weekly Report]]の『👀Medias』セクションは[[🦉Mobile First Daily Interface]]の投稿をベースに作成しています。 今は日付を遡ってタイムラインを閲覧することしかできませんが、上記のような振り返り目的で便利なViewを追加できたらなと思っています。いいアイデアお持ちの方いらっしゃれば是非🙏 ### [[𝕏]]や[[Slack]]に投稿する前のクッションとして [[🦉Mobile First Daily Interface]]はネガティブな公開投稿に対する抑止力になります。 人は不愉快なことがあると誰かに訴えたくなるものです。『んんん！！！』と我慢できずに[[𝕏]]に投稿したら...とても後悔した...orz という経験は誰しも一度はあるのではないでしょうか。ここで[[🦉Mobile First Daily Interface]]が役立ちます。 想いを文字にして[[🦉Mobile First Daily Interface]]の投稿画面に打ち込み、投稿します。すると、投稿内容がタイムラインに表示されます。当たり前です...が **これを見ることで初めて客観的に自分の投稿を見直せます**。そして思いとどまるわけです。『これは投稿しない方がいいな...』と。 [[𝕏]]にも投稿前にラグを入れることで、投稿を思いとどませる機能がありますね。ただ、個人的には、あの機能には意味がないと思います。なぜなら、**投稿というのはタイムラインに表示されて初めて客観的なモノとして認知できるから**です。投稿画面の段階でいくら時間をおいても、人間そんなに気持ちは変わらないと思ってます。 加えて、[[🦉Mobile First Daily Interface]]でネガティブな投稿をして、タイムラインを見たら、それで結構スッキリしてしまって思いとどまったことも何回かあります。我慢だけでなく、フラストレーションの解消にも効果があります。 ### 思ったことをそのままメモしておくために [[🦉Mobile First Daily Interface]]の投稿はローカルに保存されるため、意図しなければ第3者から見られる心配はありません。そのため、思ったことをすぐにそのままメモできます。人の気持ちは意外と変わりやすいものであり、時が経つと当時の気持ちを忘れてしまいます。それらを正確に見返せるのはなかなか興味深いと思っています。(思い出さない方がいいこともあります...のでそういうのは書かない方がいいかなと😅) ### タスクを思いついたらすぐに追加する 散歩中に新たなタスクを思いつくことは日常茶飯事でしょう。今までは[[Todoist]]のスマホアプリや[[🧊Togowl]]を開いてタスクを追加していましたが、[[Obsidian Mobile]]の[[デイリーノート]]を開いてタスクを追加するのは若干面倒です。 そんな悩みを克服するため、スマホのタスク管理アプリに近いIFを[[🦉Mobile First Daily Interface]]で追加しました。スマホで文字を打って『タスク追加』ボタンを押せば、[[デイリーノート]]の末尾に追加されるので気軽です。 同様に、既に登録されたタスクも『未完了』のものがまとめて表示されるので、スマホから気軽に完了させることができます。 ### 読書メモの作成には使わない 一方で、[[Obsidian Mobile]]から[[🦉Mobile First Daily Interface]]を使わないユースケースもあります。代表的なものは読書メモの作成です。 読書メモは本の構成にあわせて見出しを作成し、その中に感想を書いていきます。[[🦉Mobile First Daily Interface]]では投稿がすべて末尾にコードブロック形式で追加されるため、このような用途には向きません。 また、読書メモの内容は最終的に1つの[[ノート]]にまとめます。読書した日の数だけ[[デイリーノート]]に記載した場合、それらを集約して再構成するのは非常に手間です。 ## まとめ [[Obsidian Memos]]の影響を受けて作成した[[🦉Mobile First Daily Interface]]という[[Obsidianプラグイン]]について、なぜ作ったのか? 何ができるのか? どうやって使っているのか? を紹介しました。 以前はこのようなIFに否定的でしたが、[[🦉Mobile First Daily Interface]]の開発経験を経て、今ではすっかり虜です。もし貴方が同じように否定的な考えを持たれているなら、騙されたと思って是非1度試してみてください。スマホで。 そしてこの記事を読んで[[🦉Mobile First Daily Interface]]を使ってみたいと思ってくださった貴方。[[🦉Mobile First Daily Interface]]は[[コミュニティプラグイン]]ではありませんので普通の方法ではインストールできません。[[BRAT]]という[[コミュニティプラグイン]]を使ってインストールいただくようお願いいたします。詳しくは👇 <div class="link-card"> <div class="link-card-header"> <img src="https://github.githubassets.com/favicons/favicon.svg" class="link-card-site-icon"/> <span class="link-card-site-name">GitHub</span> </div> <div class="link-card-body"> <div class="link-card-content"> <div> <p class="link-card-title">GitHub - tadashi-aikawa/mobile-first-daily-interface</p> </div> <div class="link-card-description"> Obsidianにてモバイルに最適なインターフェースでデイリーノートを扱うプラグインです。 </div> </div> <img src="https://opengraph.githubassets.com/e7c805c2b0cae43fe541b554bb25f7b9d6a0d1855b4a601a46610bc31e131d6f/tadashi-aikawa/mobile-first-daily-interface" class="link-card-image" /> </div> <a href="https://github.com/tadashi-aikawa/mobile-first-daily-interface"></a> </div>