データベース設計をする事になりました

こんにちは、ぐっちと申します。

個人アプリ開発も一段落し、ついにカリキュラムは最終課題に突入しました。

最終課題は、スクラムを用いたアジャイル開発で、私のチームは４人になり、初めて顔合わせをする方もいました。

開発するのは、某通販サイトもどきという事で少し前から触って色々確認していました。

チームでのルールやスクラムマスター等を決め、私が最初に取り組むタスクはデータベース設計になりました。

今まで作ったアプリは、多くてもテーブルが４つだったので、もどきでも実際にリリースしているサイトのデータベースともなると、複雑な繋がり等があり難しそうで今から不安ですが、何とか設計しようと思います。

先輩方からのアドバイスでは、何よりチームワークが大切との事なので、メンバーと協力して開発をしていきたいと思います。

ここまで読んでくださり、ありがとうございました。

 ツイッターで日々の学習をつぶやいています（@Yamaguc45844169）

Herokuでのデプロイで色々詰まった５

こんにちは、ぐっちと申します。

前回に続き、本番環境にデプロイした後に起こった事について書いていきます。

投稿画像が時間が経つと消える

私が開発したアプリは画像が投稿出来るのですが、投稿直後は問題なく画像が表示されますが、時間が経つと表示されなくなってしまいます。

ここまで来るともう驚きもしない、冷静に検索すると

• Heroku 上の Git リポジトリに Push すると、アプリケーションをビルドし、必要なファイルをかき集めて Slug と呼ばれるパッケージが作成される。
• Slug は Dyno と呼ばれる仮想の Unix コンテナにデプロイされ実行される。
• 実行された Web アプリには、インターネット越しにブラウザなどからアクセスできるようになる。

というHerokuの詳細と共に

一定時間が経つと、Heroku上のリポジトリ (Dyno) が最後のコミットの状態にリセットされる。

と書いてありました。

なるほど、画像は本番環境でもpublicに保存される様になっていたので、最後のコミットの状態にリセットされてしまったら消えてしまいます。

対処法としてクラウドストレージに保存する方法が紹介されていたので、AWS Amazon S3に保存先を変更する事にしました。

幸いカリキュラムで一度やった事なので、そこまで苦労する事なく保存先をS3に変更し、画像は消える事はなくなりました。

これで今の所不具合は見つからず、正常に動いています。

この個人アプリ開発で、沢山のエラーや不具合に出会いそれを一人で解決した事で、少しだけですが自信がついた気がします。

ここまで読んでくださり、ありがとうございました。

 ツイッターで日々の学習をつぶやいています（@Yamaguc45844169）

Herokuでのデプロイで色々詰まった４

こんにちは、ぐっちと申します。

前回に続いて、本番環境にデプロイした後に起こった事について書いていきたいと思います。

日本語のソートがおかしい

 データベースからレコードを五十音順に並べて表示しているページがあるのですが、並びがローカルの時とまるで違う。

具体的には

「アイ」「アイサツ」「イエス」「イヌ」と並んでいたものが、

「アイ」「イヌ」「イエス」「アイサツ」という並びになっている……

どうやら文字数別に、五十音順で並んでいる模様。

色々調べると、原因はローカルではデータベースがMySQLで、HerokuではHeroku Postgres というデータベースを使っており、デフォルトのソート方法が違う為でした。

実際に私が行った解決手順は

１. ターミナルにて、ローカルのアプリディレクトリへ移動

２. $ heroku pg:psql コマンドでデータベースへ接続

３. =>SHOW LC_COLLATE; コマンドでソートを確認

=> SHOW LC_COLLATE;
 lc_collate
-------------
 en_US.UTF-8
(1 row)

この en_US.UTF-8 というのが、日本語のソートを変にしている様です。

４.  ALTER TABLE モデル名 ALTER COLUMN カラム名 TYPE VARCHAR COLLATE "ja_JP.utf8"; コマンドでテーブル・カラムを指定して、ソートを変更

５.=> \d テーブル名 コマンドで変更されているか確認

   Column    |            Type                      |  Collation  | Nullable |              Default              

-------------+-----------------------------+------------+----------+-----------------------------------

id                | bigint                                |                  |  not null  | nextval('birds_id_seq'::regclass)

name          | character varying             | ja_JP.utf8  |  not null  |

name のCollation がja_JP.utf8 に変わっています。

本番環境にアクセスした所、並び方が変わっていました。

 ローカルと環境が違うので、デプロイは改めて難しいものだと思いました。

ここまで読んでくださり、ありがとうございました。

 ツイッターで日々の学習をつぶやいています（@Yamaguc45844169）

Herokuでのデプロイで色々詰まった３

こんにちは、ぐっちと申します。

今回からは、本番環境にデプロイした後に起こった事について書いていきたいと思います。

$ git push heroku masterコマンドが成功して、本番環境でアプリを動かした所、GoogleMspが表示されない……

Consoleを見ると「APIKeyが無い」と出ている

今考えれば簡単な事ですが、初心者の私は頭が「？？？」と言う感じになりました。

APIは問題なく設定してあるのに何故？今までこんな事にはなっていなかったのに……

色々検索して原因を調べましたが中々望むものは出てこない、息抜きに休憩している時に、ApiKeyは.envファイルに環境変数で設定してあるのになんでかな？と考えていると、あ……！やっと間違いに気がつきました。

そう、デプロイ時に行ったコマンドは $ git push heroku master で masterブランチのファイル達が本番環境で読み込まれており、当然そこには .gitignore に記述した .envファイルは無い訳で、ApiKeyが見つからないのは当たり前です。

Heroku 環境変数 で調べるとすぐに解決しました。

ローカルで $ heroku config:set [変数]=[値]コマンドを実行することで設定できるみたいなので、早速設定して問題なくMapが表示されました。

分かってしまえば簡単な事でしたが、気が付くまでに時間が掛かってしまった、また一つ勉強になりました。

ここまで読んでくださり、ありがとうございました。

 ツイッターで日々の学習をつぶやいています（@Yamaguc45844169）

Herokuでのデプロイで色々詰まった２

こんにちは、ぐっちと申します。

前回に引き続きHerokuでデプロイする際に遭遇した事について書いていきます。

Bundlerのバージョンによる不具合をなんとか解決し、もう一度 git push heroku master コマンドを実行した所、今度は以下の様なエラーが……

remote:        Running: rake assets:precompile
remote:        Yarn executable was not detected in the system.
remote:        rake aborted!
remote:        Uglifier::Error: Unexpected character '`'
...中略...
remote: 
remote:  !
remote:  !     Precompiling assets failed.
remote:  !
remote:  !     Push rejected, failed to compile Ruby app.

要約すると「予期しない文字 ` があるのでプリコンパイルに失敗しました」という事らしい

因みに…中略…の所には ` が使われているコードが沢山出てきました。

`  はバッククォートと言いJavascriptでテンプレートリテラルという記法で使用しています。

テンプレートリテラル記法とは物凄くざっくり言うと、' シングルクォートや " ダブルクォートで文字列を囲んだ時よりも、色々便利な事が出来る記法です。

どうやらそのバッククォートが悪さをしている様なので、解決策を求めて検索をしてみると、今回は思いの外早く目的の情報を見つけられました。

エラーログに Uglifier::Error とありますが、Uglifierと言うのはRailsデフォルト搭載のJS軽量化gemで、このgemはJavascriptのES5までの機能に対応しており、テンプレートリテラル等のES6の機能を使用しているとエラーが出るとの事

production.rbの設定変更で対応が可能の様で 

これを

config/environments/production.rb

config.assets.js_compressor = :uglifier

こうして

config/environments/production.rb

config.assets.js_compressor = Uglifier.new(harmony: true)

 無事コンパイルも出来 git push heroku master コマンドは成功しました。

しかし、本番環境で動かすまでには色々ありました。

次回は本番環境で動かしてからの問題について書きたいと思います。

ここまで読んでくださり、ありがとうございました。

 ツイッターで日々の学習をつぶやいています（@Yamaguc45844169）

Herokuでのデプロイで色々詰まった

こんにちは、ぐっちと申します。

今回からHerokuでデプロイする際に遭遇した色々な事について書いて行きたいと思います。

カリキュラムでは一度AWSでデプロイをしており、Herokuは煩わしい手順も無くて簡単にデプロイ出来ると聞いていました。

早速アカウントを作成して、Heroku CLI・データベースPostgreSQLのGEM 'pg'のインストール、database.ymlの編集、config/environments/production.rbの編集を行い、

heroku create でアプリを登録までは順調でした。

いざ git push heroku master をするとこんなログが出てデプロイが出来ない 

remote: ensure you can run `$ bundle exec rake -P` against your app
remote: and using the production group of your Gemfile.
remote: Activating bundler (2.0.1) failed:
remote: Could not find 'bundler' (2.0.1) required by your /tmp/build_94d6a4f5d4fbb862672998d5d06d/Gemfile.lock.
remote: To update to the latest version installed on your system, run `bundle update --bundler`.
remote: To install the missing version, run `gem install bundler:2.0.1`
remote: Checked in 'GEM_PATH=/tmp/build_94d6a4f5d4fbb862672998d5d06d/vendor/bundle/ruby/2.7.0', execute `gem env` for more information
remote: 
remote: To install the version of bundler this project requires, run `gem install bundler -v '2.0.1'`

要約すると「'bundler'（2.0.1）が見つかりませんでした 。 `gem install bundler：2.0.1`を実行してください。」という事らしい。

 

Gemfile.lock.を見ると

BUNDLED WITH

2.0.1

とありbundler：2.0.1はインストールされている筈なのに、'bundler'（2.0.1）が見つかりませんでした 」とはどういう事なの？と頭を抱えていましたが、調べると同じ現象に遭遇した人の記事を見つけました。

 

Herokuは2019年6月13日にリリースされたBundler 2.0.2を使い始めたそうで、その関係で引き起こされている不具合という事でした。

 

Bundlerを2.0.2にアップデートした所、この不具合は解消しました。

 

しかし、今度はまた別の問題が発生しました。それはまた次回に書きたいと思います。

 

今回の不具合は公式にも記載されており、やはり公式に目を通す事は大事だと再確認できました。

 

ここまで読んでくださり、ありがとうございました。

 ツイッターで日々の学習をつぶやいています（@Yamaguc45844169）

 

letter-spacing と text-indent で等間隔で中央揃え

こんにちは、ぐっちと申します。

今回は前回書いたドロップダウンリスト作成中に、リストの文字を等間隔で表示しようとした時の話をしようと思います。

編集・削除という文字を下図の様に、要素の中に等間隔で配置したかったので

 とりあえず text-align: center; を当てた場合はこんな感じになる

半角スペースを入れてみる

間が狭いので全角スペースにしてみる

 やっぱり等間隔にはならないので、別の方法を考える事に……

そもそもスペースで調節するとか邪道な気がします。微調整出来ませんし……

調べるとテキストの文字間を指定するCSS「letter-spacing」があるみたいなので早速当ててみると……

想像していたのと違う……

どうやらこれは文字の後ろに隙間が適応されている為で

「編□集□」こんな感じになっている様です。

もうちょっと調べると「text-indent」という文章の一行目のインデント幅を指定するものがある事が分かり、「letter-spacing」と同じ値を指定して無事等間隔になりました。

今回は2文字でしたが、文字数が多い程有用なやり方だと思いました。

ここまで読んでくださり、ありがとうございました。

 ツイッターで日々の学習をつぶやいています（@Yamaguc45844169）