TeraBytesMemo

プログラミング関連で自分のメモをまとめて書いたり気が向いたら書いたり

存在していないDOM要素を検知する方法

EventListenerのAPIやMutationObserverについて調べても、

存在しないDOMについての監視する方法がなかったので、自分で書いてみました。

動的にDOMを生成するときに、便利でしょう。

実際、動的にDOMを生成する必要のあるケースがあって、そのDOMの生成の完了を監視する必要がありましたので。

以下にjsfiddleのURLを記載します。

Edit fiddle - JSFiddle

ここでは、特定クラスを監視するコードとなります。

正確には、fooの生成を監視するコードとなっていますが、存在していないfooクラスにも対応できています。

もし、fooクラスが生成が1つで十分でしたら、

fooクラス発見時に、MutationObserverを停止したりすればよいです。

実際のコード

一応実際のコードも貼り付けておきます。

var observeTo = "foo";

var documentObserver = function() {
    var option = { childList: true, subtree: true };

    var observer = new MutationObserver(findClassListener);
    observer.observe(document.body, option);

    return observer;
};

var findClassListener = function(mutation) {

    mutation.forEach(function(m) {
        var nodes = m.addedNodes;
        for(i=0; i<nodes.length; i++) {
            if (nodes[i].classList.contains("foo")) {
                console.log("A " + observeTo + " class DOM is generated !");
            }
        }
    });
};

documentObserver();
var rendered = document.createElement("div");
rendered.className += ' ' + "foo";
document.body.appendChild(rendered);

emacsでポモドーロテクニックを使って作業の記録を怠らないようにする

前回のブログの記事より2週間の空き、それ以外でもfacebookでまともに勉強会などの活動を報告せず・・・

自分のアウトプット能力の乏しさを感じたためアウトプットするための記録を取るようにすることとした

そのためにポモドーロテクニックを実践することにしました。

ポモドーロテクニックって何?って言う人はぐぐってください。すぐに解説が出ると思います。

今回、ポモドーロテクニックにおける休憩時間を利用して、作業の記録をすることで、アウトプットの材料を貯蓄することにしました。

自分はemacsを使っているため、今回はemacsポモドーロテクニックを行う方法の紹介となります。

pomodoro.elを使って、emacsでもポモドーロテクニック

emacsポモドーロテクニックを実践するためのプラグインとして、pomodoro.elというものがあります。

参考記事:

syohex.hatenablog.com

上記の記事で紹介されるパッケージ以外にも3つ、ポモドーロテクニックを導入できるパッケージが存在します。

(他3つも上記の参考記事で紹介されています)

複数ある中で、私は参考記事のpomodoro.elが一番気に入っています。

理由は、作業終了・休憩終了・長期休憩開始時にhookが割り当てられていることです。

というわけで、作業の記録をできるように自分好みにカスタマイズしました

pomodoro.elのカスタマイズ

というわけで、私も参考記事を見ながらカスタマイズしました

私は以下のことができるようにカスタマイズしました

  • 作業終了後にtrelloを開いて、タスク完了・追加などを行う
  • 長期休憩中にはてなブログで気になったことに関することを記事(草稿)にする
    • 作業中に気になったことやわからなかったことを、記事にしたいことがあるため
  • 各作業ごとの区切りをポップアップ通知で表示


以下が実際のソースコードです(参考記事ベースなので、結構パクっています)

;; ubuntuによる通知用の関数
(defun* my/pomodoro-notification (&key (title "Pomodoro")
				       body
				       (urgency "critical"))
  (shell-command
   (concat "notify-send -u " urgency " \"" title "\" \"" body "\"")))
;; 作業終了後の hook
(add-hook 'pomodoro:finish-work-hook
          (lambda ()
            (my/pomodoro-notification :body "Work is Finish")
            ;; trelloを開く
            (browse-url "https://trello.com/")))

;; 休憩終了後の hook
(add-hook 'pomodoro:finish-rest-hook
          (lambda ()
            (my/pomodoro-notification :body "Break time is finished")))

;; 長期休憩後の hook
(add-hook 'pomodoro:long-rest-hook
          (lambda ()
            (my/pomodoro-notification :body "Long Break time now")
            ;; はてなブログで、自分のブログの記事編集画面を開く
            (browse-url "http://terabytesmemo.hatenablog.jp/#edit")))

人によっては、evernoteやorg-modeを開いて、そこで作業の記録をするっていう人もいると思います。

その場合は、emacsでgeeknoteなんかを動かすことができるみたいなので、そういったプラグインを利用してもいいと思います。

javascriptのベンチマークテストができるjsperfを使ってみた

javascriptのコードのベンチマークが比較できるjsprefを使ってみました

参考
jsPerf, JSPerfView を使った、JavaScript コードのベンチマーク計測とブログなどで計測結果を利用する方法 : document

jsprefについて

簡単に説明すれば

  • javascriptのコードのベンチマークが比較できる(2個以上可)
  • ベンチマークテストの内容を公開・共有できる
  • HTMLのコードも使える(DOMの挙動を使ったテストに便利だとか)
  • 特に登録が必要でもなく、すぐに使える

といったところでしょうか。

開いてみればわかりますが、各入力項目に解説がついているので、早速、試しに使うということができます。

ただし、しっかりしたドキュメントが無く、他の説明がFAQだけでしたので、一部わかりにくいことが難点でした。

使ってみた

現在、自分はニコニコ動画Chrome Extensionの開発中です。

そこで、動画の検索方法を考える必要がありました。

具体的には、検索するリソースに対して、例えば、タイトルやタグなどに、入力したキーワードが含まれているかを探す方法を考えていました。

そこで作ったベンチマークテストがこちら

searchTitleandTags · jsPerf

このベンチマークテストで何をやっているかと言うと

  • (上)ダミーのタイトルと各タグからキーワードが含まれているかを逐一確認するか
  • (下)それらのリソースを連結した一つの文字列からキーワードを探すか

どちらが速いかを確認するベンチマークテストとなります。

今回のケースでは、上のベンチマークテストの方が(自分の環境では)早かったですが、

実際にできたアプリの動作や環境次第で、想定どおりの速度が出る保証はありませんね


jsprefでは、ベンチマークテストの共有や公開が簡単にできるので、他の環境で試したり、他の人に見せて評価してもらうこともできますね。

気軽に公開してコードレビューしてもらえるRefactor.ioを使ってみた

気軽に公開してコードレビューをしてもらえるという、Refactor.ioを使ってみました

www.refactor.io

レビューしてもらいたいコードの投稿

開けばわかると思いますが、早速コード入力画面が現れます

これで、コードレビューされたくなったらさっとしてもらえますね

投稿が完了したら、共有用のURLが現れたり、twitterfacebookへの共有用のアイコンが現れます

これで、コードレビューしてもらうための拡散をするといった感じでしょうか

対応言語は以下となっています。ある程度は対応していますけど、CoffiescriptやSASSがある中でどうしてJadeがないんですかね・・・

コードをレビューする方法

また、Refactor.ioの右上に「Explore」という項目があるので、そこでRefactor.ioに投稿されたコードの一覧が出ます

ここからコードのレビューができるといった感じですね

ちなみに私も投稿してみました。jadeで書いたので項目がないのですが、無理やりhtmlを選択して投稿しました(笑)

これって大丈夫なんですかね?

jadeで書いたテンプレート用のlayout.jadeを書いたのでよろしければ見ていってレビューしてください

https://www.refactor.io/q/40b3466c90

クリスマスだけどgulpを初めて使ったのでgulpfile.jsを載せてみた

ブログ開始しました

みなさんメリークリスマス。ブログ開始しました。ここでは技術的なことに関するフィードバックを期待しながら記事を書きます。基本的には書き溜めたメモのアウトプットをします。Qiitaの方でもアカウントがあり、記事も投稿していますが、こちらでは技術的な知識の提供よりかは、日記のような感じになったり、技術的な疑問点などを書くことになると思います。

ここ間違っているよとか、ここはこうした方がいいよとかあれば、是非コメントしてください。

gulpfile.jsを書いてみた

gulpを初めて触ったので、gulpfile.jsを載せてみます。

今回は、シングルページの作成を、jade、scssで書いてみただけなので、小規模にしました。

使ったもの

  • gulp-jade
  • gulp-sass
  • gulp-plumber
  • browser-sync
  • gulp-uglify

一応説明。

gulp-jadeとgulp-sassはそれぞれ、.jadeと.scssのコンパイル

gulp-plumberはエラーによるgulpの終了を防ぎます。watchとかbrowser-syncとか使っているときは必須ではないですかね。

browser-syncは、ローカルサーバーを建てて、プロジェクト内のファイルを内部に公開。複数端末でテストするときに便利でした。

gulp-uglifyは、javascriptの圧縮に。ただ書いたコードが少ないので、今回は必要性は薄いかも

ソースコード

'use strict';
var gulp = require("gulp"),
    uglify = require('gulp-uglify'),
    plumber = require('gulp-plumber'),
    jade = require('gulp-jade'),
    sass = require('gulp-sass'),
    browserSync = require('browser-sync');

gulp.task("default", function() {
    browserSync({
        notify: false,
        port: 3000,
        server: {
            baseDir: ["./public/"]
        }
    });
    gulp.watch(["./src/scss/*.scss"],["scss"]);
    gulp.watch(["./src/*.jade", "./src/includes/*.jade"],["jade"]);
    gulp.watch(["./src/js/*.js"], ["scripts"]);
});

gulp.task("scss", function () {
    gulp.src(["./src/scss/*.scss"])
        .pipe(plumber())
        .pipe(sass())
        .pipe(gulp.dest("./public/css/"));
});

gulp.task("jade", function () {
    gulp.src(["./src/index.jade"])
        .pipe(plumber())
        .pipe(jade())
        .pipe(gulp.dest("./public/"));
});

gulp.task("scripts", function () {
    gulp.src(["./src/js/*.js"])
        .pipe(plumber())
        .pipe(uglify())
        .pipe(gulp.dest("./public/js/"));
});

gruntを使ったことがあってので、gruntと似ていた点がある分書きやすかったです。

cssとかも、gulp-cssminで圧縮できるみたいですが、cssの方もあんまり書いていないので使いませんでした。

後は使用したモジュールも結合して圧縮するほうが良かったかもしれませんかね。モジュールの結合にはwebpackという便利なものがあるみたいですが。

小規模な開発におけるgulpfile.jsですが、これ使ったほうがいいとかありませんかね?