Angularによるスライドアニメーション
Angularによるスライドアニメーション Angularでいわゆるスライドアニメーションを実装するための方法です。 Angular 4 +での初期設定 Angular4 よりanimation系は@angular/coreより除外されていますので、@NgModule内で@angular/platform-browser/animationsより取得したBrowserAnimationsModuleをimportsに設定しておき、@angular/animations より trigger, state,style, transition, animate, keyframesをimportしておきます。 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; . . . @NgModu
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でファイルの取得などを行うためローカルサーバーの設定が
anyenv+ndenvでプロジェクトごとにnode.jsのバージョンを切り替える
anyenv+ndenvでプロジェクトごとにnode.jsのバージョンを切り替える 複数のプロジェクトが並行で走っており、それぞれで異なるnode.jsのバージョンが必要な場合は利用するnode.jsのバージョン管理が必須になってきます。 node.jsのバージョン管理にはnodebrewやnodist、nvmなど様々なツールがあります。 ndenvはいわゆる**env系のnode.jsバージョンで、**envではnodenv以外にもrubyのバージョンを管理するrbenvや、PHPのバージョンを管理するphpenvなど様々な言語のバージョンが存在します。 **envにはanyenvと呼ばれる管理ツールが存在するため、ローカルで複数の言語のバージョンを管理しなくては行けない人にはお勧めのツールです。 anyenvのインストール anyenvは以下のコマンドでインストールを行います。 git
webpackでJavaScriptライブラリを利用する
webpackでJavaScriptライブラリを利用する webpackで様々なJavaScriptライブラリをコマンドラインからインストールして利用する事が可能になります。 webpackのインストールと利用方法 まずプロジェクトフォルダで以下のコマンドでpackage.jsonを作成します。 npm init -y 次にwebpackを以下のコマンドでインストールします。 npm install --save-dev webpack webpackをインストールしたならpackage.jsonと同一階層にwebpack.config.jsという設定ファイルを作成します。 設定内容はひとまず以下のようにしておきます。これは./src/script.jsの内容をコンパイルして./dist/script.jsに出力するという命令です。 module.exports = { entry: __
babelifyで始めるES6
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構文をブラウザでも利用
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が必要ですのでインストールしていない方はインストールしましょう。 公式サイトでインスト
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のイ
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
jQuery 2.0を利用するために注意すること
jQuery 2.0を利用するために注意すること 4月18日にjQuery 2.0がリリースされました。これまで1.x系でバージョンアップを進めてきたjQueryでは初のメジャーバージョンアップとなります。 jQuery 2.0がjQuery 1.x系と大きく異なるのは、これまでjQueryはIEのバージョンは6以上をサポートしてきましたが、jQuery 2.0ではIE9のバージョンは9以上がサポートとなります。 誤解しないようにして欲しいのはjQuery がIE8以下を切り捨てたわけではないということ。jQuery 1.x系は今後もバージョンアップされていき、jQuery 1.x系はjQuery 2.x系と基本的には同じ機能が実装される予定です。ちなみにjQuery 1.x系の次のバージョンはjQuery 1.10です。 jQuery 1.x系とjQuery 2.x系の使い分け 追記:正
これからjQueryを始める方へ -入門書の選び方・読み方-
これからjQueryを始める方へ -入門書の選び方・読み方- 先月「Web制作の現場で使うjQueryデザイン入門(以下、ドーナツ本)」の改訂版を出版し、昨年末は「やさしくはじめるWebデザイナーのためのjQueryの学校(以下、jQueryの学校)」の監修をおこなっていたので、ここ半年はずっとjQueryを始める方が、何を求めているか何でつまづいているかを改めて考えなおしておりました。 まず、最初に重要なのはどの入門書を選ぶかということ。 「ドーナツ本」は3万部を売り上げた人気書籍なわけですが、すべてのユーザーにマッチする本ではないと思っています。 この書籍を執筆はじめた当時はjQueryの書籍といえば「jQueryで作る Ajaxアプリケーション」や「実践!Ajaxフレームワーク jQuery」などしかなく、競合書籍として確認しましたが、プログラマー向けの書籍でした。そこで「ドーナツ本
Re:美しいプログラムを書く(業務用Webアプリケーション保守編)
Re:美しいプログラムを書く(業務用Webアプリケーション保守編) ネタ元：美しいプログラムを書く(業務用Webアプリケーション保守編) 僕だったらこう書くかな。 $(function(){ //set obj var newInput = $("input[name='new_version']"); var oldInput = $("input[name='old_version']"); //init newInput.eq(0).attr('checked','checked'); oldInput.eq(0).attr('checked','checked'); //set event newInput.change(function () { var index = newInput.index(this); oldInput.eq(index).attr('checked'
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
