2016.08.25 ヒカラボ「React/Redux勉強会」で使用した資料です。 https://career.levtech.jp/hikalab/event/detail/59/Read less
![React Native 入門](https://cdn-ak-scissors.b.st-hatena.com/image/square/b40f601850dea8a23fbb7b403a0d3e03d317cfa8/height=288;version=1;width=512/https%3A%2F%2Fcdn.slidesharecdn.com%2Fss_thumbnails%2Freactnative-160826022223-thumbnail.jpg%3Fwidth%3D640%26height%3D640%26fit%3Dbounds)
最近、またGoogleアナリティクスの面倒を見ている。で、GAのドキュメントを見ていたら最近のイケてるトラッキングスニペットはこれだぜ!みたいなこと書いてあった。やれやれ、またかと思い、筆をとったのです。 トラッキングスニペットの移り変わり激しいもので、最近だとこうゆうのが一般的だろう。 <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,
Nodeの組み込みモジュール・サードパーティモジュール問わず広く使われるのが EventEmitter オブジェクト。 これはNodeで使われるデザインパターンの筆頭みたいなものなので、知っておかねばならない。 ドキュメント: Events ブラウザ上のJavaScriptで addEventListener を使ってイベントドリブンの開発を行うが、Node上でそれを行うのための機能を提供するのが EventEmitter。 例えば次のように使う var EventEmitter = require('events').EventEmitter; function asyncFunc() { var ev = new EventEmitter; console.log('in asyncFunc'); setTimeout(function () { ev.emit('done', 'fo
<script src="//typekit.com/fj3j1j2.js"></script> <!-- This second script won’t execute until typekit has executed, or timed out --> <script src="//my.site/script.js"></script> ローカルスクリプトとリモートスクリプトを組み合わせても同様に操作することができます。 機能的には、Webページの前の部分で重いスクリプトのロードがあると、サイトの表示が明らかに遅くなることを意味します。さらに、ページの最後の方で表示されるスクリプトは、それまでに存在するされたスクリプトの動作に依存することを意味します。 先行する全てのscriptタグがロードされ実行されるまで、ページ上の要素は表示されません。つまり、パフォーマンスへの悪影響を覚
さて、 Node.js のエラーハンドリングは難しいと言われてますが、 2016年現在、つまりNodeの v4 とか v6 が主流になり、 Promise が基本的な処理として採用されている状況ではどうでしょうか。ちょっと考えてみます。 一応これの補足です。 qiita.com TL;DR 未だに難しい。ただし、 Promise で改善されている。async-await や zone まで来たらかなり楽になる。 あと、 unhandledRejection が uncaughtException よりも酷いことにならないので、大分マシになっている。 Node.js のエラーハンドリングの難しさ まず JavaScript には同期と非同期のエラーハンドリングのやり方があります。前者は所謂 try-catch による方法、後者は callback を使って第一引数で実現する方法や emit(
でできるやつだ。 これをNode.jsでやりたい。 なんかライブラリあるだろ、と思ってnpmレポジトリを2分ほど探したが良いのが見つからず。 いや多分よく探せば絶対あるんだけど探すのめんどくさい。 作るか。 ファイルコピーを実装する まずは一つのファイルをコピーする関数を作る。 fsモジュールの.createReadStream()と.createWriteStream()を使えば一瞬だ。 var r = fs.createReadStream(src), w = fs.createWriteStream(dest); r.pip(w); function _copySingle(src, dest, callback) { var aborted = false; var r = fs.createReadStream(src), w = fs.createWriteStream(des
概要 非同期な処理を同期的に書ける関数タイプが実装された。 基本 「async」キーワードに続けて関数定義を書くと、async関数となる。 async function afn1() { } afn2 = async () => { } obj = { async afn3() { } } async関数を呼び出すとプロミスが返される。 console.log( afn1() ) // <Promise> このプロミスは、async関数が終了するとその返り値で解決され、例外が起こると棄却される。 async function afn4( flag ) { if ( flag ) return 'Yes' else throw 'No' } afn4( true ).then( v => console.log( v ) ) /// "Yes" afn4( false ).catch( v
MERY のサーバーサイドエンジニアの @saidie です。 MERY では画像アップロードや記事投稿による検索インデックス作成などなど、ユーザからのリクエスト起因で起こる時間のかかる処理の多くを非同期に行うことでレスポンスタイムの向上に努めています。また、重複した非同期処理が並行して走ることによる スループット の劣化を分散ロックを用いた 排他制御 で緩和する取り組みなども行っています。 MERY は Ruby on Rails を用いて開発されており、非同期処理には Ruby 製の フレームワーク である Sidekiq を採用しています。この記事では Sidekiq と Redis による分散ロックを使って、同一の非同期処理が(あまり)重複しないような MERY の非同期処理システムについてご紹介します。 Sidekiq Sidekiq はクライアントサー バモ デルのマルチスレッ
ES6を使う機会がありそうで、Promiseについて全然知らなかったので、実際に書きながら勉強してみたときのメモ。 なお、以下を参考にさせて頂きました。 0から勉強する時でもとても分かりやすかったです。 JavaScript Promiseの本 環境 Node.js v4.2.2 Promiseとは 非同期処理を操作できる 非同期処理の成功時(resolve)、失敗時(reject)の処理を明示的に書くことが出来る 非同期処理を平行・直列に実行させることが出来る とりあえずやってみる とりあえず、参考にさせて頂いたサイトのコードを書いてみました。 function asyncFunction() { // Promiseオブジェクトを返却する.処理成功時にはresolveが呼ばれる return new Promise(function (resolve, reject) { setTim
仕事でNode.jsを使ってます。サーバーでも使ってますし、Androidのモニタリングにも使っていたりします。 今回はサーバーの話。今更な感じもありますが、一応書いておきます。 Node.jsは早いの?遅いの? 単純作業で言えば早いです。「データベースから値を取ってきて、テンプレートに埋め込んで、HTMLを返す」みたいな単純作業は早いです。 でもそのHTMLから<img>タグがサーバを指していて、画像を返す処理もNode.jsにやらせると、どんどん遅くなっていきます。 画像やJavaScriptなど静的なファイルは別サーバにやらせて、Node.jsのサーバではプログラム的なことだけをやらせるようにすると上手くいきます。 仕事では、ウェブサイトはNode.js、静的なファイルはGoogle Cloud Storageにやらせてます。 以前に、2,000アクセス/秒のHTTPクエリをNode
gulpはstream志向でデザインされていて、streamしか受け入れない・streamじゃないとon the railじゃない、というようなイメージが強いと思う。 ところがどっこい、gulpのタスクが受け入れるのはstreamだけじゃないし、必ずしもgulp-*とかvinylとかを使わなければならない理由も特に無い。それらを使わなくてもタスクは実行できる。 「stream使わなくてもいいじゃん」と割り切ると、gulpの使い途が広がる。 一応挙げておくと、例えば下記のコードは正しいタスク。 gulp.task('synctask', () => { console.log('sync task executed.'); }); 非同期であれば下記のように書ける。 gulp.task('asynctask', done => { setTimeout(() => { console.log
Node.jsでYahooから天気を取得するnpmを作った。 https://www.npmjs.com/package/weather-yahoo-jp YOLP(Yahoo Open Local Platform)のリアルタイム降雨情報のAPIと、Yahoo天気の予報の取得ができる。 Nodeに日本の天気関係のnpmが無かったのと、今まで使っていたRubyのお天気系Rubygemが全て動かなくなっていたので自作した。 天気をスクレイピングして取ってくる部分がHTMLの変更により動かなくなってしまう事が多いみたいなので、CircleCIで毎日テストを走らせる事により異常にすぐ気づけるようにしてある。 現時点でv0.2.0 forecastの方はまだ多少項目追加する予定なので(気温の前日との差や降水確率など)最新情報はREADMEを見ると良い エラーや要望はissueかtwitterにどう
新横浜は新幹線が止まるしイベント施設が複数あるので、土日はなんらかの目的をもって訪れる人が多いみたいでニコニコ笑顔の人が多くて良い。そのかわりイベントの入場前・退場後の時間帯は強烈に混雑して駅に入れなくなる事がまれによくある。 そこでtwitter botにイベント情報を喋らせることにした。毎朝ツイートするので危険を察知できる。 そのうち混雑度を算出する機能も追加したい。あと開場時間も。 新横浜 12月23日のイベントは 横浜アリーナ : 平井 堅 日産スタジアム : 日産スタジアム歳時記イベント 「もちつき&しめ縄飾りづくり」 — neoyokohama (@neoyokohama) December 22, 2015 ソースコード https://github.com/shokai/neoyokohama-bot coを使うと、非同期処理を同期的に書いて順番に実行したり、あるいはasy
改良したものをライブラリとして公開しました。 Swiftで複数の非同期処理を扱うライブラリAsyncKitを書きました 非同期処理を並列に実行させてすべてが終わったら別の処理を行う、ということをしたいとき、GCDのgroupを使う方法があります。 ただ、毎回GCDのコードを書くのは美しくないですし、やり方を忘れてしまいがちです。 そこで新しく parallel という関数を作りました。 JavaScriptの非同期処理を扱うライブラリ "async" にあるparallel関数を参考にしています。 Quick Example parallel( [ { done in done("1") }, { done in done("2") } ]) { results in print(results) // -> [Optional(1), Optional(2)] } let process
カメラを新調して写真撮りまくってます。CTOの林です。 ブラウザでの対応が進んできたこともあり、ES6がかなり注目されてきています。今日はその中でも「Promise」について簡単に解説していきたいと思います。 Promiseとは Promiseは、非同期の処理をわかりやすく制御するオブジェクトで、ES6(ES2015/ECMAScript 2015)に追加された機能の1つです。 http://caniuse.com/#feat=promises 現在は、多くのブラウザですでに実装されています。 また、多くのPolyfillが作られているため、非対応のIEでもPromiseを使うことができます。 https://github.com/jakearchibald/es6-promise https://github.com/taylorhakes/promise-polyfill https:
2017.2.6 追記:Swift 3対応版の記事を書きました! blog.koogawa.com 以前から気になっていた Realm ですが、先日受講した岸川先生の授業をきっかけに、実際に触ってみたくなりました。 Realm を理解するには何か作ってみるのが一番ってことで、簡単なGPSロガーを作ってみました。 次のような機能があります。 Startボタンを押すと位置情報を記録開始 アプリをバックグラウンドに落としても記録し続ける 位置情報が取得されると地図にもピンが立つ distanceFilter はとりあえず 100m にセット 1日経過したデータは自動削除 Stopボタンを押すと位置情報の取得終了 *** 以下、メモです。 2015.9.23 UPDATE: Swift 2.0 に対応したソースコードを追記しています。 RealmSwift インストール 次のような Podfile
Hubotでkuromoji.jsを使って形態素解析を行う方法を調べてみました。形態素解析のライブラリは node-mecab-async も有名ですが、Mecabのバイナリを用意する必要があります。kuromoji.jsはPure JavaScriptの実装なので、Herokuに簡単にデプロイできます。 yo hubot YeomanでHubotのテンプレートを生成します。 npm install -g yo generator-hubot mkdir -p hubot-learn cd hubot-learn yo hubot kuromoji.jsを依存関係に追加します。 npm install --save kuromoji これから scripts/main.coffee にコードを書いていきます。 形態素解析器を使う kuromoji.jsを初期化します。kuromoji.bu
UIImageをURLから非同期でロードしたい時のextensions。エラー処理とか全く入れてないけど... extension UIImage { class func loadAsyncFromURL(urlString: String, callback: (UIImage?) -> ()) { dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), { let url = NSURL(string: urlString) var err: NSError? let imageData = NSData(contentsOfURL: url!, options: NSDataReadingOptions.DataReadingMappedIfSafe, error: &err) va
社内のSlackで後輩がSlackの絵文字にでかい絵を分割して登録し、パズルだとか言っていたので、なんとなく作りたくなってしまいHubot上で8パズルが出来るbotを作ってしまいました。 できること 現在の状態を確認 コマンドなしでbotを呼ぶと現在のパズルの状態を表示します。 パズルをシャッフル shuffle でランダムに10手動かします。 パズルを動かす u, d, l, r (それぞれup, down, left, rightに対応)を並べて打ち込むと、そのとおりにパズルを動かします。 絵柄を選んでパズルをリセット reset の後に絵柄(ここではことりちゃん)を指定すると絵柄をリセットしてくれます。 コード 特に解説はしませんが、hubot-slack からアダプタ経由でAPIを呼び、投稿したメッセージを編集することを async.eachSeries で逐次的に呼ぶことでパズル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く