Category: uncategorized

PostController.php: editの関数を追記します。requestはpostにpatch, putを追加することが推奨されています。

  public function edit($id = null)
  {
    $post = $this->Posts->get($id);
    if ($this->request->is(['post', 'patch', 'put'])) {
      $post = $this->Posts->patchEntity($post, $this->request->data);
      if($this->Posts->save($post)){
        $this->Flash->success('Edit Success!');
        return $this->redirect(['action'=>'index']);
      } else {
        $this->Flash->error('Edit Error!');
      }
    }
    $this->set(compact('post'));
  }

edit.ctp: addと同じようにviewを作成します。buttonはUpdateになります。

<?php
$this->assign('title', 'Edit Post');
?>

<h1>
  <?= $this->Html->link('Back', ['action'=>'index'], ['class'=>['pull-right', 'fs12']]); ?>
  Edit Post
</h1>

<?= $this->Form->create($post); ?>
<?= $this->Form->input('title'); ?>
<?= $this->Form->input('body', ['row'=>'3']); ?>
<?= $this->Form->button('Update'); ?>

<?= $this->Form->end(); ?>

HamlはHTML Abstraction Markup Languageの略でhtmlのtemplate engineと呼ばれたりもします。rubyで書かれており、railsなどにも使われています。

index.haml -> (hamlコマンド) -> index.html

[vagrant@localhost haml]$ sudo gem install haml

以下のように字下げ・空白を作って記載します。

!!!
%html{:lang => "ja"}
  %head
    %meta(charset="UTF-8")
  %body
    hello world!

hamlで変換します。

[vagrant@localhost haml]$ haml index.haml index.html

[vagrant@localhost haml]$ haml -q -f html5 index.haml index.html

改行のコントロール

!!!
%html{:lang => "ja"}
  %head
    %meta(charset="UTF-8")
  %body
    %p hello
    %ul
      %li<>
        item

属性の記述

!!!
%html{:lang => "ja"}
  %head
    %meta(charset="UTF-8")
  %body
    $div{:id => "main", :class => "myClass"}
    %div(id="main" class="myClass")
    %div#main.myClass

フィルターの生成

!!!
%html{:lang => "ja"}
  %head
    %meta(charset="UTF-8")
  %body
    :css
      .myStyle {
        color: red;
      }
    :javascript
      alert(1)
        if(1){
         alret(2);
        }

ruby

!!!
%html{:lang => "ja"}
  %head
    %meta(charset="UTF-8")
  %body
    %p total is #{5 * 3}
    %p= Time.now
    - x = 5
    %p = x

    -(1..10).each do |i|
      %p = i

Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow:
Emmet download

命令のショートカットキー（ctl + e）でコーディングの効率化します。

コマンド一覧
https://github.com/sergeche/emmet-sublime#readme

id
div#main -> ctl + e
span.blueItem -> ctl + e
ul>li -> ctl + e
div+div+div>p -> ctl + e
ul>li^div -> ctl + e

繰り返し
ul>li*3　-> ctl + e
ul>li.item$*3　-> ctl + e
table>tr*3>td*4　-> ctl + e
()
(ul>li*3)*2
a[title]
div{hello}
p>lorem
html>body>#main|e
#main>.sub>p*3|c
ul>li*3|s
html>body>#main>p*3|haml

-css
m, w, c-> ctl + e
-ctrl+w

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

Pharo Download

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

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

Transcript show: 'hello'

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

改行

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

カスケード

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

inspector it 感動の領域に入ってきました。

変数

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　リフェレンスマニュアル 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

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

初期画面

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

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

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

cloud9を使えば、railsも簡単に環境をつくることができます。

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>

<!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>

<!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>

<!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>