lua

組み込みが容易なスクリプト言語です。

Lua
lua リフェレンスマニュアル 5.3

[vagrant@localhost lua]$ lua -v
Lua 5.1.4  Copyright (C) 1994-2008 Lua.org, PUC-Rio
[vagrant@localhost lua]$ lua hello.lua
hello world

luaは多重代入も可能です。

x, y = 10, 15
x, y = y, x
print(x)
print(y)

文字列ではシングル、ダブルクォーテーションどちらも可能です。

s = "h'e'llo"
print(s)

配列:luaは1からカウントします。要素の個数は#です。

a = {23, 234, "hello"}
print(a[2])
print(#a)

条件分岐

score = 75
if score > 60 and score < 80 then
  print("ok")
else
  print("ng!")
end

ループ

i = 0
while i < 10 do
  print(i)
  i = i + 1
end

for文

for i = 0, 9, 2 do
  print(i)
end

構文

a = {12, 24, "hey"}
b = {name = "nari", score= 120}

for i, value in ipairs(a) do
 print(i, value)
 end

関数

function greet(name)
  print("hello, I am "..name)
end

greet("clinton")

可変引数

function sum(...)
  local a = {...}
  local total = 0
  for i = 1, #a do
    total = total + a[i]
  end
  return total
end
print(sum(2, 7, 23141, 131))

便利な命令文

math.max(2, 222, 14)
math.ceil(2.3)
math.floor(2.3)
math.random()
math.random(n) -- 1からnまでの整数値

文字列の命令文

s = string.len("google")
s =  #"google"
s = string.sub("google", 2, 3)
s = string.find("google", "l")
s = string.gsub("google", "e", "er")
s = string.reverse("google")

テーブルの命令文

a = {2, 25, 42, 1}
table.sort(a)

for i, v in inpairs(a) do
  print(v)
end

日付データの命令文

x = os.time()
x = os.date()
print(x)

Cloud9

Cloud9はクラウドの統合開発環境で、ブラウザ上で手軽に開発環境を用意することができます。
Cloud9

sign inすると、クレジットカードの入力項目があり、ドキッとしますが、登録によるチャージはありません。
%e7%84%a1%e9%a1%8c

初期画面
%e7%84%a1%e9%a1%8c

インターフェイスはdreamweaverっぽいですが、嫌いではないですね。javaのコンソールもあります。
%e7%84%a1%e9%a1%8c

apacheを起動して、サーバー上で確認することも可能です。
JavaScript Consoleはブラウザで閲覧します。php, ruby, pythonはコマンドラインから作っていきましょう。

sqliteはsqliteコマンド、mysqlはmysql-ctl cliを打ち込みます。

cloud9を使えば、railsも簡単に環境をつくることができます。
%e7%84%a1%e9%a1%8c

JavaScript 割り勘電卓

Math.floorは切り捨て、Math.ceilは切り上げ、Math.absは絶対値という仕組みを上手く利用します。正規関数/^[1-9][0-9]*$/も使用します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>割り勘電卓</title>
    <link rel="stylesheet" href="styles.css">
    <style>
      body {
        font-size:16px;
        text-align: center;
        font-family: Arial, sans-serif;
      }
      h1 {
        font-size: 24px;
      }
      input[type="text"]{
        padding: 7px;
        border: 1px solid #ddd;
        border-radius: 3px;
        width: 100px;
        font-weight: bold;
        font-size: 18px;
        text-align: right;
      }
      #btn {
        margin: 30px auto;
        width: 180px;
        border-radius: 5px;
        box-shadow: 0 4px 0 #e91b0c;
        background: #f44336;
        color: #fff;
        cursor: pointer;
        padding: 7px;
      }
      #btn:hover{
        opacity: 0.8;
      }
    </style>
  </head>
  <body>
      <h1>割り勘電卓</h1>
      <p>金額 <input type="text" id="price" value="0">
      <p>人数 <input type="text" id="num" value="0">
      <div id="btn">計算する</div>
      <p id="result"></p>
      <script>
      (function(){
          'use strict';

          var priceForm = document.getElementById('price');
          var numForm = document.getElementById('num');
          var btn = document.getElementById('btn');
          var result = document.getElementById('result');

          priceForm.addEventListener('click', function(){
              this.select();
          });
          numForm.addEventListener('click', function(){
              this.select();
          });

          btn.addEventListener('click', function(){
              var price = priceForm.value;
              var num = numForm.value;
              var x1, x2, y1, y2;
              var unit = 100;

              if (price.match(/^[1-9][0-9]*$/) && num.match(/^[1-9][0-9]*$/)){
                  if (price % num === 0){
                    result.innerHTML = '一人' +(price / num)+'円丁度です!';
                  } else {
                    x1 = Math.floor(price / num / unit) * unit;
                    y1 = price - (x1 * num);
                    x2 = Math.ceil(price / num / unit) * unit;
                    y2 = Math.abs(price - (x2 * num));
                    result.innerHTML = 
                    '一人' + x1 + '円だと' + y1 + '円足りません。<br>' +
                    '一人' + x2 + '円だと' + y2 + '円余ります。';
                  }
              } else {
                result.innerHTML = '入力された値に誤りがあります。'
              }
          });
      })();
      </script>
  </body>
</html>

%e7%84%a1%e9%a1%8c

Bootstrap クリッカブルタブメニュー

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap Practice</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

    <div class="container" style="padding:20px 0">

      <ul class="nav nav-tabs" style="margin-bottom:15px">
      <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
      <li><a href="#about" data-toggle="tab">About</a></li>
      </ul>

      <div class="tab-content">
        <div class="tab-pane active" id="home">ほーむだよ</div>
        <div class="tab-pane" id="about">aboutだよ</div>
      </div>

    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

%e7%84%a1%e9%a1%8c

Bootstrap modalウィンドウ

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap Practice</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

    <div class="container" style="padding:20px 0">

    <a data-toggle="modal" href="#myModal" class="btn btn-primary">show me</a>

    <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">my modal</h4>
        </div>
        <div class="modal-body">
        こんにちは!
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary">OK!</button>
        </div>
      </div>
    </div>

    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

%e7%84%a1%e9%a1%8c

Bootstrap progress-bar

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap Practice</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

    <div class="container" style="padding:20px 0">

    <div class="progress">
        <div class="progress-bar progress-bar-primary" style="width:60%"></div>
    </div>

     <div class="progress progress-striped active">
        <div class="progress-bar progress-bar-info" style="width:60%"></div>
    </div>

    <div class="progress progress-striped active">
        <div class="progress-bar progress-bar-info" style="width:30%"></div>
        <div class="progress-bar progress-bar-primary" style="width:20%"></div>
        <div class="progress-bar progress-bar-warning" style="width:10%"></div>
    </div>

    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

%e7%84%a1%e9%a1%8c

Bootstrap label, badge, alert, pannel

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap Practice</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

    <div class="container" style="padding:20px 0">

    <p>product a <span class="label label-primary">NEW!</span></p>

    <p>Inbox <span class="badge">5</span></p>
    <p>Inbox <span class="badge"></span></p>

    <div class="alert alert-info">
      <button class="close" data-dismiss="alert">&times;</button>
    おしらせ
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading">
      お知らせ
      </div>
      <div class="panel-body">
      こんにちは!
      </div>
    </div>

    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

%e7%84%a1%e9%a1%8c

GNU Emacsを触ってみよう

mac os10では標準でunixコマンドラインにインストールされているので確認してみましょう。

mac-no-MacBook-Air:~ mac$ emacs --version
GNU Emacs 22.1.1
Copyright (C) 2007 Free Software Foundation, Inc.
GNU Emacs comes with ABSOLUTELY NO WARRANTY.
You may redistribute copies of Emacs
under the terms of the GNU General Public License.
For more information about these matters, see the file named COPYING.

emacsの起動は、emacs、終了はcommand+cです。
画面:
-window:画面
-buffer:タブ
-mode line:今開いているbufferの情報
-mini buffer:コマンドの情報
a

ファイルは、コマンドキーで、ctr-x, ctr-fで、ディレクトリが表示されるので、編集したいファイルを開きます。

b

移動は以下のコマンドでも動けます。
c-f
c-b
c-p
c-n
c-a
c-e

angular.js

angular.module('myapp', [])
    .controller('MainController', ['$scope', function($scope) {
        $scope.users = [
            {"name":"taguchi", "score":52.22},
            {"name":"tanaka", "score":38.22},
            {"name":"yamada", "score":11.11},
            {"name":"hayashi", "score":5.25},
            {"name":"tanahashi", "score":82.4},
            {"name":"yasuda", "score":55.21},
            {"name":"minami", "score":32.8},
            {"name":"yanagi", "score":72.2}
        ];
    }])
    .controller('UserItemController', ['$scope', function($scope) {
        $scope.increment = function() {
            $scope.user.score++;
        };
    }]);
<!DOCTYPE html>
<html lang="ja" ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title>Angularの練習</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="myscript.js"></script>
</head>
<body>
    <h1>AngularJSの練習</h1>
    <div ng-controller="MainController">
        <ul>
            <li ng-repeat="user in users" ng-controller="UserItemController">
                {{user.name}} {{user.score}}
                <button ng-click="increment()">+1</button>
            </li>
        </ul>    
    </div>
</body>
</html>

Rails textのインクルード

PHPのように、テキストをインクルードできます。
コントローラのアクションに記述した変数がビューに反映されて、ブラウザ上に変数値が表示されます。

/app/controllers/top_controller.rb

class TopController < ApplicationController
  def index
  	@message = "Hello, rails"
  	@txtmessage = "what's up?"
  end
end

続いてです。
/app/viws/top/index.html.erb

<h1><%= @message %></h1>
<p><%= @txtmessage %></p>

ブラウザを更新し、リクエストを送ります。
%e7%84%a1%e9%a1%8c

サーバーのWEBrickは起動したままにしましょう。