Chromeの新規タブでメモが取れるPapierの紹介と利用時のTIPS

プライベート、仕事関係なくメモを取ります。 本エントリではタイトルの通り、ブラウザGoogle Chrome向けに公開されている拡張機能で、そのブラウザの新規タブでメモをとれる「Papier」を紹介します。

chrome.google.com

テキストエディタよりも気軽にメモを取りたい

このブログやその他ドキュメント、議事録などを適当なテキストエディタ上でMarkdownを利用して書くことが多いです。

僕はテキストエディタとして主に Visual Studio Codeを使っています。 また、複数デバイスでのメモなどの共有にはKibelaを個人で利用しています。

一方で、普段の会話や考えごと、調べ物の際のちょっとしたメモとしてテキストエディタを利用する際に以下の問題がありました。

  • Markdownシンタックスハイライトのためだけにわざわざ保存したくない*1
  • 先程のメモがどこにいったかわからない

これらの問題の解消のためPapierを利用し始めました。

Papierの特徴と使い方

僕が思うPapierの特徴は以下です。

  • Google Chrome⌘+tだけで書き始められる
  • 他のデバイスには共有されない
  • 書いた内容は自動で保存されタブを閉じても持続する
  • テキストの最低限の装飾ができる

具体的な利用については公式の動画があります。

www.youtube.com

他のデバイスに共有されないということは通信して外部の環境にデータを送信しないということです。 地味ですが、安心して使えます。 *2

テキストの最低限の装飾というのは特殊なショートカットです。

ショートカットはPapierの画面の左下の三点リーダのようなボタンから確認することができます。

f:id:zuckey_17:20190506013238p:plain:w200

またMarkdownと同様に文頭に#をつけることで見出しとなり、少し大きく太く表示されます。

f:id:zuckey_17:20190506013157p:plain:w200

箇条書きは -を利用することでそれっぽくかけますが、インデントを良い感じに効かせてくれるようなものではなく、自分でtabやスペースを利用する必要があります。

基本的には「ちょっとしたメモ書き」用なので、深い箇条書きになるような構造化されたものは書かないのではないかと思い、割り切って利用しています。

その他にも、背景の白黒反転や、ちょっとしたデザインの変更もできます。 ショートカットと同様にPapierの画面の左下の三点リーダのようなボタンから確認することができます。

ちょっと違う使い方「目標やタスクを書く」

僕のPapierの利用方法は簡単なメモの他に2つあります。

  • 少し遠めの目標を大きく書く
  • 朝決めたタスクと飛び込みのタスクを書く

目標は1番大きいの見出しで、その下に2番目に大きい見出しで「日付」、更にその下にチェックリストでタスクを書きます。

調子のいい日は(気持ちに余裕のある日は)その下に続けて時刻とやったこと、考えたことを書いていくということもします。

僕はエンジニアですが、仕事中はエディタやIDE統合開発環境)の上よりもブラウザを見ていることのほうが多いです。

そのため頻繁に新規タブを開きますが、そのときに目標とタスクがパッと目に入るのは、忘れがちだけど重要なことを書き記ししておく場所としてかなり良いです。

Papierの内容を保存する

Papierは一時的でちょっとしたメモだと言ってきましたが、時々その内容を保存したいときがあります。 会話をザーッとメモしてあとできれいに整えて他のメンバーに共有したいときなどです。 その際に、Papierの内容をそのままMarkdownファイルとして保存するスクリプトブックマークレットにしてみました。 いい感じのブックマークレットを作ろうと思ったのですが、拡張機能上でブックマークレットが動かなかったので、Chromeの開発者ツールから以下のJavaScriptをコンソールから叩くことにしました。*3

この問題は解消したいです。

const t=JSON.parse(localStorage.getItem('papier-save')).blocks.map(t=>t.text).reduce((a,b)=>a+'\n'+b);const l=document.createElement("a");l.download='papier.md';l.href=URL.createObjectURL(new Blob([t],{type:"text.plain"}));l.dataset.downloadurl=["text/plain",l.download,l.href].join(":");l.click();

ブックマークレットそのものの説明は割愛します。便利なので検索してみてください。 以下のブログも参考になるかと思います。

Bookmarklet という一番身近な自動化技術 | blog.jxck.io

ブックマークレットなどを用いて簡単に動かす他に、太字、斜め字、打ち消し線に対応していない*4ので、今後アップデートしたいと思っています。

以上です。

Papier良いので使ってみてはいかがでしょうか!

*1:Visual Studio Codeでは保存されていないファイルだとシンタックスハイライトが効きません。CotEditorなどなら問題ないですが、あまりエディタとして好きではありません。

*2:localStorageに保存されており、その変更を検知してレンダリングしているため、Chromeの同一ユーザーとしてはタブを複数開いていても共有されます。

*3:このスクリプトが動くことはわかっていて、このエントリを書いた理由のほとんどはこういうの作ったよというのを言いたかっただけなのですが、ブックマークレットが動かないというのは想定外でした。

*4:アンダーラインはそもそもMarkdownにないので割愛です