眠気.jl

投稿=不定期

日記

陽キャなのでワンピースの映画見てきました(ネタバレ有り)

諸事情で拉致されるような形でワンピースの映画見に行きました
まとめ
イクイクの実: 登場せず...
ウタ: ウタワールドにみんなぶち込んで幸せにしたいという、NARUTOのオビトっぽい危険思想の持ち主、死んだ
シャンクス: 動いて戦ってた、かっこいい。
腕サメに食われて、ドン!(覇気) してるイメージが覆りました
ルフィ: ニカになってた

草生えた出来事

女友達(?)に彼氏()が出来てた
○○○パワーでキモオタを惹きつけるネット恋愛ごっこを数ヶ月単位で繰り返していて、将来フェミニストにならないか心配です

コストコ

洗浄済みキヌアがあったので買いました
パスタと同じ要領で水とレンチンして食べてます
味はまずくも美味しくもないですが、保存と調理がしやすい炭水化物として優秀かと思います
エクジステロイドが筋肥大に有用なのか結局よく分かってないのでPubMedあさります

Tailwind作業

Tailwindでかっこいいサイドバー出し入れしたかったのでこの動画シコシコパクってました。
書く量多すぎてぴえんぴえんしてました。

www.youtube.com

日記

電気代

何もしてないのに(モニタ5枚とグラボ付きPCとスイッチとエアコンを常につけてるだけ)電気代が2万超えました...これも政権の陰謀に違いないですね。

統一協会に統一してほしいこと

統一協会が出している壺を1919円で買ったら、あらゆるチャットツールが「Ctrl+Enterで送信、Enterで改行」に✙統一✙されそうな気がします。誰か統一協会の知り合いいたら紹介してください。

ブログについて

この本と、クラメソの記事を使って
Next.js+Tailwindでマークダウンで書けるブログをAmplifyでホスティングしました(SSG)
今はPV数狙いで反ワクとかオーガニックとかアレな人向けのブログをやってます。そのブログをデザインの練習に使って、整備できたらこのブログもAmplifyに移行しようと思います。その際はまともな話題だけ切り抜くようにします。
今後ともよろしくおねがいします。

VSCode ExtensionのExtensionが便利だったかも

エクステンションのエクステンションとは

[言語名] Extension Packは結構見かけるのですが
VSCode Extension Packという、人気のExtensionを集めてこれを入れると自動で色々入れてくれるExtensionを見つけて便利だなぁとなりました
ろいより

CodeStudio Extension Pack - Visual Studio Marketplace

良いコード/悪いコードで学ぶ設計入門といちやさWeb3.0の違い

共通点があって間違えてしまうかもしれないので共通点と相違点を書いておきます

良いコード/悪いコードで学ぶ設計入門―保守しやすい 成長し続けるコードの書き方

いちばんやさしいWeb3の教本

共通点

・発売が最近
・内容に誤りがある、いちやさWeb3は少なくとも歴史の部分が、設計入門はValue Objectに関して。
・熱狂的に高評価している集団が存在する。

相違点

・良いコード/悪いコードで学ぶ設計入門は、回収されてない
Amazonにて、いちやさWeb3は低評価されているが、設計入門は高評価と称賛に溢れている
・いちやさWeb3は回収されて値上がりしているので、どうせ内容に誤りがあるならこちらを買ったほうがお得かもしれない

感想

誤りが本に含まれていて、なおかつそれが軽微な誤植や計算ミスではなく、著者様の誤解に基づく場合、2つの選択肢があると思います。
1.誤りに注意深く、深く疑いつつ、注意深く読む。
2.もっと信用できる人が書いてる本読む。
私は疲れたくないので2ですが、紹介した2冊の本は1.を根気強く続けられる方々に向いているかと思います。

本を出すのは自分にはできない行為なので、出版に至っているすべての方を尊敬しています。

Babylon.jsの日本語の本出てたので読みました

Vite+TypeScript+Babylon.jsでWebARをはじめる本 (技術の泉シリーズ(NextPublishing)) | 堤 海斗 | 工学 | Kindleストア | Amazon

本の感想

説明にもある通り、座標系の説明とか全部すっ飛ばされて、ViteとかAzure Web Hostingとか3D好きそうなオタクがそんな興味なさそうな説明に結構ページが割かれてしまっています。あっさりしてて良い人もいるかも。
この本ではSceneでCreateBoxしてマウスでグリグリさせる方法だけが書いてあります。この本でBabylon.jsを色々学ぶというよりは、取っ掛かり的な書物と感じました。
その代わり、エディタの設定等が詳細に書いてあり、Babylonで型の恩恵を感じられます。設定したら、この本とほぼ同じ内容をCoPilot先輩が全部サジェストしてくれました。
Babylon.jsはMicroSoft製なのに、ドキュメントがドキュメントになっていて、Playgound まであるということに驚きました(MicroSoftなのに良い事してる!?)。
「Viteとかホスティングとか興味ないのでyarn/npm install babylonしてCanvasにCube表示さる方法を教えろ!」という方はp17からp26だけ読めばいいと思います。

物足りなかったので

床と玉生成していじってみました

youtube.com

床と玉の生成とCanvasの生成するコンポーネント

Nextで作ってその中に見て作ったキャンバス入れてたので、コンポーネントを追加した ObjBabylon.tsxを書いて

import * as BABYLON from "@babylonjs/core";
import { render } from "react-dom";
import { useRef } from "react";
import "babylonjs-loaders";

const objToBabyon = async (canvasId: string) => {
  const renderCanvas = document.getElementById(
    canvasId
  ) as HTMLCanvasElement | null;
  if (!renderCanvas) {
    console.log("cant render canvas");
  }
  if (renderCanvas) {
    console.log("render canvas");
    const engine = new BABYLON.Engine(renderCanvas, true);
    const scene = new BABYLON.Scene(engine);

    scene.createDefaultCameraOrLight(true, true, true);
    scene.createDefaultEnvironment();

    var sphere = BABYLON.MeshBuilder.CreateSphere(
      "sphere",
      { diameter: 2, segments: 32 },
      scene
    );

    sphere.position.y = 1;

    // Our built-in 'ground' shape. Params: name, options, scene
    var ground = BABYLON.MeshBuilder.CreateGround(
      "ground",
      { width: 5, height: 10 },
      scene
    );

    engine.runRenderLoop(() => {
      scene.render();
    });
  }
};

export default function ObjBabylon() {
  const elementId = "renderCanvasObj";
  objToBabyon(elementId);
  return (
    <>
      <canvas id={elementId} ref={useRef(null)}></canvas>
    </>
  );
}

index.tsxはこのようにする、ToyBabylon.tsxは本見て書いたコードが入っている

import type { NextPage } from "next";
import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";
import ToyBabylon from "../components/ToyBabylon";
import ObjBabylon from "../components/ObjBabylon";

const Home: NextPage = () => {
  return (
    <main>
      <h1 className=" text-10xl font-bold text-blue-700">
        本に書いてあったやつ↓
      </h1>
      <ToyBabylon />
      <h1 className=" text-10xl font-bold text-blue-700">床と玉作った↓</h1>
      <ObjBabylon />
    </main>
  );
};

export default Home;

他の本

Packtから9月にめちゃくちゃ面白そうな本が出るらしく全裸待機中

Amazon | Going the Distance with Babylon.js: Building extensible, maintainable, and attractive browser-based interactive applications from start to finish (English Edition) [Kindle edition] by Elster, Josh | Game Programming | Kindleストア

疑問?

.objローダーが動かなくて泣いているので調査中、ホントは親の顔より見たうさぎを読み込みたかった。

終わりに

WebGLでテドリイッセンマン!!とまではいかなくても、仕事でやりたいなぁという気持ちになっています。
自分のdiscordサーバーでBabylonとかTHREEの作業実況してるので良かったら連絡ください discord: nomorepython#5654, twitter: 永久凍結, instagram:nomorepython
たまにAWSキーぽろりもあるよ

某メンターサービスで見つけた面白い人達の性別がなぜか共通していた

この投稿はフィクションです, 男女平等の観点からどの性別かは言いません。
某手数料双方向中抜きビジネスを覗くと、スラム街みたいで楽しかったのでご報告。

1
結婚相手の金をWordPressでイッセンマン系情報商材にぶちこむ人

2
cdを全角で打ってキレ散らかして不機嫌になる人

3
無料で教えてください系の人

4
税務処理を3000円で外部の人に押し付けようとしてる人

5
請負で受けた仕事を丸投げしようとしてる人

追記
すべての人間って本当に生きるべきなんですかね。
私は生きていて良いほど頭良くないし価値もないので楽になりたい...と思うことがあります。
ですが上記の人達を見ると前向きに生きていて、勇気をもらいました。

やまゆり園事件 | 神奈川新聞取材班 |本 | 通販 | Amazon

既存のNext.jsプロジェクトにPrisma+Supabase入れたメモ

背景

DB用のコンテナ立てて、接続したい方はDB用コンテナの通信が確立するまで待ってから接続するみたいなentrypointシコシコ書くのも疲れてきて、外部サービスに逃避したくなりました
depends_onでも起動順しか制御できず docs.docker.com while ! nc -z db 5432; do; sleep 0.1; doneみたいなことをして気合で解決してます
docker composeのオプションが進化してbooted_laterみたいなオプション生えてほしい

やったこと


Supabaseのコンソールで作成したテーブルをprismaでpullしてくる
=prisma/schema.jsonに作成したテーブル定義が生えることを確認する


index.tsxprisma client生やしてテーブルの中身見る

①手順

1
ポチポチ部分
Supabaseいってテーブル作っときます
profileという名前でテーブル作成しました

2
ターミナル

npm i -D prisma
npx prisma init

3
.envが生えて

DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"

となってるのでこれを書き換えます, Supabase->Settings->Databaseに行くと, Database name, Password, Host, Port, Useが書いてあるのでそれにしたがって置換します

DATABASE_URL="postgresql://[Database name]:[Password]@[Host]:[Port]/[User]"

4
schema.jsonを必要であれば変えます, supabaseはpostgresqlなのでデフォルトのままで大丈夫でした

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

5

npx prisma db pull

prisma/schema.jsonにテーブル定義追記されてることを確認->ヨシ

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model profile {
  id            BigInt    @id @default(autoincrement())
  created_at    DateTime? @default(now()) @db.Timestamptz(6)
  is_subscribed Boolean?  @default(false)
}

②手順

index.tsxで次の用に追記して、console.log(profiles)でfalseになっていることを確認

import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();

export async function getServerSideProps() {

  const profiles = await prisma.profile.findMany();

  return {
    props: {
      profiles: profiles[0].is_subscribed,
    },
  };
}

終わりに

Prisma Client生やすと補完が気持ちよすぎだろ

参考