# 📰Impression 最近、平日は無理しすぎて身体の調子を崩さないようセーブしているので、インプットやアウトプットをほぼ出せていない。ただ、その分、週末に時間を確保して一定量のインプット/アウトプットをするように心がけているつもりだ。 ## Free Writingが実用レベルに達した 先週から開発を始めた[[Obsidian]]の[[コミュニティプラグイン]]、[[🦉Mobile First Daily Interface]]が実用レベルに達した。 <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"> <div> <p class="link-card-title">GitHub - tadashi-aikawa/obsidian-free-writing</p> </div> <div class="link-card-description"> </div> </div> <img src="https://opengraph.githubassets.com/3e21b43f9f5bf6abc8077472eb854fedec155d9c6ec33e3cd8f0b06ce16e9234/tadashi-aikawa/obsidian-free-writing" class="link-card-image" /> </div> <a href="https://github.com/tadashi-aikawa/obsidian-free-writing"></a> </div> 日本語でREADMEを追加したので、よくある質問や概要は上記ページを参照してほしい。先週は6回の機能追加リリースを行ったが、一番大きな変更点は[[Twitter]]のような投稿/参照インターフェースが整備できてきたことだろう。 編集や削除の機能はなく、その場合は該当する[[デイリーノート]]を直接変更する必要がある。もちろん機能として実装も可能だが、用途としては投稿と参照が圧倒的に多いため、今のところ実装する予定はない。 インストールには[[BRAT]]が必要だが、[[Obsidian Memos]]を試したものの以下のように感じた方は是非試していただければと思う。 - 重くて使用が困難だった - 機能が多すぎた 引き続き開発を続けつつ、[[🦉Mobile First Daily Interface]]についての想いを別途[[📒Articles]]として書きたいと思っている。 ## Shukuchiがコミュニティプラグインとして公開 以前から[[コミュニティプラグイン]]として申請していた[[🦉Shukuchi]]が審査に通過し、[[BRAT]]なしでもインストールできるようになった。 ![](https://twitter.com/Tadashi_MAMAN/status/1677518216212664323?s=20) <video autoplay muted controls src="https://user-images.githubusercontent.com/9500018/235339189-70bfef2b-2425-49aa-a35b-9fe30a1a6c4a.mp4"></video> ## 開発中のObsidianプラグインページ最新化 [[🦉Mobile First Daily Interface]]の開発や[[🦉Shukuchi]]の[[コミュニティプラグイン]]入りといったこともあり、[[🦉tadashi-aikawaが開発しているObsidianプラグイン]]のページを更新した。 <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"> <div> <p class="link-card-title">🦉tadashi-aikawaが開発しているObsidianプラグイン</p> </div> <div class="link-card-description"> 📕tadashi-aikawaが開発しているObsidianプラグインを紹介します。一部コミュニティプラグインに登録されていないものもありますが、その場合はBRATなどを使ってインストールしてください。 </div> </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="🦉tadashi-aikawaが開発しているObsidianプラグイン" ></a> </div> %%[[🦉tadashi-aikawaが開発しているObsidianプラグイン]]%% こうして見ると、メンテ終了したもの含めて8つのラインナップがあり、[[Obsidian]]界隈でも結構開発している方ではないかと思う。 2本柱は[[🦉Various Complements]]と[[🦉Another Quick Switcher]]であり、Issue対応の大半はその2つだ。ただ、[[🦉Shukuchi]]や[[🦉Old Note Admonitor]]といった一発プラグインも定期的に改善していきたいし、基本は自分のためだけに作った[[🦉Silhouette]]や[[🦉Mobile First Daily Interface]]も価値を感じてくれるユーザーのサポートはしていきたい。 # 🎇Shiny Outputs ## 🦉My products - [[🦉Mobile First Daily Interface]] - [Free Writing v0.3.0リリース](https://github.com/tadashi-aikawa/obsidian-free-writing/releases/tag/0.3.0) - [Free Writing v0.4.0リリース](https://github.com/tadashi-aikawa/obsidian-free-writing/releases/tag/0.4.0) - [Free Writing v0.5.0リリース](https://github.com/tadashi-aikawa/obsidian-free-writing/releases/tag/0.5.0) - [Free Writing v0.6.0リリース](https://github.com/tadashi-aikawa/obsidian-free-writing/releases/tag/0.6.0) - [Free Writing v0.7.0リリース](https://github.com/tadashi-aikawa/obsidian-free-writing/releases/tag/0.7.0) - [Free Writing v0.8.0リリース](https://github.com/tadashi-aikawa/obsidian-free-writing/releases/tag/0.8.0) - [Free Writing v0.8.1リリース](https://github.com/tadashi-aikawa/obsidian-free-writing/releases/tag/0.8.1) - [[🦉Another Quick Switcher]] - [Another Quick Switcher v9.0.0-beta3リリース](https://github.com/tadashi-aikawa/obsidian-another-quick-switcher/releases/tag/9.0.0-beta3) ## 📖Publish - [[📝Spotifyでシャッフル再生を有効にしようとすると『これはプレミアムプランの機能です』と表示され利用できない]] - [[📰2023年26週 Weekly Report]] # 👀Medias %%本やサイト、動画など読んだもの/見たもの. [[Twitter]]みたいな感じでラフに書く%% ## 98. LLMを活用したソフトウェアアーキテクチャと代表的なユースケース w/ ryohtaka [[fukabori.fm]]の[[LLM]]回。 <div class="link-card"> <div class="link-card-header"> <img src="https://fukabori.fm/favicon.ico" class="link-card-site-icon"/> <span class="link-card-site-name">fukabori.fm</span> </div> <div class="link-card-body"> <div class="link-card-content"> <div> <p class="link-card-title">98. LLMを活用したソフトウェアアーキテクチャと代表的なユースケース w/ ryohtaka | fukabori.fm</p> </div> <div class="link-card-description"> マイクロソフトの大髙さんに、LLMを活用したソフトウェアアーキテクチャ、langchain、LLM活用のコスト、代表的なユースケースなどについて語っていただいたエピソードです。 </div> </div> <img src="https://fukabori.fm/images/ogp.jpg" class="link-card-image" /> </div> <a href="https://fukabori.fm/episode/98"></a> </div> 普段から自分が思っていたことが話されていて、ちょっと一安心。[[LLM]]について以下のようなことが。 - [[E2Eテスト]]や[[リグレッションテスト]]で品質担保するのは困難 - 裏のナレッジがちゃんとしていないと意味がない - インターフェースがチャットである必要はないのでは? ## Python3.12からPEP695-Type Parameter Syntax(型引数構文)が導入され、型変数を使ったクラスや関数の定義が大きく変わる [[Python 3.12]]から[[Type Parameter Syntax]]に対応するので、それを深堀した記事。 <div class="link-card"> <div class="link-card-header"> <img src="https://cdn.qiita.com/assets/favicons/public/production-c620d3e403342b1022967ba5e3db1aaa.ico" class="link-card-site-icon"/> <span class="link-card-site-name">Qiita</span> </div> <div class="link-card-body"> <div class="link-card-content"> <div> <p class="link-card-title">Python3.12からPEP695-Type Parameter Syntax(型引数構文)が導入され、型変数を使ったクラスや関数の定義が大きく変わる - Qiita</p> </div> <div class="link-card-description"> 目次はじめにPEP全文このPEPが提案された経緯「混乱のもと」とは何か型変数のスコープルールがわかりにくいいつcovariantとcontravariantを使う(使わない)べきか... </div> </div> <img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Fengineer-festa-article-ogp-background-7ca0991721c1aaaa07cc917509fce3d8.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9UHl0aG9uMy4xMiVFMyU4MSU4QiVFMyU4MiU4OVBFUDY5NS1UeXBlJTIwUGFyYW1ldGVyJTIwU3ludGF4JTI4JUU1JTlFJThCJUU1JUJDJTk1JUU2JTk1JUIwJUU2JUE3JThCJUU2JTk2JTg3JTI5JUUzJTgxJThDJUU1JUIwJThFJUU1JTg1JUE1JUUzJTgxJTk1JUUzJTgyJThDJUUzJTgwJTgxJUU1JTlFJThCJUU1JUE0JTg5JUU2JTk1JUIwJUUzJTgyJTkyJUU0JUJEJUJGJUUzJTgxJUEzJUUzJTgxJTlGJUUzJTgyJUFGJUUzJTgzJUE5JUUzJTgyJUI5JUUzJTgyJTg0JUU5JTk2JUEyJUU2JTk1JUIwJUUzJTgxJUFFJUU1JUFFJTlBJUU3JUJFJUE5JUUzJTgxJThDJUU1JUE0JUE3JUUzJTgxJThEJUUzJTgxJThGJUU1JUE0JTg5JUUzJTgyJThGJUUzJTgyJThCJnR4dC1jb2xvcj0lMjNmZmZmZmYmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0wNWUyNDc2NjRjNDlkZWFlZmU2NjRmYzU0OWNlNDhkMg&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwanVua21kJnR4dC1jb2xvcj0lMjNmZmZmZmYmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0wODUyOGRjODVhNTBlNWU5ODZiNTNiMDNkZjAyYzc4Nw&blend-x=142&blend-y=491&blend-mode=normal&s=a7d90e7c65b09003f35cf4a8cdb6611d" class="link-card-image" /> </div> <a href="https://qiita.com/junkmd/items/1aa7be17401cfebab92d"></a> </div> ここ最近の[[Python]]の[[型ヒント]]はどんどん[[TypeScript]]や[[Rust]]に近づいてるなあと思った。良い意味で。 ## プレゼンで緊張せずスラスラ話せるようになるコツ [[👤jMatsuzaki]]さんの放送、プレゼンの秘訣について。 <div class="link-card"> <div class="link-card-header"> <img src="https://voicy.jp/favicon.ico" class="link-card-site-icon"/> <span class="link-card-site-name">Voicy - 音声プラットフォーム</span> </div> <div class="link-card-body"> <div class="link-card-content"> <div> <p class="link-card-title">プレゼンで緊張せずスラスラ話せるようになるコツ | jMatsuzaki | ドイツ在住・経営者「10分で集中力アップ ラジオ」/ Voicy - 音声プラットフォーム</p> </div> <div class="link-card-description"> 独立した当初はそれまでプレゼンテーションの経験と言うものがほとんどなかったので、大変苦労しました。独立してからは営業もセールスも全て自分でやらないといけないため、プレゼンのスキルを身に付けるために多く... </div> </div> <img src="https://ogp-image.voicy.jp/ogp-image/story/0/1380/562134" class="link-card-image" /> </div> <a href="https://voicy.jp/channel/1380/562134"></a> </div> 『今思いついたかのような言葉で話す』というのがなるほどと思った。他の準備やリハーサル手法についても完全に同意である。 ## 脳科学が明かすマインドワンダリングとデフォルトモード・ネットワークの関係性と創造性 [[ChatGPT]]について、[[マインドワンダリング]]と関連付けた活用法をLTで話す機会があったので、そのときに参考にした記事。 <div class="link-card"> <div class="link-card-header"> <img src="https://mbcc-c.com/wp-content/themes/mbcc_2021/favicon.ico" class="link-card-site-icon"/> <span class="link-card-site-name">MBCC マインドフルネス・ベースド・コーチ・キャンプ #</span> </div> <div class="link-card-body"> <div class="link-card-content"> <div> <p class="link-card-title">脳科学が明かすマインドワンダリングとデフォルトモード・ネットワークの関係性と創造性 | MBCC® マインドフルネス・ベースド・コーチ・キャンプ</p> </div> <div class="link-card-description"> </div> </div> <img src="https://mbcc-c.com/wp-content/uploads/2022/09/MBCCコーチがお薦めする【コーチングの理解を深める本】-29.png" class="link-card-image" /> </div> <a href="https://mbcc-c.com/column/20220925.html"></a> </div> [[マインドワンダリング]]が求められているときこそ、[[ChatGPT]]を使うチャンスでもある。 ## Pull Request のコメント数を減らすアホみたいなコツ プルリクエストのコメントは相手が疑問を生じたときに投げられるモノだから、それを極力減らしていこうという内容の記事。 <div class="link-card"> <div class="link-card-header"> <img src="https://assets.st-note.com/poc-image/manual/note-common-images/production/svg/production.ico" class="link-card-site-icon"/> <span class="link-card-site-name">note(ノート)</span> </div> <div class="link-card-body"> <div class="link-card-content"> <div> <p class="link-card-title">Pull Request のコメント数を減らすアホみたいなコツ|牛尾 剛</p> </div> <div class="link-card-description"> 私は長年 Pull Request のコメント数が多くて何回もレビューを往復することが多くて大変つらかったが最近ものすごく単純なコツに最近きづいたのでそのことをシェアしようと思う。 Pull Req... </div> </div> <img src="https://assets.st-note.com/production/uploads/images/110015335/rectangle_large_type_2_058e76f930b4ac6e6888e59ee8300fa0.jpeg?fit=bounds&quality=85&width=1280" class="link-card-image" /> </div> <a href="https://note.com/simplearchitect/n/nb9c7a90f3b78"></a> </div> 理解はしていたけど言語化されているのを見ると改めて『なるほど』と思った。 ## 話題のゼロランタイムなCSS-in-JSライブラリ「Panda CSS」をNext.jsに導入してみた [[Panda CSS]]を[[Next.js]]に導入してみた記事。 <div class="link-card"> <div class="link-card-header"> <img src="https://zenn.dev/images/logo-transparent.png" class="link-card-site-icon"/> <span class="link-card-site-name">Zenn</span> </div> <div class="link-card-body"> <div class="link-card-content"> <div> <p class="link-card-title">話題のゼロランタイムなCSS-in-JSライブラリ「Panda CSS」をNext.jsに導入してみた</p> </div> <div class="link-card-description"> </div> </div> <img src="https://res.cloudinary.com/zenn/image/upload/s--xbkhOXZT--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:%25E8%25A9%25B1%25E9%25A1%258C%25E3%2581%25AE%25E3%2582%25BC%25E3%2583%25AD%25E3%2583%25A9%25E3%2583%25B3%25E3%2582%25BF%25E3%2582%25A4%25E3%2583%25A0%25E3%2581%25AACSS-in-JS%25E3%2583%25A9%25E3%2582%25A4%25E3%2583%2596%25E3%2583%25A9%25E3%2583%25AA%25E3%2580%258CPanda%2520CSS%25E3%2580%258D%25E3%2582%2592Next.js%25E3%2581%25AB%25E5%25B0%258E%25E5%2585%25A5%25E3%2581%2597%25E3%2581%25A6%25E3%2581%25BF%25E3%2581%259F%2Cw_1010%2Cx_90%2Cy_100/co_rgb:6e7b85%2Cg_south_west%2Cl_text:notosansjp-medium.otf_30:LCL%2520Engineers%2Cx_220%2Cy_135/g_south_west%2Cl_text:notosansjp-medium.otf_34:%25E3%2581%258A%25E3%2581%25A8%25E3%2581%25AE%2Cx_220%2Cy_84/bo_3px_solid_rgb:d6e3ed%2Cg_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2NiYzlhY2Y4M2EuanBlZw==%2Cr_20%2Cw_90%2Cx_92%2Cy_82/bo_4px_solid_white%2Cg_south_west%2Ch_50%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzc0ZDNjYTljOTYuanBlZw==%2Cr_max%2Cw_50%2Cx_139%2Cy_64/og-base.png" class="link-card-image" /> </div> <a href="https://zenn.dev/lclco/articles/feb11c0d44461a?redirected=1"></a> </div> 普段は[[Vue]]を使ってて、今回[[🦉Mobile First Daily Interface]]の開発をするため久々に[[React]]を使ったけど、会社で業務に[[React]]を使っている同僚から[[Panda CSS]]が最近はきてると聞いたので興味を持った。 結論だけいうと、[[Panda CSS]]を[[🦉Mobile First Daily Interface]]には入れられなかったが、動作確認などはしたので良い勉強になった。 ## フロントエンドのテスト手法、何がある? 知っておきたいテストとその戦略を網羅的に解説 タイトルと雰囲気だけ見てちゃんと読んでないが、しっかり読んでおきたいと思った。フロントエンドテストの手法に関する網羅的な記事。 <div class="link-card"> <div class="link-card-header"> <img src="https://codezine.jp/favicon.ico" class="link-card-site-icon"/> <span class="link-card-site-name">CodeZine</span> </div> <div class="link-card-body"> <div class="link-card-content"> <div> <p class="link-card-title">フロントエンドのテスト手法、何がある? 知っておきたいテストとその戦略を網羅的に解説</p> </div> <div class="link-card-description">  フロントエンドの役割が増す中、効率のよく確実なテストを行うことはもはや常識になってきています。フロントエンド・アーキテクトとして活躍する吉井健文さんの著書『フロントエンド開発のためのテスト入門』(翔... </div> </div> <img src="https://codezine.jp/static/images/article/17672/17672_share.png" class="link-card-image" /> </div> <a href="https://codezine.jp/article/detail/17672"></a> </div> ## CSS-in-JSのパラダイムシフト [[CSS-in-JS]]がどうやって台頭してきたかを解説した記事。 <div class="link-card"> <div class="link-card-header"> <img src="https://zenn.dev/images/logo-transparent.png" class="link-card-site-icon"/> <span class="link-card-site-name">Zenn</span> </div> <div class="link-card-body"> <div class="link-card-content"> <div> <p class="link-card-title">CSS-in-JSのパラダイムシフト</p> </div> <div class="link-card-description"> </div> </div> <img src="https://res.cloudinary.com/zenn/image/upload/s--pLgrAL4J--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:CSS-in-JS%25E3%2581%25AE%25E3%2583%2591%25E3%2583%25A9%25E3%2583%2580%25E3%2582%25A4%25E3%2583%25A0%25E3%2582%25B7%25E3%2583%2595%25E3%2583%2588%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:poteboy%2Cx_203%2Cy_98/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzBiNDBmNjc5Y2UuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_72/og-base.png" class="link-card-image" /> </div> <a href="https://zenn.dev/poteboy/articles/e9f63b87b3cd69"></a> </div> [[CSS-in-JS]]に疎かったり、そもそもメリットが分かっていなかったり、最近の[[CSS]]に関するトレンドをキャッチアップできていなかったので大変勉強になった。 ## Panda CSS - Chakra UI の Zero Runtime CSS フレームワーク [[Chakra UI]]の[[ゼロランタイムCSS]]フレームワークである[[Panda CSS]]の記事。 <div class="link-card"> <div class="link-card-header"> <img src="https://zenn.dev/images/logo-transparent.png" class="link-card-site-icon"/> <span class="link-card-site-name">Zenn</span> </div> <div class="link-card-body"> <div class="link-card-content"> <div> <p class="link-card-title">Panda CSS - Chakra UI の Zero Runtime CSS フレームワーク</p> </div> <div class="link-card-description"> </div> </div> <img src="https://res.cloudinary.com/zenn/image/upload/s--JvkEhpUj--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:Panda%2520CSS%2520-%2520Chakra%2520UI%2520%25E3%2581%25AE%2520Zero%2520Runtime%2520CSS%2520%25E3%2583%2595%25E3%2583%25AC%25E3%2583%25BC%25E3%2583%25A0%25E3%2583%25AF%25E3%2583%25BC%25E3%2582%25AF%2Cw_1010%2Cx_90%2Cy_100/co_rgb:6e7b85%2Cg_south_west%2Cl_text:notosansjp-medium.otf_30:%25E3%2582%25B5%25E3%2582%25A4%25E3%2583%259C%25E3%2582%25A6%25E3%2582%25BA%2520%25E3%2583%2595%25E3%2583%25AD%25E3%2583%25B3%25E3%2583%2588%25E3%2582%25A8%25E3%2583%25B3%25E3%2583%2589%2Cx_220%2Cy_135/g_south_west%2Cl_text:notosansjp-medium.otf_34:mugi%2Cx_220%2Cy_84/bo_3px_solid_rgb:d6e3ed%2Cg_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2EzZmUzNDZhYzkuanBlZw==%2Cr_20%2Cw_90%2Cx_92%2Cy_82/bo_4px_solid_white%2Cg_south_west%2Ch_50%2Cl_fetch:aHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2lZS0x0S2tsVUwtM01qTkJ2YU1DWkZxdmFGTWtMVFl2T2pJT29SLVE9czI1MC1j%2Cr_max%2Cw_50%2Cx_139%2Cy_64/og-base.png" class="link-card-image" /> </div> <a href="https://zenn.dev/cybozu_frontend/articles/panda-is-coming"></a> </div> [[React]]に[[Panda CSS]]を取り入れようとするため参考にした記事の中では一番わかりやすかった。 # 📚Inputs - [[Moment.jsで現在時刻をISO-8601形式で表示]] - [[Panda CSS]] - [[Reactでマウント(mount)時とアンマウント(unmount)時に処理を実行]] - [[Spotify]] - [[outExtension (Panda CSS)]] - [[useEffect]] - [[エビングハウスの錯視]] - [[チェンジブラインドネス]] - [[テスティングトロフィー]] - [[マインドワンダリング]] - [[🎥selective attention test]]