APIなしでUserScriptメタ情報をラクラク取得
概要
API叩くときはほぼ毎回使う。
でも他人にコード使ってもらうためにはそこを全部書き換えなきゃいけない時があります
そこで、UserScriptから、スクリプトが記載されているプロジェクト名・ページ名・ファイル名、そして、スクリプト実行時のプロジェクト名（・ページ名）のそれぞれの名前を取得するスニペットを書きました。 使い方
code:usage.js
const {default: yourFavoriteName} = await import(/api/code/public-minaph/APIなしでUserScriptメタ情報をラクラク取得/script.js?url=${import.meta.url});
実行時のProjectと実行時のPageの情報は実行時評価です。
欲しい時にアクセスすれば最新の値が得られます
Pageを開いていないとnullになります
code:structure.js
{
// scriptの記載場所
src: {
PROJ: string,
PAGE: string,
FILE: string,
},
// import先
tgt: {
PROJ: string,
PAGE: string | null,
FILE: null,
}
}
編集ログ
2021/10/22 17:26
仕様を変更しました
動的インポート前提で、URLパラメータによるsrc urlパースを可能にしました
従来はソースコードを全部コピーする必要があったのですが、これで楽になりました
2021/10/14 04:14
tgt.PROJも実行時評価にしました
code:script.js
/**
* @typedef {Object} ScriptLoc
* @property {string} PROJ - Project name
* @property {string} PAGE - Page name
* @property {string} FILE - File name
*/
/**
* @typedef {Object} ScriptMetaInfo
* @property {ScriptLoc} src - Where the script is written
* @property {ScriptLoc} tgt - Where the script is to be imported
*/
/**
* @type {ScriptMetaInfo}
*/
export default (() => {
const meta = new URL(import.meta.url);
const src = meta.searchParams.get("url");
const { pathname } = src ? new URL(src) : meta;
console.log(pathname);
return {
src: {PROJ, PAGE, FILE},
tgt: {
get PROJ() {return scrapbox.Project.name}, // str
get PAGE() {return scrapbox.Page.title}, // str | null
FILE: null
}
}
})();
解説
この方法は、単にプロジェクト名だけを取得するコードとしても以下の長所があります
ソースコードが簡潔
通信の必要なし
計算量も極小
正規表現なし
UserScriptは全部ECMAScriptモジュールとして実行されてるんで、基本的にはscriptタグとかDOMに挿入しない限りはどこでもimport.metaフレーズが使えます。 プロパティではなくフレーズ？らしい
さらに、import.meta.urlが常に？~/api/code/:proj/:page/:fileなので、/でsplitしてあげれば安定してプロジェクト名、ページタイトル、ファイル名をパースできます
僕の調べる限りでは、Scrapbox界隈ではimport.metaを利用することで安定してメタ情報のパースができるという情報がなかったので公開しました。
これでぜひ、いろんなプロジェクトにコピペして使いまわせるコードを書いてください
yuki_minoh.iconタイトルめっちゃ迷いました。