見ているWebページが気に入り、どこかに保存しておきたい場合はよくあることです。
最もポピュラーなものとしてはブックマークですね。
ブックマークの代わりにSpeedDialに登録したり、OneTabなどにまとめることもできます。
また他には、WebサービスのPocketやInstapaperに保存したりと様々な形でお気に入りページを保存しておくことができます。
ここで紹介するのは、以上のようなサービスを使うのではなく、Webページのタイトルやurlを文字列として取得することです。
取得したタイトルやurlなどWebページデータは、自分でエディタやExcelなどでまとめるということになります。
この方法は作業が伴うので面倒くさいのですが、思うような形で保存できますのでこの方法もありかなと考えています。
私は以上の機能をどれが使いやすいかは別として、保存するWebページにより使い分けています。
具体的には、YouTubeで気に入った動画のタイトル及びurlを取得し、Excelでお気に入りリストを作ったりしています。
さて、前置きはこのくらいにしましてWebページのタイトルやurlを取得するChrome拡張機能を紹介しましょう。
ここで説明する拡張機能は以下の２つです。
「Create Link」は、今見ているページのタイトルやurlを取得することができます。
「GetTabInfo」は、複数ページを複数のタブで開いている時、一度に全てのページのタイトルやurlを取得することができます。
取得とは、コピーのことです。
この２つの拡張機能はWebページのタイトルやurlを選択しなくともクリップボードにコピーしてくれますので、エディタなどに貼り付ければコピペ完了です。
どちらも２クリックの操作で取得できます。
ドラッグして選択する必要がないですし、一度にタイトル及びurlをコピーできるので重宝します。
以下に「Create Link」及び「GetTabInfo」それぞれの使い方・設定方法を説明します。
先に上の２つの拡張機能をChrome ウェブストアからそれぞれ追加しておいてください。
追加方法はそれぞれの拡張機能ページの「Chromeに追加」ボタンをクリックし、表示される画面にある「拡張機能を追加」をクリックするだけです。
ここでは、例としてYouTubeサイトから保存しておきたい動画ページのタイトルとurlを取得する操作を説明することにします。
Create Link で取得
まずYouTubeサイトで、気に入った動画を探します。
西野カナ 『トリセツ』MV(Short Ver.) – YouTube : https://www.youtube.com/watch?v=aPHGClLjZWk
この動画のタイトルとurlを取得することにしましょう。
タイトルをドラッグして選択しエディタにコピペ、アドレスバーにあるurlを選択してコピペでも目的は果たせます。
しかし、ドラッグしてタイトルやurlを選択するのは面倒くさいですし、２回に分けての操作も煩わしいです。
そこで、Create Link を使って、タイトル及びurlを取得することにします。
この取得したいページを表示した状態で、
「Create Link」アイコンをクリックして、出てくるメニューから「Plain text」をクリックします。
「Plain text」の他に「HTML」など他に３形式がデフォルトで登録されていますので取得したい形式をクリックしてください。
操作はこれだけです。
これで、↓ のようにクリップボードにタイトルとurlがコピーされました
西野カナ 『トリセツ』MV(Short Ver.) – YouTube https://www.youtube.com/watch?v=aPHGClLjZWk
後は、エディタなどに貼り付けるだけです。
GetTabInfo で取得
Create Linkと同様に２クリックでタイトルとurlをコピーできますが、こちらは複数タブを開いている時に威力を発揮します。
例えば、５つの動画ページを５つのタブで開いている時、「Create Link」ではタブを切り替えて５回の取り込み操作をしなくてはいけません。
しかし、「GetTabInfo」の場合は１回の操作で５つの動画ページのタイトルとurlを一気に取り込めます。
西野カナ 『トリセツ』MV(Short Ver.) – YouTube https://www.youtube.com/watch?v=aPHGClLjZWk
西野カナ 『Always (short ver.)』 – YouTube https://www.youtube.com/watch?v=klnsZ0T6Dvg
西野カナ 『GO FOR IT!!(short ver.)』 – YouTube https://www.youtube.com/watch?v=f9-PYxAKdfY
西野カナ 『Believe (short ver.)』 – YouTube https://www.youtube.com/watch?v=GRQ9OgbHmAs
西野カナ 『Darling』MV(Short Ver.) – YouTube https://www.youtube.com/watch?v=sawxwunW7G0
の５つのタブを開いているとします。
どのタブを見ている状態でも良いので、
「GetTabInfo」アイコンをクリックしてください。
しかし、「GetTabInfo」をChromeに入れた直後は何も取得できません。
空欄が２つありますが、上側の空欄に何も入っていませんので取り込めないのです。
「Select template」をクリックし出てくるメニューで、デフォルトで設定されている取得形式を選択できるようになっています。
「PRESET:basic」をクリックします。
すると、２つの空欄に何らかの文字が表示されます。
上側は「PRESET:basic」に設定されている取得形式、下側はその設定で取得される文字列を表示しています。
この設定で取り込んでみましょう。
「GetTabInfo」もしくは「Copy to clipboard」をクリックしてください。
５つのタブのデータを下側に表示された文字列として取得できます。
取得したデータをエディタに貼り付けて確認していただきたいのですが、
一応、５ページ分のデータは取得できているはずです。
その１ページ分見ると、
<div class=”item”>
<a href=”https://www.youtube.com/watch?v=aPHGClLjZWk”>西野カナ 『トリセツ』MV(Short Ver.) – YouTube</a>
</div>
タイトル、url 以外に余分な文字が入っています。
「PRESET:basic」でこのように取得すると設定されているからです。
これでは、タイトル、url だけにしたいのであれば、いらない文字を消さなくてはいけませんね。
取得時にタイトルとurlだけにしたいです。
そうするためには、設定を変更する必要があります。
以上のように、それぞれの拡張機能での取得方法は簡単だと思います。
しかし、「Create Link」「GetTabInfo」ともデフォルトでの取得設定では、後からいらない部分を削除したり加工する必要が出てきます。
ですので、取り込みを行う前に取得フォーマットの設定をしておかなくてはいけません。
次はその設定方法です。
Webページのタイトルやurlの取得は、デフォルトの設定でもできますが、自分の思うような形式で取得するためには設定を変更する必要があります。
私の場合は、
タイトル : url
の形式での取得するようにしていますので、以下この形式での設定を説明します。
取得形式を設定する前に
タイトル : url
の形式で取得する文字列の説明をしておきます。
上のYouTubeページのデータの場合、
西野カナ 『トリセツ』MV(Short Ver.) – YouTube : https://www.youtube.com/watch?v=aPHGClLjZWk
というように取得できます。
タイトル部分が、「西野カナ 『トリセツ』MV(Short Ver.) – YouTube」
url 部分が、「https://www.youtube.com/watch?v=aPHGClLjZWk」
です。
重要なのは、タイトル と url に挟まれた
「 : 」
部分です。
半角の「空白」、半角の「:」、半角の「空白」
の３文字の並びとなっています。
別に全角でも良いのですが、半角と全角が混ざったりすると後からの処理が難しくなりますし、半角の方が無難に扱えますのでこのようにしています。
どうでもいいようなところが重要です。
半角文字・全角文字がよく分からない方は、
↑ を御覧ください。
「半角文字・全角文字」の違いをしっかり把握していないと、設定や検索などがうまくできないなど困る場合が出てきます。
この機会に是非、「半角文字・全角文字」の違いもしっかり理解するようにしましょう。
Create Link の設定
「Create Link」の設定は、
Configureをクリックし、設定画面を出します。
この画面内「Format」欄で取得形式を登録します。
表には、このようにデフォルトで取得形式が設定されています。
取得時に「Create Link」アイコンをクリックすると、メニューにName欄の４つの項目名が出てきます。
何れかをクリックすると、それぞれに設定されている形式（Format）で取得できるわけです。
「Plain text」に「%text% %url%」が登録されていますが、
この設定のまま取得時にメニューから「Plain text」をクリックすると、
西野カナ 『トリセツ』MV(Short Ver.) – YouTube https://www.youtube.com/watch?v=aPHGClLjZWk
のように、タイトルとurlの間に半角空白１文字（赤色部分）が入った形式で取得することになります。
ここでは、
西野カナ 『トリセツ』MV(Short Ver.) – YouTube : https://www.youtube.com/watch?v=aPHGClLjZWk
↑ のようにタイトルとurlの区切りを半角空白ではなく「 : 」（半角空白、コロン、半角空白の３文字）で区切られた形式で取得する設定をします。
「Plain text」の「%text% %url%」部分を変更します。
「Plain text」の行をクリックすると、その行が青くなります。
続けて、青くなった行のFormat部分をクリックすると、「%text% %url%」の文字列が青く選択された状態になりますので、Deleteキーで削除してください。
そして、新たに「%title% : %url%%newline%」を入力します。
全て半角文字であることに注意してください。
表枠の外側をクリックしますと、設定完了です。
Nameも同じような操作で変更できますので分かりやすい名前にしてもいいでしょう。
私は、このように「Plain text」の「%text% %url%」部分を変更してしまっていますが、新規に追加設定することもできます。
表枠の左下にある「+」をクリックすると、新たな行が下に追加されます。
空欄になっていますので、
Name欄 → title : url （名前は何でもいいです）
Format欄 → %title% : %url%%newline%
それぞれの項目に 登録名と取得形式を入力して、表枠の外側をクリックすると新規行の追加は完了です。
Formatの決め方
Format に、ある文字列だけを入れるとその文字だけが取得されます。
入れた文字列だけを取得しても何の意味もありませんので、その文字に以下の変数を組み合わせて取得形式を決めます。
- %url%：ページのurl
- %text%：選択した文字列またはページのタイトル（全ての改行は半角空白に変換されます。）
- %text_n%：選択した文字列またはページのタイトル（全ての改行はそのままコピーされます。）
- %text_br%：選択した文字列またはページのタイトル（全ての改行は <br />\n に変換されます。）
- %text_md%：選択した文字列またはページのタイトル（マークダウン仕様に記載されている全ての文字はバックスラッシュでエスケープされます。）
- %title%：ページのタイトル
- %newline%：改行（\n）
- %htmlEscapedText%：選択した文字列またはページのタイトル（いくつかの危険な文字（＆<> ‘”）は対応する実体参照に変換されます。）
- %input%：文字列を入力するための入力画面を表示（ここに入れた文字列を取得します。）
設定例で示した
%title% : %url%%newline%
は、
「ページのタイトル」「 : 」「ページのurl」「改行」
の文字並びで取得されます。
最後に %newline% を入れているのは、エディタに貼り付けた時に改行を入れないで済むからです。
%newline% を入れないで貼り付けていくと行替えなしで横へ横へと貼り付けた文字がつながっていきますので、貼り付ける度に改行しなければならないからです。
いろいろ設定して取得してみると、意味合いは分かってきますので試してみてください。
GetTabInfoの設定
設定する前に取得するWebページを開いておきましょう。
「GetTabInfo」は複数タブのページデータを一度に取得できますので、
西野カナ 『トリセツ』MV(Short Ver.) – YouTube https://www.youtube.com/watch?v=aPHGClLjZWk
西野カナ 『Always (short ver.)』 – YouTube https://www.youtube.com/watch?v=klnsZ0T6Dvg
西野カナ 『GO FOR IT!!(short ver.)』 – YouTube https://www.youtube.com/watch?v=f9-PYxAKdfY
西野カナ 『Believe (short ver.)』 – YouTube https://www.youtube.com/watch?v=GRQ9OgbHmAs
西野カナ 『Darling』MV(Short Ver.) – YouTube https://www.youtube.com/watch?v=sawxwunW7G0
の５つのタブを開いているとします。
「GetTabInfo」をChromeに追加した直後は、設定が空白になっていますのでそのままでは何も取得できません。
空白欄は上下に２つありますが、上が取得形式設定欄、下がどのように取得できるかプレビュー欄です。
取得方法で説明しましたように「Select template」をクリックすると、デフォルトで登録されている取得形式の一覧メニューが出てきます。
どれかをクリックすると、その名称で登録されている形式の設定が上の空白欄に表示され、下の欄にその設定で取得した時にどのように取得されるかプレビューが表示されます。
取得形式の決め方
基本的に「Create Link」と設定方法は同じです。
設定欄に何か文字列を入れるとその文字列が取得できます。
「Create Link」同様、その文字列に以下の変数を組み合わせて取得形式を決めます。
- %%TITLE%%：ページのタイトル
- %%URL%%：ページのurl
- %%sURL%%：Google Url Shortenerで短縮されたURL
- %%QR%%：Google Chart APIでQRコード化されたURL
タイトル : url
の形式での設定をしてみましょう。
%%TITLE%% : %%URL%%
を入力します。
全て半角文字であることに注意してください。
プレビューを見ると、何か変です。
これで、取得してみます。
そして、エディタに貼り付けてください。
西野カナ 『トリセツ』MV(Short Ver.) – YouTube : https://www.youtube.com/watch?v=aPHGClLjZWk 西野カナ 『Always (short ver.)』 – YouTube : https://www.youtube.com/watch?v=klnsZ0T6Dvg 西野カナ 『GO FOR IT!!(short ver.)』 – YouTube : https://www.youtube.com/watch?v=f9-PYxAKdfY 西野カナ 『Believe (short ver.)』 – YouTube : https://www.youtube.com/watch?v=GRQ9OgbHmAs 西野カナ 『Darling』MV(Short Ver.) – YouTube : https://www.youtube.com/watch?v=sawxwunW7G0
何か変だったのは、Webページ毎に改行されていないからでした。
これは、「Create Link」の %newline% のような改行を表す変数がないので、それに相当する設定をしなかったからです。
では、改行できないのでしょうか？
それが、できます。
%%TITLE%% : %%URL%%
を入力した後、１回Enterキーを入力します。
設定欄のカーソル位置を注意して見てください。
Enterキーを入力する前とした後ではカーソル位置が違います。
Enterキーの入力は、Create Link の設定での %newline% の代替です。
改行も文字ですので「GetTabInfo」ではあえて変数を用意しなかったのでしょうか？
これで、
西野カナ 『トリセツ』MV(Short Ver.) – YouTube : https://www.youtube.com/watch?v=aPHGClLjZWk
西野カナ 『Always (short ver.)』 – YouTube : https://www.youtube.com/watch?v=klnsZ0T6Dvg
西野カナ 『GO FOR IT!!(short ver.)』 – YouTube : https://www.youtube.com/watch?v=f9-PYxAKdfY
西野カナ 『Believe (short ver.)』 – YouTube : https://www.youtube.com/watch?v=GRQ9OgbHmAs
西野カナ 『Darling』MV(Short Ver.) – YouTube : https://www.youtube.com/watch?v=sawxwunW7G0
のようにプレビューされ、一気に表示されているタブ全ての
タイトル : url
が取得できました。
「Create Link」と「GetTabInfo」、どちらを使う？
私は２つとも入れて使い分けています。
タブを複数開いていても、１ページずつ内容を確認しながら取得したい場合は「Create Link」。
内容はともかく、１つ１つ見ていては時間が掛かるので一気に取得したい場合は「GetTabInfo」。
というようにです。
取得した後は、自由に編集するなりしてお気に入りのurlリストなどを作ってください。
余談ですが、私はChromeに100以上のタブを開くことがあります。
これ、メモリの関係かたまにクラッシュしてChromeが終わってしまうのです。
１回クラッシュすると、その後はタブが100どころか30程開くと、またクラッシュするというようになります。
こうなると、キャッシュなどをクリアしてもダメなので、一旦Chromeをアンインストールし、再インストールしなおしています。
再インストールしなくとも正常に動作するように戻せないものでしょうか？
Chrome をアンイストールすると、Evernote、はてブ、Pocket などに保存しているWebページデータはクラウドに保存されているので、再インストール後すぐに見ることができます。
しかし、「OneTab」「TooManyTabs」などいくつかのChrome拡張機能は、保存していたWebページデータが全て失くなってしまいます。
「OneTab」「TooManyTabs」は一時的にタブを退避しておくための拡張機能ですので仕方なしかも分かりませんが、たまにまだ見ていないのにChromeをアンインストールしてしまう場合があるのです。
「しまった」と思ってももうどこにも残っていません。
再度ページを探すか、あきらめるかのどちらかとなります。
そのようなことに備えて、週一回くらいで「TooManyTabs」に退避しているページを全て開き、「GetTabInfo」で「タイトル : url」を取得してExcelに保存しています。
以上、Webページタイトルとurlの取得方法でした。
コメント