久しぶりの投稿
２年ぶりに今後記事を書いていこうと思います。
日々の業務で学んだことや、勉強したこと、興味あることを書いていきます。
今日は、自分が思っていることを書いてます。
１、ダイエットして、87.5kg→76kgになったこと。
２、ダイエット中に学んだこと。
３、Laravelの構成の話。2年ほど運用して自分の中で出た結論。
４、自分の仕事の仕方の理想系について。（これは年数重ねることに変わりそうだから、書いておくと昔の記憶とすり合わせできそうでおもしろそう。）
５、Reactのkeyについて
とかとか、パッと思いつく限りですがこんな感じです。
Qiitaがいいかな？と思ったらQiitaに書きます。
この記事はこれで以上です。ただの決意表明でした。笑
dockerでlaravelの環境作ったけどnpm実行用のnodeも一緒に立ち上がるようにした
dockerで簡単なlaravelの環境を作成したのですが、npmの実行環境をphpのコンテナとは別で作成したので、記録に残しておきます。
作成したdockerファイル
nodeの環境を作って、npm runで立ち上げます。
version: '3'
services:
volumes:
- ./server:/var/www
nginx:
image: nginx
container_name: nginx
- 8000:80
volumes:
- ./server:/var/www
- ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf
depends_on:
- php
db:
image: postgres:14.0-alpine
container_name: db
environment:
TZ: 'Asia/Tokyo'
POSTGRES_USER: 'docker'
POSTGRES_PASSWORD: 'docker'
POSTGRES_DB: 'laravel_development'
POSTGRES_HOST_AUTH_METHOD: "trust"
volumes:
- ./docker/db/data:/var/lib/postgresql/data
- ./docker/db/sql:/docker-entrypoint-initdb.d
- 5432:5432
node:
image: node:16-alpine
container_name: node
volumes:
- ./server:/var/www
working_dir: /var/www
- 3000:3000
常に立ち上がっている必要はないと思うので、永続化はしていません。永続化したい場合はtty:trueをつけるといいみたいです。
ミニハッカソン終了〜！
「なんか作ってみたくない？」
そんな思いつきで始まったハッカソンも今日で最終日でした。
ぼくは、Laravelは触ったことある、reactはほんとに触りだけ（Vueも少し）、開発環境はdocker（１ヶ月前に初めてdocker-compose作った）みたいなスキルセットで、react/Nextをフロントエンド、laravel(API)をサーバサイドとしてこの土日アプリを作ってみました。
先に結果だけ話すと、当初の目標の50%くらいしか達成できなかったのですが、どんな感じで進めてたかを残そうと思っています。
１日目（作戦を立てる）
どんなアプリを作るかだけ決めていたので、そこから簡単な要件定義をしていきました。
作ろうとしているのは、いわゆる掲示板てきなやつで、railsとかならもはや数時間でできる内容ですが、今回はreactをフロントとして、laravelをAPIとする構成でほんとに初めてだったので、機能は最小限ということでこのコンセプトでどこにでも振れそうなサービスを作ってみようと思いました。
サービスの流れと機能、画面を整理したら、githubのissueに問題を追加していくような感じで進めていきました。
２日目（開発初日）
開発初日はまずはgithubでの共有をノボくんにやり方を教えながら午前中に開発環境を整えていきました。
午後は、まずはユーザー登録から、、、ということで進めていたのですが、ここですぐCORSの壁にぶち当たります。
laravel側での許可はどうやらすぐにできていたようなのですが（気づくのが遅かった）、react側での許可がなかなかできなかったです。
これはなんと日曜の朝まで悩まされます。😅
おれ雑魚だなーと思ったんですけど、なんとかできてよかったです。（疲れた
それができてない間に、ユーザーの画面３つ、投稿の画面２つを作っていました。
（お昼はあじとや行ってました。😋）
３日目（最終日）
ぼくは朝は別件で仕事があり、午後からの作業開始。
ログイン時のユーザーの情報がもたせられないという問題は結局さわる時間なかったものの、掲示板の投稿機能/詳細の部分は作成しました。
なぜか投稿の一覧取得のAPI作成後、reactでの表示で引っかかりました。reactむずい、、、
react知らなさすぎるのが影響してしまい、ここまでで時間がきてしまいました。
このときに同じ画面を作ってしまったこと、画面作ったけどAPIをマージしないとテストできない問題で開発が遅れたので、 次はAPIと画面はセットでタスク作ってもイイのかなと思いました。（画面の装飾は別）
まとめ
できたこと
・react/NextとLaravelのdockerでの環境構築（別件で使う予定だったものを改造）
・react/NextとLaravelAPIのaxiosを使った通信。
・corsの許可。
・createとread。
できなかったこと
・ログイン時のセッション管理
・updateとdelete
・reactでのコンテンツの一覧表示
こんなところでしょうか。（エラーに悩まされる時間多かった、、、）
今回は挑戦とスキル試しみたいな意味合いでこんなことをやってみました。
思ったよりもできなかったので、もっとreact/Next・laravelのこと知ってまた来月やってみます。
もしこの投稿みてやってみた人いたら、ぼくに感想教えてくれると嬉しいです🙌
やぶ@Lagoon (@vain_vox) | Twitter
最後まで読んでいただきありがとうございました😊
ミニハッカソンをやってみたよ！
「なんか作ってみたくない？」
そんな話から、codebase卒業生のノボ君と一緒にアプリ開発をやってみようということになりました。
時間をガッツリかけてしっかりしたアプリを作成するのもいいかなーと思ったのですが、まずは2泊3日で簡単なアプリを作ってみようというをやってみようと思います。
技術的には、実際に使ったことはない構成でやってみる、ということでここがハードルになるかなと思っています。
開発環境どうする🤔
環境構築はdockerで、laravel(API) + react/Next 、機能は簡単なCRUDとユーザー登録のみです。
ouathも使おうと思ってるのですが、どこでどんな感じで使うのかもわからない、といった状況です。
どんなサービス作るの？
最近所属している会社helloworldでビーチクリーンを始めたのですが、「そこでゴミがたまっている場所がある」というのを聞いて、そういう場所がいっぱいあって定期的に清掃しないといけなさそうだなーと思ったので、そこを気軽に投稿して情報をまとめて見れるサイトを作ってみようと思います。
要件を整理してみる
今回のサービスの要件こんなところでしょうか。
・誰でも気軽にゴミが集まっている場所を投稿できる。
・状況と場所がわかればボランティアの方たちの力になれそう
ということで、これをもう少し落とし込むと、
・気軽にしたいためユーザー登録は最小限、ユーザー自身が投稿したゴミの場所はいつでも削除ができる。
・写真の共有、その場で上げることが多いとなんとなく思ったので、位置情報をアップできるようにする。
やらないことを決める
開発時間は実質２日と全然ないので、あったらいいけどやらないことも決めました。
・関係ない画像がアップロードされる。
画像にゴミが含まれているか判別する？→どうやってゴミと認識するか不明
撮影をその場のみに限定する→ありかもしれない。このアプリより以前に撮った場所の写真がアップできなくなってしまう。
・ログインがメールアドレスだけでできる。
・パスワードもあっさり変更可能。
この２つはセキュリティ的に甘いかなと思ったが、それ以外の個人情報が名前しかなく、ニックネーム可なため許容。
・コメント機能はつけない？
場所がわかるだけでいいのではないかという判断。シェアボタンとイイねがイイねという話になった。
・このアプリで活動報告ができたらいいのに。
SNSでやってほしい。このゴミの場所をシェアしてアップとかを想定。
なるべくシンプルに。
もっと「おお！」って言わせることをしたいなーとか思ったりもしたのですが、身近なあったらいいなを作ってみようと思ったので、このお題にしてみました。
おもしろいの思いついたらテンション上がると思うので、ゲリラ的にやると思います。笑
まとめ
今回は短期間でこの技術構成でどこまで作れるか、をやってみるテスト的な感じです。
そもそもの環境構築でつまずく可能性だってありますし、LaravelのAPIでつまずく、reactの構築でつまずく、など、つまずきポイント豊富ですが、ある程度できるんじゃないかなーということでやってみます！
vueで単語帳アプリを作ってみる。
最近vue.jsを勉強しようと思い、Vuejs＆Nuxtjs超入門本を１周しました。
この本ではリアクティブプログラミングの基礎をvueを通じて学べて、axiosを使ったデータのやりとり、それに伴う処理の速さがとても楽しかったです。
とはいえ、vueにもうちょい慣れたいなーと思ったので、本に無いアプリで作れるか試してみようと思い、暗記アプリを作り始めました。
これからブログで、少しでもやってみたことを記録していこうと思ってます！
（ある程度まとまったら、チュートリアルみたいなの作れないかなーと思ったり😂）
暗記アプリ
いわいる単語帳です。web上で使える物も結構あるので、サービスとしては「それでいいじゃん」、といわれるやつです。機能もりもりにしなければ簡単なので、作ってみようと思います。
バージョン
@nuxt/cli v2.12.2
vue@2.6.11
まずはルーティング
とりあえず最初は、重要な単語帳ページとカテゴリーページを作成します。
nuxtはpagesディレクトリ内を参照して、vue-router構成を自動的に生成してくれます。
ということで、pagesディレクトリ内にsubjectフォルダを作成し、そこにカテゴリーごとに表示する_cat.vueファイルを作成します。
こうすることで、「/subject/カテゴリ名」というルーティングを作ることができ、作成したカテゴリごとの単語帳の表示ができるようにしました。
単語帳機能を先につくりたいので、/subject/_cat.vueファイルから編集していきます。
（余計なのいっぱい入ってます。。。
method使って表示を変更
単語帳が次の単語に進むために、○（正解した）か✖️（間違え）のボタンを用意しました。
いずれかを押すとカウントアップし、カウントアップした数字をもとに配列の値を１つ進めることで問題が進むようにしました。
ちなみに、配列に代入するだけだと変更を検知してくれないそうです。
割と多く記事があがっていたので、気をつけないとですね。
https://jp.vuejs.org/v2/guide/list.html
https://qiita.com/rh_taro/items/5c2af729dc7e3d6bd28a
vueのbindとv-onをつかった
普段単語帳を使う時って、
１、単語を見る
２、単語の意味を思い浮かべる<->英訳を思い浮かべる
３、答えを確認する
といった動作が必要になると思います。
システムでは１の時に答えを隠して、２をユーザーがした後、なにかしらの動作で３の答えを表示する機能を作成する必要があります。
ここをv-onで問題文のクリックを検知し、v-bindでクラスのtrue/falseできるようにしました。
ここら辺が参考になりました。
https://qiita.com/g-taguchi/items/9f97f2172aa048934f1c
ナビゲーションを関数内で実行する
template内で<router-link>を使う方法ではなく、関数内などでページ遷移をさせる方法です。関数実行後にページ遷移させたい時に使えました。
https://router.vuejs.org/ja/guide/essentials/navigation.html
とりあえず単語帳っぽいのが作れた
追加と編集とかもUIから操作できるように作ろうと思ったんですけど、ここから先はデータベースに保存できた方が楽しいかもと思ったので、Laravelと組み合わせて進めていくことにしました。
また進展あったら、ブログに残していこうと思います。
ホームセンターで買える木材で自作の机を作った！
DIYで自分の机を作ってみたら最高！！だったので制作過程を書いていきます。
自分の部屋にこんな机あったらいいな〜と思い浮かべた理想の机をそのまま作成できるので、もし機会あれば作ってみてほしい！と思いました。
参考になるかはわかりませんが、ここに自分が作った方法を残しておこうと思います。
家に机が欲しかった。
部屋に机は１つあったのですが、このスペースが少しだけ空いてました。
ずっとそのサイズの机があるといいなーと思ってたのですが、なかなかぴったりのサイズの机に出会うこともなく、あっても欲しい感じの机ではないのに１万とかするので、微妙だなーとおもってました。
いつか作ろう、と思ってたら2x4材を友達からもらえることになったので、「天板さえ買えば作れる、、、！」となったので実際に作り始めることに。
制作にかかった費用
全部ホームセンターで購入しました。
メイクマン
天板（広葉樹集成材アカシア15x910x450：メイクマン）：1930円
カインズ
オイルステイン 250ml x 1 125ml x 1 ：約2700円
BRIWAX 400ml ：約2500円
はけ x 3：300円
カップ x 2：200円
カインズみてたらBRIWAXも良さそうだし、オイルステイン良さそうで買っちゃったけど、大変だったので次やるときはもう少し節約しよ、、、
制作にかかった木材
2x4材 長さ100cm 8本
天板 上のアカシア
使った工具
ジグソー
1日目：木材の切断とオイルステイ（4時間）
日曜の11時くらいから始めて、午後4時に終了。
時間かかったのは、木材をジグソーで切断するのが大変で、、、
丸のこや、ノコギリをガイド使って直線で切れるようなやつを使った方がいいと思いました。
65cmを6本、40cmを3本、33.6cm2本切りました。
実際に使用したのは、65cmを4本、40cmを2本、33.6cm2本で、この時に当初の予定の横幅170cmの机から100cmの机に方針転換しました。
さらにオイルステインをしました。
乾かない状態でアスファルトにつかないように、木材の端材を使って浮かせながら塗装しました。
天板下の木材に使うオイルステインが足りなくなったので、作業はここまで。
室外機の上にある木材は、もうすでに乾いたやつです。
この後、足りない素材買いにマイクマンに行き、カインズ に行ったんですけど、お目当てのものは買えず、、、
2日目：脚の制作（1.5時間）
この日は木曜日。
乾いた木材だけで進められるだけ進めます。
この日は脚をインパクトドライバーと釘で打ち付けました。
その後BRIWAXを塗ったことで、ちょっと色が深くなりました。
3日目：追加のオイルステイン（1.5時間）
この日は金曜日。
天板下の2x4材のオイルステインが足りなくなったので、カインズで追加で買ってきて、塗っていきます。
乾いたタイミングで2日目に制作した脚に天板の土台となる部分を打ち付けました。
上の部分は結局天板になるので、オイルステインしてません。
4日目：天板取り付け（0.5時間）
最終日は土曜日。
最後は今まで制作してきた土台になる部分と天板をくっつけるのみです。
天板がビスで割れるのが嫌だったので、先にドリルで穴を開けておきます。そうすることで、木材が割れにくくなるみたいです。（どっかで聞いた
ただ慎重に使わないと、天板を貫通して穴が開きます。
穴空いたら、パテで埋めるといいのかな。１００均とかで売ってます。
天板をアスファルトの上に置いて作業すると傷がつきそうだったので、こちらも端材を使って浮かせて作業しました。
こんな感じになりました。思ってたよりいい感じに仕上がって満足です😋
そして、ついに部屋に設置！
まじかっこいいです🤩
部屋の外からみるとこんな感じ。なかなかいい雰囲気出してくれます😊
机を作った感想
自分の部屋に、欲し買ったものがあるのはとても感動的です。
使っていてもかなりいい感じなので、また作りたいなと思いました。
最後に改善ポイント
塗装がめっちゃ時間かかって大変でした。次はニススプレーのみの塗装にして少し簡略化したいです。
木材の切断にジグソーを使ったのですが、力もかかるし大変でした。あらかじめ設計した通りにホームセンターのカットサービスとかうまく使うと時間短縮できそうだなと思います。
また重さがないのか、作業中に少し横に揺れます。上からの圧力には強く安定しているのですが、横の揺れはどうしようか悩み中です。
沖縄県議会議員選挙【島尻・南城市区】に立候補している人まとめ
簡易的なんですけど、動画を聞きながら情報をブログにまとめてみました。
動画は、公益社団法人日本青年会議所沖縄ブロック協議会にまとめられていました。
先に候補者の方の動画をみたい方はこちらのリンクからみれます！
石原朝子 60歳・自民・新人
こどもの教育頑張りたい。
政策
１、子育て世代のための学童・保育所、中学卒業までの授業料無料
２、高齢者・障害者のための安心した暮らしの実現
３、人材育成。こども達の給付型奨学金の拡充。中高一貫学校の誘致。
４、災害に強い基盤整備。地域ブランドの拡充
５、災害に強いまちづくり。
石原一馬 72歳・社大・現職
オールおきなわ
１、新型コロナウイルスの収束
２、首里城の早期復興、文化芸能の振興
３、辺野古基地移設反対
４、次期沖振興（？）
５、大型MICE施設
６、アジア経済
８、子供の貧困対策
９、教育現場のインターネット授業の整備
大城 民夫（おおしろ・たみお） 55歳・無所属・新人
所得雇用の格差が大きい。
政策 １、農業・漁業の所得拡大
２、教育促進。こどもの貧困対策。待機児童対策。厳しい道のりではあるが、保育料の無料化も目指す。子供が好きなことが出来るような環境を作る。
３、県民所得の向上を目指す。
４、社会資本の整理。よなばるのMICE実現
５、観光振興の継続、整備。
６、歴史と文化の振興。
７、平和と人権。建白書の実現（？）
８、新型コロナウイルス、拡大防止、支援
大城 憲幸（おおしろ・のりゆき） 51歳・無所属・現職
２期目の挑戦
１、政治の改革。基地問題による対立の政治が続いてきたが、政治は提案型である必要がある。
２、農業で沖縄を元気にしたい。沖縄の産業改革をしたい。沖縄の産業構造の取組をしたい。
３、子供達のための政策。教育や福祉には財源が必要。そのための産業みつめ直しと政治の改革が必要。
座波 一（ざは・はじめ） 60歳・自民・現職
南城市元副市長
沖縄県政の危機管理が疑問だった。
沖縄振興計画は大事。
南部だけでなく、北部の問題も訴えていく。
土地利用の問題を重要視している。
道路整備をし、物流を整えていく。
政策
１、土地利用計画、
２、特区制度の戦略
３、道路整備
自然大切。沖縄の自然環境の保護・再生を世界にアピールしていく。
玉城 武光（たまき・たけみつ） 71歳・共産・現職
オール沖縄 新基地建設反対
基地建設の費用を県民の暮らし・経済再建を進める。
医療支援を強め、コロナ収束、経済再建に務める
国に負担を求める
・事業収入の８割補助
・中高生のバス賃無料
・事業者の家賃などの固定費
・学生には返済不要の奨学金
・イベント等のキャンセル料
最後に
かなり簡易的に動画内容を書いています。
候補者の方が自身の政策を動画に短くまとめているので、みて決めるといいかも、と思っています！
