サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
TGS2024
blog.webcreativepark.net
jQuery 3.0時代のコーディングお作法 / 廃止メソッド編 本エントリーは「to-R JavaScript Advent Calendar 2015」2日目のエントリー、現在α版が公開されているjQuery 3.0時代のコーディングお作法について解説を行います。 あくまでα版を元にした情報になるので注意してください。 前回はブラウザサポートやshow()/hide()の扱いに関して解説しましたが、今回はjQuery 3.0で廃止されるメソッドと廃止されたメソッドはjQuery 3.0ではどのように記述すれば動作するかについて解説を行います。 廃止されるメソッド一覧 jQuery 3.0で廃止が予定されているメソッドは以下のメソッドです。 .success() .error() .complete() .load() .unload() .error() これらは廃止されてしまいますが
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系と2つのバージョンに分かれ進化をしていきます。それぞれ基本機能は同じでサポートするIEのバージョンが異なります。 jQuery 3.x系 - IE9〜 jQuery compat 3.x系 - IE8〜 IE8対応が必要な場合はjQuery compat 3.x系を対応が不要な場合はjQuery 3.x系を選択する必要があります。 IE7以下
Web制作における対応ブラウザの選定方法 「フロントエンドのテクニカルディレクションに求められるスキル」で出てきた話題として対応ブラウザの選定方法について掘り下げて解説を行います。 サイトのターゲット・予算・リソース・開発期間などビジネスにより選定方法は異なりますので、あくまで参考程度にしてください。 対応ブラウザを絞る意味 まず最初は「なぜ、対応ブラウザを絞るのか」という視点から。 理想論で言ってしまえばWebサイトを訪れるユーザー全てに最適なコンテンツを提供できれば申し分がありません。 しかし、現実的には各ブラウザ/OSによって実装が異なる機能があったり、実装されていない機能があったり、特有のバグを含んでいる物があったりすることもあり、そういった場合は個別のブラウザ/OSに対してデバッグやチューニングを行わなくてはいけません。 そのため対応ブラウザの数が多ければ多いほど、Webサイトの
技術トレンドを追わないという勇気 昨日、「第19回 HTML5+JS 勉強会 【オレオレフロントエンド開発環境 ~際限なき修正を攻略せよ!~/甦れFlasher「swf2js」でswfをリアルタイムでcanvasに出力】」というイベントに参加してきました。 そこで講師の沖さん(@448jp)が、�「技術は目的を達成する手段なので、あまり新しい技術に振り回されてはいけない。」的なことをおしゃっていて、それはそうだなと思いながら私が最近感じている事をすこし書き留めておこうと思います。 技術トレンド圧力 フロントエンド界隈ではJavaScript/node.jsの盛況もあって毎日のように新しいライブラリ/フレームワークやツールがリリースされています。そして、それらの技術に対してアーリーアダプター的なフロントエンダーが試してはブログやQiitaでレビュー内容を記事にしたり、TwitterやFace
フロントエンドのテクニカルディレクションに求められるスキル フロントエンドの多様化が進む中で昨今重要視されているのが「テクニカルディレクション」のスキルセットです。 会社の規模や職域、ビジネスモデルにより求められるスキルセットは異なりますが、中小のWeb制作会社を前提に話をいたします。 ディレクター/フロントエンドエンジニアの作業分担 ケースとしては以下のようなパターンが考えられます。 アサインされたディレクターがテクニカルディレクションを行い、フロントエンドエンジニアが実装を行う アサインされたフロントエンドエンジニアがテクニカルディレクションとフロントエンド実装を行う アサインされたSE/テクニカルディレクターがテクニカルディレクションを行い、フロントエンドエンジニアが実装を行う。 個人的には2のケースでアサインされることが一番多いですが、最近の案件では3のケースで1年ほどテクニカルデ
watchifyでファイルの監視を行う babelifyで始めるES6ではBrowserify/babelifyを利用してES6を利用する方法を解説しましたが、gulp-watchなどを利用してファイル変更のトリガーでBrowserifyを実行すると非常に時間がかかってしまいます。そこで、watchifyを利用することで差分管理がされ高速にコンパイルすることが可能になります。 利用に至っては以下のコマンドでwatchifyとexorcistのインストールを行います。(exorcistは後ほどSourceMapを出力するのに必要) npm i -g watchify npm i -g exorcist そうすると以下のコマンドでwatchifyによる監視が可能になります。 (./src/app.jsとそこでrequireしている各ファイルで変更があったタイミングで./dist/app.jsを
緑はベンダープリフィックスが必要 前回との差異はAndroid4.4よりlinear-gradient (to bottom)に対応している点です。 Androidブラウザのシェア 現在のAndroidブラウザのシェアですが、Android4.0以下は非常に少なくなっており対応する必要はなくなってきています。 参考:Dashboards | Android Developers というわけで、-webkit-gradient()による指定はもう不要で-webkit-linear-gradient()とlinear-gradient()のみ記述しておけば、ほとんどのブラウザに対応可能です。 /*Other Browser*/ background: #91bae4; /*For Old WebKit*/ background: -webkit-linear-gradient( top, #b
babelifyで始めるES6 前回、「Babelで始めるES6入門」という記事を書きましたが、Babel単体ではES6の注目機能であるimport / exportを利用することができません。 import/export構文はnode.jsのrequire()のようなもので、JavaScriptをモジュール化し管理する為の機能です。 正確にはBabelはimport / export構文をrequire構文に変換してくれるのですが、ブラウザがrequire構文に対応していないため利用できません。 これの対応方法は様々ですが、今回はbabelifyを利用した対応方法について解説します。 babelifyはBrowserifyのtransformでBrowserifyの処理の中にbabelの処理を組み込めるモジュールです。 ちなみに、Browserifyはrequire構文をブラウザでも利用
Babelで始めるES6入門 BabelとはJavaScriptの新規格であるES6 ( ECMAScript 6th Edition/ECMAScript 2015 ) で書かれたJavaScriptコードを古いブラウザでも解釈できるようにES5の書式に変換してくれるツール(JavaScriptトランスパイラ)です。 利用方法は様々ありますが今回はgulpでBabelを利用する方法と、ES6の主要な機能をBabelがどのようにES5に変換するかについて解説を行います。 (gulpに関しては、「タスクランナーgulp入門」を参考にしてください) gulp-babelのインストール gulpでBabelを利用するにはgulp-babelをインストールする必要があります。インストールは以下のコマンドで可能です。 sudo npm install gulp-babel --save-dev gu
SVGの利用 今更感ではありますが当サイトのロゴをpng画像からSVGに変更しました。 SVGの利用に関しては松田さんの書いたIllustrator&ベクターデータの教科書 を参考にさせていただきました。 SVGコードの取得 まず、Illustratorのアウトライン化したロゴからコピペでエディタにSVGのコードを貼り付けられます。 以下の様なXMLがクリップボードに格納されるのでコピペで終了です。 <!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSV
canvasでドロネー三角形分割を描く 前回はcanvasで三角形の外接円を描きましたが今回はそれを発展させてドロネー三角形分割を書いてみたいと思います。 ドロネー三角形分割とはなにかといいうとランダムな点を1頂点とする三角形を作ることが可能なのがドロネー三角形分割です。以下の完成サンプルを見てもらったほうが早いですが、流行りのポリゴンスタイルを実装するための手法です。(ES6で書いているためGoogle Chromeで確認してください) See the Pen ドロネー三角形分割を描画5 by Kazuma Nishihata (@to-r) on CodePen. 順を追いながら解説していきます。 ステージにランダムなポイントを20個配置 前回のサンプルではランダムな3点を頂点とする三角形を描画しましたが、まずは、そこら辺の処理は削除してしまいランダムな20点を描画します。 const
iOS 8.4.1の:hover問題 追記(2015年10月23日) iOS 9.0.2で確認した所この問題は解決していました。 ネタ元:結構緊急リンクが飛ばない iOS 8.4.1からCSS :hoverも1クリックカウントっぽいSafari | WEBスキルアップ君 上記の件、結構やっかいな問題なのでiPhone6+をiOS 8.4.1にアップデートして色々と検証してみました。 どんな現象になるの? 以下のサンプルで確認できます。 a:hover img{ opacity:0.6; } <a href="http://blog.webcreativepark.net/"><img src="button.png" alt="button"></a> サンプルページ iOS 8.4.1をお持ちでない方は以下の動画で確認できます。 SPサイトなら:hoverを利用するケースは少ないので使わ
jQueryのtrigger()で名前空間を使う 前回の「jQueryのoff()を使いこなす」ではイベントのアンバインディング時の名前空間の指定方法について解説しましたが、名前空間はtriggerメソッドでも利用できます。 次のように複数のイベントがバインディングされている場合、影響範囲を考慮せず「$("#bar").trigger()」などを利用すると予期せぬ処理が走ってしまいます。 $("#bar").click(function(){...(中略)...}); ... (中略) ... $("#bar").click(function(){...(中略)...}); off()の時も説明しましたが、アクセス解析のツールがイベントを勝手にバインディングしている可能性もあり、基本的にあなたが把握していないイベントがバインディングされている可能性があることを前提にコードを書かなくてはいけ
jQueryのoff()を使いこなす jQueryにはバインディングしたイベントを取り除くoffメソッドがありますがこれは影響範囲を考慮せず利用すると想定しないイベントまで取り除いてしまいます。 イベントを限定する 例えば以下のように#barにclickイベントとmouseoverイベントがバインディングされてるとします。 $("#bar").click(function(){...(中略)...}); ... (中略) ... $("#bar").mouseover(function(){...(中略)...}); ある条件の場合、clickイベントが不要なケースで単純に「$("#bar").off()」とするとclickイベントもmouseoverイベントも取り除かれてしまいます。 そういったケースを防ぐ為にイベントを引数で指定します。 $("#bar").off("click");
[書評]Web制作者のためのGitHubの教科書 Web制作者のためのGitHubの教科書をちょっと前に献本いただきました。 本書は非エンジニア向けに「GitHub」の利用方法が書かれた一冊です。 これからGitやGitHubを覚えたい人や覚えなくてはいけない人には間違いなくお勧めの一冊です。 本書の特徴はすごく敷居をさげ、すごく丁寧に解説されている点です。技術書には珍しくストーリー仕立てになっており、架空のWeb制作会社オクトリンク株式会社のWebデザイナー渋谷さんが先輩デザイナーの白金くんやディレクターの白樹さんに教わりながらGitHubの使い方を覚えていくとストリーになっております。 苦手意識をもつ人が多いGitHubだけに、最初のステップとして本書ぐらいのライトな書籍で使い方を覚えれば躓くことも少ないでしょう。また、本書でGitHubやGitの基礎を理解した後に「Git逆引き入門」
そして結論として以下のように書いております。 このようにIE8やGoogle Chromeなどでは数ミリ秒遅くなってしまうがIE6やIE7に対応する場合にはclass属性への要素の付加は必須のパフォーマンス対策である。 つまり、「jQueryのclassセレクタに要素名を付ける」というはIE6やIE7でjQueryのセレクタを高速化するテクニックとして紹介しています。本が発売された当時はIE8が最新ブラウザでIE6やIE7が必須という案件は非常に多かった時代なのでしかたなかったわけです。 とうぜんコメント欄で指摘されているようにIE9以降ではgetElementsByClassNameが採用される「要素名を付けない」パターンのほうが高速化されますし、書籍に書いてあるとおりquerySelectorAllが採用されるIE8においても「要素名を付けない」パターンのほうが高速化されます。 「Ja
iPhone 6でのスマートフォンデザイン iPhone 6の発売日を明日に控え今後のスマートフォンサイトデザインをどのようにしていけばよいかSNSで見かける悲鳴を拾い上げながらQ&A形式で答えて見たいと思います。(実物を手に入れて間違っていたら後日修正します) Q.1 iPhone 6の解像度が750×1334でdevice-pixel-ratioが2だとCSS解像度は375×667だけど横幅320pxでデザインしても大丈夫? A.1 横幅320pxでデザインしても大丈夫。基本最近のスマホ対応では多解像度に対してリキッドでフィットするようにするのが主流。 リキッドの場合ベースデザイン320pxを375pxに広げて表現するのは難しくないが、ベースデザイン375pxを縮めて320pxで表現するのは至難の業なのでスマートフォンデバイスでの最小幅である320pxでのデザインは当分続きます。 Q.
5分でわかるWebRTCの仕組み - html5minutes vol.01 先週末に行われた「第1回 HTML5minutes!! 〜triton-js〜」で発表したスライドを公開いたします。 「5分でわかるWebRTCの仕組み」と題していますが、5分でわかるのは厳しいと思います。タイトルで大風呂敷を広げすぎました。 ただ、要点をギュッと絞り込んでいるのでWebRTCの仕組みをざっくりと理解するには良いスライドだと思いますので興味がある方はご覧になってください。
Re:jquery 1.xと2.x の違い、さらに動作を音速にするための設定 ネタ元 : jquery 1.xと2.x の違い、さらに動作を音速にするための設定 ちょっとツッコミどころが多いので突っ込んでおきます。 使い分ける <!--[if lt IE 9]> <script src="jquery-1.9.1.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="jquery-2.0.0.js"></script> <script src="js/jquery-migrate-1.2.1.min.js"></script> <!-->![endif]--> jQuery 2.xのベータ版が公開されていた際にはjQueryは条件付きコメントで読み込むことを想定していました(上記コードはその時のオフィシャルのコードに
CSS Nite LP35「マルチデバイス対応 2014」終了しました。 6月14日(土)に行わなれたCSS Nite LP35「マルチデバイス対応 2014」が終了しました。 わたしは「トラブルシューティング2014」と題して、いつものように、弊社木村と掛け合い漫談でお送りしました。 今回はブラウザなどのバグの他にレスポンシブWebデザインのトラブルシューティングの内容をお送りしました。 いくつか質問をいただいたので解答いたします。 マルチデバイス対応 = レスポンシブということでみなさん話されていたと思うのですが、その他(UserAgentきりかえ)はもうやめるべきなのでしょうか? レスポンシブWebデザインは万能ではありません。サイトの要件によってはPCサイトとSPサイトを別HTMLで作ったほうが良いケースもありますので、事前にどちらが適しているか精査する必要があります。 PC切り替
Re:フリーランスの心得(初期編)「フリーランスは決してカッコいい働き方ではないし、自由でもない」 ネタ元:フリーランスの心得(初期編)「フリーランスは決してカッコいい働き方ではないし、自由でもない」 タイムラインに流れてきた記事ですが、色々と思うことがありツッコミを入れておきたいと思います。 ネタ元の筆者はフリーランス歴14年目のフリー編集者ということで時代も業態も違うので世界が違うのですが、Web業界に関しては全く当てはまらないかなと思います。 そもそも人生を犠牲にしてフリーランスになる必要はない ネタ元で一番気になったのは「心得その2:結婚と子供は一旦諦める」。 結婚と子供という人生において重要なファクターを犠牲にしてまでフリーランスになる必要があるのかということ。そんな重要なことを諦めてまでフリーランスになって何をしたいのかということを考えなくてはいけません。 なぜフリーランスにな
gulp.spritesmithを便利にカスタマイズ 「gulp.spritesmith」はCSSスプライトを生成するためのgulpプラグインです。 spritesmithの利用方法は『CSSスプライトを生成する「grunt-spritesmith」』を参照していいただくとしてgulpで行なったカスタマイズを紹介します。 gulpの使い方は「タスクランナーgulp入門」を参照してください。 gulp.spritesmithでちょっと面倒くさいなと感じていたのは1タスクで書き出されるスプライト画像のスプライト用のCSSが1つだということ。たとえば下記のように指定をすると「sprite」というディレクトリにスプライト用の画像を突っ込んでおくとsprite.pngとsprite.scsssというファイルが出力されます。 var spriteData = gulp.src('sprite/*.pn
スマホ用のスワイプギャラリーjQueryプラグイン「jquery.swipeGallery」 スマホで利用できるスワイプ可能なスライドギャラリー用のjQueryプラグイン「jquery.swipeGallery」を公開しました。指で画面をスワイプすると画像が切り替わるアレです。 ダウンロード / サンプル(スマホで見てね) / GitHub スワイプ系のギャラリーとしては珍しい無限ループに対応しているプラグインです。 利用方法 jQueryを読み込みその後にjquery.swipeGalleryを読み込みます。 <script src="jquery.js"></script> <script src="jquery.swipeGallery.js"></script> CSSファイルも読み込みます。 <link rel="stylesheet" href="jquery.swipeGal
スマホ用のブラウザ判別を行うための「 jquery.browser.sp.js 」 普段スマホ用のブラウザ判別を行うために利用しているjQueyプラグインを公開したのでご紹介します・ ダウンロード / GitHub 利用方法 jQuery本体を読み込んだ後にダウンロードしたjquery.browser.sp.jsを読み込みます。 <script src="jquery.js"></script> <script src="jquery.browser.sp.js"></script> そうすると以下の様な$.browserオブジェクトが利用できるようになります。
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の呼び出しを
Sassなどのエラー時にgulpタスクを終了させない為の「gulp-plumber」 gulpを利用しているとSassなどのコンパイルエラーが出た際にwatchなどのタスクが強制終了されてしまいます。エラー時にタスクを強制終了させないためのプラグインが「gulp-plumber」です。 (gulpの使い方は「タスクランナーgulp入門」を参照) まず、以下のコマンドでgulp-plumberをインストール。 sudo npm install gulp-plumber --save-dev 利用時には以下のよう他の処理の前に「.pipe(plumber())」と記述します。 var gulp = require('gulp'); var sass = require('gulp-sass'); var autoprefixer = require('gulp-autoprefixer');
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はGruntと同じように様々なタスクを自動化してくれるツール(タスクランナー)です。 node.jsで開発されており、Sass/CompassやLess、StylusなどのCSSプリプロセッサーのコンパイルやCSS/JSの結合圧縮、JSHintによるバリデーションなど様々なタスクを自動で行ってくれます。 Gruntとできることはほとんど同じですが、Gruntよりタスクの流れがわかりやすく、JavaScript(node.js)で独自のタスクも簡単に記述することができます。 後発ということもありGruntよりプラグイン数は少ないですが、マニアックなタスク以外はそろっているので通常のWeb制作などでは問題なく利用できるでしょう。 node.jsのインストール node.jsが必要ですのでインストールしていない方はインストールしましょう。 公式サイトでインスト
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
次のページ
このページを最初にブックマークしてみませんか?
『[to-R]JavaScriptやSEO対策、CSS、Movable Typeなどの情報を発信』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く