🐸

zennのgit連携が有効な状態で記事をWEBからVSCodeで開きたい

2021/06/30に公開

Git

VS Code

Zenn

tech

git連携の功罪

zenn の記事が git 連携できるのは良いことなんだが、git で管理できるようになった事で無視できないデメリットが生まれてしまう。それはWEBから気軽に記事を編集＆作成できなくなってしまったという事だ。やはりぱっと思いついたときに手元にあるのは自分の場合はブラウザが一番多い。いちいちローカルのgitリポジトリを開くのは面倒な時も多いのだ。
このせいでzennに記事を書くペースがgit連携後からあからさまに下がってしまった。というかgit連携の試験くらいでその後記事を書いてない。折角快適に記事を書きたいと思ってgit連携を有効にしてみたのにコレでは半末転倒である。

改善案

今回スマホ閲覧に関しては諦めて、せめてPCでブラウジング中にzennを開いたらローカルのVSCodeにリームレスに移行できないかと言うことを考えた。

そういえば vscode の拡張ってブラウザから install を押すとローカルのVSCodeで開きますか？ってダイアログが出てOKするとVSCode起動して拡張のインストールが出来るよな？あれの類型で実はローカルのリポジトリを開いたり出来るんじゃね？と探したらやっぱりあった！

↓こんな感じのURLスキーマでローカルのファイルが開けるぽい！fileってなってるけどディレクトリ名でもいけた。

vscode://file/{full path to file}
vscode://file/{full path to file}:line
vscode://file/{full path to file}:line:column

コレを使って Open with VSCode ボタンとか付ければ便利なんじゃね？
↓
ってことで取りあえずユーザスクリプトで作ってみた！

Tampermonkey っていうユーザスクリプトを動かす拡張を使ってるのでまずはコレを入れてから↓をクリックで使えるようになるはず。

Install userscript

ソースはこんな感じ（記事更新時点のコピペ）

// ==UserScript==
// @name         Zenn to VSCode
// @description  Add 'Open with vscode' button to zenn's edit page
// @version      0.3.0
// @author       kawaz
// @namespace    https://github.com/kawaz/userscript-zenn
// @supportURL   https://github.com/kawaz/userscript-zenn/issues
// @updateURL    https://github.com/kawaz/userscript-zenn/raw/master/zenn.user.js
// @downloadURL  https://github.com/kawaz/userscript-zenn/raw/master/zenn.user.js
// @icon         https://www.google.com/s2/favicons?domain=zenn.dev
// @grant        GM_getValue
// @grant        GM_setValue
// @match        https://zenn.dev/*/edit
// ==/UserScript==

const zennRepoPath = (v = null) => v != null ? GM_setValue("zennRepoPath", v) : GM_getValue("zennRepoPath", "")
const vscodeURL = () => `vscode://file${zennRepoPath()}${location.pathname.replace(/\/edit$/, "")}.md`
const setIntervalTimeout = (cb, interval = 200, timeout = 5000) => { const stop = () => clearInterval(c), c = setInterval(cb, interval, stop); setTimeout(stop, timeout); cb(stop); return stop }
const setupUI = done => {
    const editorActions = document.querySelector(`div[class*="MarkdownEditor_actions"]`)
    if (editorActions) {
        editorActions.append(Object.assign(document.createElement("button"), {
            innerHTML: "Open with VSCode",
            onclick: e => zennRepoPath() ? console.log(vscodeURL()) || window.open(vscodeURL()) : editorActions.querySelector(`input[name^=zennRepoPath`,).focus()
        }))
        editorActions.append(Object.assign(document.createElement("input"), {
            name: `zennRepoPath${Date.now()}`,
            title: "full path of local repository for zenn",
            placeholder: "Input full path of local repository for zenn",
            value: zennRepoPath(),
            onchange: e => zennRepoPath(e.target.value)
        }))
        done()
    }
}
setIntervalTimeout(setupUI, 200, 5000)

git連携の功罪

改善案

Discussion