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

ScrapboxのUserScriptを使う方法と、そうでない方法との2つがありますが、前者のほうが圧倒的に簡単でラクです。
後者をあえて使うメリットは、DynalistでMarkdownを使って指定してある書式やハイパーリンクScrapboxに引き継げることです。


〈目次〉


UserScriptを使う方法

UserScriptを使わない方法

機能

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

必要なもの

Scrapboxにインポートする手順

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

WorkFlowyからのインポート

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

インポート後の修正(任意)

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

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

それらの修正を加えるとこのようになります。 f:id:ichbin:20180831103838p:plain

Dynalistからのインポート

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

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

“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”のタブを開きます。 f:id:ichbin:20180830190456p:plain

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

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

Dynalistでの階層構造が維持されています。 f:id:ichbin:20180830205255p:plain

*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のプロジェクト内検索をする方法


〈目次〉


機能

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

Firefoxでの設定方法

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

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

設定はそれで完了です。

検索のしかた

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

Scrapboxの検索結果が開きます。 f:id:ichbin:20180829133615p:plain

Chromeでの設定方法

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

右端の「︙」の形のアイコンをクリックし、「編集」をクリック。 f:id:ichbin:20180829130817p:plain

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

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

検索のしかた

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

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

Scrapboxのスタイルシート変更例


〈目次〉


設定のしかた

Scrapboxに独自のスタイルシートを適用する手順はこちらに説明されています。

備考

下記の各スタイルシートmax-widthとあるのは横幅の最大値を指定するものですが、そこをwidthに変えれば、横幅を固定できます。

スタイルシートの例

トップページに表示される各ページを1行ずつに細く表示する

トップページに表示される各ページを、タイトルと本文を1行ずつ表示する細いサイズにします。各ページのアイコンは表示されません。
各ページのタイトルの下には、本文の1行目が表示されます。 f:id:ichbin:20180828133801p:plain

div.page-list li.page-list-item{
    width:auto !important;
    height:80px !important;  /* この数値を変えれば各ページの高さが変わる */
    float:none
    }
div.page-list  div.icon{
    display:none
    }
div.page-list  div.description{
    padding:0 12px !important
    }
li.ellipsis{
    float:none
    }

各ページの下に表示される「関連ページ」を各1行ずつに細く表示する

各ページの下に表示される「関連ページ」のそれぞれを、タイトルと本文を1行ずつ表示する細いサイズにします。リンク先ページのアイコンは表示されません。
内部リンクしているキーワードの見出し部分はデフォルトのままになっており、見出しのあるところだけインデントされます。 f:id:ichbin:20180828132138p:plain

div.related-page-list li.page-list-item{
    width:auto !important;
    height:80px !important;  /* この数値を変えれば各ページの高さが変わる */
    float:none
    }
div.related-page-list div.icon{
    display:none
    }
div.related-page-list  div.description{
    padding:0 12px !important
    }
li.ellipsis{
    float:none
    }

トップページで、ページ一覧が表示される領域の横幅の最大値を変える

div.page-list{
    max-width:900px;  /* 900pxにする場合 */
    margin-left:auto;
    margin-right:auto
    }

〈適用前〉
f:id:ichbin:20180828112312p:plain:w300

〈適用後〉
f:id:ichbin:20180828112253p:plain:w300

各ページのタイトルと本文が入る領域の横幅の最大値を変える

div.page{
    max-width:800px;  /* 800pxにする場合 */
    margin-left:auto;
    margin-right:auto
    }

〈適用前〉
f:id:ichbin:20180828103744p:plain:w300

〈適用後〉
f:id:ichbin:20180828103813p:plain:w300

各ページの下の「関連ページ」一覧が表示される領域の横幅の最大値を変える

div.related-page-list{
    max-width:800px;  /* 800pxにする場合 */
    margin-left:auto;
    margin-right:auto
    }

〈適用前〉
f:id:ichbin:20180828121036p:plain:w300

〈適用後〉
f:id:ichbin:20180828121048p:plain:w300

各ページのタイトル・本文・関連ページが表示される領域の横幅の最大値を変える

div.col-page{
    max-width:800px;  /* 800pxにする場合 */
    margin-left:auto;
    margin-right:auto
    }

〈適用前〉
f:id:ichbin:20180828122319p:plain:w300

〈適用後〉
f:id:ichbin:20180828122332p:plain:w300

Cinnamon 3.6のnemo(ファイルマネージャー)でGoogle Driveに接続する方法

Linuxのデスクトップ環境がCinnamon 3.6である場合に、ファイルマネージャーのnemoでGoogle Driveに接続する方法を紹介します。Manjaro Linux Forumに掲載されているHow toを和訳し再構成・加筆したものです。

インストールするもの

※Arch Linux系のLinuxを使っている場合は、3つともパッケージマネージャーからインストールできます。コマンドラインからはsudo pacman -S gnome-online-accounts gvfs-goa gvfs-googleと実行すればインストールできます。

設定の手順

「システム設定」の中のOnline Accountsの項目を開き、 f:id:ichbin:20180819172832p:plain

Gmailのアドレスとパスワードを入力してGoogleにログインし、 f:id:ichbin:20180819172847p:plain

GNOMEGoogleアカウントへのアクセス許可を与える。 f:id:ichbin:20180819172927p:plain

f:id:ichbin:20180819172903p:plain

最後の画面では、「ファイル」の選択欄をオンにしておく必要があるでしょう(下記)。 f:id:ichbin:20180819173013p:plain

ここまで済ませてからLinuxを再起動すると、nemoのサイドバーの「ネットワーク」のところに自分のGmailアドレスが表示され、それをクリックするとnemoでGoogle Driveに接続できます。

【PCブラウザ版】Twitterの「○○さんがフォローしています」をタイムラインに表示させない方法

機能

PCのFirefoxまたはChromeTwitterのタイムラインを閲覧している場合にのみ、「○○さんがフォローしています」という但し書き付きのツイートをタイムラインに表示させないようにすることができます。

設定の手順

“うみの さち”さんのブログ「ツイッター:「○○さんがいいねしました」を非表示にする - 知らなきゃ絶対損するPCマル秘ワザ」で紹介されている方法を応用します。このリンク先で説明されている「導入手順」を実行すると、ブラウザ(FirefoxまたはChrome)にStylusというアドオン(拡張機能)がインストールされます。

Stylusの設定画面を開きます。Firefoxの場合は、「アドオン」を一覧する画面を開き、Stylusのアイコンの右側にある「設定」をクリック。 f:id:ichbin:20180818191404p:plain

次の画面で、一番下にある「スタイル管理」をクリック。 f:id:ichbin:20180818191416p:plain

次の画面に、“「○○さんがいいねしました」を非表示にする”という名前のリンクがあるはずですので、それをクリック。 f:id:ichbin:20180818191440p:plain

次の画面で、右側には、それぞれ「コード1」と「コード2」というタイトルが付いた2つの入力欄があるはずです。 f:id:ichbin:20180823082136p:plain

「コード2」の入力欄には、

div[data-component-context="suggest_activity_tweet"]
  {
    display: none !important;
  }

という4行があらかじめ入力されているはずです。これは、「○○さんがいいねしました」という但し書き付きのツイートをTwitterのタイムラインに表示させないようにするためのものです(上述の"うみの さち"さんが作成なさったもの)。

もしも、「○○さんがいいねしました」という但し書き付きのツイートをTwitterのタイムラインに表示させるようにしたい場合は、その4行を消します。

次に、「コード2」の入力欄の最後の行に、半角で

 div[data-component-context="tweet-context with-icn"]
     {
     display:none !important;
      }

と入力。*1

入力すると、「コード2」のところはこのようになります。 f:id:ichbin:20180823082849p:plain

入力し終わったら、その画面の左上にある「保存」ボタンをクリック。設定はこれで終わりです。Stylusの画面は閉じても構いません。

この設定をおこなったFirefoxChromeTwitterのタイムラインを閲覧中は、「○○さんがフォローしています」という但し書き付きのツイートが表示されなくなります。

タイムラインに再び表示させる方法

上述の設定を終えた後で、「○○さんがフォローしています」という但し書き付きのツイートをタイムラインに再び表示させるようにするには、上述の入力内容の前後を、半角の/**/という文字で囲んで、下記のようにします。

 /*div[data-component-context="tweet-context with-icn"]
     {
     display:none !important;
      }*/

画面はこのようになるはずです。 f:id:ichbin:20180818192059p:plain

この状態で、左上の「保存」ボタンを押せば完了です。

*1:行頭の字下げは、しなくてもかまいません。この4行の中での改行も、必須ではありません。