CircleCIで任意のprivateリポジトリをcloneする - Qiita
自動的にCircleCIがいい感じに調整してくれるのでGitHubのprivateリポジトリをCircleCIでテストするのは簡単ですが、テスト過程で他のprivateリポジトリをcloneするにはちょっとした工夫が必要になります。 CircleCIにuser keyを登録する まずCircleCIの "Project settings" > "Checkout SSH keys" に行きます。 みたいなのがあるので、ボタンをクリックします。するとGitHubのOAuthページが表示され公開鍵への書き込み権限を要求されるので許可します。 これによりあなたのGitHubアカウントに新しい公開鍵が設定され、それに対応する秘密鍵がCircleCI上に登録されます。なので、あなたがアクセス権限を持つGitHub上のPrivateリポジトリにはこの時点で全てこのCircleCIのプロジェクトからはア
ブラウザで API リクエストにかかった時間を取得する - Qiita
クライアントで API の呼び出しにかかった時間を Resource Timing API を用いて計測する方法を解説します。 Resource Timing API とは Resource Timing API とは Web ページで読み込まれるリソースの読み込みに要した時間を詳細に取得するための API で、 XMLHttpRequest に限らず <img> などの取得に要する時間を知ることもできます。 Resource Timing API では、その結果を PerformanceResourceTiming というオブジェクトに格納します。PerformanceResourceTiming は Resource Timing Level 1 で定められており、 2017 年 3 月に Candidate Recommendation となったので、もう使ってしまって問題ないでしょ
flowの型情報をnpmパッケージで一緒に配布する - Qiita
TL;DR; flow 0.19.0 から .js.flow 拡張子がついたファイルがあればそれを見るようになった npm パッケージでは型情報を消した .js ファイルと、型情報を持った .js.flow ファイルを一緒に配布する 将来的に flow に特大の後方非互換な変更が入らない限り動くはず npmパッケージも型情報を使いたい 開発時に型情報を書いても、いざ配布するときにはそれを取り外してから配布する。取り外さないと、 flow を使っていないプロジェクトで require することが困難になってしまうためだ。 しかし、そのパッケージを使うときには flow を使いたい。flowtype/flow-typed に自分のライブラリの情報を載せるのが一つの手だが、開発段階で実装が流動的だと更新が面倒なのに加えて、そもそも DRY ではない。 せっかく開発時に書いた型情報を、 npm パ
Flowで型を指定しながらHOCを書く - Qiita
注意: この記事はかなり昔の Flow をもとに書かれました。当時と比べ Flow は特に React まわりで大きな変更が入っており、おそらくこの記事の賞味期限は切れていると思います。 React で大きなソフトウェアを書いている時に、複数のコンポーネントに共通する処理を抽象化するためのプラクティスに Higher-Order Components （HOC）というものがあります。HOCについて一言で言うなら「React コンポーネントを受け取って、それをラップした新しい React コンポーネントを返す関数」です。 HOC では引数に受け取るコンポーネントに特定のインタフェースを期待することが多いと思います。こう言う時こそ flow を使って引数の型を強制したくなりますね。 期待するのは例えば「Promise<*> を返す update メソッドを持っていること」などですが、その一方で
Reactjsのチュートリアルを読んで浮かんだ疑問とそれに対する答え - Qiita
Reactjsのチュートリアルを読んでみて、大雑把なReactjsの使い方を把握したのですが、疑問に思った点がいくつかあったので調べてみました。 前提 筆者のReactjs力がどれくらいかと言うと 存在は知ってたが、中身は全く知らなかった VirtualDom - なぜ仮想DOMという概念が俺達の魂を震えさせるのかを読んだ だけの状態です。つまりコンセプトは知っているが、細かい話は何も知らなかった状態です。その状態で前述のチュートリアルを読んだ感じです。 var CommentBox = React.createClass({ render: function() { return ( <div className="commentBox"> Hello, world! I am a CommentBox. </div> ); } }); React.render( <CommentBox
RDB - 実例で学ぶ、JOIN (NLJ) が遅くなる理屈と対処法 - Qiita
"Nested Loop Joinしか取り上げて無いのにタイトルが大きすぎないか" と指摘を頂いたので、タイトルを修正しました。Merge JoinとHash Joinのことはまた今度書こうと思います。 「JOINは遅い」とよく言われます。特にRDBを使い始めて間がない内にそういう言説に触れた結果「JOIN=悪」という認識で固定化されてしまっている人も多いように感じています。 たしかに、JOINを含むようなSELECT文は、含まないものに比べて重たくなる傾向があることは事実です。また、本質的に問い合わせたい内容が複雑で、対処することが難しいものも存在します。しかし、RDBの中で一体どういうことが起きているのかを知り、それに基いて対処すれば高速化できることも少なくないと考えています。 本稿では、JOINの内部動作を解説した上で、Webサービスを作っているとよく出てくるJOIN SQLを例題に
Node書くならEventEmitterについて知っとくべし - Qiita
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
Capistrano3のデプロイフレームワークの使い方 - Qiita
Capistranoはバージョン3から汎用的なデプロイフレームワークになりました。タスクのフックを利用することで簡単に自分のアプリケーション環境に特化したデプロイプロセスを記述することができます。 本稿では、この汎用化されたデプロイ機能の使い方に焦点を絞って解説したいと思います。より基本的なCapistrano3の解説は 入門 Capistrano 3 ~ 全ての手作業を生まれる前に消し去りたい | GREE Engineers' Blog がよくまとまっているので、そちらを参考にしてください。この参考記事では "5. Capistranoデフォルトタスクの消去" でCapistranoの新規導入時のコストを下げる目的で、このフレームワーク機能を消去しています。本稿はこのフレームワーク機能の使い方を解説するものです。 deployとframeworkの2つの抽象度が用意されている Capi
プルリクエストを自動補完してcheckoutする - Qiita
問題 プルリクエストのレビュー、動作確認をするためにローカルでcheckoutしたいが、ブランチ名を調べて入力するのが面倒くさい。別名をつけてcheckoutできるようにする方法があるが、プルリクエストの番号を調べる必要があってそれも面倒。 もっと簡単にcheckoutしたい!!! 解決策 プルリクエストの一覧からブランチを選択してcheckoutできるようにしました。 1. プルリクエスト一覧を取得する まずプルリクエスト一覧を取得します。そのためにprfetchというスクリプトを書きました。 手っ取り早く下記でインストールできます。 wget https://raw.githubusercontent.com/yuku-t/dotfiles/master/bin/prfetch chmod +x prfetch mv prfetch ~/bin # ~/bin はPATHに入っていると
Facebookみたいにtextareaの一部を強調する - Qiita
Facebookで人物を補完すると、その人物名の周りに枠が表示されて強調されますよね（gif画像参照）。 これのやり方を解説します。 TL;DR textareaの強調表示は、textareaを透明にして後ろにいい感じの背景を設置してるだけ textareaの中にDOMを入れても表示されない パッと考えるとtextareaの中にDOMツリーを入れるとそれが表示されるんじゃないか、と思うかも知れません が、ぜんぜんそんなことは無くて、そのまま文字列が表示されてしまいます。 ご存知のようにtextareaやinputは、他の要素のように子要素を表示するのではなく、自身のvalue属性の値を画面に表示する働きをします。value属性は文字列を格納するためのものなのでDOMを入れられないわけですね。 強調用のDOMを重ねあわせる textareaにはDOMをそのまま入れられないので、仕方がなく周り
JSLitmusを使ってJSのパフォーマンス測定をする - Qiita
計測しないで推測ばかりしているアホの子だったから本腰いれて JavaScript のパフォーマンス測定環境について調べた。 結論として JSLitmus を使うとかなり簡単にできる。 使い方 jslitmus.js をロードする JSLitmus.test の第二引数に測定したい関数を渡す #jslibmut_container エレメントを作る 簡単！ 例 <!DOCTYPE html> <html> <head> <script src='jslitmus.js'></script> <script src='sample.js'></script> </head> <body> <div id='jslitmus_container'></div> </body> </html> // グローバル変数とローカル変数に対するアクセス速度の違いを測定する var global_var =
_.templateを複数回使う時はコンパイルした方がいい - Qiita
underscore.js には _.tempalte というテンプレートエンジンがついているが、これを使う時にコンパイル結果を使いまわすことができる var html = '<span><%= name %></span>'; // 利用後そのままコンパイル結果を捨てる _.tempalte(html, { name: 'qiita' }); //=> <span>qiita</span> // コンパイルした結果を使いまわす var tmpl = _.template(html); tmpl({name: 'qiita'}); //=> <span>qiita</span> var html = '\ <ul>\ <% _.each(items, function(item) { %>\ <li><%= item %></li>\ <% }); %>\ </ul>'; var item
結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 - Qiita
結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 一年ほど前に JavaScript - jQuery.Deferredを使って楽しい非同期生活を送る方法 - Qiita [キータ] という記事を書きました。 で、一年経って、ふと、「もっと分かりやすくjQuery.Deferredの便利さを説明できるんじゃないか」と思い立ってざざざっと書いてみました。 小話と言うにはちょっと長いけど。 -- jQuery.Deferredを使うと嬉しいのは、jQuery.Deferredの仕様を満たす部品同士を簡単に組み合わせることが可能だからです。中には処理を書き下すことができるとかコールバックのネストを防げるのがいいとか言う人もいますが、個人的にこっちのほうがよっぽど重要だと感じます。 例えるならレゴブロックです。レゴブロックはあの凸と凹を持ってるブロックを自由に組み合
GitHubのようなtextareaの補完機能を実装する - カーソル位置の取得 - Qiita
続編 JavaScript - Qiitaのtextarea自動補完がOSSになりました GitHubのコメントでは@と入力するとカーソルの下に入力補完が出現する。さらっとやっているが、実はこれが結構難しい。なぜ難しいのかというと、JavaScriptではカーソルが何文字目にいるかは分かるが、 カーソルのXY座標を取得するAPIが存在しない からだ。カーソル位置が分からなければ、適切な位置に補完候補を表示することができない。では一体どうすればいいのか？ 今回Qiitaではコメント欄でのメンションの補完機能を実装した。本稿では前述の問題を解決するために用いたテクニックを解説する。 ちなみにこのメンション補完機能はチーム用プライベートQiitaである「Qiita:Team」でも勿論使える。現在絶賛無料トライアル実施中なので、興味を持たれた方はそちらも使ってみて欲しい。 要約 textarea内
なぜGoogleはJSONの先頭に while(1); をつけるのか - Qiita
Stack Overflowに面白い質問があったので紹介する javascript - Why does Google prepend while(1); to their JSON responses? - Stack Overflow 質問 Googleのサービス内で使われるJSONの先頭に while(1); てついているのは何故？ 例えばGoogle Calendarではカレンダーを切り替えるときに以下のような内容のデータがサーバから返される。 while(1);[['u',[['smsSentFlag','false'],['hideInvitations','false'],['remindOnRespondedEventsOnly','true'],['hideInvitations_remindOnRespondedEventsOnly','false_true'],['C
curlを捨ててhttpieを使おう - Qiita
jkbr/httpie : Github : HTTPie is a CLI, cURL-like tool for humans curl（see urlと発音するらしい本家のFAQによると開発陣は kurl と発音してるらしいです）はプログラムから使うには便利だけど、オプションがわかりにくい。 httpieはより直感的なcurl代替コマンド。よほどcurlに思い入れがない限りhttpieをおすすめする。 インストール 使用例 奥がcurlで、手前がhttpieを使った場合。見れば分かるようにhttpieは自動で色付けをしてくれるし、コマンドもかなり直感的だ。内部的にはPythonのrequestsというモジュールを使っている。Python組み込みのHTTPクライアントに辟易している人はそちらも調べてみるととても幸せになれる。 kennethreitz/requests : Github
jQuery.Deferredを使って楽しい非同期生活を送る方法 - Qiita
続編も書きました : 結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 jQuery version1.5で導入されたjQuery.Deferredは、無くてもコードを書けるけど、使えば少しコードが綺麗かつ見通しが良くなる、という機能。 無くても書けるという機能がなかなか使われないというのは世の常なので、jQueryクックブック(O'REILLY)の中でも言及されていない、なんとも寂しい状況だ。 ちょっとここらで一肌脱いでやるか、という趣旨で書き始めたら無駄に長くなった。 とりあえず使ってみたい、という人は下の方の「jQuery.Deferred自体の使い方」までジャンプするとよい。 jQuery.Deferredとはどういう場面で使うものなのか コールバックを渡して非同期処理完了時にそれを呼び出してもらうような場面。 具体的には $.get('hoge',
アプリエンジニア向け：「サーバがなんか重い」時にすること - Qiita
アプリケーションエンジニアの人には「なんか重い」という状況に遭遇したらインフラの人にタスクを投げる、という人もいるかも知れません。けど、その重さのどこに原因があるのか。CPUか、ネットワークか、IOかくらいの診断はできた方がアプリ開発においても有益です。 「せっかくつくったシステムがなんか重い」 そんな時にアプリケーションエンジニアとしてできることを書きます。 本職のインフラの人にはぬるい内容だと思います。何を隠そう僕自身がアプリ寄りの人間なので、突っ込んだ話はできないのです。あしからずご了承ください。 なんかサーバが重いなー まずはロードアベレージを調べる サーバが重いと思ったら、まず真っ先にすべきことは対象ホストにSSH接続してロードアベレージを調べることでしょう。ロードアベレージとは 実行されずに待たされているプロセスの数 のことで、多すぎるとやばいと認識しておきましょう。ロードアベ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
