• HTML, CSSを教えた
  • 色変わったり、配置変わったりで驚いてて、自分もこうだったな～と思った
  • 興味持って続けてくれるとうれしいなあ！
• ハンバーグ食べた
  • 和風、大根おろしが合ってうまかった
• お昼寝した
• 星作った
  • https://工作ねっと.jp/1125

https://github.com/microsoft/teams-ai/tree/v2-preview

準備

• https://microsoft.github.io/teams-ai/typescript/getting-started

Prerequisites

• Node.js v20↑

Install the Teams CLI

npm install -g @microsoft/teams.cli@preview

teams <command> 系コマンドはこのCLIを使ってる。グローバルインストールする必要はなくて、都度 npx @microsoft/teams.cli@preview <command> で実行してもOK。

プロジェクト作成

teams new typescript <アプリ名>

オウム返しするだけのアプリが作成される。

デバッグ

Dev Tool上で動かす

npm run dev

http://localhost:3979/devtools でチャット送ったり、発生したアクティビティを確認できる。ただし、メンションはできないっぽい？

Teams上で動かす

• https://microsoft.github.io/teams-ai/typescript/getting-started/running-in-teams

Microsoft 365 Agents Toolkit （VSCode拡張機能）をインストールしておく。

以下のコマンドで設定ファイルを追加する（環境変数追加されたり、マニフェストファイル追加されたり、vscodeでのデバッグ設定追加されたり）

teams config add atk.basic

VSCodeで M365 Agents Toolkit 拡張機能のパネルを開いて、”Accounts” セクションでM365アカウント、Azureアカウントでログインする。

次に、”Environment” セクションで “local” を選んでデバッグを開始する。「Debug（好きなブラウザ）」を選べばOK。

ブラウザでTeamsが立ち上がってくるが、無視してDesktopアプリのTeamsを起動。「アプリ > アプリを管理」から「アプリをアップロード」を選択（ブラウザではなぜか選択できない）

作成したTeamsアプリプロジェクトの appPackage/build/appPackage.local.zip を選択してアップロード。

後は、チャネルにインストールして使うだけ。オウム返しボットの場合ボット宛にメンションすれば、反応してくれる。

メッセージに反応する

• https://microsoft.github.io/teams-ai/typescript/essentials/on-activity/

メッセージは Activity の一種で、Activity Router (app.on()) を使ってハンドリングする。

app.on("message", async ({ activity, send }) => {
	await send (`You said: ${activity.text}`);
});

他にもいろいろ Activity はある

• https://microsoft.github.io/teams-ai/typescript/essentials/on-activity/activity-ref

メッセージの場合、チャネルではbotに対するメンションが必要。↑のドキュメントでは mention がアクティビティであるとされているが、このSDKでは、"mention” をアクティビティとしてハンドリングできなかった。

メンション判定

botと1対1（DM）の時はメンションではないので、メンション判定できたほうが便利かもしれない。

activity.entities にメッセージ内のメンション情報が入っている。こんな感じ？

const isMention = activity.entities && activity.entities.some(entity => entity.type === 'mention');

チャネルかDMかの判定でもいいかも。

DM/チャネル判定

const isDM = activity.conversation.conversationType === 'personal';

型定義間違ってて補完には出てこないが、以下でチャネル判定できる

const isChannel = activity.conversation.conversationType === 'channel'

DMにメッセージを送る

例えば、何らかのアクティビティにトリガしてDMで通知を送るような場合

// メッセージを受け取ったら通知
app.on("message", async ({ activity, api }) => {

  const isChannel = activity.conversation.conversationType === "channel"
  if (!isChannel) {
    return;
  }

  const conversation = await api.conversations.create({
    tenantId: activity.conversation.tenantId,
    isGroup: false,
    bot: { id: activity.recipient.id },
    members: [activity.from]
  });

  await api.conversations.activities(conversation.id).create({
    type: 'message',
    text: `チャネルでのメッセージを受信しました: ${activity.text}`,
    from: activity.recipient,
    recipient: activity.from
  });
});

conversationを作って、そのidに対してアクティビティ（メッセージ）を作る。

メッセージリンク

const channelId = activity.channelData?.teamsChannelId || activity.conversation.id.split(';')[0];
const timestamp = activity.timestamp;
const conversationId = activity.converstation.id;
const parentMessageId = conversationId.split(';messageid=')[1];
const groupId = '多分テナント内で固定値？どれでもいいからメッセージリンクコピーして抜き出す';


const messageUrl = `https://teams.microsoft.com/l/message/${channelId}/${activity.id}?tenantId=${activity.conversation.tenantId}&groupId=${groupId}&parentMessageId=${parentMessageId}&createdTime=${timestamp}`;

ユーザーのトークンでGraph APIを使う

認証する必要あり。

• https://microsoft.github.io/teams-ai/typescript/in-depth-guides/user-authentication/quickstart

基本はドキュメント通りだが、デバッグの過程で、自動的にAzure側にリソースを作成されるので、対象サブスクリプションにリソースを作れる権限が必要。

福岡に引っ越す人は絶対に買おうね⚔️

やったこと

• 段ボール捨てた
• React 19 の新機能キャッチアップ

段ボール捨てた

前の賃貸では、24時間いつでも敷地内に段ボールを捨てられたが、福岡に引っ越してから、地域で決められた場所に決められた日時にしか捨てられなく、ためがちになってる。

福岡ってそういうもん？24時間いつでも捨てられる賃貸福岡にある？探し方が悪いだけなのかもしれない。

React 19 の新機能キャッチアップ

社内で共有することを目的にやっている。そのうちここで公開する。

Actions

• 非同期 transition を使う関数のことを “Action” と呼ぶ
• ポイント
  • 保留状態が管理される
  • 楽観的更新がやりやすい
  • エラーハンドリング簡単
    • エラーが起きたら、Error Boundaries を表示したり、楽観的更新を元に戻したりできる（自動的に）
  • フォームとも連携
    • formのaction propに関数を渡せるようになった。この関数は “Action” になる
• この Action をベースにして、いくつかの hooks が追加されている

useActionState

const [state, wrappedAction, isPending] = useActionState(action, initialState);

• 引数に “Action” (action) を渡すと、実行用の ”ラップされた Action” を返す (wrappedAction)
• この “ラップされた Action” を実行すると、”Action” の最後の実行結果を返す (state)
• また、”Action” の保留状態を返す (isPending)

stateは初回のレンダリングではinitialState, action が終わり次第、その戻り値に更新される

<form> Actions

• <form>, <input>, <button> の action , formAction prop に関数を渡せるようになった
• prop に渡した関数は Action として扱われ、Action が完了すると、自動的に <form> がリセットされる
  • 手動でリセットする口もある (requestFormReset)

<form action={actionFunction}>

useFormStatus

• props なしで、Context を使わずに、親formの情報にアクセスできるhook
• 例えば、form で利用される汎用的な button コンポーネントの実装において、保留状態を取得して使う

function DesignButton() {
  const { pending } = useFormStatus();
  return <button type="submit" disabled={pending} />
}

• pending だけじゃなく、submit された data も取得できる
• 親formが無ければ null (pending の場合は false)

https://react.dev/reference/react-dom/hooks/useFormStatus

useOptimistic

• 楽観的更新が簡単にできる hook

use

• render 中にリソースを読み取るためのAPI
• promise を読み込むと、use を使っているコンポーネントは promise が resolve (fulfilled) されるまで suspend される

interface Todo {
    userId: number;
    id: number;
    title: string;
    completed: false;
}

async function fetchTodo(): Promise<Todo> {
    const res = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    return res.json();
}

export function Todo() {
    const todo = use(fetchTodo());
    return (
        <p>
            {todo.title}
        </p>
    )
}

function App() {
  return (
    <Suspense fallback={"loading..."}> 
      <Todo />
    </Suspense>
  )
}

こんな感じで useEffect 無しでうまいことやれるようになるんかな、と思ったがそうではない。

👆のコードの場合、fallback が表示されっぱなしで Todo は表示されない。

ドキュメントには以下のように記述されている

use はレンダー中に作成されたプロミスをサポートしない
レンダー中に作成されたプロミスを use に渡そうとすると、React は警告を表示します。

修正するには、プロミスをキャッシュできるサスペンス対応のライブラリまたはフレームワークで作られたプロミスを渡す必要があります。将来的には、レンダー中にプロミスをキャッシュしやすくする機能を提供する予定です。

「レンダ―中に作成されたプロミス」は、つまり fetchTodo() だが、「プロミスをキャッシュ」と言われてもよくわからない。

言っていることや、そもそも fallback が表示されっぱなしになる原因を理解するには、Suspense について理解する必要がある。

そもそも <Suspense>

https://react.dev/reference/react/Suspense

Suspense による fallback と、その後のコンポーネントのレンダリングは以下の流れになる

1. コンポーネントが render される過程で、Promise が throw されると、コンポーネントが「suspend」される
2. <Suspense> は children（コンポーネント） が suspend すると、fallback をレンダーする
3. throw された Promise が resolve されると、Suspense の children を再レンダリングする

先ほどの use に fetchTodo() を渡していたコードでは、この流れの 3 において、再度 fetchTodo() が実行されることになり、1~3 をループすることになってしまう（いつまで経ってもTODOは表示されない）

期待する動作（ fetchTodo() が完了したら、Todoコンポーネントに取得した Todo を表示する）を実現するには、3 (Promise が resolve され、Todoコンポーネントが再度レンダリングされるとき) において、use に渡される Promise が 1 で throw された Promise と同じである必要がある。

ドキュメントに書かれていた「プロミスをキャッシュ」とはこのことで、何らかの形で初回のPromiseをキャッシュしておいて、use に渡してあげる必要があるよ、と言うこと。

初回 (1) と同じ Promise を渡された use は resolve された Promise は throw しないので、再レンダリングされたとき、期待通りに Todo が表示される。

どうやってキャッシュする？

例えば、Tanstack Query の useQuery を使うと、キャッシュした Promise が得られる。

const { promise } = useQuery({
	queryKey: ["todos"],
	queryFn: fetchTodos,
	experimental_prefetchInRender: true, // このオプションを有効にすると promise がもらえる
});

• https://speakerdeck.com/diggymo/reactnouse-tutehe-nan-6af6d25f-ac0d-4e61-b0db-c11b1737e906?slide=14
  • 参考になりそう

そのうち、技術スタックやどういう目的で作成したツールなのかを詳細に書いたページを用意したい。

• Cloudflare Workers でスクレイピング
• アニメみた

Cloudflare Workers でスクレイピング

個人用ダッシュボードのようなものを作りたい。表示するデータは、Cloudflare Workers を使って対象 Web ページをスクレイピングし、情報を D1 に貯め、Cloudflare Pages 上の Next.js アプリケーションから参照するような構成を考えていた。

しかし、Cloudflare Workers には 10ms の CPU time 制限があり、Playwright や Puppeteer などを使ってヘッドレス Chrome を起動しスクレイピングするには不足していることがわかった。課金すれば Unbound モデルの Workers を使うことで実現できたが、このために月5ドルは微妙だった。

そこで、スクレイピングは Cloud Functions で実行し、Cloudflare Workers はその Functions を叩いて結果をもらうだけにした。あくまでも CPU time の制限なので、Functions からのレスポンス待ちにかかる時間は対象外となる。だいぶ無駄ではあるが、今回の用途では速度は求めないので十分。これで安くスクレイピングが実現できた。

アニメみた

• 『転生貴族、鑑定スキルで成り上がる』公式ポータルサイト
• 【公式】「転生したらスライムだった件」ポータルサイト
• オリジナルTVアニメーション「夜のクラゲは泳げない」公式サイト

をみた。

• Farm Together 2
• お散歩

Farm Together 2

4月15日にプレイし始めて、約40時間ほど遊んだ。こういうゲームをあまりやったことがなかったが、無限にタスクが湧いてきてやめ時を見つけられないくらいずっとプレイしてしまう。

効率良くプレイするために、3の倍数マスになるように整地する、お風呂に入って出たら収穫するから、収穫まで1時間かかる農作物を植える、など工夫してプレイするのが楽しい。

• npm package の公開方法について調べた
• shebang について調べた
• 崩壊：スターレイル を始めた

npm package の公開方法について調べた

👇の手順に従うだけ。よく見かける @hoge/package-name の形式のパッケージは scoped package と呼ばれるらしい。

• Creating and publishing scoped public packages | npm Docs

公開前に作成したパッケージをインストールして正常に動作するか確認したい場合は、 npm install コマンドを使って対象パッケージディレクトリまでのフルパスを指定してインストールしてみればよいらしい。

ちなみに、npm link を使って試す方法もある。対象のパッケージディレクトリ内で npm link を実行。その後、動作確認用のディレクトリで npm link <pakcage-name> を実行すればOK。

• npm-link | npm Docs

shebang について調べた

node 向けの cli ツールに書かれている #!/usr/bin/env node が何か気になって調べた。shebang (シバン、シェバン) と呼ぶらしい。

• シバン (Unix) - Wikipedia

対象スクリプトを読み込むインタプリタを指定する記述とのこと。なので、node 向け cli ツールは #!/usr/bin/env node と書く。

崩壊：スターレイル を始めた

なんとなくソシャゲやりたい気分になり、始めてみた。実際始めたのは、5/8 で、かなり強いキャラの期間限定ガチャが終了した直後だったので、タイミング悪かったっぽい。とりあえずゆるくやっていく。

• VSCode の Custom Labels を設定
• Next.js on Cloudflare Pages + Cloudflare D1 お試し
• Ordinary Labs USB A to C Cable (Orange) 買った
• アニメ鑑賞

VSCode の Custom Labels を設定

• https://twitter.com/nextjs/status/1783508313113800930

このツイート（Post）を見て知った。2024年3月のVSCodeのアップデートで追加された機能で、エディタのタブの表示をカスタマイズできる。Next.jsのようなワークスペース内に同名ファイルがたくさんある場合に便利。

.vscode/setting.json の "workbench.editor.customLabels.patterns" で設定できる。glob pattern を使える。

{
  "workbench.editor.customLabels.patterns": {
    "**/app/**/page.tsx": "${dirname} - Page"
  }
}

とはいえ、もともと同名ファイルがタブに表示されるとき以下のようにディレクトリが表示され区別できるようになっているので、わざわざ設定しなくてもいいかもなと思った。

Next.js on Cloudflare Pages + Cloudflare D1 お試し

• Full-stack deployment · Cloudflare Pages docs

👆に従って Cloudflare Pages にデプロイ。D1 使うには、Binding する。

• next-on-pages/internal-packages/next-dev at main · cloudflare/next-on-pages

Next.js の場合、@cloudflare/next-on-pages を使うことで、 next dev するだけでで binding された状態をローカルで動作させられる。

この最小のサンプルで、書き換えてから反映されるまで10秒以上かかる。 それもロード中は 404 になり、ビルドが終わっても自動リフレッシュされたりとかはない。拷問か？

https://zenn.dev/mizchi/scraps/fda07433250e82

このスクラップを読んでいたので、しんどそうだと思っていたけれど、その後いい感じに整備されたぽい。

Ordinary Labs USB A to C Cable (Orange) 買った

• Ordinary Labs USB A to C Cable

ぶっといケーブルかわいい。Orange、Black、Tiffany Blue の3色を買った。

アニメ鑑賞

• ダンジョン飯
• 無職転生

を観た。無職転生が特に良かった…。早く続きが観たいヨ🥲

しばらくアニメを観られてなかったのでGW中にたくさん楽しむぞ。明日は、夜のクラゲは泳げない を観る。

• 「スタミナ源たれ」でカルビ丼

「スタミナ源たれ」でカルビ丼

2月に買った赤見かるびコラボのスタミナ源たれが届いたので、まずはカルビ丼にした。割と薄めの味で好きだった。色んな料理に使えそう。

パッケージかわいいし、箱はかなり良い感じの質感だったので、取っておこうかな。

• Cloudflare R2にブログの画像を配置
• ダークモード時の文字色・背景色を調整

Cloudflare R2 にブログの画像を配置

Cloudflare R2 にこのブログの画像を配置することにした。

R2 に配置した画像にアクセスするには、Public access を有効にする。具体的には、対象バケットの設定からカスタムドメインを設定する。Cloudflare で管理しているドメインであれば設定できる。

R2使い始めたはいいものの、 morimo.dev になってから1枚も画像がありませんでしたとさ。

ダークモード時の文字色・背景色を調整

真っ黒に白文字は目が痛かったので、少し調整した。背景色、文字色共に Notion と同じにした。ロゴは真っ白がかわいいのでそのまま。

Before:

After:

• かっぱえびせん 完熟かぼす味食べた
• Cloudflare R2 調べた

かっぱえびせん 完熟かぼす味食べた

セブンで新しく発売されていたので食べてみた。おいしかった。

収穫しきれなかった“完熟かぼす”を活用し産地を応援！ JA全農おおいた提供の大分県産かぼすを使用『ポテトチップス 完熟かぼす味』『かっぱえびせん 完熟かぼす味』 | カルビー株式会社のプレスリリース

Cloudflare R2 調べた

• Remix + Cloudflare Workers + D1 + KV + Queue + R2 + DOで簡単なアプリを作る

👆の記事を読んで、このブログの画像もR2に保存する感じにしてみようかなと思った。

Workers 経由にせずとも、Public Buckets を有効にすれば直接バケットにアクセスできるらしい。

Public buckets · Cloudflare R2 docs

また土日に試そ❣

• Cloudflareにドメイン移管

Cloudflareにドメイン移管

以下の流れで移管できる

1. CloudflareのWebsitesに移管対象ドメインを利用しているサイトを追加する
2. Cloudflareで移管手続きをする
3. 移管を承認する

CloudflareのWebsitesに移管対象ドメインを利用しているサイトを追加する

ダッシュボード（ホーム）で “Websites” メニューを選択し、”Add a site” からサイトを追加できる。

Cloudflareのネームサーバーを設定するよう案内されるので、現在利用しているレジストラで設定する。

Cloudflareで移管申請をする

ダッシュボード（ホーム）で “Domain Registration” > “Transfer Domains” を選択し、移管したいドメインを選択する。authorization code を求められるので、現在利用しているレジストラから取得して入力する。

あとは画面に従って確認を済ませれば、移管申請は完了する。

移管を承認する

現在利用しているレジストラから、移管申請を承認するよう連絡が来るので、承認する。しばらくすると、移管が完了し、Cloudflare上で完了したことを確認できる。

• 可変フォント (variable fonts)

可変フォント (variable fonts)

Next.js の next/font/google の使い方を調べてたところ、variable fonts なるものを使うことが推奨されていた。

MDNで調べてみたところ、以下の通り。

可変フォント (Variable fonts) は幅、太さ、スタイルごとに個別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを 1 つのファイルに組み込むことができる OpenType フォント仕様の進化版です。CSS および単一の @font-face 参照を介して、特定のフォントファイルに含まれるすべてのバリエーションにアクセスできます。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_fonts/Variable_fonts_guide

つまり、可変フォントじゃないフォントは、文字の書体（太字、斜体など）毎にフォントファイルが分けられているが、variable fonts は1つのフォントファイルに様々な書体を含んでいるということ。そのため、ファイルサイズ自体が小さくなったり、読み込むファイル数を削減することができる。