Vue.jsのアプリをGithubに記録して、Herokuにデプロイする方法
今回は、ログ残しで書いている感じです。おそらく、今回詰まったところは他の方々がつまらない所なので 簡単に流れのみ書きます。
何に悩んだか??
タイトル通りの内容ですね。
「Githubに記録を残せるけど、Herokuにデプロイできない。」
「Herokuにデプロイできるけど、Githubに記録を残せない。」
要は片方しか出来なかったんですよね。
どう解決したか？？
結論
以下のように変更したら上手く行きました。
before
Githubのリポジトリをgit clone ↓ vue create アプリ名(自分がやったコマンドと少し違うけど) ↓ git 〇〇的なコマンドを色々とする。 ↓ Herokuにデプロイ
after
vue create アプリ名 ↓ git init ↓ git add ↓ git commit ↓ Githubにリポジトリ作成 ↓ git remote add [リポジトリのURL] ↓ git push -f origin master # エラーが出たのでfコマンドで強制的にやりました。 ↓ herokuにデプロイ
上記のようにしたら上手く行きました。
おそらくリポジトリを作るタイミングを間違えてたように思いました。
ちなみに
リポジトリ作成やgitコマンドのタイミングは以下の記事を見て参考にして
Herokuにデプロイするまでの流れは以下の記事を見て参考にしました。
以上です。
ps
beforeの部分
vue create .(ドット)とすれば あの手順でもうまくいったかもしれない。
参考
Githubでプルリクをするとき"There isn't anything to compare"といわれたときの対処法 - Qiita
PV数やUU数って何？？
Webエンジニアの転職活動において、「ポートフォリオのPV数やUU数を記載した方がいいよ」と言われることがあると思うのですが、自分はそれを言われてこのように思いました。
そもそもPV数やUU数って何？？ どうすればそれ分かるの？？
この記事は僕のように悩んだ方に向けて書いた記事です。おそらく初学者向けの内容になると思います。
そもそもPV数やUU数って何？？
PV数（ページビュー数）
ユーザーがページを閲覧した回数のことを指します。
ページごとの表示回数を把握することで、Webサイトのどのページやコーナーにユーザーの注目が集まっているのか知ることができます。
PV数は開いたページ数全てがカウントされるので、かなり数は多くなります。
UU数（ユニークユーザー数）
一定期間内において、Webサイトを訪問した人数のことを指します。
同一期間内に同じ人が同一デバイスで何度Webサイトを訪問しても、ユニークユーザー数は1とカウントされます。 (ただし同じ人物であってもWebサイトにアクセスしたデバイスが異なると、UU数は2とカウントされます。)
他にも色々詳しいことがあるみたいですが、この記事では概要だけ伝えたかったのでここまでにします。 詳しいことは以下の記事などを参考にされたらいいのではないかと思います。
どうやって調べるの？
自分はGoogle AnalyticsというWebサイトのアクセス状況を分析できるツールを使用しました。
導入方法や使用方法は以下の記事を参考にされたらいいと思います。
またその後のRailsへGoogle Analyticsを組み込む方法はこちらの記事を参考にされたらいいと思います。
自分は以下のようにしてPV数とUU数を調べました。
PV数 ： レポート→エンゲージメント→エンゲージメントの概要で表示される画面の「表示回数」（イベント数ではないです） UU数 ： ユーザー→ユーザー属性→詳細（初期表示だ対象期間が7日間になってるはずなので一番長い期間に切り替えてる。）
以上です。
今回は簡単な概要と自分がどのように調べたか記載させていただきました。
参考
【Google アナリティクス 基本用語】必須で知っておくべき「UU（ユニークユーザー）」とは？ ｜ SiTest (サイテスト) ブログ
UU数とは？セッション数との違い、Googleアナリティクスでの確認方法を解説 | WEB集客ラボ byGMO（GMO TECH）
オフラインもくもく会を企画しました！！
はじめに
6月26日に関西の某所でオフラインもくもく会を企画しました。
オフラインもくもく会に関しての知見をまとめた記事は僕が見た限りあまりなく今回の内容を記載すれば、皆さんに何かしらの情報提供ができるのではないかと思い 記載しようと考えました。
前提
自分は今までオフラインもくもく会に参加したことがございませんでした。
本当に手探りで色々なことを考えていきました。
ある時に実際にもくもく会を企画したことがある人にその話をしたら「やりすぎやで😅」と言われました。
そのため、もしかしたら他に実際に参加したことがある方からすれば今回のことを記載したら「それは少し違うな」と思うかもしれませんが、あくまで個人的な見解としてみていただけるとありがたいです。よろしくお願いします🙇♂️
企画しようと思ったキッカケ
Twitterでニーズがあったからですね。東京ではやっている人は見てきたけど関西でやったことがある人を見たことないので、これを実現させたらオモロいことになるんやないかと思ったからです。
何人でやったのか
まず一人ではできないと思ったので、何人か有志を募りました。
自分はRUNTEQというプログラミンスクールに所属しているので そこの受講生の中からメンバーを募集しました。
ちなみにこのメンバーも誰もオフラインもくもく会に参加した経験はありませんでした。
つまり全員がオフラインもくもく会についてわからない状態で手探りで色々考えていった訳です💧
主催をする上で心掛けたこと
まずにオンラインで週に1回ミーティングをするようにしました。
その時に主催として一番心掛けたことは
みんなが意見を出せるような雰囲気作りを一番意識しました。
具体的には
・参加者の方に「〜さんはどう思いますか？」と意見を求めて なるべくその人の意見を否定せずに取り入れようとしました。 (万が一、否定するにしても言葉を選ぶようにしました。） ・各々に担当を割り振ってチームメンバーそれぞれに責任感を持ってもらうようにしました。
実際に実行委員メンバーからも以下のようなお褒めの言葉をいただきました。
・比較的各々が気負うことなく発言できること。 その発言に対しての賛否も言いやすく、意見交換が活発にできたこと。 そのことが問題点改善が迅速にできたのではないかと思っている ・役割分担などがあり、効率的に進められた ・未経験ながらに様々なことに挑戦できた。
他にも以下のようなことをしました。
・事前資料を作成して議題を明確にした。 ・ミーティング後に記録を取って、自分たちが認識した内容を目に見える形で言語化した。
連絡手段を統一
連絡手段はチャット用とミーティング用に分けました。
理由としては以下の役割に分けたからです。
チャット用
緊急事態が発生した時、早急に連絡が取れて問題点に関しての改善に迅速に対応できるため
ミーティング用
直接、話し合うことで各々の認識の食い違いを未然に防ぐため
ツールとしては以下の二つを使用しました。
チャット用
オンプレ型のチャットツール「Mattermost」を使ってみよう – リックソフト公式ブログ（Ricksoft Blog）
ミーティング用
【完全版】超便利！Discord（ディスコード）の使い方。ゲーマーに1番人気の理由も紹介！｜スマートフォンAQUOS：シャープ
ここまで読んでいただいた方々お待たせしました。
ではいよいよ本題に入っていきます。
会場選び
僕たちは以下のサイトで会場を決定しました。
他にも以下のサイトも有名ですね。
この会場選びにおいてめちゃくちゃ大事なことがあります。
会場内にWi-Fiがつながっているかどうか絶対に確認してください！！
僕たちはここを疎かにして、会場を変更せざるを得なくなりキャンセル料を支払わないといけない羽目になりました。
不安な時は、予約する前に事前に担当者に問い合わせましょう！！
ちなみにWiFiに関して「10台以上のPC同時接続できますか？？」と質問した場合
「理論上はできるけど、実際に試したことないので保証はできない。」
上記の回答が来た場合、大概できると判断してもいいかもしれないです。
僕たちはこの返答が来て、結局はうまくできました。
（注：絶対にできるという訳ではないのでここに関しては自己責任でお願いします😅）
会場選びの反省点としては実行委員のあるメンバーがうまい表現をしてくれたので載せておきます。
会場選びにおいて、検索し始めるよりも先に何が優先事項なのかを擦り合わせるべきだった。
参加者募集
こちらに関して 事前に関西でやりたいというニーズがあるのを把握していたのと
同じプログラミンスクール仲間でコミュニティをすでに形成していたので
正直そこまで苦労はしなかったです。
ただ、以下のサイトで参加者を募集したという記事を見かけたのでリンクのみ貼らせてもらいます。
参考
出欠確認
以下のサイトを使用しました。
当日のタイムスケジュール
今回、主催として以下のような秘めたるテーマを設定していました。
「オフラインで直接会って様々な人と交流をしてもらって
色々と情報交換をして欲しい！」
上記のテーマを軸に色々ともくもく会のタイムスケジュールを思案していきました。
まず参加者の名前を事前に把握できるようにネームプレートを用意しました。
次にタイムスケジュールに関して具体的には以下のことをしました。
もくもく会 性格診断 相談会 ボードゲーム
個々のことを簡単に説明させてもらいます。
これはタイトルどおりですね。各々が好きな勉強をもくもくやる感じでしたね。
性格診断
上記の性格診断をして各々の性格を発表をしてもらって、みんながどのような性格を知ってもらい交流を図る感じですね。
相談会
懇親会みたいな感じかな。 ここで色々な話をしゃべりたい人と話してもらって交流を深めてもらう。 もちろん、勉強の相談などもしてもOK!!
という感じでやりました。
（この時に参加者の中で実力のある人には相談役をして欲しいと事前に依頼しました。）
同じことを何回も書いてしまって申し訳ないのですが
これも交流を深めるために取り行いましたね😅
ただ参加者の中に人見知りの方もいると思うので そういう方にとっては一番ボードゲームが交流を深めやすいのではないかと思いました。
実際に行ったゲームのリンクを貼らせてもらいます。
最後に当日に関しても色々反省点があったので
そちらも箇条書きで列挙させてもらいます。
・昼食場所を事前に予約しても良かったかもしれない。 （実は参加者が道に迷わないように事前に会場の下調べをしたのですが この時にお店のことも詳しく調べるべきだったかもしれない。） ・会自体の内容ももう少し早く確定させて、参加者に提示するべきだった。 (自分が参加者だったら、何をするのか知った上で参加不参加を決めたい) ・相談会で得た知識を皆と共有する（発表する）時間を設けなかったこと （皆がどんなことを相談して、どんな知識を得たのか知りたかった。 共有し合うことで効率的に知識が増えるし、学びの意義があったと思う。） ・席替えの時間を設けなかったこと （席によって、固まってしまい同じ人と喋ることが多かった。） ・実行委員メンバーは集合時間をもう少し早めるべきだった。 （参加者が来るまでに設営が完成できなかったので）
その他
他にも色々と記載したいことがあるので、そちらを明記させてもらいます。
お金
会場費やキャンセル代など、お金を別々に出し合ったので精算の時に苦労しました。
とりあえずチームでやる場合1人に出してもらった方が得策だと思います。
具体的な内容はお答えできないのですが、あるメンバーが報連相を怠っために他のメンバーに迷惑を被ることがありました。
主催としても、ミスをしたとしても事前に伝えてくれたらリカバリーができたのではないかと思ったことがあったので、もしチームでやる場合は報連相を忘れずにやるように各々意識して臨まれた方がいいのではないかと思います。
（注 こちらかなりデリケートな話なので、事前に関係あるメンバーには上記の内容を記載することを伝えて了承を得た上で記載しております。）
主催の向き不向きに関して
個人的に主催の向き不向きがあると思ったので、そちらに関して簡単に記載させていただきます。
向いている人
ワンピースのルフィみたいな好奇心旺盛な人。 責任感、使命感のある人 大局を見れる人 色々な人に気遣いができる人
不向きの人
異常な心配性の人 人の意見を頭ごなしに否定する人 言葉を選ばない人
僕に関していうと
向いている面に関しては
責任感、使命感のある人 大局を見れる人 色々な人に気遣いができる人
上記に関して、人から聞いた訳ではないので あるかどうかわかりませんが
相当意識して臨むようにしました。
一方、不向きな面に関して
異常な心配性の人
自分、顕著に出ましたね😅
個人的な反省として、色々な人に心配性を爆発させて💣
実行委員のメンバーを不安がらせたのではないかと思っています。
当日も色々な事を心配しすぎて 楽しむ余裕がなくて顔が死んでたような気がします😅 ただ参加者からは以下のお褒めの言葉をいただいて
終わった時安堵感半端なかったですね。 企画して良かったと思いました。
「参加して良かった。」 「色々な人と交流できた。」 「遠方から来る価値があった。」 「勉強面で参考になった。」
チーム運営（チームでやる場合）
僕の場合は有志を募って企画・運営をやったのですが
最初の頃、初対面の方もいたので 各々緊張して、固い感じで企画・運営をやったように感じたので
個人的に事前に仲の良いメンバーで企画・運営をすれば より深い議論ができるのではないかと思いました。
最後に
自分の一つの願いを書かせてもらいます。
色々書きましたが、正直ここまでやる必要はないと思うんですよね。
なぜここまでやったかというと
冒頭にも書いたのですが
全員がオフラインもくもく会についてわからない状態だったからです
ここをもう少し深掘りさせてもらいますと
あくまで個人的な見解として見ていただきたいのですが
オフラインもくもく会を企画したいけど、どうすればいいのかわからない
上記の理由で、オフラインもくもく会をする人が少ないのではないかと思いました。
そのために知見を集約したマニュアルを一つ作れば、もう少しフラットに
「オフラインもくもく会」をみんなが企画できるのではないかと考えました。
そのために、ここまで長々と知見をまとめたブログを書いてきた訳ですね😅
実際、やってみて色々な人と直接交流できて 「自分だけでなく色々な人が頑張っているのだな」と思えて 勉強のモチベーションが上がったように個人的に思いました！！
このブログをキッカケとして
オフラインもくもく会をやってみたい
と思ってくれる方が一人でもいらっしゃると個人的に嬉しく思います。
長文駄文失礼しました🙇♂️
firebaseで画像をアップロードする際
Udemy でVue.jsを学習をしている際 firebaseに画像をアップロードするときに 下記のエラーに出くわしました。
An unknown error occurred, please check the server response User does not have permission to access
結論、何がダメやったかというと firebaseを使用していたのですが そこのstorageのルールのコードの部分にミスがあった。
rules_version = '2'; service firebase.storage { match /b/{bucket}/o { match /{allPaths=**} { allow read, write: if false; } } }
ここのallow read, write: if false;の部分を falseからtureの部分にしたら解決した。 firebaseを使用している方で 画像をアップロードする時に storageの部分に問題があるかもしれんので もしエラーが出たら 真っ先に確認した方がいいかもです。
参考
[Swift]FireBaseのStorageで「User does not have permission to access」というエラーが出る
サイトマップの作成
基本的に以下のサイトを参考にした。
あと、robots.txtに文章を記入。
Sitemap: https://negative-word-share.com/sitemap.xml.gz #自分の個人サービスのサイトマップを記入。
robots.txtとは？
どこまでを検索結果に載せるのかを明示するファイル。
今回はrobotoというgemを導入した。
GitHub - LaunchAcademy/roboto: Environment specific robots.txt for your Rails Apps
またbundle exec whenever --update-crontabを実行したときに
以下のエラーにも遭遇した。
bundler: failed to load command: whenever
これは下の方を見たらエラー内容に以下の記載があった。
@bundle_command="bundle exec", @current_time_scope=86400, @options={:at=>"8:00 am"}> (NoMethodError) Did you mean? raise
schedule.rb
every 1.day, at: '8:00 am' do rake 'sitemap:refresh' end # rakeの部分がrailsになっていたので、rakeに変えたらエラーが出なくなった。
Capistrano で whenever をデプロイしようとしたらドハマリした - 約束の地
ただ、まだ上手くいってない感じがする。 もしかしたらwheneverがHerokuに対応できてないことが原因かもしれない。 次はS3というAWSを使ったので試すのもありかもしれない。
参考
ポートフォリオの素人臭さを消す方法 | rake enjoy
https://github.com/kjvarga/sitemap_generator
Rails で gem sitemap_generator を使ってサイトマップを作る - Qiita
【やさしい】Googleサーチコンソールとは？使い方・設定の基本 - マーケティングオートメーションツール SATORI | 上戸彩さんTVCM公開中
heroku+railsでs3にsitemapを置く - Qiita
【Rails】 初心者向け！gem 'dotenv-rails'の使い方 - Qiita
エラー<Message>Access Denied</Message> 〜Rails + Carrierwave + HerokuでAWS S3に画像を保存〜 - Qiita
AWS S3で「Access Denied」を解決する - Qiita
ENV['AWS_REGION'] (Aws::Errors::MissingRegionError) への対策 - Qiita
rubocopについて
rubocopとは
Rubyの静的コード解析を実行するgem。
（コードの内容を精査するgem)
基本的な使い方
Gemfileに「gem 'rubocop'」を記入。 # ここからターミナルを使う。 bundle install bundle exec rubocop
関連ファイル
.rubocop.yml
RuboCopの設定ファイルです。対象となるファイルの種類だったり、チェックする構文のデフォルトを変えたりと,自分たちのコーディングスタイルに沿った現実的なルールをこのファイルで適用します。
.rubocop_todo.yml
あまりに警告が多い時に$ rubocop --auto-gen-configを実行することによって自動生成され、警告内容を全てこのファイルに一旦退避することができます。それ以降は退避された警告は無視されます。
以下の記事を引用。
自分がPFで使用したrubocopの使い方
ここからどのようにして自分がrubocopのエラーをゼロにしたか記載していく。
①rubocop --auto-correct #このコマンドで自動修正してくれる。(エラーが多すぎる時に使用。) ②rubocop --auto-gen-config #.rubocop_todo.ymlを作成し、そこに全ての警告をいったん移す。 #(こうすることで$ rubocopを実行しても今の段階では全ての警告は無視される。) ③rubocop.ymlの以下のコードを消す。 inherit_from: .rubocop_todo.yml #上記コマンドで自動で記述される ④その後、rubocop.ymlに以下の文を記入。(自分の場合) # 自動生成されたファイルを対象外にする AllCops: Exclude: - 'Gemfile' - 'node_modules/**/*' - 'bin/*' - 'db/**/*' - 'config/**/*' - 'test/**/*' - 'spec/**/*' # Missing magic comment # frozen_string_literal: true. を無視 Style/FrozenStringLiteralComment: Enabled: false # "Missing top-level class documentation comment."を無効 Style/Documentation: Enabled: false #下記の設定をすることでStyle/ClassAndModuleChildren: Use nested module/class definitions instead of compact style.がなくなる。 Style/ClassAndModuleChildren: Enabled: false # Metrics/AbcSizeのMaxを30に設定。 # これでAssignment Branch Condition size for search is too high.のエラーがなくなる。 Metrics/AbcSize: Max: 30 # CountComments を true, Max を 25に設定。 # これでMethod has too many lines.のエラーがなくなる。 MethodLength: CountComments: true Max: 25
上記をして、rubocopのエラーをゼロにした。
参考
RuboCop導入後の設定カスタマイズ方法 | Enjoy IT Life
【Rails】Rubocopを使ってコーディング規約に準拠させる方法 | vdeep
RuboCopでこんなエラーが出た。Assignment Branch Condition size for search is too high. - Qiita
RuboCop | Style/MethodLength - Qiita
