technikki

適当に技術系を書きます

楽天APIで商品情報を抜き出す

使ってみる

はじめに

ふるさと納税用のサービスのために、商品情報をとってきたい。
楽天APIでとってこれそうなので、使ってみる。

設定あれこれ

【楽天API】 楽天APIを使用できるようにする手順

数年前の公式回答だが、無料で使えるっぽい。

https://webservice.faq.rakuten.net/hc/ja/articles/900001971983-%E6%A5%BD%E5%A4%A9%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%AF%E7%84%A1%E6%96%99%E3%81%A7%E5%88%A9%E7%94%A8%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%81%8B-

使ってみる

テストページがある。ここで色々試した。

Rakuten Web Service : API Test Form

個別のページ内容を表示したい。その場合は、なんとかしてshopCodeを見つけてきてから、個別のitemCodeをとってくるようにする。 shopCodeはurlに入ってる。co.jpの次の/.../の部分。

https://item.rakuten.co.jp/f016683-shiranuka/8700-30009172/

shopCodeをAPIに入力すると、そのショップのアイテム一覧が得られるので。
"itemCode": "f016683-shiranuka:10000933"をまたAPIに渡せば個別の商品ページの内容が得られる。

終わりに

これ全部無料なら楽だし便利。

ふるさと納税のwebサービス案出し

はじめに

ふるさと納税の何かしらのWebサービスを作りたい。
自分は田舎の出身だが、自治体はふるさと納税で結構な額を稼いでるらしい。
逆に言えば、国民全体の納税額は変わらないのだから、ふるさと納税弱者の自治体もいるはず。
なんかこう。楽天とか有名どころで人気のある商品だから買うとかではなく。
自治体を応援したいとか、そんな気持ちになりやすいWebサービスを作りたいと思って。
ふるさと納税は実質負担額が少ないし、やった分得だよね、という感じなので相性はいいはず。
ざっくりと、新たな魅力を発見できるようなサービスにしたい。

案出し

Google Mapにふるさと納税事業者一覧を出す感じで。
あと、近所に行ったらこんな良い所、モノがありますよ、と提案してくるのもできたらなあと思って。ざっくりと。

ふるさと納税サイト

楽天でしか納税したことがないので、さとふるの使い勝手がわからないが、さとふるは初心者向け、楽天は高還元らしい。

実現方法あれこれ

楽天APIとか、さとふるスクレイピングとか。さとふるでは、robots.txtにも一部自治体を除いて可能みたいだった。

Google Map APIでできること一覧。Maps JavaScript APIってやつで作れそう。

結局

以下の中いくつかやってみたい。

  • 日本地図を表示。ピンどめしてある箇所を見てみると、そこには、ふるさと納税業者と返礼品が。

  • 近所に行ったらプッシュ通知。商品を知らせてくれる。

    • Webサービスよりもスマホアプリの方がいい？Webで実現できるならそっちの方がまだ慣れててやりやすい。

  • その日歩いた経路から、おすすめの商品を紹介する。

  • ジャンルを指定することで、絞り込んで提案。

ログインなしでお気に入り機能を使いたい

React 調べてみる

はじめに

簡単なサービスを作っている。
ログインするまでもないシンプルなものだが、お気に入り機能が欲しい。

Reactで永続化あれこれ

ググってみると、まずRecoilを使った例が出てきた。

recoil-persistってやつでできるらしい。

で、例を見てみると、atomって構造体的なものに対して、recoil-persistの関数を実施するっぽい。

…
import { atom, RecoilRoot, useRecoilState } from 'recoil'
import { recoilPersist } from 'recoil-persist'

const { persistAtom } = recoilPersist()

const counterState = atom({
  key: 'count',
  default: 0,
  effects_UNSTABLE: [persistAtom],
})
…

コンポーネント間で状態を見れるらしい。便利そう。

使い方には注意らしい。

で、似たような状態管理ライブラリで言うと、Jotaiがあるらしい。

というか、そもそも永続化をするには、localStorageって汎用的なやつでできるらしい。

これでええやん。

調べてみて

コンポーネント間で状態を共有できるのは便利そう。
Jotaiは日本発らしいし、recoilよりシンプルに書けるらしいので、複雑なことはしない自分には良いのかと。今後使ってみよう。

その他参考文献

Reactについて少し調べる

調べてみる React

はじめに

Reactって何となく記法は見たことあるけど、使ってないし全体像が掴めてない。
create-react-appを念頭に基本を調べてメモ。

index

サンプルサイトを見てみると、どうやらindex.jsには以下しか書かれていない。

ReactDOM.render(<App />, document.getElementById("root"))

Example Projects – React.

ReactDOMってなんや？
コンポーネントを画面に表示させるためのなにがしっぽい。
で、アプリに一回出せるrender()でコンポーネント指定して描画する感覚か。 要素のレンダー – React
DOMというのがJS→HTMLへの変換うんぬんのことらしい。
【初心者向け】DOM(ドム)とは？わかりやすく解説 | ホームページ制作・作成代行ならAMS

そしてどうやら、最近ReactDOM.render→createRootを使うよう置き換わったらしい。
React18からはレンダリングにcreateRootを使おう

create-react-appで作られる雛形はcreateRootなので、そっとそのままにしておく。

Appコンポーネント

慣習的にindexでrenderされるtopコンポーネントっぽい。
他のコンポーネントを対象として、Importして画面に並べたり、変数入れたりという感じ。
複数ページあるサイトを作る場合、ここでルートからのパスとコンポーネントを紐づけるっぽい。
RecipeFinder/App.js at master · devmahmud/RecipeFinder · GitHub
create-react-appはSPA。

Reactでシングルページアプリケーションを書こう | IIJ Bootcamp

Hooks

indexのところでもだけど、クラス→関数に置き換わる動向。
クラスより関数の方がわかりやすいよね、みたいな個人的解釈。 フックの導入 – React
で、便利な関数群がHooksというらしい。
普通renderすると変数の状態が消えちゃうけどHooks使うと保持できるよ、というイメージ。
【初心者向け】 React Hooks とは?その特徴・使い方…｜Udemy メディア

コード例

CSS適用

色々方法があるらしい。
React開発を行う際のcss設計方法について | masayanblog
個人的にわかりやすいので、とりあえずはcss modulesでいいかな。
将来的に非推奨になる可能性があるみたいだけど。

おまけyarn

ローカルで追加のパッケージがあった場合、DockerではModule not foundとなった。
yarnってコピペで使っててよく知らなかったけど、Facebook製のパッケージマネージャーなのね。
yarn実行でpackage.json更新。

パッケージマネージャー「Yarn」の使い方 - わくわくBank

その他参考文献

KoとCloud Runを使ってみる

調べてみる

はじめに

Google CloudだとAWSと違って月毎に無料枠があるらしい。
すごい。
Cloud Functionsを徹底解説！(基本編) - G-gen Tech Blog

前適当にAPIを作ったが、コンテナ化してないのでKo + Google Runがいいかなと思った。
でも今のところ長い処理とかカスタムする気はないので、Google Cloud Functionsで簡単に立ち上げるので十分だと思った。

いざ使ってみようとすると、Cloud Functionはいろんなサービスの組み合わせらしい。

そんなに長くサーバ保守するとは思えないし、無料枠の範囲内で使えると思うけど（よく調べてない）、課金発生すると管理も面倒だなと。

Ko + Google Runでやってみる。

Dockerイメージを保存しておく場所が必要になるらしい。
Google Container Registry, GitHub Container Regsitryなどあるみたいだが、今回はArtifact Registryでやってみる。0.5GB/月が無料なので十分かと。あんまり検討してない。

Artifact Registry

新しくProjectを作成して、APIを有効化、koの名前でリポジトリ作成。
ブラウザからぽちぽちやったらできた。
Artifact Registry

Artifact Registry  |  Google Cloud

CLIでもできるみたい。

GCPのArtifact Registryにコンテナイメージを保存する｜GCP｜開発ブログ｜株式会社Nextat（ネクスタット）

gcloudコマンドでconfigurationを作成、更新、変更する - Qiita

Ko

インストールとビルド。
koでArtifact Registry にimageをbuild & pushし、Secret Manager を使って楽にCloud Runに環境変数展開した話

環境変数とか2行程度の設定→ko buildでイメージがPushされた。すごい。

Google Run

これもブラウザぽちぽちで簡単にできた。 デフォルト設定で作成。
徹底解説！Cloud Run サービス作成（コンソール画面）

環境変数はSecret Managerたるもので管理したほうがいいらしい。
また少額だが金がかかる…がまあそんなでもないので。API有効化。

で、やっていくと以下応答が返ってきた。

{"message":"no matching operation was found"}

どうやら、oapi-codegenのyamlでserversを設定していたのが原因っぽい。
設定削除したらCloud Runから応答返ってきた。いえーい。ただそれでいいのか不明。

それとPORTを環境変数から持ってくるのがいいらしい。
ローカルで作ったDockerコンテナをCloud Run で公開するまで - Qiita

CD

ここまで手動でArtifact RegistryからイメージをCloud Runに紐付けていたけど、CD設定したいと思った。
そこでCloud Buildが必要になるっぽい。
ならもうCloud FunctionでいいしKoいらんやん…手早く動作確認したい場合にいいってことですね。
ちなみにGithubにpushされた時、自動でKoでビルドしてArtifact Registryにコンテナイメージをpushもできるみたい。
結局Cloud Buildが一日120ビルドまで無料らしいので、CDにはそっちを使うことに。
ブラウザぽちぽちで簡単にGithubと紐付けられた。

その他参考文献

Cloud Functionsを徹底解説！(基本編) - G-gen Tech Blog
これから始める Cloud Functions 入門 | google-cloud-jp
Cloud Loggingログバケットの課金が始まります(2023年3月1日から) - G-gen Tech Blog

koでCloud Runへのデプロイまでを試してみた感想 - VideoMarketクリエイターズブログ

2022-10 の Cloud Storage 料金改定に伴い GCR から Artifact Registry へ移行する - ぽ靴な缶

GitHub - ko-build/setup-ko

GCPのArtifact Registryにコンテナイメージを保存する｜GCP｜開発ブログ｜株式会社Nextat（ネクスタット）

koで高速にGoのimage build - Devlog by Reazon Holdings

Cloud Run を徹底解説！ - G-gen Tech Blog

なぜ今も Google App Engine を選ぶのか - ぽ靴な缶

Google のメッセージングサービス Cloud Pub/Sub とは？特徴やユースケース、料金体系まで徹底解説！ | 株式会社トップゲート

Cloud Build の料金  |  Cloud Build のドキュメント  |  Google Cloud

例えツッコミジェネレータの作成

作ってみる

作ったもの

tatoe-tsukkomi-frontend.vercel.app

はじめに

自分はお笑いが好きでよくみる。
最近は元芸人の怪物くんのYotubeチャンネルがお気に入り。 貪るように物を食べ若干サイコパスな怪物くんに対して、カメラマン兼ディレクターの上田さんの的確な例えツッコミが超おもろい。

youtu.be

彼のツッコミは画像や様子から視覚的に例えることが多い印象。
これってOpenAIに画像を入力すればそれっぽいことできるんじゃね？と思った。
加えて、例えツッコミをググってみても、ジェネレータ的なものが存在しないっぽい。（2023年2月個人調べ）

というのが動機。とは言っても最初から画像認識はハードルが高そう。
じゃあまずは文章ベースで例えツッコミをしようかと。

OpenAIのPlayGroundでやってみても、まあまあいい感じの答えが返ってくる。 API使って遊んでみたい。

方針

  • ワードを入力すると、例えツッコミで返ってくる何かが欲しい
    • Input: 暑い
    • Output: 砂漠か！（クオリティ）
  • まず OpenAIのAPIをいじってみる
    • ユーザ入力部分はまあgetのパラメータで後々作る。
    • 文字数決めてInputして、OutPutはまあ任せるって感じで。

OpenAI API

ChatGPTがめっちゃバズってる。ズムサタでもスゲーって言ってた。

OpenAI

  • gpt-3のAPIを使用する
  • promptに例を与えてモデルを動作させる
    • 少ないテキストデータでもそれっぽく作れるので gpt-3
    • 教師データを多めに用意して学習させるのも面倒
    • 将来的にはLike機能とかつけて、よさげな回答からTraningしてもいいかもしれない。
  • プランはAPI動かしてみた感じで決める
    • 安さは正義
    • promptに定型文を毎回入力させてるが、何回もやるとやばそう。
      • Billing overviewからUsage limitsが設定できた。上限$10にしといた

GoでAPI使ってみる

試しにGo言語でapiを使用。
サンプルプログラムのpromptとかエンジンを変更してみてやってみた。
最高性能のDavinciじゃないといい感じの答えが返ってこない。
これはお金がかかりそう。
FineTuningのTrainingプランとやらでモデルをチューニングしてから使ったほうがpromptの分安上がりなのかもしれない。後々また調査しよう。

ChatGPTでやってみると

うーん怒られてしまいましたなあ。確かに例えツッコミは解釈を狭めてステレオタイプに押し込めてしまうとも言えるのか。 ChatGPT

OpenAPIでRESTのコード自動生成

なんかおすすめされていないみたい。
OpenAPI3.0のまともなGoコード生成ツールがいない • masu-mi's blog(dirty pages)

ようわからんけど、自動生成便利そうだからとりあえず使ってみた。
結果、それっぽくなった。

github.com

動作確認

curl 'http://localhost:8080/tsukkomi?tsukkomi=かわいい'
{"tsukkomi":"子犬か！"}

うまくできてそう。（クオリティ）

フロントエンド

Reactで適当に作成中

参考文献

【2023年版】OpenAIのAPIキー発行手順！ChatGPT風の文章生成やDALL-Eの画像生成AI利用 | AutoWorker〜Google Apps Script(GAS)とSikuliで始める業務改善入門

【OpenAI】ChatGPTのAPI利用方法と料金について解説 | Apple Geek LABO

OpenAIのAPIを使う

OpenAI GPT-3 APIの使い方を解説 | 楽しみながら理解するAI・機械学習入門

GitHub - PullRequestInc/go-gpt3: An OpenAI GPT-3 API client enabling Go/Golang programs to interact with the gpt3 APIs.

GitHub - deepmap/oapi-codegen: Generate Go client and server boilerplate from OpenAPI 3 specifications

OpenAPI3を使ってみよう！Go言語でクライアントとスタブの自動生成まで！ - ZOZO TECH BLOG oapi-codegenでchi用APIインターフェースを自動生成 – rinoguchi's techlog

OpenAPI Specification 3.0 チートシート - 朝日ネット 技術者ブログ

[Go] OpenAPI コード自動生成でビジネスロジックに集中する開発へ - Qiita

OpenAPIからGo言語のコードを自動生成してくれるツールを試してみた

Markdown記法

調べてみる

はじめに
Markdown記法全然使ってないので軽く調べてみる。
ググるとたくさん情報が。
以下参考にさせてもらったサイト。

https://qiita.com/tbpgr/items/989c6badefff69377da7

https://original-game.com/markdown-notation-list/#m_heading-10

https://geniusium.hatenablog.com/entry/2022/09/03/230551

https://www.sejuku.net/blog/77336

サンドボックス的に適当に触りだけやってみる。

Markdown記法のメモとして残したいが。 そのまま書くと当然記法が反映されてしまってようわからん。 テキストで残したいのでまずその辺。

テキスト埋め込む時には ` or ~ を3つ記述して、上下挟むようにテキスト囲むとできるらしい。

　~~~css:./hoge/style.css
　body {
  　color: #abc;
　}
　~~~

文章の種類とファイル名指定できるらしいけど、反映されてないみたい。はてなブログだから？

body {
  color: #abc;
}

次。なんか文章書いてて、改行がなんかおかしい。どうやら、空白行 or スペース2つ or brタグ使用するらしい。めんどい。

次。見出しで区切らないと分かりづらい。#を頭につけるといいらしい。
数多いほど文字小さくなるっぽい。

#でか
##ちょい1でか
###ちょい2でか
####ちょい3でか

リンクのはり方

あと。目次があってもリンクで飛べないサイトたまにあるよね。
以下のようにaタグをおくと飛べるらしい。

[はじめに、へのリンクだよ〜](#aタグのid)
<a id="aタグのid"></a>

はじめに、へのリンクだよ〜

で、URLも同じ感じで貼れるみたい。

[URLリンクだよ〜](URL)

URLリンクだよ〜

おわりに

まあこんだけできればとりあえずは満足ですかな。