『toastr』とは 公式より toastr is a Javascript library for non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended. 手軽に, ノンブロッキングな通知, つまりトースト通知を実装できる JavaScript ライブラリです. 使い方は Pure JavaScript っぽいですが, jQuery に依存したライブラリとなっています. github demo 『toastr』 デモ 簡単なデモを作ってみました. ボタンを押すとトーストが表示されるのがわかるかと思います. 『toastr』 の使い方 1. toastr を読み込む <!-- jquery

Electron 入門です. 説明うんぬんよりもとりあえず触ってみたいって方向けの入門エントリー. 最短でインストールから実行, 配布用ファイルの作成までやる方法です. 「これ何やってんの？」 とか 「どういう意図で？？」 などありましたら 気軽に下のコメントや Twitter にて質問してください. Setup ディレクトリを作成 $ mkdir electron-app $ cd electron-app package.json を作る 色々聞かれるので適当に enter 押す $ npm init 出力された package.json の中身 { "name": "electron-app", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error:

今回は CSS3 から box-sizing について紹介します. width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？ これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-sizing プロパティを指定することでボックスサイズ(width, height) の算出方法を指定することができます. あまり普及していないようですが, 実はこれめちゃめちゃ便利だったりします!! まだ独自実装レベルだからかもしれません. ですが, 現在のCSS3 の草案にも 一応残ってるので, がっつり使わせて頂いてる次第です.

昨日, JavaScriptでURLパラメーターを取得し配列に格納しておく - Qiita というエントリーがバズってて, 自分も似たような機能をよく自作するので紹介したいと思います. タイトルはちょっと盛っちゃってますが, 見る人によっては 気持の良い実装コードになっていると思います. Code QueryString というオブジェクトに対して, parse, stringify をそれぞれ定義しています. var QueryString = { parse: function(text, sep, eq, isDecode) { text = text || location.search.substr(1); sep = sep || '&'; eq = eq || '='; var decode = (isDecode) ? decodeURIComponent : functi

JavaScript における比較演算子 == と === の使い分けって, C や Java といった他の言語にはない仕組みなので意外と戸惑う人もいるみたいですね. 今回はその違いについてまとめました. Runstant Lite で作ったサンプルもあります. 良かったら fork して遊んでくださいな♪ 等価演算子と厳密等価演算子 JavaScript には, 型変換して比較するあいまいな比較と厳密に比較する方法の２通りがあります. あいまいな比較 == は等価演算子, 厳密な比較 === は厳密等価演算子と呼びます. JavaScript の比較における特徴はこちら 2つの文字列は、文字の順序が同一で、長さが等しく、かつ対応する位置の文字が等しいとき、厳密に等しくなります。 2つの数値は、数字的に等しいとき（数字の値が等しいとき）、厳密に等しくなります。NaNは、どんなものとも（Na

思いたったらすぐ開発, プログラミングに革命を...

こんなん作りました. Runstant Runstant って？ ログイン不要でアクセスした瞬間からプログラミングを始められる エディタ & プレビューツールです. 名前は, run + instant からの造語で, インスタントラーメンのように一瞬でコーディングできて気軽に実行できるよって意味で名づけました. 特徴 instantly code ログインは不要! 即座にコーディングを始めることができます. Runstant は, ブラウザ上で高速に動作するエディタ&プレビューツールです. コードのハイライトや補完, オートインデント機能, vim や Emacs 対応といったコーディングに必要な機能をデフォルトで完備しています. instantly run コードを保存してみてください. 今までにない速度で実行結果を確認できます. サーバーを介さず, URL に情報を保存することにより

思いたったらすぐ開発, プログラミングに革命を...

createinstantly codeログインは不要! 即座にコーディングを始めることができます. Runstant は, ブラウザ上で高速に動作するエディタ&プレビューツールです. コードのハイライトや補完, オートインデント機能, vim や Emacs 対応といったコーディングに必要な機能をデフォルトで完備しています. play_arrowinstantly runコードを保存してみてください. 今までにない速度で実行結果を確認できます. サーバーを介さず, URL に情報を保存することにより高速な保存, 実行を実現しています. また, コンソール画面も使えるのでデバッグも簡単に行うことが出来ます. shareinstantly share完成したらツイッターやフェイスブックでシェアして自慢しましょう. URL に情報を保存しているので, 直接 URL をコピーしてシェアするだけで

今まで 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.cloud

phina.js phina.js はtmlib.jsを再設計し最初から作りなおしたもので、現在開発中です。 http://phinajs.com/ tmlib.jsは現在開発しておりませんので、こちらの記事も更新しません。 _ 一度ソースコードを全て読んでおきたかったので、ついでにまとめるという感じです。 暇なときに追記していきます。 間違ってるところや、追記したいこと、サンプルを載せたいなどありましたら、 編集リクエストを送ってやってください。 サンプルだけ サンプルだけ見たい時はこちらへどうぞ [tmlib.js] 関数やクラスのサンプル 目次 tm event util geom collision dom asset input graphics anim app display ui game three sound social google 追記履歴 2015/07/16

＊ はじめに!! 初めましてぴーすけと申します。 私ごとになりますが、今年の目標としてハイブリットアプリを開発し、公開をするという目標があります。そして私が作りたいアプリはゲームアプリです。構想はいろいろありますが、とりあえずは開発環境を整える必要があります。 そこで私が選んだのが、開発プラットフォームとしてブラウザがあればどこでも簡単に開発ができ、HTML5、JavaScriptで作成することができる「Monaca」とゲーム開発用のJavaScriptライブラリである「tmlib.js」を使用することにしました。 【注意】 この記事は2015/7/1に実際に「Monaca」や「tmlib.js」を使うための設定や登録を行い、その過程を書いたものになります。今後「Monaca」や「tmlib.js」に変更があれば登録や使用方法が変わるかもしれないので、ご注意ください。 ※ 登録、設定、動作

$ brew install libxml2 libxslt $ brew link libxml2 libxslt $ wget http://ftp.gnu.org/pub/gnu/libiconv/libiconv-1.13.1.tar.gz （※直接URLを叩いてtar.gzファイルをDLし、/usr/local/Cellar/libiconv/に置きました） $ tar xvfz libiconv-1.13.1.tar.gz $ cd libiconv-1.13.1 $ ./configure --prefix=/usr/local/Cellar/libiconv/1.13.1 $ make $ sudo make install $ sudo gem install nokogiri -- --with-xml2-include=/usr/local/Cellar/libxml

Gem::Ext::BuildError: ERROR: Failed to build gem native extension. /Users/hoge/.rbenv/versions/2.1.5/bin/ruby extconf.rb --use-system-libraries=true Building nokogiri using system libraries. libxml2 version 2.6.21 or later is required! *** extconf.rb failed *** Could not create Makefile due to some reason, probably lack of necessary libraries and/or headers. Check the mkmf.log file for more detail

I recently upgrade to the 10.10 Yosemite beta, but I'm having trouble getting Nokogiri installed. I'm using RVM and Ruby 1.9.3. I've also followed the steps here and tried following the instructions on Nokogiri's homepage. I've installed libxml2 (2.9.1) and libxslt (1.1.28) via homebrew, and have tried using the command line tools from both my Xcode 5 install and Xcode 6 beta. gem install nokogiri

こんにちは。ゲーム大好き、JavaScript大好きのカグア！です。 昨日、幸運にもライブラリ作者さん主催のtmlib.jsのハンズオン勉強会に参加してきました。ドアキーパーで募集して速攻埋まるという人気の勉強会をレポートします（まあ会場を借りる橋渡しをしたので厳密には居候ですが）。 tmlib.jsとは、JavaScript製でつくられた、ゲーム制作を効率化するための便利なライブラリです。すでに多くのゲームが作られていて、国内でも人気が高まっているゲームエンジンの1つです。 ＞＞Home | tmlib.js tmlib.js勉強会の内容 勉強会の参加メンバーはライブラリ作者のphiさん含め8名。少人数でしたので、がっつり質問とかも出来て超感激でした。参加者は、ゲームエンジニアもいればエンジニア、WEB制作者などなど開発に関わる方ばかりでしたが、わたしのような門外漢にもやさしく教えていた

『tmlib.js 入門 – タッチゲームを作ろう』 の Step02 になります. 今回は, ピースをタッチに反応するようにして, 更にすべてタッチし終わったらリザルト画面に遷移するようにします. この Step でなんとなくゲームとして遊べるようになります. 今回の目標サンプル 前回はピースを表示するところまで実装しました. 今回はそこから, ピースのタッチ判定とクリア判定までを実装します. [runstant] 実装 まずは実装していきましょう. 1. 作業用 runstant を開く こちらを開いて下さい. [runstant] 前回作ったところから作業していきます. 2. タイマーとタッチする対象インデックス用変数を定義 GameScene の init 関数内で, 時間を測定する際に使う変数と, タッチ対象となるピースのインデックスの値を保持する変数それぞれを定義します.

tmlib.jsをはじめる前の予備知識をまとめました。 関連記事 ＞＞ハンズオン！tmlib.jsゆるふわ勉強会タッチゲームを作ろうに参加した 追記：2015年5月7日　ノベルゲームプラグインのリンク追加。 追記：2015年5月6日　学習の進め方を追記しました。runstantで0.4系基本テンプレがいっきに書けるイースターエッグが！ 追記：23:12　リンク2本追加しました。神にもブクマして頂き((((；ﾟДﾟ))))ｶﾞｸﾌﾞﾙ！でも、ほんとtmlib.js楽しいよ！ tmlib.jsとは 国産のJavaScriptゲームエンジンです。アクションゲームやRPGなどにも使われるほどの高速性が人気です。当たり判定のコリジョンなども含まれていて、現在バージョン0.6が開発中で最新版は 0.5系（2015年5月7日現在0.5.1） です。JavaScriptでゲームづくりをするときに役立つ命令

『tmlib.js 入門 – タッチゲームを作ろう』 の Step01 になります. 今回作るゲームにおいてもっとも重要なステップです. ピースを画面に表示していきます. いっきに画面がゲームっぽくなりますよ. 今回の目標サンプル 前回はひな形の作成まででしたが, 今回はそこから縦横に敷き詰められたピースを表示するところまで作ります! [runstant] 実装 まずは実装していきましょう. 1. 作業用 runstant を開く こちらを開いて下さい. [runstant] 前回作ったひな形のところから作業していきます. 2. 開始シーンをタイトルからゲームに変えよう 毎回実行し直す度にタイトル画面から始まるのは面倒なので. setup の startLabel で指定していた値を ‘title’ から ‘game’ に変更しましょう. // 初期化 tm.game.setup({