インプットが大事になりそう

最近、いろんなAIがすごいスピードで進化していて、もう仕事では使わざるを得ないって感じになってきました。 最近やっといろんなものを触り始めましたが、最初はずっとCopilotを使ってた。周りがCursor使っている中で。 www.publickey1.jp CopilotはVS CodeのInsiders版を使うと、エージェントモードってのがあって、Claude 3.7 Sonnetもそこから使えます。 これを使うと、まぁ、ほぼ自動でコーディングしてくれる感じになります。 今年の1月ぐらいは「頭いいけど使い物にならねぇ！」ってなっていましたが、どうやら使い方が悪かったもようでした。僕が悪かった…

OpenHands試してみた

github.com Devin使いたいが、もうちょい我慢ということでさきにこやつを試してみた $ docker run -it \ --rm \ --pull=always \ -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.27-nikolaik \ -e LOG_ALL_EVENTS=true \ -e WORKSPACE_MOUNT_PATH=$WORKSPACE_BASE \ -v $WORKSPACE_BASE:/opt/workspace_base \ -v /var/r…

AIに生成させたフロー図を直して理解する

ジュニアメンバーが提出してきた内容をレビューして、間違っているなぁとか思いながら修正しながら内容を理解する作業と似ているなって思った（過去の話） 誰かが書いた業務条件が正しいのか、実装できそうか、など読み取るときに、僕の場合はたいてい文字だけじゃ理解ができず、何度も何度も文字起こししてみてやっているが、中々腰が重たいので着手ができなかったりする 最近生成AIがとんでもない成長を見せているので、楽したいからとりあえずテキストをMermeidにしてくれ！とお願いしてできたものを読み取ったりするが、入力する文章が悪いんだろうが、これまた変な図が出来上がったりする それをあーじゃないこーじゃないでやっ…

依頼者と作業者の気持ちを理解する

ひさびさにブログ書く 出来事の学び（個人的なまとめ） アンガーマネジメントを学びたくなった 依頼者・作業者それぞれを経験して気持ちを理解したい 大変なときこそ共有しよう。って気持ちになった 最近家を建てようとしている 無事住宅ローンも降りて、間取りはあーで、オプションはこーで、外構工事はそーで、ってやりとりを数ヶ月続けてると事件はおきた。 「すみません、、、ここのこの見積もりまだ高くなりそうで。。。」 ぼくらとしては「えーっ！なんでいまさら？？？」である。 それから週が立つごとに、見積もりがあがるー。オプションできんかもー。と連絡がある一方で、土地を定期的に見に行くとなんと工事が開始しているよ…

Railsで悲しみのmigrateエラー

$ rails db:migrate と、実行すると Caused by: ArgumentError: wrong number of arguments (given 2, expected 0..1) ... に、悩まされていましたが、マイグレーションファイルを作ったときに 20240601110111_${テーブル名}.rb こういうファイル名でした。 色々中身ガチャガチャしてもうわからん！！！！ってなったときに、ファイル名他と違くない？ってなったので 20240601110111_add_${テーブル名}.rb こうしてみたらできました。1時間。。。。。

RSpecのmatcherについて軽いメモ

雑メモです。 あるモデルにデータを追加したか確認するテスト expect { subject }.to change { ModelA.count } 変更しているなら change でおk もし、変更なしを確認したい場合は、 not_change を用意すると良い RSpec::Matchers.define_negated_matcher :not_change, :change zenn.dev subjectがExceptionを返すので検証できない 実際はExceptionが発生する前にデータを追加しているが、テスト時にはExceptionで落ちるので確認できない なので、andで繋…

PHPカンファレンス沖縄2023に参加＆登壇しました

登壇資料はこれ speakerdeck.com 様子はこれ togetter.com ぼくの発表の様子はこれ 大物が出てきたwww #phpcon_okinawa pic.twitter.com/cUW30zKWnK— カンボ🏝沖縄 (@kanbo0605) 2023年9月16日 なんでコスプレしたの？ 今回のイベントは結局ギュッとタイムテーブル組んでいるのを事前に知ってた & カンファレンスで聞く方は結構疲れる（色々学びになり楽しいんだけど）と思うので、合間になんかこう、目が覚めるようなことをやろうかなって考えてました ちょうど沖縄だし、僕の発表は琉球だし（？）、僕はチョンダラーだし、という…

「エンジニアのためのドキュメントライティング」読書メモ

ユーザーの問題解決とプロダクトの成功を導く エンジニアのためのドキュメントライティング作者:ジャレッド・バーティ,ザッカリー・サラ・コーライセン,ジェン・ランボーン,デービッド・ヌーニェス,ハイディ・ウォーターハウス日本能率協会マネジメントセンターAmazon ドキュメントの書き方とか見やすさのテクニックなのかなと思い読み進めていましたが、ペルソナとかカスタマージャーニーマップとかでてくるので、なるほど？？？って気持ちになりました。ドキュメントの読み手の調査をしっかり行うことであったり、ドキュメントを持って適切にプロダクトを操作、やりたいことが達成できるのか、などの検証を行うべきとあり、結構し…

「どん底から生まれた宅急便」を読んだ

ひさびさのブログです。 どん底から生まれた宅急便作者:都築 幹彦日経BPマーケティング(日本経済新聞出版Amazon 物流Techな会社に就職したので、せっかくだから物流の歴史とかノウハウとか身につけたいなーと思い、いくつか購入してて積読してたやつ。 ちょうど今出張で東京にいるので、移動の飛行機で読んだ。ひとことでいうと良かった。 雑メモがこちらです 雑メモ 宅急便はクロネコヤマトの商品名 日頃僕らが使っているサービスの大枠は「宅配」である 宅配はヤマトがはじめて広めたもの 1970年代。多くの物流が大口配送（多くの荷物を1つの納品場所へ配送するという認識です）だった。ヤマトは関東圏でがんばっ…

Nuxt3で nuxt3 ferenceError: ${composable_name} is not defined が発生したとき

ファイル修正してもなおんないので、地味にだるい。 僕の環境はDockerで立ち上げているので、コンテナ落として立ち上げるってのがだるいのでなんとかならんかと、ちょっと手漉きになったので探してみたら、キャッシュ削除なるコマンドがあった。 $ docker compose exec nuxt npx nuxi clean nuxt.com これ実行すると下記が削除されて、再ビルドが走る。 .nuxt .output node_modules/.vite node_modules/.cache これで復帰した！（ビルド時間がだるいけど） nuxi も地味に忘れるので、package.jsonに書いて…

Flutter.Okinawaを立ち上げました＆開催しました

とても久々のイベント参加記事です。どこに書けばいいのかわからなくなりましたが、とりあえず自分のブログにPostした。 立ち上げました 以前これらのイベントに参加しました。（登壇者として） frontend-conf.okinawa.jp conf2022.pwanight.jp *1 イベント熱に当てられたので、2023年はコミュニティをやっていくぞ！と思っていたんですが、Pythonから離れてしまったので*2、PyData.Okinawa*3じゃなくて、沖縄＆フロントエンドなどのWeb周りのコミュニティやっていこうかなーと考えていました。 で、今勤めている会社がアプリ開発をやってて、隣にいる…

GitHub Actionsのキャッシュを削除する

qiita.com Macで動いた $ brew install gh $ ORG=オーガナイズ名？ $ REPO=リポジトリ名 $ gh api -X GET repos/${ORG}/${REPO}/actions/caches jq '.actions_caches[].id' xargs -L1 -I{} gh api -X DELETE repos/${ORG}/${REPO}/actions/caches/{}

Nuxt3のcreate-nuxt-appでカレントディレクトリにプロジェクト作りたい場合

概要 gitリポジトリを先に作ると、ネストしてプロジェクトが作成されるので嫌だった なんかないかなって下記眺めてたらいけそうだったので試した github.com コマンド $ yarn create nuxt-app . --overwrite-dir --overwrite-dir とプロジェクト名をいれるところを . にするだけ /usr/local/share/.config/yarn/global/node_modules/sao/lib/installPackages.js:108 throw new SAOError(`Failed to install ${packageNam…

Rails5.2でjoins後にselectでaliasで変更したフィールドが取れない

バグらしい qiita.com github.com Rails6系だと治っているらしい

m1 macでschemaspyをdocker composeで動かす

概要 参考にしてた記事で動かんくなってたので辛い 改めて整理して色々試して動くようになったのでそれだけ貼り付ける ディレクトリ $ tree -L 2 . ├── Dockerfile ├── docker-compose.yml ├── initdb.d │ └── 01-init.sql ├── output └── schemaspy └── schemaspy.properties ファイルの内容 Dockerfile FROM openjdk:8u212-jdk-alpine ENV DRIVER_URL https://repo1.maven.org/maven2/mysql/my…

Railsでのデバッグ

これまでprintデバッグプログラマだったが、さすがに辛いということでPythonのipdbみたいのないかなってぐぐってみたらあった。 techracho.bpsinc.jp あったけど、どうせControllerのデバッグとかめんどいでしょ？とか思ったんだけど、RSpecで試したらちゃんと停止した！！！！！？ 覚えた

サブクエリの結果とjoinする

概要 SQLだったら、2つのサブクエリの結果をjoinして結果を出したかった Railsでのやりかたわからんかったので色々試す 目的 TableAのvalueをidごとに集計するんだけど、①全集計と②とある条件で集計した結果をidごとに紐付けて差分とる。というようなSQLを書きたかった やり方 こちら参考 takakisan.com table_a_all_sum = TableA.group(:id).select('id', 'sum(value) AS sum_value') table_a_con_sum = TableA.where("条件").group(:id).select('…

ぼくたちに旅行はまだ早かった

概要 4歳と2歳つれて初めて家族旅行しました（僕の両親+弟付） 正直、旅行どころではなかった ぼくたちにはまだ早かったかもしれない 旅程 大阪観光 USJで遊ぶ 京都観光 淡路島でゴジラ！！ 急遽旅程変更して海遊館へ 前知識 長男は療育をうけている子。1年前とくらべてだいぶ話せるようにはなってきているが、スイッチ入ると暴れん坊 次男はおとなしいと思ってたが、2歳になり覚醒。イヤイヤ期真っ只中 I hava a 長男, I hava a 次男, ummm...! ＿人人人人人人人人＿ ＞ 暴れん坊将軍 ＜ ￣Y^Y^Y^Y^Y^Y^Y^Y^￣ 振り返り うちの子は暴れん坊将軍の生まれ変わりなのか…

Railsのassociationでaliasをつける方法とFactoryBotのassociationでaliasをつける方法

概要 ハマったので調べたメモ Rails qiita.com ~/app/models/user.rb ~/app/models/book.rb user:bookは 1:N とする user側はhas_manyになるが、book側はbelongs_toになる。 belongs_to :user, foreign_key: 'user_id' aliasに変更したい場合は、こう belongs_to :borrow_user, class_name: 'User', foreign_key: 'user_id' class_name にターゲットのモデル名を渡してあげたらおk 注意点として、a…

M1 MacでtfjsのWASMをビルドする旅（失敗しました）

概要 m1 mac使っているんだけど、tfjsのwasmビルドを試みたら色々死んだ 僕の中の結論はうまくいかない 試みたログ $ docker run --rm --platform linux/arm64/v8 -it ubuntu:latest /bin/bash $ apt update -y && \ apt install -y gcc python3 nodejs npm curl git build-essential $ cd ~ $ curl -L -o bazel https://github.com/bazelbuild/bazelisk/releases/downloa…

DOMException: play() failed because the user didn't interact with the document first

なんかChromeだと <video> タグを動的に再生するとたまに失敗が続くようなことがある。 というわけで、こうする <video id="video" muted /> こいつをつけるとうまくいきました。

Cannot use import statement outside a module

import * as scatter from 'scatter-gl' ↑のように該当 モジュールをimportすると下記エラー [nuxt] [request error] [unhandled] [500] Cannot use import statement outside a module at Object.compileFunction (node:vm:352:18) at wrapSafe (node:internal/modules/cjs/loader:1031:15) at Module._compile (node:internal/modules/cjs/loa…

Component inside <Transition> renders non-element root node that cannot be animated.

Nuxt3でwarningがでてたので、対応してみた。 www.memory-lovers.blog マルチルートノードコンポーネントがサポートされたけど、直下はダメらしい。。 なるほど〜〜 というわけで、記事と同様に単一要素に修正したところ消えた。よかった

RailsのN+1対策の話

zenn.dev Rails初心者マンの僕がこの記事をみて思ったこと joinsは？ キャッシュの有効期限はどこで設定するんじゃろうか qiita.com 他の3つとの違いは、associationをキャッシュしないこと。 なるほど serip39.hatenablog.com qiita.com なるほど〜〜〜 あと、関連のスライドもわかりやすかった speakerdeck.com allしてeachすんな クエリで実行できるのならクエリのほうが速い ActiveRecordオブジェクトの生成コストは高い

Railsの日付操作が面白い

RuboCopにこんな怒られ方しました。 C: [Correctable] Rails/DurationArithmetic: Do not add or subtract duration. Time.new - 30.minutes これ以外にどんな方法が？？？と思っていたのですが、同僚から教えてもらいました。 qiita.com おもしろい。 記事は日付ですが、時間もいけます。 [36] pry(main)> Time.current.ago(30.minutes) => Mon, 17 Oct 2022 22:22:54 JST +09:00 [37] pry(main)> Time.…

RuboCopさんに怒られたメモ

概要 意味調べて修正しているので、せっかくだからメモする Rubyなれなさすぎてもあり、めっちゃ怒られた（修正箇所いっぱい） 怒られたメモ C: [Correctable] Style/MutableConstant: Freeze mutable objects assigned to constants. 定数は freeze してね。はい。 qiita.com [Correctable] Style/TrailingCommaInHashLiteral: Put a comma after the last item of a multiline hash. 読めばわかりますね。Hash…

物流について調べているメモ2

www.aipacommander.com 前回 続き読んでいる。 読んでいるんだけど、IoTはともかくAIの期待値が大きくてもっとがんばらんと。という気持ちにはなる。 あと、AIがまじで頑張ってコスト削減ーってなると、極論人がいらなくなるということになると思うので、その点どうなの？という気持ちにもなる。 というのが海外だとそうなっているらしいけど、日本だと現場のノウハウがめちゃ溜まっているとのことなので、日本型のボトムアップ式でロジスティクス4.0をやっていこうぜ！というのがこの本の趣旨。 で。僕が知りたかったのはドライバーが儲けるにはどうすれば？ということだったので、この本はちょっち違うか…

Nuxt3.0.0-rc.11が動かない

結論からいうと、Nuxt3.0.0-rc.10で動きました。 環境 $ sw_vers ProductName: macOS ProductVersion: 12.6 BuildVersion: 21G115 $ docker --version Docker version 20.10.17, build 100c701 m1 macです（m2でも試しました） 試したこと だいたいはドキュメント通りに試しました $ docker pull node:16.16.0-slim $ docker run --rm -p 4000:4000 -it node:16.16.0-slim /bin/b…

物流について調べているメモ

今これを読んでいる 日本型ロジスティクス4.0-サービス多様化、物流費上昇、人手不足を一挙解決-作者:㈱クニエ ロジスティクスグループ日刊工業新聞社Amazon 今思ったけど、全く知らない業界を知るために本を読むのは僕は向いていないかも知れない。本ででてくる単語をある程度理解した上で読むとストレスなくてすっと入ってくるタイプなのかも。 話戻して、ロジスティクスってなんぞ？？？ってなっていましたが、ロジステック回帰じゃないのかとか思ってましたが、全然違いました。 ja.wikipedia.org 物流の英語じゃろ？って思ったけど、物流は物的流通の略語で物理の話で、英語にするとロジスティクスではあ…

DatePickerのformに空文字をSetValueすると 「Invalid time value」 になる

react-hook-formを使ってました。 nullはおkらしい setValue('date-input-form', null) // ok // setValue('date-input-form', '') // invalid time value

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

useEffectを削除したら消えた。なるほど。 const { setValue } = useForm() // 省略 useEffect(() => { // 省略 setValue('variable.hoge', hoge) }, [storeVariable]) こんな感じの処理を書いてた。 次に、useEffectを消さずに、setValueだけ消したらエラーは消えた。 で、色々探っていくと useEffectで更新しているstoreと関係ないstoreを第二引数に渡していた useEffectで更新しているstoreを第二引数に渡したらwarningが消えた ただ、1番目で指定…

error TS2538: Type 'string[]' cannot be used as an index type.

なんじゃろ？ってぐぐってみると下記がわかりやすかった qiita.com bobbyhadz.com 要は動的に用意した変数の型がわからんままObjectの要素を指定しようとするとだめということらしい。 // だめ // const key = Object.keys(current)[0] // OK const key: string = Object.keys(current)[0] result[key] = current[key] return result 解決。

8月は有給消化だったけど家族のコロナリレーで無事消化されました

実は転職するんですが、8月まるまる有給とれたので 実はもっと余ってたけど 、僕の人生の中では一大イベントになりました！！！ なにしようかな〜〜〜統計検定リベンジするのもいいな〜〜〜次の現場（？）に向けて勉強するのもいいな〜〜〜〜、前からやりたかったCGIの勉強もしてYoutuberチャレンジするのもいいな〜〜〜、いや時間も空いたし子供と接する日を多くするのもいいな〜〜〜 とか思ってたんですが、自分がコロナになり、家族もリレーするようにコロナ陽性者になりました。幸い、それぞれ1 ~ 2日もあれば元気になって大事にはいたらなかったのですが、隔離期間が思いの外長く、気がつけば8月が終わりな状況になっ…

【わからない】react-hook-formとYupで複数フィールドの重複をチェックするバリデーションとエラーを表示するフォーム

ほぼ1日かけて探したけどわからないので供養 const uniqueId = (value, context) => { const [_, parent] = context.from const filedNames = ['hogehoge1', 'hogehoge2', 'hogehoge3'] const list = [ parent.value.hogehoge1.id, parent.value.hogehoge2.id, parent.value.hogehoge3.id, ] console.log(list) const r = !list list.length …

【Jest】テスト実行時にテスト名をconsole.logで表示する

describe('useHogehogeHook', () => { beforeEach(() => { console.log(expect.getState().currentTestName); }); // 省略 これで、各テスト実行時にテスト名を表示してくれるようになる。 デバッグしているときに、どのテストでデバッグようにhookに追加したconsole.logが表示されているのかを追うときに便利（そんなことやらずにデバッガ使ってやればいいって話もあると思うけど、僕はまだその域にいけていない）

React + GraphQLで通信エラーを確認する

ベストプラクティスはどうやってデバッグするのかはわからないですが、下記メモ。 query, mutationからerror変数を取得する // errorを確認してみる const { data: getSomething, loading, error } = useGetSomethingQuery({ variables: { id, }, fetchPolicy: 'no-cache', }) console.log(error) すると、 Error: Internal server error が発生していることがわかりました。 chromeのdeveloper toolsのネット…

VSCodeとDockerとDocker Volume使ってTypeScript + React開発しているとnode_modulesをVSCodeが参照できないから型探検隊になってしまい夜しか眠れなくなる

参考にした記事 zenn.dev zenn.dev www.keisuke69.net 僕が試した手順 pluginをインストール このあとdocker-compose.yml用意しないといけないのかだるいとか思ってたけど、何もしなくてもよかった。 VSCodeの左したをクリックして、起動しているコンテナにAttach 選択すると起動しているコンテナの一覧がでてくるので選択する。すると、別Windowが起動するのでそこで作業すればおk 雑感 環境構築するのに結構時間かかるとか思ってたからやらなかったけど12分。。。。

TypeScriptの雑なメモ

ふぁ！？？？？？ってなったことが多いのでとりあえず雑なメモを残す ブルーベリー本から keyof const mmC = { mm: 1, m: 1e3, km: 1e6 } // OK // function c(value: number, unit: keyof typeof mmC) { // !??? // Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ mm: number; m: number; km: number; }…

Mockeryがわからない

laravel.com Laravelの中に入っているライブラリらしいが、使い方がいまいちわかっておらぬ。Jestでモックの流れをある程度把握した（つもり）と思っているので、ぱっと見なにをやっているかは読めると思っているが、モックできているのかどうかがわからない。 <?php // 省略 $status = Password::broker('user')->sendResetLink([ 'email' => $email ]); こんなコードを書いたとして、モックしたいとする。 <?php // 省略 // エラーを発生させる Notification::shouldReceive('se…

index.lock: File exists.

$ g add app fatal: Unable to create '~/project_dir/.git/index.lock': File exists. Another git process seems to be running in this repository, e.g. an editor opened by 'git commit'. Please make sure all processes are terminated then try again. If it still fails, a git process may have crashed in this…

macでXcodeをアンインストールしてしまったのでgitが動かない

容量足りなくなって、使わないし「えい！」って消したらgitが動かなくなった。 $ git status xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun あ〜〜、そういえばそうだったなって思ったが、Xcodeなくてもいられないかなと色々ググってみた。 $ sw_vers ProductName: macOS ProductVersion: 12.…

error ${url}: Extracting tar content of undefined failed, the file appears to be corrupt: "ENOENT: no such file or directory, chmod ${directory}

yarnインストールするとエラーがでたのでなにこれ？ってなってた。 $ yarn install ぐぐると下記で治るよ的な書き込みが多かったので試した。 $ yarn install --network-concurrency 1 すると治った。。。なぜ？？？？？？いまいち腑に落ちないがメモっとく。

LaravelのMigrationでエラー

Migration not found $ ./vendor/bin/sail artisan migrate:refresh --seed Rolling back: xxxx Rolled back: yyyy (128.76ms) Migration not found: yyyy ... Migration not found: はDBとmigrationファイルの同期が取れていないだけ？なのかなって思っています。 qiita.com テーブルの中身削除したらいけました。 $ ./vendor/bin/sail artisan migrate:refresh --seed [2022-…

Vite + TypeScript + Reactの環境にJestをインストールする（途中）

zenn.dev ↑みたらもう解決です。 github.com このcommitからスタートしました。 $ yarn add --dev jest typescript @types/jest ts-jest どうやらtypescriptが入ってなかったらしいです（あれ？？？？） あとは参考URLの通り、 jest.config.json と package.json を作成修正し、テスト用のテストコードを用意したらおk． $ yarn run test yarn run v1.22.17 $ jest --config ./jest.config.json ts-jest[config] (…

BigQueryでクエリのエクスポートをスケジュールジョブで叩くSQLを用意する

実行した日から去年のデータをエクスポートしたかった。年単位で実行したかったので、こういう感じで設定するといけた。 1st monday of january 09:00 叩くクエリは下記。 DECLARE run_date DATE; DECLARE last_year INT64; DECLARE start_date DATE; DECLARE end_date DATE; DECLARE file_name STRING; SET run_date = CURRENT_DATE(); SET last_year = EXTRACT(YEAR FROM DATE_SUB(run_date,…

Laravelにlighthouseをインストール

前回の続き www.aipacommander.com Makefileを用意したので下記記事を参考にインストールしてみる。 qiita.com $ make install_args package=nuwave/lighthouse $ make install_args package=mll-lab/laravel-graphql-playground http://localhost/graphql-playground あっさり導入できた。

Laravelのインストール

ひさびさにLaravelやっているが、遊び場みたいなものがほしいなって思ったのでインストールしようとしたメモ。 環境 $ sw_vers ProductName: macOS ProductVersion: 12.4 BuildVersion: 21F79 $ composer --version Composer version 2.3.8 2022-07-01 12:10:47 $ php -v PHP 8.1.7 (cli) (built: Jun 9 2022 14:21:07) (NTS) Copyright (c) The PHP Group Zend Engine v4.1.7,…

composerが動かない

$ /usr/local/bin/composer PHP Deprecated: Return type of Symfony\Component\Console\Helper\HelperSet::getIterator() should either be compatible with IteratorAggregate::getIterator(): Traversable, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in phar:///us…

Makefileとgit hookを使おう

Laravelがちゃがちゃしてます。 pushする前にテストー、linter実行ー、ってやるのがめんどくなってきたので、Makefileとgit hookをひさびさに導入してみました。 ただのメモ。 Makefile test: ./vendor/bin/sail artisan migrate:refresh --seed ./vendor/bin/sail artisan test --parallel phpcs: ./vendor/bin/sail composer phpcs phpcbf: ./vendor/bin/sail composer phpcbf all: @make t…

react-webcamでstreamに値が入るまで待つ

github.com const webcamRef = useRef(null) return ( // 省略 <Webcam audio={false} className="z-0" id="img" ref={webcamRef} /> ) こんな感じで起動していましたが、別処理でカメラで取得したデータを別途保存したいため、 webcamRef を使おうとしたら、streamにまだ値がないですよエラー。 どうやって待てばいいのかと色々探してみたり、過去実装してたpromiseをretryしてみたりとやってみたが、settimeoutと相性悪く（そんなことはないと思うけど、タイミングによ…

hasOwnProperty で取得できない謎

すぐ解決したけど qiita.com こういうケースは in を使いましょう。

MediaRecorderのdataavailable eventが発火されるタイミングについて

stopが呼ばれるときってマジ？？？？？ developer.mozilla.org 記録を停止します。 この時点で、保存したデータの最後の Blob を含む dataavailable イベントが発生します。 これ以上記録は行われません。 アッはい 動作してみないと信じられない！！！（なんでやねん） 確認したところ jsfiddle.net 適当にぐぐって参考にしたReactのmoduleもこんな感じ github.com github.com github.com stopを呼んでから、ondataavailableが実行されないとchunkが空っぽなはずなので、mediaRecorder…

useEffectで初回実行しないようにする

qiita.com qiita.com koke-tech-blog.vercel.app zenn.dev 第二引数に指定してたらそいつが変更されるまで動かないと思ってたんですが、そうじゃないらしい。なので↑みたいなことを試したんですが、 useRef ってそういう使い方あり？？？ってなってもう何もわからなくなった（ずっとdom参照のためのフックだと思ってた）

最近のLaravelでの学びメモ

振り返りが追いついておらぬ リセットパスワード用URLリンクをメールで通知 通知をQueue?に詰める laravel.com 詰めるのはdoc確認するだけで簡単でした。 <?php use Illuminate\Support\Facades\Password; // 省略 $status = Password::sendResetLink([ 'email' => $email, ]); $status は下記の定数が返ってきます。 github.com それにあわせて処理やResponseをどう返すかなど考えるといいかも。 ログインのユーザータイプ？が複数ある場合 一般用、管理用とかで分…

`sendPasswordResetNotification` のオーバーライドでエラー

Method 'App\Models\User::sendPasswordResetNotification()' is not compatible with method 'Illuminate\Foundation\Auth\User::sendPasswordResetNotification()'. なにこれ〜〜〜〜 ぼくが書いたコード public function sendPasswordResetNotification(string $token) { // 処理 } 元のコード <?php namespace Illuminate\Contracts\Auth; inter…

ReactでMUIコンポーネントにstyleを渡す

なんてよぶかわからんが、とりあえずメモ mui.com こいつにstyleを渡すには sx propsにわたす必要がある. const a = { sx: { backgroundColor: '#eee', } } return ( <TextField id="ほげほげ" label="ほげほげ" defaultValue={hogehoge} ...a /> ) このとき、backgroundColor を background-color って指定したら怒られる。 react_devtools_backend.js:4026 Using kebab-case for css prope…

末尾Slash（trailing slash）の有無で、APIへのリクエストがリダイレクトしたりしなかったりする謎

最初に結論から 結論 FastAPIはデコレーターで指定したパス通りじゃないと、 location を返す フレームワークやマネージドサービスによって仕様が違うっぽい？ので注意したい 環境 バックエンド: FastAPI==0.74.1 フロントエンド: JavaScript フレームワーク(axios) 事象 axiosのBase URLをhttpsで定義しているのに、あるAPIを叩いたときにhttps環境下でhttpが混ざってるよのMixedエラーがでてきた なぜ？？？？？ってずっと「axios mixedエラー」で検索してたけど、全然それっぽい記事に出会わず混乱していた するとこんな記事…

読書雑ログ

この本を読んでいる。面白い。これまで何も考えずにチューニングしてきたな、とか思っちゃった。（そもそもフロントエンドのチューニングあんまりしたことないかも） Webフロントエンド ハイパフォーマンス チューニング作者:久保田 光則技術評論社Amazon この本ででてくる「RAIL」というキーワードについて、わかったようでわからなかったので調べてみた。ぐぐるときは「RAIL」だとRailsがいっぱいヒットするので「web RAIL」でググると良いです。 developer.mozilla.org gihyo.jp なんとなく理解したがもう少し事例（というか体系的に理解したい）がほしい

Blenderで遊ぶ

目盛り？（グリッド？）のスケールが読み取れない（ぱっとみ1m？1cm？がよくわからない） とりあえず本を読んで真似て作るを繰り返している。いつになったらVtuberになれるんだ。まぁすぐにできるとは思っていないので地道に進める。 おーすげーとか思ってたけど下が謎。 わかります？影がおかしい（天板で隠れてるところは普通影になるはずだけど、天板すぐ下の脚に光があたっているなぜ？） 入門Blender2.9 ~ゼロから始める3D制作~作者:シゲユキ, 伊丹秀和システムAmazon

コツコツ作戦よさげ

4月は社内ニートだったので個人開発が進んだ感じでしたが、5月からどうせ忙しくなって何もできなくなるのでは？とか思ってたんですが、予想は外れてブログも個人開発も進めることができました。（仕事がそんなにパタパタしていないというのもありそうですが、家事子育てが大変だったけど） 4 ~ 5月はなるべく子どもたちを21時までに寝かしつけして、明日の準備が終わったら眠くなるまで勉強やら開発してみる、みたいな生活をしてきました。過去は営業時間内で間に合わずだいたい仕事してたんですが、今年に入ってから夜仕事する意欲があんまりわかなくて、朝や営業時間内にめっちゃ集中して終わらすみたいなことをやっているとなんとか…

Vue3(Composition API + Vite)の勉強のために作ってたリポジトリを公開してみた

task-choice.it-playground.link 残念なタイトル。。。（issueに乗せておこう。。。） yoshikiito.net こちらの記事をみて、ちょうど僕の悩みでもあったのでやってみよう！（最初はTrelloとかで）と思ったけど、ちょうどVue3勉強したかったので、作ってみようかってことで作ってみた。 github.com で、あらかたできてきたのでせっかくだから公開しちゃおうってことでドメインとって公開してみた。 公開のときに踏んだ参考にした記事はこちら。 zenn.dev ハマったことはこちら。 ACMは us-east-1 じゃないとCloudFrontが認識して…

バラバラフェスティバルの読み込み

ワンピースの技じゃないです。以前LTしたときに、破壊する（Meshをカットする）Scriptをネットから拾ってきたので、それのコードを改良したくて、読み込みしてました。 バラバラフェスティバル（？）の改良に成功した（ソース読み込んだらバラバラしたObjectにも同じScriptをAddしてたからバラバラにするたびに処理が重くなる） pic.twitter.com/yVGp8Rwo2Y— アイパー隊長 (@aipacommander) 2022年5月21日 ソースコードはこちら。 MeshDestroy.cs · GitHub 参考にしている記事 qiita.com これから読もうとしている記事…

gitのメモ

Git リポジトリ内で誤って消してしまったファイルを復元する git-recover．一度でも git add していれば，コミットしていなくても blob objects から復元できる可能性がある 'ethomson/git-recover' https://t.co/RY96XSxzQg— ドッグ (@Linda_pp) 2022年5月17日 zenn.dev commitでオブジェクト（？）ができるのは知ってたけど、addでもできるのか（blobオブジェクト）

Property 'ctrlKey' does not exist on type 'Event'.

const handlerSaveNodes = (e: Event) => { if (e.ctrlKey && e.code === "KeyS") { console.log(e); } } これを const handlerSaveNodes = (e: KeyboardEvent) => { if (e.ctrlKey && e.code === "KeyS") { console.log(e); } } こうじゃ developer.mozilla.org

vue-tscコマンド何もわからん

まとめ いきなりですが、解決していないので、まとめから。 色々試したが vue-tsc --noEmit -p tsconfig.app.json の composite をコメントアウトすると型チェックが動いた trueになっているとincrementalフラグがtrueになり、 vue-tsc コマンドはサポートしていないのでエラーになる incrementalってなんだ（勉強中） なんで tsconfig.json の references は読み込まれないのか 我々調査隊はAmazon（MSだけど）の深淵へと向かった（TypeScript読込中） tsconfig.app.json {…

Clearing cache and forcing full-reload to ensure typescript is compiled with updated config values.

設定ファイルとか更新したらでてくるのですが、キャッシュを削除するのはわかるけどどこを削除すれば？人向け。 コード見るとこの辺。 github.com そしてこうする。 $ rm -rf ~/node_modules/.vite/*

VSCodeでVite + Vue3 + TypeScriptの開発環境のセットアップ

Type Safeな世界がやっと見えてきた。。。 zenn.dev すべては↑にかかれている（ありがとうございます） 実は先日試してたんだけど、そのときはなぜか再起動してもPluginが反映されていない挙動が発生しており？？？ってなっていましたが、今日うまく言ったよかった。 そしたら色々わかった。 なぜか InjectionKey をimportするとエラーがでてアプリが動かないのでなぜだーとかやってた件。 今回いれたPluginに注釈されたところ、InjectionKey は型なので、型としてimportしろと注意。なるほど。 before import { InjectionKey, re…

Serverless Frameworkで.envファイルを読み込んで定義した環境変数を利用する

かなり時間使ってしまってワロタ（涙） 環境変数使いたいだけなのになんでこんなに時間をかけてしまったのか。。。とりあえず僕の時間が消えたぶんだけきれいにまとめた手順が下記 ~/src/functions/hello/handler.ts // 省略 const hello: ValidatedEventAPIGatewayProxyEvent<typeof schema> = async (event) => { console.log(process.env.HOGE); // 省略 デフォで用意されるファイルに環境変数読み取れるか用意。 .envファイルも用意する。 HOGE="HOGEHO…

Serverless Frameworkのaws-nodejs-typescriptでAPI KEYが設定されたAPIを用意する

このフレームワーク楽しいな（API GatewayとLambdaの連携を一通り遊んだことがある人ならいじるのが楽しいと思う） ./serverless.ts に下記設定を追加します。 apiGateway: { // 省略 apiKeys: [ { name: 'free-key', } ], usagePlan: { quota: { limit: 1000, period: 'MONTH' }, throttle: { burstLimit: 200, rateLimit: 100 } } }, // 省略 あとは個別のAPI設定に利用できるように設定します。 ~/src/function…

Serverless Frameworkのaws-nodejs-typescriptでCORSが設定されたAPIを用意する

ドキュメント読んだら色々わかるんですが、 aws-nodejs-typescript のテンプレートでどうやって設定すればよいのかわからなかったのでメモ。 APIのfunctions設定で、CORSの設定をonにしたい関数だけ下記設定をします。 aws-nodejs-typescript のテンプレートでは、 src/functions/ 以下にAPIごとにディレクトリが作成できるので、 src/functions/hello/index.ts で関数の設定が編集できます。 import schema from './schema'; import { handlerPath } from '…

Serverless Frameworkのaws-nodejs-typescriptでHTTP GET methodを用意する

GitHub検索したらあるんだけど、Googleではあんまりヒットしないなぜ？ TypeScript力が低すぎて、いまいち何が書いてあるのかわからないのですが、とりあえずできたのでメモ。 github.com import type { ValidatedEventAPIGatewayProxyEvent } from '@libs/api-gateway'; import { formatJSONResponse } from '@libs/api-gateway'; import { middyfy } from '@libs/lambda'; const hello: Validated…

ServerlessFrameworkでHello world.

すべてはここにおいてきた。 github.com で、へろーわーるどしようと叩いてみたけどエラーで失敗するなぜ？？？ root@00231e897e28:/app/backend-prj# sls invoke local -f hello Running "serverless" from node_modules { "errorMessage": "Cannot read properties of undefined (reading 'name')", "errorType": "TypeError", "stackTrace": [ "TypeError: Cannot read …

Nuxtでの実装について

フロントエンドの実装がなんもわからん状態になっていました ぼくはReactを触ったことがないので、あくまでVueしか語れないですが（正直Vueもそんな語れる気がしない）、もともとjQueryでSPA開発をしたことがある僕が、Component志向なフレームワークを触ってから便利ー！！感動！！！的なことを思ったのですが、ここ最近はComponentむずい〜ってなっておりました。 主に理由は下記 ビジネスロジックどこに書いていいのかわからん問題 → Plugin？？？ Storeに絡む処理は全部Vuexに！！→Vuexが太る 用意したPluginをComponentから呼ぼう！あ、あのUIも必要だ…

Nuxt2でViteを使う

ビルドが速いらしいので使ってみた vite.nuxtjs.org この記事参考にした（インストールはこれで大丈夫） zenn.dev ローカルにいれてれば特に問題ないと思うが、ぼくはDockerを使ってたので謎の挙動が発生した（Nuxtアプリをブラウザで開くとhot reloadの無限ループ） 今回バージョンは違うけどこの記事が参考になりました。 qiita.com 開発側だけの問題っぽい。ちなみにポートを変更したい場合は、 nuxt.config.js に下記設定を追記したらよい vite: { server: { hmr: { protocol: 'ws', port: 81, }, },…

crbug/1173575, non-JS module files deprecated.

こんなエラーがでて、developer toolが起動しているときはサイトが読めなくなった。何ぞ。。。？？？ 色々探したけどよくわからんので、developer toolを初期設定にしたら直りました。 support.google.com

JavaScriptを雰囲気で書いているマン、やっとimport/exportを理解

謎だったこと。import ... from '...' で、 import {...} と import ... のどっちでかけばいいの問題。（後者は特にVueでよく書くなって思ってた） というわけでドキュメントを読みました（今頃） developer.mozilla.org developer.mozilla.org 完全に理解しました。 import { hogehoge } は export function hogehoge() で呼べる import hogehoge は export default function hogehoge() で呼べる qiita.com qiita…

vueのcomposition apiを理解したい

正確にはNuxt(v2)ですが zenn.dev こちらの記事参考にして進めています。 github.com 進捗がこちら↑（○ロ注意） まだ完全に理解はできていないので雰囲気だけですが、componentとロジックをめっちゃ分離できた感じがある。文章読むだけでは全くわからなかったがこれはよい！！！そして果たしてNuxt（Vue）なのかこれは？？？みたいな気持ちにもなりました。 this がなくなるのもステキだなって思いました。 <script> import { defineComponent, ref, useContext } from '@nuxtjs/composition-api'…

自分の葬式で自分は何と紹介されるか

と、居酒屋で前職の同僚に言われた際に、想像してみたら「技術バカ」と言われました。というのが、今自分が一番やりたいことやら譲れないものとかなんだとか。なんかイイハナシダナーと思ったので忘れないうちにメモ

DockerでPostgreSQLのコンソール？に叩いたSQLを流すようにしたい（できていない）

まだできていないけど、コンテナ内部のログファイルに出力するようにしたのであとはそこをどうにかするだけ。 $ docker run -d --rm --name test_pos -e POSTGRES_PASSWORD=test -it postgres:14.1 f779875f7c8db4889316bc5730276b258aa96497de6fdb54c64635dbfd8163fa $ docker ps grep test_pos f779875f7c8d postgres:14.1 "docker-entrypoint.s…" 13 seconds ago Up 12 sec…

aiohttpのweb.json_responseにDecimalとかdatetimeとか変換できるようにしたい

Pythonの json.dumps は変換できない型があります。 qiita.com ↑の記事のように進めたらできるのですが、フレームワークに組まれている変換関数はどうやったら設定できるの？というのが今回の話。 早速コードを確認してみると、なるほど、関数自体をわたしているのね。どうやって引数を渡しましょうか。 https://github.com/aio-libs/aiohttp/blob/65de218c6297284663eeae5c07e9146ef1e4485e/aiohttp/web_response.py#L735 悩んでいたけど、defaultで設定した関数をそのまま渡しちゃえ…

PWAをひたすら調べまくるログ

なんもわからん speakerdeck.com speakerdeck.com knowledge.sakura.ad.jp www.youtube.com qiita.com techblog.kayac.com favorite-pwa.com

AWS CDKに入門（したい）

aws.amazon.com チュートリアルがあったのでそこみてやろうとしました。 前提 npm入っています Python入っています awscli入っています inline policy作っておきます（今回はstudy-cdkにしました） IAMユーザー作っておいて、aws configureコマンド実行済みです きれいな手順 install $ npm install -g aws-cdk $ cdk --version $ aws sts get-caller-identity { "UserId": "hogehoge", "Account": "fugafuga", # これを使う …

「UI/UXデザインの原則」を読んだ

UI/UXデザインの原則作者:平石大祐幻冬舎*Amazon 読書中のメモ 使い勝手のよさ ターゲットのニーズに沿った優れた体験価値を提供すること 具体的な数字よりなぜ便利なのかを謳うべき 詳しくなりすぎるのと考え方が偏ることで ユーザーとのすれ違いが発生する データだけみてても頭打ちしがち、仮説をたてて定性分析も併せて行う 利用前と利用後も含めて体験をデザインする ユーザーテストのシナリオ作成は機能を使ってみてくださいではだめ ユーザーの善意や忖度に惑わされない 素の心理や行動を汲み取る 説明は常に不足していると考える 認識されない要因は定型化してまとめてチェックする 入力フォーム エラーの場…

Unityで設計の悩み

yotiky.hatenablog.com こちらを参考に組んでみた。とりあえずとてもよかった。 各ScriptのStartとUpdateの同期取れないのもめっちゃ苦労したし、順番もなんか守ってくれないので、どうしようどうしようとか思ってたら上の記事に出会い真似したらできた。ありがし。 じゃあ何を悩んでいるかと言うといくつかある。 突然のクラッシュ UIやらScript実行！とかやってたら突然クラッシュする。Scriptならエディタに残っているので大丈夫なんだけど、UIやGameObjectはSceneで保存しておかないと消えちゃうので困った困った。 今回簡単なUIだったけど、これが凝ったモデ…

まだ良くわかっていないんだけど色々なメモをする

やりたいこと Prefab用意して、Scriptから指定した分のGameObject（人）をばんばん作る 作った人をManagerクラスかなにかに保持しておく Cinemachineのfollowを切り替えられるようなクラスから、Managerクラスの人リストを引っ張ってきて、対象を切り替えられるようにしたい（これがやりたいこと） よしやるぞ！ PrefabをInstantiate ekulabo.com よーし簡単そうだーってAssetを読み込む旅にでる。 Asset読み込みの旅 qiita.com light11.hatenadiary.com shikaku-sh.hatenablog.…

Blenderのモディファイアでカーブに沿った道を作ってたけど複雑なやつはやめたほうが良い

適当なカーブを用意したとして、左から 1番目: 作れる 2番目 パスは周回している: 作れる 3番目 周回しているところもあればそうじゃないところもある: ダメ 結構便利なんだけど、これ以外の方法でどうすればよいのやら... 他手法も知っているが、この方法でよかったのは、ミラーで組んだobjectで歩道とか作りやすかったんだけど。。。

Blender → Unityへ3Dモデルをもっていきかた

テクスチャが剥がれるのが許せん www.youtube.com こちらの方の動画参考にしたらすべてうまくいきました。 ただ、テクスチャやマテリアルを外部保存（？）する方法は模索中

Blenderの操作メモ

Macです※随時更新予定 やったなーは思い出せるけど手順が思い出せないのでメモしていく所存 ベジェカーブでパス書いて、面を貼って押し出し 1 Shift + A → Curve → Bezier 2 初期に配置されたPointを削除（edit mode → 右クリック、Delete Point） 3 edit modeのまま、描きたいパスのスタート位置に点を打つ 4.1 点を打ったら、キーボードのEで線を伸ばせるようになるので、次のポイントまで移動してポイントを打つ（クリック）。描きたいパス分だけ繰り返す 4.2 スタートとエンドのポイントは後手順でマージするので、近くに打つだけでかぶって打た…

Pythonのデコレーターを理解するための記事

デコレーターはよく利用していたいんですが、引数渡したいな、修正しよう。。。はて・・・？どうやるんだこれ？ってなったので調べてみたら何も理解していないことがわかったので、メモ。 www.lifewithpython.com zenn.dev qiita.com 理解したらすっと入ってくるけど、それまでは見づらくて混乱するのもちとツライなって思っている

Nuxtのbase urlを変更したい

デフォルト / なんですが、proxyでサブディレクトリにマッチさせて、nuxtへリクエストしたい時、トップページは表示されるんですが、バンドルされたapp.jsとかはルートディレクトリでリクエストされるので、真っ白のままの状態になる。 というわけで修正します。 nuxt.config.js で router を修正する。 export default { router: { base: "/admin/", }, } こうすることで /admin/hogehoge で、リクエストするようになります。

url: (3) Failed to convert “https to ACE; string contains a disallowed character

$ curl -L “https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)” -o /usr/bin/docker-compose こんなコマンドを叩いた。で、エラーが出てきて怒られたが、原因がダブルクオーテーションがおかしいとのこと。確かにおかしい。 $ curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(una…

nuxt authモジュールのcookie schemaとcookieのHttpOnly属性は相性が悪いらしい

nuxt authモジュールでマルチログインを対応したくて色々試行錯誤しているところです。 www.aipacommander.com で、バックエンド側でcookieの名前を変更できるようにする＆セッションストレージを2つ用意できるようにしたところで、nuxt側でどうやって1つめ、2つめのセッションかを把握することができるのかしら？とドキュメントやnuxt auth自体のコードを読み漁ってました。 auth.nuxtjs.org github.com 探してみると、nuxt.config.jsでの cookie にauth.storage_name.cookie.name で指定したkeyが…

nuxt/authで謎のエラー

こんなエラーがでました。 ╭───────────────────────────────────────────────────╮ │ │ │ ✖ Nuxt Fatal Error │ │ │ │ Error: Cannot resolve "user" from "/app/user" │ │ │ ╰───────────────────────────────────────────────────╯ 摩訶不思議だったんですが、 nuxt.config.js を間違えました。 auth: { strategies: { user: { scheme: 'cookie', // これがない…

aioredisとaiohttp-sessionのバージョン問題

最初下記バージョンでやってました。 aiohttp==3.7.3 aioredis==2.0.1 aiohttp-session==2.9.0 したらこのエラー AttributeError: module 'aioredis' has no attribute 'pool' githubのソースとにらめっこしてたら、aiorhttp-sessionでは、バージョンが 2.10.0 だと aioredisのバージョンを2以上じゃないとだめって書いてありました。なるほど。。。 というわけでバージョンあげてみたんですが、aiohttpの方もバージョンあげろってpipに怒られたのので修正して、最終的…

Promiseでretryする仕組みを導入する

そういえば、年末もそんなことにハマっていたな。そうかretryというキーワードかということを最近思った。 パクリ リスペクトした記事はこちら。 qiita.com 今回やりたかったこととして、GPS情報を取得するためにGeolocation APIを使っているが、こいつが何度か失敗するので、retryしたいなというのがモチベーション。 また、書いてあるコードをちゃんと理解していないのもあって、試行錯誤しながら コピペ 書いてたら下記のようにしたら利用できた。 const setCurrentPositon = (pos) => { const crd = pos.coords console.…

SPAの戻るボタンとブラウザの戻るボタンをあわせる

Nuxtでページを移動するとき、下記のようにします。 this.$router.push({path: '/about'}) で、移動したのちの戻り方ですが、History APIを利用します。 window.history.back() // または // window.history.go(-1) これでおk． また、URLは変えたいけど、ページは遷移したくないときは下記のようにしましょう。 window.history.pushState(null, null, '/about') ちなみに、Nuxtのrouter.pushはhistoryに書き込んでくれるようなので、自分でpushSt…

やりたいことはわからないが、やればやりたいことになる

29歳ぐらいからの悩みですが、軸がほしいよね。この技術といえば僕、僕といえば○○。みたいな。 ひろーくあさーくやってくると、器用貧乏にはなるのだが、僕はこれが得意です！！！と胸張っていえず、この技術はこのぐらいは知っています。ここまでならいけます。みたいなことしか言えず、なんか歯切れ悪いなーとか思ったりしてました。 というのを、だいたい何か嫌なことがあればそういうのを思い浮かべて、業界絞るか・・・みたいな気持ちになるのですが、案件やとりあえず手を動かすとそんなこと考えることが減るなってことを最近気づきました。 今年から短い時間でもいいからちょっとでも少しでもコミットするぞ！と生活を送っています…

NuxtでのVuexなんもわからん

VueだけのVuex使ったときにはなんとなくで使ってたのでできると思ったけど、今回改めてやってみたらなんもわからん。 とりあえず記事だけペタペタ貼り付ける。 階層が違うStoreを扱うときの参考URL qiita.com axios使ってStoreに突っ込むときの参考URL qiita.com mapStateの使い方がわからん！ときの参考URL qiita.com zenn.dev qiita.com モジュールモード？クラシックモード？がわからんときの参考URL qiita.com

vue2-google-mapを使って、自作のMarkerを用意する

www.npmjs.com これです。便利。 GoogleMapAPIキーの発行とか設定の仕方とかは他記事をみてほしいのですが、今回はMarkerの使い方だけに絞ろうと思います。 <template> <GmapMap ref="map" :center="center" :zoom="zoom" :options="mapOptions" map-type-id="roadmap" :style="mapStyle" > </GmapMap> </template> <script> export default { name: 'IndexPage', data() { return { …

iPhoneで「歌ってみた」の動画を作る（途中）

音はこれを参考にしたらまじでできた。iPhone8で試しました。 www.youtube.com よし、歌ったから上げるぞ！ってときに気が付きました。動画は・・・？？？