都宮メトロポリス

DMEDHの文明別規制リストを作った話

miyakoa2.hatenablog.com

2016年6月21日

ブラジルの試合を待ちながらTwitterを眺めていた時のこと f:id:miyakoa2:20180627135101p:plain

すげぇ...
普段の小さい不便に気付ける人に僕もなりたいものです。

サッと探した感じ類似品は見当たらなかったので作ることにしました。
その時に目に留まったのがこのブログ。
ブログ上に実現できたら誰でもどの端末でも使えるなー
HTMLで条件分岐できたらもう作れるなー
とか考えていました。

何はともあれ、検索...検索...

どうやらCSSとHTMLで作られたページをJavaScriptで書き替えるらしい

f:id:miyakoa2:20180629000527j:plain

だがしかし7巻

CSS:デザインを決める
HTML:内容を決める
JavaScript:ユーザーの動作による部分を作る
図にするとこんな感じ f:id:miyakoa2:20180629013414p:plain 今、僕がやりたいことは
1. 押されたら点灯するボタンを設置する
2. 押されたボタンの条件に合うカードを表示する
この2つだけ。

1.押されたらボタンを点灯させる

始めはHTMLのボタンが押された時にJavaScriptCSSを弄りボタンのデザインを変更させようと考えていました。しかし、JavaScriptCSSに触ることは基本的に出来ないそうです。

色々調べた結果、
予め押される前と後のボタンのデザインをCSSに書いておき、HTML上のボタンのIDをJavaScriptで書き換える方法を採用することにしました。 難しそうなので避けましたが、ラジオボタンのデザインを弄る方が一般的みたいです。

2.押されたボタンの条件に会うカードを表示する

これには苦戦しませんでした。
まず、規制カードリストのデータを適当に作ります。
f:id:miyakoa2:20180630003756p:plain
こんな感じ。 後はこのリストの上から1枚ずつ確認して条件に合うカードを記事に表示させるようにするだけです。

最後に

もうちょっとJavaScriptで遊びたいので、
「こんなツール欲しいよ!」をお待ちしております。


2016年7月29日追記
リスト参考元DMEDHのルール,規制カードリスト | DM:Akashic Recordに規制リストのリンクを掲載していただきました。