タグ

JavaScriptに関するtmlifeのブックマーク (160)

  • gulp の gulp-rename モジュールを使って出力するファイルに .min をつける方法 - tmlife

    hoge.js を minify したファイルを hoge.min.js として 出力する方法です. gulp-rename ってやつを使います. 拡張子を .js から .min.js に変換する gulp-rename というタスクを使います. 下記コマンドでインストールできます. $npm install --save-dev gulp-rename ついでに uglify も $npm install --save-dev gulp-uglify あとは gulpfile.js に下記のようなタスクを 書けばOK♪ var gulp = require("gulp"); var rename = require("gulp-rename"); var uglify = require("gulp-uglify"); gulp.task("build", function()

    tmlife
    tmlife 2015/01/20
    ちょっとした小技です!
  • tmlib.js でグラフィックスプログラミング - 幾何学っぽいなにか - tmlife

    思いついたので, tmlib.js で幾何学っぽいやつ作りました. ちょっとしたグラフィックスプログラミングです. 下にデモとコードの解説載せてます. ゲームプログラミングは, 乱数やベクトル, 行列を手足のように使えてナンボの世界なので こういったプログラミングに慣れとくと楽しいですよ♪ Demo とりあえず作ったやつです. パーティクル同士が近づくとラインを結びます. マウスにも反応します. [runstant] runstant で作ったので実際に実行したり, 上の CONFIG イジって見た目を変えたりできます. よかったら遊んでみてください♪ Code コードはこんな感じです. /* * # tmlib.js でグラフィックスプログラミング - 幾何学っぽいなにか */ var SCREEN_WIDTH = 465; // スクリーン幅 var SCREEN_HEIGHT =

    tmlib.js でグラフィックスプログラミング - 幾何学っぽいなにか - tmlife
  • 『marked.js』 を使ってブラウザ上で markdown を html に変換する方法 - tmlife

    今まで markdown-js ってのを使っていたのですが, marked ってやつが table とか code block とかデフォルトで対応してて良い感じだったので 導入がてらまとめました. ついでに簡易エディタの作り方もざっくり書いたので最後まで見てもらえると幸いです. marked.js とは A full-featured markdown parser and compiler, written in JavaScript. Built for speed. markdown 用のパーサー&コンパイラです. javascript で書かれていて高速です! Links github marked.js の使い方 超簡単です! marked.js を読み込んで marked(テキスト) を実行するだけです. <script src="http://cdnjs.cloudfla

    『marked.js』 を使ってブラウザ上で markdown を html に変換する方法 - tmlife
  • [tmlib.js] ManagerSceneでのシーン管理 - Qiita

    tmlibのシーン管理についてちょうど数日前に良い方法を知れたので共有しておこうと思います。 今までのシーン移動 ほんとはもっとスマートな方法もあるんでしょうが自分はだいたい以下の2パターンくらいでした。 // ちょっと動的にやってみる var sceneList = { "hoge": HogeScene, "piyo": PiyoScene, "fuga": FugaScene, } var sceneName = "hoge"; app.replaceScene(sceneList[sceneName]()); なんかイケてない…。 tm.scene.ManagerScene!? なんかDocsに謎の存在が! tm.scene.ManagerScene - tmlib.js docs イマイチ使い方わからないのでちょうど日語版が出たスタック・オーバーフローで質問してみたらphiさん

    [tmlib.js] ManagerSceneでのシーン管理 - Qiita
  • tmlib.jsで3Dモデル表示 - Qiita

    tmlib.js Advent Calendar 2014の13日目の記事です。 (three.jsでつまづいて投稿が遅れてすいません) tmlib.js x three.js tmlibはthree.jsとの連携もサポートしてます(three.jsのver.57以前までなら動作OKでした) 最新のver.69までサポートしてくれるとモーフアニメーションも使えるので、今後のサポートに期待してますっ! という訳で今回はtmlib.jsで3Dモデル表示してみました〜♪ (WSADキー or 矢印キーで視点操作できます) 1)まずはblenderでモデル作成 tmlibはひよこが公式キャラなのでblenderでなんとなく作ってみる。 Web用に3Dモデル作るなら以下の点でblenderがオススメです! 1. 無料でMacWindowsもソフトが動く 2. three.js用にインポート/エクス

    tmlib.jsで3Dモデル表示 - Qiita
  • [tmlib.js] tmlib.js でゲームプログラミング始めませんか? - Qiita

    個人的にずっと作ってるゲームライブラリ tmlib.js の紹介です! tmlib.js Advent Calendar 2014 初日の予定だったのにこのタイミングになってしまいすみませんmm ※『国民全員プログラマ化』計画進行中 tmlib.js ってなに? まずはトップページを見てください. なんとなく分かりますかね?w てかそもそもなんて読むの?って話ですよね. 『てぃーえむ りぶ ドット じぇいえす』と読みます. ざっくり言うと tmlib.js は phiのphiによるphiのためのオレオレライブラリ アイディアを即座に形にできるライブラリ です!! tmlib.js ってどんなことできんの? グラフィックス描いたり ゲーム作ったり ツール作ったり 具体的にはどんなよ? 具体的な機能としては コア機能の拡張 (最近 high.js に分離しました) クラス定義, ネームスペース

    [tmlib.js] tmlib.js でゲームプログラミング始めませんか? - Qiita
    tmlife
    tmlife 2014/12/17
    書いたー!!
  • tmlib.jsでゲームをつくってみよう! - Qiita

    はじめに 最近、tmlibを使う機会が多いため 簡単なゲームでtmlibのチュートリアル的なものを書いてみようかと思います。 技術ブログ的なことは初めて書くので、見づらいかもです… とりあえず、プログラミングでサンプルが多いブロック崩しを作成! ちなみに、画像は一切使用せず、図形だけでつくります。 1.どこに書こう プログラムソースとかサーバーに置くの面倒なので、 とりあえず、runStantで書いていきます! runStant tmlib.js の公式エディタツール! 書いたコードがすぐに実行されるので、 tmlibやhtml5、javascript等をさくっと実行するのに便利。 さらに、書いた内容はURLで保存できるので、ブックマーク等を使用して いつでも続きから書ける。 runStantはこちら 2.tmlibの準備 最初にrunStantのページへアクセスすると、 下の画像のように

    tmlib.jsでゲームをつくってみよう! - Qiita
    tmlife
    tmlife 2014/12/05
    めちゃめちゃわかりやすく tmlib の入門書いてくれてます♪
  • ES6+カジュアルトークを開催しました #es6_casual - from scratch

    ES6+カジュアルトークを開催しました。 Ustreamはこちらです。 Ustream.tv: ユーザー dena_tech: DeNA Technology Seminar #ES6+カジュアルトーク, Recorded on 2014/10/29. コンピュータ 僕はES6を追い始めたのが遅くて、ちゃんと追うようになったらもっと前に追っている人がたくさんいたので、その人達を呼んでカジュアルトークをしつつ、ガチで学べる会を開催しました。 全体的に発表レベル高くて濃い話が聞けたと思っています。 TL;DR ちょっとES6使ってみよっかなーな人はrunstantがオススメです。 Node.jsの次のバージョンではarrow_functionがharmony付きで使えるようになります。Symbol, for-of, Collections, Object.observe, Promiseがデフ

    ES6+カジュアルトークを開催しました #es6_casual - from scratch
  • 複雑な正規表現を分かりやすくするライブラリ『VerbalExpressions』 - Qiita

    正規表現難しい! 謎の記号が並んでるし, いざ書いてもうまく判定できてるかよくわからない. もうプログラムの勉強なんかしたくないし, 生きているのがツライよぉ. そんな人にもってこいなのが, 今回紹介する『VerbalExpressions』です!! プロジェクトスタート時から watch していて, アプローチとして面白いなと思ったので紹介します. VerbalExpressions って? これはタイトルの通り複雑な正規表現を分かりやすくしてくれるライブラリです. コードは, 普通に正規表現書くよりも長くなっちゃいますが, 英文法に近いカタチで書くことができます. var tester = VerEx().startOfLine().then( "a" ).maybe( "b" ); var message = "abc"; console.log(tester.test(messag

    複雑な正規表現を分かりやすくするライブラリ『VerbalExpressions』 - Qiita
  • 未来のJavaScript『ECMAScript6』で便利そうなやつまとめてみた - Qiita

    そろそろECMAScript6を触っておきたいと思っていたところ、runstantとか言ういい感じのWebエディタが出たのでメモ。よく使いそうなやつをまとめてます。 (ECMAScript6は、ES6, ES.next, Harmonyなんて言われることも多いです) (現在スマホでサンプルのコードが見れないようなので、PCやタブレットで見てください) 便利そう順にサンプル 今までなぜなかった let const -> 環境依存だけどあるにはある デフォルト引数 クラス 継承 2進数とか直接書く すぐに覚えて使いたい アロー記法 アロー記法注意点 keyで演算を使用 メソッドの記述を簡略化 オブジェクトリテラル簡略化 文字列内で変数を展開 覚えたら便利そう for...of 分割代入(デストラクチャリング) 可変長引数 配列を展開して引数に渡す 可変長な変数の展開 -> 若干かぶる イテレー

    未来のJavaScript『ECMAScript6』で便利そうなやつまとめてみた - Qiita
  • traceur-compiler 入門 - from scratch

    最近ちょっとはまってるtraceur-compilerについて紹介していきます。 前書き 今回、書いてたら非常に長くなってしまって、ちょっとした薄いの記事くらいの文量があります。 その代わり、公式ドキュメント + コードの中を読みこんで書いているので、今のところ多分日では一番詳しい記事かと思います。 すごく長いので章分けしました。興味が有るところだけ読み飛ばしてもらってもいいかと思います。 第一章 traceur-compiler概要 第二章 ES6言語仕様概要 第三章 traceur compilerの使いどころと類似ツール 第一章 traceur-compiler概要 traceur-compilerとは Googleが作っている EcmaScript6 形式で書かれた JavaScript を EcmaScript5 の形式に変換してくれるツールです。"トレーサーコンパイラー"と

    traceur-compiler 入門 - from scratch
    tmlife
    tmlife 2014/07/31
    会長 runstant 使ってくれてるw
  • gistをbl.ocks.org以外で動かす - Qiita

    背景 先日Qiitaに投稿されたちょっとしたHTMLGitHub Gistに置いてbl.ocks.orgで表示するのがお手軽ですという記事をはてブ経由で知りました。 自分はもっと前からbl.ocks.orgを知っていましたが、結構なブクマが付いていたので驚きでした。(ホントは悔しかったw。内容は自分にとってもへーって感じですごいなぁ色々調べてるなぁと後からこっそり見て感じましたw) ちょうどこれと同時期に@Phiさんがログイン不要! 気軽にプログラミングを始められるWebエディタ『runstant』作りましたを投稿されました。 初めは、この2つは自分の中ではリンクせず、むしろ、gistを使ったbl.ocks.orgだと、gistを編集してから反映されるまでのタイムラグが当時気になり、トライ&エラーなスタイルでの開発に向かないから、runstant推しって感じでした。 gistをJSONP

    gistをbl.ocks.org以外で動かす - Qiita
  • 『ドットインストール』と『runstant』って実は相性良いんじゃね?って話 - Qiita

    あぁ, 罪だ... 気づいてしまった... 『ドットインストール』と『runstant』の相性の良さに... 先日, 公開した runstant ですがこれは HTML, CSS, JavaScript を編集, 実行できます. ドットインストールにあるWeb系のレッスンは, 大抵この3つを扱えれば事足ります. そしてなんといってもどちらもログイン不要で使うことが出来ます!! これは組み合わせて使うしかないでしょ! 今までにこれほど気軽にプログラミングを実行しながら学べる環境があったでしょうか? いやなかったです!(あったらコメントください!) これはもう, ごはん×明太子, 牛乳×バームクーヘン, 風呂上がり×ガリガリ君, 夏×TUBE, 原田社長×ベネッセ以来の革命かもしれない... ってことでどう使うかまとめてみました. 参考になれば幸いです. 試しに作ってみた AngularJS

    『ドットインストール』と『runstant』って実は相性良いんじゃね?って話 - Qiita
    tmlife
    tmlife 2014/07/28
    ステマしてみた♪
  • 気軽にプログラミングを始められるWebエディタ『runstant』作りました - Qiita

    7月19日. 久しぶりの3連休. 予定はぎっしりだった. だが神からのお告げがあった. なんか作れと. 気づいたらオレの指は Macbook Air の薄いキーボードの上だった. ってことで連休中にちょっとしたツール作りました. 気軽にプログラミングを始められるWebエディタです. 名前は runstant. run + instant の略で, インスタントラーメンのように一瞬で気軽に実行できるよって意味です. ログイン不要, サーバー通信なしで一瞬で プログラミングを始めることができます!! 一応, tmlib.js 公式エディタ的な 位置づけなのでデフォルトで tmlib.js のサンプルが入ってます. とりあえず触ってみてください -> こちら 特徴 ログインの必要ないよ 状態を hash で保存するのでサーバー通信しないよ html/css/javascript が書けるよ ちょ

    気軽にプログラミングを始められるWebエディタ『runstant』作りました - Qiita
  • runstant

    Aboutrunstant とは, ログイン不要, サーバー通信不要で コーディング, 実行, 保存ができる世界一簡単にプログラミングを始められるツールです. 嘘です. いや世界一以外はホントです. 結構便利です♪ Usage右側にコードを書く`save` ボタン(Command+S) を押す左側に実行画面が表示されますURL にコード情報が保存されますOther右上の html/style/script でそれぞれ編集を切り替えることができます右上の setting でタイトルや詳細の設定ができます右上の share で短縮URLをコピーしたり, twitter や facebook でシェアしたりダウンロードできます.要望や不満, お気付きの点などありましたらこちら @phi_jp の方までご連絡ください. あっあと一応 tmlib.js 公式エディタなので tmlib.js のことも

  • [tmlib.js] スプライトのテクスチャをプログラムで生成する - Qiita

    tm.display.Spriteのテクスチャに、プログラムで動的に生成した画像を利用する方法を紹介します。 やり方は至って簡単。 tm.graphics.Canvasオブジェクトを画像アセット名の代わりにコンストラクタに渡すだけです。 // キャンバスを用意 var t = tm.graphics.Canvas(); ... // いろいろ描く // スプライトに利用する tm.display.Sprite(t); // 100x100を横に12個並べたテクスチャを生成します var texture = tm.graphics.Canvas().resize(100 * 12, 100); for (var i = 0; i < 12; i++) { // 初期位置を保存しておきます texture.save(); // 右に100ずつずらします texture.translate(10

    [tmlib.js] スプライトのテクスチャをプログラムで生成する - Qiita
  • tmlib.jsでのアセットのロード - Qiita

    tmlib.jsでは、画像や音声等の素材を使用する前にロードしておくためにtm.ui.LoadingSceneを使います。 画像のロード 以下、"hiyoko.png"という画像をスプライトに貼って画面に出すコード例です。 tm.main(function() { var app = tm.display.CanvasApp("#app"); // LoadingSceneを作成 // "hiyoko.png"をロードし、"piyo"という名前で登録する // ロード完了後、MainSceneへ遷移する var loadingScene = tm.ui.LoadingScene({ assets: { "piyo": "hiyoko.png" }, nextScene: MainScene }); app.replaceScene(loadingScene); app.run(); });

    tmlib.jsでのアセットのロード - Qiita
  • [JavaScript] 配列(Array)の合計値, 平均値, 中央値をモダンに求める - Qiita

    よかったらこっちで見てください -> http://phiary.me/javascript-array-sum-average-median モダンといっても ECMAScript 5 から追加されたメソッドを使ってるってだけです... サンプルはこちら. 合計値を求める イケてない実装 普通に for 文回す. var sum = function(arr) { var sum = 0; for (var i=0,len=arr.length; i<len; ++i) { sum += arr[i]; }; return sum; }; var arr = [1, 2, 3, 4, 5]; console.log( sum(arr) ); // 15

    [JavaScript] 配列(Array)の合計値, 平均値, 中央値をモダンに求める - Qiita
  • [JavaScript] isNaN() の謎な挙動とその対策 - Qiita

    console.log(isNaN(NaN)); // true console.log(isNaN(5)); // false console.log(isNaN(true)); // false console.log(isNaN('NaN')); // true console.log(isNaN({a:100})); // true いやいや下の2つw そっちのほうが便利な場合もあるのは分かるんですが... isNaN() 謎挙動の理由 引数が暗黙的に数値に型変換してそれが NaN に変換されちゃって true が 帰ってきてるのだと思われる. isNaN() 謎挙動への対策 感覚的には NaN のときだけ NaN を返して欲しい! って調べてたら ECMAScript6 では Number.isNaN() ってやつが定義されてて これだとちゃんと NaN のときだけ true を

    [JavaScript] isNaN() の謎な挙動とその対策 - Qiita
  • [JavaScript][IE] みんなが幸せになれるコード - Qiita

    Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up

    [JavaScript][IE] みんなが幸せになれるコード - Qiita