ReactHooksでvideoを乗りこなす
「映像プレーヤー」を作成したことはあるでしょうか？ 作成したことはなくても、おそらく日々様々なプレーヤーを利用していると思います。 HTML5で定義されるHTML Video Elementからは、メディア状態・エラー・DRM複合処理・広告再生・読み込み、などブラウザごとに多種多様なイベントが発生します。プレーヤーはこのイベントに加え、ユーザーから入力される複雑な操作も併せて処理する必要があります。UIや内部要件を実装するには、このイベント制御を適切にハンドルし、のりこなすことが必要不可欠です。 今回のセッションでは、複雑な処理をReactHooksを用いてHTML Video elementを制御する手法を、現在映像サービス「GYAO!」でプロダクションで使用されているプレーヤーを事例に、フロントエンドの観点からご紹介します。
Reactの単純なサンプルでFluxの実装を解説
先日『Flux – Dispatcher【日本語訳】と実装のポイント』という記事を投稿しました。Fluxの理解を深めるために、その実装の核となるDispatcherを理解することが大事だと思ったからです。おかげで、ある程度Fluxの理解進みました。今回さらにFluxを実装することで、理解を深めたいと思い、簡単なサンプルを作ってみることにしました。このサンプルを通して、Fluxの実装方法について説明していきたいと思います。だいぶ長くなりましたが、ぜひ参考にしていただければと思います。 Fluxの実装サンプルまずはサンプルを見てください。フォームに入力したテキストを表示させるだけのものとなっています。とても単純ですが、Fluxを使って実装しています。 Flux実装サンプルコード – GitHubFlux実装の説明の前にFluxとは FluxFluxは「クライアントサイドのWebアプリケーション
ARMORBET78 > Situs Daftar Slot Games Online Terpercaya 2024
Tentang ARMORBET78 Slot : Dalam era digital saat ini, kebutuhan akan hiburan online khususnya di sektor gaming terus meningkat. ARMORBET78 slot, sebagai salah satu platform game online terkemuka, memahami pentingnya menyediakan akses yang mudah dan aman kepada penggunanya. Dengan menyediakan daftar login dan link ke berbagai permainan populer, ARMORBET78 menjamin bahwa setiap penggemar game dapat
React 0.13 日本語リファレンス | js STUDIO
このサイトについて Reactの日本語リファレンスです。 Reactの本家サイト(英文) の内容を翻訳して作成していますが、誤訳や誤記があると思いますのでその点についてはご了承ください。 もし、誤訳などの間違いを見つけましたら、 @tomof まで教えていただければ幸いです。 JUST THE UI 人々の多くはReactをMVCのVとして使用します。 Reactは他の技術スタックについて想定を行わないため、 既存プロジェクトの小規模の機能でこれを試すことは簡単です。 VIRTUAL DOM ReactはDOMを論理的に取り出し、シンプルなプログラミングモデルとより良いパフォーマンスを提供します。 また、ReactはNodeを使用するサーバー上でも描画可能であり、 React Nativeを使用したネイティブアプリも動かすことが可能です。 DATA FLOW Reactは一方向のReact
30分間React入門「いいねボタン」作成チュートリアル
「今日からReactを始めたい」 「とりあえずReactで何か動かしてみたい」 ここは、そういった方が、Reactを始めみるためのチュートリアルです。 今回は、Reactを使ってFacebookのいいねボタンのようなコンポーネントを実装していきます。 > 今回作る「いいねボタン」のデモ今回作る「いいねボタン」のデモ 実際に押せます↓ > チュートリアルの目標チュートリアルの目標 Reactのコンポーネントを実装できるようになる Reactコンポーネントのイベントをハンドリングできるようになる Reactコンポーネントの状態(state)を実装できるようになる Reactの雰囲気をつかめる！ > このチュートリアルについてこのチュートリアルについて なお、このチュートリアルは、下記のバージョンで動作確認しています。 npm 2.14.2 react 0.14 react-dom 0.14 w
今からでも遅くない! React事始め
マイクロサービスアーキテクチャが話題を集め、コンポーネントのWeb API化が更なる急加速を見せる昨今。 とは言え「誰でも自由に叩いて良い」Web APIなんてのは事実上無く、ほぼ全てのケースで何かしらのアクセス制御が必要になります。 - Spring Security もサポートする昔ながらの「Basic認証」。古い、ということは、悪いソリューションなのか？ - 最近のAPIのアクセス制御と言えば「OAuth 2.0」がトレンディ？ Spring Security OAuth もあるし！ - 一方でAWSは「APIキー方式」を採用。なぜAWSはOAuth2ではないのか？ - Spring Security はまだ公式にサポートしていない「OpenID Connect」とは一体…？ Webにおけるアクセス制御の歴史を振り返りつつ、様々なAPIの立ち位置と共に、その最適解を探っていきたいと思
Create Apps with No Configuration – React Blog
This blog site has been archived. Go to react.dev/blog to see the recent posts. Create React App is a new officially supported way to create single-page React applications. It offers a modern build setup with no configuration. Getting Started Installation First, install the global package: This will take a while as npm installs the transitive dependencies, but once it’s done, you will see a list o
react-storybookを用いたReactコンポーネント開発 - Hatena Developer Blog
こんにちは！Webアプリケーションエンジニアの id:amagitakayosi です。 今日はReactコンポーネントを手軽に開発するためのツールを紹介します。 前回のあらすじ react-storybookとは 導入してみる 初期設定 storyを作成する 起動 イベントを監視する Hot Module Reloadingの仕組み メリットとデメリット リアルタイム確認できる 導入が簡単 ストーリー駆動開発できる デメリット: Webpackの機能で動いてる まとめ 前回のあらすじ developer.hatenastaff.com 前回の記事では、Reactコンポーネントをnpmパッケージとして開発する方法を紹介しました。 対象としたのはこちらの無限スクロール用のReactコンポーネント。 http://www.npmjs.org/package/@fand/react-infini
React.js の仕事 ほぼ完了しました！ - yuumi3のお仕事日記
ここ数ヶ月、久々に詰めて行っていた Recat.js の仕事がほぼ終わりました !! 仕事の詳細は書けませんが。 既存のjQueryベースのWebアプリがメンテナンス不可能に近くなっているので Recat.js に置き換えました。 既存のアプリは Backend は Ruby on Rails jQueryで作られてた Frontend の JS は約 14K 行 ＋ テンプレート 4K 行 アプリは大きく3つに別れるが、共有部分無しでコピーペーストで作られている 今回の仕事 Backend は 落ちていたテストを修正したくらい End to End テストが無かったので書いた Turnip(RSpec, Gherkin) + Capybara + Poltergeist + Phantom.js Featureファイル 2K行、 steps 1.2K行 開発期間 約1ヶ月 jQuery
サーバーサイドプログラマーのためのReact.js 入門 4. react-router、更新系ページの追加 - yuumi3のお仕事日記
React.jsの仕事の納期におわれ1ヶ月ぶりになってしましたましたが、今回は react-router の導入 更新系ページの追加 を行い、Todoアプリを完成したいと思います。 react-router JSで作られたアプリはSPA(Single Page Application)と呼ばれているように物理的には1つのページ(URL)内で動作します。しかしアプリがURLに対応してないとブラウザーのbackボタンに対応出来ないないですし、プログラムの構成を考えるのも面倒です。 そこで、URLとアプリ(JS)を対応づける react-router を使うと Rails の routes のように URLにアプリを対応づけ出来、今ままで Rails 等で開発してきた人にはとても嬉しいことです。 react-router には チュートリアル や充実したドキュメント がありますので、しっかり理解
生のReactを知ろう – JSX、Flux、ES6、Webpackを使わず… | POSTD
(編注：2016/07/29、いただいたフィードバックをもとに記事を修正いたしました。) 免責事項： 私はJSX、Flux、 ES6 、そして webpack を非常に気に入っています。これらのツールについては他のシリーズで話します。 React.jsが騒ぎを起こしているのはご存知の通りです。確かに、 XMLHttpRequest 以来の良いツールです。しかし、調査に数時間を費やした挙句、あまりに多くの用語に 圧倒された だけで終わっていないでしょうか。JSX、flux、ES6、webpack、react-routerが使える今、 *他に必要なのは React の使い方を説明してくれる人だけです。* 喜んでください、それがまさに当シリーズでやろうとしていることです。信じられませんか？大丈夫、 2分後、 初めてのReactアプリを作った後には納得いただけるでしょう。何もダウンロードせずに、で
GitHub - kjirou/react-flip-book: A React component for making state transitions from a list of props
petehunt/react-howto の日本語訳 - console.lealog();
petehunt/react-howto · GitHub これの、2016/01/07時点での日本語訳です。 更新は追わないと思うので、流し読みにどうぞ。 react-howto もしあなたがReactをはじめたばかりで(もしかしたらフロントエンド自体もはじめてで)、React周辺のエコシステムに困惑してるとしたら、そこにはこういう理由がある。 そもそもReactはアーリーアダプターやエキスパート向けに作られた経緯がある Facebookが唯一実際に使われてる例であり、Facebookより小規模なプロジェクト向けの使い方にフォーカスしてない Reactのガイドを装った間違った情報も多い このドキュメントは、HTML・CSS・JavaScriptでWebページを作ったことがある人を想定読者にしてる。 これを書いたワケ Reactに関する情報が山ほど交錯してるから。 自分はReactを作った
Reactはリアクティブプログラミングなのか? - uehaj's blog
Reactとは 設計をとりもどす Reactでやってみる Elm-HtmlとReactの対応 ReactはFRPか? ReactはFPか? FPとOOPの真の関係 まとめ 追記 Reactとは Reactは、Facebookが開発した、JSのUIフームワークもしくはライブラリです。Reactが提供する中核機能は以下です。 イミュータブルなUIビルダー Virtual DOMによる効率的更新 上記に付随するイベントハンドラ群を編成していくための方法論 React単体ではコールバックの組合せで、Fluxの一部として使用するとオブザーバーパターンで実現 効用は、再利用性と保守性・可読性向上です。特に、Reactで作成した画面部品のコンポーザビリティが高く、細粒度のUI部品利用の発展充実が期待されます。作りは通常のJSクラスライブラリであり、覚えたりすることは多くありません。 設計をとりもどす R
Reactとかgulpとかfirebaseとか色々いじってみた - satococoa's blog
色々一気にやりすぎてちょっとパンク気味ですが、以下のリポジトリにおいて最近興味があったものを色々試してみました。 iOSやAPIサーバの仕事ばかりやっている間に大きく遅れてしまったWebのフロントエンド技術にキャッチアップしたいというのが狙いです。 satococoa/react-firebase-chat · GitHub 今できているものは単純なチャットアプリみたいなものです。ページングとかは手を抜いています。 試してみたこと一覧 React Firebase Web Starter Kit Bourbon Reactは最近流行りのJSのライブラリですね。最近仕事でVue.jsを導入してみてとても良い感触を得ているのですが、それと比べてどうなんだろう？という比較もしたいと思い。 FirebaseはいわゆるMBaaSの一つで、だいたいParseと同等の機能があるようですね。Firebas
Relay チュートリアル【日本語翻訳】
先日、Facebookがデータ駆動型のReactアプリケーションの開発を行うためのJavaScriptフレームワーク「Relay」のTechnical Preview版を公開しました。さっそくですが、自分の理解を深めるためにRelayのチュートリアルを和訳しました。せっかくなのでブログにもアップしておきます。誤訳などもあるかと思いますが、Google翻訳よりはマシだと参考にしていただければと思います。原文もつけておいたので、翻訳がおかしなところもなんとなくニュアンスを掴んでいただければと思います。 Relayチュートリアルに行く前に、Relayの基礎知識RelayRelayは、「データ駆動型のReactアプリケーションを開発するためのJavaScriptのフレームワーク」です。RelayはReact同様、Facebook�が開発を進めています。Relayを使うと、サーバから取得したデータを
Browserify, Babelify, React, Arda で画面遷移を表現する その1 « yukku++
タイトルのキーワード通り、React を使った Javascript 開発の入門的なのをやってみました。 44uk/demo-browserify-babelify-react-arda 考えたり試行錯誤したことを丁寧に記述してみた(つもり)ため前置きが長いです。ご了承ください。 この記事では、 Browserify の働きと使い方 Baberify を組み合わせる React のコンポーネントを表示してみる Arda でコンポーネントの切り替えをしてみる というのがトピックです。 当方は、仕事上 jQuery で DOM をこねくり回していますが、このままではいけない危機感と、もう一つ上の男になりたく行動した次第です。 この界隈、いろいろググってみましたが、こう！といったベストプラクティスが見えるような見えないような…そんな感じです。 その中で色々考えてみた結果、タイトルのキーワードを選
React入門用に簡単なアプリケーション作ってみる - yutaponのブログ
React入門系の記事はもう結構出尽くしてる感ありますがせっかくなので私も。 今回はReact v0.13RC2を使って↓のアプリケーションを写経してみます。（Authorは私ではありません） 見ての通り、抵抗の値を計算するアプリケーションです。 Reactで書かれていたり、SVG使ってたり面白いソースですね。 ちなみに抵抗の色の仕様はこのようになってます。 抵抗のカラーコード はじめに React v0.13RC2を使う理由は現時点で最新版ということと、v0.13.0beta1でES6のclass構文が使えるようになったからです。 jsfiddleのソースは1ファイルにまとめて書かれていますが、これを1コンポーネント1ファイルに分割して書いてみます。 React(JSX)のビルドにはBabelが使えるので、前回作ったスケルトンの上に作っていきます。 設計 jsfiddleのJSソースの一
webdesign-dackel.com - このウェブサイトは販売用です！ - webdesign dackel リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flux react現状確認会
