プロジェクトによりnodenvとndenvを切り替える
プロジェクトによりnodenvとndenvを切り替える 最近、プロジェクトにより「nodenv」を利用しているプロジェクトと「ndenv」を利用しているプロジェクトがあり使い分けがうまくいかないという問題がよく発生するようになりました。 最初に説明しておくと本記事は「nodenv」と「ndenv」を切り替えるのではなく、.node-versionファイルに記述されているバージョンのnodeを起動する方法です。タイトル詐欺ですね。 何が問題なのか 前提として「nodenv」と「ndenv」では.node-versionに記載されるバージョンの表記が違います。 ndenvを利用して ndenv local v8.5.0 のコマンドで生成される.node-versionには「v8.5.0」とバージョン情報が記載されます。 nodenvを利用した場合 nodenv local 8.5.0 のコマン
SystemJSでAngular 2の環境を構築する
SystemJSでAngular 2の環境を構築する SystemJSはwebpackやBrowserifyのようなJavaScriptファイルの依存関係を解決するためのモジュール管理ツールです。 Angular 2ではquickstartではSystemJSを利用したコンパイル環境を、Angular CLIではwebpackを利用したコンパイル環境を提供しています。 今回は用意されている環境を利用せずに0ベースでSystemJSの環境を構築していく方法を解説します。 （quickstartの設定内容を最小限にして順序立てて解説しています） package.jsonの作成 まずはターミナルなどで以下のコマンドを入力してpackage.jsonの作成を行います。 npm init -y ローカルサーバーの構築 SystemJSではAjaxでファイルの取得などを行うためローカルサーバーの設定が
2015年のto-R人気エントリーTOP20
2015年のto-R人気エントリーTOP20 今年も残りあとわずかということで、毎年恒例のto-Rでアクセスが多かったエントリーTOP20をご紹介。 ブロックレベル要素の高さを揃えるheightLine.js footerをウィンドウ下部に固定する『footerFixed.js』 AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ レスポンシブWebデザインに対応した「jquery.heightLine.js」 スマートフォンサイトをデザインする上で知っておくべき10のTIPS ページ内リンクをスマートにするsmoothScroll.js jQueryのmouseoverメソッドとmouseenterメソッドの違い データベースの論理削除と物理削除 新MacBook ProにインストールしたMacアプリ24 PCサイトとスマートフォンサイトを切り替える「Pc2
jQuery samples - Ajax時にローディングを表示
jQuery samples - Ajax時にローディングを表示 本エントリーは「to-R JavaScript Advent Calendar 2015」17日目のエントリー、今回のjQuery samplesは、Ajax時にローディングを表示する方法についての解説です。 単純に Ajax時にローディングを表示する方法から僅かに遅延させる方法、共通設定にする方法まで解説していきます。 CSS3でローディングを設定 まずは以下の様なHTML/CSSでローディングを作成しておきましょう。 <button id="ajax">ajax</button> <ul id="list"></ul> <div class="loading"> <div class="loading_icon"></div> </div> .is-hide{ display:none; } .loading{ posi
jQuery samples - スクロールすると表示されるトップへ戻るボタン
jQuery samples - スクロールすると表示されるトップへ戻るボタン 本エントリーは「to-R JavaScript Advent Calendar 2015」13日目のエントリー、今回からはjQuery samplesと題しましてjQueryを使った簡単なUIサンプルの解説を行っていきます。 初回はスクロールすると表示されるトップへ戻るボタン、以下のサンプルをちょっとスクロールすると左下にトップへ戻るボタンが表示されます。 See the Pen jQuery samples - スクロールすると表示されるトップへ戻るボタン by Kazuma Nishihata (@to-r) on CodePen. では、HTMLとjQuery、CSSについて解説していきます。 HTML HTMLは次のように大枠のdiv.pageTopとページトップへ戻るリンクで構成されています。 <di
jQueryの$(function(){...});と$(window).on(
jQueryの$(function(){...});と$(window).on("load",function(){...})の違い 本エントリーは「to-R JavaScript Advent Calendar 2015」8日目のエントリー、今回はjQueryの$(function(){...});と$(window).on("load",function(){...});の違いについて解説を行います。 共にページの読み込みが終わったタイミングでfunction(){...}内に書かれている処理を実行するための記述ですが、$(function(){...});に書かれている処理はHTMの読み込みが終了したタイミング、正確にはDOMツリーの構築が完了したタイミングで実行されます。 $(function(){ //do something }); それに対して$(window).on("lo
jQuery 3.0時代のコーディングお作法 / show()/hide()編
jQuery 3.0時代のコーディングお作法 / show()/hide()編 本エントリーは「to-R JavaScript Advent Calendar 2015」1日目のエントリー、現在α版が公開されているjQuery 3.0時代のコーディングお作法について解説を行います。 あくまでα版を元にした情報になるので注意してください。 ブラウザサポートが変わる jQuery 3.0以降では、jQuery 3.x系とjQuery compat 3.x系と２つのバージョンに分かれ進化をしていきます。それぞれ基本機能は同じでサポートするIEのバージョンが異なります。 jQuery 3.x系 - IE9〜 jQuery compat 3.x系 - IE8〜 IE8対応が必要な場合はjQuery compat 3.x系を対応が不要な場合はjQuery 3.x系を選択する必要があります。 IE7以下
jQueryのtrigger()で名前空間を使う
jQueryのtrigger()で名前空間を使う 前回の「jQueryのoff()を使いこなす」ではイベントのアンバインディング時の名前空間の指定方法について解説しましたが、名前空間はtriggerメソッドでも利用できます。 次のように複数のイベントがバインディングされている場合、影響範囲を考慮せず「$("#bar").trigger()」などを利用すると予期せぬ処理が走ってしまいます。 $("#bar").click(function(){...(中略)...}); ... (中略) ... $("#bar").click(function(){...(中略)...}); off()の時も説明しましたが、アクセス解析のツールがイベントを勝手にバインディングしている可能性もあり、基本的にあなたが把握していないイベントがバインディングされている可能性があることを前提にコードを書かなくてはいけ
jQueryのoff()を使いこなす
jQueryのoff()を使いこなす jQueryにはバインディングしたイベントを取り除くoffメソッドがありますがこれは影響範囲を考慮せず利用すると想定しないイベントまで取り除いてしまいます。 イベントを限定する 例えば以下のように#barにclickイベントとmouseoverイベントがバインディングされてるとします。 $("#bar").click(function(){...(中略)...}); ... (中略) ... $("#bar").mouseover(function(){...(中略)...}); ある条件の場合、clickイベントが不要なケースで単純に「$("#bar").off()」とするとclickイベントもmouseoverイベントも取り除かれてしまいます。 そういったケースを防ぐ為にイベントを引数で指定します。 $("#bar").off("click");
2014年のto-R人気エントリーTOP20
2014年のto-R人気エントリーTOP20 完全に年末エントリーを書くタイミングを逃してしまって正月をまたいでしまいましたが、毎年恒例のto-Rでアクセスが多かったエントリーTOP20をご紹介します。 ブロックレベル要素の高さを揃えるheightLine.js footerをウィンドウ下部に固定する『footerFixed.js』 AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ 新MacBook ProにインストールしたMacアプリ24(2014) レスポンシブWebデザインに対応した「jquery.heightLine.js」 スマートフォンサイトをデザインする上で知っておくべき10のTIPS ページ内リンクをスマートにするsmoothScroll.js PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」 jQueryのmouseover
jQueryのclassセレクタに要素名を付ける
そして結論として以下のように書いております。 このようにIE8やGoogle Chromeなどでは数ミリ秒遅くなってしまうがIE6やIE7に対応する場合にはclass属性への要素の付加は必須のパフォーマンス対策である。 つまり、「jQueryのclassセレクタに要素名を付ける」というはIE6やIE7でjQueryのセレクタを高速化するテクニックとして紹介しています。本が発売された当時はIE8が最新ブラウザでIE6やIE7が必須という案件は非常に多かった時代なのでしかたなかったわけです。 とうぜんコメント欄で指摘されているようにIE9以降ではgetElementsByClassNameが採用される「要素名を付けない」パターンのほうが高速化されますし、書籍に書いてあるとおりquerySelectorAllが採用されるIE8においても「要素名を付けない」パターンのほうが高速化されます。 「Ja
gulpでJavaScriptの結合圧縮処理
gulpでJavaScriptの結合圧縮処理 gulpでJavaScriptの圧縮処理を設定してみました。ご想像の通りuglifyJSですが@readymadegogoに教えてもらったuseminというプラグインも合わせて利用します。 gulpの使い方は「タスクランナーgulp入門」を参照してください。 まずは圧縮用のgulp-uglifyとgulp-useminをインストール。 sudo npm install gulp-uglify gulp-usemin --save-dev 今回の設定の肝はgulp-usemin。これを利用するとHTML上に直接圧縮処理の設定を記述できます。 たとえばHTMLを以下のように設定した場合、useminを実行したらscript1.jsとscript2.jsを圧縮結合したscript.min.jsというファイルを生成しHTML上のscriptの呼び出しを
gulpとnode.jsの連携
gulpとnode.jsの連携 Gruntと比較してgulpがイケてるなと思うのはnode.jsつまりJavaScriptを利用してカジュアルにタスクをカスタマイズできるところです。 たとえば、昨日書いたSassをコンパイルするタスクは以下のようにnode.jsでカスタマイズするとかなり便利になった。 var gulp = require('gulp'); var sass = require('gulp-sass'); var autoprefixer = require('gulp-autoprefixer'); var fs = require('fs'); var path = require("path"); //config var root = "htdocs", config = { "path" : { "htdocs" : root, "sass" : root+"/s
タスクランナーgulp入門
タスクランナーgulp入門 gulpはGruntと同じように様々なタスクを自動化してくれるツール(タスクランナー)です。 node.jsで開発されており、Sass/CompassやLess、StylusなどのCSSプリプロセッサーのコンパイルやCSS/JSの結合圧縮、JSHintによるバリデーションなど様々なタスクを自動で行ってくれます。 Gruntとできることはほとんど同じですが、Gruntよりタスクの流れがわかりやすく、JavaScript(node.js)で独自のタスクも簡単に記述することができます。 後発ということもありGruntよりプラグイン数は少ないですが、マニアックなタスク以外はそろっているので通常のWeb制作などでは問題なく利用できるでしょう。 node.jsのインストール node.jsが必要ですのでインストールしていない方はインストールしましょう。 公式サイトでインスト
CSS3のベンダープリフィックスを後付けする「grunt-autoprefixer」
CSS3のベンダープリフィックスを後付けする「grunt-autoprefixer」 grunt-autoprefixerはベンダープリフィックスを後付けする為のGruntモジュールです。 たとえば次のようなCSSがあったとします。 .foo{ box-sizing: border-box; } ただしFirefoxなど一部のブラウザでbox-sizingを利用するにはベンダープリフィックスが必要です そういった場合にgrunt-autoprefixerを実行することで以下の様に必要なベンダープリフィックスを追加してくれます。 .foo{ -moz-box-sizing:border-box; box-sizing:border-box } さらに次のようなベンダープリフィックスを指定している場合も、 .foo{ -webkit-box-sizing:border-box; box-siz
新MacBook ProにインストールしたCUIアプリ
新MacBook ProにインストールしたCUIアプリ 新MacBook ProにインストールしたMacアプリ24に続いて、インストールしたCUIアプリもご紹介。 Homebrew Mac用のパッケージ管理ソフト「Homebrew」。ターミナルから以下のコマンドを入力するとインストールできます。Gitがインストールされてないとインストールできないと思うので、事前にXcodeをインストールしておきましょう。（Homebrewのインストール中にコマンドラインツールのインストール画面が表示されると思います。） ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)" インストール後に以下のコマンドでインストールされたバージョンが確認できます。 brew -v rbenv Rubyのバージョン管理ソフト「
jQueryのfind()を利用した高速化
jQueryのfind()を利用した高速化 最近、jQueryのfind()のちょっとよろしくない使い方をチラホラと見かけるのでfind()の高速化について解説をします。 アンチパターン 最近、見かけたパターンとしては以下の様なものがあります。 $('.foo #bar') このセレクタをfind()を使って高速化する為に以下のように書きなおす。 $('.foo').find('#bar') というもの。これは、ケースによっては高速化が見込めるものの、多くのケースでは低速化されてしまいます。 また、以下の様なパターンも見かけました。 var $ul = $('ul'), $a = $ul.find('.a'), $b = $ul.find('.b'); $a.css('color', 'red'); $b.css('color', 'green').text('Hello'); こちらも、
jQuery Advent Calendar 2013まとめ
jQuery Advent Calendar 2013まとめ 本エントリーはjQuery Advent Calendar 2013の26日目のエントリーです。 jQuery Advent Calendar では22個のすばらしいjQueryエントリーが書かれている訳ですが、それを全部チェックするのがめんどくさい！といった方向けに昨年につづき反響が高かったjQueryエントリーベスト10を勝手にご紹介します。反響は集計が簡単なのではてなブックマークのブックマーク数で集計しました。 とりあえずjQueryのプラグイン作ってみる | Web | position: absolute; jQueryプラグインのメソッドパターン - to-R イベントデリゲートで理解するjQueryのonメソッド - to-R jQueryを使ったAjaxまとめ jQueryのstopメソッドとfinishメソッド
jQueryプラグインのメソッドパターン
jQueryプラグインのメソッドパターン このエントリーはjQuery Advent Calendar 2013の 最終目のエントリーです。(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。) 今回はjQueryプラグインのメソッドパターンについて紹介をしたいと思います。 jQueryプラグインのメソッドとはどいうものかというと、まず以下のようなプラグインがあったとします。 $.fn.alert = function(options){ return this.each(function(){ $(this).click(function(){ alert(options.text); return false; }) }); } セレクタで指定した要素でアラートを表示するだけの簡単なプラグインです。(プラグインの作り方は「
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
5分でわかるWebRTCの仕組み - html5minutes vol.01