実装したいこと ドーナツグラフの真ん中に合計額 ラベルはグラフ上に表示 ラベルが細かくて重なってしまう場合は非表示 凡例を非表示 chartkickを使用したら、簡単に実装できました。 ただ、chartkick × Highchartsについての日本語記事がほぼない＆各オプシ…

ちょっと詰まったのでメモ フォーム入力画面でplaceholderを表示させたいけど、デフォルト値を設定していたため、表示できない 良し悪しは置いといて、default値を削除したい。 DBはMySQL Rails 6.0.3.4 試したけど、できなかったmigrationスクリプト class …

モデルスペックは通るのに、システムスペックを追加したら、ローカルではパスするのにCircleCI上で落ちるようになった。 半日苦しんだので、メモ ローカルでjobを実行できない ❯ circleci local execute --job build Docker image digest: sha256:ed0cf0f38d…

アソシエーションは以下のとおりで、1対1の関係 class User < ApplicationRecord has_one :user_profile, dependent: :destroy end class UserProfile < ApplicationRecord belongs_to :user end class UserProfilesController < ApplicationController # 略…

半日以上かかってしまったので、エラー部分について自分用に反省メモφ(･･ 127.0.0.1:3000 に飛びたいのに何故か/loginに遷移する Twitterログインボタンを設置しているTOPページに遷移するためのstatic_pages_controller.rbでskip_before_action :require_lo…

CircleCI githubにpushすると同時にCircleCIが起動し、RSpecテストやrubocopのLintチェックを自動で走らせてくれます。 私はズボラでpush前にrubocopやRSpecを実行するのを忘れがちなので、正しいコードをmergeできるようにCircleCIを導入しました。 詰まり…

rails new そもそも、railsコマンドを使ったら、command not foundのエラーが出たので、gem install rails install実行してインストール。 rails new オプションいろいろ rails newコマンドを実行するにあたり、オプションを指定しておきます。 ~/workspace/…

Rubyのversion指定で詰まったのでメモ rbenvはインストール済みです。 Rubyインストール ❯ rbenv install 2.7.2 Rubyバージョンを指定 システム全体で使用するRubyのバージョンを指定するために、rbenv globalコマンドを実行。(そもそも、globalは強引でよく…

設計の段階で何を使っていいか戸惑うことがあったのでメモφ(･･ 使ったツールなど、適宜更新していく。 画面遷移図 adobeXDを使用。 画面遷移の順番を指定できる。 リンクも作成できるので、READMEに貼り付けられる。 画面遷移の順番がうまく指定できず悩んだ…

エラーを出しまくったので、繰り返さないようにメモ。 wrong number of arguments Postmanを使って、articleの更新と削除を試していたのに、できない。 新規作成のPOSTと一覧取得のGETは問題なし。 コードは基礎的なものだしパッと見間違っていなそう… error…

response.headers HTTPheaderのAccessTokenにtokenをセットしたいとき Provides access to the request's HTTP headers, for example: response.headers['AccessToken'] = token Action Controller の概要 - Railsガイド ActionDispatch::Request class Net:…

知らないメソッドといくつか出会ったので、メモ SecureRandom.uuid UUID (Universally Unique IDentifier) を生成して返します。 SecureRandom.uuid (Ruby 2.7.0 リファレンスマニュアル) 例えば、ログイン認証で使うaccess_tokenを安全な乱数にするときに使…

少し詰まったのでメモ コントローラーとかルーティング部分は省略。 右の入力方式をJSONにしてなくて、送信できてなかった… PostmanPostman

fast_jsonapiとは Netflixが提供しているgemで、JSONのserializerです。 This project is no longer maintained!!!! ⚠️ってなってるけど使っていいのかな…？ 公式に沿って進めていきます。 GitHub - Netflix/fast_jsonapi: No Longer Maintained - A lightni…

実装したいこと Vuexのストアをモジュールに分割して読み込みたい。 アプリケーションの規模が大きくなると、ストアの規模も大きくなり管理が困難になるため、ストアを適切に分割し管理したい。 モジュール | Vuex モジュールを読み込む store/index.jsにま…

セレクトボックスを生成するときに、enumで定義した内容とリンクさせたい。 select enum status: { todo: 1, doing: 2, done: 3 } option valueにenumで定義した内容を渡せばOK <div class="form-group"> <label for="status">ステータス</label> <select name="ステータス" class="form-control" id="status" v-model="task.status"> <option value="todo">TODO</option> </select></div>

編集時のデータの渡し方 タスク管理アプリで、タスクを編集するときのデータのやり取りについて詰まったのでメモ。 親からtaskデータをpropsで受け取り、v-modelでデータを入力値をバインドしたいです。 ただし、オブジェクトが格納された変数をコピーしても…

詰まりに詰まってしまったので、メモを残しておきます。 子から親へデータを渡すとき まず、Vuexは使わない単純なやり方です。 子コンポーネントでタスク名・タスク説明文を入力し、親にデータを渡します。 そして親がAPIでその内容をPOSTします。 ※説明に必…

実装したいこと タスク一覧があり、それぞれのタスクタイトルをクリックすると、モーダルウィンドウでタスクの詳細が表示される。 データの流れ 細かいコード内容は省き、大まかな流れだけ追います。 データの流れの説明に必要な部分だけ切り取っているので…

同じミスを数回繰り返してしまったのでメモ エラー画面 「インスタンスで定義されていないのに、レンダーで参照されてるよ」とエラー vue.runtime.esm.js:638 [Vue warn]: Property or method "modalTask" is not defined on the instance but referenced du…

実装したいこと 使用バージョン 実装の流れ そもそも、APIって？ Tasks controller Routing namespace忘れでエラー発生 CSRF対策無効化 Vue.jsでAPIを使用する axiosインストール APIから取得したデータを表示（基本構文） axios設定 Vueファイル設定 curl …

実装したいこと Vue Routerを使い、画面遷移機能を実装したいです。 タスク管理アプリで、トップ画面⇔タスク一覧画面と遷移できるように設定していきます。 Vue.jsは初めて使うので、データの流れが分からず実装に時間がかかってしまいました。復習していき…

エラー発生 復習用に簡単なCRUD機能のついた記事投稿アプリを作成しています。 削除用のボタンを押しても削除されず、なぜかshow詳細ページへ遷移してしまう…。 method: :deleteで指定し、Cromeの検証画面でも正常にみえるのに… Crome検証画面 = link_to 'de…

all_day 昨日作った記事だけ取得するscopeを作りたかったとき、Date.yesterdayやTime.current.yesterdayだと想定している挙動にならない… all_dayを使う！ # NG scope :yesterday_published, -> { where(published_at: Date.yesterday) } # Good scope :yest…

実装したいこと 複数枚の画像を一度にアップロードする Model Controller View 躓いたところ アップロードした画像を削除するには Controller Rooting View 実装したいこと 以前、ActiveStorageを使って画像をアップロードする機能を実装しました。 今回は、…

実装したいこと 以前、gemのCarrier Waveを使って画像アップロード機能を実装しました。 今回は試しにActive Storageを使用してみたいと思います。 初めて使ったのですが、すごく簡単でした。 ただし、ファイルの形式のバリデーションやデフォルト画像の設定…

実装したいこと 記事投稿アプリで、YoutubeやTwitterを記事に埋め込みたい。 URLを入力したら、埋め込み用に変換して、記事に反映させたい。 Slim記法が苦手で、HTMLに反映させるのに手こずってしまいました。。便利ツールを使ってようやくできた。（後述） …

実装したいこと 画像投稿機能について、前回実装した内容をテストしたい 画像選択の仕方と、画像の位置をどう判定するのか悩みました。 study-diary.hatenadiary.jp 前提 RSpec、Factory Botは設定済みです。 Active Storageセットアップ Active Storageのサ…

実装したいこと 記事投稿アプリで、記事のアイキャッチ画像を設定できます。 アイキャッチ画像をユーザーの入力した幅に設定したい。 アイキャッチ画像をユーザーの選択した位置に設定したい。 前提 記事投稿の機能は実装済です。 今回は画像の表示を変更す…

初期設定 config/application.rb モジュール内に以下を記入。 ※私は誤ってモジュール外に記入し、rails sエラー「undefined method 'config'」となって数十分溶かしました。 config.i18n.default_locale = :ja ##デフォルトの言語設定 config.i18n.load_path…