とある角度から

お腹いっぱいたべられる幸せ

宣伝 - Webフロントエンドハイパフォーマンスチューニング

縁あって、こちらの書籍のレビューを担当させて頂きました。 gihyo.jp webサイトのパフォーマンスと言っても、一概にこれといった指標はなく、リソースのローディングから、ツリー構築、描画、スクリプト実行速度など、様々な要素が影響してきます。 この本…

仮想マシン上でSelenium IDEで作ったテストケース(ruby)を動かす

やりたいこと Selenium IDEでテストケースをポンポン貯めてって、Jenkinsで勝手にテストして、テストが通らなかった場合はチャットに流す仕組み。 ひとまずVM上でテストケースを動かすだけで、割とやることがあったのでメモメモ 環境 ホストOS OS X 10.11.6…

Seleniumまとめ

久しぶりにSeleniumを使ったら、色々進化していたので、 自分の中の情報アップデートのためにアウトプット Seleniumとは ブラウザ上での操作をスクリプトで記述し、実行できる テストコードはHTML もしくは以下の開発言語で記述可能 「Java」「C#」「Ruby」…

rubyを実行するgruntプラグイン作るまで(3) - テストの記述

rubyを実行するgruntプラグイン作るまで(2) - 非同期でのコマンド実行 - 1010realのブログ ver2の続きです。 以前作ったgrunt-cclogdeleteをもう少し汎用的にして、外部コマンドを非同期実行するgrunt-run-asyncを作成しました。 外部コマンドなら何でも良い…

rubyを実行するgruntプラグイン作るまで(2) - 非同期でのコマンド実行

rubyを実行するgruntプラグイン作るまで(1) - gruntpluginのテンプレートを実行の続きです。 実行するrbファイルを作成 cocos2d-jsを使う機会があって、ビルド時にcc.log();を全て削除したかったので、そんなrbを作りました。 grunt-cclogdelete/cclogdelete…

rubyを実行するgruntプラグイン作るまで(1) - gruntpluginのテンプレートを実行

rubyのプログラムをgruntタスクの合間に挟みたかったので、gruntプラグインを自作することにしました。 物はこちら(※テストも書いてないし、npmに登録もしていないオレオレプラグイン汗) github.com gruntプラグイン用のテンプレートを持ってくる まずはgr…

backbone.jsでtodoアプリを少しずつ作る(2)

まえおき 前回作ったbackbone.jsのtodoサンプルをより洗練した形に作り変えていきます。「backbonejsを使ってアプリを作る」から「作りたいアプリのために、backbonejsを使いこなす」ようになるのが最終目標。。。 AppViewのシングルトン化 今回の設計では、…

backbone.jsでtodoアプリを少しずつ作る(1)

まえおき backbone.jsのtodoサンプルなんて、いまどきどこにでも転がっています。 でも、そのサンプルを参考に作ってみたけど、いまいち理解が深まらない。。。という「自分」のために一歩ずつ理解を深めながら、もう一度todoサンプルを作っていこうと思いま…

RequireJSでモジュール管理してみるサンプル(2)

前回の記事で 「RequireJSには、最適化ツール(r.js)を用いて、各モジュールをminifyし結合することができます」 といったので、それについてさくっと書きます。 セットアップ ~ 最適化の実行 前回のサンプルの構成をそのまま最適化していきます。1.まず、…

RequireJSでモジュール管理してみるサンプル

RequireJSとは Javascriptモジュールローダの1つです。 モジュールの依存管理だけではなく、パフォーマンス面も考慮されたライブラリで、 開発効率とパフォーマンスを両立したJavascript開発を実現できるかも。。。 具体的な特徴 特徴、というか全部メリッ…

公式サンプルから学ぶAngularJS (2)

ということで、前回の記事の続きで、AngularJS公式サイトのサンプル3つ目を作っていきます。の前に、今回のサンプルはFirebaseというサービスを利用しているので、事前に登録を済ませておく必要があります。 さくっとできるのでぜひ試してみてください→以前…

リアルタイムのバックエンドサービスFirebaseに感動

Firebaseが「何これやべぇ」ってお話。 対話的リアルタイムアプリケーションのためのバックエンドサービスなんですが、 とりあえず、アカウント登録して、サンプルを動かすだけで、そのリアルタイム感に感動できます。Firebase - Build Realtime Apps アカウ…

JSFiddleでAngularJSを使う

前回の記事でのAngularJSのサンプルはJSFiddle内で動作確認してみたのですが、AngularJSをJSFiddle内で使うのに、ちょっとだけテクニックが必要だったのでまとめてみました。1. まず、AngularJSを使いたいfiddleのFrameworks & Extensions設定を以下の設定に…

公式サンプルから学ぶAngularJS (1)

大層なタイトルをつけちゃいましたが、やってることは以下。AngularJSの公式サイト(以下)のトップに乗っているサンプルを作りながら、AngularJSのチュートリアル的なことをしてみる。 英語:AngularJS — Superheroic JavaScript MVW Framework 日本語訳:Ang…

jQuery.Deferredをちゃんと理解する

ちゃんと理解するために、ちゃんと説明してみた。 jQuery.Deferredは、タスクを管理する仕組み jQuery.Deferredでできることは、以下のような事です。 お仕事の約束をする お仕事が終わったら結果を受け取る 受け取った結果を元に次の作業をする これって、…

webフォントの使い方といくつかTips

webフォント関連について纏めてみました。 webフォントの設定方法 webフォントはcssで単に適用することができます。 @font-faceでフォント名と対象フォントファイルへのパスを指定し、font-familyに指定するだけです。 以下、ソースです。 body { font-famil…

javascriptでデバイスの向きと加速度を取得

javascriptでデバイスの向きとか加速度を取得してみた。DeviceOrientation Event Specification 上記ドラフトによると デバイスの向きは、deviceorientationイベントで取得 西向き、画面は上で水平な平面にデバイスを置いた場合の値は、{alpha: 90, beta: 0,…

クロージャとスコープチェーン

クロージャをなるべく簡潔にまとめてみます。 まず、クロージャを正しく理解するためには以下の理解が不可欠なので、その説明をします。 javascriptのスコープ スコープチェーン スコープは関数実行時ではなく、関数定義時に決定 javascriptのスコープ そも…