Evernoteのブラウザ版で外部リンクを開くときの「Evernoteの外に移動します」ページをスキップする方法

Evernoteのブラウザ版（Evernote Web）で外部リンクを開こうとすると、このような転送ページが表示されます。

この転送ページをスキップして（＝とばして）、外部リンクをすぐに開くようにする方法を紹介します。

必要なもの

ブラウザの拡張機能“Tampermonkey”（Chrome拡張機能／Firefoxアドオン）を使います。Chrome拡張機能かFirefoxアドオンのどちらかが利用できるブラウザが必要です。

設定の手順

ブラウザに、上述のTampermonkeyをインストールします（※以降はChromeの場合で説明しますが、Firefoxアドオンを使っている場合も、操作は同じだと思われます）。

ブラウザのツールバーに表示されたTampermonkeyのアイコンをクリックして開くウィンドウの中の「新規スクリプトを追加」をクリック。

この画面が開きます。

その画面で、中央の入力欄に表示されている文字を全て消します。そのうえで、下記のスクリプト（出典はこちら）を、その入力欄にペーストします。

// ==UserScript==
// @name         Evernote Outbound Clicker
// @namespace   http://harristribe.co.uk/
// @version      1.0
// @description  Avoids the evernote outbound page 
// @author       Rob Harris
// @include     https://www.evernote.com/OutboundRedirect.action*
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function() {
    'use strict';

    var urlParams = new URLSearchParams(window.location.search);
    window.location.href = urlParams.get('dest');
})();

ペーストしたら、左上にある「ファイル」メニューを開き、「保存」をクリック。

すると、この画面になります。Tampermonkeyの画面は閉じてもかまいません。

以降は、Evernoteのブラウザ版で外部リンクをクリックすると、「Evernoteの外部へ移動します」という転送ページは見えなくなり、すぐにリンク先のページが開かれるようになります。

WorkFlowy / Dynalistの内容を、階層構造を保ったままScrapboxにインポートする方法

WorkFlowy / Dynalistの内容をScrapboxに貼り付けたとき、次のようなことが問題になります。

• 箇条書きの階層が深くなりすぎる（2段目以降）。
• Dynalistに含まれることがあるMarkdownや、Dynalist独自の記法は、Scrapboxで再現されない。

この2つの問題に対応できるツールは6つあります。それぞれの解説と機能比較はこちらをご覧ください。

scrapbox.io

本記事では、6つのツールのうちの1つであるscrapbox-converterというツールの使い方を解説します。

---

〈目次〉

---

scrapbox-converterの使い方

機能

• インポートによって作成されるScrapboxの各ページのタイトルは、手動で指定する必要があります。
• インポート元がWorkFlowyの場合は、最上位の階層は箇条書きにならず、2階層め以下が箇条書きになります（こちらの画像の例では「小説」が最上位の階層）。
  • 元のWorkFlowyと完全に同じにするためには、インポート後に手動で修正が必要です（後述）。
• インポート元がDynalistの場合は、見出し（H1〜H3）や、Markdownで指定した書式・ハイパーリンクなども正しく変換されます。
• Dynalistにおける「ドキュメント」のタイトルは引き継がれません。
• Dynalistの内容が画像を含む場合は、エラーが出るかもしれません。

必要なもの

• npm
  • WindowsまたはMacにインストールする方法はこちらなどをご参照ください。*1
• scrapbox-converter
  • Scrapboxのヘルプにて紹介されている、html / Markdown / enex 形式のファイルをjson形式へ変換するツールです。
  • npmをインストールしたうえで、端末（コマンドプロンプト, Terminal）で
    npm install -g scrapbox-converter
    と実行すればscrapbox-converterをインストールできます。*2

Scrapboxにインポートする手順

WorkFlowyからインポートする場合は下記をご覧ください。Dynalistからインポートする場合はこちらをご覧ください。

WorkFlowyからのインポート

WorkFlowyにて、Scrapboxにインポートしたい部分を開き、画面右上の歯車アイコンもしくは一行目の右端にある「…」の形のアイコンをクリックし、“Export All”もしくは“Export”をクリック。

“Export”というタイトルのウィンドウが開きます。下の方にある選択欄で“Formatted”を選択し、一番下の“click to download”をクリック。

“workflowy-export.html”という名前のhtmlファイルがダウンロードされます。このhtmlファイルのファイル名（拡張子を除いた部分）が、Scrapboxへのインポート後にページのタイトルとなります。ファイル名を変える必要があれば変えます。ただし、

• インポート先のScrapboxに既に存在しているページのタイトルと重複しない名前をつける。

という条件を満たすようにファイル名を付けます。もし重複していると、Scrapboxに既に存在しているほうのページの内容が上書きされてしまうためです。

ここでは、例としてファイル名を“インポート1.html”としてみます。

次に、“インポート1.html”をテキストエディタで開きます。ファイル内の5行目あたりに<style>という文字があり、

70行目あたりに</style>という文字があるはずです。この<style>と</style>で囲まれた部分（行数にして70行弱）を、テキストエディタで全て削除します。

削除しおわると、6行目付近まではこのようになっているはずです。

削除し終わったら“インポート1.html”を上書き保存。

次に、“インポート1.html”が置いてあるフォルダにて、端末（コマンドプロンプト, Terminal）で次のように実行します（末尾のjsonファイルのファイル名は自由に決めることができます。jsonファイルの名前を変えても、インポート後のページタイトルには影響しません）。

scrapbox-converter インポート1.html > インポート1.json

“インポート1.html”が保存されているのと同じフォルダに“インポート1.json”というファイルができます。

次に、インポート先となるScrapboxのプロジェクトの“Settings”の中の“Page Data”のタブを開きます。

“Import Pages”のところで「参照」ボタンを押すとファイル選択のウィンドウが開くので、上述の手順で作られた“インポート1.json”を選択。Scrapboxの画面が下記のように変わったら、“Import Pages”をクリック。

Scrapboxのトップページに自動で遷移します。「インポート1」というタイトルのページが作成されています。

インポート後の修正（任意）

インポートされたページを開くと、WorkFlowyでの階層構造が再現されています。

ただし先述のように、元のWorkFlowyで最上位の階層にあった内容（「小説」）はScrapboxで箇条書きになっていませんので、必要があれば箇条書き化し*3、2階層目以下をさらに1階層下げれば*4、元のWorkFlowyと同じ階層構造になります。また、デフォルトでは元のWorkFlowyでの1行目と2行目の間に空行が1行入るようですので、これも消したほうが万全でしょう。

それらの修正を加えるとこのようになります。

Dynalistからのインポート（htmlファイルの場合）

Dynalistにて、Scrapboxにインポートしたい部分を開きます。一行目にマウスカーソルを合わせると、行頭に「≡」の形のアイコンが現れるので、それをクリック。小さなウィンドウが表示されるので、その中の“Export”をクリック。

“Export”というタイトルのウィンドウが開きます。上の方にある3つのタブのうちの“Formatted”を選択し、一番下にある“Download as file”をクリック。

“dynalist-yyyy-mm-dd.html”という名前のhtmlファイルがダウンロードされます。このhtmlファイルのファイル名（拡張子を除いた部分）が、Scrapboxへのインポート後にページのタイトルとなります。ファイル名を変える必要があれば変えます。ただし、

• インポート先のScrapboxに既に存在しているページのタイトルと重複しない名前をつける。

という条件を満たすようにファイル名を付けます。もし重複していると、Scrapboxに既に存在しているほうのページの内容が上書きされてしまうためです。

ここでは、例としてファイル名を“インポート2.html”としてみます。

次に、“インポート2.html”が置いてあるフォルダにて、端末（コマンドプロンプト, Terminal）で次のように実行します（末尾のjsonファイルのファイル名は自由に決めることができます。jsonファイルの名前を変えても、インポート後のページタイトルには影響しません）。

scrapbox-converter インポート2.html > インポート2.json

“インポート2.html”が保存されているのと同じフォルダに“インポート2.json”というファイルができます。

次に、インポート先となるScrapboxのプロジェクトの“Settings”の中の“Page Data”のタブを開きます。

“Import Pages”のところで「参照」ボタンを押すとファイル選択のウィンドウが開くので、上述の手順で作られた“インポート2.json”を選択。Scrapboxの画面が下記のように変わったら、“Import Pages”をクリック。

Scrapboxのトップページに自動で遷移します。「インポート2」というタイトルのページが作成されています。*5

Dynalistでの階層構造が再現されています。

---

Scrapbox情報整理術 [ 倉下忠憲 ]

アウトライナー実践入門 「書く・考える・生活する」創造的アウトライン・プロ [ Tak． ]

*1:筆者はnpmをManjaro Linuxにインストールして使用しています。Linuxであれば、それぞれのパッケージマネージャからインストールできると思います。

*2:Linuxなら sudo npm install -g scrapbox-converter とする必要があるかもしれません。

*3:箇条書きにするには、行頭に半角スペースを入れるか、行頭でTabキーを押す。

*4:2階層目以下を1階層下げるには、カーソルで範囲を選択をしたうえでTabキーを押す。

*5:インポートによって作成されたScrapboxのページ内に、もしも余分な記号類が見えていれば、こちらの要領でhtmlファイル内の<style>から</style>までの部分を削除してからインポートする必要があるかもしれません。

Firefox / Chromeの検索バーからScrapboxのプロジェクト内検索をする方法

---

〈目次〉

---

機能

• FirefoxやChromeには、特定のサイトを検索エンジンとして追加する機能があります。これを使って、Scrapboxの特定のプロジェクト内をFirefoxやChromeの検索バーから検索することができます。
• 検索対象として指定できるプロジェクトは、ブラウザ1個あたり1つのみのようです。
• モバイル版のFirefoxでは、正しい検索結果になりません（2018/08/29現在）。モバイル版のChromeで実行できるかどうかは未確認です。

Firefoxでの設定方法

検索対象として指定したいプロジェクト（https://scrapbox.io/○○○/）をFirefoxで開き、アドレスバーの右端にある「…」の形のアイコンをクリックすると、小さなウィンドウが開きます。その一番下に、Scrapboxのアイコンと「検索エンジンを追加」というテキストが表示されるので、それをクリック。

Firefoxの「検索バー」を利用している場合は、検索バー内の虫眼鏡アイコンをクリックして開くウィンドウで同じ操作をします。

設定はそれで完了です。

検索のしかた

探したいキーワードを、Firefoxのアドレスバーまたは検索バーに入力すると、その下に候補が表示されます。その一番下にScrapboxのアイコンがあるので、矢印キーやマウスを使ってそのアイコンを選択。

Scrapboxの検索結果が開きます。

Chromeでの設定方法

Chromeの設定画面の中の「検索エンジンの管理」をクリックし、右上に現れる検索欄にscrapboxと入力すると、下記の画像のようにScrapboxという名前の検索エンジンが表示されるはずです（もしそれが無ければ、「追加」ボタンを押して開くウィンドウに下記のように入力します）。

右端の「︙」の形のアイコンをクリックし、「編集」をクリック。

小さなウィンドウが開きます。
「検索エンジン」のところにはScrapbox.ioと入力。
「キーワード」のところにはscrapbox.ioと入力。
「URL(%s=検索語句)」のところには、https://scrapbox.io/hogehoge/search/page?q=%sと入力します（hogehogeのところは、検索対象にしたいプロジェクトのトップページのURL(https://scrapbox.io/○○○/)の○○○の部分で置き換える）。

「保存」ボタンを押して設定完了です。

検索のしかた

Chromeのアドレスバーに半角でscなどと入力すると、アドレスバーの右端に「タブを押して Scrapbox を検索」というテキストが出てきますので、Tabキーを押す。

そして、検索したいキーワードを入力し、Enterキーなどを押すと、Scrapboxでの検索結果が開きます。

---

Scrapbox情報整理術 [ 倉下忠憲 ]

Scrapboxのダークテーマ作成例

Scrapboxをダークテーマで表示する（背景色を暗い色にして、文字色を明るい色にする）ためのCSSを紹介します。

---

〈目次〉

---

スクリーンショット

各ページ

背景色は#24292F、文字色は#d7d7d7です。*1
内部リンクは青色、コンテンツが作成されていない内部リンクはオレンジです。
入力中のキャレット（入力位置を示す縦線）は白です。
テロメア（更新された行を示す行頭の色）のうち、最近更新されたものは水色で表示します。最近に更新されていないものは無色（背景色と同じ）にしてあります。

文字変換中の文字色と背景色

Firefox系ブラウザの場合のみ、変換中の文字色と背景色が、このように黒とオレンジ色の組み合わせとなります。
Chrome系ブラウザなら、変換中の文字色・背景色も、通常のそれと同じです。

各ページの下に表示される関連ページおよび、トップページに表示される各ページ

「関連ページ」および、トップページでの各ページはこのような配色です。

事前の準備

Scrapboxの設定画面で、Themeとして“Hacker 1”を選択しておきます。

※自身が管理者権限を持っているScrapboxプロジェクト（すなわち自身がOwnerまたはAdminであるScrapboxプロジェクト）でなければ、設定画面でThemeを変更することはできません。

CSSを適用する手順

Scrapboxに独自のCSSを適用する手順はこちらに説明されています。

下記のCSSを、その手順で適用してください。

CSS

※最終更新：2019-11-26
※CSSの作成には、塩澤一洋さんの「黒いUserCSS」を参考にし、同スタイルシートの一部をそのまま使用させて頂いています。

.page,
.page a,
.page video,
.page iframe,
.code-block-start,
.code-block-start span {
    filter: invert(100%);
}

/*各ページの本文が入る領域*/
.page {
    box-shadow: none;
    background-color: #dbd6d0;  /* Firefox系ブラウザの場合は #dad5cf を適用*/
    border: solid 1px #888;
}

/*各ページの本文の文字色*/
.editor {
    color: #282828 !important;
}

/* 入力時の背景色*/
textarea#text-input:focus {
    background: #dbd6d0;  /* Firefox系ブラウザの場合は #dad5cf を適用*/
}

/*ページ本文でのリンクの色*/
.page a,
.page a.link:hover {
    color: #7c9ff7 !important
}
.line a.empty-page-link {
    color: #fd7373 !important
}
.line a.empty-page-link:hover {
    color: #fd7373 !important;
}
a.page-link:hover {
    color: #7c9ff7 !important;
}

/*引用部分でのリンク*/
span.quote a.page-link,
span.quote a.page-link:hover {
    color: #88A7F7 !important
}
.line span.quote a.empty-page-link,
.line span.quote a.empty-page-link:hover {
    color: #fd7373 !important
}

/*各ページの下に表示される関連ページ一覧における本文のフォントサイズ*/
div.col-page .grid li.page-list-item a .description {
    font-size: 13px !important;
    color: #ccc;
}

/*関連ページ および トップページにおける各ページの背景色*/
.grid li.page-list-item a {
    background-color: rgba(57, 60, 70, 0.6);
}

/*関連ページ一覧やトップページで各ページにマウスオーバーしたときの背景色変更をしない*/
.grid li.page-list-item a .hover {
    background-color: rgba(0, 0, 0, 0) !important;
}

/*関連ページ一覧やトップページでのコード記法の色*/
.page-list-item .description code {
    color: #eee
}

/* スリムなテロメア */
.line .telomere .telomere-border,
.line .telomere .telomere-border.unread {
    transition: none;
    box-sizing: content-box;
    border-color: #24292f
}
.line .telomere .telomere-border:hover,
.line .telomere .telomere-border.unread:hover {
    box-sizing: border-box;
    width: auto;
    border-color: #24292f;
    background-color: transparent;
}

/* 新着以外のテロメアの色と太さ */
.line .telomere .telomere-border {
    background-color: #24292f;
    width: 2px;
}

/* 新着のテロメアの色と太さ */
.line .telomere .telomere-border.unread {
    background-color: #4DC3FA;
    width: 5px;
}

参考ページ

ダークテーマの作り方について、こちらのリンクが参考になります。

関連記事

色を変えること以外のカスタマイズは、こちらの記事で紹介しています。

ブラウザのアドオンを使う方法

CSSの変更をする代わりに、Dark Readerというアドオンを使う方法もあります。Dark Readerをインストールしてあるブラウザで閲覧した時のみダーク配色になります。

---

Scrapbox情報整理術 [ 倉下忠憲 ]

*1:ただし、CSS内では、これらの色を反転させた値（#dbd6d0, #282828）を指定しています。このような指定の仕方については、参考ページの節にあるリンク先の記事をご覧ください。