サーバーだけに頼る時代は終わった!? クライアントサイドでしっかり Validation する方法 | phiary

2016/06/02 385 users クライアントサイド Validation Form サーバー

未だに form の validation って, とりあえずなんでも受け付けてサーバー側で してエラー返ってきたらヘッダーなりダイアログなりでエラーメッセージを表示するなんてのをよく見ます. 某大手サイトなんかはエラーがあるとリロードしちゃったりするし... 実はこの辺って HTML5 からクライアントサイドでもある程度できるように整備されています. なので ライブラリを使わなくてもある程度サー... 続きを読む

フロント界隈で一番イケてるのは AngularJS でも React でもなく Riot.js だという話 | phiary

2016/06/01 701 users AngularJS React Webpack wat イケ

10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。 - 日々、とんは語る。 あのライブラリは何故誕生したの?のまとめ - Qiita ここ最近話題になったエントリーですが, どちらも今最もイケてる Riot.js について全く触れられてなくて悲しくなったので書きました. はじめに 「webpack インストールしといてー」, 「gulp 導入して wat... 続きを読む

phina.js tips - 要素を画面からはみ出ないように制御しよう | phiary

2016/02/04 8 users bottom runstant Left phina.js

phina.js には, 要素に top, bottom, left, right というプロパティがあります. これを上手く活用することで簡単に要素を画面からはみ出ないよう制御することができます. Runstant Demo ランダムに動くボールですが, 画面の縁に当たる画面外に出ずに跳ね返っているのが分かるかと思います. Code デモの実装コードです. /* * runstant */ ph... 続きを読む

Onsen UI のススメ | phiary

2015/12/24 33 users WebView iPhone 備忘録 Onsen UI CSS

最近 WebView で包んだ iPhone/Android アプリってのを 仕事, プライベート問わずよく作ってたりします. 色々触った結果, 一旦 Onsen UI ってのに落ち着いたので, 備忘録がてら簡単に紹介したいと思います. Onsen UI とは？ OnsenUI とは, Web 上でアプリっぽい UI を表現できる JavaScript/CSS(主にCSS)フレームワークです. 驚... 続きを読む

git で空ディレクトリを管理(add)する方法 | phiary

2015/12/13 39 users Git tmp ＡＤＤ gitignore Adventar

オレの Advent Calendar 2015 - Adventar の 12 日目です. git を使っていると空ディレクトリを管理したいってことよくあると思います. 一時(tmp)ファイル や ログ(log) ファイル 用のディレクトリなんかがそうですね. 実は, git は空ディレクトリは add できない仕様みたいです. ですが, .gitignore を上手く使う ことでそれっぽいこと... 続きを読む

本日 JavaScript ゲームライブラリ『phina.js』をリリースしました! | phiary

2015/12/01 84 users ゲームライブラリ 国産 要求 設計 JavaScript

今日から phina.js Advent Calendar 2015 が始まりました♪ ってことで, 本日『phina.js』 をリリースしました! phina.js とは？ phina.js(フィナ ドット ジェイ・エス) は, JavaScript で作られた国産のゲームライブラリです. プログラミング初心者でも始めやすく, それでいて上級者のハイレベルな要求にも 応えられる, 柔軟な設計と豊... 続きを読む

JavaScript 便利メソッド集 | phiary

2015/11/16 168 users メソッド pure JavaScript コード 実際

ちょっとしたコードで JavaScript を豊かにしよう♪ ってこと jQuery は 嫌い 使いたくない. だけど Pure JavaScript だとちょっと物足りないってときに使える便利なメソッドをまとめてみました. すべて Runstant によるサンプル付きなので, 実際に開いて動かして試すことができます. 実行したりコードをいじってみたりと遊んでみてください. 他にもこんなメソッドあ... 続きを読む

CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | phiary

2015/11/04 639 users padding border box-sizing CSS3

今回は CSS3 から box-sizing について紹介します. width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？ これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-s... 続きを読む

あのダサいデザインとはおさらば! input[type=file] をかっこ良く表示できる jQuery プラグイン『Dropify』の使い方 | phiary

2015/10/30 38 users Dropify input File 百聞 type

デフォルトの input[type=file] ってなんか古臭い感じがしますよね？ とはいえ CSS でスタイリングしようとすると, デフォルトでかかってるスタイルが複雑でちょっとハードルが高かったりします. そこで今回は『Dropify』という jQuery プラグインを使って input[type=file] をかっこ良くする方法について紹介します. Runstant Demo 一見は百聞にし... 続きを読む

JavaScript の比較演算子 == と === の違い | phiary

2015/10/28 118 users fork Java 比較演算子 Runstant Lite

JavaScript における比較演算子 == と === の使い分けって, C や Java といった他の言語にはない仕組みなので意外と戸惑う人もいるみたいですね. 今回はその違いについてまとめました. Runstant Lite で作ったサンプルもあります. 良かったら fork して遊んでくださいな♪ 等価演算子と厳密等価演算子 JavaScript には, 型変換して比較するあいまいな比較... 続きを読む

JavaScript で DOM 要素の絶対座標を取得する方法 | phiary

2015/10/25 53 users DOM window.onload Hoge 備忘録 要素

備忘録. スペニット的に使ってもらえれば幸いです. DOM 要素の絶値座標を取得する element.scrollTop とかだと親からの相対値になっちゃいます. getBoundingClientRect() を使えば絶対座標を取得できます. window.onload = function() { var element = document.getElementById('hoge'); /... 続きを読む