20210910のRailsに関する記事は16件です。

Rails Tutorialで詰まったところのまとめ 第1章

◎コードをWebページに反映させるには「git push heroku」をターミナルで実行(デプロイ)しなければならない ◎「rails server」を実行する際は、「cd ~/environment/hello_app/」でカレントディレクトリを変更してあげる必要あり ◎「heroku create」ができるのは5つまで ▶ 5つ作成したら「heroku apps」でappIDを確認して、「heroku destroy --app 」で削除する ◎リスト1.19 「bundle install --without production」を実施する際は、「cd ~/environment/hello_app/」でカレントディレクトリを変更してあげる必要あり
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

コントローラーで定義した値をJSに受け渡す

開発環境 OS:macOS Big Sur 11.2.2 Ruby:2.6.5 Ruby on Rails:6.0.0 テキストエディタ:Visual Studio Code つまづいたこと 投稿の詳細画面から非同期通信でDB更新をしたいと考えたときに、更新に必要な値を更新アクションを定義しているコントローラーに渡せず詰まった。 コントローラーからビューファイルに値を渡すときはインスタンス変数を定義するが、JavaScriptへはどうしたらいいのだろう?と思い調べてみた。gonというgemの導入により実現できるらしい。 実践したこと gonは簡単にJSファイルにデータを受け渡すために作られたgemらしい。(と、いうことは難しい手順を踏めば使わなくてもできるということか・・・) 使い方は、 ①まずgemファイルにgonを定義 gem 'gon' ②gemをインストール % bundle install ③includeの記述を追加 下記の通り、headのapplication.js読み込みより前に追加する application.html.erb <head> ~ <%= include_gon %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> ~ </head> これで準備は完了。あとは、 ④受け渡したい値を「gon.〜」という名前で変数定義する recipes_controller.rb def show # JSに渡す変数を定義 gon.receipe_id = @recipe.id end ⑤受け取ったJSファイルで使用 clip.js // clipコントローラーへのリクエスト const XHR = new XMLHttpRequest(); const URL = `/recipes/${gon.receipe_id}/clips` XHR.open('POST', URL, true); XHR.responseType = "json"; XHR.send(); 以上。意外と簡単にできる。 gonのその他の機能について せっかくなので公式ドキュメントを見ていたら、`「gon.watch.〜」という指定の仕方を見つけた。 どうやら値の一定間隔での置き換え・リフレッシュに使う模様。 今回は利用しなかったが、更新したDBのカウントを定義して、リアルタイムでカウント表示したりというときに使えそう。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Rails 開発環境を準備する!

①AWS Cloud9 で新しくIDE(開発環境)を立ち上げ   ⑴AWS Educateにログインし、マネジメントコンソールにアクセスするよ。   ⑵Cloud9にアクセスするよ。   ⑶AWS Cloud9 のトップ画面にて、「Create environment」をクリックするよ。   ⑷「Name」を入力し、「Next step」だよ。   ⑸Platform の「Amazon Linux 2 (recommended)」を選択して、「Next step」だよ。   ⑹Review(最終確認画面)が表示され、「Create environment」だよ。   ⑺以上! ②AWS Cloud9の設定について  これは、改善の余地ありですが、お勧めされているのは、 ⑴右上の歯車マークにて *Project Settings  ・Soft Tabs: 4から2に変更するよ。(タブサイズを2に変更)  ・On Save, Strip Whitespace: チェックを入れるよ。(余計なスペースの自動削除) *Experimental  ・Auto-Save Files:「Off」から「After Delay」に変更するよ。(ファイルの自動保存) ⑵左のサイドバー上部にある歯車マークにて *「Show Hidden Files」にチェックを入れるよ。 隠しフォルダ・ファイルの可視化を行う目的だよ。隠しフォルダ・ファイルは、「.」から始まるフォルダ・ファイルのことをいうよ。開発において、隠しフォルダ・ファイルを作成または修正するともあり得るよ。 ③Githubとの連携 ④Githubとの接続確認 ⑤Railsのバージョンアップ ⑥ImageMagickのインストール #編集途中だよ
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Docker】Rails6×react×MySQL環境構築

Dockerでrails api×react×MySQLの開発環境を構築する 1. 各種ファイルの準備 ディレクトリ構成 rails_react ├── api/ │ ├── Dockerfile │ ├── entrypoint.sh │ ├── Gemfile │ └── Gemfile.lock ├── front/ │ └── Dockerfile └── docker-compose.yml docker-compose.yml version: "3" services: api: build: context: ./api/ dockerfile: Dockerfile ports: - "3333:3333" volumes: - ./api:/var/www/api command: /bin/sh -c "rm -f /var/www/api/tmp/pids/server.pid && bundle exec rails s -p 3333 -b '0.0.0.0'" my-database: image: mysql:5.7 environment: - MYSQL_ALLOW_EMPTY_PASSWORD=yes phpmyadmin: image: phpmyadmin ports: - "1080:80" environment: - PMA_ARBITRARY=1 - PMA_HOST=my-database - PMA_USER=root front: build: context: ./front/ dockerfile: Dockerfile volumes: - ./front:/var/www/front command: sh -c "cd react-app && yarn start" ports: - "3000:3000" api/Dockerfile FROM ruby:2.7.1 ARG WORKDIR=/var/www/api # デフォルトの locale `C` を `C.UTF-8` に変更する ENV LANG C.UTF-8 ENV LC_ALL C.UTF-8 # タイムゾーンを日本時間に変更 ENV TZ Asia/Tokyo RUN apt-get update && apt-get install -y nodejs npm mariadb-client RUN npm install -g yarn@1 RUN mkdir -p $WORKDIR WORKDIR $WORKDIR COPY Gemfile $WORKDIR/Gemfile COPY Gemfile.lock $WORKDIR/Gemfile.lock RUN bundle install # Add a script to be executed every time the container starts. COPY entrypoint.sh /usr/bin/ RUN chmod +x /usr/bin/entrypoint.sh ENTRYPOINT ["entrypoint.sh"] EXPOSE 3333 # Start the main process CMD ["rails", "server", "-p", "3333", "-b", "0.0.0.0"] api/Gemfile source 'https://rubygems.org' git_source(:github) { |repo| "https://github.com/#{repo}.git" } ruby '2.7.1' # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '~> 6.0.3', '>= 6.0.3.6' api/entrypoint.sh #!/bin/bash set -e # Remove a potentially pre-existing server.pid for Rails. rm -f /myapp/tmp/pids/server.pid # Then exec the container's main process (what's set as CMD in the Dockerfile). exec "$@" front/Dockerfile FROM node:12.18.2-alpine ARG WORKDIR=/var/www/front RUN mkdir -p $WORKDIR WORKDIR $WORKDIR 2. コマンド実行 $ docker-compose run api rails new . --force --no-deps --database=mysql --api $ docker-compose build $ docker-compose run --rm front sh -c "npm install -g create-react-app && create-react-app react-app" api/config/database.ymlの書き換え default: &default adapter: mysql2 encoding: utf8mb4 pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %> username: root password: host: my-database development: <<: *default database: api_development # Warning: The database defined as "test" will be erased and # re-generated from your development database when you run "rake". # Do not set this db to the same as development or production. test: <<: *default database: api_test $ docker-compose up -d $ docker-compose run api rake db:create 以上で環境構築完了
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

バリデーションを日本語に変える

バリデーションを日本語に変えるにはいくつかの手続きを踏まねばなりません。 1,日本語設定に変更 config/application.rbに以下の記述を追加。 config.i18n.default_locale = :ja config/application.rb (略) module BandStarter36553 class Application < Rails::Application # Initialize configuration defaults for originally generated Rails version. config.load_defaults 6.0 config.i18n.default_locale = :ja # Settings in config/environments/* take precedence over those specified here. # Application configuration can go into files in config/initializers # -- all .rb files in that directory are automatically loaded after loading # the framework and any gems in your application. end end 2, gem gem 'rails-i18n' をインストールします。 3, config/locales/devise.en.yml 作成 以上を経ても基本的な箇所しか日本語化されていないので、ymlファイルを作成し、以下の内容を丸ごとコピペします(一語一語の翻訳が記述されているよう) devise.ja.yml 4, config/locales/ja.yml 作成 ほぼ 3の内容と同じですが、更に翻訳が必要なワード、主に自分で追加したカラムの日本語訳を一つ一つ設定していきます。 以下、開発中のオリジナルアプリ第一号より抜粋。 config/locales/ja.yml ja: activerecord: attributes: user: nickname: ニックネーム active_day_id: 活動できる日 genre_id: ジャンル leader_or_member_id: 募集希望または加入希望 prefecture_id: 居住都道府県 sex_id: 性別 skill_id: 演奏力の目安 what_play_id: 演奏パート character_id: 性格 注意点として ・ attributes: の下はモデル名(ここではuser.rbのバリデーションに関するので、:userと記述) ・ モデル名より下は、バリデーションのカラム名。アソシエーションのあるカラムは _id までの記述が必要 ・ エラーメッセージが日本語化しているので、それに伴い単体テストの内容を合わせる必要がある なお関係ないですが、エラーメッセージの表示順は、モデル.rbのバリデーションに記述したカラムの順に表示されるようです。formの項目の順序に合わせて、バリデーションを記述するのがベターなよう。 以上です。 お読みくださりありがとうございました!
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

[Rails]本番環境(CentOS)でエラーログを見る方法

はじめに CentOS上でrailsアプリを動かした際、エラーログの確認方法をまとめた。 環境 CentOS7 rails 6.1.4 capistrano 3.16.0 puma 4.3.8 本番エラーログ確認方法 #logディレクトリへ移動 $ cd /var/www/html/<アプリ名>/current/log #lsコマンド入力 $ ls capistrano.log production.log puma_access.log puma_error.log ①capistrano.log → capistrano実行時のログやエラーログ ②production.log → アプリ実行時のログやエラーログ ③puma_access.log → pumaを起動した際のログ ④puma_error.log → puma実行時のエラーログ #production.logの最新ログ20行分出力 $ tail -n 20 /var/www/html/<アプリ名>/current/log/production.log まとめ 何かエラーが発生した場合は、まずはproduction.logを確認する。 参照
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【コピペ】Railsで選択肢を追加していく方法

Ruby on Railsで選択肢を追加していく方法 実装後参考サイト https://vlogmatome.herokuapp.com/posts/new 目次 1.コントローラーを準備する 2.モデル・データベース周り 3.viewのコード 4.ルートをかく 実装 1.コントローラーを準備する まずはコントローラーを準備します。 今回はブランドを投稿していくWebサイトを作成します。 ブランドの選択肢を投稿ごとに追加していきます。 ブランドの投稿はpostsコントローラー。選択肢の追加はbrandsコントローラーで行っていくこととします。 それでは早速コードを書いてみましょう。 posts_controller.rb class PostsController < ApplicationController def index @posts = Post.all @brands = Brand.all @brand = Brand.where(brand:"") end def new @post = Post.new @brand = Brand.new end def create post = Post.new(post_params) if post.save redirect_to :action => "index" else redirect_to :action => "new" end end private def post_params params.require(:post).permit(:brand, :brand_id) end end brands_controller.rb class BrandsController < ApplicationController def index @brands = Brand.all end def create brand = Brand.new(brand_params) if brand.save redirect_to action: "index" else redirect_to action: "new" end end private def brand_params params.require(:brand).permit(:brand, :brand) end end 2.モデル・データベース周り まずはpostsテーブルにinteger型でbrandというカラムとbrand_idというカラムを作成します。 次にbrandsテーブルにstring型でbrandをいうカラムを作成してください。 準備ができてらそれぞれのモデルに以下のコードを書いてみましょう。 モデルの関連づけを行います。 posr.rb class Post < ApplicationRecord belongs_to :brand end brand.rb class Brand < ApplicationRecord has_many :posts end 3.viewのコード 続いてはveiwページです。 posts/index.html.erb <div class="posts-container"> <% @posts.each do |t| %> <br> <% t.brand %> <% end %> <h2>Brand別一覧</h2> <% @size = @brands.length - 1 %> <% for b in 0..@size do %> <%= @brands[b].brand %> <% @brands[b].posts.compact.each do |t| %> <% t.brand %> <% end %> <% end %> </div> posts/new.html.erb <%= form_for @brand do |brand| %> <div class="field"> <%= brand.label :brand %> <%= brand.text_field :brand, :size => 10 %> </div> <%= brand.submit "追加する" %> <% end %> <%= form_for @post do |f| %> <div class="field"> <%= f.label :brand %> <%= f.collection_select(:brand_id, Brand.all, :id, :brand) %> </div> <%= f.submit "投稿する" %> <% end %> 4.ルートをかく 最後にルートを書いていきます。 routes.rb Rails.application.routes.draw do resources :posts resources :brands end 以上です!
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Rails6でajaxを使う jQuery3.0

rails6のバージョンだとうまく動かなかったので。 元記事 https://qiita.com/moriwm77/items/ea54c0f34da073801bf1 バージョン ruby-2.7.4 Rails 6.1.4.1 jquery 3.6.0 とりあえずscaffoldを導入 scaffoldについて https://qiita.com/tsubasaozawa/items/98f3e64a450d4304fc84 文章を投稿するのでカラムにtitleを使います。 rails g scaffold task title:string rails db:create # データベース作成 rails db:migrate # マイグレーション実行 yarn add jquery ここからは下記ページのJqueryの設定を行います config/webpack/environment.js 下記コードをコピペしてconfig/webpack/environment.jsに貼り付ける const webpack = require('webpack') environment.plugins.prepend('Provide', new webpack.ProvidePlugin({ $: 'jquery/src/jquery', jQuery: 'jquery/src/jquery' }) ) 下記のように貼る const { environment } = require('@rails/webpacker') //ここから const webpack = require('webpack') environment.plugins.prepend('Provide', new webpack.ProvidePlugin({ $: 'jquery/src/jquery', jQuery: 'jquery/src/jquery' }) ) //ここまで module.exports = environment 次に app/javascript/packs/application.js ここへ下記コードを追加する require("jquery") あとは app/javascript直下にjsファイルを作成すればOKです ※ tasks.jsで $(document).ready(function() {とあるが ここは下記に変更する $(function() {
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

20代後半以上の初学者が必ずぶちあたる問題に今ある知識で立ち向かう。

プログラミング学習をしているといつか遭遇する世界のナベ○ツ問題。私は今朝でした。 中々具現化せずにスルーしていく人が多いであろうなか締切が迫っているプロジェクトを差し置いてやる。やらねばならない。 【問題】 「「3の倍数と3のつく数字のときだけアホになります」をターミナルに出力しなさい。」 【構想】 条件分岐と条件の組み合わせを利用して実装ができそうです。 範囲→メインとなる30代の数字は全部出力したいので40までとしましょう。 アホになる→リスペクトも込めて「語尾に"!!!"を付与する」あたりで手を打ちましょう。 【step1】 whileメソッドを使って指定した条件下で繰り返し処理を行うよう大枠を作成しましょう。 qiita.rb def everything_that_happens_twice_will_surely_happen_a_third_time num = 1 while num <= 40 do ここに条件を書くよ num = num + 1 end end 1から始まるようnumを定義し、whileメソッドで40以下と設定してdo~end間の処理を繰り返します。※doは省略可 num = num + 1 とすることで繰り返し処理の流れでnumを変化させます。 【step2】 3の倍数と3のつく数字のときだけアホになるを条件としてコード化します。 qiita.rb if num.to_s.include?("3") || num % 3 == 0   puts "#{num}っ!!!" else   puts num end 3の倍数に関しては%を使い3で割った際の余りが0であれば達成。 問題は3のつく数字のときを条件式に落とし込む点。私の引き出しには数値を参照するメソッドがないため、'to_s'を使ってnumを一度文字列にした上で'include?'を使って文字として"3"を参照しました。include?って数値参照できないのね! 【step3】 だいたい完成ですね。どきどきしてきました。 ただ、思い返していると度々数字を言い切った後に締めの一言を発していたような 範囲を41までにしてnum == 41のときに締める条件を足して完成させましょう。 qiita.rb def everything_that_happens_twice_will_surely_happen_a_third_time num = 1 while num <= 41 do if num.to_s.include?("3") || num % 3 == 0 puts "#{num}っ!!!" elsif num == 41 puts "ぁおもろぉーぅ!" else puts num end num = num + 1 end end できたっっっ! ターミナルで実行してみます。 楽しかったです。 メソッド名だけでも覚えて帰ってください。 以上。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【RSpec】ActiveRecord使った複数画像添付のテストコードについて

前提 Rails 6.1.4 ruby 2.6.5 ActiveRecord 状況 現在Railsを使ってアプリケーションを開発しています。 model単体テストで画像添付のコードを書くのにかなり時間を要しました。(まず正常系のテストが通りませんでした) コード sotreというモデルについてテストしています。 画像ファイル名は「xxx」「yyy」と置き換えてあります。 spec/models/store_spec.rb RSpec.describe Store, type: :model do describe '店舗情報の投稿' do let(:store) { FactoryBot.build(:store) } # let(:images) { fixture_file_upload('/xxx.jpeg', '/yyy.png') } context '店舗情報が投稿できる' do it '必要な情報が全て入力されていれば投稿できる' do store.images = [ fixture_file_upload('xxx.jpeg', 'image/jpg'), fixture_file_upload('yyy.png', 'image/png') ] expect(store).to be_valid end end     (中略) end end 4行目でコメントアウトしているコードは修正前のコードです。 第一引数と第二引数それぞれに画像のパスを指定していました。 8行目のstore.images~というのが今回追記したコードです。 fixture_fire_uploadが2回出てくるのは、複数の画像を添付するためです。 画像1枚のみなら2回目の表記は不要です。 第一引数では画像のパスを、第二引数ではファイルの種類を指定しています。 下記コードはRailsのバージョンが6.1以降であれば必須ですが、それ以前(6.0)のバージョンであれば必須ではありません。 spec/rails_helper.rb FactoryBot::SyntaxRunner.class_eval do include ActionDispatch::TestProcess include ActiveSupport::Testing::FileFixtures end なぜテストで通らなかったのか考える 4行目のテストに通らなかったコードでは第一、第二引数ともにファイルのパスを指定しています。 本来第一引数はファイルのパスを指定して、第二引数にファイルの種類を記載するのがルールのようです。 以上です。 テストコードに苦手意識がありますが、品質の担保には必須なので積極的に挑んでいこうと思いました。 内容に不備がございましたらご指摘いただけますと幸いです。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

アイデアが無いから個人開発やらない?もったいないよ!

世界をちょっとだけ良くするアプリを作りました なぜやるのか? 私はもったいないという感情がとても嫌いな人間です この感情に動かされ、誰かのためになったら良いくらいの精神で作りました 考える課題 個人制作者: 個人開発などでアイデアがない人が多過ぎる せっかく作れる人なのにその労力を有効活用できていない ユーザーが全然いなかったり そもそも認知がなかったりするのはもったいない アイデア側: 非製作者には妄想を豊かにふくらませてくれる人が多かった 実体験からくる課題感や異なる発想を持っての 「こんなのあったら良いのに」がとても面白いのに形にできない アプリ アイデアとエンジニアのマッチングプラットフォーム メリット 個人制作者: 開発したいアイデアが見つかる? 一緒にサービス開発をしたいと言ってくれる人が見つかる アイデア側: アイデアを形にしてもらえる 自分の「困ってる」が誰かを手助けするきっかけになるかもしれない コンセプト アイデアと個人制作のもったいないを無くす 実現したい世界観 「社会に役に立ちそう!」「あると助かるな!」を投稿 ユーザーが共感すれば投票 共感が集まればサイト上で上位に表示 エンジニアはどんなサービスの需要あらかじめわかる 市場調査もできる上、需要がわかった上で開発ができる サービスに貢献している人に投げ銭で応援できる けど待って そもそもエンジニアは誰かのアイデアをわざわざ作りたいの? 個人開発のメリットは大きい みんなやってる個人開発 コードを極めた人もOSS活動などで個人開発 駆け出しエンジニアはポートフォリオとして個人開発 勉強のためにコーディングやる人も個人開発 一発サービスで当てたい人も本気で個人開発 シンプルに楽しい ものづくりは楽しい 人に使ってもらうはもっと嬉しい 需要チェックのためアイデアをさらしてみた 需要はありそう 累計で ? View数 2.5万 ? LGTM 275  2週連続Qiitaメールランキングに載った ? ストック 352 ありがたいことにコメントもたくさん頂き 個人開発のアイデアを欲している人の需要を感じた?‍♂️ 投稿しまくった結果、欲しくなったアプリがこちらです アプリの構成 アイデアを気軽に投稿できるようにするため アイデア名から自動で画像を作る機能をつけました プラットフォームでの循環 投げ銭でおうえん! 投げ銭で感謝や応援をできる アイデアにも投げ銭 開発者にも投げ銭 応援されるアイデアに投げ銭が集まり エンジニアとアイデアマンに平等に分配される 結果、大勢の需要を満たすように目指す ターゲット 社会貢献に興味がある人 自分の身の回りで改善点見つけられる人 個人開発をしたい人 メッセージ 世の中にお金を産むサービスはいくらでもあります けど「お金はあまり産まないけど社会に必要とされているサービス」が少ない そこに本当に必要とされるサービスがあると思います 個人開発の才能をぜひお貸しください ?ideee Ideaを Designし Engineerが Encounter(出会い)を Encourage(盛り上げる) アイデアとエンジニアのマッチングサービスideee(アイディー) β版スタート \β版ユーザー募集!/ 自己紹介 個人開発について発信しています! Twitterもフォローください? なる @1026NT
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【β版ローンチ】「アイデアが無いから個人開発やらない」を無くしたい

世界をちょっとだけ良くするアプリを作りました なぜやるのか? 私はもったいないという感情がとても嫌いな人間です この感情に動かされ、誰かのためになったら良いくらいの精神で作りました 考える課題 個人制作者: 個人開発などでアイデアがない人が多過ぎる せっかく作れる人なのにその労力を有効活用できていない ユーザーが全然いなかったり そもそも認知がなかったりするのはもったいない アイデア側: 非製作者には妄想を豊かにふくらませてくれる人が多かった 実体験からくる課題感や異なる発想を持っての 「こんなのあったら良いのに」がとても面白いのに形にできない アプリ アイデアとエンジニアのマッチングプラットフォーム メリット 個人制作者: 開発したいアイデアが見つかる? 一緒にサービス開発をしたいと言ってくれる人が見つかる アイデア側: アイデアを形にしてもらえる 自分の「困ってる」が誰かを手助けするきっかけになるかもしれない コンセプト アイデアと個人制作のもったいないを無くす 実現したい世界観 「社会に役に立ちそう!」「あると助かるな!」を投稿 ユーザーが共感すれば投票 共感が集まればサイト上で上位に表示 エンジニアはどんなサービスの需要あらかじめわかる 市場調査もできる上、需要がわかった上で開発ができる サービスに貢献している人に投げ銭で応援できる けど待って そもそもエンジニアは誰かのアイデアをわざわざ作りたいの? 個人開発のメリットは大きい みんなやってる個人開発 コードを極めた人もOSS活動などで個人開発 駆け出しエンジニアはポートフォリオとして個人開発 勉強のためにコーディングやる人も個人開発 一発サービスで当てたい人も本気で個人開発 シンプルに楽しい ものづくりは楽しい 人に使ってもらうはもっと嬉しい 需要チェックのためアイデアをさらしてみた 需要はありそう 累計で ? View数 2.5万 ? LGTM 275  2週連続Qiitaメールランキングに載った ? ストック 352 ありがたいことにコメントもたくさん頂き 個人開発のアイデアを欲している人の需要を感じた?‍♂️ 投稿しまくった結果、欲しくなったアプリがこちらです アプリの構成 アイデアを気軽に投稿できるようにするため アイデア名から自動で画像を作る機能をつけました プラットフォームでの循環 投げ銭でおうえん! 投げ銭で感謝や応援をできる アイデアにも投げ銭 開発者にも投げ銭 応援されるアイデアに投げ銭が集まり エンジニアとアイデアマンに平等に分配される 結果、大勢の需要を満たすように目指す ターゲット 社会貢献に興味がある人 自分の身の回りで改善点見つけられる人 個人開発をしたい人 メッセージ 世の中にお金を産むサービスはいくらでもあります けど「お金はあまり産まないけど社会に必要とされているサービス」が少ない そこに本当に必要とされるサービスがあると思います 個人開発の才能をぜひお貸しください ?ideee Ideaを Designし Engineerが Encounter(出会い)を Encourage(盛り上げる) アイデアとエンジニアのマッチングサービスideee(アイディー) β版スタート \β版ユーザー募集!/ 自己紹介 個人開発について発信しています! Twitterもフォローください? なる @1026NT
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Ruby on Rails】font-awesome-sassを導入してアイコンを重ねて表示する方法

対象者 RailsアプリにFont Awesome導入予定の方 Font Awesomeを重ねて表示したい方 目的 * アイコンを重ねて表示する! イメージは下記の通り 使用環境 Rails 5.2.5 注意:Rails6をご使用中の方は導入方法が異なります。詳しくはこちらを御覧ください 実際の手順と実例 1.FontAwesomeを設定する Gemfile gem 'font-awesome-sass' 導入後はbundle installを実行する 続いてapplication.cssをapplication.scssに書き換えて下記のコードを追記します。 順番を入れ替えないように注意! application.scss @import 'font-awesome-sprockets'; @import 'font-awesome'; 2.アイコンを重ねる表記方法 <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fas fa-circle fa-stack-2x "></i> <i class="fas fas fa-search fa-stack-1x fa-inverse"></i> </span> </div> 3.解説 複数のアイコンを重ねるにはfa-stackで重ねる2つの要素の親要素として指定します。 続いてiタグで囲まれたアイコンを最背面から順に記述します。 fa-stack-2x、fa-stack-1xと指定することで、背面のアイコンの大きさが重ねるアイコンの大きさの2倍になります。 これで実装完了です! 参照 Stacked Icons (FontAwesome 公式) 【Rails】 font-awesome-sassの使い方を徹底解説!
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Rails Ransackを使った検索機能

ransackとは ransackとは検索機能を実装するためのツールです。 ransack導入 gem 'ransack' その後 $ bundle install で導入できます。 routes.rbに追加 routes.rb Rails.application.routes.draw do #省略           collection do            get 'search' end end end  get 'search'をルーティングに追加します。 コントローラーのアクション以外を使う時はcollection doを使うみたいです。 コントローラーにseachアクションを追加 検索機能を取得するためにはprivate以下にメソッドを追記し、before_actionで 呼び出します。 users_controller.rb class UsersController < ApplicationController #省略 before_action :set_q, only: [:index, :search] def index @users = User.all end #省略    def search @results = @q.result end     def set_q @q = User.ransack(params[:q]) end         private def set_q @q = User.ransack(params[:q]) end #省略 end *下の文は下の資料から引用します。 ⚫︎params[:q] この後に作成するビューファイルから送られてくるパラメーター ⚫︎ransackメソッド 送られてきたパラメーターを元にテーブルからデータを検索するメソッド ⚫︎resultメソッド ransackメソッドで取得したデータを ActiveRecord_Relationの オブジェクトに変換するメソッド キーワード検索方法 index.html.erb <%= search_form_for @q do |f| %> <%= f.label :name, "Keyword" %> <%= f.search_field :name_cont %> <%= f.label :job_eq, '仕事' %> <%= f.search_field :job_eq %> <%= f.submit "検索" %> <% end %> <%= search_form_for @q do |f| %>〜<% end %>の間のコードが検索フォームです。 いろいろな検索機能の種類 上のキーワード検索以外にも 数値の対象検索、複数の選択検索などもあるみたいです。 他の検索機能は下の資料が詳しいのいで確認してください。 よく使うメソッド 下のメソッドがよく使うみたいです。 [検索したいカラム名]_eq 完全に一致するとき [検索したいカラム名]_not_eq 完全に一致しないとき [検索したいカラム名]_matches 一部が一致するとき [検索したいカラム名]_does_not_match 一部が一致しないとき 他にもたくさんあるので下の資料から調べてみてください。 ⚫︎参考資料 https://pikawaka.com/rails/ransack https://qiita.com/nojinoji/items/e1b174220da8c81a1756
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

ポートフォリオ紹介(INTELIST)【Ruby on Rails / AWS】

はじめに 業界・実務未経験者がエンジニア転職を目指して独学で約半年間プログラミング学習を行い、このたび転職用にポートフォリオを作成したため紹介していきたいと思います。 今後もアップデートをしていく予定なので、何かあれば本記事のコメント等にフィードバックをいただけますと助かります! アプリ概要 気になるものを何でもかんでもリスト化して管理・シェアするためのSNSアプリ「INTELIST(いんたりすと)」を作成しました。 気になるものをジャンル問わず投稿し、友人とシェアできる リスト化しておくことで後から確認できる 他のユーザーの興味をランキングで確認し、トレンドを把握できる といった特徴があります。 下記のURLにて公開中ですので、よろしければご覧ください! https://inte-list.com(PCでの閲覧推奨です) GitHubリポジトリ 製作背景 このご時世の中、「落ち着いたら〇〇行ってみよう」「〇〇って漫画がおすすめ」といったような会話をすることが増えたのですが、いかんせん増えすぎたせいで 「行きたいって話してたのどこだっけ…」 「勧められたのなんだっけ…」 「この話誰としたんだっけ…」 とド忘れしてしまうものが出てきました。そのような会話自体もLineやDiscordなどの様々な媒体を使用していたり、通話で話しただけだったりと後から拾いなおすのが難しく、せっかくの楽しみな情報が抜け落ちてしまうのがもったいなかったので、このド忘れを解消する方法として製作したのがINTELISTです。 記録するにあたり、飲食店、読書、音楽などに特化したサービスは比較的すぐ見つかったのですが、ざっくばらんに何でもかんでも記録&シェアするというサービスは見当たらないようだったので自分で製作してみた次第です。 アプリの機能紹介 機能一覧 # 機能名 説明 1 ユーザー機能 新規登録、登録内容変更、アバター画像設定、ログイン、ログアウト。 2 ゲストログイン機能 登録せずゲストとしてアプリを使用可能。ゲストユーザーは削除/編集不可。 3 フォロー機能     ユーザーをフォロー可能(Ajax)。原則はフォローしているユーザーのみを自身のタイムラインに表示。 4 投稿機能 投稿、編集、削除。投稿にはアイテム/コメント/参考URL/タグを登録可能。参考URLを入力した場合は外部APIを使用してリンクサムネイルを自動作成。 5 投稿へのいいね機能 投稿をいいねが可能(Ajax)。いいねした投稿をマイページで一覧表示。 6 投稿へのコメント機能 投稿へのコメント追加/削除が可能(Ajax)。コメントした投稿をマイページで一覧表示。 7 タグ付け機能 投稿へのタグ登録/編集/削除が可能。タイムライン等で表示されているタグをクリックすると、同じタグを含むアイテム一覧を表示。 8 マイアイテム機能 自分の投稿したアイテムを一覧表示。完了/未完了を登録し、ステータスで絞り込みが可能(Ajax)。 9 検索機能 ユーザー一覧、アイテム一覧、マイアイテム一覧の絞り込み検索が可能(Ajax)。 10 ランキング機能 全ユーザーorフォローのみ、期間を指定した投稿数上位10位のランキングを一覧表示。 使用イメージ(一部機能抜粋。番号は一覧のNo) 4. 投稿機能 「新規投稿」ボタンから投稿画面を開き、気になるアイテムを登録します。 (投稿画面はBootstrapのモーダル機能を利用しています。) 投稿にはアイテム名、投稿内容(コメント)、参考URL、タグ名を登録できます。 参考URLを入力した場合、投稿完了時に自動的にサムネイルを作成します。 タグはエンターを入力することでバッチ化します(tagsinputを使用)。 7. タグ付け機能 前述の通り、投稿時にはタグを登録でき、タグを利用することで似たジャンルのアイテムを探すことができます。 画面に表示されているタグバッチをクリックすると同名タグを含むアイテム一覧を表示します。 (上のgifではボドゲ→ゲームの順でタグをクリックし、絞り込みを行っています) 投稿作成時にはタグ名称でTagテーブルを検索し、同名タグがあれば既存レコードを使用、なければ新規に作成します。 8. マイアイテム機能 ヘッダー → アカウント → 「マイアイテム一覧画面」 からは、自分が登録したアイテムをリストで確認できます。 アイテムごとに完了済/未完了のステータスを設定することができ、実際に行ってみた場合などには完了済にできます。 マイアイテム一覧ではステータスごとで絞り込みを行えるため、まだ行っていないアイテムだけを確認することもできます。 9. 検索機能 ユーザー一覧/アイテム一覧/マイアイテム一覧では複数ワードによる絞り込み検索ができます。 (上のgifではアイテム一覧ページにて、タグ:ボドゲ、アイテム名:魔女、にて絞り込みを行っています。例ではあえて2ステップ踏んでいますが、もちろん1ステップでも可能です。) 検索はLike検索で、複数ワードがある場合はAND検索します。 リセットボタンを押すと検索が解除されます。 10. ランキング機能 ランキングページで他のユーザーに人気のものをチェックできます。 全ユーザー/フォローのみ、週間/月間/全期間での条件ごとで絞り込んだランキングを表示できます。 (上のgifでは「全ユーザー&週間」→「全ユーザー&月間」→「フォローのみ&月間」と切り替えています。) 使用技術/設計等 フロントエンド HTML Sass JavaScript(jQuery3.6.0) Bootstrap4.6.0 バックエンド Ruby3.0.2 Ruby on Rails 6.1.4 MySQL8.0.23 各種gem gem名 用途(記載している#は機能一覧の#を表します) devise #1のユーザー機能に使用。 carrierwavemini_magickfog-aws #1のアバター画像設定に使用。fog-awsを使用し保存先をS3バケットに設定。 httparty #4のサムネイル作成機能において、外部APIへのデータ送信およびレスポンスのHash変換に使用。 kaminari 各種ページのページネーションに使用。 counter_culture 一部モデルの件数を取得する際のN+1問題回避のため使用。 bullet N+1問題の検出に使用。 better_errorsbinding_of_caller エラー画面を見やすくするために使用 rspecfactory_bot_railsrubocop テストに使用 インフラ 本番環境 AWS(VPC、EC2、RDS、S3、Route53、ALB、ACM、IAM) Nginx1.20.0 Unicorn6.0.0 Capistrano3.16.0 CircleCI2.1 開発環境 Docker20.10.8 docker-compose1.29.2 その他のツール git2.25.1 / GitHub インフラ構成図 ローカルではWSL2とDocker、docker-composeを使用して開発しています。 ローカルで開発した内容をGitHubへpush→CircleCIで自動テスト(RuboCop&RSpec)→CapistranoでEC2上に自動デプロイという流れを経て公開しています。 ユーザーからの接続はRoute53を使用して独自ドメイン化、ALBとACMを使用して常時SSL接続を使用するよう設定しています。 EC2内ではwebサーバーにNginx、アプリケーションサーバーにUnicornを使用しています。 ユーザーのアバター画像用にS3バケットを使用しています。 投稿時のサムネイル作成用に外部サービスlinkpreviewのAPIを使用しています。 ER図 投稿時にはアイテム名を入力しますが、入力されたアイテム名でItemテーブルを検索し、同名アイテムが見つかれば既存レコードを使用、見つからなければ新規レコードを作成します。 投稿時にはタグ名を入力できますが、PostTagMapテーブルを中間テーブルとたTagテーブルを入力されたタグ名で検索し、同様に既存レコード使用or新規レコード作成を行います。 どちらのテーブルも同名のレコードが存在する場合はそれを引用、同名が見つからない場合のみ新規レコードを作成することでデータ数が無駄に増加するのを抑えています。 工夫した点 非同期通信(Ajax) 各種ページに非同期通信を採用し、リロードによるストレスを軽減するよう心がけました。 フォロー・いいね・コメントのAjax化 各種ページのタブ切替のAjax化 検索結果表示のAjax化 サムネイルの自動生成(外部API) 投稿作成時に入力した参考URLをもとに、サムネイルを自動生成する機能を実装しました。 背景として、アイテム名を見ただけでは他のユーザーが面白そうかイメージがわかないため、何か画像が欲しいと考えました。 とはいえ投稿者がいちいち画像を用意して添付するのは手間が増えすぎるため、linkpreviewという外部APIを利用しています。 このAPIでは投稿者が入力したURLをもとにサムネイル用のデータをJSONで返す機能が利用できるため、メソッドに組み込んでPostテーブルにサムネイル関連情報を保存→viewで表示できるよう実装しました。 小さな工夫として、サムネイル作成に少し時間がかかるためローディングサークルを表示して待機時間と分かるようにしました。 ランキング機能 利用者に人気のあるアイテムのトレンドが知れるようランキング機能を設けました。 タイムラインだけではフォローしている知人の興味しかわかりませんが、ランキングにより全く別傾向のものにも出会えます。 全ユーザー/フォローのみ、週間/月間/全期間での条件ごとでランキングを表示できます。 ここから気になったユーザーをフォローするなどして、面白いものをどんどん見つけられます。 今後の課題 転職活動をしつつ、下記のような改善を加えていければと考えています。 公開範囲の指定:投稿をフォロワーにのみ公開する設定 通知機能:フォロー、いいね、コメント等の通知 ソート機能:アイテムやユーザーの一覧ページにソート機能を追加(現在はID順のみ) インクリメンタルサーチ:検索結果を即時表示できるように 日程調整機能:ユーザー間で共通のものに興味を持っている際、複数ユーザー間でプライベートに日程を調整できる機能 評価機能:気になったものを実際に試した後に★などでランク付け GoogleChrome拡張機能:少し趣向が変わりますが、外部のページを開いている際にそのページ上で投稿できる拡張機能があるとものすごく便利になりそうです 感想 自分で考えたものがどんどん形になっていくため、製作していてとても面白かったです。 また、転職活動自体への有効性は別としても、ポートフォリオを作ることで自分の好きな領域や苦手な領域がだんだんわかってくるのも今後のキャリアプラン検討の糧にできそうです。 ポートフォリオ作成前の学習段階においては様々な書籍やサービス・記事を参考にさせていただきましたが、現在は独学でエンジニアを目指す方も増えているようで、ある程度学習のロードマップが確立されていることもあり助かりました。 とはいえ、勉強を一通り終えていざポートフォリオ作成!となると何から手を付けるのか分からなかったり、エラーが多発したりと苦労の連続でしたが、乗り越えた時の快感はたまらないものがありますね。 前述の本ポートフォリオの改善しかり、引き続き精進します! ここまで読んでいただきありがとうございました!
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Rails初心者 「rails s -b 0.0.0.0」でサーバー立ち上げ時にエラーが起きた時の対処方法【自分用備忘録】

この記事の対象 Railsをインストールし、アプリを作成して、ローカルサーバーを立ち上げ用としたら以下のエラーが返ってきた Error: No such file or directory @ realpath_rec - /Users/アプリの保存場所/アプリ名/config/webpacker.yml (RuntimeError) RailsのバージョンによってはRailsの他にインストールが必要なパッケージがある Rails6からという記事を見たが、、、以下の2つをインストールしなければサーバーが立ちあがらない webpacker yarn webpackerのインストール rails webpacker:install もし「Yarn」がインストールされていなければ以下のエラーが出ます Yarn not installed. Please download and install Yarn from https://yarnpkg.com/lang/en/docs/install/ Exiting! yarnのインストール [Homebrewを使用] brew install yarn →完了!! webpackerのインストールに戻る 「rails s -b 0.0.0.0」を起動 いかがでしょうか。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む