🔔 あなたへのおすすめ記事「For you（β）」をリリースしました
Zenn
Open145

2025

podhmopodhmo

2025年版

はじまり

  • 記事の目的

この記事の目的

zennのscrapsはかなり便利なのだけれど、不要なscrapを立ち上げてすぐに辞めるみたいな作業をしがち、そんなわけで一覧部分にはタイトルだけに近いようなメモの残骸が並んでSN比が悪くなる。
（これはgithub issuesも同様の問題）

github issuesより良いところは

  • リンクを貼るとcard UIで良い感じにOGP的な情報を展開して表示してくれる
  • github discussionsと同様に複数の枝を持たせて各枝毎にコメントを書くことができる

そしてChangeLogメモのように一箇所にまとめるという意味で一箇所に集約してみると良いのでは？という感じになった。というわけで2024年版をここに書くようにする。

ついでに、作ったscrapsのメモをここに載せていくようにしてあげれば大きな意味でのmeta scrapsに使える気もした。

podhmopodhmo

後で振り返って冒頭を変更したい

今年は去年よりはマシみたいな感じかも？（2024年の総括）

  • 途絶えてた文章の出力がマシになった
    ‐ 去年はx/twitterだけに近い
    ‐ 今年は1つのzenn scrapを伸張し続けられた
    • 後半はgistが復活し始めた
  • goからdenoに興味が移りかけてる
    • ローグライトに近い遊び
    • 盆栽というか自作を楽しむ
podhmopodhmo

2025-01-01

  • htmlを書く練習がしたい
  • 自分用のホームページ
podhmopodhmo

すぐに飽きてしまった。pico.cssに関してはexamplesにあるものを見た目を眺めながら追加していくみたいな感じで良いきがする。ところでスマホからの場合にはCodeSandboxを見るときのストレスがひどい。使い物にならない。

https://4mrnhq.csb.app/

podhmopodhmo

カレンダーアプリを使いこなせていないので日程調整が苦手すぎる

podhmopodhmo

2025-01-02

  • jsr:@podhmo/glue@0.2.1
  • react-router
podhmopodhmo

jsr:@podhmo/glue@0.2.1

今まで作っていたやつをjsrにアップロードした

  • サブコマンドで動かせるようにした
  • initコマンドを作った

https://zenn.dev/link/comments/aa8385c6bbca8b

jsr.io へのパッケージのアップロードの話

💭yankができてもjsrは一度publishしたものを変更することはできない。素直にrcとかpre-release的な運用をするべきなのかもしれない。毎回0.2.0とか切りの良いバージョンでのpublishに失敗する。

CLIの話

あとバージョン情報はどこかで持っていた方が良いのかもしれない。pip freeze的なものが存在指定無さそうなので。

podhmopodhmo

deno install

deno install -gはどうやらデフォルトでは $HOME/.deno/bin あたりにインストールされるらしい。あるいはDENO_INSTALL_ROOTの環境変数以下のbinにインストールされるらしい。

$ deno install -g -A jsr:@podhmo/glue@0.2.1 --name podhmo-glue

とかしてみた。

podhmopodhmo

react-router

いじっていたらなんか厳しい感じになっていそう？

https://gist.github.com/podhmo/86649d8ef158a5b903fbd866c18d9d5c

  • react-router@7はreact@19に依存していそう？(18だと上手く動かない）
  • react@19はesm.shだとdevelopmentモードじゃないと動かない
  • deps=react@18,react-dom@18と指定しても上手く動いてくれない
podhmopodhmo

glueで追加でquery stringを要求したときに上手く動いてくれ無さそう
depsの指定に対応する必要がありそう？(deno.lockを覗く？)

podhmopodhmo

変に自作しないでここにコードを渡してあげたほうが良かったりする？

https://esm.sh/#building-module-with-custom-inputcode

import build from "https://esm.sh/build";

const ret = await build({
  dependencies: {
    "preact": "^10.13.2",
    "preact-render-to-string": "^6.0.2",
  },
  code: `
    /* @jsx h */
    import { h } from "preact";
    import { renderToString } from "preact-render-to-string";
    export function render(): string {
      return renderToString(<h1>Hello world!</h1>);
    }
  `,
  // for types checking and LSP completion
  types: `
    export function render(): string;
  `,
});

// import module
const { render } = await import(ret.url);
// import bundled module
const { render } = await import(ret.bundleUrl);

render(); // "<h1>Hello world!</h1>"
podhmopodhmo

2025-01-04

  • denoでpreactに型がつかない
  • 依存関係を真面目に記述すればesm.shでreact@19を動かせるか試す
  • v0も動かしてみたい
  • vendoringしてるdenosaurs/cacheのキャッシュの持ち方を変えた
podhmopodhmo

denoでpreactに型がつかない

deno lintのエラーは解決する

全部を @jsxRuntime automatic と @jsxImportSource で統一したい。そうするとdenoのlintのエラーが無くなる。

こういうエラー。

$ deno lint
error[verbatim-module-syntax]: All import identifiers are used in types
 --> /home/po/ghq/github.com/podhmo/deno-glue/testdata/src/cards-component.tsx:3:1
  |
3 | import { h } from "npm:preact@10.5.13"
  | ^^^^^^
  = hint: Change `import` to `import type` and optionally add an explicit side effect import

  docs: https://lint.deno.land/rules/verbatim-module-syntax

deno-lsでの型がanyになるエラーが解決できない

一方で、tsxを開いたときのhtmlタグへの型が上手く認識されていないみたい。ちょうどreactで@jsxImportSourceTypes npm:@types/react 的な物を忘れたときの感じ。

JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.

どうやら.d.tsを上手く呼んでくれれば良いらしいのだけれど、型情報はここにある。

https://github.com/preactjs/preact/blob/df1f20d5eaf9fa1f39a8251e41321ecf3b53d78d/src/jsx.d.ts#L2623

podhmopodhmo

この時の状況に近しいそうなのだけれど。。

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

import { type JSX } from 'npm:preact@10';

としても以下のようなメッセージが出る。

Namespace '"file:///home/po/.cache/deno/npm/registry.npmjs.org/preact/10.5.13/src/jsx".JSXInternal' has no exported member 'FunctionalComponent'.

あとなんだかReactのnamespaceとして認識されているみたい？

Cannot find name 'React'. Did you mean 'preact'?

podhmopodhmo

これとおんなじ感じでキャッシュを消したりどうこうしたりとかと言われていて辛い。

https://github.com/denoland/deno/issues/20582

ちなみに自分の現状

  • deno.jsonのcompilerOptionsは空（全部tsx側でヒントを追加している）
  • deno checkは型エラーを起こさない
  • deno language serverでanyのエラーが出る
podhmopodhmo

vendoringしてるdenosaurs/cacheのキャッシュの持ち方を変えた

  • 元の実装: prefix + sha-256を単純に文字列化
  • 今の実装: prefix + sha-256をhex化したものの先頭2文字 + sha256をhex化したもの

最初は雑に元の実装でヌル文字が出てくるのを抑制するためにreplaceで取り除くみたいな対応をしてたけれどこれって衝突確率上がるよなーとか思ったりした。結局真面目な感じにやった。

こんな感じ

$ /home/po/.cache/deno/podhmo-glue/https/esm.sh/
/home/po/.cache/deno/podhmo-glue/https/esm.sh/
├── 02
│   ├── 024918a2bd912a6402761400bbd88be111c489f6d6ba4efd03384a10463b58c0
│   └── 024918a2bd912a6402761400bbd88be111c489f6d6ba4efd03384a10463b58c0.metadata.json
├── 09
│   ├── 09caff866810183a8af0d31faaf68a3d52a8817e597c5699eb4a7a6272361eb0.mjs
│   └── 09caff866810183a8af0d31faaf68a3d52a8817e597c5699eb4a7a6272361eb0.mjs.metadata.json
├── 0f
│   ├── 0f28e32feef847c5516653f5990a9c7dac360f95ab1d926b10d5d0cfba32416b.js
│   └── 0f28e32feef847c5516653f5990a9c7dac360f95ab1d926b10d5d0cfba32416b.js.metadata.json
├── 39
│   ├── 393444a2b028d7fd9a8c79828d525e3c7fc8c4c1ba57aee0777fd964f4c81434
│   └── 393444a2b028d7fd9a8c79828d525e3c7fc8c4c1ba57aee0777fd964f4c81434.metadata.json
├── 96
│   ├── 961a4c68016956a8cf639585afa60924bd335b27c8c32b290262c3fe72d9e11d.mjs
│   └── 961a4c68016956a8cf639585afa60924bd335b27c8c32b290262c3fe72d9e11d.mjs.metadata.json
├── a6
│   ├── a6c34286d1d97cc1d6c76d1839e3fdd87acdaafb2eeb3feb35ac05221a90382b.mjs
│   └── a6c34286d1d97cc1d6c76d1839e3fdd87acdaafb2eeb3feb35ac05221a90382b.mjs.metadata.json
├── ae
│   ├── ae37f7cad8b022c86514797e01b6276f474dd129857537976d09eca5cb942399.1
│   └── ae37f7cad8b022c86514797e01b6276f474dd129857537976d09eca5cb942399.1.metadata.json
└── ef
    ├── ef41068c009cb9899696a6bb54986e770d8689981775da87e23b163908eee3a0.js
    └── ef41068c009cb9899696a6bb54986e770d8689981775da87e23b163908eee3a0.js.metadata.json
podhmopodhmo

2025-01-06

  • 書いてみたコードの共有はcodepenが良いかも？
  • reactのいろいろなライブラリをesm.sh経由で実行してみたい (失敗）
podhmopodhmo

書いてみたコードの共有はcodepenが良いかも？

前提として

  • １つのアプリを少しずつ手を加えていくのではなく今日作って今日捨てる
    • html,css,jsあたりの練習が主
    • 可能なら1日の間に何個も試したい。プロジェクトを作りたくない。
  • 成果物を利用したいわけではない。メカニズムを理解したい(deployしたくない)
    • 実行可能な形でコードを共有したいがbundleなどしたくない
  • スマホでも表示を確認したいし、コードの内容も把握したい

というのがある。

候補としてはstackblitzやcodesandboxもあったがこれらはスマホで見るのが厳しい。加えてnpmの環境なども要らなかったのでcodepenが良さそうだった。

https://codepen.io/podhmo-the-animator/full/Wbedvdd

例えばこういう感じでgistのあとにcodepenのURLを載せる

https://gist.github.com/podhmo/3be87fa19d53bbe074ec30db4bea1918

podhmopodhmo

APIを必要とするものになったら手元で動かす事ができるが共有はできない。
（cloudflawre workerだとかcloud runだとかになる）

podhmopodhmo

reactのいろいろなライブラリをesm.sh経由で実行してみたい（失敗）

幾つか試そうとしてみた

  • react-markdown
  • MUI
  • v0 (shadcn)

どうやらすべての依存を書き出して実行するとエラーになるみたい。

  • URLが長すぎる
  • 依存の書き出しを間違えている

CDNのキャッシュのあたりでエラーが返ってきているので原因はわからない（URLが長すぎる場合は520が返るみたいなことは書かれては居た）

https://gist.github.com/podhmo/395689b310af88566f1df31ed218592d#file-readme-md

http "https://esm.sh/react-markdown@8.0.7?deps=@types/debug@4.1.12,@types/hast@2.3.10,@types/mdast@3.0.15,@types/ms@0.7.34,@types/prop-types@15.7.14,@types/react@18.3.18,@types/unist@2.0.11,bail@2.0.2,character-entities@2.0.2,comma-separated-tokens@2.0.3,csstype@3.1.3,debug@4.4.0,decode-named-character-reference@1.0.2,dequal@2.0.3,diff@5.2.0,extend@3.0.2,hast-util-whitespace@2.0.1,inline-style-parser@0.1.1,is-buffer@2.0.5,is-plain-obj@4.1.0,js-tokens@4.0.0,kleur@4.1.5,loose-envify@1.4.0,mdast-util-definitions@5.1.2,mdast-util-from-markdown@1.3.1,mdast-util-to-hast@12.3.0,mdast-util-to-string@3.2.0,micromark-core-commonmark@1.1.0,micromark-factory-destination@1.1.0,micromark-factory-label@1.1.0,micromark-factory-space@1.1.0,micromark-factory-title@1.1.0,micromark-factory-whitespace@1.1.0,micromark-util-character@1.2.0,micromark-util-chunked@1.1.0,micromark-util-classify-character@1.1.0,micromark-util-combine-extensions@1.1.0,micromark-util-decode-numeric-character-reference@1.1.0,micromark-util-decode-string@1.1.0,micromark-util-encode@1.1.0,micromark-util-html-tag-name@1.2.0,micromark-util-normalize-identifier@1.1.0,micromark-util-resolve-all@1.1.0,micromark-util-sanitize-uri@1.2.0,micromark-util-subtokenize@1.1.0,micromark-util-symbol@1.1.0,micromark-util-types@1.1.0,micromark@3.2.0,mri@1.2.0,ms@2.1.3,object-assign@4.1.1,prop-types@15.8.1,property-information@6.5.0,react-is@16.13.1,react-is@18.3.1,react@18.3.1,remark-parse@10.0.2,remark-rehype@10.1.0,sade@1.8.1,space-separated-tokens@2.0.2,style-to-object@0.4.4,trim-lines@3.0.1,trough@2.2.0,unified@10.1.2,unist-util-generated@2.0.1,unist-util-is@5.2.1,unist-util-position@4.0.4,unist-util-stringify-position@3.0.3,unist-util-visit-parents@5.1.3,unist-util-visit@4.1.2,uvu@0.5.6,vfile-message@3.1.4,vfile@5.3.7"

これくらいなら通る。

http "https://esm.sh/react-markdown@8.0.7?deps=react@18.3.1"

Dockerとかで動かして試してみるしかないかも？

https://github.com/esm-dev/esm.sh/blob/main/HOSTING.md#deploy-with-docker

podhmopodhmo

一足飛びにやりすぎたのかもしれない。まずはrouterを動かすとかjotaiを動かすとかtailwindを動かすとかから始めたほうが良さそう。

podhmopodhmo

Tailwindとかはesbuildの範疇を超えるから、remix,next.jsとか使うか、viteを使うか,,みたいな感じになるのかな？

podhmopodhmo

2025-01-10

  • denoのcliをgithubのURLからinstallしたい
  • denoでdeno.lockされたパッケージの依存を更新したい
  • denoで自分自身の親ディレクトリを知りたい
podhmopodhmo

denoのcliをgithubのURLからinstallしたい

この例だと1ファイルのことしか書いていない気がする。deno.jsonを見るようなプロジェクトでは上手く動いてくれない。

$ deno install https://raw.githubusercontent.com/podhmo/deno-glue/refs/heads/main/main.ts --global --name podhmo-glue -f

https://github.com/denoland/deno/issues/5543

podhmopodhmo

どうやらローカルでinstallする場合にはdeno.jsonを読み込んでくれないらしい。ディレクトリを指定したらそのdeno.jsonを呼んでくれたりすると嬉しいがそんなことはなかったみたい。

--configオプションで明示的に指定してmain.tsを明示的に指定する必要があるみたい。

$ deno install -A -f --name podhmo-glue --global --config deno.json ./main.ts
podhmopodhmo

2025-01-12

  • 色々な例を追加したい
  • denoのhttp serverちょっとおそい？
  • 簡単なPWAを試したい
podhmopodhmo

いろいろな例を追加したい

  • simpleなreactのtutorial
  • 何らかのrouterを使ったような例 (client side routing)
  • 複数のtsxを同時にサポートするような例 (server side routing)

した

https://github.com/podhmo/deno-glue/tree/main/examples

コピペも辛い気がするけれどどうするのが良いんだろう？

podhmopodhmo

error boundaryのようなものなど不足している部分を埋めておきたいかも？

podhmopodhmo

denoのhttp serverちょっと遅い？

esbuildを実行したりなどしたhandlerが遅い(0.7s)かと思ったがそもそもhonoのシンプルなapiを書いてみても0.4s程度掛かっていた。

app.get("/api/hello", (ctx: Context) => {
  return ctx.json({ message: "hello" });
});

それならhonoのオーバーヘッドが重いのかと思ってdeno init --serveの結果を試してみたところあんまり変わらなかった(0.4s)。これはwsl上で立ち上げたサーバーにwsl上でhttpieでリクエストしたもの。WSL上でのrequestが重いのかも？

podhmopodhmo

📝スマホのブラウザでスーパーリロードをする方法がわからない。chromeで過去のPWAのキャッシュが消せない。特定のサイトのデータだけを選んで消す方法が見つからなかった（期間しか選べない）

podhmopodhmo

2025-01-13

  • web.devのPWAのやつを読み返してみていた
  • スマホ用にtitle,urlをいい感じにmd形式でコピーするPWAをつくった
podhmopodhmo

web.devのPWAのやつを読み返してみていた

スマホからchromeの翻訳経由で読んでいた。概ねゲーム用の機能かも？と思ったけれどweb share APIとかweb share APIはスマホ用に使えるかも？と思ったりした（OS integrationの章）。

https://web.dev/learn/pwa/

そしてweb.dev的な雰囲気のページを読むのに似た技能をChatGPTなどの応答を読むのにも使う気がする。それは概ね読み飛ばす的な技能なのだけれど、それは母国語でないと厳しい感じがあり、この辺でスペック差が開くなーと思ったりした。

中身の薄い水っぽい文章を読み取ることになるので。

podhmopodhmo

スマホ用にtitle,urlをいい感じにmd形式でコピーするPWAを作った

web share target APIが便利。
特に不要そうなservice workerが存在しないとスマホ側でPWAとして認識されない場合がある（？）

https://podhmo.github.io/pwa/mdcopy

podhmopodhmo

ブラウザで文字列を選択して渡せるな。
そういう方法もあるのか。

podhmopodhmo

画像も共有できるのか何かやれることあるかな…

しかしこの場合にはPOSTを受け取る必要がありそう。この場合にはgithub pagesでは対応できなそう。

podhmopodhmo

2025-01-18

‐github issueを各自が母国語で書いても問題ない感じにできるか？

podhmopodhmo

github issueを各自が母国語で書いても問題ない感じにできるか？

ということを考えてみていた

codepenにテキトーにそれっぽいページを作ってみたがダメそうだった。真面目に自分で変換しないと対応はできない。

https://codepen.io/podhmo-the-animator/full/OPLwmdG

podhmopodhmo

2025-01-19

  • gistを投稿するときにreadmeからタイトルを取りたい
  • react-markdown余計じゃない？
  • viteをscaffoldとして使うところが多い気がする
podhmopodhmo

gistを投稿するときにreadmeからタイトルを取りたい

selfishでできるようにした。
あと依存とか諸々更新した。

そして画像が投稿できるようになってたことに気付いた。

podhmopodhmo

viteをscaffoldとして使うところが多い気がする

↓をやっていて思った

https://gist.github.com/podhmo/12bab21eebdd5887110a19f8985c4e23

  • viteをstarter kitのscaffoldのinfraとして使うことが多い
  • いちいちgistで共有可能な形にするために書き換えるのは不毛なきがする
    • ネストしたディレクトリをフラットな構造に変換している
    • import部分を全部denoの形式に変換している
    • vite上では動くのに書き換えたあとは動かない
  • (cssをいい感じに読み込んで変換しているような感じがしている。esm.shでcssを取ってくる方法はどうやるんだろ？)
podhmopodhmo

それならいっそのことviteの形から始めて1枚htmlにまとめられるみたいな感じになってると嬉しいのでは？

importも自動で書き換えるとまでは言わないけれど変換してあげれば？

意外とcodepenで動かせるような形に変換することを考えるのは楽しいかもしれない。
（本題からどんどん外れているけれど）

  • viteのようにcssのimportに対応する
  • ネストしたファイル構造をフラットにする（ これはgist用）
  • index.htmlにcssを追加で書けるようにする
    • serveはそれで問題ないけれどbundleは無理では？
podhmopodhmo

2025/01/31

  • 手軽にsystem instructionを保持したUIが欲しい
  • mac上のemacsでもddskkを使えるようにする
podhmopodhmo

emacsでも...

  • emacsでも少なくともsyntax highlightは欲しいかも？
  • emacsでも少なくともformatterは欲しいかも？
  • (emacsでの入力は(mac上でも)skkにしたいかも)
podhmopodhmo

mac上のemacsでもddskkを使えるようにする

なるべくemacs側の機能を使ってインストールすることにする
(辞書はemojiを使いたいのでutf-8にする)

melpaから取得できるようにする。

(setq package-archives  `(("melpa" . "https://melpa.org/packages/")  ("melpa-stable" . "https://stable.melpa.org/packages/") ,@package-archives))

(package-initialize)
;; M-x package-list-packages で ddskk をinstall

M-x skk-getで辞書の取得をする。~/.emacs.d/skk-get-jisyo 以下にダウンロードされる。

ユーザー用の辞書は以下のような感じで変換しておく。

$ cp .skk-jisyo{,.bak}
$ iconv -f EUC-JP -t UTF-8 -o .skk-jisyo.utf-8 .skk-jisyo
$ file .skk-jisyo.utf-8
.skk-jisyo.utf-8: Unicode text, UTF-8 text
$ mv .skk-jisyo{.utf-8,}
# $ rm .skk-jisyo.utf-8

設定でutf-8で読み込むようにしておく

 (setq skk-jisyo-code "utf-8") ; jisyoのエンコーディングをutf-8にする

ミニマムな辞書の設定 (~/.skk-jisyo)

;; okuri-ari entries.
;; okuri-nasi entries.
tada /🎉/
memo /📝/
thought /💭/
こんにちは /今日は/
today /(skk-current-date (lambda (date-information format gengo and-time) (format-time-string "%Y-%m-%d" (current-time))))/(skk-current-date)/

参考

podhmopodhmo

2025/02/04

  • vm作る部分だけでも眺めてみたい
podhmopodhmo

2025/02/10

  • webでのテキストの読み上げ
podhmopodhmo

モデル変えようとすると途端に難しくなるというかクライアントサイドのみでやれなくなりそう。
（ voiceboxとかはサーバーを建てないとダメそう）

podhmopodhmo

2025-02-14

  • emacsの設定の調整
podhmopodhmo

emacsの設定の調整

  • tab-bar-modeのバグを直す
  • ok emacsでのtab-bar-modeの現状の設定をしらべる
  • ok emacsでfind-fileの補完をcase insensitiveでやりたい
  • ok emacsで/tmp以下を開くと自動保存が無効になる？
  • ok emacsでM-.でgoto definitionしたあとにM-*で戻ってきたい(M-,を使うのが良い)
  • ok emacsでredo/undoを動かせるようにする (undo/undo-redo)

詳細

emacsでのtab-bar-modeの現状の設定をしらべる

  • emacsclientで開いたときには常にタブを開くようにする
  • kill-buffer時にタブも消えるようにする
  • 重複したタブが開かれるようにするのを防ぐ
  • (debug的なbufferが常に表示されるとだるいかも)

find-fileの補完をcase insensitiveでやりたい

  • mini-buffer-completionが実行されている

  • read-file-nameが使われている

  • read-file-name-defaultが使われている

  • この中で `read-file-name-completion-ignore-case' を見て補完時の大文字小文字を無視できるようになる

See also read-file-name-completion-ignore-case' and read-file-name-function'."

emacsで/tmp以下を開くと自動保存が無効になる？

  • (auto-save-visited-mode -1) を実行しているせい
  • (setq-local auto-save-visited-mode nil) が正しい
  • (あるいは auto-save-visited-predicateを設定する)

You can also set the buffer-local value of the variable auto-save-visited-mode' to nil. A buffer where the buffer-local value of this variable is nil is ignored for the purpose of auto-save-visited-mode', even if `auto-save-visited-mode' is
enabled.

emacsでM-.でgoto definitionしたあとにM-*で戻ってきたい

  • M-.はxref-find-definition
  • M-,でxref-pop-marker-stack

📝{, . /} というキーバインドので混乱していたみたい undoは {. /} のペア

podhmopodhmo

2025-02-17

  • esbuildでのcssの取り扱い
podhmopodhmo

esbuildでのcssの取り扱い

  • bundle css、 単にbundleされるだけ
  • from js、 jsの中でcssをimportするとjsと同名のprefixをファイル名として持つcssが生成される(app.js, app.css)。
  • css modules、 <name>.module.css という形式のファイルをjsからimportすると良いかんじにファイル名をprefixとして使う code.module.css の .normal が .code_normal に変換される。

https://gist.github.com/podhmo/69b1d15c83e4234ea62b386527632720

podhmopodhmo

2025-02-18

  • 環境作成（？）
podhmopodhmo

環境作成（？）

環境作成という言葉は適切ではないような気がする。macではhomebrew、windowsではwslに閉じこもってaptとかほんとに便利なんだろうか？とはいえnixとか辛い。devboxとか使う？

https://www.jetify.com/docs/devbox/quickstart/

podhmopodhmo

個別にインストールして管理しないならbrewとかで良くないか？と思ってしまう。
（設定とか含めてansibleとかで管理してた人とかは嬉しい？）

podhmopodhmo

2025-02-19

  • 分割されたページを全部渡したい
podhmopodhmo

2025/02/22

  • viteのproxy周りを理解したい
podhmopodhmo

viteのproxy周りを理解したい

  • 少なくともAPIを呼び出したい
  • mock的な定義ではなくフルのAPIをimportして使いたい
  • deploy時の方の対応もしたい
  • incremental buildが機能して欲しい
podhmopodhmo

2025-02-25

  • 同一ホストで複数のPWAの提供
  • 複数のmodelに並列的にリクエストしたい
  • rust - js 間で自前アドレスで送受信
podhmopodhmo

同一ホストで複数のPWAの提供

普通にいけそうな感じだった。相対パスでregisterを呼ぶときにはscopeを明示したほうが良いんだろうか？

GETだけだと厳しいのでgithub actionsだけだと辛いかも（ スマホのアウトラインエディタの内容をmarkdownに変換するPWAが欲しい）

追記: できなそう…

podhmopodhmo

cat something したものをtoolにパイプで渡したいだけなのに…

podhmopodhmo

複数のmodelに並列的にリクエストしたい

claudeも試したい。
いっそのことツールを作る？（ 探せばある気がする）

共通の構造を定義するのにollamaとかを覗くと良いんだろうか？（ これ自体がchatgptのrequest/responseの形状を参考にしてるのだっけ？）

podhmopodhmo

rust - js 間で自前アドレスで送受信

denoのlintにjs側での制御を組み込もうとしてみたときの話。面白かった。

https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-11/

とはいえrolldownやesbuildでpluginの条件にfilterオプション（ 正規表現）を使えみたいなそもそもホスト言語から出るなみたいな話はずっとありそう（ ここでjsはゲスト言語）

podhmopodhmo

2025-02-26

  • スマホのアウトラインエディタからmarkdownの作成
podhmopodhmo

2025-02-27

  • mdlist-to-text
  • pwaではなくそのままアプリにした方が良いのかも？
  • スマホだけでアプリ作成を完結させたい
podhmopodhmo

mdlist-to-text

昨日のやつをPWAにした。
生成aiにコードの生成を任せようと頑張ってはみたものの上手くいかなくて結局自分でコードを書いた。かなしい。

github pagesに置いたが問題がある。

https://podhmo.github.io/pwa/mdlist-to-text

  • 長過ぎるとGETで受け取れなくてエラーになる
    • github pages自体はPOSTで受け取れない
  • 同一Origin単位でアプリが認識してしまっている？
    • 昔作ったmdcopyと干渉してしまっている?
    • /pwa/mdcopy と /pwa/mdlist-to-text を併存させたかった
podhmopodhmo

こうなってしまうしサイトデータ単位になってしまうのかな？

ドメインとか買いたくないよ

podhmopodhmo

pwaではなくそのままアプリにした方が良いのかも？

直接ネイティブアプリを作ったほうが良いかも？とりあえず前作ったmdcopy（単にブラウザから共有するとmarkdownのリンク形式でクリップボードにコピーするだけ）をネイティブアプリにしてみる。

本当は対話した後にプロンプトを作って欲しかった。

https://chatgpt.com/share/67c0d167-4034-8001-8b3b-eeac44b0c9bf

手動でプロンプトを弄ったもの

https://x.com/i/grok/share/OTz3RNoVZkAPkrahyRhkOGrub

claudeはなんか大量に出力してくれた。

https://claude.ai/share/2a8f896d-0435-44ca-adae-a0a75f678e3e

podhmopodhmo

動くかどうか試せてない。スマホだけから試す分には手順は

  • 仕様などを出力したプロンプトを対話的に作る
  • 作ったプロンプトをそのまま流す
  • （github actionsなどでビルド/テストされることを確認する）

とかになりそうだけれど性善説というか楽観的過ぎる方法かも？あとclaudeなどがワッと作ったファイル群を手軽にgithubのrepositoryに置きたい。スマホだとコピペ対応は無理…

podhmopodhmo

スマホだけでアプリ作成を完結させたい

（回答の精度みたいなものは一旦置いておくとして）

色々雑にgrokのdeepsearchに絡んだ。厳しい。個別にダウンロードを強制させられる時点で死ぬ。

スマホだけで完結したいんだ。ファイルのセットをダウンロードしてきてgithubにアップロードしてきてapkを得たい。

https://x.com/i/grok/share/WxSgCGxQz7ojSfktgzEOpzhvK

結局のところまとめてダウンロードがしたいのかも？いまひとつ良い回答が得られない。

リミットに達してしまったのでclaudeに訊く。

https://claude.ai/share/dbe26228-2bc8-494c-a0a8-c191549a5c89

回答をparseして複数ファイルをまとめて保存したいだけなんだ…

podhmopodhmo

こう言うのがせいぜい？

# モバイルアプリの基本構造を生成してください

以下の仕様に基づいたReactNativeアプリの基本ファイル構造を生成してください:

- アプリ名: TaskManager
- 機能: タスク管理、優先度設定、通知
- 必要ファイル: App.js, タスクコンポーネント、ナビゲーション設定

出力は以下のJSON形式で提供してください:

```json
{
  "project_name": "プロジェクト名",
  "version": "バージョン",
  "files": [
    {
      "path": "ファイルパス",
      "content": "ファイル内容"
    },
    // 他のファイル...
  ]
}
```

このフォーマットに厳密に従ってください。これにより私のスクリプトが自動的にファイル構造を生成できます。
podhmopodhmo

さらに延々とgrokと戯れる

本題はexplain
this postのボタンがuiから消えて、直接プロンプトに書けば良いという話を聞いて試したところから。スレッドも読んでくれるか不安だった。感覚的にはひとつのポストしか見てくれてない気がする（ボタンを押したときはスレッドを見てくれてた感があった）

その後は延々とgrokに絡んでた。

https://x.com/i/grok?conversation=1895257433486053848

途中なぜか拙い英語で話しかけたり、vscodeのclineはvscodeのcliと認識されることなどがわかった。あとURLを貼っても見てくれないかも？
（searchをonにしたときはそう。clineのpromptのソースコードのURLは見てくれなかった。あるいはoffでもtwitterのURLとか一部だけかも？）

podhmopodhmo

2025-03-06

  • grokにx/twitter のスレッドを読み込ませることに成功
podhmopodhmo

grokにx/twitter のスレッドを読み込ませることに成功

スマホでは入出力に難を抱えてるのでまとまった入力をaiに渡す方法が限られてる。

あとx/twitterに一度書いた内容を食わせられるaiは現状grokだけな気がする。一時期 explain this postボタンが投稿の脇に存在していてそれがスレッド全体を読み込んでくれてそうだったのだけれど消えてしまった。

以前に試行錯誤したときは上手くいかず余分なものも検索したりフェイクの入力を読んだりしてたがプロンプトでどうにかする方法がわかったのでメモ（）単なる改善の結果かもしれない。

https://x.com/podhmo/status/1897648003780919577

explain this thread 
<url>

A thread is a post on X/Twitter and its replies.

都合よく英語でのプロンプトのおかげで英訳された結果も貼られて勉強になる（？）

podhmopodhmo

もっと豪華なのはこんなやつ

<x post URL>
Provide a detailed analysis of the following X thread (including the original post and its entire reaction chain). In this thread, the initial poster presents a specific topic or idea, and subsequent reactions from other users include opinions, questions, or additional insights. Focus on the following aspects in your analysis:
- The content and intent of the initial post, including its context and background.
- The flow of discussion and key themes that emerge through the reaction chain.
- Any memes referenced, alluded to, or implied within the thread, including their definitions, cultural significance, origins, and how they enhance or shape the conversation.

Clearly articulate the original poster's intent, explore how the reaction chain deepens or expands the discussion, and offer a technical, social, and cultural perspective on the thread’s dynamics, with a particular emphasis on the role and impact of memes.
podhmopodhmo

2025-03-08

  • grokは基本的には記事の本文を読まないみたい
  • ログが透けて見えるやつが嬉しい
  • 自分用のscraper的なものを手元に持っておいたほうが良いかも？
podhmopodhmo

grokは基本的には記事の本文を読まないみたい

あるgigazineの記事を対象にその記事が参照してる元の論文を探させようとした（記事の本文の中にその論文へのURLは存在する）

この記事の元の論文を探して
https://gigazine.net/news/20250307-age-cognitive-skill/

これでは上手くいかなかった。どうやらすぐに検索に移行してしまうらしい。

https://x.com/i/grok/share/vJ5zxgByIwqJHCmMn1vzXyEAM

昨日はx/twitterのスレッドを読み込ませることに成功して喜んでいたが例外的な状況だったらしい。

deepsearchでは

deepsearchのオプションを付けた場合には紆余曲折のあとに成功した。

https://x.com/i/grok/share/7QvwDpCiO9RLCZ5l9ZgnhIwzg
とはいえthinkingのログを覗くとurlを構築したり本文が読めないという言葉を繰り返してたり何だか怪しい感じの挙動。

（余談: 雑に眺めて挙動を推測した感じだった。この時の振る舞いをいい感じに要約させたい。コンテキスト長の問題でサポートしてるのはgeminiだけだっけ？）

もしかして日本語の記事は英語ではないと判断して捨てるみたいな挙動をしたりしてる？ということが気になったりした。

基本読めてなさそう

別の会話を開いて、

explain this article <URL>

この回答を得るのに何を参照しましたか？

みたいなプロンプトを投げまくってみた。

https://x.com/i/grok/share/zc6TpckjK5YuzFhQ2ajjhsVFp

  • 日本語の記事 ❌️
  • 英語の記事 ❌️
  • 元の論文のURL ❔️

直感的には全て英語で捉えて英語以外の言語がやってきたときには翻訳をかけて読み込むなどと頑張らず素直に打ち切るみたいな処理になってると思ったのだった。

英語であっても本文は読んでなさそうだった。基本的には検索しかしなさそうだった。
一部元の論文のURLを投げたときにはそれっぽい回答をしてる面もあったけれど、特別対応されるdomainが存在するかなどはわからない（wikipedia辺りはされてるかもしれない？）。単にabstract単位では至る所で切り貼りされたサイトが散在してるが故に結果的に上手く取り出せただけかもしれない。

podhmopodhmo

たぶん検索してdescriptionを読むくらいな感じそう。

podhmopodhmo

2025-03-27

  • MCP
  • プロンプトエンジニアリング
podhmopodhmo

MCP

そういえば仕様とかもざっくりとか知らないし。雑にでも実装したことがない。

💭内部的なopenapiの定義を書いていくことでクライアントを作成していい感じにやることを夢見てた時の延長線上の話だよな。特にクライアントが自動で糊としてついてくるところが。

https://modelcontextprotocol.io/docs/concepts/architecture

実装

基本的にはRPC的なものを用意するだけっぽい。

https://github.com/modelcontextprotocol/servers/blob/202f6c5e587b9530bf04e34e80d693a65f5b5bd2/src/filesystem/index.ts#L333

esaのものを書いてた人の実装とかを見るとわかりやすそう

https://github.com/d-kimuson/esa-mcp-server/blob/main/src/index.ts

podhmopodhmo

2025-03-28

  • 久しぶりにEmacsで遊ぶ (widget)
  • HTMLでやってみた
podhmopodhmo

久しぶりにEmacsで遊ぶ (widget)

あんまり使われることがない（使ったことがなかった）widgetパッケージを使って遊んでみることにした。

これが書いたelisp。
M-x my:widget-example からはじめて C-c n や C-c d でノードの追加と削除が出来る。

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

最初はgrokやgeminiにコードを生成してもらおうかとしたが全然上手く動かなかった（grokはノードの追加で壊してた。geminiは2.5 PROを使って一見もっともらしいコードを生成したが存在していないkey-mapの変数などを参照したりなどしてそもそも動かなかった）。一方ドキュメントの検索としての機能としてはとても役に立った。

https://x.com/i/grok/share/FAnxT3HcfHTB3rJth9wRXGMeU

はじめはドキュメントのコード例から始める (実際のところswitch-to-bufferよりもpop-to-bufferのほうが便利）

https://www.gnu.org/software/emacs/manual/html_mono/widget.html#Programming-Example

インデントをつけた表示をやりたくてgroup widgetの使い方にはまったりなどしてた。

podhmopodhmo

地味にerace-bufferをするときにwidgetのread-onlyなoverlayの部分にアクセスしようとして上手く消せなかった。こんな感じにしてあげる必要があった。

      (let ((inhibit-read-only t))
        (delete-all-overlays buf)
        (erase-buffer))
podhmopodhmo

あとまっさらな環境でEmacsを立ち上げたかったので以下みたいな感じで実行しまくっていた。

$ emacs -q -l ~/.emacs.d/widget-example.el
podhmopodhmo

まぁテキスト化してクリップボードにコピーする機能はつけたけれどテキストから読み込む機能とかないし、スマホから使うと文字を入力している最中に追加のボタンが押せないなどわりと使いにくかったりするけれど。

podhmopodhmo

gemini版のほうが入力中にノードを追加できたので便利。何も言わずともexport機能を作ってくれていた。でもファイルダウンロードだった。

podhmopodhmo

2025-03-30

  • 昨日のemacs lispをリファクタリングしてもらう
podhmopodhmo

昨日のemacs lispをリファクタリングしてもらう

geminiはきれいに動かないコードを生成したし、リファクタリングとかなら上手くいくんじゃないか？（gemini 2.5 pro）

スマホから実行するのに面倒なのでsystem instructionのところに作業の指定を書いて、初回の入力はコードだけにした。

https://aistudio.google.com/app/prompts?state={"ids":["1Wc1SDxR08wFRK1MOJ9XE7j2bY1Ya_-g1"],"action":"open","userId":"108405443477417806091","resourceKeys":{}}&usp=sharing

まだ試せてない

podhmopodhmo

試した

普通に初手からぶっ壊してきたな。widgetのoverlayなんて取得できないのに。。

ヘルプメッセージとか変数や定数の定義とかは嬉しいからそれくらいで終わりそう。

🚧 壊れたところ

  • nodeの追加時の移動でoverlay取得しようとしたが失敗
  • nodeの削除時の確認でwidgetのtypeを取得するときwidget-typeではなくwidget-getに:typeを指定して取ろうとして失敗
  • widget-forwardに謎の引数を与えて失敗 （widget-moveから勝手に変える, suppress-echo分の引数を余分に与える）
  • 全部走査して文字を集めてくる部分をぶっ壊す（移動の関数が戻り値を返す前提でコードを書き換える条件式が壊れる）

基本的には、widgetとのコミュニケーションの問題(widgetのコード自体は読んでないのか)。
まぁ悪い感じのコードというか既存の実装に従ったhackyなコードの部分が壊れたといえなくはないが..。一番嫌な動作確認的な受け入れテストだけをやらされている感じ。これでできましたとかPR出されたらキレるレベル。

podhmopodhmo

普通にjson的な何かとして保存して読み込んだときにuiを作る仕組みの方が良いかもしれない。.ipynbの再発明だ。

こんなのでコードを書き換え直させてたけれどだめだった。

あなたはEmacsを利用する開発者です。書いたコードは実験用のものです。これを公開したelispパッケージのようなきれいな形に変換したいです。関数名のprefixはchain-text:に変更してください。

以下のコードに対して、次の制約の下で改善を行ってください。  
- コードの振る舞い（機能）は一切変更しない。  
- 実装のロジックや構造を大きく変更しない（アルゴリズムや制御フローの本質を変えるリファクタリングは禁止）。  
- 許可する変更は以下に限定する：  
  - 変数名や関数名の変更（意味が明確になる場合のみ）。  
  - マジカルナンバーやマジカルストリングを適切な定数や変数に置き換える（ただし、計算やロジックは変えない）。  
  - ドキュメントコメントの追加（トップレベルのコメントだけ追加してほしい。インラインの説明コメントは不要）。  
  - 一般的に公開パッケージに付与されるようなメタデータ（例：パッケージコメント、ライセンス情報）の追加。  
  - 補助関数の導入による関数の分割（ただし、元のロジックの意味が完全に等価であること。関数の呼び出しコストなどの差異は無視する）。  
  - その他、意味的に完全に等価な変換（コードの動作や実装の意図が変わらないもの）。  
- 以下の変更は一切行わない：  
  - 余分なチェックコードの追加（例：入力検証や境界チェック）。  
  - エラーハンドリングの追加や強化。  
  - 上記に該当しない機能的・構造的な改善や最適化。  
  

改善後のコードを返してください。

愚痴

生成されたプロンプトをそのまま使っているのが間違いかも？（大きな変更はしないと書かれていた事に気づいた。小さな変更はするのか。。）

podhmopodhmo

dired

  • widgetなどとは異なりtabとかで移動してくれないのか
ログインするとコメントできます