[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
（雛´-`）.｡ｏＯ（ステラナイツを Discord だけでプレイするツール、とりあえずゲームが一通りできるところまで作れたので公開しました。
— しゅんしゅんひよこ (@Shunshun94) July 7, 2019
エンブレイズ/エクリプス対応がまだ上手くできていない部分があるも、とりあえずセッションするのに問題はない感じか。）https://t.co/7Bs56P7a6w
（雛´-`）.｡ｏＯ（スクショを何枚か。
— しゅんしゅんひよこ (@Shunshun94) July 7, 2019
ブーケを高速で投擲する機能が実際どれくらいの威力を発揮するのかは未知数でちょっと怖いです） pic.twitter.com/D3BGOVVTRq
前に述べていたステラナイツ向けのツールにセッションを回すのに十分な機能が備わったと判断し、利用可能版として公開した。「キャラクターシートを用意すれば Discord のみでマップ管理もダイスロールも完結する」を目標とし作成した。なお、コードは例によって GitHub にて公開している（リポジトリ）。
残務としてダブルクリックしちゃうといっぱい判定が蹴られちゃう問題への対処と、OGP 画像が用意できていないことへの対処、エクリプス/エンブレイズのキャラクターシートへの対処も課題となる。
ステラナイツ向けツールで必要になったので。ついでに「」をさっと挿入する機能を作ったときの書き方も載せとく。実際に動かしているコード。 https://github.com/Shunshun94/StellarKnightsTools/blob/master/client/js/chat/commonChat.js
<textarea v-model="text" @keydown.enter="submit" @keydown.ctrl.219="insertParentheses"></textarea>
methods: {
insertParentheses: function(e) {
if(this.text.trim().length) {
this.text = `「${this.text}」`
} else {
this.text = '「」';
// 少し処理を遅延させないとカーソルの移動が DOM の再描画で上書きされてしまう
// 描画終わりそうな短い時間待った上でカーソルを動かす
setTimeout(()=>{
e.target.setSelectionRange(1,1);
}, 200);
}
},
submit: function(e) {
if(e.shiftKey) {
return;
}
// これで「Enter を叩くと改行が入る」というデフォルトの挙動をキャンセルする
e.preventDefault();
const text = this.text.trim();
this.text = '';
this.$emit(`chat-input-events-sendChat`, text);
}
}
（雛´-`）.｡ｏＯ（ステラナイツ向けのツール開発、始めました。Discord とルールブックがあればステラナイツできるぜ！をとりあえず目指してみる。
— しゅんしゅんひよこ (@Shunshun94) June 17, 2019
とりあえず現状の見た目とか。https://t.co/7Bs56P7a6w ） pic.twitter.com/FqsmtneyzJ
とりあえずリポジトリ切って開発を始めた。リポジトリ
今まで小物を除けば jQuery でごりごりつくってばかりだったが、今回は Vue で最初から最後まで作ってみようと思う。また、どどんとふにはとりあえず対応しない予定。Discord のみ対応。
キャラクターシート倉庫のデータに jsonp でアクセスするでも紹介したがキャラクターシート倉庫のキャラクターデータは外のアプリから利用できる。これをサクサクやるためのユーティリティを書いた。
このご時世に jQuery 使うのもなぁという話もあるので生 JavaScript である。
<script src="https://shunshun94.github.io/shared/other/io/github/shunshun94/trpg/characterSheetsMasashige/client.js"></script>
const client = new io.github.shunshun94.trpg.characterSheetsMasashige.client();
client.sendRequest('scenario', 'ahVzfmNoYXJhY3Rlci1zaGVldHMtbXByFgsSDUNoYXJhY3RlckRhdGEYlvL4Nww').then(console.log, console.error);
<input type="text" id="copyExec" />
// input の中身を全選択する
// jQuery が使えるなら $('#copyFrom').select(); でも OK
var input = document.getElementById('copyFrom');
input.focus();
input.setSelectionRange(0, input.value.length);
// 選択した範囲をクリップボードにコピー
document.execCommand('copy');
なお、input の中身を選択しないといけないので input の css に display:none; 等と設定していると上手く動かないので注意。ユーザに表示させたくない事情がある場合は position:absokute; top:-5000px; 等としてはるか彼方に飛ばしてしまうが吉。
execCommand は割と色々やれるようで、選択した範囲の文字を装飾したりできるようだ (MDN の解説)。ただし、上述の input が対象だとやれることは限られる。しかし contenteditable な HTML だとちょっと変わってくる。
<div contenteditable> ひよこ<br /> ひつじ<br /> こねこ </div> <hr/> <div> 編集対象外の HTML </div>
上述のような HTML を書いたうえで上の contenteditable な HTML の一部分を選択し document.execCommand('foreColor', null, 'red'); 等としてやるとその範囲のフォントを赤にできる。しかし、下部の contenteditable ではない HTML については不可能となっている。どんなことができるのかは MDN に解説が載ってたりする。背景色を変えたり、文字のそろえ方を変えたりできる。簡単なエディタを実装・提供したい場合には便利そう。