こんにちは、@yoheiMuneです。 7月になってやっとブログを書く余裕が出てきた(´∀｀∩)〜〜。 今日は、Chromeでも最近使えるようになったWeb Speech APIについて入門記事を書きたいと思います。 Special Thanks to https://flic.kr/p/7fADmS 目次 Web Speech APIとは Web Speech APIはW3Cコミュニティグループによって策定されている仕様で、Web Speech API Specificationに仕様が掲載されています。この仕様書はリンク先にも記載の通り「It is not a W3C Standard nor is it on the W3C Standards Track（このドキュメントはW3C標準でもなければW3Cの標準トラックに則ったものでもない）」とW3C標準ではありません。しかしWebki

こんにちは、@yoheiMuneです。 今日はライトなネタですが、Gulpで文字列置換を行う方法をブログに残したいと思います。 目次 Gulpとは Gulpとは、grunt.jsと同様にフロントエンドのビルドツールです。JavaScriptでタスクを定義することができ、JSの結合や圧縮、CSSのプリプロセッサ/ポストプロセッサの実行など様々なことを行うことができます。具体的には、[フロントエンド] nodeモジュール管理がフロントで使えるBrowserifyに入門に書きましたのでそちらもご覧いただけたら幸いです。 Gulpで文字列の置換を行う場合には、gulp-replaceモジュールを用いることで簡単に実現することができます。具体的には以下のように利用します。 まずはモジュールをインストールします。 $ npm install --save-dev gulp-replace 次に、gul

こんにちは、@yoheiMuneです。 今日はjQuery Advent Calendar 2014の15日目の記事として書きたいと思います。 何を書こうかなーと思っていたのですが、最近の自分とjQueryについてライトに書いてみたいと思います。 Special Thanks to https://flic.kr/p/92J4Qt 目次 利用者としての付き合い方 最近の案件ではjQueryラブの時代は過ぎ去ったようで、案件によってjQueryが使われたり使われなかったりします。 今の案件ではjQueryが導入されていますが、担当者がコロコロと入れ替わったらしく、様々なjQueryの使い方が散乱しています。 ほぉほぉこんな書き方もできるのかと学ぶことが多くて、ある意味有意義ですw。 jQueryを使う理由 最近感じるjQueryを使うメリットは、以下のようなことがあります。 何かサクッと作る

このような表を作ることで、例えば以下のことがわかります。 経路002は流入数の割に獲得効率や翌日継続率も悪い。ここを改善するサービスをグロスできるかも。 経路003は獲得効率と翌日定着率が良い。何が良いのかをさらに分析すれば、他の流入経路の改善に生かせる。 Action2は翌日継続率に良い結果を与えている可能性がある。もう少し詳しく調べてみたい。 このようにユーザーの活性化は流入経路別に分析をすることで、問題点やチャンスを浮き彫りにすることができます。 今回はこの表を作るためにログ分析を行います。 ここまでで分析のスタート地点とゴール地点がわかりました。 あとはその間の道をつなぐためにプログラムを書くだけです。 次の章では、MongoDBでの分析を行うための準備段階を紹介します。 分析（準備編） ここでは分析の準備編として、サーバーログをダウンロードしてきて、整形して、MongoDBに登録

こんにちは、@yoheiMuneです。 今日は、ECMAScript6で定義されているMapとSetを使ってみたいともいます。Chromeはver.38から使えるので、すぐそこまできている技術です。 Special Thanks to https://flic.kr/p/aBtMu5 目次 多くのプログラミング言語でサポートされているMapが、とうとうJavaScriptでも使えるようになりました。 Mapはコレクション型の1つで、データを格納するためのデータ構造です。 JavaScriptではオブジェクトリテラルを用いて、以下のようにデータを保持することができます。 var data = { name: 'Yohei', sex: 'male', contry: 'JP' }; Mapでも似たようにKey-Value構造でデータを格納することができます。 // Mapオブジェクトの作成

[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう こんにちは、@yoheiMuneです。 ブラウザのレンダリングの仕組みはHTML5 RocksやHow browsers workで詳しく解説されてきました。しかしそれらはとても詳細で、読破して理解するのは大変です。 今回のブログでは手軽にレンダリングの概要を理解できるように心がけました。またより詳しく学べるようなリンクも記載しました。 そしてブラウザのレンダリングの仕組みを理解した上で、どのようなJavaScriptを書くべきかについても記載しました。 目次 ブラウザのレンダリングの仕組み この章では、HTMLとCSSが読み込まれてから画面に表示されるまでの間に、ブラウザがどのような処理を行っているかを説明します。 ファイル読み込みから表示までの一連の流れは以下図の通りです。 [1]

こんにちは、@yoheiMuneです。 gulpというフロントエンドのビルドツールが気になってました。 それについて試したり調べたりしてだいぶ理解できたので、今日はその内容をブログに書きたいと思います。 目次 gulpとは gulpとは、JavaScriptのMinifyやCSSプリプロセッサのコンパイルなどを行うことができるフロントエンドのビルドツールです。 フロントエンドのビルドツールには有名なGrunt.jsがありますが、その後発のビルドツールのようです。 Grunt.jsと何が違うの？ 実現できることはぶっちゃけ同じで、その実現方法や思想が異なるのだと思います。 gulpのサイト(英語)からいくつか主張を拝借してみました。 gulp's use of streams and code-over-configuration makes for a simpler and more i

こんにちは、@yoheiMuneです。 ECMAScript6について断片的には知っているけど、なんだかぼやっとしている。 そんな自分の状態を解消したいと思い、ECMAScript6を全体的に学べるブログを書きました。 ECMAScript6で使われている用語、仕様策定の進め方、そして新規機能を議題としています。 このブログを読んで頂いた方にも、ECMAScript6についての全体的な知識を提供できたらいいなと思ってます。それでは始まりですー。 Special Thanks to https://flic.kr/p/baAtKT 目次 ECMAScript6とは ECMAScript6とは、現在広く使われているECMAScript5の次期バージョンです。 ECMAScript6（以下、ES6）では、let、Map、Proxyといった各種ブログで取り上げられる新機能も含めた、仕様策定が行われ

こんにちは、@yoheiMuneです。 今日は、とても便利なXMLHttpRequest version2の内容紹介を、ブログに書きたいと思います。 Special Thanks to https://flic.kr/p/mCxBaM この記事の目的 この記事は、XHR2の様々な機能を実装することを通して、XHR2について深く学ぶことを目的にしています。 自分はXHR2について便利そうだなぁという印象しか持っておらず、機能面や実装方法は無知でした。 そんな自分に対して、XHR2に対する確かな知識を持ちたいと思い、この記事を執筆することを決めました。 目次 XHR2とは XHR2とは、XMLHttpRequestのバージョン2です。W3Cではこちらのページで仕様策定が行われています。 XHR2では、XHR1で行えるサーバーとの非同期通信に加え、バイナリーデータを扱えたり、通信の進捗状況を把握

こんにちは、@yoheiMuneです。 以前簡単な正規表現入門資料を作ったのですが、ブログにも書いておこうと思います。 正規表現って何？ ざっくり言うと、正規表現は「文字列を扱う為の技術」と言えると思います。 正規表現を使って、ある特定の文字列を検索したり、置換したり、抜き出したりすることが出来ます。 例えば、HTMLドキュメントの中に以下のようなイメージタグがあった場合に、 <img src="foooooooo.png"alt="画像だよ"/> img要素がHTML文章内があるかを検索することも出来るし、「foooooooo.png」を「huuuuuuuuu.png」に置換することも出来るし、「foooooooo.png」を取り出すことも出来ます。 もちろん正規表現を使わない方法でも同様のことを実現できますが、 正規表現を使うとより複雑なことがより簡単に行えるようになります（正規表現を

こんにちは、@yoheiMuneです。 久々のgruntJSネタ☆本日はgruntでSFTP（SecureFTP）を行う方法をブログに書きたいと思います。 gruntでSFTPを行う必要があった理由 現在ソーシャルゲーム開発でフロントエンドの仕事を行っています。JS、CSS、HTMLをせこせこと作る仕事です。 今回の案件では、バックエンドにJavaアプリケーションを利用しており、そのViewに当たる部分がJSPやFTLといったテンプレートになっています。 フロントエンドでは、そのJSPやFTPにHTMLを実装していき、開発用公開サーバーにアップして動作を確認するという作業フローを取っています。 そのため「編集して、FTPして、確認して」というタスクの流れが必要となり、今回はSFTP部分を自動化することで、作業効率をアップしようという狙いなのです。 ちなみにJavaプロジェクトをローカルに再

こんにちは、@yoheiMuneです。 Webアプリケーションを作成する際に、最近良く利用するrequireJSというJavaScriptフレームワーク。 基礎から学んだことがなかったので、今回ブログに入門内容を纏めてみました。 RequireJSとは requireJSのWebページには、以下のような説明がされています。 RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quali

こんにちは、最近JavaScriptで大規模開発中の@yoheiMuneです。 JSの大規模開発では、複数人で開発して、クラス数やJSファイル数もたくさんになりやすいです。 そんな時にエラーが発生するとデバッグも大変。 今日は、JavaScriptでJavaのようなスタックトレースを出してデバッグが楽にならないものかと思い調べて、実装してみた結果をブログに書きたいと思います。 スタックトレースとは サーバーサイドの開発では、例外発生時などによく見るスタックトレースですが、JavaScriptでは一部のブラウザ（Chrome）の開発コンソールくらいでしか見ることが出来ません。 スタックトレースとは、スタック（関数の呼び出しをするたびにたまるもの）の一覧を出力する機能です。 関数A→関数B→関数Cとコールしていて関数Cでエラーが発生した場合、そのエラー箇所にたどり着く迄に、 どんなコードを通っ

こんにちは、Canvasでバリバリ仕事中の@yoheiMuneです。 最近のWebアプリでCanvasを使っているアプリが多いですが、Retina対応できておらず、にじんだ感じになっているアプリが多々あり。。 なので、CanvasでRetina対応できるのかを調べました。今回はその結果を記載したブログとなります。 Canvasで普通に描画するとにじむ Canvasの描画内容をRetinaでない多くのPCブラウザで見る分には問題ないのですが、 iPhoneなどのRetina対応したブラウザで見るとにじんで見えてしまいます。 画像などの表示ではRetina対応を行う事が多いですが、 CanvasでもRetina対応する事でにじまずに描画内容を表現できるようです。 CanvasでRetina対応をする方法は、画像のRetina対応の考え方と同じで、 描画した内容を1/2のサイズで表示することでキ

[JavaScript] Jenkinsの対抗馬になるか？ビルド管理をJSで行うGrunt.jsの内容説明とスタートアップ こんにちは、ビルド管理といえばJenkinsだと思っていた@yoheiMuneです。 最近、node.js上で動くJavaScriptのビルド管理ツール「Grunt.js」について学んだので、今日は簡単な説明と 「Hello World」的なところまで書きたいと思います。 Grunt.jsとは何？ grunt.jsは、grunt@Githubで公開されている ビルド管理ツールです。 個人的には、Jenkinsがビルド管理ツールとして有力だったのですが、 grunt.jsではフロントエンドのビルド作業を楽にできるいい感じのツールです。 Jenkinsでは例えば以下のようなビルドを行うと思います（JavaのWebアプリケーションの場合）。 checkStyleやfingB

画像ファイルを用いずに、CSSを用いて以下図のようなパン屑リストを作成してみました。 CSS3の内容も用いてますので、モダンブラウザーでの動作となります。 今日は、その実装方法をブログに書きたいと思います。 http://www.yoheim.net/labo/html5/css3/breadList.html パン屑リストの土台となるHTMLを構築する パン屑リストを構成するHTML要素は、ul, li, aタグで構成しました。 <ul class="bread"> <li><a href="#">List001</a></li> <li><a href="#">List002</a></li> <li><a href="#">List003</a></li> <li class="current"><a href="#">List004</a></li> <li><a href="#"