Skip to content

Commit

Permalink
add: 記事追加
Browse files Browse the repository at this point in the history
  • Loading branch information
@ashcolor
ashcolor committed Jan 16, 2024
1 parent 9eb295a commit e44f11e
Show file tree
Hide file tree
Showing 3 changed files with 213 additions and 0 deletions.
71 changes: 71 additions & 0 deletions components/content-feature/gadget/AmazonKeycapTable.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<script setup lang="ts">
const { data, pending } = useLazyAsyncData(() => queryContent("/data/amazon-keycap").findOne(), {
server: false,
});
const keycaps = computed(() => {
if (!data.value.body) return [];
return data.value?.body;
});
</script>

<template>
<div class="my-16 flex flex-col gap-4">
<p class="font-bold">Amazonで購入できるオススメのキーキャップ一覧</p>
<div v-if="pending">
<div class="loading loading-spinner mx-auto my-8 block text-primary"></div>
</div>
<template v-else>
<div class="flex flex-col gap-4">
<div class="max-h-[72rem] overflow-auto">
<table class="table table-pin-rows table-xs text-nowrap">
<thead>
<tr>
<th>画像</th>
<th>メーカー</th>
<th>商品名</th>
<th>素材</th>
<th>形状</th>
<th>印字</th>
<th>コンセプト</th>
<th>備考</th>
</tr>
</thead>
<tbody>
<tr v-for="keycap in keycaps" :key="keycap.name">
<td>
<div
class="flex flex-col place-content-center items-center gap-1"
>
<a
:href="`https://www.amazon.co.jp/dp/${keycap.asin}/?tag=${AMAZON_ASSOCIATE_ID}`"
target="_blank"
rel="noopener noreferrer"
>
<img :src="keycap.image" />
</a>
<a
class="btn btn-xs hidden grow bg-[#ff9900] text-white hover:bg-[#ff9900] sm:inline-flex"
:href="`https://www.amazon.co.jp/dp/${keycap.asin}/?tag=${AMAZON_ASSOCIATE_ID}`"
target="_blank"
rel="noopener noreferrer"
>
Amazonで購入
</a>
</div>
</td>
<td>{{ keycap.manufacturer }}</td>
<td>{{ keycap.name }}</td>
<td>{{ keycap.material }}</td>
<td>{{ keycap.shape }}</td>
<td>{{ keycap.printing }}</td>
<td>{{ keycap.concept }}</td>
<td>{{ keycap.notes }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
</div>
</template>
115 changes: 115 additions & 0 deletions content/blog/gadget/4.keycap-buy.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
---
createdAt: "2024/01/17"
updatedAt: ""
title: "キーキャップ購入時の注意点とAmazonで購入できるオススメのキーキャップ"
description: "キーキャップ購入時の注意点とAmazonで購入できるオススメのキーキャップを紹介します。"
category: "ガジェット"
tags:
- "キーボード"
- "キーキャップ"
thumbnail: "https://ashcolor-blog.s3.ap-northeast-1.amazonaws.com/img/blog/gadget/keycap-buy/thumbnail.jpg"
isRecommend: true
---

## はじめに

メカニカルキーボードの多くは[キーキャップを交換することができます]{.marker}。

キーキャップを交換すると見た目が大きく変わるため、元のキーボードの使用感はそのままに[自分好みの見た目にカスタマイズ]{.marker}することができます。
また、キーキャップの素材によっては[打鍵感や打鍵時の音も変わる]{.marker}ため、より使用感が向上できることもあります。

この記事では[キーキャップを購入するときの注意点と、Amazonで購入することができるオススメのキーキャップを紹介]{.marker}します。

## キーキャップを選ぶときの注意点

### 配列

キーボードは主に**日本語配列**と**英語配列**の2種類存在します。

配列を判別するときに最も簡単な方法は、Enterキーの形を確認することです。
[英語配列の場合はEnterキーは横長ですが、日本語配列の場合は逆L字型]{.marker}になっています。

キーキャップの[単体販売の場合、英語配列のキーキャップであることが多い]{.marker}です。
日本語配列をキーボードを使用している場合は、購入する前にキーキャップの配列を確認するようにしましょう。

### 形状

キーキャップの形状は上から見た限りだと同じように見えますが、[横から見たときの形は異なります]{.marker}。

[形状によって高さが違っていたり、行ごとに異なる傾斜が付いていたりします]{.marker}。
形状によって打鍵感は異なるものの、実際に使ってみないと自分に合った形状を見つけるのは難しいのです。

まずは試しに使ってみて、形状も気になるようになってきてからこだわるのがオススメです。

### 素材

キーキャップの素材は主に**PBT**と**ABS**が使われているいます。

PBTはABSよりも[高価ですが、耐久性があり触り心地はさらさら]{.marker}しています。
ABSは[安価ですが、耐久性は劣っており触り心地はどちらかと言うとつるつる]{.marker}しています。

キーキャップを交換するのであれば、[PBT素材のものを購入するのがオススメ]{.marker}です。

### 対応サイズ

キーボードの**サイズ**は何種類かあります。

交換用のキーキャップは多くの場合はフルキーボードに対応した数が入っていますが、[場合によってはフルサイズ分が入っていない]{.marker}場合もあります。

また、キーボードのサイズによっては[スペースキーとスペースキーの右側のキーのサイズが異なる場合]{.marker}があります。
特にスペースキーのサイズは場合にキーボードによっては長さが異なるため、購入前に対応するスペースキーのキーキャップが同梱されているか確認しましょう。

::call-out
キーキャップのサイズについて

キーキャップのサイズは「u」と呼ばれる単位で決められています。
1uは英数字キー１個分のサイズです。

::

</aside>

### 印字方式

キーキャップの文字の**印字方式**には、以下のようなものがあります。

| 方式 | 印字方法 | 印字の耐久度 |
| -------------- | ---------------------- | ------------ |
| ダブルショット | 2色の素材から成型する | 高 |
| 昇華印刷 | インクを染み込ませる | 高 |
| レーザー印刷 | レーザーで表面を焼く | 低 |
| シルク印刷 | 膜の上にインクを乗せる | 低 |

[レーザー印刷とシルク印刷は、タイピングをしているうちに印字が薄くなる可能性]{.marker}があります。

[ダブルショットや昇華印刷は耐久性が高い]{.marker}です。
基本的には[ダブルショットか昇華印刷のキーキャップを選択することをオススメ]{.marker}します。

### キートップ引き抜き工具

キーキャップを交換するには、**キートップ引き抜き工具**が必要になります。

キーキャップ引き抜き工具はキーボードに付属していたり、交換用のキーキャップに付属していたりします。
[手元にキートップ引き抜き工具がない場合は、別途用意する必要]{.marker}があるため注意しましょう。

![キートップ引き抜き工具 いくつかの形状がある](https://ashcolor-blog.s3.ap-northeast-1.amazonaws.com/img/blog/gadget/keycap-buy/key-puller.jpg)

## Amazonで購入できるオススメのキーキャップ

キーキャップを購入できるオンラインショップはいくつかありますが、私の探した限りでは[Amazonが種類が豊富で価格も比較的安価]{.marker}に感じました。

個人的な好みにはなりますが、見た目や素材が良かったキーキャップを一覧にまとめたので紹介します。

### 一覧

<GadgetAmazonKeycapTable></GadgetAmazonKeycapTable>

[シンプルでスタイリッシュなキーキャップは**XVX**]{.marker}、[特定のコンセプトがあってかわいい・かわいいキーキャップは**Ussixchare**]{.marker}というメーカーがよさそうです。

[キーキャップの特徴も表にまとめている]{.marker}ので合わせて確認してお気に入りのキーキャップを見つけてみてください。

## まとめ

この記事ではキーキャップを購入するときの注意点と、Amazonで購入することができるオススメのキーキャップを紹介しました。

みなさんのお気に入りのキーキャップを見つける参考になれば幸いです。
27 changes: 27 additions & 0 deletions content/data/amazon-keycap.csv
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
manufacturer,name,material,shape,printing,concept,notes,asin,image
XVX,ブラック,PBT,XVX,ダブルショット,-,反転カラーあり,B0BXWTXMV5,https://m.media-amazon.com/images/I/41WysdLKjZL._SL160_.jpg
XVX,ホワイト,PBT,XVX,ダブルショット,-,反転カラーあり,B0BXWVZG55,https://m.media-amazon.com/images/I/41rPabQJXML._SL160_.jpg
XVX,ホワイト/パープル,PBT,XVX,ダブルショット,-,反転カラーあり,B0BM4F5H8R,https://m.media-amazon.com/images/I/41OteujAijL._SL160_.jpg
XVX,ホワイト/グリーン,PBT,XVX,ダブルショット,-,反転カラーあり,B0BM4Q3YP4,https://m.media-amazon.com/images/I/41uKVVwmICL._SL160_.jpg
XVX,グレー/ブルー,PBT,XVX,ダブルショット,-,反転カラーあり,B0BCFDZK46,https://m.media-amazon.com/images/I/41mDwODiWML._SL160_.jpg
XVX,ブラック/パープル,PBT,XVX,ダブルショット,-,反転カラーあり,B0C76Z9Q5N,https://m.media-amazon.com/images/I/41RnGg8lUPL._SL160_.jpg
XVX,透明,PC,Cherry,UV印刷,-,-,B0BR4X594K,https://m.media-amazon.com/images/I/51uDeG8fyRL._SL160_.jpg
Ussixchare,Apollo blue,PBT,XDA,昇華印刷,アポロ,-,B0BWLMQ8P1,https://m.media-amazon.com/images/I/41ZYXzFv9eL._SL160_.jpg
Ussixchare,Blue moon,PBT,XDA,昇華印刷,月,ひらがな印字あり,B0BWLHJ2F1,https://m.media-amazon.com/images/I/41jhnfCRceL._SL160_.jpg
Ussixchare,Honey milk,PBT,XDA,昇華印刷,はちみつ/ミルク,ひらがな印字あり,B0BX1QHL1S,https://m.media-amazon.com/images/I/51YMk0Ca2hL._SL160_.jpg
Ussixchare,Marshmallow pink,PBT,XDA,昇華印刷,マシュマロ,-,B0BWLYXRTP,https://m.media-amazon.com/images/I/41xDCMMymdL._SL160_.jpg
Ussixchare,Minimalist white,PBT,XDA,昇華印刷,ミニマリスト,ひらがな印字あり,B0BWM3V8BW,https://m.media-amazon.com/images/I/41sfLC19PQL._SL160_.jpg
Ussixchare,Strange cat white,PBT,XDA,昇華印刷,猫,-,B0BWLZDGL5,https://m.media-amazon.com/images/I/41zQ8+prTvL._SL160_.jpg
Ussixchare,Twilight,PBT,XDA,昇華印刷,黄昏,-,B0BX26NQ8V,https://m.media-amazon.com/images/I/41IneNTS3iL._SL160_.jpg
Ussixchare,Yellow lightning,PBT,XDA,昇華印刷,？,-,B0BWLVRKL3,https://m.media-amazon.com/images/I/41Q4pBpxl6L._SL160_.jpg
Ussixchare,Black pudding,PBT,XDA,？,-,下半分が半透明,B0CBJRB55X,https://m.media-amazon.com/images/I/51RjQrdS1RL._SL160_.jpg
Ussixchare,Forest green,PBT,XDA,昇華印刷,森,-,B0BWM7NDZM,https://m.media-amazon.com/images/I/41EnM28UMDL._SL160_.jpg
Ussixchare,Galaxy black,PBT,XDA,昇華印刷,宇宙,-,B0BWLZ2GJQ,https://m.media-amazon.com/images/I/41MO7WFo89L._SL160_.jpg
Ussixchare,Heavy industry yellow,PBT,XDA,昇華印刷,重工業,-,B0BWLPKF4C,https://m.media-amazon.com/images/I/513I7hIKFsL._SL160_.jpg
Ussixchare,Misty grey,PBT,XDA,昇華印刷,霧,,B0BWLKF8GN,https://m.media-amazon.com/images/I/41n6RvpgG9L._SL160_.jpg
通用,ミルクミニマリストホワイトテーマ,PBT,XDA,昇華印刷,ミルク,-,B09S8DQFGK,https://m.media-amazon.com/images/I/51PyTQjlpbL._SL160_.jpg
HYSSP,サーモン,PBT,XDA,-,サーモン,-,B0BBMM5946,https://m.media-amazon.com/images/I/41zVB6oU9fL._SL160_.jpg
HYSSP,シャーク,PBT,Cherry,-,サメ,-,B0BFVTRSKQ,https://m.media-amazon.com/images/I/41xmiURnqTL._SL160_.jpg
HYSSP,抹茶,PBT,XDA,-,抹茶,-,B09ZQPQDR8,https://m.media-amazon.com/images/I/41ksdktJWXL._SL160_.jpg
HYSSP,音波,PBT,Cherry,-,音波,-,B0BG2KB5W8,https://m.media-amazon.com/images/I/41YaiaSWpbL._SL160_.jpg
HYSSP,黒騎士,PBT,Cherry,-,黒騎士,-,B0BJK82C23,https://m.media-amazon.com/images/I/41lY4ZnxEkL._SL160_.jpg

0 comments on commit e44f11e

Please sign in to comment.