From 15be3bfeb958efce0ded7f3eeca7ba7a1e969051 Mon Sep 17 00:00:00 2001 From: ashcolor Date: Tue, 16 Jan 2024 23:41:48 +0900 Subject: [PATCH] =?UTF-8?q?chg:=20=E8=A8=98=E4=BA=8B=E3=83=97=E3=83=AD?= =?UTF-8?q?=E3=83=91=E3=83=86=E3=82=A3=E3=82=92=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/blog/gadget/3.cidoo-v65-keyboard-review.md | 2 +- content/blog/programming/0.nuxt-blog.md | 1 + content/blog/programming/0.nuxt-storybook.md | 1 + content/blog/programming/1.chat-scroll.md | 13 ++++++------- .../programming/1.cloud-storage-cache-control.md | 5 +++-- content/blog/programming/2.vue-define-model.md | 3 ++- content/blog/programming/3.npm-develop.md | 1 + 7 files changed, 15 insertions(+), 11 deletions(-) diff --git a/content/blog/gadget/3.cidoo-v65-keyboard-review.md b/content/blog/gadget/3.cidoo-v65-keyboard-review.md index 8bbe9de..f2b3bd0 100644 --- a/content/blog/gadget/3.cidoo-v65-keyboard-review.md +++ b/content/blog/gadget/3.cidoo-v65-keyboard-review.md @@ -8,7 +8,7 @@ tags: - "キーボード" - "EPOMAKER" thumbnail: "https://ashcolor-blog.s3.ap-northeast-1.amazonaws.com/img/blog/gadget/cidoo-v65-keyboard-review/cidoo-v65-keyboard-review-1.jpg" -isRecommend: true +isRecommend: false --- 2024年1月、65%キーボードである**CIDOO V65 V2**を購入しました。 diff --git a/content/blog/programming/0.nuxt-blog.md b/content/blog/programming/0.nuxt-blog.md index cbdda50..e3f525b 100644 --- a/content/blog/programming/0.nuxt-blog.md +++ b/content/blog/programming/0.nuxt-blog.md @@ -4,6 +4,7 @@ updatedAt: "" title: "NuxtJSを使ってブログを作ってみた【Nuxt Content/TailwindCSS/daisyUI】" description: "NuxtJSを使用してブログを作成した際の技術スタック・メリット・デメリットを紹介します。" category: "プログラミング" +subCategory: "Nuxt.js" tags: - "NuxtJS" - "Vue.js" diff --git a/content/blog/programming/0.nuxt-storybook.md b/content/blog/programming/0.nuxt-storybook.md index ca34670..d8bd85e 100644 --- a/content/blog/programming/0.nuxt-storybook.md +++ b/content/blog/programming/0.nuxt-storybook.md @@ -4,6 +4,7 @@ updatedAt: "" title: "Nuxt3 用の Storybook モジュールリリース！Nuxt3 プロジェクトに Storybook を導入してみた" description: "NuxtJSを使用してブログを作成した際の技術スタック・メリット・デメリットを紹介します。" category: "プログラミング" +subCategory: "Nuxt.js" tags: - "NuxtJS" - "Storybook" diff --git a/content/blog/programming/1.chat-scroll.md b/content/blog/programming/1.chat-scroll.md index 7077257..213e228 100644 --- a/content/blog/programming/1.chat-scroll.md +++ b/content/blog/programming/1.chat-scroll.md @@ -4,10 +4,11 @@ updatedAt: "" title: "【TypeScript/Vue.js】チャットUIによくあるメッセージ送受信時にスクロール位置を最下部に維持する処理を実装する" description: "チャットUIによくあるメッセージ送受信時にスクロール位置を最下部に維持する処理を実装する方法を解説します。" category: "プログラミング" +subCategory: "Vue.js" tags: - - "JavaScript" - - "TypeScript" - - "Vue.js" + - "JavaScript" + - "TypeScript" + - "Vue.js" thumbnail: "https://ashcolor-blog.s3.ap-northeast-1.amazonaws.com/img/blog/programming/chat-scroll/thumbnail.png" --- @@ -160,7 +161,7 @@ const isScrollAtBottom = computed(() => { 理論上は`scrollHeight - clientHeight - scrollTop`が`0`のときにスクロール位置が最下部になります。 `===`で判定していないのは、`scrollTop`は小数を含む可能性があるのに対して、`scrollHeight`と`clientHeight`は整数に丸められるため、スクロール量が閾値に十分に近いかで判定する必要があるからです。[^scroll] -[^scroll]:[Element.scrollHeight | 要素が完全にスクロールされたかどうかの判定](https://developer.mozilla.org/ja/docs/Web/API/Element/scrollHeight#%E8%A6%81%E7%B4%A0%E3%81%8C%E5%AE%8C%E5%85%A8%E3%81%AB%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%81%95%E3%82%8C%E3%81%9F%E3%81%8B%E3%81%A9%E3%81%86%E3%81%8B%E3%81%AE%E5%88%A4%E5%AE%9A) +[^scroll]: [Element.scrollHeight | 要素が完全にスクロールされたかどうかの判定](https://developer.mozilla.org/ja/docs/Web/API/Element/scrollHeight#%E8%A6%81%E7%B4%A0%E3%81%8C%E5%AE%8C%E5%85%A8%E3%81%AB%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%81%95%E3%82%8C%E3%81%9F%E3%81%8B%E3%81%A9%E3%81%86%E3%81%8B%E3%81%AE%E5%88%A4%E5%AE%9A) あとはメッセージ追加時に`isScrollAtBottom`がtrueのときだけスクロール位置を最下部にする処理を実行するようにします。 @@ -201,9 +202,7 @@ const scrollHeight = ref(0); const scrollTop = ref(0); const isScrollAtBottom = computed(() => { - return ( - Math.abs(scrollHeight.value - clientHeight.value - scrollTop.value) < 1 - ); + return Math.abs(scrollHeight.value - clientHeight.value - scrollTop.value) < 1; }); onMounted(() => { diff --git a/content/blog/programming/1.cloud-storage-cache-control.md b/content/blog/programming/1.cloud-storage-cache-control.md index 940d58b..072e617 100644 --- a/content/blog/programming/1.cloud-storage-cache-control.md +++ b/content/blog/programming/1.cloud-storage-cache-control.md @@ -4,9 +4,10 @@ updatedAt: "" title: "【Python】Cloud StorageにアップロードするオブジェクトのCache-Controlを変更する" description: "" category: "プログラミング" +subCategory: "Cloud Storage" tags: - - "Python" - - "Cloud Storage" + - "Python" + - "Cloud Storage" thumbnail: "https://ashcolor-blog.s3.ap-northeast-1.amazonaws.com/img/blog/programming/cloud-storage-cache-control/ok.png" --- diff --git a/content/blog/programming/2.vue-define-model.md b/content/blog/programming/2.vue-define-model.md index bb4b374..3aff553 100644 --- a/content/blog/programming/2.vue-define-model.md +++ b/content/blog/programming/2.vue-define-model.md @@ -4,10 +4,11 @@ updatedAt: "" title: "【Vue.js 3.4】defineModelを活用した入力コンポーネントの作成方法" description: "Vue.js 3.4で追加されたdefineModelの使い方を紹介しています。" category: "プログラミング" +subCategory: "Vue.js" tags: - "Vue.js" thumbnail: "https://ashcolor-blog.s3.ap-northeast-1.amazonaws.com/img/blog/programming/vue-define-model/vue.png" -isRecommend: true +isRecommend: false --- ## はじめに diff --git a/content/blog/programming/3.npm-develop.md b/content/blog/programming/3.npm-develop.md index 3ec2f0a..3f7b0fb 100644 --- a/content/blog/programming/3.npm-develop.md +++ b/content/blog/programming/3.npm-develop.md @@ -4,6 +4,7 @@ updatedAt: "" title: "【2024年版】フロントエンドの開発体験を向上させる10のnpmライブラリ" description: "フロントエンドの開発体験を向上させるnpmライブラリを10個紹介します。" category: "プログラミング" +subCategory: "npm" tags: - "JavaScript" - "TypeScript"