例
required擬似クラスに対してスタイル定義をすることで、required属性が設定された入力欄のスタイルを変更出来る。 input:required {
background-color: lightcoral;
}
2014年2月15日土曜日
html5の必須入力欄のスタイル定義
cssを使用してhtml5で追加された必須入力欄(required属性が設定されいる項目)のスタイルを定義する方法
[html5]日付・時間系の入力欄
日付
input type="date"で日付入力欄になる例
<input type="date" >
出力例
時間
input type="time"で時間入力欄になる例
<input type="time" >
出力例
年月
input type="month"で時間入力欄になる例
<input type="month" >
出力例
2014年2月9日日曜日
[CoffeeScript]オブジェクトのプロパティを一覧表示
オブジェクトのプロパティの値をCoffeeScriptで一覧表示する方法。
CoffeeScriptでは、「for of」を使ってプロパティ数分ループを行って処理をする。
JavaScriptの場合は、「for in」なので微妙に違いがあって間違えやすい気がする。
CoffeeScriptでは、「for of」を使ってプロパティ数分ループを行って処理をする。
JavaScriptの場合は、「for in」なので微妙に違いがあって間違えやすい気がする。
コード例
for key, value of 変数名で、オブジェクトの全プロパティに対して処理が出来る。hoge = k1: 'v1' k2: 'v2' for key, value of hoge console.log key, ' = ', value class Hoge prop1: 'prop1' prop2: 'prop2' for key, value of new Hoge() console.log key, ' = ', value
実行結果
オブジェクト、インスタンスともにプロパティ名とプロパティの値が出力される。k1 = v1 k2 = v2 prop1 = prop1 prop2 = prop2
2014年1月26日日曜日
AngularJSでHello World
http://docs.angularjs.org/cookbook/helloworldを見つつAngularJSでHello Worldをやってみた。
Controllerのロジックは、CoffeScriptにしてみたぐらいで、後は上記のサイトの内容通り。
これで、htmlタグはいかがAngularJSアプリとなる。
CoffeeScriptだと関数がグローバルスコープとならないので、関数名の頭に@をつけたりwindowオブジェクトに作成してあげる必要がある。
ちょっとイケてない感じなのが残念。
このJavaScriptでは、コントローラのスコープ($scope)内にname属性を定義して'World'を代入しています。
Controllerのロジックは、CoffeScriptにしてみたぐらいで、後は上記のサイトの内容通り。
html
ポイントは、htmlタグでng-appディレクティブを記述しているところ。これで、htmlタグはいかがAngularJSアプリとなる。
<!DOCTYPE html>
<html ng-app="">
<head>
<meta charset="utf-8" />
<title>AngularJSでHello World!!</title>
</head>
<body>
<div ng-controller="HelloController">
Your name: <input type="text" ng-model="name"/>
<hr />
Hello {{name || "World"}}!
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="hello.js"></script>
</body>
</html>
JavaScript
htmlのng-controllerディレクティブで指定したControllerに対応するfunctionを定義する。CoffeeScriptだと関数がグローバルスコープとならないので、関数名の頭に@をつけたりwindowオブジェクトに作成してあげる必要がある。
ちょっとイケてない感じなのが残念。
このJavaScriptでは、コントローラのスコープ($scope)内にname属性を定義して'World'を代入しています。
@HelloController = ($scope) -> $scope.name = 'World'
実行結果
JavaScriptでname属性に設定した値が、「Hello {{name || 'World' }}!」部に出力される。Your name:
Hello {{name || "World"}}!
Hello {{name || "World"}}!
2013年12月21日土曜日
Rails4で「The provided regular expression is using multiline anchors (^ or $), 」エラー
Rails4を使って「RailsによるアジャイルWebアプリケーション開発」を写経していたら、
7章のバリデーションの実装のところで下のエラーが発生した。
これは、正規表現で「^」や「$」を使って精査していると複数行とのマッチで精査が完全じゃないよってことで発生するエラーのようです。
マルチラインでも先頭、末尾を判定できる「¥A」、「¥z」を使うと解決します。
stackoverflowに全く同じ本で困っている人がいて、何が問題なのか分かりやすく書かれてる。
http://stackoverflow.com/questions/17759735/regular-expressions-with-validating-in-ror-4
7章のバリデーションの実装のところで下のエラーが発生した。
The provided regular expression is using multiline anchors (^ or $), which may present a security risk. Did you mean to use \A and \z, or forgot to add the :multiline => true option?
これは、正規表現で「^」や「$」を使って精査していると複数行とのマッチで精査が完全じゃないよってことで発生するエラーのようです。
マルチラインでも先頭、末尾を判定できる「¥A」、「¥z」を使うと解決します。
変更前
validates :image_url, allow_blank: true, format: {
with: %r{\.(gif|jpg|png)$}i,
message: 'はGIF、JPG、PNG画像のURLでなければなりません'
}
変更後
validates :image_url, allow_blank: true, format: {
with: %r{\.(gif|jpg|png)\z}i,
message: 'はGIF、JPG、PNG画像のURLでなければなりません'
}
stackoverflowに全く同じ本で困っている人がいて、何が問題なのか分かりやすく書かれてる。
http://stackoverflow.com/questions/17759735/regular-expressions-with-validating-in-ror-4
2013年11月19日火曜日
[ruby]正規表現で文の先頭（末尾）と行頭（行末）
Rubyの正規表現の文の先頭（末尾）と行頭（行末）
文の先頭と末尾は、\Aと\zで表現する。
行の先頭と末尾は、^と$で表現する。
文の先頭と末尾は、\Aと\zで表現する。
行の先頭と末尾は、^と$で表現する。
例
lines = "line1\nline2" # line1とline2を含め文字列全体でマッチする puts /\A.+1.+2\z/m === lines # line1だけでマッチする puts /^.+1$/ === lines
2013年11月17日日曜日
[oracle12c]offsetを指定した上位n件の取得
Oracle12cの変更点のSELECT機能の強化に、下の記述がありました。
この機能を使うと、検索結果から指定した範囲のデータをねらって取得でき非常に便利だと思います。
※昔はROWNUM擬似列と副問い合わせ使って頑張って同じようなことをした記憶があります。
開始レコード番号は、offsetに指定した値 + 1なのでoffsetには10を指定する。
最後のレコードと同一のソートキーのレコードは、リミットを超えても全部取得する場合
最初のレートは異なり最後のキーワードをwith tiesにする
この機能を使うと、検索結果から指定した範囲のデータをねらって取得でき非常に便利だと思います。
※昔はROWNUM擬似列と副問い合わせ使って頑張って同じようなことをした記憶があります。
上位N番までの問合せの実行に、オフセットと、戻される行数または行数の割合を指定できます。
使い方
IDでソートして、11レコード目から5レコード取得する場合開始レコード番号は、offsetに指定した値 + 1なのでoffsetには10を指定する。
select * from table1 order by id offset 10 rows fetch first 5 rows only;
最後のレコードと同一のソートキーのレコードは、リミットを超えても全部取得する場合
最初のレートは異なり最後のキーワードをwith tiesにする
select * from table1 order by id offset 10 rows fetch first 5 rows with ties;
注意点
ソート(order by)とセットで使わないと結果が毎回変わる可能性がある。
登録:
投稿 (Atom)