フロントエンド

【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か?セッションか?

たとえば商品の購入や、お店の予約など、入力→確認→完了という遷移をさせたい場面は多いと思います。確認画面には「入力画面に戻る」と「送信する」の2つの遷移が必要ですが、実現するためには入力値を送信まで保存しておかなければならないという点が難...
WEBノウハウ

【Googleアナリティクス】UserIDを設定して会員の動向を見る(2020年版:タグマネージャ利用)

ログインや会員という概念をもつWEBサービスなら絶対に導入したい、GoogleアナリティクスのユーザID機能。WEBサービス側で持っている会員IDをGoogleアナリティクスに送信することで、会員の動向が見れるようになります。 当記...
フロントエンド

CSSセレクタを活用してDOM操作をもっと快適にする

jQueryでDOM操作をするときに知っていると快適になるCSSセレクタ8選。論理和、論理積、子孫セレクタ、子セレクタ、属性セレクタ、N番目系(first-child、last-child、nth-of-type)の8つのCSSセレクタを紹介。
バックエンド

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=”hoge”]が動かない?

久しぶりの投稿です。今回は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や開発者ツールにも少しは慣れてきて、問題があっても自分で解決できるようになってきました。しかし、最近「謎の余白」でハマった事件があり、ご紹介したいと思います。 ...
フロントエンド

【HTML】マークアップ手順を新人コーダーが実務ベースで解説

WEB制作会社に入社して5か月のド新人HTMLコーダーです。最初は保守で小さなマークアップからやらせてもらい、少しずつレベルアップし、先日ついに新規案件のマークアップを担当させて頂きました。ティザーサイト(comming soon的なサイ...
タイトルとURLをコピーしました