JavaScriptのテストツール「testem」が素晴らしいぞ - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） JavaScriptユニットテスト一年生の私が、Nettuts+ のチュートリアルで知ったテストツール 「testem」のお陰で大変捗ったので是非お勧めしたく、ここで紹介してみます。 testem ってなに testem via GitHub : airportyh/testem Unit testing in Javascript can be tedious and painful, but Testem makes it so easy that you will actually want to write tests. 要するに、面倒なJSのユニットテストをより快適にしてみんなでハッピーにテスト書こうよ！というツールです。 testem自体はnode.jsベースで動作し、Jasmine/QUnit/Mochaに対応して
Twitter BootStrap に追加できる５つのコンポーネントパック「FuelUX」:phpspot開発日誌
Fuel UX Twitter BootStrap に追加できる５つのコンポーネントパック「FuelUX」 コンボボックス、データグリッド、ピルボックス、検索、スピナー等のコンポーネントがセットになって配布されています。 どのコンポーネントも元がいいだけにかなりクールなデザインになっています。 ますますサイト作りがリッチに、そして楽しくなりそうです 関連エントリ Twitter Bootstrapでカッコいいカルーセルを実装するサンプルとチュートリアル Twitter Bootstrapじゃなくfacebook Bootstrap？「Fbootstrapp」 Twitter Bootstrap で使えるカラーピッカー＆日付ピッカー TwitterBootstrapベースのテーマやテンプレートが入手できる「WrapBootstrap」 綺麗なUIのサイトがサクサク組めるTwitter Boo
[JS]並べて配置したパネルを滑らかなアニメーションで伸縮させるスクリプト -Kwicks for jQuery
水平・垂直に配置したパネルをイージングやバウンドなどの滑らかなアニメーションで伸縮させるjQueryのプラグインを紹介します。 Kwicks for jQuery Kwicksは元来、MooToolsのエフェクトでしたがjQuery用にし、アニメーションのスムーズさ、コントロール、イベントのインタラクションなどを改善するために今回ゼロからリライトされました。 Kwicksのデモ Kwicksの使い方 Kwicksのデモ デモでは6種類のKwicksの動作を楽しめます。 対応ブラウザは、IE7+, Firefox3.6+, Chrome12+, Safri5+, Opera11+です。
JavaScriptでXLSX形式を扱う·XLSX.js MOONGIFT
XLSX.jsはJavaScriptでExcelファイル（Base64エンコード）を読み込んだり、ダウンロードさせられるソフトウェアです。 Googleスプレッドシートをはじめ、Webブラウザ上で表計算表示を行ったり、編集したりするWebアプリケーションがあります。しかし最も有力なのはExcelでしょう。そこで試したいのがExcelファイルを読み書きできるJavaScriptライブラリ、XLSX.jsです。 ダウンロードされたファイルです。ちゃんとXLSXとして認識されます。 ファイルを読み込む処理のデモです。Base64エンコードされたデータが解析されています。 XLSX.jsはbase64のXLSXファイルを読み込み、JavaScriptオブジェクトに変換できます。後はいかようにも表示できるでしょう。また、シート名と各セルの値をHTMLテーブルから読み込んでXLSXファイルに変換してダ
SWIPEVIEW – スマートフォンでスワイプできるギャラリーを実装できるJavaScript – creamu
SWIPEVIEWは、スマートフォンでスワイプできるギャラリーを実装できるJavaScriptです。 jQueryに依存していないようです。 SWIPEVIEW
[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework
[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework
[Fixnel] iOS風スクロールを実現するライブラリを書いてみた | CSS-EBLOG
[Fixnel] iOS風スクロールを実現するライブラリを書いてみた カテゴリ：Javascript関連 2012年9月23日 17:38 iOS風スクロールライブラリ、名前は「Fixnel」 最近の案件で、ライブラリを使用すること自体がNG、というケースの案件があり、そういう場合でも対応できるよう、iOS風スクロールをさせるライブラリ を自前で書いてみた。発端がそういう状況なので、もちろんどのライブラリにも依存していない。このライブラリ単体で動作します。 ちなみに名前の由来ですが、hogehogeスクロール的なものはなんか色々出ているので、どうせならまったく違う名前を、っていうことと、"fix" と "panel" を組み合わせた造語になっていますｗ [デモ、詳細はこちら] [Downloadはこちら] GitHubページを初めて作ってみた さて、今回のライブラリはGitHubにて公開中
必読！5分でわかるレスポンシブWebデザインまとめ 制作編 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お久しぶりです。デザイナーの野田です。 まず、今回の記事を見ていただく前に、前回と前々回に書かせていただきました。 「必読！5分でわかるレスポンシブWebデザインまとめ」 「必読！5分でわかるレスポンシブWebデザインまとめ Pt.2」 を読んでいただけるとスムーズです。 今回で、【必読！5分でわかるレスポンシブWebデザインまとめ】のシリーズも最後にさせていただきますので、少しコンテンツ量が多くなります。 100％ 5分では分らないので、タイトルはスルーしてやってください。 様々なサイトでレスポンシブWebデザインについて紹介されていますが、制作方法が異なっていたり、内容が少し難しいと感じる部分がありました。 この記事は、ディレクターの方やデザイナーの方、どちらにも理解しやすいように書かせていただいてます。 また、これまでレスポンシブWebデザインについてやってきましたが、基本的な部分で
[JS]ローカル環境でも利用できるダミー画像を生成するスクリプト -Holder.js
サイズやカラーをテキストで指定するだけで簡単にダミー画像を生成できる超軽量（4KB）のスクリプトを紹介します。 Holder.js -GitHub [ad#ad-2] Holder.jsのデモ Holder.jsの使い方 Holder.jsのデモ 対応ブラウザ Holder.jsはcanvasとdata URI schemeを使用しているため、下記のブラウザでご覧ください。 Chrome 1+ Firefox 3+ Safari 4+ Internet Explorer 9+ Holder.js [ad#ad-2] Holder.jsの使い方 使い方は、2ステップです。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="holder.js"></script> Step 2: HTML ダミー画像を設置したい場所にimg要素で記述します。
JavaScriptにもMedia Queryを·Javascript onMediaQuery MOONGIFT
Javascript onMediaQueryはMedia Queryライクな振り分けをJavaScriptで実現するライブラリです。 CSS3ではMedia Queryという仕組みがあります。これはデバイスの画面幅や高さ、色などをキーにして専用のスタイルを適用する技術です。そして同様のメディアによる振り分けをJavaScriptにも提供するのがJavascript onMediaQueryです。 こちらはデスクトップの場合。 こちらはiPhoneの場合。画面幅を調整すればメッセージが変わります。 実際のコードです。contextによる指定で実行される関数が変わります。 Javascript onMediaQueryは画面幅を常に監視しているようで、Webブラウザウィンドウの大きさを変えるとメッセージが切り替わるようになっています。スマートフォンかタブレットかによる区別ではなく、画面幅に応
Twitter BootstrapをjQuery Mobileで使ったデザインテーマ集・jQuery-Mobile-Bootstrap-Theme - かちびと.net
なかなか良かったので備忘録です。 Twitter Bootstrapのデザインを、 jQuery Mobileのテーマに起用した サンプルソースが公開されていま した。フレームワーク的にも使える かもしれない。 Twitter Bootstrap × jQuery Mobileです。既出ですけど良かったので。 JQMのデザイン変更用リソースです。ThemeRollerでもいいんですけどどうも微妙というか、肌に合わないのです。最初から作った方が早い気がしましたが、こうして変更されたものがあるならこれを元に変えると効率的になりそうです。同じ手法でbootswatchで配布されてるBootstrapテーマを起用しても良さそうですね。 Sample サンプルのQRコードです。↓ 何故かフォームのデザイン変更できなかったけど・・・まぁ自分で作ればいいかなｗ ご利用は以下よりどうぞ。 jQuery-M
retina.js – Retina用に高解像度の画像を表示するJavaScript – creamu
When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place. とのことで、ページロード時に高解像度の画像があるかをチェックして、ある場合はそれを表示するようです。 retina.js is a JavaScript serves a high-resolution version of an image for a retina display. When your users load a page, r
HTML5演出に最適な複数画像読み込み管理のJSライブラリ「LoadManager.js」 | ClockMaker Blog
HTMLで複数の画像を読み込むとき、HTMLのimgタグだけだと不恰好となりがちですが、読み込みを管理すれば見栄えも整いますというデモとJSライブラリを作ってみました。次の2つのデモを見比べて何が違うのか確認ください。 デモ (通常のimgタグ) デモ (LoadManager.jsを使用) デモの違いとは 前者は画像がバラバラとインターレース的に読み込まれ、後者は読み込み終わるまでローディングが表示され読み込まれたものがフェードインして表示されます。 ▼前者のデモ ▼後者のデモ 後者のデモには、ローディングのパーセンテージ表示も付いています。読み込みが何%まで達しているかを確認できるのも、後述のJSライブラリのメリットです。 HTML5で作られたフルFlash的なサイトを見たときにimgタグでインターレース的に画像がバラバラとでてくることが多くて、いつも微妙な思いをしていました。Flas
[JS]柔軟なclassの設定が可能なResponsive Web Design用の超軽量(1KB)スクリプト -syze
demo 1：幅1920pxで表示 デスクトップ用の画像（hdsize-wide-512x512.png）を表示 syzeの使い方 上記のdemo 1を例に実装方法を紹介します。 外部ファイル 当スクリプトを外部ファイルとして指定します。 <script src="syze.min.js"></script> JavaScript demo1では表示サイズの数値を元に、class名にもその数値を利用します。 syze.sizes(320, 480, 768, 1024, 1920); class名 .is320(0-479px) .is480(480-767px) .is768(768-1023px) .is1024(1024px-1079px) .is1920(1920+px) CSS 設定が完了したら、あとはサイズごとにスタイルシートを設定します。 body { background:
Lightview – 実装が容易でクールな画像オーバーレイスクリプト – creamu
Lightviewは、実装が容易でシンプル&クールなデザインの画像オーバーレイスクリプトです。 IE6にも対応しており、クロスブラウザで動作するようです。 Lightview
影をマウス位置に追随させられるJavaScript「OKShadow」
twitter facebook hatena google pocket 要素にドロップシャドウをかけることがあるかと思いますが、OKShadowを利用すると、その影をマウス位置に追随させることが可能です。 これにより、3D表現を擬似的に実現させられます。 sponsors 使用方法 OKShadowからファイルをダウンロード。 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="okshadow-1.0.js"></script> <script> $(function(){ $('#id名').okshadow(); }); </script> あとはidを要素に振れば完成です。 <div id="id名">テキストなど</div>
スマートフォンも対応！本をめくるような表現ができるJavaScript「FlipPage」
twitter facebook hatena google pocket 本をめくるような表現を付けられるJavaScriptです。 FlipPage: Tournez les pages sur votre iPad !では、iPhoneをはじめ、Androidなどでもタップでめくることが可能です。 sponsors 使用方法 FlipPage: Tournez les pages sur votre iPad !からファイルをダウンロード。 <link rel="stylesheet" href="jquery.flippage.css" type="text/css"> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jque
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
https://design-spice.com/2012/06/13/responsive-web-design-image/
パララックス効果を実現する「Parallax.js」 – creamu