fuelphpとsocket.ioでのチャットシステムの作り方まとめ - とりあえずphpとか
はじめに 何度かまとめようと思ってたんですけど、なかなかちゃんとまとめられなかったので今回再度まとめてみようと思います。 socket.io単体での実装方法はよく見かけるのですが、LAMP環境で構築されたシステムと一緒に構築されるサンプルがあまり見かけられなかったので今回はこれの実装方法をまとめてみようと思います。 また、僕は普段LAMP環境でのwebサービスをメインに扱っているので極力node.jsの使用を最小限にすることを心がけて作業を進めました（node.js得意でないだけです） システム構成 基本的にwebサイトと同じですが、チャットルームではページ遷移なしでの画面を更新するためにnode.jsを使用します。 通常のwebサイトとの1番の違いはjavascriptでクライアントからサーバへのデータ送信以外に、サーバからクライアントへのデータ送信も使用することでしょうか。 node.
React、Redux、D3を用いたアニメーション | POSTD
これは小さな粒を生成するものです。あなたがクリックした場所から、小さな円が生まれて飛び出していくのです。マウスを持って、動かしてみましょう。粒はカーソルから生み出され続けます。 モバイル機器や、マウスではなく指で動かすタイプのコンピュータだったらどうでしょうか。同じように動きます。 私はオタクなので、これが楽しいと思います。皆さんの見解は様々かもしれません。埋め込み画像をクリックして、円が飛ぶのを見てください。クールじゃないですか？ 仕組み これは全てReact、Redux、D3を使って作られています。アニメーションのトリックはありません。少しの賢さが必要なだけです。 一般的な方法を、以下で説明してみます。 私たちは、ページ、SVGエレメント、内部の粒といった 全てをレンダリングするためにReact を使います。この全ては、propを使ってDOMを返す、Reactコンポーネントを使って作ら
webpackでuglify-save-licenseを使ってライセンスコメントを残す
今日KobitoのWindows版がリリースされた。 出たんでよろしくお願いします / “QiitaがMarkdownメモツール「Kobito」のWindows版をElectronベースでリリース | TechCrunch Japan” http://t.co/BdPSbEMTXL — ガソリンの味 (@mizchi) 2015, 5月 12 mizchiさんがその前後のツイートでライセンスについてのツイートをしていた。 そういえば明日リリースする某アプリ、ライセンス列挙するの面倒臭かったので @t_wada さんのlicensifyでぶっこ抜いたデータをlicenses.txt として同梱した(対kyo_ago戦略ともいう) — ガソリンの味 (@mizchi) 2015, 5月 11 licensifyというのがあるのか、名前からしてbrowserifyのプラグインかな、と思ったらやは
CSS Modules 所感 - morishitter blog
CSS Modulesという、CSSの新しい設計概念・指針のようなものがある。 CSS Modulesチームの1人であるGlen Maddern氏が書いた「CSS Modules - Welcome to the Future」という記事の翻訳がバズっていたので、僕がCSS Modulesについて思ったことをまとてみる。「CSS Modulesとは何か」ということは、上記の記事に書かれているのでここではあまり触れない。 CSS Modulesとコンポーネント設計 CSSのルールセットは全てがグローバル定義であり、CSS（Cascading Style Sheets）というスタイルシート言語の最大の特徴である"カスケーディング"という機能により、CSSファイルを見ただけでそのスタイルの影響範囲を理解することは難しい。 CSS Modulesは、CSSのルールセットの影響範囲を、Webアプリケ
webpackを使ってsassをコンパイルできるようにしよう！ - Qiita
背景 なぜかこれのやり方に関する記事が簡単にみつからず、”じゃあいいよ俺書くよ！”ってことでメモ。 （こんだけ記事がないと何か根本的に俺は間違っているのだろうかと内心ビクついてるので、何かお気付きの方いらっしゃいましたら容赦なくツッコミ下さい。） 元々はフロントのes6をコンパイルするためにwebpackを導入してみたので、sassもwebpackで処理できればいいなと。 あ、あとjsとcssは別ファイルに出力したいという要件を前提にやってます。特に明確な理由があるわけじゃないけど、気持ちの問題で^^ 環境 node 0.12.10 webpack 1.12.14 手順 ここを参考にSEPARATE CSS BUNDLE 必要なライブラリをインストール npm install style-loader css-loader sass-loader extract-text-webpack-
BabiliでBabelのコードを圧縮する | KEYPOINT – キー・ポイント株式会社 開発日誌
tです。前回に引き続き、Babelのプラグインについて紹介します。 ES2015などで記述して、Babelを使ってトランスパイルする時のコードの圧縮(ミニファイ)を行なう、Babili(babel-minify)についてです。 JavaScriptをミニファイするツールはいろいろありますが、ES2015のクラスなどの新しい構文に対応しているものは、見たことがありません。 Babiliを利用すれば、ES2015のクラスなどがそのままあってもミニファイできるので、便利です。 環境準備 Babiliを使ってどのように変換されるかを、「index.js」を使って見ていきます。 以下の3つのファイルを、任意のディレクトリに準備してください。
既存のWebアプリをReactで書き換えた話（＋ES6の困った点） - ぱろっと・すたじお
本当は1ヶ月前に下書きを書いた記事なのですが、 忙しくて見直す時間がなく、だいぶ遅くなってしまいました(´･ω･`) その間にバグfixを進め、一応安定動作していますし、 それもふまえた内容に書き換えていく方向で・・・ 相変わらずメンテと拡張を続けている 「チェンクロパーティーシミュレーター」（以下「ccpts」）ですが、 先日Reactでほぼ全体を書き換えました(`･ω･´) ccpts.parrot-studio.com github.com ちょうど1年ほど前、私がReactを初めて意識した際に、 一度やろうとしたことはあるのですが、 いろいろな理由*1があって諦めてました しかし、昨年から仕事でNode.jsを扱うように*2なり、 先日はccptsのロジックをFRPで整理するのに成功したりと、 今ならいけるんじゃないか・・・と思い、今回試してみたわけです React（+flux）に
ReactをjQueryの数行に要約する | POSTD
「Reactが素晴らしい理由は、UIをアプリケーションの状態の純粋関数にできるからだ」いうような話を聞いたことがあるでしょう。しかしそれだけではなく、不変性と仮装DOMを利用して動作するということも聞きますよね。その上、保存、読み込み、取り消し、それにタイムトラベル・デバッグと呼ばれるすごい機能まで自由に手に入れられる。でも知っていますか？ Reactの核となるアイデアを利用し、その恩恵に預かるのにこれらのことは必要ありません。jQueryの数行にしてお見せします。 <span id="colored-counter">0</span> <input id="color"></input> <button id="inc"></button> <script> $('#color').on('keyup', function () { $('#colored-counter').css('
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webpack · Issue #1529 · request/request
ES2015 の Class で Singleton - Qiita
yarnがnpmと何が違うのか試してみた - Qiita
