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

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

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

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

共通点

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

相違点

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

感想

誤りが本に含まれていて、なおかつそれが軽微な誤植や計算ミスではなく、著者様の誤解に基づく場合、2つの選択肢があると思います。
1.誤りに注意深く、深く疑いつつ、注意深く読む。
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.tsxでprisma 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生やすと補完が気持ちよすぎだろ

参考

Notionの公式SDKは便利かも

いつの間にか公式SDKが出てたので触りました。
https://github.com/makenotion/notion-sdk-js
公式通りユーザー一覧を取るところまでやりました。ブロック単位の取得等もできるようです。

設定方法

nodeプロジェクトの作成、初期化、ライブラリのインストール

mkdir first-notion
cd first-notion/
npm init -y
npm i @notionhq/client
npm i dotenv
touch .env
code main.js

NOTION_TOKENの場所

integration一覧の、 https://www.notion.so/my-integrations から Internal Integration Tokenをコピーする

.envとmain.jsの中身

.env(Internal Integration Tokenを置く)

NOTION_TOKEN="secret_*****"

main.js

require("dotenv").config();
const { Client } = require("@notionhq/client");

// Initializing a client
const notion = new Client({
  auth: process.env.NOTION_TOKEN,
});

(async () => {
  const listUsersResponse = await notion.users.list({});
  console.log(listUsersResponse);
})();

実行

node main.js

ユーザー一覧が取れました。botはtype:bot、人はtype:personのようです。

{
  object: 'list',
  results: [
    {
      object: 'user',
      id: '****',
      name: 'ユーザー名',
      avatar_url: '****',
      type: 'person',
      person: [Object]
    },
    {
      object: 'user',
      id: '*****',
      name: 'integration名',
      avatar_url: '****',
      type: 'bot',
      bot: {}
    },
    {
      object: 'user',
      id: '****',
      name: 'integration名',
      avatar_url: null,
      type: 'bot',
      bot: [Object]
    }
  ],
  next_cursor: null,
  has_more: false,
  type: 'user',
  user: {}
}

注意？

OfficialSDKは野良API使うときのtoken_v2だと認証できませんでした
旧API用のToken取得はChrome->F12->Application->Name:Value token_v2:[ここに表示される]
Find Your Notion Token

その他

NotionのGUI的な操作はこちらの方のYoutubeが非常に参考になるので勝手に見てます。
https://www.youtube.com/channel/UCMBoZr4HyLmDGyv5tIQ006g

「給与にこだわりのある方とは働きたくない」という人事の方の名言で有名になった株式会社ノースサンド様の方々がでがけた「そろそろNotion」という本を読んでみました。
Notionの概念(ブロック単位にする等)がまとまってて良いと思いましたが、タイトルでは初心者を釣っているので不評だろうなぁと思いました。個人的には良いと思いました。
(そもそも動的なものを本で説明するのが難しそうなので、本にするのすごいなぁと思いましたろいより)

金言

日記

Notionの改悪?

Simple Todoのテンプレートに勝手に日本語が当てられてて泣きました

停電

ベンチプレスしてる途中に視界が真っ暗になったので、某戸さんみたいに眼圧で失明したかと思ったんですが、ただの停電だったので致命傷ですみました。

読書

WebGL insights 第一部全体=三章まで読みました。
ChromiumでWebGLアプリがテストできることを知らなかったので勉強になりました (使いこなせるとは言ってない)
親の顔より見たこの図好き

日記

ドラゴンボール見てきました(ネタバレあり)

映画で尺が足りないせいか、悟飯が舐めプして事態が悪化する描写がありませんでした。違う映画を見ていたのかも。
舐めプしない悟飯は悟飯じゃないので、原作改悪ですね。
戦闘シーンはぬるぬるで良かったです。
好きなとこ
・戦闘シーン
・悟飯が師匠リスペクトの魔貫光殺砲打つ
好きじゃなかった箇所
・シェンロンに願えば修行すっ飛ばしてパワーアップできてしまう
・舐めプ飯が見れない
・セルマックスが、「ブルワァァァァァ！！CV若本」と叫んでばかりで知性がない

Amplifyシコシコいじってました

Backend:prod, dev で作っておいて、feature/**のブランチには自動的にdev backendがあてがわれるようにしました、Amplifyすごい
Amplifyで自動でブランチごとにドメインを切ってデプロイ出来るようになりました！ | DevelopersIO

WebGLの本借りれました

取り寄せでWebGL insights借りれました、ちびちび読みます。
なる早で自炊するかも。