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