LaravelとNUXTを使ったプロジェクトの準備

Laravel側 プロジェクトの作成 laravel new ${プロジェクト名} laravel new synapse_laravel バージョンを指定する場合 $ composer create-project ”laravel/laravel=6.*” synapse_laravel サーバーを起動 cd synapse_laravel php artisan serve API作成 ro…

リーダブルコード第3章「誤解されない名前」の輪読会をした備忘録と感想

毎週月曜日に「リーダブルコード」の輪読会を行っています。 今回は3章を終えた感想や備備忘録を書きます。 3章は、名前が「他の意味と間違えられることはないだろうか?」というテーマです。 誤解されない名前 英語がネイティブでない自分にとって、英語の…

【JavaScript】canvasで画像上に座標を指定してブロック枠を描画する方法

Vue.jsを使用 画像を描画 画像上に座標を指定してブロック枠を描画 コード <template> <div> <canvas ref="canvas" :width="canvasWidth" :height="canvasHeight" /> </div> </template> <script> export default { data() { return { canvasWidth: 400, canvasHeight: 800 } }, computed: { // 画像のURLを取得しています imageUrl(…

【Laravel】インストール時のエラー、zip展開できない

$ composer global require laravel/installer とするとこんなエラーが出ました。 Problem 1 - laravel/installer v3.0.1 requires ext-zip * -> the requested PHP extension zip is missing from your system. - laravel/installer v3.0.0 requires ext-zi…

`chmod`は`chage mode`という意味

$ chmod a+x /usr/local/bin/composer chmodとはLinaxコマンドの一つ。 change modeという意味。パーミッションを設定する。 aがすべての権限。 xが実行権限。 a+xはすべてのユーザに実行権限を与える。 これで、いつでもcomposerを呼び出すことができる。

画像アップロード、プレビュー、取り消し

<%= link_to blogs_path, remote: true, onClick: "deleteNewMarker();" do %> <%= fa_icon 'chevron-left' %> <% end %> <%= form_with(model: blog) do |form| %> <div class="field"> <%= form.text_area :content, class: 'form-control', id: 'text', placeholder: t(%q[Wh</div>…

【Rails】flashを使う

<% if notice %> <div class="alert alert-info role="alert"> <%= notice %><button type="button" class="close" data-dismiss="alert">&times;</button> </div> <% end %> <% if alert %> <div class="alert alert-danger" role="alert"> <%= alert %><button type="button" class="close" data-dismiss="alert">&times;…</button></div>

【Rails】Deviseのログイン時などのリダイレクト先変更

ログイン時などのリダイレクト先の変更方法。 def after_sign_up_path_for(resource) # (リダイレクト先) end def after_update_path_for(resource) # (リダイレクト先) end def after_sign_out_path_for(resource_or_scope) # (リダイレクト先) end def aft…

【Rails】aタグの中にaタグを入れ子にする方法【html、CSS】

twitterのように、投稿全体が詳細へのリンクとなっていてその中にユーザー詳細へのリンクがある、というやり方。 何も考えずに書くと投稿詳細への<a> タグが意図しないところで閉じられてしまう。 まず、詳細へのリンクをCSSでdisplay: block;とすると、親要素</a>…

フォロー・フォロワー機能のコントローラ、ビュー

maa0917.hatenablog.com 以前の続きです。 (views/users/show.html.erb) <%= render partial: 'users/follow_form', locals: { user: @user } %> $ rails g controller Relationships create destroy (routes.rb) resources :relationships, only: [:create,…

【Rails】Ajaxでいいね機能

$ rails g model likes user_id:integer blog_id:integer class CreateLikes < ActiveRecord::Migration[5.2] def change create_table :likes do |t| t.references :user, foreign_key: true t.references :blog, foreign_key: true t.timestamps end end e…

【Rails】ユーザーアイコンにデフォルト画像

CarrierWave+MiniMagickを使っています。 アップロードされなかった場合、ユーザーアイコンにデフォルト画像を設定します。 バージョン情報 rails 5.2.3 ruby 2.6.3 uploaderの設定 アップローダのコメントアウトを外す。 (app/uploaders/icon_uploader.rb) …

【CSS】classやidを指定できないときは属性セレクタを使う

例えばアップロードした画像を表示する際にデザインを適応させたい。 しかし、なにかしらの原因でclassやidを指定できないときに、 属性セレクタを使うとうまくいきました。 srcに"/uploads/user/icon/" を含む<img> を丸くしたい場合、 img[src*="/uploads/user/…

【Rails】CarrierWave+MiniMagickでユーザーアイコンを作る

CarrierWave + MiniMagickでユーザーアイコンを作ります。 バージョン情報 rails 5.2.3 ruby 2.6.3 ユーザーアイコンを作る 元画像を切り抜く width 100px, height 100pxで切り抜き、第三引数で切り抜きを行う際の中心点を指定します。 (app/uploaders/icon …

【Rails】redirect先をback、エラーになる場合はrootへ飛ばす方法

色んな場所からdestroyしたときに、redirect先をbackにしたい。 (app/controllers/blogs_controller.rb) def destroy @blog.destroy redirect_back(fallback_location: root_path) end とすると、back 、エラーのときはroot_pathに飛ぶ

yarnインストール

NVMのインストール curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash 再読み込み source .bashrc $ nvm --version node.jsのインストール $nvm ls-remote nvm install (バージョン) node -v $ npm -v curl -o- -L http…

アクションを叩きつつ、jsリクエスト

newアクションを叩きつつ、jsをリクエストします。 <%= link_to 'New Blog', new_blog_path, remote:true %> (app/views/blogs/new.js.erb) $('#blogs_area').html("<%= j(render partial: 'blogs/new', locals: {blog: @blog}) %>") app/views/blogs/new.ht…

Railsでアプリ開発を始めるときの準備のまとめ

Rails new $ rails _5.2.3_ new mapblog -d postgresql --skip-bundle 必要なGemのインストール (Gemfile) group :development, :test do gem 'byebug', platforms: [:mri, :mingw, :x64_mingw] gem 'rspec-rails' gem 'factory_bot_rails' gem 'pry-rails' …

LPIC1のメモ

pwdコマンドと環境変数PWD $ pwd pwdコマンド 現在の作業ディレクトリパスを絶対パスで表示 $ echo $PWD または $ echo ${PWD} 環境変数PWDをechoしている 環境変数は大文字、小文字を区別する setコマンド $ set BASH=/bin/bash BASH_ARGC=() BASH_ARGV=() …

RailsでGoogleMap APIを使う

jQueryの準備 $ yarn add jquery (app/assets/javascript/application.js) //= require jquery/dist/jquery.js //= require_tree . ENVファイルの設定、APIキーの設定 (Gemfile) gem 'dotenv-rails' bundle $ touch .env (.gitignore) (追加) .env (.env) …

コメント機能

コメント機能の要件 入力フォームに入力した内容で画面が書き換わること。 画面が変更されないこと。 更新時にURLが変更されないこと。 モデル (routes.rb) Rails.application.routes.draw do resources :blogs do resources :comments end end $ rails g mo…

フォロー・フォロワー機能のモデル

テーブル設計 $ rails g model relationship follower_id:integer followed_id:integer マイグレーションファイルを修正 class CreateRelationships < ActiveRecord::Migration[5.2] def change create_table :relationships do |t| t.integer :follower_id …

いいね!機能の実装

いいね!機能とは いいね!とおもったblogをストックすることができる だれがいいね!したかを見ることができる どれくらいの人がいいね!したかを見ることができる いいね!機能の要件 blogのindex、showページにいいね!ボタンを設置する blogをいいね!し…

system specでE2Eテスト

system specでE2Eテストを実施実施します。 いわゆる統合テストです。 必要なgemをインストール まずは必要なgemをインストールします。 chromedriver-helperは2019年3月31日にサポートが終了したみたいなので、代わりにWebdriverを使用します。 (Gemfile) g…

NOT NULL制約

後付でNOT NULL制約をつける 今回の場合、すでにtitleカラムとcontentはすでにあるので、後付でNOT NULL制約をかけます。 まずはマイグレーションファイルを作ります。 $ rails g migration ChangeColumnToBlog オプションでnullをfalseにします。 またrollb…

Factory Botの導入、Blogモデルスペック

Blogモデルのテストを実装していきます。 $ rails g rspec:model blog Factory Botの導入 サンプルデータを生成するために今回はFactory Botを使用します。 (Gemlfile) group :development, :test do # (省略) gem 'factory_bot_rails' end $ bundle congi…

UserモデルをRSpecでテストする

自動生成の設定をしましたがblogモデル、userモデルはすでに作成されているので、テストファイルを新しく作成します。 まずはuserモデルを作成します。 $ rails g rspec:model user まずはアウトラインを記載していきます。 (spec/models/user_spec.rb) requ…

RSpec のセットアップ

テストはRSpecを使って、ModelSpecとSystemSpecでよいかなあと思います。 ModelSpecはモデルクラス単体のテストでメソッドやバリデーションの挙動をテストします。 SystemSpecとは統合テストと呼ばれるテストで、実際にブラウザを起動して画面上で挙動をテス…

タイムゾーンの設定を日本にする

タイムゾーンの設定を日本にする 今回のissueはタイムゾーンの設定を日本にするというものです。 (config/application.rb) module Mapblog class Application < Rails::Application # (省略) # 以下の2行を追加 config.time_zone = 'Tokyo' config.active_…

i18nでアプリの日本語部分を共通化

viewに直接日本語を書くのではなく、i18nで変換した日本語を表示させます。 ロケールの設定 Devise-i18nの設定で、すでにconfig/initializers/locale.rbの中に設定を記載しました。 (config/initializers/locale.rb) I18n.config.available_locales = :ja I1…