Microsoft AzureのAzure OpenAI On Your Dataを検証することとなった。 Azure OpenAI Serviceの利用には、事前申請が必要ということで、2024/2/6時点での申請方法をメモ。 事前準備 申請内容 14, 15: If you have a contact at Microsoft, ... 17: Which Azu…
昨日まで動いていたStorybookが、 yarn install したら突然動かなくなったのでメモ。 環境 Node.js v20.10.0, Yarn 1.22.19, Storybook v7.5.3。 問題 Next.js v13プロジェクトで、Storybookを使ってコンポーネント等の確認をしている。 今回、新しいパッケ…
最近新たに開始したプロジェクトで、開発環境をNode.js v18 + Next.js v13に更新した。検証のためにAWS Amplifyにデプロイしたがエラーが発生。 ちょっと調べるとあるあるらしいので、何番煎じかわからないが対応方法をメモ。 環境 Node.js v18.16.1, Next.j…
Whisperで文字起こしした電話内容を、OpenAI APIの gpt-3.5-turbo モデルで要約させている。 会議議事録の要約などは、プロンプトの指定次第で高精度で行えるが、電話の場合、文章の体裁を取らず、会話内容もまとまりがなかったりで、精度が低い。 特に、話…
Node.jsで、ファイル名から拡張子を取るときに、 fileName.split('.').slice(-1)[0] という書き方を同僚がしていた。 Node.jsのバージョンを18にしていたので、コードレビューで、「配列の末尾を取りたいなら .at(-1) でいいよ」と指摘したら、 at を知らな…
友人から、「PC買い換えてStable Diffusion web UIを移動したら起動できなくなった」という話を聞いた。 状況聞いて解決できたが、エンジニアじゃない人にはちょっと面倒かなあと思いメモ。 問題 調査 対応 git pull で更新できない問題 振り返り 問題 Stabl…
前回書いたLangChain.jsのサンプルプロジェクトの設定と実行を、別PCで試してみたらどうもうまく動かない。 なんでだろうと思って調べると、本家のPython版LangChain、およびLangChain.jsの公式ドキュメントのURLが変わっていたのでメモ。 変更前後のURL サ…
「ChatGPT使って何かやりたい」的なふわっとした要望のもと、OpenAI APIの検証をすることになった。 APIを素で叩くのはちょっと辛いなあと思っていたので調べると、LangChainを使うのがよさそうに思えたが、チーム内でPython使えるのが自分しかいない。 他の…
期間限定で無料開放されているNotion AIを使っていて、驚いたことがあったので備忘録。 出来事 感想 余談 参考 2023/3/13 追記 出来事 Node.js のアプリケーション上で、 Chart.js を用いたグラフ表示を行っている。 いくつか要望があったが、そのうち「グラ…
前回、ちらっとMapped Typesのプロパティの型を extends で切り替える方法を書いたが、他にもいろいろな指定方法があるのでメモ。 環境 実装例 直接指定 Conditional Types P を用いた型指定 プロパティ参照 関数の引数や戻り値 参考 振り返り 環境 TypeScri…
TypeScriptで、typeやinterface、classの総称型によって、プロパティの型を切り替えたり、削除したりすることができるのでメモ。 環境 方法 実装例 プロパティの型の切り替え プロパティの削除 参考 振り返り 環境 TypeScript v4.7.4 で確認。 方法 Conditio…
TypeScriptで、既存の型から一部のプロパティを、プロパティ名の部分一致で抽出・削除する方法をメモ。 環境 TypeScript v4.7.4 で確認。 プロパティ名の部分一致での抽出・削除方法 テンプレートリテラル内にUnionを用いると、すべての組み合わせの文字列リ…
以前、Tailwind CSSを使ったコンポーネントの設定を複数のプロジェクトで使いまわす方法を調べた。 GitリポジトリとしてGitLab.comを使っており、GitLabのパッケージレジストリにnpmパッケージを公開することで、公開範囲を絞ることができるため、その方法を…
VSCodeのデフォルト設定だと、開いているアクティブなファイルが左フレームのエクスプローラー上でフォーカスされる。 この時、ファイルの保存されているフォルダが展開されるので、気づくとあちこちのフォルダが開かれていたりする。また、開いているファイ…
Storybookを使っていると、アドオンパネルが開かなくなった。 Controlsでプロパティの変更ができず、ハマったので対応方法をメモ。 環境 Storybook 6.5.13 for React。 問題 StorybookをGoogle Chromeで開き、 Show addons 状態にしても、アドオンパネルが表…
Tailwind CSS + daisyUIで作成したコンポーネントを、複数のプロジェクトで共有しようとしたが、単純にコンポーネントのソースだけを読み込んでも、 tailwind.config.js の設定内容が引き継がれない。 設定を手動でコピーするのも現実的ではないため、共有す…
Tailwind CSSで、レスポンシブ用のブレイクポイントの追加や、色などのクラス名を追加する方法を調べたのでメモ。 環境 ブレイクポイントの追加 色の追加 色指定時の注意点 その他のクラスの追加 振り返り 環境 Tailwind CSS v3.2.4。 ブレイクポイントの追…
daisyUIの table クラスを使うと、theadのth,tdタグに書いたアルファベットが大文字に変換される。 また、スクロール可能なテーブルの場合、最初のthタグの位置が固定されてしまう。 ちょっとイマイチな挙動のため、変更する方法を調べたのでメモ。 環境 the…
Notionをissueトラッカーとして使い、調査や設計した内容を書き溜めている。 先日、調査結果を社外のステークホルダーにも共有することとなった。 Notionは外部ユーザーと共有できるが、社内ルールで外部との共有は禁止されており、やるなら稟議が必要。かと…
ESET Internet Securityのアップデートをしたら、Webブラウザのウィンドウ枠が緑色になった。 OSから何からすべてダークテーマにしていると、緑が目立って気持ち悪い。 無効化する方法を調べたのでメモ。 環境 問題 対応 一時的に解除 恒久的に解除 振り返り…
React + Next.js で、多言語対応したアプリケーションを開発している。 日本語から、英語などのラテン文字で記述する言語に切り替えた場合、文字が長くなり、レイアウトが崩れることがあるため、各言語でのレイアウトを簡潔に確認したい。 アプリケーション…
Node.js のアプリケーション内で、国旗の画像を使うことになった。 画像を用意するのが面倒だったので、 npm install して使える国旗のアイコンセットがないか調べたのでメモ。 候補 flag-icons country-flag-icons flagpack Iconify パッケージ選定 その他 …
Next.js + TypeScriptのプロジェクトで、TypeScriptファイル名はローワーキャメルケースにするようコーディング規約を定めていた。 ただ、Javaのように言語側でフォーマットが決まっていないからか、個人の癖が出やすく、アッパーキャメルケース、スネークケ…
小ネタ。 daisyUIのアニメーションの無効化ができないか調べたのでメモ。 問題 対応 アニメーションを一括で無効化 振り返り 問題 daisyUIのコンポーネントを使うと、インタラクションの一環としてか、デフォルトでアニメーションが行われる。 ちょっと困っ…
小ネタ。 TypeScriptでは、アロー関数でジェネリック関数を定義できる。 const generic = <T>(value: T) => ... 拡張子が .ts のファイル内では問題ないが、 .tsx のファイル内でこの記法を用いると、 <T> がタグの開始とみなされ、以下のコンパイルエラーが発生す</t></t>…
JestやStorybookで、テストや表示用に長い文字列や配列を用意するがある。 リテラルで書いていた同僚に、コードレビューで「こんなやり方ができるよ」と教えたら感心されたのでメモ。 文字列 文字列の繰り返し 左埋め・右埋め 配列 配列を特定の値で埋める e…
GitLabで、フォークしたプロジェクトに対してマージリクエストを作成すると、デフォルトのターゲットブランチがフォーク元のデフォルトブランチになっている。 面倒なのでプロジェクトを切り離したりしていたが、設定からターゲットプロジェクトを現在のプロ…
Tailwind CSSを使い始めて3ヶ月ほど経った。 スタイルに対応したクラス以外に、特殊なクラスや書き方があったのでメモ。 環境 子要素にスタイルを指定 テキストの省略 1行テキストの省略 複数行テキストの省略 スペーサー 要素間のボーダー important にする…
Storybookのストーリーファイルをtsxで記述しているが、TypeScriptをstrictモードにしているため、Decoratorを定義する際、引数に型を付けないとエラーになる。 // パラメーター 'Story' の型は暗黙的に 'any' になります。 const decorator = Story => ( <div style={{ maxWidth: '400px' }}> <Story /> </div>…
TypeScriptでの開発時、exportしているモジュールに対してはTSDocを書くようコーディング規約を定めたが、ヒアドキュメントを書く習慣のないメンバーが多く、書き漏れが頻発した。 都度コードレビューで指摘するのも面倒なので、ESLintで何とかならないかと…