サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
pig.hatenadiary.com
Next.jsは、webpackとwebpack.configを内包し、自身のソースをエントリポイントにして起動する風変わりなnpmパッケージである。非常にレアなケースで、多くの人がその気を起こすことなく一生を終えるケースだと思うが、私は同様のパッケージを作ってみたくなった。 この「webpack内包型」のパッケージは、ユーザ側のコードを適切に取り込み、アプリを起動するのが責務となる。開発するためには、実際にユーザが使用する際を想定し、ライブラリ側のコード「libDir」と、それに依存するユーザ側のコード「userDir」の、少なくとも2つのpackage.jsonをもつディレクトリが必要になる。 2つとも限らない。userDirはユーザーに使い方を示すサンプルプロジェクトとしても使える。様々な利用ケースに対応することを示すため、サンプルプロジェクトは今後増やすかも知れない。package
前提 VirtulaBox を使ってる vm のディスクが VMDK 形式だ(vm情報のストレージ項目 に "box-disk1.vmdk" のような拡張子のファイル名があったらそう) ディスク容量が足らなくなっちゃった ディスクをリサイズする VMDK形式を直接リサイズはできないようで、いちどVDI形式に変換してから戻しています。 $ cd ~/VirtualBox\ VMs/my_vm_01/ $ ls Logs Snapshots box-disk1.vmdk my_vm_01.vbox my_vm_01.vbox-prev $ VBoxManage clonehd "box-disk1.vmdk" "cloned.vdi" --format vdi $ VBoxManage modifyhd "cloned.vdi" --resize 16384 # 単位はMB $ VBoxMan
node.js のMongoDBドライバに Mongoose というものがあります。これの model.update 関数のコールバックの動きが分かりにくかったので、注意して様子を見てみました。 まず、ネイティブのREPLの動きを再確認します。 $ mongo MongoDB shell version: 2.2.1 connecting to: test // 新規データベースを作成 > use myBalanceBook switched to db myBalanceBook // 文書の作成 > db.girls.insert({name: 'honda tsubasa', spent: 500}) // 1つめの文書を作成 > db.girls.insert({name: 'mizuhara kiko', spent: 1500}) // 2つめ > db.girls.inser
qはPromises/A提案ベースの非同期管理ユーティリティです。 https://github.com/kriskowal/q/wiki/API-Reference と思ってたら、今はPromises/A+ というものがあるようです。 http://promises-aplus.github.io/promises-spec/ qがあれば、非同期処理が増えてインデントが増えて読みにくくなったり、クロージャ構造で変数を参照し過ぎてリファクタリングしにくいコードになるのを、ある程度防ぐことができます。 以下は、同期処理と非同期処理を順番に処理していく例です。 var Q = require('q'); var step1 = function(v) { var d = Q.defer(); setTimeout(function() { d.resolve(v); }, 100); retu
参考:goog.ui.Control 複数の状態(STATE)を、1つの変数で保持する。例えば、DISABLED状態であり、同時にHOVER状態でもある状態を1つの変数で表現する。以下、そのときのフラグの上げ下げのしかた。 まずビットマスクに使う定数を用意する。1,2,4,8,16,32...とする。 /** * @enum {number} */ var STATE = { DISABLED: 1, HOVER: 2, ACTIVE: 4, FOCUSED: 8 }; /** * @type {number} */ var state = 0; フラグが上がっているかの確認。if文で使うときは、 if (state & STATE.DISABLED) で判定できる。まだ、どのフラグも上がってない。 console.log(!!(state & STATE.DISABLED)); // f
Closure Library で、大量に列のあるリストを軽快に表示できるコンポーネントを作りました。 デモ:http://stakam.net/closure/120722/ GitHub:https://github.com/piglovesyou/closure-thousandrows 特徴 初期表示、スクロール時の動きが速いです。 使えるケース 数千件〜の一覧の表示に力を発揮します。過去ログなど大量のデータを表示するときに使えるかも知れません。 使えないケース リストが数十件程度の場合。遅延読み込みの必要がありません。 それぞれの列の高さがデザイン上違う場合は使えません。列は全て同じ高さである必要があります。これはコンポーネント側の制約です。 つくった経緯など このコンポーネントは、既存のWebページに用いられていた「ページング」と「無限スクロール」の問題点を解決したデータの表示
なんだかよく分からなかった。やっとできた。基本的なことが分かってないんだね。 追)githubにサンプルを作りました https://github.com/piglovesyou/express-twitter-oauth-sample やること: 下準備。ライブラリの準備。 app.get('/', routes.index);。ログインしてなかったら、/login にリダイレクト。 app.get('/login', routes.login); ログイン画面。ユーザーに「Twitterでログイン」をクリックしてもらう。 app.get('/auth/twitter', routes.auth.twitter); request_token を取得。取得したら、authenticate を叩く。 app.get('/auth/twitter/callback', routes.auth
参考: http://tjholowaychuk.com/post/12943975936/connect-1-8-0-multipart-support https://github.com/felixge/node-formidable/issues/108 http://www.hacksparrow.com/handle-file-uploads-in-express-node-js.html nodeでファイルアップロードする方法、難しい順。 1. req.on('data') で、ちょこちょこデータを溜め込んでいく。(僕には無理っぽい) 2. それを楽にするformidable というモジュール。丁寧に 'progress' というイベントまでemit してくれる。 3. express のapp.configure で app.use(express.bodyParser()
https://github.com/hornairs/muffin muffin.js をちょっと使ってみました。(v0.2.6) muffin.js は、 (Node.js で動く。) Coffeescript を書いていて、 Cakefile も書いていて、 Cakefile で child_process をいくつも作らなきゃいけない人 が幸せになれるライブラリだとおもいます。 Cakefile ? Cakefile は、Coffeescript で書く Makefile です。プロジェクトごとに1個。複数のtask を定義できる。Java でいう Ant の build.xml だとおもいます。Coffeescript を入れると使えるようになります。 task 名は自由ですが、 $ cake build とかやると、プロジェクト内でbuild 時にやって欲しい事を、させます。た
underscore.js は、誰かが「ビルトイン拡張しないPrototype.jsだ」って言っていました。実際、そうだと思います。 window._ に、いろいろユーティリティが詰まってるんです。(「 _ 」じゃなくも、できる) // 配列が空かどうかしらべたい _.isEmpty([]) // true _([]).isEmpty() // true。同じことをしてる。ちょっとjQueryぽい で、underscore.js は、jQuery みたいに拡張できます。プラグインが作れるんです。 // jQueryなら $.fn.newPlugin = function () {...}; // underscore.js なら _.mixin({ myUtil: function () {...} }); documentはこれです→ _.mixin で、これ流行りますかね? under
(追 ルーティングって言ったら普通動的ルーティングです( /user/:id 的な)静的なほうを話そうとするのは僕くらいなもんです Node.js + express + jade での静的ページのルーティング ためしに連想配列でページを追加できるよう書いてみたんです。 app.coffee express = require("express") routes = require('./routes') # . . routes.init(app) # routes.coffee # siteTitle = 'piglovesyou' pageTable = '/': 'ホームページ' # render views/index.jade '/about': 'このサイトについて' # render views/about.jade '/jquery': # (directory) '/'
$ npm install socket.io npm ERR! tar "-mvxpf" "-" "-o" "-C" "/tmp/npm-1315624604792/1315624604792-0.731322419596836/contents/___package.npm" tar: Ignoring unknown extended header keyword `LIBARCHIVE.creationtime' npm ERR! tar "-mvxpf" "-" "-o" "-C" "/tmp/npm-1315624604792/1315624604792-0.731322419596836/contents/___package.npm" tar: Ignoring unknown extended header keyword `SCHILY.dev' npm ERR! ta
SVNについてまなんでいます。で、BacklogにSVNリポジトリを置かせてもらって、今までMac+Coda+MAMPで作っていた趣味サイトに、バージョン管理を導入してみたいと思います。 Backlogについて書く Backlogはヌーラボさんが作っている、プロジェクト管理用ASPグループウェアです。ヌーラボさんのお仕事は最高です。Cacooでも思ったけど、なんか彼らが挑んでるフィールドは、他の人が複雑で面倒くさがるフィールドって感じがして、それをあんなに上手く作るのはすごいし、そこで彼らが蓄積して行ってるノウハウは、本当に価値があって、それがまた新たなWebサービスを生んで行くんだなって予感がします。見事だなって。 で、今回はBacklogの無料プランを使ってSVN環境を構築させてもらいました。100MBまで利用させてもらえます。本来Backlogはチーム間の総合的なプロジェクト管理ツー
単にsearchAPIを触ってみましたという話なのですが。 jsonpで検索するしくみを作ってみました 数年遅れでSearchAPIの仕組みを知り、やられました 恥ずかしいかぎりです。いくつかはsearchAPIに限らないかもしれません。 OAuthを使わないAPIは、IP単位でアクセス数制限をかけているのですね・・・なんて頭がいいんだ。 search.twitter.comのAPIを叩いたとする。帰って来たデータに「next_page」があるかないかで、データがそれ以上あるかないかが分かる設計。(検索ヒット総数みたいなものが返って来ると思っていた私は豚顔) その「next_page」には「"?page=2&max_id=40036130086715392&rpp=10&q=%23ogiri_110222"」のような文字列が入ってて、そのまま次の非同期通信に使える。 おまけに「max_id
iPhoneでフリックギャラリーを実装できるjQueryプラグイン「flickGal」を作りました。ぜひ使ってみてください! 公開にあたって意見をくれたid:hokut_o氏、ありがとうございました。 デモページ がありますので、見てみてください。 http://stakam.net/jquery/flickgal/demo ※iPhoneかiPad向けです。友達がAndroid でも動くと言っていました。PCでもそこそこ見れます。androidで最初うごかないことがあるみたいです。yuuriさんありがとうございます。android でorientation change しても動くv1.2 をリリースしました。 実装のしかた 説明ページを見てみてください。 http://stakam.net/jquery/flickgal/ 基本的にはこんな風に実装する方式です。 いくつかのルールにそっ
Custom Field Templateプラグインのdate picker部分の日本語化してみた。しかもほぼこちらの方が書いていることを参考にさせてもらいながらです。 WPプラグイン「Custom Field Template」 こちらの方のプラグインを使わせていただいてます。すごい・・・使いやすい・・・感謝です。 Custom Field Template plugin | WordPressで企業ウェブサイト作成・商用ホームページ制作 WordPress Go Go カスタムフィールドを追加しやすくするプラグインです。感動。 それで、いちばん感動したのが、datePickerがポップアップしてきた時です。カスタムフィールドテンプレートオプションのテンプレートコンテンツにこうかくと、textfield が datepickerになります。細やか。見事。 [schedule] label
シンプルにまとめたいと思いますが・・・ <div id="box"> <div id="boxInner"> <a href="#">ああ</a> </div> </div> <script> document.getElementById("box").addEventListener("click", clickHandler, false); document.getElementById("boxInner").addEventListener("click", clickHandler, false); document.getElementsByTagName("a")[0].addEventListener("click", clickHandler, false); function clickHandler(e){ // e.preventDefault(); // e.
はや三年来のjQueryファンだけど、知らない/新入荷したAPIが沢山あることが判明!イカンです! なので、普段必須に必要ではないけど「知ってたら使ってたよ!」というベンリapiを集めました(完全に自分基準。) /////////// effect追加 と .dequeue() を覚える /////////// // どうやら「現在のanimationをこなしつつ、 // 次のanimationを同時に(平行して)こなす」ということみたい // 特定のeffectを.dequeue() やら .clearQueue() したいわがままっ子は // 引数に文字列を渡すが良いとマニュアルには記されている $("#box").css({position: 'relative'}) .animate({left: '+=100px'}, 400) .animate({top: '+=100px'}
このページを最初にブックマークしてみませんか?
『pig.hatenadiary.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く