どーも！
たかぽんです！
今回はNotionでWebClipperを使ってみます！
とても簡単だけど、結構使えるので、是非みなさんも使ってみてくださいね！
目次
WebClipperを使ってみよう！
さて、それではWebClipper(ウェブクリッパー)を使っていくんですが、そもそもこのWebClipperってなんなんでしょうか...?
簡単にご説明をすると...
"ウェブ上の色んなページの情報をいい感じにNotionのページに持ってくることができる"機能です。
本来はもっと広義で、Notionだけに限った機能ではないんですが...（例えばevernoteなどでもwebclipperの機能は使えます。)
例えば毎朝情報収集としてウェブサイトの記事を読んでいる場合などはそれをボタン一つで自分のNotionのワークスペースにコピーすることができます。
後からふと、"あ、そういえばそう言う記事あったな..."と言う場合などは自分のnotionのページから探すことだってできるわけですね！
では、早速！使ってみましょう！
...と言いたいんですが...
事前にお伝えしなければいけないことがあります...
実は、WEBブラウザの場合、ChromeとFireFoxにしか対応していません。
なので、safariやIEなどを普段使いしている方はWEBでは扱いづらいかもしれません...
ただ、スマホでよければIOSもAndroidも対応しており、そちらで使えるだけでも十分恩恵があるので、オススメです！
では！
みていきましょう！
WebClipperを使う方法
さて、それではwebclipperを使ってみましょう！
まず最初に、適当なページを作成します。
場所はどこでも大丈夫です！
例えば、今回はNotionに関する使い方や情報をWebClipperで集めてみようと思います。
そのため、以下のようにページに名前をつけておきます。
下準備はこれだけです！
では、まずはWEBブラウザから使い方をみていこうと思います！
Chromeで使う方法
まずはChromeで使ってみます。
最初にChromeに拡張機能を入れる必要があるので、拡張機能を入れましょう！
Chromeブラウザを開いた状態で、以下のURLをクリックして、Notionを入れましょう！
Chromeに追加するを選択することで簡単に追加できると思います。
追加ができたら、右上に以下のようなNotionのアイコンが追加されると思います。
もしも表示されていない方は、以下の手順で表示させてみてください。
まず、右上のジグソーのマークをクリックします。
すると、以下のような画面が出てきます。
NotionのWebClipperの追加ができていれば、画面のようにNotionの項目があるはずです。
そこのPinのマーク（画鋲のマーク部分）が白になっていると、ブラウザ上に表示されないため、Pinをクリックして青くします。
すると、右上にNotionのアイコンが出てきました。
これで、いつでもワンクリックでWebClipperを使えるようになりました！
さて、では拡張機能を追加したので、試してみます。
僕はまだ執筆中なので、別の記事で試しますが、皆さんはよければ本記事で試してみてください。
では、ブラウザで記事を開いた状態で、右上のNotionのアイコンをクリックします。
初回はおそらくログインが必要になると思いますので、ChromeでNotionにログインをします。
ログインをしてから改めてアイコンをみてみると、以下の様な画面がでてきます。
本記事でやっている場合は"【Notion】WebClipperを使ってみよう！"が入っていると思います。
WorkSpaceは個人で使用している場合は大抵一つだと思うので、無視していただいて大丈夫ですが、複数運用している場合は追加したい先のページが含まれているWorkSpaceを指定してください。
そして、Add toを選択することで、この記事の内容を保存する先のページを検索して、指定することができます。
先ほど作成した"Notionに関する記事一覧！"というページを指定してあげましょう。
Add toを押した直後は以下のような画面になります。
notionで検索して...
ありました。
このページですね！
クリックすると...
指定ができたので、このままSavePageを押します。
すると、以下のような画面になり、Notionを開きますか？と聞かれます。
ここで開くとブラウザ上でNotionが開きます。
筆者はアプリの方を主として使用しているので、アプリで確認してみます。
ブラウザ上で確認する場合はここからOpenしてみてください。
先ほどのページに戻ると..?
それっぽいページが新しく追加されていました！
中身をみてみると...?
画像も合わせてほとんどの文が入ってますね！
途中本来は解説用の動画等を配置している部分があるのですが、場合によってはそういった部分は入らなかったりもします。
ただ、画像も含め、その記事の文章の大部分をコピーできるのはとても便利ですね！
FireFoxで使う方法
さて、それでは次はFirefoxでの方法をみていきます。
大体Chromeと一緒です...!
まず最初に拡張機能を入れます。
以下のボタン先からインストールができると思うので追加しましょう！
入れ終わったら、右上にNotionのアイコンが出ていると思います。
アイコンが出ていない場合、拡張機能が無効になっている可能性があります。
以下の手順で有効にしてみてください。
右上の"三"のマークのボタンを押して出てくるリストから、ジグソーマークの"アドオン"を選択します。
遷移した後のページ左上にて"拡張機能"を選択します。
そこにちゃんと追加されていれば以下のようなNotionの項目があり、無効になっているため、右側のスイッチをONにします。
上記のように青色になっていれば有効になっています。
改めてツールバーを確認すると、notionのアイコンが表示されているはずです。
そもそもここに項目が出ない場合は拡張機能の追加ができていないので、改めて追加し直してみてください。
さて、ツールバーにアイコンが表示されたら、試してみましょう！
本記事等を表示している状態で、アイコンをクリックすると...
以下のような画面が出てくると思います。
Workspaceを複数使っている人は追加したいページがあるWorkspaceに変更をしてください。（Workspaceがよくわからない方は一つしか作っていないと思うので、無視で大丈夫です！)
そして、Add to を選択し、先ほど作成したnotionのページを選択します。
選択ができたらSave pageをして、Notion側で確認をしてみましょう！
それっぽいページができてますね！
もちろん、中をみてみると...?
このような形でページとして記事の内容を前文保存しておくことができます！
以上がfireFoxでのWebClipperの使い方です！
簡単ですね！
IOS端末でのWebClipperの使い方
では、次にIOS端末でWebClipperを使ってみようと思います！
IOS端末でNotionのアプリをインストールします。
installを追えたら、アプリを開き自分のアカウントでログインをしておいてください。
ログインを終えたら、好きな記事を開きます。
画面中央下部分にある⬆️のマークを選択します。
アイコンにNotionがあると思うので、それを選択し...
このような画面が開くので、Add toを最初に作成したページにします。
設定できたら、Saveをします。
これで、Add toの先のページに新しいページとして追加されます。
簡単ですね！
AndroidでのWebClipperの使い方！
では最後にAndroidでのWebClipperの使い方をみていきます！
大体はIOS版と一緒です...!
まずはGooglePlayStoreでアプリをインストールしてログインをします！
アプリでログインを済ませたら、適当なページを開きましょう。
Androidの場合、機種によって大きく変わってくると思いますが...
Shareや共有といった項目を探します。
(今回、筆者はPixcel 4aを使用しています)
右上の点三つのボタンを押し、"Share"(日本語設定だと"共有"だと思います)を選択します。
Shareを選択すると...
以下のように共有ができるサービス一覧がでてくるので、その中からNotionを選択します。
すると、以下のようにNotionへ追加できる画面が出てくるので、Workspaceを指定します。
基本的に個人で使用している場合は変更の必要はないと思います。
もし複数のWorkspaceで活動している方は追加したいpageがあるWorkspaceを指定してください。
Workspaceの選択ができたら"Add to"ボタンから追加するページを指定します。
追加できたら、右上の紙飛行機のボタンを押せばOKです。
以上がAndroidでのWebClipperの手順です！
WebClipperをする時はtableがオススメ！
さて、基本的なWebClipperの使い方はわかっていただけたと思います。
ただ、前の説明だとただのページに対して無造作にたくさんのページを追加していました...!
それでも悪くはないんですが、こういったWEBの記事は後から参照しやすくしておきたいですよね...!
というわけで...
実はtableへの追加もできるんです！
そちらを簡単に試してみます。
とても簡単な例ではありますが、WebClipperの記事をまとめるページを一つ作り、そこのなかに記事のジャンルごと(Notion, IT)にDBを作成してみます。
IT系の記事を読んだらITWebClipのテーブルに、Notionに関する記事を読んだらNotionWebClipのテーブルに入れていく運用ですね。
ここまで作ったら、改めてブラウザ側へ戻ります。
先ほどはページを指定してたんですが、テーブル名(Database名)を入力してあげると検索にヒットするようになっています。
それを指定して、Save Pageしていきます。
すると...?
上記のようにテーブルに対してURL付きで保存されます！
おまけにタグも付けれないかなぁ...と思ったんですが、現状の拡張機能等ではできないようです...
また、空白の三行が入っているのは、一番最初にtableを作った際に入ってしまうデフォルト行なので、削除して大丈夫です。
もちろん、ITWebClipというtable名で指定してあげるとしたのテーブルに追加されます。
上記のようにITWebClipに追加するように指定すると...?
別のテーブルに追加されるんですね！
ページに追加するのもいいですし、場合によってはこのようにtableに追加する方が使いやすい場面もあると思います。
大きな違いがあるとすれば、pageに追加していく場合はURLの確認がしづらい点です。
pageとして追加してく場合は、以下のようにタイトルのしたにグレーでURLが表示されますが、ページに一度アクセスする必要があり、一覧の画面ではURLはみることができません。
一応、ページの詳細画面でURLは出ているけど...
一覧画面では表示されないので、オリジナル記事に飛ぶ際は一度ページ画面を開く必要があるわけですね。
それに対して、tableを使用している場合は、URLがテーブルのカラムに追加されているので、一覧画面での確認も可能ですね。
WebClipperの活用法の考察
さて、今回WebClipperについて解説してきたんですが、Notionは一度Notionに保存してしまえばoffline(ネットワークにつながっていなくても)でもみることができます。
そのため...大抵は以下の二つのどちらかの活用方法が主でしょう。
- これから読みたい記事をため込んでおいてあとで読む
- 一度読んだ記事を確認できるようにわかりやすく保持しておく
前者の使われ方なら"あとで読むリスト"といったtableを作成して、読むたびに削除していくとか、"読了済"ラベルを用意して、読み終えた記事は読了済ラベルを付け、Viewで表示の切り替えを行えるようにする...等できそうですね...!
また、後者であれば、先ほどのある程度ジャンルごとにtableを切り分けて追加時に追加するtableを切り替えて管理したり、WebClipperでtableへ追加後、手作業でラベルを付けて管理をする...等になりそうな気がします。
できれば追加時にラベルもつけることができればtableを一つで、あとはviewでジャンルごとに表示を切り替えができるので万々歳なんですが...
現状だと難しそうなので、手作業でのラベル管理をしたくない場合はtableをたくさん作っておくと言うのもてかなと...（できれば一箇所で管理したいけど...!）
ただ、あまりにも細かくジャンルわけしてしまうと今度は追加時のtable指定がややこしくなってしまうので、そこは注意が必要ですね...
将来的には、タグも一緒につけられるように改修を考えてくれているようなので、それを見越して一つのDBに手作業でつけていく...という運用でやっていくのが無難なのかな...
・Can you add tags to a web page while clipping it?
Not at the moment, unfortunately. Definitely possible for a future iteration though ✂︎ For the time being. you'll need to open the clipped page in a Notion database to add and edit any tags or other database properties.
WebClipper FAQ
もちろん、それだけでなく、もっと捻った活用法も探せばあるはず...!(そこがnotionの面白いところですよね...!)
なので、是非皆さんでも、こんな活用できるんじゃない？とか試してみてください！
まとめ
今回はnotionでWebClipperについて解説をしていきました！
比較的簡単に使えるんですが以外と便利です...!
電車の中でスマホで記事を読み終えたらポチッとしたり、家で調べ物をしながらポチッとしたり...
様々な活用法があると思うので僕も考えてみたいですね...!!!
是非皆さんも考えてみてください！
それでわ！
