Riot.js には yield という仕組みがあります. これを使いこなすことで定義済みのコンポーネントの一部を柔軟に拡張することができるようになります. 今回はこの yield について, デモや図を交えて解説したいと思います. そもそも Riot.js について知りたい方はまずこちらをどうぞ フロント界隈で一番イケてるのは AngularJS でも React でもなく Riot.js だという話 | phiary Riot.js の yield とは？ yield は, Riot.js のコア機能の一つで子タグに親タグから部分的に HTML を差し込むことができます. この仕組みをうまく活用することで拡張性のある柔軟なタグ(コンポーネント)を定義することができます. yield を使ったデモ yield を使ったデモです. header の中身を外から指定したり, material

以前, 『CSS でテキストの縦揃えを上揃え, 中央揃え, 下揃えにする方法 | phiary』というエントリーを書きました. このエントリーで紹介した中央揃えにする方法は, 複数行ある要素だと高さに合わせて CSS を書き換える必要がありました. 今回は, 高さが不確定な要素でもキレイに中央揃えにする方法を紹介します. How to やり方について解説します. まずセンタリングしたい要素の親要素に対して, position:absolute; を指定します. 今回でいうと .box ですね. .box { position: aboslute; ... } 次に, センタリングしたい要素に対して下記のように指定します. .box p { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-trans

phina.js には, 要素に top, bottom, left, right というプロパティがあります. これを上手く活用することで簡単に要素を画面からはみ出ないよう制御することができます. Code デモの実装コードです. /* * runstant */ phina.globalize(); var SCREEN_WIDTH = 960; var SCREEN_HEIGHT = 640; var BALL_NUM = 64; phina.define('MainScene', { superClass: 'CanvasScene', init: function(options) { this.superInit(options); (BALL_NUM).times(function(i) { var elm = Ball().addChildTo(this); elm.x =

phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python gulp には標準で watch というメソッドがありこれを使えば 簡単にファイルを監視して, 変更時に特定の処理を行うといったことができます. Usage 使い方は gulp.watch(["監視したいファイル"], ["行いたいタスク"]) です. Example 実際に gulp.watch を使った例です. gulpfile.js に下記のコードを書いて var gulp = require("gulp"); gulp.task("change", function() { console.log

phina.js で パーティクルを使った炎エフェクトを作ったので簡単にそのデモとコードを紹介したいと思います. phina.js を使えば 100 行程度でこういったエフェクトを簡単に作ることができます.ちょっと応用すればゲームとかで爆発エフェクトとして使えるかと思います. また, 下の方にアレンジ例も乗っけているのでよかったら参考にしてください. Code 実装コード全体になります. パーティクル実装部分だけでいくと 50~60 行程度ですね. /* * runstant */ phina.globalize(); var PARTICLE_MAX_NUM = 256; // 最大パーティクル数 var PARTICLE_COLOR_START = 0; // color angle の開始値 var PARTICLE_COLOR_END = 30; // color angle の終

word-break: break-all で改行させる 基本的には, word-wrap: break-word を指定すれば要素の幅に応じて自動改行してくれるようになります. .line-break { word-wrap: break-word; } 下記が動作デモになります. 下の box ではちゃんと改行されているのが分かるかと思います. 引っかかりポイントその１ - white-space をリセットしよう 上記の方法で基本的には良いのですが, white-space: nowrap が指定されている場合は自動改行されなくなります. 確実に自動改行させたい場合は white-space: normal も付けるようにしましょう. .line-break { word-wrap: break-word; white-space: normal; } 引っかかりポイントその２ -

phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python オレの Advent Calendar 2015 - Adventar の 12 日目です. git を使っていると空ディレクトリを管理したいってことよくあると思います. 一時(tmp)ファイル や ログ(log) ファイル用のディレクトリなんかがそうですね. 実は, git は空ディレクトリは add できない仕様みたいです. ですが, .gitignore を上手く使うことでそれっぽいことができるようになります. 今回はその方法を紹介したいと思います. 1. ".gitkeep" という空ファイルを配

$watch を使って変更を監視しよう Vue.js で生成したオブジェクトは $watch というメソッドを持っています. これを使うことで登録しているデータの変更を監視することができます. 使い方はカンタンです. $watch(キー名, 変更時のコールバック) といった形で実行するだけです. 今回サンプルではこんな感じです. demo.$watch('message', function(now, prev) { console.log('changed:', prev, '->', now); }); この場合, demo の message データが変更されると登録した関数が実行されて, 前の値(prev) と今の値(now) が表示されます. 監視を解除しよう 以前のバージョンでは $unwatch ってやつがあったんですが, v0.11 から廃止されています. 代わりに $wa

phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python Mac の場合, ウィンドウを閉じてもアプリは起動したままってことってよくありますよね？ Electron の公式サンプルをそのまま打ち込んでアプリを作った場合もそうです. ただ, ちょっとしたユーティリティ系のツールやエディタなどの場合は, windows 同様ウィンドウを閉じたらアプリも kill して欲しいってこともよくあると思います. 今回はその方法について紹介します. Mac でもウィンドウを閉じたらアプリを終了する方法 っといっても // 全てのウィンドウが閉じたら終了 app.on('win

はじめに JavaScript の 黒魔術です. オブジェクトの中にオブジェクトがあってさらにその中にオブジェクトがある. んでその末端のオブジェクトが持つプロパティにサクッとアクセス(get/set)できたら素敵やん! ってことで, 今回はそれを実現する方法について紹介します. JavaScript の柔軟性を活かせばこんなこともやれちゃいますよ っていう tips です. 速度的な観点から見ると実用性は微妙なので使用する際にはくれぐれもご注意下さい. Object.prototype.$get() getter です. define 実装です. reduce 使って再帰的にオブジェクトを取得して, 最後の値を返しています. Object.defineProperty(Object.prototype, '$get', { value: function(key) { return ke

ちょっとしたコードで JavaScript を豊かにしよう♪ ってこと jQuery は 嫌い 使いたくない. だけど Pure JavaScript だとちょっと物足りないってときに使える便利なメソッドをまとめてみました. すべて Runstant によるサンプル付きなので, 実際に開いて動かして試すことができます. 実行したりコードをいじってみたりと遊んでみてください. 他にもこんなメソッドあるよーとかあれば追加するので 気軽に Twitter などでご連絡下さい. String.prototype.format() - 文字列フォーマット 文字列を拡張して Phyton っぽい format メソッドを定義しています. '(' + a + ')' って書いていたところを '({0})'.format(a) といった感じで書くことができるようになります. Define 実装です. Ob

昨日, 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