もちっとメモ

もちっとメモ

もぐりのエンジニアが日々の中で試してみたことを気が向いたときに書き連ねていきます

ポッドキャスト始めてみたくてReact触ってみた

経緯とか

最近、Tech系のポットキャストを趣味で聴き始めたのですが、そんな話を仲間内でしたら「自分たちでもやってみない?」ということになったのでReact使って公開用のページを作ってみました。とはいえ、React初心者が作ったものなので、クオリティはお察しです。 今回の目標は、 - Youtubeの動画を埋め込む - 毎回の放送をカードで表示する - カードの内容をGoogle Sprede Sheetから取ってくる - Twitterのタイムラインを埋め込む

ができれば最低限の体裁はできるかなと言うことで、取っ付きやすそなのから順番に試して意図通りに動いたら即採用。なので、もっといい方法はきっとあると思いますが、そこは今後追求します。

環境構築etc.

React初心者なので、ディレクトリ構成とかBabelとか言われてもちんぷんかんぷんなので、その辺りをよしなにしてくれるcreate-react-appを使うことにします。なんでもfacebookが提供しているお手軽プロジェクトビルダーだとか。インストールにはこちらを参考にしました。 Windows+VSCode上でReact開発環境を構築 Macの場合は私はこんな感じでインストールしました。 MacでReactの環境を作ろうと思ってコケた あとはこのあたりを参考にざっと斜め読みして、書き方のお作法を勉強しました。 jQueryを卒業したかった僕がReact StaticでReactをイチから学んでWebサイトを作った話

Youtubeの動画を埋め込む

React Player 日本語の参考ページがみたい方はこちら Reactアプリケーションで動画や音楽ファイルを扱うために「react-player」を使用する ページにしたがって、

$ npm install react-player --save

でインストールする。今回は音声ファイルはYoutubeにあげるつもりなので、Youtubeの動画を再生できればOKにします。React Playerはいろんな形式の動画を再生できそうなんだけど、Youtubeは専用のPlayerが用意されているようなので、そいつを使うことに。これも公式ページの通りに組んでみると、ちゃんと再生できたし、シークバーも表示されました。純粋なReact Playerだとシークバーは出ませんでした。

毎回の放送をカードで表示する

そろそろBootstrapを卒業しようと思うので、Reactと相性がいいらしい、Material UIを使ってみることにします。 【React】Material-UIでReactアプリケーションをマテリアルデザイン化する もっと凝ったUIを作りたい場合は公式ページにソース付きでデモがあるのでお試しあれ。 Material-UI Cards 他の候補としてはこの辺りがおすすめぽいです。 無料のマテリアルデザインフレームワーク10選

カードの内容をGoogle Sprede Sheetから取ってくる

これが正直一番難しかったです。最終的に取った手段が 1. Google Spread SheetをGoogle Apps Script(GAS)で取得&JSON形式で返す 1. ReactでJSONを読み込んで所望の形式に変換して表示

でした。 まず、こんな感じのSpread Sheet を用意します。

id title url description
No.1 Title1 https://www.youtube.com/watch?v=*** その回の説明を書く
No.2 Title2 https://www.youtube.com/watch?v=*** 説明2
No.3 Title3 https://www.youtube.com/watch?v=*** 説明3

これをGASでJSON形式でGETリクエストに対して返してあげるようにします。こちらを参考に実装しました。 Google App Scriptを用いてGoogleスプレッドシートからJSONを生成してみよう 実践編の通りにGASを書いて1行目をkeyにしてこんな感じのJSONを取得できるようにしました。

[{"id":"No.1","title":"Title1","url":"https://www.youtube.com/watch?v=***","description":"その回の説明を書く"},{"id":"No.2","title":"Title2","url":"https://www.youtube.com/watch?v=***","description":"説明2"},{"id":"No.3","title":"Title3","url":"https://www.youtube.com/watch?v=***","description":"説明3"}]

セキュリティ的にはガバガバですが、まあ、これで半分クリアです。残りは、React側での受け取り処理を作ります。今回はaxiosを使います。Reactから手軽にHTTPリクエストが送れるライブラリのようです。 例によって参考ページはこちらです。 React+axiosでLaravel APIからJSON取得 axiosで取得して、先ほどのCardの中に流し込みます。

{// 一部抜粋
}
import axios from 'axios';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      contents: []
    };
    this.getData = this.getData.bind(this);
  }

  getData() {
    axios
    .get('GASの公開URL')
    .then(results => {
        const data = results.data;
        console.log(data);
        this.setState({
          contents: [...data]
        });
      });
  }

  render() {
    const classes = this.props.classes;
    console.log(classes);

    const contents = this.state.contents.map(content => {
      return <Card className={classes.card}>
          <CardContent>
            <h2 key={content.id}>{content.title}</h2>
            <div align="center" key={content.id}>
              <YoutubePlayer
                url={content.url}
                controls
              />
            </div>
            <p key={content.id}>{content.description}</p>
          </CardContent>
        </Card>
    });

    return (
      <Fragment>

      <div className="App">
          <button onClick={this.getData}>getData</button>
          {contents}
      </div>
      </Fragment>
    );
  }
}

export default withStyles(styles)(App);

基本的にはこれでできたのですが、このままだとユーザーが毎回ボタンを押さないとGASから読み込みが行われないので、ページロード時点で読み込めるようにします。やりたいこととしてはonLoadのようなことをしたいのですが、Reactの場合は、componentDidMountをよく初期化に使うと聞いたので、これを使います。本当は使い方気をつけないと無限ループとは発生して危ないらしいのですが、冒頭の通り動いているからまあいっかの精神で書きます。 Reactのライフサイクルメソッドとその使いドコロのまとめ - ajax callをするのに最も適した場所は? 先ほどのコードでgetDataの部分を全てcomponentDidMountに置換します。<button>の部分はいらないので削除します。これでリロードした度にGASから取得して表示してくれるようになりました。コンテンツ量が増えると崩壊しそうなので、そこはページを繰る度にロードするようにするなど要改善です。

その他参考になりそうな記事はこちら。

参考文献

Twitterのタイムラインを埋め込む

React Twitter Wigets ページのチュートリアルにしたがって、

$ npm i react-twitter-widgets

で落としてきて埋め込みます。なんとお手軽で、screenNameusernameに埋め込みたいアカウント名(@で始まるやつ)を書くだけ。たぶんsourceTypeを変えれば表示内容も変えられると思われる。今回は自分のアカウントのツイートを表示したいだけなので、デフォルトのprofileにしてます。

今回実装した全体のコード

以上、これで当初の目的は達成できました。 全体のコードを晒しておきます。コンポーネント化は度外視なので全部App.jsに書いてます。 肝心の放送内容はこれから収録します...近いうちに投稿したいなあ...もし、無事投稿できたらそちらもよろしくお願いします。

import React, { Component, Fragment } from 'react';
import axios from 'axios';
import ReactPlayer from 'react-player';
import YoutubePlayer from 'react-player/lib/players/YouTube';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Card from '@material-ui/core/Card';
import CardAction from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import { Timeline } from 'react-twitter-widgets';
import logo from './logo.svg';
import './App.css';
import { getConfig } from 'react-player/lib/utils';

const styles = {
  card: {
    margin: 20,
    height: 580
  },
};

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      contents: []
    };
    this.componentDidMount = this.componentDidMount.bind(this)
  }

  componentDidMount() {
    axios
      .get('GASの公開URL')
      .then(results => {
        const data = results.data;
        console.log(data);
        this.setState({
          contents: [...data]
        });
      });
  }

  render() {
    const classes = this.props.classes;
    console.log(classes);

    const contents = this.state.contents.map(content => {
      return <Card className={classes.card}>
          <CardContent>
            <h2 key={content.id}>{content.title}</h2>
            <div align="center" key={content.id}>
              <YoutubePlayer
                url={content.url}
                controls
              />
            </div>
            <p key={content.id}>{content.description}</p>
          </CardContent>
        </Card>
    });

    return (
      <Fragment>

      <div className="App">
        <AppBar position="static" color="default">
          <Toolbar>
            <Typography variant="title" color="inherit">
              Page Title
            </Typography>
          </Toolbar>
        </AppBar>
        <header className="App-header">
          <h1>
            Welcome to Our Site
          </h1>
          <p>
            Abstract about this page.
          </p>
        </header>

          {contents}

          <Timeline 
            dataSource={{
              sourceType: 'profile',
              screenName: 'Sashimimochi_343'
            }}
            options={{
              username: 'Sashimimochi_343',
              width: '50%',
              height: '400'
            }}
            onLoad={() => console.log('Timeline is loaded!')}
          />
      </div>
      </Fragment>
    );
  }
}

export default withStyles(styles)(App);

その他の参考文献

WindowsでもAlfredが使いたい

何がしたいのか?

ご時世も相まって、家で作業することが増えてきました。 普段仕事では、Macを使っているのですが、プライベートで使っているデスクトップはWindowsなので、Windowsで作業する機会も増えました。

Macでの作業に慣れてくると、その便利さゆえ、Windows環境でもSpotlightやAlfredのような、ランチャーがほしくなってきました。

果たしてそんな都合の良いアプリがあるのかと探したところ、ドンピシャなものがありました。

Keypirinha

f:id:T-N-Clark:20200920194410g:plain
keyprinha

さすがに完全互換とまでは行きませんが、Chromeのブックマーク検索など個人的に使いたい機能は概ね使えたので満足しています。

インストールVerとポータブルVerがありますが、公式はポータブルVerを推奨しています。 Python製らしく、外部パッケージもあり、自作もできるようです。

セットアップ

インストールは不要で、OSのバージョンに合わせて適当なファイルをダウンロードしてくるだけで使えます。ダウンロードした圧縮ファイル内のkeyprinha.exeを実行するだけで起動します。 http://keypirinha.com/download.html ※圧縮形式が.7zなので、必要に応じて7-Zipなどの解凍ソフトを使って解凍してください。

PC再起動のたびに毎回Keyprinhaを起動するのも面倒なので、タスクマネージャーなどでスタートアップに追加しておくと便利です。

Keypirinhaの設定は、GUI設定画面もなければ、基本的な情報は英語のみなので、ちょっと敷居が高いようにも感じます。 とは言え、プログラマであればそこまで身構える必要はないと思います。

  1. まず、Keypirinhaのランチャーを起動して、Configureで設定ファイルを開きます。 デフォルトだとCtrl+Win+Kがランチャー起動のショートカットキーとして設定されています。
  2. すると、ウィンドウが2つ起動します。 左が読み取り専用のオリジナルで、右がユーザー設定用です。
  3. これを編集して、設定を変更します。
  4. 編集が終ったら、ウィンドウを閉じてKeypirinhaランチャーでReload Configurationと入力すれば変更が反映されます。

最低限、ショートカットキーの変更とGoogle検索あたりは設定しておくと便利です。 詳しい設定方法は以下が参考になります。

Microsoft Store でインストールしたアプリを起動する

デフォルトの検索範囲にはないので、Microsoft Store でインストールしたアプリはKeypirinhaのランチャーで検索してもヒットしません。

そこで、以下のプラグインを追加します。 https://github.com/ueffel/Keypirinha-WindowsApps

そのためには、プラグインの追加ができるようにPackageControlを使えるようにする必要があります。 https://github.com/ueffel/Keypirinha-PackageControl

手順

READMEの案内にしたがって

  1. Keypirinhaランチャーを起動してKeypirinha: Consoleまたは (Shortcut: F2)と入力する
  2. 起動したコンソール画面下部の入力欄に以下のコマンドを入力してEnterで決定する (SublimetextのPackageControlと同じような感じ)
import keypirinha as kp,keypirinha_net as kpn,os;p="PackageControl.keypirinha-package";d=kpn.build_urllib_opener().open("https://github.com/ueffel/Keypirinha-PackageControl/releases/download/1.0.2/"+p);pb=d.read();d.close();f=open(os.path.join(kp.installed_package_dir(),p),"wb");f.write(pb);f.close()
  1. 再度Keypirinhaランチャーを起動して、Install Packageと入力するとPackageControl: Install Packageが選択できるようになっているので選択する
  2. Keypirinha-WindowsAppsを選択してインストールする
  3. 再度Keypirinhaランチャーを起動して、所望のアプリを入力すると検索結果にアプリが表示されるようになる

その他参考文献

Macでもエアロスナップが使いたい

はじめに

エアロスナップとは、Windowsユーザーならご存知であろう、Windows7から搭載された機能です。 画面サイズに合わせてブラウザやアプリなどのウィンドウサイズを画面半分などに自動で調節してくれる機能です。

f:id:T-N-Clark:20200920193308g:plain
aerosnap

常にデュアルディスプレイにできるのであれば不要な機能かもしれませんが、画面の制約や真横に並べて見比べたいときなどは重宝します。 ブラウザで調べものしながら、エディターで編集するときなどはとても便利です。 個人的には便利だと思っているですが、好き嫌いは分かれるようで、あえて無効にしている人も少なくないようです。

プライベートはWindowsで、仕事ではMacを使っている私はMacでの作業中もこのエアロスナップが使いたくなる場面がしばしばありました。 一応、Macのデフォルト機能であるSplit Viewを使えば、それっぽいことはできるのですが、キーボード操作だけで調節できない、ウィンドウがフルスクリーンモードになってしまうなど、少々使い勝手に満足いかない部分がありました。 https://support.apple.com/ja-jp/HT204948

そこで、2つのアプリを試してみました。

Gridsutra Lite

  • Lite版は無料、フルサイズ版は有料($4.99)
  • Lite版はブラウザ、テキストエディタ、プレビューアプリのみ対応
  • ショートカットキー対応

Apple Storeからお手軽にインストールというところで試してみました。 決して悪くはなかったのですが、Lite版だと物足りなかったので、フルサイズ版にするか悩みましたが、次に紹介するアプリで事足りてしまったので、結局不採用。

Spectacle

f:id:T-N-Clark:20200920193316g:plain
spectacle

  • 基本無料
  • 任意のウィンドウに対してリサイズが可能
  • ショートカットキーに対応

機能はシンプルですが、ほぼエアロスナップと同等のことができます。

おわりに

Spectacleのおかげで、Windowsのときと同じ使用感でMacでも作業できるようになりました。 みなさんも、私と同じようなもやもやを抱えているようであれば、一度お試しあれ。

ちなみに、試してはいませんが、ほかにも以下のような類似アプリもあるようです。

始めて技術同人誌を執筆しました

技術同人誌を執筆しました

先日の冬コミ(C97)にて、人生で初めて技術同人誌というものを書いて頒布しました。 https://webcatalog-free.circle.ms/Circle/14808053

頒布した本は 『新しい挑戦をしたい時に見る本 Vol.2』 といい、BOOTHで基本無料でお求めいただけます。 booth.pm

基本無料というのは以下のような理念で頒布しているからです。

『新しい挑戦をしたいときに見る本』シリーズとは、まんてらスタジオに集まっているクリエイター達が、好き勝手に自分の書きたい物を提示して、好き勝手に技術書を書き、それを我々で一つの本にして出版しているプロジェクトの事です。 このプロジェクトの最大の特徴として、挑戦本は無料で頒布しております。この本を本当に求めている人からはお金を頂かずに、このプロジェクトを応援したい人から支援を頂いて活動をしております。

本誌は@mannteraさん主催のまんてらスタジオに集まった計10人のエンジニア/デザイナーによる合同誌の第2弾です。 私はChapter10の「対話型日記BOT開発を通じて学ぶ自然言語処理入門」を担当しました。

経緯

最近は、コミケに加えて技術書展の盛り上がりにより良質な技術同人誌がとても増えてきています。 私も何度か一般参加で会場に足を運びましたが、出版社発行の書籍として世に出回っていないTipsやネット上に散らばっている知見を体系的に学べるので毎回楽しみにしています。 単純に共通の趣味を持った人たちが集まって話しているという雰囲気を味わうだけでもよい刺激がもらえます。 こういった光景を見ているうちに、自分も一筆認めてみたいという衝動に駆られました。 そんな折、まんてらスタジオさんのほうからお声掛けをいただきこの度、参加することにしました。

本誌(自分の担当章)の概要

対話形式で日記が書けるボット開発を通じて自然言語処理の基礎とちょっとしたその応用について書いています。

サンプル画像1 サンプル画像2

本誌のタイトル通り、読者の方に本誌の内容をキッカケに新しい挑戦をしてもらえるように導入から丁寧に解説しました。

私自身、自然言語処理を学び始めて1年弱の初心者ではありますが、そんな人でも1年あればこれくらいならできるんだと感じていただき、これから始めようか迷っている人が後押しができればという思いで執筆しました。

せっかく書くなら単なるやってみたで終わらせたくなかったので、理論と実装の両面から個人的な勘所をたくさん詰め込みました。 その結果、全体の約1/3のページを占める大作になってしまいました。

f:id:T-N-Clark:20200105160858p:plain:w400
表紙ページ

また、本誌の中で紹介しているデモボットも公開しています。 github.com

もし、少しでも興味を持っていただけたなら、ぜひお手に取っていただけると幸いです、 その際は、感想をお聞かせいただけると大変喜びます。 それでは、また。

2019年個人的注目アドベントカレンダー(随時更新)

企業系

開発・研究系