ソフトウェアエンジニアの技術ブログ：Software engineer tech blog – Page 650 – 随机应变 ABCD: Always Be Coding and … : хороший

svgで遊ぼう

<svg width="600" height="300">
      <rect width="300" height="300" fill="red" />
      <text x="100" y="100" font-size="32" fill="white" stroke="black" stroke-width="2" rotate="20">
          Google
      <text>
    </svg>

transform

<svg width="600" height="300">
      <rect width="300" height="300" fill="red" />
      <rect width="100" height="100" fill="green" transform="translate(50,50)" />
      <rect width="100" height="100" fill="green" transform="skewX(30)" />
      <rect width="100" height="100" fill="white" opacity="0.2" />
    </svg>

アニメーション

<svg width="600" height="300">
      <rect width="300" height="300" fill="red" />
      <circle cx="100" cy="100" r="20" fill="white">
          <animate attributeName="r" from="20" to="80" dur="2s" repeatCount="indefinite">
      </circle>
      <circle cx="200" cy="200" r="20" fill="blue">
          <animate attributeName="r" from="40" to="120" dur="2s" begin="1s" repeatCount="indefinite">
      </circle>
    </svg>

SVG

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

    <svg width="600" height="300">
      <rect width="100%" height="100%" fill="red"/>
    </svg>

SVGでは後ろに書いたものが前に表示されます。

    <svg width="600" height="300">
      <rect width="100%" height="100%" fill="red"/>
      <rect width="100" height="50" fill="blue"/>
    </svg>

viewBox:デバイスに合わせて反映

    <svg width="600" height="300" viewBox="0 0 400 200">
      <rect width="400" height="200" fill="red"/>
      <rect width="100" height="50" fill="blue"/>
    </svg>

色の設定

    <svg width="600" height="300">
      <rect width="600" height="300" fill="red"/>
      <rect width="500" height="250" fill="#00ff00"/>
      <rect width="400" height="200" fill="rgb(0, 0, 255)"/>
      <rect width="300" height="150" fill="rgba(255,255,255,0.4)"/>
    </svg>

枠線

    <svg width="600" height="300">
      <rect width="600" height="300" fill="red" stroke="black" stroke-width="10"/>
    </svg>

sytle属性による記述

    <svg width="600" height="300">
      <rect width="600" height="300" style="fill:red; stroke:black; stroke-dasharray:20,5"/>
    </svg>

cssのような書き方

    <svg width="600" height="300">
        <style type="text/css"><!&#91;CDATA&#91;
    #myBox{
      fill:red;
      stroke:black;
    }
        &#93;&#93;></style>
      <rect width="600" height="300" id="myBox">
    </svg>

gタグ

    <svg width="600" height="300">
    <g stroke="black">
      <rect width="600" height="300" fill="red" />
      <rect width="500" height="200" fill="green" />
      <rect width="400" height="100" fill="white"/>
    </g>
    </svg>

グラデーション

    <svg width="600" height="300">
    <defs>
        <linearGradient id="g1" x1="0" y1="0" x2="1" y2="1"> 
            <stop offset="0" stop-color="skyblue" />
            <stop offset="0.5" stop-color="pink" />
            <stop offset="1" stop-color="yellow" stop-opacity="0.5"/>
        </linearGradient>
    </defs>
      <rect width="600" height="300" fill="url(#g1)" />
    </svg>

円形グラデーション

    <svg width="600" height="300">
    <defs>
        <radialGradient id="g1" cx="0.5" cy="0.5" r="0.5"> 
            <stop offset="0" stop-color="skyblue" />
            <stop offset="0.5" stop-color="pink" />
            <stop offset="1" stop-color="yellow" stop-opacity="0.5"/>
        </linearGradient>
    </defs>
      <rect width="600" height="300" fill="url(#g1)" />
    </svg>

stroke

<line x="100" y1="100" x2="200" y2="200" stroke-width="20" stroke="black" stroke-linecap="raound"  />

circle, ellipse

<circle cx="200" cy="100" r="40" fill="white" />
      <ellipse cx="400" cy="100" rx="40" ry="80" fill="green" />

polygon, polyline, path

      <polyline points="100 50 150 100 50 100" stroke="black" fill="none"/>
      <polygon points="100 50 150 100 50 100" stroke="black" fill="none"/>
      <path d="M100 50 l50 50 h100 v100 h100" stroke="black" fill="none"/>

D3.js

D3.jsはData Driven Documentの略です。

D3.js

d3.jsのライブラリです。

<script src="https://d3js.org/d3.v4.min.js"></script>

要素を指定して、命令を書いていきます。

      <script src="https://d3js.org/d3.v4.min.js"></script>
      <script>
      d3.select("body").selectAll("p").text("hello from d3");

      </script>

繋げて書くこともできます。

var p = d3.select("body").selectAll("p");
      p.text("hello from d3");
      p.style("font-size","28px");
      p.style("font-weight", "bold");

Emmet for sublime3

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

chrome.contextMenus

右クリックで、twitter検索

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "0.4",

	"description": "twitter search from context menu",

	"permissions": ["tabs", "http://*/*","https://*/*", "contextMenus"],

	"background": {
		"scripts": ["background.js"]
	}
}

chrome.contextMenus.create({
	"title":"「%s」をtwitterで検索",
	"type":"normal",
	"contexts":["selection"],
	"onclick": function(info){
		var url = 'https://twitter.com/search?q='+ encodeURIComponent(info.selectionText);
		chrome.tabs.create({
			url: url
		});
	}
});

ドキュメント
Chrome developer

Chrome Declare Permissions

ワイルドカードでパーミッションの権限を与えます。”permissions”: [“tabs”, “http://*/*”,”https://*/*”],

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "0.1",

	"description": "背景色変更",

	"permissions": ["tabs", "http://*/*","https://*/*"],


	"browser_action":{
          "default_title": "Chrom Extension",      // optional; shown in tooltip
          "default_popup": "popup.html"
	}
}

function changeColor(color){
	chrome.tabs.executeScript(null, {
		"code": "document.body.style.backgroundColor='"+color+"'"
	});
}

document.getElementById('red').onclick = function(){
	changeColor('red');
}

document.getElementById('yellow').onclick = function(){
	changeColor('yellow');
}

chrome.browserAction

Chromeの拡張機能にパッケージ化されていない機能をmanifest.jsonで追加します。

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "0.1",

	"description": "A plain text description",

	"browser_action":{
          "default_title": "Chrom Extension",      // optional; shown in tooltip
          "default_popup": "popup.html"
	}
}

Manifest File Format
Chrome developer

Arduino

void setup(){
  pinMode(LED_PIN, OUTPUT);
}

void loop(){
  digitalWrite(LED_PIN, HIGH);
  delay(500);
  digitalWrite(LED_PIN, LOW);
  delay(500);
}

ハードウェアの制御

#define LED_PIN 9

void setup(){
  pinMode(LED_PIN, OUTPUT);
}

void loop(){
  int i;
  for(i=0; i<256; i++){
  analogWrite(LED_PIN, i);
  delay(10);
  }
}

音声制御

#define LED_SPK 9

void setup(){
  pinMode(LED_PIN, OUTPUT);
}

void loop(){
  int i;
  for(i=0; i<256; i++){
  tone(SPK_PIN, i*10, 20);
  delay(10);
  }
}

タクトスイッチ

#define LED_PIN 13
#define BUTTON 2

void setup(){
  pinMode(LED_PIN, OUTPUT);
  pinMode(BUTTON, INPUT);
}

void loop(){
  if (digitalRead(BUTTON) == HIGH){
    digitalWrite(LED_PIN, HIGH);
  } else {
    digitalWrite(LED_PIN, LOW)
  }
}

Cdsセル

#define SENSOR 0

void setup(){
  pinMode(SENSOR, INPUT);
  Serial.begin(9600);
}

void loop(){
  int i;
  i = analogRead(SENSOR);
  Serial.print(i, DEC);
  Serial.print("\n");
  delay(1000);
}

画像作成アプリ

canvasで、ctx.moveTo(startX, startY);ctx.lineTo(x, y);ctx.stroke();で線を描画します。canvas.toDataURL().replace(‘image/png’,’application/octet-stream’)で、画像をダウンロードします。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Canvas</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <style>
    #mycanvas{
      border: 10px solid #999;
      cursor: crosshair;
    }
    .thumbnail{
      border: 2px solid #999;
      margin-right: 5px;
    }
    </style>
  </head>
  <body>
    <h1>Canvas</h1>
    <p>
      <select id="penColor">
        <option value="black">黒</option>
        <option value="red">赤</option>
        <option value="blue">青</option>
        <option value="white">白</option>
      </select>
      <select id="penWidth">
        <option value="1">細</option>
        <option value="3">中</option>
        <option value="5">太</option>
      </select>
        <input type="button" id="erase" value="消去">
        <input type="button" id="save" value="ギャラリーに追加">
    </p>
    <canvas id="mycanvas" width="400" height="200">
    Canvasの対応ブラウザを使用ください。</canvas>
    <div id="gallery"></div>
    <p>
    </p>
    <script>
      $(function(){
        var canvas = document.getElementById('mycanvas');
        if (!canvas || !canvas.getContext) return false;
        var ctx = canvas.getContext('2d');
        var startX,
            startY,
            x,
            y,
            borderWidth = 10,
            isDrawing = false;

        $('#mycanvas').mousedown(function(e){
            isDrawing = true;
            startX = e.pageX - $(this).offset().left - borderWidth;
            startY = e.pageY - $(this).offset().top - borderWidth;
        })
        .mousemove(function(e){
            if (!isDrawing) return;
            x = e.pageX - $(this).offset().left - borderWidth;
            y = e.pageY - $(this).offset().top - borderWidth;
            ctx.beginPath();
            ctx.moveTo(startX, startY);
            ctx.lineTo(x, y);
            ctx.stroke();
            startX = x;
            startY = y;
        })
        .mouseup(function() {
           isDrawing = false;
        })
        .mouseleave(function(){
           isDrawing = false;
        });

        $('#penColor').change(function(){
          ctx.strokeStyle = $(this).val();
        });
        $('#penWidth').change(function(){
          ctx.lineWidth = $(this).val();
        });
        $('#erase').click(function(){
            if(!confirm('本当に消去しますか？')) return;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        });
        $('#save').click(function(){
            var img = $('<img>').attr({
              width: 100,
              height: 50,
              src: canvas.toDataURL()
            });
            var link = $('<a>').attr({
              href: canvas.toDataURL().replace('image/png','application/octet-stream'),
              download: new Date().getTime() + '.png'
            });
            $('#gallery').append(link.append(img.addClass('thumbnail')));
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        });

      });
    </script>
  </body>
</html>

落下するアニメーション

window.onload = function(){
  draw();
}
function draw(){
  var canvas = document.getElementById('mycanvas');
  if (!canvas || !canvas.getContext)return false;
  var ctx = canvas.getContext('2d');

  ctx.fillStyle = "red"
  var y = 0;

  (function loop(){
    ctx.clearRect(0,0,canvas.width, canvas.height);
    if (y > canvas.height) y = -50;
    y++;
    ctx.fillRect(0,y,50,50);
    setTimeout(loop,10);
  })();
}