Ajax Minifierの概要 Ajax MinifierはMSNチームのRon Logon氏が作成したツールです。Ajax Minifierは次のような処理を実施してJavaScriptのサイズを小さくします。 コメントの削除 不要な空白の削除 不要なセミコロンの削除 参照されていない関数の削除 不要な括弧の削除 ローカル変数と関数の名前の短縮 文字列のシングルクォーテーションとダブルクォーテーションの調整 隣接した変数宣言のとりまとめ 実行されないコードの削除 入手とインストール Ajax MinifierのWebページ それでは、Ajax Minifierのインストールの方法を説明しましょう。インストールプログラムはCodePlexのASP.NETページから無償でダウンロードできます。 本稿では執筆時点で最新のバージョン4.0を使用します。インストールは「AjaxMin4Setup
HTML 5では、ドラッグ&ドロップを直接サポートするためのAPIが整備された。以前はmousedown、mousemove、mouseupを利用してドラッグ&ドロップを実現していたが、ブラウザによるネイティブサポートが実現した事で、他のアプリケーションともデータをやり取りできるようになり、コーディングも簡略化された。 HTML 5でドラッグ&ドロップを実現するための最小限の手順は以下の通りだ。 ドラッグ対象となる要素に「draggable="true"」という属性値をセットする。これにより、対象の要素がドラッグ可能となる。ちなみに、img要素やa要素(hrefの指定が必要)はデフォルトでドラッグ可能である ドラッグ&ドロップ関連のイベントを処理するようコードを記述する。以下のようなイベントが存在する イベント名イベントの通知先説明 dragstartドラッグ対象の要素ドラッグが開始さ
The CSS Ninja is a personal blog and playground where I can put my skills and ideas out into the public. 5以降のバージョンのChromeを使っているのであれば、Gmailにおけるファイルのアップロードやダウンロードは、デスクトップ間でのドラッグ&ドロップで操作できる。こうした機能を実現するには、これまではエクステンションやプラグインのインストールが必要だった。ChromeではJavaScriptとHTMLのみでこうした機能を実現できる。 Gmail、ドラッグ&ドロップで添付ファイルのダウンロードが可能に Gmail、メール文中の画像挿入がドラッグ&ドロップで可能に Gmail、ドラッグ&ドロップでファイル添付が可能に もっとも最近Gmailに追加された機能はドラッグ&ドロップによるファ
Ajaxian IE9がCanvas要素をサポートすることで、これまで広く使われてこなかったテクニックが、もしかしたら注目されることになるかもしれない。Ajaxianに掲載されているWant to pack JS and CSS really well? Convert it to a PNG and unpack it via Canvasという記事で、2008年に公開されたJacob Seidelin氏の記事"Compression using Canvas and PNG-embedded data - Nihilogic"がふたたび取り上げられており、その可能性を示すものとして興味深い。 Compression using Canvas and PNG-embedded dataで紹介されているテクニックは、JavaScriptやCSSをPNG画像データとして利用するというもの。も
Zen-Codingのその他の機能 前回はHTMLやCSSのコーディングを助ける「Zen-Coding」について、そのコード展開の機能を中心に紹介した。しかしZen-Codingに用意されて機能はそれだけではない。Notepad++の場合、コード展開以外に次のような機能がサポートされている。 ショートカットキー 機能 Ctrl + Shift + A 選択範囲を指定のタグで囲む Ctrl + Shift + D カーソルのある位置を囲む開始タグから終了タグまでを選択する Ctrl + Alt + ] 次の編集位置(属性の値など)にカーソルを移動する Ctrl + Alt + [ 前の編集位置にカーソルを移動する Ctrl + Alt + L カーソルのある位置のタグと対になっているタグに移動する(開始タグ< - 終了タグ>) Ctrl + Alt + M 複数行にまたがっているタグ(ネスト
Firefox web browser - Faster, more secure & customizable a quick note on JavaScript engine components ★ Mozilla Hacks - the Web developer blogにおいて、最近追加された技術も含めてFirefoxで利用されているJavaScript技術が簡単にまとめられている。FirefoxはJavaScriptの処理性能を改善する目的で新しくJaegerMonkey / Nitroを導入したが、従来の技術も含めて若干の誤解が見られるという。簡単に関係を説明することで、こうした誤解を払拭する狙いがある。 ニトロでブースト - Firefox、新しい高速化技術を導入 Firefox 3.6のJavaScript高速化技術まとめ 紹介されている技術をまとめると次のとおり。
FirePHP enables you to log to your Firebug Console using a simple PHP method call. WebサイトやWebアプリケーションを開発する言語としてPHPは人気がある。世界最大規模のソーシャルネットワークサービスFacebookもサービスの開発にはPHPを採用している。提供するサービスが大規模になると一部をC/C++化して高速化をはかることもあるが、開発エンジニアの集めやすさやアジャイル性の良さもあって主要言語のひとつであり続けている。 HTML/CSS/JavaScriptをベースにWebサイトやWebアプリケーションを開発する場合、開発ツールとしてFirebugやブラウザベンダが提供しているデバッグツールが利用できるが、PHPのようにサーバサイドで動作するタイプの言語ではそう簡単にはいかない。しかしいくつか便利な
Jeremy Ashkenas氏がRuby/Pythonライクな文法でJavaScriptを記述する、興味深い試みをおこなっている。同氏が開発した「CoffeeScript」と呼ばれる簡易言語は、"a little language that compiles into JavaScript"の名のとおり、コンパイルするとJavaScriptコードを出力するというものだ。Ruby製のコンパイラが用意されており、デベロッパはCoffeeScriptで書かれたファイルをコンパイラに通すことでJavaScriptコードを得られる。 CoffeeScriptで記述されたソースをコンパイルした結果。左側にCoffeeScript、右側にコンパイル後のJavaScriptが表示されている - Mini Overviewより引用 現在のバージョンは1月10日(米国時間)にリリースされた0.2.3で、Th
前回までで、基本的なデータ型を拡張したメソッドを紹介してきた。今回からは、JavaScriptによる処理に関する拡張メソッドを紹介していこう。まずは配列、関数、イベントだ。説明に用いるPrototype.jsのバージョンは、本年1月にリリースされた1.6.0.2とする。 ただしメソッドの数が多く本稿ではその一部しか紹介できない。詳細はAPIリファレンスなどを参照していただきたい。また、省略可能な記述は[〜]で表す。 配列(Array)のメソッド Arrayに対する拡張メソッドは、それ自身のものだけでなく、要素の集合に対する操作を便利に行うEnumerableのメソッドも含むため、拡張メソッドの数が特に多い。そのためここでは、メソッド名だけでは、そのはたらきが分かりにくいものについて利用例を示す。 配列.compact() nullでない要素のみの配列を生成。 ['a', null, 'b'
qooxdooとは qooxdoo(クークスドゥー)はJavaScriptをベースとしたAjaxアプリケーションフレームワークである。通常のWebアプリケーションフレームワークとは趣向が異なり、HTMLやCSSをいっさい記述することなく、JavaScriptのコードのみでAjaxを利用したインタラクティブなWebアプリケーションを開発することができる。DOMなどの知識も必要なく、使うのはqooxdooで用意されたオブジェクト指向ベースのJavaScript APIのみ。 たとえばWebページ上に表示するボタンやリスト、テーブル、フォームなどのGUI部品もすべてqooxdooのAPIでラップされており、利用するためにHTMLやDOMを意識する必要はまったくない。それどころか、ウィジェットをさまざまな形で配置するためのコンテナや、レイアウトを自動で整えるレイアウトマネージャなども用意されており
Firefox web browser - Faster, more secure & customizable Paul Rouget氏がFirefox: 46 features you might not know about ★ Mozilla Hacks - the Web developer blogにおいて、Firefox 3.0から3.6の間にFirefoxの追加された46の新機能をまとめている。よく知られている新機能ではなく、詳しい開発者は知っているもののそれ以外のユーザは知っていそうにない機能がまとめられている。Firefoxが3系に入ってからどういった細かい機能の改善や新機能の追加が実施されてきたかが一覧にまとまっていてわかりやすい。掲載されている機能は次のとおり。 CSS 対象 内容 @font-face 3.5+ オンラインフォント表示機能。3.6はWOFFおよびT
20日(米国時間)、Firebugの最新版であるFirebug 1.5.0がリリースされた。FirebugはFirefoxアドオンのひとつで、閲覧しているWebページのHTMLやCSS・JavaScriptを解析するWebデバッガだ。Firebug 1.5.0ではブレーク機能に関する機能が大幅に追加され、より直感的にデバッグが可能となった。概要やアップグレードの手順については「Firebug 1.5.0、登場」に詳しくまとめられているので併せて参照されたい。 おもな更新点は次のとおり(「Firebug 1.5.0、登場」より引用。詳細はリリースノートを参照)。 機能拡張されこれまででもっとも堅固なインスペクタ機能 新しいデバッグ機能「ブレークオン」の導入 MathMLおよびSVGネームスペースのサポート HTML編集機能の改善 Netパネルのタイミング表示をより正確なものへ改善 XHRにお
Firefox web browser - Faster, more secure & customizable hacks.mozilla.orgにおいてfile drag and drop in Firefox 3.6のタイトルのもと、Firefox 3.6でファイルのドラッグ&ドロップと複数ファイルの選択を処理する方法が紹介されている。ドラッグ&ドロップ対象のデータを扱うDataTransferはFiorefox 3.0 (Gecko 1.9)で、ドラッグ&ドロップのイベントはFirefox 3.5 (Gecko 1.9.1)で、非同期のファイル読み込みはFirefox 3.6 (Gecko 1.9.2)で実装されている。これらを組み合わせて処理する方法が簡単に説明されている。なお、複数ファイルを選択する方法は同じくhacks.mozilla.orgにおいてサンプルコードが紹介されて
Firefox web browser - Faster, more secure & customizable LinuxLinksにおいてFirefox Tipsのタイトルのもと、Firefoxの高速化を実施するためのテクニックが紹介されている。設定をすることでFirefoxの性能を引き上げ、Google Chromeのように開発ペースの早いブラウザにも対応できると冒頭に説明がある。なお、紹介されているテクニックを試す前に、prefs.jpファイルに保存されている設定のバックアップをとることが推奨されている。紹介されているテクニックは次のとおり。 BleachBitを使う BleachBitをインストールして使う。BleachBitはキャッシュ、履歴データ、一時ファイル、不要な使われていないローカルファイル、ログ、クッキーなどのデータを削除するツール。Windows版とLinux版が提
IE? - IE6, IE7 and IE8 Net Applicationsの報告によれば、2009年9月におけるブラウザシェアはIEが65.71%で過半数のシェアを確保している。バージョンごとにみるとIE6 24.42%、IE7 19.39%、IE8 16.84%となっており、IE6、IE7、IE8のシェアが拮抗しつつあることがわかる。これまでのシェア変動から推測すると、今後数ヶ月の間は3つのバージョンのIEが似たようなシェアを持った期間が続くことになる。IEが第一シェアだといっても、結果的に3つのバージョンに対応する必要がある。 この状況は、特にCSSのサポートという面で厄介な状況を生み出している。IE8はCSS 2.1への高い準拠を実現しているが、IE7はそうではない。IE6はサポートしている要素やプロパティがさらに少ない。またIE7やIE6は対象の要素やプロパティをサポートしてい
Copyright (C) Mainichi Communications Inc. All rights reserved. 掲載記事の無断転載を禁じます
複雑な機能をいくつも実装したWebアプリケーションのデバッグはツールなしでは一苦労だ。Ajax処理やこまかいイベント制御・DOM操作をおこなっている箇所でバグを出してしまった日には、解析だけで大変な時間を割かなければならない。 そんなときは、FireCrystalを使えば解決するかもしれない。ユーザの操作を記録し「どのタイミングで」「なにがおこなわれているか」を一発で表示してくれる便利なアドオンだ。 本稿では、そのFireCrystalについて紹介しよう。 FireCrystalとは Stephen Oney氏は8月21日(米国時間)、Firefox上で動作するアドオン「FireCrystal」をリリースした。FireCrystalはThe MIT Licenseのもとで公開されている、Webデザイナ・デベロッパ向けのデバッガ。Webページ上でユーザの操作を記録し、内部でどのようなイベント
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers Jennifer Farley氏がSitePointにおいてGIF, PNG, JPG. Which One To Use?のタイトルのもと、Webサイトを作成するにあたってどの画像フォーマットを採用すべきかという指針を簡単にまとめている。まず氏はそれぞれの画像フォーマットの特徴を簡単に説明。 GIF - 256色のインデックス画像。写真には向かないが、ロゴであったりフラットブロックな画像には向いている。透過データを保持できるという特徴がある JPEG - クオリティによって圧縮率が変わる非可逆圧縮の画像フォーマット。透過は表現できないが、写真データの用途に向いている PNG - GIFに似ているが、GIFのようなぎざぎざを出さずに背景透過を実現
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く