随机应变 ABCD: Always Be Coding and … : хороший
chef-repo > site-cookbooks > hello > recipes > default.rb
template "index.html" do path "/var/www/html/index.html" source "index.html.erb" mode 0644 end
chef-repo > site-cookbooks > hello > templates > default > index.html.erb
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> hello </body> </html>
mysys-opensshとmsys-rsyncをインストールし、windowsの環境変数に、C:\MinGW\bin;C:\MinGW\msys\1.0\binを追加。C:\MinGW\msys\1.0\etc\fstabにc: /cygdrive/cを追加して、再度\chef\chef-repo> knife solo cook 192.168.33.10 –ssh-user vagrantを実行。
resolving cookbooks for run list: ["hello"] Synchronizing Cookbooks: - hello (0.1.0) Installing Cookbook Gems: Compiling Cookbooks... Converging 1 resources Recipe: hello::default * log[Hello world] action write Running handlers: Running handlers complete Chef Client finished, 1/1 resources updated in 46 seconds
出来ました！長かった。。。
workstationからvimをインストール
chef-repo > site-cookbooks > hello > recipes > default.rb
package "vim-enhanced" do action :install end
Running Chef: sudo chef-solo -c ~/chef-solo/solo.rb -j ~/chef-solo/dna.json
Starting Chef Client, version 12.16.42
resolving cookbooks for run list: ["hello"]
Synchronizing Cookbooks:
- hello (0.1.0)
Installing Cookbook Gems:
Compiling Cookbooks...
Converging 1 resources
Recipe: hello::default
* yum_package[vim-enhanced] action install
- install version 7.4.629-5.el6 of package vim-enhanced
Running handlers:
Running handlers complete
Chef Client finished, 1/1 resources updated in 02 minutes 02 seconds
iptable: stop
service "iptables" do action :stop end
[vagrant@localhost ~]$ sudo service iptables status iptables: ファイアウォールが稼働していません。
Chefはインフラをコードで記述する技術で、workstationからchef serverにcookbookを送って、nodeの管理を行います。
Chef
workstationにchefのインストール
gem install chef gem install knife-solo
knife-configureで設定していきます。
knife configure
1. Chefのリポジトリ(cookbook)を作成…workstation
2. Nodeをchefに対応する
3. cookbookを作る
4. cookbookをnodeに反映
リポジトリ作成
> knife solo init chef-repo > cd chef-repo
nodeをchef対応にする
> knife solo prepare 192.168.33.10 --ssh-user vagrant Bootstrapping Chef... vagrant@192.168.33.10's password: Thank you for installing Chef! Generating node config 'nodes/192.168.33.10.json'...
workstationよりcookbookの作成
\chef-repo> knife cookbook create hello -o site-cookbooks
chef-repo > site-cookbooks > hello > recipes > default.rb
# # Cookbook Name:: hello # Recipe:: default # # Copyright 2016, YOUR_COMPANY_NAME # # All rights reserved - Do Not Redistribute # log "hello world"
chef-repo > nodes > 192.168.33.10.json
{
"run_list": [
"recipe[hello]"
],
"automatic": {
"ipaddress": "192.168.33.10"
}
}
\chef\chef-repo> knife solo cook 192.168.33.10 --ssh-user vagrant ERROR: RuntimeError: Failed to launch command ["rsync", "-rL", "--chmod=ugo=rwX", "--rsh=ssh vag --exclude=revision-deploys", "--exclude=.git", "--exclude=.hg", "--exclude=.svn", "--exclude=.bz /gems/knife-solo-0.6.0/lib/knife-solo/resources/patch_cookbooks/", ":~/chef-solo/cookbooks-1"]
rsyncコマンドがないとのエラー表示
int num = 500;
Point[] points = new Point[num];
void setup() {
size(640, 360, P3D);
pixelDensity(displayDensity());
for (int i = 0; i < num; i++) {
points[i] = new Point();
}
}
void draw() {
background(255);
translate(width/2, height/2, 0);
rotateY(frameCount * 0.01);
for (int i = 0; i < num; i++) {
points[i].update();
points[i].display();
}
for (int i = 0; i < num; i++) {
for (int j = i + 1; j < num; j++) {
float d = dist(
points[i].x,
points[i].y,
points[i].z,
points[j].x,
points[j].y,
points[j].z
);
if (d < 40) {
stroke((int) map(d, 0, 40, 0, 255));
strokeWeight(1);
line(
points[i].x,
points[i].y,
points[i].z,
points[j].x,
points[j].y,
points[j].z
);
}
}
}
}
Point.java
class Point {
float x;
float y;
float z;
float targetX;
float targetY;
float targetZ;
float radius;
Point() {
setTarget();
x = targetX;
y = targetY;
z = targetZ;
}
void update(){
if (frameCount % 120 == 0){
setTarget();
}
x += (targetX - x) * 0.05;
y += (targetY - y) * 0.05;
z += (targetZ - z) * 0.05;
}
void setTarget(){
if (random(2) < 1){
radius = 150;
} else {
radius = 75;
}
float phi = random(TWO_PI);
float unitZ = random(-1, 1);
targetX = radius * sqrt(1 - unitZ * unitZ) * cos(phi);
targetY = radius * sqrt(1 - unitZ * unitZ) * sin(phi);
targetZ = radius * unitZ;
}
void display() {
stroke(0);
strokeWeight(3);
point(x, y, z);
}
}
for文でdThetaを増やしながら、rotateYをframeCountで増やして回転させています。
float radius = 150;
float dPhiStep = 0;
float dPhiStepVelocity = 0.05;
void setup(){
size(640, 360, P3D);
pixelDensity(displayDensity());
}
void draw(){
background(255);
translate(width/2, height/2, 0);
rotateY(frameCount * 0.02);
float lastX = 0;
float lastY = 0;
float lastZ = 0;
for(float dTheta = 0, dPhi = 0; dTheta <= 180; dTheta++, dPhi += dPhiStep){
float theta = radians(dTheta);
float phi = radians(dPhi);
float x = radius * sin(theta) * cos(phi);
float y = radius * sin(theta) * sin(phi);
float z = radius * cos(theta);
stroke(0);
if (lastX != 0){
strokeWeight(1);
line(lastX, lastY, lastZ, x, y, z);
}
strokeWeight(8);
point(x, y, z);
lastX = x;
lastY = y;
lastZ = z;
}
dPhiStep += dPhiStepVelocity;
}
v-on, v-attr, v-classで機能追加しています。データの追加はpush,削除はspliceです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My ToDos</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<style>
body {
font-size: 13px;
font-family: Arial;
}
h1 {
font-size: 14px;
border-bottom:1px solid #ddd;
padding: 0 0 5px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0 0 5px;
}
ul > li {
padding: 0 0 5px;
}
input[type=text]{
padding: 4px;
border-radius: 4px;
}
.done {
text-decoration: line-through;
color: #aaa;
}
.linkLike {
color: blue;
cursor: pointer;
font-weight: normal;
}
</style>
</head>
<body>
<div id="myapp">
<h1>
My ToDos
<small>({{remaining}}/{{todos.length}})</small>
<span class="linkLike" v-on="click:purge">[purge]</span>
</h1>
<ul>
<li v-repeat="todos">
<input type="checkbox" v-attr="checked: done" v-on="click: done = !done">
<span v-class="done: done">{{task}}</span>
<span class="linkLike" v-on="click:del($index)">[x]</span>
</li>
</ul>
<input type="text" v-model="newTask" placeholder="new task..." v-on="keyup:add | key enter">
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.11.4/vue.min.js"></script>
<script>
var vm = new Vue({
el: '#myapp',
data: {
newTask: '',
todos : [
{task: 'task 1', done: false},
{task: 'task 2', done: true},
{task: 'task 3', done: false}
]
},
computed: {
remaining: function(){
var count = 0;
for (var i = 0, j = this.todos.length; i < j; i++){
if(!this.todos[i].done){
count++;
}
}
return count;
}
},
methods: {
add: function(){
this.todos.push({
task: this.newTask,
done: false
});
newTask = ''
},
del: function(index){
if (confirm("are you sure?")){
this.todos.splice(index, 1);
}
},
purge: function(){
var i = this.todos.length;
while (i--){
if(this.todos[i].done){
this.todos.splice(i, 1);
}
}
}
}
});
</script>
</body>
</html>
-インタラクティブなインターフェイス
-JavaScriptフレームワーク
-軽量、他のライブラリに依存しない
-ブラウザIE8以下は対応しない
object data/method interface MVVM
CDN :https://cdnjs.com/libraries/vue
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.0/vue.common.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<style>
</style>
</head>
<body>
<div id="mycounter">
<div v-text="count"></div>
<button v-on="click: countUp">Up</button>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.11.4/vue.min.js"></script>
<script>
// object data/method interface MVVM
// counter
var vm = new Vue({
el: '#mycounter',
data: {
count: 0
},
methods: {
countUp: function(){
this.count++;
}
}
});
</script>
</body>
</html>
mustatch, v-html
<div>{{'content: ' + content}}</div>
<div v-html="content"></div>
表示非表示
var vm = new Vue({
el: '#myapp',
data: {
content: 'helloworld',
myStyle: 'red'
showContent: true
}
});
v-repeat
<div id="myapp">
<ul>
<li v-repeat="d1">{{$value}}</li>
</ul>
<ul>
<li v-repeat="d2">{{$key}} - {{$value}}</li>
</ul>
<ul>
<li v-repeat="d3">{{name}} - {{score}}</li>
</ul>
</div>
<p>
<input type="text" v-model="name">
{{name}}
</p>
フィルター
<div v-text="msg | uppercase"></div>
<div v-text="msg | capitalize"></div>
<div>{{$data | json}}</div>
<div id="myapp">
<li v-repeat="users | filterBy 't' in 'name'">
<li v-repeat="users | filterBy | orderBy 'name' -1">
{{name}} - {{score}}
</div>
computed property
<div id="myapp">
side: <input type="text" v-model="side">
area: {{area}}
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.11.4/vue.min.js"></script>
<script>
var vm = new Vue({
el: '#myapp',
data: {
side: 20
},
computed: {
area: function(){
return this.side * this.side;
}
}
});
</script>
静的型付け
var x:number = 10; x = "hello";
コンパイルエラーとなります。
var x:number = 10; x = "hello";
様々な型
// number, string boolean, any var i = 10; var x; // var x: any var results: number[] results = [10, 5, 3]
列挙型
enum Signal {
Red = 0,
Blue = 1,
Yellow = 2
}
var result: Signal;
// if (result === Signal.Yellow){}
// if (result === Signal['Yellow']){}
console.log(Signal[2])
関数宣言
function add(a: number, b?: number): number {
if (b){
return a + b;
} else{
return a + a;
}
}
console.log(add(5, 3));
関数式
var add = (a: number, b: number): number =>{
return a + b;
}
var add = (a: number, b: number): number => a + b
console.log(add(5, 3));
関数のオーバーロード
function add(a: number, b: number): number; //シグネチャ
function add(a: string, b: string): string;
function add(a: any, b: any): any {
if(typeof a === "string" && typeof b === "string"){
return a + " " + b;
}
return a + b;
}
console.log(add(5, 3));
console.log(add("hello", "world"));
class
class User {
name: string;
constructor(name: string){
this.name = name;
}
sayHi(); void {
console.log("hi! i am " + this.name);
}
}
var tom = new User("tom");
console.log(tom.name);
tom.sayHi();
getter, setter
class User {
name: string;
constructor(private _name: string){
this.name = name;
}
sayHi(); void {
console.log("hi! i am " + this.name);
}
get name(){
return this._name;
}
set name(newValue: string){
this._name = newValue;
}
}
extends, override
class User {
name: string;
constructor(private _name: string){
this.name = name;
}
sayHi(); void {
console.log("hi! i am " + this.name);
}
}
class AdminUser extends User{
private _age: number;
constructor(_name: string, _age: number){
super(_name);
this._age = _age;
}
public sayHi(): void {
console.log("my age:" + this._age);
super.sayHi();
}
}
private:メソッドの中のみ可能
protected:クラスの中のみアクセス可能
静的メンバ:static
class User {
name: string;
constructor(private _name: string){
this.name = name;
User.count++;
}
sayHi(); void {
console.log("hi! i am " + this.name);
}
static count: number = 0;
}
インターフェイス
interface Result {
a: number;
b: number;
}
function getTotal(result: {a: number; b: number}){
return result.a + result.b;
}
var result = {
a: 32,
b: 58
};
console.log(getTotal(result));
interfaceの継承
interface SpringResult {
a: number;
}
interface FallResult{
b: number;
}
interface FinalResult extends SpringResult, FallResult {
final?: number;
}
ジェネリクス
function getArray<T>(value: T): T[]{
return[value, value, value];
}
console.log(getArray<number>(3));
console.log(getArray<string>("hello"));
ジェネリクスの制約
interface Result {
a: number;
b: number;
}
class MyData<T extends Result>{
constructor(public value: T){}
getArray(): T[]{
return [this.value, this.value, this.value];
}
}
内部モジュール
module UserModule{
export var name = "yamada";
export modlue AddressModlue {
var zip = "123-4567"
}
}
console.log(UserModule.name);
console.log(UserModlue.AddressModlue.zip);
TypeScriptは大規模開発にも適したjavascriptの拡張ランゲージです。microsftが開発しています。npmでインストールします。
[vagrant@localhost typescript]$ sudo npm install -g typescript /usr/bin/tsc -> /usr/lib/node_modules/typescript/bin/tsc /usr/bin/tsserver -> /usr/lib/node_modules/typescript/bin/tsserver typescript@2.0.10 /usr/lib/node_modules/typescript
拡張子はtsを使います。
main.ts
class User {
}
console.log("hello world")
変換後のjsファイルです。
main.js
var User = (function () {
function User() {
}
return User;
}());
console.log("hello world");
[vagrant@localhost typescript]$ tsc main.ts [vagrant@localhost typescript]$ ls main.js main.ts [vagrant@localhost typescript]$ node main.js hello world
phpでMySQLに接続, sql文にてデータを挿入する書き方例
$stmt->executeにて実行しています。変数の$dbhはdbhandlerの略です。
try {
$dbh = new PDO('mysql:host='/DB_HOST.';dbname='.DB_NAME,DB_USER,DB_PASSWORD);
} else (PDOException $e){
echo $e->getMessage();
exit;
}
$stmt = $dbh->prepare("select * from users where instagram_user_id=:user_id limit 1");
$stmt->execute(array(":user_id"=>$json->user->id));
$user = $stmt->fetch();
if (empty($user)){
$stmt = $dbh->prepare("insert into users(instagram_user_id, instagram_user_name, instagram_profile_picture, instagram_access_token, created, modified) values (:user_id, :user_name, :profile_picture, :access_token, now(), now());");
$pramas = array(
":user_id" =>$json->user->id,
":user_name" =>$json->user->username,
":profile_picture" =>$json->user->profile_picture,
":access_token"=>$json->access_token
);
$stmt->execute($params);
データの取得
$stmt = $dbh->prepare("select * from users where id=:last_insert_id limit 1");
$stmt->execute(array(":last_insert_id"=>$dbh->lastInsertId()));
$user = $stmt->fetch();