HTML/CSS アーカイブ - nyanblog ~にゃんぶろぐ~

Visual Studio Codeのインストールや日本語化設定

nyan2222 — Sat, 25 Mar 2023 15:12:41 +0000

本記事ではVisual Studio Codeの環境構築を行います。

Visual Studio Code（VSCode）とは
Visual Studio Codeのインストール
Visual Studio Codeに拡張機能をインストール

Visual Studio Code（VSCode）とは

Visual Studio CodeはMicrosoftが開発している
Windows、Linux、macOS、webで無料で提供されているソースコードエディタです。

調べるときに良くVSCodeとも出てきます。

最大の特徴は拡張機能が豊富にあり、
・英語・中国語・日本語表示
・各開発言語の開発効率を向上させる機能（ソースコード入力補助等）
様々あるため、現在最も多く利用されているエディタといわれています。

みみねこ

なにより多くの機能が無料で使える！
これに尽きます。

Visual Studio Codeのインストール

さっそくVisual Studio Codeをインストールしていきます。
まずはVisual Studio Codeのページから赤枠をクリックし、ファイルをダウンロードします。

ダウンロードしたファイル「VSCodeUserSetup-x64-[ver名].exe」をダブルクリックし
インストールを開始します。

セットアップ画面が開いたら
「同意する」にチェックをつけて、「次へ」をクリックします。

インストール先を指定します。
特に変更する必要がなければそのまま「次へ」をクリックします。

スタートメニューにショートカットを作成します。
特にこだわりがなければ、このまま「次へ」をクリックします。

ここでは、インストール時の追加要素を選択することができます。

今回は変更していませんが、おすすめは以下の3つです。

・エクスプローラーのファイル　コンテキストメニューに[Code で開く]アクションを追加する
・エクスプローラーのディレクトリ　コンテキストメニューに[Code で開く]アクションを追加する
・PATHへの追加

他のサイトでよくインストール作業の内容に関して、環境変数に設定する内容が記載されていますが、ここでPATHへの追加にチェックを入れておくと自分で作業する必要が無くなります。
そのため、チェックをつけた状態で「次へ」をクリックしましょう。

インストールの確認前画面です。
内容に問題なければ「インストール」をクリックしてください。

インストールが完了したら「完了」をクリックし、セットアップ画面を閉じてください。
これでVisual Studio Codeのインストールが完了です。

Visual Studio Codeに拡張機能をインストール

拡張機能でインストールする方法を紹介します。
まず使うであろう「日本語化」の拡張機能をインストールします。

Visual Studio Codeを開きます。

左側のアクティビティバーにある、赤枠「拡張機能」をクリックします。

「Marketplace」に「Japanese」と入力してください。

「Japanese Language Pack for Visual Studio Code」
のインストールを行ってください。

locale.jsonで日本語に設定します。
「Ctrl」+「Shift」+「P」でコマンドパレットを起動します。

「configure」と入力すると予測変換が出てくるので
「Configure Display Language」をクリックします。

「ja」(japanese)をクリックします。

再起動するか確認するメッセージボックスが出ますので、「Restart」をクリックしてください。

これで日本語化の完了です。

投稿 Visual Studio Codeのインストールや日本語化設定は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

【初心者】JavaScriptでTODOリスト作り方【サンプル】

nyan2222 — Thu, 09 Mar 2023 15:31:35 +0000

JavaScriptでTODOリストを作成しました。

シンプルでサンプル・解説ありなので、初心者のJavaScriptの勉強用に良かったら作成してみてください♪

はじめに
実装内容（フロー）
HTML
CSS
JavaScript
1. コード
2. 解説
デモ

はじめに

まずはTODOリストの機能を考えます。
今回は以下の機能を持たせて実装しました。

簡単な機能しか実装していませんが、好みに応じてカスタマイズしてみてください。

タスクを追加、完了、削除
タスクをまとめて削除する

作成のイメージ図がこちらです。

実装内容（フロー）

次に箇条書きで処理フローを記述します。

変数を設定
タスク追加ボタン押下時：
1. タスク名の入力値チェック
2. タスクに必要な要素を追加する
チェックしたタスクを一括削除ボタン押下時：
1. チェックしたタスクをを削除する
完了ボタン押下時：
1. ボタンを押下したタスクを完了
削除ボタン押下時：
1. ボタンを押下したタスクを削除

みみねこ

シンプルな機能だけ持たせています。
改善点は色々思い当たりますが、完了状態→タスク未完了状態に戻したりがありますね。

HTML

まずはHTMLを作成していきます。
作成しているのは、大きく以下の3つです。

タイトル（TODOリスト）
タスク名登録・タスク複数削除
タスク一覧（完了・削除ボタン）


  
    TODOリスト

「タスクを追加」ボタンにクリックイベント”addTask()“
「チェックしたタスクを削除」ボタンにクリックイベント”deleteTask()“

を設定しています。

CSS

次にCSSでスタイルを決定します。
この辺りは好きなようにカスタマイズをしていただいて良いと思います！
※ 先にreset.cssを読み込んでからスタイルを設定していますので、注意してください。

特に記載するところはありませんが、
61行目「line-through」、87行目「disabled」はJavaScriptで「完了」ボタン押下時のイベントで使用するため、設定してください。

@charset "utf-8";

/*全体*/
.wrapper{
  max-width: 600px;
  margin: 0 auto;
  color: #666;
}
#header {
  text-align: center;
  font-size: 24px;
  width: 100%;
  margin: 1.5rem 0;
}
#main-wrap {
  margin-bottom: 1.5rem;
}

/* 入力 */
#input-wrap {
  margin: 0 auto;
  width: 80%;
}
#input-wrap input{
  width: 40%;
  height: 24px;
  margin-right: 1rem;
}

/* リスト */
#main-wrap {
  text-align: center;
  margin: 0 auto;
  width: 70%;
  min-height: 120px;
  border: 1px solid #aaa;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  padding: 0.8rem 2rem;
}

#main-wrap ul {
  padding-inline-start: 0
}

#main-wrap li {
  text-align: left;
  list-style-type: none;
  border-bottom: 1px dashed #aaa;
  padding: 0.8rem 0;
  display: flex;
  line-height: 32px;
}

#main-wrap p {
  width: 60%;
}
#main-wrap p.line-through {
  text-decoration: line-through;
}

/*ボタン*/
button{
  height: 32px;

  cursor: pointer;
  background: #B78D4A;
  color: #fff;
  border: 1px solid #B78D4A;
  border-radius: 4px;
  font-size: 1rem;
  padding: 0.2rem 1.5rem;
  margin-bottom: 0.5rem;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}

button:hover{
  background-color: #D4BB92;
  border-color: #D4BB92;
}
button.disabled {
  background-color: #D4BB92;
  border-color: #D4BB92;
  cursor: not-allowed;
  pointer-events: none;
}

button.deleteTask-button {
  margin-bottom: 1.5rem;
}

.end-button, .delete-button {
  margin-bottom: 0;
  padding: 0.2rem 1rem;
}

.end-button {
  margin-right: 0.4rem;
}

JavaScript

JavaScriptのコードと解説をしていきます。

コード

次項で詳しく解説していますが、コメントでも多少記述しています。
コピペも可能です！

var todoList;
window.onload = function () {
  todoList = document.getElementById('todo-list');
}

// タスク追加
function addTask() {
  var taskName = document.getElementById('task-name');

  // タスク名の入力がなければ処理を終了
  if(taskName.value.Trim() == "") return;

  // liに要素を追加
  var li = document.createElement('li');

  // liにinputを追加
  var input = document.createElement('input');
  input.setAttribute('type', 'checkbox');
  input.setAttribute('name', 'task');
  li.appendChild(input);

  // liにpを追加
  var p = document.createElement('p');
  p.innerHTML = taskName.value;
  li.appendChild(p);

  // liにbuttonを追加
  var endButton = createTaskButton('end-button', '完了');
  li.appendChild(endButton);

  // liにbuttonを追加
  var deleteButton = createTaskButton('delete-button', '削除');
  li.appendChild(deleteButton);

  // ulにliを追加
  todoList.appendChild(li);

  taskName.value = "";

  // イベント処理
  // 完了ボタンクリック
  endButton.addEventListener('click', function(e){
    e.preventDefault();
    this.setAttribute('class', 'end-button disabled');
    this.previousElementSibling.setAttribute('class', 'line-through');
  });
  // 削除ボタンクリック
  deleteButton.addEventListener('click', function(e){
    e.preventDefault();
    todoList.removeChild(this.closest('li'));
  });
}

// チェックしたタスクを一括削除
function deleteTask() {
  var inputList = document.task_form.task;
  for(var i=inputList.length-1;i>=0;i--) {
    if(inputList[i].checked){
      todoList.removeChild(inputList[i].closest('li'));
    }
  }
}

// タスク内にあるボタンを作成
function createTaskButton(className, name) {
  var btn = document.createElement('button');
  btn.setAttribute('class', className);
  btn.innerHTML = name;
  return btn;
}

解説

先述したコードに対して細かく解説していきます！

・グローバル変数の定義・ページ読み込み後、変数にHTML要素を設定

var todoList;
window.onload = function () {
  todoList = document.getElementById('todo-list');
}

ページ読み込み後に

・タスク追加

function addTask() {
  var taskName = document.getElementById('task-name');

  // タスク名の入力がなければ処理を終了
  if(taskName.value.Trim() == "") return;

  // liに要素を追加
  var li = document.createElement('li');

  // liにinputを追加
  var input = document.createElement('input');
  input.setAttribute('type', 'checkbox');
  input.setAttribute('name', 'task');
  li.appendChild(input);

  // liにpを追加
  var p = document.createElement('p');
  p.innerHTML = taskName.value;
  li.appendChild(p);

  // liにbuttonを追加
  var endButton = createTaskButton('end-button', '完了');
  li.appendChild(endButton);

  // liにbuttonを追加
  var deleteButton = createTaskButton('delete-button', '削除');
  li.appendChild(deleteButton);

  // ulにliを追加
  todoList.appendChild(li);

  taskName.value = "";

  // イベント処理
  // のちほど説明のため省略
}

「タスクを追加」ボタン押下時のイベントを実装します。

var taskName = document.getElementById('task-name');

タスク名を入力するのid’task-name’を取得し、変数taskNameに設定しています。

// タスク名の入力がなければ処理を終了
if(taskName.value.Trim() == "") return;

タスク名の入力値が空であれば処理を終了する。
Trim()は入力値の前後の空白を除きます。

// liに要素を追加
var li = document.createElement('li');

// liにinputを追加
var input = document.createElement('input');
input.setAttribute('type', 'checkbox');
input.setAttribute('name', 'task');
li.appendChild(input);

// liにpを追加
var p = document.createElement('p');
p.innerHTML = taskName.value;
li.appendChild(p);

// liにbuttonを追加
var endButton = createTaskButton('end-button', '完了');
li.appendChild(endButton);

// liにbuttonを追加
var deleteButton = createTaskButton('delete-button', '削除');
li.appendChild(deleteButton);

の要素を作成します。
の中には以下の要素を作ります。

・チェックボックス
・タスク名
・完了ボタン
・削除ボタン
```
// ulにliを追加
todoList.appendChild(li);
```
作成した
を

【初心者】JavaScriptでストップウォッチの作り方

nyan2222 — Fri, 09 Sep 2022 06:31:39 +0000

今回はJavaScriptでストップウォッチを作成しました。
シンプルでサンプル・解説ありなので、初心者のJavaScriptの勉強用に良かったら作成してみてください♪

はじめに
実装内容（フロー）
HTML
CSS
JavaScript
1. コード
2. 解説
デモ

はじめに

まずはストップウォッチの機能を考えます。
今回は以下の機能を持たせて実装しました。

時間を計測する
ボタン：スタート、ストップ、リセット
※ 各ボタンを押すと各ボタンの有効・無効を判定
一度ストップしてから再度スタートすると継続して時間を計測
リセットを押すと”00:00.000″表示となりリセットされる

実際に作成したイメージ図がこちらです。

実装内容（フロー）

次に箇条書きで処理フローを記述します。

ボタンやタイマーの各要素を変数に設定
スタートボタン押下時：
1. 時間を計測して表示
2. スタートボタンを無効
3. ストップ、リセットボタンを有効
ストップボタン押下時：
1. 時間計測をストップし、停止時間を保持
2. 停止時間を保持
3. スタート、リセットボタンを有効
4. ストップボタンを無効
リセットボタン押下時：
1. 時間計測をストップし、時間計測に使用する変数や表示時間を初期化
2. スタートボタンを有効
3. ストップ、リセットボタンを無効

この流れで実際にコーディングを進めていきます。

HTML

まずはHTMLを作成していきます。
作成しているのは、以下の2つです。

計測時間の表示
スタート・ストップ・リセットボタン

CSS

次にCSSでスタイルを決定します。
この辺りは好きなようにカスタマイズをしていただいて良いと思います！

特に記載するところはありませんが、
強いて言えばボタンは有効時、hoverすると色変化、カーソル変化。無効時は色変化のスタイルを設定しています。

@charset "utf-8";

/*全体*/
.wrapper{
    font-family: arial, sans-serif;
	max-width: 600px;
	margin: 0 auto;
	color: #666;
	text-align: center;
}

/* 時間表示 */
#time{
    font-size: 60px;
    margin: 20px 0;
}

/*ボタン*/
button {
    padding: 20px 0;
    font-size: 30px;
    display: inline-block;
    padding: .8rem 1.6rem;
    border: none;
    color: #FFF;
    background-color: #B78D4A;
    border-radius: 15px;
}
button:hover {
    cursor: pointer;
    background-color: #D4BB92;
}
button:disabled {
    cursor: default;
    background-color: #D4BB92;
}

JavaScript

JavaScriptのコードと解説をしていきます。

コード

次項で詳しく解説していますが、コメントでも多少記述しています。
コピペも可能です！

var startButton;    // startボタン
var stopButton;     // stopボタン
var resetButton;    // resetボタン
var showTime;       // 表示時間

var timer;              // setinterval, clearTimeoutで使用
var startTime;          // 開始時間
var elapsedTime = 0;    // 経過時間
var holdTime = 0;       // 一時停止用に時間を保持

window.onload = function () {
    startButton = document.getElementById("start");
    stopButton = document.getElementById("stop");
    resetButton = document.getElementById("reset");
    showTime = document.getElementById("time");
}

// スタートボタン押下時
function start(){
    // 開始時間を現在の時刻に設定
    startTime = Date.now();

    // 時間計測
    measureTime();

    startButton.disabled = true;
    stopButton.disabled = false;
    resetButton.disabled = false;
}

// ストップボタン押下時
function stop(){
    // タイマー停止
    clearInterval(timer);

    // 停止時間を保持
    holdTime += Date.now() - startTime;

    startButton.disabled = false;
    stopButton.disabled = true;
    resetButton.disabled = false;
}

// リセットボタン押下時
function reset(){
    // タイマー停止
    clearInterval(timer);

    // 変数、表示を初期化
    elapsedTime = 0;
    holdTime = 0;
    showTime.textContent = "00:00.000";

    startButton.disabled = false;
    stopButton.disabled = true;
    resetButton.disabled = true;
}

// 時間を計測（再帰関数）
function measureTime() {
    // タイマーを設定
    timer = setTimeout(function () {
        // 経過時間を設定し、画面へ表示
        elapsedTime = Date.now() - startTime + holdTime;
        showTime.textContent = new Date(elapsedTime).toISOString().slice(14, 23);
        
        // 関数を呼び出し、時間計測を継続する
        measureTime();
    }, 10);
}

解説

先述したコードに対して細かく解説していきます！

・グローバル変数の定義

var startButton;    // startボタン
var stopButton;     // stopボタン
var resetButton;    // resetボタン
var showTime;       // 表示時間

var timer;              // setinterval, clearTimeoutで使用
var startTime;          // 開始時間
var elapsedTime = 0;    // 経過時間
var holdTime = 0;       // 一時停止用に時間を保持

コメントでそれぞれ記載していますが、使用する変数を宣言します。

1～4行がボタン、計測時間の表示でこの後HTMLの要素を設定します。
5～9行が時間の計測に使用する変数です。

・ページ読み込み後、変数にHTML要素を設定

window.onload = function () {
  startButton = document.getElementById("start");
  stopButton = document.getElementById("stop");
  resetButton = document.getElementById("reset");
  showTime = document.getElementById("time");
}

ページ読み込み後、ボタンや計測時間の表示のidを指定して各変数にHTML要素を設定します。

・スタートボタン押下時に呼ばれる関数：start()

// スタートボタン押下時
function start(){
    // 開始時間を現在の時刻に設定
    startTime = Date.now();

    // 時間計測
    measureTime();

    startButton.disabled = true;
    stopButton.disabled = false;
    resetButton.disabled = false;
}

スタートボタン押下時に呼ばれる関数です。

startTime = Date.now();
時間計測に使用する[開始時間]を変数に設定します。

measureTime();
次に時間計測を行う関数を呼び出します。
時間計測に関しては関数の説明で詳しく説明します。

最後にスタートボタンを無効、ストップ、リセットボタンを有効にします。

・ストップボタン押下時に呼ばれる関数：stop()

// ストップボタン押下時
function stop(){
    // タイマー停止
    clearInterval(timer);

    // 停止時間を保持
    holdTime += Date.now() - startTime;

    startButton.disabled = false;
    stopButton.disabled = true;
    resetButton.disabled = false;
}

ストップボタン押下時に呼ばれる関数です。

clearInterval(timer);
時間計測に使用しているタイマーを停止します。

holdTime += Date.now() – startTime;
一度ストップを押下して再度スタートボタンを押下した際、続きから時間を計測するため、停止時間を保持します。

最後にスタート、リセットボタンを有効、ストップボタンを無効にします。

・リセットボタン押下時に呼ばれる関数：reset()

// リセットボタン押下時
function reset(){
    // タイマー停止
    clearInterval(timer);

    // 変数、表示を初期化
    elapsedTime = 0;
    holdTime = 0;
    showTime.textContent = "00:00.000";

    startButton.disabled = false;
    stopButton.disabled = true;
    resetButton.disabled = true;
}

ストップボタン押下時に呼ばれる関数です。

clearInterval(timer);
時間計測に使用しているタイマーを停止します。

elapsedTime = 0;
holdTime = 0;
showTime.textContent = “00:00.000”;
時間計測に使用する変数や表示時間を初期化します。

最後にスタートボタンを有効、ストップ、リセットボタンを無効にします。

・時間を計測する関数（再帰関数）：measureTime()

// 時間を計測（再帰関数）
function measureTime() {
    // タイマーを設定
    timer = setTimeout(function () {
        // 経過時間を設定し、画面へ表示
        elapsedTime = Date.now() - startTime + holdTime;
        showTime.textContent = new Date(elapsedTime).toISOString().slice(14, 23);
        
        // 関数を呼び出し、時間計測を継続する
        measureTime();
    }, 10);
}

時間を計測する関数です。

4～11行目まででタイマーを設定します。

elapsedTime = Date.now() – startTime + holdTime;
計測時間を計算します。
[現在の時刻] – [開始時間] + [保持している時間]で導き出されます。
startTimeはスタートボタン押下時、holdTimeはストップボタンを押下時に設定しています。

showTime.textContent = new Date(elapsedTime).toISOString().slice(14, 23);
計算した計測時間を表示します。

toISOString()：ISO形式の文字列で常にYYYY-MM-DDTHH:mm:ss.sssZ形式を返します。

slice(14, 23)：先頭を0として14～23文字目までを取得しているので、
[YYYY-MM-DDTHH:mm:ss.sssZ]の赤線（赤文字）がshowTime.textContentに渡されます。

measureTime();
処理中に自身を呼び出します。
これでストップボタンが押されるまで時間計測が行われます。

デモ

こちらがデモページになります。

良かったら試してみてください♪

投稿【初心者】JavaScriptでストップウォッチの作り方は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

【初心者】JavaScriptでおみくじの作り方【サンプル】

nyan2222 — Tue, 06 Sep 2022 14:43:10 +0000

今回はJavaScriptでおみくじを作成しました。
三段階で作成してみましたので、初心者の方が勉強するのにおすすめですよ♪

段階としては三段階で作成していきます。

ボタンを押しておみくじを表示する
おみくじの結果の確率を設定する
ボタンを押しておみくじルーレットを表示する
おみくじは画像で表示する

ボタンを押しておみくじを表示
1. ソースコード
2. 解説
おみくじの結果の確率を設定
1. ソースコード
2. 解説
ボタンを押しておみくじルーレットを表示
1. ソースコード
  1. HTML
  2. JavaScript
2. 解説

ボタンを押しておみくじを表示

まずは一番簡単なコードで作成していきます。

こちらがデモページになります。

ソースコード

こちらがソースコードです。




  
    おみくじ
ボタンをクリックしてください。

解説

HTML

17～19行目　ボタン：押すことでおみくじが引く
20行目　pタグ：おみくじの結果を表示

JavaScript

5行目　おみくじの結果をリストに設定
7～10行目　ボタンのクリックイベント
8行目　random関数を利用して0～リストの数までのランダムの数を作成
　　　 floor関数で小数を切り捨てて整数にする
9行目　8行目で作成した数字を使っておみくじ結果リストにアクセスし、id=”result”に設定

おみくじの結果の確率を設定

続いて、おみくじの結果の確率を設定して出やすさを変えていきます。

こちらがデモページになります。

ソースコード

こちらがソースコードです。




  
    おみくじ
ボタンをクリックしてください。

解説

HTMLは変更なしのため、解説は割愛します。

JavaScript

3～11行目　おみくじの結果を連想配列に設定
　　　 valueを数字にして確率を設定（数字が大きい方が出やすい）
　　　 ※ 全ての項目のvalueの和が100になるように
13～23行目　ボタンのクリックイベント
14行目　random関数を利用して0～100の数までのランダムの数を作成
　　　　 floor関数で小数を切り捨てて整数にする
15～21行目　14行目でランダムに設定した値を使い、for文で連想配列を回しながら14行目で取得した値の結果をid=”result”に設定

ボタンを押しておみくじルーレットを表示

最後にボタンを「START」「STOP」に変更しておみくじルーレットを作成します。
また、おみくじの結果は画像にしました。

こちらがデモページになります。

表示画面

ソースコード

こちらがソースコードです。

HTML


  
    おみくじ
ボタンをクリックしてください。

JavaScript

window.onload = function () {

  const list = {
    "daikichi":10,
    "kichi":15,
    "chuukichi":20,
    "syoukichi":25,
    "suekichi":15,
    "kyou":10,
    "daikyou":5,
  };

  var timer;
  // START・STOPボタンクリックのイベント
  document.getElementById("button").onclick = function () {
    // START
    if (this.textContent == "START") {
      // ボタンのテキストを"STOP"に変更
      this.textContent = "STOP";

      // ルーレットタイマーを設定
      timer = setInterval(function () {
        var random = Math.floor(Math.random() * Object.keys(list).length);
        document.getElementById("img").src = "img/" + Object.keys(list)[random] + ".png";
      }, 10);
    // STOP
    } else {
      // ボタンのテキストを"START"に変更
      this.textContent = "START";

      var rate = 0;
      var random = Math.floor(Math.random() * 100);
      for(var data in list){
        rate += list[data];
        if(random <= rate){
          document.getElementById("img").src = "img/" + data + ".png";

          // ルーレットタイマーを停止
          clearInterval(timer);
          return;
        }
      }
    }
  };
};

解説

HTML

4～6行目　ボタン：押すことでおみくじが引く
7～9行目　pタグ：おみくじの結果を表示

JavaScript

3～11行目　おみくじの結果を連想配列に設定
15～行目　ボタンのクリックイベント
16～24行目　START表示時にクリックしたときの処理
・19行目　ボタン表示を[STOP]に変更
・22～25行目　タイマーを設定（ルーレットを作ります）
・23行目　randomにランダムに値を設定（0～連想配列の数）
・24行目　23行目の値を使って画像を設定
26～43行目　STOP表示時にクリックしたときの処理
・29行目　ボタン表示を[START]に変更
・31～42行目　[おみくじの結果の確率を設定]のおみくじの設定を流用
・39行目　タイマー解除

みみねこ

上記で簡単に解説していますが、

START表示の処理は[ボタンを押しておみくじを表示]、

STOP表示の処理は[おみくじの結果の確率を設定]の実装を流用しています！

投稿【初心者】JavaScriptでおみくじの作り方【サンプル】は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

【JavaScript／JS】Canvasとは？【HTML5／使い方】

nyan2222 — Wed, 11 Aug 2021 21:19:50 +0000

皆さんCanvasを使用したことはありますか？
今回はCanvasを使って、2Dの簡単な図形を描画する方法を紹介していきます。

Canvasとは？
HTMLの設定
描画コンテキストの取得
四角形を描画
線（パス）を描画
1. 関数
2. 実装
円（円弧）の描画
1. 関数
2. 実装
まとめ

Canvasとは？

Canvasとは、HTML5から追加された2Dの図形を描画するための技術です。
使い方としては、HTMLで要素を作成・IDを指定し、JavaScriptで描画する内容を実装します。
例として、グラフを描く、写真を合成する、シンプルなアニメーションを表現することができます。

HTMLの設定

HTMLでcanvasを設定します。
JavaScriptで指定するためにid=”canvas”を指定しています。
属性で幅(width)、高さ(height)を設定していますが、JavaScriptでも設定が可能です。

また、canvasブロック内で”代替コンテンツ”と設定していますが、
これはcanvasに対応しないブラウザやJavaScriptを無効にしている場合、代替コンテンツを出力しています。
代替コンテンツには、テキストや画像など設定することができます。

描画コンテキストの取得

HTMLでCanvasを設定しましたが、そのままでは何も描画されません。
getContext関数で、コンテキストを取得することができます。

// HTMLの読込完了後に実行
window.onload = function () {
    // id='canvas'の要素を取得
    var canvas = document.getElementById('canvas');

    // 2次元の描画コンテキストを取得
    var ctx = canvas.getContext('2d');
}

getContext関数の第1引数にコンテキストの種類を指定することができます。
今回は2次元の描画コンテキスト（CanvasRenderingContext2D）を取得しています。
他の設定値は以下の通りです。

webgl
3次元グラフィックス描画（WebGL ver1）コンテキスト
（WebGLRenderingContext）を取得します。
webgl2
3次元グラフィックス描画（WebGL ver2）コンテキスト　　　　　　（WebGL2RenderingContext）を取得します。

WebGL・・・Web用のOpenGL（グラフィック専用のライブラリ）

これで描画する準備ができました。
次項目から実際に図形を描画してみましょう。

四角形を描画

まずは四角形を描画してみましょう。
こちらのプロパティと関数を使って描画することができます。

プロパティ

fillStyle・・・塗りつぶしのスタイルを設定（色・グラデーション・パターン値）
strokeStyle・・・境界線のスタイルを設定（色・グラデーション・パターン値）
lineWidth・・・境界線の幅を設定

関数

fillRect(x, y, width, height)・・・塗りつぶし状態の四角形を描画
strokeRect(x, y, width, height)・・・四角形の境界線を描画
clearRect(x, y, width, height)・・・指定範囲の四角形を消去し、透明になる

実装

それでは実際に描画してみましょう。
こちらがソースコードです。詳しい内容はコメントを記載しています。

こちらが実際に描画したcanvasです。

線（パス）を描画

四角形の他には、パスを組み合わせて描画することで図形を表現することができます。
パスを用いた図形の描画では、次の関数を使用します。

関数

beginPath()・・・新規パスを作成。以降の描画呼び出しはパスを構築します。
closePath()・・・開始パスに直線を描画し、パスを閉じる
stroke()・・・境界線を描画
fill()・・・塗りつぶして描画
moveTo(x, y)・・・指定座標に移動
lineTo(x, y)・・・現在地から指定座標まで線を描画

実装

実際に描画してみましょう。
詳細はコメントにそれぞれ記載していますので、実装しながらだと理解しやすいかもしれません。

こちらが実際に描画したcanvasです。

このようにして、パス使って図形を描画することができました。

注意点ですが、beginPath()の呼び出し直後は、どの関数が呼び出されてもmoveTo()として扱われ実行されます。
例えると紙に書く時、鉛筆を紙に添えている動作をイメージしたものです。
そのため、基本的には、beginPath()の後や、canvasを新規で作成した後はmoveTo()を意識的に呼び出すようにしてください。

円（円弧）の描画

続いて、円（円弧）の描画についてです。
まずは関数の説明です。

関数

arc(x, y, radius, startAngle, endAngle[, anticlocwise])・・・円弧を描画
x,y=中心地、radius=半径、startAngle=開始角度、endAngle=終了角度、anticlocwise=周る方向（初期設定：時計回り）

実装

続いて、ソースコードの内容です。
詳細はコメントに記載しています。

こちらが実際に描画したcanvasです。

まとめ

今回はHTML5とJavaScriptを使用して、Canvasで2Dの描画をしてみました。
ぜひ試してみてくださいね！

今回の記事が何かの参考になれば幸いです♪　

投稿【JavaScript／JS】Canvasとは？【HTML5／使い方】は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

【JavaScript】Canvasで複数の画像を1つのimgタグで順番に出力してみよう【HTML5】

nyan2222 — Thu, 25 Jun 2020 09:00:00 +0000

こんにちは。今回はJavaScriptでcanvas要素を使って、複数の画像を1つのimg要素へ出力する方法をご紹介します。

同じフォルダ構成＋ファイル名の画像さえあれば、コピペで再現できます！

HTML
CSS
JavaScript
デモ
まとめ

HTML

今回のHTMLは至ってシンプルです。
img要素を作成する親divを記述しています。

CSS

今回はCSSは使用していないので、不要です。
※ その代わりJavaScriptがしっかり目です。

JavaScript

JavaScriptはこちらです。
今回はJQueryは使っていません。

要所要所で、解説用にコメントを記述してみました。

window.onload = function () {
    // 色々宣言・初期化
    var canvas = document.createElement("canvas");
    canvas.width = 0;
    canvas.height = 0;
    var images = [];
    var srcs = [
        'img/1.jpg',
        'img/2.jpg',
        'img/3.jpg',
        'img/4.jpg',
    ];
    var loadCount = 0;

    // Canvas上に画像を表示
    for (var i = 0; i < srcs.length; i++) {
        // Imageのインスタンスを生成し、それぞれの画像を設定
        images[i] = new Image();
        images[i].src = srcs[i];

        // 画像の読み込みが終わったら
        images[i].onload = function () {
            // カウントを取る
            loadCount++;

            // 画像全てloadが終わったら
            if (loadCount === images.length) {
                // ロード後の処理
                loadProcess(images, canvas);
            }
        };
    }
};

// ロード後の処理
function loadProcess(images, canvas) {
    // 画像それぞれのサイズを計算して、canvasのサイズを設定
    setCanvasSize(images, canvas);

    // canvasをクリアにする
    let ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // カンバスに画像を描画
    drowImage(images, ctx);

    // canvasを画像に変換
    canvasToImage(canvas);
}

// カンバスサイズを設定
function setCanvasSize(images, canvas) {
    for (let i = 0; i < images.length; i++) {
        // 横幅は一番大きい画像に設定
        if (canvas.width < images[i].naturalWidth) {
            canvas.width = images[i].naturalWidth;
        }
        // 高さはプラスしていく
        canvas.height += images[i].naturalHeight;
    }
}

// カンバスに画像を描画
function drowImage(images, ctx) {
    var set_y = 0;
    for (let i = 0; i < images.length; i++) {
        ctx.drawImage(images[i], 0, set_y);
        // 前の画像分、高さをずらして表示させるため、set_yに現在の画像の高さを設定
        set_y += images[i].naturalHeight;
    }
}

// canvasからImgに変換
function canvasToImage(canvas) {
    // img要素を作成
    var outputImg = document.createElement('img');
    // canvasを画像に変換
    outputImg.src = canvas.toDataURL('image/png');
    // 変換したimg要素をdiv要素の中に追加
    document.getElementById('result').appendChild(outputImg);
}

デモ

デモページはこちらです。
サイズの取得を確認できるよう、さまざまな画像を使ってみました。

まとめ

いかがでしたでしょうか。
このようなcanvasの使い方もできるんですねぇ。。。
色んな描画の使い方ができるので、もっと！もっと！とできるようになりたいです。
（ちょっとしたミニゲームっぽいのもそろそろ作ってみたい。。。）

今回に限った話ではないですが、実務でC#をやっておきながら、JavaScriptでオブジェクト指向の書き方が全然できておらず、猛勉強中です。

可読性も上げたいと思っているので、近いうちに記事にできるようしっかり勉強していきます。

投稿【JavaScript】Canvasで複数の画像を1つのimgタグで順番に出力してみよう【HTML5】は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

【JavaScript】アナログ時計の作り方【サンプル】

nyan2222 — Wed, 24 Jun 2020 09:00:00 +0000

こんにちは。先日JavaScriptでカウントダウンタイマーを作成してみました！
詳しくはこちらをご欄ください。

【JavaScript】カウントダウンタイマーの作り方【サンプル】

JavaScript（JS）でカウントダウンタイマーを作成しました。サンプル付きでデモもあるので分かりやすくなっています。コピペでも良いのでよかったら試してみてください♪

今回はDateオブジェクトを使用して、アナログ時計を作成してみました。
良かったら試してみてください。

HTML
CSS
JavaScript
デモ
まとめ

HTML

まずは、HTMLからです。
それぞれの役割はこちらです。

wrapperクラス：ラッパー
clockクラス：時計全体
scaleクラス：時計のメモリの枠
　※ JavaScriptでそれぞれのメモリを設定します。
hourクラス：時針
minクラス：分針
secクラス：秒針

CSS

こちらがスタイルの設定です。

@charset "utf-8";

.wrapper {
    width: 100%;
    padding: 40px;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    flex-direction: column;
}

.clock {
    background-color: rgba(255, 243, 217, 0.2);
    border: 3px solid #C6A35B;
    width: 400px;
    height: 400px;
    position: relative;
    border-radius: 50%;
}

.clock::after {
    width: 16px;
    height: 16px;
    background: #C6A35B;
    content: "";

    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 8px);
    border-radius: 50%;
}

.line {
    position: absolute;
    transform-origin: bottom;
}

.hour {
    width: 8px;
    height: 140px;
    background: #C6A35B;
    top: calc(50% - 140px);
    left: calc(50% - 4px);
}

.min {
    width: 4px;
    height: 180px;
    background: #C6A35B;
    top: calc(50% - 180px);
    left: calc(50% - 2px);
}

.sec {
    width: 1px;
    height: 180px;
    background: #D4BB92;
    top: calc(50% - 180px);
    left: calc(50% - 0.5px);
}

.scale {
    position: relative;
    width: 100%;
    height: 100%;
}

.scale > div {
    position: absolute;
    top: 0;
    left: calc(50% - 2px);
    width: 4px;
    height: 50%;
    transform-origin: bottom;
}

.scale > div::after {
    position: absolute;
    top: 0;
    content: "";
    width: 4px;
    height: 12px;
    background-color: #C6A35B;
}

JavaScript

JavaScriptで針の動きと、時計のメモリを設定しています。

・setIntervalは1秒ごとなので1000でも良いですが、起動後に1秒待つ必要があるため、100で設定しています。
・針やメモリはstyle.transformでrotateを指定して角度を設定しています。
・window.onloadの関数内では、scaleクラスの要素の最後にdiv要素を追加しています。

setInterval(function () {
    // 時間を取得
    var now = new Date();

    // 針の角度
    var deg_h = now.getHours() * (360 / 12) + now.getMinutes() * (360 / 12 / 60);
    var deg_m = now.getMinutes() * (360 / 60);
    var deg_s = now.getSeconds() * (360 / 60);

    // それぞれの針に角度を設定
    document.querySelector(".hour").style.transform = `rotate(${deg_h}deg)`;
    document.querySelector(".min").style.transform = `rotate(${deg_m}deg)`;
    document.querySelector(".sec").style.transform = `rotate(${deg_s}deg)`;
}, 100);

window.onload = function () {
    // メモリを追加
    for (let i = 1; i <= 12; i++) {
        // scaleクラスの要素の最後にdiv要素を追加
        let scaleElem = document.querySelector(".scale");
        let addElem = document.createElement("div");
        scaleElem.appendChild(addElem);

        // 角度をつける
        document.querySelector(".scale div:nth-child(" + i + ")").style.transform = `rotate(${i * 30}deg)`;
    }
}

デモ

デモページはこちらです。
実際の時刻に合わせて時計が動いているのが分かります。

まとめ

いかがでしたでしょうか。
今回はJavaScriptでアナログ時計を作成してみました。

Dateオブジェクト以外にも、CSSのtransformの使い方やJavaScriptで要素内に要素を追加する方法も中で行っているので、ぜひ試してみてください。

投稿【JavaScript】アナログ時計の作り方【サンプル】は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

＜input type=”file”＞で読み込んだ画像を表示させよう【JavaScript】

nyan2222 — Fri, 05 Jun 2020 09:00:00 +0000

前回は、＜input type = “file”＞で選択するボタンの装飾について説明しました。
詳しくは、こちらをご覧ください。

ファイルを選択するボタンの画像やスタイルを設定する方法＜input type="file"＞

input要素において、「確認する」ボタンをでsrc属性に画像のパスを設定すると、「確認する」ボタンを画像に設定することができます。しかし、ファイルを選択するinput要素では、既にtype = "file"が設定されているため、少し工夫が必要になります！今回は選択ボタンの画像やスタイルの変更をいく...

今回はinput要素で読み込んだ画像を表示させてみようと思います。
それでは、img要素とdiv要素それぞれのパターンでみていきましょう。

【サンプル1】img要素に出力
【サンプル2】div要素に出力
デモ
まとめ

【サンプル1】img要素に出力

まずは、img要素に出力してみます。
input要素、type=”file”では、ファイルを選択後、onchangeのイベントが呼ばれます。
JavaScriptでは、on(“change”, function())関数です。

HTMLではinput要素とimg要素を宣言します。

JavaScriptに1～4の内容を記述します。

1. ファイル選択後に呼ばれるイベントを記述
2. イベント内で画像ファイルの読み込みクラスを設定
3. 読み込みクラスの準備が終わったらimg要素のsrc属性に画像ファイルの情報を設定
4. 読み込んだ画像ファイルをURLに変換

// 1. ファイル選択後に呼ばれるイベント
$("#input1").on("change", function (e) {

    // 2. 画像ファイルの読み込みクラス
    var reader = new FileReader();

    // 3. 準備が終わったら、id=sample1のsrc属性に選択した画像ファイルの情報を設定
    reader.onload = function (e) {
        $("#sample1").attr("src", e.target.result);
    }

    // 4. 読み込んだ画像ファイルをURLに変換
    reader.readAsDataURL(e.target.files[0]);
});

【サンプル2】div要素に出力

次はdiv要素に画像ファイルを出力してみます。
JavaScriptの記述方法も変えてみました。

先ほどと異なり、input要素のonchange属性にOutputImage関数を設定しています。

JavaScriptではサンプル1と同様、ファイル読み込みクラスを使用して、画像を表示させます。
サンプル1と異なるのはImageクラスを使って、heightとwidthの設定を追加しています。

1. input要素のonchange属性に関数を設定
2. イベント内で画像ファイルの読み込みクラスを設定
3. 読み込みクラスの準備が終わったら画像の情報を設定
4. Imageクラスに読み込んだ画像の情報を設定し、div要素に読み込んだ画像の縦・横のサイズを設定
5. backgroundスタイルを設定
6. 読み込んだ画像ファイルをURLに変換

// 1. onchange属性に設定した関数
function OutputImage(target)
{
    // 2. ファイル読み込みクラス
    var reader = new FileReader();

    // 3. 読み込みクラスの準備が終わった後、画像の情報を設定
    reader.onload = function () {
        $sample2 = $("#sample2");

        // 4. Imageクラスを使ってdiv要素に画像のheightとwidthのサイズを設定
        img = new Image();
        img.src = this.result;
        img.onload = function() {
            $sample2.css("width", img.naturalWidth);
            $sample2.css("height", img.naturalHeight);
        }
        // 5. backgroundスタイルを設定
        $sample2.css("background", "url(" + this.result + ") center center / contain no-repeat");
    }
    // 6. 読み込んだ画像ファイルをURLに変換
    reader.readAsDataURL(target.files[0]);
}

デモ

こちらがサンプル1とサンプル2のデモです。
内容は一緒ですが、出力方法や要素がimgかdivであることが異なります。

サンプル1

サンプル2

まとめ

今回はinput type=file要素で取得した画像ファイルを出力する方法を説明していきました。
divに関して、今回例で試してみただけなので、別の要素でも試してみてください。
次回は複数ファイルを読み込んで出力してみましょう。

本記事をご覧いただきありがとうございました。

投稿＜input type=”file”＞で読み込んだ画像を表示させよう【JavaScript】は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

ファイルを選択するボタンの画像やスタイルを設定する方法＜input type=”file”＞

nyan2222 — Wed, 03 Jun 2020 09:00:00 +0000

input要素において、「確認する」ボタンを＜input type = “image”＞でsrc属性に画像のパスを設定すると、「確認する」ボタンを画像に設定することができます。

しかし、ファイルを選択するinput要素では、既にtype = “file”が設定されているため、少し工夫が必要になります！
今回は選択ボタンの画像やスタイルの変更をいくつかの方法でご紹介します。

【サンプル1】ボタンを画像に設定する
ボタンのスタイルを変更
1. 【サンプル2】で囲んでスタイルを設定
2. 【サンプル3】CSSとJavaScriptを使ってスタイルを変更
デモ
まとめ

【サンプル1】ボタンを画像に設定する

ボタンを画像にする方法について、
HTMLでは、input要素をlabel要素で囲みます。

CSSでlabel要素に画像を設定します。
他にもサイズやポインタなど、スタイルを変更しておきましょう。

デフォルトでinput要素はボタンが出力されるので、display: none; で表示を消しておきます。

また、hoverの疑似クラスで別の画像を設定しておくと、少し動きが出ますね。

#sample1 {
    // サイズを設定
    height: 54px;
    width: 150px;

    // ボタンにする画像を設定
    background: url(../img/sample1.png) center center / contain no-repeat;

    // インラインボックスに設定
    display: inline-block;
    // マウスカーソルを当てた時、ポインタに設定
    cursor: pointer;
}

#sample1:hover {
    background: url(../img/sample1_hover.png) center center / contain no-repeat;
}

#sample1 input{
    // デフォルトのinputは出力なし
    display: none;
}

また、今回はサンプルなので簡単な画像なのですが、
この程度の画像の動きであればスタイルでも実現可能です。

ボタンのスタイルを変更

【サンプル2】で囲んでスタイルを設定

先ほどの画像の設定と同様にinput要素をlabel要素で囲みます。

続いて、今度はlabel要素をCSSで設定していきます。

#sample2 {
  position: relative;
  display: inline-block;
  padding: 0.25em 0.5em;
  text-decoration: none;
  background: #00BCD4;/*背景色*/
  color: #00BCD4;/*=背景色*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2);
  border-bottom: solid 2px #118e9e;
  border-radius: 4px;
  font-weight: bold;
  text-shadow: -1px -1px rgba(255, 255, 255, 0.44), 1px 1px rgba(0, 0, 0, 0.38);
  cursor: pointer;
}

#sample2:active {
  /*押したとき*/
  border-bottom: solid 2px #00BCD4;
  box-shadow: none;
  text-shadow: -1px -1px rgba(255, 255, 255, 0.3), 1px 1px rgba(0, 0, 0, 0.3);
}

#sample2 input{
    // デフォルトのinputは出力なし
    display: none;
}

【サンプル3】CSSとJavaScriptを使ってスタイルを変更

次はdiv要素でボタンを作成し、CSSで装飾を付けます。
input要素はサンプル2と同様、出力しないようにします。

ファイルを選択

#sample3 {
    position: relative;
    display: inline-block;
    padding: 0.75em 1.25em;
    text-decoration: none;
    color: #FFF;
    background: #03A9F4;/*色*/
    border: solid 1px #0f9ada;/*線色*/
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
    cursor: pointer;
}

#sample3:active {
    border: solid 1px #03A9F4;
    box-shadow: none;
    text-shadow: none;
}

#sample3 input{
    // デフォルトのinputは出力なし
    display: none;
}

JavaScriptでdiv要素をクリックしたときに、input要素をクリックしたイベントを呼び出します。
今回はJQueryで記述しています。

$(function () {
    $('#sample3').click(function() {
        $('#sample3_input').trigger('click');
    });
});

デモ

今までのサンプルそれぞれのデモです。
ボタンをクリックするとダイアログが表示されますが、ファイルを選択しても何も起こりません。

デフォルト

サンプル1

サンプル2

ファイルを選択

サンプル3

ファイルを選択

まとめ

今回はinput要素でファイル選択ボタンのスタイルを変更や、画像の設定を行いました。

ぜひ色々試してみてくださいね！

投稿ファイルを選択するボタンの画像やスタイルを設定する方法＜input type=”file”＞は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

【JavaScript】非同期処理と処理の順番について【初心者・入門】

nyan2222 — Tue, 02 Jun 2020 09:00:00 +0000

JavaScriptは同期的でシングルスレッドの処理で実行されていますが、非同期処理が可能な言語です。
ここでは、非同期処理と同期処理・スレッドについてまず説明し、その後処理の順番について説明していきます。

同期処理と非同期処理
1. 同期処理
2. 非同期処理
スレッドについて
処理の順番
まとめ

同期処理と非同期処理

同期処理

同期処理はプログラムの記述順に1つずつ実行されます。
そのため、次の処理は前の処理が終わらないと実行することができません。

非同期処理

非同期処理は同期処理と異なり処理が実行する準備をしている空き時間の間に、別の処理を実行することができます。

この説明だけだと、非同期処理は並列で色んな処理ができるってこと？と思うかもしれません。

答えは　「No」　です。

あくまで、準備している空き時間を活用しているだけなので、並列で複数の処理ができるわけではありません。
並列処理を行うためにはマルチスレッドで処理を実行する必要がありますが、JavaScriptはシングルスレッドで動きますので、並列処理ではなく、並行処理と言えます。

並列処理と並行処理の違いはこちらです。

並列処理
物理的に複数の処理を同時に実行することができる
並行処理
常に1つの処理のみ実行しているが、タイミングを見計らって処理を切り替えて処理を効率よく実行する
同時に実行しているように見せかけている

スレッドについて

先ほどシングルスレッドとマルチスレッドについて話が出てきましたが、スレッドとは何でしょうか。

スレッドとは、1つ1つ実行する処理を表します。

シングルスレッドはその名の通り1つの処理を実行することができます。

対し、マルチスレッドは複数の処理を実行することができます。

これを先ほどの並列処理と並行処理に当てはめると、このようになります。

並列処理・・・マルチスレッドで実行
並行処理・・・シングルスレッドで実行

JavaScriptはシングルスレッドのため、並行処理をしていることになりますね。

処理の順番

さて先述のようにJavaScriptはシングルスレッドであることが理解できましたが、並行処理をしているということは、処理の順番が入れ替わってしまうことがあります。

JavaScriptは上から順番でキューに関数を登録し、処理しています。
しかし、処理が同期的なものと非同期的なものによって、順番が入れ替わることがあります。

＜上から順番に処理する＞

console.log("one");
console.log("two");
console.log("three");

実行結果

one
two
three

＜順番が入れ替わっている＞

console.log("one");
setTimeout(function(){console.log("two")}, 0);
console.log("three");

実行結果

one
three
two

順番が入れ替わっているパターンでは「setTimeout」関数のタイマーを0ミリ秒で設定しています。
ここで不思議なのは、タイマーは0ミリ秒…つまり待ち時間なしで実行するように記述されていますが、実際の実行結果はone→three→twoと2行目と3行目の順番が入れ替わっています。

キューに登録されているのは、
　1. ログ表示　”one”
　2. タイマー登録　0ミリ秒
　3. ログ表示　”three”
この3つの処理になります。
つまり、この時点では、「ログ表示　”two”」はキューにまだ登録されていないのです。

では、いつ「ログ表示　”two”」はキューに登録されるのか？

それは、同期処理が全て終わってからです。

なので、キューの登録の順番は、
同期処理
　1. ログ表示　”one”
　2. タイマー登録　0ミリ秒
　3. ログ表示　”three”
同期処理の登録完了後、非同期処理
　4.ログ表示　”two”
となります。

だから先ほどの実行結果のように、順番が入れ替わります。

まとめ

今回はJavaScriptの非同期処理と同期処理、処理の順番について、説明していきました。
JavaScriptで開発するためには、このあたりをまず始めに理解しておきたいところですね！

非同期処理を同期的に処理する方法については、
別の記事にしたいと思います。
ご覧いただき、ありがとうございました。

投稿【JavaScript】非同期処理と処理の順番について【初心者・入門】は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

【Bingo Game】JavaScriptでビンゴカードの作り方【サンプル】

nyan2222 — Sun, 31 May 2020 09:00:00 +0000

こんにちは。今回はJavaScriptを使ってビンゴカードを作成してみました。Jqueryも使用していますので、ご注意ください。

HTMLの設定
CSSの設定
JavaScript
デモ
まとめ

HTMLの設定

まずは、枠作りのHTMLからです。

ビンゴカードの枠と作成用のボタンを設定しています。

CSSの設定

ビンゴカードと作成ボタンのスタイルを設定しています。

/* カード全体のスタイル */
#bingo{
    width: 340px;
    margin: 0 auto;
}

/* B I N G Oと番号のスタイル */
#bingo th,
#bingo td {
    text-align: center;
    font-weight: normal;
}

/* B I N G O の文字のスタイル */
#bingo th{
    color: #B78D4A;
}

/* 番号のスタイルを設定 */
#bingo td {
    width: 60px;
    height: 55px;
    text-align: center;
    vertical-align: middle;
    
    border-radius: 1.5rem 1.5rem 0 0;
    color: #fff;
    background-color: #B78D4A;
    border: 2px solid #B78D4A;
}

/* 番号をチェックした時に変更するクラス、スタイルを設定 */
#bingo td.check {
    color: #B78D4A;
    background-color: #F0F0F0;
}

/* 番号をマウスオーバーした時にポインタを指矢印に変更 */
#bingo td:hover {
    cursor: pointer;
    cursor: hand;
}

/* 作成ボタンのスタイル */
p#button{
    text-align: center;
}

JavaScript

JavaScriptでカードの番号をランダムに設定する動きと、
番号をクリックした際にスタイルを変更するクラスをつけ外ししています。

$(function () {
    var make_col = function (base) {
        var arr = [];
        for(var i=0; i<15; i++) {
            arr.add(i);
        }
        var list = [];
        for (var i = 1; i <= 5; i++) {
            // ランダムで値を取得
            var a = parseInt(Math.random() * arr.length);
            list.push(arr[a] + base);
            // 数字を重複させないため、元々のリストから値を削除する
            arr.splice(a, 1);
        }
        return list;
    };

    var make_table = function () {
        // B列、I列...とそれぞれで5つの数字をランダムで取得
        var col_b = make_col(1);
        var col_i = make_col(16);
        var col_n = make_col(31);
        var col_g = make_col(46);
        var col_o = make_col(61);
        
        // 25個分の数字を格納できるtableに取ってきた列の数字を設定
        var list = new Array(25);
        for (var i = 0; i < 5; i++) {
            list[i * 5 + 0] = col_b[i];
            list[i * 5 + 1] = col_i[i];
            list[i * 5 + 2] = col_n[i];
            list[i * 5 + 3] = col_g[i];
            list[i * 5 + 4] = col_o[i];
        }
        // 中心はfreeで固定
        list[12] = 'free';
        return list;
    };
    
    // カード作成関数
    var create_card = function () {
        // 取ってきた数字が入ったtableをhtmlに出力する
        var table = make_table();
        for (var i = 0; i < table.length; i++) {
            $('#bi' + i).text(table[i]);
        }
    };

    // 初期化関数
    var init = function () {
        create_card();
        
        // チェック状態を外す
        $('#bingo td').each(function () {
            $(this).removeClass('check');
        });
    };
    
    // 初期
    init();
    
    // カード作成 ボタンをクリックすると、初期化
    $('#bingo-create').click(function () {
        init();
    });
    
    // 番号をクリックすると、スタイルを変更するクラスをつけ外しできる
    $('#bingo td').click(function (){
        $(this).toggleClass('check');
    });
});

デモ

こちらが作成したビンゴカードです。

デモページはこちら

番号をクリックすると見た目が変更されます。
（押し間違い対策でもう一度番号をクリックすると元に戻ります。）
カードをリセットしたい場合は、「カード変更」ボタンをクリックすると、初期化されます。

まとめ

今回はJavaScriptを使って、ビンゴカードを作成してみました。
列がそろったらBINGO！の表示を追加するのも面白いですね！
近いうちに試してみたいと思います。

次回の記事も良かったらご覧ください。

【Bingo Game】JavaScriptでビンゴゲームの作り方【サンプル】

JSでビンゴマシンを作成してみましたのでサンプルコードをご紹介します。簡単にできて解説もついて分かりやすくしています。ビンゴカード作成の記事もありますので、良かったら見てみてください♪

投稿【Bingo Game】JavaScriptでビンゴカードの作り方【サンプル】は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

【CSS】object-fit,object-positionのIE対応【object-fit-images】

nyan2222 — Wed, 27 May 2020 09:00:00 +0000

前回まで、CSSのobject-fit、object-positionプロパティの使い方をご紹介しました。

【CSS】object-fitの使い方【img要素の縦横比固定方法】

CSSに「object-fit」プロパティで「cover」を設定することにより、画像の縦横比を固定したまま指定サイズで画像を配置する方法を紹介します。他にも「object-fit」プロパティにてどのように配置するか設定することも可能。コピペで試せるサンプル付きなので、勉強にもどうぞ♪

【CSS】object-positionの使い方【img要素の画像配置設定】

img要素などの置換要素に対して、コンテンツをどこに配置するかを設定する「object-position」プロパティを詳しく紹介します。コピペで試せるサンプル付きなので、勉強にもどうぞ♪

ただし、前回までの記事でも記載したように、このプロパティはIEには対応しておらず、別途対応する必要があります。
今回はIEに対応させるobject-fit-imagesを使用して、object-fit、object-positionプロパティを有効にできる方法を紹介していきます。

object-fit-imagesライブラリを有効にする
1. CDNを貼り付ける
2. ダウンロードしたファイルを読み込む
img要素にクラスを追加
CSSに”font-family”プロパティを設定
JavaScriptの記述を追加
処理結果
まとめ

object-fit-imagesライブラリを有効にする

まずは、object-fit-imagesライブラリを有効にしていきます。
方法は2つあり、
1つはCDNを読み込む方法。
もう1つはダウンロードしたファイルを読み込む方法。です。

CDNを貼り付ける

CDNとは、「Content Delivery Network」の頭文字を取った略称で、「コンテンツ配信ネットワーク」を指します。
簡単に言うと、ネットワーク上に配置されているファイルにアクセスできる仕組みのことです。
この仕組みを使うとサーバの負荷を一部肩代わりしてくれるようになるため、レスポンスが早くなると言われています。

htmlにscript要素を使って、CDNを読み込ませます。

ダウンロードしたファイルを読み込む

こちらのサイトから「Clone or download」をクリックしてダウンロードしてください。
https://github.com/bfred-it/object-fit-images

ダウンロードしたファイルの中から「ofi.js」ファイルを読み込む設定をhtmlのscript要素で設定します。

img要素にクラスを追加

object-fit、object-positionプロパティを使用するimg要素にクラスを追加します。
クラス名は任意で問題ないので、既にクラスを指定している場合はそのクラスを使っても大丈夫です。

CSSに”font-family”プロパティを設定

2～5行目まではimgのサイズ設定と処理結果が分かりやすいように、背景色と境界線を設定しています。

7、8行目：object-fit、object-positionプロパティを設定しています。
10行目：IE用に「font-family」プロパティを設定します。値は7、8行目で設定した値と同じ値を設定します。

object-image{
    width: 400px;
    height: 300px;
    background-color: #999;
    border: 1px solid #666;

    object-fit: none;
    object-position: right;
    // IEのブラウザに対応
    font-family: 'object-fit: none; object-position: right;';
}

10行目があれば、7、8行目は不要なのかも？と思い、試してみましたが、object-fit、object-positionが反映されなかったので、別々に記述が必要みたいです。

JavaScriptの記述を追加

htmlファイル内のの直前にscript要素を追加し、objectFitImages関数を呼び出します。

全てのimg要素に対応させる場合は引数なし。
任意のクラスに画像を対応させたい場合は引数に「img.クラス名」を設定します。
※ クラス名のみでは、反映されないので、注意してください。

// 全てのimg要素に対応


// 指定のimg要素のクラスに対応

処理結果

ここまで設定が終わりましたら、処理結果を見てみましょう。
このページをIEで開き、対応前と比較して対応後ではobject-fitが効いていることを確認してみてください。
他のブラウザでは対応前と対応後では一緒の動きをしています。

object-fit-images対応前

object-fit-images対応後

まとめ

いかがでしたでしょうか。
今回は「object-fit-imagesライブラリ」を使って、IEのブラウザにobject-fitを対応させてみました。
~~まだまだIEのブラウザは使用されているので、対応させて損はないと思います。~~
※ 2022年6月15日でサポート終了予定

4つの簡単なステップで対応ができるので、良かったら試してみてください。

今回の記事が何かの参考になれば幸いです。
ご来訪ありがとうございました。それでは♪

投稿【CSS】object-fit,object-positionのIE対応【object-fit-images】は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

【CSS】object-positionの使い方【img要素の画像配置設定】

nyan2222 — Tue, 26 May 2020 09:00:00 +0000

前回はCSSで「object-fit」プロパティを使って、img要素などの置換要素に対してコンテンツをどのようにはめ込むかを設定しました。
よければこちらの記事もご覧になってください。

【CSS】object-fitの使い方【img要素の縦横比固定方法】

今回は置換要素に対して、コンテンツをどこに配置するかを設定する「object-position」プロパティを詳しく紹介していきたいと思います。

object-positionプロパティ
値の設定について
サンプル
まとめ

object-positionプロパティ

このプロパティは「iframe」、「video」、「img」など要素の中身（コンテンツ）を要素のどこに配置するか設定します。

先ほども説明あったようにコンテンツをどのようにはめ込むかは「object-fit」プロパティを設定します。

値の設定について

値はこのように設定することができます。
object-fit: [左右] [上下]
初期値は真ん中の“50% 50%”が設定されています。

[左右]：left、right、center
　　　もしくは　left、right + 数値（単位付）
　　　もしくは　数値（単位付）のみ
[上下]：top、bottom、center
　　　もしくは　top、bottom + 数値（単位付）
　　　もしくは　数値（単位付）のみ

※ デフォルトで50%がそれぞれ設定されているので、片方省略も可能
例：object-fit: right もしくは、object-fit: bottom など

設定値だけ見てもイメージが湧きにくいと思いますので、
次は実際にコードを記述して、結果を見てみましょう。

サンプル

それでは実際にソースコードを記述して配置を見てみましょう。
使用する画像はこちらです。

右中央に表示


中央下に表示


左上に表示


パーセント表記で設定（80%、20%）


パーセント表記で設定（右から80%、下から20%）


ピクセルで設定（50px、180px）

img{
    width: 400px;
    height: 300px;

    // imgのサイズを分かりやすくするため、background-color、
    // borderを設定し、object-fitはnoneを設定しています。
    background-color: #999;
    border: 1px solid #666;
    object-fit: none;
}

// 右中央
.right-center{
    object-position: right;
}

// 中央下
.center-bottom{
    object-position: bottom;
}

// 左上
.left-top{
    object-position: left top;
}

// パーセントで値を設定（80%, 20%）
.set-percentage1{
    object-position: 80% 20%;
}

// パーセントで値を設定（右から80%、下から20%）
.set-percentage2{
    object-position: right 80% bottom 20%;
}

// ピクセルで値を設定（50px, 180px）
.set-pixel{
    object-position: 50px 180px;
}

結果がこちらです。

右中央に表示

中央下に表示

左上に表示

パーセント表記で設定（80%、20%）

パーセント表記で設定（右から80%、下から20%）

ピクセルで設定（50px、180px）

最後の結果についてですが、img要素からはみ出ている部分は出力されていないことが分かります。
つまりimg要素の中で画像を配置しているので、img要素からはみ出ている赤枠部分は表示されず、トリミングされています。

まとめ

今回は「object-position」プロパティをご紹介しました。
前回紹介した「object-fit」プロパティと合わせて使いこなしていきたいですね！

ただし、「object-fit」プロパティと同様IEにはどのバージョンでも現時点（2020年5月）では対応できていませんので、別途IE対応が必要なのは一緒ですね。
IE対応する方法として「object-fit-images」について以下の記事で紹介していますので、宜しければご覧ください♪

【CSS】object-fit,object-positionのIE対応【object-fit-images】

CSSのobject-fit、object-positionプロパティはIEに対応していません。なので、object-fit-imagesを使用して、IEに対応させる方法を紹介します！　object-fit、object-positionの使い方については前記事で触れていますので、良かったら一緒にどうぞ♪

投稿【CSS】object-positionの使い方【img要素の画像配置設定】は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

【CSS】object-fitの使い方【img要素の縦横比固定方法】

nyan2222 — Sun, 24 May 2020 09:09:11 +0000

画像の縦横比を固定する方法で、cssに「object-fit」プロパティで「cover」を設定することにより、画像の縦横比を固定したまま指定のサイズで画像を配置することができます。
他にも「object-fit」プロパティを使うことで、どのように配置するか設定することができます。

今回は「object-fit」プロパティの使い方と設定値の内容を詳しく紹介していきたいと思います。

object-fitプロパティ
値の設定について
サンプル
まとめ

object-fitプロパティ

このプロパティは置換要素である、「iframe」、「video」、「img」など要素の中身（コンテンツ）をどのようにはめ込むかを設定します。

また、コンテンツをどのように配置するかは「object-position」プロパティを使用します。

値の設定について

object-fitプロパティは複数の値を設定することができます。
設定の内容を表にまとめてみました。
要素=img、コンテンツ=画像を見立てると、分かりやすいと思います。

値	説明
contain	コンテンツはアスペクト比が固定されたまま、要素のサイズに収まるように表示されます。要素とコンテンツのアスペクト比が合わない場合、要素の一部分がレターボックス表示になります。※ 要は何も表示されません。
cover	コンテンツはアスペクト比が固定されたまま、要素のサイズに収まるように表示されます。要素とコンテンツのアスペクト比が合わない場合、コンテンツが合わせるようにトリミングされます。
fill	コンテンツが要素を満たして表示されます。要素とコンテンツのアスペクト比が合わない場合、要素の大きさに合わせてコンテンツが引き延ばされます。
none	コンテンツは拡大も縮小もされず、そのまま表示されます。
scale-down	コンテンツは「none」または「contain」どちらかを指定した状態で、コンテンツが要素よりも小さい場合は「none」として表示されます。

サンプル

それでは実際に試してみましょう。
使用するのは、こちらの画像です。

さっそく、HTMLとCSSを設定してみましょう。

cover


contain


fill


none


scale-down

img{
    width: 180px;
    height: 60px;

    // 左端に寄せてサイズを見やすくしたかったので、設定
    object-position: left;

    // imgのサイズを分かりやすくするため、background-colorを設定
    background-color: #999;
}

.cover {
    object-fit: cover;
}

.contain {
    object-fit: contain;
}

.fill {
    object-fit: fill;
}

.none {
    object-fit: none;
}

.scale-down {
    object-fit: scale-down;
}

結果がこちらです。

cover
縦横比そのまま、画像の上下トリミング

contain
縦横比そのまま、要素の右側が空いた状態

fill
画像全体をimg要素のサイズに合わせて表示。
画像が押しつぶされたような見た目。

none
画像をimg要素のサイズに合わせて一部分切り取っている。

scale-down
このサンプルでは、containが適用されています。

このように値「contain」「cover」「none」「scale-down」を使えばアスペクト比を変わらずコンテンツを設定することができます。
状況に応じて使ってみてください。

ただし、このプロパティは残念ながらIEには対応しておりません。
また、このプロパティを対応させるためには、cssかHTMLの属性でサイズを設定する必要があります。
object-fitプロパティが対応されていない！状況に陥りましたら、まずはサイズが設定されているかを確認してみてください。

まとめ

今回はobject-fitプロパティの使い方をご紹介しました。
要素のサイズさえ指定できれば値の設定も簡単なので、使いやすいかと思います。

ただ、先述しましたようにIEでは、現在（2020年5月）使用することができません。別途対策が必要になりますね！
IE対応する方法として「object-fit-images」について以下の記事で紹介していますので、宜しければご覧ください♪

【CSS】object-fit,object-positionのIE対応【object-fit-images】

【CSS】object-positionの使い方【img要素の画像配置設定】

また、こちらの記事も良かったら覗いてみてください♪

投稿【CSS】object-fitの使い方【img要素の縦横比固定方法】は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

【CSSで】スムーススクロールでふわっとページ移動してみよう

nyan2222 — Sat, 02 May 2020 04:00:00 +0000

こんにちは。前回はJQueryを使用してスムーススクロールをご紹介いたしました。以下リンク先です。

【JQuery】スムーススクロールでふわっとページ移動してみよう

スムーススクロールでふわっとページ移動してみませんか。こんにちは。JQueryを使用して簡単に出来るスムーススクロールをご紹介いたします。まずはHTMLでナビゲーションとセッションの形を作っていきます。...

今回はCSSのみでスムーススクロールを実装してみました。
早速ご紹介いたします。
HTMLとCSSは前回と同じコードを使用しています。

余談：ふと疑問になってスムーススクロールとスムーズスクロールどっちが正しいのかと疑問に思い調べてみましたが、どちらでも良いみたいですね。
英語でsmooth scroll、スムーズにスクロールするの意、それぞれあるようです。

CSSでHTMLにスムーススクロールを設定
対応ブラウザ
scroll-behaviorプロパティ

CSSでHTMLにスムーススクロールを設定

html要素に scroll-behavior: smooth; を指定することでページ内リンクにスムーススクロールの動きをつけることができます。

html{
  scroll-behavior: smooth;
}

この設定のみでスムーススクロールが表現できるなんてとても便利ですね！

対応ブラウザ

設定が簡単にできるので、多用してもいいかな。と思いますが、このようにIE・Safariには対応していないようです。
実際に業務で使用する場合は、対応ブラウザに注意して適用させる必要があります。
参考：MDN web docs ： CSS: カスケーディングスタイルシート

scroll-behaviorプロパティ

scroll-behaviorプロパティについて、指定した範囲内でスクロールが発生した際の振る舞いを指定できます。

＜キーワード＞
・auto（初期値） : リンク先に瞬時にスクロールします。
・smooth : 設定したセレクタの範囲内でページ内リンクによるスクロールが発生した場合、スムーススクロールでリンク先に移動します。

今回はCSSのみでスムーススクロールを実装してみました。
対応ブラウザは限定されますが、用途に応じて使ってみてください。

投稿【CSSで】スムーススクロールでふわっとページ移動してみようは nyanblog ~にゃんぶろぐ~ に最初に表示されました。

HTML/CSS アーカイブ - nyanblog ~にゃんぶろぐ~

Visual Studio Codeのインストールや日本語化設定

Visual Studio Code（VSCode）とは

Visual Studio Codeのインストール

Visual Studio Codeに拡張機能をインストール

【初心者】JavaScriptでTODOリスト作り方【サンプル】

はじめに

実装内容（フロー）

HTML

TODOリスト

CSS

JavaScript

コード

解説

・グローバル変数の定義・ページ読み込み後、変数にHTML要素を設定

・タスク追加

・完了ボタンクリック

・削除ボタンクリック

・チェックしたタスクを一括削除：deleteTask()

・タスク内にあるボタンを作成：createTaskButton(class_name, name)

デモ

【初心者】JavaScriptでストップウォッチの作り方

はじめに

実装内容（フロー）

HTML

CSS

JavaScript

コード

解説

・グローバル変数の定義

・ページ読み込み後、変数にHTML要素を設定

・スタートボタン押下時に呼ばれる関数：start()

・ストップボタン押下時に呼ばれる関数：stop()

・リセットボタン押下時に呼ばれる関数：reset()

・時間を計測する関数（再帰関数）：measureTime()

デモ

【初心者】JavaScriptでおみくじの作り方【サンプル】

ボタンを押しておみくじを表示

ソースコード

解説

おみくじの結果の確率を設定

ソースコード

解説

ボタンを押しておみくじルーレットを表示

ソースコード

HTML

JavaScript

解説

【JavaScript／JS】Canvasとは？【HTML5／使い方】

Canvasとは？

HTMLの設定

描画コンテキストの取得

四角形を描画

プロパティ

関数

実装

線（パス）を描画

関数

実装

円（円弧）の描画

関数

実装

まとめ

【JavaScript】Canvasで複数の画像を1つのimgタグで順番に出力してみよう【HTML5】

HTML

CSS

JavaScript

デモ

まとめ

【JavaScript】アナログ時計の作り方【サンプル】

HTML

CSS

JavaScript

デモ

まとめ

＜input type=”file”＞で読み込んだ画像を表示させよう【JavaScript】

【サンプル1】img要素に出力

【サンプル2】div要素に出力

デモ

まとめ