Jazzと読書の日々

iPadを筆記具として使う方法を模索します

Obsidian:コンテキストメニューを使う

そうか、それがありましたね。

コンテキストメニュー

Obsidianには「コンテキストメニューをカーソルの下に表示」があります。

モバイル版では中身のない空っぽな機能なのですが、老荘思想でいうところの「無用の用」を為します。 つまり、どんなことにも対応できる変幻自在な機能になる。

これにホットキーを割り当てましょう。

Windows用のキーボードには「メニューキー」がついています。 メニューにカーソルが当たったようなアイコンのキーです。 「アプリケーションキー」とも呼ぶそうです。 このキーは「コンテキストメニューを開く」が本来の使い方なので適任です。

ただObisidianのホットキーは修飾キーとの同時押しでないと反応しません。 [Alt]+[Menu]にしておきましょう。 これに「コンテキストメニューをカーソルの下に表示」を割り当てます。 これなら日本語入力中でも応答します。

使い方

コンテキストメニューへのコマンド追加はCommanderプラグインを使います。

「Editor Menu」のところ。 カーソル行操作がメインになるので、常用するコマンドを追加してください。

現れたメニューに対し、カーソルキーで上下に動かし、エンターキーで決定します。

blog.md

コンテキストとは「文脈」のことです。 URLアドレスだと「ブラウザで開く」が現れたりします。 そのとき使えるコマンドが列挙される。 これぞオブジェクト指向

Commanderで追加した分に関しては、そうした条件わけができません。 なので、自前で条件わけするTemplaterスクリプトを登録しています。

<%*
// カードのスタイル (${url} ${title} ${icon} ${version} ${name} ${genre} ${price})
const CARD = "<div name='${title}' style='font-family:sans-serif; font-size:medium; background:ghostwhite; height:auto; padding:10px; border-radius:5px; border:1px solid silver;'><a href='${url}' style='color:darkblue;'><img src='${icon}' style='width:60px; float:left; border-radius:5px; margin:1px 15px 1px 1px; box-shadow:1px 2px 3px gray;'><b>${title} ${version}</b></a><br/><div style='font-family:serif; color:black; font-size:small;'>分類: ${genre}<br/>価格: ${price} (${name})</div clear=all></div>\n"

// スクリプト本体
e = app.workspace.activeLeaf.view.editor
p = e.getCursor().line
s = e.getLine(p)
if(s){
  if(/^http/.test(s)){
    switch(true){
      case /youtube\.com/.test(s):
        id = s.split("v=")[1].split("&")[0]
        s = `<iframe width='350px' height='200px' src='http://www.youtube.com/embed/${id}' frameborder=0></iframe>\n`
        break
      case /(\.jpg|\.png|\.gif)/.test(s):
        s = `<img width='400px' src='${s}'>\n`
        break
      case /gyazo\.com/.test(s):
        s = `<img width='400px' src='${s}/raw'>\n`
        break
      case /icloud\.com/.test(s):
      s = `<a href='${s}' style='display:inline-block; position:relative; max-width:280px; padding:2px 8px 4px; border:1px solid navy; border-radius:4px; text-decoration:none; background-color:lavender;'><span style='display:block; line-height:16px; color:#333; font-size:11px; margin-top:2px;'>Import Shortcut Recipe</span><span style='display:block; line-height:18px; color:#006eff; font-size:16px; margin-bottom:2px;'>Untitled</span></a>\n`
        break
      case /x\.com/.test(s):
        s = s.replace("x.", "twitter.")
        s = `<iframe border=0 frameborder=0 width='400px' height='600px' src='https://twitframe.com/show?url=${s}'></iframe>\n`
        break
      default:
        s = `<iframe src='https://hatenablog.com/embed?url=${s}' width='350px' frameborder='0' scrolling='no'></iframe>\n`
    }
  }else{
    t = (s[0] == " ")?  "iPadSoftware":"software"
    url = `https://itunes.apple.com/search?country=JP&entity=${t}&limit=1&term=${encodeURIComponent(s)}`
    x = await tp.obsidian.request({url})
    a = JSON.parse(x).results[0]
    d = a.artworkUrl512.replace(/512x512/,"100x100")
    s = CARD.replace(/\${url}/g, a.trackViewUrl).replace(/\${title}/g, a.trackName).replace(/\${icon}/g, d).replace(/\${version}/g, a.version).replace(/\${price}/g, a.formattedPrice).replace(/\${name}/g, a.artistName).replace(/\${genre}/g, a.genres)
  }
  e.setLine(p, s)
}else{
  p = tp.file.content.split("\n")
  a = p.shift()
  b = p.join("\n")
  s = `hatenablog:///new?title=${encodeURIComponent(a)}&body=${encodeURIComponent(b)}`
  open(s)
}
%>

めっちゃ長いですね。

カーソル行がURLアドレスの場合ブログカードに変換します。 画像であれば画像表示になります。 XやYouTubeは埋め込み。 URLアドレスでない場合はAppStoreの検索になります。 先頭に空白を入れるとiPad用。 アプリの紹介カードを作ります。

カーソル行が空行のときははてなブログへの転送になります。 これ一本でブログ用の装飾を賄っているスクリプトです。

まとめ

ホットキーを多用すると、どのキーに割り当てたか記憶が曖昧になりがちなのですが、メニューにしておくと忘れることがありません。

コンテキストメニュー、いい解決策です。