Zenn
Open90

2024-2

podhmopodhmo

2024-11-30

  • 気になる言語
    • borgo
    • shplait
  • zenn scrapsが上限を超えてコメントできなくなった (2024)
  • Chat AIというかLLMのAPI関係
    • chatgptのAPIは無料枠が無さそう (切れた）
    • geminiはありそう (TODO: link)
  • denoでweb APIを呼ぶときのコードについて考えた (クラス不要説)
podhmopodhmo

denoでweb APIを呼ぶときのコードについて考えた（クラス不要説）

denoでwebAPIを呼ぶときのコードを考えてみた。

https://gist.github.com/podhmo/33c1452b24105a4b2123ba068d082308

ポイントとしては

  • debugし辛いコードは避けたい -> traceしたい
  • 環境変数などでいい感じにapikeyを読み込みたい
  • 個別のケース用のfetchを作りたい
  • クラスは本当に必要？
podhmopodhmo
  • streamingへの対応はどうするんだろう？
  • geminiのapiの方はどうなるんだろう？
  • deno経由ではなくブラウザ経由で呼び出せるようにするにはどうするんだろう？
podhmopodhmo

2024-12-01

  • 昨日のやつをGeminiでも試す
  • with-helpでchoicesで補完を効かせたい
podhmopodhmo

with-helpでchoicesで補完を効かせたい

// parseArgs()の引数ではないので補完が効かない。
const options = {
  "boolean": ["verbose"]
} as const;

const args = parseArgs(Deno.args, options);

// ここでoptionsを渡したくなる
const restricition = new Restriction(options);

とはいえ安易に値にメソッドを生やしたくない気もする。

podhmopodhmo

結局無理やり値を埋め込んでしまった。まぁでも大体使うのはchoicesくらいなので const choices = mostStrict(args) してしまえばrestrictionというオブジェクトが現れるよりマシかも？

podhmopodhmo

ついでにサブコマンドを自前で定義してみた

  • switchで分岐する?if-elseで分岐する? (breakの代わりにreturnを使えば1行)
  • 同一のコマンドオプションをbase側のコマンドで吸収するべきか？（繰り返しになる）
podhmopodhmo

2024-12-02

  • bskyへpostしてみる
  • this is undefinedのbindの対応
  • webでもcosole.logを
podhmopodhmo

bskyへpostしてみる

単に投稿するだけでなく改変した結果をpostしたい。例えば翻訳した結果を併記するだとか。

しかしふつうにやると文字数制限に引っかかる。例えばgistなどの別の場所に追加の内容を投稿してそれへのリンクを付与するとかの方が良いかも？

🔑 パスワードはマスクした感じで表示したくなった。

あと1ファイルに収めるにはnamespaceが便利。

podhmopodhmo

this is undefinedのbindの対応

これをTypeScriptの型チェックをすり抜ける。eslintの出番とかだとやだな…

対応方法

  • constructorでbindする
  • メソッドをアロー関数で定義する
podhmopodhmo

2024-12-03

  • mac + kitty + screen で改行を含んだ文字列のクリップボードからのペーストが効かない
  • denoでgistに投稿してみる
podhmopodhmo

mac + kitty + screen で改行を含んだ文字列のクリップボードからのペーストが効かない

かなり特殊な事例かも。。

homebrewで諸々updateしてから「改行を含んだコピペ」がうまくできないっぽい。
kittyかscreenの問題そう。。なんだろ。copy modeと認識されてしまう(screen)

.screenrcでCtrl+jをエスケープキーにしてたせいっぽい。

# エスケープキー
escape ^Jj

ブラケットペーストモードを無効(off)にする – イー・フロンティア・システムズ

.inputrcでbracketed-pasteを無効にして、kittyのpaste anywayを使えばまぁ動きそう。

echo "set enable-bracketed-paste off" >> ~/.inputrc

bracketed paste の制御文字はコピーの開始と終了用の \e[200~ と \e[201~ で囲むやつ。

podhmopodhmo

denoでgistに投稿してみる

方法は２つあるかも？

  • subprocess経由で gh gist createを呼ぶ
  • gh auth token で渡してweb APIを直接叩く

.envに入れておけば使えるし、後者のほうが嬉しいかもしれない(main2.ts)

https://gist.github.com/podhmo/210b925be733f5f4150346e9bc684d28

💭こうやって前提条件が増えてくると自分用のdoctor的なコマンドが欲しくなるかもしれない。
あとはいろんな環境変数が見えるのも微妙なのでやっぱりマスクしたくなるかも？

podhmopodhmo

💫関係ないけれどsnapでインストールしてたghが古くてgh auth tokenが存在しなくてびっくりしてた。結局雑にghqでcli/cliをcloneしてきてビルドしてしまった。go installで入れても良かったのでは？と思ったりもした。

podhmopodhmo

2024/12/04

  • fetch()のbuild helperを作りたくなった
  • denoで試したいもの
podhmopodhmo

vite必要になるのはどのタイミング？
もしかして1枚のhtmlならdenoだけでhmrできるのでは？

podhmopodhmo

2024-12-11

  • console.dirの代替
podhmopodhmo

💭ところでcliとかでapiにリクエストして投げて429になった時のresponseとかにそのままアクセスしたいのだけどpythonのpickleみたいなものは無いんだろうか？

事後的に触りたい

podhmopodhmo

2024-12-12

  • githubのissueのsub issueを集めたい
  • bsky用のサブコマンドを作ろうとしてみる
podhmopodhmo

githubのissueのsub issueを集めたい

こんなbashの関数を書いておく？

# $1: repo, $2: issue number
function gh-linked-issues() {
    gh api -X GET --paginate /repos/$1/issues/$2/comments -f per_page=100 --jq '.[] | .body' | ggrep -Po "https://github.com/$1/issues[^\n >'\"\)]+" | sed 's/^/- /g' | sort -u
}
  • 📝逆参照の自動で付与されたリンクには対応していない
  • ghコマンドの--paginateがうまく機能しているかわからない
podhmopodhmo

bsky用のサブコマンドを作ろうとしてみる

書き心地を確かめることの一貫。

https://zenn.dev/link/comments/948349dc964de4

思ったことは

  • めんどくさくはあるけれどサブコマンドも実装できる
  • API Keyがヘルプメッセージにデフォルトとして表示されると邪魔 (with-help)
  • booleanのdefaultが上手く表示されていない (with-help)
  • 雑にclientのコードを書いていたらfetch周りで型チェックが効かなくなった (auth無しfetchを渡せる)
  • 直接fetch()に渡すbodyのところでreplyをreplとタイポしてた
  • ある程度肥大化するとnamespaceでも邪魔になる

機能面というか知識面では

  • bskyはfacetsの対応をしないとURLがリンクとして機能しない
  • facetsの対応をしてもPWAなどで挿入されるサムネイル画像などは付与されない
podhmopodhmo

2024-12-13

  • bskyのコードをchatgptに書いてもらう
  • ts-expect-error
podhmopodhmo

blueskyのコードをchatgptに書いてもらう

昨日自分で手書きしてみたものをchatgptにお願いして書いてもらうことにした。

  • 投稿
  • accessJwtのキャッシュ
  • refleshJwtでのリフレッシュ
  • スレッドとしての投稿
  • facetsの算出（リンク）
  • ogpを取得してサムネイル付きで投稿
podhmopodhmo

これを一発で出力するプロンプトを最後に提案してもらった。

プロンプト例:

Bluesky API (`atproto`)を使って、以下の要件を満たすTypeScriptコードを作成してください。

1. **Blueskyに投稿**: `atproto`を使ってBlueskyに投稿できる機能。
2. **Facetsの送信**: 投稿に`RichText`を使用し、自動的にfacetsを計算して送信。
3. **リンクのOGP情報を取得してサムネイル付きで投稿**: 投稿内のリンクに対して、OGPデータ（タイトル、説明、サムネイル）を自動的に取得し、投稿に添付。
4. **`fetch`を使用**: `axios`ではなく、`fetch`を使ってOGPデータを取得。
5. **スレッド投稿**: 投稿内容が文字列の配列として渡された場合、リプライを繋げてスレッドとして投稿する。
6. **`did`と`accessJwt`をキャッシュ**: 一度ログインして取得した`did`と`accessJwt`をキャッシュし、再利用する機能。
7. **`refreshJwt`を保持し、`accessJwt`の期限が切れた場合に自動的に更新**: `refreshJwt`を使って`accessJwt`が期限切れの場合に自動的に更新。
8. **全ての提案を含んだコード**: 上記の全要件を満たすTypeScriptコードを一貫して書いてください。

注意：`accessJwt`が期限切れになった場合に自動で更新し、リンクにOGPデータを付けて投稿することが重要です。スレッドの投稿は、配列のメッセージをリプライとして繋げる形にしてください。
podhmopodhmo

今度は回答してもらったプロンプトをいきなり投げてコードを書いてもらった。いわばトップダウン的な利用方法。

https://chatgpt.com/share/675b7898-db34-8001-9eef-312f4b41c515

結果としては紆余曲折があった。

  • atprotoの利用が消えていた
  • すべての箇所でfetchを利用しようとした
  • ogpのサムネイルと投稿するメソッドとスレッドとして投稿するメソッドが分かれてしまった

[!NOTE]
途中でモデルがダウングレードされたせいもあるかもしれない。
課金してない

podhmopodhmo

TSで型エラーのテスト

わざとおかしくして @ts-expect-errorで潰すというのはありかも？

  { // ok
    const args = parseArgs(["--value", "123"], options, handler);
    const coerce = moreStrict(args).integer;
    const args_ = { ...args, value: coerce(args.value) }; // string -> number

    // @ts-expect-error "foo" is not an integer
    assertFalse(args_.value === "foo");
  }
``
podhmopodhmo

自分用のbsky client

  • スレッドで投稿
  • gist経由で投稿
  • 投稿しない

他にある？

英訳とか？これは投稿の形態ではなさそう

どこから投稿するか

  • コマンド（cli）
  • エディタ
  • スマホ（PWA?）
podhmopodhmo

2024-12-14

  • 昨日の@atproto/apiを使ったbskyのCLIに型などを付ける
  • ogpカードをいい感じに表示したい
podhmopodhmo

昨日の@atproto/apiを使ったbskyのCLIに型などを付ける

  • fetchをオプションで受け取れた
  • package.jsonを見るとtypesにdist/index.d.tsが含まれていた

どうやら名前空間としてimportしているような感じでキモい。
（なるべくimport typeを使いたいがdist以下のpathを参照したくない）

https://gist.github.com/podhmo/c9bcef83c88e40b38fb3eb7519b6cc56#deno--dts--import--as--from-dts-の問題

あと普通に型定義が壊れてた 🙄

podhmopodhmo

ogpカードをいい感じに表示したい

bskyではウェブカード用の表示のサムネイル画像をクライアント側が自分でアップロードするひつようがある。というわけでogpを読んでいい感じにやってくれる何かが欲しくなった。

https://gist.github.com/podhmo/c9bcef83c88e40b38fb3eb7519b6cc56#file-ogp-ts

amazonとかは無理なのだけどそれこそURLの中を覗いてtitle,descriptionだけ取っちゃえば良いか。。ちなみにfacetsの自動計算とamazonの長いURLの相性が悪い。

podhmopodhmo

💫何故か朝から不毛なことをしてしまっていて、facetsをいじってのフィッシングみたいなことをやってみて警告を表示してくれるか確認したりなどをしていた。

あと地味にamazonのサムネイル画像取得とかを頑張ろうとブラウザの通信のharを撮りhtmlやjsを覗いてみたりなどしてしまった。

podhmopodhmo

2024-12-15

  • ogpを集めたい
podhmopodhmo

ブラウザで実行する方法は存在しないのかも？（cors周りで死ぬ）

でもblueskyのPWAはどうやってるんだろ？ふつうにサーバー側に通信してるのかな？

podhmopodhmo

2024-12-17

  • ogpをブラウザベースで取得する方法が無理だった
podhmopodhmo

ogpをブラウザベースで取得する方法が無理だった

apiサーバーを立ち上げないとだめそう。honoあたりで立ち上げる？
denoのhandlerを用意するのとどっちが良いんだろう？

とりあえずdeno serveで配信してみることを考えてみた。
手元で動かす分にはこれで良さそうだけれどクライアントサイドのreactをどうするかが悩みどころかもしれない。

https://gist.github.com/podhmo/a209e873077b67ac16dff5d619839462

podhmopodhmo

2024-12-19

  • viteをdenoから使ってみる (未実施）
  • rolldownを試す
podhmopodhmo

viteをdenoから使ってみる

一昨日はdeno単体で触ってみて昨日はhonoを触ってみて、routingが必要になったタイミングでhonoが便利だと感じたのだけれど、クライアントサイドを先に書いていきたい場合にはあんまりhonoが便利に機能しなそうな印象を受けた。

クライアントサイドでのコンポーネント作成にはviteが安牌だと思っているのでviteを試してみるということをしても良いかもしれない。

podhmopodhmo

starter templateやdocumentではoakが使われているが、これはhonoで良いのではないか？
そういえば一般的にはbundleの部分にgetElementById()をしてcreateRoot()とかをするコードを書いてしまうんだな。

deno run -A npm:create-vite@latest が動くかだけ確認しておきたいところ。

podhmopodhmo

何ができてほしいかの整理

  • 開発時のHMRとincremental build
  • 開発時のCORS的な設定
  • デプロイ前のビルド
  • （ルーティング）
podhmopodhmo

package.json以下に色々現れるとnode_modules/.bin以下のコマンドが自由に使える用になるのが便利ではある。

  • viteとvite previewの違いが分かっていない
  • vitejs/plugin-reactが必要なのを忘れそう

開発時のHMRもCORSも全部viteのdev serverがやってくれそう。。
そうなるとvite.config.tsの記述とプラグインの設定が重要になるのかも？

📝記憶が確かならindex.htmlの位置がデフォルトの設定としては重要だった記憶。

podhmopodhmo

2024/12/23

  • deno init --npm
  • deno + hono + reactを無理やり動かす
podhmopodhmo

対話的な操作がうるさい人感じることもある。

podhmopodhmo

deno init --serve は便利かも。deno init派使わなくなった。

podhmopodhmo

究極的にはviteをどこで動かすか？みたいな話になるし、実はdenoあんまり関係ないのでは？

podhmopodhmo

2024-12-29

  • podhmo/deno-glueにserveを追加する
podhmopodhmo

deno-glueにserveコマンドを追加する

昨日の続き。色々考えた結果 { fetch:(...) => Response } をdefaultでexportしていると動くようにすることにした deno serve と似たような機能を作る。

podhmopodhmo

denoの環境変数

今まで jsr:@std/dotenv/load を使っていたけれど deno run --env を使う方が自然なんだろうか？

podhmopodhmo

フロントエンド用の便利機能

見た目を整えるための整形の処理のときに

  • 変更した後にブラウザにフォーカスを当ててF5
  • browsersyncみたいに何らかの手段でブラウザリロード
  • viteとかでよくあるようにHMR (hot module replacement)

で現状は一番上になっていて悲しい。viteを頑張るのをふつうの人には勧める。

denoの --watch-hmr をどのように使えば良いのか分かっていない。

podhmopodhmo

2024-12-30

  • ブラウザリロードしてくれる君
ログインするとコメントできます