node.jsのExpressでローカルサーバーを構築
node.jsのExpressでローカルサーバーを構築 本エントリーは「to-R JavaScript Advent Calendar 2015」5日目のエントリー、node.jsのExpressでローカルサーバーを構築する方法を解説します。 前回は、getUserMedia APIを利用してウェブカムの情報をvideo要素に表示する方法について解説しましたが、WebRTC開通までの工程として今回はnode.jsのExpressでローカルサーバーを構築する方法を解説します。 WebRTCではWebSocketによる通信を行う必要があり、WebSocketはnode.jsを利用すると非常に簡単に利用できます。 そのため、まずサーバーをnode.jsで用意しておきたいと思います。 Expressはnode.jsでサーバー構築が簡単にできるアプリケーションです。(サーバ構築というよりWebアプリ
Web制作における対応ブラウザの選定方法
Web制作における対応ブラウザの選定方法 「フロントエンドのテクニカルディレクションに求められるスキル」で出てきた話題として対応ブラウザの選定方法について掘り下げて解説を行います。 サイトのターゲット・予算・リソース・開発期間などビジネスにより選定方法は異なりますので、あくまで参考程度にしてください。 対応ブラウザを絞る意味 まず最初は「なぜ、対応ブラウザを絞るのか」という視点から。 理想論で言ってしまえばWebサイトを訪れるユーザー全てに最適なコンテンツを提供できれば申し分がありません。 しかし、現実的には各ブラウザ/OSによって実装が異なる機能があったり、実装されていない機能があったり、特有のバグを含んでいる物があったりすることもあり、そういった場合は個別のブラウザ/OSに対してデバッグやチューニングを行わなくてはいけません。 そのため対応ブラウザの数が多ければ多いほど、Webサイトの
jQueryを良くする25のTIPS
jQueryを良くする25のTIPS ネタ元：Improve your jQuery - 25 excellent tips ちょっと多いですが、かなり良いTIPSがまとまっています。 Google AJAX Libraries APIを利用しよう Google AJAX Libraries APIを活用すればすばやくライブラリを読み込むことが出来ます。 <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // Load jQuery google.load("jquery", "1.2.6"); google.setOnLoadCallback(function() { // Your code goes here. }); </script> 直接読み込むことも出来ます。
CSSスプライトを生成する「grunt-spritesmith」
CSSスプライトを生成する「grunt-spritesmith」 grunt-spritesmithはCSSスプライトを生成するGruntモジュールです。 Gruntの基本的な使い方は「Gruntで始めるWeb制作の自動化 - to-R」を参照に。 grunt-spritesmithのインストールは以下のコマンドです。 npm install grunt-spritesmith --save-dev Gruntfile.jsの内容は以下のようにします。srcで個別の画像を置くディレクトリを、destCSSで関連するCSSを書き出すファイル名(SassやLess、StylusでもOK)を、destImgで結合したスプライト画像のファイル名を指定します。 module.exports = function(grunt) { //グラントタスクの設定 grunt.initConfig({ spr
Google Chrome 32でスマホのエミュレーションを行う
Google Chrome 32でスマホのエミュレーションを行う Google Chrome 32になってスマホなどのエミュレーションを行う方法がわからなくなっていたのですが、教えてもらったのでメモっときます。 追記：最新バージョンでの利用方法は以下のエントリーに記述しました。 Google Chrome 37でスマホのエミュレーションを行う Macなら⌘ + option + i、WindowsならF12でデベロッパーツールを表示。 右上の アイコンをクリックして設定画面を表示。Overridesにある「Show 'Emulation' view in console drawer」にチェックを入れて設定画面を閉じます。(2014/1/31追記) 上部のタブで「Elements」を選択。 右上のアイコンをクリックすると画面下部にウィンドウが表示されます。 右側の「Emulation」タブ
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; }) }); } セレクタで指定した要素でアラートを表示するだけの簡単なプラグインです。(プラグインの作り方は「
File APIを使ってみよう
File APIを使ってみよう このエントリーはjQuery Advent Calendar 2013の 5日目のエントリーです。(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。) 今回はFile APIを利用してローカルファイルの内容をページに表示する方法を解説します。 File APIが利用できるブラウザではwindowオブジェクトにFileプロパティが設定されているので以下のようなスクリプトでFile APIが利用できるブラウザと利用できないブラウザで処理を切り分けることができます。 if(window.File){ alert("File APIが利用できます"); }else{ alert("File APIが利用できません"); } サンプル1 ちなみにIEはIE10からFile APIが利用できます。 Fil
イベントデリゲートで理解するjQueryのonメソッド
イベントデリゲートで理解するjQueryのonメソッド このエントリーはjQuery Advent Calendar 2013の 1日目のエントリーです。(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。) イベントデリゲートとonメソッドについて解説します。 onメソッドはjQuery 1.7で新たに追加されたメソッドで、それまで利用されていたbindメソッドやliveメソッド、delegeteメソッドの代わりに利用できるメソッドです。 onメソッドの使い方を理解するにはJavaScriptのイベントバブリングを利用したイベントデリゲートを知るのが一番よいでしょう。 イベントバブリングとは? clickなどのイベントはイベントが発生した要素から親要素に伝播されます。これをイベントバブリングといいます。簡単なサンプルで解説し
jQueryオブジェクトとは?
jQueryオブジェクトとは? このエントリーは軽めのjQuery Advent Calendar 2012の20日目のエントリーです。 よくjQueryの解説などを見ていると「jQueryオブジェクト」という単語が出てきますね。今回はjQueryオブジェクトとは何者かを解説をします。読み終える頃には少しだけJavaScriptに詳しくなれるよ。（若干長いです。） そもそもオブジェクトとは? さて、「jQueryオブジェクト」を解説する前にJavaScriptのオブジェクトについて解説します。JavaScriptのオブジェクトは非常に複雑なのですが、基本だけでもわかるとJavaScriptやjQueryの学習効率が全然かわってきます。 まず、ざっくりと解説するとオブジェクトとは「プロパティ」と「メソッド」を持つ構造体のことです。 プロパティとは? ではプロパティとはなんでしょうか?プロパテ
iOSにおけるviewportの指定方法による細かい違い
iOSにおけるviewportの指定方法による細かい違い iOSではviewportの指定方法が異なると細かいデバイスの挙動が変わってきます。 検証はiPhone(iOS6.1)のみで行っているのでiPadやiOS7ではちょっと違うかも。 まず、以下のような数値によるviewport指定をPCモードとし、 <meta name="viewport" content="width=960px"> 以下のようなdevice-widthによるviewport指定をSPモードとして解説を進めていきます。 <meta name="viewport" content="width=device-width"> ズーム率 ピンチインピンチアウトで拡大できる上限は、PCモードでは15倍、SPモードでは5倍まで拡大可能です。 ダブルタップの挙動 テキストが記述された要素などをダブルタップすると、PCモード、
メディアクエリをまとめるGruntタスク「grunt-combine-media-queries」
メディアクエリをまとめるGruntタスク「grunt-combine-media-queries」 CSSソース内に散らばったメディアクエリをまとめたいと思って調べたらGruntタスク「grunt-combine-media-queries」に行き当たりました。 CSSソース内に散らばったメディアクエリとはどういうことかというと、レスポンシブWebデザインでPC向けとSP向けのCSSを記述しなくてはいけないときに、以下のようにPC向けとSP向けの記述をなるべく近くに書くことでCSSのメンテナンス性が高まる反面、１つのCSSファイルに同様なメディアクエリが散らばってファイルサイズを増加させてしまいます。 .header{ width:950px; } @media screen and (max-width: 640px) { .header{ width:auto; } } .footer
Gruntで始めるWeb制作の自動化
Gruntで始めるWeb制作の自動化 Grunt.jsとはWeb制作の様々なタスクを自動化してくれるツールです。 node.jsで開発されており、Sass/CompassやLessなどのCSSプリプロセッサーのコンパイルやCSS/JSの結合圧縮、JSHintによるバリデーションなど様々なタスクを自動で行ってくれます。 インストール まずはnode.jsをインストールします。公式サイトでインストーラーが配布されていますので簡単にインストールが可能です。 次にMacではターミナルを開いてgrunt-cliをインストールしましょう。cliとはCommon Language Infrastructureの略でコマンドラインからGruntを利用するためのツールです。 sudo npm install -g grunt-cli パスワードが聞かれるので入力してください。成功すればgrunt-cliのイ
Android、iPhoneではbutton要素にtext-overflow:ellipsisが適用されない
Android、iPhoneではbutton要素にtext-overflow:ellipsisが適用されない お仕事でちょっとハマったので共有です。Android、iPhoneではbutton要素にtext-overflow:ellipsisが適用されません。 次のようなCSSを適用した場合、iPhone(iOS4-6)、Android(Android4.12)ではp要素はtext-overflow:ellipsisが適用されていますが、button要素にはtext-overflow:ellipsisが適用されません。 p,button{ width:100px; overflow:hidden; text-overflow:ellipsis; white-space: nowrap; } サンプル すこし不細工ですがbutton要素の内側にspan要素などを記述すればtext-overf
これからフリーランスになる人へ
これからフリーランスになる人へ 私の経験からこれからWeb制作の受託でフリーランスになる人へのアドバイスを書いてみたいと思います。あくまで私の経験からですので人により参考になること、ならないことがあると思います。 ちなみに、私は4年ほどフリーランスをしてから株式会社まぼろしに合流しているので今は完全なフリーランスではありません。(執筆やセミナーは個人事業として受託しています。) いつフリーランスになるのがいいのか? やる気があるならいつなってもいいと思います。むしろなりたいと思った時がなり時です。慎重に準備するのも良いのですが、やった事がないことに向けて準備するというのは結構非効率です。 向いてなかったら就職する いざフリーランスになってみてうまくいかなかったら、すぐ就職しちゃえばいいです。フリーランスになることをあまり特別視せずに、軽い気持ちでやればいいと思います。 運転資金 Web制作
Google Chromeでスマホサイト制作
Google Chromeでスマホサイト制作 @ichigamiさんからTwitterで「Chrome の開発者ツール、下でなくて右に表示させることができるの知らんかったー」とコメントを貰ったので、普段わたしがどんな感じでスマホサイト制作をしているかご紹介します。 追記：最新バージョンでの利用方法は以下のエントリーに記述しました。 Google Chrome 37でスマホのエミュレーションを行う 基本的には開発者ツールは右に表示。これは開発者ツールの左下のアイコンを長押しで設定できます。 他にも右下の歯車の設定から、「Device metrics」にチェックを入れ「Screen resolution」を320×480に設定して表示領域をスマートフォンと同じくらいになるように設定して、「Emulate touch events」にチェックを入れタッチイベントをエミュレートしています。案件によ
Re:初心者のコーダーでも簡単に実装出来るJavaScript/jQuery Tips
Re:初心者のコーダーでも簡単に実装出来るJavaScript/jQuery Tips ネタ元:初心者のコーダーでも簡単に実装出来るJavaScript/jQuery Tips : アシアルブログ ちょっと気になるコードがあるのでツッコミを。 １．現在見ているページのナビゲーションをアクティブにする if (document.URL.indexOf("001.html") != -1) { $("nav a.top").toggleClass("on"); } else if (document.URL.indexOf("002.html") != -1){ $("nav a.list").toggleClass("on"); } class属性の付加にtoggleClass()を利用しているけどaddClass()のほうがシンプルでよいです。 if (document.URL.index
Google ChromeでCSSがSassの何行目に記述されているか確認する方法
Google ChromeでCSSがSassの何行目に記述されているか確認する方法 Google Chromeでは表示しているサイトのCSSがSassの何行目に記述されているか簡単に確認することができます。 Sassで作られたサイトのCSSをGoogle Chromeで確認しようとするとインスペクタには以下のように表示されます。 このままだと、どのSassファイルの何行目に記述した内容が反映されているかわからないですね。 これを次のように変更します。Sassというか私は基本的にCompassを利用しているのconfig.rbを以下のように変更しコンパイルします。 sass_options = { :debug_info => true } output_style = :expanded #output_style = :compressed 次にGoogle Chromeのインスペクタの
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ AndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません) iOS 8.4.1の:hover問題 iOS 8.4.1で:hoverを指定していると1タップでページ遷移できない問題 【STINGER5】AndroidのChromeで＆nbsp;が「・」になってる気がする | ビビビッ を に変更すると直るとのこと。 Mobile Safari 8でposition: fixedした擬似要素が完全に位置が固定されない - Weblog - Hail2u.net Mobile Safari 8でposition:
これからjQueryを始める方へ -入門書の選び方・読み方-
これからjQueryを始める方へ -入門書の選び方・読み方- 先月「Web制作の現場で使うjQueryデザイン入門(以下、ドーナツ本)」の改訂版を出版し、昨年末は「やさしくはじめるWebデザイナーのためのjQueryの学校(以下、jQueryの学校)」の監修をおこなっていたので、ここ半年はずっとjQueryを始める方が、何を求めているか何でつまづいているかを改めて考えなおしておりました。 まず、最初に重要なのはどの入門書を選ぶかということ。 「ドーナツ本」は3万部を売り上げた人気書籍なわけですが、すべてのユーザーにマッチする本ではないと思っています。 この書籍を執筆はじめた当時はjQueryの書籍といえば「jQueryで作る Ajaxアプリケーション」や「実践!Ajaxフレームワーク jQuery」などしかなく、競合書籍として確認しましたが、プログラマー向けの書籍でした。そこで「ドーナツ本
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマホ用のブラウザ判別を行うための「 jquery.browser.sp.js 」