📰2024年14週 Weekly Report

# 🏆MVP ## Feniceが実用レベルに [[🦉Fenice]]の開発をはじめて1週間ちょっとが経った。 <div class="link-card"> <div class="link-card-header"> <img src="https://github.githubassets.com/favicons/favicon.svg" class="link-card-site-icon"/> <span class="link-card-site-name">GitHub</span> </div> <div class="link-card-body"> <div class="link-card-content"> <p class="link-card-title">GitHub - tadashi-aikawa/fenice</p> <p class="link-card-description">Contribute to tadashi-aikawa/fenice development by creating an account on GitHub.</p> </div> <img src="https://opengraph.githubassets.com/7d7c7891f0e4287ab9573fc1e9ea6ade5ac56404afb2b302faa9524defeb1272/tadashi-aikawa/fenice" class="link-card-image" /> </div> <a href="https://github.com/tadashi-aikawa/fenice"></a> </div> 名前の由来は『不死鳥』。アイコンもはじめに作成した。 ![[fenice.png]] [[WXT]]、[[Vue3]]、[[Bun]]、[[TypeScript]]という個人的にはイケイケの構成。[[SPA]]のように[[Chrome Extension]]を作るのは初の体験だったが、[[Chrome Extension]]であることを忘れるくらい快適。これは[[WXT]]の素晴らしさだろう。 <div class="link-card"> <div class="link-card-header"> <img src="https://github.githubassets.com/favicons/favicon.svg" class="link-card-site-icon"/> <span class="link-card-site-name">GitHub</span> </div> <div class="link-card-body"> <div class="link-card-content"> <p class="link-card-title">GitHub - wxt-dev/wxt: ⚡ Next-gen Web Extension Framework</p> <p class="link-card-description">⚡ Next-gen Web Extension Framework. Contribute to wxt-dev/wxt development by creating an account on GitHub.</p> </div> <img src="https://repository-images.githubusercontent.com/658389713/137a1235-0a50-4c93-8f12-6a01f9ebd405" class="link-card-image" /> </div> <a href="https://github.com/wxt-dev/wxt"></a> </div> [[🦉Fenice]]は集中力をキープしつつ[[Slack]]を使うために必要な機能を精査し、[[Chrome Extension]]として提供している。代表的なのが『投稿だけ画面』。 ![[Pasted image 20240408215407.png|frame]] *入力して投稿するだけのストイックな画面* 他channelの情報はおろか、投稿しようとしているchannelの情報すら見えないようになっている。画像と動画のいずれか1つまで、クリップボードから貼り付け可能だ。これは、**timesのように作業を垂れ流す用途ならばそれで十分だろう**という思想から来ている。他の投稿はノイズだし、独り言なら高度な投稿機能は不要なのだ。 ![[Pasted image 20240408215611.png|frame]] *投稿するとFeniceのcaptionが入る* 集中するのはいいが、その間にメンションなどで呼び出された場合は長く放置するわけにはいかない。そのために、重要なメッセージの条件をクエリで指定すると、1分ごとにメッセージを検索する機能がある。新しいメッセージがある場合にはデスクトップで通知されるし、メッセージは『重要なメッセージ確認』画面から確認、既読管理ができる。 ![[Pasted image 20240408220154.png|frame]] *Slackの投稿を再現してブラッシュアップしたUI* [[Slack Web API]]が返却するメッセージ形式に完全対応できていないため、一部のケースでは表示できない(上記の[[Bitbucket]]や[[Confluence]]のbot投稿など)。それでも、仕事で使える程度には十分に仕上がっている。現在はalpha版であるため、バージョンをつけてのリリースやストアへの登録はこれからだ。ただ、[[Bun]]が実行する環境であれば、誰でもビルドして取り入れることはできる。[[OAuth 2.0]]で[[Slack]]と認証して利用できるので、興味がある人は試してみてほしい。(多少のフォローは[[Bluesky]]で可能だ) # ✨Evolution Highlights ## Vue - [[Ctrl+EnterやCmd+Enterのイベントをハンドリング (Vue)]] - `exact`を付け忘れる別のキーバインドを奪われたり、`meta`をつけないと[[macOS]]で不便だったりと注意ポイントはいくつかある - [[DOMにフォーカス (Vue3)]] - 毎回書き方を忘れる. そしてこの`ref`は[[Template refs]]が正式名称なので注意 - [[フォールスルー属性 (Vue)]] - 最近複雑なUIをつくるときに`style`や`class`を上から流し込むコンポーネント設計にすることが多く、その際に実戦経験をつめた - 以下2点は経験しないと見落としやすいので要注意 - [[フォールスルー属性を無効 (Vue)]] - [[📝Vue3のコンポーネントでdefinePropsで定義していない属性を渡すとExtraneous non-props attributesのwarningがでる]] - [[コードをSyntax Highlight (Vue)]] - シンタックスハイライトもよく使うので、最近の書き方でコンポーネント化しておく - [[コードポイントを絵文字に変換 (JavaScript)]] - [[Slack Web API]]だと[[コードポイント]]の文字列で返却されるので表示するため必要 - [[📝Nuxt3でURLのクエリだけを変えてもリロードされない]] - router周りはどうも苦手意識がある. 何をkeyとするかが重要なケースでは意識したい - [[📝Vuetifyのv-list-itemにてpathまで同一、クエリが異なるページがあるときに複数のリストがアクティブになってしまう]] - 事象や原因を書く元気がなかったけど、困っている人いましたら是非参考に ## Neovim - [[lsp_dynamic_workspace_symbolsコマンドの結果から特定ディレクトリ配下を除外 (telescope.nvim)]] - [[Neovim]]でシンボル検索したいときにはやっておいた方がいい対応 - [[📝smart-open.nvimでcannot load module 'libsqlite3'エラーになる]] - [[Windows]]で[[smart-open.nvim]]使う場合の役に立てば ## Bun - [[📜2024-04-02 Bun 1.1.0にバージョンアップしてWindowsで動かしてみる]] - [[Bun]]がついに[[Windows]]対応したので試してみた. 簡単なコードだとちゃんと動いた - いまでは[[Linux]]と[[Neovim]]の世界でしか生きられないのでもう必要はない - ただ、[[Windows]]でも動くことはチームで開発するときに[[Bun]]を採用する大きな追い風になる - [[Bun]]を使いたいから[[WSL]]環境を整え、そこから[[Neovim]]に出会った... という意味では、実は愛のキューピット ## Slack Web API - [[📜2024-04-06 Slack Web APIで動画を投稿する方法の模索]] - 思ったより難しかった[[Slack Web API]]からの動画投稿. [[🦉Fenice]]で動画投稿機能をつくるために試行錯誤した # 🚀Releases なし。 # 👀Most Visited Page 95セクションで以下2つが同立。 <div class="link-card"> <div class="link-card-header"> <img src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/favicon-64.png" class="link-card-site-icon"/> <span class="link-card-site-name">minerva.mamansoft.net</span> </div> <div class="link-card-body"> <div class="link-card-content"> <p class="link-card-title">📒2024 Articles</p> <p class="link-card-description">2024年に書いた📒Articles。</p> </div> <img src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/%F0%9F%93%98Articles/attachments/articles-cover.jpg" class="link-card-image" /> </div> <a class="internal-link" data-href="📘Articles/📒2024 Articles.md"></a> </div> %%[[📒2024 Articles]]%% <div class="link-card"> <div class="link-card-header"> <img src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/favicon-64.png" class="link-card-site-icon"/> <span class="link-card-site-name">minerva.mamansoft.net</span> </div> <div class="link-card-body"> <div class="link-card-content"> <p class="link-card-title">📝pip installするとexternally-managed-environmentエラーが出る</p> </div> <img src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/Notes/attachments/minerva-image.webp" class="link-card-image" /> </div> <a class="internal-link" data-href="Notes/📝pip installするとexternally-managed-environmentエラーが出る.md"></a> </div> %%[[📝pip installするとexternally-managed-environmentエラーが出る]]%% [[📒2024 Articles]]については今年書いている[[📒Articles]]一覧のページだ。新しめの記事に興味を持っていただいていることは何よりである。 [[Pip]]の`externally-managed-environment`エラーについては自分でも書いたことを忘れていたが、結構多くの人がつまっているのかもしれない...。 # 📚New Notes - [[Ctrl+EnterやCmd+Enterのイベントをハンドリング (Vue)]] - [[DOMにフォーカス (Vue3)]] - [[フォールスルー属性 (Vue)]] - [[フォールスルー属性を無効 (Vue)]] - [[Path (URI)]] - [[Query (URI)]] - [[Template refs]] - [[lsp_dynamic_workspace_symbolsコマンドの結果から特定ディレクトリ配下を除外 (telescope.nvim)]] - [[コードをSyntax Highlight (Vue)]] - [[コードポイントを絵文字に変換 (JavaScript)]] - [[💽2024-04 更新履歴]] - [[📜2024-04-02 Bun 1.1.0にバージョンアップしてWindowsで動かしてみる]] - [[📜2024-04-06 Slack Web APIで動画を投稿する方法の模索]] - [[📝Nuxt3でURLのクエリだけを変えてもリロードされない]] - [[📝Vue3のコンポーネントでdefinePropsで定義していない属性を渡すとExtraneous non-props attributesのwarningがでる]] - [[📝Vuetifyのv-list-itemにてpathまで同一、クエリが異なるページがあるときに複数のリストがアクティブになってしまう]] - [[📝smart-open.nvimでcannot load module 'libsqlite3'エラーになる]] - [[📰2024年13週 Weekly Report]]