2015-03-11

マイグレーション

Rails

利用できるデータ型

string : 文字列
text : 長い文字列
integer : 整数
float : 浮動小数
decimal : 精度の高い小数
datetime : 日時
timestamp : タイムスタンプ
time : 時間
date : 日付
binary : バイナリデータ
boolean : Boolean

利用できるテーブルオプション

id : 主キー列idを自動生成するか（デフォルト => true）
primary_key : 主キー列の名前（idオプションがtrueの場合のみ）（デフォルト => id）
temporary : 一時テーブルとして作成するか（デフォルト => false）
force : テーブルを作成する前にいったん既存テーブルを削除するか（デフォルト => false）
options : その他のテーブルオプション

カラムオプション

limit : 列の桁数
default : デフォルト値
null : nullの値を許可するか（デフォルトはtrue）
precision : 数値の全体桁（decimal型）
scale : 小数点以下の桁数（decimal型）

テーブルの作成(create_table)

create_table テーブル名  [, オプション] do |t|
  t.型 カラム名  [, カラムオプション]
end

2015-01-31

ビュー

Rails

外部スタイルシートを指定するリンクタグを生成

stylesheet_link_tag(スタイルシートへのパス [, HTMLオプション])

＜＜　options　＞＞

:media
- 関連ファイルの出力メディアのリンクタイプ
- screen,tty,tv,projection,handheld,print,braille,aural,allが指定可能

Turbolinks は Asset Pipeline を活用しているアプリケーションにおいて画面遷移を高速化するライブラリです。

ex)

<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>

Railsの組み込み関数stylesheet_link_tagを使用して、
application.cssをすべてのメディアタイプにインクルードしています。

カスタムヘルパーを作成する

app/helpers配下に記述します。

ex)各ページのタイトルとデフォルトのタイトルを設定する。
各ページ

<% provide(:title, '各ページのタイトル') %>

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Ruby on Rails Tutorial Sample App | <%= full_title(yield(:title)) %></title>
    <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
    <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
    <%= csrf_meta_tags %>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

app/helpers/application_helper.rb

module ApplicationHelper
  def full_title(page_title)
    base_title = "Ruby on Rails Tutorial Sample App"
    if page_title.empty?
      base_title
    else
      "#{base_title} | #{page_title}"
    end
  end
end

2015-01-30

Sortableによる並べ替え

jQuery

やりたいこと

ドラッグ＆ドロップで、要素を並べ替えられるようにしたい

＜＜　追加要件　＞＞

並び替えドラッグ時に表示するカーソルを指定したい
移動中の項目を半透明にしたい
移動先のスペースをハイライト表示したい
並び順をクッキーに保存したい

ソース（ベース）

.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<link rel="stylesheet" href="./css/cssFile.css">
<link rel="stylesheet" href="./js/ui/jquery-ui.min.css">
<script type="text/javascript" src="./js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="./js/ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="./js/jsFile.js"></script>
</head>
<body>
<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
</body>
</html>

.js

$(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
});

.css

#sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 60%;
}
#sortable li { 
    margin: 0 3px 3px 3px;
    padding: 0.4em;
    padding-left: 1.5em;
    font-size: 1.4em;
    height: 18px;
    font-weight: bold;
}
#sortable li span {
    position: absolute;
    margin-left: -1.3em;
}

追加要件１（並び替えドラッグ時に表示するカーソルを指定したい）

cursorオプションを追加し、カーソルを指定できます。
.js

$( "#sortable" ).sortable({
    cursor: "move",
});

追加要件２（移動中の項目を半透明にしたい）

opacityオプションを指定し、
並び替え時のヘルパーの透明度を0.01～1の数値で指定出来ます。
.js

$( "#sortable" ).sortable({
    opacity: 0.7,
});

追加要件３（移動先のスペースをハイライト表示したい）

プレースホルダのclass名を指定します。
指定が無ければ空白になります。
.js

$( "#sortable" ).sortable({
    placeholder: 'ui-state-highlight',
});

.css

.ui-state-highlight {
    height: 2.2em;
    border: dotted 2px #0000ff;
}

追加要件４（並び順をクッキーに保存したい）

jQueryのcookie プラグインが必要なので入手し、
設定を追加。
.html

<script type="text/javascript" src="./js/cookie/jquery.cookie.js"></script>

順番を保存するために、それぞれにIDを持たせてやる。
.html

<ul id="sortable">
  <li id="sortable-item-1" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li id="sortable-item-2" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li id="sortable-item-3" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li id="sortable-item-4" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li id="sortable-item-5" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li id="sortable-item-6" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li id="sortable-item-7" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

クッキーに保存と、読み込みを行う。
1. updateイベントは、並び替え処理がを停止し、DOMのpositionが変更された際にトリガされます。
2. sortableのtoArrayメソッドで、並び替え要素のidを、Array.joinを使い文字列を格納します。
3. クッキーの処理。

cookie

cookieの保存

$.cookie("KEY", "VALUE", { options });

＜＜　options　＞＞

- expires => 有効期限（日数）
- path => 有効なパス（ドメイン全体で利用したい場合は’/’を設定）
- domain => 有効なドメイン
- secure => HTTPS接続の場合のみにcookieを送信(デフォルトはfalse)

cookieの取得

$.cookie("KEY");

4. splitで、分割して配列に格納する。
5. eachで、配列分処理を繰り返す。
6. appendToで要素を末尾に追加していく。

.js

$(function() {
    $("#sortable").sortable( {
        cursor: "move",
        opacity: 0.7,
        placeholder: "ui-state-highlight",
    });
    $("#sortable").disableSelection();
    $("#sortable").sortable( {
        update: function(event, ui) {
            var updateArray = $("#sortable").sortable("toArray").join(",");
            $.cookie("sortable", updateArray, {expires: 1});
        }
    });
    if($.cookie("sortable")) {
        var cookieValue = $.cookie("sortable").split(",");
        $.each(cookieValue, function(index, value){
            $("#" + value).appendTo("#sortable");
        });
    }
});

2015-01-29

郵便番号による住所検索

jQuery

やりたいこと

郵便番号を入力して住所を検索したい

使用したAPI

on( events [, selector] [, data], handler(eventObject))
- マッチした要素に任意のイベントをバインドします。
match
- 文字列中で一致するものを検索する String のメソッド。
- 結果情報の配列を返します。
- マッチしない場合は null を返します。
jQuery.ajax
- HTTP通信でページを読み込みます。

正規表現

^
- 入力の先頭にマッチします。
$
- 入力の末尾にマッチします。
\d
- 数字にマッチします。
- [0-9] と同等です。
{n}
- n には正の整数が入ります。
- 直前の文字がちょうど n 回出現するものにマッチします。

ソース

.html

<h1>郵便番号検索</h1>
<p>
  <span class="label">〒</span>
  <input type="text" id="zipcode1" name="zipcode1" size="3" maxlength="3">
  <span>-</span>
  <input type="text" id="zipcode2" name="zipcode2" size="4" maxlength="4">
</p>

.js

$(function() {
	   
	var lookup = function() {
		var z1 = $("#zipcode1").val();
	    var z2 = $("#zipcode2").val();
	    if (!z1.match(/^\d{3}$/) || !z2.match(/^\d{4}$/)) {
	      return;
		}
		$.ajax({
			url: "http://api.aoikujira.com/zip/json/" + z1 + z2,
			type: "GET",
			dataType: "json",
			success: function(res) {
				$("#address").val(res.state + res.city + res.address);
			},
			error: function(xhr, textStatus, errorThrown) {
				alert('Error!');
			}
		});
	};
	   
	$("#zipcode1").on("keyup", lookup);
	$("#zipcode2").on("keyup", lookup);
});

2015-01-29

Ajaxの基本

jQuery

Ajaxとは

「Asynchronous SavaScript + XML」の略称で、
JavaScriptから、非同期に通信を行って、
XMLデータを取得し、その内容を取り扱うものです。

jQueryを使う利点

Ajaxはブラウザによって、
「XMLHttpRequestオブジェクト」の実装方法が異なります。
jQueryはその違いを吸収してくれます。

HTMLを表示してみる

使用するAPI

click(fn)

要素がマウスなどのポインティングデバイスで
クリックされた場合に呼び出されます。

jQuery.ajax(options)

HTTP通信でページを読み込みます。
＜＜ options ＞＞

- url / string
  - Ajaxリクエストを送信するURLを指定します。
  - 省略時は呼び出し元のページに送信します。
- dataType / string
  - サーバから返されるデータの型を指定します。
  - 省略した場合は、jQueryがMIMEタイプなどを見ながら自動的に判別します。
  - xml,html,script,json,jsonp,textが指定可能です。
- cache / boolean
  - 通信結果をキャッシュかを指定します。
  - falseを設定すると、ブラウザによってリクエストされたページを強制的にキャッシュしないようにします。
  - 初期値は通常はtrueですが、dataTypeがscriptの場合にはfalseになります。
- success / function
  - AJAX通信が成功した場合に呼び出されるAjax Eventです。
  - この関数は、下記の2つを引数に受け取ります。
    1. data
      - サーバが返すデータをdataTYpeに沿ってフォーマットされた値が格納されています。
    2. textStatus
      - 通信の結果により、「"success", "notmodified", "error", "timeout", "abort", "parsererror"」のいずれかが指定されます。
- error / function
  - 通信に失敗した際に呼び出されるAjax Eventです。
  - この関数は、下記の3つを引数に受け取ります。
    1. XMLHttpRequestオブジェクト
    2. エラー内容
    3. 補足的な例外オブジェクト

ソース

index.html

<input type="button" id="bt" value="クリック">
<div id="add"></div>

ajaxSample.html

<p>この文章はajaxSample.htmlから取得しました。</p>

.js

$(function(){
    $("#bt").click(function() {
        $.ajax({
            url: "ajaxSample.html",
            dataType: "html",
            cache: false,
            success: function(data, textStatus){
                $("#add").html(data);
            },
            error: function(xhr, textStatus, errorThrown) {
                alert('Error!' + textStatus + ' ' + errorThrown);
            }
        });
    });
});

2015-01-28

入力数値をカンマ区切りにする

jQuery

やりたいこと

金額などのカンマをフォーカスが失われた時に入れたい
フォーカスを受けたときはカンマを無くしたい

今回使ったAPI

focus(fn)

フォーカスを受け取ったタイミングで発生する。

blur(fn)

フォーカスを失ったタイミングで発生する。

val()

全ての要素のvalue属性を返す。

replace(regexp|substr, newSubStr|function[, flags])

第一引数に検索する文字を指定し、第二引数に置換後の文字を指定します。

正規表現

半角数字1文字

gオプション

マッチしたすべてを置換する

肯定先読み

(?=部分パターン)

部分パターンがマッチすると真になる。
肯定先読みは、patternの直前の位置にマッチする。

否定先読み

(?!部分パターン)

部分パターンがマッチしないと真になる。

ex)
123456789という数字に対する正規表現の置換を
分解して考えてみる。

/(\d)(?=(\d{3})+(?!\d))/g, '$1,'

「\d」で「1」にマッチする。
「?=」で肯定先読み。
1. 「\d{3}」で「234」にマッチする。
2. 「?!\d」で「5」にマッチしてしまうので偽になる。
1.2.を繰り返していき「\d」で「6」にマッチする。
「?=」で肯定先読み。
1. 「\d{3}」で「789」にマッチする。
2. 「?!\d」で空白で数字ではないのでマッチしないで真になる。
肯定先読みは直前にマッチするので、「6」と「789」の直前にマッチする。
「$1,」により文字列が「123456,789」に置換される。
gオプションにより、上記処理が繰り返される。
1. カンマが入ったので、否定先読みは次にカンマで真になる。

ソース

.html

<p>金額:<input type="text" id="text1" value="">円</p>

.js

$(function(){
    $("#text1").focus(function() {
        $(this).val($(this).val().replace( /,/g, '' ));
    }).blur(function() {
        $(this).val($(this).val().replace( /(\d)(?=(\d{3})+(?!\d))/g, '$1,' ));
    });
});

2015-01-28

プレースホルダを表示する

今回やりたいこと

プレースホルダを表示する
プレースホルダの色を変える
フォーカスを受けたら、プレースホルダを消す
フォーカスを失ったときに、テキスト欄が空なら、プレースホルダを表示する

今回使用したAPI

focus(fn)

フォーカスを受け取ったタイミングで発生する。

blur(fn)

フォーカスを失ったタイミングで発生する。

val()

全ての要素のvalue属性を返す。

jQuery.trim(str)

文字列の先頭と末尾から、空白を除去します。

addClass(class)

指定した要素に、CSSクラスを追加する。

removeClass(class)

指定した要素から、CSSクラスを削除する。

ソース

.html

<input type="text" id="text1" value="">

.js

$(function(){

    //デフォルトの入力文字列を作成
    var def_val="入力してください"
    $("#text1").val(def_val).addClass("def_color");

    //テキストボックスにフォーカスされたら
    $("#text1").focus(function() {
        if($(this).val() == def_val)
            $(this).val('').removeClass("def_color");

    //テキストボックスからフォーカスが外されたら
    }).blur(function() {
        if(jQuery.trim($(this).val()) == "") {
            $(this).val(def_val).addClass("def_color");
        }
    });
});

.css

.def_color {
    color: #ccc;
}

cluchのブログ

業務で使ったり、学んでいる知識を忘れないために覚書として使っていく予定。

マイグレーション

利用できるデータ型

利用できるテーブルオプション

カラムオプション

テーブルの作成(create_table)

ビュー

外部スタイルシートを指定するリンクタグを生成

カスタムヘルパーを作成する

Sortableによる並べ替え

やりたいこと

ソース（ベース）

追加要件１（並び替えドラッグ時に表示するカーソルを指定したい）

追加要件２（移動中の項目を半透明にしたい）

追加要件３（移動先のスペースをハイライト表示したい）

追加要件４（並び順をクッキーに保存したい）

cookie

郵便番号による住所検索

やりたいこと

使用したAPI

正規表現

ソース

Ajaxの基本

Ajaxとは

jQueryを使う利点

HTMLを表示してみる

使用するAPI

ソース

入力数値をカンマ区切りにする

やりたいこと

今回使ったAPI

正規表現

肯定先読み

否定先読み

ソース

プレースホルダを表示する

今回やりたいこと

今回使用したAPI

ソース