小技チョコレート

ちょっとした小技を紹介するだけのブログです。

Dynalistに書き込む方法のまとめ

Dynalist アウトライナー Android iOS Linux Windows ブラウザ Python

アウトライナーのDynalistに書き込む方法は、大別して4つあります。

  1. 直接書き込む
  2. ブラウザの拡張機能から書き込む
  3. iOS / Androidの共有メニューから書き込む
  4. APIを利用して書き込む*2

*1:Arch系のLinuxならAURからもインストールできる。

*2:DynalistのAPIに関する公式ドキュメントはこちら。

Scrapbox用UserScriptの作成例

Scrapbox JavaScript

〈目次〉

選択範囲内のハッシュタグの直前にスペースがないとき、半角スペースを1個入れる

マウスで選択した範囲内で、次のような置換をします。

  • hoge#fuga→hoge #fuga
  • hoge＃fuga→hoge #fuga（全角シャープは半角シャープにする）

コード

code:script.js
 scrapbox.PopupMenu.addButton({
    title: '#',  //「#」はポッアップするボタンの名前。変更可能です。
    onClick: text =>{
    //# or ＃の直前にスペースがないとき、半角スペースを入れ、かつ全角＃は半角#に置換する
    text=text.split(/\n/).map(line => line.replace(/([^\s])[#＃]/g,'$1 #')).join('\n')
    return text;
    }
 })

範囲選択したところをコード記法にする

code:script.js
 scrapbox.PopupMenu.addButton({
    title: 'code',
    onClick: text =>{
    text=text.split(/\n/).map(line => line.replace(/(.+)/g,'`$1`')).join('\n')
 　　return text;
    }
 })

範囲選択したところを数式にする

code:script.js
 scrapbox.PopupMenu.addButton({
    title: '数式',
    onClick: text =>{
    text=text.split(/\n/).map(line => line.replace(/(.+)/g,'\[\$ $1\]')).join('\n')
 　　return text;
    }
 })

Dynalistからプレーンテキスト形式でエクスポートした内容をScrapbox記法に置換する

別の記事で紹介しています。

ich.hatenadiary.com

Dynalistからプレーンテキスト形式でエクスポートした内容をScrapbox記法に置換するUserScript

Dynalist Scrapbox アウトライナー JavaScript

Dynalistからプレーンテキスト形式でエクスポートした内容をScrapbox記法に置換するUserScriptを作ったので、コードと使い方を書いておきます。

スクリプトのコードは更新されることがあります（更新履歴）。

〈目次〉

機能

概要

Dynalistからプレーンテキスト形式でエクスポートし、Scrapboxにペーストしてあるテキストを、マウスで選択してボタンを1回クリックすると、選択範囲に含まれているMarkdownや、Dynalistの独自記法をScrapbox記法に置換します。Dynalistにおける階層も再現されます。

f:id:ichbin:20191113164731p:plain
（Dynalistのコンテンツ）

f:id:ichbin:20191113165124p:plain
（DynalistのコンテンツをScrapboxにペーストし、範囲選択して“Dynalist"ボタンを押す）

f:id:ichbin:20191113170228p:plain
（Scrapbox記法に置換された状態）

置換できるもの／できないもののリスト

全てのMarkdownやDynalistの独自記法を完全にScrapbox記法へ置換できるわけではなく、置換できないものも存在します。置換できるもの／できないものの詳しいリストは下記のとおりです。

置換できるもの
  • リンク
    • [リンクテキスト](URL)→[リンクテキスト URL]
    • [](URL)→[URL]
  • 画像
    • ![リンクテキスト](URL)→[リンクテキスト URL]
    • ![](URL)→[URL]
  • 強調を太字へ置換（**hoge**→[* hoge]）
  • イタリック（__hoge__→[/ hoge]）
  • 取り消し線（~~hoge~~→[- hoge]）
  • 日時記法
    • （!(2019-09-08)→2019-09-08）
    • （!(2019-09-08 10:00)→2019-09-08 10:00）
  • ハッシュタグ用の@を#へ置換（@hoge→#hoge）
  • 数式（$$E=mc^2$$→[$ E=mc^2]）
  • 余分なインデント（Dynalistでは階層が1段下がるごとにインデントが4個ずつ付くので、これをインデント1個ずつに置換）*1

なお、Dynalistのコード記法（`hoge`）および、#を用いたハッシュタグ（#hoge）は、Scrapboxでもそれらと同一の書き方をしますので、本記事のUserScriptを導入しなくても、Scrapboxで再現されます。

置換できないもの
  • Scrapboxのページタイトルに含まれているMarkdownや、同じくページタイトルに含まれているDynalistの独自記法（ただし、ちょっとした工夫を加えれば解決します）。
    • Dynalistからエクスポートしたテキストの1行目がこれに相当します。
  • Dynalistにおいて見出し（H1, H2, H3）の状態にある項目（Ctrl+Shift+Hを押した行）は、Dynalistではフォントサイズが大きくなっていますが、そのサイズ変更は再現されません。
  • カラーラベル（Dynalistで特定の行にのみ使用している背景色）は再現されません。
  • Dynalistでチェック（Check off）した項目（hogeのように表示されているもの＝Ctrl+Enterを押した行）そのものは消さずに引き継ぐことができますが、この項目のフォントカラーの変更（色が薄くなっていること）と、同項目に付けられている取り消し線は再現されません。
    • Dynalistのcheckbox（行頭に付けることができるチェック機能）にチェックを入れた項目も、これに該当します。
    • それらの取り消し線をScrapboxで再現するには別の方法を利用して下さい。
  • Dynalistのcheckbox（行頭に付けることができるチェック機能）は再現されません。
  • Dynalistの1項目（1行）の内部で改行してある場合（Ctrl+Shift+Enterを押してある場合）は、その項目における改行以降の部分には、階層の深さが引き継がれません。他の項目の階層は正しく再現されます。
  • Dynalistのnoteに記入したものは、Dynalistにおけるスタイル（小さいフォントで各項目の下側に付いている状態）がScrapboxに引き継がれず、独立の1項目（1行）に置き換えられます。

その他の、仕様上どうしても実現できないことなどを「既知の問題点」の節にまとめています。細かいことなので、詳しく知りたい場合はお読み下さい。

他のツールとの機能比較も参考にしてください。

scrapbox.io

導入のしかた

こちらのヘルプに書かれている手順で、ScrapboxのUserScriptをEnableにします。

次に、Scrapboxの「自分のページ」を開き、code:script.jsと記入します。その下の行にdy2sc.jsのコード（下記の画像の赤枠部分、全体で約30行）をペーストします。

f:id:ichbin:20190916081939p:plain
（dy2sc.jsのコード）

そしてブラウザをリロードし、Scrapboxの上部に表示される“Load new UserScript”をクリックします。

f:id:ichbin:20190911235056p:plain

ペーストした部分はこのようになっているはずです（行頭のインデントの数は、この画像のとおりでなくても構いません）。

f:id:ichbin:20191105064533p:plain

これで完了です。

使い方

Dynalistにこのような内容があるとき、これをScrapbox記法に置換する、という例を示します。

f:id:ichbin:20191117120621p:plain
（この例では1行の中にMarkdownやDynalistの独自記法が1つずつあるだけですが、複数個ある場合も正しく置換できます。）

Dynalistからエクスポートしたい内容の、最上位の行の行頭にマウスポインタを合わせると、「≡」の形のアイコンが表示されるので、それをクリック。

f:id:ichbin:20191113164922p:plain

すると、メニューが開くので、その中の“Export...”をクリック。

f:id:ichbin:20191113165009p:plain

このような画面が開きます。

f:id:ichbin:20191113165540p:plain

中央上部の“Plain text”をマウスで選択し、下の方にある“Indentation style”のところで“Spaces”を選択しておきます（通常は何もしなくても“Spaces”が選択されていると思います）。

そして“Copy to clipboard”のボタンを押すか、もしくは、中央の入力欄の内容を選択した状態でCtrl+cなどと操作して、この入力欄の内容をクリップボードにコピーします。

それをScrapboxの新規ページや既存のページに貼り付けます。

f:id:ichbin:20191113165057p:plain
（エクスポートしたテキストをそのまま貼り付けた状態）

エクスポートしたテキストのうち、ページタイトルを除いた部分をマウスで選択します。
すると、“Dynalist”という名前のボタンが表示されます。

f:id:ichbin:20191113165124p:plain
（ページタイトルより下側をマウスで選択した状態）

“Dynalist"のボタンを押すと、このように置換されます。

f:id:ichbin:20191113170228p:plain
（数式記法のところで行頭のマーカー(・)が見えなくなっているのはScrapboxの仕様です）

ページタイトルを置換対象に含める方法

上掲のとおり、Scrapboxのページタイトル部分は、このUserScriptでの置換対象に含めることができません。

f:id:ichbin:20191113165612p:plain
（ページタイトルまで選択範囲に含めると、置換操作のための“Dynalist”ボタンが出ない）

この問題は、次のような小さな工夫で解決します。

DynalistからエクスポートしたテキストをScrapboxに貼り付ける際に、Scrapboxページの1行目（すなわちページタイトルの位置）に貼り付けるのではなく、2行目以降の位置に貼り付けます。そうすれば、全体をUserScriptの置換対象に含めることができます。置換が終わった後で、本来ページタイトルになるべきだった行を、ページタイトルの位置まで上げてやれば完了です。

f:id:ichbin:20191113171831p:plain
（ページタイトルよりも下の行に貼り付ければ、全体が置換対象に入る）

〈Dynalistに存在しているが画面上で見えていないもの〉をエクスポート対象から除外する方法

Dynalistにおいて「存在はしているけれども画面上で見えていないもの」を、エクスポート対象に含めないようにすることができます。詳細は別の記事をご覧ください。

カスタマイズ

ボタンの名前を変える

こちらの画像にあるように、置換対象の範囲をマウスで選択したときに表示されるボタンの名前は、デフォルトでは“Dynalist"ですが、この名前は変更できます。

f:id:ichbin:20191113173126p:plain

変更するには、スクリプトのコードの2行目のtitle: 'Dynalist',のところを書き換えます。

書き終えたら必ずブラウザをリロードし、Scrapboxのページ上部に現れる"Load new UserScript"をクリックしておきます。

置換対象を増やす

デフォルトで置換できるもののほかに、置換対象を加えたい場合は、スクリプトのコードの末尾のほうにあるreturn text;よりも上の行に、コードを書き加えます（既存の置換機能に影響を与えないようにするためには、return text;の直前の行に書き加えるほうがよい）。

コードの基本的な形はtext=text.split(/\n/).map(line => line.replace(/置換前/g,'置換後')).join('\n')です。「置換前」の部分はJavaScriptでの正規表現の書き方に従って書きます。「置換後」の部分の書き方はdy2sc.jsのコードを参考にしてください。

書き終えたら必ずブラウザをリロードし、Scrapboxのページ上部に現れる"Load new UserScript"をクリックしておきます。

置換対象を減らす

デフォルトで置換できるもののなかに、置換したくないものがある場合は、スクリプトのコードの中でそれに対応している行の行頭に//と書き加えます。

書き終えたら必ずブラウザをリロードし、Scrapboxのページ上部に現れる"Load new UserScript"をクリックしておきます。

既知の問題点

  • 次のような場合は、その箇所では正しい置換結果になりません。
    • Markdownが入れ子になっている場合（**__hoge__**や~~**hoge **~~など）
    • Dynalistの数式記法（$$〜$$）で式に]を含む場合（例：$$[a + b]$$）*2
    • 数式記法（$$〜$$）で半角の$が3個以上連続している場合
      • 数式の左端や右端に$がある場合（$aとかa+$のような数式）がこれに該当します。
      • 1行の中で数式記法が連続しているだけの場合は、問題ありません。
        • $$a+b$$$$x-y$$→[$ a+b][$ x-y]と正しく置換される。
  • Dynalistで行頭に半角スペースがあると、Scrapboxにおいて階層が正しく再現されません。行頭の半角スペースがインデントとして解釈されてしまうためです。

f:id:ichbin:20190910182404p:plain
（1行目は行頭に半角スペースがある）

おわりに

不具合のご報告やご要望、改良のアイデアなどがありましたら、本記事のコメント欄か筆者のTwitter、メール、Githubなどへお知らせ下さい。

免責事項

本記事で紹介したUserScriptの使用やその不具合等により生じたいかなる損害に関しましても、筆者は一切の責任を負いません。

*1:インデントを4個のままにすると、Scrapboxにおいては箇条書きの階層が深くなりすぎます。

*2:これはScrapboxの仕様によるものです。

Dynalistからプレーンテキスト形式でエクスポートした内容をScrapbox記法に置換するPythonスクリプト

Dynalist Scrapbox アウトライナー Python

Dynalistからプレーンテキスト形式でエクスポートした内容を、Scrapbox記法に置換するPythonスクリプトを作ったので、コードと使い方を書いておきます。

スクリプトのコードは更新されることがあります（更新履歴）。
この記事は長くて細かいので、大要を知りたい場合は機能の節のみお読み下さい。

Pythonを使えない（使いたくない）場合は、ブラウザのみで動作するUserScript版が使えます。

続きを読む

記事にするほどでもない小技集（10）

ブラウザ Googleカレンダー はてなブログ CSS Linux Scrapbox

〈目次〉

Vivaldiのツールバーに表示されている拡張機能のアイコンを並べ替える方法

Shiftキーを押しながら、アイコンをマウスでドラッグすると、アイコンを移動できます。

Googleカレンダーと連携できるLinux用カレンダーアプリケーション

はてなブログでリスト内の余分な余白を取り除くためのCSS

はてなブログでリスト（箇条書き）を使用したときに、項目の下側に大きな余白が出来る場合があります。これをCSSで取り除くことができます。

f:id:ichbin:20190911063304p:plain

下記のCSSを、はてなブログの管理画面の「デザイン設定」の中の「デザインCSS」の欄に入力して「変更を保存する」ボタンを押せば完了です。

ul li p{margin-bottom:0 !important}  /* 余白を0にする場合 */

適用後
f:id:ichbin:20190911063522p:plain

Scrapboxのポップアップメニューの中で不要なものを非表示にするUserCSS

Scrapboxでテキストを選択した際にポップアップするメニューのうち、デフォルトで表示される6つのそれぞれを非表示にすることができます。

ScrapboxのUserCSSとして下記のCSSの各行を適用すれば、各々のボタンが非表示になります。

div.link-button{display:none !important}  /* Link */
div.strong-button{display:none !important}  /* Strong */
div.italic-button{display:none !important}  /* Italic */
div.strike-button{display:none !important}  /* Strike */
div.copy-plain-button{display:none !important}  /* Copy plain */
div.new-page-button{display:none !important}  /* New page */

適用前
f:id:ichbin:20190913164342p:plain
（LInk〜Copy plainまでの5個はデフォルトで表示されるもの。New pageは複数行を選択したときに表示される）

適用後
f:id:ichbin:20190913164333p:plain
（Italicとstrikeを非表示にした例）