空の下でひっそりと

てきとーに更新していきます。レーザーカッターや3Dプリンタが好き

ChatGPTのAPIを久しぶりに使おうとした時にBillingのエラーが出た

Billing Setting

ChatGPTを2023年の4月に触って以来、久しぶりに触ろうと思った時に下記のエラーがで続けて困っていました。

 

You exceeded your current quota, please check your plan and billing details.

 

原因は課金設定が旧プランになっていたこと

Billingのページにいくとずっと0.00$と表示されていました。てっきり今月の使用量かと思っていたのですが、これがどうやらcredit(使用可能な課金額)の残高になっていたみたいです。

 

おそらく、使った分だけ課金から、事前にチャージして使ってね、みたいな変更がされていたようです。知らなかった。

 

ということで、旧プランをキャンセルして新しいプランに変更したらうまく動くようになりました。

 

去年使った時はうまくいってたので、そこは関係ないと思ってた、、、

javascriptの変数の一括宣言には落とし穴

Javascriptで一括で次のように変数を配列で宣言した場合、最後の変数にしか反映されないということを知りました。
let array4,array5,array6 = [];
 
Javascriptでこのようなコードがあります。
四行目のこのコードは一括で変数を宣言できているように見えます。
let array1 = [];
let array2 = [];
let array3 = [];
let array4,array5,array6 = [];
Logger.log(array1);
Logger.log(array2);
Logger.log(array3);
Logger.log(array4);
Logger.log(array5);
Logger.log(array6);

しかし、出力結果は次のとおりになります。

[]
[]
[]
null
null
[]

一括で配列宣言しようとしても、四行目の書き方だと最後の変数にしか配列宣言ができないようです。

久しぶりの投稿

2年ぶりに今後記事を書いていこうと思います。

日々の業務で学んだことや、勉強したこと、興味あることを書いていきます。

今日は、自分が思っていることを書いてます。

1、ダイエットして、87.5kg→76kgになったこと。

2、ダイエット中に学んだこと。

3、Laravelの構成の話。2年ほど運用して自分の中で出た結論。

4、自分の仕事の仕方の理想系について。(これは年数重ねることに変わりそうだから、書いておくと昔の記憶とすり合わせできそうでおもしろそう。)

5、Reactのkeyについて

とかとか、パッと思いつく限りですがこんな感じです。

Qiitaがいいかな?と思ったらQiitaに書きます。

vain_vox - Qiita

この記事はこれで以上です。ただの決意表明でした。笑

dockerでlaravelの環境作ったけどnpm実行用のnodeも一緒に立ち上がるようにした

dockerで簡単なlaravelの環境を作成したのですが、npmの実行環境をphpのコンテナとは別で作成したので、記録に残しておきます。

作成したdockerファイル

nodeの環境を作って、npm runで立ち上げます。

version: '3'

services:
php:
container_name: php
build: ./docker/php
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

github.com

常に立ち上がっている必要はないと思うので、永続化はしていません。永続化したい場合はtty:trueをつけるといいみたいです。

ミニハッカソン終了〜!

「なんか作ってみたくない?」

 

そんな思いつきで始まったハッカソンも今日で最終日でした。

f:id:yabu_sw:20201107092413j:plain



ぼくは、Laravelは触ったことある、reactはほんとに触りだけ(Vueも少し)、開発環境はdocker(1ヶ月前に初めてdocker-compose作った)みたいなスキルセットで、react/Nextをフロントエンド、laravel(API)をサーバサイドとしてこの土日アプリを作ってみました。

 

先に結果だけ話すと、当初の目標の50%くらいしか達成できなかったのですが、どんな感じで進めてたかを残そうと思っています。

 

1日目(作戦を立てる)

どんなアプリを作るかだけ決めていたので、そこから簡単な要件定義をしていきました。

作ろうとしているのは、いわゆる掲示板てきなやつで、railsとかならもはや数時間でできる内容ですが、今回はreactをフロントとして、laravelをAPIとする構成でほんとに初めてだったので、機能は最小限ということでこのコンセプトでどこにでも振れそうなサービスを作ってみようと思いました。

サービスの流れと機能、画面を整理したら、githubのissueに問題を追加していくような感じで進めていきました。

 

2日目(開発初日)

開発初日はまずはgithubでの共有をノボくんにやり方を教えながら午前中に開発環境を整えていきました。

午後は、まずはユーザー登録から、、、ということで進めていたのですが、ここですぐCORSの壁にぶち当たります。

laravel側での許可はどうやらすぐにできていたようなのですが(気づくのが遅かった)、react側での許可がなかなかできなかったです。

これはなんと日曜の朝まで悩まされます。😅

おれ雑魚だなーと思ったんですけど、なんとかできてよかったです。(疲れた

qiita.com

それができてない間に、ユーザーの画面3つ、投稿の画面2つを作っていました。

f:id:yabu_sw:20201108233630j:plain

(お昼はあじとや行ってました。😋)

3日目(最終日)

ぼくは朝は別件で仕事があり、午後からの作業開始。

ログイン時のユーザーの情報がもたせられないという問題は結局さわる時間なかったものの、掲示板の投稿機能/詳細の部分は作成しました。

なぜか投稿の一覧取得の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日で簡単なアプリを作ってみようというをやってみようと思います。

技術的には、実際に使ったことはない構成でやってみる、ということでここがハードルになるかなと思っています。

f:id:yabu_sw:20201107092413j:plain


 

開発環境どうする🤔

環境構築はdockerで、laravel(API) + react/Next 、機能は簡単なCRUDとユーザー登録のみです。

ouathも使おうと思ってるのですが、どこでどんな感じで使うのかもわからない、といった状況です。

 

どんなサービス作るの?

最近所属している会社helloworldでビーチクリーンを始めたのですが、「そこでゴミがたまっている場所がある」というのを聞いて、そういう場所がいっぱいあって定期的に清掃しないといけなさそうだなーと思ったので、そこを気軽に投稿して情報をまとめて見れるサイトを作ってみようと思います。

 

要件を整理してみる

今回のサービスの要件こんなところでしょうか。

・誰でも気軽にゴミが集まっている場所を投稿できる。
・状況と場所がわかればボランティアの方たちの力になれそう

ということで、これをもう少し落とし込むと、

・気軽にしたいためユーザー登録は最小限、ユーザー自身が投稿したゴミの場所はいつでも削除ができる。
・写真の共有、その場で上げることが多いとなんとなく思ったので、位置情報をアップできるようにする。

やらないことを決める

開発時間は実質2日と全然ないので、あったらいいけどやらないことも決めました。

・関係ない画像がアップロードされる。
画像にゴミが含まれているか判別する?→どうやってゴミと認識するか不明
撮影をその場のみに限定する→ありかもしれない。このアプリより以前に撮った場所の写真がアップできなくなってしまう。

・ログインがメールアドレスだけでできる。
・パスワードもあっさり変更可能。
この2つはセキュリティ的に甘いかなと思ったが、それ以外の個人情報が名前しかなく、ニックネーム可なため許容。

・コメント機能はつけない?
場所がわかるだけでいいのではないかという判断。シェアボタンとイイねがイイねという話になった。

・このアプリで活動報告ができたらいいのに。
SNSでやってほしい。このゴミの場所をシェアしてアップとかを想定。

 

なるべくシンプルに。

もっと「おお!」って言わせることをしたいなーとか思ったりもしたのですが、身近なあったらいいなを作ってみようと思ったので、このお題にしてみました。

おもしろいの思いついたらテンション上がると思うので、ゲリラ的にやると思います。笑

 

まとめ

今回は短期間でこの技術構成でどこまで作れるか、をやってみるテスト的な感じです。

そもそもの環境構築でつまずく可能性だってありますし、LaravelのAPIでつまずく、reactの構築でつまずく、など、つまずきポイント豊富ですが、ある程度できるんじゃないかなーということでやってみます!

vueで単語帳アプリを作ってみる。

最近vue.jsを勉強しようと思い、Vuejs&Nuxtjs超入門本を1周しました。 

 

Vue.js&Nuxt.js超入門

Vue.js&Nuxt.js超入門

 

  

この本ではリアクティブプログラミングの基礎をvueを通じて学べて、axiosを使ったデータのやりとり、それに伴う処理の速さがとても楽しかったです。

とはいえ、vueにもうちょい慣れたいなーと思ったので、本に無いアプリで作れるか試してみようと思い、暗記アプリを作り始めました。

これからブログで、少しでもやってみたことを記録していこうと思ってます!

(ある程度まとまったら、チュートリアルみたいなの作れないかなーと思ったり😂)

f:id:yabu_sw:20200716020108p:plain


 

 

暗記アプリ

いわいる単語帳です。web上で使える物も結構あるので、サービスとしては「それでいいじゃん」、といわれるやつです。機能もりもりにしなければ簡単なので、作ってみようと思います。

 

バージョン

@nuxt/cli v2.12.2

vue@2.6.11

 

まずはルーティング

とりあえず最初は、重要な単語帳ページとカテゴリーページを作成します。

nuxtはpagesディレクトリ内を参照して、vue-router構成を自動的に生成してくれます。

ということで、pagesディレクトリ内にsubjectフォルダを作成し、そこにカテゴリーごとに表示する_cat.vueファイルを作成します。

こうすることで、「/subject/カテゴリ名」というルーティングを作ることができ、作成したカテゴリごとの単語帳の表示ができるようにしました。

単語帳機能を先につくりたいので、/subject/_cat.vueファイルから編集していきます。

(余計なのいっぱい入ってます。。。

f:id:yabu_sw:20200716014437p:plain

method使って表示を変更

単語帳が次の単語に進むために、○(正解した)か✖️(間違え)のボタンを用意しました。

いずれかを押すとカウントアップし、カウントアップした数字をもとに配列の値を1つ進めることで問題が進むようにしました。

ちなみに、配列に代入するだけだと変更を検知してくれないそうです。

割と多く記事があがっていたので、気をつけないとですね。

https://jp.vuejs.org/v2/guide/list.html

https://qiita.com/rh_taro/items/5c2af729dc7e3d6bd28a

 

vueのbindとv-onをつかった

f:id:yabu_sw:20200716014356p:plain

 


普段単語帳を使う時って、

1、単語を見る

2、単語の意味を思い浮かべる<->英訳を思い浮かべる

3、答えを確認する

といった動作が必要になると思います。

システムでは1の時に答えを隠して、2をユーザーがした後、なにかしらの動作で3の答えを表示する機能を作成する必要があります。

ここをv-onで問題文のクリックを検知し、v-bindでクラスのtrue/falseできるようにしました。

ここら辺が参考になりました。

https://qiita.com/g-taguchi/items/9f97f2172aa048934f1c

 

ナビゲーションを関数内で実行する

template内で<router-link>を使う方法ではなく、関数内などでページ遷移をさせる方法です。関数実行後にページ遷移させたい時に使えました。

f:id:yabu_sw:20200716014318p:plain

https://router.vuejs.org/ja/guide/essentials/navigation.html

 

とりあえず単語帳っぽいのが作れた

f:id:yabu_sw:20200716020005g:plain

 

追加と編集とかもUIから操作できるように作ろうと思ったんですけど、ここから先はデータベースに保存できた方が楽しいかもと思ったので、Laravelと組み合わせて進めていくことにしました。

 

また進展あったら、ブログに残していこうと思います。