フロントエンド スクロール連動でGIFのようなコマ送りアニメーション【GSAP ScrollTrigger】
スクロールするとキャラクターが動きます。こちらの方が見やすいかも。
See the Pen
GSAP scrollTrigger animation chimmy by ayuko (@masyu)
on CodeP...
フロントエンド 
フロントエンド 【CSS】aspect-ratioとgapでレスポンシブ対応のグリッドレイアウト
新しめなCSSプロパティのaspect-ratioとgapを使って、幅を変えても常に正方形を維持し、アイテムとガターの比率も維持するグリッドレイアウトを作りました。
See the Pen
ガターが均一なカードレイア...
バックエンド 【Rails】ラジオボタンのヘルパーradio_button、collection_radio_buttons、radio_button_tag
Railsでラジオボタンを作るとき、似たようなヘルパーがたくさんあってどれが最適かいつもわからなくなってしまうため、それぞれの特徴と用途をまとめます。
ラジオボタンのヘルパーは３つ
radio_buttoncollection...
バックエンド 【rspec】FactoryBotのbelongs_to、has_many実装方法
サンプルコードとして、ProjectモデルとUserモデルを例にします。モデルの実装は以下です。
class Project < ApplicationRecord
has_many :users
end
class ...
WEBノウハウ 【CircleCI×Rails】ローカルでrspec実行しながらエラーを潰す過程
年代物のRails案件（６年目！）に初めてrspecを導入してCI回すという過酷なプロジェクトの過程です。
現状とゴール
６年目のRails案件だけど活発に機能追加していてコードが複雑化、肥大化している怖くてRailsやR...
フロントエンド 【Vue.js】ページネーションしたらクエリパラメータをつけて同ページに再アクセス可能にする
ページ遷移を伴わない、jsで作成した一覧で、ページ送りしたときクエリパラメータ?page=nをつけたほうが良いというお話です。ブックマークなどから再アクセス可能で便利ですし、リロードやブラウザバックで１ページ目にリセットされてしまうような...
フロントエンド 【Luminous.js】軽量、jQuery非依存の画像拡大javaScriptプラグイン
サムネイルをクリックすると画像が拡大表示されるjsプラグイン【Luminous.js】の紹介です。画像ポップアップといえば、以下３つが有名なのではないでしょうか。
Lightbox2Fancybox - Fancy jQuery l...
WEBノウハウ githubで複数アカウントを管理しながら操作はSouceTreeでやりたい
１台のPCで、githubの仕事用とプライベート用のふたつのアカウントを使い分けるという記事はたくさんありますが、gitの操作はSouceTreeでやりたかったのでうまくいった方法をまとめます。
私の環境
作業マシンMacBo...
未分類 Visual Studio CodeでReact.js開発用の設定をする
普段お仕事で使っているエディターは、RubyMineやPhpStomeといった有償で高機能なIDE（もちろん会社提供）なのですが、趣味でプログラミングするときはほとんどjsしか触らないので、無料・軽量・ある程度高機能なものを探していました...
フロントエンド Create React Appで作成したアプリをgithubで公開する【npm gh-pages】
React.jsを学習してそのアウトプットとして簡単なWEBアプリを作ってサクッと公開したい。まずReactチュートリアルをやってみました。create-react-appというコマンドを利用してとても簡単にローカル環境ができて感動しまし...
フロントエンド 【CSS】ガターが均一なカードレイアウト（レスポンシブ対応）実装例
こちらの記事は古いです。もっと良い方法を以下で紹介しています。
display: flexを利用してレスポンシブ対応のカードレイアウトを作りました。アイテムの横幅、縦幅、アイテム間の余白（ガター）がいずれも相対指定の...
フロントエンド jQuery UIのAutocompleteで入力補完（サジェスト）を実装
入力値にマッチした項目が表示され、入力候補を選択するとテキストフィールドに反映される入力補完（サジェスト）を実装する方法をご紹介します。jsライブラリであるjQuery UIのAutocompleteを利用します。
See t...
フロントエンド 【javaScript】for…in、for…of、forEachの違いと用途
ループの方法が多すぎるし、それぞれちょっとずつ違いがあって全然覚えられないためまとめておきます。
for...in
・列挙可能であればなんでもループできる・順不同であることに注意・オブジェクトのループ専用として利用した方が良い...
フロントエンド javaScriptのオブジェクト指向（ES6）
ES6のオブジェクト指向の基礎的なところをまとめました。
クラスの定義、インスタンスの生成
Norimonoクラスを定義します。Norimonoクラスは定員を表すcapacityプロパティを持っています。
class N...
フロントエンド javaScriptのオブジェクト指向（ES6より前の旧構文）
javaScriptのクラスの構文はES6から大きく変わって便利になりました。ES6の構文だけ覚えたいところですが、旧構文から覚えることでjavaScriptならではのプロトタイプベースのオブジェクト指向の理解が深まります。本記事ではES...
バックエンド 【Ruby on Rails】確認画面を作る方法！hiddenか？セッションか？
たとえば商品の購入や、お店の予約など、入力→確認→完了という遷移をさせたい場面は多いと思います。確認画面には「入力画面に戻る」と「送信する」の２つの遷移が必要ですが、実現するためには入力値を送信まで保存しておかなければならないという点が難...
WEBノウハウ 【Googleアナリティクス】UserIDを設定して会員の動向を見る（2020年版：タグマネージャ利用）
ログインや会員という概念をもつWEBサービスなら絶対に導入したい、GoogleアナリティクスのユーザID機能。WEBサービス側で持っている会員IDをGoogleアナリティクスに送信することで、会員の動向が見れるようになります。
当記...
バックエンド Railsを起動するとLibrary not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib (LoadError)
bundle installは通るのですが、Railsの起動が上記のエラーでできなくなりました。mysql2のgemがopenssl1.0.0を使用するようですが、インストールされているのはopenssl1.1です。opensslのバージ...
バックエンド 【Rails】bundle installするとlibv8というgemでコケる
Railsプロジェクトでbundle installすると以下のエラーになりました。どうやらtherubyracerというgemが依存しているlibv8でエラーが起きているようです。
Fetching libv8 3.16.14.1...
バックエンド Railsを起動すると`const_missing’: library not found for class Digest::SHA1のエラー
タイトルのエラーにより突然Railsが起動できなくなりました。調べると、「Rubyが壊れているから再インストールする」という解決法しかヒットしない…。なんか嫌だなぁと思いつつ、これしか解決法がないので再インストールしました。
rbe...
バックエンド 【Ruby on Rails】検索画面の入力チェックをActive Modelで実装する
RailsのActiveModelのバリデーションってすごく便利ですが、DBに紐付かないモデルでもバリデーションが可能です。当記事では、検索画面でURLパラメータのバリデーションを行い、400 bat request画面を表示する方法を紹...
フロントエンド parsley.jsで独自バリデーションを作る
フォームのフロントの入力チェックに欠かせないのがparsley.jsです。ビルドインのバリデーションだけだと基本的なものしかないので、独自バリデーションの作り方を記載しています。
バージョン
parsley.js 2.3.13...
フロントエンド jQueryでinputのvalue属性セレクタが効かない
久しぶりの投稿です。今回はJavaScriptのミニネタ。
明細のある入力フォームを作っていて、明細部分の商品名が重複していたらエラーとなるように、jsでバリデーションをつけたかったのです。目指すのは以下の画像のような感じ。
...
WEBノウハウ BitnamiでWordPressローカル環境構築【mac版】
macOSにBitnamiでWordPressに必要なツール郡（Linux、PHP、MySQL、apache、WordPress本体）を一括でインストールしてみました。
WordPressのローカル環境を作った理由
本番環境...
バックエンド 【Ruby on Rails】javaScriptのclickイベントが発火しないのはturbolinksのせいだった
「商品カートに追加する」ボタンがときどき無反応になる謎現象が起きました。発生条件は、キャッシュをクリアしたあと問題のページに遷移した直後に発生。2回目以降のアクセス時には発生しない。何やらコンソールエラーも出ていました。
Uncau...
バックエンド 【Ruby】[__NSPlaceholderDictionary initialize]〜エラー
Railsの案件の開発中にこちらのエラーが発生。
objc: + may have been in progress in another thread when fork() was called.
現象としては画像のアップ...
フロントエンド javaScriptでiOS風の電卓を作りました
javaScriptの勉強中です。何か作りながらのほうが楽しいので、電卓を作ってみました。 iOSやmacに標準装備されている電卓風にしてみました。
ただ、この電卓、いくつか動かない機能が……(^^;) +/-や小数点はちょっと面倒...
フロントエンド 【CSS】謎の余白の正体はmarginでもpaddingでもないアレでした
WEB制作会社に入社して6か月のド新人HTMLコーダーです。最近はCSSや開発者ツールにも少しは慣れてきて、問題があっても自分で解決できるようになってきました。しかし、最近「謎の余白」でハマった事件があり、ご紹介したいと思います。
...