気軽にプログラミングを始められるWebエディタ『runstant』作りました - Qiita
7月19日. 久しぶりの３連休. 予定はぎっしりだった. だが神からのお告げがあった. なんか作れと. 気づいたらオレの指は Macbook Air の薄いキーボードの上だった. ってことで連休中にちょっとしたツール作りました. 気軽にプログラミングを始められるWebエディタです. 名前は runstant. run + instant の略で, インスタントラーメンのように一瞬で気軽に実行できるよって意味です. ログイン不要, サーバー通信なしで一瞬で プログラミングを始めることができます!! 一応, tmlib.js 公式エディタ的な 位置づけなのでデフォルトで tmlib.js のサンプルが入ってます. とりあえず触ってみてください -> こちら 特徴 ログインの必要ないよ 状態を hash で保存するのでサーバー通信しないよ html/css/javascript が書けるよ ちょ
[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう - YoheiM .NET
[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう こんにちは、@yoheiMuneです。 ブラウザのレンダリングの仕組みはHTML5 RocksやHow browsers workで詳しく解説されてきました。しかしそれらはとても詳細で、読破して理解するのは大変です。 今回のブログでは手軽にレンダリングの概要を理解できるように心がけました。またより詳しく学べるようなリンクも記載しました。 そしてブラウザのレンダリングの仕組みを理解した上で、どのようなJavaScriptを書くべきかについても記載しました。 目次 ブラウザのレンダリングの仕組み この章では、HTMLとCSSが読み込まれてから画面に表示されるまでの間に、ブラウザがどのような処理を行っているかを説明します。 ファイル読み込みから表示までの一連の流れは以下図の通りです。 [1]
![[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/705cdef7654f2f96a242f9a2834ce643b78de75c/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F336.jpg)
脱初心者のためにこれだけは知っておきたいJavaScriptネタ
このブラウザ バージョンのサポートは終了しました。サポートされているブラウザにアップグレードしてください。
Twitter画像原寸表示ブックマークレット
Twitter画像原寸表示ブックマークレット 以下のブックマークレットのリンク（■の後にあるリンク）を、右クリック→「このリンクをブックマーク」などでブックマークに追加して使用してください。 ■ Twitter画像原寸表示 v1.151105 機能 Twitter公式画像投稿機能でアップロードされた、「pbs.twimg.com/」で始まるURLの写真やイラスト等が単独で表示された状態で使用すると、拡張子の後に何もないか末尾に「:large」「:thumb」が付与されている場合に、URLの末尾を「:orig」に変更してオリジナルサイズの画像に移動します。 同様に「pbs.twimg.com/」で始まるURLの画像を含むツイートのページ（URLが「twitter.com/アカウント名/status/ツイート番号」になっているページ）で使用すると、その画像のURLに「:orig」を付与してオリ
HTML5ゲームエンジン「Phaser」が初心者とモバイルにやさしくていい感じです - syonx
Phaser - Desktop and Mobile HTML5 game framework モバイル/デスクトップ向けのHTML5製の2Dゲームフレームワーク。 Pixi.jsベースでCanvasやWebGLのレンダリングもサポート。 Tags: flash-like 2d sounds collisions physics typescript webgl free cdnjs: //cdnjs.cloudflare.com/ajax/libs/phaser/2.0.5/phaser.min.js Examples - PixiJS ベースとなっている Pixi.js のサンプル。レンダリング結果の雰囲気がつかめる。 HTML5 Game Engines - Find Which is Right For You HTML5ベースのゲームエンジン一覧。比較がしやすい。 Phaser
jQuery 公式 Blog 「jquery-latest.js を使用するのをやめろ」
jQuery 公式 Blog は、「Don't Use jquery-latest.js」 と題された記事内で、今後、jquery-latest.js のバージョンを 1.11.1 で固定することと、本番環境で jquery-latest.js を読み込むのをやめてくれというアナウンスを行っています。 jQuery 公式 Blog は、7月 3日付けで投稿された 「Don't Use jquery-latest.js （jquery-latest.js を使うな）」 と題された記事内で、今後、jquery-latest.js のバージョンを 1.11.1 で固定することと、本番環境 （公開している Web サイト） で jquery-latest.js を読み込むのをやめてくれというアナウンスを行っています。 Don't Use jquery-latest.js ： Official jQ
片手間のJavaScriptから脱出するためにこれからのWebエンジニアが理解すべきこと - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 最近、こういった記事が世間をにぎわせている。こりゃエヴァの話なんてしてる場合じゃねぇ！と思ってさくっとこの辺の事情を理解するために必要なことをまとめてみる。 Railsが時代に合わなくなってきた Javascriptを使うのをやめろ：Railsの時代遅れ云々についての結論 昔ながらの「片手間に書くJavaScript」の限界 GoogleやTwitterでも実現できないのだから使うな問題 この話は、どの地点の何の話をしているのかよくわからないのです。現在ではかなりステップバック＆改善が行われ、Safari自体のクラッシュはアプ
エヴァンゲリオンでわかってしまうJavaScript - Qiita
はじめに 全国１億２０００万人のエヴァンゲリオンはわかるけど,JavaScriptはちょっと、、、な皆さんこんにちは。 JavaScriptのプログラミングは、エヴァンゲリオンよりは簡単なのですが、なぜかプログラマにしか浸透しません。 エヴァンゲリオンの諸概念を理解している方であれば、すでにJavaScriptプログラミングは理解していると言っても過言ではありません。 そのあたりをそういうことにして、本編にとりあえず行きましょう。 あわせて読みたい 半年で40kg痩せた！ダイエットでわかるリーンなプロジェクトマネジメント手法 1.地球とミックスイン まずは、エヴァンゲリオンの世界における地球をJavaScriptで表現してみたいと思います。 ここで登場するのはもちろんエヴァンゲリオン世界のトリックスター、ナディアと我らをつなぐものこと「第一始祖民族」ですよね。 彼らは隕石に「白き月」と「黒
ブログをノベルゲーム風に表示する - 日直地獄
ノベルゲーム風に日記を書いてみたいと思ったことはないでしょうか。 書けたら面白いかもと思うけれども、特にそんな需要は無いんじゃない？くらいでしょうか。 私もそう思います。 とはいえ、実際に見てみないと評価できない、と思ったので作りました 機能紹介 テキストの表示 このように一文字毎に表示されます テキストのスキップ 文字送り中にマウスをクリックすると、パラグラフ全体が表示されます 背景画像の設定 文章中にimgタグがあると、自動でbackground-imageに設定されます フルスクリーン表示モード フルスクリーンで表示することが出来ます。人の日記をフルスクリーンで読みたいという需要はあるでしょうか ブラウザで可能な表現が可能！ HTML読み込んでいるだけなのでだいたいなんでもできるはず!! やったね！！！ 以上です。おわり。ところで、完成して色々な文章で試していたら、読みやすいのでは？
イージング処理の計算式 - 強火で進め
ちょっと自前でイージング処理を書く必要に迫られ、調査。 こちらに計算式を書かれているサイトを発見。イージングって色々な種類が有るんですね。 Easing Equations http://gizma.com/easing/ サイトにはJavaScripでの実装も記載されています。JavaScriptで使いたい場合はこちらのサイトのコードを参考にすると良いでしょう。 こちらのサイトで紹介されているイージングは以下のもの Quadratic Cubic Quartic Quintic Sinusoidal Exponential Circular グラフで見るとそれぞれどの様な曲線になってるかを知りたかったのでNodeBoxでグラフにしてみました。 引数はそれぞれ以下を設定。 t : 0〜1 b : 0 c : 100 d : 1 因みに、引数はそれぞれ以下のデータのなります。 t : 時間(
How to build a racing game
I wasn’t really much for going to the arcades when I was younger… I didn’t need ’em with awesome C64 games sitting at home… but there were 3 arcade games that could always get my money - Donkey Kong, Dragons Lair, and Outrun… … and I really loved Outrun, the speed, the hills, the palm trees and the music - even the lowly c64 version. So, I wanted to try my hand at an old-school pseudo-3d racing ga
ぱんちら.js -JavaScriptでテクスチャマッピング- HTML5飯発表資料
HTML5飯 http://atnd.org/events/52477 発表資料 ぱんちら.js -JavaScriptでテクスチャマッピング-
PlayCanvas でドミノっぽくドット絵を作るテスト - jsdo.it - Share JavaScript, HTML5 and CSS
PlayCanvas でドミノっぽくドット絵を作るテスト ＜対応した点＞ ・box をドット絵になるよう配置。 ＜対応できていない点＞ ・真ん中へんのドミノ碑がうまく倒れてくれない。。。 ＜○○でドミノっぽくドット絵を作るシリーズ＞ ■ PlayCanvas でドミノっぽくドット絵を作るテスト http://jsdo.it/cx20/emEI ■ Three.js + Oimo.js でドミノっぽくドット絵を作るテスト http://jsdo.it/cx20/8ReN ■ Babylon.js + Cannon.js でドミノっぽくドット絵を作るテスト http://jsdo.it/cx20/6Etw ■ CubicVR.js + ammo.js でドミノっぽくドット絵を作るテスト http://jsdo.it/cx20/iBox // forked from cx20's "PlayCa
Mozilla、クロスプラットフォームのWebGLゲームエンジン「PlayCanvas Engine」公開 | OSDN Magazine
Mozillaは6月4日、オープンソースのクロスプラットフォームのゲーム構築用JavaScriptライブラリ「PlayCanvas Engine」をリリースした。「世界で最も容易に利用できるWebGLゲームエンジン」としている。 PlayCanvas Engineは3Dグラフィックを利用したゲーム開発向けのJavaScriptエンジン。Webブラウザ上で利用できる3DグラフィックスAPIである「WebGL」を利用する。プロジェクトは、WebGLがデフォルトで有効となった「Firefox 4.0」のリリース（2011年3月）後に立ち上げられており、パートナーとしてMozillaのほか、米ARMやゲーム開発を手がける米Activisionが名を連ねている。 対応OSはWindowsおよびMac OS X、Android、iOSで、グラフィックスのほか物理演算エンジンやアニメーション、2D/3D
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
adult-ah.com
[tmlib.js] スプライトのテクスチャをプログラムで生成する - Qiita![[tmlib.js] スプライトのテクスチャをプログラムで生成する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/f4c74b7fb8566371e939148b855acf649ff3973b/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMzA1NjglMkZwcm9maWxlLWltYWdlcyUyRjE0ODI3OTY2Nzg_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9NTExMzU1YTNmOWRhMmI1ZmQ5MjJmOTMyMjdlMTBlNzY%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Df4dd205a8ac12d319e59fb9affd1326e%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCdG1saWIuanMlNUQlMjAlRTMlODIlQjklRTMlODMlOTclRTMlODMlQTklRTMlODIlQTQlRTMlODMlODglRTMlODElQUUlRTMlODMlODYlRTMlODIlQUYlRTMlODIlQjklRTMlODMlODElRTMlODMlQTMlRTMlODIlOTIlRTMlODMlOTclRTMlODMlQUQlRTMlODIlQjAlRTMlODMlQTklRTMlODMlQTAlRTMlODElQTclRTclOTQlOUYlRTYlODglOTAlRTMlODElOTklRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz0zMmFkZDI2NzU4NmZmYjE5ZTI3OWUxZDlmYjlhN2QyZA%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBkYWlzaGlfaG1yJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9MmM0OTNjNTE2MjNkZTgxNjA4MTFmMDM0NjYwNGM4NTY%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Df24c190c49367f92e0a667e282ac92e7)
ニコニコ動画（Re:仮）
DeNA Engineering - DeNAエンジニアのポータルサイト
Web Animations
PlayCanvas - The Web Graphics Creation Platform
