入力ダイアログを表示するUserScript

https://gyazo.com/2bdf88c060afd8f8925464547e555727

好きなボタンの組み合わせを選べるようにした

単純にユーザーに対してメッセージを表示するのもできる

「はい」「いいえ」の選択肢を表示してユーザーに選ばせることもできる

ボタンに関しては自分で作ることもできる

テキスト入力フォームを表示して入力を促すこともできる

もし欲しい組み合わせやボタンが無ければ、自分で実装することも可能（上級者向け）

リンク

このドキュメントはmainブランチの内容を参照している

各バージョンのドキュメントへのリンクはリポジトリのReleasesページに貼ってある

まだできないこと（作っていないもの）

使用するスタイル（CSS）を自分で設定できるようにする

優先決定ボタンと優先キャンセルボタンにクラスを生やして、色も変える

入力フォームで受け付ける文字列にフィルターをかける

ボタンの幅をでかくする

リスト形式での表示

使い方

アラートの表示例

まず最初に、必要な関数や定数をインポートする

インポートのやり方は、後述の言語ごとの説明に記載されている

code:sample.js

import { scrapboxAlert, buildInAlertModes } from "<手順1のソースコードのURL>";

code:sample.js

const answer = await scrapboxAlert(

buildInAlertModes.<モード種別>,

"タイトル",

"説明文",

"入力フォームにデフォルトで記述されている文字列",

)

組み込みでのモード種別の一覧

table:modes

モード種別 表示されるボタン

OK OK

OK_CANCEL OK、キャンセル

YES_NO はい、いいえ

YES_NO_CANCEL はい、いいえ、キャンセル

ENTER 決定

どのボタンを取得したかは、文字列で受け取ることができる

code:sample.js

console.log(answer.button)

以下はボタンに対応した文字列の例

最新の仕様に対応していないこともあるが、了承して欲しい

table:buttons

ボタン種別 表示文字 値

OK OK "OK"

CANCEL キャンセル "CANCEL"

YES はい "YES"

NO いいえ "NO"

ENTER 決定 "ENTER"

入力フォームが表示されていた場合、何を入力されたかを受け取ることができる

code:sample.js

console.log(answer.inputValue)

JavaScriptから使用する場合

1. 以下のリンクから最新版のソースコードを入手し、自分のプロジェクトに置く

2. 自分のUserScriptから1のソースコードをimportして、実行する

以下は実行例

code:script.js

import { scrapboxAlert, buildInAlertModes } from "<手順1のソースコードのURL>";

const answer = await scrapboxAlert(

buildInAlertModes.ENTER,

"タイトル",

"詳細文DAYO\n2行目DAZO",

"入力してね！",

);

TypeScriptから使用する場合

1. TypeScriptでUserScriptを書く

code:script.ts

/// <reference no-default-lib="true" />

/// <reference lib="es2022" />

/// <reference lib="dom" />

const answer = await scrapboxAlert(

buildInAlertModes.ENTER,

"タイトル",

"詳細文DAYO\n2行目DAZO",

"入力してね！",

);

バージョン一覧

以下を参照

最新版をexportしたmod.ts

code:mod.ts

古いバージョン

最初はScrapbox上で管理しようとしたけれど、やっぱり面倒が大きかったのでGitHubに移すことにした

最新バージョンはGitHubにしか無い