Regular Expression-正規表現

      <script>
      var s = '@yamada, @sato, @ito';
      var rs = s.match(/yamada/);

      if (rs){
        console.log('マッチしました！');
      }
      </script>

キャレットを使うと、否定、下の例だと、abc以外となります。
[abc]:abc
[a-z]:a~z
[^abc]:abc以外
. :任意の一文字　/y…da/
^ :行頭　/^@yamada/
$ :行末 /@yamada$/
{} :直前の文字の繰り返し回数　0{2} ->00 0{2,}->00以上　0{2,4}->00,000,0000
[a-z]{5} ->a-zの五文字以内
[a-z]{3,6}　->a-zの3~6文字以内
a? : 0or1-> ,a
a* : 0 or more ->, a, aa, aaa
a* : 1 or more -> a, aa, aaa
() :(abc)* -> abc, abcabac
| :or ->(abc|def)
\: \n ->改行, \t ->タブ, \d ->[0-9],\w -> [a-zA-Z0-9_], \s -> スペース　\メタ文字 ->メタ文字
i : 大文字小文字を区別しない　-> (/yamada/i)
g : 全てのマッチした要素を配列で解す -> s.match(/a/g)
m : 複数行に対応させる　-> ^$は一行のみだが、mオプションは複数行
* or + の後の?: 最小マッチ　+?, *?
()RegExp s.match(/(.+?)@yamada) , RegExp.$1

例

<script>
      var s = '@yamada';
      var rs = s.match(/(@[A-Za-z0-9_]{1,15})/);
      console.log(RegExp.$1);
</script>
<script>
      var s = '<title>google.com</title>';
      var rs = s.match(/<title>([^<&#93;+)<\/title>/);
      console.log(RegExp.$1);
</script>

日付の取得

<script>
      var s = '2016-12-01';
      var rs = s.match(/(\d{4})[-\/](\d{2})[-\/](\d{2})/);
      console.log(RegExp.$1+'年'+RegExp.$2+'月'+RegExp.$3+'日');
</script>

mustache

data.yml

title: my data
score: 32

template.mustache

title: my data
score: 32

コマンドライン

[vagrant@localhost mustache]$ mustache data.yml template.mustache
- my data
- 32

title: my data
score: 32
html: <p>

- {{title}}
- {{score}}
- {{{html}}}
- {{&html}}

区切り記号の変更

- {{=<% %>=}}
- <% html %>
<%={{ }}=%>

真偽値の表示

{{#showScore}}
- {{score}}
{{/showScore}}
{{^showScore}}
- score not available
{{/showScore}}

複雑なデータ処理

users:
  - name: yamada
    email: yamada@gmail.com
  - name: hayashi
    email: hayashi@gmail.com
{{#users}}
- {{name}}({{email}})
{{/users}}

部品化して書くことも可能です

{{#users}}
{{>user}}
{{/users}}

YAML

YAMLは構造化されたデータの表現記法で、シンプルに記述することが可能です。スカラー(値)、シーケンス(配列)、マッピング(ハッシュ：key/value)のデータを扱います。

require 'yaml'
emails = YAML.load_file('mydata.yml')
p emails

- yamada@gmail.com
- nakamura@gmail.com
- saitou@gmail.com

[vagrant@localhost mustache]$ ruby parse.rb
["yamada@gmail.com", "nakamura@gmail.com", "saitou@gmail.com"]

シーケンス

[a, b, c]
- a
- 
  - b-1
  - b-2
- c

ハッシュ

name: yamada
score: 90
{name: yamamoto, score: 88}

name: igarashi
score:
  game-1: 30
  game-2: 35

複雑なデータ構造

names:
  - yamada
  - ito
scores:
   - 70
   - 77

names: [yamada, ito]
scores: [70, 77]

- name: yamada
 score: 70
- name: ito
 score: 77

改行

- |+
 this
 is
 a
 pen.

変更

- &leader tanaka
- *leader
- $staff sasaki
- *staff
- *staff
- *staff
- *staff

ハッシュのマージ

common: &common
    user: dbuser
    password: dbpassword
development:
  database: myapp_dev
  <<: *common
production:
  database: myapp_prod
  <<: *common
test:
  database: myapp_test
  <<: *common

ファイル読み出し

require 'yaml'

File.open('mydata.yml') do |io|
 YAML.load_documents(io) do |d|
    p d
  end
end

yamlへの変換を教えてくれる命令です。
puts users.to_yaml

Tabs

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <link rel="stylesheet" href="jquery-ui.min.css">
    <script src="./external/jquery/jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <style>
    .ui-selected {
      background: red;
    }
  </style>
  </head>
  <body>
  <div id="tabs">
  
  <ul>
    <li><a href="#menu1">Menu1</a></li>
    <li><a href="#menu2">Menu2</a></li>
    <li><a href="#menu3">Menu3</a></li>
  </ul>

  <div id="menu1">menu 1</div>
  <div id="menu2">menu 2</div>
  <div id="menu3">menu 3</div>
  </div>
  <script>
    $(function(){
      $('#tabs').tabs();
      });
  </script>
  </body>
</html>

Progressbar and slider

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <link rel="stylesheet" href="jquery-ui.min.css">
    <script src="./external/jquery/jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <style>
    .ui-selected {
      background: red;
    }
  </style>
  </head>
  <body>
  <div id="bar" style="width:200px"></div>
  <div id="slider" style="width:200px; margin-top:20px"></div>

  <script>
    $(function(){
      $('#bar').progressbar({
          value: 0
      });
      $('#slider').slider({
        slide: function(event, ui){
          console.log(ui.value);
          $('#bar').progressbar('option', 'value', ui.value);
        }
      });
      });
  </script>
  </body>
</html>

Datepicker

Datepickerは表示する日付を制限できます。例:上の動画のように、本日から1カ月先まで
minDate:0,
maxDate: “+1M”

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <link rel="stylesheet" href="jquery-ui.min.css">
    <script src="./external/jquery/jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <style>
    .ui-selected {
      background: red;
    }
  </style>
  </head>
  <body>
  <input type="text" id="datepicker">

  <script>
    $(function(){
        $('#datepicker').datepicker({
          dateFormat: "yy-mm-dd",
          minDate:0,
          maxDate: "+1M"
        });
      });
  </script>
  </body>
</html>

dialog

<body>
  <button>open!</button>
  <div id="msg">こんにちは。
  </div>

  <script>
    $(function(){
        $('button').click(function(){
          $('#msg').dialog('open');
        });
        $('#msg').dialog({
          autoOpen: false,
          buttons: {
            "ok": function (){
              $(this).dialog('close');
            }
          },
          title: "title",
          modal: true
        });
      });
  </script>
  </body>

Accordion

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <link rel="stylesheet" href="jquery-ui.min.css">
    <script src="./external/jquery/jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <style>
    .ui-selected {
      background: red;
    }
  </style>
  </head>
  <body>
  <div id="accordion">
  <h3><a href="">title</a></h3>
  <div>こんにちは。</div>
  <h3><a href="">title</a></h3>
  <div>こんにちは。</div>
  <h3><a href="">title</a></h3>
  <div>こんにちは。</div>
  <h3><a href="">title</a></h3>
  <div>こんにちは。</div>
  </div>
  <script>
    $(function(){
        $('#accordion').accordion();
      });
  </script>
  </body>
</html>

autocomplete

 <script>
    $(function(){
        var langs = ["ja", "en", "cn", "fr", "sp"];
        $('#langs').autocomplete({
            source: langs
        });
      });
  </script>

Sortable

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <link rel="stylesheet" href="jquery-ui.min.css">
    <script src="./external/jquery/jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <style>
    .ui-selected {
      background: red;
    }
  </style>
  </head>
  <body>
  <ul id="sortable">
  <li id="item_1">item1</li>
  <li id="item_2">item2</li>
  <li id="item_3">item3</li>
  <li id="item_4">item4</li>
  <li id="item_5">item5</li>
  </ul>
  <script>
    $(function(){
       $('#sortable').sortable({
        cursor: 'move',
        opacity: 0.5,
        update: function(event, ui){
          $(this).sortable("serialize");
        }
       });
      });
  </script>
  </body>
</html>

Resizable

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <link rel="stylesheet" href="jquery-ui.min.css">
    <script src="./external/jquery/jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <style>
    .box {
    width: 100px;
    height: 100px;
    background: red;
    }
  </style>
  </head>
  <body>
  <div class="box">box</div>
  <script>
    $(function(){
      $('.box').draggable().resizable({
        handles: 'all',
        //aspectRatio: true
        stop: function (event, ui){
          console.log(ui.size.hight, ui.size.width);
        }
         });
      });
  </script>
  </body>
</html>

Selected

<script>
    $(function(){
       var selected = new Array();
       $('#selectable').selectable({
         selected: function(event, ui){
          selected.push(ui.selected.id);
          console.log(selected);
         },
         unselected: function(event, ui){
           var id = ui.unselected.id;
           selected.splice(selected.indexOf(id), 1);
           console.log(selected);
         }
       });
      });
  </script>

Droppable

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <link rel="stylesheet" href="jquery-ui.min.css">
    <script src="./external/jquery/jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <style>
    .box {
    width: 50px;
    height: 50px;
    background: #ccc;
    margin-bottom: 20px;
    }
    .target {
      width: 100px;
      height: 100px;
      background: pink;
    }
  </style>
  </head>
  <body>
  <div class="box">box</div>
  <div class="target">target</div>
  <script>
    $(function(){
      $('.box').draggable();
      $('.target').droppable({
        accept: '.box',
        drop: function(event, ui){
          console.log('dropped!');
        }
      });
      });
  </script>
  </body>
</html>

ui追加

    $(function(){
      $('.box').draggable({
        helper: 'clone'
      });
      $('.target').droppable({
        accept: '.box',
        hoverClass: 'hover',
        tolerance: 'fit',
        drop: function(event, ui){
          ui.draggable.clone().appendTo(this);
          console.log('dropped!');
        }
      });
      });