[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
欲しい、とは書いたが切実だったのでとりあえず試作した。相変わらず jQuery でごりごり DOM 操作するスタイルだけれども。
const replaceStrings = (strs, dom=$('body')) => {
const regexps = strs.map((str)=>{return {
regexp: new RegExp(str, 'gm'),
replaced: `<span style="color:black;background-color:black;">${'█'.repeat(str.length)}</span>`
}});
dom.children().each((i, d) => {
const $target = $(d);
let html = $target.html();
regexps.forEach((re)=>{
html = html.replace(re.regexp, re.replaced);
});
$target.html(html);
});
};
試しに ここ とかで開発者コンソールから上述のコードを入れて関数定義をした後、 replaceStrings(['FH', 'GM']); とかやるとちゃんと黒塗りされる。
ただ、これだと要素名やクラス名とかも巻き込んで変換してしまうのでちょっとどうかなぁ……
色々あって最近は Discord をよく触る。こいつ、更新が入るとポップアップで「こんな更新が入ったよ」と告知してくれるかわいいやつだ。これが気に入ったのでこれをサクッと導入するための何かを書いてみた。
<head>
<link rel="stylesheet" href="https://shunshun94.github.io/shared/jquery/io/github/shunshun94/history/updateInfo.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://shunshun94.github.io/shared/jquery/io/github/shunshun94/history/UpdateInfo.js"></script>
</head>
<body>
<!-- 中略 -->
<script>
new io.github.shunshun94.UpdateInfo([
{
date: new Date('2018/12/25'),
body: ['ひよこ', 'ひつじ']
}, {
date: new Date('2018/12/8'),
body: ['こいぬ', 'こねこ']
}
], 'sample-update-info-key');
</script>
</body>
これは new io.github.shunshun94.UpdateInfo の第一引数に履歴情報を与えて使う。履歴情報は日付情報と更新内容の配列の組からなる配列である。
アプリは第二引数の文字列をキーとして localStorage を参照しに行く。ここには最後にこのアプリを使って取得した更新情報の日付が格納されている。もしもこの日付よりも新しい更新情報があれば、日付より新しい更新情報を全て表示する。そのうえで、取得した更新情報のうち最大の日付のものに localStorage を更新する。
つまり、ユーザは「まだ見ていない更新情報」だけ受け取ることができるようになっている。
数字を与えると3ケタごとにコンマ区切りにしてくれる関数を私用で必要となり書いた。以下のような感じで使える。
<script src='https://shunshun94.github.io/shared/jquery/com/hiyoko/util/v2/utils.js'></script>
com.hiyoko.util.insertCommaToNum(5000); // 5,000
com.hiyoko.util.insertCommaToNum(-5000); // -5,000
com.hiyoko.util.insertCommaToNum(-500); // -500
com.hiyoko.util.insertCommaToNum(5000.1234567); // 5,000.123,456,7
com.hiyoko.util.insertCommaToNum(5000, 'P'); // 5P000
com.hiyoko.util.insertCommaToNum(5000.1234567, 'P', 'D'); // 5P000D123P456P7
com.hiyoko.util.insertCommaToNum('abcdefghijk'); // ab,cde,fgh,ijk
第一引数に入れた数字をコンマ区切りにする。第二引数に文字列を与えるとコンマの限りにそちらで区切ってくれる。第三引数に文字列を与えると、小数点としてのピリオドの代わりにそちらを小数点として使う。フランスではコンマとピリオドの役割が逆だと聞いたことがあったのでついでに機能としてつけてみた。
ただ、日本人が 3 ケタごとで区切る理由が正直あまり良く分かっていない。英語圏ならわかるのだが、日本人なら 4 ケタごとのほうが分かりやすいのでは……？
（雛´-`）.｡oO（Discord 上でどどんとふのように各々が作ったオリジナルのランダム表を振れるようにするツールを書いてみた）https://t.co/LQSokR0beN
— しゅんしゅんひよこ (@Shunshun94) November 2, 2018
BCDice のダイスボットを使える機能ではなく、各自が用意したランダム表をサクッと準備して振る機能を提供する何かを作った。ランダムエネミー表とかランダムネーミング表とかランダムイベント表とかに便利。ちょっと変わった使い方だと雑談時の話題決定表とかにも使えるかも。
Vue.js でカスタムイベントを受け取るにはコンポーネントにイベントをバインドしなきゃいけなかった、という話。
<div id="list" v-on:item-clicked-event="apply">
<p>{{ clickedTarget }}</p>
<ul>
<list-item v-for="targetItem in targetList" :target="targetItem" :key="targetItem.id"></list-item>
</ul>
</div>
const list_item = Vue.component('list-item', {
props: ['target'],
template: `<li v-on:click="fireClickedEvent">{{target.text}}</li>`,
methods: {
fireClickedEvent: function(){ this.$emit('item-clicked-event', this.target.text);}
}
});
const myList = new Vue({
el: '#list',
data: {
clickedTarget: 'ひよこ',
targetList: [
{id:0, text:'ひよこ'},
{id:1, text:'ひつじ'},
{id:2, text:'こねこ'}
]
},
methods: {
apply: function(name) { this.clickedTarget = name; }
}
});
<div id="list">
<p>{{ clickedTarget }}</p>
<ul>
<list-item v-on:item-clicked-event="apply" v-for="targetItem in targetList" :target="targetItem" :key="targetItem.id"></list-item>
</ul>
</div>
JavaScript 側に変更はない。v-on:item-clicked-event="apply"がどこに書かれているのかに注目していただきたい。どこに v-on するのかって話はあまり見なかったけどこれは割と常識なのだろうか。でも、コンポーネントが発火したのだからコンポーネントに書いた方が分かりやすくはあるよね。