React+TypeScript+chakra-uiでKindle Unlimitedの本を検索するアプリを作りました

未分類

タイトル通り勉強がてらに作ってみました。

Kindle Unlimited、私よく使ってます。ただ、検索すると有料の本と一緒に表示されるんですよね。これをUnlimitedだけにしたい。

初期構想としては、Amazon API使って本を並べたかったのですが、Amazon アソシエイツのAPIを使用するためには、アフィリエイトの一定の実績が無いとダメとか。

昔はこのサイトにもアフィリエイト貼っていたのですが、全く売れず、実績なし(死 ……使えません。API使えません! くそう。

検索してたら、Amazonの商品ページにリンクするURLを作るという方法があるのを知りました。

kindle unlimited検索を作ってみた - Qiita
はじめに(なぜ作ったか?) 月額980円で対象電子書籍が読み放題になるkindle unlimited。サービスが発表された当初、私はkindle paperwhite端末しか持っておらず、あまりピンときていなかったのですが、先...

仕方ない、第二案として、このページをインラインフレームに取り込んで……

作ってみたら、インラインフレーム内で「www.amazon.co.jp で接続が拒否されました」と出てしまう。Amazon側が許可してないのが判明しました。

iframeの内容がgoogle chromeで表示されない。|teratail
前提・実現したいこと私は以下のブログ管理者です 上記のページで、iframeを使用して複数のサイトの内容を表示したいのです。 発生している問題・エラーメッセージgoogle 

第三案として、[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を一つに纏めると(80字超えると)エラーになるので3分割
  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アプリ見に行ってください。

React App
Web site created using create-react-app

コメント

タイトルとURLをコピーしました