Reactがもっと広まって欲しいと思っている今日このごろ。React EuropeでJoseph Savona氏の講演でRelayについての「モヤっと」がいっきにかなり解消された気がするので、要点を本編を翻訳しながら自分なりにまとめておきます。 私の理解が誤っている可能性は十二分にありえるので、ご指摘いただければ幸いです。 はじめに ReactとFluxって組み合わせと共によく目にするのが↓の図。 矢印は一方向にしか進まないのが特徴で、わかりやすいってのがいろんなところで書かれているんですけど、 結局データをサーバからとってくるところってどうなってるの？ってのが疑問として残ります。つまり、図で表現すると↓の部分の仕組みがどうなっているかってところです。 その部分を、Instagramのようなサービスを例に説明しています。 クライアントはどのようにしてサーバからデータを取得すべきか まず、I

document.body.style.webkittransform = 'rotate(180deg)'; document.body.style.setProperty('webkitTransform', 'rotate(180deg)'); document.body.style.setProperty('WebkitTransform', 'rotate(180deg)'); どうやら setProperty() で CSS のプロパティ名（例 -webkit-transform）で指定するか、JavaScript のプロパティ名（例 WebkitTransform）で直接指定する方法があるようです。 JavaScript で使えるプロパティ名を取得する では適切なプロパティ名を取得するには？ JavaScript のプロパティ名の方（例 WebkitTransform）は、e

このドキュメントは、Riotの公式ドキュメントのWhy Riot?とRiot developer guideの全訳です。修正あれば、こちらにプルリクエストください 追記・公式に取り込みました! 記事はこのまま置いておきますが、最新版は公式サイトを参照してください。 公式ドキュメント: http://riotjs.com/ja/ なぜ Riot? 答え1: カスタムタグ RiotはIE8以降の全てのブラウザで、カスタムタグを実現します。 <todo> <!-- layout --> <h3>{ opts.title }</h3> <ul> <li each={ item, i in items }>{ item }</li> </ul> <form onsubmit={ add }> <input> <button>Add #{ items.length + 1 }</button> </f

高速な全文検索アルゴリズムであるFM-indexについて解説する。理解しがたい点や間違っている点があれば是非コメントで指摘してほしい。 概要 FM-indexはリニアな文字列に対して検索をするアルゴリズムで、主に簡潔データ構造とBWT(およびLF mapping)という二つのアイデアから成り立っている。BWTはBurrows-Wheeler変換のことで、文字列を特殊な並び順に変換するという可逆関数である。BWTされた文字列を簡潔データ構造固有の操作をすることで、クエリ文字列の長さに比例した短い時間で文字列を探し出すのがFM-indexだ。 簡潔データ構造 簡潔データ構造に関してはFM-indexで必要となる二つの関数だけ説明して、詳細は次の機会に譲るとする。さて、二つの関数はともに文字列のある位置より前の部分に含まれている文字の数を数え上げるというものでrank()とrankLessTha

Electronを使って見栄えを整えてみる ElectronはJavaScriptでデスクトップアプリケーションが作れるツールです。 前回「30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで」では簡単なアプリを作って配布するところまでやりました。 あとはいつも通りの JS + HTML + CSS でガリガリ書いていけばいいのですが、まずは見た目から入ろうということで、もう少しアプリっぽい見栄えにしてみましょう。 ちなみに、Macではいろいろ動作を確認しましたが、Windowsは知りません。 大体同じように動くはずですが、もしダメだったらWindows版の記述を教えて頂けると助かります。 基本設定は browser-window APIで browser-windowはアプリのウィンドウを表示するためのAPIです。 例えば、以下は単なるin

iPhoneだとブラウザバックしても状態が保持されてしまうので、バックされた場合はリロードする下記コードを入れとくといい window.onpageshow = function(evt) { if (evt.persisted) { location.reload(); } }; Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up

PHPで既存システムに導入するのに手軽なORMとかActiveRecord探してて「Idiorm」と「Paris」を見つけたので、導入前に使用してみました。 Idiorm and Paris - object relational mapper (ORM), fluent SQL query builder and Active Record implementation for PHP http://j4mie.github.io/idiormandparis/ このページみるとだいたい使用した感じが伝わってきますね。 感想 ドキュメントしっかりしてるし簡単に読める。 軽量で既存システムにも導入しやすい。 一通り必要と思われる機能は揃っているし、書き方も嫌いじゃない。 テーブル名とか外部キーの名前とか辛いことになってるのにも対応できる。 使用した感じ ちょっと導入前に使用してみた感じです

自分が長期間Linuxを使わずに、ある時に急に使うことになったりするのでコピペで使える知識をまとめたものです。自分用のメモですのでエントリとして書くのを少しためらいましたが、同じ境遇の人がコピペで使えれば便利かなと思い記事にしました。 MacOSはLinuxではなくBSD系ですが、パッケージコマンドの中に少し紹介してます。 CentOS7などに対応してないのでどなたか編集リクエスト送って頂けると助かります。 個人の設定ファイル ホームディレクトリに設定ファイルがある。 場所 意味

こんにちは、ほそ道です。 今回はビルドツール・モジュールローダ・altJS(JSコンパイラ)を組み合わせてさらにテストコードのおくのほそ道に入り込んでいきます。 今回Gulp + Webpack + Karma + Jasmine + ES6を使用しますが、 GruntだったりBrowserifyだったりMochaだったりCoffeescriptだったりに置き換えても基本的な考え方は近しい感じになるかと思います。 あとはここにSPAフレームワークとかを組み合わせればいよいよモダンなテストコードになっていきますね。 目次はこちら 今回解決すること・設計方針 Webpackとテストコードを組み合わせる。なんかバンドルしたりごにょごにょやってるどこにテストを挟むのか？を解決する。 ソースコードもテストコードもES6で書く。babelないしはaltJSのコンパイルごにょごにょやってるどこにテストを

この記事を読む前に… Atomの開発終了が発表されました。 良ければ下記記事を参考に別のエディターを使う事をお勧めします。 前置き 【Atom】Web開発者達によるWeb開発者の為のエディターについて 前回の投稿↑で書いた、おすすめパッケージに加えて、おすすめのテーマ、キーバインディング、設定を紹介していきたいと思います！ 下の方に一括インストール用のテキストと、説明を用意したので、気に入って頂けたなら是非それでインストールしてみて下さい。 また、「このパッケージ便利だよー」みたいなのがあれば、是非コメントで教えて下さーい。 (｀･ω･´)b ※最近はRails等のRuby関連の仕事が多いので、これから紹介するパッケージもそっち寄りの物が多いです。 追記： 凄いストックされてるーｗ　Σ(´ @ ω @ ｀) ストック、はてブ、ツイート等、皆さん、ありがとうございます！ Atomを使うなら絶

ここでは東京メトロAPIを使用してアプリケーションを開発する、方法について説明します。 ここで記述しているものは、独自の調査により記述してあるので、公式での内容と異なることもありますので注意してください。 ここでは実験コードをPHPで記述してますが、URL叩けばJSONで結果が帰ってくるので、任意の言語で開発できると思います。 概要 以下にその概要があります。 https://developer.tokyometroapp.jp/info 東京メトロにおける交通機関の情報をオープンデータとして公開するので、当該データを テストする 活用したアプリケーションの募集を行っています。 ユーザー登録を行い、アクセストークンを入手することで以下のようなことがAPIを使用できます。 ・東京メトロの駅の情報を取得できます。駅の位置や、どのような施設が存在するか、どの路線に接続しているか調べることができま

はじめに railsのsprocketsがキツイ。特にjsファイルが多くなると開発がとっってもキツイ。 layoutに こうやってるだけでも出力されたhtmlにはscriptタグが30個ぐらいならんでて、ページの読み込みに10sec以上かかる。 だけど、単にapp/assets/javascriptsをgulp watchとかはしたくない。 なぜならビルドはブラウザのリロード時に変更がある場合だけして欲しかった。 あとwindow.AppNamespace以下にモジュール追加していくのも辛い。 モジュール同士の依存関係もよくわかんないし、何よりwindow.AppNamespace.Modules.UserList.ItemViewとか長すぎ！ browserify-railsってやつ使ってみた browserifyがrailsの仕組みの中で動くようになる。 browserify-rail

reactにfluxを採用してアプリケーションを設計していると、親->子->孫コンポーネントへpropsのバケツリレーになってしまう事がありました。 そもそもイケてない設計が悪いのですが、reactバケツリレーつらいという声を聞くことも多かったし、自分も辛いと思っていたところ助言をいただいて解決法が見えてきたのでまとめてみます。 propsバケツリレー まず、バケツリレーを再現してみます。 DOM構造 おおまかにdiv[class="app"](親), div[class="group"](子）, div[class="item"](孫)というツリー構造になってます。 <div class="app"><!--親--> <div class="group"><!--子--> <h2>1番目のグループ</h2> <p class="count">13</p> <div class="item

次期プロダクトでReact.jsを使ってみようと思っていて、その設計をどうすれば良いのかと試行錯誤した結果、それなりにイケてる結論に辿り着いたので、そのメモ書きです。 作ってみれば、Fluxとはこういうことか！というのがわかります。(若干アレンジはされてると思うけど。) それまで漠然と「ふーん、なるほどね。。」みたいな感じでなんとなくしか理解してなかったFluxが実は超画期的なパラダイムシフトであったことに気がついて結構衝撃を受けています。(^^; ちなみにプログラミングの文脈でeと言ったらまず思いつくのがEventかExceptionのどちらかだと思うけど、この場合はもちろんEventのことです。 すべてがExceptionになるのなら、即刻使うのを止めた方が良い。(^^; Fluxとは Fluxの説明では必ずと言って良いほど参照される図なので見たことある人も多いと思うけど、こういうアー

概要 このドキュメントではローカルストレージの説明と、各ブラウザでの動作を検証する。 ローカルストレージとは、データをブラウザ側に蓄積する仕組みである。 保存時に、サイトごとにKeyと文字の組み合わせでデータを格納する。 サイトごとの領域は、それぞれ独立しており、別のサイトで記録したデータを操作することはできない。 また、それぞれのサイト毎に保存できる上限は制限されている。その具体的サイズはブラウザ毎にことなる。 詳細な仕様は下記を参照のこと。 https://html.spec.whatwg.org/multipage/webstorage.html#the-localstorage-attribute 実装例 下記にローカルストレージの実装例を紹介する。 localStorage APIの使用例 localStorageの操作を行うAPIの使用例を紹介する。 このAPIは、処理が完了す

ここ最近、 [翻訳] Elixir - 次に来る大物Web言語 - Qiita とか 超高速なJSON APIをElixirフレームワークのPhoenixでビルドしてテストしよう | POSTD を読んで気になっていたので、勉強していた。 前提: 自分はシングルページアプリケーションに特化したフロントエンドエンジニアであり、サーバサイドのプロダクション運用にはそこまで強くない。あとこれはここ2日の勉強した日記でもあり誤解や勘違いも多々あると思う。 リアルタイムウェブアプリケーションのためのサーバー Railsの次の時代、リアルタイムウェブの為のウェブフレームワークがあるとしたら、次のような特長をもつと思う。 HTTP, HTTP/2. WebSocket等のプロトコル対応と抽象化 JSON APIに特化 認証系 キャッシュ管理 Viewに関心がない リアルタイムウェブは、その言葉をどう定義

Atomのショートカット一覧 WindowsとMacの両方で使用しているとショートカットを忘れるのでチートシートを作成しました。 他にも便利なショートカットがあるので、暇なときに追加します。 文字・行関連の操作 操作 Windows Mac

Chrome 43から、選択されたテキストをクリップボードにコピーしたり切り取ったりする機能が利用可能になります。Chrome拡張機能からは前から使うことができていましたが、Chrome 43からは普通のWebページからも利用することが可能です。HTML5Rockの更新情報にてアナウンスされていましたので、早速日本語訳してみました。ぜひご活用ください。 原文: http://updates.html5rocks.com/2015/04/cut-and-copy-commands Cut and Copy Commands IE10やそれ以上のバージョンは、Document.execCommand()メソッド（ https://www.google.com/url?q=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI

高校数学がボロボロでも大丈夫です。（ もともと個人的にインプットし貯めていたものですが、書きなおして公開します。 地味ですが、派手な動きはこの地味な数式・概念がベースになってきます。 また、メディアアートとは言ったものの、ゲーム制作などにも役立つでしょう。 「ラジアンとは？」「サイン波を描く」「円軌道を描く」「弾幕（2点間の距離系&角度系）」「多角形を描く」「フラクタル」といったテーマです。 また、そのプレイグラウンドとしてp5.js（Processingのjs版）をご紹介します。2014年にリリースされたものでまだマイナーですがCodePenのような海外サイトでは人気が出つつあります。またProcessing公式プロジェクトなので安心感もありますね。ちなみに、Processing.jsとは別プロジェクトです。 ラジアンとは？ ・ラジアンは単位 角度についてのもう一つの単位です。 角度とラ