ココフォリアのClipboard APIとキャラクターシートへの適用
ブラウザ上で『COCのキャラクターシートを作成できるサービス』の選択肢は、今や複数ある。
セッションの主催をすれば、プレイヤーから提出されるキャラクターシートのUIは各人で異なる、ということも平気で起こるようになり、それならば自分も好きに作るかと思い立った。
以下はその過程の一端である、ココフォリアのAPI利用とそれを自作のキャラクターシートに適当するまでの備忘録になる。
Clipboard APIについて
Clipboard APIとは、クリップボードに関わるコマンドをユーザーと共有する仕組み。
ココフォリアでは、2年ほど前にバージョン1.19.0が公開されている。
このClipboard APIを活用すると、『ココフォリアの部屋にコピーペーストするだけでキャラクターコマの設定を完了する』操作を行うことができる。既存のキャラクターシート作成ツールによくあるやつ。
ひとまず、試しに既存のキャラクターシート作成ツールにてキャラクター情報を出力するボタンを選択した後、テキストファイルにでもペーストすれば全容が確認できる。
おおよそこんな感じ。
{"kind":"character","data":{"name":"志野 灰里","initiative":13,"memo":"PC：しの かいり\r\nPL：もとす","externalUrl":"キャラシのURL","color":"#a9a9a9","invisible":true,"commands":"1d100<={SAN} 【SAN値チェック】\r\nCCB<=75 【アイデア】\r\nCCB<=45 【幸運】\r\nCCB<=50 【知識】\r\nCCB<=40 【キック】\r\nCCB<=70 【こぶし(パンチ)】\r\nCCB<=36 【応急手当】\r\nCCB<=30 【隠れる】\r\nCCB<=26 【聞き耳】\r\nCCB<=30 【忍び歩き】\r\nCCB<=85 【図書館】\r\nCCB<=85 【目星】\r\nCCB<=60 【製作[レポート]】\r\nCCB<=76 【説得】\r\nCCB<=22 【クトゥルフ神話】\r\nCCB<=45 【経理】\r\nCCB<=51 【コンピューター】","status":[{"label":"HP","value":13,"max":13},{"label":"MP","value":9,"max":9},{"label":"SAN","value":36,"max":36}]}}一見すると読む気がすり減るかもしれないが、改行がないゆえの圧迫感が原因の大部分だろう。
ちなみに、見やすさを優先して改行を入れるとココフォリアが受け付けない。
以下は各内容の解説。
○ name
キャラクターの名前が入る。
キャラクターコマの真下に出たり、ルームチャットに表示されるやつ。
"name":"志野 灰里"○ initiative
名前のまま、イニシアティブが入る。
COCでのDEX。
"initiative":13○ memo
キャラクターメモの内容を記述できる。
キャラクターコマにカーソルを当てると表示されるやつ。
以下の例では改行をするために\r\nを使用している。
"memo":"PC：しの かいり\r\nPL：もとす"○ externalUrl
httpから始まるURLを記入する想定の箇所。
キャラクターシートのリンクを入れるのが一般的。
"externalUrl":"キャラシのURL"○ color
ルームチャットで表示されるキャラクター名の色を指定している。
"color":"#a9a9a9"○ secret / invisible / hideStatus
左から順に、『ステータス』『発言時』『盤面』でのキャラクターの表示非表示を操作する。
記述しなければデフォルトで表示されるので、非表示にしたい場合だけ『true』を入力する。
筆者の場合は、ダイスを降る度に画面に立ち絵が表示されるのが苦手なため、『発言時』のみ非表示としている。
"invisible":true○ commands
チャットパレットに表示される、ダイスロール等のコマンドを入力する。
改行コードが多々入り込むため、若干見づらい。
"commands":"1d100<={SAN} 【SAN値チェック】\r\nCCB<=85 【目星】\r\nCCB<=76 【説得】\r\nCCB<=51 【コンピューター】"○ status
『ステータス』に入る内容。
以下はCOCゆえ、HP、MP、SANを設定している。
labelがそのステータスの名称、valueが現在値、maxが最大値。
"status":[{"label":"HP","value":13,"max":13},{"label":"MP","value":9,"max":9},{"label":"SAN","value":36,"max":36}]
他にもあるが、自分で使っているのは以上になる。
他を操作したい人はココフォリアの公開ページで内容を確認し、『boolean』にはtrueまたはfalseを入力、『string』には文字列を入力、『number』には数字を入力すれば上手いこと動くだろう。
...という内容をクリップボードにコピーし、ココフォリアのルームに貼り付ければコマが生成される。
しかしさて、これをワンクリックで寄越してくれるように実装しなければいけない。
JavaScriptでの操作
先のことを実現するため、『クリックしたら任意の内容をクリップボードにコピーするアクション』を実装する。
キャラクターによって変わる箇所は、変数に置き換えて入力を行う。
以下ではこれらを『copyAll』という変数に詰め込んだため、『copyAll』をクリップボードに渡すことができれば完了となる。
var copyAll = '{"kind":"character","data":{"name":"' + copyName1.textContent + '","initiative":' + copyDex.textContent + ',"memo":"' + addMemo1 + kaigyo + addMemo2 + '","externalUrl":"' + copyUrl + '","color":"' + copyColor.textContent + '","invisible":true,"commands":"1d100<={SAN} 【SAN値チェック】' + skillAll + '","status":[{"label":"HP","value":' + copyHp.textContent + ',"max":' + copyHp.textContent + '},{"label":"MP","value":' + copyMp.textContent + ',"max":' + copyMp.textContent + '},{"label":"SAN","value":' + copySan.textContent + ',"max":' + copySan.textContent + '}]}}';キャラクターコマを出力させたいボタンをクリックした時、以下の動作をさせる。
navigator.clipboard.writeText(copyAll);
alert("できたよ");
！？
(開発環境：Firefox)
どうやらChromeのセキュリティに引っかかっているらしい。
というわけで以下に変更したところ、Chromeでも問題なく動作するようになった。
var textBox = document.createElement("textarea");
textBox.setAttribute("id", "target");
textBox.setAttribute("type", "hidden");
textBox.textContent = copyAll;
document.body.appendChild(textBox);
textBox.select();
document.execCommand('copy');
document.body.removeChild(textBox);
alert("できたよ");
これ動かないよ
(使用環境：Chrome)