フロントエンドエンジニアのための動画ストリーミング技術基礎
動画はデータ容量が大きい 画像と違い、動画コンテンツはデータ容量がとても大きいため、データをダウンロードして再生するまでに待ち時間が発生します。 動画のデータ容量が大きい理由はとても単純で、動画は画像データが集合したものだからです。静止画像を人間の目が滑らかに感じられる速さで切り替えて表示することで絵を動かすという表現を実現しています（よくパラパラマンガに例えられますが、そんな感じです）。この人間の目が滑らかに感じる速さというのが 1 秒間に 30 枚だったり 24 枚を切り替えることになります。29.97 (≒30) fps とか 24 fps とかの数字を耳にしたことがあるかと思いますが、24 fps の場合は 1 秒間（s）の間（p）に 24 フレーム（f）を切り替えることを意味します。 データを全て自分の端末にダウンロードしてから再生しようとすると、かなり長い待ち時間が発生してしま
【意訳】Webpackの混乱ポイント - Qiita
この記事はWebpack — The Confusing Partsを、筆者の許諾を得て意訳しています。 何か誤りがありましたら、ご指摘いただけると幸いです。 (以下、訳) ReactとReduxで作られたアプリケーションにとって、Webpackは最先端を行くモジュールバンドラです。Angluar2やその他のフレームワークを使っている人々は、たいへんWebpackのお世話になっていることでしょう。 私が初めてWebpackの設定ファイルを見た時、それはさながら宇宙人のようで非常にわかりづらく見えました。しばらく試しているうちに、今では次のように考えるようになりました。Webpackは単に独特のシンタックスと新しい哲学を持っており、それがとっつきにくさの原因になっているのだと。偶発的とはいえ、これらの哲学は、Webpackの人気を押し上げた原因の１つでもあります。 Webpackのとっつきに
とても長い配列の上位M件だけをクイックソートより高速に取り出す - Qiita
というわけで、10倍の差がでた。 当然、配列の長さやソートする長さ、また実装の方法によって性能差は変わってくるが 今回の方法は有効であるということは確認できた。 既存の記事(2015/11/09 20:22 追記) コメント欄でUnordered partial sorting にそれらしきことが書いてあると教えていただいた。 そちらでは、「上位k個を取り出す（ソートは不要）」という問題を考えている。 同様に分割統治法を用いてソートしていきながら、上位k個以内の小区間になったらその区間はソートせずに全て選択して良いとしている。 早い話が、QuickSelectによりk+1番目の要素を探してそれより上位の要素をごそっと抜き出している。 分割統治法で大雑把にソートしていきながら、不要なソートを行わないようにする という同様のアプローチである。 C++のSTLの場合(2015/11/09 22:
Libreboard – シンプルで簡単に使えるカンバン
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最も簡単なタスク管理としてカンバン方式はお勧めです。カラムはステータスを表します。未作業、作業中、完了、バックログなどそれぞれのステータスによってタスクの場所が変えるだけでとてもシンプルです。 今回はそんなカンバンリストを提供するLibreboardを紹介します。すぐに使い始められますのでぜひ試してみてください。 Libreboardの使い方 Libreboardは特にタスク管理として充実した機能があるわけではありません。しかしやるべきタスクや積み残しを管理するのに十分な機能と言えるでしょう。早くはじめて生産性を向上したい、そんな時にぴったりなタスク管理です。 Libreboardはnode/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 Lib
webpackを使ってJavaScriptのビルド／minify（＋Bower） - CLOVER🍀
最近のフロントエンド事情には全然詳しくないのですが、ちょっと以下のようなことをやろうかなと思いまして。 複数のJavaScriptをまとめたい まとめたJavaScriptはminifyしたい SourceMapも作成したい Bowerを使って依存関係も解決したい Bowerで解決しようとしているのは、他に手段をよく知らないのとクライアントサイドのJavaScriptの依存関係を書くのは、Bowerが一般的なのかなと思いまして。 で、こういうことをやろうとした時、webpackとBrowserifyが目につくのですが、今回はwebpackでやってみました。 webpack module bundler 以降に、やったことを書いていきます。なお、Bowerで引き込むライブラリは、jQueryとします。 あとで、Browseriry版も書きました。 Broserifyを使ってJavaScrip
runtime.js — JavaScript library OS
Wouldn’t it be cool to use the operating system as a regular application dependency you can simply require()? How is this possible?If you’re following the news about cloud computing and operating systems, you may have heard about the library operating systems or unikernels. Huh, sounds like unicorns, but they’re actually the kind of specialized operating systems that are packaged into libraries th
JavaScriptベースのOSSゲームフレームワーク・「Playground.js」
Playground.jsはオープンソースのJavaScript製ゲームフレームワークです。基本的なAPIのサポートやモバイルデバイスへの対応もしてあるみたい。より使いやすく、すぐに使えるアウトオブボックスなフレームワークの提供を目指している、との事。MITライセンスの元でソースが公開されています。いくつかデモが用意されていますので合わせてどうぞ。 Playground.jsSample
React初心者のためのreact-routerの使い方 - ハッカーを目指す白Tのブログ
2015年1月、React ConferenceにてReact.jsでネイティブアプリが作れるようになると発表された。この発表を受けて最近何かと話題のReact.jsだが、リリースされたのは2013年であり、2009年にリリースされたAngularJSや、2010年のBackbonejsなどの他のjavascriptフレームワークに比べると新しく、まだネットに日本語の情報があまりない。ということで、React.jsのデファクトルーティングライブラリであるreact-routerの使い方についてまとめてみた。 目次1.そもそもreact-routerとは 2. react-routerのインストール方法 3. react-routerの使用例 4. react-routerのコンポーネント一覧 5. Routerのrunメソッド 1. そもそもreact-routerとはreact-rout
入門 React.js その１ | JavaScript Journal
http://facebook.github.io/react/ React.jsは現在注目を浴びているFacebook製のライブラリで、MVCアーキテクチャでいうViewにあたる機能を提供します。 公式サイトには、特徴として以下の3つが挙げられています。 JUST THE UI MVCのViewであり、既存のアーキテクチャと容易に結合することができます。 VIRTUAL DOM DOMを模した中間オブジェクトをあらかじめ生成し、更新差分のみを本物のDOMに反映することにより、ハイパフォーマンスを実現します。 DATA FLOW データフローを一方向に保ち、データと画面（DOM）の対応をを宣言的に記述することによって、可読性を向上させます。 今後、詳しい使い方について一つずつ説明をしていきます。 次回はJSXについて。 入門 React.js その２ JSXについて 入門 React.js
もうgulpで憔悴しない - 低依存gulpfileのレシピ - Qiita
【追記150805】さらに憔悴しないための有用な記事『アカベコマイリ | gulp なしの Web フロントエンド開発』が掲載されましたので、こちらもお勧めします。 こんにちは、@armorik83です。皆さん、Grunt / gulp使ってますか。おなじみなので、ここでは説明はしません。 この記事の要点 なぜGrunt / gulpは憔悴に至るのか、経緯と問題点 npm run-scriptの仕組みについて package.jsonにscriptを羅列することに対する是非 シンプルなgulpfileについての提言 経緯 さて、先日このような記事が界隈で広まっていました。 Grunt/Gulpで憔悴したおっさんの話 この記事については同意できるところと、そうでもないところと、両方有りました。ただ、Grunt / gulpを使っていて色々歯がゆさを感じている方は昨今増えているだろうと感じます
いま最も注目のライブラリ「React.js」でシングルページアプリケーションを作ってみよう！ 【前編】
対象読者 JavaScriptフレームワーク・ライブラリの選定に悩んでいる方 本格的にJavaScriptを触るのが初めてという方 jQueryでの大規模なフロントエンド開発に限界を感じている方 必要な環境 Node.jsがインストールされていることが推奨です。 React.jsとは何か React.jsは最近注目を浴びているFacebook製のライブラリで、MVCアーキテクチャでいうViewにあたる機能を提供します。 前提として、JavaScriptの世界でMVCのVといえば、紛れもなくDOM（Document Object Model）のことを指します。特に何も意識しないで作った場合、都合の良いDOMからデータを引っ張り出しては別のDOMを書き換えるといった、行き当たりばったりな作りになりがちです。そこで、MVCの考え方を導入することにより、データを画面とは独立した構造体として切り出し
完璧なJavaScriptフレームワークを求めて Part 2 | POSTD
テンプレートがHTML内に存在しており、よく使われる手法です。見た目がナチュラルで、HTMLが自然にタグを内包しているので理にかなっています。ブラウザが <script> 要素のコンテンツをレンダリングしないため、ページレイアウトが崩れません。 テンプレートがAjaxを用いてロードされるケース Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } }); コードは外部HTMLファイルに記述され、 <script> タグを追加しなくても済むようになっています。しかしHTTPリクエストの
完璧なJavaScriptフレームワークを求めて Part 1 | POSTD
最近のフロントエンド開発では、多くのフレームワークやライブラリが利用できます。ただし玉石混淆で、良い物もあれば悪いものもあります。そんなわけで多くの場合、私たちは特定のコンセプトやモジュールまたは構文に傾倒しがちです。でも、それが万能かと言うとそうでもありません。この投稿では、将来的なフレームワーク、つまりまだ存在していないフレームワークについて話をしていきたいと思っています。現状で利用可能なJavaScriptフレームワークの利点や欠点をまとめて、完璧なソリューションを思い描いてみましょう。 抽象化は危険 私たちはシンプルなツールが好きですよね。複雑さはある意味、命取りです。作業が難しくなり、一定時間内で多くのことを覚えなければならなくなる（急勾配の学習曲線が求められる）ようなことが多々あります。プログラマは仕組みを理解するまで気も休まらないのではないでしょうか。複雑なシステムで作業をす
Reactがなぜ素晴らしいのか
詳しくはこちらへ → https://www.facebook.com/groups/toretatech/
Browserify + GulpでクライアントのJavaScript / CoffeeScriptでrequire
先日以下の記事で、クライアントサイド JavaScript での require による依存解決の方法を読みました。一言で言うと Browserify というライブラリを使って、クライアント側 JavaScript でも、モジュールをファイルごとに分割して require で読み込むための手順。 Browserifyでrequireを使ってjavascriptの依存関係をすっきりにしてみる – ぼくのかんがえたさいきょうのうぇぶさーびす これを真似したくて、昨日日曜日に試したのでその記録です。 ぼくうぇぶさんのページでは、JavaScript のビルドツール（タスクランナー）として Grunt を使ってありますが、個人の好みにより私は Gulp を使用します。Grunt も Gulp も JavaScript/CSS などフロントエンド用のビルドツールで、C言語の Make、Ruby の
Konva - Canvasで2Dを描くためのJavaScriptフレームワーク
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5における表現力向上に期待がかかるのがCanvasやWebGLです。とはいえこれまでのHTML並に書きやすいという訳ではなく、描画や操作をするには異なる技術の習得が必要になります。 そこで使ってみたいのがKonva、2DをCanvas上に描画するためのライブラリになります。 Konvaの使い方 Konvaは多くの機能を掲げていますが、主立ったものを紹介すると、オブジェクト指向のAPI、ネスト可能、高パフォーマンスなイベントハンドリング、レイヤーサポート、ノードキャッシュ、アニメーション/トゥイーンサポート、フィルター、セレクターサポート、デスクトップ/スマートフォンサポート、AMDサポートなどがあります。 形状は四角、三角、円、テキスト、画像、線、多角形、SVGパスが使えま
AngularJSはもう古い？未来志向フレームワークAurelia.JSを試してみた！ - paiza times
こんにちは、吉岡(@yoshiokatsuneo)です。 最近のJavaScriptフレームワークといえばAngular.JSやReact.JSがホットですが、今年来ると思われるフレームワークAurelia.JSが2015年1月末リリースされました。 Home | Aurelia Aurelia.JSはGoogleでAngularJSの開発に関わっていたRob Eisenbergさんが開発した次世代のJavaScriptフレームワークです。 特徴として、最新のJavaScript関連技術であるECMAScript6、WebComponents、Object.observeなどの機能を取り込むことで、シンプルで使い勝手のよいフレームワークになっていることが挙げられます。 オンラインコーディング環境paiza.IOでも利用しているAngularJSとの比較を中心にして紹介します。 ■Aurel
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TnT Tree
http://daily.d3js.info/?p=587
いま最も注目のライブラリ「React.js」でシングルページアプリケーションを作ってみよう！ 【後編】
