# 📰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">
<div class="link-card-header">
<img src="https://chakra-ui.com/favicon.png" class="link-card-site-icon"/>
<span class="link-card-site-name">Chakra UI: Simple, Modular and Accessible UI Components for your React Applications.</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<div>
<p class="link-card-title">Flex</p>
</div>
<div class="link-card-description">
Flex is Box with display set to flex and comes with helpful style shorthand. It renders a `div` elem...
</div>
</div>
<img src="https://chakra-ui.com/og-image.png" class="link-card-image" />
</div>
<a href="https://chakra-ui.com/docs/components/flex"></a>
</div>
上記は`<Flex>`についてのドキュメントだが、傍に`<HStack>`や`<VStack>`など他のレイアウトコンポーネントのドキュメントも存在する。一通り見ておくといいだろう。
## ノートパソコンスタンドの購入
ノートパソコンスタンドの[[BOYATA N31]]を購入した。購入の経緯や使用感は以下のページを参照。
<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">📜Boyataのノートパソコンスタンド BOYATA N31を使ってみた</p>
</div>
<div class="link-card-description">
BOYATA N31を購入したので使ってみた感想。
</div>
</div>
<img src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/Notes/attachments/20230716_4.jpg" class="link-card-image" />
</div>
<a
class="internal-link"
data-href="📜Boyataのノートパソコンスタンド BOYATA N31を使ってみた"
></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">
<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">ChatGPT Plus で使える Code Interpreter でのグラフ描画と PowerPoint のスライド化（ダウンロードできるファイルの生成） - Qiita</p>
</div>
<div class="link-card-description">
はじめに先ほど、ChatGPT の Code Interpreter を軽く試した流れ（＋関連情報）を記事にしたのですが、その後に試したことも記事にしてみます。●ChatGPT Plusユーザー...
</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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9Q2hhdEdQVCUyMFBsdXMlMjAlRTMlODElQTclRTQlQkQlQkYlRTMlODElODglRTMlODIlOEIlMjBDb2RlJTIwSW50ZXJwcmV0ZXIlMjAlRTMlODElQTclRTMlODElQUUlRTMlODIlQjAlRTMlODMlQTklRTMlODMlOTUlRTYlOEYlOEYlRTclOTQlQkIlRTMlODElQTglMjBQb3dlclBvaW50JTIwJUUzJTgxJUFFJUUzJTgyJUI5JUUzJTgzJUE5JUUzJTgyJUE0JUUzJTgzJTg5JUU1JThDJTk2JUVGJUJDJTg4JUUzJTgzJTgwJUUzJTgyJUE2JUUzJTgzJUIzJUUzJTgzJUFEJUUzJTgzJUJDJUUzJTgzJTg5JUUzJTgxJUE3JUUzJTgxJThEJUUzJTgyJThCJUUzJTgzJTk1JUUzJTgyJUExJUUzJTgyJUE0JUUzJTgzJUFCJUUzJTgxJUFFJUUyJTgwJUE2JnR4dC1jb2xvcj0lMjNmZmZmZmYmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz01MzY4NGJmMzMyMjZkYjMwODRmNjBiNjM2ZjQ2Nzg1Ng&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQweW91dG95JnR4dC1jb2xvcj0lMjNmZmZmZmYmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz04ZGUxY2U4ZjEyZDFjNGZiMjlmNjllNTdiZDQ3ODY0Yw&blend-x=142&blend-y=491&blend-mode=normal&s=7cb248479130939198a017294ae20605" class="link-card-image" />
</div>
<a href="https://qiita.com/youtoy/items/c9a4ca1bf864ed4ad766"></a>
</div>
## Obsidian Roadmap
[[📚Obsidian Roadmap]]が[[Trello]]から公式サイトに移行していた。
<div class="link-card">
<div class="link-card-header">
<img src="https://obsidian.md/favicon.ico" class="link-card-site-icon"/>
<span class="link-card-site-name">obsidian.md</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<div>
<p class="link-card-title">Obsidian Roadmap</p>
</div>
<div class="link-card-description">
We're chipping away at improvements to Obsidian. Learn about what's coming next.
</div>
</div>
<img src="https://obsidian.md/images/banner-roadmap.png" class="link-card-image" />
</div>
<a href="https://obsidian.md/roadmap/"></a>
</div>
## DevOpsとSREのために知るべき3つの原則 〜忙しすぎるエンジニアのための開発環境リファクタリングガイド〜 `#devio2023`
開発が関与する改善を行っていくための大切な考え方などがまとまっているスライド。
<div class="link-card">
<div class="link-card-header">
<img src="https://dev.classmethod.jp/favicon.ico" class="link-card-site-icon"/>
<span class="link-card-site-name">クラスメソッド発「やってみた」系技術メディア | DevelopersIO</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<div>
<p class="link-card-title">[資料公開] DevOpsとSREのために知るべき3つの原則 〜忙しすぎるエンジニアのための開発環境リファクタリングガイド〜 #devio2023 | DevelopersIO</p>
</div>
<div class="link-card-description">
弊社のオフラインイベント DevelopersIO 2023 の、標題セッションで試用した資料を公開します。日々の開発サイクル(SDLC)もサービスの一部。ならば同様の手法、特にDevOpsの考え方の...
</div>
</div>
<img src="https://d1tlzifd8jdoy4.cloudfront.net/wp-content/uploads/2023/07/202307-session-sdlc-refactoring-guide-devio2023-eyecatch.png" class="link-card-image" />
</div>
<a href="https://dev.classmethod.jp/articles/202307-session-sdlc-refactoring-guide-devio2023/"></a>
</div>
長年こういうことやっているともはや常識みたいに思えてくるけど、知らない人にとっては非常に大事な情報なので、しっかり言語化されていると説明しやすくて助かる。
特に『自動化』は目的じゃないということに触れた以下のスライドが好き。
<div class="link-card">
<div class="link-card-header">
<img src="https://d1eu30co0ohy4w.cloudfront.net/assets/favicon-bdd5839d46040a50edf189174e6f7aacc8abb3aaecd56a4711cf00d820883f47.png" class="link-card-site-icon"/>
<span class="link-card-site-name">Speaker Deck</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<div>
<p class="link-card-title">DevOpsとSREのために知るべき3つの原則 〜忙しすぎるエンジニアのための開発環境リファクタリングガイド〜</p>
</div>
<div class="link-card-description">
https://dev.classmethod.jp/news/devio-2023/
</div>
</div>
<img src="https://files.speakerdeck.com/presentations/386f1a12f8d34a57acb25923398ca8f0/slide_37.jpg?26280449" class="link-card-image" />
</div>
<a href="https://speakerdeck.com/cmwatanabeseigo/devopstosrenotamenizhi-rubeki3tunoyuan-ze-mang-sisugiruenzinianotamenokai-fa-huan-jing-rihuakutaringugaido?slide=38"></a>
</div>
無意味なことまで自動化しても意味ないんだ... Whyを考えよう... という。何か事あるごとに『〇〇を自動化がー...』という人はちょっと疑ってかかるくらいでちょうどいいと思う。もちろん手動による美学を擁護するつもりは一切ないけど。
このスライドも素敵ポイント。
<div class="link-card">
<div class="link-card-header">
<img src="https://d1eu30co0ohy4w.cloudfront.net/assets/favicon-bdd5839d46040a50edf189174e6f7aacc8abb3aaecd56a4711cf00d820883f47.png" class="link-card-site-icon"/>
<span class="link-card-site-name">Speaker Deck</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<div>
<p class="link-card-title">DevOpsとSREのために知るべき3つの原則 〜忙しすぎるエンジニアのための開発環境リファクタリングガイド〜</p>
</div>
<div class="link-card-description">
https://dev.classmethod.jp/news/devio-2023/
</div>
</div>
<img src="https://files.speakerdeck.com/presentations/386f1a12f8d34a57acb25923398ca8f0/slide_43.jpg?26280455" class="link-card-image" />
</div>
<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">
<div class="link-card-header">
<img src="https://tech.smarthr.jp/icon/link" class="link-card-site-icon"/>
<span class="link-card-site-name">SmartHR Tech Blog</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<div>
<p class="link-card-title">CEO が3年半ぶりに SmartHR の開発チームにメンバーとして入ってみた結果 - SmartHR Tech Blog</p>
</div>
<div class="link-card-description">
こんにちは。VP of Engineering の森住です 今回は、2022年1月に SmartHR の CEO に就任した芹澤さんが、なぜか最近になって SmartHR の開発チームにイチメンバーと...
</div>
</div>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/t/t-morizumi/20230703/20230703203052.jpg" class="link-card-image" />
</div>
<a href="https://tech.smarthr.jp/entry/2023/07/04/124143"></a>
</div>
地位が高くなればなるほど、どうしても数字を頼りに意思決定することが多くなるが、実際には数字に表れない大事な判断材料が現場には散りばめられていると思う。それを自ら体験しにいくというのは双方にとってとてもいい活動だと思った。(元エンジニアでない場合は厳しいと思うけど...)
## エンジニアのための自己管理入門
タスク管理や時間管理をはじめとしたあらゆる自己管理の仕方について、網羅的にまとめられた記事。自分自身を高めたいと思っている方は一見の価値あり。
<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">エンジニアのための自己管理入門 - Qiita</p>
</div>
<div class="link-card-description">
はじめに社内でTodo管理の勉強会を実施した際に作成した資料があったのですが、今回自分の中の考えをまとめるせっかくの機会だと思い、字面で書き起こすことにしました。意外と世の中では語られることのな...
</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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9JUUzJTgyJUE4JUUzJTgzJUIzJUUzJTgyJUI4JUUzJTgzJThCJUUzJTgyJUEyJUUzJTgxJUFFJUUzJTgxJTlGJUUzJTgyJTgxJUUzJTgxJUFFJUU4JTg3JUFBJUU1JUI3JUIxJUU3JUFFJUExJUU3JTkwJTg2JUU1JTg1JUE1JUU5JTk2JTgwJnR4dC1jb2xvcj0lMjNmZmZmZmYmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz00NTcwNmY2YTk3N2M5ZjVlYmJmZWEzYTZmNWY0YjY2Mw&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwWVVNXzMmdHh0LWNvbG9yPSUyM2ZmZmZmZiZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTc4YjRkOGJjNTkxYTQ5NDRlOTY2N2FjM2ViYjM5MTY3&blend-x=142&blend-y=491&blend-mode=normal&s=afd3d20ec8ecfb2724a04ed95971c65a" class="link-card-image" />
</div>
<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 更新履歴