storybookなど複数ライブラリが同時にアップデートされる際に一つ一つマージしていくのが大変でした。
renovateを使えばその辺りのライブラリを一つのプルリクエストでできるため便利そうです。

参考

Renovate を使ってほぼ完全自動で依存パッケージをアップデートする
「プロダクト間共通の React コンポーネントライブラリ」がどうなったか、という話 - SmartHR Tech Blog

Renovateの設定

renovate.json

{
  "extends": ["github>kufu/renovate-config"]
}

Dependabotの無効化

いったんopen-pull-requests-limitを0にすることによって、いったん様子も見たいためdependabot.ymlは残しつつ無効にするようにしました。

open-pull-requests-limit: 0

• algoliasearch

package.json

  "scripts": {
    "generateMdxToAlgolia": "node ./src/utils/server/generateMdxToAlgolia",
  },

build時に、合わせて実行するようにしておくと良いでnpす。

.env

SITE_DOMAIN=サイトのドメイン
NEXT_PUBLIC_ALGOLIA_APPLICATION_ID=AlgoliaアプリケーションID
ALGOLIA_ADMIN_API_KEY=Algolia管理APIキー
NEXT_PUBLIC_ALGOLIA_INDEX=Algoliaインデックス

generateMdxToAlgolia

const path = require('path');
const fs = require('fs');
const algoliasearch = require('algoliasearch');

const postDir = path.join(process.cwd(), `src/log`);

const generateMdxToAlgolia = async () => {
  if (
    !process.env.SITE_DOMAIN ||
    !process.env.NEXT_PUBLIC_ALGOLIA_APPLICATION_ID ||
    !process.env.ALGOLIA_ADMIN_API_KEY ||
    !process.env.NEXT_PUBLIC_ALGOLIA_INDEX
  ) {
    return;
  }

  const htmlTagRegex = /<("[^"]*"|'[^']*'|[^'">])*>/g;

  const objects = fs
    .readdirSync(`${postDir}/`)
    .filter((file) => {
      return path.extname(file).toLowerCase() === '.mdx';
    })
    .map((path) => {
      const fileName = path.replace(/\.mdx$/, '');
      const text = fs.readFileSync(`${postDir}/${path}`, 'utf8');
      const title = text.match(/title: (.*)/);
      const description = text.match(/description: (.*)/);

      return {
        objectID: fileName,
        type: 'log',
        title: title ? title[1] : '',
        description: description ? description[1] : '',
        url: `https://${process.env.SITE_DOMAIN}/log/${fileName}`,
        content: text.replace(htmlTagRegex, '').replace(/\r\n|\r|\n/g, ' '),
      };
    });

  const client = algoliasearch(
    process.env.NEXT_PUBLIC_ALGOLIA_APPLICATION_ID,
    process.env.ALGOLIA_ADMIN_API_KEY
  );
  const index = client.initIndex(process.env.NEXT_PUBLIC_ALGOLIA_INDEX);
  await index.saveObjects(objects, { autoGenerateObjectIDIfNotExist: true });
};

generateMdxToAlgolia();

• objectIDは、ファイル名を使用
• titleとdescriptionは、mdxファイルのfrontmatterの記述方法を想定しています。

実行方法

NEXT_PUBLIC_ALGOLIA_APPLICATIO_IDN=${APPLICATIO_IDN} ALGOLIA_ADMIN_API_KEY=${ALGOLIA_ADMIN_API_KEY} NEXT_PUBLIC_ALGOLIA_INDEX=${ALGOLIA_INDEX} SITE_DOMAIN=${SITE_DOMAIN} npm run generateMdxToAlgolia

NEXT_PUBLICとなっているのは、Nextで使用するものも含まれているため共通で使えるようにしています。

• algoliasearch
• remove-markdown

package.json

  "scripts": {
    "generateMicroCmsToAlgolia": "node ./src/utils/server/generateMicroCmsToAlgolia",
  },

build時に、合わせて実行するようにしておくと良いです。

.env

MICROCMS_SERVICE_DOMAIN=MicroCMSのドメイン
MICROCMS_API_KEY=MicroCMSのAPIキー
SITE_DOMAIN=サイトのドメイン
NEXT_PUBLIC_ALGOLIA_APPLICATION_ID=AlgoliaアプリケーションID
ALGOLIA_ADMIN_API_KEY=Algolia管理APIキー
NEXT_PUBLIC_ALGOLIA_INDEX=Algoliaインデックス

generateMicroCmsToAlgolia

const axios = require('axios').default;
const removeMd = require('remove-markdown');
const algoliasearch = require('algoliasearch');

const getMicroCMSdata = async (name, limit, query) => {
  const url = `https://${process.env.MICROCMS_SERVICE_DOMAIN}.microcms.io/api/v1/${name}`;
  const apiKeyHeaderOption = {
    headers: { 'X-API-KEY': process.env.MICROCMS_API_KEY },
  };

  const getUrlOption = (number, url) => {
    return url + `?limit=${number}${query || ''}`;
  };

  const getTotalCountUrl = getUrlOption(0, url);
  const totalCountUrlData = await axios
    .get(getTotalCountUrl, apiKeyHeaderOption)
    .then((r) => r.data);
  const { totalCount } = await totalCountUrlData;

  const getContentUrl = getUrlOption(limit || totalCount, url);
  const contentUrlData = await axios
    .get(getContentUrl, apiKeyHeaderOption)
    .then((r) => r.data);
  const data = await contentUrlData;

  return data;
};

const generateMicroCmsToAlgolia = async () => {
  if (
    !process.env.MICROCMS_SERVICE_DOMAIN ||
    !process.env.MICROCMS_API_KEY ||
    !process.env.SITE_DOMAIN ||
    !process.env.NEXT_PUBLIC_ALGOLIA_APPLICATION_ID ||
    !process.env.ALGOLIA_ADMIN_API_KEY ||
    !process.env.NEXT_PUBLIC_ALGOLIA_INDEX
  ) {
    return;
  }
  const { contents: entries } = await getMicroCMSdata(
    'entries',
    999,
    '&orders=-publishedAt&fields=id,title,categories.label,categories.value,tags.label,tags.value,publishedAt,image,description,body'
  );

  const htmlTagRegex = /<("[^"]*"|'[^']*'|[^'">])*>/g;

  const objects = entries.map((entry) => {
    return {
      objectID: entry.id,
      url: `https://${process.env.SITE_DOMAIN}/entry/${entry.id}`,
      title: entry.title,
      description: entry.description,
      tags: entry.tags,
      categories: entry.categories,
      content: entry.body
        .map((v) => {
          const commentValue = v;
          if (v.fieldId === 'comments') {
            return commentValue.comments
              .map((v) => `${v.name ? `${v.name}: ` : ''}${v.text}`)
              .join('');
          }

          if (v.fieldId === 'html') {
            return v.value.replace(htmlTagRegex, '');
          }

          if (v.fieldId === 'markdown') {
            return removeMd(v.value);
          }

          if (v.fieldId === 'richeditor' && v.value) {
            return v.value.replace(htmlTagRegex, '');
          }
        })
        .join('')
        .slice(0, 3200), // 数が多いAlgoliaの無料版の文字制限に引っかかってしまうため制限しています
    };
  });

  const client = algoliasearch(
    process.env.NEXT_PUBLIC_ALGOLIA_APPLICATION_ID,
    process.env.ALGOLIA_ADMIN_API_KEY
  );
  const index = client.initIndex(process.env.NEXT_PUBLIC_ALGOLIA_INDEX);
  await index.saveObjects(objects, { autoGenerateObjectIDIfNotExist: true });
};

generateMicroCmsToAlgolia().catch((error) => {
  console.error(error);
});

これは、このブログのfieldをもとに制作しています。fieldIdやentryの項目については それぞれのMicroCMSの設定に合わせてください。

実行方法

MICROCMS_API_KEY=${MICROCMS_API_KEY} MICROCMS_SERVICE_DOMAIN=${MICROCMS_SERVICE_DOMAIN} NEXT_PUBLIC_ALGOLIA_APPLICATIO_IDN=${APPLICATIO_IDN} ALGOLIA_ADMIN_API_KEY=${ALGOLIA_ADMIN_API_KEY} NEXT_PUBLIC_ALGOLIA_INDEX=${ALGOLIA_INDEX} SITE_DOMAIN=${SITE_DOMAIN} npm run generateMicroCmsToAlgolia

NEXT_PUBLICとなっているのは、Nextで使用するものも含まれているため共通で使えるようにしています。

VscodeでChatgGPT Genie使ってgit diffだしてそれにたいしてコミットメッセージ書いてもらうと便利かも。 pic.twitter.com/ij337aDVmS

GPT-3.5系を使うとあまりうまくレビューしてくれないことが多かったです。GTP-4を使いましょう。

それでも完璧なレビューをしてくれるとは限らないので参考程度に考えるとよかなと思います。

-U10で前後の変更箇所を広げて、diff.txtに吐きだす

git diff  -U10 > ./tmp/diff.txt

広げておくと、周りの情報を加味したコミットメッセージを作ってくれます。 コミットの内容にもよるので、-U10の部分はそのときどきで変更してください。

吐き出し先はtmpとしています。tmpフォルダは作っておかないとエラーになります。

vscodeのユーザー設定にGenieのカスタムプロンプトを追加する

commit messageを書いてもらう

"genieai.promptPrefix.customPrompt1": "あなたはプロのエンジニアです。今回の変更・追加箇所に対してコミットメッセージを日本語で考えてください",
"genieai.promptPrefix.customPrompt1-enabled": true,

genieai.promptPrefix.commit-messageにお願いする

こちらが追加になっているようです。 プロジェクトに合わせて書き換えることにより。適切なコミットメッセージをかいてくれます。

  "genieai.promptPrefix.commit-message": "Suggest a precise and informative commit message based on the following diff. Do not use markdown syntax in your response.\nPlease do not enclose your message in double quotes.\n日本語でお願いします。\n"

右のカミナリマークのアイコンをクリックすることでコミットメッセージを生成してくれます。

レビューをしてもらう

"genieai.promptPrefix.customPrompt2": "あなたはプロのエンジニアです。今回の変更・追加箇所に対して日本語でレビューを行ってください",
"genieai.promptPrefix.customPrompt2-enabled": true,

英語が良い場合は日本語での部分を消すなどすると良いかと思います。

promptは完璧なものではないと思うので、うまくいかない場合や、さらによいpromptがある場合は差し替えて使ってください。（教えてくれたらさらに嬉しいです）

レビューしてほしい観点をさらに細かく書いておくと、それあわせて詳細に書いてくれます。

前提: 
* プロのフロントエンドエンジニアです。
* これからレビューを行うという視点で、diffの解析を行なってください。
* 今回の変更・追加箇所を意識してください。
* コードの説明は不要です。
* 問題がない旨の記載不要です。
* 全体のコードの記載は不要です。

変更に対して、下記の観点でレビューを行なってください。
* コードエラーの確認
* 文法エラーの確認
* 単語、タグ名、属性名のミスの確認
* より良いコード、リファクタの提案
* より良い関数名の提案
* 閉じタグの有無

日本語で記載してください。

使い方

customPromptを追加すると、他と同様左クリックに表示されるので、テキストを選択してからGenie: Custom prompt 1 or 2を選択してください。

ほかのpromptも日本語化しておくと便利

"genieai.promptPrefix.addTests": "次のコードに対するテストを実装してください",
"genieai.promptPrefix.findProblems": "次のコードの問題点を見つけてください",
"genieai.promptPrefix.optimize": "次のコードを最適化してください",
"genieai.promptPrefix.explain": "次のコードを説明してください",
"genieai.promptPrefix.addComments": "次のコードにコメントを追加してください",
"genieai.promptPrefix.completeCode": "次のコードを完成させてください",

参考

VSCode 拡張機能 ChatGPT - Genie AI を使用するための下準備。モデル選択や日本語化等（Windows版 gpt-4対応) - Qiita

まとめ

copilotやchatgptの進化も早いので、今後この辺りもサクッと気軽にできる時代になってくるとは思います。 現状の一つのやり方の提案として。

modalを作るときは、dialogタグで作ると良さそうです。
いろいろなことを考慮してくれます。

dialogの特徴

• dialog.showModal();で開く。dialog.close();で閉じる
  • showModalを使った場合
    • aria-modal="true"を考慮してくれる
    • inertの実装はブラウザが提供しているため、気にしなくて良い。
    • escを押したら閉じる
    • :modal 擬似クラスを使える
  • 一方 <dialog> が show() 、または open 属性を使用して表示されたり、<dialog> の既定の display を変更した場合は aria-modal="false" として表示されます。
• role="dialog"と同じ仕様でブラウザが提供する
• ::backdropを使って背景色を変更できる。

dialog内のformの特徴

• <form method="dialog">を使うと良い
  • typeなしの<button>は基本閉じられる、type="button"は閉じないその場合はformmethod="dialog"をつけておいても閉じる。
• dialog.close();時に、引数に値を渡すとdialogのcloseのeventでdialog.returnValueを取得できる。
• autofocusなるべく指定しておく
  • 指定しない場合はブラウザ判断で、最初のform要素にfocusされる
• tabindex 属性を <dialog> 要素で使用してはいけない

ARIA: dialog ロールについて

https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA/Roles/dialog_role

• aria-labelledby、aria-describedbyについては「<dialog>: ダイアログ要素」で記述を見つけられなかった。

引用元: https://developer.mozilla.org/ja/docs/Web/HTML/Element/dialog

dialogの背景をクリックで閉じるための工夫

• dialog.getBoundingClientRectを使うことで、modalの領域外を判断して閉じる方法。
• event.target.closestをつかってnullかどうかを判断して閉じる方法

具体的には下記サイトに記載しています。

参考

• HTMLのdialog要素の背景をクリックしてdialog要素を閉じる方法 - Qiita
• <dialog>要素に「ダイアログの外側クリックで閉じる」処理の追加

modalを開いてる時にstyleを当てる

body:has(dialog:modal)

hasを使うとmodalが開いてるかどうかでstyleを指定できる

:modal 擬似クラスと :has 擬似クラスを使用することで、モーダルが表示されているときにだけスタイルを指定することが可能になります。

• dialog 要素と :modal 疑似クラスでモーダルを作る | DevelopersIO

使えるブラウザ

• Dialog element | Can I use... Support tables for HTML5, CSS3, etc

参考

• 実装しながら理解するモーダルのアクセシビリティ with React
• アクセシブルなダイアログに必要なこと
• Dialogタグの使い方をしっかり理解モーダルを作成してみよう
• モーダルウィンドウのコンテナ要素に aria-modal 属性を適用する | Accessible & Usable

まとめ

ブラウザも主要な最新は対応してるので、inertやroleなどの考慮もブラウザ任せにできるので
modal系にはdialogを使っていくのが良いかなと思います。

共通HTML

<div class="header">
 <h1 class="title">Title</h1>
 <ul class="gnav">
  <li class="gnav-item"><a href="">menu1</a></li>
  <li class="gnav-item"><a href="">menu2</a></li>
  <li class="gnav-item"><a href="">menu3</a></li>
 </ul>
</div>

共通gnav CSS

.gnav {
  grid-area: gnav;
  display: flex;
  gap: 12px;
  justify-content: end;
  width: 100%;
}
.gnav-item {
  list-style-type: none;
}
.gnav a {
  padding: 16px;
  display: grid;
  height: 100%;
  align-items: center;
  background-color: rgba(255,255,255, 0.2);
  transition: background-color 0.1s ease-in;
  border-radius: 8px;
  cursor: pointer;
}
.gnav a:hover {
  background-color: rgba(255,255,255, 0.1);
}

共通ヘッダーCSS

.header {
  margin: 0 0 16px 0;
  padding: 16px;
  background-color: #333;
  color: #fff;
  display: grid;
}

タイトル中央寄せのCSS

.header {
  grid-template:
   ". title gnav" auto / 
   1fr auto 1fr;
}

.title {
  grid-area: title;
  padding: 16px;
  place-self: center;
  font-size: 20px;
}

grid-templateを使い、1行3列のgridを作成しています。
grid-areaを使い真ん中にtitle、右側にgnavを表示するようにしています。

このようにすることで、titleの配置を画面の中央寄せにしつつgnavを右側に持ってくることができます。
従来では、gnavをposition: absolute;で右上に持ってくるなど、工夫する必要がありました。

タイトルとナビゲーションを合わせて最大幅をきめて中央寄せ

.header {
  grid-template:
    ". header gnav ." auto / 
    1fr minmax(auto, 700px) minmax(auto, 300px) 1fr;
  place-items: center start;
}

.title {
  grid-area: header;
  padding-right: 16px;
  font-size: 20px;
}

titleとgnavを合わせて中央寄せにしたい場合HTMLを変更して、titleとgnvをdivで囲ってあげれば、工夫せずともできるかとは思いますが。
わざわざdivで囲わずとも、1行4列のgridを作成して、真ん中二つの足した値を最大幅になるように設定することでレイアウトを再現することができます。

参考

• alingとjustifyのプロパティ一覧と概要
• gridレイアウトについて調べました【CSS/grid-template/auto-fit/auto-fill】 | えむ家のメモ帳

Gridについてはこちらの記事を参考に勉強させていただきました。

• [詳説] CSSグリッドレイアウトで使うプロパティ一覧

まとめ

grid使うと今まで苦労していたレイアウトが、作りやすくなるのでよいですね。
gridはまだまだ今後進化していきそうなので、さらにどんどんレイアウトしやすくなってくるので楽しみですね！

下記記事あたりを参考にさせていただきました。
Node.js と Deno と Bun のどれを使えばいいのか
【Bun】新しいJavaScriptランタイムについてふわっとまとめた

インストール

インストールについては下記
https://bun.sh/docs/installation
https://github.com/oven-sh/bun#install
手法は下記

• curl
• npm
• homebrew
• docker
• proto

Nextアプリを作る

bunを使ってnext.jsアプリを作ってみましょう
下記のように実行するとnextのアプリを作成することができます。

bun create next ./app_next

下記でアプリを立ち上げる

cd ./app_next
bun dev

なぜかこれを実行すると、下記のようなエラーがでて動きませんでした。。

fallback.development.tsx:1     Failed to load resource: the server responded with a status of 404 (Not Found)
localhost/:1     Failed to load resource: the server responded with a status of 500 (ERR)

下記にヒントになりそうな内容がありましたがうまく動きませんでした..
bun devでNext.jsが実行される仕組みを調べる

Bun x Nextだと使えない機能がありそう？

https://github.com/softwarearchitect817/Bun-fast-JavaScript-runtime#using-bun-with-nextjs
少し古いものですが、使えない機能があるかもしれません。

とりあえず動くようにしてみる
package.jsonに下記を追加してnext devで実行する。

  "scripts": {
    "dev": "next dev",
    "start": "next start",
    "build": "next build"
  },

bun run dev

この形で実行すると動作しました。（これでよいのかなぁ。。）

Reactアプリを作る

bun create next ./app_react

cd app_react
bun run dev

reactの場合はすんなり動かすことができました。

bun createを実行して、createできる一覧を表示

Welcome to bun! Create a new project by pasting any of the following:  
bun create apollo-server ./apollo-server-app
bun create bun-bakery ./bun-bakery-app
bun create discord-interactions ./discord-interactions-app
bun create elysia ./elysia-app
bun create elysia-buchta ./elysia-buchta-app
bun create hono ./hono-app
bun create kingworld ./kingworld-appapp
bun create preact ./preact-app
bun create react ./react-app
bun create react-ssr ./react-ssr-app
bun create svelte-kit ./svelte-kit-app
bun create websi ./websi-app

svelte-kitアプリを作る

bun create svelte-kit ./svelte-kit-app

実行すると下記のように言われますが、なぜかこれを実行しても立ち上がりませんでした。

# To get started, run:
  cd svelte-kit-app
  bun run main.ts

bun run dev

と実行すると立ち上げることができました。

bun createについて

https://bun-docs.pages.dev/en/bun_create/
bun createについては、用意されているものに加えて、自分で用意したテンプレートも作ることができるようです。
この辺り自分用にやりやすいようにできるのは便利そうです。

まとめ

bunを使ったら、サクッと実行速度早く、簡単にアプリの実装開始できるのかなーと思ったのですが
まだバージョンが1になっていないというところもあって、不安なところ少しあるかなと思いました。

脳死で開発にすぐ入れる状態が作れたら嬉しいなぁと思いつつ。
今後のバージョンアップにも期待したいですね。

追記

下記をtwitterでつぶやいたところ、開発者の方から返信いただきました。
どうやら非推奨のようです。現在より良い改善を行う予定とのこと！
9月にはどうやら1系のバージョンがでるようなので楽しみにしておこうと思います！
そのときにまたガッツリ触ってみる予定。

https://t.co/RfjJsUv33k

動かないんだけど..

bun create next ./app
で作れるところまではいけるのに
bun devで色々怒られる..

bun create react ./app
bun ./dev.tsxでおいてあるdevファイルを読みに行ったら動いたけども..nextの場合はそれがどこに。。

そもそもbun devの挙動なんなん。。

謎

— kame (@kamem) July 26, 2023

We will do another revision of it that is much better

— Jarred Sumner (@jarredsumner) July 27, 2023

iCloudの保存先は、~/Library/Mobile\ Documents/com~apple~CloudDocs/こちらのようなので、下記のようにaliasを設定してターミナルからすぐにメモを開けるようにしました。
今回はmemoというフォルダをiCloudに作ったのでmemoフォルダを直接開くようにしています。
ターミナルからVisual Studio Codeを起動する方法【公式の方法】 - Qiita

alias memo="code ~/Library/Mobile\ Documents/com~apple~CloudDocs/memo"

ターミナルからmemoとうつことでVScodeが開くようになります。

code-workspaceを用意しておく

settings.code-workspace

memo/.vscode/settings.code-workspaceに下記のようなファイルを用意しました。

{
  "folders": [
    {
      "path": "../"
    },
  ],
  "settings": {
    "workbench.colorCustomizations": {
      "titleBar.activeBackground": "#3b3b3b",
      "titleBar.activeForeground": "#fff",
      "activityBar.background": "#415c7d",
      "activityBar.foreground": "#fff",
      "activityBarBadge.background": "#00008B",
    }
  }
}

このファイルをクリックするとpathで指定したフォルダをvscodeで開くようにすることができます。
.vscodeの中に入れているので、一つ上のフォルダを開くようにしています。

エイリアスを制作しておく

memo/.vscode/settings.code-workspaceを右クリックしてエイリアスを作っておき、開きやすいようにショートカットを作っておくことができます。

参考

【VSCode】code-workspaceファイルのエイリアスをデスクトップに置くと開発速度が上がった

VScodeでマークダウンを使いやすくするプラグインなど

VsCodeで快適なマークダウンライフを送るためのTips | masayanblog

まとめ

メモする時、下記のようなアプリを使っていたのですが、さくっと気軽にメモしたいときにブラウザを開いたり専用のアプリを開いたり迷うことが多かったので
いっそvscodeでMarkdownでメモするようにしちゃえばいいんじゃないかなと思いiCloudで管理するやり方にしてみました。

• Paper - Dropbox
• Your connected workspace for wiki, docs & projects | Notion

ほかにも色々とメモはあると思いますが、なんだかんだでMarkdownファイルでの管理がいいんじゃないかなと思ってきました。

使うスプレッドシートとGoogle Colabのファイル

• スプレッドシート「StableDiffusionPrompt」
• Google Colab 「StableDiffusion and Spreadsheet.ipynb」

プロンプトをスプレッドシートで管理する

• スプレッドシート「StableDiffusionPrompt」

左上のファイルから、「ファイル→コピーを作成」を自分のドライブにコピーします。

スプレッドシートについては下記を参考にさせていただきました。
Stable DiffusionやNovelAIなどで使う呪文を集めたスプレッドシート（またはテキスト）｜火月@ryon3kag｜note

スプレッドシートの使い方の説明

入力シート

主にこのシートを触ってプロンプトを調整します。
描写を選択すると単語の欄に英語表記がが表示されます。
注目度を大きくすると、その単語が強調されます。
（多くても1.3ぐらいまでにしておきましょう。
それ以上に増やしすぎると、絵が崩れてしまいがちです。）

下記のStable Diffusionの構文に合わせて、promptを生成しています。
stable-diffusionでの作成ポイントまとめ


入力の右側の下記にpromptとnegativeが
Google Colabに読み込まれるセルになっています。

お試ししたい場合はbasic_tagに書き込むとpromptの最初に追加されるので、単語に追加するほどでもないものなどはここに追加すると良いかなと思います。

デフォルト

デフォルトに入れる「プロンプト」と「ネガティブプロンプト」を管理しています。
基本的に入れておきたい、プロンプトはここで管理しましょう。

描写マスタ

プロンプトの元となる、項目を管理しています。
描写を追加したい場合はこのシートに追加していってください。
英語がわからない場合は、下記を使うと良いかなと思います。
DeepL翻訳：高精度な翻訳ツール

ちょっと大人なpromptもあるので、使わないって方は消したり
自由に追加したり自分好みのリストを作ってください。

ネガティブマスタ

描写マスタのネガティブ版。
ネガティブプロンプトの元となる、項目を管理しています。
追加したい場合は、描写マスタのやり方と同じです。

ジャンルマスタ

プロンプトの元となる、ジャンルを管理しています。
描写マスタと、ネガティブマスタの「ジャンル」を管理しています。
これを管理することでカテゴリが分かりやすくなるようにしています。

Google Colabから上のスプレッドシートをつなげる

• Google Colab 「StableDiffusion and Spreadsheet.ipynb」

左上のファイルから「ドライブにコピーを保存」で自分のドライブに保存して使ってください。

下記を修正してください

自分で立ち上げたアプリのURLと、上でコピーしたスプレッドシートのURLの部分を変更してください。

## アプリURL
url = "https://test.gradio.live"
## スプレッドシートURL
spreadsheetUrl = "https://docs.google.com/spreadsheets/d/1Rd0nulTYnnCJ-01gUp4KcBbE-_qsTAEiDpjFEnoU7FQ"

立ち上げているアプリはapiモードで立ち上げておく必要があるので注意

下記記事にapiモードでの立ち上げ方は書いています。
Stable DiffusionをM1 Macで使ったりGoogle Colabで使ったり

Google Colabでapiモードで立ち上げたい場合は、前回記事にしたのでそちらを参考にしてください。
Stable DiffusionをGoogle Colabでモデルを選んでダウンロードしたり使いやすくする

あとは下記に従って上から順番に実行してください

GoogleDriveとつなげます

outputsフォルダに日付のフォルダをつくって保存するようにしています。
好みで変更してください。画像生成後は、ここで指定したドライブにどんどん保存されていくので容量が圧迫されていくので注意です。

from google.colab import drive
drivePath = '/content/drive'
drive.mount(drivePath)

## 自分のドライブの好きなフォルダを指定
dirName = 'outputs'

from datetime import datetime
date = datetime.now().strftime("%Y%m%d")

OUTPUT_DIR = drivePath + '/MyDrive/' + dirName + '/' + date
!mkdir -v $OUTPUT_DIR

import os
os.chdir(OUTPUT_DIR)

スプレッドシートの認証

# スプレッドシート認証
from google.colab import auth
auth.authenticate_user()
import gspread
from google.auth import default
creds, _ = default()
gc = gspread.authorize(creds)

アプリURLとスプレッドシートURLを自分のものに変更したあと実行してください。

（変更したあとに実行するのを忘れがちなので注意です。左からコードの実行を押してください。）

## アプリURL
url = "https://test.gradio.live"

## スプレッドシートURL
spreadsheetUrl = "https://docs.google.com/spreadsheets/d/1sDCA1I2xPYbgv2Tsbyp4-vFnhSTScThVE2ws0nCQpFM"

seed = -1
width = 600
height = 900
steps = 25
count = 1

latest_seed = -1

画像を生成する

最後に「画像を生成する」をクリックするとスプレッドシートから読み取ったpromptで生成が始まります。

Google Colabは使用制限があるので、このファイルを高スペックで立ち上げても、動作に影響はないため最低スペックで起動しましょう。

注意点

• モデル（checkpoint）やvaeは画面から選択する必要があります。
• アプリが落ちた場合はアドレスが変わってしまうので再度アプリのアドレスを書き換えて実行してください。

まとめ

少しめんどくさい部分もありますが
この仕組みにしておくとスマホからもぽちぽち遊べたりするので便利です！

Aiの進化は毎日すごく早いので、色々と試しながら
どんどん取り入れていきたいですねー。

引き続き楽しいことがあれば共有していきます。

• Google ColabでStable diffusionを立てる
• 開始時にモデル（checkpoint、safetensors）を選択してダウンロードできる
  • Chilloutmix-Ni
  • CCCmix
  • pastelmix-fp32
  • AbyssOrangeMix""AbyssOrangeMix2_hard
  • BloodOrangeMix
  • EerieOrangeMix" "EerieOrangeMix2
  • ElyOrangeMix
  • AbyssOrangeMix3" "7thanimev1.1
  • 7thanimev3_A
  • 7th_anime_v3_B
  • 7th_anime_v3_C
  • SukiyakiMix-v1.0
• Google Driveにあらかじめダウンロードしておいたモデルを起動時に読み込むようにする
• 画像をGoogleドライブにダウンロードできる

ファイルは下記に置いてありますのでファイルを自分のドライブにコピーしてお使いください。

• Google Colab StableDiffusionUI.ipynb

使い方

左上ファイル → ドライブにコピーを保存

コピーしたファイルを開いて上から順番に矢印を押していきます。

コピーしたファイルを開いて

基本的には上から順番に実行していきます。

GoogleDriveとつなげる

実行すると、「このノートブックにGoogleドライブのファイルへのアクセスを許可しますか？」と表示されます。
「Googleドライブに接続」をクリックすると別ダブで、許可したいアカウントを選択して、権限の許可をしてください。

from google.colab import drive
drive.mount('/content/drive')

Githubからstable-diffusion-webuiをダウンロード

ダウンロードした後にstable-diffusion-webuiフォルダに移動します。

!git clone https://github.com/AUTOMATIC1111/stable-diffusion-webui
!pip install --upgrade fastapi==0.90.1
%cd stable-diffusion-webui

3/30日現在バージョンによってcolabで起動できなくなっているようです。
いったん!git checkout 9377092を%cd stable-diffusion-webuiの下に追記して、過去のバージョンを使用するようにすると動くようになります。
https://github.com/AUTOMATIC1111/stable-diffusion-webui/issues/9046#issuecomment-1487874711
バージョンによって動かなくなることはありそうなので、また進展があり次第記事更新していきます。

セレクトボックスから使いたいモデルを選択して準備

選択しただけでは選んだことにならないので左の矢印をクリックしてください
OrangeMixsをGoogle colabで使う (AUTOMATIC1111 webui ) - game snap
こちらを参考にさせていただきました。

上で選択したモデルをダウンロードします

# モデルデータを取得
!wget "$selected_url" -O "$local_model_name"

vaeが必要な場合はこちらを実行してください。上のModel選択時にvueのダウンロードurlが表示された場合

モデルと同じ名前で入れることでモデルが選ばれている場合に、そのvaeを一緒に使うようにしています。

# vaeを取得して同じ名前で入れる vaeがなかったらダウンロードしなくて良い
vaeFile = webui_model_dir + selected_model_name + ".vae.pt"
!wget "$selected_vae_url"  -O "$vaeFile"

Stable Diffusionサーバーを立てます

初回起動時には少し時間がかかる場合があります。

!COMMANDLINE_ARGS="--share --gradio-auth me:qwerty" REQS_FILE="requirements.txt" python launch.py --ckpt-dir="/content/drive/MyDrive/StableDiffusion/model" --lora-dir="/content/drive/MyDrive/StableDiffusion/lora" --embeddings-dir="/content/drive/MyDrive/StableDiffusion/embeddings" --api

実行が完了すると下記のような状態になると思うので
gradio.liveがついているアドレスをクリックするとUIが開きます。

パスワード画面が開くのでID: meとPassword:qwertyと入力してください。

ランダイムを削除すると、今までの設定や画像は全てリセットされてしまうのでモデルやloraなど、次回もダウンロードせずに使いたい場合は自分のdriveに入れ直しておくと、次回からはのフォルダに接続して使うようにしています。

--ckpt-dir="/content/drive/MyDrive/StableDiffusion/model" 
--lora-dir="/content/drive/MyDrive/StableDiffusion/lora"
--embeddings-dir="/content/drive/MyDrive/StableDiffusion/embeddings"

無料でGoogle Colabを使っている場合制限があるので注意

ランタイムの接続を削除してしまうと、上で行った操作がリセットされてしまい、
生成した画像も消えてしまうのでラインタイム削除する前に、作った画像は移行しておくようにしましょう。
下記をクリックで、生成した画像フォルダ（outputs）を、自分で接続したdriveにいれることができます。
コマンドを実行せずとも、左のファイル一覧から自分で移動する形でも大丈夫です。

一度ランタイムを削除した場合は、環境がリセットされますのでこの工程を最初からやる必要があります。

選択するモデルを増やしたい場合

モデル選択したの「コードを表示」をクリックしてください。
下記のようなコードが出てきますので。
Modelの名前と、モデルのダウンロード先のURLとvueのサウンロード先URLを下記の形で追加してください。
追加すると、セレクトボックスから選ぶことができるようになります。

    [
        "Modelで追加した名前",
        "safetensorsのダウンロードの先URL",
        "vaeのダウンロード先URL"
    ],

Model = "AbyssOrangeMix3" #@param ["Chilloutmix-Ni", "basilmix", "Counterfeit-V2.5", "CCCmix", "pastelmix-fp32", "AbyssOrangeMix","AbyssOrangeMix2_hard", "BloodOrangeMix", "EerieOrangeMix",  "EerieOrangeMix2", "ElyOrangeMix", "AbyssOrangeMix3",  "7th_anime_v1.1", "7th_anime_v3_A", "7th_anime_v3_B", "7th_anime_v3_C", "SukiyakiMix-v1.0", "doll774"]

# modelの行列を作成する
matrix = [
# 追加したい場合はここに追加していきます。
    [
        "Chilloutmix-Ni",
        "https://huggingface.co/TASUKU2023/Chilloutmix/resolve/main/Chilloutmix-Ni.safetensors"
    ],
]

Google Colabで使う方法の参考にさせていただいたサイト

• AUTOMATIC1111をGoogle Colabで使用する方法 ｜ Stable Diffusion高機能Web UIの活用法 | Murasan Lab
• OrangeMixsをGoogle colabで使う (AUTOMATIC1111 webui ) - game snap

• Google Colab StableDiffusionUI.ipynb

まとめ

Google Colabで立てると、自分のパソコンの環境に関係なくサクッと立てることができるので便利ですね。
制限などは決まっているので、気にして使えば便利かなと思います！