Vueで画像をリサイズして表示する、そしてそれはバックエンドに送られる(canvasAPI, Base64利用)

あらすじ fujiten3.hatenablog.com の続き。 この記事でやること 以前↑の記事にて、簡易的な画像のプレビュー機能 + 送信機能を実装しました。 その内容を一言でいうと、クライアントサイドで画像をBase64形式で符号化し、文字列として取り扱う送信フォーム…

RailsAPIでBase64エンコードされた画像ファイルを受け取り、S3(AWS)に保存する

自分が昔に書いた記事の続編です。 fujiten3.hatenablog.com クライアント層から送られてきたBase64エンコードされた画像ファイルをRailsで扱う方法の紹介するのがこの記事の目的です。 以前書いた記事にコメントを頂いたので、筆を取りました。(コメントあ…

2020年1月の振り返り

振り返りの前に 先月は振り返りを書くのが遅れたけど、今月は2日から書けているので優秀! 1月度の感想 (この1ヶ月のパソコン活動:Qbserve) (緑が生産活動、青がニュートラル、赤がTwitterとか。棒1本が1日で左から右に31日間ある) 今月の学習時…

2019年12月の振り返り

振り返りとは 就業時間以外に学んだことや考えたことをブログとして残しておくこと。 「毎月あげる目標達成の積み重ね → 長期目標の達成」を狙ってます。 振り返りの前に 12月度の振り返りを書くのが遅れたのは、正月にガッツリ体調崩してしまい4日間ほど…

2019年11月の振り返り

振り返りとは 就業時間以外に学んだことや考えたことをブログとして残しておくこと。 「毎月あげる目標達成の積み重ね → 長期目標の達成」を狙ってます。 今月度の感想 総評:85点 (達成度チェックを来月からやりたい) まあ基準がまったくない中の85点な…

だから僕はプログラミングが出来ない

競プロ・アルゴリズムに関するお話。 TL;DR アルゴリズムに弱すぎて全然問題が解けない。 こんな問題に出会った。 < Double Cola > https://www.codewars.com/kata/double-cola/ (概要) 自動販売機に人が並んでいる。その並んだ人の名前をあらわすための配…

駆け出しエンジニアとして考える、今後の方針

2018年12月からプログラミングの勉強を初めて、現時点でだいたい10ヶ月目ぐらいになります。 エンジニアという職業を選択できたことはとても幸福だったし、今後もずっとこの職には関わっていきたい、と思っています。 ただ、どういったキャリアを目指すか、…

Ruby on Railsで分間100万リクエストを捌くコードの書き方

Rails効率化に関する記事を読んだので、ポイントだけまとめておこうと思います。 engineering.shopify.com ActiveRecordのパフォーマンス改善 SQLが実行されるタイミングを知る 出来るだけ少なく選択する クエリキャッシュを忘れる インデックスのないカラム…

未経験からエンジニアになるための学習ロードマップ

完全に未経験から、エンジニアになりたい人向けの記事です。 自分がRailsで就職したので、このロードマップ自体はRailsエンジニア(バックエンドエンジニア)になることに特化していますが、Ruby以外の言語や、フロントエンドへの転職を希望している場合も、…

新しいMacを入手したときにやっておくべき環境構築

新品のMacを手に入れたとき、初期設定では色々と使いづらいので、いろいろとカスタマイズしていくと便利です。 そのカスタマイズの内容は多岐にわたるので、自分用も兼ねてメモしておこうと思います。 入社初日などをイメージしてます。基本的に、上から行う…

Atcoderの「AtCoder Beginners Selection」を解いてみた。

まえがき 競プロ的な問題を解くとアルゴリズムに強くなってよいよ、という風のうわさをきいて、Atcoderのビギナー問題に挑戦してみることにした。 以前はCodeWarというサイトでたまに問題を解いていて、このサイトも回答例がたくさん見れるので個人的に気に…

SPAのTwitterログイン認証(OAuth)

SPA(RailsAPI + Vue.js)でのTwiiterログインを実装したので、自分の実装方法をまとめておきます。 概要図(ステップ) 実装の概要 ステップ1 ステップ2〜5 ステップ6〜7 ステップ8 ステップ9 感想 概要図(ステップ) 実装の概要 まずはじめに、 実装…

SPAでのログイン認証とCSRF対策の実装(JWT使用)

SPA(Vue + RailsAPI)で何とかログイン認証機能 + CSRF対策を実装したので、ブログにメモしておきます。 実装の概要 使用した技術たち JWT(JsonWebToken) アクセストークン、リフレッシュトークンって? WebStorage JWTSession 遷移の概要(より正確な内容は要…

Vueでパスワードの強度を動的に判定できる送信フォームを作りました。

タイトルの通り、Vueでパスワードの強度をクライアントサイドで判定しながら送信できるフォームを作りました。 PasswordStorengthChecker JSFiddle上に置いておいたので、欲しい方はどうぞ。編集自由ですが、ブログ等での再配布はご遠慮ください。 jsfiddle.…

Vueで画像アップロード + プレビュー機能付きフォームを作りました。(Base64エンコード利用)

タイトルの通り、Vueで簡単な画像アップロードページを作ったので、JSFiddleで公開してみます。 今回はBase64エンコードを使って、画像を文字列情報として扱う方法を採用しています。 バックエンドとのやり取りをJSONベースで行っている場合は、この方法がシ…

Dockerの基礎

自分用です。 コマンド: // dockerバージョンのチェック docker version // dockerの情報を詳しく知る docker info // dockerコマンドの一覧表示 docker // imageをインストール docker pull <任意のimage> // インストールしているimageの詳細情報を確認す…

Ruby on Railsガイドを通読してまとめる Part.4

第四弾です。 コントローラー Action Controller の概要 リクエストを受け取るコントローラーがルーティングによって指名されると、コントローラーはリクエストの意味を理解し、適切な出力を行うための責任を持つ。 これらの一連の処理はAction Controllerに…

Ruby on Railsガイドを通読してまとめる Part.3

第三弾です。前回はこちら。Ruby on Railsガイドを通読してまとめる Part.2 - エンジニア備忘録 railsguides.jp なんだかんだPart.3まで続けられました。 これもひとえに自分の努力の成果です。自分すげえ。(ただまとめてるだけなので大した努力ではない) …

Ruby on Railsガイドを通読してまとめる Part.2

第二弾です。前回はこちら。 fujiten3.hatenablog.com railsguides.jp これのコールバック〜関連付け(アソシエーション)を読んでまとめました。 めちゃくちゃ長いです。 モデル AvtiveRecord コールバック コールバックの登録(2.1) 利用可能なコールバック…

Ruby on Railsガイドを通読してまとめる Part.1

なかなかボリューミーなことで有名なRuby on Railsガイド。 railsguides.jp 実務未経験、Rails触り初めて4ヶ月の人間が気になった所だけ抜き出ししてまとめます。 基本的に、「理解できなかった所」や「大事だなと思った所」を中心にしてまとめようと思いま…

「EFFECTIVE TESTING WITH RSPEC 3: BUILD RUBY APPS WITH CONFIDENCE」の6章、7章を読んだ

あとから自分で読み直せるように、ブログにまとめつつ読んでいます。 Chap6 統合テスト(Getting Real: Integration Specs) Chap7 Structuring Code Example(コードイグザンプルを設計する) Getting the Words Right(言葉を正しく手に入れる) 共通のロジック…

ゼロからVue.jsを学んでいる(用語整理)

以下の2冊で勉強しています。 Vue.js入門 基礎から実践アプリケーション開発まで作者: 川口和也,喜多啓介,野田陽平,手島拓也,片山真也出版社/メーカー: 技術評論社発売日: 2018/09/22メディア: 単行本(ソフトカバー)この商品を含むブログを見る 基礎から…

「EFFECTIVE TESTING WITH RSPEC 3: BUILD RUBY APPS WITH CONFIDENCE」の4、5章を読んだ

あとから自分で読み直せるように、ブログにまとめつつ読んでいます。 概要(自分の感想) BDD(振る舞い駆動開発)を体験してみよう!(TDDかもしれない?)というコーナー。 RSpecならではのテスト・開発手法を擬似的に体験できるという感じ。 難易度は上がった…

「EFFECTIVE TESTING WITH RSPEC 3: BUILD RUBY APPS WITH CONFIDENCE」の3章を読んだ

あとから自分で読み直せるように、ブログにまとめつつ読んでいます。 RSpecの流儀(The RSpec Way) Specがあなたにもたらすもの(What Your Specs Are Doing For You) やりすぎるな!(Don't Overdo it!) Specsの異なる型(Different Types of Specs) 受け入れ…

オブジェクト指向設計実践ガイドの9章を読んだ(読了)

あとから自分で読み直せるように、ブログにまとめつつ読んでいます。 9章 費用対効果の高いテストを設計する 変更可能なコードを書くための3つのスキル 意図をもったテストとは 何をテストするかを知る いつテストするかを知る テストの方法を知る 受信メッ…

オブジェクト指向設計実践ガイドの7章、8章を読んだ

あとから自分で読み直せるように、ブログにまとめつつ読んでいます。 7章 モジュールでロールの振る舞いを共有する ロールを理解する オブジェクトに自身を語らせる 継承可能なコードを書く まとめ 感想 8章 コンポジションでオブジェクトを組み合わせる Arr…

オブジェクト指向設計実践ガイドの6章を読んだ

あとから自分で読み直せるように、ブログにまとめつつ読んでいます。 6章 継承によって振る舞いを獲得する クラスによる継承を理解する テンプレートメソッドパターンを使う フックメソッドを自分で実装する まとめ 感想 6章 継承によって振る舞いを獲得する…

「EFFECTIVE TESTING WITH RSPEC 3: BUILD RUBY APPS WITH CONFIDENCE」の2章を読んだ

あとから自分で読み直せるように、ブログにまとめつつ読んでいます。 書くことから(From Writing) あなたのSpecアウトプットをカスタマイズする(Customizing Your Specs' Output) フォーマットの過程(The Progress Formatter) The Documentation Formatter S…

オブジェクト指向設計実践ガイドの5章を読んだ

あとから自分で読み直せるように、ブログにまとめつつ読んでいます。 5章 ダックタイピングでコストを削減する ダックタイピングを理解する ダックを信頼するコードを書く 安定したものに依存する場合は、無理にダックタイプを作る必要はない 静的型付けにお…

「EFFECTIVE TESTING WITH RSPEC 3: BUILD RUBY APPS WITH CONFIDENCE」の1章を読んだ

あとから読みなおせるようにブログにまとめつつ読んでいます。 Effective Testing with RSpec 3: Build Ruby Apps with Confidence作者: Myron Marston,Ian Dees出版社/メーカー: Pragmatic Bookshelf発売日: 2017/09/09メディア: ペーパーバックこの商品を…