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

数多くの名誉ある○○メーカー 前に作ったポプテピピックの帯をカスタマイズできるようにした。 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 吹き出しの位置とか結構適当。 色々他にも応用できそうな気がする。

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

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

円状に並べた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は、そのままだと配列にしか使えないよう(後できちんと調べる)

javascriptの関数処理計測

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

vue.jsによるカルーセル

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

プログラムはこうして作られる

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

我々はこの筆跡を知っている!

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

Get back the future

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

vue.jsでStoreパターンを使用した時のv-model代用設定

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

Vue.jsによるデータ絞り込み

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…

Vue.jsの何が嬉しいのか?

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

2016年オリックス・バファローズの勝率とポンタの歩み

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

高校野球の優勝回数を県別にまとめてみた

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

vue.jsによる絞り込み

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

Spring man

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

Active Recordの関連付け

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

Cloud9にImageMagickをインストールする

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

Three.js

機能参加したThree.js入門者向けハンズオンでいじったものの残骸。Three.js触りだけだったけれど、もう少し勉強して思う通りのものが作れるようになれば楽しいかと思う。codepen.io

rails tutorial 1周した

転職してからrailsアプリのフロント作業がメインの仕事になった。 railsの知識はない前提で入社はしたものの、知らないままでは仕事の範囲が狭いままになってしまうので、良いと評判のrails tutorialをやっている。 1/23(月) rails tutorial 1週目終わり。…

只今第10章 Ruby on Rails チュートリアル:実例を使って Rails を学ぼう Railsは、form_for(@user)を使用してフォームを構成すると、@user.new_record?がtrueのときにはPOSTを、falseのときにはPATCHを使用します。 rails賢い。

JSON serverとダミーJSONの作成方法

サーバーサイドのAPI実装がまだできていない場合に使用できる。 www.webprofessional.jp

route.rbのnamespaceとmoduleととscopeの違い

namespace URL、controller格納フォルダ共、指定のパスになる。 module controllerの格納フォルダだけ、指定パスになる。 scope URLだけ、指定のパスになる。 参考 qiita.com

vue.js component

gihyo.jp上記の「フルーツの名前をリストするコンポーネント」を、記載されているコードを 元に作成してもエラーになる。(vueのバージョン1系でも2系でも駄目) どうにもスッキリしないので動くように直した。

rails tutorialメモ

8.1.1 Sessionコントローラ http://railstutorial.jp/chapters/log_in_log_out?version=4.2#sec-sessions_controllert ログインフォーム newアクションで処理 createアクションにPOSTリクエストを送信→ログイン destroyアクションにDELETEリクエストを送信→…