📰2024年32週 Weekly Report

# 🏆MVP ## デザインとCSSの修業を積んでMarpのスライドテンプレートをつくる最近、仕事でWebのデザイン/スタイルあてが始まり、自身の[[CSS]]レイアウト構築力のなさを痛感したので修行のつもりではじめた。 <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-08-10 FlexboxをTailwindCSSで雑に学ぶ</p> <p class="link-card-description">Web開発でCSSやTailwind CSS、特にFlexboxやGrid Layoutが苦手なので体系的かつ乱雑に学習してスキルアップしたい。</p> </div> <img src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/Notes/attachments/activity.webp" class="link-card-image" /> </div> <a class="internal-link" data-href="Notes/📜2024-08-10 FlexboxをTailwindCSSで雑に学ぶ.md"></a> </div> %%[[📜2024-08-10 FlexboxをTailwindCSSで雑に学ぶ]]%% 体系的な学習ではなく、Webで良さそうなものをインプットすることにした。中でも以下の動画は素晴らしかった。 ![](https://youtu.be/cwkkD0ejX8Q?si=W272NcB4sHa2zsW5) 今まで『[[Flexbox]]でよくない? [[Grid Layout (CSS)|Grid Layout]]分かりにくいし...』と思っていたが、`grid-template`の真の力を知ってからは完全に掌返しだ。可能な限り[[Grid Layout (CSS)|Grid Layout]]を使いたいと心底思った。レイアウトを自在に操るスキルが付き始めてくると、次は**どういったモノをつくるか**という話になる。自分の本能のままにスライドテンプレートを作ってしまったら、おそらくいままで通りダサいスライドになるのは目に見えていた。ということで、ひたすら**素人向けに**(たぶん)デザイナーが発信している記事をインプットすることにした。 - [今日から使えるスライドデザインテクニック \- Speaker Deck](https://speakerdeck.com/chuyanku/jin-ri-karashi-erusuraidodezaintekunituku)- - [スライドをデザインする時に気をつけていること \| Webクリエイターボックス](https://www.webcreatorbox.com/inspiration/slide-design) - [【パワーポイントデザインを激的に見やすくする】9つのコツ｜okunote｜意思決定を促すパワーポイント資料作成研修・資料作成代行](https://okunote.co.jp/news/1001/) - [デザイナーじゃなくても！見やすいスライド資料のための5つのコツ【Before／Afterあり】｜spicagraph](https://note.com/spicagraph/n/naf0de6e85929) - [日本語の「デザイン」には2通りの意味がある　図解コーチ・新垣才氏が"デザインは学べば誰でも伸びる”と語るわけ \- ログミーBiz](https://logmi.jp/business/articles/329458) - [パワポでやりがちな9の無駄な努力 \| knowledge / baigie](https://baigie.me/officialblog/2021/01/06/powerpoint_crisis/?) 実際に読んだ数はこの数倍に及ぶが、特に印象に残ったものは上記6つ。人によって考え方が異なるものもあれば、共通しているものもある。今回は特に **共通している部分** をしっかりと自分のモノにすることを心掛けた。学んだデザインの基礎と、[[CSS]] (共に[[Grid Layout (CSS)|Grid Layout]]) のテクニックを使って[[Marp]]のスライドテンプレートをつくりあげていく。目次のスライドテンプレートは個人的に満足いくものになった。 ![[Pasted image 20240812132709.png]] [[Marp]]の記載は以下のような感じ。[[Grid Layout (CSS)|Grid Layout]]のために一部[[HTML]]を使っているが、ほぼほぼ[[Markdown]]で実現できていることがお分かりいただけるだろうか。 ```html  <div class="left"> ### Chapter ## 02 </div> <div class="right"> 1. ~~はじめに~~ 2. **基本的な装飾** 3. レイアウトテンプレート 4. スライドテンプレート 5. まとめ </div> ``` [[ChatGPT]]にレビューしてもらいながら、これをひたすら繰り返していくつもりだ。この辺のノウハウはあとで[[📒Articles]]にまとめてみたいと思っている。ここでは取り急ぎ概要だけの共有に留めよう。 [[Minerva]]の[[CSS]]も細かいところで改善したいところがあるため、落ち着いたらそちらも改修したい。 # 🥈RUP ## Feniceのアクセストークン自動更新に着手 [[🦉Fenice]]のv0.27.0で、[[アクセストークン (OAuth 2.0)|アクセストークン]]の有効期限が切れていたら自動で[[リフレッシュトークン (OAuth 2.0)|リフレッシュトークン]]を使ってリフレッシュする機能を追加した。 <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">Release v0.27.0 · tadashi-aikawa/fenice</p> <p class="link-card-description">0.27.0</p> </div> <img src="https://opengraph.githubassets.com/e74678dccc9835c23202147232f9012ce036119d8442dd83dacd5440b27d6f7e/tadashi-aikawa/fenice" class="link-card-image" /> </div> <a href="https://github.com/tadashi-aikawa/fenice/releases/tag/v0.27.0"></a> </div> この機能は5月くらいからずっと『やらなければ...』と思っていた機能だったが、通信設計の根幹に影響するのと、確認のタイミングが限られていたためずっと先送りにしてきた。それをようやく対応した...ということもあって感慨深い。だが、**試しに職場で動かしてみたら、[[アクセストークン (OAuth 2.0)|アクセストークン]]の有効期限が切れた後のリフレッシュがtoken不正エラーになる** ことが分かった。自分の実装ミスであればいいのだが、これが[[Slack]]の謎仕様とかになると厄介である...。それとは別に[[WXT]]... というより[[Chrome Extension]]における[[Service Worker]]の扱いが思ったより難しくてかなりハマってしまった...。ここに記述するほどまとまっていないので、その事実だけ書いておく。 # 🪙OPA ## cdのエイリアスにiを登録滅茶苦茶地味な改善だが、`cd`の[[alias]]に`i`を登録した。 ```bash alias i="cd" ``` 理由は以下3点。 - `c` -> `d` はホームポジションに従うとどちらも『左中指』を使っており押しにくい - 疲れているときは `c` -> `d` と押す速度が著しく落ちる - なぜか `c` が2回入力されることがある冷静に考えると、頻繁に使うコマンドなのに(2文字の割には)入力しにくいというのは問題だ。また、`cd`のあとはほぼ100%の確率で`Space`を押すことを考えると、それら3つのキーをすべて左手で押すことになる。これは大きなロスだ。最初は`d`を[[alias]]に割り当ててみた。理論上 `d` -> `Space` の連続押しは指も異なるので苦にならない... が `cd` で慣れているにも関わらず違和感があったので、代わりに右指 `i` にしてみたのだ。`i` は `in` のような意味もあり、[[Neovim]]の影響で単押しすることの抵抗はほぼ皆無であるため指に馴染んだと言えよう。 ...といっても、今はまだ意識しないと `cd` と押してしまう。いつか無意識に `i` と押せるようになりたいと思う。 # 🚀Releases - [[🦉Silhouette]] - [Silhouette v0.23.1リリース](https://github.com/tadashi-aikawa/silhouette/releases/tag/0.23.1) - [Silhouette v0.23.0リリース](https://github.com/tadashi-aikawa/silhouette/releases/tag/0.23.0) - `Insert current time`コマンドで[[Day Planner]]互換の時間記録が打てるように - [[🦉Fenice]] - [Fenice v0.27.1リリース](https://github.com/tadashi-aikawa/fenice/releases/tag/v0.27.1) - [Fenice v0.27.0リリース](https://github.com/tadashi-aikawa/fenice/releases/tag/v0.27.0) - アクセストークン有効期限切れ問題の解決... をしたはずが... (refreshに失敗する...) - [Fenice v0.26.1リリース](https://github.com/tadashi-aikawa/fenice/releases/tag/v0.26.1) # 👀Reading ## 今日から使えるスライドデザインテクニック <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"> <p class="link-card-title">今日から使えるスライドデザインテクニック</p> <p class="link-card-description">シンプルで美しいスライドを作成するために必要なデザイン知識を簡潔にわかりやすくまとめています。00 構想の練り方01 ダサいスライドの共通点02 デザインの根幹03 デザインの4原則04 レイアウト05 色使い06 箇条書き07 文字の強調08 矢印09 … ... </p> </div> <img src="https://files.speakerdeck.com/presentations/1886375442d04d11bb7265e89f00b57c/slide_0.jpg?21885309" class="link-card-image" /> </div> <a href="https://speakerdeck.com/chuyanku/jin-ri-karashi-erusuraidodezaintekunituku"></a> </div> ~~~ とても勉強になる。新しく知った知識はほぼないけど、素人(自分)が言語化しても根拠として弱く『本当にこれでいいのか... いやこっちのがいいかも... 』と迷いがあったので。一旦、全部こちらに従ってみよう。 https://speakerdeck.com/chuyanku/jin-ri-karashi-erusuraidodezaintekunituku ~~~ ## 「Tailwind CSSめっちゃ負債になりそう」はそうでもないのでは、と思っている <div class="link-card"> <div class="link-card-header"> <img src="https://fuku.day/favicon.svg" class="link-card-site-icon"/> <span class="link-card-site-name">fuku.day</span> </div> <div class="link-card-body"> <div class="link-card-content"> <p class="link-card-title">「Tailwind CSSめっちゃ負債になりそう」はそうでもないのでは、と思っている</p> <p class="link-card-description">Tailwind CSSは特異なコードベースの見た目から負債になりそうとたまに言われるが、俺はあんまりそう思っていないので説明したい。</p> </div> </div> <a href="https://fuku.day/blog/2024-08-10-tailwind/"></a> </div> ~~~ 負債うんぬんの話ではないけど、Obsidianみたくかなり自由にデザインカスタマイズさせる余地を残すと、どうしても意味合いレベルのclassを定義してCSSを標準定義したりする必要があるのかもなぁと思ったり。 https://fuku.day/blog/2024-08-10-tailwind/ ~~~ ## 【HTML/CSSレイアウト】Gridを使うとFlexboxより簡単に複雑なレイアウトを組めます【ヤフー出身エンジニアの初心者向けプログラミング講座】 ![](https://youtu.be/cwkkD0ejX8Q?si=W272NcB4sHa2zsW5) ~~~ grid-templateの使い方知らなかった。めっちゃ見やすくて感動！これとMarkdown in HTMLでMarpのテンプレートを作れまくれそうか予感… 🤗 https://youtu.be/cwkkD0ejX8Q?si=W272NcB4sHa2zsW5 ~~~ ## 元Google植山類の“実装力”の源をSakana AI・秋葉拓哉が探る「集団開発のしがらみに、個人開発で殴りこむ」 - エンジニアtype | 転職type <div class="link-card"> <div class="link-card-header"> <img src="https://type.jp/favicon.ico" class="link-card-site-icon"/> <span class="link-card-site-name">エンジニアtype - 技術者のキャリアを考えるWebマガジン</span> </div> <div class="link-card-body"> <div class="link-card-content"> <p class="link-card-title">元Google植山類の“実装力”の源をSakana AI・秋葉拓哉が探る「集団開発のしがらみに、個人開発で殴りこむ」 - エンジニアtype | 転職type</p> <p class="link-card-description">Sakana AI・秋葉拓哉さんと、元Googleのエンジニアで、現在は独立してBlue Whale Systemsを経営する植山類さんの対談を実施。テーマは「植山さんに聞きたい、“ ... </p> </div> <img src="https://type.jp/et/feature/wp-content/uploads/2024/08/akiba_ueyama.jpg" class="link-card-image" /> </div> <a href="https://type.jp/et/feature/26625/"></a> </div> ~~~ 最後の2つ、めっちゃ分かる。スピードと情熱が大事。 https://type.jp/et/feature/26625/ ~~~ ## スライドをデザインする時に気をつけていること <div class="link-card"> <div class="link-card-header"> <img src="https://www.webcreatorbox.com/wp-content/uploads/2023/02/cropped-logo-icon-32x32.png" class="link-card-site-icon"/> <span class="link-card-site-name">Webクリエイターボックス</span> </div> <div class="link-card-body"> <div class="link-card-content"> <p class="link-card-title">スライドをデザインする時に気をつけていること</p> <p class="link-card-description">プレゼンをする時に必須なのがスライド。私も作成する機会がちょこちょこあります。基本的なデザインの原則はおさえつつ作っていくのですが、プレゼンテーションでの資料として参加者にみてもらうことを前提に考えた時に、特に気をつけて … ... </p> </div> <img src="https://www.webcreatorbox.com/wp-content/uploads/2024/02/2402-slide-thumb.jpg" class="link-card-image" /> </div> <a href="https://www.webcreatorbox.com/inspiration/slide-design"></a> </div> ~~~ 会場の明るさ依存なのはなるほどと思った。 https://www.webcreatorbox.com/inspiration/slide-design ~~~ ## 【パワーポイントデザインを激的に見やすくする】9つのコツ｜okunote｜意思決定を促すパワーポイント資料作成研修・資料作成代行 <div class="link-card"> <div class="link-card-header"> <img src="https://okunote.co.jp/images/favicons/favicon.ico" class="link-card-site-icon"/> <span class="link-card-site-name"></span> </div> <div class="link-card-body"> <div class="link-card-content"> <p class="link-card-title">【パワーポイントデザインを激的に見やすくする】9つのコツ｜okunote｜意思決定を促すパワーポイント資料作成研修・資料作成代行</p> <p class="link-card-description">「お知らせ・コラム」ページです。ビジネスの現場で成果を獲得してきたコンサルタントが、第三者の視点と様々な立場での経験を活 ... </p> </div> </div> <a href="https://okunote.co.jp/news/1001/"></a> </div> ~~~ このサイト、資料が見やすかった。画像右は左脳右脳関係というのはなるほどと思った。他のサイトでは画像左の方が、左右のレイアウト境目が整って良いと書かれてて、個人的には後者派かなあ。 https://okunote.co.jp/news/1001/ ~~~ ## デザイナーじゃなくても！見やすいスライド資料のための5つのコツ【Before／Afterあり】｜spicagraph <div class="link-card"> <div class="link-card-header"> <img src="https://assets.st-note.com/poc-image/manual/note-common-images/production/icons/android-chrome-192x192.png" class="link-card-site-icon"/> <span class="link-card-site-name">note（ノート）</span> </div> <div class="link-card-body"> <div class="link-card-content"> <p class="link-card-title">デザイナーじゃなくても！見やすいスライド資料のための5つのコツ【Before／Afterあり】｜spicagraph</p> <p class="link-card-description">見やすいスライド資料は事前準備と5つのコツさえ押さえればOK クライアントさんに向けてのプレゼンテーションや、社内共有向け ... </p> </div> <img src="https://assets.st-note.com/production/uploads/images/115561981/rectangle_large_type_2_47a609a24356615fe8380396e2d71f4f.png?fit=bounds&quality=85&width=1280" class="link-card-image" /> </div> <a href="https://note.com/spicagraph/n/naf0de6e85929"></a> </div> ~~~ 敷くスキルは磨きたいところ… 敷くという選択肢は出てくるけど配色がうまくできない。ここは経験積むしかないかな。。 https://note.com/spicagraph/n/naf0de6e85929 ~~~ ## 日本語の「デザイン」には2通りの意味がある　図解コーチ・新垣才氏が"デザインは学べば誰でも伸びる”と語るわけ <div class="link-card"> <div class="link-card-header"> <img src="https://logmi.jp/img/icons/logmi-biz.ico" class="link-card-site-icon"/> <span class="link-card-site-name">ログミーBiz</span> </div> <div class="link-card-body"> <div class="link-card-content"> <p class="link-card-title">日本語の「デザイン」には2通りの意味がある　図解コーチ・新垣才氏が"デザインは学べば誰でも伸びる”と語るわけ</p> <p class="link-card-description">商品やサービスを購入してもらうために欠かせない「提案力」。それには、聞き手の ... </p> </div> <img src="https://img.logmi.jp/article_images/EivDM39hfhgRRSBUhi7CzT.jpg" class="link-card-image" /> </div> <a href="https://logmi.jp/business/articles/329458"></a> </div> ~~~ めっちゃ勉強になる。スライドだけだと見た目しか分からんから語りがあるの良い。 https://logmi.jp/business/articles/329458 ~~~ ## パワポでやりがちな9の無駄な努力 | knowledge / baigie <div class="link-card"> <div class="link-card-header"> <img src="https://baigie.me/favicon.ico" class="link-card-site-icon"/> <span class="link-card-site-name">knowledge / baigie</span> </div> <div class="link-card-body"> <div class="link-card-content"> <p class="link-card-title">パワポでやりがちな9の無駄な努力 | knowledge / baigie</p> </div> <img src="https://baigie.me/officialblog/wp-content/uploads/2021/01/ppt.png?11723435671" class="link-card-image" /> </div> <a href="https://baigie.me/officialblog/2021/01/06/powerpoint_crisis/?"></a> </div> ~~~ やはり、やろうとすればできる人が言うと、説得力と根拠があって良い。バランス感はある程度スキルを身につけたら大事になってくるよなぁ。 https://baigie.me/officialblog/2021/01/06/powerpoint_crisis/? ~~~ ## 色々書き比べた結果Tailwind CSSにしたという話 - Qiita <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"> <p class="link-card-title">色々書き比べた結果Tailwind CSSにしたという話 - Qiita</p> <p class="link-card-description">Twitterでこういう発言を見かけましてTailwind CSSはデザインに凝ってるサイトでは使えないこだわりが無い場合に向いているは？何いってんの？って思ったので、自分がいろいろ試した結… ... </p> </div> <img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUU4JTg5JUIyJUUzJTgwJTg1JUU2JTlCJUI4JUUzJTgxJThEJUU2JUFGJTk0JUUzJTgxJUI5JUUzJTgxJTlGJUU3JUI1JTkwJUU2JTlFJTlDVGFpbHdpbmQlMjBDU1MlRTMlODElQUIlRTMlODElOTclRTMlODElOUYlRTMlODElQTglRTMlODElODQlRTMlODElODYlRTglQTklQjEmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTIyODVhZWFjNzc4ZDRmNThjZTk3ODYwMWU4MTA0ODYz&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBUYWthenVkbyZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ODc3YzZmNTEwMWFjZWNhMmExNjZhZjc0YzQ2Y2Y1OWU&blend-x=142&blend-y=436&blend-mode=normal&txt64=aW4g5qCq5byP5Lya56S-44OU44Kv44K744Or44Kw44Oq44OD44OJ&txt-width=770&txt-clip=end%2Cellipsis&txt-color=%231E2121&txt-font=Hiragino%20Sans%20W6&txt-size=36&txt-x=156&txt-y=536&s=53b06040c9adbe810cae9509223a2f40" class="link-card-image" /> </div> <a href="https://qiita.com/Takazudo/items/78ee15564bfefdea844c"></a> </div> ~~~ めっちゃ長いw けど、TailwindCSSがデザイン設計ベースに制限を持たせて治安を維持しつつ効率的に開発するためのフレームワークなのは重要なポイントだよなぁと。 DDD知らない人が『なんでここに処理入れられないんだよ、設計バグだろ！』って言ってるのと近い印象。 https://qiita.com/Takazudo/items/78ee15564bfefdea844c ~~~ # 📚New Notes - [[File recovery]] - [[Flexbox]] - [[Grid Layout (CSS)]] - [[HTMLの中にMarkdownを記載 (Marp)]] - [[HUE 360]] - [[JSONPath]] - [[JSONをエンコード (Neovim)]] - [[JSONをデコード (Neovim)]] - [[Marpit]] - [[WebM]] - [[markdown-it]] - [[moduleResolution (tsconfig)]] - [[vim.json.decode]] - [[vim.json.encode]] - [[vim.uv.os_getenv]] - [[コンテナフォーマット]] - [[テスト実行前後にsleep (Bruno)]] - [[テンプレートと文字列の結合 (Mockoon)]] - [[環境変数の取得 (Neovim)]] - [[💿MIN-0036 動画ファイルにはWebMを使う]] - [[📕Mockoonでよく使うユースケース]] - [[📜2024-08-08 tsconfig.jsonを見直してみる]] - [[📜2024-08-10 FlexboxをTailwindCSSで雑に学ぶ]] - [[📜2024-08-10 『【CSS】flex-basisの使い方を解説！widthやheightとの違いは？』を試す]] - [[📜2024-08-10 『【CSS】flex-growの使い方！flexアイテムの大きさを倍率で指定する方法を解説』を試す]] - [[📜2024-08-10 『【CSS】flex-shrinkでflexアイテムを縮小させる方法を解説』を試す]] - [[📜2024-08-10 『【CSS】flexアイテムの大きさと伸縮を一括指定する方法を解説』を試す]] - [[📜2024-08-10 『今日から使えるスライドデザインテクニック』を読む]] - [[📝MarpでCSS Nesting Moduleを利用できない]] - [[📝Piniaをcomposableのように分割代入するとreactiveでなくなってしまう]] - [[📰2024年31週 Weekly Report]] - [[📰Obsidian Publishでブログ運営ができるか (2024年版)]]