タイトル通り勉強がてらに作ってみました。
Kindle Unlimited、私よく使ってます。ただ、検索すると有料の本と一緒に表示されるんですよね。これをUnlimitedだけにしたい。
初期構想としては、Amazon API使って本を並べたかったのですが、Amazon アソシエイツのAPIを使用するためには、アフィリエイトの一定の実績が無いとダメとか。
昔はこのサイトにもアフィリエイト貼っていたのですが、全く売れず、実績なし（死 ……使えません。API使えません！ くそう。
検索してたら、Amazonの商品ページにリンクするURLを作るという方法があるのを知りました。
仕方ない、第二案として、このページをインラインフレームに取り込んで……
作ってみたら、インラインフレーム内で「www.amazon.co.jp で接続が拒否されました」と出てしまう。Amazon側が許可してないのが判明しました。
第三案として、[kindle unlimited検索を作ってみた] と同じになってしまうのですが、もう、新規のアプリを作るという野望は捨てて、React+TypeScript＋chakra-ui学習のために作ることにしました。とほほ。
コードを貼りますので参考にしたい方は見てください。試行錯誤したので、日本語の情報がまだまだ少ない状況の中、役に立つかもしれません。
ファイル構成は、以下。
App.tsx
import React from 'react';
import Title from './components/Title';
import Form from './components/Form';
import './App.css';
function App() {
return (
<div className="App">
<Title />
<Form />
</div>
);
}
export default App;
Title.tsx
// Title.tsx
import React from 'react';
const Title = () => {
return <h1>kindle Unlimited書名検索</h1>;
};
export default Title;
Form.tsx
/* eslint-disable react/void-dom-elements-no-children */
// Form.tsx
// ローカルだと右記をしておくこと > npm i react-iframe
import React, { useState } from 'react';
import { Button } from '@chakra-ui/react';
const Form = () => {
const [bookName, setWord] = useState('');
// const defname = bookName;
const wordenc: string = encodeURIComponent(bookName);
// なんか、URLを一つに纏めると（８０字超えると）エラーになるので３分割
const url1: string = 'https://www.amazon.co.jp/s/ref=sr_nr_p_n_';
const url15: string = 'feature_nineteen_0?rh=n%3A2250738051%2Ck%3A';
const url2: string = '%2Cp_n_feature_nineteen_browse-bin%3A3169286051';
const urlx: string = url1 + url15 + wordenc + url2;
const jumpUrl = () => {
window.open(urlx, '_blank');
};
return (
<>
<form onSubmit={jumpUrl}>
<p>
<input
type="text"
name="bookName"
onChange={(e) => setWord(e.target.value)}
value={bookName}
/>
<Button type="submit" colorScheme="blue" onClick={jumpUrl}>
検索してジャンプ
</Button>
</p>
<p>
<a href={urlx} target="_blank" rel="noreferrer">
{bookName}の含まれる本のリストへジャンプ
</a>
</p>
</form>
</>
);
};
export default Form;
theme.tsx
import { extendTheme } from '@chakra-ui/react';
const theme: any = extendTheme({
styles: {
global: {
body: {
// backgroundColor: 'orange.50',
background: "url('./washitexture12.jpg')",
color: 'gray.800',
},
p: {
fontSize: { base: 'md', md: 'lg' },
lineHeight: 'tall',
textAlign: 'center',
},
h1: {
fontSize: '2xl',
lineHeight: 'tall',
textAlign: 'center',
},
},
},
});
export default theme;
index.tsx
import React, { StrictMode } from 'react';
import ReactDOM from 'react-dom';
import { ChakraProvider } from '@chakra-ui/react';
import theme from './theme/theme';
import App from './App';
// const rootElement = document.getElementById('root');
ReactDOM.render(
<StrictMode>
<ChakraProvider theme={theme}>
<App />
</ChakraProvider>
</StrictMode>,
document.getElementById('root')
);
ローカルの背景画像のパスはよく分かりませんでした。ビルドしてデプロイした後一致するようにしているので、フォルダ構成中の画像ファイルの位置は嘘です。
Vue.jsとReactとどっちがいいか、どっちも作ってみたのですが（Vue.jsの方は易占アプリ）、Vue.jsの方がまだわかりやすいような。ただ、プログラム組むときに、TypeScript文法チェッカーが強力で、どこが間違っているのかすぐわかるという。
まあ、動くはずのコードがチェッカーに引っかかってなんでやねんと、思いましたが、チームで作るときに独自のコードを書いてしまう可能性が低くなるのは利点かなと。
それにしても、chakra-ui、情報が少ないです。本で勧められていたけど大丈夫か？
良かったら、Kindleアプリ見に行ってください。
コメント