Category: uncategorized

Smalltalk

あのAlan Kayが作った歴史ある言語です。Pharoの公式サイトより開発環境がダウンロードできます。

Pharo Download

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

作ったコンテンツはimageとして保存することが可能です。

入力はplayground、表示はtranscriptで表示します。smalltalkはオブジェクトに対して、メッセージを送信するものになっています。
%e7%84%a1%e9%a1%8c

Transcript show: 'hello'

ctl + ‘d’で実行のショートカットになっています。

改行

Transcript show: 'hello'.
Transcript cr.
Transcript show: 'world'

カスケード

Transcript show: 'hello';
cr;
show: 'world'

inspector it 感動の領域に入ってきました。
%e7%84%a1%e9%a1%8c

変数

message := 'hello'.
Transcript show:message.

二項メッセージ

4 + 3 factorial gcd: 5

クラスとインスタンス

t := Date today.
t addDays:14.

システムブラウザ

Color browse.
color :=Color random.
color.

2 sqrt
(5/2)asFloat
5 // 2
5 \\ 2
5 + 3 * 2

文字列、配列

$a charCode
#(1 2 3)

配列

#(1 2 3) size.
#(1 2 3) reverse.
#(1 2 #(5, 2)).
#(1 $a 'hello').
#(1 2 3),#(10, 12, 15).
x:= #(2 5 8 10)
x at:2. 
x at: 2 put: 20

ブロック

[5 + 4] value.
[:x |x+2]value:2.
[:x :y | x* y ]value:10 value:20.

f :=[:x:y|x + y + 2].
f value:10 value 20.

条件分岐

score :80.
(score > 60)
 ifTrue:['great!'] 
 ifFalse:['so so...']

ループ処理

i:=1.
10 timesRepeat:
[ Transcript show:i; cr.i:=i + 1].

配列の処理

#(1 3 5)do: 
	[:each| Transcript show:each; cr ].

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>