templates | Runstant思いたったらすぐ開発, プログラミングに革命を...
『Runstant』作りました! 思いたったらすぐ開発, プログラミングに革命を... - Qiita
こんなん作りました. Runstant Runstant って？ ログイン不要でアクセスした瞬間からプログラミングを始められる エディタ & プレビューツールです. 名前は, run + instant からの造語で, インスタントラーメンのように一瞬でコーディングできて気軽に実行できるよって意味で名づけました. 特徴 instantly code ログインは不要! 即座にコーディングを始めることができます. Runstant は, ブラウザ上で高速に動作するエディタ&プレビューツールです. コードのハイライトや補完, オートインデント機能, vim や Emacs 対応といったコーディングに必要な機能をデフォルトで完備しています. instantly run コードを保存してみてください. 今までにない速度で実行結果を確認できます. サーバーを介さず, URL に情報を保存することにより
tmlib.js 入門 – タッチゲームを作ろう – Step02 タッチ時の処理とゲームクリア処理を実装しよう | tmlife
『tmlib.js 入門 – タッチゲームを作ろう』 の Step02 になります. 今回は, ピースをタッチに反応するようにして, 更にすべてタッチし終わったらリザルト画面に遷移するようにします. この Step でなんとなくゲームとして遊べるようになります. 今回の目標サンプル 前回はピースを表示するところまで実装しました. 今回はそこから, ピースのタッチ判定とクリア判定までを実装します. [runstant] 実装 まずは実装していきましょう. 1. 作業用 runstant を開く こちらを開いて下さい. [runstant] 前回作ったところから作業していきます. 2. タイマーとタッチする対象インデックス用変数を定義 GameScene の init 関数内で, 時間を測定する際に使う変数と, タッチ対象となるピースのインデックスの値を保持する変数それぞれを定義します.
tmlib.js 入門 – タッチゲームを作ろう – Step01 ピースを並べて表示しよう | tmlife
『tmlib.js 入門 – タッチゲームを作ろう』 の Step01 になります. 今回作るゲームにおいてもっとも重要なステップです. ピースを画面に表示していきます. いっきに画面がゲームっぽくなりますよ. 今回の目標サンプル 前回はひな形の作成まででしたが, 今回はそこから縦横に敷き詰められたピースを表示するところまで作ります! [runstant] 実装 まずは実装していきましょう. 1. 作業用 runstant を開く こちらを開いて下さい. [runstant] 前回作ったひな形のところから作業していきます. 2. 開始シーンをタイトルからゲームに変えよう 毎回実行し直す度にタイトル画面から始まるのは面倒なので. setup の startLabel で指定していた値を ‘title’ から ‘game’ に変更しましょう. // 初期化 tm.game.setup({
[JavaScript] ループ途中で抜ける処理は for(in break) ではなく some を使おう♪ - Qiita
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; for (var i=0,len=arr.length; i<len; ++i) { var value = arr[i]; if (value > 5) { break; } console.log(value); } [runstant] Array.prototype.some 5 より大きかったら true を返す. するとそれ以降のループが止まるので forEach っぽく書けてかつ break っぽいことができます. var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; arr.some(function(value) { if (value > 5) { return true; } console.log(value); });
![[JavaScript] ループ途中で抜ける処理は for(in break) ではなく some を使おう♪ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/79e86d9834c3b8962d2b080a44fb69c9522202c0/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMCVFMyU4MyVBQiVFMyU4MyVCQyVFMyU4MyU5NyVFOSU4MCU5NCVFNCVCOCVBRCVFMyU4MSVBNyVFNiU4QSU5QyVFMyU4MSU5MSVFMyU4MiU4QiVFNSU4NyVBNiVFNyU5MCU4NiVFMyU4MSVBRiUyMGZvciUyOGluJTIwYnJlYWslMjklMjAlRTMlODElQTclRTMlODElQUYlRTMlODElQUElRTMlODElOEYlMjBzb21lJTIwJUUzJTgyJTkyJUU0JUJEJUJGJUUzJTgxJThBJUUzJTgxJTg2JUUyJTk5JUFBJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz04YjY4Y2EyZjY4ZmVkNWFmMzE3Njc2ZmM4MTA0NzhjYQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwcGhpJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1hNzMyODE2YjRmOTNiOTE5N2U1YjI1NGNlZGNmMGY1OA%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D199f26470375c52d111a087603c8e0f1)
tmlib.js でグラフィックスプログラミング - 幾何学っぽいなにか - tmlife
思いついたので, tmlib.js で幾何学っぽいやつ作りました. ちょっとしたグラフィックスプログラミングです. 下にデモとコードの解説載せてます. ゲームプログラミングは, 乱数やベクトル, 行列を手足のように使えてナンボの世界なので こういったプログラミングに慣れとくと楽しいですよ♪ Demo とりあえず作ったやつです. パーティクル同士が近づくとラインを結びます. マウスにも反応します. [runstant] runstant で作ったので実際に実行したり, 上の CONFIG イジって見た目を変えたりできます. よかったら遊んでみてください♪ Code コードはこんな感じです. /* * # tmlib.js でグラフィックスプログラミング - 幾何学っぽいなにか */ var SCREEN_WIDTH = 465; // スクリーン幅 var SCREEN_HEIGHT =
tmlib.jsでゲームをつくってみよう！ - Qiita
はじめに 最近、tmlibを使う機会が多いため 簡単なゲームでtmlibのチュートリアル的なものを書いてみようかと思います。 技術ブログ的なことは初めて書くので、見づらいかもです… とりあえず、プログラミングでサンプルが多いブロック崩しを作成！ ちなみに、画像は一切使用せず、図形だけでつくります。 1.どこに書こう プログラムソースとかサーバーに置くの面倒なので、 とりあえず、runStantで書いていきます! runStant tmlib.js の公式エディタツール！ 書いたコードがすぐに実行されるので、 tmlibやhtml5、javascript等をさくっと実行するのに便利。 さらに、書いた内容はＵＲＬで保存できるので、ブックマーク等を使用して いつでも続きから書ける。 runStantはこちら 2.tmlibの準備 最初にrunStantのページへアクセスすると、 下の画像のように
node.js で Google URL Shortener を使って短縮 URL を作る - Qiita
備忘録です. ローカルで作ったプロジェクトを runstant 用に出力する grunt タスクを作ってて そんとき必要になったやつ. Google の goo.gl を使ってます. https バージョン var https = require('https'); var shortenURL = function(url, callback) { var req = https.request({ host: 'www.googleapis.com', path: '/urlshortener/v1/url', method: 'POST', headers: {'Content-Type': 'application/json'}, }, function(res) { var str = ''; res.on('data', function(chunk) { str += chu
未来のJavaScript『ECMAScript6』で便利そうなやつまとめてみた - Qiita
そろそろECMAScript6を触っておきたいと思っていたところ、runstantとか言ういい感じのWebエディタが出たのでメモ。よく使いそうなやつをまとめてます。 (ECMAScript6は、ES6, ES.next, Harmonyなんて言われることも多いです) (現在スマホでサンプルのコードが見れないようなので、PCやタブレットで見てください) 便利そう順にサンプル 今までなぜなかった let const -> 環境依存だけどあるにはある デフォルト引数 クラス 継承 2進数とか直接書く すぐに覚えて使いたい アロー記法 アロー記法注意点 keyで演算を使用 メソッドの記述を簡略化 オブジェクトリテラル簡略化 文字列内で変数を展開 覚えたら便利そう for...of 分割代入(デストラクチャリング) 可変長引数 配列を展開して引数に渡す 可変長な変数の展開 -> 若干かぶる イテレー
runstant·その場で書いて、その場で実行。tmlib.js公式オンラインエディタ MOONGIFT
Webアプリケーションはテキストエディタとブラウザさえあればすぐに開発できると言いますが、実際にはWebサーバも必要ですし、HTML側でファイルを読み込んだりするのも面倒に感じてしまいます。 そういった面倒さがなければ、自分が作りたいと思ったものをすぐ作り始められることでしょう。それは創造性を束縛することなく、どんどんモノ作りを楽しめるはずです。それを可能にするのがrunstantです。 runstantの使い方 runstantのメイン画面です。右がエディタ、左がプレビューになります。 HTML/スタイルシート/JavaScriptを切り替えられます。 コードの折りたたみができるので長くなってしまってもメンテナンス性は落ちません。 設定画面です。 自分で書いたコードはサーバ上に保存されませんが、専用のURLが生成されるのでそこにアクセスするとrunstantで動く形になります（コードをZ
gistをbl.ocks.org以外で動かす - Qiita
背景 先日Qiitaに投稿されたちょっとしたHTMLはGitHub Gistに置いてbl.ocks.orgで表示するのがお手軽ですという記事をはてブ経由で知りました。 自分はもっと前からbl.ocks.orgを知っていましたが、結構なブクマが付いていたので驚きでした。（ホントは悔しかったｗ。内容は自分にとってもへーって感じですごいなぁ色々調べてるなぁと後からこっそり見て感じましたｗ） ちょうどこれと同時期に@Phiさんがログイン不要! 気軽にプログラミングを始められるWebエディタ『runstant』作りましたを投稿されました。 初めは、この2つは自分の中ではリンクせず、むしろ、gistを使ったbl.ocks.orgだと、gistを編集してから反映されるまでのタイムラグが当時気になり、トライ＆エラーなスタイルでの開発に向かないから、runstant推しって感じでした。 gistをJSONP
『runstant』早くもアップデート! コンソール対応とかテーマ設定とかしてみた - Qiita
先日『runstant』という Webツールを公開しました. アクセスログ見ると結構な人が使ってくれたみたいでありがとうございます! 思いつきで適当に作ったわりに良いあんばいで落ち着いたので良かったです^^ それはそうと本題ですが, リリースしてからというもの あれができないだの, これ対応してくれだのと無責任なユーザーたちからありがたい意見が たくさん届いたので実装してみました. 今回はそのアップデート内容についてさらっと紹介します. 今回のアップデートの目玉です!! 昨日 『ドットインストール』と『runstant』って実は相性良いんじゃね？って話 という エントリーを公開したのですが, そこのコメントで @fainder さんから console.log の結果を見たいという大変おこがましい ありがたい要望が届きました. 確かになと思ったし, ドットインストールとの連携を勧めるなら
『ドットインストール』と『runstant』って実は相性良いんじゃね？って話 - Qiita
あぁ, 罪だ... 気づいてしまった... 『ドットインストール』と『runstant』の相性の良さに... 先日, 公開した runstant ですがこれは HTML, CSS, JavaScript を編集, 実行できます. ドットインストールにあるWeb系のレッスンは, 大抵この３つを扱えれば事足ります. そしてなんといってもどちらもログイン不要で使うことが出来ます!! これは組み合わせて使うしかないでしょ! 今までにこれほど気軽にプログラミングを実行しながら学べる環境があったでしょうか？ いやなかったです!(あったらコメントください!) これはもう, ごはん×明太子, 牛乳×バームクーヘン, 風呂上がり×ガリガリ君, 夏×TUBE, 原田社長×ベネッセ以来の革命かもしれない... ってことでどう使うかまとめてみました. 参考になれば幸いです. 試しに作ってみた AngularJS
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
