安全なウェブサイトを作るための対策

[CSRF(クロスサイトリクエストフォージェリ)] ユーザーが攻撃対象のサイトにログインしている時に罠サイトを踏んでしまった際に、Cookie情報を読み取られることで攻撃者がユーザーになりすましログイン状態でしか実行できない重要な処理をリクエストすることができる攻撃です。 Cookieのような固定の値をセッションIDとして使用していることから発生する脆弱性で、ランダムな文字列によるトークンでセッションIDを照合するようにしておくことで回避することができます。   [XSS(クロスサイトスクリプティング)] 掲示板などの入力フォームから受け取った値をサイト上に表示するウェブサイトに対して、入力フォームから直接スクリプトを書き込むことでサイト利用者の個人情報を入手したりサイトの構造を改変することができる攻撃です。 「<>」や「&」のようなHTML上で特殊な意味を持つ文字をそのまま反映させてしまうことから発生する脆弱性で、「htmlspecialchars」を用いて特殊な文字のエスケープ処理を行うようにすることで回避することができます。   [SQLインジェクション] データベースから取り出す値を直接指定している場合に、直接スクリプトを書き込み「~ OR 1 = 1」のような形で条件を満たして内部の情報を引き出す攻撃です。 データベースから値を取り出す際に一度変数に置き換えておき、その変数を書き換える形で値を取得するプレースホルダと呼ばれる方法を使うことで回避することができます。   [オープンリダイレクタ] リンクを導入しているウェブサイトにおいて「~?url = 」以降のURLを差し替えることで、本来のウェブサイトへの信頼を利用して悪意のあるサイトへ誘導する攻撃です。 「中間にクッションページを置く」などで対策することができます。   [ディレクトリ・トラバーサル] ユーザーがファイル等を読み込むためのフォームを導入しているウェブサイトにおいて、「../」のような特殊な意味を持つ文字を利用することで本来アクセスできないはずのディレクトリにアクセスする攻撃です。 特殊な文字列をそのままの意味で読み込んでしまうことから発生する脆弱性で、「ファイル名は英数字のみ通す」ようにするなどで対策することができます。   参考 IPA 安全なウェブサイトの作り方 https://www.ipa.go.jp/security/vuln/websecurity.html

Vue.jsの使い方

Vue.jsとは、javascriptフレームワークの1つです。 コード内で繰り返し使う変数や関数などをあらかじめ定義しておくことでコードを単純化することを目的として開発されました。 シンプルな使いやすさと、他のサポートなどと併用することが可能な点で差別化されており、人気のあるフレームワークです。 CDN
<script src="https://unpkg.com/vue/dist/vue.js"></script>
 

・文字を表示する

  script el: で要素を指定して、data: {}で適用する変数と値を用意します。
document.addEventListener("DOMContentLoaded", function(){
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js!'
    }
  });
});
html 指定した要素内に{{変数}}を記述すると、用意した値が代入されます。
<body>
  <div id="app">
    <p>{{ message }}</p>
  </div>
</body>
 

・算術プロパティ

  算術プロパティは変数の中身が変わらない限り何度関数を実行しても、処理を行わず前の結果を表示する特徴を持ちます。 script 変数に関数を代入することで一連の処理を用意しておくことができます。
document.addEventListener("DOMContentLoaded", function(){
  var vm = new Vue({
    el: '#example',
    data: {
      message: 'Hello'
    },
    computed: {
      reversedMessage: function () {
      return this.message.split('').reverse().join('')
      }
    }
  })
});
html 変数名を記述するだけで、用意した処理を呼び出すことができます。
<body>
  <div id="example">
    <p>{{ message }}"</p>
    <p>{{ reversedMessage }}"</p>
  </div>
</body>
 

・メソッド

  算術プロパティと同じ結果を返しますが、メソッドは関数を実行するたびに処理を行う特徴があります。 script
document.addEventListener("DOMContentLoaded", function(){
  var vm = new Vue({
    el: '#example',
    data: {
      message: 'Hello'
    },
    methods: {
      reverseMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})
});
html
<body>
  <div id="example">
    <p>{{ message }}</p>
    <p>{{ reverseMessage() }}</p>
  </div>
</body>
 

・条件分岐

  script 文字の表示同様にel: で要素を指定して、dataにはtrue, もしくは、false を用意します。
document.addEventListener("DOMContentLoaded", function(){
  var app3 = new Vue({
    el: '#app-3',
    data: {
      seen: true
    }
  })
});
html v-if=””で変数を指定します。 変数に代入した値がtrueなら<p>を有効にし、falseであれば無効にします。
<body>
  <div id="app-3">
    <p v-if="seen">Now you see me</p>
  </div>
</body>
 

・<ul>に<li>を追加する

  []で変数に配列を代入することができ、pushで配列に要素を追加することができます。 script
document.addEventListener("DOMContentLoaded", function(){
  var app4 = new Vue({
    el: '#app-4',
    data: {
      todos: [
        { text: 'Learn JavaScript' },
        { text: 'Learn Vue' },
        { text: 'Build something awesome' }
      ]
    }
  })
  app4.todos.push({ text: 'New item' })
});
html
<body>
  <div id="app-4">
    <ol>
      <li v-for="todo in todos">
        {{ todo.text }}
      </li>
    </ol>
  </div>
</body>
 

・ボタンを押すなどのイベントに反応する

  script
document.addEventListener("DOMContentLoaded", function(){
  var example1 = new Vue({
    el: '#example-1',
    data: {
      counter: 0
    }
  })
});
html v-on:click=”” を使うことで、要素をクリックしたときに反応する処理を行うことができます。
<body>
  <div id="example-1">
    <button v-on:click="counter += 1">Add 1</button>
    <p>The button above has been clicked {{ counter }} times.</p>
  </div>
</body>
  その他の機能については公式サイトに詳しく解説されているのでそちらを参考にしてみてください。  

Google Web Fontsの使い方と人気のフォント

Web FontsはHTMLとCSSに簡単な記述をするだけで、ユーザーの環境に依存しないフォントを表示することができます。 ですが、読み込みが必要になるので文字数が膨大であればページを表示したときに多少のラグが起こり得るというデメリットがあります。 このデメリットを少なくしたのがGoogle Web Fontsです。 Google Web FontsはGoogleサーバーから配信されているため、読み込みでラグがでることがほとんどありません。  

・GoogleFontsの使い方

  公式ページからフォントを選び、各フォントの右上にある赤い+をクリックします。 そうすると右下にFamily Selectedとでてくるので、この中に表示されているSTANDARDの下の<link ~のリンクをHTML内のhead内にコピーして貼り付けます。 さらにSpecify in CSS の下にあるfont-family: ~ をCSS内の適用させたい箇所に貼り付けることで選択したフォントを利用することができます。  

・人気フォントの紹介

  セリフ、サンセリフ、スクリプトの3つのカテゴリからそれぞれ人気の高いフォントを紹介します。

【セリフ】

Playfair Display Quando Fenix  

【サンセリフ】

Work Sans Rubik Fira Sans  

【スクリプト】

Euphoria Script Rouge Script Cookie  

javascript 「変数」「配列」「関数」

javascriptにおける、「変数」「配列」「関数」ついて解説します。  

変数

  変数とは、数値や文字列を保持するためのオブジェクトです。 一度変数に入れた値は、そのコード内で何度も繰り返し使用することができます。 javascriptでは下記のように変数を定義します。
var name = value;
varで変数であることを宣言し、nameに変数名(自由)、valueに値を入れます。 値に文字列を入れる場合は、次のように””で囲む。
var name = "test";
四則演算も可能。下記の例の場合、name = 15として扱われます。
var name =  10 + 5;
変数に変数を入れることも可能。下記の例の場合は、name2 = 15 として扱われます
var name1 = 10
var name2 = name1 + 5;
 

配列

  配列とは、複数の数値や文字列を保持するためのオブジェクトです。 変数では一つしか値を入れることができませんが、配列を使うことによって複数の値を入れることが可能になります。 配列もコード内で何度も繰り返し使用することができます。 javascriptでは下記のように変数を定義します。
var name = [value1, value2, value3];
変数同様にvar宣言をして名前とvalueにそれぞれ変数名と値を入れます。 文字列は””で囲む、四則演算などが可能なことなども変数と同じです。 変数と配列とでの違いは[]内に値を入力することで、値と値の間は,(カンマ)で区切ることでいくつでも値を入れることができることです。 配列に入れた値にはそれぞれインデックスと言われる番号が割り振られます。 最初の値から順に0,1,2…と割り振れるようになっており、上記の例の場合、value1が0、value2が1、value3が2となります。 このインデックスを利用することで、配列の中の好きな値のみを指定することができます。
var name = [value1, value2, value3];
alert(name[0]);
上記の例ではvalue1のみ取り出すことができています。  

関数

  関数とは、一連の処理を一つのオブジェクトとして定義したものです。 一度定義された関数はコード内で何度も繰り返し使用することができます。 下記の例のように定義します。
function name() {
  処理
}
functionで関数を宣言し関数名をつけ、{}内に実行する処理を書いていきます。 ()内には引数を入れることができます。入れない場合は空にしておきます。
function test(){
   document.write("テスト");
}

test();
上記の関数は呼び出すたびにテストを画面に表示します。 関数は、関数名と引数のみで呼び出すことができ、引数を指定しない場合は()は空にしておきます。  

オブジェクト

名前で管理できるデータの集まりをオブジェクトといい、変数や関数などがオブジェクトにあたります。 またそれら以外にもオブジェクトを直接定義することもでき、キーと値をそれぞれ入れることができます。
var position = {x:10, y:20};
var position = new object();
position.x = 10;
position.y = 20;
2つの例は書き方は違いますがどちらも同じオブジェクトを定義しています。 上の例ではpositionというオブジェクトに対して、{}を使うことでキーと値を入れています。 キー(x)とキー(y)の間を,(カンマ)で区切ることで複数のキーと値のペアを入れることができ、キーと値の間を:(コロン)で区切ることで分別できます。 下の例では、始めに中身を持たないオブジェクトとしてpositionを定義し、その後キーと値を入れています。  

Markdownとは

Mrakdownとは、文章を書く手段の1つでデジタル文書を書く手段として考案されたものです。 シンプルで覚えやすいルールに従って記述するだけで、「見出し」、「段落」、「箇条書き」などを表現することができ、HTMLへの変換も簡単に行うことができるのが魅力です。  

記法の紹介

  ・見出し 見出しは文頭に#と半角スペースで表記できます。 #が一つの場合は、HTMLにおける<h1>と同じ見出しを表示することができ、##で<h2>、###で<h3>と同じ表示ができます。   ・ 段落 段落は空行で1行空けることで表記できます。   ・箇条書き 箇条書きは文頭に-と半角スペースで表記できます。   ・例
# Markdownの描き方

## 見出し

Mrakdownとは、文章の書く手段の1つでデジタル文書を書く手段として考案されたものです。

シンプルで覚えやすいルールに従って記述するだけで、「見出し」、「段落」、「箇条書き」などを表現することができます。

- 見出し
- 段落
- 箇条書き

とすると下記の画像のように表示されます。 キャプチャ   Markdownの記法についてはウィキペディアにも詳しく載っているので、もっと詳しく知りたい方はそちらをごらんください。  

Markdownエディタの紹介

  windows向けの無料テキストエディタ「Atom」を紹介します。   ・Atomの利点 AtomはMarkdownを書きながら実際に表示されるプレビューを見ることができます。 キャプチャ2 また、右クリックのメニューから簡単にHTMLに変換でき、同ファイル内で共存させることもできるのでとても便利です。 キャプチャ3JPG Atomは公式サイトからダウンロードすることができます。  

CSSの命名規則の紹介

CSSを編集する際に長期的なプロジェクトや複数人での作業が必要な場合、属性名名のつけ方など記法が統一されていないとミスが発生しやすくなったり作業効率の低下を招くため、CSSの記法に一貫性を持たせるためのルールが生まれました。 特に広く認知され実用されているのが下記の3つです。 BEM(Block Element Modifier) OOCSS(Object Oriented CSS) SMACSS(Scalable end Modular Architecture For CSS)  

・BEM

  BEMではid属性を使うことはほとんどなくclass属性で名前を付けていきます。 その際、block, element, modifierにそれぞれ要素を分類分けすることで命名規則を単純化しています。 block ページ内で独立して機能する要素として定義します。 element blockを構成する要素です。 modifier blockやelementの特徴などを表すために定義するもので、単独では使うことができません。   また、block, element, modifierを区切る際に一貫したセパレーター(ハイフン、アンダースコア等)を使用することが重要となっており、下記のような規則が推奨されています。 block__element_modifier blockとelementはアンダースコアを2つ繋げて区切り、blockとmodifier, elementとmodifierはアンダースコア1つで区切ります。 また、block名やelement名に単語を複数組み合わせる場合はセパレーターにハイフンを使用することが推奨されています。 ただし、セパレーターに関してはあくまで推奨であり、サイト内で統一されてさえいればセパレーターに決まりはありません。  

・OOCSS

  OOCSSでは構造(共有できるスタイル)とスキン(固有のスタイル)を分けて記述する書き方をします。 例えば同じ大きさの赤色と青色の正方形を記述する際に、
<div class="box-red"></div>
<div class="box-blue"></div>
.box-red {
  width: 50px;
  height: 50px;
  background-color: red;
}
.box-blue {
  width: 50px;
  height: 50px;
  background-color: blue;
}
と記述すると構造(width, height)を繰り返し書く必要があり、編集したくなった場合に効率的ではありません。
<div class="box box-red"></div>
<div class="box box-blue"></div>
.box {
  width: 50px;
  height: 50px;
}
.box-red {
  background-color: red;
}
.box-blue {
  background-color: blue;
}
このように構造とスキンとで分けてクラス名を定義し組み合わせることで、見栄えもシンプルになり効率的に編集することができます。  

・SMACSS

  SMACSSはBEMとOOCSSを組み合わせたような規則となっており、ベース、レイアウト、モジュール、ステート、テーマの5つのルールにより定義されています。   ・ベース
body {
  background: white;
}
 
a:link {
  color: gray;
}
ベースでは上記のように要素そのものの見た目を定義します。   ・レイアウト
.l-header {
  margin-bottom: 20px;
}
 
.l-footer {
  border-top: 1px solid black;
}
 
.l-main {
  float: left;
  width: 80%;
}
 
.l-sub {
  float: right;
  width: 20%;
}
レイアウトでは上記のようにエリア分けを行います。 headerやfooterなど主要なものはid属性で名前をつけ、再利用する可能性のある要素はclass属性で名前をつけます。 その際、モジュールやステートと混同しないためにlayout-やl-のようなプレフィックスを使用することでそれがレイアウトであることを示します。   ・モジュール レイアウトで定義した要素を除いたすべての要素がモジュールに当てはまります。 義務付けられてはいませんがmod-やm-などのプレフィックスが使われることが多いです。   ・ステート ステートではjavascriptを使用するときなど、状態によって変わるスタイルを定義するためのルールです。 is-というプレフィックスをつけることでステートであることを示します。   テーマ ステートよりも大きい変化を定義するためのルールです。 theme-というプレフィックスをつけることでテーマであることを示します。   より詳しくは各公式サイトをご覧ください。 BEM OOCSS SMACSS  

sitemap.xmlの書き方

sitemap.xml(XMLサイトマップ)とは、Googleやその他の検索エンジンにサイトの構成を伝えるためのファイルです。 大きなサイトや新しいサイトのページがクロール漏れすることを防ぐことができるためSEO対策として役立ちます。   ・XMLサイトマップの作成方法 XMLファイルは以下の構文で作成します。
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>参照するページのURL</loc>
    <lastmod>最終更新日</lastmod>
    <changefreq>更新頻度の目安</changefreq>
    <priority>同サイト別ページとの優先度の比較</priority>
  </url>
</urlset>
  ・エンコードUTF-8の宣言 ・urlsetと属性xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″の宣言 ・参照するページのURL この3つは必須項目となっており、 ・最終更新日 ・更新頻度の目安 ・同サイト別ページとの優先度の比較 の3つは自由項目となっています。   ・要素の値  
<loc>参照するページのURL</loc>
httpなどから始まるウェブページのURLをそのまま貼り付けます。  
<lastmod>最終更新日</lastmod>
W3C Datetime形式で記述する必要がありますが、時刻を省略して「YYYY-MM-DD」のみで記述することも可能です。  
<changefreq>更新頻度の目安</changefreq>
always アクセスするたびに更新 hourly 毎時更新 daily 毎日更新 weekly 毎週更新 monthly 毎月更新 yearly 毎年更新 never 更新しない あくまで目安ですが、ある程度更新頻度が決まっているのであれば記述しておきましょう。  
<priority>同サイト別ページとの優先度の比較</priority>
値は0.0から1.0までを指定します。 優先度は相対的なものなのですべてのページの優先度が1.0の場合は全てのページの優先度が等しくなります。 そのため、優先したいページのみ1.0に指定し、その他のページは0.5に指定するなどの使い方が基本的な使い方です。   複数のページを持つ1つのサイトのサイトマップの一例です。
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>http://......</loc>
    <lastmod>2017-01-11</lastmod>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>http://......</loc>
    <lastmod>2016-12-15</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.5</priority>
  </url>
  <url>
    <loc>http://......</loc>
    <lastmod>2016-06-25</lastmod>
    <changefreq>never</changefreq>
    <priority>0.5</priority>
  </url>
</urlset>
  ・自動作成ツールについて xml XMLサイトマップには自動作成ツールがあります。 上記画像のサイトのように簡単な項目に記入していくだけで自動でサイトマップを作成することができるのでとても便利です。   ・サイトマップを作成したら サイトマップができたらそのサイトを管理しているサーバーにアップロードし、Googleサーチコンソールに登録して終了です。   より詳しくは公式ページをご覧ください。

HTML5 canvas で使えるグラフ表示の代表的なスクリプト紹介

Canvasでグラフを書く際に値を埋めるだけで簡単に任意のグラフの表示を行えるスクリプトを紹介します。   ・CanvasJs グラフの種類は少なめですが、数行のシンプルなコードのみでグラフを作成することができるスクリプトです。 導入方法 公式サイトからダウンロード、またはCDN経由の読み込みで利用することができます。 pie-chart2 line-graph2 bar-graph2   ・Chart.js コードは少し長くなりますが、デザインが豊富に揃っていて柔軟なアレンジも可能なスクリプトです。 導入方法 公式サイトからダウンロード、またはCDN経由の読み込みで利用することができます。 pie-chart line-graph bar-graph chart-radar   ・Flotr2 コードも長く、CDNがないため事前準備も必要になりますが20種以上のグラフを使用できます。 導入方法 公式サイトからダウンロード line-graph3 pie-chart3 bar-graph3 chart-radar3   今回はchart.jsを使用した円グラフ、線グラフ、棒グラフ、レーダーチャートの作成方法を紹介します。 まず初めにchart.jsを読み込む必要があります。
//公式サイトからダウンロード後ファイルを移行して読み込む方法と
<script src="script/Chart.js"></script>
//CDN経由で読み取る方法があります。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
次にcanvasタグを用意します。 id名や高さなどは自由に決めることができます。
<canvas id="canvas" height="500" width="500"></canvas>
この2つの準備ができたら後はグラフに入れる値とグラフの種類を指定するだけで簡単にグラフを作成することができます。   ・円グラフ(Pie) value: 項目の数値 color: 項目の色 highlight: マウスをかざしているときの色 label: 項目名 を指定することができます。
<script>
  var data = [
 {
  value: 400,
  color:"#92cd9f",
  highlight: "#92cd9f",
  label: "Green"
 },
 {
  value: 200,
  color:"#72a6c7",
  highlight: "#72a6c7",
  label: "Blue"
 },
 {
  value: 100,
  color:"#F7464A",
  highlight: "#F7464A",
  label: "Red"
 },
];

var myChart = new Chart(document.getElementById("canvas").getContext("2d")).Pie(data);
  </script>
円グラフデモページ   ・線グラフ(Line) labels:X軸の項目 fillColor: 塗りつぶす色 strokeColor: 線の色 pointColor: 点の色 pointStrokeColor: 点の枠線の色 pointHighlightFill: マウスオーバー時の点の色 pointHighlightStroke: マウスオーバー時の点の枠線の色 data: 値 を指定することができます。
<script>
  var data = {
 labels: ["1月","2月","3月","4月","5月","6月","7月"],
 datasets: [
  {
   fillColor: "rgba(226, 197, 197, 1)",
   strokeColor: "rgba(198, 85, 85, 1)",
   pointColor: "rgba(0, 0, 0, 1)",
   pointStrokeColor: "#000",
   pointHighlightFill: "#c65555",
   pointHighlightStroke: "rgba(198, 85, 85, 1)",
   data: [60,65, 80, 75, 55, 65, 45]
  },

 ]
};
var myChart = new Chart(document.getElementById("canvas").getContext("2d")).Line(data);
  </script>
線グラフデモページ   ・棒グラフ(Bar) labels:X軸の項目 fillColor: 塗りつぶす色 strokeColor: 枠線の色 HighlightFill: マウスオーバー時の塗りつぶす色 HighlightStroke: マウスオーバー時の枠線の色 data: 値 を指定することができます。
<script>
  var data = {
 labels: ["1月","2月","3月","4月","5月","6月","7月"],
 datasets: [
  {
   fillColor: "rgba(226, 197, 197, 1)",
   strokeColor: "rgba(198, 85, 85, 1)",
   HighlightFill: "#c65555",
   HighlightStroke: "rgba(198, 85, 85, 1)",
   data: [60,65, 80, 75, 55, 65, 45]
  },

 ]
};
var myChart = new Chart(document.getElementById("canvas").getContext("2d")).Bar(data);
  </script>
棒グラフデモページ   ・レーダーチャート(Radar) labels:項目 fillColor: 塗りつぶす色 strokeColor: 線の色 pointColor: 点の色 pointStrokeColor: 点の枠線の色 pointHighlightFill: マウスオーバー時の点の色 pointHighlightStroke: マウスオーバー時の点の枠線の色 data: 値
 var data = {
  labels:["1月","2月","3月","4月","5月","6月","7月"],
  datasets: [
   {
    fillColor: "rgba(226, 197, 197, 1)",
    strokeColor: "rgba(198, 85, 85, 1)",
    pointColor: "rgba(0, 0, 0, 1)",
    pointStrokeColor: "#000",
    pointHighlightFill: "#c65555",
    pointHighlightStroke: "rgba(198, 85, 85, 1)",
    data: [65, 59, 90, 81, 56, 55, 40]
   },
  ]
 };

 var myChart = new Chart(document.getElementById("canvas").getContext("2d")).Radar(data);
レーダーチャートデモ  

HTML5 Canvas

canvasの使い方についてのまとめです。

canvasとは

canvasはHTML5で新しく登場した、ブラウザ上で図を表現するためのタグです。 線や図を描いたり色を付けたりすることができますが、アニメーションとは違い図を動かすためには1コマずつ図の書き直しを繰り返す必要があります。  

・直線

直線の描き方は以下の流れで記述します。 コンテクストのリファレンスを取得 → canvas要素.getContext(“2d”) 現在のパスをリセット → beginPath() パスの始点を指定 → moveTo(x, y) パスの終点を指定して直線を引く → lineTo(x, y) 現在のパスの輪郭を表示 → stroke() html
<script>
window.onload = function () {
var line = document.getElementById("line");
var ctx = line.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.stroke();
}
</script>

<body>
<canvas id="line" width="1000" height="1000"></canvas>
</body>
 

・ストロークと塗りつぶし

fill()を使用することで図形の塗りつぶしを描くことができます。 反対にstroke()を使用することで輪郭線だけの図形を描くことができます。  

・多角形

多角形の描き方は以下の流れで記述します。 コンテクストのリファレンスを取得 → canvas要素.getContext(“2d”) 現在のパスをリセット → beginPath() パスの始点を指定 → moveTo(x, y) パスの終点を指定して直線を引く → lineTo(x, y) パスの終点を指定して直線を引く → lineTo(x, y) パスを閉じる直線を引く → closePath() ※三角形ならlineto(x, y)を2つ、四角形なら3つ、五角形なら4つと増やしていくことで多角形を描くことができます。 html
<script>
window.onload = function () {
var line = document.getElementById("line");
var ctx = line.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.lineTo(50, 200);
ctx.closePath();
ctx.stroke();
}
</script>

<body>
<canvas id="line" width="1000" height="1000"></canvas>
</body>
 

・長方形

多角形を描く方法でも長方形を描くことはできますが、矩形を描く場合fillRect(x, y, width, height)またはstrokeRect(x, y, width, height)を使用して記述することができます。 html
<script>
window.onload = function () {
var line = document.getElementById("line");
var ctx = line.getContext("2d");
ctx.fillRect(400,100,600,200);
}
</script>

<body>
<canvas id="line" width="1000" height="1000"></canvas>
</body>
fillRectは塗りつぶしで描かれ、strokeRectは枠線のみの矩形を描くことができます。  

・円、孤

円は、arc(x, y, radius, startAngle, endAngle, anticlockwise)を使用して描くことができます。 x座標、y座標、半径の大きさを指定し、startAngle, endAngleにはそれぞれ始まりを終わりの角度をラジアンで指定します。 anticlockwiseにはfalse(時計回り)、true(反時計回り)を指定します。 html
<script>
window.onload = function () {
var line = document.getElementById("line");
var ctx = line.getContext("2d");
ctx.beginPath();
ctx.arc(150,150,100,0,Math.PI*2,true);
ctx.stroke();
}
</script>

<body>
<canvas id="line" width="1000" height="1000"></canvas></body>
 

・テキスト

テキストは、fillText(text, x, y ,maxWidth)を使用して描くことができます。 html
<script>
window.onload = function () {
var line = document.getElementById("line");
var ctx = line.getContext("2d");
ctx.fillStyle="#096509";
ctx.font="20px";
ctx.fillText("テキスト", 100, 100, 500);}
</script>

<body>
<canvas id="line" width="1000" height="1000"></canvas>
</body>
 

・画像ファイル

画像ファイルは、drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)を使用して描くことができます。 imageには、img,canvas,videoのうちいずれかの要素を記述します。 sx,syには、元イメージから使用する範囲を、sw,shにはその座標からの幅と高さを指定します。 dx,dyには、イメージを表示する座標を、dw,dhにはイメージの幅と高さを指定します。 画像ファイルは読み込みが遅いので読み込みと表示を別の関数に分けて記述する必要があります。 html
window.onload = function() {
var line = document.getElementById("line");
var ctx = line.getContext("2d");
var img = new Image();
img.src = "./test.jpg";

img.onload = function(){
ctx.drawImage(img, 100, 200,100,100);
}
}

</script>

</head>
<body>
<canvas id="line" width="1000" height="1000"></canvas>
</body>
 

・線の太さ、色

線の太さはlineWidth 、 線の色はstrokeStyleで指定することができます。 また、fillStyleで塗りつぶしやテキストの色を変えることができます。 html
<script>
window.onload = function () {
var line = document.getElementById("line");
var ctx = line.getContext("2d");
ctx.beginPath();
ctx.lineWidth = 10;
ctx.strokeStyle = "#446f6f"
ctx.strokeRect(400,100,600,200);
</script>
    
</head>
<body>
<canvas id="line" width="1000" height="1000"></canvas>
</body>
}
 

・回転

rotate(Angle)で図形を回転させることができます。 html
<script>
window.onload = function () {
var line = document.getElementById("line");
var ctx = line.getContext("2d");
ctx.beginPath();
ctx.rotate( 45 * Math.PI / 180 );
ctx.strokeRect(400,100,600,200);
</script>
    
</head>
<body>
<canvas id="line" width="1000" height="1000"></canvas>
</body>
}
 

・移動

translate(x,y)で図形を移動させることができます。 html
<script>
window.onload = function () {
var line = document.getElementById("line");
var ctx = line.getContext("2d");
ctx.beginPath();
ctx.translate(0, 500);
ctx.strokeRect(400,100,600,200);
</script>
    
</head>
<body>
<canvas id="line" width="1000" height="1000"></canvas>
</body>
}
 

・画面のクリア

clearRect(x, y, w, h)で指定した矩形を透明な色にすることができます。 html
<script>
window.onload = function () {
var line = document.getElementById("line");
var ctx = line.getContext("2d");
ctx.beginPath();
ctx.fillRect(400,100,600,200);
ctx.clearRect(450,150,500,100);
</script>
    
</head>
<body>
<canvas id="line" width="1000" height="1000"></canvas>
</body>
}
 

色彩調和論

色の組み合わせの中でも代表的な配色のまとめです。 colora  

2色

  ピコロール haisyoku2 ピコロールとは、メリハリのある2色の配色のことを言います。 2色であれば何でもいいというわけではなく、同色系統の組み合わせは好ましくありません。 コントラストの強い2色である必要があります。   ダイアード   haisyoku ダイアードとは、色相環で対極にある色同士の組み合わせのことを言います。 補色とも呼ばれている配色です。  

3色

  トリコロール   haisyoku4 トリコロールとは、メリハリのある3色の配色のことを言います。 ピコロールの3色版とも言える配色で性質も同じです。   トライアド haisyoku3 トライアドとは、色相環を正三角形になるように結ぶ配色です。 調和性が高くバランスの良い組み合わせです。   スプリットコンプリメンタリ haisyoku5 スプリットコンプメンタリは、色相環で対局している色の両隣と三角形を結ぶ配色です。 2等辺三角形の形になり、トライアド同様に調和性が高い組み合わせです。  

4色

  テトラード haisyoku6jpg テトラードとは、色相環を正四角形になるように結ぶ配色です。 2つの補色を合わせているので調和性も高い組み合わせになります。  

5色

  ペンタード haisyoku7 ペンタードとは、色相環を正五角形になるように結ぶ配色です。 トライアド+白+黒でもペンタードと呼ばれよく使われています。  

6色

  へクサード haisyoku8 へクサードとは色相環を正六角形になるように結ぶ配色です。 テトラード+白+黒でもへクサードと呼ばれよく使われています。  

その他の配色

  ドミナントトーン ドミナントトーンとは、一つの色相で統一された配色です。   トーンオントーン トーンオントーンとは、色相は統一されていて、色調が統一されていない配色です。 反対に色調は統一されていて、色相が統一されていない配色をトーンイントーンと言います。   カマイユ配色 カマイユ配色とは、色相や明度にほとんど差はなく、少しの色調の違いで色の差を出す配色です。 色相にも変化を出す配色をフォカマイユ配色と言います。   トーナル配色 トーナル配色とは、落ち着いた中間色のみで統一された配色です。   ハレーション 明度が似ていて彩度の高い色同士を組み合わせると、視認したときに目がチカチカするような不快感を感じることがあります。 それをハレーションといい、配色の際に注意しなければいけません。   セパレーションカラー 色と色の間に境界のように入れる色の事をセパレーションカラーと言います。 好ましくない組み合わせに配色でもセパレーションカラーを入れることによって調和させることができることがあります。