pirosikick's diary

君のハートにunshift

isomorphic tokyo meetupの感想とメモ・資料 #isomorphic_meetup

isomorphic tokyo meetup (2015/04/30 19:30〜)nodejs.connpass.com ニフティの場所難易度高い&都庁前駅でGoogleマップ使ったら現在地が御徒町になるなどのトラブルがあり、最初の発表の半分くらいを聞き逃したorz 感想 真のIsomorphic(Truly Isomorphic)…

Gunosy React Meetup行った #gunosyreact

Gunosy React Meetup (2015/03/30 19:30〜)gunosy-frontend.connpass.com 行った。オフィスすごく綺麗だった。 みなさんすごい勢いで発表していくし、ピザの香りでお腹すくし、終わった後の疲労感すごかったw ReactNativeの話も、v0.13〜の話も、実践?の話…

ng-japan 2015行った #ng_jp

ng-japan - AngularJS Japan User Group | Doorkeeper Angular1.3以降や2系についてはあんまり追っていなかったので、参加してみた。 最近はディスられていた印象が強かったけど、Communityがすごい規模になってもCommunityを重視して開発を進めようとしてい…

ES6のarrow functionとbabel

最近、JSを書く時はBabelを使ってES6で書いている。 mochaでテストを書く場合も下記で簡単に導入できる。 $ npm i -D mocha babel $ $(npm bin)/mocha --compilers js:babel/register そんな感じでTestiumとmochaで下記のようにテストケースを書いて、テスト…

gulpfile.es6でgulp.watchが動かない

gulpfileそのものをES6で書く 上記の記事を参考にgulpfileもES6で書けるようにした。が、watchが何故か動かなかった。 // gulpfile.js require('babel/register'); require('./gulpfile.es6'); // gulpfile.es6 import gulp from 'gulp'; gulp.task('scripts…

でかいjsonをJSONStreamでちょっとずつTSVにする

小ネタ。 最近、ニフティクラウドのmobile backendにあるデータの集計を頼まれて、エクスポート機能で全てのデータをダウンロードしてとりあえずMySQLに入れようとしたんだけど、そのjsonが600MBくらいあってrequireで読み込めなかった。 $ cat hoge.js var …

ES6+カジュアルトーク行った #es6_casual

ES6+カジュアルトーク (2014/10/29 19:30〜) ES6+カジュアルトーク - connpass 6つのLTどれも面白くて前日申し込みで滑り込めて本当に良かった。 カジュアルトークということで、全部で1時間半くらいとあんまり疲れなかったし、 でも内容は全然カジュアルじ…

第51回html5とか勉強会行った #html5j

第51回 HTML5とか勉強会 (2014/10/24 19:30〜) 第51回 HTML5とか勉強会 - connpass パフォーマンスに関するWeb標準についてとか、Web Animation APIとかは知らなかったのでちゃんと追わないと。。。 Chrome Dev Toolsの使い方とか、やらねばやらねばと思いつ…

テンプレートエンジンNight行った #tenight

テンプレートエンジンNight on Zusaar テンプレートエンジンNight on Zusaar Ustream.tv: ユーザー moznion: Template Engine Night, Recorded on 2014/10/17. コンピュータ 昨日行ってきたー。テンプレートエンジンいっぱいあるなーと思った(小並感) Reac…

IME確定前の入力内容をngModelで取得する

ngModelはIME入力確定後に入力内容が変数に反映される。確定前の「はてn」みたいな入力途中の内容は取得できない。 JavaScript - AngularJSでngModelをinputに付けたときに日本語入力がリアルタイムで反映されない問題 - Qiita 確定前の内容も反映したいと…

Atomの.atomの.gitignore

最近、VimからAtomに乗り換えようと自宅・会社で触ってる。 で、PackageとかSnippetとか結構追加したので、そろそろ設定をgithubで管理しようと~/.atomを覗いたのだが、どれをコミットすればよいかわからなかったので調べた。 Adding Atom to Your Dotfiles …

Angularのservice, factory, providerの使い分け #scripty01

SCRIPTY#1 〜フロントエンド紳士・淑女のための勉強会〜 (2014/09/16 19:00〜) SCRIPTY#1 〜フロントエンド紳士・淑女のための勉強会〜 - connpass 「Angular.jsとThree.jsを一緒に使った時の話」というタイトルでLTしました。 資料とかは後日会社のブログに…

yeomanのgenerator-webappのオプションからcompassが外れたのを今更調べた

Option for Sass without Compass · Issue #302 · yeoman/generator-webapp · GitHub Add option for Sass without Compass by kartikluke · Pull Request #315 · yeoman/generator-webapp · GitHub PRがmergeされたのが3月で今更だけど、気になってたので調…

Duo.jsちょっと使ってみた #duojs

Duo - A next-generation package manager for the front-end. ちょっと良さ気だったので調べてみた。 準備 # install duo $ npm install -g duo Github APIを使うらしく、duo用にAPI Tokenをここから生成し、 ~/.netrcに下記フォーマットで保存する。 # な…

Keynoteにソースコードを貼る

小ネタ。毎回調べてる気がするので書いておく。 Code highlighting for Keynote presentations # 1. brewでhighlightをインストール $ brew install highlight # 2. 貼り付けたいソースコードをクリップボードにコピーしhighlight実行 $ pbpaste| highlight …

東京Node学園 14限目行ったメモ

東京Node学園 14時限目 - connpass 申し込みの時にIsomorphic JavaScriptっていう言葉を初めて知った。辞書で調べると「同形の」って意味らしくて、Isomorphic JavaScriptなるページには"Isomorphic JavaScript apps are JavaScript applications that can r…

Speeding up AngularJS apps with simple optimizations

Speeding up AngularJS apps with simple optimizations ng-newsletterで流れてきて結構いい記事だったのでメモ。 基本的には、$$watchersを減らして、$digestの負荷を下げましょうとのこと。 One Time Binding Syntax {{ ::value }} 1.3.0からの機能。 {{ :…

buttonでファイルを開く

小ネタ。 <input type="file"/>はスタイルが扱いづらい。<button>クリック時に動的に生成してしまえばいいんじゃないか(というかdepth.meがそういう実装だった) <body> <button>Open File</button> <script> var button = document.querySelector('button'); // ボタンクリック button.addEventListener('click', func</body></button>…

うごイラTech Talks行ってきた #pixiv_engineering_talks

http://pixiv.doorkeeper.jp/events/13008 会社から近かったので余裕ぶっこいてたら15分ほど遅刻してしまい、最初の方のLT聞き逃したorz zip_playerの実装の話と、BEの構成の話と、なぜgifやmp4を選択肢なかったのかの話、node .jsでターミナル上で再生する…

BrowserSync

BrowserSync livereloadよりbrowser-syncの方がいいよと聞いたので使ってみた。 使い方 npmでインストール $ npm install -g browser-sync 手元のディレクトリにhtmlとcssがあり、html, cssが更新した時にhtmlをリロードしたい場合、 $ browser-sync start -…

Away3D勉強会に行ってきた

https://atnd.org/events/52483 銀座で勉強会初めてだなーと思いつつ地図の指す場所に向かったら会場がすごい派手な場所でわらった。 Three.jsしか使ったこと無いけど、「あーこれTypeScriptで書きたいなー」って思うことが多々あって、いちおthree.jsもd.ts…

#frontrend 行った

フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus)作者: 斉藤祐也,石本光司,加藤賢一,水野隼登,谷拓樹,泉水翔吾,原一成,平木聡,佐藤歩,杉本吉章出版社/メーカー: 技術評論社発売日: 20…

Socket.IO meetup行った

http://connpass.com/event/6911/ html5dayで告知された時に運良く申し込めたので行ってきた。 AudioデータをSocket.IOで送るっていうLTのデモが面白かったのでソースを読もうと思う。 https://docs.google.com/presentation/d/1Bt-G2Mrwr-guvAO75HbTcuPXmYZ…

Tokyo WebGL meetup行った #webgl_tokyo

http://tokyowebglmeetup.github.io/ 行ってきた。 半年間仕事でThree.js使ってたし、WebGL自体もすごく注目してたので楽しみに品川へ。 個人の意見だけどWebGLってとっつきにくいし(Three.js使えば楽だけど)、他のHTML5技術に比べるとサービスに活かしに…

Webアプリの正しいUIテストの方法が決定されなかった

今夜、Webアプリの正しいUIテストの方法が決定されますに行ってきた。 正しいUIテストの方法は決定されなかった(ディスカッション終わって帰ったからその後に決定したのかもしれないけど) 感想 Androidが端末毎に違うバグがあったり、IE時代よりテストが大…

今使いたい技術一覧

毎日コードを書くこと html5 japan cupを意識しすぎるがあまり、別に興味ない物を作ろうとしつつある。 自分はやっぱり使いたい技術ベースで考えた方がモチベーションが続く気がするので、使いたい技術のメモ。 この中から組み合わせながら適当に作って、調…

第47回HTML5とか勉強会 (データビジュアライゼーション) #html5j

金曜だけど、第47回HTML5とか勉強会 (データビジュアライゼーション)に行ってきた。ニフティーが駅から結構遠くてびびった。 以下、メモ(後半のメモがひどかった。。) データの可視化について @muddydixon 可視化の目的 情報を明確かつ効率的に伝え、そ…

テスタブルJavaScript読んだ

テスタブルJavaScript作者: Mark Ethan Trostler,牧野聡出版社/メーカー: オライリージャパン発売日: 2013/09/21メディア: 大型本この商品を含むブログ (2件) を見る 後半はペラペラと読んだ程度だが。前半はテストしやすいコードをどう書くか、なぜそう書か…

jsdoc.vimでデフォルトじゃないキーにマップする

heavenshell/vim-jsdoc · GitHub デフォルトだと<C-L>(Ctrl + l)にマップされているが、そのキーを既に<C-w><C-l>するのに使っていた。GithubのREADME.mdには書いてなかったから調べた。書いてたw NeoBundle "heavenshell/vim-jsdoc" ~ 略 ~ " <C-P>にマップ nmap <silent> <C-P> <Plug>(jsdoc) ftpl</plug></c-p></silent></c-p></c-l></c-w></c-l>…

Angular2.0のDI

Angular2.0について、Angular.jsのブログに出ていた。 ここ半年間くらいAngular.jsを使って不便に思っていたところが結構改善されるようで非常に嬉しい。 びっくりしたのが、ドキュメントがしっかりしてて、Angular2.0がどういうデザインになるかちゃんとま…

気持ちの整理メモ

※殴り書きのメモなので読んでも面白くは無いはず! 最近「どうなりたいか」とか「何がしたいのか」とか聞かれすぎて、自分でもよくわからなくなっていて、このままでいいんだっけ?とよく悩む。 毎回聞かれて毎回違うこと言ってる気がするので、気持ちを整理…

zsh起動時にtmuxを起動

.zshrcに下記を書く # 既にtmuxを起動してないか if [ "$TMUX" = "" ]; then tmux attach; # detachしてない場合 if [ $? ]; then tmux; fi fi

Angular.jsとTypeScript

Angular.jsでaltJSを使う場合、CoffeeScriptが一般的(たぶん)だが、TypeScriptはあんまり聞かない。TypeScriptの方が好きな自分としてはどうにかならんかねとずっと考えていて、こうやったらいいんじゃないかというのを思いついたのでメモ。 controller定…

grunt-useminでライセンス表記を残す

クライアントサイドJavaScriptのライセンス管理 | GREE Engineers' Blog これを見てgrunt-useminで難読化されたコードを見たらやっぱりライセンス表記まで削除されていた。。orz で、grunt-license-saverを使おうかなと思ったんだけど、ソース内に@license h…

grunt-useminって便利だな−

https://github.com/yeoman/grunt-usemin grunt-useminはgruntのtaskで、 <script src="js/app.js"></script> <script src="js/controllers/thing-controller.js"></script> <script src="js/models/thing-model.js"></script> <script src="js/views/thing-view.js"></script> …

yeoman webappで作ったプロジェクトにgumbyをたす

sass-bootstrapと同じような感じでいけるが、fontのコピーが必要なのでGruntfile.jsの修正が必要。 bowerでインストールする $ bower install gumby --save scssに@importする app/styles/直下にsassファイルを置いた場合(例:app/styles/main.scss) @impo…

親Scopeの値は参照できるけど代入はうまくいかないよ父さん

angularの$scopeの親子関係はたぶんprototype chainで作ってるだけだから親scopeの値に代入したつもりでも子scopeの値が新しく出来るだけでうまく動かない。— Hiroyuki Anai (@pirosikick) 2013, 11月 26 Scope.$newのところを読んだけどやっぱりそうだった…

LT童貞を捨ててきた #html5exp

HTML5 Experts Night #2でLTしてきました。 資料 WebGLとvideoを組み合わせるおもしろい from Hiroyuki Anai プレゼンで見せたデモ http://s3.pirosikick.com/html5exp-night-2/ex1.html http://s3.pirosikick.com/html5exp-night-2/ex2.html 感想 正直緊張…

JavaScriptのtemplateの管理

JavaScriptのTemplateライブラリ使うときに、type="text/x-template"のscriptタグの中に定義することがよくある。 body閉じタグの前にまとめて定義するんじゃなくて、どうせ表示されないんだし、展開予定の場所に書いておけばそれがなんのテンプレートなのか…

bowerで素のTwitter bootstrapをインストールする

課題 bower search bootstrapを実行するといっぱい出てくる。どれ使っていいかようわからん。 bower install bootstrapってやるとhttps://github.com/twitter/bootstrapがインストールされるが、これって自分でbuildしなきゃいけんの? 解決方法 困ったとき…

第39回 HTML5とか勉強会+日本Androidの会に行った。

第39回 HTML5とか勉強会+日本Androidの会 2013年5月定例会に行きました。東海大学高輪キャンパスで会社から近いぜと調子こいてたら道に迷い、最初のセッションを聞き逃した。。 取ったメモをまとめる セッション2「AndroidとChromeの統合について」 講演者 …

sass-twitter-bootstrapのCSSスプライト画像のパスを変える

yeomanのyo webappで生成されるひな形にsass-twitter-bootstrap(bowerではsass-bootstrapという名前なので、app/components/sass-bootstrapにインストールされる)が含まれている。 で、app/styles/main.scssにも @import 'sass-bootstrap/lib/bootstrap'; …

yeomanでcompass_twitter_bootstrapでエラーが出る

% mkdir hoge % cd hoge # 全部Yにする % yo angular Would you like to include Twitter Bootstrap? (Y/n) Y If so, would you like to use Twitter Bootstrap for Compass (as opposed to vanilla CSS)? (Y/n) Y Would you like to include angular-resour…

PHP5.4のClosure::bindToを使ってJavaScriptのクロージャもどき作った

php

PHP5.4からClosure::bindToとClosure::bindというのが追加されている。 これは何かというと、JavaScriptで言うところのFunction.prototype.callみたいな感じで、無名関数に対してオブジェクトを割り当てることができ、その無名関数をそのオブジェクトのメソ…

phpenvインストールして、php-5.4.5をインストール

php

参考 homebrewで下記をインストール $ brew install phpenv $ brew install php_build # phpenvでphpをインストールするときに必要 $ brew install wget re2c libmcrypt rbenv的なやつを.zshrcに書く。参考資料によるとrbenvの設定より後に書かないと行けな…

OS X 10.8.2 MySQL PHP PDOでエラーが出る

fuelのmigrateで下記エラーが出る $ oil refine migrate Error: PDO::__construct(): [2002] No such file or directory (trying to connect via unix:///var/mysql/mysql.sock) in /Users/hanai/work/hoge/fuel/core/classes/database/pdo/connection.php o…

Redmine Plugin migrationの作成

プラグインチュートリアル RedmineのPlugin作成時にController, Modelを作るときは下記コマンドで自動生成される # model生成 # ex)hogeモデル $ rails generate redmine_plugin_model plugin_name hoge column_name:column_type ... # cntroller生成 # ex)…

Redmineのapp/models/user.rbにメソッドを追加しようとしてハマった

このページの「Redmine の本体機能の拡張」>「新しいメソッドの追加」を参考にapp/models/user.rbにメソッド追加しようとしたら、Redmine起動時に下記エラーが出た。 $ RAILS_ENV=development be rails => Booting WEBrick => Rails 3.2.8 application start…

OS X Moutain Lionにredmineをインストール

redmineのプラグインの作り方を勉強するためにMBAにredmineを動かす環境を構築したときのメモ。 rbenv, bundlerインストール 自分の環境にはすでに入っていますが、これからインストールする人はこちらを参考にしてください。 いちいちbundle execって打つの…

mojito docsでエラーが出た(Mac OS X 10.8)

対処法 pythonのライブラリがなかったみたいなので、easy_installで追加したらOKだった。pythonよくわからんから各ライブラリの詳細はわからんです。 $ sudo easy_install simplejson cheetah pygments