何かをやりたい何かになりたい

今ブログを始めるならHugo*Vercelが良いかもしれない

noreply@blogger.com (えむてぃ) — Sat, 19 Oct 2024 15:31:00 +0000

Bloggerは流石に使いづらくなってきた。

要件

とりあえず無料で始めたい
マークダウンなどで簡単に書けるようにしたい
画像添付を簡単にしたい
自由度が高いほうがいい
広告だとかは勝手についてこないようにしたい
ソースコードをきれいに表示したい
サーバは日本に近いほうがいい

Hugoについて

静的サイトジェネレーター。
Markdownで記事を書い、HTMLに変換することができる。

Hugoのインストール

https://gohugo.io/installation/

WindowsならWinGetでインストールできる。

winget install Hugo.Hugo.Extended
hugo version

Hugoの使い方

https://gohugo.io/getting-started/quick-start/

hugo new site quickstart
cd quickstart
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo "theme = 'ananke'" >> hugo.toml
hugo server

echo "theme = 'ananke'" >> hugo.toml
はpowershellだと動かないのでbash等を使うかhugo.tomlへ直接追記する。

hugo.toml

baseURL = 'https://example.org/'
languageCode = 'ja-jp'
title = 'My New Hugo Site'
theme = 'ananke'

http://localhost:1313
http://localhost:1313/sitemap.xml
http://localhost:1313/404.html
http://localhost:1313/categories/
http://localhost:1313/tags/

デフォルトで8ページほど生成される。

テーマ

あらかじめ用意されたデザインを利用することができる。

テーマは以下から選ぶことが可能。
https://themes.gohugo.io/

Kayalを試してみる
https://themes.gohugo.io/themes/kayal/

git submodule add -b main https://github.com/mnjm/kayal.git themes/kayal

themes\kayal\config
をコピーする。config内のhugo.tomlの先頭にテーマを追記する。


theme = "kayal"

コンテンツの追加

hugo new content content/posts/hello-wowld.md

content/posts以下にコンテンツが作成されていく。
マークダウンで記述して記事を作成することが可能。
デフォルトはドラフト状態で作成されすぐに公開されることはない。

+++
date = '2024-10-19T17:28:39+09:00'
draft = true
title = 'Hello Wowld'
+++
### Hello World2

This is **bold** text, and this is *emphasized* text.

hugo server -D

でドラフト込みのページも確認可能

まだまだ大量にできることがありそうだがHugoについてはいったんここまで。

Vercelについて

https://gohugo.io/hosting-and-deployment/
以下のコマンドで静的ファイルが生成されるため公開自体なら割となんでもいい。

hugo --gc

でpublicディレクトリに静的ファイルが生成されるので基本的にこれをデプロイするだけでよい。

当初はNetlifyの予定だったが日本のリージョンがないのでVercelで試してみる。

VercelでデプロイするにはVercel CLIを使用する方法とGitHub連携する方法がある。
今回はGitHub連携する方法を試してみる。

GitHubへプッシュ

詳細については割愛。

Vercelへデプロイする

https://vercel.com/
GitHubアカウントでサインアップするとスムーズに進めることができる。

Vercelでインポートプロジェクトを設定する。

Import Git Repository
→ 先ほどプッシュしたリポジトリ　を選択する

Configure Projectで各種設定を行う

Project Name: 任意のプロジェクト名
Framework Preset: Hugo
Build and Output Setting: Hugoを選択していればデフォルトで良い

Deploy

Hugoのビルドバージョンを指定する

場合によってはデプロイに成功してもサイトを表示したときにエラーになる場合がある。
ビルド時のバージョンが違うようなので環境変数を設定する。

https://vercel.com/[your-project]/settings/environment-variables
Settingsより
Key:HUGO_VERSION
Value:hugo versionで確認できるバージョン(-移行は不要x.y.zまでで良い)

以上でウェブサイトが公開できるはず。
https://memonote-seven.vercel.app/

参考

https://kt-graph.com/hugo_netlify_deploy_2_deploy/

https://www.nyan-da-full.com/posts/vercel-deploy-hugo-version/

Google Drive APIを使用する

noreply@blogger.com (えむてぃ) — Tue, 13 Aug 2024 13:44:00 +0000

Goで試してみる。

1. Google Cloud Platformでプロジェクトを作成する題

多くのサービスがGoogle Cloudに寄せてあるようだ。
Google Drive APIのみの使用であれば基本的に無料。

https://console.cloud.google.com/

2. Google Drive APIを有効にする

以下のURLから。

https://console.cloud.google.com/apis/library/drive.googleapis.com

3. OAuth 2.0 クライアント IDを作成する

Google DriveをAPI経由でアクセスする方法はユーザにGoogle経由で認証(ログイン)してもらって取得したトークンを利用するといった流れになる。
https://console.cloud.google.com/apis/credentials/consent

設定項目として事前に承認済のドメインが必要。サーチコンソールから設定する。
https://search.google.com/search-console/about
ドメインを自分で取得している場合はTXTやCNAMEの設定でよいがGAEなどを使用している場合はURLプレフィックスを使用する。

OAuth 同意画面 → スコープ → テストユーザー → 概要
の順に設定する。

3.1 OAuth 同意画面定

OAuth 同意画面 → UserType:外部 → 作成
UserType:内部はGoogle Workspace Userのみ

アプリ名:
ユーザーサポートメール:
アプリのロゴ:
アプリケーションのホームページ:
アプリケーションプライバシーポリシーのリンク:
アプリケーションの利用規約のリンク:
承認済みドメイン:

プライバシーポリシーと利用規約のリンクは少なくともテスト中は仮で良さそうだ。

3.2 スコープの設定

スコープの追加または削除 → Google Drive APIでフィルタ → 利用するスコープを選択

アプリでファイル置き場がほしいだけなら
「このアプリで使用する Google ドライブ上の特定のファイルのみの参照、編集、作成、削除」
だけで良い。

3.3 テストユーザーの追加

gmailのアドレスを追加する。
概要で全体を確認して問題なければOK。後で編集も可能。

4. Google Drive APIの認証情報を取得

する https://console.cloud.google.com/apis/api/drive.googleapis.com/credentials

認証情報を作成 → OAuth クライアント ID
→ アプリケーションの種類: ウェブクライアント
→ 名前: 任意 → 作成

『承認済みの JavaScript 生成元』『承認済みのリダイレクト URI』へアプリケーションのドメインを指定する
localhostも指定しておくとローカルで動作確認可能。

クライアントIDを控えておく。
クライアントシークレットを控えておく。
JSONをダウンロードして保存する。

GoからGoogle Drive APIへアクセスしてみる

go get -u google.golang.org/api/drive/v3 go get -u golang.org/x/oauth2/google

http.HandleFunc("/oauth2callback", handleAuthCallback)



func handleAuthCallback(w http.ResponseWriter, r *http.Request) {
	fmt.Print("handleAuthCallback\n")
    // クエリから認証コードを取得
    code := r.URL.Query().Get("code")

	// Google Drive APIの認証
	b, err := os.ReadFile("credentials/client_secret.com.json") // jsonのファイルパス
	// fmt.Printf("b: %s\n", b)
	if err != nil {
        fmt.Printf("Unable to read client secret file: %v", err)
        return
    }

    // Configを生成
    config, err := google.ConfigFromJSON(b, drive.DriveFileScope)
    if err != nil {
        fmt.Printf("Unable to parse client secret file to config: %v", err)
        return
    }
    // トークンを交換
    token, err := config.Exchange(context.Background(), code)
    if err != nil {
        http.Error(w, "Failed to exchange token: "+err.Error(), http.StatusInternalServerError)
        return
    }

    // トークンを使ってDriveサービスを作成
    client := config.Client(context.Background(), token)
    driveService, err := drive.New(client)
    if err != nil {
        http.Error(w, "Failed to create Drive client: "+err.Error(), http.StatusInternalServerError)
        return
    }

    // ファイルのメタデータを設定
    f := &drive.File{
        Name:    "TestFile.txt",
        MimeType: "text/plain",
    }

    // ファイル内容を作成
    fileContent := "Hello, World!"
	reader := io.NopCloser(strings.NewReader(fileContent))

    // ファイルのアップロード
	_, err = driveService.Files.Create(f).Media(reader).Do()
    if err != nil {
        log.Fatalf("Unable to create file: %v", err)
    }


    // Drive APIを使った処理例（ファイルリストを取得）
    files, err := driveService.Files.List().PageSize(10).Fields("nextPageToken, files(id, name)").Do()
    if err != nil {
        http.Error(w, "Unable to retrieve files: "+err.Error(), http.StatusInternalServerError)
        return
    }

    fmt.Fprintf(w, "Files:\n")
    for _, f := range files.Files {
        fmt.Fprintf(w, "%s (%s)\n", f.Name, f.Id)
    }
}

ダウンロードしたjsonファイルのredirect_urisを置き換えると認証後のリダイレクト先が変わる。
redirect_urisにport番号を指定すると弾かれるので80以外にしている場合は認証後に手動で置き換えるといった対応が必要になる。
リダイレクトURLに含まれるコードから取得したトークンを利用していく。このトークンを保持したりリフレッシュしたりしてGoogle Drive APIを利用することになる。

ファイルを作成して一覧を取得するといったサンプルコードになっているがスコープを./auth/drive.fileに設定している場合1ファイルしか確認できない。
API経由で作成したファイルのみアクセスすることが可能になる。
Google Driveを確認する。
https://drive.google.com/drive/home

参考

https://qiita.com/doran/items/15b2c59adb410ddeeb8a

AppEngineデプロイ時にエラー

noreply@blogger.com (えむてぃ) — Sat, 03 Aug 2024 10:30:00 +0000

少し仕組みが変わっている？

service account does not have access to the bucketと表示される

ERROR: (gcloud.app.deploy) Error Response: [13] Failed to create cloud build: com.google.net.rpc3.client.RpcClientException: APPLICATION_ERROR;google.devtools.cloudbuild.v1/ArgoAdminNoCloudAudit.CreateBuild;invalid bucket "staging.XXXXXXXX-431409.appspot.com"; service account markdowneditor-431409@appspot.gserviceaccount.com does not have access to the bucket;AppErrorCode=9;StartTimeMs=1722679395963;unknown;ResFormat=uncompressed;ServerTimeSec=2.104986938;LogBytes=256;Non-FailFast;EndUserCredsRequested;EffSecLevel=none;ReqFormat=uncompressed;ReqID=b5c351844a9bad1b;GlobalID=0;Server=[2002:a05:630c:969:b0:6e:903a:5e33]:4001.

Cloud Storageへの権限がないといったエラー。
新しくプロジェクトを作成 → App Engine作成時に課金アカウント制限に引っかかる → 対応したときに権限周りが中途半端になっている。ということかもしれない。

対応方法

App Engine 管理者を有効化する。
https://console.cloud.google.com/cloud-build/settings/service-accountcount

以下も有効化
https://console.cloud.google.com/apis/api/appengine.googleapis.com/metrics

ERROR: (gcloud.app.deploy) B instance [staging.app-xxxxx.appspot.com] not found: The specified bucket does not exist.

軽率にGoogle Cloud Storageのバゲットを丸ごと消したら動作しなくなった。
今までは問題なかったと思うがどうやら少し仕組みが変わっているらしい。
キャッシュを無効にしてデプロイ。

gcloud app deploy --no-cach

特に変わらず。
https://stackoverflow.com/questions/76826568/gcloud-app-deploy-complains-about-missing-staging-bucket

gcloud beta app repair

こちらもダメ。

API経由でRepairを試す

https://cloud.google.com/appengine/docs/admin-api/reference/rest/v1/apps/repair
右側のTry this methodから実際に試すことが出来る。

appsIdにはプロジェクトIDを指定するだけで良い。
Cloud Storageにバケットが作成されていればOK.
デプロイ出来るようになっているはず。

参考

https://stackoverflow.com/questions/64274811/gcloud-app-deploy-error-response-13-failed-to-create-cloud-build-invalid-buc

FastAPIの開発環境をDockerで構築する

noreply@blogger.com (えむてぃ) — Sun, 21 Apr 2024 13:45:00 +0000

デバッグできるところまで。
概ね公式ドキュメント通りでOK
https://fastapi.tiangolo.com/ja/deployment/docker/

プロジェクト構成

以降はVisual Studio Codeを前提として話を進める。

ProjectDirectory
  ├─ .vscode
  │   ├─ launch.json
  ├─ app
  │   ├─ main.py
  ├─ debug-docker-compose.yml
  ├─ docker-compose.yml
  ├─ Dockerfile
  ├─ requirements.txt

少し重くなるため、開発用と+デバッグ実行用途で分けている。

app/main.py

from typing import Union
from fastapi import FastAPI

app = FastAPI()

@app.get("/")
def read_root():
    test = 1
    return {"Hello": "World"}

@app.get("/items/{item_id}")
def read_item(item_id: int, q: Union[str, None] = None):
    return {"item_id": item_id, "q": q}

app以下のファイルはコンテナにマウントされる（後ほど設定する）

Dockerfile

FROM python:3.13-rc-slim as builder
# FROM python:3

# Python FastAPI用Dockerfile
# 以下はdocker-composeで設定
## コンテナとホスト間でポートのマッピング
## ホストの./appディレクトリをコンテナ上の/code/appへマウント

WORKDIR /code

RUN apt-get update
# ロケール設定、タイムゾーン変更
RUN apt-get -y install locales && \
    localedef -f UTF-8 -i ja_JP ja_JP.UTF-8
ENV LANG ja_JP.UTF-8
ENV LANGUAGE ja_JP:ja
ENV LC_ALL ja_JP.UTF-8
ENV TZ JST-9

# コンテナ内での編集用
RUN apt-get install -y vim less

# 依存関係インストール
COPY ./requirements.txt /code/requirements.txt
RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
# RUN pip install fastapi
# RUN pip install pydantic
# RUN pip install "uvicorn[standard]"

# COPY ./app /code/app

元となるイメージは以下から対応しているバージョンの一番新しいものを選択する。
https://hub.docker.com/_/python
slimだとサイズが小さくなる（必要なものが含まれていない可能性もある）

app以下のソースファイルは後ほどマウントするため公式の手順と違ってコピーしない。
また起動コマンドはdocker-composeで記述するためDockerfileには記述しない。

requirements.txt

依存関係を記述してビルド時にインストールするように。

fastapi>=0.68.0,<0.69.0
pydantic>=1.8.0,<2.0.0
uvicorn>=0.15.0,<0.16.0
debugpy

docker-compose.yml

version: '3'
services:
  python3:
    ports:
      - 80:80
    restart: always
    build:
      context: .
      target: dev
    container_name: 'python3'
    # tty: true
    volumes:
      - ./app:/code/app
    command:
        [
            "uvicorn",
            "app.main:app",
            "--reload",
            "--host", "0.0.0.0",
            "--port", "80"
        ]

以上で起動して確認可能。

docker-compose up
docker-compose -f docker-compose.yml up -d
docker-compose -f docker-compose.yml up -d --build

-f ファイル名：設定ファイルを指定。デフォルトはdocker-compose.yml
-d：バックグラウンドで起動する
--build：再ビルドをおこなう。Dockerfileを変更したときなど。

docker-compose upコマンド実行後に以下のいずれかへアクセス（どれもおおよそ同じ意味）
http://localhost/
http://0.0.0.0/
http://127.0.0.1

また
http://127.0.0.1/docs
で作成したAPIのドキュメント確認すことが可能(FastAPIの機能)

デバッグをおこなう

debug-docker-compose.yml

version: '3'
services:
  python3:
    ports:
      - 80:80
      - "5678:5678"
    restart: always
    build: .
    container_name: 'python3'
    # tty: true
    volumes:
      - ./app:/code/app
    command:
        [
          "python3",
          
          "-m", "debugpy",
          "--listen", "0.0.0.0:5678",
          
          "-m",
          "uvicorn",
          "app.main:app",
          "--reload",
          "--host", "0.0.0.0",
          "--port", "80"
        ]

通常のdocker-composeファイルとの違いはportと起動コマンドのみ。

launch.json

Visual Studio CodeのRUN AND DEBUGから
create a launch.json
→ Python Debugger
→ Remote Attach
→ localhost
→ 5678

以下のファイルが作成される。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python Debugger: Remote Attach",
            "type": "debugpy",
            "request": "attach",
            "connect": {
                "host": "localhost",
                "port": 5678
            },
            "pathMappings": [
                {
                    "localRoot": "${workspaceFolder}",
                    "remoteRoot": "."
                }
            ]
        }
    ]
}

ブレークポイントを貼った状態でF5でデバッグ実行をおこなうと、該当の処理を実行するときに一時停止して変数等を確認できるようになる。

参考

https://fastapi.tiangolo.com/ja/deployment/docker/
https://qiita.com/yagrush/items/e46ab11b22495cd2c0a0

GPTStoreがオープンされたとのことで自作GPTsを公開してみる

noreply@blogger.com (えむてぃ) — Sat, 13 Jan 2024 09:37:00 +0000

少し出遅れてしまった。

TRPG 立ち絵メーカーVer0.1

https://chat.openai.com/g/g-QlFMYSXet-trpg-li-tihui-mekaver0-1

オリジナルのGPTの作成方法については以下
https://trueman-developer.blogspot.com/2023/12/gpt-builderchatgptgpts.html

TRPG 立ち絵メーカーVer0.1の利用例、利用方法

タイトルの通り立ち絵を作成してくれるGPTsになっている。

選択肢から始めることでジャンルやテーマ、雰囲気、出力する
できれば最初にGPT側からプッシュするような（何かしら案内を出すような）仕組みにしたいが現状はできない。

ファンタジーのキャラクターを作成する1

TRPGのジャンルと雰囲気について。
キャラクターの種族と髪の色を定義しましょう。
キャラクターの役割と背景について。
キャラクターの特徴について。

最初の選択肢は意図して質問文の形式にしないようにしている。
このように記述することでChatGPT側から提案してくれるようになり、また利用者が選択肢から始められることを意図している。
これならどこから手をつけていいかわからない人でもとっかかりになる。

キャラクターの種族と髪の色を定義しましょう。

了解しました。TRPGのキャラクターを作成する際には、種族と髪の色が重要な要素ですね。まず、いくつかの選択肢を提示しますので、それに基づいてお好きな組み合わせを選んでください。

種族の選択肢：

人間：多様性があり、どんな世界観にも馴染みやすい。
エルフ：長寿で、優美な外見を持ち、しばしば自然と強い結びつきを持つ。
ドワーフ：頑丈で、山岳地帯や地下世界に住むことが多い。
ハーフリング：小柄で陽気、運が良く、隠密行動に長けている。
オーク：力強く、野生的な雰囲気を持ち、戦士に向いている。
ドラゴンボーン：竜の特徴を持ち、威厳があり、力強い。
ティーフリング：悪魔の血を引き、ユニークな外見と魔法的な才能を持つ。
髪の色の選択肢：

黒：神秘的で強い印象を与える。
白：純粋または超自然的な雰囲気を醸し出す。
赤：情熱的または獰猛な性格を象徴。
金：高貴または太陽のような魅力を持つ。
青：冷静かつ知的、または魔法的な特徴を持つ。
緑：自然との結びつきや、生命力を示唆。
多色：奇抜でユニークな個性を表現。
どの種族と髪の色の組み合わせが、お考えのキャラクターに最も合うと思われますか？

種族はドラゴンボーンが良いです。髪の色は燃えるような赤色で性別は女性が良いです

素晴らしい選択です！ドラゴンボーンの女性キャラクターで、髪の色は燃えるような赤色ということですね。ドラゴンボーンは竜の特徴を持つ種族で、威厳と力強さを象徴しています。燃えるような赤い髪は情熱的で、そのキャラクターの強い意志や勇敢さを表現するでしょう。

次に、このキャラクターの役割や背景について考えてみましょう。例えば、彼女は戦士、魔法使い、盗賊、または何か他の役割を担っていますか？また、彼女の性格や背景について特に重要な要素はありますか？これらの詳細を教えていただければ、より具体的なキャラクター像を形成することができます。

戦士で大きな斧を持っています

理解しました。ドラゴンボーンの女性戦士で、彼女の武器は大きな斧ですね。このキャラクターは、竜の血を引く強力な戦士としての存在感があります。燃えるような赤い髪は、彼女の情熱的で勇敢な性格を強調し、大きな斧はその力強さと戦闘スキルを象徴しています。

次に、彼女の装備や服装について考えてみましょう。戦士としての彼女はどのような鎧を着ていますか？また、彼女の外見に特徴的なアクセサリーや細部はありますか？例えば、竜のスケールを模した鎧、特定の紋章や装飾などが考えられます。

この情報をもとに、キャラクターの詳細なイメージをさらに深めていきましょう。

全身を覆う黒い鎧を着ています

素晴らしいです。ドラゴンボーンの女性戦士が、全身を覆う黒い鎧を着用しているイメージが浮かびます。この鎧は彼女の力強い身体と戦闘スキルを強調し、燃えるような赤い髪とのコントラストが彼女の印象的な外見を際立たせます。

さらに、この鎧には竜のスケールのような模様が施されているかもしれません。また、彼女が戦闘中に身につけるかもしれないアクセサリーや装飾品、例えば鎧に組み込まれた特殊な紋章や、腰にぶら下がる装飾的な布などが彼女の背景や所属を示唆している可能性があります。

このキャラクターに関して、他に特に描きたい要素や詳細はありますか？たとえば、彼女の性格の特徴や、特定のポーズなどです。それらの情報を追加して、キャラクターのイメージを完全なものにしましょう。

ドラゴンボーンと所謂日本アニメスタイルの画風の組み合わせがあまりよくなかったかもしれない。

ファンタジーのキャラクターを作成する2

最初の選択肢を変えて立ち絵を作成してみる。

TRPGのジャンルと雰囲気について。

TRPG（テーブルトークRPG）のジャンルと雰囲気は、実に多彩で、各ゲームごとに独自の世界観やスタイルを持っています。代表的なジャンルと雰囲気には以下のようなものがあります：

ファンタジー：魔法やドラゴン、エルフやドワーフなどの神話的な要素が特徴。代表的なゲームには「ダンジョンズ&ドラゴンズ」があります。雰囲気は、壮大な冒険、魔法の謎、古代の伝説などが中心。

サイエンスフィクション：未来的な技術や宇宙旅行、異星人の文明などがテーマ。ゲームによってはサイバーパンクや宇宙オペラのようなサブジャンルもあります。

ホラー：怖い雰囲気や恐怖を楽しむジャンル。クトゥルフ神話を題材にした「クトゥルフの呼び声」などが有名です。不気味な謎解き、心理的な恐怖が特徴です。

現代：現実世界を舞台にしたゲーム。日常的な環境だけど、そこに特別な要素が加わることが多いです。

歴史的：特定の歴史的時代を舞台にしたゲーム。歴史的な出来事や実際の地域、文化を取り入れます。

ミステリー：謎解きや探偵物が中心。複雑な謎や犯罪の解明がゲームの鍵を握ります。

それぞれのジャンルには独自の雰囲気があり、プレイヤーはその世界観に没入することで、リアルな体験を楽しむことができます。キャラクター作成時には、そのジャンルや雰囲気に合わせて、外見やバックストーリーを考えることが重要です。

スケルトンがいいです。
赤いマフラーをしていてかっこいい雰囲気がいいです。
バックストーリーは「かつての英雄が長い時を経て黄泉返った」です。
武器は剣が良いです。

素晴らしいキャラクターコンセプトですね。スケルトンで、赤いマフラーを巻き、かつての英雄が黄泉返ったというバックストーリーを持つキャラクターですね。この設定をもとに、さらにキャラクターを具体化してみましょう：

外見：
　スケルトン：骨の姿をしており、謎めいた雰囲気を持ちます。
　赤いマフラー：鮮やかな赤色のマフラーが、冷たい骨の姿に対照的な暖かさとスタイルを加えます。
　装飾品：古代の装飾品や紋章があしらわれた装具を身につけていることで、かつての英雄であったことを暗示します。
武器：
　剣：長く、威厳のある剣を持っています。剣は彼の戦士としての過去とスキルを象徴しています。デザインは古代や伝説的なスタイルで、彼の長い歴史を表現します。
バックストーリー：
　かつては大英雄であり、多くの戦いで勝利を収めたが、時が経過するにつれて忘れ去られていきました。
　長い時を経て、何らかの魔法や呪いによりスケルトンとして黄泉返りしました。彼の目的は、自らの遺産を取り戻すこと、あるいは未完成の使命を果たすことかもしれません。
性格と特徴：
　冷静で寡黙だが、戦いの際には冷酷なほどの決断力を見せます。
　かつての英雄としての誇りを持ちつつも、現在はその過去を隠しているかもしれません。
このキャラクターは、ファンタジーTRPGの世界で非常に印象的な存在になるでしょう。彼の過去の英雄譚と現在のスケルトンとしての生を絡めた物語は、ゲームプレイ中に多くの興味深いシナリオを生み出す可能性があります。

これよくない！？かっこ良くない！！！
それはそれとして結局のところプロンプトが大事になってくるがそれっぽいものは完成した。
使い勝手も案外悪くない。

クトゥルフをテーマにのキャラクターを作成する

少し変わり種のパターン。

ジャンルはクトゥルフが良いです。

クトゥルフ神話をベースにしたTRPGは、ホラーと不思議な雰囲気が混じり合った独特の世界観を持っています。このジャンルでは、以下のような要素が特徴的です：

古代の秘密と禁断の知識: プレイヤーはしばしば古代の文書や忘れられた言語を解読し、知られざる真実に近づいていきます。
不気味な生物と神話上の存在: クトゥルフ神話の怪物や異次元の存在が頻繁に登場します。
心理的な恐怖と狂気: キャラクターは不可解な出来事や恐怖に直面し、精神的な負担を経験します。
1920年代の背景: 多くのクトゥルフTRPGは1920年代が舞台ですが、他の時代設定も可能です。
このジャンルに合わせて、キャラクターの設定を考えてみましょう。たとえば、キャラクターは探偵、学者、ジャーナリスト、または博物館のキュレーターなど、神秘的な事件を解明する立場にいることが多いです。特に重要なのは、キャラクターがどのようにして神秘的な現象やクトゥルフ神話の世界に関わることになったのか、という背景です。

キャラクターの外見や個性についても考えてみましょう。彼らの服装、髪型、特徴的なアイテム（例えば古い本、拡大鏡、記録ノートなど）が重要です。また、彼らが持つ特別な能力やスキル、そして彼らの精神的な強さや弱さも考慮に入れるとよいでしょう。

クトゥルフ神話のTRPGキャラクターについて、どのような具体的なアイデアがありますか？

探偵の助手をしている現代的な日本の女子高生が良いです

素晴らしい選択です！現代の日本を舞台にしたクトゥルフ神話TRPGで、探偵の助手を務める女子高生キャラクターを作成するというコンセプトは魅力的です。以下は、このキャラクターの具体的な設定案です：

キャラクター概要
名前: 例えば「渚愛美（なぎさまなみ）」など、現代的な日本の名前。
年齢: 高校生なので、15～18歳の間。
背景: 日常生活の中で不可解な出来事に遭遇し、探偵の助手としての活動を始める。好奇心旺盛で、オカルトや未解決事件に強い関心を持つ。
外見
服装: 学校の制服（ブレザーやセーラー服など）と私服の両方を着こなす。制服は、クトゥルフ神話の不気味な雰囲気に合うように、少し古風なデザインが良いかもしれません。
髪型: 肩までの長さの髪、ポニーテールやボブカットなど、活動的なスタイルが適しています。
アクセサリー: 探偵の助手としての活動に役立つアイテム（例：拡大鏡、ノート、ペン）を持つ。
特徴と能力
特技: 細かい観察力、記憶力、解析能力。オカルト知識や、学校で学んだ科学的な知識を活用する。
性格: 好奇心旺盛、頭の回転が速い、しかし時には無鉄砲。不気味な出来事にも臆することなく立ち向かう勇敢さを持つ。
弱点: 精神的なショックに対する耐性が低い、物理的な力はそれほど強くない。
物語の役割
探偵の指示に従いつつ、時には独自の調査を進める。学校や友人関係を通じて、異常な出来事の情報を入手する。
神秘的な事件を解決する過程で、自身の内面的な成長を遂げる。
このキャラクターについてさらに詳しく、または他のアイデアをお聞かせください。それに基づいて、キャラクターイメージの具体化を進めていきましょう。

服装はセーラー服で髪型はボブカットで

画像生成の特徴である文字がおかしくなる現象が発生しているが、クトゥルフならむしろ世界観に沿っている気がする。

出力される画風は日本アニメ風をベースにしているがDALL-Eはざっくりした指定だと所謂マスピ顔になってしまうので少しだけ命令文に手を加えている。

不満点

GPTsの取り消しとバージョン管理ができない？

編集はできるが元に戻せないので前のが良かったので戻せないといったことができない。
トライアル＆エラーができるようになってほしいところ。一応ConfigureタブのInstructionsを控えておけば良さそうだが...

意図した指示通り動かない場合がある

一部指示を無視してしまうケースがあり意図しない出力になる。途中で出力が英語になったりなど。
改善が難しい。

カスタマイズしたGPTは今のところリンクを共有できない？

通常であれば質疑応答の結果を共有することができるが共有リンクを作成しようとするとエラーになってしまう。
正確には画像が共有できないのかも？

利用方法を案内するような機能が存在しない

今のところタイトルとDescriptionと4つの選択肢のみ。
せめてDescriptionが改行できるようになっていると多少マシになるのだが。

自作GPTsの利用頻度に応じて利益を分配する所謂レベニューシェアを予定しているらしいので小遣い稼ぎができたりするかもしれない。
某SNSのように粗製濫造されて優良なGPTが探せなくなる懸念もそれなりにある。

GPT Builderを使用してカスタマイズしたChatGPT(GPTs)を作成する

noreply@blogger.com (えむてぃ) — Sun, 31 Dec 2023 09:57:00 +0000

想定通りのものを作るのはなかなか難しい。手順書等を作成するのは結構難しいかもしれない。

GPTs作成手順

探索する → Create a GPTより https://chat.openai.com/gpts/editor
CreateとConfigureの2つのタブが表示されてGPTsを作成できる。
作成したGPTsは右側のプレビューですぐに試すことが可能。

Createについて

対話形式でどのようなGPTsを作成するかを設定していく。
対話内容を元にConfigureに設定が追加される。

「まず何を作りたいですか？」といった質問をされるので作成したいGPTsの概要を入力する。
質問は常に英語のようだが回答は日本語で良い。

「日本語でGPTsの作成をサポートするようなものを作成したいです」

GPTsの名前を提示される。変更するかどうかを解答する。
次にアイコンが自動生成される。こちらも気に入ったか否か。変更する場合どういった風にするのかを回答する。

一問一答というわけでもないらしく一気にいろいろと設定される場合もある。
細かく調整したい場合は質問文に対して回答していくといいようだ。

「To start, what specific tasks or types of questions do you expect this GPT to handle? This will help in defining its role and goals more precisely. 」
（まずこのGPTで処理できるタスクについて教えてください）

「Next, how would you like this GPT to interact with users? Should it be formal or informal? Would you prefer it to be straightforward or more conversational? This will help tailor its communication style to your preferences.」
（どのように振る舞うか？単純明快な方がいいか。会話的な方がいいか）

ある程度質問に答えると「GPTsが完成したので右側のプレビューから動作確認して改良点や変更点を追記してください」といった文章が返ってきて動作を検証できる。

Configureについて

GPTsの設定について記述する。

アイコン：アイコンの指定(アップロードする他にDALL-Eを使用して作成することもできる)
Name：GPTsの名前
Description：作成したGPTsについての概要
Instructions：作成したGPTsについての説明。今のところ表示されない？
Conversation starters：入力例。数に制限はないが上位4つしか表示されない？
Knowledge：参照するファイル。アップロードしたファイルを解答時に参照するようになる。
Capabilities：利用する機能。Web Browsing（ウェブ）DALL·E（画像生成）Code Interpreter（コード実行）
Actions：外部APIと連携する

作成した後は右上の保存から公開範囲を設定できる
・個人
・リンクを知っている人だけ
・公開

作成したGPTsを削除したい場合は保存ボタン左のメニューから

以上でオリジナルのChatGPTが作成され利用できるようになる。

参考

https://zenn.dev/umi_mori/articles/gpt-builder-how-to-start

ChatGPT Plusに課金することで何ができるようになるか

noreply@blogger.com (えむてぃ) — Sat, 30 Dec 2023 14:23:00 +0000

2023/12/30時点
アップデート速度が早すぎて何ができるのか完全には網羅できない。

概要

無償版のChatGPT3.5と比較して以下のような特徴がある。

性能の向上
制限がある（現状30Message/3時間）
画像生成機能が使える
ファイルをアップロードしてデータ分析が可能
画像が入力可能
ウェブの情報にアクセスすることができる
独自にカスタマイズしたGPTsを作成、利用できる
他人が作成したGPTsを利用できる

ファイルを生成してダウンロード

id, 名前, メールアドレス, 住所を持つサンプルデータを20件ほど作成してください。名前と住所は日本語がいいです。

上記データを全てをcsv形式でダウンロード可能ですか？

データを作成してもらった後にファイル形式を指定して依頼することでダウンロードリンクが作成される。
命令によって裏でPythonを動かしているようだ。恐らく以前のCode Interpreter機能が統合されていると思われる。

id, 名前, メールアドレス, 住所を持つサンプルデータをcsv形式で20件ほど作成してください。名前と住所は日本語がいいです。

といった指示だとダウンロードリンクが表示されるが中身は想定したものにはならなかった（名前1、名前2のようなデータ）
処理を分けることで上手くサンプルデータを作成してダウンロードすることができた。

https://chat.openai.com/ の QRコードを作って

こちらも内部でPythonが動いている模様。コードも確認できる。

ファイルをアップロードしてデータを分析する

ChatGPT4では入力欄の左側にファイルアイコンが追加されファイルをアップロードすることができる。
少し古いが自治体から提供されているオープンデータを分析してみる。
https://data.e-gov.go.jp/data/ja/dataset/cao_20170710_0010/resource/b50b654f-342a-49f0-a203-df7c248818d9

平成26年度のデータで47都道府県のうちトップ10の都道府県をグラフにして表示してください。

例の如く残念なフォーマットのExcelだがきちんと解釈して分析できている。2014年度の名目県内総生産は東京都が抜きん出ていて、大阪府、愛知県、神奈川県...と続いているようだ。
微妙なエクセルデータを整形するといった用途にも利用できるかもしれない。
都道府県名を表示させようとしたら日本語が文字化けになってしまった。恐らくPython側の問題なのでうまく回避する方法もあるかもしれない。

DALL-Eを使用して画像を生成する

正直この機能だけでも20ドル/月の価値はありそうな気がする。

今時点だと『探索する』 → 『DALL-E』から画像生成可能。
恐らく以下から
https://chat.openai.com/g/g-2fkFE8rbu-dall-e

月明かりに照らされた花畑にたたずむ少女の画像を生成してください。日本的なアニメスタイルが良いです。幻想的で神秘的なそして儚げな雰囲気にしてください。

出力される画像のサイズは1024*1024
AI同士解釈しやすいプロンプトに変換してくれるのか、Bing Image Creatorなどで直接プロンプトを指定するよりも良いものが出てきやすい。

女の子を和装に変換できますか？

プロンプトを破綻なく追加で指定できるのも良い。

普通なら何度もプロンプトの微修正が必要だが一発でいい感じのものが出てくる。手指も破綻してない。

カスタマイズしたChatGPTを作成、公開できる

非公式だがGPTsを公開しているサイトがある。どのようなことができるかを確認できる（できれば遷移する時は普通のリンクにして欲しかった）
https://gptslist.jp/

英語等の学習向けにカスタマイズするのが使い方としては良さそう。
まだ出たばかりというのもあってか魅力的なものは少ない（あるいは見つけられなかった）

また公式でカスタムしたGPTsを公開できるGPT Storeが近日公開予定らしい。後日いろいろ試してみたい。

Bard Extensionが公開されたのでできることを改めて調べてみる

noreply@blogger.com (えむてぃ) — Fri, 29 Dec 2023 05:31:00 +0000

Youtube検索したり、Gmail検索したり、Google Docs検索したり。

Bard Extension

2023.12.18よりYouTube, Gmail, Google Drive, Google Mapへアクセスして回答することが可能となっている。
https://bard.google.com/updates?hl=ja

@youtube, @gmail, @drive等を使用して各サービスのデータを利用することが可能。
指定しなくても必要に応じて各種サービスへアクセスしてくれる

利用前に以下から拡張機能をONにする必要がある。
https://bard.google.com/extensions

またGoogle Drive等へアクセスする場合はGMailの設定変更も必要。
Gmail → 設定 → 全ての設定を表示
https://mail.google.com/mail/u/0/?tab=rm&ogbl#settings/general
「スマート機能のパーソナライズ」と、「他のGoogleサービスのスマート機能とパーソナライズ」にチェック（一番下で変更を保存が必要）
なぜGmailなのかは謎

Bard Extensionを利用してGoogle Mapへアクセスする

大阪でおすすめのランチを教えてください

「ラーメンが美味しい店を教えてください」といった質問だと位置情報をもとに解答を返すようだ。恐らく近場であまりない料理名を出すとうまく回答してくれない。
出力内容としてはGoogleMapを直接扱うのと代わり映えはなさそうだがBardに相談しながら旅行計画を立てるといったことができそうだ。

Bard Extensionを利用してYoutubeへアクセスする

@YouTube Unityの初心者向けの動画を探してください。言語は英語がいいです。

言語を指定しない場合は恐らく言語設定等をもとにした検索結果になる。

@YouTube http://www.youtube.com/watch?v=XtQMytORBmM について教えてください

動画の内容を説明してくれる。ただし解析できるのは英語の音声のみ？

『英語の動画を説明してもらう』といった使い方が非常に便利。TEDを解説してもらおう。
TEDを片っ端から流し込むとタイパ最強かもしれない。

Bard Extensionの機能をONした場合、微妙なニュアンスを拾ってくれないことがある。
@YouTube Unityの初心者向け動画を探してください ○
@YouTube Unityの初心者向け動画を教えてください ×

Bard Extensionを利用してGoogle Docsにアクセスする

保存されているGoogle DocsへBardからアクセスすることが可能。

@Google Docs 「環境構築手順」について300文字程度にまとめてください

Google Docs形式だと詳細に中身を分析してくれる。
文書の要約や特定のキーワードを持つ文書の探索といった用途で使用可能。
Google DocsだけでなくGoogle Driveへのアクセスも可能だが使いづらくうまい利用方法は思いつかなかった。
PDFなどGoogle Docs形式以外では中身を解釈してまとめるといったことはまだできない。

Bardにコードスニペットを作成してもらいReplit(Webエディタ)へエクスポート

Bardから出力されたコードの挙動をその場で確認することが可能。
Bardからコードサンプルを出力 → 下部の共有ボタンからReplitへエクスポート → 選択肢が出てきた場合Continue without upgrating

Bardに画像を読み込ませる

2023年9月に日本語での画像認識が対応されている。入力欄の左のアイコンより。

画像からHTML作成(Image to HTML)

Create Html from image

画像内に日本語が含まれている場合日本語で質問した方がいいようだ。
また以前は問題なかったがメンバ一覧など名前やメールアドレス等が入っているような画像だと弾くような挙動になる（アップロードした画像も削除される）
あまり複雑なものだと対応できなかったり、追加でコンテキストの説明が必要になってくる。

ER図の画像からテーブルを作成するSQL文を作成する(ER to SQL)

添付のER図をもとにテーブルを作成するSQLを作成してください

Google検索の検索のAI(SGE)を試してみる

noreply@blogger.com (えむてぃ) — Thu, 31 Aug 2023 02:22:00 +0000

機能としては検索結果の要約が主。検索結果自体が微妙なBingを使うよりはいいかもしれない。

利用方法

以下のGoogle Search LabからONにすると検索結果に出てくるようになる。Googleアカウントでログインしておく必要がある。

https://labs.google.com/search/experiments?is=ng

検索結果にAIによる生成結果が出てくるようになる。
たとえば「GCPとは」と検索するといくつかのサイトを参考に要約が表示される。参考にしたサイトも表示される。

ChatGPTのような使い方はできない

『jqueryでtableのheaderにクリックイベントを付与する方法』みたいなのは無理。

今のところはあくまで検索結果の要約と捉えると良い。
Bingでいうところの「より厳密に」を設定したAIに近い。
Bardも普通に使えるようになってきているので併用すると良い。

参考

https://japan.googleblog.com/2023/08/search-sge.html

Cloud SQL Proxy V2をDockerで使用する

noreply@blogger.com (えむてぃ) — Mon, 07 Aug 2023 01:57:00 +0000

微妙に記述が変わっていてそこそこ手間取った。
Cloud SQLへアクセスする方法は以前まとめているが、Dockerのアプリケーションからプロキシ経由でCloud SQLヘアクセスする場合は一手間必要になる。
https://trueman-developer.blogspot.com/2020/07/gcp-cloud-sqlmysql.html

Docker Run経由でCloud SQL Proxy

DB接続名確認

gcloud sql instances describe データベース名 --format='value(connectionName)'

※Cloud SQLのダッシュボードから確認可能

認証用jsonファイル取得

https://cloud.google.com/sql/docs/mysql/authentication?hl=ja

https://cloud.google.com/sql/docs/mysql/add-manage-iam-users?hl=ja#creating-a-database-user

IAMと管理 → サービスアカウントからサービスアカウントを作成。 https://console.cloud.google.com/projectselector2/iam-admin/serviceaccounts

②このサービスアカウントにプロジェクトへのアクセスを許可するでロールを追加する。
ロール: Cloud SQL クライアント

作成したサービスアカウントを選択してキーの作成(JSON)
xxxxxxxxxxxxxxxx.json
ダウンロードしたjsonファイルはProxyと同階層に配置する必要がある。

Docker run

以下はCloud SQL ProxyV2での指定方法。

docker run -d \
  -v ./xxxxxxxxxxxxxxx.json:/var/service-account-key.json \
  -p 127.0.0.1:13306:13306 \
  gcr.io/cloud-sql-connectors/cloud-sql-proxy:2.6.0 \
  --credentials-file /var/service-account-key.json joy-service:asia-northeast2:joy-service-db

※ -pは任意のポート番号。接続するときに指定する。
※ -vはボリューム。先ほど取得したjsonファイルをDocker配下へコピーする。

docker-composeの記述方法

以下はLaravel Sailの例。
cloud-sql-proxyのvolumes, networks, commandの最後の2つjsonファイル名と接続名をを変更すれば良い

version: '3'
services:
    laravel.test:
        build:
            context: ./vendor/laravel/sail/runtimes/8.2
            dockerfile: Dockerfile
            args:
                WWWGROUP: '${WWWGROUP}'
        image: sail-8.2/app
        extra_hosts:
            - 'host.docker.internal:host-gateway'
        ports:
            - '${APP_PORT:-80}:80'
            - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
        environment:
            WWWUSER: '${WWWUSER}'
            LARAVEL_SAIL: 1
            IGNITION_LOCAL_SITES_PATH: '${PWD}'
        volumes:
            - '.:/var/www/html'
            - '/var/www/html/storage/framework'
        networks:
            - sail
        depends_on:
            - cloud-sql-proxy
    cloud-sql-proxy:
        container_name: cloudsql-proxy
        image: gcr.io/cloud-sql-connectors/cloud-sql-proxy:2.6.0
        volumes:
            - ./xxxxxxxxxxxxxxxx.json:/var/xxxxxxxxxxxxxxxx.json
        ports:
            - "127.0.0.1:13306:13306"
        networks:
            - sail
        command:
            [
                "--address",
                "0.0.0.0",
                "--port",
                "13306",
                "--credentials-file",
                "/var/xxxxxxxxxxxxxxxx.json",
                "service名:asia-northeast2:DB名"
            ]

これでDockerのアプリケーションからGCPのDBへアクセスできるようになる。
また適当なDB接続クライアントでDBの操作ができるようになる。

接続情報

Host: 127.0.0.1
Username:root
Password:
Port:13306

HostはDockerアプリケーションから接続する場合"cloud-sql-proxy"を指定する。
Username/PasswordはGCPのCloudSQLから設定する。
PortはDockerで指定した左側のポート番号になる。

参考

https://cloud.google.com/sql/docs/postgres/connect-auth-proxy?hl=ja#docker

https://qiita.com/r-dohara/items/28cf0e6a2bfb31f05d45#docker-compose

郵便番号ライブラリYubinbango-coreをstrict, esnextで使用できるようにした

noreply@blogger.com (えむてぃ) — Sat, 29 Jul 2023 13:26:00 +0000

公開からそれなりの年月が経っていて現状ではいろいろと不備が出てそのままでは利用できない。
修正ついでにNPMに公開してみたかったのでやってみた。

利用方法

Vue等を使用しない場合は以下で良い。classを使用するだけで動作する。
https://github.com/yubinbango/yubinbango

上記は便利だがVue等のフレームワークと相性が悪い。
VueでTypeScriptを利用したい場合は以下
https://www.npmjs.com/package/yubinbango-core-strict

npm install yubinbango-core-strict

import { YubinBangoCore } from 'yubinbango-core-strict';

const postalcd = "1010001"
new YubinBangoCore(postalcd, function (addr) {
    // region_id=県コード, region=都道府県
    // locality=市区町村, street=町域
    console.log(addr)
})

Visual Studio Code等を使っている場合addrにインテリセンスが効くようにしてある(型情報を定義している)。

経緯とかやったことメモとか

https://www.npmjs.com/package/yubinbango-core こちらは本家で公開されているものだがモジュールがエクスポートされておらず利用できない。
これを解消したものとしてYubinbango-core2というパッケージがある。
https://www.npmjs.com/package/yubinbango-core2
core2はトランスパイルするだけなら問題ないがstrictモードやESNEXTでビルドするとエラーになる。このライブラリのためだけのためにいろいろ設定を変更するわけにはいかない。

本当は本家で修正してもらうのが良いと思うがずっと放置されているようだ。
https://github.com/yubinbango/yubinbango-core/issues

短いソースだから自分で用意してしまえば＆ついでに公開してしまえば便利では！？というのが経緯。
具体的には以下のような対応をおこなった。

Export assignment cannot be used when targeting ECMAScript modules. Consider using 'export default' or another module format instead

exportの記述が少し古いものになっているので修正。
https://qiita.com/ystkr/items/84deec9a9fe8a85a96d1

非推奨になった記述を修正。substrなど。
型を全て明示するように変更。
元々あったgulpのテストもやりたかったが少し手直しした程度では実行できなかった...... やるなら0からやり直す必要があるがそこまでやるメリットを感じない。

NPMへ公開する

https://www.npmjs.com/ にてサインアップ。
パスワードは後で入力することになるので自動生成しないほうがいいかも。

package.jsonとREADME.mdを公開用に修正する。NPMの該当ページに表示される情報になる。

npm adduser npm publish ./

これだけでnpm installできるようになるうえに普通にNPMで検索した時に出てくる。いいのか？

100行にも満たない短いライブラリだが時間が経つと動かなくなるのはなかなか辛いものがある。

参考

https://qiita.com/TsutomuNakamura/items/f943e0490d509f128ae2

画像生成AI Bing Image Creator(DALL-E)の使い方、プロンプトについて検証する

noreply@blogger.com (えむてぃ) — Sun, 07 May 2023 15:18:00 +0000

DALL-Eを使用しているので正確にはDALL-Eのプロンプトの調査、検証になる。
Stable Diffusionでもある程度応用は利くはず。

Bing Image Creatorについて

新Bingのプレビュー版に登録していれば無料で使用することができる。
https://www.bing.com/images/create
詳細は以下にまとめている。
https://trueman-developer.blogspot.com/2023/03/bingbing-image-creator.html

描画対象：犬、女の子、老人、ロボットなど

まず『何を描画するか』を決める。
重要なものを先にオプション的な要素を後付けにするのが主流になっているようだ。

cat girl

https://www.bing.com/images/create/cat-girl/6422962be52b4560a6624fd7fdf5ee7a?FORM=GUH2CR

上記画像は"cat girl"のみのプロンプトを指定して作成した例(cat girlそのものに猫耳少女といった意味合いがあるらしい)
単純な1,2ワードだけでは全く望んだようにならないので、ここからキーワードを加えてもう少し方向性を持たせる必要がある。

描画対象：プロンプト例
キーワード	意味、出力
dog	犬
cat	猫
robot	ロボット
man	男性
woman	女性
boy	少年
girl	少女
old man	老人
creature	異形
dragon	竜
cat girl	猫耳少女
witch	魔女
fairy girl	妖精

画風

～風、～調といった出力画像の画風、絵柄を指定する。
サイバーパンク風、日本のマンガアニメ風と言った指定が可能。
一部個人名でも指定できるらしいが試してみてもあまり似なかった。

robot girl, cel anime, cyberpank

https://www.bing.com/images/create/robot-girl2c-cel-anime2c-cyberpank1
https://www.bing.com/images/create/robot-girl2c-cel-anime2c-cyberpank2

画風：プロンプト例
キーワード	意味、出力
Van Gogh	ゴッホ
cel anime, anime	日本の漫画アニメ
chibi anime	2等身、3等身キャラ
concept art	コンセプトアート。細部まで書き込まれたはっきりしたイラストになりやすい
Oil painting	油絵
watercolor, gouache, dreamy watercolor	水彩
flat color	影の少ない絵柄
ink drawing	水墨画
hyper realism	リアル風イラスト
3D	3D風イラスト
sketch	手描きスケッチ
Grisaille	グリザイユ。モノクロ。灰色っぽいイラスト
art nouveau	アール・ヌーヴォー。花や植物ガラスなど
rococo	ロココ調
renaissance	ルネッサンス美術
baroque	バロック
pixel art	ピクセルアート
metal texture	金属のような質感

アニメ*サイバーパンクなど複数指定が可能。混ざったような出力になる。
アニメ*何かしらの美術様式を指定するとイメージ通りのイラストが出力されやすいかも。 animeとrococoを指定すると繊細でイイ感じになるが何故か生成がブロックされる確率が跳ね上がる。
描画対象と画風を組み合わせるだけでいろいろな画像が出力できるようになる。
画風として以下のアーティストが使えるらしいがあまり効いていない。
https://decentralizedcreator.com/list-of-artists-supported-by-dall-e-2/

身体的特徴

目の色、髪色、髪型、肌の色、耳の形など

blue eyes white dragon

https://www.bing.com/images/create/blue-eyes-white-dragon

woman, white wavy long hair, red eyes, rabbit ears, brown skin, cel anime

https://www.bing.com/images/create/woman2c-white-wavy-long-hair2c-red-eyes2c-rabbit-ears

身体的特徴：プロンプト例
キーワード	意味、出力
[Color] eyes	指定した目の色
[Color] hair	指定した髪の色
short hair	ショートヘア
long hair	ロングヘア
spiked hair	ツンツンした髪
bob hair	ボブ
Wavy hair	ウェーブのかかった髪
Ponytail	ポニーテール
brown skin	褐色
cat ear	猫耳
wolf ear	狼耳
rabbit ears	ウサミミ

細かくプロンプトを分けるよりwhite wavy long hairと言った具合に自然言語で指定したほうがうまく反映される気がする。

表情

喜怒哀楽など。

woman, black bob hair, surprised expression, cel anime

https://www.bing.com/images/create/woman2c-black-bob-hair2c-surprised-expression2c-cel-anime

表情：プロンプト例
キーワード	意味、出力
happy/smile/laugh	喜び
angry	怒り
cry, sad	悲しむ
surprised expression	驚き
sleepy	眠そうな
evil smile	悪巧み、邪悪な笑み
serious	シリアスな表情
wink	ウインク
melancholy	憂鬱
screaming	叫ぶ、どちらかというと大口を開けるといった表情になる

ポーズ

girl, sitting,against wall, melancholy, cel anime

https://www.bing.com/images/create/girl2c-sitting2cagainst-wall2c-melancholy2c-cel-anime

middle age, cook, battle action, hyper realism

https://www.bing.com/images/create/middle-age2c-cook2c-battle-action2c-hyper-realis

a girl, goat horn, white hair, red eyes, business black suit, sit in a chair, cross-legged, drinking red wine, cel anime, highquality

https://www.bing.com/images/create/a-girl2c-goat-horn2c-white-hair2c-red-eyes2c-business-

ポーズ：プロンプト例
キーワード	意味、出力
sitting,against wall	壁にもたれかかる
hands up	手を挙げる
action	アクション
battle action	バトルアクション
dynamic action	ダイナミックなアクション
from side	横向き
cook	料理
looking up	見上げる
covering eyes	手で両目を覆う
cross-legged	足を組む
sit in a chair	椅子に座る
ride on XXXX	XXXXに乗る。馬、バイク、ドラゴンなど

足を組んだり手を見せるようなポーズは崩れやすい。かなり数をこなす必要がある。

服装、装飾

woman, white short hair, red eyes, goat ears, stand up, business suit, loafers, cel anime

https://www.bing.com/images/create/woman2c-white-short-hair2c-red-eyes2c-goat-ears2c-sta

old age, butler, wearing glasses, cel anime, concept art

https://www.bing.com/images/create/old-age2c-butler2c-wearing-glasses2c-cel-anime2c-conce

服装、装飾：プロンプト例
キーワード	意味、出力
business suit	ビジネススーツ
maid	メイド服
one piece dress	ワンピース
military	ミリタリー、軍服
pumps	パンプス(ヒールあり)
loafers	ローファー(ヒールなし)
boots	ブーツ
nun	修道女
nurse	ナース
butler	執事
wearing glasses	眼鏡
holding an umbrella	傘を持つ
wearing armor	鎧
wearing armor	鎧
feather helmet	羽つきヘルメット
feathered cap	羽つき帽
silk hat	シルクハット
blindfold	目隠し
hair over one eye	メカクレ(片側)
covering eyes	手で両目を覆う

眼鏡、服、靴などで動詞を入れる必要はあまりない。

画角、カメラ、視点

靴を入れると全体を表示出力してくれたりするがもう少し明示的に出力したい場合は視点を設定する。

girl, white short hair, black dress, Over-the-shoulder shot, cel anime, concept art

https://www.bing.com/images/create/girl2c-white-short-hair2c-black-dress2c-over-the-shou

画角、カメラ、視点：プロンプト例
キーワード	意味、出力
Close-up shot	近接ショット
dynamic angle	ダイナミックな視点
back shot	背面
side shot	横からのアングル
Full body shot	全身
extreme long shot	超望遠。それほどエクストリームではない。
low angle	下からのアングル
overhead view	上からのアングル
over-the-shoulder shot	肩越しに覗き込むようなアングル
fisheye	魚眼効果

シチュエーション

girl, white short hair, heaven, cel anime, concept art

https://www.bing.com/images/create/girl2c-white-short-hair2c-heaven2c-cel-anime2c-concept-art

girl, white short hair, hell, cel anime, concept art

https://www.bing.com/images/create/girl2c-white-short-hair2c-hell2c-cel-anime2c-concept-art

シチュエーション：プロンプト例
キーワード	意味、出力
cyberpank	サイバーパンク
fantasy	ファンタジー
SF	SF
post-apocalypse	文明が途絶えたあとの世界
future	未来
heaven	天国
hell	地獄

背景

人物のプロンプトを除外するとただの背景になる。

girl, white short hair, Medieval fantasy indoors, cel anime, concept art

https://www.bing.com/images/create/girl2c-white-short-hair2c-medieval-fantasy-indoors2c

Medieval fantasy indoors, cel anime, concept art

https://www.bing.com/images/create/medieval-fantasy-indoors2c-cel-anime2c-concept-art

背景：プロンプト例
キーワード	意味、出力
background [Color]	任意の単一色で指定できる
background [pattern]	Dot, Stripe, Checkerなど。background pink dotのように色も指定可能
space	宇宙
moon	月
star	星
sky	空
forest	森
futuristic city background	未来都市
ruined city	廃墟
fantasy town	ファンタジーの街並み
Medieval fantasy indoors	中世風ファンタジーの屋内
aurora	オーロラ
air castle	空に浮かぶ城

その他オプション等

その他オプション等：プロンプト例
キーワード	意味、出力
daydream	空想
imagination	イマジネーション、有無で雰囲気が変わる
fantasy	ファンタジー
SF	SF
post-apocalypse	文明が途絶えたあとの世界
future	未来

boy,standing, glass, school uniform, beautiful detailed eyes, good looking,cel anime

https://www.bing.com/images/create/boy2cstanding2c-glass2c-school-uniform2c-beautiful-det

美少年を出力したい場合beautiful detailed eyesといった指定をするといい。

old age, battlefield, combat, gun action, dynamic angle, cool, good looking, cel anime

https://www.bing.com/images/create/old-age2c-battlefield2c-combat2c-gun-action2c-dynamic-

自由度が少し低く、画像にマークが入るのでBing Image Creatorは微妙に使いにくい。
グラボを手に入れたので今後は自前でやろうと思う。

参考

https://openai.com/product/dall-e-2
dalle2のprompt情報。英語。

https://dallery.gallery/the-dalle-2-prompt-book/
https://ishikawatsukasa.com/chat/web/4589/
https://blogcake.net/stable-diffusion-prompt/
https://note.com/s41t0h/n/n2d5915198c36

Bardが日本でも使用できるようになったのでBing,ChatGPTと比較してみる

noreply@blogger.com (えむてぃ) — Wed, 19 Apr 2023 13:48:00 +0000

大きく変わらないが性能的にはまだ使えないといったところ。

Bardへのアクセス方法

以下より
https://bard.google.com/
waitlistへ参加してから5分程度で使用できるようになるらしい。遅くとも6時間後に再アクセスしたときは利用できるようになっていた。

Bing,Bard,ChatGPTの比較表

	Bing	ChatGPT(3.5)	Bard
日本語対応	OK	OK	今は出来ない
履歴	残らない	以前の状態から再開可能	残る
性能	ChatGPT4相当		現状ChatGPTより劣る
最新情報	○	×	○
ブラウザ	Edgeのみ	なんでも	なんでも
特徴	相対的に普通	遅め、負荷が高いときはさらに遅く回答が返ってこないケースも。	速い。性能が上がると遅くなるかも。
特徴	独創性、バランス、厳密など回答に指向性を待たせることが可能。ブラウザの右上Bingアイコンからいつでも呼び出し可能。	プラグインで拡張可能。APIが利用可能	回答結果が3パターン確認できる
悪いところ	UXが最悪	最新の情報に対応していない	性能がまだChatGPTに追いついていない

実際に質問して比較してみる

SQLについて教えて

質問文

Please tell me about the following SQL SELECT products.id as product_id , products.name as product_name , class_categories.name as category_name FROM products INNER JOIN class_categories ON products.class_category_id = class_categories.id WHERE products.id = :product_id ORDER BY products.id;

回答は割愛。
どれも大きな違いは見られなかった。簡潔に説明した後にそれぞれ構文について詳細を説明してくれる。
複数の回答を返してくれるBardが理解するという点ではいいかもしれない。

jqueryでcheckboxのイベントを取得する方法は？

質問文

How to get checkbox events in jquery?

どれも目的は達成できるがChatGPTの回答が一番親切かも。

VBコードをJavaに変換してください

質問文

Please convert the following VB code to Java.

For i = 1 To 100
    If i Mod 3 = 0 And i Mod 5 = 0 Then
        Console.WriteLine("FizzBuzz")
    ElseIf i Mod 3 = 0 Then
        Console.WriteLine("Fizz")
    ElseIf i Mod 5 = 0 Then
        Console.WriteLine("Buzz")
    Else
        Console.WriteLine(i)
    End If
Next

どれも正しく回答してくれる。
A→Bへの変換はこの手のAIが得意な分野なのかもしれない。
ただしBardは日本語から英語への変換はまだ対応していない。できないというより意図的に弾いてそうな気がする。

ソフトウェアエンジニアとして目標を立てたい。一般的なものでいいので15個ほど例をあげてください

質問文

I want to set goals as a software engineer. Please give me 15 examples, just general ones.

Bardは他と比べて少し踏み込んで具体的なアクションも提示してくれている気がする。

概ねBardでもやりたいことができそう。ただし性能が上がって日本語対応されるまで出番はない。

Bingの場合スクロールしたら意図せず検索結果が表示されたり変換中のエンターで送信されたり微妙にアクセスが悪かったりサイドバーからの呼び出しからだと微妙に狭かったりと使い勝手が悪いのでBardが日本語に対応すれば基本ChatGPTかBardを使うといった形になりそうな気がする。

新しいBingの画像生成機能Bing Image Creatorを試してみる。使い方と出力例

noreply@blogger.com (えむてぃ) — Wed, 22 Mar 2023 11:34:00 +0000

仕事なんかしている場合じゃない。

概要＆利用方法

テキストからいい感じの画像を生成してくれるアプリケーション。
Bing Chatからあるいは専用のサイトから利用できる。

Bingプレビューの参加ユーザーはすでに以下のリンクから利用可能になっている。 https://www.bing.com/images/create

プレビュー参加は以下から
https://www.bing.com/new

具体的な手順については前回まとめたものがある。
https://trueman-developer.blogspot.com/2023/02/chatgptchatgptbing.html
今は殆ど時間をかけずにプレビューに参加できるらしい。

Bing Image Creatorの特徴

新Bingへのプレビューへアクセスできるなら即使える
画像とPromptの例が見れる
生成される画像は1024*1024のjpg画像
破綻が少ない
1週間あたりn回まで高速で生成可能なブーストがある（2023/03/22時点で25回）生成時間はブーストありで1分。なしで10〜20分※
ブーストはMSのポイントを利用して追加可能。500リワードにつき5ブースト
センシティブ判定は結構厳しい上にブーストが消費される
非商用利用のみOK.商用NG？
画像左下にBingマークが付く

※公開直後だったためアクセスが集中していたのか時間帯によってブースト無しで20秒くらいのケースもある。

画像生成例

試しに100枚以上生成してみたが、絵として見られないレベルで破綻している画像はなかった（手が崩れていたりはする）
※いろいろ試してみて分かったが属性を盛りすぎると徐々に崩れていく。特に人物はシンプルなプロンプトのほうが良いようだ。

https://www.bing.com/images/create

まず『お任せで探す』を試してみる。
『お任せで探す』クリックで入力欄に例が入ってくる。
良さそうなキーワードを見つけたら『作成』

neon living room from the future, Scandinavian design

https://www.bing.com/images/create/neon-living-room-from-the-future2c-scandinavian-des
あれ？なんだか微妙かも？？

robot holding an umbrella in the rain, ink drawing

https://www.bing.com/images/create/robot-holding-an-umbrella-in-the-rain2c-ink-drawing

イイ感じ。

robot holding an umbrella in the rain, ink drawing

https://www.bing.com/images/create/a-mechanical-sphere-floating-over-a-pink-desert2c-1

ここまでがお任せで生成したプロンプト。

以降は他の画像生成AIのプロンプトなどを参考にした趣味7割くらい出力例になる。

cool creature, metal texture, concept art

https://www.bing.com/images/create/cool-creature2c-metal-texture2c-concept-art1
https://www.bing.com/images/create/cool-creature2c-metal-texture2c-concept-art2 https://www.bing.com/images/create/cool-creature2c-metal-texture2c-concept-art3
https://www.bing.com/images/create/cool-creature2c-metal-texture2c-concept-art4

大したプロンプトではないのにこれはちょっとかっこよすぎる。

robot, space with moon and stars, concept art, realistic

https://www.bing.com/images/create/robot2c-space-with-moon-and-stars2c-concept-art2c-rea1
https://www.bing.com/images/create/robot2c-space-with-moon-and-stars2c-concept-art2c-re2
https://www.bing.com/images/create/robot2c-space-with-moon-and-stars2c-concept-art2c-rea3
https://www.bing.com/images/create/robot2c-space-with-moon-and-stars2c-concept-art2c-rea4

A girl, short hair, Close-up shot, cel anime

https://www.bing.com/images/create/a-girl2c-short-hair2c-close-up-shot2c-cel-anime1
https://www.bing.com/images/create/a-girl2c-short-hair2c-close-up-shot2c-cel-anime2
https://www.bing.com/images/create/a-girl2c-short-hair2c-close-up-shot2c-cel-anime3
https://www.bing.com/images/create/a-girl2c-short-hair2c-close-up-shot2c-cel-anime4

日本の漫画、アニメ風の画像はなんとなく無理そうだと思っていたが普通に高クオリティで出力してくれる。
学習データはどこから引っ張ってきているんだろうか？

A girl, short white hair, red eye, dynamic angle, cel anime

https://www.bing.com/images/create/a-girl2c-short-white-hair2c-red-eye2c-dynamic-angle2c

A girl, short white hair, red eye, pov, cel anime, rococo

https://www.bing.com/images/create/a-girl2c-short-white-hair2c-red-eye2c-pov2c-cel-anime2c

上記の画像は2回（8枚）中1枚のみ有効。他の画像はNGになってしまった。

burning world, dramatic, ultra - wide angle, long exposure, ultra - hd, epic lighting, ray tracing global illumination, in a symbolic and meaningful style, heavenly perspective, trending on artstation, concept art, hyper realism, hdr

https://www.bing.com/images/create/burning-world2c-dramatic2c-ultra---wide-angle2c-long-1
https://www.bing.com/images/create/burning-world2c-dramatic2c-ultra---wide-angle2c-long-2
https://www.bing.com/images/create/burning-world2c-dramatic2c-ultra---wide-angle2c-long-3
https://www.bing.com/images/create/burning-world2c-dramatic2c-ultra---wide-angle2c-long-4

A girl, short white hair, wolf year, High angle shot, cel anime, rococo

https://www.bing.com/images/create/a-girl2c-short-white-hair2c-wolf-year2c-high-angle-sh
https://www.bing.com/images/create/a-girl2c-short-white-hair2c-wolf-ear2c-high-angle-sho2
ブーストを使い切ってしまってから気づいたが完全にスペルミスしてる（狼年ってなんだ）
それでもいい感じに出力してくれる。

A girl, bob white hair, wolf year, back shot, cel anime

https://www.bing.com/images/create/a-girl2c-bob-white-hair2c-wolf-year2c-back-shot2c-cel1
https://www.bing.com/images/create/a-girl2c-bob-white-hair2c-wolf-year2c-back-shot2c-cel-2
https://www.bing.com/images/create/a-girl2c-bob-white-hair2c-wolf-year2c-back-shot2c-cel-3

A girl, bob white hair, wolf year, back shot, cel anime

https://www.bing.com/images/create/waterdrawing-lineart-of-bustup-buutiful-cute-girl1
https://www.bing.com/images/create/waterdrawing-lineart-of-bustup-buutiful-cute-girl2

A girl with black hair walks through a flower field with the starry sky as the background, anime, rococo

https://www.bing.com/images/create/a-girl-with-black-hair-walks-through-a-flower-fiel1
https://www.bing.com/images/create/a-girl-with-black-hair-walks-through-a-flower-fiel2
https://www.bing.com/images/create/a-girl-with-black-hair-walks-through-a-flower-fiel3

cute dog, pixel art

いわゆるピクセルアートも可能（1024*1024はピクセルアートなのかという疑問は脇においておく）

robot girl, cyberpank, dynamic angle, futuristic city background, cel anime

https://www.bing.com/images/create/robot-girl2c-cyberpank2c-dynamic-angle2c-futuristic-c1
https://www.bing.com/images/create/robot-girl2c-cyberpank2c-dynamic-angle2c-futuristic-c2
https://www.bing.com/images/create/robot-girl2c-cyberpank2c-dynamic-angle2c-futuristic-c3
https://www.bing.com/images/create/robot-girl2c-cyberpank2c-dynamic-angle2c-futuristic-c4

A girl, bob white hair, wolf ear, surprised expression, Close-up shot, cel anime

https://www.bing.com/images/create/a-girl2c-bob-white-hair2c-wolf-ear2c-surprised-expres1
https://www.bing.com/images/create/a-girl2c-bob-white-hair2c-wolf-ear2c-surprised-expres2
https://www.bing.com/images/create/a-girl2c-bob-white-hair2c-wolf-year2c-surprised-expre3

表情をつけることもできた。笑った顔や泣いた顔なども恐らくいけるはず（ブーストが足りない）

できた。

A girl, bob white hair, wolf ear, angry, Close-up shot, cel anime

https://www.bing.com/images/create/a-girl2c-bob-white-hair2c-wolf-ear2c-angry2c--close-up1
https://www.bing.com/images/create/a-girl2c-bob-white-hair2c-wolf-ear2c-angry2c--close-up2
https://www.bing.com/images/create/a-girl2c-bob-white-hair2c-wolf-ear2c-angry2c--close-up3

A girl, bob white hair, wolf ear, melancholy, Close-up shot, cel anime

https://www.bing.com/images/create/a-girl2c-bob-white-hair2c-wolf-ear2c-melancholy2c--clo1
https://www.bing.com/images/create/a-girl2c-bob-white-hair2c-wolf-ear2c-melancholy2c--clo2

生成履歴について

右側に過去生成した履歴を改めて閲覧することが可能。
一定数出力すると古いものは見えなくなるがこれはBingの履歴から追うことが可能（ちょっと面倒）

プライバシー → 閲覧の履歴 → 表示数を増やす
https://account.microsoft.com/privacy?refd=privacy.microsoft.com
履歴をクリアしてしまったら永遠に見られなくなるかもしれない。

生成した結果は共有することが可能で上記の生成例でもリンクを貼っているがこれがいつまで残るのかはわからない。
良いプロンプト、画像ができたら保存しておくほうが良さそうだ。

ChatGPTと(ChatGPTを組み込んだ)新しいBingを比較する

noreply@blogger.com (えむてぃ) — Sun, 19 Feb 2023 11:18:00 +0000

新しいBingとしか表現しないから今までのものと呼び分けができない。
次のバージョンが出たらどうする気なんだ......

ChatGPTについて

以前にまとめている。
https://trueman-developer.blogspot.com/2023/01/chatgpt.html
ChatGPTとは「人間が使用する言語を理解し、それを使用して文章を生成することができるプログラム」というのがざっくりとした説明になる。

簡単なスニペット（コード片）調べるときのGoogle検索の代替になりうる
要件（考え）を整理するときの壁打ち要因になりうる
理解力、読解力そして語学力、表現力に優れている
回答内容は要検証
「アウトプットが正しいかどうか判断できる」人しか使えない

といった特徴がある。

新しいBingについて

そのうち公開されるとは思うが現時点ではプレビュー版の公開のみ
以下より順番待ちリストへ登録可能(MSアカウントが必要)
https://www.bing.com/new?form=MY028Z
2/8 13:30に登録して、
2/12 順番待ちを早めるためAndroidにBingインストール。
2/14 午前にメールが来て利用可能に。

若干周りより遅かった気がするのでほとんど使用していないアカウントだと後回しにされるとかもあるかもしれない。たまたまかもしれない。

新しいBingは結論を書いてしまうと以下のような特徴がある。

ChatGPTでできることは大体できる
ChatGPTと違って履歴は残らない
ChatGPTだとたまに英語で返ってきたがBingだと恐らくそういうことはない
5往復までしかやり取りできない
1日50回までしかやり取りできない
URLに対して質問できる
本家より早い
時事ネタもOK
追加で質問するときの参考になりそうな選択肢が表示される
参考にしたURLが表示される

回答は毎回変わるので一概には言えないが、ChatGPTよりも少し踏み込んだ回答が多い気がする。
恐らくまだまだ便利に使えるはず。
不満があるとすればフォントがMicrosoft YaHei(中華フォント)になっているということや、Macだと変換時のエンターで質問が送信されたりスクロールがイライラする挙動になっていたりする。

URLに対して質問できる

https://ja.wikipedia.org/wiki/クエーサーについて要約して。

こんにちは、こちらはBingです。お役に立てて嬉しいです😊 ご質問のウィキペディアの記事について要約しますと、クエーサーとは、遠くの銀河の中心にある超大質量ブラックホールに物質が落ち込む際に放出される強い電磁波のことです。クエーサーは、宇宙の初期に形成されたと考えられており、その数は約10万個と推定されています。クエーサーの観測は、宇宙の進化やブラックホールの性質を理解するのに重要な役割を果たしています。

これが実際に該当ページの要約をしているのか、あるいはクエーサーについてのページだと認識してクエーサーの要約をしているのかはわからない。10万個といった記述はもとのWikipediaにはないので後者っぽい気がする。

時事ネタもOK

現在の内閣総理大臣は？

こんにちは、これはBingです。😊 現在の内閣総理大臣は、第101代岸田文雄さんです。令和3年11月10日に就任しました。

ChatGPTに同様の質問を投げると以下のように返ってくる。恐らく学習時点での最新の情報。

2023年2月14日現在、私が知る限りの情報では、日本の内閣総理大臣は菅義偉（すが・よしひで）氏です。

追加で質問するときの参考になりそうな選択肢が表示される

例えば「閏年を判定するJavaの関数を出力して」と言った質問をすると「この関数をテストする方法は？」といった選択肢を出してくれる。
ただ選択肢に「ありがとうございます。とてもわかりやすいです。」が唯一出てくるのはどうなんだと思わなくもない。

回答内容が大きく変わるわけではないので制限によって使い分ける等でいいかもしれない。 GoogleのBardが出たらそちらとも比較してみたい。

ChatGPTの有効な使い方を検証してまとめる

noreply@blogger.com (えむてぃ) — Sat, 21 Jan 2023 11:25:00 +0000

30ケース以上の例を6種類に分類して挙げている。
知的で創造的な仕事をAIがおこない、我々は単純で面倒で面白くもない作業をすることになるに違いない。

ChatGPTとは

ChatGPTについて知りたい場合はChatGPTに聞いてみるといい。
以下から利用可能。Googleアカウントさえあればログインできる(2022/01/21時点)
https://chat.openai.com/chat
夜間は特にアクセス過多で不安定になるので注意。

以降青色を質問文、緑色をChatGPTの回答として有用な使用例を羅列していく。

ChatGPTとは何ですか

ChatGPTは、OpenAIによって開発された、自然言語処理（Natural Language Processing、NLP）タスクを実行するための言語モデルです。このモデルは、GPT (Generative Pre-training Transformer) ベースのモデルであり、自然言語生成タスクを行うことができます。例えば、ChatGPTを使用することで、会話文を生成することができます。また、このモデルは、自然言語の入力を処理し、それを分析することで、質問やコマンドに対して自然な回答を生成することができます。

「もう少し分かりやすく」

ChatGPTは、人間が使用する言語を理解し、それを使用して文章を生成することができるプログラムです。 ChatGPTは、人間のように会話をすることができるため、会話をシミュレートすることができます。
例えば、ある人が次のように質問をしたとします。
「お腹がすいたので、近くのレストランを知っていますか？」
このような質問に対して、ChatGPTは次のように答えることができます。
「はい、近くにはいくつかのレストランがあります。お好みの料理や予算に合わせて、どのレストランがいいでしょうか？」
ChatGPTは、質問に対する自然な回答を生成することができるため、人間のように会話をすることができます。

「ChatGPTは、人間が使用する言語を理解し、それを使用して文章を生成することができるプログラムです」という一文がわかりやすく端的に説明している部分になる。
ちなみに近くのレストランを検索する機能はないので上の質問例を入力しても話は合わせてくれるがまともな回答は得られない。
ChatGPTを使いこなすには悪い例でChatGPTがどんなものかを理解するには良い例とも言える。

ざっくりいってしまうとChatGPTは「質問に対してそれっぽいものを返してくれるもの」
一問一答で終わるのではなく更に続けて質問することが可能（内部の処理的には今までのやりとりを全部投げているらしい？）
質問の対象範囲はウェブ上にある情報ほぼ全部。ただし時事情報など最新の情報には対応していない(2021年時点でデータで学習しているらしい)

質問 → 応答〜について教えて

ある単語、用語についての質問。精度はジャンルによってはまちまちだが大体合格点(60〜70%)くらいありそう。
具体的には

SDGs：Sustainable Development Goalsについて教えて
GCPについて教えて
DX（Digital Transformation）について教えて

といった質問内容を回答をしてくれる。知らない場合は知ったかぶりをしてくる。
知らない用語を調べる辞典のような使い方よりも知っている用語について流暢な説明文が欲しいといったときに特に有用。

応用として「〜風にして教えて」といった質問をすることが可能。ニュアンスを変えた文章を出力してくれる

「SDGs：Sustainable Development Goalsについて論文っぽく説明して」

Sustainable Development Goals (SDGs)は、国連が定めた持続可能な開発のための目標である。これらの目標は、2015年に採択され、2030年までに達成することを目指している。SDGsは、17のゴールが定められており、それらのゴールは貧困撲滅、飢餓撲滅、教育、ジェンダー平等、水・トイレ・衛生、エネルギー、健康・ケア、ジョブ・経済成長、基本的なインフラ、貿易、金融、技術革新、社会保障、環境保護、城市・地域開発、人間の尊厳、平和・安全、パートナーシップなど多岐にわたっている。

SDGsは、過去のミレニアム開発目標（MDGs）からの改良を反映しており、より包括的なアプローチを取っている。それらは、経済的、社会的、環境的な問題に対処するために必要な目標であり、世界中の人々が健康で幸せな生活を送るために必要な改善を目指している。

また、SDGsは、国家レベルだけでなく地域や市民レベルでの達成も重視しており、政府や民間セクター、市民社会などが協力して達成することを求めている。これにより、より効果的かつ適切なアプローチが取られることが期待される。
結論として、SDGsは、持続可能な開発のためのグローバルな目標であり、世界中の人々が健康で幸せな生活を送るために必要な改

「続けて」

善を目指している。それらの目標は、経済的、社会的、環境的な問題に対処するために必要であり、過去のミレニアム開発目標からの改良を反映している。また、SDGsは、国家レベルだけでなく地域や市民レベルでの達成も重視しており、政府や民間セクター、市民社会などが協力して達成することを求めている。これにより、より効果的かつ適切なアプローチが取られることが期待される。

文字数制限があるのか途中で止まる場合があるが「続けて」と入力することで残りが出力される。

コードについて説明

日本語でも英語でもプログラム言語でも『言語』であれば高度に解釈して詳細にわかりやすく説明してもらうことが可能。

以下のSQLについて教えてください

SELECT
  products.id as product_id
  , products.name as product_name
  , class_categories.name as category_name
FROM
  products
INNER JOIN class_categories 
    ON products.class_category_id = class_categories.id 
WHERE
  products.id = :product_id
ORDER BY
  products.id;

このSQLは、productsテーブルとclass_categoriesテーブルを結合し、 product_id、product_name、category_nameの列を選択し、productsテーブルのidが:product_idに等しい行を取得します。
また、結果はproduct_idの列で昇順に並べられます。
INNER JOINは2つのテーブルを結合し、結合条件を指定するために使用されます。
このクエリでは、productsテーブルのclass_category_idとclass_categoriesテーブルのidが一致する行を結合しています。
WHERE句は、特定の条件を満たす行だけを取得するために使用されます。
このクエリでは、productsテーブルのidが:product_idに等しい行だけを取得します。
ORDER BYは、結果を特定の列で昇順または降順に並べるために使用されます。このクエリでは、productsテーブルのidで昇順に並べられます。

以下のJQueryのコードについて教えてください

$(document).on("click","#sampletable tr",function() {
    $(this).find("td input[type=radio]").prop("checked", true)
});

このjQueryのコードは、HTMLドキュメント上で、idが"sampletable"の表の行がクリックされた時に実行されます。
クリックされた行にある、input type="radio"の要素のcheckedプロパティがtrueに設定されます。
つまり、クリックされた行内にあるラジオボタンが選択状態になります。

コード生成

簡単なスニペットを高精度でかつ多様な言語で作成可能。
コードだけでなくcronやDockerfileなど設定ファイルも作成可能。
現状SEO汚染されてしまっているGoogleで検索するよりも端的で良い回答が得られる可能性が高い。
不慣れな言語やライブラリ、フレームワーク等で実装力が高くテストもしっかりするようなタイプだと特に有用。
一つ、二つの言語を極めていてそれしか使用しないタイプだとあまり意味がない。

幾つか質問の具体例を挙げる。

閏年を判定するJavaの関数を出力して
閏年を判定するJavaScriptの関数を出力して
閏年を判定するPHPの関数を出力して
VBでFizzBuzzを書くには？
PHPで前後の空白を取り除く方法は？
jqueryでcheckboxのイベントを取得する方法は？
JavaScriptでCookieを操作する方法は？
phpのcURLでファイルを送信する方法を教えてください
SymfonyでRequestの中身を確認するにはどうしたらいいですか？

11時に起動するcronの設定方法は？

To set up a cron job that runs at 11:00 AM, you would use the following syntax:

0 11 * * * [command]
This tells cron to run the specified command at the 11th minute of the 11th hour, every day of the month, every month, and every day of the week.

You can also specify the command you want to run in place of "[command]".
You can set cronjob using the following command :

$ crontab -e
it will open the cron editor, and add the above line in that file

日本語でお願いします

11時に実行するcronジョブの設定方法は次のようになります。

0 11 * * * [コマンド]
これは、毎月、毎週、毎日の11時11分に指定されたコマンドを実行するようcronに指示します。

"[command]"の部分に実行したいコマンドを指定することもできます。
cronジョブを設定するには、次のコマンドを使用します :

$ crontab -e
これによりcronエディターが開き、そのファイルに上記の行を追加します。

ところで日本語で入力しているのに英語で返ってくることはないだろうか？
その場合は「日本語でお願いします」と入力することで以降は日本語で返してくれるようになる。

PHPが動作するDockerfileが欲しい

FROM php:7.4-apache
COPY . /var/www/html/

これは、PHP 7.4とApacheのWebサーバーがインストールされたDockerイメージをベースに、カレントディレクトリの内容を/var/www/html/にコピーするDockerfileです。
適切なフォルダに設置して、docker build . -t [image name]を実行することでイメージを作成できます。

追記:

Dockerfileは、Dockerイメージを構築するために使用するスクリプトのことです。Dockerfileには、必要なファイルやライブラリ、設定などを記述し、それを元にDockerイメージを作成します。

以下のDockerfileは、PHP7.4+Apache2.4+mysql-clientのイメージを作成するための例です

FROM php:7.4-apache

RUN apt-get update && apt-get install -y \
    mysql-client \
    && rm -rf /var/lib/apt/lists/*

COPY . /var/www/html/

このDockerfileは、php:7.4-apacheイメージをベースにして、mysql-clientをインストールし、カレントディレクトリの内容を/var/www/html/にコピーすることで、新しいイメージを作成します。

PHPとMySQLが動くdocker-composeファイルが欲しい。PHPとMySQLは分けて欲しい

以下は、PHPとMySQLが動作するDocker Composeファイルの例です。

version: '3'
services:
  web:
    build: .
    ports:
      - "80:80"
    volumes:
      - .:/var/www/html
    depends_on:
      - db
  db:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: dbname
      MYSQL_USER: user
      MYSQL_PASSWORD: password
    ports:
      - "3306:3306"
    volumes:
      - mysql-data:/var/lib/mysql
volumes:
  mysql-data:

この例では、2つのサービスが定義されています。1つはwebサービスで、PHPアプリケーションが実行されます。もう1つはdbサービスで、MySQLデータベースが実行されます。 webサービスは、Dockerfileがあるカレントディレクトリからビルドされ、ポート80でリッスンします。

webサービスは、dbサービスに依存しています。そのため、dbサービスが起動する前にwebサービスが起動されます。

この例では、MySQLのデータを永続化するために、mysql-dataという名前のボリュームが定義されています。

Docker Composeを使用して、これらのサービスを起動するには、docker-compose up コマンドを実行します。

追記:

上記の例では、webサービスはDockerfileがあるカレントディレクトリからビルドされます。Dockerfileがない場合は、image: php:7.4-apacheなどと記述して、Docker hubからイメージをpullすることもできます。
また、dbサービスはmysql:5.7と記述していますが、それ以外のバージョン(8.0やMariaDBなど)を使用することもできます。

version: '3'
services:
  web:
    image: php:7.4-apache
    ports:
      - "80:80"
    volumes:
      - .:/var/www/html
    depends_on:
      - db
  db:
    image: mariadb:10

続けて質問したため、PHPのDockerfileがある前提になっているようだ。

C#で数値の3桁間魔区切りを実装する方法は？」

C#で数値の3桁間にカンマを挿入し、読みやすい形式にするには、string.Format()を使用します。

例:
int num = 1000000;
string formatted = string.Format("{0:n0}", num);
Console.WriteLine(formatted);
出力:
1,000,000

また、数値を文字列に変換する際にも、ToString("n0")を使用することで同様の結果を得ることができます。

例:
int num = 1000000;
string formatted = num.ToString("n0");
Console.WriteLine(formatted);
出力:
1,000,000

なお、n0は整数（n）で0桁まで表示します。n3なら小数点3桁表示することができます。

多少誤字があっても問題ない。

TypeScriptでクイックソートするコードを教えてください

以下がTypeScriptでクイックソートを行うコードになります。


function quickSort(arr: number[], left: number, right: number): void {
  let pivot: number, partitionIndex: number;

  if (left < right) {
    pivot = right;
    partitionIndex = partition(arr, pivot, left, right);
  
    quickSort(arr, left, partitionIndex - 1);
    quickSort(arr, partitionIndex + 1, right);
  }
}

function partition(arr: number[], pivot: number, left: number, right: number): number {
  let pivotValue = arr[pivot],
      partitionIndex = left;

  for (let i = left; i < right; i++) {
    if (arr[i] < pivotValue) {
      swap(arr, i, partitionIndex);
      partitionIndex++;
    }
  }
  swap(arr, right, partitionIndex);
  return partitionIndex;
}

function swap(arr: number[], i: number, j: number): void {
  let temp = arr[i];
  arr[i] = arr[j];
  arr[j] = temp;
}

let arr = [3, 44, 38, 5, 47, 15, 36, 26, 27, 2, 46, 4, 19, 50, 48];

quickSort(arr, 0, arr.length - 1);
console.log(arr);

このコードは、配列arrをクイックソートし、結果をコンソールに出力します。

テストコードも教えてください

以下がテストコードになります。


describe("QuickSort", () => {
  it("should sort an array", () => {
    let arr = [3, 44, 38, 5, 47, 15, 36, 26, 27, 2, 46, 4, 19, 50, 48];
    let expected = arr.slice().sort((a, b) => a - b);

    quickSort(arr, 0, arr.length - 1);

    expect(arr).toEqual(expected);
  });
});

このテストコードは、配列arrをクイックソートした結果をJavaScriptの標準のsort関数でソートした結果と比較します。
また、Jestなどのテストランナーを使用して実行することで正常に動作を確認することができます。

テストコードも出力できるが正しい保証もないので最終的に検証は必要になる。

単純なスニペットだけでなくやり取りをしながら徐々にプログラムを作成するといったことも可能。
以下は『テーブルの行をクリックしたとき該当行のラジオボタンにチェックを入れる』といった処理を実装するときのやり取りになる。

Jqueryでid="sampletable"を持つテーブルのtrへクリックイベントを付与する方法は？

Jqueryでid="sampletable"を持つテーブルのtrにクリックイベントを付与するには、次のように記述します。

$("#sampletable tr").click(function(){
  // クリック時の処理
});

また、trタグに対してイベントを設定する場合、それらのtrタグが存在しない状態で設定してしまうと、イベントが発火しない可能性があるため、documentのreadyイベントを利用して、HTMLがロードされた後に設定することをお勧めします。

$(document).ready(function(){
   $("#sampletable tr").click(function(){
     // クリック時の処理
   });
});

また、jQuery 3.3.1以降では、on関数を使って、イベントを付与するのが推奨されています。

$(document).on("click","#sampletable tr",function(){
  // クリック時の処理
});

関数内でtdへアクセスするには

Jqueryでid="sampletable"を持つテーブルのtrにクリックイベントを付与した場合、関数内でそのクリックしたtr要素にアクセスするには、this キーワードを使用します。
これで、クリックしたtr要素にアクセスすることができます。
そして、その中のtd要素にアクセスするには、$(this).find("td") や $(this).children("td") などのjqueryメソッドを使用します。

$(document).on("click","#sampletable tr",function(){
  var tds = $(this).find("td");
  console.log(tds);
});

また、特定のtd要素にアクセスしたい場合は、index指定でアクセスすることができます。

$(document).on("click","#sampletable tr",function(){
  var td = $(this).children("td").eq(0);
  console.log(td);
});

上記の例ではtrをクリックした時に、そのtr内の第1個のtd要素が取得できる。

更にtd内のradiobuttonへアクセスするには

Jqueryで、クリックしたtr内のtd要素から、td内のradiobutton要素にアクセスするには、次のように記述します。

$(document).on("click","#sampletable tr",function(){
    var radio = $(this).find("td input[type='radio']");
    console.log(radio);
});

上記の例では、クリックしたtr要素内にある、input type='radio' の要素を取得しています。
また、特定の属性を持ったradio buttonにアクセスしたい場合は、属性セレクタを使用します。

$(document).on("click","#sampletable tr",function(){
    var radio = $(this).find("td input[type='radio'][name='group1']");
    console.log(radio);
});

上記の例では、クリックしたtr要素内にある、input type='radio' 且つ name='group1' の要素を取得しています。

これで、td内のradiobutton要素にアクセスすることができます。

Jqueryでradiobuttonにチェックを入れるには

Jqueryで、radiobuttonにチェックを入れるには、次のように記述します。

$("#radio-id").prop("checked", true);
上記の例では、id="radio-id" のradio buttonにチェックを入れています。
また、name属性を使って、グループ内のラジオボタンの中から特定のものを選択する場合は、次のように記述します。

$("input[name='group1'][value='option2']").prop("checked", true);
上記の例では、name='group1' の中で、value='option2' のラジオボタンにチェックを入れています。

もう一つの方法は、attr関数を使って、checked属性をつけることです。

$("#radio-id").attr("checked", "checked");
また、上記の例では、id="radio-id" のradio buttonにチェックを入れています。

注意点として、prop関数を使うと、checked属性がboolean値で扱われますが、attr関数を使うと、checked属性が文字列値で扱われます。

これで、radiobuttonにチェックを入れることができます。

注意点や複数の選択肢まで提示してくれる。

変換、トランスパイル

言語間で変換が可能。これもChatGPTの得意分野になる。
Java⇔PHPや、日本語⇔プログラム、英語⇔日本語、果てはORM⇔SQLまで相互変換可能。

以下のVBのコードをJavaに変換してください。

For i = 1 To 100
    If i Mod 3 = 0 And i Mod 5 = 0 Then
        Console.WriteLine("FizzBuzz")
    ElseIf i Mod 3 = 0 Then
        Console.WriteLine("Fizz")
    ElseIf i Mod 5 = 0 Then
        Console.WriteLine("Buzz")
    Else
        Console.WriteLine(i)
    End If
Next

for (int i = 1; i <= 100; i++) {
    if (i % 3 == 0 && i % 5 == 0) {
        System.out.println("FizzBuzz");
    } else if (i % 3 == 0) {
        System.out.println("Fizz");
    } else if (i % 5 == 0) {
        System.out.println("Buzz");
    } else {
        System.out.println(i);
    }
}

以下の仕様を満たす関数をJavaScriptで表現してください。
数列の最初の2つの数字は0、1で、それ以降のすべての数字は、それぞれの前の2つの数字を足した値になります。具体的には、数列は以下のようになります: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, ...
この関数は引数nを受け取り数列の中からn番目より5つの数字を出力するものとします。
例を挙げるとn=3のとき1, 2, 3, 5, 8と出力されます。

function getFibonacciSequence(n) {
    let fibonacciSequence = [0, 1];

    for (let i = 2; i <= n; i++) {
        fibonacciSequence.push(fibonacciSequence[i - 1] + fibonacciSequence[i - 2]);
    }

    return fibonacciSequence.slice(n-5, n);
}

ここで、 getFibonacciSequence 関数は、引数 n を受け取り、数列の中から n 番目より 5 つの数字を返すものです。最初の 2 つの数字は 0、1 で、それ以降の数字はそれぞれの前の 2 つの数字を足した値になります。
数列は0番目から始まるので、n=3 の場合、1, 2, 3, 5, 8 が出力されます。

うん、間違えてる。個人的にはやっと間違えたかという気持ちではある。
これはフィボナッチ数列についてChatGPTに聞いたあと回答を流用して問題っぽくでっち上げたものになる。
フィボナッチ数列であることは解釈しているらしいが不具合がある。

Express in JavaScript a function that satisfies the following specifications
The first two numbers in the number sequence are 0 and 1, and all subsequent numbers are the value of each preceding two numbers added together. Specifically, the number sequence will look like this: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, ...
The function takes an argument n and outputs the five numbers from the sequence, starting with the nth number.
For example, if n=3, the output will be 1, 2, 3, 5, 8.

function fibonacciSequence(n) {
  let fib = [0, 1];
  for (let i = 2; i < n + 5; i++) {
    fib[i] = fib[i-1] + fib[i-2];
  }
  return fib.slice(n-1, n+4);
}

You can call this function like this: fibonacciSequence(3)
This will return [1,2,3,5,8] as expected.

英語で質問する、そして具体的な出力例を提示することで精度が上がる。
質問文の調整とテスト検証が必要なこのレベルだと自分で組んでしまった方が良いかもしれない。
ただし明らかに脱初心者レベルくらいなら超えているし、この手の問題に慣れていない職業プログラマも結構時間がかかるであろうものを一瞬で出してくれる。

Appleの審査に必要なので以下のアプリの機能を説明するこなれた英文に書き換えてください
・AIを搭載したボイスアシスタントです
・日常会話や人生相談、また高度な専門分野についても質疑応答することが可能です
・高度な文章の認識機能を有します
・まるで人間のような言葉を話します

> Our app is a voice assistant equipped with AI technology, able to engage in everyday conversation, offer advice on personal matters, and provide informative responses to inquiries on specialized subjects. Additionally, it has advanced text recognition capabilities, and can communicate with users in a natural and human-like manner.

日本語に訳すとどうなりますか？

当社のアプリはAI技術を搭載したボイスアシスタントです。日常会話、人生相談、そして高度な専門分野についても質問に答えることができます。また、高度な文章認識機能も備えており、人間のような言葉でコミュニケーションをすることができます。

英語だと本当にこれで良いのか判断がつかないがDeepLやGrammarlyと組み合わせると良いらしい。
拙い英文によってリジェクトされるといったことが多少減るかもしれない。
それはそれとして恐らくこのアプリケーションはリジェクトされる。

以下のDoctrineのコードをSQLへ変換してください。

        $qb = $this->createQueryBuilder('p')
        ->select([
            'p.id as product_id',
            'p.name as product_name'])
        ->andWhere('p.id = :pId')
        ->andWhere('p.sample_flg = 0')
        ->setParameter('pId', $id)
        ->distinct();

SELECT DISTINCT p.id as product_id, p.name as product_name FROM products p WHERE p.id = :pId AND p.sample_flg = 0;

元はテーブル名の記述がないが良い感じに補完してくれている。

相談、アイデアだし、要件整理

あるテーマについてやりとりしながら自分の考えを整理するといった利用方法もある。
質問が曖昧だと一般論や微妙にごまかしが入った文章が返ってくるがもう少し突っ込むと何かしらヒントをくれる。

今年の目標を立てたい

今年の目標を立てることはとても重要です。目標を立てることで、自分が望む方向に向かって進むことができます。
目標はSMARTという原則に従って立てることをおすすめします。
SMARTは、Specific（具体的）、Measurable（計測可能）、Achievable（達成可能）、Relevant（関連性）、Time-bound（期限）の略です。
目標を立てる際は、それが具体的であり、計測可能であり、達成可能であり、自分にとって重要であり、そして期限が設定されていることを確認してください。

一般的なものでいいので15個ほど例をあげてください

1.体重を減らす
2.毎日運動する
3.食生活を健康的にする
4.睡眠時間を増やす
5.新しいスキルを学ぶ
6.読書量を増やす
7.旅行する
8.勉強会に参加する
9.スマホの使用時間を減らす
10.新しい趣味を見つける
11.ボランティア活動をする
12.貯金を増やす
13.カフェ巡りをする
14.ギターを習う
15.家族や友人との時間を増やす

上記のような目標が一般的であり、最適なものであるかはあなた次第です。目標は自分に合ったものを選ぶことが重要です。上記の例を参考にして、自分に合った目標を立てることができると良いでしょう。

n個例を挙げてくれといった問いはアイデア出しには非常に有効。

講義のアンケートを取ろうと思うんだけどどんな項目があるといいだろう？

講義のアンケートの項目は、様々な要素をカバーすることができます。

1.講義の内容：学生たちが理解できたかどうか、わかりやすかったかどうかなど。
2.講義の進め方：講義が進んでいくスピードや、使用された教材など。
3.講師の教え方：講師がわかりやすく説明してくれたか、理解しやすかったかなど。
4.学習環境：講義が行われる教室や、学習資料などが充実していたか。
5.その他：講義に対して意見や提案など。

このように様々な項目をカバーして、学生の視点から講義の評価を取ることで、今後の講義改善に役立てることができます。

もう少しいろいろ欲しい

はい、もう少し詳しいアイデアをご紹介します。

5.授業の難易度：学生たちがどの程度の挑戦をしているか、もしくは難しすぎないかを確認します
6.教材の質：使用された教材が適切だったか、役に立っていたか、もしくは改善の余地があるかを聞くことができます
7.学習サポート: 講義の外でのサポート、参考書、講義資料の提供などがあったか、もしくは必要だったかを聞くことができます
8.学習目標達成: 学生が講義を修了した後に、望んでいた学習目標が達成されたかどうかを聞くことができます
10.満足度: 最後に、講義全体に対して満足していたかどうか、もしくは何を改善すべきかを聞くことができます

これらのアイデアを参考に、学生の視点から講義の評価を取ることで、講義をより良いものにするための改善点を洗い出すことができます。

キャリアカウンセラーとして活躍してほしい。
あなたの仕事は、彼らのスキル、興味、経験に基づいて、どのキャリアに最も適しているかを決定するのを助けることです。
また、利用可能なさまざまなオプションについて調査し、さまざまな業界の求人市場の傾向を説明し、
特定の分野を追求するためにどの資格が有益であるかについてアドバイスする必要があります。
私の最初のリクエストは、「ソフトウェアエンジニアリングを極めるべきでしょうか？それともマネジメントスキルを磨くべきでしょうか？」です。

As a career counselor, my role would be to help individuals determine which career is most suitable for them based on their skills, interests, and experiences. I would also research available options and explain trends in the job market for various industries, and advise on which qualifications would be beneficial for pursuing a specific field. In response to your question about whether to focus on becoming a software engineer or developing management skills, it would depend on the individual's specific goals and interests. Both software engineering and management can lead to successful and fulfilling careers, and it ultimately depends on the person's strengths and career aspirations. I would recommend discussing this further with a career counselor to determine the best path for you.

日本語でお願いします

キャリアカウンセラーとして、私の仕事は、個人のスキル、興味、経験に基づいて、どのキャリアが最も適しているかを決定するのを助けることです。
また、利用可能なオプションを調査し、業界の求人市場の傾向を説明し、特定の分野を追求するために必要な資格についてアドバイスすることもあります。
あなたの質問に対して、「ソフトウェアエンジニアリングを極めるべきでしょうか？それともマネジメントスキルを磨くべきでしょうか？」については、個人のゴールや興味次第です。
ソフトウェアエンジニアリングやマネジメントは、成功し、充実したキャリアにつながりますが、それは個人の強みやキャリアアスピレーション次第です。
私はあなたには、これについてもっと詳しく話し合うために、キャリアカウンセラーに相談することをお勧めします。

どうすべきか悩んでいるのでヒントやきっかけになるような情報が欲しいです。

ソフトウェアエンジニアリングとマネジメントの両方について、深く学ぶことは、あなたのキャリアにおいて非常に有益である可能性があります。
それでも、あなたの興味や目標に合わせて、特に重点を置くべき領域を選択することが重要です。

ソフトウェアエンジニアリングに関しては、プログラミングスキルを磨き、技術的な知識を深めることが重要です。
また、新しい技術やツールに対応し、アプリケーションやシステムを設計・開発するスキルを身に付けることが大切です。

一方、マネジメントに関しては、チームを統率するためのスキルを身に付け、プロジェクトを遂行するための戦略を立てることが重要です。
また、コミュニケーション能力やリーダーシップを磨くことも大切です。

最終的には、あなたの興味や目標に合わせて、特に重点を置く領域を選択することが重要です。
それに加えて、仕事上でのスキルアップにも努力をし、業界のトレンドを継続的に学ぶことが必要です。

ソフトウェアエンジニアとしてのキャリアを極めるにはどうしたらいいですか

プログラミングスキルを磨く: より高度なプログラミング言語や技術を学び、実際にアプリケーションやシステムを開発する経験を積むことで、スキルを磨くことができます。

1.新しい技術に対応する: 業界は日々変化しており、新しい技術やツールが登場します。業界のトレンドを継続的に学ぶことで、最新の技術に対応し、競争力を高めることができます。
2.アーキテクチャやデザインパターンについて学ぶ: ソフトウェア開発において、アーキテクチャやデザインパターンは重要な役割を担います。それらについて学び、適切なアプローチを選択することができるようになることが重要です。
3.エンジニアリングプラクティスについて学ぶ: ソフトウェア開発において、品質管理、バグのトラッキング、テストなどのエンジニアリングプラクティスは重要な役割を担います。それらについて学ぶことで、効率的かつ品質の高いソフトウェア開発をすることができるようになります。
4.実際の経験を積む: 実際にアプリケーションやシステムを開発する経験を積むことで、学んだことを実践することができます。また、実際に問題に直面し、解決する経験を積むことで、臨機応変な対応力を身に付けることができます

マネージャとしてのキャリアを極めるにはどうしたらいいですか

マネージャとしてのキャリアを極めるためには、次のようなことをすることが重要です。

マネージメントスキルを磨く: チームを統率するためのスキル、プロジェクトを遂行するための戦略を立てること、コミュニケーション能力、リーダーシップなどを磨くことが大切です。
ビジネススキルを磨く: 経営戦略、財務管理、マーケティングなどのビジネススキルを磨くことで、組織全体を統合的に管理することができるようになります。
業界の知識を深める: 業界の知識を深めることで、市場動向や競争環境を理解し、組織を成功に導くための戦略を立てることができます。
ネットワーキングをする: 業界のリーダーや同業者と交流することで、新しいアイデアや知識を得ることができます。
経験を積む: 実際に組織を統治する経験を積むことで、臨機応変な対応力を身に付け、組織を成功に導くための戦略を立てることができます。

英語圏の情報からほぼまるパクリしてきたものだが、最初に立場や条件等をいろいろ指定してそれから質問に入るといった使われ方がされているようだ。

ChatGPTを紹介する記事を書きたいです。どんな構成がいいですか？

記事の構成について提案します。

1.ChatGPTの紹介
1.1 ChatGPTとは何かを簡潔に説明します。
1.2 使用方法や特長についても紹介します。

2.ChatGPTの背景
2.1 ChatGPTがどのような研究背景から生まれたかを説明します。
2.2 言語モデルについて一般的な知識を説明します。

3.ChatGPTの使用事例
3.1 ChatGPTがどのような用途で使用されているかを具体的な事例とともに説明します。

4 ChatGPTの未来
4.1 ChatGPTが将来どのように改善されるかを紹介します。
4.2 ChatGPTが将来どのように影響を与えるかについても述べます。

5.結論
5.1 ChatGPTについての総括を行います。
5.2 ChatGPTが将来どのような影響を与えるかを要約します。

これは危険。Googleの検索結果が更に汚染されてしまう...

DB設計

とりあえずたたき台が欲しいときに必要十分な回答が返ってくる。

ECサイト構築に必要なテーブル一覧を出力して

ECサイトに必要なテーブルとして、基本的には以下のようなものがあります。

会員(customers)
商品(products)
カテゴリ(categories)
注文(orders)
注文詳細(order_details)
配送先(shipping_addresses)
支払い(payments)
レビュー(reviews)
お問い合わせ(inquiries)
ただし、これらのテーブルだけでは不十分であり、特定のニーズに合わせてカスタマイズすることが必要です。

会員テーブルには何があればいい

会員(customers)テーブルには、会員情報を管理するための情報が必要です。
基本的な項目としては以下のようなものがあります。

会員ID(primary key)
ユーザー名
メールアドレス
パスワード
電話番号
住所
性別
生年月日
会員登録日
会員有効期限
会員ステータス(有効/退会済みなど)
これらのうち、会員ID、ユーザー名、メールアドレス、パスワードは必須項目となります。
また、会員情報を更新する際には、必ず個人情報保護に関する法律を遵守する必要があります。

各テーブルの詳細情報が出力されない場合は追加で質問するか、
「ECサイト構築に必要なテーブル一覧をカラム含めて出力して」といった具合に質問文に含めると良い。

ビデオ等の受講が可能な教育用のウェブアプリケーションが欲しい。必要なテーブル一覧を出力して。

下記のテーブルが必要です。

Usersテーブル：ユーザーの情報を格納するテーブル。名前、メールアドレス、パスワードなどが格納されます。
Coursesテーブル：コースの情報を格納するテーブル。コース名、講師名、開講日、説明などが格納されます。
Enrollmentsテーブル：ユーザーが受講しているコースの情報を格納するテーブル。ユーザーID、コースID、受講日などが格納されます。
Videosテーブル：ビデオのURL、タイトル、説明、コースIDなどが格納されます。
Quizzesテーブル：クイズの質問、選択肢、正解、コースIDなどが格納されます。
Quiz_resultsテーブル：ユーザーが受けたクイズの結果、クイズID、ユーザーID、得点などが格納されます。
※上記のテーブル名、カラム名、データ型は参考のために提供したものであり、適宜変更した方がよい場合もあります。

特に想定していなかったがQuizzesテーブルというものがあり受講後等の理解度チェックができるらしい。サービスとして提供するうえで組み込むのもアリかもしれない。といった具合で場合によっては意外な発見があるかもしれない。

注意点

妥当性の検証が必要
計算ができない
プログラムならテストすればいいが英文の場合は検証が難しい
正解が必要なものでネット上に答えがないものはNG
英語の方が精度が良いとのこと
○外秘の文章は入れないように。議事録投入したら多分要約してくれるが...
最新の情報に対応していない。2021時点のデータで学習している
1回のやり取りに10円程度。1日何百万とかかっているそうなので無料でのサービス継続は怪しい

まとめ

ChatGPTは

・簡単なスニペット（コード片）調べるときのGoogle検索の代替になりうる
・要件（考え）を整理するときの壁打ち要因になりうる
・理解力、読解力そして語学力、表現力に優れている
・回答内容は要検証
・「アウトプットが正しいかどうか判断できる」人しか使えない

出鱈目が混ざるという問題についてはプログラムであればテスト、検証すれば良い。そもそも正確性でいうとGoogle検索結果の1番目、2番目あたりとそんなに変わらない印象（おまけに端的でわかりやすい）
またアイデア出しについても正確性等よりも数が必要なのでこの2つに関しては特に有用。

印象として少し癖がある優秀な部下を手に入れた気分だ。

作業がとてもはやい
知識範囲が異常に広い
得意科目は国語、英語、プログラミング。苦手科目は数学、物理、歴史、時事など。文系か？
雑な指示でも何かしら返してくれる。おまけに何度手直しを要求しても文句一つない。複数選択肢を用意したりと結構気が利く。
知らないことは知ったかぶりをする性格なので最終的な判断はこちらでやらないといけない

といった具合だ。
特に後ろ3つに関しては以前AIに対して抱いていた印象と真逆ではないだろうか。なんというかすごく人間っぽい。そのあたりを勘違いして使えないと言っているケースが多いように感じる。

少なくとも私の仕事を無くしてくれそうないが、構文だけ覚えた未経験ソフトウェアエンジニアとかだとChatGPTが負ける要素が思いつかない。他業種の経験だとか将来性だとかいった強みとなりそうな部分すら怪しい。

特に理解力、読解力そして表現力が脅威的すぎる（本質的に理解、読解しているかは置いておいて）そうとうな割合の人間が負けてしまっている。

参考

https://github.com/f/awesome-chatgpt-prompts
https://qiita.com/sakasegawa/items/82069c97a1ee011c2d1e
https://anond.hatelabo.jp/20230106064104
https://riklog.com/research/chatgpt/
https://qiita.com/autotaker1984/items/5b5ac8c01d11fbbbc4a7
https://qiita.com/autotaker1984/items/c6769f9ea7f2df1fdeb5

APKからAndroidアプリを更新する実装

noreply@blogger.com (えむてぃ) — Mon, 24 Oct 2022 02:04:00 +0000

Intentを用いた（半）自動更新。
主な用途はGooglePlayを経由しない社内アプリなど。

Intent経由でインストーラ呼び出し

Intent経由でインストーラを呼び出せるのでこれを利用する。


// ファイルパス
val file: File = File(getExternalFilesDir(""), "test.apk")

// ファイルのURI
val uri: Uri = FileProvider.getUriForFile(
    applicationContext,
    BuildConfig.APPLICATION_ID + ".provider",
    file
)
// インストーラ呼び出し
val intent = Intent(Intent.ACTION_VIEW)
intent.setDataAndType(uri, "application/vnd.android.package-archive")
intent.flags =
    Intent.FLAG_GRANT_READ_URI_PERMISSION or Intent.FLAG_GRANT_WRITE_URI_PERMISSION
startActivity(intent)

基本的にデータタイプapplication/vnd.android.package-archiveへファイルのUriを渡してフラグに読み書き権限を付与すれば良い。
Intentに渡すファイルUriはFileProvider.getUriForFileを使用するがAndroid7以降からファイルアクセスの制限がキツくなったためアクセス許可が必要になる。

FileProviderを利用して一時的にアクセス許可をおこなう

FileProviderとはURI経由でアプリ間のファイルアクセスの許可をおこなう仕組み。
インストーラからAPKをインストールするにはAPKへアクセスできるようにする必要がある。

AndroidManifest.xml

application内に以下を追記。


<provider
    android:name="androidx.core.content.FileProvider"
    android:authorities="${applicationId}.provider"
    android:grantUriPermissions="true"
    android:exported="false">
    <meta-data
        android:name="android.support.FILE_PROVIDER_PATHS"
        android:resource="@xml/provider_path" />
</provider>

android:authoritiesはFileProvider.getUriForFileの第2引数と一致させること。
android:resourceのみ変更可能(↓で作成するファイル名を指定する)

app/src/main/res/xml/provider_path.xml

アクセス許可するディレクトリを指定する。


<?xml version="1.0" encoding="utf-8"?>
<paths xmlns:android="http://schemas.android.com/apk/res/android">
    <external-files-path name="name" path="./" />
</paths>

対象ディレクトリは大きく6種類。
https://developer.android.com/reference/androidx/core/content/FileProvider?hl=ja

files-path

Context.getFilesDir()で指定されるディレクトリ

cache-path

getCacheDir()で指定されるディレクトリ

external-path

外部ストレージのルートディレクトリ
Environment.getExternalStorageDirectory()で指定される。

external-files-path

外部ストレージのアプリのルートディレクトリ。
Context.getExternalFilesDir(null)で指定される。
具体的には
ログ出力した場合 /storage/emulated/0/Android/data/パッケージ名/files
Device File Explorerから確認した場合 /sdcard/Android/data/パッケージ名/files/
となる。
今回はこれを使用する。
外部雨ストレージの詳細については以下にまとめている
https://trueman-developer.blogspot.com/2022/09/android10kotlin.html

external-cache-path

外部ストレージのアプリのキャッシュディレクトリ。
Context.getExternalCacheDir()で指定される。
アプリ更新目的なら一時領域のこちらを使用する方が良いかもしれない。

external-media-path

アプリの外部メディア領域のルートディレクトリ。
Context.getExternalCacheDir()で指定される。
API21以降のみ。

nameは任意。
pathはサブディレクトリ名を指定する。ルート直下の場合は"./"を指定する。

以上でアプリアップデートの仕組みは実装可能。
初回のみ「この提供元のアプリを許可」を手動でオンにする必要がある。

参考

https://developer.android.com/reference/kotlin/androidx/core/content/FileProvider
https://developer.android.com/training/secure-file-sharing/setup-sharing?hl=ja
http://enjoy-rfid.blogspot.com/2019/03/google-playandroid.html
https://azunobu.hatenablog.com/entry/2019/06/27/120908
https://www.ninton.co.jp/archives/2745

Android10以降で共有ストレージに保存されたファイルの読み書きを実装したい（Kotlin）

noreply@blogger.com (えむてぃ) — Mon, 19 Sep 2022 13:40:00 +0000

バージョン毎にやり方が違う上に用途によってもやり方が違う。おまけにJava, Kotlinで分かれているせいでまともに調べられない。

やりたいこと
Android10以降で
Kotlinで
外部から(具体的に言うとWindowsPCからUSB経由でファイルのやり取り)ファイルのアクセスがしたい
ついでにShift-JIS対応

内部的にファイルを利用する

まずファイルのやりとりが発生せず内部的に保持するだけなら以下のコードでファイルの読み書きが可能。


        // ファイル読み込み
        // Charset.forName("MS932")でShift-jis読み込み。未指定の場合UTF-8
        applicationContext.openFileInput("test.txt").bufferedReader(Charset.forName("MS932"))
            .useLines { lines ->
                // 改行区切りで処理 空行無視
                for (line in lines) {
                    Log.i("develop:file", "line:$line")
                }
            }
            
        // ファイルの書き込み
        val filename = "test.txt"
        val fileContents = "Hello world!"
        applicationContext.openFileOutput(filename, Context.MODE_PRIVATE).use {
            it.write(fileContents.toByteArray())
        }

一応ファイルの中身を見ることは可能でパスは
/data/data/[アプリケーションのパッケージ名]/files でファイルの読み書きが可能。
ただしAndroidのDevice File Manager経由でかつDebug版のAPKからインストールしたアプリしか恐らく参照できない。

Android10以降で共有ストレージに保存されたファイルの読み書きを実装する

ユースケースとしては恐らく下記の「直接ファイルパスを使用するコードまたはライブラリからファイルにアクセスする」になる？わかりにくい。
https://developer.android.com/training/data-storage/use-cases?hl=ja#access-file-paths

パーミッションのリクエスト

Androoid10未満対応
アプリ固有ストレージを使用するので以下は完全に不要（一応メモを残しておく）


<application
    android:requestLegacyExternalStorage="true"

requestLegacyExternalStorageをtrueにすればAndroid10までは動作するが11以降が動かなくなる。

AndroidManifest.xml


    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
</manifest>

WRITEがあれば自動でREADも有効になる（今回は不要）

        if (checkSelfPermission(Manifest.permission.WRITE_EXTERNAL_STORAGE)
            == PackageManager.PERMISSION_GRANTED) {
            // Permission承認済み
            Log.i("develop", "外部読み書き可能")

        } else {
            // Permissionリクエスト
            requestPermissions(arrayOf(Manifest.permission.WRITE_EXTERNAL_STORAGE),
                1)
        }

コード上で権限をリクエストする場合AndroidManifest.xmlに記述する必要はない（今回は不要）

上記のやり方で/sdcard以下(Windowsから確認出来るディレクトリ全て)へ自由にアクセスできるようになる（ただし最大でAndroid10まで）
上記は古いバージョンの情報、あるいは用途が違う？そこまで調べてはいない。

ファイルへ書き込む（Android10以降）

Android10以降は特定のディレクトリ(/sdcard/Android/data/[パッケージ名])に対してデフォルトでアクセス権が付与されている。
https://developer.android.com/training/data-storage/app-specific#external
前置きが長くなったが要するに下記コードだけで良い。

// ファイルパス
val fileName = "text.txt"
val filePath = File(getExternalFilesDir(""), fileName)
Log.i("APPFilePath", filePath.absolutePath)

val fileContents = "Hello world!"
filePath.bufferedWriter().use {
    it.write(fileContents)
}

ファイルパスはコード(absolutePath)から表示した場合/storage/emulated/0/Android/data/[パッケージ名]/files/text.txt
Device File Explorerから確認した場合/sdcard/Android/data/[パッケージ名]/files/text.txt
Windowから確認した場合PC\[端末名]\内部共有ストレージ\Android\data\[パッケージ名]\files\text.txt となる。

getExternalFilesDirに引数を指定するとfiles以下にディレクトリが作成される。

ファイルを読みこむ

val filePath = File(getExternalFilesDir(""), fileName)
Log.i("APPFilePath", filePath.absolutePath)
filePath.bufferedReader(Charset.forName("MS932")).use {
    val text = it.readText()
    Log.i("FileRead", text)
}

filePath.bufferedReader(Charset.forName("MS932")) で引数を指定することで文字コードを指定して読み書き可能（デフォルトUTF-8）

アプリのインストール時にフォルダが作成される。
ファイルを該当箇所に配置した後にアプリインストールをおこなっても問題なく機能する。
アプリをアンインストールした場合、フォルダごと削除される。

まとめると
Androoid10以上は専用の領域が割り当てられるのでコード上で完結する。
Android9未満に対応する場合は従来通りパーミッションのリクエストが必要。

今回は『別のアプリで保存したファイルを読み書きする』といったことはしていない。
その他の方法を取りたい場合は以下のユースケースから（微妙に分かりにくい）
https://developer.android.com/training/data-storage/use-cases?hl=ja

わかってさえいれば簡単に出来るがここまでくるのが難しすぎる。

参考

アプリデータとファイル (公式)
https://developer.android.com/guide/topics/data?hl=ja

対象範囲別ストレージを使用する
https://qiita.com/irgaly/items/0ce450dd77bd54fb560a

パーミッションリクエスト
https://codechacha.com/ja/android-request-runtime-permissions/
ファイル読み書き方法
https://www.techiedelight.com/ja/write-to-file-kotlin/

Vue3を始めてみる

noreply@blogger.com (えむてぃ) — Sun, 01 May 2022 09:37:00 +0000

今更感はある。
出来ればあまり手を加えず公式のやり方に寄せておきたい。
以下の内容はVue2をある程度使用していたことを想定している。

Hello World

いくつか方法はあるが今回はViteで構築する。とりあえず動くところまで。
https://v3.ja.vuejs.org/guide/installation.html
Node.jsをインストール済のこと。

npm init vite@latest [プロジェクト名] --template vue
npm init vite@latest HelloVue3 --template vue

cd HelloVue3
npm install
npm run dev

http://localhost:3000/ へアクセス

エディタにVSCode、拡張機能にVolarをインストールすることが推奨されている。
さらに拡張機能の@builtin TypeScript and JavaScript Language Features を無効化すると型チェックが走るようになる

ソースコードを確認してみる

HelloVue3/src/main.js

htmlから読み込まれるjsファイル。少し記述が変わっている。

createApp(App).mount('#app')

HelloVue3/src/App.vue

目新しい記述として<script setup> 構文がある。

従来との違いとしてはscriptを先に記述できるようになり、それに伴い宣言した変数をtemplate内で使用できるようになっている。
<script setup lang="ts">とすることでTypeScriptでの記述が可能（ただし標準だとエディタ上のチェックのみ）
setup以外は従来と変わった部分は見受けられない。

HelloVue3/src/components/HelloWorld.vue

https://v3.ja.vuejs.org/guide/reactivity-fundamentals.html

const count = ref(0)

countが下記のtemplate(html)内で使用できるようになっている（Vue2まではreturnする必要があった）
refを外した場合初期値は設定されるが動的に変更することが出来なくなる。

アプリケーションをビルドするには？

npm run build

distファイルにビルド結果が出力される。
とりあえず事前知識としてはこの辺りまで。
後は必要に応じて適宜調べながらやるのが良さそう。

以降はVue3を始める上でいろいろ調べた内容。

何を使ってどうやって開発するか。開発時のオプション

https://v3.ja.vuejs.org/guide/installation.html

CDN or ホスト

サーバに処理を寄せる場合はこっち。

今まで通りVue CLIを使用する

npm install -g @vue/cli
vue create [project]

Vue2から手順を変えたくない場合選択肢の一つ。
今後新しい機能が追加されることはないという情報を見かけたがそんなことはなさそう？
Vue2,3を選択可能。
以下のオプションが選択可能。

 ◯ Babel
 ◉ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

PWA対応可能。
状態管理したい場合は
Saas等を使用する場合CSS Pre-processorsを有効化。
等々。

Vite

https://ja.vitejs.dev/

npm init vite@latest [プロジェクト名] --template vue

Vue CLIよりも高速とのこと。特にこだわりがなければこれで良いかもしれない
Vue専用というわけではなくReactも選択可能。
JSXがサポートされている。
Pinia(ルーティング)が利用できる。

Vue3新規機能

https://v3.ja.vuejs.org/guide/migration/introduction.html

Pinia

コンポーネント間の状態管理。
Vuexの代替。

Pinia

Viewとロジックの分離。

Teleport

用途はフルスクリーンのモーダル等。

参考

https://v3.ja.vuejs.org/
https://ja.vitejs.dev/
https://zenn.dev/ymgn____/articles/e7709e88948446
https://zenn.dev/azukiazusa/articles/676d88675e4e74

GCP Compute Engineのf1-microは無料枠ではなくなった

noreply@blogger.com (えむてぃ) — Sat, 02 Oct 2021 10:28:00 +0000

そのままだと月￥600程度課金されてしまう（された）
代わりにe2-microを使用する。

一度VMを停止すれば編集からインスタンスが変更できる。

スペック自体は上がっているのでまあ。

参考

https://cloud.google.com/free/docs/gcp-free-tier?hl=ja#free-tier https://seiribako.net/2021/08/14/gcp%E3%81%AEvm%E3%82%BF%E3%82%A4%E3%83%97%E3%82%92f1-micro%E3%81%8B%E3%82%89e2-micro%E3%81%B8%E5%A4%89%E6%9B%B4/

DockerイメージはDistrolessを使えということだったので

noreply@blogger.com (えむてぃ) — Wed, 10 Mar 2021 08:44:00 +0000

じゃあ具体的にどうする？どうした？っていう話。
言語はNode.js.

変更前のDockerfile(alpine)

FROM node:12-alpine
COPY example /example
COPY app.js .
COPY package*.json ./
RUN apk add git
RUN npm install --production
RUN apk update \
  && apk add --no-cache curl fontconfig \
  && curl -O https://noto-website.storage.googleapis.com/pkgs/NotoSansCJKjp-hinted.zip \
  && mkdir -p /usr/share/fonts/NotoSansCJKjp \
  && unzip NotoSansCJKjp-hinted.zip -d /usr/share/fonts/NotoSansCJKjp/ \
  && rm NotoSansCJKjp-hinted.zip \
  && fc-cache -fv

EXPOSE 3000

CMD node app.js

実際に運用する場合あまりシンプルなDockerfileにはならないんじゃないだろうか？
上記例だとnode_moduleにgitに依存しているものがある + 実行に日本語フォントが必要で追加でインストールしている。

変更前のDockerfile(distroless)

FROM node:12 as builder
WORKDIR /work
COPY example /example
COPY app.js .
COPY package*.json ./
RUN npm install
RUN apt-get update \
  && apt-get install curl fontconfig \
  && curl -O https://noto-website.storage.googleapis.com/pkgs/NotoSansCJKjp-hinted.zip \
  && mkdir -p /usr/share/fonts/NotoSansCJKjp \
  && unzip NotoSansCJKjp-hinted.zip -d /usr/share/fonts/NotoSansCJKjp/ \
  && rm NotoSansCJKjp-hinted.zip \
  && fc-cache -fv

FROM gcr.io/distroless/nodejs:12
COPY example /example
COPY app.js .
COPY package*.json ./
COPY --from=builder /work/node_modules /node_modules
COPY --from=builder /usr/share/fonts/NotoSansCJKjp /usr/share/fonts/NotoSansCJKjp

EXPOSE 3000

CMD ["app.js"]

distrolessはShellやaptなどがないため追加でモジュールのインストール等が出来ない（正確には出来ないこともないかもしれないが面倒）
マルチステージビルドを使用してビルド後の必要なファイルをコピーするといったアプローチを取る。
マルチステージビルドについて少しざっくり説明するとas hogehogeで名前を付けたDockerイメージは後で使用することができる。最終的なイメージサイズには影響がない。
COPY --from=builder builderのパス実行環境のパスでコピーができる。

最初ビルド用のDockerをnode:12-alpineにしていたがどうもdistrolessとベースイメージが異なるらしく(互換性がない)場合によっては実行時にエラーになる。
具体的にはSharpでエラーが発生した。

Error: 'linuxmusl-x64' binaries cannot be used on the 'linux-x64' platform. Please remove the 'node_modules/sharp' directory and run 'npm install' on the 'linux-x64' platform.

node:12-alpine → node:12に変更した場合、apkをaptに変更する必要がある(gitはデフォルトで入っているらしい)
CMDはデフォルトでnode.jsなのでアプリの起動はファイル名を指定するだけで良い。CMD node app.js は動作しない。

ビルドイメージのサイズについて

node:12-alpine+α
214MB
↓
gcr.io/distroless/nodejs:12 
221MB

それなりに増えると思っていたが思ったほどでもなかった。
対応が面倒で放置していた軽微なセキュリティリスクも0件になっている。

参考

https://blog.inductor.me/entry/alpine-not-recommended

PostgreSQLでカラム名を任意の位置に追加する

noreply@blogger.com (えむてぃ) — Tue, 16 Feb 2021 15:13:00 +0000

バックアップして削除して作り直してリストアする。

logテーブルを例に挙げる

CREATE TABLE log ( log_id SERIAL NOT NULL, customer_id varchar(32) NOT NULL, message TEXT DEFAULT '', created_at timestamp NOT NULL, PRIMARY KEY (log_id) ) ;

customer_idの下にtitle varchar(32) NOT NULLを追加する。

対象テーブルのバックアップを作成

テーブル名だけ変更したテーブルを作成する。
データの中身だけ保持しておきたいので、インデックスやコメント等は不要。
主キー、外部キーも不要。

CREATE TABLE log_bk ( log_id SERIAL NOT NULL, customer_id varchar(32) NOT NULL, message TEXT DEFAULT '', created_at timestamp NOT NULL, PRIMARY KEY (log_id) ) ;

バックアップテーブルへ全データコピー

Insert Into log_bk ( Select * From log )

元のテーブルを削除

Drop Table log;

外部キー等を設定している場合は該当テーブルのバックアップを取っておくか一時的に外部キー制約を削除する。
特にON DELETE CASCADEを指定している場合は注意が必要。まとめて消えてしまう。

変更後のテーブルを再作成

CREATE TABLE log ( log_id SERIAL NOT NULL, customer_id varchar(32) NOT NULL, title varchar(32) NOT NULL, message TEXT DEFAULT '', created_at timestamp NOT NULL, PRIMARY KEY (log_id) ) ; create index log_customer on log ( customer_id ); COMMENT ON TABLE log IS 'ログ';

主キー、外部キー、インデックス等も含むこと。

データリストア

Insert Into log ( Select log_id, customer_id, '' As title, message, contents, created_at From notice_log_bk )

外部キー制約を元に戻す。

バックアップ削除

Drop Table log_bk;

シーケンスの更新

以降は補足。
SERIAL型を使用している場合Sequenceが1に戻っている（追加時に連番が1から始まる）ので必要に応じて更新する。

シーケンス名確認

シーケンスの命名規則はテーブル名+カラム名+seqを_でつないだ形。

SELECT col.column_name , col.data_type , col.column_default FROM information_schema.columns col WHERE col.table_name = 'log'

col.table_name = 'log'でテーブル名を指定。
column_default値にシーケンス情報が載っている。
nextval('log_log_id_seq'::regclass)といった値が確認できる。
その他pgadminなどでCreate文を確認するとSERIALがシーケンスを使用するように置き換わっている。

シーケンス値確認

select nextval('log_log_id_seq');

取得できた値でシーケンス値を更新すれば良い。

その他シーケンスの更新値確認(元のテーブルを削除した場合など)

うっかり元のシーケンスがわからなくなってしまっても現在の連番の最大値+1でシーケンスを更新すれば問題はなくなる。

SELECT * FROM public.log ORDER BY log_id Desc;

SERIAL型のカラムの最大値+1を設定すれば良い。

シーケンス値更新

ALTER SEQUENCE log_log_id_seq RESTART WITH 3036;

参考

https://wiki.postgresql.org/wiki/Alter_column_position/ja#.E5.88.97.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.97.E3.83.87.E3.83.BC.E3.82.BF.E3.82.92.E7.A7.BB.E5.8B.95

Node.jsでsvgからpngに変換したい場合はsharpを使用する

noreply@blogger.com (えむてぃ) — Wed, 10 Feb 2021 08:51:00 +0000

svgexportは依存しているPhantomJSが開発終了したので使わない方が良いらしい
→ 今はPuppeteerを使用しているらしい。どっちでも良い？

サンプル

sharpをインストール

npm i sharp

サンプルコード。説明の必要もないように思える。実行するとsrc.svgが変換されてdest.pngが出力される。


const sharp = require("sharp")
// convert
sharp("src.svg")
  .png()
  .toFile("dest.png")
  .then((info) => {
    console.log(info)
  })
  .catch((err2: any) => {
    console.log(err2)
  })

参考

https://coderrocketfuel.com/article/convert-svg-to-png-using-node-js-and-sharp
https://github.com/lovell/sharp

Expressでpath must be absolute or specify root to res.sendFileが発生する

noreply@blogger.com (えむてぃ) — Sat, 03 Oct 2020 13:56:00 +0000

res.sendfile(小文字)が非推奨になったので変更したら発生した。
ローカル(Mac)だと動くのに本番(Linux)だと動かなかったりと結構面倒。
対応策は絶対パスにしてpathを使用する。

res.sendFile("./dist/index.html")

↓

import * as path from "path"

res.sendFile(path.join(__dirname, "/../dist/index.html"))

誤ってアプリケーションディレクトリ外の不正なパスが指定されないようにということらしい。
小文字と大文字の違いしかないのは命名ミスってる気がしなくもない。

Dockerでnode:12-alpineを指定したときにnpm ERR! syscall spawn git

noreply@blogger.com (えむてぃ) — Sun, 20 Sep 2020 14:56:00 +0000

gitを入れるように指定すればOK。

今回のケースだとおそらくnpm install時にgitを使用しようとしてエラーになっている。
alpineにはデフォルトで git が入っていないらしい。
gitを使用する前に RUN apk add git を追記する。

参考

FROM node:12-alpine
COPY src /srf
...

RUN apk add git
RUN npm install

EXPOSE 3000

CMD node app.js

alpineに変えることで
408.75 MB → 111.72 MBに減ったがそれだけ必要かもしれないものが減っているわけで...