Isomer – an isometric graphics library for HTML5 canvas
About Isomer allows you to draw isometric graphics with ease. Let's draw a simple cube. var Shape = Isomer.Shape; var Point = Isomer.Point; iso.add(Shape.Prism(new Point(0, 0, 0))); The Grid Here is the same cube overlayed with a 3D grid. This is how objects look under an isometric projection. /** * This is the 3D isometric grid that * we will be drawing on. * * The blue grid is the xy-plane. * Th
人気上昇中のJavaScriptライブラリを調べてみた［ジャンル別に比較］
連載 INDEX 次回 → こちらのページで【2015年版】も発表！ ■ 2014年が始まり、心機一転で「今年こそはWeb開発を頑張ろう」と思っている人も少なくないだろう。そんな方々に向けて本稿では、2013年中に人気が急上昇してきており、「2014年では必須の知識」となりそうなJavaScriptライブラリ（Library）をランキング形式で発表する。 なお、本稿のランキング決定では、検索キーワードの流行を調査可能な「Googleトレンド」（「すべての国」「過去 12 か月間」「すべてのカテゴリ」「ウェブ検索」という条件で絞り込み）を使って、ライブラリの人気をジャンルごとに比較した（※ライブラリ名が一般的な英単語の場合、Web検索時に、その英単語にもヒットしてしまう。このノイズがGoogleトレンドでの結果として入り込んでいる可能性が高いことをご了承いただきたい。各ジャンルは、筆者が独自
2012年に使いたいJavaScriptのMVCフレームワーク14選 - memo.yomukaku.net
1億総スマホが近づいたこの頃に、JavaScriptのMVCフレームワークに何を使うか？ node.jsと使ってみたいウェブアプリのフレームワークの候補を14選んでみました。 MVCフレームワークといっても、純粋なMVCだけではなく、MVVM、MVC2、MVPなど広義のMVCフレームワークを含みます。成熟したフレームワーク backbone.jsのように一定の歴史のあるものや、express.jsのようにnode.jsでのデファクト・スタンダードになっているようなものを含め、今すぐプロダクション環境で使用できる成熟度があると思われるフレームワークをまとめます。 Backbone.js http://documentcloud.github.com/backbone/ 古参のフロントエンド向けMVCフレームワーク。 node.jsに限らず、Rails等のフレームワークでもフロントエンド側の
『JavaScriptの開発効率を高める7つのライブラリ』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。
HexaFlip: A Flexible 3D Cube Plugin | Codrops
HexaFlip is a JavaScript UI plugin that let’s you use 3D cubes as interface elements. Dive into the process of creating the plugin and learn some best practices regarding flexible UI plugins. Today I’d like to share my process for creating a flexible JavaScript UI plugin I’ve dubbed HexaFlip. Lately I’ve taken to building simple experimental UI plugins that manipulate elements with a combination o
GitHub - dameleon/oppai.js
var left = { // 頂点(いわゆるtiqbi)を指定 vertex: [236, 427], // 周りの範囲(いわゆるtibusa)を指定 round_coords: [[263, 398], [297, 410], [296, 436], [265, 473], [226, 466], [210, 451], [211, 424], [230, 406]] }, right = { vertex: [398, 431], round_coords: [[361, 389], [403, 404], [431, 432], [422, 466], [389, 481], [352, 471], [335, 438], [340, 406]] }; var oppai = new Oppai( // HTMLCanvasElement もしくは canvas 要素へアクセスでき
男性歓喜！クリックするとおっぱいが揺れる·oppai.js MOONGIFT
oppai.jsはタップ（クリック）するとおっぱいが揺れる画像を作り出すJavaScriptライブラリです。 Webというのは基本的に静的なものが多いので、一部でも動いているとインパクトがあります。アニメーションGIFしかり、動画しかり、そしておっぱいしかり。 何もしていない場合 ちょっと揺れているのが分かるでしょうか？ こんな女性のサンプルも。 こちらはちょっと貧乳…？揺れが小さいようななんというか。 oppai.jsはおっぱいの位置を四角で定義するようです（いや、おっぱいは丸いよ、丸いんだよという意見はさておき）。そして当然右と左があるので個別に定義します。後はお気に入りの写真と右乳、左乳をパラメータに渡すだけで動くおっぱい画像のできあがりです。 追記：しかもスマートフォン（iPhoneで確認）だと加速度センサーによって振ると揺れるアクション付きです！これはぜひiPhoneでばんばん揺
Backbone Patterns
Backbone Patterns Building apps with Backbone.js Here, I try to document the good practices that our team has learned along the way building Backbone applications. This document assumes that you already have some knowledge of Backbone.js, jQuery, and of course, JavaScript itself. Table of contents Model patterns Bootstrapping data View patterns Inline templates JST templates Partials Animation buf
Backbone.jsで今つくっている構成について (Backbone Advent Calendar 2012 1st day)
Advent Calendar 1日目だよ ってことで、Backbone.js Advent Calendar 1日目を書かせていただきます。本当は先日公開したFAQの日本語訳を一発目にしたかったのですが、公開したい欲に負けた次第。 何とかして現状を振り返るアウトプットの機会にしたかったので、今やっているプロジェクトで書いたコードの大まかな構成と局所的なパターンの紹介をします。 いま手元で作成しているものは、スマートフォン向けのシングルページなWebアプリケーションです。専任で大量のJavaScriptをスクラッチするの初めて。Backbone自体も割と初挑戦。 ここでいうシングルページは、HTML1枚のみで、ページ遷移はbodyの中をJavaScriptで書き換えていく構成のアプリケーションを指しています。 今のプロジェクトから抽出されたクラス構成 下記のような構成に落ち着き、抜本的なリ
The web's scaffolding tool for modern webapps | Yeoman
Get started and then find a generator for your webapp. Generators are available for Angular, Backbone, React, Polymer and over 5600+ other projects. One-line install using npm: npm install -g yo What's Yeoman?Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive. To do so, we provide a generator ecosystem. A generator is basically a plugin tha
大規模JSでのBackbone.js/CoffeeScript について考えてみた - mizchi log
これ読んでたらr7kamura君にJSのMVCどうするの的な話きかれてたのを思い出したので、自分がBackboneを使う時のパターンをr7kamura君の記事をベースに書きなおしてみた。 > サバクラ両方で動く JavaScript の大規模開発を行うために ― Gist https://gist.github.com/1362110 > client-side javascript - ✘╹◡╹✘ http://r7kamura.hatenablog.com/entry/2012/10/18/023629 以下の様なコードを書いた。かなり冗長だが、複雑なアプリだとこれぐらいの冗長性は必要になる。 (なお概念を伝えるための解説用コードなのでそのままじゃ動かない) Backbone.Model # 名前空間の初期化 App = {} App.View = {} App.Model = {}
Webブラウザ上で動作するmruby·JsMruby MOONGIFT
JsMrubyはGoogle Chrome/Firefoxの機能拡張として動作するmrubyです。 mrubyは通常のRubyに比べてコンパクトである分、組み込み分野などでの活躍が期待されています。しかし軽量であるという点に注目し、なんとWebブラウザ上で動かしてしまうのがJsMrubyです。 インストールします。 実行しました。Js Mrubyという出力がCanvasにされています。 JsMrubyはまだ限られた環境下でしかどうさしないようですが、WindowsであればGoogle ChromeやFirefoxでも使えます。Rubyスクリプトを動かすのはもちろん、機能拡張をRubyで書くと言った使い方も考えられそうです。 JsMrubyはGoogle Chrome/Firefox用のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIFTはこ
jQueryコーディングの基本的なことからプラグイン化までの注意書き（Webデザイン）
jQuery でのプログラミングの、基本的なことからプラグインを作るところまで、初心者の頃につまずいた部分を中心にまとめてみました。公式ドキュメントなどで使われている、少し難しい印象の専門用語も織り交ぜながら書きました。jQuery で Webデザインのパーツを作るときの注意書きという感じです。 Webサイトを作るとき、私的にはとってもよく使っている jQuery。jQuery を勉強しだしたころは、自分の書いたコードが動いたりするのが、とっても楽しくて嬉しかった覚えがあります。私はあまり JavaScript でのコーディングが得意ではないので、今でもよく jQuery を使ってコーディングしてます …。 以前：CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました という記事を書いたのですが、今回はその復習 & jQuery
JavaScriptにおける、MVCフレームワーク以外の選択肢
JavaScriptではさまざまなフレームワークが登場していますが、最近注目を集めているのがMVCアーキテクチャの実現を容易にするMVCフレームワークです。Publickeyでも以下の記事などで紹介してきました。 JavaScript MVCフレームワークはすでに十種類以上、その比較や最新情報などのまとめ JavaScript MVC座談会。遅くならない？ それぞれの特徴は？ サーバとの通信は？（前編） － Publickey JavaScript MVC座談会。遅くならない？ それぞれの特徴は？ サーバとの通信は？（後編） しかしプログラミングの世界では、MVCアーキテクチャ以外にもさまざまなデザインパターンがあります。JavaScriptプログラマはもっとそれらを検討すべきだ、という記事「The World Beyond MVC」（MVCの向こうにある世界）が、The David Wa
JSter – JavaScript Catalog
EssentialsApplication FrameworksMobile FrameworksMVC FrameworksRealtime FrameworksDesktop GUIServerSide LibrariesTesting FrameworksTemplating EnginesLoadersUIUI FrameworksWindows, Modals, PopupsKeyboard WrappersForm WidgetsUI ComponentsSliders & GalleriesNotificationsWYSIWYG EditorsTouchLayoutTours & GuidesMultimediaGame EnginesPhysics LibrariesAnimation LibrariesAudio LibrariesPresentation Librar
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に対応して
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
JavaScript で IE アクセス時のみブルースクリーンで警告を表示する tm.destroyie6.js を作ってみた | TM Life
JavaScript で IE アクセス時のみブルースクリーンで警告を表示する tm.destroyie6.js を作ってみました. IE6 を一緒に撲滅しませんか？ このスクリプトを使えば簡単に IE6 でアクセスした時のみ下の画像のような警告を出し, 他のブラウザのインストールを促します. ちなみに, デザインは開発者用に配布された Windows 8 のブルースクリーンを真似てます. Microsoft が作ったブラウザでアクセスした際に, Microsoft がデザインしたブルースクリーンで警告を出す. ん～皮肉感たっぷりなスクリプトですw DATA and DEMO いくつかデモを用意しました. IE 警告の他にも, 本家ブルースクリーンのコピーや誕生日メッセージも作ってみました. Demo Download USAGE 使い方について FLOW 流れ tm.destroyie6
iOS6のSafariでサポートされるHTML5の機能 | DevelopersIO
以前、HTML5でカメラやGPSなどスマートフォンならではの機能がどこまで使えるのか調べました。 最近、iPhone5を買ったので今度はiOS6のSafariでサポートされたHTML5の機能を試して見ようと思います。 試したのは以下の5つです。iPhoneで確認できるようにサンプルを作ったので試してみて下さい。 ファイルアクセス(File API)とカメラ(HTML Media Capture) 音声処理・合成(Web Audio API) アニメーション(Animation Timing API) CSS Filter Effects Remote Debugger ■ファイルアクセス(File API)とカメラ(HTML Media Capture) ファイルアクセスとカメラ連携のサンプルです。iOS6ではFile APIの書き方でカメラも使えました。 [ファイルを選択]ボタンを押すと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Holder.js - image placeholders in browser