# 📰Impression
## [[🦉Mobile First Daily Interface]]にタスクビューが追加
[[🦉Mobile First Daily Interface]]の0.9.0でタスクビューを追加した。今まではポストビューで[[デイリーノート]]の投稿が表示されるだけだったが、[[デイリーノート]]に存在するタスクを表示できるようになった。
![[Pasted image 20230717151723.png|frame]]
タスクは未完了のものが先にまとまって表示されるほか、チェックボックスをクリックすると完了/未完了の切り替えも可能だ。アニメーションはややぎこちないが、実用面で大きな問題はないはず。余力があれば今後のバージョンアップで改善していきたい。
## [[Chakra UI]]の理解を深める
[[🦉Mobile First Daily Interface]]では[[React]]を使っているが、[[UIフレームワーク]]としては[[Chakra UI]]を利用している。
[[Obsidian]]の[[CSS]]がリセットされてしまうという問題があるため、[[Chakra UI]]のデフォルトテーマは利用できていないが、`<Box>`や`<Flex>`、`<Stack>`といったレイアウト用のコンポーネントは問題なく利用できる。
これまではリリースを最優先にしていたため、それらの機能について調査していなかったが、[[Flexbox]]をもっと楽に表現したい...と思って調べたところ、`<Flex>`、`<HStack>`、`<VStack>`はとても便利なことが分かった。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://chakra-ui.com/favicon.ico" />
<span class="link-card-v2-site-name">chakra-ui.com</span>
</div>
<div class="link-card-v2-title">
Flex | Chakra UI
</div>
<div class="link-card-v2-content">
Used to manage flex layouts
</div>
<img class="link-card-v2-image" src="https://next.chakra-ui.com/og?title=Flex&category=Components&description=Used%20to%20manage%20flex%20layouts" />
<a href="https://chakra-ui.com/docs/components/flex"></a>
</div>
上記は`<Flex>`についてのドキュメントだが、傍に`<HStack>`や`<VStack>`など他のレイアウトコンポーネントのドキュメントも存在する。一通り見ておくといいだろう。
## ノートパソコンスタンドの購入
ノートパソコンスタンドの[[BOYATA N31]]を購入した。購入の経緯や使用感は以下のページを参照。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/favicon-64.png" />
<span class="link-card-v2-site-name">Minerva</span>
</div>
<div class="link-card-v2-title">
📰Boyataのノートパソコンスタンド BOYATA N31を使ってみた
</div>
<div class="link-card-v2-content">BoYata N31ノートパソコンスタンドの使用感レビューである。HHKB併用で姿勢改善やタイピング環境は概ね良好だが、テーブルの揺れによるモニタのブレには注意が必要である。</div>
<img class="link-card-v2-image" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/Notes/attachments/20230716_4.jpg" />
<a data-href="📰Boyataのノートパソコンスタンド BOYATA N31を使ってみた" class="internal-link"></a>
</div>
%%[[📰Boyataのノートパソコンスタンド BOYATA N31を使ってみた]]%%
総評としては期待通り。想定外の良さもあれば、想定外の問題もあった。当初気になっていたことはクリアしている。
# 🎇Shiny Outputs
## 🦉My products
- [[🦉Mobile First Daily Interface]]
- [Free Writing v0.9.0リリース](https://github.com/tadashi-aikawa/obsidian-free-writing/releases/tag/0.9.0)
- [Free Writing v0.9.1リリース](https://github.com/tadashi-aikawa/obsidian-free-writing/releases/tag/0.9.1)
- [Free Writing v0.10.0リリース](https://github.com/tadashi-aikawa/obsidian-free-writing/releases/tag/0.10.0)
- [[🦉Various Complements]]
- [Various Complements v8.3.2リリース](https://github.com/tadashi-aikawa/obsidian-various-complements-plugin/releases/tag/8.3.2)
## 📖Publish
- [[📜2023-07-15 Free Writingにタスク専用Viewを追加]]
- [[📰Boyataのノートパソコンスタンド BOYATA N31を使ってみた]]
- [[📝IntelliJ IDEAでReact JSXの属性に対する補完がクォーテーションにならない]]
- [[📝marked-reactでMarkdownタグを使うと周囲に余白(margin)ができてしまう]]
- [[📰2023年27週 Weekly Report]]
# 👀Medias
## ChatGPT Plus で使える Code Interpreter でのグラフ描画と PowerPoint のスライド化（ダウンロードできるファイルの生成）
[[ChatGPT Plus]]で[[Code Interpreter]]という機能が使えるようになり、コードを書いて処理した結果を返却することができるようになった。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://cdn.qiita.com/assets/favicons/public/production-c620d3e403342b1022967ba5e3db1aaa.ico" />
<span class="link-card-v2-site-name">Qiita</span>
</div>
<div class="link-card-v2-title">
ChatGPT Plus で使える Code Interpreter でのグラフ描画と PowerPoint のスライド化（ダウンロードできるファイルの生成） - Qiita
</div>
<div class="link-card-v2-content">
はじめに 先ほど、ChatGPT の Code Interpreter を軽く試した流れ（＋関連情報）を記事にしたのですが、その後に試したことも記事にしてみます。 ●ChatGPT Plusユーザー向けの Code Inte ...
</div>
<img class="link-card-v2-image" src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGNTA4NjglMkZwcm9maWxlLWltYWdlcyUyRjE0NzM2OTIyNDc_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmJnPUZGRkZGRiZmbT1wbmczMiZzPTJmZjQyOGZkZDBiMTZlMzM5ZjNkOTZlMzg0MWRmY2Ex%26blend-x%3D120%26blend-y%3D462%26blend-w%3D90%26blend-h%3D90%26blend-mode%3Dnormal%26mark64%3DaHR0cHM6Ly9xaWl0YS1vcmdhbml6YXRpb24taW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1vcmdhbml6YXRpb24taW1hZ2UlMkZiOTU3M2NmMWMxYzJjOTE5NzIxZDNmMGU2YTljNGViZjEwYmQxM2NhJTJGb3JpZ2luYWwuanBnJTNGMTQwODQyMzgyMj9peGxpYj1yYi00LjAuMCZ3PTQ0Jmg9NDQmZml0PWNyb3AmbWFzaz1jb3JuZXJzJmNvcm5lci1yYWRpdXM9OCZiZz1GRkZGRkYmYm9yZGVyPTIlMkNGRkZGRkYmZm09cG5nMzImcz02ZjU5YzYzYmMyYzU0YWFjOWJkYmQ0ZWNmOGE3ZmMzNA%26mark-x%3D186%26mark-y%3D515%26mark-w%3D40%26mark-h%3D40%26s%3Ddd8a1922fc6d2e1f5a96aa269f76be11?ixlib=rb-4.0.0&w=1200&fm=jpg&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9Q2hhdEdQVCUyMFBsdXMlMjAlRTMlODElQTclRTQlQkQlQkYlRTMlODElODglRTMlODIlOEIlMjBDb2RlJTIwSW50ZXJwcmV0ZXIlMjAlRTMlODElQTclRTMlODElQUUlRTMlODIlQjAlRTMlODMlQTklRTMlODMlOTUlRTYlOEYlOEYlRTclOTQlQkIlRTMlODElQTglMjBQb3dlclBvaW50JTIwJUUzJTgxJUFFJUUzJTgyJUI5JUUzJTgzJUE5JUUzJTgyJUE0JUUzJTgzJTg5JUU1JThDJTk2JUVGJUJDJTg4JUUzJTgzJTgwJUUzJTgyJUE2JUUzJTgzJUIzJUUzJTgzJUFEJUUzJTgzJUJDJUUyJTgwJUE2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9NjNjMmE4NGZmZWIzYWM0ZDI2MjYwNjgwYTI5NjY4ZjY&mark-x=120&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDB5b3V0b3kmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz1hOWY2OWE2NTM1ZDRkNzY2OWQ3NWM4ZGJmNTlhZjA5MQ&blend-x=242&blend-y=454&blend-w=838&blend-h=46&blend-fit=crop&blend-crop=left%2Cbottom&blend-mode=normal&txt64=S0RESeagquW8j-S8muekvg&txt-x=242&txt-y=539&txt-width=838&txt-clip=end%2Cellipsis&txt-color=%231E2121&txt-font=Hiragino%20Sans%20W6&txt-size=28&s=f2ef8371cd3f2fb7f67258c9e647bc9d" />
<a href="https://qiita.com/youtoy/items/c9a4ca1bf864ed4ad766"></a>
</div>
## Obsidian Roadmap
[[📚Obsidian Roadmap]]が[[Trello]]から公式サイトに移行していた。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://obsidian.md/favicon.svg" />
<span class="link-card-v2-site-name">Obsidian</span>
</div>
<div class="link-card-v2-title">
Obsidian Roadmap
</div>
<div class="link-card-v2-content">
We're chipping away at improvements to Obsidian. Learn about what's coming next.
</div>
<img class="link-card-v2-image" src="https://obsidian.md/images/banner-roadmap.png" />
<a href="https://obsidian.md/roadmap/"></a>
</div>
## DevOpsとSREのために知るべき3つの原則 〜忙しすぎるエンジニアのための開発環境リファクタリングガイド〜 `#devio2023`
開発が関与する改善を行っていくための大切な考え方などがまとまっているスライド。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://dev.classmethod.jp/favicon.ico" />
<span class="link-card-v2-site-name">クラスメソッド発「やってみた」系技術メディア | DevelopersIO</span>
</div>
<div class="link-card-v2-title">
[資料公開] DevOpsとSREのために知るべき3つの原則 〜忙しすぎるエンジニアのための開発環境リファクタリングガイド〜 #devio2023 | DevelopersIO
</div>
<div class="link-card-v2-content">
弊社のオフラインイベント DevelopersIO 2023 の、標題セッションで試用した資料を公開します。日々の開発サイクル(SDLC)もサービスの一部。ならば同様の手法、特にDevOpsの考え方のもとで「リファクタリング ...
</div>
<img class="link-card-v2-image" src="https://devio2023-media.developers.io/wp-content/uploads/2023/07/202307-session-sdlc-refactoring-guide-devio2023-eyecatch.png" />
<a href="https://dev.classmethod.jp/articles/202307-session-sdlc-refactoring-guide-devio2023/"></a>
</div>
長年こういうことやっているともはや常識みたいに思えてくるけど、知らない人にとっては非常に大事な情報なので、しっかり言語化されていると説明しやすくて助かる。
特に『自動化』は目的じゃないということに触れた以下のスライドが好き。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://d1eu30co0ohy4w.cloudfront.net/assets/favicon-bdd5839d46040a50edf189174e6f7aacc8abb3aaecd56a4711cf00d820883f47.png" />
<span class="link-card-v2-site-name">Speaker Deck</span>
</div>
<div class="link-card-v2-title">
DevOpsとSREのために知るべき3つの原則 〜忙しすぎるエンジニアのための開発環境リファクタリングガイド〜
</div>
<div class="link-card-v2-content">
https://dev.classmethod.jp/news/devio-2023/
</div>
<img class="link-card-v2-image" src="https://files.speakerdeck.com/presentations/386f1a12f8d34a57acb25923398ca8f0/slide_37.jpg?26280449" />
<a href="https://speakerdeck.com/cmwatanabeseigo/devopstosrenotamenizhi-rubeki3tunoyuan-ze-mang-sisugiruenzinianotamenokai-fa-huan-jing-rihuakutaringugaido?slide=38"></a>
</div>
無意味なことまで自動化しても意味ないんだ... Whyを考えよう... という。何か事あるごとに『〇〇を自動化がー...』という人はちょっと疑ってかかるくらいでちょうどいいと思う。もちろん手動による美学を擁護するつもりは一切ないけど。
このスライドも素敵ポイント。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://d1eu30co0ohy4w.cloudfront.net/assets/favicon-bdd5839d46040a50edf189174e6f7aacc8abb3aaecd56a4711cf00d820883f47.png" />
<span class="link-card-v2-site-name">Speaker Deck</span>
</div>
<div class="link-card-v2-title">
DevOpsとSREのために知るべき3つの原則 〜忙しすぎるエンジニアのための開発環境リファクタリングガイド〜
</div>
<div class="link-card-v2-content">
https://dev.classmethod.jp/news/devio-2023/
</div>
<img class="link-card-v2-image" src="https://files.speakerdeck.com/presentations/386f1a12f8d34a57acb25923398ca8f0/slide_43.jpg?26280455" />
<a href="https://speakerdeck.com/cmwatanabeseigo/devopstosrenotamenizhi-rubeki3tunoyuan-ze-mang-sisugiruenzinianotamenokai-fa-huan-jing-rihuakutaringugaido?slide=44"></a>
</div>
ことあるごとに『時間がない』でゼロを選択されがちだが、イチである必要はない。ゼロに限りなく近いけどゼロではないラインから攻めるのが長続きするコツ。そのうち効果も出てくるし、結果的に楽しくなってモチベも上がる。正の循環。
## CEO が3年半ぶりに SmartHR の開発チームにメンバーとして入ってみた結果
[[SmartHR]]の[[CEO]]が久々に開発現場に入ってみた話。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://tech.smarthr.jp/icon/favicon" />
<span class="link-card-v2-site-name">SmartHR Tech Blog</span>
</div>
<div class="link-card-v2-title">
CEO が3年半ぶりに SmartHR の開発チームにメンバーとして入ってみた結果 - SmartHR Tech Blog
</div>
<div class="link-card-v2-content">
こんにちは。VP of Engineering の森住です 今回は、2022年1月に SmartHR の CEO に就任した芹澤さんが、なぜか最近になって SmartHR の開発チームにイチメンバーとして二週間ほど参加してい ...
</div>
<img class="link-card-v2-image" src="https://cdn.image.st-hatena.com/image/scale/77dfab8cb1538edbc98ef1912d0c8e6de9a49def/backend=imagemagick;version=1;width=1300/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fs%2Fsmarthr%2F20240205%2F20240205175511.jpg" />
<a href="https://tech.smarthr.jp/entry/2023/07/04/124143"></a>
</div>
地位が高くなればなるほど、どうしても数字を頼りに意思決定することが多くなるが、実際には数字に表れない大事な判断材料が現場には散りばめられていると思う。それを自ら体験しにいくというのは双方にとってとてもいい活動だと思った。(元エンジニアでない場合は厳しいと思うけど...)
## エンジニアのための自己管理入門
タスク管理や時間管理をはじめとしたあらゆる自己管理の仕方について、網羅的にまとめられた記事。自分自身を高めたいと思っている方は一見の価値あり。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://cdn.qiita.com/assets/favicons/public/production-c620d3e403342b1022967ba5e3db1aaa.ico" />
<span class="link-card-v2-site-name">Qiita</span>
</div>
<div class="link-card-v2-title">
エンジニアのための自己管理入門 - Qiita
</div>
<div class="link-card-v2-content">
はじめに 社内でTodo管理の勉強会を実施した際に作成した資料があったのですが、今回自分の中の考えをまとめるせっかくの機会だと思い、字面で書き起こすことにしました。 意外と世の中では語られることのなく、『あたりまえ』として扱 ...
</div>
<img class="link-card-v2-image" src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGMjM5MzI1JTJGcHJvZmlsZS1pbWFnZXMlMkYxNzMyNDU0MzcxP2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZiZz1GRkZGRkYmZm09cG5nMzImcz1jOTBkMDQ3OTlhZTI3NDhlMDgyMjJjNmUyMTgyNjE0OA%26blend-x%3D120%26blend-y%3D462%26blend-w%3D90%26blend-h%3D90%26blend-mode%3Dnormal%26mark64%3DaHR0cHM6Ly9xaWl0YS1vcmdhbml6YXRpb24taW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1vcmdhbml6YXRpb24taW1hZ2UlMkZhNTYyMGZiZWEyYTM0OTVjMmQ5NTc5MTYzOThlOTczNjJmNDdhYWJiJTJGb3JpZ2luYWwuanBnJTNGMTY3NTk5OTg2ND9peGxpYj1yYi00LjAuMCZ3PTQ0Jmg9NDQmZml0PWNyb3AmbWFzaz1jb3JuZXJzJmNvcm5lci1yYWRpdXM9OCZiZz1GRkZGRkYmYm9yZGVyPTIlMkNGRkZGRkYmZm09cG5nMzImcz1mZTFmMTExYzM5N2Y3NGNlNjZiOGZmZjEwYTIwMjViNA%26mark-x%3D186%26mark-y%3D515%26mark-w%3D40%26mark-h%3D40%26s%3Daa7b781512a03eb56d221ed0bd248323?ixlib=rb-4.0.0&w=1200&fm=jpg&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JUUzJTgyJUE4JUUzJTgzJUIzJUUzJTgyJUI4JUUzJTgzJThCJUUzJTgyJUEyJUUzJTgxJUFFJUUzJTgxJTlGJUUzJTgyJTgxJUUzJTgxJUFFJUU4JTg3JUFBJUU1JUI3JUIxJUU3JUFFJUExJUU3JTkwJTg2JUU1JTg1JUE1JUU5JTk2JTgwJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9Y2VkZmI2YTRjYTBjMjM5MDQ2NGE2MGYwYjRlMjBjZTc&mark-x=120&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBZVU1fMyZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPWJjNjQ2ZDUwMGFkNzkxZWRhYjU4ZjM2NjdkODdkYjRi&blend-x=242&blend-y=454&blend-w=838&blend-h=46&blend-fit=crop&blend-crop=left%2Cbottom&blend-mode=normal&txt64=5qCq5byP5Lya56S-SGFqaW1hcmk&txt-x=242&txt-y=539&txt-width=838&txt-clip=end%2Cellipsis&txt-color=%231E2121&txt-font=Hiragino%20Sans%20W6&txt-size=28&s=f93115018889cb1561c0fb7124fadbd6" />
<a href="https://qiita.com/YUM_3/items/e0d734690d6aa37c5125"></a>
</div>
# 📚Inputs
- [[BOYATA N31]]
- [[アニメーションが終わるまでの時間を設定 (CSS)]]
- [[Chakra UIでFlexbox]]
- [[Chakra UIでホバーしたとき(ホバーが外れたとき)にアニメーション]]
- [[Type Parameter Syntax]]
- [[marked-react]]
- [[transition-duration]]
- [[ジェネリクス (Python)]]
- [[ゼロランタイムCSS]]
- [[型パラメーター (Python)]]
- [[🎮Chakra Play]]
- 💽2023-07 更新履歴