LINE2019.07.19Reactで動画を埋め込み、倍速などのコントローラーも設定する方法を解説します。Reactのプロジェクトを作りましょう。react-playervideo-reactを使用して実装します。npmでインストールしましょう。video-react公式サイトにしたがってコンポーネントを埋め込みましょう。App.jsを書き換えます。/>srcに再生したい動画のurlを指定してください。ratesに何倍速に変更できるようにするかを指定しましょう。orderでコントローラーの順番を指定します。右側に配置したいので今回は7にしました。start動画が埋め込まれて、コントローラーから速度を変更できるのが確認できると思います。LINEharkerHarkerblog関連記事reactReactでMarkdownエディタを実装する方法ReactでQiitaみたいなMarkdownエディタを簡単に実装する方法を解説します。Reactのプロジェクトを作りましょう。CodeでESlint、Prettierを使用したReact環境を構築するReactの環境構築はcreate-react-appでとても簡単になりました。ESlint、Prettierを使用した環境構築方法やルールはプロジェ...reactReactとFirebaseを使ってログインフォームを実装する4今回でログインフォームは完成です!あとはFirebase側の処理だけです。Firebaseのコンソール画面でAuthenticationからログイン方法をクリック。Googleの認証を有効にします。...reactReactとFirebaseを使ってログインフォームを実装する2今回はログインフォームを作成していきます。reduxやredux-thunk、Firebaseを使うことになります。ログイン状態をreduxで管理し、まずフロント側の処理を完成させることを目指します。reduxを使用して開発しているときに必須のデバックツールだと思います。Choromeのエクステンションでstateの偏移や、アクションの実行の履歴などを確認できます。DevToolsをインス...reactReactとFirebaseを使ってログインフォームを実装する1ReactとFirebaseを使用してProgateのようなログインフォームを作成してみます。Google、Twitter、FacebookのソーシャルログインとEメール、パスワードを用いた一般的なログインを実装します。まとめ2019.12.202020.02.13プロフィールHarker3DCGとプログラミングが好きです。3DCGを学習して就職、2年ほどソーシャルゲーム会社で働いてました。その経験を活かしオンラインで3DCGを学習できるサービスCGCAMPを開発しています。このブログでは独学や3DCG、プログラミングについて書いていきます。Harkerblog.3dcgprogrammingdeeplearninglifeabout。