SPAでQRコードを生成する。

概要

「QRコードが欲しいなぁ…」って時ありますよね？

ネットで調べると、テキスト入力してー、サイズ入力してー、
作成ボタンポチーで、QRコードドーン、広告ワサワサー
みたいなサイトが色々引っ掛かりますよね。（偏見）

そこで、SPAでリアルタイムにQRコードが書き換わったら面白いかな、
と思って作ってみました。

作ったもの

Realtime QR Code Generator

使った技術

• React
• TypeScript
• Material-UI
• NOW
• Google Chart API

コード

ここに置いています。
ざっくりポイントだけ抜粋します。

Material-UIでCSS-in-JS

CSSクラスをmakeStyles、createStylesで定義することができます。
これによりCSSファイルが不要になります。

import { makeStyles, createStyles } from '@material-ui/styles';

const useStyles = makeStyles(() =>
  createStyles({
    app: {
      display: 'flex',
      flexWrap: 'wrap'
    },
    appBar: {
      marginBottom: '10px'
    }
  })
);

const App: React.FC = () => {
  const classes = useStyles();

  return (
    <div className={classes.app}>
      <AppBar position={'static'} color={'default'} className={classes.appBar}>
        <Toolbar>
          <Typography variant={'h6'} color={'inherit'}>
            Realtime QR Code Generator
          </Typography>
        </Toolbar>
      </AppBar>
    </div>
  );
};

export default App;

QRコードの仕様

• Google Chart APIの仕様に準拠します。

まとめ

• リアルタイムで動くQRコードは作れた。
• 1時間くらいで作ったので、バリデーションなどは未実装です…。