こんにちは、@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で

[パフォーマンス] 画像をLocalStorageへキャッシュして、Webページの表示を少し速くしてみる こんにちは、@yoheiMuneです。 以前のブログで、「CSSとJSをLocalStorageにキャッシュして、2回目以降の表示を速くしてみる」を紹介させて頂きました。 今回はサイトで頻繁に利用する画像をLocalStorageへ保存することで、表示を高速化する方法をブログに書きたいと思います。 画像をLocalStorageへ保存すると表示が速くなる？ 画像やCSSやJSなどのファイルは、Expireヘッダなどを使ってブラウザへキャッシュすることが可能です。 ただ多くのスマホの場合、画面を開くたびにキャッシュ確認のためサーバーへ問い合わせを行ってしまい、そのリクエスト待ちで表示が遅れるのがもったいないのです。 ただしLocalStorageの上限が5MB程度のブラウザが多いので、た

[パフォーマンス] CSSとJSをLocalStorageにキャッシュして、2回目以降の表示をちょっとだけ速くしてみる こんにちは、@yoheiMuneです。 スマホで回線状況が悪い場合（3Gとか使う場合）に、表示遅いなぁーと思うこと多くないですか？ 今回は、スマホなどの回線が良くない端末で、Webの表示をより速くする方法として、CSSとJSのローカルストレージキャッシュで高速化する方法をブログに書きたいと思います。 CSSやJSは、expireヘッダが付いてキャッシュされてても初期表示の時間を遅延させる？ iPhoneなどのスマホを使っていると、CSSやJSのキャッシュ機能を有効にしても、初期表示までに時間がかかってしまうことがあります。ブラウザがキャッシュを勝手にFIFOのルールなどで消しちゃうとか。 以下の画像は、iPhone5でiOS6でSoftbankの3G回線を使った際に、とあ

[JS] Google Analyticsを活用して、サイトで起こったJavaScriptエラーを収集しよう こんにちは、@yoheiMuneです。 Google Analyticsで、JavaScriptエラーの内容も収集できるって知ってますか！？ 自分は最近知って驚きました。Google Analytcsを導入しているサイトであれば簡単に行うことが出来るので、その内容と実装方法を紹介したいと思います。 Google AnaliticsでJSエラーを収集する仕組み Google Analyticsはサイトの訪問者数やPVを計測する機能を持ったWebアプリケーションです。訪問数、PV計測、離脱率、Google Adsenseの効果測定など様々なことが出来るのですが、その中でイベント機能というものを使うとJSエラーをGoogle Analiticsで収集することが可能となります。 イベント機

[JS] iTunes APIをJavaScriptから利用して、iTunesで配信中の楽曲を視聴する こんにちは、@yoheiMuneです。 iTunes APIという便利なAPIをご存知ですか？ iTunes APIを使うと、iTunesで提供中のコンテンツの情報を取得することが出来ます。本ブログではiTunesAPIをJavaScriptから使う方法を記載します。 iTunes APIとは iTunes APIとは、iTunesで提供されている曲、ミュージックビデオ、テレビ番組など（提供されているコンテンツは国により異なる）をAPI経由で取得出来る機能です。 アフィリエイト用に利用出来ます。機能の詳細は、以下のURLで確認出来ます。 http://www.apple.com/itunes/affiliates/resources/documentation/itunes-store-

[JS] アニメーションを行うのに、setTimeoutよりもrequestAnimationFrameを使ってみよう こんにちは、@yoheiMuneです。 JavaScriptを用いてアニメーションを行う際に、setTimeoutやsetIntervalを使ってアニメーションループを実装することが多いと思いますが、 最近使えるようになってきたrequestAnimationFrameを使うと、よりいい感じにアニメーションを行うことが出来ます。 今日は、requestAnimationFrameという機能についてブログを書きたいと思います。 requestAnimationFrameとは requestAnimationFrameとは、setTimeoutと似たような機能で、ブラウザの次の描画の際に実行したい関数を指定することで、 ブラウザが次回描画時に呼び出してくれる機能です。 以下の

こんにちは、@yoheiMuneです。 本日はフロントエンドのネタで、HTMLのセレクトボックスの選択状態をJavaScriptで変更する方法を書きたいと思います。 Selectボックスの選択状態をJavaScriptから変更できない？ 最近のお仕事でこんな要件がありました。 セレクトボックスの選択状態を覚えておき、次に同じ画面に訪問した際には以前の選択状態が復元されるようにする。 そしてそのときのアーキテクチャとして、サーバーとクライアントはAPIベースでのやり取りのみ（Full Ajax）な構造となっていたため、 セレクトボックスのレンダリングもJSが行う必要がありました。 その当時、こんなコードを書いてみたのですが、なぜかうまくSelectBoxの選択状態が変わらないという問題がありました。 // セレクトボックスを作る var $select = $('<select name="

[JS] Compass(Scss)のビルドが遅いので、マルチスレッドで高速でCompassビルドするgruntタスクを作ってみました こんにちは、@yoheiMuneです。 Compass(Sass)を仕事で使うのですが、@extendとかがいっぱいあるとビルドに時間がかかるようになってきました。 今回は、その対策としてgruntのタスクとして、compassビルドをマルチスレッドで高速化するタスクを作ったので、紹介させて頂きたいと思います。 Compassのビルドは時間がかかる？ Compassってすごく便利なツールで、CSSをモジュールか出来たり案件ごとに使い回したりして、CSSのコーディングの効率化が出来ます。 でも、画像のBase64化やSprite化、@extendで共通Compassモジュールを使うコードなどが増えると、コンパイルに時間がかかってきます。 自身が関わっている案

こんにちは、@yoheiMuneです。 iPhoneでは、搭載されている加速度センサー／ジャイロセンサー／デジタルコンパスで取得している値を、JavaScriptから取得することが可能となってい増す。 今回はその取得方法と、取得値を利用した簡単なサンプルを紹介したいと思います。 加速度センサーから値を取得する iPhoneに搭載された加速度センサーを用いることで、iPhoneがどちらに動いたか（どちらに加速度がかかったか）を把握することができます。 具体的には以下のような実装を行います。 （JavaScript） // devicemotionイベントで、加速度センサーの値を継続的に取得することができます。 window.ondevicemotion = function(event) { // ユーザーによる加速度 + 重力 var x = event.accelerationInclu

こんにちは、@yoheiMuneです。 今日は、モジュール開発をする上で便利なRequireJSで、良く利用するオプション（Config）をブログに書きたいと思います。 RequireJSとは require.jsとは、JavaScriptでモジュール分割した開発を簡単に行うことをサポートしてくれるフレームワークです。 MVCなどの機能分割したファイルを、各ページ必要に応じて読み込むような実装を簡単に行うことができます。 require.jsに関する記事もありますので、ご参考になれば幸いです。 - JavaScriptをモジュール分割して開発できるRequireJSに入門 RequireJSをより便利に利用するオプション requireJSはそれ自体でも大変便利な代物ですが、オプションを指定することでより便利に使うことができます。 例えば以下のように、オプションを設定できます。 <scri

こんにちは、@yoheiMuneです。 ブログですごくお世話になるTwitterなどのソーシャルボタン。読んで頂いた方が情報発信したいと思ったときの手助けになるので大変重宝しています。 しかし、そのまま利用するとページの初期化が遅くなり（体感では２〜３秒遅くなる）、せっかく来て頂いたのに待たせることとなってしまう。 今回は、ソーシャルボタンを設置すると表示が遅くなる原因と、その対策案（２つ）をブログに書きたいと思います。 ソーシャルボタンを設置するとページの初期表示が遅くなる原因 ソーシャルボタンは、TwitterやFacebookなどの各サイトでHTML/JSコードを入手することで、簡単に自身のサイトに導入することが可能です。 しかし入手したコードをそのままページに埋め込むと、初期表示が遅くなる。 遅くなる原因は、主に以下２つかと思います。 scriptタグの埋め込み HTML内にscr

こんにちは、@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

こんにちは、@yoheiMuneです。 CreateJS関連のブログの第4弾、Graphicsクラスの使い方をブログに記載したいと思います。 CreateJSとは CreateJSとは、HTML5 Canvasを使った描画/アニメーションの実装を強力にサポートしてくれるライブラリです。 このブログでは、筆者がCreateJSを実際に使って学んだ事を中心に、いくつか記事を書いております。 - Canvasアニメーションを実装する時に便利で良く利用しているJSライブラリ、CreateJS - Bitmapクラスを使って画像の描画を自由自在に - 色々なFilterを適用して描画する内容を変化させる - Graphicsクラスを使って四角や丸を画像なしで描画する（今日はここ） Graphicsクラスとは Graphicsクラスとは、CreateJS内のEaselJSで定義された機能で、HTML5

こんにちは、@yoheiMuneです。 CreateJSというHTML5 Cavasで描画/アニメーションを行うライブラリの解説。 今日は第３弾としてFilterクラスを使いこなして、一つの画像で色々な描画を行う方法を記載したいと思います。 CreateJSとは CreateJSとは、HTML5 Canvasを使った描画/アニメーションの実装を強力にサポートしてくれるライブラリです。 このブログでは、筆者がCreateJSを実際に使って学んだ事を中心に、いくつか記事を書いております。 - Canvasアニメーションを実装する時に便利で良く利用しているJSライブラリ、CreateJS - Bitmapクラスを使って画像の描画を自由自在に - 色々なFilterを適用して描画する内容を変化させる（今日はここ） Filterクラスを使って、描画内容を変化させる CreateJS内のEaselJS

Tooklit for CreateJSは仕事でも利用しています。しかし、完全に出力する為にはFlashの××の機能は使っちゃダメなど、 いまのところは制約が多く使いづらいのが現状です。 また、出力されたソースコードをそのまま動かすと、なかなかの重さで書き換える必要がある場合も多く。。 現在は、Flashで利用している画像素材などの書き出し用として使うことがメインです。 CreateJSを使って実際に作ってみる CreateJSのEaselJSとTweenJSとPreloadJSを使って、 以下のような「動物が上下に動く」アニメーションを作成してみたいと思います。 CreateJSを使う為の準備 まずは、CreateJSのライブラリを読み込む実装を行います。 今回はCDNで提供されているものを利用していますが、ローカルにダウンロードしてきてそれを読み込むのももちろんありです。 <scrip

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

[Tool] HTML,CSS,JSの開発でSublimeText2というエディタがすごくいい感じ。機能紹介や導入方法。 こんにちは、@yoheiMuneです。 HTML,CSS,JSの開発を毎日行っていますが、最近はSublime Text2というエディタにハマってます。 8月から使い始めてだいぶ使い慣れてきたので、紹介したくブログを書きます。 Sublime Text2とは Sublime Text2は、 HTML,CSS,JavaScriptなどの開発で利用できるエディタで（PHPとかもいけます）、 軽量でたくさんの機能を持ち合わせている高機能エディタです。 評価版は無料で、使い続ける為には購入する必要があります（現在は、評価期限が設定されていないですが）。 執筆時は$59。ちょっと高いけど会社費用精算できるヒトとか良いかも。 個人的に気に入っているポイントは、以下のようなところです

jQuery Transitを使う際に注意すべき点 jQuery Transiは開発中のライブラリということもあり、tを使う上でいくつかの注意点があります。 GithubのIssueによるとjQuery1.8.2（執筆時の最新）に対応できていない。 Androidで動作しないものも多い。移動は動くけど、回転は微妙。拡大縮小も微妙。 Androidでは1つの要素に対して複数の変化をさせられない。このライブラリでは、この問題を吸収してくれません。 jQuery Transitで気に入った点 jQuery Transitで気に入った点として、アニメーションをメソッドチェーンで指定すると、 それを順に実行してくれるというアニメーションキューのような動きをしてくれる点がスゴく良いなと思いました。 具体的には、上記のサンプル集のような動きで、以下のような実装で実現出来ます。 $("#circle")

こんにちは、@yoheiMuneです。 今日は、iPhoneやAndroidのスマホブラウザでWebアプリを作る際のTipsで、 初期表示時にアドレスバー（URLバー）を非表示にして画面を広く使えるようにする方法を紹介したいと思います。 初期表維持にアドレスバーを非表示にする 初期表示時にアドレスバーを非表示にするのは簡単で、onload時に以下のコードを実行する事で実現出来ます。 window.onload = funtion(){ window.scrollTo(0,0); } 画面ロード時に擬似的にスクロールを発生させることで、URLバーを非表示にしています。 これは、「端末のスクロール発生時にURLバーを隠す」という機能を、擬似的に発火させるような実装です。 上記方法で上手くいかない場合には なお一部のAndroid端末ではonload時のスクロールでは上手く動かず、以下のようにす