Doiya’s blog

私が所属しているプログラミングスクールの進捗を書くブログ

オフラインもくもく会を企画しました!!

はじめに

6月26日に関西の某所でオフラインもくもく会を企画しました。

オフラインもくもく会に関しての知見をまとめた記事は僕が見た限りあまりなく今回の内容を記載すれば、皆さんに何かしらの情報提供ができるのではないかと思い 記載しようと考えました。

前提

自分は今までオフラインもくもく会に参加したことがございませんでした。

本当に手探りで色々なことを考えていきました。

ある時に実際にもくもく会を企画したことがある人にその話をしたら「やりすぎやで😅」と言われました。

そのため、もしかしたら他に実際に参加したことがある方からすれば今回のことを記載したら「それは少し違うな」と思うかもしれませんが、あくまで個人的な見解としてみていただけるとありがたいです。よろしくお願いします🙇‍♂️

企画しようと思ったキッカケ

Twitterでニーズがあったからですね。東京ではやっている人は見てきたけど関西でやったことがある人を見たことないので、これを実現させたらオモロいことになるんやないかと思ったからです。

何人でやったのか

まず一人ではできないと思ったので、何人か有志を募りました。

自分はRUNTEQというプログラミンスクールに所属しているので そこの受講生の中からメンバーを募集しました。

ちなみにこのメンバーも誰もオフラインもくもく会に参加した経験はありませんでした。

つまり全員がオフラインもくもく会についてわからない状態で手探りで色々考えていった訳です💧

主催をする上で心掛けたこと

まずにオンラインで週に1回ミーティングをするようにしました。

その時に主催として一番心掛けたことは

みんなが意見を出せるような雰囲気作りを一番意識しました。

具体的には

 ・参加者の方に「〜さんはどう思いますか?」と意見を求めて
  なるべくその人の意見を否定せずに取り入れようとしました。
  (万が一、否定するにしても言葉を選ぶようにしました。)

・各々に担当を割り振ってチームメンバーそれぞれに責任感を持ってもらうようにしました。

実際に実行委員メンバーからも以下のようなお褒めの言葉をいただきました。

・比較的各々が気負うことなく発言できること。
 その発言に対しての賛否も言いやすく、意見交換が活発にできたこと。
 そのことが問題点改善が迅速にできたのではないかと思っている

・役割分担などがあり、効率的に進められた

・未経験ながらに様々なことに挑戦できた。

他にも以下のようなことをしました。

・事前資料を作成して議題を明確にした。
・ミーティング後に記録を取って、自分たちが認識した内容を目に見える形で言語化した。

連絡手段を統一

連絡手段はチャット用とミーティング用に分けました。

理由としては以下の役割に分けたからです。

チャット用

緊急事態が発生した時、早急に連絡が取れて問題点に関しての改善に迅速に対応できるため

ミーティング用

直接、話し合うことで各々の認識の食い違いを未然に防ぐため

ツールとしては以下の二つを使用しました。

チャット用

mattermost.com

オンプレ型のチャットツール「Mattermost」を使ってみよう – リックソフト公式ブログ(Ricksoft Blog)

ミーティング用

discord.com

【完全版】超便利!Discord(ディスコード)の使い方。ゲーマーに1番人気の理由も紹介!|スマートフォンAQUOS:シャープ

ここまで読んでいただいた方々お待たせしました。

ではいよいよ本題に入っていきます。

会場選び

僕たちは以下のサイトで会場を決定しました。

www.spacemarket.com

他にも以下のサイトも有名ですね。

www.instabase.jp

この会場選びにおいてめちゃくちゃ大事なことがあります。

会場内にWi-Fiがつながっているかどうか絶対に確認してください!!

僕たちはここを疎かにして、会場を変更せざるを得なくなりキャンセル料を支払わないといけない羽目になりました。

不安な時は、予約する前に事前に担当者に問い合わせましょう!!

ちなみにWiFiに関して「10台以上のPC同時接続できますか??」と質問した場合

「理論上はできるけど、実際に試したことないので保証はできない。」

上記の回答が来た場合、大概できると判断してもいいかもしれないです。

僕たちはこの返答が来て、結局はうまくできました。

(注:絶対にできるという訳ではないのでここに関しては自己責任でお願いします😅)

会場選びの反省点としては実行委員のあるメンバーがうまい表現をしてくれたので載せておきます。

会場選びにおいて、検索し始めるよりも先に何が優先事項なのかを擦り合わせるべきだった。

参加者募集

こちらに関して 事前に関西でやりたいというニーズがあるのを把握していたのと

同じプログラミンスクール仲間でコミュニティをすでに形成していたので

正直そこまで苦労はしなかったです。

ただ、以下のサイトで参加者を募集したという記事を見かけたのでリンクのみ貼らせてもらいます。

connpass.com

参考

オフラインもくもく会の失敗事例 - Qiita

出欠確認

以下のサイトを使用しました。

chouseisan.com

当日のタイムスケジュール

今回、主催として以下のような秘めたるテーマを設定していました。

オフラインで直接会って様々な人と交流をしてもらって

 色々と情報交換をして欲しい!」

上記のテーマを軸に色々ともくもく会のタイムスケジュールを思案していきました。

まず参加者の名前を事前に把握できるようにネームプレートを用意しました。

次にタイムスケジュールに関して具体的には以下のことをしました。

もくもく会
性格診断
相談会
ボードゲーム

個々のことを簡単に説明させてもらいます。

もくもく会

これはタイトルどおりですね。各々が好きな勉強をもくもくやる感じでしたね。

性格診断

xn--16-573d25rtpd1v4e.com

上記の性格診断をして各々の性格を発表をしてもらって、みんながどのような性格を知ってもらい交流を図る感じですね。

相談会

懇親会みたいな感じかな。 ここで色々な話をしゃべりたい人と話してもらって交流を深めてもらう。 もちろん、勉強の相談などもしてもOK!!

という感じでやりました。

(この時に参加者の中で実力のある人には相談役をして欲しいと事前に依頼しました。)

ボードゲーム

同じことを何回も書いてしまって申し訳ないのですが

これも交流を深めるために取り行いましたね😅

ただ参加者の中に人見知りの方もいると思うので そういう方にとっては一番ボードゲームが交流を深めやすいのではないかと思いました。

実際に行ったゲームのリンクを貼らせてもらいます。

quizmondai.com

wevox.io

kakakumag.com

最後に当日に関しても色々反省点があったので

そちらも箇条書きで列挙させてもらいます。

・昼食場所を事前に予約しても良かったかもしれない。
(実は参加者が道に迷わないように事前に会場の下調べをしたのですが
この時にお店のことも詳しく調べるべきだったかもしれない。)

・会自体の内容ももう少し早く確定させて、参加者に提示するべきだった。
(自分が参加者だったら、何をするのか知った上で参加不参加を決めたい)

・相談会で得た知識を皆と共有する(発表する)時間を設けなかったこと
(皆がどんなことを相談して、どんな知識を得たのか知りたかった。
共有し合うことで効率的に知識が増えるし、学びの意義があったと思う。)

・席替えの時間を設けなかったこと
(席によって、固まってしまい同じ人と喋ることが多かった。)

・実行委員メンバーは集合時間をもう少し早めるべきだった。
(参加者が来るまでに設営が完成できなかったので)

その他

他にも色々と記載したいことがあるので、そちらを明記させてもらいます。

お金

会場費やキャンセル代など、お金を別々に出し合ったので精算の時に苦労しました。

とりあえずチームでやる場合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の部分に問題があるかもしれんので もしエラーが出たら 真っ先に確認した方がいいかもです。

参考

[firebase_storage/unknown] An unknown error occurred, please check the server response. の時に確認すること - Qiita

[Swift]FireBaseのStorageで「User does not have permission to access」というエラーが出る

S3を通してHerokuの画像をうまくいくようにする方法。

ログ残しで記事を書く。

すいません。これに関しては同じRUNTEQの方が作成された以下の記事を元に作りました。

qiita.com

少し違うところがあるとすれば ACLを無効から有効にした。

流れとしては

Amazon S3
↓
パケット
↓
自分が作成したパケット名のリンクを選択
↓
アクセス許可
↓
オブジェクト所有者
↓
ACL有効化に切り替え

とりあえず、こうしたら形にはなった。

(ただ、これでも少しエラーが出るのでまだ確実にできてるとは言い切れない。)

サイトマップの作成

基本的に以下のサイトを参考にした。

hataworakuni.net

あと、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を使ったので試すのもありかもしれない。

vdeep.net

vdeep.net

参考

ポートフォリオの素人臭さを消す方法 | 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を実行することによって自動生成され、警告内容を全てこのファイルに一旦退避することができます。それ以降は退避された警告は無視されます。

以下の記事を引用。

RuboCop is 何? - Qiita

自分が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

Rubocopを使ってRailsコードをチェックしてみる - さかなソフトブログ

自動調整ツールRubocopの導入と使い方 - Qiita

rubocopの導入[初心者向け] - Qiita

2作目のPFで学んだ知見

今回作った2作目のPFで学んだことを箇条書きで列挙していく。

Rails7系の導入。

今までRailsの6系で作業していたので 一度7系を導入してみようと思って 導入してみた。ただ、やはり6と7の違いは 大きなものを感じて、詰まったことが多々あった。 詳しいことは以下の記事を参照してね。

qiita.com

次回は6系でサービスを作った方がいいと思う。

ちなみに7系の場合「bin/rails s」ではなく「bin/dev」でやった方がいいらしい。

tailwind cssの導入。

今までbootstrapを使っていたけど それ以外で試してみたいと思い 一度tailwind cssを使ってみたいと思い導入してみた。 導入にかなり苦戦したけど以下の記事を参照してみてなんとか導入した。

zenn.dev

次回以降もtailwind cssは挑戦していきたい。 ちなみにtailwind cssのカスタマイズは以下の記事も参照させていただいた。

Rails Pagination with Tailwind - DEV Community

独自ドメインSSL化で起きたエラー

詳しくは以下の自分が書いた記事を読んでね。

doiya.hateblo.jp

ドロップダウンができないエラー

今回以下のようにドロップダウンをするコードを記載した。

<li class="nav-item dropdown dropdown-slide">
          <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <%= Board.model_name.human %>
          </a>
          <div class="dropdown-menu dropdown-menu-right">
            <%= link_to  t('boards.index.title'), boards_path, class: 'dropdown-item' %>
            <%= link_to  t('boards.new.title'), new_board_path, class: 'dropdown-item' %>
          </div>
        </li>

しかし何故かドロップダウンがうまくいかなかった。 今回、見つけた解決策としては application.html.erb

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

#上記の文を追記した。

rails 6 bootstrapでドロップダウンが動作しない。

イラスト導入

以下のサービスでトップページや掲示板の画像として、いくつか使わせていただいた。

www.ac-illust.com

一応、著作権も心配したのだけど 以下の記事を見て その点は大丈夫ではないかと考えた。

blog.acworks.co.jp

背景画像

背景色と背景画像を合成したかったのだが 何故かうまくいかなった。 結論としてはcssの所に以下のようにしたらなんとかできるようになった。

 background:linear-gradient(to top, rgba(91, 238, 240, 0.7) 0%, rgba(151, 217, 225, 0.7) 100%), url('〇〇.jpg') center;

色選択ツール - CSS: カスケーディングスタイルシート | MDN

コントローラー不要で利用規約などを作る。

これに関してはhigh_voltageというgemを入れたら、上手くいった。

qiita.com

Heroku標準のPostgreSQLへのdb:migrateをやり直す方法

以下のコマンドをターミナルに打つ。

heroku rake db:migrate VERSION=0

heroku rake db:migrate

[Rails] Heroku標準のPostgreSQLへのdb:migrateをやり直す方法 - CodeNote

本番環境で管理者権限を付与する方法(我流)

以下のコマンドをターミナルに打つ。

heroku run rails c

User.create!(詳しくは現場Railsの4-5-13参照)
ただし以下の部分は変更する。
✖︎admin:true
○role:admin

最後に

今回も色々とエラーにぶつかったのだが、何より学んだことがある。

それは

まずはログをちゃんと見なさい!!

検索するときはワードを考えなさい!!

この二つは本当に痛感した。 以後気をつけて、学習していきたい。

追記(2022/05/16)

次回からGithubに関して以下の記事を参考にしてやるようにする。 今回はissueを全く使っていなかったことが反省。

zenn.dev

SSL化で起きたエラー

Herokuで取ったURLを独自ドメインにしてSSL化をした。

こちらの内容に関しては以前自分が記事を書いたので そちらを参照してほしい。

doiya.hateblo.jp

では話を戻すと、その時に何故か

https://negative-word-share.com/

上記のSSL化したURLだけ、ログインやユーザー登録などが使えなくなった。

以下、自分がした解決手順は以下の通り。

①ターミナルでheroku logs --tailというコマンドを打って、ログを確認する。

② ActionController::InvalidAuthenticityToken (HTTP Origin header (https://negative-word-share.com) didn't match request.base_url (http://negative-word-share.com)):というエラーを検知する。
(httpsとhttpがmatchしてない。)

③「didn't match request.base_url  Heroku」で検索。

④以下の記事を発見。

qiita.com

⑤CloudflareをログインしてSSL化/TLSを選択。

https://i.gyazo.com/1901621830aa269026073ba9e696333a.png

⑥上記の部分をフレキシブルからフルに検索。

これでエラーを解決した。 今回でログを見る大切さを感じたので、今後気をつけていきたい。