CODEBASE βhackathon に参加した話
11/22-11/24の３日間 CODEBASEの βhackathon というイベントに参加してきました。
第2回β版ハッカソンを開催しています！
— CODE BASE@プログラミング教室5期生募集中 (@CODEBASE098) 2018年11月22日
プログラミング教室卒業生で2泊3日でベータ版のWebサービスを作っていきます！
今回は@puremoru0315 君のビジネスモデルを開発していきます！
サービスの紹介、開発の流れを説明した後、開発スタートです😁😁😁
明日は恩納村のペンションを借りて合宿します！！ pic.twitter.com/4UfcbndyYf
βhackathon とは
βhackathon とは、プロダクトの設計やワイヤーフレームなどの準備ができていて実際に動く試作品を作りたいと思ってる人と、CODEBASEのプログラミング講座卒業生（学習時間500-800h）が、一緒になって動くものを作っていくイベントです。アイディアを持っている人は動くものが手に入り、プログラミング初学者はより実践的に開発を学べるという趣旨のイベントです。
全体流れ
３日間でざっくり20時間ぐらいの作業
22日19時～22時 オリエンテーション＆開発@CODE BASE
今回作るアプリの説明、チーム分け、タスクを洗い出した後、各チームに分かれて開発に取り組みました。チームは３チームに分かれて、ざっくりとした役割分担だと、フロントのデザインを作るチーム、作りたい機能を実現するのに少し調査が必要なタスクをこなすチーム、Scaffold&リレーションを作って基本的な機能を作っていくチーム、というような感じ。
23日10時～20時 開発@ペンション
ペンションに到着後、ひたすら開発。優先度が高いissueから消化していく感じ。夜はBBQ
24日10時〜20時 発表＆BBQ@ペンション
起床後、ひたすら開発。優先度が高いissueから消化していく感じ。夜は成果発表&寿司&ピザ
やってみての感想/振り返り
今回のハッカソンで、久しぶりにRailsを触って、忘れているところがめちゃめちゃ多かったので、改めてRails勉強し直したいなという気持ちになった。（もともとが、Railsチュートリアルを２周とオリジナルアプリ制作に取り組んでいたぐらいだったので、しばらく触ってないと、ほんとすごく忘れちゃうなーってのを実感した。。。最近出たRailsの本をとりあえずサクッと読んで思い出したい）プラスに考えると、自分がどれぐらい忘れてるか把握できてよかった。
gitの使い方がすごく勉強になった。３チームで作業していて、conflictがめちゃめちゃ起きたので、conflictを解消する方法を学べてよかった。（単純にgit rebaseするだけならいいけど、conflict起きた際に、複数のcommitを一つにして、更にrebaseして....、みたいなことが何回か起きて、そのあたりのgitの使い方がちゃんと理解できてないので、キャッチアップする。以下、よく使ったコマンドメモ）
# これで、直近のコミット4つを一つのコミットにする（このコマンド叩いた後、コミットでpickになってるのをfに変更する） git rebase -i HEAD~4 # ログをみる git log --one-line --graph --all # 強制的にpush git push --force-with-lease origin feature/xxxxx
- 最終的に今回作ったアプリは、ユーザー登録（devices）、このアプリで使う各データの基本的なCRUDの処理、チャット機能（Action Cable）、フロントのデザインもある程度いい感じに仕上げれた、というような感じで各チームがいい感じにまとまって、とりあえずベータ版を作るのを仕上げられたのでよかったのではないかと思います。とはいえ、細かいところ、荒いところがまだまだたくさんあると思いますし、issueも全体でみると14/46の消化だったので、今回取り組めなかったところや、時間がかかったところなどは、新ためて整理して、次回にいかしていきたいと思います。
まとめ
今回のハッカソンは、ローケーションがほんとに凄く良くて最高でした。みんなでワイワイしながら開発して、サービス作って、BBQしてと、凄くよかったです。運営や事前準備をしてくださった皆さんほんとにありがとうございました！！！凄く良いイベントだったので、次回もぜひ参加したいです。
β版ハッカソン2日目！
— CODE BASE@プログラミング教室5期生募集中 (@CODEBASE098) 2018年11月23日
今日は恩納村のコンドミニアムをお借りして開発合宿を行っています！
ビーチまで徒歩1分とリゾートな環境です🏝
楽しみながら開発しましょー😁#β版ハッカソン#開発合宿 pic.twitter.com/fxKLbEyRJE
海です！！！！！ pic.twitter.com/59iC7Q3DAk
— りゅう (@Ryu1__1uyR) 2018年11月23日
無事終わったってことで、、、
— CODE BASE@プログラミング教室5期生募集中 (@CODEBASE098) 2018年11月24日
おつかれ会ということでお寿司とピザをご用意👏👏👏
みんなお腹減ってたのか、もくもく食べていきます！笑 pic.twitter.com/d9B6Y0dpOn
最後にCODEBASEのプログラミング講座の５期生を募集してるとのことです。プログラミングに限った話じゃないけど、みんなでワイワイしながら一緒に学ぶ体験ってめちゃめちゃ良いなあと思うので、webが好きで気になっている人がいたらぜひ見てみてください！！！
【プログラミング教室5期生募集開始！！】
— CODE BASE@プログラミング教室5期生募集中 (@CODEBASE098) 2018年11月8日
ご好評いただいていることもありプログラミング教室5期生を来年1月から開始するにあったって、本日より募集を開始することになりました！
ご応募お待ちしております！！https://t.co/9b6ZYIHXNN
Laravel admin 作業メモ
やったこと
この記事を参考にLarave-adminでCRUDの処理をできるようにする。
エラー発生
Productsのリソースを扱うサンプルのところで、次のエラーが出た。
Config error. Disk [admin] not configured, please add a disk config in `config/filesystems.php`.
エラーへの対策
エラーメッセージを見るに設定ファイルがおかしそう。Laravel Adminの公式ページにある Upload to local するときの config/filesystems.php: の設定をそのままコピーするとなおった。
公式ページ
修正箇所（config/filesystems.php）
動作確認
laravel を立ち上げ直して、改めてアクセスする
ちゃんと登録できた。
めっちゃ便利だ
読書メモ Laravel ミドルウェアとは？からの認証処理を追ってみる
Twitterで認証させようとしたらうまくいかなくて、いろいろ調べながら、ミドルウェアってなんだっけ？って気持ちになったので、整理メモ
Laravel の認証、コマンド叩けばすぐできて便利と思ってたけど、OAuthクライアント（Twitter）で認証しようとしたらよくわからんエラーでてきたので、やっぱ認証の仕組みちゃんとわかってないのよくない。Laravel本読んでキャッチアップする！ pic.twitter.com/1KyeDPf63w
— 島袋恵 (@20092014) 2018年10月14日
ミドルウェアとは
Laravel で提供してるミドルウェア
例
作成中のアプリのコード例。コントローラのアクションが実行される前に、authミドルウェアが、認証済みユーザーかどうかを判定してる
authミドルウェアクラス
Illuminate\Auth\Middleware\Authenticate
- Illuminate\Auth\Middleware\Authenticate クラス
- Illuminate\Contracts\Auth\Factory
- 認証処理の仕組みでいうとこの辺り、
- Illuminate\Contracts\Auth\Factory を実装してるのが、
Illuminate\Contracts\Auth\Factory\AuthManager
読書メモ Laravel 認証処理
twitter認証したくてやってみた。
この記事を参考にした。ちゃんとTwiterのユーザー情報をとってこれてるのにテンション上がる！笑
email の情報がnull で登録は失敗。Twitter側で利用規約的なやつを登録しないとメールの情報は取れないっぽい
Illuminate \ Database \ QueryException (23000) SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'email' cannot be null (SQL: insert into `users` (`email`, `name`, `updated_at`, `created_at`) values (, 島袋恵😘, 2018-10-14 01:07:39, 2018-10-14 01:07:39))
うまくいったと思ってたけど、実はうまくできてなかった件
ログイン時に以下のエラーが出る。（初回ログイン時のみ出るっぽい？）
Argument 1 passed to Illuminate\Auth\SessionGuard::login() must implement interface Illuminate\Contracts\Auth\Authenticatable, null given, called in /app/vendor/laravel/framework/src/Illuminate/Auth/AuthManager.php on line 292
補足としてマルチ認証を使う場合は、デフォルト設定のガード以外を利用する局面では、ガード名の指定が必要です。また、一つのLaravelアプリではセッションを共有する都合上、別々の認証設定アカウントを使う操作者がいる場合はログオフして使わないと競合してしまいます。
なるほどー。認証の処理がよくわかってないことがわかったので調べる。ガード？
読書メモ Laravel 認可処理
Laravel で用意されてる認可処理は２つあって、
- 1つの認可処理に名前をつけて利用の可否を決定づけるゲート（Gate）
- 複数の認可処理を記述するポリシー（Policy）
ゲートには、例えば、ブログの口コミなど投稿コンテンツに対して、コンテンツを投稿者飲みに編集ボタンを表示したりコンテンツ更新の許可をしたりする、（中略）文字通り「ゲート」としての処理を、クロージャとして定義する
ポリシーは特定のモデルやリソースに関する認可ロジックを系統立てるクラスです。たとえば、ブログアプリケーションの場合、Postモデルとそれに対応する、ポストを作成／更新するなどのユーザーアクションを認可するPostPolicyを持つことになるでしょう。
例. ゲート
- AuthServiceProviderクラス
- コントローラー側
個人的新出メソッド
intval
intval — 変数の整数としての値を取得する
__invoke() メソッド
- シングルアクションコントローラ
- アクションを一つだけ含むコントローラを定義したい場合は、そのコントローラに__invokeメソッドを設置してください。
Githubの草っぽいグラフを表示させたくて vue-heatmap を使ってみた
LaravelでVue.jsを使って、vue-heatmapのライブラリを使って、見た目だけだけど、Githubの草っぽいやつを表示できるようにした。
やったこと
vuejs-heatmap ライブラリインストール
docker-compose run --rm yarn add vuejs-heatmap
yarnの使い方わかんなかったので以下の記事で勉強した
この後、何やればいいか全然わからなかったので、いったん vue-heatmapのリポジトリをローカルに持ってきてサンプルを動かしてみた
ghq get https://github.com/DominikAngerer/vue-heatmap.git
サンプル動かすためには、main.js をちょっと修正する
修正したら npm run devする
npm run dev
そうすると、勝手にブラウザが開いてグラフが表示される
これをLaravelで作ってるアプリにどうやって載せるのか、よくわからんかったけど、トライアンドエラーでいろいろと試してみると、ちゃんと表示されるようになった。以下、やったこと
まずファイル配置と追記した
そしてコマンドを叩いて終わり
docker-compose run --rm yarn run dev
感想
やっと見た目だけだけど vue-heatmap を導入して表示できるようになった。次は、Laravel側データを取ってくる。vuejs-heatmap コンポーネント側の entries にベタ書きされてるからこれをいい感じに取ってくるようにする。勉強するぞー
Vue.jsは本読んでて、超基本的なところはわかったけど、全体的によくわからないことが多いので、時間あるとき引き続き勉強しよ。むずい。むずいけど、ライブラリ使いこなせると、UI自由に扱えてめっちゃたのしそう。
読書メモ Vue.jsの単一ファイルコンポーネント
Vue.jsの単一ファイルコンポーネントについて、初歩的だけど大事そうなところメモ。本のコピペ 🙏
単一ファイルコンポーネントとは
templateブロック
- テンプレートを書き込むブロック
- 単一ファイルコンポーネント内には最大1つのtemplateブロックを書き込める
- テンプレートについてよくわからなくなる時があるんだけど、html側にコンポーネントが呼び出されたときの中身が書かれてるってイメージ。あってるかな？
scriptブロック
- scriptブロックは、コンポーネントにおいてUIの振る舞いをスクリプトで制御する要素
importするときの書き方
単一ファイルコンポーネントを利用する場合、exportする必要がある
- exportする時の書き方
styleブロック
- コンポーネントにおける見た目を制御するブロック
