ブログを書いていると、同じページを何度も開きます。
WordPressのダッシュボード、Search Console、Google Analytics。記事を書く場所と、書いたあとに確認する場所を行き来するだけでも、Chromeのタブが増えていきます。
「いつも見るページをひとまとめにして、開いているならそのタブに戻りたい」。そんな使い方を形にしたのが、Mac向けの自作アプリ「MonoMark（モノマーク）」です。
今回は、作ろうと思ったきっかけと、画面をどうまとめたかを紹介します。
作りたかったのは、ブログ作業の入口
きっかけは、ブログ村やWordPressのダッシュボードなど、ブログ運営で確認するサイトがだいたい決まっていることでした。
すでにタブを開いていれば、そこに戻るだけで済みます。ただ、タブが増えると、目的のページを見つける操作も挟まります。
そこで、よく使うページの名前を並べ、その名前を押したらChrome側のページへ移れる小さなアプリを考えました。
作るときに軸にしたのは、次の3つです。
- 名前やアイコンから、いつものページを選べること
- 同じURLのタブが開いていたら、そのタブを表示すること
- 登録先が増えても、検索や分類で探せること
たくさんの情報を詰め込むより、作業を始めるときや確認に戻るときに使える画面を目指しました。
名前は「MonoMark」に
名前は、monoシリーズの「Mono」と、ブックマークの「Mark」を組み合わせて「MonoMark」にしました。
アプリ上部の言葉は「いつものページに、すぐ戻る。」です。新しいサイトを探す場面より、普段使うページへの移動を助けるアプリとして、この言葉を置いています。
まずは、いつも使う6ページを並べました
今回の撮影時点では、次の6件を登録しています。
- WordPressのダッシュボード
- モノトキブログ
- Amazonアソシエイト
- Search Console
- Google Analytics
- はてなブログ
カードにはページ名とドメイン、分類を表示しています。名前の先頭1文字を使ったマークも付けました。サイトのロゴ画像を用意しなくても、登録したページが並ぶ形です。
色は、monoシリーズに合わせた明るい背景と落ち着いたグリーン。毎日開く画面として、ボタンや文字が見つけやすい配置にしています。
※画像は制作時点の実際のアプリ画面です。登録先は手動で追加したもので、Chromeのブックマークを自動で読み込んだものではありません。
同じURLのタブがあれば、そちらへ戻る設計
MonoMarkで大事にしたのが、ページを押したあとの動きです。
実装では、Chromeのウインドウにあるタブを順に確認し、登録したURLと一致するタブが見つかれば、そのタブを選んでウインドウを前面に出します。見つからなかったときに、新しいタブを開く仕組みです。
たとえば、Search Consoleを開いたまま記事を書いていた場合。MonoMarkから同じ登録先を選ぶと、開いているページへ戻ることを想定しています。
URLは基本的に一致で判定します。クエリや「#」を含むURLは別のページとして扱い、それらがないURLでは末尾の「/」の違いも吸収するようにしました。
なお、ここで説明しているのはソースコードで確認した動作の設計です。今回確認・撮影した範囲はアプリの一覧、編集、設定の画面で、Chrome側のタブ切り替えや初回の操作許可までの実機検証は含んでいません。
一覧表示とアイコン表示を切り替える
画面右上のボタンで、カードを横に並べるアイコン表示と、縦に並べる一覧表示を切り替えられます。
少ない登録先を見渡すならアイコン表示。ページ名を縦に追いたいときは一覧表示。登録件数やウインドウの幅に合わせて、見やすいほうを使う形です。
検索欄では名前とURLを対象に絞り込む実装にしています。分類も保存できるので、「ブログ」「分析」「調べもの」のように登録先を分けられます。
登録項目は「名前・URL・分類」の3つ
登録・編集画面は、名前、URL、分類の3項目に絞りました。
名前には「ダッシュボード」「アクセス解析」のような、自分が分かる言葉を入れます。URLには、実際に開きたいページのアドレスを登録します。
URLは「http://」または「https://」で始まる形式を受け付け、名前が空欄なら保存しない作りです。分類を空欄にした場合は「未分類」として保存します。
登録内容はMac内のファイルに保存する実装です。現時点では、Chromeのブックマークとの自動同期や、複数のMac間での同期は入れていません。
ショートカットや外観も、monoシリーズに合わせました
MonoMarkにも、monoシリーズの共通設定を用意しています。
- ログイン時の起動
- 表示・非表示のショートカット変更
- ライト・ダーク・システム連動の外観
- システムのアクセントカラーの反映
- 常に前面に表示
表示・非表示の初期ショートカットは「⌥⌘B」です。自分の作業に合わせて変更できます。
ログイン時の起動は、アプリケーションフォルダへ移してから設定する案内が出ます。撮影した開発フォルダ内のアプリでは、その案内も確認できました。
また、monoシリーズ内の保存済みキーや、登録時の衝突を確認する仕組みを共通化しています。macOSやほかのアプリの割り当てをすべて調べられるわけではないため、普段使っているキーと重ならないかも確認が必要です。
今の段階で、気を付けたいところ
現時点のMonoMarkは、Google Chromeを操作する前提で作っています。Safariなどを選ぶ機能や、Chromeのプロファイルを指定する機能はありません。
Chromeを操作する際は、macOSのオートメーション許可が必要になる場合があります。許可がないときは、画面下に案内を出す実装です。
また、複数のプロファイルに同じURLのタブがある場合、使いたいプロファイルを選び分ける設計にはしていません。仕事用と個人用を厳密に分けたい場面では、今後検討したい部分です。
今回の記事は制作記としてまとめたもので、配布や対応環境、Chrome操作の確認結果は、実機検証を進めてから改めて整理したいと思っています。
自分の作業に合う、小さな道具を作る
MonoMarkは、ブログ運営で繰り返している「いつものページを開く」という操作から作り始めました。
モノトキの記事を書く場所、公開したページを見る場所、アクセスを確認する場所。その入口を1つにまとめ、必要なページへ戻りやすくするのが今回の狙いです。
まずは実際の作業で使いながら、Chromeのタブ切り替えやショートカットの使い勝手を確かめていきます。
