

ここ1年ほどクレカの決済修行も兼ねた高還元ルートによるポイ活()にお世話になっていましたが、ただお金を払って何円使ったかを管理するだけの作業が煩雑化したのでやめました。

この記事はしょうもないただのポエムなので、自分で用意したこのインターネットゴミ箱に捨てて置くことにします。

## 高還元だからめんどくさい

高還元決済ルートとはクレカから支払いまでに複数の決済サービス(プリペイドカード等)を経由することによるポイントの多重取りで高還元を実現することであり、その性質上、基本的に高還元であるほど経由するサービスは多くなります。

例えば以下は私が実際に使っていた5つのサービスを経由し還元率4.5%の得る決済ルートです。

1. JQエポスゴールド
2. MIXIM(2.5%)
3. FamiPay(3%)
4. ANA Pay(3.5%)
5. TOYOTA Wallet(4.5%)
6. モバイルSuica(4.5%～)
7. 買い物

これを実際に運用していくとめちゃくちゃ家計管理がめんどくさい。

- 金が各サービスに散乱する
    - 最高還元率のモバイルSuica残高
    - モバイルSuicaが使えない時用のTOYOTA Wallet残高
    - リアルカードが必要な時ようのMIXIM残高
- 家計簿アプリと連携出来ないサービスが多い
    - 上記の中で自動かつ快適に連携出来るのはMIXIMだけ
- ポイントが各サービスに散乱する
- チャージがめんどくさい

また、経由されているだけのサービスがそれを良しとするはずもなく、数ヶ月～早ければ数週間でチャージ不可、ポイント付与対象外となるケースが多く、基本的に経由するサービスが多い=高還元=短寿命の傾向があります。
もちろん、上記の決済ルートも既に寿命を迎えてます。

そんなことが数ヶ月のサイクルで発生するため、決済ルートの再構築、Twitterで情報収集、各サービスの残高とポイントの消化と、決済ルートの管理までめんどくさい。

## めんどくさいと続かない

最初の頃は楽しかったです。
試行錯誤しながら決済ルートを考えて毎月貯まっていくポイントを眺めるだけで酒が飲めました。
もちろん長年連れ添ってきた家計簿アプリMoneyForwardに連携出来なくとも手動でチマチマ支出を入力していました。

しかし、1ヶ月も経つとモチベーションも失われ、正直どのくらい使ったのか分からない、週末に家計簿で計算するがどう頑張っても金額が合わず。
はっきりと分かるのは獲得ポイント数だけで、一体いくら使ってこのポイントを稼いだのかすらも分からない。

そんな時にJQエポスゴールドの選べるポイントアップショップに[改定](https://www.eposcard.co.jp/news/pointupshop230731.html?webview=false)が行われこともあり、目先のポイント以上の管理工数に加え、各種サービスに迷惑を掛け周り巡って自分の首を締めているだけな気がしてやめました。

## 決済はストレスフリーのほうがいい

別に決済だけじゃないですが、日常的に行う行為はストレスフリーの方がいいです。
それが手段なのであればなおさらです。
そもそも私がキャッシュレス決済オンリーにしたのは手動で家計簿をつけるストレスを解消するためでした。

## さいごに

良くも悪くもこの1年を通して私のクレカ論が大きく変わりました。
決済ルートの部品としてクレカを選ぶのでなく、決済の手段として年会費、還元率、特典のバランスの取れた長く使えるクレカを持つのが一番だと思い、今はそうしています。

何が合うかは人それぞれですが、クレカは決済の道具であり、決済は手段です。
道具に振り回されることなくストレスなく使うことが出来るというのが大事だと再認識しました。

ぴえん


ポエム

クレカ

高還元率決済ルートはめんどくせぇ


## 技術選定と構成

古来からの言い伝えで雑なアウトプット先としてWordpressブログを使ってましたが、
- 管理画面が使い辛くて記事投稿や管理がめんどくさい
- wordpress独自仕様と戦いながらサイトの体裁を整えるのが辛い
- レンタル鯖高い

あたりの理由からwordpressを脱却してなるべくコストを抑えて、触ってみたかったものを選定作り直しを図りました。  

最終的な技術選定は下記です。  

- Contentful
- Next.js
- GCS
- Cloudflare DNS
- Github Apps

構成を図にすると画像の通りです。  

![infra](images/0002/infra.png)

上記を実現するためのレポジトリが3つありGithubApps以外はmainへのプッシュをトリガーに自動で機能するようになっています。  
- [Next.js](https://github.com/sori883/contentfulBlog)
- [GithubApps](https://github.com/sori883/conetentfulBlogApps)
- [記事管理用](https://github.com/sori883/blogContent)

元々、NestJs+Prismaでバックエンドを作ろうと思っていましたが、CloudRunやCloudSQLの費用がどう頑張っても月1000円以上掛かるのと、Next.jsでSGするだけのブログなら無駄がすぎるのでやめました。  
代わりに触ってみたかったヘッドレスCMSを採用してます。  

## ContentfulとNext.js
有名どころのヘッドレスCMSから高機能＋無料枠が充実しているContentfulを選択しました。  
個人的に嬉しかったのはここらへん。  
- レコード数上限が25000
- 3個まで複数環境可
- GraphQL API

このサイトは、Next.jsでConentfulからGraphQLでデータを取得してSSGしています。  
Next.jsからContentfulのコンテンツ取得には、[GraphQL Content API](https://www.contentful.com/developers/docs/references/graphql/)と、Apollo Clientを使用してCodegenで下記の様に、型定義とQueryが自動生成させてます。

1.shemaを取得  
ContentfulのApps > GraphQL PlaygroundのSCHEMAからダウンロード出来たので、そのまま使ってます。  
下記を参考にコマンドラインで取得したかったけど、Apollo Client周りが面倒だったのでやめました。  
[Contentful, Next.js, Apolloで作成したポートフォリオをGithub Pagesに公開したときの備忘録](https://qiita.com/Adacchi3/items/e6d14dda4084f6a88812)

2.Queryを作成  
例として、ページングで使えそうな取得Queryを定義  
```GraphQL
query posts($skip: Int, $limit: Int) {
  postsCollection(skip: $skip, limit: $limit){
    items{
      title
      slug
      content
    }
    total
  }
}
```

3.codegen.ymlを作成  
あとは下記の様なcodegen.ymlを作成して、`graphql-codegen --config codegen.yml`を実行するだけで
型定義等が生成されます。  

```yml
overwrite: true
schema: "./src/graphql/schema.graphql"
documents:
  - ./src/graphql/queries/**/*.graphql
generates:
  src/graphql/generated.ts:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-react-apollo"
    config:
      skipTypename: true
      scalars:
        Date: number
```

自動生成された後は、getStaticPropsなどでよしなに使えます。  
```js
// 生成されたのは、PostsQuery、PostsQueryVariables、PostsDocument
const { data } = await client.query<PostsQuery, PostsQueryVariables>({
  query: PostsDocument,
  variables: { limit: 20, skip: 0 }
});
```
Codegenを体験すると、自分で書いていた時代には戻れなくなっちゃう。  

## ContentfulとGithub Apps
Contentfulにも、Wordpressの様な投稿画面はありますが、
- 記事をGitで管理したい
- 画像はGCSにアップロードしたい
を叶えるべく、特定レポジトリへのPushをトリガーとするGithub Appsを作成することにしました。  

まず、記事(mdファイル)は、Contentfulが用意してくれているコンテンツ管理用の[Content Management API](https://www.contentful.com/developers/docs/references/content-management-api/)を使用してエントリの作成・更新をしています。  

この追加・更新についてはドキュメントではざっくりしか触れられておらず、特にEntryLink(References)がある場合のエントリ作成・更新方法がどこに書いてあるのか一生探しました。  
(読み込みが浅いだけかも...?)  
また、タグ周りでfindOrCreateのような動作が必要になりましたが、それも見つからず(恐らく機能自体ない？)自分で実装することになったので、かなりの時間がかかりました。  

参考にしたい方がいましたら、汚いコードですが下記を参照ください。  
[https://github.com/sori883/conetentfulBlogApps/blob/main/src/index.ts](https://github.com/sori883/conetentfulBlogApps/blob/main/src/index.ts)  

また、画像配信はGCSを利用しています。  
理由としては、Contentfulで画像をアップロードすると1枚につき、無料枠のレコードが1消費されるからです。  
無料枠が25kもあるので要らない気もしましたが、無料枠を越したときに面倒な移行をやるくらいなら最初からGCSを使ったほうが楽な気がして英断しました。  

## 1ヶ月運用してかかった金
GCSだけの利用で税込み31円でした。  
収益0円の雑記としては許容出来るお値段ですね。  
![月額料金](images/0002/1month_money.png)

## 今後やりたいこと
OW2をやりながらだいぶ急いで作成したので、手直ししたいところがかなりあります。  

- ダークモード対応
- markdownの変換周りで、独自記法を追加したい
- 関連記事の表示
- OGP画像生成
- PageSpeed Insightsの結果を緑色にする
- 日本後、アルファベットともに読みやすいフォントを探したい
- 細かいデザイン修正

他にやりたいこともあるので、ゆっくり余生を過ごすような思いで直して行こうかと思います！

Contentful、Next.jsとGithub Appsでブログ作ったので構成紹介


## ブログ作ってみました
この業界に入った8割の人が一度はやってみようかと思い、5割がやっぱダルいわとなり、3割が実行していると噂の技術ブログを始めてみました。  

この記事はテスト投稿です。内容はありません。一読頂きありがとうございました。  

## 作ってみた感想
熱しやすく冷めやすい性格なので、熱が冷めないうちに出来栄えより形にすることを最優先に作ってました。  
そのお陰で、左右もよく分からん状態から仕事終わり＋休日の暇な時間にぼちぼちやって約1ヶ月という「頑張ったんじゃね？」と思える結果になってよかったと思います。  

## 今後、、、
ブログ面では、作って満足パターンにならないように頑張ってブログ書きます。  
というかメモったの清書して適当に軽い気持ちで載っけていきます。  

システム面では、新築なのに隙間風を感じるソースをゆっくり修正しながら人に見せられるレベルにしていきたい、、です、ね。  
あとは見づらい部分、使いづらい部分（PCにだけ表示される上に表示が微妙な目次とかね）を直しつつ、関連記事とかの機能をぶちこみたいなー。。と思ってます。  

## このブログで頻出する画像
ココナラというサービスを[熊田（くまだ）様](https://coconala.com/users/2964176)に作成していただきました。  
めっちゃかわいくない？すき  

![狐](images/0001/kitune500.png)

高還元率決済ルートはめんどくせぇ

Contentful、Next.jsとGithub Appsでブログ作ったので構成紹介

テスト投稿

T3-TurboでもT3-Stackに実装されているtRPC in RSCをしたい

Next.js製ブログでunifiedを使ってMarkdownを変換する

Storybookをバージョン6から7への移行

ChatGPTに人格を与えて遊んでみた

discordにChatGPTを導入した