React: GoogleアナリティクスでSPAをトラッキングする

通常のWEBページでGoogleアナリティクスを使用するにはヘッダーに指定のタグを埋め込むだけで良いですが、その手法では、Reactを用いたSPAのページ遷移を正しく集計できません。そこで、ちょっとした工夫が必要になります。

react-gaのインストール

yarn add react-ga

index.js

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, Switch } from 'react-router-dom';
import ReactGA from 'react-ga';
import createBrowserHistory from 'history/createBrowserHistory';

ReactGA.initialize('[トラッキングコード]');
const history = createBrowserHistory();
history.listen(({ pathname }) => {
  ReactGA.set({ page: pathname });
  ReactGA.pageview(pathname);
});

render(
       <Router history={history}>
         <Switch>
           <Route .../>
           <Route .../>
         </Switch>
       </Router>,
       document.getElementById('root')
)

Python: boto3を使用してDynamoDBを操作する

itemの追加

import boto3
dynamodb = boto3.resource('dynamodb')
table = dynamodb.Table('[テーブル名]')
table.put_item(Item={'[キー]': '[値]'})

itemの取得

import boto3
dynamodb = boto3.resource('dynamodb')
table = dynamodb.Table('[テーブル名]')
item = table.get_item(Key={'[キー]': '[値]'})

itemの削除

import boto3
dynamodb = boto3.resource('dynamodb')
table = dynamodb.Table('[テーブル名]')
table.delete_item(Key={'[キー]': '[値]'})

Python: リストからランダムに要素を選択する

ランダムに要素を一つ選択する

mylist = [1, 2, 3, 4, 5]
print(random.choice(mylist))
#2

ランダムに要素を複数選択する(重複なし)

mylist = [1, 2, 3, 4, 5]
print(random.sample(mylist, 2))
#[4, 5]

ランダムに要素を複数選択する(重複あり)

mylist = [1, 2, 3, 4, 5]
print(random.choices(mylist, k=3))
#[1, 1, 5]

choicesはPython3.6から追加された機能なので、それ以前のバージョンで実行すると以下のようなエラーが出力されます。

Traceback (most recent call last):
  File "", line 1, in 
AttributeError: 'module' object has no attribute 'choices'

React Native + Expoで簡単スマホアプリ作成

インストール

npm install -g create-react-native-app

アプリ作成

create-react-native-app myapp
cd myapp
yarn start

実機でテスト

Expo Clientをダウンロード。QRコードから読み込む機能は無くなったらしいのでメールでURLをスマホに送信します。


一瞬でアプリを作成できました。

React: AWS AmplifyコンソールでReact-routerを使用する

React-routerでページを遷移した後に更新ボタンを押すと、白紙のページになってしまいます。Amplify Console 200 (Rewrite) fails on SPA React (Router) Applicationを参考に、以下のように「書き換えて、リダイレクト」の設定を変更すると、無事動作しました。

Python: 「<」と「>」を参照文字に変換する

最近、Reactの記事を書くことが多くなってきたので、「<」と「>」を参照文字に変換するスクリプトを作成しました。標準入力からコードを読み込んで、「<」を「&lt;」に、「>」を「&gt;」に変換するだけです。「exit」と打つと、入力を終了して、変換結果を出力します。

code = []
while True:
    line = input()
    if	line == 'exit':
        break
    code.append(line)
code_replaced = '\n'.join(code).replace('<', '&lt;').replace('>', '&gt;')
print(code_replaced)

React: 再生ボタンを押すと音楽が流れるようにしたい

インストール

yarn add @material-ui/core
yarn add @material-ui/icons
yarn add react-sound

使用例

import React, { Component } from 'react';
import IconButton from '@material-ui/core/IconButton';
import PlayArrowIcon from '@material-ui/icons/PlayArrow';
import Sound from 'react-sound';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      status: Sound.status.STOPPED,
    }
  }
  render() {
    return (
      <div>
        <Sound url="[サウンドファイル]" playStatus={this.state.status} />
        <IconButton aria-label="Play/pause" onClick={()=>{this.setState({ status: Sound.status.PLAYING })}}>
	  <PlayArrowIcon />
        </IconButton>
      </div>
    );
  }
}

こんな感じでしょうか。

Python: OpenCVで動画に字幕をつける

ややタイトル詐欺ですが、OpenCVで動画を読み込んで、画像処理ライブラリPillow(PIL)で字幕をつけます。OpenCVのputText()で字幕をつけることもできますが、日本語は文字化けしてしまうようです。

インストール

sudo yum install -y python3
sudo yum install ipa-gothic-fonts 
sudo pip3 install opencv-python
sudo pip3 install pillow

字幕をつける

img.MOVを読み込んでoutput.m4vに字幕をつけて出力します。

import cv2
import numpy as np
from PIL import ImageFont, ImageDraw, Image

cap = cv2.VideoCapture('./img.MOV')
fps = cap.get(cv2.CAP_PROP_FPS)
width = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))
height = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))
fourcc = cv2.VideoWriter_fourcc('m', 'p', '4', 'v')
out = cv2.VideoWriter('output.m4v', fourcc, fps, (width, height))

while True:
    ret, frame = cap.read()
    if ret:
        frame_rgb = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
        pil_image = Image.fromarray(frame_rgb)
        draw = ImageDraw.Draw(pil_image)
        font = ImageFont.truetype('/usr/share/fonts/ipa-gothic/ipag.ttf', 50)
        draw.text((50, 300), '国会議事堂', font=font)
        rgb_image = cv2.cvtColor(np.array(pil_image), cv2.COLOR_RGB2BGR)
        out.write(rgb_image)
    else:
        break

cap.release()
out.release()

色の表現方法が、OpenCVはBGRであるのに対して、PillowはRGBですので、その変換が必要になっています。
結果は以下の通りです。


Python: OpenCVを使用して、アメ横を行き交う人々のエッジを検出する

何の役に立つかわかりませんが、アメ横を行き交う人々のエッジを検出しました。

import cv2
import numpy as	np

cap = cv2.VideoCapture('./img.MOV')
fps = cap.get(cv2.CAP_PROP_FPS)
width = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))
height = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))
fourcc = cv2.VideoWriter_fourcc('m', 'p', '4', 'v')
out = cv2.VideoWriter('output.m4v', fourcc, fps, (height, width))                                                                     

while True:
    ret, frame = cap.read()
    if ret:                                                                                                             
        frame270 = np.rot90(frame, 3)                                                 
        dst = cv2.Canny(frame270, 50, 200)
        bgr = cv2.cvtColor(dst, cv2.COLOR_GRAY2BGR)
        out.write(bgr)
    else:
        break

cap.release()
out.release()

「bgr = cv2.cvtColor(dst, cv2.COLOR_GRAY2BGR)」がポイントです。これをしないと正常に動画を出力できません。

結果は以下の通りです。

cv2.bitwise_not(dst)として、白黒反転させた方がいい感じです。