2020-07-01から1ヶ月間の記事一覧

【Vue.js】e.preventDefaultの書き方

Vue.jsで簡単にかけるってことがわかったので、備忘録です。 $("要素").on("イベント",function(e){ e.preventDefault(); }); 使いまくりですよね。 e.preventDefault();が不明な方は、簡単に言うとイベント発生を、意図的に阻止とか妨害したりするものです…

【Vue.js】v-forディレクティブ

はじめに v-forがなぜ機能するか、初見でよくわからなかった。 理由としては <ul id="example-1"> <li v-for="item in items" :key="item.message"> # ↑のclassかのように書かれてるのが個人的に癖がありすぎた。 {{ item.message }} </li> </ul> 勉強不足だとは思うが、" "に囲われる文でマッチさせるという発想がなかったです。 噛み砕…

【Vue.js】始めます。

初めに つい最近、Vue.jsを勉強するよう勧められたので、覚えたものをアウトプットするという名目でブログに投稿して行きます。 結構噛み砕いて書きます。笑 Vue.jsとは ご存知かと思いますが、JavaScriptのフレームワークです。 ページ遷移をしない、SPA(S…

CarrierWave+MiniMagickでリサイズ

開発環境 バージョン Ruby 2.5.1 Rails 5.2.3 MiniMagick 4.10.1 CarrierWave 2.1.0 主なメソッド ・resize_to_fit ・resize_to_limit ・resize_to_fill resize_to_fit 画像の縦と横を維持して比率をリサイズしてくれます。 image_uploader.rb(タイトルとし…

BetterTouchToolとPopClipの紹介(mac)

どうも〜 webアプリ開発中便利だなと思ったツールの紹介です! と言っても、知り合いの方からオススメされて、いいなと思ったところが正直な話ですが笑 生産性あがること間違いなしなので、導入されていない方は是非検討してください! ※有料アプリになりま…

Bootstrapを部分的に効かせる

どうも〜 いきなりですが、個人アプリ開発中にBootstrapを導入することになりました。 途中からの導入なので、どうしてもCSSが崩れちゃいます。 そんな時にいい方法を残してくれてる方がいました。 特定のdiv要素の中だけBootstrapを適用する - Qiita 自分な…

Deviseのカラム追加について

どうも〜 個人で作成しているアプリで、Deviseを設けてカラム追加をしたので、やり方を載せておきます。 はじめに Rubyでログイン認証管理を簡単に実装してくれるgemのDeviseですが、シンプルに実装するとDBに入力できるカラムは、emailとpasswordぐらいです…

画像登録前のプレビューのやり方 画像比率

どうも〜 画像を登録する必要のある、もしくはできるアプリであれば、登録する画像のプレビューが付き物ですよね。 1作前の個人アプリでもプレビュー機能は作ったのですが、画像によってプレビュー時に縦に伸びたり、横に伸びたりとなってしまってました。 …

フロント作ってると忘れちゃうこと

人それぞれかもしれませんが、基本的にフロントエンドの部分から作って、バックエンドを実装していく手順で作っています。 フロントの作成時間が長すぎて、バックエンドをいざ始めるぞって時に初手のコマンドを忘れてしまう現象に陥ってます…笑 とは言っても…

【HTML/CSS】Searchバーのアニメーション

ブログを作ってるんですが、検索バーをつけようと思い、少しアニメーションをつけてみました。 CSSでの実装となります。 1.検索バーをクリックするとバー自体の範囲が伸びる 2.placeholderで表示している文字をクリックした時に消す 今後も使いそうなので、…

デュアルディスプレイになりました!

どうも〜 タイトル通りデュアルディスプレイ化しました。 PHILIPSの241E9/11(23.8inch)を買いました! https://www.amazon.co.jp/gp/product/B07J9L8QDB/ref=ppx_yo_dt_b_asin_title_o00_s00?ie=UTF8&psc=1 これですね。 用途としては、ローカル環境でエディ…

【jQuery】scrollTop();

ブログを作って欲しいと依頼があり、ビューにこだわってみようと思い、色々チャレンジ中です。 メニューバーをスクロール後一定の位置で固定したかったので、jQueryのscrollTop();を使ってみました。 ※よく使われる指定位置へスクロールを飛ばすパターンじゃ…