HTML5 inputのrange属性
HTML5のinputタグ、range属性を触る機会があったのでメモ
素の状態
See the Pen input range type by tamoriinu (@yokoyama) on CodePen.
CSSデザインを当てたもの
See the Pen input range type by tamoriinu (@yokoyama) on CodePen.
参考: How To Create Range Sliders
Vue.jsを使ってSVG画像と同期
See the Pen input range type with vue.js by tamoriinu (@yokoyama) on CodePen.
参考:
基礎から学ぶ Vue.js
Rubyのメソッド探索
Rubyがメソッドを探索する流れについて、色々な本やWebサイトをあたってみた。
www.shoeisha.co.jp
最初に読んだのがこの本だったと思う。
第2章 クラス、オブジェクト、モジュール 項目6 Rubyが継承階層をどのように組み立てるかを頭に入れよう がメソッド探索に関わる継承階層について説明している所だが、いまいち頭にはいってこなかった。ただ以下の本、サイトを見てから再読すると違うと思う。言っている内容は同じなのだから当然だが、イメージがしやすくなる。
www.oreilly.co.jp
2章 月曜日：オブジェクトモデル でメソッド探索に関わる説明をしている。くだけた感じでわかりやすく説明してくれる。図解も何度も行われているので非常に理解しやすい。
gihyo.jp
Ruby技術者認定試験の対策で買ったが、この本の 第4章 オブジェクト指向 の説明がかなりわかりやすかった。
at-grandpa.hatenablog.jp ここの説明が一番全体を網羅している。個人的には一番わかりやすく腑に落ちた。
本田さんのFizzBuzz
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
【ポプテピピック】数多くの名誉ある○○メーカー
前に作ったポプテピピックの帯をカスタマイズできるようにした。
デフォルトでは某漫画家そっくりのフリー素材の方の画像になっているが、「画像を選択」ボタンで変更可能。 名誉あることを変更・追加（最大8個）することができる。 「画面キャプチャ生成」ボタンを押すと、カスタマイズした帯の画像を生成・ダウンロードできる。
試しに自分でいくつか作ってみた。
ほぼデフォルト状態の某漫画家風の男性（実際に受賞したとは言っていない）
履歴書の帯（？）につければ効果大（資格を持っているとは言っていない）
「画像キャプチャ生成」ボタンでのキャプチャだと、retina対応PCでは画像が少しぼやける。なので上の画像は普通にPCのキャプチャ機能で取得した。
ポプテピピック「数々の名誉ある賞」の載った帯の再現
ちょっと前に話題になった、ポプテピピックの「数々の名誉ある賞」の載った帯をhtmlにした。 これを元にちょっと遊べるものを作る予定。
See the Pen 【重要】数多くの名誉ある賞 by tamoriinu (@yokoyama) on CodePen.
元ネタ omoganews.com
