WebブラウザでJavaScriptをテストする「js-test-driver」とQUnit、Jasmineを連携してテストするには
WebブラウザでJavaScriptをテストする「js-test-driver」とQUnit、Jasmineを連携してテストするには：フレームワークで実践！ JavaScriptテスト入門（4）（1/4 ページ） しっかりとJavaScriptをテストするために、今注目のJavaScript用のテストフレームワークをいくつか紹介し、その概要から実践的な使い方まで解説する連載。今回は、js-test-driverの概要や基本的な使い方、非同期処理のテスト方法、QUnitやJasmineと連携したテスト方法などを紹介します 前回まではWebブラウザを使わないJavaScriptテスト 前回「QUnit＋PhantomJSでJavaScriptのヘッドレスなテスト」、前々回「PhantomJSとJasmineで振る舞い駆動開発なJavaScriptテスト」と、「PhantomJS」を軸としたJa
時間によって発信する内容を変える·Aware.js MOONGIFT
Aware.jsは時間によってデザインやテキストを変えるJavaScriptです。 昔、JavaScriptと言えばWebサイトの表示をちょこっと変えるアクセントのような位置づけでした。訪問した時間によって「おはようございます！」といったメッセージを出すのに使われたりしていました。同様のことを、さらに今風にしたのがAware.jsです。 デフォルトは表示した時間によります。 朝8時に訪れるとこんな感じ。ちょっと朝焼け風。 朝6時。 夜9時。 夜11時。 Aware.jsが行っているのは訪問した時間によってテキストの色や背景色、メッセージを変えるという操作です。まさにresponds to timeなデザインとなっています。使いどころは難しいですが参考にどうぞ。 Aware.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る
JavaScriptで誰でも簡単に作って稼げる「Officeアドイン」とは？
※2015/08/08 更新：「Office用アプリ」（App for Office）は「Officeアドイン」（Office Add-ins）に名称変更されました。これに合わせて、本文の記述を一部修正しました。 ※2016/01/15 更新：Office 2016におけるOfficeアドインの機能強化に合わせて、本文の記述を一部修正しました。 最新のOffice 2013で使用可能なOfficeアドイン（＝Office Add-ins、OfficeのWebアドイン。以前は、Office用アプリ、または、Apps for Officeと呼ばれていた）は、JavaScriptで記述できる。従来、「アドイン」と言えば、ネイティブコードや.NETなどで構築したが、新しいアドイン（Webアドイン）では、JavaScriptに慣れ親しんでいる開発者であれば、誰でも既存のスキルを生かしてOffice上
JavaScriptでJPEG画像を読み込んで表示·jpgjs MOONGIFT
jpgjsはJavaScriptによるJPEG読み込みライブラリです。 JavaScriptによるバイナリハックは今なお熱い分野です。今回はJPEGファイルを解析、表示を行うjpgjsを紹介します。 左から順番に通常のJPEG、プログレッシブ、グレースケールとなっています。 jpgjsでは指定したJPEGファイルを解析し、Canvas上に描画しています。現状のままでは普通に表示したのと変わりませんが、エンコーダーが実装されるとWeb上でJPEGファイルを加工したり生成したりできるソフトウェアが作れるようになります。 jpgjsはJavaScript製、Apache License 2.0のオープンソース・ソフトウェアです。 MOONGIFTはこう見る Webブラウザで扱える画像系のリソースとしてはJPEG/GIF/PNG/SVGがあります。SVGやCanvasで描いたものをPNGで出力でき
Web SQL Databaseと一緒に使いたいライブラリ·WebSQL.js MOONGIFT
WebSQL.jsはWeb SQL Databaseを使いやすくするJavaScriptライブラリです。 惜しくもHTML5の仕様からはもれていますが、新しいWebブラウザの機能にWeb SQL Databaseがあります。そんなWeb SQL Databaseをより使いやすくしてくれるライブラリがWebSQL.jsです。 デモです。データを追加したり、削除したりできます。 さらに追加しました。再読み込みしても再現します。 WebSQL.jsはデータベースの作成、テーブルの作成、データのCRUD操作、テーブルの削除が行えます。さらにトランザクションやSQLの実行も可能です。各メソッドはチェーンでつないで実行させることも可能になっています。 WebSQL.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る Web SQL Da
HTMLを解析して目次を生成·TOC MOONGIFT
TOCはJavaScriptを使ってフローティングの目次を生成するソフトウェアです。 TOCとはTable of Contentsの頭文字を抜き出したもので、日本語で言えば目次になります。HTML上の構造を解析してTOCを生成してくれるライブラリがTOC（jQuery Table of Contents Plugin）になります。 右と左両方に目次が表示されています。 スクロールで自動的に太字になります。 クリックでスクロールももちろん可能です。 TOCはh1をはじめとするヘッダータグを指定して使うのが基本になります。そうするとフローティングで目次を生成してくれ、クリックやスクロールによる目次の変更にも追従してくれます。説明書やヘルプなどに使うと便利ではないでしょうか。 TOCはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIF
1つの盤上をダイナミックに動き回る迫力あるスライドツール·impress.js MOONGIFT
impress.jsはprezi.comにインスパイアされた迫力あるダイナミックなプレゼンテーションを実現するソフトウェアです。 インパクトのあるプレゼンテーションを実現したいならばスライドにもこだわってみましょう。使ってみたいのはimpress.jsです。 何の変哲もないWebベースのスライドです。スペースキーや矢印キーでスライドを切り替えます。 突然大きな文字ベースのスライドに。 回転したり文字サイズが変わったりとかなり激しい動きです。 こちらが全体像。ぜひ下の動画を見てください。 デモ動画です。 impress.jsの使い方は簡単で、div.stepを定義してその中にHTMLでスライドの内容を記述していくだけです。data-rotateを使えば回転したり、data-scaleでスライドの大きさを変更できます。配置も自由に決められて、あっという間にインパクトの強いスライドが作れるでしょ
JavaScriptのスマホ対応時に知らないと損する16のコト
JavaScriptのスマホ対応時に知らないと損する16のコト：スマホ向けサイト制作で泣かないための秘伝ノウハウ（3）（1/3 ページ） スマートフォン向けWebサイト構築支援ツールを開発・販売するため、国内すべてのケータイ・スマートフォン・タブレットを所有している企業に勤める筆者が、サイト構築のハマリどころとも言えるノウハウを紹介する連載。今回は、スマホ向けサイトにおけるJavaScriptの4つの主な役割、実装上の3つの注意点、よく使われるOSSライブラリ4選、OS／機種依存事例5選などを紹介します こんにちは。KSK「フレックスファームビジネスユニット」の渡辺です。前回の「HTML5のスマホ対応の基礎知識とハマリどころ3選」では、HTML5に対する対応状況、代表的なHTMLタグに対する依存事例を紹介しました。 今回は、KSKの製品「x-fit（クロスフィット）の開発・販売や、実機での
アンダース氏が設計した新言語による次世代JavaScript開発とは？
アンダース氏が設計した新言語による次世代JavaScript開発とは？：特集：TypeScript（プレビュー版）概説（前編）（1/3 ページ） 「Turbo Pascal」「Delphi」「C#」と聞けば、ある、すご腕の開発言語設計者が最初に思い浮かぶ。その人物の名は「アンダース・ヘルスバーグ（Anders Hejlsberg）」、1996年にボーランド社からマイクロソフトに移籍し、現在はC#やVB（Visual Basic）などの言語設計に携わる有名な開発言語アーキテクトだ。 アンダース氏が作る開発言語の特徴は、言語仕様がオブジェクト指向ベースで明確なので「チームによる大規模開発」にも対応しやすいだけでなく、開発ツールによる支援機能も考慮されているので「開発生産性」にも非常に優れていることだ（と筆者は考える）。またアンダース氏は、最先端のプログラミング言語をよく研究しており、各種言語の
Three.js でピッキング(3Dモデルをマウスで選択)してみた | TM Life
久々の 3D プログラミング. Three.js を使ってピッキングしてみたので, 今回はそのやり方について簡単に解説したいと思います. サンプルは jsdo.it で作ってあるので, 実際に動かしたり, fork してイジってもらえると嬉しいです. table of contents キッカケ サンプル ソースコード 解説 マウス位置を求める(Line 5~8) マウス座標を 3D 化する(Line 10~12) マウス位置から 3D ベクトルを作成(Line 15~17) レイを作成(Line 20) レイとメッシュの交差判定(Line 22) 衝突結果の取得(Line25) キッカケ 昨日, @kino_hideyoshi さんから下記のような質問を頂きました. @phi_jp 初めまして。mqo.three.jsについて質問がありTweetさせていただきました．表示されているmqo
reveal.jsベースのプレゼンをWeb上で作れちゃうオンラインエディタ『rvl.io』の使い方をrvl.ioを使って解説してみた | TM Life
なんか昨日, koba04さんの『「プログラミング未経験のタワレコ店員がエンジニアになって思ったこと」というスライドを書いてみた』というエントリーがキッカケで １年前に公開したエントリー『オシャレなスライドショーを簡単に作れちゃう reveal.js の使い方を reveal.js を使って解説してみた.』へのアクセス数が急上昇しました. これに便乗して, 今回は reveal.js の オンラインエディタ版『rvl.io』の使い方ついて解説したいと思います. 最近は, ありがたいことに講演に依頼や, 実際にセミナーで発表する機会も増えてきたので かなり重宝しています. とても便利なオンラインエディタなのでぜひ使ってみて下さい. Table of contents reveal.js って？ rvl.io って？ rvl.io の使い方をrvl.ioで作ったプレゼンで解説してみた 過去に
オブジェクトのドラッグ移動を実現するJavaScriptライブラリ·Pep MOONGIFT
Pepはデスクトップ/スマートフォンの両方で動作するドラッグライブラリです。 ゲームなどでWebブラウザ上のオブジェクトをドラッグアンドドロップしたりする操作はよくありますが、その操作をデスクトップとモバイル両方に対応させたのがPepです。 使い方は簡単でDOMに対してpep()を実行するだけ。 ドラッグで移動させられます。 枠の中だけでの移動もその逆もできます。 コールバック対応です。 スライダーを動かすと大きさが変わるデモ。 X軸、Y軸を固定にすることもできます。 こちらはiPhoneで試した所。動きに慣性があるのが特徴です。 Webブラウザ上のオブジェクトを動かすという操作は通常のWebサイトではあまりない動作なので面白いです。またデスクトップとスマートフォン両方に対応しているので使い勝手が良いのではないでしょうか。 PepはJavaScript製、MIT Licenseのオープンソ
取り扱い注意！JavaScriptを使ってMD5ハッシュをクラック·MD5-Password-Cracker.js MOONGIFT
MD5-Password-Cracker.jsはJavaScriptを使ってMD5のハッシュ値から元テキストを検索するソフトウェアです。 パスワードをハッシュ化して保存しておくのは基本と思われますが、その際によく使われるのがMD5ではないでしょうか。SHA-1/SHA-2のが良いと思うのですが、それをまざまざと知らしめてくれるのがMD5-Password-Cracker.jsです。 パスワードクラック開始！Web Workersが8つ使われています。 パスワードはheyaでした。1ワーカーあたり1秒間に約7万の解析が行われています。4文字のパスワードに対して23秒で解析されました。 網羅的に文字列を試しているので時間は要しますが、4文字程度のパスワードであればあっという間に解析されてしまうというのが分かるかと思います。パスワードの取り扱いについてはくれぐれもご注意を。 MD5-Passwo
JavaScript のスコープチェーンとクロージャを理解する - tacamy--blog
前回で JavaScript のスコープの基本がわかったので、今回はスコープチェーンとクロージャを勉強してみました。 Call オブジェクトとクロージャの理解がかなり大変でした・・。 変数オブジェクト JavaScript で変数の宣言と参照をするということは、変数オブジェクトを読み書きするということです。 変数オブジェクトというのは、key と value による変数管理専用のハッシュテーブルのこと key が変数名、value が値のセットになっているテーブルで、変数の数だけレコードができるイメージ 変数オブジェクトはプログラマが意識することのない、便宜的なオブジェクト グローバルオブジェクト JavaScript は、ブラウザが新しいページを読み込んだとき、内部的に新しいグローバルオブジェクトを生成して初期化します。 グローバルオブジェクトとは、グローバル変数やグローバル関数を管理す
Pythonプログラマー歓喜！JavaScriptの代わりにPythonが使える·Brython MOONGIFT
BrythonはJavaScriptの代わりにPythonを使ってプログラミングできるようにするライブラリです。 Webブラウザ標準で使えるプログラミング言語と言えばJavaScriptです。しかしそれだけでは満足できない、そんな方が開発したのがBrythonです。Webブラウザ上でPythonが書けてしまいます。 アナログ時計です。ちゃんと秒針が動いています。 コードは見事にPythonです。 Ajaxのデモ。 やはりちゃんとPythonコードです。 テーブルのソートデモ。 Importも使えて便利です。 左右にデータを移動させるデモ。 ボタンやコンポーネントをPythonの中で生成しています。 3Dを動くデモ。 エリア情報を含めてPythonで定義されています。 BrythonはHTMLコンテンツのハンドリングはもちろん、Ajax、ローカルストレージ、Canvasの操作もできます。HT
オンラインの画像を解析してiTunes 11風に仕上げる·AlbumColors.js MOONGIFT
AlbumColors.jsはJavaScriptを使ってiTunes 11のカバーアート風のデザインを実現するライブラリです。 iTunes 11になってUIが様変わりしましたが、その中で注目を集めているのがアルバムのカバーアートからマッチした背景、テキストカラーを抽出する機能です。同様の機能をJavaScriptで実現してしまうのがAlbumColors.jsです。 デモです。Last.fmからアルバムアートを取得して、それにマッチしたカラーリングを行っています。 類似色、反対色、そしてもう一色の三色を抽出しているようです。 背景色がかなりマッチしているのでかっこうよく仕上がっています。 それぞれそれっぽく仕上がっているのではないでしょうか。 AlbumColors.jsは画像のURLを引数に渡すと、3つの配列が返ってきます。それぞれRGBの要素をもっているので、そのまま色情報として使
3 Cool Techniques For Your Next Web Design Project
2017年3月27日 CSS, jQuery, Webサイト制作 Webデザインの勉強を始めたという方によく質問されるのが、「どうやって勉強すればいいですか？」。私はWeb制作の学校の学生だった頃から実践しているふたつの事があります。素敵だなって思えるWebサイトを見つけたら、どのように作られているのか自分なりに分析してみること。そしてそこで使われている技を実際に試してみること。そこで今日は最近見かけた素敵Webサイトと、そのサイトで使われていた技術を解説してみたいと思います！ ↑私が10年以上利用している会計ソフト！ 準備：分析＆実践に役立つツール Chrome、Safariなら付属のデベロッパーツール ChromeとSafariならブラウザーにはじめからデベロッパーツールなる開発のためのツールがついています。私が愛用しているのはこのツール。表示しているWebページのHTMLやCSSが確
text-hatena.js を GitHub に移動した
2005 年ごろに作成して放置していた text-hatena.js について、twitter で @nitoyon さん、2005年くらいのtext-hatena.js をGitHub等に公開は可能でしょうか？ tech.nitoyon.com/javascript/app… — テラまこさん (@teramako) 12月 17, 2012 というツッコミを受けたので GitHub で公開してみました。 nitoyon / text-hatena.js - GitHub いま text-hatena.js のコードを読み返すと、グローバルな名前空間を汚染してたり、Object.extend() を定義してたりと、いろいろ酷い。 当時は今に比べると JavaScript の知識も浅かったが、浅いなりに prototype.js のコードを読んだり、真似したりして勉強していたことを思い出し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://japan.internet.com/busnews/20130107/1.html?rss
Site Under Maintenance
