Rubyのメソッド数を調べる方法について、以下のサイトでよくまとまっていたのでメモ。 Array含めすべてのクラスはClassクラスのインスタンスであることを踏まえて、methods、instance_methodsを考えると 一貫性が見えてくる。 Rubyのメソッドを数えましょう♫…

Animate.css CSSアニメーションのフレームワーク Animate.css の一通りの機能を試せるものを作った。 上記のトップページで同じことができるが、セレクトボックスから機能を選ぶのが面倒だったので ラジオボタンにした。 See the Pen move box(with animate.…

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 …

Rubyがメソッドを探索する流れについて、色々な本やWebサイトをあたってみた。 www.shoeisha.co.jp 最初に読んだのがこの本だったと思う。 第2章 クラス、オブジェクト、モジュール 項目6 Rubyが継承階層をどのように組み立てるかを頭に入れよう がメソッド…

alfalfalfa.com 本田さんプログラミングの勉強しているってことは、FizzBuzz書いたりしているのかな、 でも本田さんならこんなFizzBuzz書いてるんじゃないかなと妄想

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

A, B, C, D, Eの5人から4人を選んで一列に並べる場合の並び方はいくつ？ いわゆる順列の問題。Rubyにはpermutationメソッドがあるので、これを使って 簡単に求められる。 https://ref.xaio.jp/ruby/classes/array/permutation # 5人から4人を選んで一列に並…

数多くの名誉ある○○メーカー 前に作ったポプテピピックの帯をカスタマイズできるようにした。 tamoriinu-3.hatenablog.com デフォルトでは某漫画家そっくりのフリー素材の方の画像になっているが、「画像を選択」ボタンで変更可能。 名誉あることを変更・追…

ちょっと前に話題になった、ポプテピピックの「数々の名誉ある賞」の載った帯を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 吹き出しの位置とか結構適当。 色々他にも応用できそうな気がする。

github.com jp.vuejs.org タイトル通りでケバブケースかすべて小文字にする必要がある。 HTML attributes are case-insensitive だから。 なのでカスタムイベント以外のpropsに渡す値なども、ケバブケースにする。（ちょっと面倒臭い） 【動かない例】 jsfid…

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

JSでの数値の昇順・降順、アルファベット順のsortをまとめておいた。 ひらがなや漢字のsortはJSでやらないほうがよい気がする。 See the Pen javascript sort by tamoriinu (@yokoyama) on CodePen. 参考サイト goma.pw

これの中にあるフィルタリング機能の所を抽出したのが以下 備忘録としてやっていることをコメントしておいた。 lodashのincludesを使えばもっとシンプルに書ける。Nativeのincludesは、そのままだと配列にしか使えないよう（後できちんと調べる）

javascriptである関数の処理にかかる時間を計測するのに以下のサイトを参考にさせてもらった。 sbfl.net こちらの本にあったdivのappend計測を実装。 しかし、上記の本は2013年出版だが、jQuery中心の内容で改めてjs界隈の移り変わりの速さを実感した。

qiita.com 上記のカルーセルを少しだけ変更。前後で端まできたら一巡するようにした。 それだけ。 See the Pen vuejs_carousel2 by tamoriinu (@yokoyama) on CodePen.

Web上を探せばテトリスのソースコードやチュートリアルはいくらでもあるのだけれど、 この本はプログラミング自体を全く知らない前提でアルゴリズムも1から作り出していく、という意欲的な内容。 全くのプログラミング初心者だけでなく、普段プログラミング…

jojoex-2018.com 国立新美術館での荒木飛呂彦原画展 -冒険の波紋- ここにある荒木先生直筆のメッセージ。 独特の筆跡でもあるのだけれどどこか既視感があって、記憶をまさぐっていたら 3部で花京院が承太郎に渡したハンカチに書かれていた脅迫状の筆跡にそっ…

www.sankeibiz.jp 最近の日本製品の品質不正を踏まえてバック・トゥ・ザ・フューチャーの以下のシーンを御覧ください。 1955年のドク「故障するのも不思議じゃない。日本製だ」 1985年から来たマーティ「どういう意味？日本製は最高さ」 1986年の私「せや！…

v-model を使うとStoreを通さずにdataが変わってしまう。 Storeパターンの制約を守るために以下のように:valueを更新する必要がある。 See the Pen Storeパターンにおけるv-modelへの対処 by tamoriinu (@yokoyama) on CodePen.

Codegridの連載を元にちょっとだけ変えたもの。 複数選択するとandで絞り込むSee the Pen playerSelecter by tamoriinu (@yokoyama) on CodePen.

何処かで使う可能性がありそうなのでメモ lodashでそのもののメソッドがある See the Pen lodash chunk by tamoriinu (@yokoyama) on CodePen. 実装 github.com

こんなデータがあるとして、 [ { name: "筒香", bats: 5, hits: 3 }, { name: "ロペス", bats: 5, hits: 2 }, { name: "宮崎", bats: 5, hits: 4 }, { name: "筒香", bats: 4, hits: 2 }, { name: "ロペス", bats: 4, hits: 4 }, { name: "宮崎", bats: 4, h…

前職ではいわゆる静的なWebサイトを主に作成していたので基本jQueryで事足りていたのだが、Webアプリ制作会社に移ってからはプロジェクトにVue.jsが使われており、Vue.jsのレールに乗るような書き方をする必要が出てきた。 最初は完全にjQuery脳だったためVu…

去年から始まったオリックスとポンタのtwitterコラボ、好評につき本来一年だった契約が更新され、今年も続いている。 勝った時より負けたときの方がリアクションが面白いので有名。特に去年は借金26と、負けが込んだため、愉快なポンタを堪能できた。そこで2…

県別甲子園優勝回数 D3.jsで日本地図を描き、県別の優勝回数データと連携させビジュアライズしてみた。 こうしてみると優勝旗が白河の関を越えていないのがはっきりわかる。 （東北勢の優勝が条件なので北海道の優勝は入れないらしい） また開催地である兵庫…

See the Pen data filtering by vue.js by tamoriinu (@yokoyama) on CodePen.

rails使用中に何かとspringサーバーが重複して立ち上がることが多い。 springサーバーの確認と止める方法がrails tutorialにまとまっているのでメモ https://railstutorial.jp/chapters/static_pages?version=5.0#aside-processes

Active Recordの関連付けを理解するために、Railsガイドの以下のページを自分用にまとめた。 あくまで自分で理解するためのまとめなので関連付けを学びたい人は以下のページを見たほうがよいです。 https://railsguides.jp/association_basics.html Active R…

community.c9.io sudo apt-get updateしてから sudo apt-get install imagemagick