URLをパースしてくれるライブラリ

UdemyのVue.js講座を見ていたら以下のライブラリが便利そうだったのでメモ。

medialize.github.io

thebaker.hatenablog.com

Ruby で順列を求める

A, B, C, D, Eの5人から4人を選んで一列に並べる場合の並び方はいくつ?
いわゆる順列の問題。Rubyにはpermutationメソッドがあるので、これを使って 簡単に求められる。

https://ref.xaio.jp/ruby/classes/array/permutation

# 5人から4人を選んで一列に並べる並べ方
member = ['A', 'B', 'C', 'D', 'E']
p member.permutation(4).count #120

A, B, C, D, Eの5人から4人を選んで一列に並べる。ただし、Aは2番目に、 Bは4番目になれない。このときの並べ方は何通り?

# A, B, C, D, Eの5人から4人を選んで一列に並べる。ただし、Aは2番目に、
# Bは4番目になれない。このときの並べ方
member = ['A', 'B', 'C', 'D', 'E']
count = 0

member.permutation(4) do |arr|
    count += 1 unless arr[1] == 'A' || arr[3] == 'B'
end

p count #78

permutationの実装はこちら https://apidock.com/ruby/Array/permutation

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

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

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

tamoriinu-3.hatenablog.com

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

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

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

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

f:id:tamoriinu_3:20180430150751p:plain ゲームソフトの帯に(さりげなく本当に受賞しているものを1つ入れてある)
※画像はフリー素材なので問題ない http://sawaki.heteml.jp/elshaddai_crim/elshaddai_crim/freedeta.html

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

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

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

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

元ネタ omoganews.com

山手線を描く

See the Pen 山手線 by tamoriinu (@yokoyama) on CodePen.

この間見つけた以下のsass mixinが便利なので、山手線の沿線図を描いてみた。
Placing Items on a Circle | CSS-Tricks

吹き出しの位置とか結構適当。
色々他にも応用できそうな気がする。

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