UUUM攻殻機動隊(エンジニアブログ)

UUUMのエンジニアによる技術ブログです

Webの技術でYoutube Viewer作った

はじめに

この記事は、UUUM Advent Calendar 2018 20日目です。

12月から新入社員の takeokunn です。普段は LMND の開発をやっております。

UUUMに入った初日(9/18)、 クリエイター(youtuber)のことを全く知らず他の人と会話が合わずに詰みました。 そこでこの会社でこの先生きのこるには効率よくキャッチアップする方法が必要だと思ってUUUM Creatorの動画viewerを作りました。

木下ゆうか さん、ごはん美味しそうに食べるから好き

Effective Youtube Viewer

f:id:bararararatty:20181217152621p:plain

Electronは配布してないので自前でbuildしてください

使ってる技術

  • electron
  • webpack/babel
  • react
  • redux/redux-saga
  • service worker
  • CSS Grid
  • csscomb/eslint
  • CircleCI

よくあるweb frontendの構成です。

redux-saga 楽しい

サービスの質を決めるのはエラーハンドリングだと思っています。 web frontendにおいて、非同期処理、特にAjax周りのハンドリングは非常に面倒ですが、redux-sagaを使えば体感すっきり書くことができます。

この辺がわかりやすいです。 redux-sagaで非同期処理と戦う f:id:bararararatty:20181217160209p:plain

以下はyoutube channelを取得する action/reducer/saga の例です。

抜粋: src/actions/youtube.action.js

export const fetchChannelVideo = {
    request: channel_id => action(YOUTUBE.FETCH_CHANNEL_VIDEO_REQUEST, { channel_id: channel_id }),
    success: data => action(YOUTUBE.FETCH_CHANNEL_VIDEO_SUCCESS, { data: data }),
    failure: () => action(YOUTUBE.FETCH_CHANNEL_VIDEO_FAILURE)
};

抜粋: src/reducers/youtube.reducer.js

const channel_video = (state, action) => {
    switch (action.type) {
    case YOUTUBE.FETCH_CHANNEL_VIDEO_REQUEST:
        return { ...state, is_fetching: true };
    case YOUTUBE.FETCH_CHANNEL_VIDEO_SUCCESS:
        return {
            ...state,
            is_fetching: false,
            search_videos: action.payload.data.items.map(item => ({
                title: item.snippet.title,
                description: item.snippet.description,
                thumbnail_url: item.snippet.thumbnails.medium.url,
                video_id: item.id.videoId,
                comments: [],
                comment_count: null,
                dislike_count: null,
                favorite_count: null,
                like_count: null,
                view_count: null,
            }))
        };
    case YOUTUBE.FETCH_CHANNEL_VIDEO_FAILURE:
        return { ...state, is_fetching: false };
    }
};

抜粋: src/sagas/youtube.saga.js

function* handleFetchChannelVideo() {
    for(;;) {
        const action = yield take(YOUTUBE.FETCH_CHANNEL_VIDEO_REQUEST);
        const response = yield call(ajax.searchChannelId, action.payload.channel_id);
        switch (response.status) {
        case 200:
            yield put(youtube.fetchChannelVideo.success(response.data));
            break;
        default:
            yield toastr.error('失敗', '通信失敗');
            yield put(youtube.fetchChannelVideo.failure());
        }
    }
}

今後の展望

弊社ではクリエイター分析ツールの開発などもやっているのでそれと連携して拡張できたら良いなぁと思います。

また、新着のsubscribe(webpush)やそのクリエイターの詳細情報など載せられるともっともっと良くなるだろうなぁと

今はクリエイターの管理がjsonで手書きで書いていて雑なのでなんとかしたいのと、あまりテストを書けてないので充実させたいなぁと src/options/youtuber.json

最後に

木下ゆうか さんの動画をデバッグに使い始めてから体感開発効率は上がるわ、体感javascript力も上がるわ、体感リロード時間も早くなるわで良いことづくめでした。本当にありがとうございました。 ← チャンネル登録しよう

UUUMでは (任意の文字列)エンジニアを募集しているそうです。 www.wantedly.com www.wantedly.com