You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
#grid v5 Wed, 3 Nov 2010: This is a little tool we created for our Analog holding page. It inserts a layout grid in web pages, allows you to hold it in place, and toggle between displaying it in the foreground or background. To see it in action, hit G on your keyboard. Download Download #grid from GitHub Features Adaptable for all layout widths and alignments Adaptable for any vertical rhythm valu
Chardin.jsはWebサイトの画面上に項目の説明を表示するJavaScriptライブラリです。 スマートフォンアプリをはじめ、Webアプリケーションで最初に表示した時に説明を表示するタイプのWebサイトが増えてきました。凝ったものもありますが、もっとシンプルに実装したい時に使えそうなのがChardin.jsです。 最初の表示です。ボタンを押します。 各DOMごとに説明が表示されます。 ソースを見ると分かりますが、data-*で表示する内容を指定しています。 Chardin.jsは説明用のテキストとその表示位置(上下左右)、さらに一度表示した後ボタンを非表示にしたり、逆に別な要素を表示したりすることもできます。汎用的ではないかも知れませんが、手軽にチュートリアルやヘルプ画面を実現するのに便利そうです。 Chardin.jsはJavaScript製、Apache License 2.0の
HTML5で2次元のインタラクティブコンテンツを制作するには、さまざまなJavaScriptライブラリがあります。どれを選択するべきか迷いどころではないでしょうか? そこで今回はHTML5の各種JavaScriptライブラリについて、パフォーマンスを比較検証してみました。 今回検証したフレームワーク メジャーなJavaScirptライブラリとして次の5種類でテストしました。バージョンは2013年4月10日現在の最新版を使っています。詳しい検証方法は記事の後半にまとめています。 CreateJS (EaselJS 0.6.0) Arctic.js (v0.1.11) enchant.js (v0.6.3-48) Pixi.js (v1.0.0) Processing.js (v1.4.1) 各種JavaScirptライブラリのベンチマーク結果 ※グラフの数値が高いほどパフォーマンスが高いこと
諸事情あって、iframeの中身をフレーム外側のページからJavaScriptでスクロールできるのを作った。 ふつうは別ドメインのページをiframeに読み込むとスクロールできないんだけど、(marginに負の値を入れたりして)iframeごと上下左右に動かしたり、iframeの外側にbox要素2つ付けてはみだした部分を表示しないようにcssでなんか色々やったりしたらそれらしい物ができた。 デモ XFrame.js shokai/xframe.js · GitHub 使い方は簡単である js読み込んで <script src="xframe.js"></script> XFrameを出したい箱を作って <div id="tv"></div> 読み込む var xframe = new XFrame("div#tv"); xframe.load("http://shokai.org"); あ
new2JSはWebベースのJavaScriptレクチャーソフトウェアです。 プログラミングは実際に手を動かしてみないと覚えられるものではありません。それをコードを使ってレクチャーしてくれるのがnew2JSです。JavaScriptを覚えたい方におすすめです。 最初のページです。まずRunボタンを押します。 説明文と、その下に実行結果が表示されます。後はnextボタンを押していきます。 数値の型が出ています。 文字列、真偽値の型など。 入力を行った判定もできます。 他にも色々なレクチャーが受けられます。 new2JSはJavaScriptを一歩一歩覚えていくというよりもある程度JavaScriptを把握しているユーザがより深くJavaScriptを習得していくのに便利なサービスと言えます。なぜこんな仕様なのか、そう思ってしまう所もきっとあるでしょう。 new2JSはJavaScript製の
ScriptCoverはGoogle製のJavaScriptカバレッジテストツールです。任意のWebサイトに対してテストできます。 Googleが開発したJavaScriptのカバレッジツールがScriptCoverです。Google Chrome機能拡張としてインストールすることで任意のWebサイトにおけるJavaScriptカバレッジ率が分かります。 インストールしたところです。パッケージは提供されていないようなので自分でコンパイルしてインストールする必要があります。 任意のWebページを見るとこうやってカバレッジ率が出ます。 クリックすると分析開始です。しばらく待ちます。 完了しました。JavaScriptなので実行状況によってカバレッジ率も変化するようです。 さらに詳細なスクリプト単位でのカバレッジ率も見られます。 See full coverage reportをクリックするとス
Tail JSはWebブラウザ上で動作するtailです。 諸君、私はtailが好きだ。素っ気ないオプションが好きだ。-nが好きだ。-rが好きだ。-Fが好きだ。そんな訳でTail JSも大好きだ。JavaScriptで実装されたWebブラウザ上で使えるtailコマンドです。 トップページです。ログファイルをドロップします。 ドロップしました。続いて更新されるのを待ちます。 リアルタイムに更新されていきます。 タブを使って複数ファイルの監視もでいます。 Tail JSはファイルの追記をリアルタイムで反映します。ファイルサイズの変更をトリガーに、その差分を読み取っています。Google Chromeでしか動かないようですが、とても面白いソフトウェアです。 Tail JSはJavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。 MOONGIFT
こんにちは!うきょーです! みなさんJavaScriptのテスト書いてますか?当然書いてますよね??? JSでテスト書く時に、こういうHTMLを使いたいんだけど的なことってあると思います。 BusterJSはデフォルトでいい感じのHTMLを作って使ってくれるので楽にテストをはじめられるんですが、まあ差し替えたいよねーってことで差し替えます。 BusterJSではこれをtestbedと呼んでいて、設定ファイル(だいたいの場合はbuster.js)で設定することができます。 設定の仕方はこんな感じなんだけど、いまんところtestbedってプロパティは設定できないので、resourcesから設定します。 var config = module.exports; config["test"] = { sources: ["lib/*.js"], tests: ["test/*-test.js"],
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 会社でAngularJSをわっしわっし使ってみて、そろそろ某かの意見を言えるようになったのではないか?と思ったので、推薦記事を書いてみます。AngularJSマンセー! 一般のAngularJS解説記事はまぁ巷にそれなりに出回っていると思うので、僕の周りに蔓延る混沌Androidクラスタ向けの説明記事を書いてみようと思います。 というわけで、AngularJSをAndroid用語を駆使して説明します。正確さはあまり気にしません。 読者に要求されるもの Androidについての基本的な知識 JavaScriptやHTMLなどに対する基本的
2012年11月16日13:55 JavaScript Ruby グラフ描くならMorris.jsがお手軽で良いかも こんにちわ。寒くなってきましたがみなさまお元気ですか? さて、先日ちょっとしたグラフを描画したかったんですよ。それでなにか使いやすいライブラリ無いかなーと思っていたら railscast (revisedなので有料です) で Morris.js ってjQueryプラグインが紹介されてて良さげだったので使ってみました。google analytics みたいなツールチップも出してくれます。 使い方はとっても簡単です。 まず、jQuery (>=1.7) と Raphael (>=2.0) が必要です。あとは Morris.js があれば動作します。 これらを app/assets/javascripts/application.js に設定してください。この記事執筆時点での
Speak.jsはJavaScriptだけでテキストを読み上げるソフトウェアです。 Webブラウザで音声ファイルを指定してJavaScriptで解析、なんてソフトウェアもありますが今回は一から“音声”を生み出してしまう驚きのソフトウェア、Speak.jsを紹介します。 ボタンを押すとHello Worldと話します。 こんな感じで任意の言葉を話させることもできます。 Speak.jsはジェネレータを通じて音声を動的に生み出します。対応しているのは英数字のみとなっており、日本語には対応していません。常に動的に生成しているので自由なテキストを読み上げさせることができます。 Speak.jsはJavaScript製のオープンソース・ソフトウェア(GPL)です。 MOONGIFTはこう見る テキストを外部サーバに送って、それを音声ファイルにして返すAPIも世の中にはあります。当然、こちらの方が英語
About Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text. Usage Simply include textillate.js and it's dependencies in your project to start creating unqiue effects. Credits Textillate.js is built on top of the simple, yet amazingly powerful animate.css and lettering.js libraries.
JavaScript MVCフレームワークとしてもっとも知名度が高いBackbone.jsのコメント付きソースコードの日本語訳が公開されています。havelogの記事「Backbone.js コメント付きソースコード日本語訳」で紹介されていました。 翻訳を行ったのは、githubをベースにオープンソースソフトウェアのドキュメントを翻訳している翻訳コミュニティのenja-oss。 同グループはすでにBackbone.jsのFAQの翻訳を公開済みで、それに続いてBackbone.jsソースコードのコメントについても翻訳を終えました。 全部で1411行の軽量フレームワーク Backbone.jsはJavaScript MVCフレームワークとしてもっとも知名度が高いものですが、とても軽量なフレームワークでもあります。 今回日本語訳が公開されたソースコードを見ても、全部で1411行、60.72kb。
GithubでJavaScriptのコードとして分類されており、現時点でwatch数の多い200件の中で、実際に使ったことがあり便利または面白いと感じた20件をまとめてみました。 backbone-boilerplate、requirejs、yeoman、lodashのような定番になってきているものから、TimelineJSのような全く汎用性のないものまであります。 d3.js Data-Driven Documents。サンプル集を観るのが手っ取り早いと思います。 pdf.js JavaScriptだけでPDFをレンダリングできる時代です。1年半ほど前にくらべると、かなりPDF製作者の期待通りにレンダリングできるようになってきています。 backbone-boilerplate Backbone.jsを使ったアプリの骨格構造。サーバー側でいわゆるMVC2のアプリを作っている人にはB
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く