こんにちは、@yoheiMuneです。 担当プロジェクトでソースレビューをしていて、とある人が書いてきた掲題の件について始めて見た書き方で、とても良かったのでブログに書きたいと思います。 全角英数字→半角英数字をJavaScriptで書く JavaScriptの文字コードはUnicode（UTF-16）ですが、その文字コード表の特性を活かすことで、全角英数字を半角英数字に変換することができます。具体的には、 全角英数字の文字コードから「0xFEE0」（＝65248）を引くと半角英数字の文字コードになる という特性です。これをJavaScriptで実装すれば、全角→半角の変換を実現することができます。 具体的に実装してみると以下のような処理になります。 // 全角→半角に変換する（7行で実装できる） function zenkakuToHankaku(str) { var hankaku =

こんにちは、@yoheiMuneです。 先日開催されたFrontrend Conference The FinalでLTしてきました。ネタはService Workerを使いましたが、本当に話したかったことは別にしゃべりました。ブログにもその内容を残しておきたいと思います。 今回のLTで利用したスライドは以下の内容で、Service Workerを用いてAPIテストを行う方法を説明しました。 ただ話したかったのはService Worker自体の使い方ではなく、「これから生き残っていくために、ニーズやユースケースを自分たちで作り出していくべきだ」ということです。 今のお仕事はフロントエンドだけではなく、サーバーサイド、プランニング、ディレクション、簡単なデザインまでプロジェクト内で幅広く行っています。役割多いなと思うかもしれませんがやっていることは1つでグロスハックです。プランニングなどの

こんにちは@yoheiMuneです。 2014年がもうすぐ終わりますね！今日のブログでは、今年書いた記事で特に反響をいただいた記事の紹介と、個人的な1年の振り返りをしたいと思います。 Special Thanks to https://flic.kr/p/5NXQD9 今年もたくさんの方にブログを見て頂きまして感謝感謝です。社内や勉強会などで「記事読んで助かった」と言ってもらえる機会も多くなり本当に嬉しい限りです。月のPVは5.4→7.7万と140％になりました。本当にありがとうございます。 さて、今年反響を頂きました記事を７つ紹介させていただきます。選んだ基準は、はてなブックマーク数の多い順です。1つでも気になる記事がありましたら幸いです。 第1位 [フロントエンド]ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう フロントエンドの仕事をしていたら切っ

こんにちは、@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です。 今日はFrontrend Advent Calendar 2014の8日目の記事として、フロントエンドエンジニアにお薦めしたいデータベース、MongoDBを紹介したいと思います。 Special Thanks to https://flic.kr/p/6Hrbyy 目次 MongoDBとは何か MongoDBはデータを永続化するための機能であるデータベースの1種であり、これを用いることでデータの保存・検索・更新・削除などができます。 データベースで有名なものにMySQLがありますが、MySQLはリレーショナルデータベース、MongoDBはドキュメント志向データベースと、データ保存する目的は同じですが手段が異なります。 なぜMongoDBがフロントエンドエンジニアにお薦めかというと、フロントエンドで利用するJavaScript言語の知識を生かせるデータ

こんにちは、@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です。 フロントエンドの最新動向を追いかけるため、日々色々なサイトから情報収集をしています。 この一週間で「あっこれいいな」と思った記事が風化しないように、ブログにメモを取っておきたいと思います。 Special Thanks to http://flic.kr/p/kpTpJ6 目次 チュートリアル：HTML AudioのキャプチャをストリーミングでNode.JSに送信する（ブラウザエクステンションは使わない） [原題]Tutorial: HTML Audio Capture streaming to Node.js (no browser extensions) http://blog.groupbuddies.com/posts/39-tutorial-html-audio-capture-streaming-to-node-js-no-browser

こんにちは、@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です。 JavaScriptの実装において、「Promise」を聞いたことがある方も多いのではないでしょうか。 今回は、JavaScriptにおけるPromise/A+を深く学ぶことができる記事を翻訳しました。その内容を紹介したいと思います。 Special Thanks to https://flic.kr/p/b5bNqv 翻訳について 本記事は、Matt GreerのJavaScript Promises ... In Wicked Detailの翻訳記事です。翻訳するにあたり、ご本人から許可を頂いています。 本記事では、JavaScriptにおけるPromiseの仕様がどっぷりと解説されていますので、お時間を割いて読んで頂く価値があると思います！ それでは、始まりますー！！ はじめに 私はJavaScriptを使った開発において、長らくPromise

こんにちは、@yoheiMuneです。 今日は、スマホ向けサービスの開発で必要になる、タップイベントが実装されているかを調べる方法をブログに書きたいと思います。 Special Thanks to http://flic.kr/p/dP1Fjh タップイベントの実装有無を調べる理由 主にスマホ向けのサービスを作っている時に、以下のようなことをしたい場合がよくあります。 var EVENT = {}; if (/*タップイベントが使える場合*/) { EVENT.TOUCH_START = 'touchstart'; EVENT.TOUCH_MOVE = 'touchmove'; EVENT.TOUCH_END = 'touchend'; } else { /*タップイベントが使えない場合*/ EVENT.TOUCH_START = 'mousedown'; EVENT.TOUCH_MOVE

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

こんにちは、です。 JSファイルの依存管理を行ってくれるrequire.js。 これを用いて開発するとMVCモデルなどの機能をファイル毎に分割して開発することが容易になります。 ただ、ファイルをたくさん分割するとそれだけロードする為のHTTPリクエストも増えてしまい、 初期表示のパフォーマンスを大きく低下させてしまいます。 今日のブログでは、require.jsで分割管理しているファイルを１つにする方法をブログに書きたいと思います。 今回結合するrequire.jsで管理したJSファイルたち 今回は、以下のようなディレクトリ構成のファイルを結合して、1つのファイルにしたいと思います。 +javascript main.js +views top.js search.js mypage.js +models music.js artist.js my_pocket.js 依存関係は、以下の通

こんにちは、です。 HTML5で策定中のWeb Notificationを、Chromeでデスクトップ通知として実装することが出来ます。 今回のブログでは、Webkit限定のお話になりますが、Webページからデスクトップ通知を行う方法を書きたいと思います。 Webページからのデスクトップ通知とは デスクトップ通知とは、SkypeとかTweetDeckなどのデスクトップアプリケーションを使っていると、 何か通知があると画面の右上とかにバルーンが表示されるあやつです。 今迄のWebでは、セキュリティ観点よりWebページからローカルPCへのアクセスが制限されていましたが、 現在策定中のHTML5では、デスクトップ通知が可能になるかもしれません。 Chromeでは、すでにデスクトップ通知機能が実装されていて、利用できるようになっています。 今回は、この実装内容を紹介したいと思います。 デスクトップ

こんにちは、@yoheiMuneです。 今日は、JavaScriptを用いて、サイト内でYoutubeの動画を再生する方法をブログに書きたいと思います。 Youtube APIを使う Youtubeには、外部プログラムからデータを再生したり検索したりする為のAPIがいくつか用意されています。 Player API: AS3 Flash(ActionScript3)でYoutubeを再生する為のAPI Player API: JavaScript JavaScriptでYoutubeを再生する為のAPI。ブラウザはFlash環境が必須。 Player API: iframe iframe + JavaScriptを用いたAPI。ブラウザはFlashかHTML5 Videoのどちらかが必要。 Data API Youtube内の動画検索や関連動画取得などの情報取得用API 今回はiPhoneで