はてなブックマーク

最近Marionette.jsを使っているのでその話を社内勉強会でやった資料です。 https://speakerdeck.com/koba04/marionette-dot-js-in-single-page-application SinglePageAppをBackbone.jsでつくろうとするとどうしてもView周りで独自実装をせざるを得なくて、でもオレオレフレームワークは作りたくないなぁと思ってたところ、Marionette.jsがいい感じにやってくれたのでその辺りについて書いています。 蛇足(Marionette.jsとAngular.js) Marionette.js 前のプロジェクトではAngular.jsを使っていて今回Backbone系なMarionette.jsを使ってみての感想としては、Marionette.jsはView周りも含め構造化して書くことが出来てメモリ管

Galaxy S4のWebviewで、非同期処理の中でのCanvasの描画がバグってる というエントリを書いて放置していたところいくつか解決方法を書いてくださった方がいて、それらを参考に再び戦ってみました。 その1. Create.JSの場合 http://blog.happyelements.co.jp/2013/08/love-peace-and-android.html Stageをクリアすればいいらしいということでそこのコードでやっていた処理をそのまま持ってきて見ましたがうまくいきませんでした...。 https://github.com/CreateJS/EaselJS/blob/master/src/easeljs/display/Stage.js // 擬似コード var canvas = document.getElementById("canvas"); var ctx

テストを書く目的 自分の書いたコードが意図した通りに動いてるか確認するために書くのですが、自分が楽をするためと他の人のために書いてます。 自分が楽するため Webアプリの場合、実装した機能がちゃんと動作するかを確認するために何度もブラウザポチポチしてというのは時間がかかります。なのでその回数をなるべく減らすためにテストとして書けるところはなるべくテストで確認して、ブラウザポチポチする回数を必要最低限にしたいと思っています。 ブラウザポチポチするのも立派なテストだと思っています。再現性のない。 他の人のため テストがないと他の人がその機能に関連する機能を変更しようとした時に変更の影響がないのか確認することが出来ず、その機能に対するテストを手動で行わせてしまうことになってしまいます。 テスト書く時間がない問題 テストの話をすると書く時間がないと言われたりしますが、既存の開発の流れにテスト書くこ

Angular.jsの1.2.0がリリースされましたね！ stableのバージョンも1.0.8から一気に1.2.0になってかなり大きなアップデートという感じです。 1.2.0や今後についてはこのビデオを見るといいかもしれません。（1時間ちょっとあるので長いですが...） 1.2.0 例えばngRepeatにはいくつか機能拡張されていて、要素を超えて繰り返し出来るようになったりしています。 <div ng-repeat-start="element in list">{{element}}</div> <div>{{element}}</div> <div ng-repeat-end>{{element}} 他にも$http、$resource周りの拡張や、"Controller as xxx"でcontrollerのインスタンスをtemplateから参照できたり、ng-ifでのtempla

フロントエンドの開発で試してみたかったことをやってみた話の資料です。 (@社内勉強会) デモしながらだったので資料だけだと伝わりにくいかもしれませんがドヤ顔でLiveReloadのデモしたりしました。 頑張って環境整えるとコード書くだけでブラウザが再読み込みされてテストも実行されてとかなり便利になりますね。 https://speakerdeck.com/koba04/bu-rukamosirenaihurontoendokai-fa-huan-jing ざっくりとこんなことが書いてあります LiveReload connect + proxy + easymock testem mocha + expect + sinon assemble、foreman.... もっといい方法とかあれば教えてもらえると嬉しいです 実際のサンプルは下記のrepositoryに入ってます https://

YAPC::ASIA 2013で「個人で出来るWebサービスの作り方」というタイトルでTalkをさせて頂きました。 http://yapcasia.org/2013/talk/show/5f3d4e94-c7ac-11e2-be2e-7ec06aeab6a4 スライド https://speakerdeck.com/koba04/ge-ren-dechu-lai-ruwebsabisufalsezuo-rifang-yapc-asia-2013 トーク概要に書いたものを全部含めたらかなり駆け足な感じになってしまい伝わったか不安ですが、PerlでのWebアプリケーションの作り方の話は他の方がされていたので、それ以外のミドルウェアやフロントエンドなどはどうすればいいのかといった話をさせてもらいました。 個人的にはこのTalkをするために、Carton化やRedis試したり、Vagrant +

追記(2014-01-10): 解決方法書きました！http://d.hatena.ne.jp/koba04/20140110/1389344763 ネイティブの中で使うWebViewの話で、標準ブラウザとChromeでは発生しない現象です Android 4.2なGalaxy S4のWebViewの中でCanvasの表示が豪快に壊れている現象に遭遇したのでメモ。 アップデートしたGalaxyNexusでは発生しなくて、他に4.2が最初からインストールされた端末がなかったので、4.2の問題なのかGalaxy S4固有の問題なのかは不明です。 状態 fillRectやdrawImageをした時に、0,0の位置にある1ピクセルでCanvas全体が描画されるような状態になる。 発生する条件 非同期処理のコールバックの中 img.onloadの中 画像がキャッシュされていたりして即実行されるときは

http://nmi.jp/archives/488 を見ていて、 「+val」で数値として評価するコードはライブラリの中でも時々見るので、自分でコード書くときも+valでやりたいなと思い、parseInt(Float)やNumerとの挙動の違いを少し調べてみたのでメモ。 環境はChromeのDeveloper Consoleでやっています。 値 +val ParseInt(val, 10) ParseFloat(val, 10) Number(val) 10 10 10 10 10 "10" 10 10 10 10 -10 -10 -10 -10 -10 "-10" -10 -10 -10 -10 0 0 0 0 0 "0" 0 0 0 0 "" 0 NaN NaN 0 "hoge" NaN NaN NaN NaN "10a" NaN 10 10 NaN "10.0" 10 10 10

何？ IRCでgrunt watchのログが見れたり、watchの開始、再起動、終了が出来るものをさくっと作ってみました。 使い方 node grunt-watch-irc.jsを実行すると指定したチャンネル(default: #grunt)にbot（default: hostname-grunt)がjoinします joinしたbotにprivate messageで !run と発言するとgrunt watchが起動します うまく動いてなくて再起動したい時は、 !restart と発言します 終了する時は !exit と発言します いつ使うのか 普通はターミナルでgrunt watchしてそのまま標準出力を見ることが多いと思うので使わないと思います。 ですが、サーバー上でgruntが動いている環境があって黒い画面苦手な人がFTPでファイルアップして使うような場合に、IRCでログが見れてう

Try::LiteとException::Tinyで例外処理をやろうと導入していたのですが、どうやらネストさせてTry::Liteを使った場合に外側でうまく例外をキャッチ出来ないという現象が発生して悩んでました。 Try::Liteで外側で例外を取得出来なかった例 こんなコードです。 自分が使っているPerlのバージョンは5.14より古いものでしたので、ここにある通り外側で例外がキャッチできない状態でした。 die $@でも、$@->rethrowでもException::Tiny->throwでもダメでした。 Twitterで解決 その時には5.14以上で動くことは知らなくて悩んでいたところ、@hide_o_55さんが と教えてくださり、試したところ確かにgistにある通り意図した通りに動きました。。 5.14からeval内の$@の挙動が変わった！？ というわけで5.14のどの変更が影響

PerlCasual#5で「元タワレコ店員×Perl×Webサービス」というタイトルでトークさせて頂きました。 http://atnd.org/events/37158 話したこと 主に個人でWebサービスを作るときに考えたことと、実際に作ってみた話しと、Perlとの関わりについて話しをさせて頂きました。 これまでに考えたことを色々詰め込んだので駆け足な感じの説明になってしまったのですが、Webサービス作るのは意外と簡単に作れて楽しいってことと、アウトプットするとさらに楽しくなるよということが伝わればいいなと思い話をしました。 技術的な部分も一応混ぜてみたつもりなのですが、もっと役に立つ感じの内容にすればよかったかなぁと後で思ったりも。 どうやらスピリチュアル属性らしくてそんな話も期待されているのかなと思い、後半はPerlと出会ってどう変わったのかといった話もさせて頂きました。 あと、Pe

JavaScript版を書いてみたので調子に乗ってPerl版も書いてみます。 4月からPerl始める人もいるかもしれないですし。(こじつけ) JavaScript版 http://d.hatena.ne.jp/koba04/20130311/1362931533 初めてのPerl 第6版 自分が読んだのは第5版でその時点でも5.10に対応しており、given-whenやスマートマッチなどについてもしっかり載っていたのですが、この第6版ではさらに5.14に対応していて、モダンな書き方になっていたりPath::Classなど新しいモジュールや付録としてUnicode入門があったりと、古さを感じない内容になっていてその点も素晴らしいなと思います。 この変数や関数、正規表現、文字列操作、ファイル操作などからシグナルの処理、便利なモジュールの紹介までPerlの基本的な部分がしっかりと紹介されていて、

今でもなんとなくJavaScript使っている感はあるのですが、勉強をしていく中でポイントになった3冊を紹介。 他の言語の経験があるけどJavaScriptに慣れていない人が読むといい本だと思います。 JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス jQuery使ってDOM操作を出来るようになってきたけど、100行以上のJavaScriptのコード書いたりするときにこれでいいのかと悩んでいたときに手にとった一冊です。１つ１つのトピックが短いのでとても読みやすいです。 JavaScriptの言語仕様のここが悪いのでこう書くべきということが書かれていて、どうJavaScriptを書いていいのかわからなかった自分にとってはJavaScriptを書く上での指針となっています。 本の薄さからわかるようにたくさん書いてあるわけではないのですが、オブジェク

grunt.jsの環境も作った( http://d.hatena.ne.jp/koba04/20130203/1359898395 ) ので、JSHintを使ってコーディングスタイルのチェックをしたいと思い、JSHintの設定項目を調べてみました。 JSHintのドキュメント http://www.jshint.com/docs/ 設定項目についてのメモ https://gist.github.com/4707606 何か間違いなどあれば指摘して頂けると嬉しいです。 それを踏まえた今の設定 https://github.com/koba04/dotfiles/blob/master/.jshintrc 比較的色々入れてみたので、そのうち減らすかもですが。

JavaScriptでオブジェクトを連想配列のように扱い、全部のキーと値に対して何かをしたい場合、for in を使いつつ、hasOwnProperty でそのオブジェクトが持っているかどうかチェックするために以下のようなコードを書くことが多いのかなと思います。 Object.prototype.parent = "Parent!"; var obj = { name: "koba04", from: "kyoto" }; for (var key in obj ) { if ( obj.hasOwnProperty(key) ) { console.log(key + ":" + obj[key]); } } // name:koba04 // from:kyoto http://d.hatena.ne.jp/koba04/20110918/1316357080 上のエントリでは混乱しそ

Backbone.jsなどを使っていてjsのファイルが増えてくると、公開するときには1つのファイルにまとめたいなぁとか、コーディングスタイルのチェックもしたいなぁと思っていて、そこで何かいいのないかなと思って調べてみると、「grunt.js」がよさそうだったので今更ながら試してみました。 grunt.jsのバージョンは0.4.0です grunt.jsはバージョンによってインターフェイスが違ったりするので注意。 今回は、JSに対してJSHintをやって結合して圧縮することと、Compassのコンパイルをgrunt.jsにやってもらうことにしました。 （他にもテストや自分で作ったタスクを登録できたりもするのですが今回は省略） インストール https://github.com/gruntjs/grunt/wiki/Getting-started ドキュメントにも書いてあるのですが、0.4.0か

これまでtopic branchをmergeするときはrebaseしてfast-forwardな状態でmergeするか、merge --squashして何かあった時にすぐに戻せるようにと考えていたのですが、そもそもmergeを簡単にrevert出来れば問題ないしどうやるのかなぁと思って調べたところ、revert -mオプションで出来るんですね。 http://qiita.com/items/41b724a1c3569044372c (mergeした記録を残す必要がないときはfast-forwardなmergeでもいいと思いますがその辺りの議論は http://togetter.com/li/407277 を) mergeコミットを取り消したい場合 % git revert -m 1 mergeコミットのSHA1という感じでやれば出来るのですが-mの後の数値ってなんだということで色々試してみ

最近、〜歳からプログラマーになってとかキャリア論とかの話を見たりするのですが、 みんなすごい人ばっかりだなぁ思ったので何にもスゴくないド素人がエンジニアになったときに何を考えたのかを書いてみました。 http://koba04.com/slide/become_a_programmer/ 正月でこれまでを少し振り返ってみたのとreveal.jsを試してみたかったのが書いた大きな理由ですが、書いてみるとやっぱりたいしたことしてないのでたいした内容にならないですね。 今年も頑張るぞー

以前に書いたYouTubeをJavaScriptから連続再生させる方法について書いた記事が今でも時々見られているようだし、PetaTube作るときに調べたこともあるので改めて書いてみます。 前回のはこちら http://d.hatena.ne.jp/koba04/20110227/1298736386 iframeAPIでiPhone対応 https://developers.google.com/youtube/iframe_api_reference いつのまにかiframeAPIというのが登場していて、これを使うと環境に応じてFlash版とHTML5版を出し分けてくれるので、今までのAPIだと表示されなかったiPhoneやiPadでも表示出来るようになります。素晴らしい！ 埋め込み方法 方法は簡単でサンプルにある通りこんな感じで簡単です。 <div id="video"></div>

ページ内リンクが2回目以降反応しない件 現象 Android2.2( or 2.3)のブラウザだとページ内リンクがうまく動かないということがあって、調べてみるとどうやら一回押したページ内リンクをもう一回押しても反応しないということが。 おそらく、現在のURLが「/hoge/foo#header」だったとして、「/hoge/foo#footer」は反応するけど「/hoge/foo#header」は今いる場所がどこであろうがURL(ハッシュフラグメント)も同じだし反応しないという挙動になっているようです。 それについてのisssue http://code.google.com/p/android/issues/detail?id=15437 対応方法 これだと困ることがあってどうしようなかと思った時、まず思いついたのがwindow.scrollToでその要素の位置に移動するものでした。 ただ

PetaTubeをリリースしてみて感じたことや考えていたことを自分のためにメモしておきます。 http://d.hatena.ne.jp/koba04/20121002/1349103920 長いので先に結論だけ書いてしまうと、多くの人に使ってもらうサービスを作るためにはyusukebeさんによるYAPC::ASIA2012のベストトーク「「新しい」を生み出すためのWebアプリ開発とその周辺」で語られているようなことをしっかりやっておかないとダメだなと思いました。 「新しい」を生み出すためのWebアプリ開発とその周辺 from Yusuke Wada 書籍も楽しみです！ 考える アイデア アイデアはいつも考えています。 自分は音楽が好きでいい音楽に出会うと人に勧めたくなるので、そういった思考がサービスを考える際にも大きく影響しています。 基本的には「自分が欲しいサービス」という点で考えてい

以前にCountDown LastFM Rankingというサービスをリリースしましたが、 また似たような「PetaTube」というサービスをリリースしました。 http://petatube.koba04.com (CountDown LastFM Rankingというサービスをリリースしました。 - 車輪を再発明 / koba04の日記) どんなサービス？ NAVERまとめとか2chなどのひたすら動画を貼るスレみたいなページを見たときに、ここにある動画を流しっぱなしにしたいと思ったことはありませんか？ それをやるサービスです。 出来ることはものすごく単純で、URLを指定するとウェブサイトの中にある埋め込み動画やリンクなどのYouTube動画を抽出して連続再生するというサービスです。 NAVERまとめの場合ページングにも対応しています。（後述） 世の中にはNAVERまとめなどによさげな動

去年、一昨年と１日目しか参加出来なかったのですが、今年ははじめて２日間とも参加できて、（勝手に）後夜祭まで参加できてとても満足でした。 ブログを書かないとYAPCは終わらないらしいので書いてみます。 各セッションの内容は資料や動画が後ほどアップされると思うので、どのセッション見てたのかを簡単に。 1日目 Web::Security beyond HTML5 / Yosuke HASEGAWA ちょっと遅れていったらラリーのセッションがいっぱいで入ることが出来なかったのでこれが最初のセッションだったのですが、JavaScriptを書くこともあるのでとても勉強になりました。とくにXHR2周りは知らないことが多くて参考になりました。 リアルタイム通知システムの舞台裏 / しんぺい@猫型技研 push notificationをどう実装するかという話で、どういうアーキテクチャにすればいいかや「Ra

なにそれ 結婚式でみんなで乾杯を生演奏で歌いたくなる状況ってよくあると思うのですが、その時に写真をスライドショーにして、そこに歌詞を表示出来たら素敵だなぁと思って作って使ってみた話です。 ムービーを作って流せばよさそうですが、生演奏なのでタイミングをあわせる必要があるのでうまくいきません。 なのでスライドショーを作ってパソコンを操作すればいいのですが一緒に歌いたい！ Keynoteなど使えばスマートフォンからリモートで操作できるのですが、以前node.jsとsocket.ioを使って同じようにリモートで操作出来るスライドを人のを真似して作ったことがあったので、今回はそれをベースに勉強がてらイチから書いてみました。 （たいしたコードではないですが...） https://github.com/koba04/node-Karaoke-Slide 構成 node.js、socket.io、exp

JavaScriptで毎回forループ書くのは面倒だし、そのためだけにライブラリ使うのもなぁという状態の時についこんなこんな感じの実装をしたりしてしまいます。 でこれだとbreakが出来ないので他のライブラリではどうやっているのかなぁと思ってみたので調べてみました。 ECMAScript5のforEach 下記のような実装になっているためbreakは出来ないです https://developer.mozilla.org/ja/JavaScript/Reference/Global_Objects/Array/forEach someでそのようなことは実装出来るのでそちらを使えということなのかな https://developer.mozilla.org/ja/JavaScript/Reference/Global_Objects/Array/some jQueryのeach ソースを見て

ある要素に無名関数でイベントが設定されているけど、そのイベントを発生させたくない！でも要素は消したくない！ということがあったのでJavaScriptのイベントについて少し調べてみました。 具体的には、ある要素がtouchmoveの中でpreventDefault()しているためその要素の上だとタッチスクロールが出来なくて不便なのでどうにかしたいという状況でした。 preventDefault() preventDefault()はその要素に設定されているブラウザの規定のアクションを中止する関数です。 タッチスクロールも規定のアクションに含まれます。 https://developer.mozilla.org/ja/DOM/event.preventDefault イベントのキャプチャリングとバブリング DOMのイベントには、キャプチャリングフェーズとバブリングフェーズという二つのフェーズが