phiary
『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
phiary
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:
phiary
今回は CSS3 から box-sizing について紹介します. width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？ これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-sizing プロパティを指定することでボックスサイズ(width, height) の算出方法を指定することができます. あまり普及していないようですが, 実はこれめちゃめちゃ便利だったりします!! まだ独自実装レベルだからかもしれません. ですが, 現在のCSS3 の草案にも 一応残ってるので, がっつり使わせて頂いてる次第です.
phiary
昨日, 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
phiary
JavaScript における比較演算子 == と === の使い分けって, C や Java といった他の言語にはない仕組みなので意外と戸惑う人もいるみたいですね. 今回はその違いについてまとめました. Runstant Lite で作ったサンプルもあります. 良かったら fork して遊んでくださいな♪ 等価演算子と厳密等価演算子 JavaScript には, 型変換して比較するあいまいな比較と厳密に比較する方法の２通りがあります. あいまいな比較 == は等価演算子, 厳密な比較 === は厳密等価演算子と呼びます. JavaScript の比較における特徴はこちら 2つの文字列は、文字の順序が同一で、長さが等しく、かつ対応する位置の文字が等しいとき、厳密に等しくなります。 2つの数値は、数字的に等しいとき（数字の値が等しいとき）、厳密に等しくなります。NaNは、どんなものとも（Na
『Runstant』作りました! 思いたったらすぐ開発, プログラミングに革命を... - Qiita
こんなん作りました. Runstant Runstant って？ ログイン不要でアクセスした瞬間からプログラミングを始められる エディタ & プレビューツールです. 名前は, run + instant からの造語で, インスタントラーメンのように一瞬でコーディングできて気軽に実行できるよって意味で名づけました. 特徴 instantly code ログインは不要! 即座にコーディングを始めることができます. Runstant は, ブラウザ上で高速に動作するエディタ&プレビューツールです. コードのハイライトや補完, オートインデント機能, vim や Emacs 対応といったコーディングに必要な機能をデフォルトで完備しています. instantly run コードを保存してみてください. 今までにない速度で実行結果を確認できます. サーバーを介さず, URL に情報を保存することにより
About | Runstant
createinstantly codeログインは不要! 即座にコーディングを始めることができます. Runstant は, ブラウザ上で高速に動作するエディタ&プレビューツールです. コードのハイライトや補完, オートインデント機能, vim や Emacs 対応といったコーディングに必要な機能をデフォルトで完備しています. play_arrowinstantly runコードを保存してみてください. 今までにない速度で実行結果を確認できます. サーバーを介さず, URL に情報を保存することにより高速な保存, 実行を実現しています. また, コンソール画面も使えるのでデバッグも簡単に行うことが出来ます. shareinstantly share完成したらツイッターやフェイスブックでシェアして自慢しましょう. URL に情報を保存しているので, 直接 URL をコピーしてシェアするだけで
『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.cloud
[tmlib.js] リファレンスのようなもの - Qiita
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
![[tmlib.js] リファレンスのようなもの - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/aad6c4b42b1cd71ef48dfc2d85c11f85945a29d2/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCdG1saWIuanMlNUQlMjAlRTMlODMlQUElRTMlODMlOTUlRTMlODIlQTElRTMlODMlQUMlRTMlODMlQjMlRTMlODIlQjklRTMlODElQUUlRTMlODIlODglRTMlODElODYlRTMlODElQUElRTMlODIlODIlRTMlODElQUUmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTkyOGEzMWEyMDJhYWFjNmMyMDk4MzE3YWQ4MzBlNjZj%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwc2ltaXJhYWFhJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz02ZTY5NzhkODRhODJjNjUxOTJhMzUzZTc3M2Q5OTg1OQ%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Da50f370d8a6d7342af2ee7a9b2428154)
Material Design Lite
Material Design Lite Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. Get started now. Templates The MDL components are created with CSS, JavaScript, and HTML. You can use the compone
１０分でできる!!Monacaとtmlib.jsでゲームアプリを作る環境を作る方法!!｜By U Zensen.
＊ はじめに!! 初めましてぴーすけと申します。 私ごとになりますが、今年の目標としてハイブリットアプリを開発し、公開をするという目標があります。そして私が作りたいアプリはゲームアプリです。構想はいろいろありますが、とりあえずは開発環境を整える必要があります。 そこで私が選んだのが、開発プラットフォームとしてブラウザがあればどこでも簡単に開発ができ、HTML5、JavaScriptで作成することができる「Monaca」とゲーム開発用のJavaScriptライブラリである「tmlib.js」を使用することにしました。 【注意】 この記事は2015/7/1に実際に「Monaca」や「tmlib.js」を使うための設定や登録を行い、その過程を書いたものになります。今後「Monaca」や「tmlib.js」に変更があれば登録や使用方法が変わるかもしれないので、ご注意ください。 ※ 登録、設定、動作
OS X 10.9でNokogiriのインストールエラーを解決 - Qiita
An error occurred while installing nokogiri (1.6.0), and Bundler cannot continue.Make sure that gem install nokogiri -v '1.6.0' succeeds before bundling. $ 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 $ ./c
OSX yosemite(10.10)でnokogiriのインストールに失敗 - Qiita
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
Installing Nokogiri on OSX 10.10 Yosemite
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
ハンズオン！tmlib.jsゆるふわ勉強会タッチゲームを作ろうに参加した
こんにちは。ゲーム大好き、JavaScript大好きのカグア！です。 昨日、幸運にもライブラリ作者さん主催のtmlib.jsのハンズオン勉強会に参加してきました。ドアキーパーで募集して速攻埋まるという人気の勉強会をレポートします（まあ会場を借りる橋渡しをしたので厳密には居候ですが）。 tmlib.jsとは、JavaScript製でつくられた、ゲーム制作を効率化するための便利なライブラリです。すでに多くのゲームが作られていて、国内でも人気が高まっているゲームエンジンの1つです。 ＞＞Home | tmlib.js tmlib.js勉強会の内容 勉強会の参加メンバーはライブラリ作者のphiさん含め8名。少人数でしたので、がっつり質問とかも出来て超感激でした。参加者は、ゲームエンジニアもいればエンジニア、WEB制作者などなど開発に関わる方ばかりでしたが、わたしのような門外漢にもやさしく教えていた
tmlib.js 入門 – タッチゲームを作ろう – Step02 タッチ時の処理とゲームクリア処理を実装しよう | tmlife
『tmlib.js 入門 – タッチゲームを作ろう』 の Step02 になります. 今回は, ピースをタッチに反応するようにして, 更にすべてタッチし終わったらリザルト画面に遷移するようにします. この Step でなんとなくゲームとして遊べるようになります. 今回の目標サンプル 前回はピースを表示するところまで実装しました. 今回はそこから, ピースのタッチ判定とクリア判定までを実装します. [runstant] 実装 まずは実装していきましょう. 1. 作業用 runstant を開く こちらを開いて下さい. [runstant] 前回作ったところから作業していきます. 2. タイマーとタッチする対象インデックス用変数を定義 GameScene の init 関数内で, 時間を測定する際に使う変数と, タッチ対象となるピースのインデックスの値を保持する変数それぞれを定義します.
人気のゲームエンジン tmlib.js、0.5系チュートリアルなどまとめ
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 ピースを並べて表示しよう | tmlife
『tmlib.js 入門 – タッチゲームを作ろう』 の Step01 になります. 今回作るゲームにおいてもっとも重要なステップです. ピースを画面に表示していきます. いっきに画面がゲームっぽくなりますよ. 今回の目標サンプル 前回はひな形の作成まででしたが, 今回はそこから縦横に敷き詰められたピースを表示するところまで作ります! [runstant] 実装 まずは実装していきましょう. 1. 作業用 runstant を開く こちらを開いて下さい. [runstant] 前回作ったひな形のところから作業していきます. 2. 開始シーンをタイトルからゲームに変えよう 毎回実行し直す度にタイトル画面から始まるのは面倒なので. setup の startLabel で指定していた値を ‘title’ から ‘game’ に変更しましょう. // 初期化 tm.game.setup({
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
templates | Runstant
Editor | Runstant