ユーザーが攻撃対象のサイトにログインしている時に罠サイトを踏んでしまった際に、Cookie情報を読み取られることで攻撃者がユーザーになりすましログイン状態でしか実行できない重要な処理をリクエストすることができる攻撃です。Cookieのような固定の値をセッションIDとして使用していることから発生する脆弱性で、ランダムな文字列によるトークンでセッションIDを照合するようにしておくことで回避することができます。掲示板などの入力フォームから受け取った値をサイト上に表示するウェブサイトに対して、入力フォームから直接スクリプトを書き込むことでサイト利用者の個人情報を入手したりサイトの構造を改変することができる攻撃です。「<>」や「&」のようなHTML上で特殊な意味を持つ文字をそのまま反映させてしまうことから発生する脆弱性で、「htmlspecialchars」を用いて特殊な文字のエスケープ処理を行うようにすることで回避することができます。1」のような形で条件を満たして内部の情報を引き出す攻撃です。データベースから値を取り出す際に一度変数に置き換えておき、その変数を書き換える形で値を取得するプレースホルダと呼ばれる方法を使うことで回避することができます。」以降のURLを差し替えることで、本来のウェブサイトへの信頼を利用して悪意のあるサイトへ誘導する攻撃です。「中間にクッションページを置く」などで対策することができます。ユーザーがファイル等を読み込むためのフォームを導入しているウェブサイトにおいて、「../」のような特殊な意味を持つ文字を利用することで本来アクセスできないはずのディレクトリにアクセスする攻撃です。特殊な文字列をそのままの意味で読み込んでしまうことから発生する脆弱性で、「ファイル名は英数字のみ通す」ようにするなどで対策することができます。staffVue.jsとは、javascriptフレームワークの1つです。コード内で繰り返し使う変数や関数などをあらかじめ定義しておくことでコードを単純化することを目的として開発されました。シンプルな使いやすさと、他のサポートなどと併用することが可能な点で差別化されており、人気のあるフレームワークです。{}で適用する変数と値を用意します。指定した要素内に{{変数}}を記述すると、用意した値が代入されます。</div></body>・算術プロパティ算術プロパティは変数の中身が変わらない限り何度関数を実行しても、処理を行わず前の結果を表示する特徴を持ちます。変数に関数を代入することで一連の処理を用意しておくことができます。変数名を記述するだけで、用意した処理を呼び出すことができます。</div></body>・メソッド算術プロパティと同じ結果を返しますが、メソッドは関数を実行するたびに処理を行う特徴があります。v-if=””で変数を指定します。変数に代入した値がtrueなら<p>を有効にし、falseであれば無効にします。</div></body>・<ul>に<li>を追加する[]で変数に配列を代入することができ、pushで配列に要素を追加することができます。使うことで、要素をクリックしたときに反応する処理を行うことができます。</div></body>その他の機能については公式サイトに詳しく解説されているのでそちらを参考にしてみてください。FontsはHTMLとCSSに簡単な記述をするだけで、ユーザーの環境に依存しないフォントを表示することができます。読み込みが必要になるので文字数が膨大であればページを表示したときに多少のラグが起こり得るというデメリットがあります。FontsはGoogleサーバーから配信されているため、読み込みでラグがでることがほとんどありません。公式ページからフォントを選び、各フォントの右上にある赤い+をクリックします。~のリンクをHTML内のhead内にコピーして貼り付けます。CSS内の適用させたい箇所に貼り付けることで選択したフォントを利用することができます。・人気フォントの紹介セリフ、サンセリフ、スクリプトの3つのカテゴリからそれぞれ人気の高いフォントを紹介します。変数とは、数値や文字列を保持するためのオブジェクトです。一度変数に入れた値は、そのコード内で何度も繰り返し使用することができます。javascriptでは下記のように変数を定義します。value;varで変数であることを宣言し、nameに変数名(自由)、valueに値を入れます。値に文字列を入れる場合は、次のように””で囲む。"test";四則演算も可能。15として扱われます。5;変数に変数を入れることも可能。配列とは、複数の数値や文字列を保持するためのオブジェクトです。変数では一つしか値を入れることができませんが、配列を使うことによって複数の値を入れることが可能になります。配列もコード内で何度も繰り返し使用することができます。javascriptでは下記のように変数を定義します。value3];変数同様にvar宣言をして名前とvalueにそれぞれ変数名と値を入れます。文字列は””で囲む、四則演算などが可能なことなども変数と同じです。変数と配列とでの違いは[]内に値を入力することで、値と値の間は,(カンマ)で区切ることでいくつでも値を入れることができることです。配列に入れた値にはそれぞれインデックスと言われる番号が割り振られます。最初の値から順に0,1,2...と割り振れるようになっており、上記の例の場合、value1が0、value2が1、value3が2となります。このインデックスを利用することで、配列の中の好きな値のみを指定することができます。value3];alert(name[0]);上記の例ではvalue1のみ取り出すことができています。関数とは、一連の処理を一つのオブジェクトとして定義したものです。一度定義された関数はコード内で何度も繰り返し使用することができます。下記の例のように定義します。処理}functionで関数を宣言し関数名をつけ、{}内に実行する処理を書いていきます。()内には引数を入れることができます。入れない場合は空にしておきます。document.write("テスト");}test();上記の関数は呼び出すたびにテストを画面に表示します。関数は、関数名と引数のみで呼び出すことができ、引数を指定しない場合は()は空にしておきます。オブジェクト名前で管理できるデータの集まりをオブジェクトといい、変数や関数などがオブジェクトにあたります。それら以外にもオブジェクトを直接定義することもでき、キーと値をそれぞれ入れることができます。20;2つの例は書き方は違いますがどちらも同じオブジェクトを定義しています。上の例ではpositionというオブジェクトに対して、{}を使うことでキーと値を入れています。キー(x)とキー(y)の間を,(カンマ)で区切ることで複数のキーと値のペアを入れることができ、キーと値の間を:(コロン)で区切ることで分別できます。下の例では、始めに中身を持たないオブジェクトとしてpositionを定義し、その後キーと値を入れています。staffMrakdownとは、文章を書く手段の1つでデジタル文書を書く手段として考案されたものです。き」などを表現することができ、HTMLへの変換も簡単に行うことができるのが魅力です。見出しは文頭に#と半角スペースで表記できます。#が一つの場合は、HTMLにおける<h1>と同じ見出しを表示することができ、##で<h2>、###で<h3>と同じ表示ができます。段落は空行で1行空けることで表記できます。箇条書きは文頭に-と半角スペースで表記できます。見出しMrakdownとは、文章の書く手段の1つでデジタル文書を書く手段として考案されたものです。き」などを表現することができます。箇条書きとすると下記の画像のように表示されます。Markdownの記法についてはウィキペディアにも詳しく載っているので、もっと詳しく知りたい方はそちらをごらんください。Markdownエディタの紹介windows向けの無料テキストエディタ「Atom」を紹介します。AtomはMarkdownを書きながら実際に表示されるプレビューを見ることができます。右クリックのメニューから簡単にHTMLに変換でき、同ファイル内で共存させることもできるのでとても便利です。Atomは公式サイトからダウンロードすることができます。staffCSSを編集する際に長期的なプロジェクトや複数人での作業が必要な場合、属性名名のつけ方など記法が統一されていないとミスが発生しやすくなったり作業効率の低下を招くため、CSSの記法に一貫性を持たせるためのルールが生まれました。広く認知され実用されているのが下記の3つです。CSS)・BEMBEMではid属性を使うことはほとんどなくclass属性で名前を付けていきます。modifierにそれぞれ要素を分類分けすることで命名規則を単純化しています。ページ内で独立して機能する要素として定義します。blockを構成する要素です。blockやelementの特徴などを表すために定義するもので、単独では使うことができません。modifierを区切る際に一貫したセパレーター(ハイフン、アンダースコア等)を使用することが重要となっており、下記のような規則が推奨されています。elementとmodifierはアンダースコア1つで区切ります。block名やelement名に単語を複数組み合わせる場合はセパレーターにハイフンを使用することが推奨されています。セパレーターに関してはあくまで推奨であり、サイト内で統一されてさえいればセパレーターに決まりはありません。・OOCSSOOCSSでは構造(共有できるスタイル)とスキン(固有のスタイル)を分けて記述する書き方をします。height)を繰り返し書く必要があり、編集したくなった場合に効率的ではありません。blue;}このように構造とスキンとで分けてクラス名を定義し組み合わせることで、見栄えもシンプルになり効率的に編集することができます。・SMACSSSMACSSはBEMとOOCSSを組み合わせたような規則となっており、ベース、レイアウト、モジュール、ステート、テーマの5つのルールにより定義されています。gray;}ベースでは上記のように要素そのものの見た目を定義します。20%;}レイアウトでは上記のようにエリア分けを行います。headerやfooterなど主要なものはid属性で名前をつけ、再利用する可能性のある要素はclass属性で名前をつけます。その際、モジュールやステートと混同しないためにlayout-やl-のようなプレフィックスを使用することでそれがレイアウトであることを示します。レイアウトで定義した要素を除いたすべての要素がモジュールに当てはまります。義務付けられてはいませんがmod-やm-などのプレフィックスが使われることが多いです。ステートではjavascriptを使用するときなど、状態によって変わるスタイルを定義するためのルールです。is-というプレフィックスをつけることでステートであることを示します。ステートよりも大きい変化を定義するためのルールです。theme-というプレフィックスをつけることでテーマであることを示します。詳しくは各公式サイトをご覧ください。staffsitemap.xml(XMLサイトマップ)とは、Googleやその他の検索エンジンにサイトの構成を伝えるためのファイルです。大きなサイトや新しいサイトのページがクロール漏れすることを防ぐことができるためSEO対策として役立ちます。XMLファイルは以下の構文で作成します。3つは自由項目となっています。・要素の値<loc>参照するページのURL</loc>httpなどから始まるウェブページのURLをそのまま貼り付けます。Datetime形式で記述する必要がありますが、時刻を省略して「YYYY-MM-DD」のみで記述することも可能です。目安ですが、ある程度更新頻度が決まっているのであれば記述しておきましょう。<priority>同サイト別ページとの優先度の比較</priority>値は0.0から1.0までを指定します。優先度は相対的なものなのですべてのページの優先度が1.0の場合は全てのページの優先度が等しくなります。そのため、優先したいページのみ1.0に指定し、その他のページは0.5に指定するなどの使い方が基本的な使い方です。複数のページを持つ1つのサイトのサイトマップの一例です。XMLサイトマップには自動作成ツールがあります。上記画像のサイトのように簡単な項目に記入していくだけで自動でサイトマップを作成することができるのでとても便利です。サイトマップができたらそのサイトを管理しているサーバーにアップロードし、Googleサーチコンソールに登録して終了です。詳しくは公式ページをご覧ください。staffCanvasでグラフを書く際に値を埋めるだけで簡単に任意のグラフの表示を行えるスクリプトを紹介します。グラフの種類は少なめですが、数行のシンプルなコードのみでグラフを作成することができるスクリプトです。公式サイトからダウンロード、またはCDN経由の読み込みで利用することができます。コードは少し長くなりますが、デザインが豊富に揃っていて柔軟なアレンジも可能なスクリプトです。公式サイトからダウンロード、またはCDN経由の読み込みで利用することができます。コードも長く、CDNがないため事前準備も必要になりますが20種以上のグラフを使用できます。今回はchart.jsを使用した円グラフ、線グラフ、棒グラフ、レーダーチャートの作成方法を紹介します。初めにchart.jsを読み込む必要があります。src="script/Chart.js"></script>//CDN経由で読み取る方法があります。src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>次にcanvasタグを用意します。id名や高さなどは自由に決めることができます。width="500"></canvas>この2つの準備ができたら後はグラフに入れる値とグラフの種類を指定するだけで簡単にグラフを作成することができます。指定することができます。指定することができます。指定することができます。staffcanvasの使い方についてのまとめです。canvasとはcanvasはHTML5で新しく登場した、ブラウザ上で図を表現するためのタグです。線や図を描いたり色を付けたりすることができますが、アニメーションとは違い図を動かすためには1コマずつ図の書き直しを繰り返す必要があります。直線の描き方は以下の流れで記述します。height="1000"></canvas></body>・ストロークと塗りつぶしfill()を使用することで図形の塗りつぶしを描くことができます。描き方は以下の流れで記述します。y)を2つ、四角形なら3つ、五角形なら4つと増やしていくことで多角形を描くことができます。height)を使用して記述することができます。height="1000"></canvas></body>fillRectは塗りつぶしで描かれ、strokeRectは枠線のみの矩形を描くことができます。anticlockwise)を使用して描くことができます。endAngleにはそれぞれ始まりを終わりの角度をラジアンで指定します。anticlockwiseにはfalse(時計回り)、true(反時計回り)を指定します。maxWidth)を使用して描くことができます。dh)を使用して描くことができます。imageには、img,canvas,videoのうちいずれかの要素を記述します。sx,syには、元イメージから使用する範囲を、sw,shにはその座標からの幅と高さを指定します。dx,dyには、イメージを表示する座標を、dw,dhにはイメージの幅と高さを指定します。画像ファイルは読み込みが遅いので読み込みと表示を別の関数に分けて記述する必要があります。線の色はstrokeStyleで指定することができます。fillStyleで塗りつぶしやテキストの色を変えることができます。height="1000"></canvas></body>}・回転rotate(Angle)で図形を回転させることができます。height="1000"></canvas></body>}・移動translate(x,y)で図形を移動させることができます。h)で指定した矩形を透明な色にすることができます。staff色の組み合わせの中でも代表的な配色のまとめです。ピコロールとは、メリハリのある2色の配色のことを言います。2色であれば何でもいいというわけではなく、同色系統の組み合わせは好ましくありません。コントラストの強い2色である必要があります。ダイアードとは、色相環で対極にある色同士の組み合わせのことを言います。補色とも呼ばれている配色です。トリコロールとは、メリハリのある3色の配色のことを言います。ピコロールの3色版とも言える配色で性質も同じです。トライアドとは、色相環を正三角形になるように結ぶ配色です。調和性が高くバランスの良い組み合わせです。スプリットコンプメンタリは、色相環で対局している色の両隣と三角形を結ぶ配色です。2等辺三角形の形になり、トライアド同様に調和性が高い組み合わせです。テトラードとは、色相環を正四角形になるように結ぶ配色です。2つの補色を合わせているので調和性も高い組み合わせになります。ペンタードとは、色相環を正五角形になるように結ぶ配色です。トライアド+白+黒でもペンタードと呼ばれよく使われています。クサードとは色相環を正六角形になるように結ぶ配色です。テトラード+白+黒でもへクサードと呼ばれよく使われています。ドミナントトーンとは、一つの色相で統一された配色です。トーンオントーンとは、色相は統一されていて、色調が統一されていない配色です。反対に色調は統一されていて、色相が統一されていない配色をトーンイントーンと言います。カマイユ配色とは、色相や明度にほとんど差はなく、少しの色調の違いで色の差を出す配色です。色相にも変化を出す配色をフォカマイユ配色と言います。トーナル配色とは、落ち着いた中間色のみで統一された配色です。明度が似ていて彩度の高い色同士を組み合わせると、視認したときに目がチカチカするような不快感を感じることがあります。それをハレーションといい、配色の際に注意しなければいけません。色と色の間に境界のように入れる色の事をセパレーションカラーと言います。好ましくない組み合わせに配色でもセパレーションカラーを入れることによって調和させることができることがあります。