2018-01-01から1年間の記事一覧
ユーザ情報登録ページで、 郵便番号入力→「住所を取得」ボタンクリック→住所欄に取得したデータを表示 を実装しました。
Herokuにデプロイしたあと、UserのCreateがロールバックされてしまい、その理由がログに出ないので困り果てていました。 def create @user = User.new(user_params) @user.save! end save!で例外を発生させるようにすると、ログにエラー内容が出るようになり…
v-bind:classにオブジェクトを渡すことで、クラスを動的に切り替えることが可能です。 <div v-bind:class="{ active : loggedIn }"> <p>投稿する</P> </div> 渡すオブジェクトを算出プロパティとして作成すると、より複雑な処理が可能になります。 <div v-bind:class="classObject"> <p>投稿する</P> </div> vueファイル data: { loggedIn: true, error: null }, co…
アクセスした時点での週の始まりと終わりを返すメソッドです。 2018年12月31日 (月) ～ 2019年1月6日 (日) という形になります。
検索で来た方はこちらのページが綺麗にまとまっていて分かりやすいです。 pizzamanz.net
「プロジェクトの追加」をクリックすると入力画面が開くので入力してプロジェクト作成
アプリケーションの複雑な状態管理を実現してくれるVuexを導入します。 npm install vuex --save store.jsを作成します。
Railsプロジェクトの作成とVueのインストールは省略。 /app/views/layouts/application.html.erb <body> <div id="potatoSNS"> <%= yield %> </div> <%= javascript_pack_tag 'main' %> <%= stylesheet_pack_tag 'main' %> </body>
やりたかった事は ・Vue.jsの基本的な操作おさらい ・RailsはAPIのみに専念させる ・郵便番号から住所を取得するメソッド ・ユーザーに何かしらの数値を持たせて管理する
今日、とあるWeb系企業様の二度目の採用面接で、技術試験を受けた。 実際に動いているアプリケーションに対してある項目を追加するという課題で、それに伴う記述も簡単なものだった。 結論から言うと、現時点ではまだまだ技術的に足りなかった。 担当してく…
技術評論社から出ている『Vue.js入門 基礎から実践プリケーション開発まで』を手に入れた。 前回の競走成績ジェネレーターではRailsのプロジェクトの中でVue.jsを動かすという形で作ったけど、Vue.js主体でアプリケーションを作ることもできるのか？という疑…
Rails + Nokogiri + Vue.jsを使ってシングルページアプリケーションを作りました。 史上5頭目の三冠牝馬アーモンドアイの競走成績表を作成してチェックできるアプリケーションです。 ネット競馬.comをスクレイピングしたデータをもとにRailsのモデルオブジェ…
v-forディレクティブのなかでv-on:click="メソッド()"の引数に配列の要素を渡す 特別な書き方は必要なく、そのまま書ける。
モーダル表示中はモーダル外を暗くしてその暗い部分をクリックしたときにモーダルが閉じるようにする。 やり方はこんな感じ イメージ
非遷移でVue.jsとRailsがやり取りするにあたって、失敗時の処理を分岐させる方法です。 以下のような形で実装しました。 ①Rails内の処理が成功したか失敗したかを、それぞれ別のJSONを返すことで判定 ②Vue.jsでは、返ってきたJSONによって成否を判断して処理…
シングルページアプリケーションなのでデータの削除時も非遷移で表示が変更されなければいけません。 しかし、Vueのメソッド内で ・axiosでdeleteリクエストを送信 ・データ取得メソッドを実行 とそのまま記述しても ①axiosでdeleteリクエストを送信 ②データ…
１つのレースオブジェクト { name: 桜花賞, location: 阪神, weather: 晴 } 複数のレコードオブジェクト（配列） [ { name: 馬A, jockey: 騎手A }, { name: 馬B, jockey: 騎手B }, ...... ] これらを同時にVue.jsから投げ、Railsで取得してそれぞれのモデル…
Herokuに自作アプリケーションをデプロイしたものの、どうも最初にアクセスするときに時間がかかりタイムアウトのエラー(H12)が出る。 開発環境ではスッとアクセスできる。 とりあえずHerokuのログを見てみる。 INFO -- : [3b31ed68-8e79-4c34-b04b-d2c8d08a…
またしてもデータベースの違いでつまづきました。 とりあえずこれですべて片付いたとは思うけど、今度から開発環境と本番環境で同じDBを使おうと心に誓いました……。 現象 記事(article)にいいね数(likes_count)カラムがあり、その数値でソートして人気記事ラ…
20日間ほどかけて取り組んできたブログサービスをHerokuにデプロイしたところ以下のエラーが。 ActiveRecord::StatementInvalid (PG::UndefinedFunction: ERROR: function strftime(unknown, timestamp without time zone) does not exist LINE 1: SELECT CO…
Railsアプリにいいね機能を実装しました。 作っているのがブログサービスなのでArticleにいいね（Like)をする形になってますが、ツイッター風アプリケーションであればArticleはTweetに置き換えて読んでください。 前提 Rails : 5.2.1 ツイッターのふぁぼ（…
Rails: 5.2.1 fields_forを使うとひとつのフォームから複数のモデルを作成・編集することができます。 モデルの構成は、Blog has_one Category 上記はBlogモデルの編集フォームですが、入力欄3つ目の「ブログのカテゴリー」を入力して変更ボタンを押すとCate…
作成中のブログアプリケーションに月別アーカイブの機能を実装しました。 こんな感じのやつです。 前提 Rails: 5.2.1 リレーションは User has_one Blog, Blog has_many Articles です。 はじめにメソッドを用意 まずブログ記事の :created_at を元に月別に…
ブログの記事一覧にページネーションを導入しようと、Railsチュートリアルの10章を参考にやってみたけどBootstrapがうまく反映されず。 調べてみたらBootstrap4だと少し違う方法になるようなので、まとめました。 前提 Rails: 5.2.1 Bootstrap4: 4.1.3 (今回…
『Everyday Rails - RSpecによるRailsテスト入門』を読んでRSpecを使い始めました。 以下メモ ファクトリ ↓spec/factories/users.rb FactoryBot.define do factory :user do name "マイク" text "こんにちわです" sequence(:email) { |n| "tester#{n}0@examp…
Basecampが開発しているWYSIWYGエディタ、TrixをRailsに導入しました。 Railsプロジェクトは作成中のブログサービスアプリケーション。 ブログ記事の作成ページにエディタを導入します。 バージョン Rails 5.2.1 Trix 0.10.1 インストール まずgemを導入しま…
現象 一昨日からAWS Cloud9でenvironmentに接続しようとしても「connecting...」のまま数分動かず、そのまま放置していると This is taking longer than expected. If you think there might be an issue, contact AWS Support. It might be caused by VPC c…
前置き 自作中のTODOアプリではタスクの表示順を自由に入れ替えできるようになっています。 indexページには User の Task 一覧を表示 表示の順番はranked-model gemを使って :row_order の値で制御 それぞれの Task はjQueryUIのsortableを導入してドラッグ…
表示に必要なデータはプログラム側で用意し、 テンプレートではデータを埋め込む場所や表示方法などを記述する。 前置き 「そのタスクがいくつのサブタスクを保持しているか」をindex画面に表示しています。 この部分のコードが以下です。 <td><%= task.subtasks</td>…
前置き 作成中のTODOアプリでは、ユーザーがタスクを複数所有し、それぞれのタスクがサブタスクを複数所有しています。 アクションメソッド（数個だけ抜粋） def show @user = User.find(params[:user_id]) @task = Task.find(params[:task_id]) @subtask = …
