AngularJS tips - ng-options を使って select 要素に option 要素をぶら下げる方法 | phiary
配列からオプションを生成 item for item in Array という形で指定します. もっともシンプルなパターンです. <select ng-model="year" ng-options="year for year in years"></select> demo オブジェクトの配列からオプションを生成 item.keyname for item in Array という形で指定します. label と value は同じ値になります. <select ng-model="month" ng-options="month.ja for month in months"></select> demo オブジェクトの配列からオプションを生成(key, value 両方指定) as を使うことで label と value それぞれ別の値を指定できます. <select ng-mo
phiary
$watch を使って変更を監視しよう Vue.js で生成したオブジェクトは $watch というメソッドを持っています. これを使うことで登録しているデータの変更を監視することができます. 使い方はカンタンです. $watch(キー名, 変更時のコールバック) といった形で実行するだけです. 今回サンプルではこんな感じです. demo.$watch('message', function(now, prev) { console.log('changed:', prev, '->', now); }); この場合, demo の message データが変更されると登録した関数が実行されて, 前の値(prev) と今の値(now) が表示されます. 監視を解除しよう 以前のバージョンでは $unwatch ってやつがあったんですが, v0.11 から廃止されています. 代わりに $wa
phiary
Google が発表してからちょこちょこ話題に上がっているマテリアルデザイン. 今回はそのマテリアルデザインをベースとしたフレームワーク『Materialize』使ってみたのでそのメモです. 毎回 bootstrap じゃ飽きちゃいますしね♪ Materialize って？ 公式より A modern responsive front-end framework based on Material Design 「マテリアルデザインをベースとしたモダンでレスポンシブなフロントエンドフレームワークです.」 的なことが書かれてますね. ざっくり言うと bootstrap のマテリアルデザイン版です. less ではなく sass 使ってるとことか若干インターフェースが違ったりしますが, 基本的には同じ感じで使えます. Reference Official Github cdnjs Materi
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python 未だに form の validation って, とりあえずなんでも受け付けてサーバー側で してエラー返ってきたらヘッダーなりダイアログなりでエラーメッセージを表示するなんてのをよく見ます. 某大手サイトなんかはエラーがあるとリロードしちゃったりするし... ユーザーさんからすると入力した段階で何かしら間違いがあったらすぐに教えて欲しいですよね. 実はこの辺って HTML5 からクライアントサイドでもある程度チェックできるように整備されています. なのでライブラリを使わなくてもある程度サーバーに送る前に
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python はじめに 「webpack インストールしといてー」, 「gulp 導入して watch しながら開発してー」, 「React だから ES6 でコード書いてー」 最近こんな会話が当たり前のように現場で飛び交っています. フロントエンドの開発者には HTML, CSS に特化している人 (coder, markup engineer) JavaScript は得意だけど CSS はちょっと弱い人 (javascripter) HTML, CSS, JavaScript 全てを統べる者 (frontend
phiary
最近 WebView で包んだ iPhone/Android アプリってのを 仕事, プライベート問わずよく作ってたりします. 色々触った結果, 一旦 Onsen UI ってのに落ち着いたので, 備忘録がてら簡単に紹介したいと思います. Onsen UI とは？ OnsenUI とは, Web 上でアプリっぽい UI を表現できる JavaScript/CSS(主にCSS)フレームワークです. 驚くほど簡単にネイティブと見分けの付かない UI を Web 上で構築することができます. また, AngularJS をベースとしてるので, MVほにゃららな開発も手軽にできます. (個人的には AngularJS はあまり好みではないので無理やり Riot.js と組み合わせて開発してますがw) ちなみに名前の由来は, Onsen UI => 温泉 => SPA => Single Page A
phiary
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" という空ファイルを配
phiary
ちょっとしたコードで JavaScript を豊かにしよう♪ ってこと jQuery は 嫌い 使いたくない. だけど Pure JavaScript だとちょっと物足りないってときに使える便利なメソッドをまとめてみました. すべて Runstant によるサンプル付きなので, 実際に開いて動かして試すことができます. 実行したりコードをいじってみたりと遊んでみてください. 他にもこんなメソッドあるよーとかあれば追加するので 気軽に Twitter などでご連絡下さい. String.prototype.format() - 文字列フォーマット 文字列を拡張して Phyton っぽい format メソッドを定義しています. '(' + a + ')' って書いていたところを '({0})'.format(a) といった感じで書くことができるようになります. Define 実装です. Ob
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 の草案にも 一応残ってるので, がっつり使わせて頂いてる次第です.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
