入力ダイアログを表示するUserScript
画面上にダイアログを表示するUserScript
window.alert()たwindow.prompt()だとScrapboxの通信まで止めてしまうので、その対策として実装した
好きなボタンの組み合わせを選べるようにした
単純にユーザーに対してメッセージを表示するのもできる
「はい」「いいえ」の選択肢を表示してユーザーに選ばせることもできる
ボタンに関しては自分で作ることもできる
テキスト入力フォームを表示して入力を促すこともできる
もし欲しい組み合わせやボタンが無ければ、自分で実装することも可能（上級者向け）
リンク
このドキュメントはmainブランチの内容を参照している
各バージョンのドキュメントへのリンクはリポジトリのReleasesページに貼ってある
まだできないこと（作っていないもの）
使用するスタイル（CSS）を自分で設定できるようにする
優先決定ボタンと優先キャンセルボタンにクラスを生やして、色も変える
入力フォームで受け付ける文字列にフィルターをかける
ボタンの幅をでかくする
リスト形式での表示
使い方
アラートの表示例
まず最初に、必要な関数や定数をインポートする
インポートのやり方は、後述の言語ごとの説明に記載されている
sample.jsimport { scrapboxAlert, buildInAlertModes } from "<手順1のソースコードのURL>";scrapboxAlert()を実行するとアラートが表示される
sample.jsconst answer = await scrapboxAlert(
buildInAlertModes.<モード種別>,
"タイトル",
"説明文",
"入力フォームにデフォルトで記述されている文字列",
)await(JavaScript)を記述することで、ユーザーがボタンを押してアラートが閉じるまで次の処理を遅らせることができる
組み込みでのモード種別の一覧
modes
| モード種別 | 表示されるボタン |
| OK | OK |
| OK_CANCEL | OK、キャンセル |
| YES_NO | はい、いいえ |
| YES_NO_CANCEL | はい、いいえ、キャンセル |
| ENTER | 決定 |
どのボタンを取得したかは、文字列で受け取ることができる
sample.jsconsole.log(answer.button)以下はボタンに対応した文字列の例
最新の仕様に対応していないこともあるが、了承して欲しい
buttons
| ボタン種別 | 表示文字 | 値 |
| OK | OK | "OK" |
| CANCEL | キャンセル | "CANCEL" |
| YES | はい | "YES" |
| NO | いいえ | "NO" |
| ENTER | 決定 | "ENTER" |
入力フォームが表示されていた場合、何を入力されたかを受け取ることができる
なお、入力フォーム自体が表示されていなかった場合は、取得しようとしても
undefined が返るsample.jsconsole.log(answer.inputValue)JavaScriptから使用する場合
1. 以下のリンクから最新版のソースコードを入手し、自分のプロジェクトに置く
2. 自分のUserScriptから1のソースコードをimportして、実行する
以下は実行例
script.jsimport { scrapboxAlert, buildInAlertModes } from "<手順1のソースコードのURL>";
const answer = await scrapboxAlert(
buildInAlertModes.ENTER,
"タイトル",
"詳細文DAYO\n2行目DAZO",
"入力してね！",
);
console.log(`scrapboxAlert: {button: ${answer.button}, inputValue: ${answer.inputValue}}`);TypeScriptから使用する場合
1. TypeScriptでUserScriptを書く
2. deno bundleかtakker/scrapbox-bundlerでJavaScript形式のソースコードに変換する
script.ts/// <reference no-default-lib="true" />
/// <reference lib="es2022" />
/// <reference lib="dom" />
import { scrapboxAlert, buildInAlertModes } from "https://scrapbox.io/api/code/Mijinko/入力ダイアログを表示するUserScript/mod.ts";
const answer = await scrapboxAlert(
buildInAlertModes.ENTER,
"タイトル",
"詳細文DAYO\n2行目DAZO",
"入力してね！",
);
console.log(`scrapboxAlert: {button: ${answer.button}, inputValue: ${answer.inputValue}}`);バージョン一覧
以下を参照
最新版をexportしたmod.ts
mod.tsexport * from "https://raw.githubusercontent.com/MijinkoSD/input-dialog-userscript/v1.0.1/scrapboxAlert.ts";古いバージョン
最初はScrapbox上で管理しようとしたけれど、やっぱり面倒が大きかったのでGitHubに移すことにした
最新バージョンはGitHubにしか無い