jQueryから離れるためのJavaScript代替ライブラリまとめ
jQueryは便利すぎて、ついつい他のフレームワークを使いながらも一緒に組み合わせて使ってしまったりします。その結果として読み込むサイズが肥大化したり、動作が重たくなったりします。特にスマートフォンのようにリソースがデスクトップほど潤沢でない場合は顕著です。 そこでjQueryから離れて代替ライブラリを使ってみましょう。多くのライブラリはjQueryを踏襲して似たような使い方ができるようになっています。 Minified.js jQueryのようにDOM操作、アニメーション、イベント、HTTPリクエストをサポートしています。また、コレクション、日付や数字のフォーマット、テンプレートといった便利ユーティリティも備えています。 サイズは4KB（ミニファイ&Gzip）で、jQuery 2.1.4の29KBに比べて大幅に軽量です。 Minified.js - A Truly Lightweight
透過がサポートされたnode-webkit（NW.js）でガジェットを作ろう
こんにちは、古見澤（コミザワ）です。 今回は、前回記事にした node-webkit が透過をサポートし始めたので、HTML5やJavascript、CSSなどのWeb系の言語でガジェットのようなモノを作ってみようという内容となります。 ↓ツイッターから情報を取得して表示するだけの単純なものですが、こんな感じのものを作れます。 動画 node-webkitって何？という方は、前回の記事も合わせてお読みください。 HTML5＋CSS3＋JSでネイティブGUIアプリが作れる、node-webkitを触ってみる ※本エントリーはWindows環境（Win7 Professional x64）での話になります。 （透過機能はMacやLinuxでも使えます、後述するマニュアルを参照ください。） また、Windows環境では、デスクトップウィンドウマネージャーが有効である必要があるため、 Aero機能
【Javascript】consoleオブジェクトが持つlog以外の便利メソッド18（後編）
こんにちは、橋本です。 前回にひきつづき、Safari、ChromeのWebインスペクターやFirefoxのFireBugで使えるconsoleオブジェクトの使い方について書いてみたいと思います。 consoleオブジェクトには以下の19個(logを除くと18個)のメソッドがあります。 assert count debug dir dirxml error group groupCollapsed groupEnd info log markTimeline profile profileEnd time timeEnd timeStamp trace warn そのうち前回は、assertメソッドからgroupEndメソッドまで見て行きました。 今回はinfoメソッドからwarnメソッドまでの使い方について書いていきたいと思います。 infoメソッド console.info(messa
JsTestDriverで簡単テスト
最近、何かとJavascriptに触れる機会が多くなってきました。クライアント側としてHTML5が注目され、サーバ側としてNode.jsが発展してきたおかげですね。その一方で、Javascriptのテストほど面倒なものはありません。特に、ブラウザ上でのテストなど自動化することが時に難しかったりします。このブラウザ上でのテストを自動化できる仕組みがJsTestDriverです。今回はJsTestDriverの導入方法と簡単な使い方をご紹介します。 JsTestDriverとは JsTestDriverはGoogleが作ったテストフレームワークです。導入も使い方もとても簡単であり、様々なブラウザを使ったテストを自動化することが出来ます。Javascriptのテストフレームワークは多数ありますが、その中でもJsTestDriverは簡単かつ正確なツールです。 JsTestDriverの導入 導入
準備が簡単。JavaScriptテストツール「Testacular」
各質問に答えていくと設定ファイルができあがります。 今回はテストフレームワークはjasmine、 ブラウザはChrome、Firefox、Safariとしています。 ※各質問の選択肢はタブで切り替えられます。 Which testing framework do you want to use ? Press tab to list possible options. Enter to move to the next question. > jasmine Do you want to capture a browser automatically ? Press tab to list possible options. Enter empty string to move to the next question. > Chrome > Firefox > Safari > Whic
ちょっと便利なJavascriptオブジェクトの作り方
今回は、ちょっと便利なJavascriptオブジェクトの作り方をご紹介します。いわゆるモジュール・パターンと呼ばれている方法です。 はじめに 最近、HTML5への注目と共に、Javascriptを使用する機会が増えてきました。以下のように適用範囲は多岐に渡っています。 通常のWebサイトでのユーザビリティ向上 スマートフォン用Webサイト開発 HTML5アプリによるクライアント・アプリ開発 スマートフォンのハイブリッドアプリ開発 Node.jsによるサーバサイド・プログラミング このように、Javascriptが基幹となる仕組みが広がっています。クライアント側とサーバ側を同じ言語で作れることは、開発側にとってはとても有難いことです（学習コストの低減、人的リソース配分の柔軟性など）。もちろん、発注者やエンドユーアにとっても開発速度などの面で利益が生まれます。 Javascriptプログラミン
JavaScriptでうっかりやってしまいそうなこと色々
こんにちは、中川です。 今回はJavaScriptで開発していると、うっかりハマってしまうちょっとした罠たちを紹介したいと思います。 JavaScriptでの開発経験者であれば、どれか一度はひっかかったことがあるのではないでしょうか？ String ●String#replace()は文字列指定では全部置き換えない 対象文字列を一括して置き換えたいなどでString#replace()を使いますが、 検索対象を文字列で指定してしまうと最初に一致した部分しか置換しません。
WebView 中の HTML のデバッグ方法まとめ
iPhone, Android で WebView を用い、HTML5 + CSS3 + Javascript でアプリを開発するケースは、PhoneGap (Cordova) が登場して以来増えつつあるのではないでしょうか。 HTML 開発には Firebug や Web Inspector といったデバッグツールはもはや必須ですよね。 そこで今回は WebView 中の HTML のデバッグ方法をまとめてみました。 1. Android 全般・iOS4 (実機・シミュレータ)・iOS5 (実機) weinre （ワイナリー）というツールが利用できます。 weinre はウェブサーバとして動作し、そのサーバが提供するスクリプト・ページにアクセスすることで、ブラウザ上でデバッグが行えます。 （なお、この方法は後述する iOS5, 6 においても利用可能です） ・インストール・サーバの起動
【Javascript】consoleオブジェクトが持つlog以外の便利メソッド18（前編）
こんにちは、橋本です。 今回と次回の２回にわたり、Safari、ChromeのWebインスペクターやFirefoxのFireBugで使えるconsoleオブジェクトの使い方について書いてみたいと思います。 Javascriptのコードをデバッグする際に、console.logを使ってメッセージやオブジェクトの内容をログに表示することがあるかと思いますが、 この「console」オブジェクト、実はlogメソッド以外にも複数のメソッドがあります。 まずは、consoleオブジェクトにどのようなメソッドがあるか、console.logを使って表示してみたいと思います。 consoleオブジェクトの中身を見てみると、__proto__オブジェクトに以下のメソッドが定義されています。 assert count debug dir dirxml error group groupCollapsed g
JavaScriptのテストランナー「testem」を試してみました。
こんにちは、中川です。 今回は「インタラクティブなJavaScriptテストフレームワークTestem 」にて紹介されていた、 JavaScriptのテストランナー「testem」を試してみたいと思います。 ※動作確認は、Mac OS 10.7、Node-v0.8.0 にて行ないました。 ■testem https://github.com/airportyh/testem ■インストール
JavaScriptのクロスドメイン問題対応方法
<!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS_CrossDomainテスト</title> <script language="javascript"> <!-- var winEntPopup; //メッセージが送られたときに反応するイベントリスナー window.addEventListener("message", receiveData, false); //データを受け取る関数 function receiveData(e) { document.FormTest.bro_info.value =e.data; } //ポップアップで呼び出し function fnc_popupWindo
JavaScriptのコーディング規約を気軽にチェック
こんにちは、中川です。 今回は「Google JavaScript Style Guide」を気軽にチェックできるClosure Linterをご紹介したいと思います。 http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml Google JavaScript Style Guideのいいところですが、 規約だけでなく、しっかりしたツールも揃っているところが素晴らしいと思います。 コーディング規約はあったとしても、それに従っているか定期的に簡単にチェックする方法がないと、 いつしか守られないまま開発されてしまうことになりますね。 ※今回の内容はMacにて動作確認を行なっています。
イラストでわかる！git入門の入門
こんにちは、アシアルの志田です。 社内でもgitが浸透し、皆バージョン管理といえばgitだよね、という空気になってきました。 ですが、これまでバージョン管理システムを使ったことがない人にオススメしても、 「gitて…まあ…そりゃ…ねえ、いつかやらないといけないけど…」 「ギット？ジット？俺はgiはジと読む派なので、gitは胡散臭いと思う」 「そもそもバージョン管理して何が嬉しいの？なんか難しそうでいやだ」 というような反応ばかりでした。 きっとみんな、gitって難しくて訳のわからんもんだと思っているのでは？と思い、 今回はgit入門の入門、gitってなんだ？というところから、簡単にgitを使う際の流れについてご説明します。 ちょっと不安を覚えるようなイラストがついていますので、頑張って読んでください。 バージョン管理ってなに？ プログラムを書いていて、こんなことありませんか？私はあります…
safari4 betaで実装されたCSS Animationを使ってみました。
こんにちは。橋本です。 さて、今日は先日公開されたsafari4 betaで実装されたCSS Animationを使ってみたいと思います。（今回のサンプルはsafari4 beta、もしくはwebkitのnightlyビルドを使ってご覧ください） CSS Animationとは何かと言いますと、文字通りCSSを使ってAnimation効果を表現する技術です。 まずこちらをご覧ください。 Falling Leaves 'Using CSS Animations and Transforms これはwebkitの公式blogで紹介されていたサンプルなんですが、この美しく舞う落葉のアニメーション効果は全てCSSで定義されています。 では実際にどのようにアニメーション効果を定義するかを見ていきたいと思います。 まず、以下のように、キーフレームを定義します。 キーフレームの定義は、「@-webkit
【ほぼ網羅】CSS3だけでアニメーションを実装する方法のまとめ
こんにちは、橋本です。 今日は備忘録がてら、CSS3のアニメーションについてまとめていきたいと思います。 iOS端末でFlashが動作しないことから、今後CSS3でアニメーションを実装する場面は増えてくると思います。 そんなときにこの記事を参考にしてもらえると幸いです。 今回の記事に記載されているサンプルですが、Safari、もしくはChromeで動作するようになっています。 IE、Firefox、Operaなどの他のブラウザは対象外です。 （なぜなら、ベンダプレフィックスを書くのがめんどくさかったからです。） 早速ですが、CSS3でアニメーションを実装するためには、以下の２つの方法があります。 1. transitionプロパティでアニメーションを定義する 2. animationプロパティでアニメーションを定義する また、アニメーションを定義する際には、通常のプロパティに加えてtran
HTML5+CSS3の導入時に役立つ7つの設定
こんにちは、鴨田です。 個人的に仕事の大半はスマートフォン関連なので、 最近のマークアップはほとんど全てHTML5+CSS3で行っています。 とはいえ、PC向けのサイトではまだまだHTML4.01、XHTML1.0、CSS2.1を使用している場合が多いと思います。 ですので、今回はHTML5+CSS3を導入するにあたって、役立つと思う7つの設定について、書きたいと思います。 １．HTML5の初期テンプレート案 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>HTML5 初期テンプレート</title> <!-- reset.cssの設定 --> <link rel="stylesheet" media="screen" href="reset.css" /> <!-- Viewportの設定 --> <meta nam
とても便利なvimのコマンド紹介
こんにちは。小川です。 今日はvimのコマンドでも紹介しようかなと思います。 僕はテキストエディタは大体vimを使っています。 執筆をしたときもvimでやっていましたし、PHPもvimで書いています。 vimって色々コマンドがあって便利ですよね。友達とvimのコマンドを教えあったりして、度々「こんな便利なコマンドがあるのか！」と驚かされます。 今日はそんなvimのコマンドの中から普段使っていて便利だなーと思うものをいくつか紹介していきます。 ちなみにShiftを押しながらのコマンドは、アルファベットキーの場合は大文字で表記します。 エンターやエスケープを押下する必要がある場合はエンターやエスケープと記述します。「:」ではじまるコマンドモードはエンターを押さないと意味がないので、そこは省略します。 同時押しは+でつなげて表記し、基本的には1文字ずつ順番に押下します。 ■ページ移動 「ggで」
iPhone向けwebアプリを作ってみる-タッチイベント、ジェスチャーイベントに関するまとめ-
こんにちは。普段からiPhoneを愛用している橋本です。 最近、「せっかくiPhone持ってるんだし、iPhone向けのアプリ作ってみようかしら？」と思い立ったのですが、iPhoneのネイティブアプリを作るには、"Objective-C"と、"cocoa Touch"というiPhone/ipodTouch向けのフレームワークを理解する必要があり、また、自分で開発したアプリを実機に入れて動かしてみるには、そこそこの費用と各種手続きが必要だったり（iPhoneエミュレータ上で動かす分には問題ないのですが…）と、何かと大変です。 「何かもっと手軽にiPhone特有の機能を活かしたアプリを作る方法はないかなぁ。。」と考え、思い立ったのがWebアプリ。Webアプリなら、今までの知識＋αでアプリを作成することが出来るのではないかと。そこで、今回から数回に渡ってiPhoneとjavascriptを使って
Macを買ったらすぐ変更する設定
こんにちは。 先日、新型MacbookAirの美しさに魅せられ、ついついMacbookAir13インチ特盛りをポチってしまった橋本です。 今日は、弊社熊谷の記事「続・続Macを買ったらすぐインストールするアプリケーション」のインスパイアの意味も込めて、アプリではなく、Macの設定変更について書いてみたいと思います。 ※注意※ 今日ご紹介させていただく内容は、ターミナルからコマンドを入力して設定を変更するものです。試してみる際には自己責任でお願いします。MacOSX 10.6.5で動作確認済です。 では、早速。 1. デスクトップ上のアイコンを消す ちょっとしたファイルを保存するときに、ついついデスクトップに保存してしまうことってありませんか？自分はよくあります。ただ、このいい加減な習慣を続けていると、いつの間にかデスクトップがアイコンで埋まってしまって、せっかくの壁紙が台なしになってしまい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.asial.co.jp/1134