2020-01-01から1年間の記事一覧

【Rails】アクセス数をカウントしたかったので、impressionistを導入

初めに ブログを作成していたので、記事にアクセスした回数を確認したく、探してみたところimpressionistというgemを発見。 少しつまづいたのと、まだ仮実装ですが、見返せるように投稿しておきます。 開発環境 バージョン Ruby 2.5.1 Rails 5.2.3 impressio…

【Vue.js】いいねボタン作ってみる(練習)

はじめに Vue.jsの練習で作ったいいねボタンを、覚えるがてら書き残します。 完成形 HTML <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Component</title> </meta></meta></meta></head></html>

【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();を使ってみました。 ※よく使われる指定位置へスクロールを飛ばすパターンじゃ…

Twitterカードの実装でつまづいた所

どうも〜つい最近ですが、個人アプリを作った時に、Twitterカードを実装しようとしたんですよね。 綺麗に実装の仕方を説明してくれているサイトを参照して、実装したのですが、これが全然上手くいかない。 絶対同じようにできてるのに全く表示されない… 数日…

考える力が大事!

まず、考える力とは、 課題を見つけ、解決のためのプロセスを選択し、新しい価値を生み出す能力 として定義されているようです。(というか、自分の中ではこれだって決めました。) そして、記事の結論から書くと 日々、課題を探し、エンジニアであればどの…

インフラエンジニアとは

最近IT企業の方のお話をする機会が多く、インフラエンジニアについて調べた方がいいと指摘をもらったので、調べました。 結論、縁の下の力持ち!でした。 (みんなこの表現だったので、他の言い回しないか悩んだんですが、これがぴったりすぎました。) そも…

学習は朝の方がいい?

いきなりですが、プログラミングの勉強って結構地味で、寝不足の日は全然頭に入らないですよね。 というよりも、普段平均5時間ぐらいの睡眠しか取れていないので、学習をする上でいい生活を送れていなさそう… ということで、1日7時間睡眠をした場合のスケジ…

オブジェクトとは?

どうもです。 わかったようで、自信満々にわかると言えないオブジェクトを自分なりに調べました。 まずシンプルに辞書から weblio辞書から引っ張るとこんな感じでした。 オブジェクト [1] 【object】 ① 物体。対象。目的。 ② 英文法で,目的語。 ③ 対象。…

ReactでJavaScriptの書き方できるようです。

結論 どうやらreturnの中以外はJavaScriptのようです。 class App extends React.Component { render () { return ( {/* JSX部分 */} ); } } なのでこういった書き方ができます。 class App extends React.Component { render () { const hoge = 'こんにちわ…

Progateとドットインストールどっちがいい?

どうも〜、最近ドットインストールを使って勉強しているのですが、昨日久々にProgateを触ったので思った感想をまとめようかなと書いてます。 結論! Progate 色々と丁寧ですが、もともと環境を揃えた状態でスタートしているので、Progate学習後に何かを自分…

【JavaScript】setTimeout()の使い方

早速使い方です。 setTimeout(処理の内容,実行するタイミング); 第一引数に処理したい内容を記述 第二引数にタイミングをミリ秒(例えば5秒なら5000)で記述 要約すると、第二引数に与えられたタイミングで第一引数の処理を1回行う。 時計とかルーレットやタ…

【JavaScript】Math.random()の使い方

初心に戻ってドンドン忘れそうな技術をメモしております。 結論、Math.random()は0以上、1未満の数字をランダムで出力してくれます。 <script> console.log(Math.random()); </script> 例ですが、結果「0.7349718784798662」などが出力されます。 1未満しか出力しないため、1…

JavaScriptの無名関数〜メモ〜

なんだっけ?と思ったので見直せるように自分用のメモ書きです。 普通の関数 <script> function sum(a,b){ var hoge = a + b; return hoge; } var answer = sum(1,10); console.log(answer); </script> ①answer呼びます。 ②answerって?あぁ、sum(1,10)ね! ③sumとは?functio…

Reactが思ったより難しかった。(なんでもやり始めは難しいですけどね)

こんにちは、なのか、こんばんわ、なのか。 何れにしても見ていただいている方がいらっしゃられば、ありがとうございます!アウトプット用として昨日から始めたブログですが、どうしても宣言したかったので、決めたブログの方針とは違いますが、書きなぐりま…

ブログ始めます!〜自己紹介〜

初めまして、zare926と申します! いきなりですが、プログラミングに魅力を感じ、日々勉強中です。 去年の終わりぐらいにTECH CAMP(旧:TECH::EXPERT)へ入学、無事卒業しております。 基本的には自分が見直せるように、アウトプット用のブログとして活用す…