【ポプテピピック】数多くの名誉ある○○メーカー

数多くの名誉ある○○メーカー

前に作ったポプテピピックの帯をカスタマイズできるようにした。

tamoriinu-3.hatenablog.com

デフォルトでは某漫画家そっくりのフリー素材の方の画像になっているが、「画像を選択」ボタンで変更可能。 名誉あることを変更・追加(最大8個)することができる。 「画面キャプチャ生成」ボタンを押すと、カスタマイズした帯の画像を生成・ダウンロードできる。

試しに自分でいくつか作ってみた。

f:id:tamoriinu_3:20180430143052p:plain ほぼデフォルト状態の某漫画家風の男性(実際に受賞したとは言っていない)

f:id:tamoriinu_3:20180430145804p:plain 履歴書の帯(?)につければ効果大(資格を持っているとは言っていない)

「画像キャプチャ生成」ボタンでのキャプチャだと、retina対応PCでは画像が少しぼやける。なので上の画像は普通にPCのキャプチャ機能で取得した。

ポプテピピック「数々の名誉ある賞」の載った帯の再現

ちょっと前に話題になった、ポプテピピックの「数々の名誉ある賞」の載った帯をhtmlにした。 これを元にちょっと遊べるものを作る予定。

See the Pen 【重要】数多くの名誉ある賞 by tamoriinu (@yokoyama) on CodePen.

元ネタ omoganews.com

vue.jsのカスタムイベントの名前はキャメルケースでは動かない(例外あり)

github.com

jp.vuejs.org

タイトル通りでケバブケースかすべて小文字にする必要がある。
HTML attributes are case-insensitive だから。
なのでカスタムイベント以外のpropsに渡す値なども、ケバブケースにする。(ちょっと面倒臭い)

【動かない例】 jsfiddle.net

ただし、テンプレート文字列を使う場合は動く。

【動く例】 jsfiddle.net

テンプレート文字列 - JavaScript | MDN

円状に並べたdotが点滅するやつ

now loadingなどでよく使われるものをcssで作成。

See the Pen flashing circle by tamoriinu (@yokoyama) on CodePen.

以下参考

Bouncing loader

30 Seconds of CSS

要素をcircle状に並べるmixin(これは結構便利)

Placing Items on a Circle | CSS-Tricks

Javascriptでのsortまとめ

JSでの数値の昇順・降順、アルファベット順のsortをまとめておいた。 ひらがなや漢字のsortはJSでやらないほうがよい気がする。

See the Pen javascript sort by tamoriinu (@yokoyama) on CodePen.

参考サイト goma.pw

オブジェクト内の全プロパティ値にある文字列が含まれているかのチェック

これの中にあるフィルタリング機能の所を抽出したのが以下

備忘録としてやっていることをコメントしておいた。 lodashのincludesを使えばもっとシンプルに書ける。Nativeのincludesは、そのままだと配列にしか使えないよう(後できちんと調べる)