PDFを好きに分割したいなぁ…。と考えることがあり
今回はPowerShellとiTextSharpを使用して作ってみました。

ちなみにオンラインツールでAdobeやilovePDFでPDFカットというのがあるようですね！

コードを紹介する前に

みみねこ

itextsharpはライセンスが複雑になってきたそうで、取り扱いに注意する必要があるみたいです。
pdfsharpというのもあるみたいですね！

iTextSharpのライセンスについてはこちらを参考にしました。

みみねこ

今回は作ってみただけなのでこのままコードを紹介します！

フォルダ構成

フォルダ構成はこちらです。

注意点：事前にnewフォルダに同じPDFファイルがある場合は上書きされます。

■どこかのフォルダ
┣■new　… 無くても処理中に生成されます
┣・itextsharp.dll
┣・pdf_split.ps1
┗・分割したいPDFファイル

iTextSharpの準備

こちらのページからバージョンを選択します。
ページ下部の「+ Show more」をクリックするとさらにバージョンが出てきます。

NuGet Gallery | Package Downloads for iTextSharp

www.nuget.org

「Download package」からインストールしてください。

ファイルが「itextsharp.???.nupkg」でダウンロードされますが、zipファイルなので解凍してください。

出来ない場合はitextsharp.???.nupkgをitextsharp.???.zipに名前を変更すると右クリックでも解凍できると思います。
※ ???はバージョンです。

「itextsharp.???\lib\itextsharp.dll」ファイルを使用するので、
powershellのファイルが置いてある場所にコピーしてください。

■どこかのフォルダ
┣■new　… 無くても処理中に生成されます
┣・itextsharp.dll
┣・pdf_split.ps1
┗・分割したいPDFファイル

■：フォルダ
・：ファイル

コード

以下がpdf_split.ps1のコードになります。
解説はコメントに記載しました。

※ $argsというのは引数が入った配列で$args[0]は第1引数になります。
この後実行する際に出てきます。

# 現在のディレクトリを取得
$currentDir = Get-Location
Set-Location $currentDir

# itextsharp.dllのロード
# 絶対パスを記載してください。
[System.Reflection.Assembly]::LoadFrom("C:\？？？\itextsharp.dll");

# 分割PDFの生成先フォルダパス
if(-! (Test-Path "./new")) {
    New-Item new -ItemType Directory
}
$destFolderPath = Join-Path $currentDir "new"

# inputのPDFパスを設定し、readerを生成
$srcPath = $args[0]
$pdfReader = New-Object iTextSharp.text.pdf.PdfReader($srcPath)

# ファイル名（拡張子なし）
$fileName = [System.IO.Path]::GetFileNameWithoutExtension($srcPath)

# ページ数取得し、ページ単位でfor文を回す
$pages = $pdfReader.NumberOfPages
for($page = 1; $page -le $pages; $page++) {

    # 出力する分割PDFのファイルパスを設定
    $destPath = Join-Path $destFolderPath ($fileName + "_" + $page + ".pdf")

    # ファイル生成に必要なオブジェクトを生成
    $fileStream = New-Object System.IO.FileStream($destPath, [System.IO.FileMode]::Create)
    $document = New-Object iTextSharp.text.Document($pdfReader.GetPageSize($page))
    $pdfWriter = [iTextSharp.text.pdf.PdfWriter]::GetInstance($document, $fileStream)

    # PDFファイルをオープンし、新規ページを作成
    $document.Open()
    $document.NewPage() | Out-Null

    # ページを読み込み、先ほど作成した新規ページに読み込んだページを書き込みます。
    $readPage = $pdfWriter.GetImportedPage($pdfReader, $page)
    $pdfWriter.DirectContent.AddTemplate($readPage, 0, 0)

    # reader以外のオブジェクトをクローズ
    $document.Close()
    $fileStream.Close()
    $pdfWriter.Close()
}
# 全てのページの処理が完了後readerをクローズ
$pdfReader.Close()

実行

Windows Powershellを起動します。

実行コマンド

cdコマンドでカレントディレクトリを変更

cd ps1ファイルがあるディレクトリ

pdfファイルの絶対パスを引数にpdf_split.ps1を実行

./pdf_split.ps1 "pdfファイルの絶対パス"

これでnewフォルダに分割pdfができあがります！

フォルダ

補足

.Netがないと動かないかもしれませんので、その場合はインストールをお願いします。

投稿 【PowerShell】PDFを1ページずつ分ける方法【簡単】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

Dockerとは

Dockerはコンテナ仮想化を使ったアプリケーションを開発・配置・実行するためのオープンプラットフォームです。

みみねこ

詳しいことが知りたい方は色々調べてみてください♪
（気が向けば別記事で書きます）

Dockerをインストール

Dockerをインストールします。
以下のリンクからダウンロードしてインストールを行ってください。

Dockerのダウンロードはこちらから

コマンドプロンプトやVSCodeのターミナルなどで
バージョン確認のコマンドを実行し、インストールされていることを確認できます。

■コマンド – バージョン確認
docker -v

■コマンド結果
このようにバージョンが出てきたらOKです。

> docker -v 
Docker version 20.10.13, build a224086

ファイル構成

今回は以下のファイル構成で環境構築しています。
慣れたら自分の好きなファイル構成にしていただいて構いません。

□：ディレクトリ名
・：ファイル名

□app
├□docker
││
│├□mysql
││├□data
││└・Dockerfile
││
│└□php
│  └・Dockerfile
│
├□html
│└・index.php
│
└・docker-compose.yml

※1 mysql\dataディレクトリの中身は空で作成してください。

ファイル作成

各ファイルの内容を載せています。

docker-compose.yml ファイル

version: '3'
services:
  php:
    build:
      context: ./docker/php
      dockerfile: Dockerfile
    volumes:
      - ./src:/var/www/html
    ports:
      - 8080:80
    depends_on:
      - db

  db:
    build:
      context: ./docker/mysql
      dockerfile: Dockerfile
    volumes:
      - ./docker/mysql/data:/var/lib/mysql
    ports:
      - 3306:3306
    environment:
      - MYSQL_ROOT_PASSWORD=pass
      - MYSQL_DATABASE=app
      - MYSQL_USER=user
      - MYSQL_PASSWORD=root

ぱっと見分かる箇所は説明抜いてます。

volumes:
　右側：ローカル上のディレクトリパス（docker-compose.ymlからの相対パス）
　左側：永続化したいサーバーフォルダ

build:
　context：build実行パス
　dockerfile：Dockerファイル名

depends_on:
　db：dbコンテナを先に起動

コンテナ[php]：Dockerfile

FROM php:8.0-apache

RUN apt-get update && apt-get install -y libonig-dev && \
    docker-php-ext-install pdo_mysql mysqli

コンテナ[mysql]：Dockerfile

FROM mysql:8.0.20

index.php ファイル

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>環境構築</title>
</head>
<body>
    <p><?php print ("Hello World!");?></p>
</body>
</html>

localhostに接続して表示する内容を記載しています。

動作確認

localhostに接続

■コマンド – コンテナ起動
（-d）はバックグラウンドで実行

docker compose up -d

■ローカル環境にアクセス
http://localhost:8080

「Hello World!」と画面に表示

■コンテナ名を変更したとき
変更前のコンテナが残っているので、一度削除しておく
※ 削除せずにコンテナ起動すると警告が出る

docker compose down --remove-orphans

コンテナ内に入ってphp実行確認

phpコンテナに入ってphpファイルを実行確認する場合

■phpコンテナに入る
docker compose exec php bash

■phpファイル実行
php index.php

ファイルを実行します。
[index.php]ファイルの中身を
[echo Hello World!]だけにした方が分かりやすいかもしれません。

■bash終了
exit

MySQL接続、SQL実行

■MySQLコンテナでMySQL接続
docker compose exec db mysql -u root -ppass

みみねこ

db[コンテナ名]
pass[MYSQL_ROOT_PASSWORD]
は[docker-compose.yml]で設定した値です。

> docker compose exec db mysql -u root -ppass
Welcome to the MySQL monitor.  Commands end with ; or \g.
・・・
mysql>

上記のように
mysql>とSQLが入力できる状態であればOKです。

SHOW DATABASES;
などSQL文を実行して試してみてください。

これで環境構築は完了です。

これから色々試してみる予定なので、
phpのiniファイルを追加したりcnfファイルを追加した
よかったら参考にしてみてください。

みみねこ

いやぁ…。色々はまりました。
はまった点を記載すべきなのですが、開発環境も異なるため解決方法も異なる可能性が高く一つ一つネットで調べるのが速いと思います。

投稿 【簡単】DockerでPHPとMySQLの環境構築【コンテナ仮想化】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

本記事では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つです。

他のサイトでよくインストール作業の内容に関して、環境変数に設定する内容が記載されていますが、ここで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リストを作成しました。

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

はじめに

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

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

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

実装内容（フロー）

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

みみねこ

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

HTML

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

<body>
  <div class="wrapper">
    <h1 id="header">TODOリスト</h1>
    <div id="input-wrap">
      <input id="task-name" type="text" placeholder="タスク名を入力してください" />
      <button onclick="addTask()">タスクを追加</button>
      <button class="deleteTask-button" onclick="deleteTask()">チェックしたタスクを削除</button>
    </div>
    <div id="main-wrap">
      <form name="task_form">
        <ul id="todo-list"></ul>
      </form>
    </div>
  </div>
</body>

「タスクを追加」ボタンにクリックイベント”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');
}

ページ読み込み後に<ul>のid’todo-list’を取得し、変数todoListに設定しています。

・タスク追加

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');

タスク名を入力する<input>の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);

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

・チェックボックス
・タスク名
・完了ボタン
・削除ボタン

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

作成した<li>を<ul>に追加します。

taskName.value = "";

入力欄をリセットするため、空文字（””）を設定します。

・完了ボタンクリック

endButton.addEventListener('click', function(e){
  e.preventDefault();
  this.setAttribute('class', 'end-button disabled');
  this.previousElementSibling.setAttribute('class', 'line-through');
});

各タスクの「完了」ボタンを実装します。

e.preventDefault();

こちらの関数はイベントのデフォルト動作をキャンセルします。

this.setAttribute('class', 'end-button disabled');

end_button[完了ボタン]にclass属性’end-button disabled‘を設定します。
disabledクラスはボタンを非活性するスタイルを設定します。

thisはendButtonを指します。

this.previousElementSibling.setAttribute('class', 'line-through');

タスク名<p>に取消線のクラス‘line-through’を設定します。

previousElementSibling：一つ前の要素。endButton[完了ボタン]の一つ前の要素<p>を指します。

・削除ボタンクリック

deleteButton.addEventListener('click', function(e){
  e.preventDefault();
  todoList.removeChild(this.closest('li'));
});

各タスクの「削除」ボタンを実装します。
※ e.preventDefault();は先ほど出てきたので省略

todo_list.removeChild(this.closest('li'));

タスクを削除します。

removeChild()：<ul>（todoList）の子要素を削除します。
this.closest(‘li’)：クリックしたボタンthis(deleteButton)の直近に存在する親要素、もしくは要素自身を返します。

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

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'));
    }
  }
}

「チェックしたタスクを削除」ボタン押下時に呼ばれる関数“deleteTask()”を作成します。
チェックしたタスクを一度に削除する処理を行います。

var inputList = document.task_form.task;

<form name=”task_form”>の中の<input name=”task”>を一覧で取得して変数inputListに設定しています。

“task_form”と”task”はname属性で指定した値です。

みみねこ

htmlファイルと見比べながら確認すると分かりやすいです。

// ①
for(var i=inputList.length-1;i>=0;i--) {
  // ②
  if(inputList[i].checked){
    // ③
    todo_list.removeChild(inputList[i].closest('li'));
  }
}

チェックしたタスク<li>を削除していきます。

①for文でinputListを後ろから一つずつ<input>を回し
②if文でチェックボックスでチェックしているか確認
※ チェックされているときはcheckedがtrue
③trueであればリスト（todoList）からliを削除
※ removeChildは「削除ボタンクリック」で開設済み

みみねこ

①で後ろからfor文を回している理由は、回しながらliを削除しているので
添字が変わってしまうことにより、チェックしているタスクが全て削除されなくなるというのを防いでいます。
※ ★このあたりは文章だと分かりずらいので、今後時間があれば図にするかもしれません…。

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

function createTaskButton(className, name) {
  var btn = document.createElement('button');
  btn.setAttribute('class', className);
  btn.innerHTML = name;
  return btn;
}

タスクの「完了」「削除」ボタンを作成する関数です。

var btn = document.createElement('button');

<botton>の要素を作成します。

btn.setAttribute('class', className);
btn.innerHTML = name;

ボタンに属性classを設定、innerHTMLにボタンに表示する内容を設定します。

最後にボタン（要素）を返します。

デモ

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

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

投稿 【初心者】JavaScriptでTODOリスト作り方【サンプル】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

今更な内容にはなりますが…。

jQueryでは2から3にバージョンが上がった際、load関数が廃止されたためon関数を使用して対処するようになりました。

…が、それでも上手くできない…。となったときの備忘録です。
まずは、load関数からon関数に書き換える方法と、他、注意事項を載せています。

on関数に書き換え

イベント関連の処理clickイベント同様に、各関数（load、unload、error）での書き方は使用できなくなり、on関数での記述になりました。

■2.Xの書き方

$(window).load(function() {
  // ・・・処理
});

$(window).unload(function() {
  // ・・・処理
});

$(window).error(function() {
  // ・・・処理
});

■3.Xの書き方

$(window).on('load', function() {
  // ・・・処理
});

$(window).on('unload', function() {
  // ・・・処理
});

$(window).on('error', function() {
  // ・・・処理
});

注意事項

注意事項ですが、load処理を行う際に以下のように $(function () {}); で囲ってしまうとエラーが起こってしまうので注意してください。 

$(function () {}); は $(document).ready(function() {}); と同じ処理で、ready処理はload処理とは実行するタイミングが異なるため、エラーになってしまいます。

■書き方

$(function () {
  // ・・・処理1
});

$(window).on('load', function() {
  // ・・・処理2
});

■エラー

$(function () {
  // ・・・処理1

  $(window).on('load', function() {
    // ・・・処理2
  });
});

★readとloadの違いの記事を書くかもしれません。

投稿 【JS】jQueryでloadが効かない場合の対処法 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

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

はじめに

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

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

実装内容（フロー）

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

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

HTML

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

<body>
  <div class="wrapper">

    <!-- 計測時間を表示 -->
    <div id="time">00:00.000</div>
    <div>

      <!-- スタート・ストップ・リセットボタン -->
      <button id="start" onclick="start()">Start</button>
      <button id="stop" onclick="stop()" disabled>Stop</button>
      <button id="reset" onclick="reset()" disabled>Reset</button>
    </div>
  </div>
</body>

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でおみくじを作成しました。
三段階で作成してみましたので、初心者の方が勉強するのにおすすめですよ♪

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

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

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

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

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

ソースコード

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

<script>
  window.onload = function () {
    // おみくじ
    // この順番が良い順番らしい（吉と中吉が逆になることも）
    const list = ["大吉","吉","中吉","小吉","末吉","凶","大凶"];

    document.getElementById("button").onclick = function () {
      var random = Math.floor(Math.random() * list.length);
      document.getElementById("result").textContent = list[random];
    }
  }
</script>

<body>
  <div class="wrapper">
    <p>おみくじ<br>ボタンをクリックしてください。</p>
    <div class="wrapper-button">
      <button id="button" class="button">おみくじを引く</button>
    </div>
    <p id="result"></p>
  </div>
</body>

解説

HTML

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

JavaScript

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

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

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

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

ソースコード

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

<script>
  window.onload = function () {
    const list = {
      "大吉" : 10,
      "吉" : 15,
      "中吉" : 20,
      "小吉" : 25,
      "末吉" :15,
      "凶" : 10,
      "大凶" : 5,
    };

    document.getElementById("button").onclick = function () {
      var random = Math.floor(Math.random() * 100);
      var rate = 0;
      for(var data in list){
        rate += list[data];
        if(random <= rate){
          document.getElementById("result").textContent = data;
          return;
        }
      }
    }
  }
</script>

<body>
  <div class="wrapper">
    <p>おみくじ<br>ボタンをクリックしてください。</p>
    <div class="wrapper-button">
      <button id="button" class="button">おみくじを引く</button>
    </div>
    <p id="result"></p>
  </div>
</body>

解説

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

JavaScript

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

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

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

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

ソースコード

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

HTML

<body>
  <div class="wrapper">
    <p>おみくじ<br>ボタンをクリックしてください。</p>
    <div class="wrapper-button">
      <button id="button" class="button">START</button>
    </div>
    <div>
      <img id="img" src="img/muji.png" alt="">
    </div>
  </div>
</body>

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記事のまとめリンク集になります。

目次でカテゴリ分けをしているので、気になる内容がありましたら目次から飛んでみてください♪

文法

基本的な文法やJavaScriptで用意されている関数などの解説の記事です。

• 【var let const】変数、型の違い
• ＜input type=”file”＞で読み込んだ画像を表示
• ＜input type=”file”＞ファイルを選択するボタンの画像やスタイルを設定する方法
• 【console.log】デバッグ中に値を確認
• 【フォーマット文字列】console.logでデバッグ
• 【then/resolve/reject】Promiseの使い方
• 非同期処理と処理の順番について
• 遅延実行でイベントを発生させる方法

JavaScript サンプル

JavaScriptを使用したサンプルの一覧です。

• カレンダー作成
• 電卓の作り方
• おみくじの作り方
• 祝日対応のカレンダー作成
• ビンゴマシンの作り方
• ビンゴカードの作り方
• カウントダウンタイマーの作り方
• アナログ時計の作り方
• ストップウォッチの作り方

Vue.js サンプル

Vueの基本からVueを使用したサンプルの一覧です。

• vue.jsで電卓の作り方
• Vue.jsの基本（1）

Canvas

2Dの図形を描画するのに用いられるcanvasの使い方の一覧です。

• Canvasとは
• Canvasで複数の画像を1つのimgタグで順番に出力

JSON

さまざまなデータの集まりであるJSONの扱い方の一覧です。

• 【ajax/getJSON】JQueryでのJSON読み込み方法
• JSONデータの参照・追加（更新）・削除
• JSONとは？JS相互変換について(stringify/parse)
• JavaScriptのオブジェクトからJSONデータに変換
• JSONデータをJavaScriptのオブジェクトに変換

アニメーション サンプル

JavaScriptでCSSやプラグインを操作した、動きのあるサンプルの一覧です。

• スクロール中にヘッダーを固定する方法
• 文字をカーブ状に配置するプラグイン
• コピペでできるドロップダウンメニュー
• スムーススクロールでふわっとページ移動
• 水面の動きを表現したプラグインの使い方

IE対応

IE対応の一覧です。
※ 使うことはないかもしれませんが…。

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

投稿 【サンプル】JavaScriptのコードまとめリンク集 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

JavaScriptのオブジェクトからJSON文字列のデータに変換するには、JSON.stringify()関数を使用します。

本記事では基本的な使い方から、第2引数・第3引数の使用方法も含めてご紹介していきます！

構文

JSON.stringify(value[, replacer[, space]])

第1引数：JSONの文字列データに変換するオブジェクト
第2引数：関数か配列を指定してJSONの置き換えを行う
第3引数：可読性を上げるため、JSONデータの項目の前にスペース等を設定可

使い方

JSONの文字列データに変換

まずは第1引数だけ指定して、JavaScriptのオブジェクトをJSONデータに変換します。
オブジェクトでなくとも、値だけ引数を渡してもJSONデータに変換可能です。

// '{"a":10,"b":20,"c":30}'
console.log(JSON.stringify({a:10, b:20, c:30}));

// 1項目目と2項目目は異なる型
// '[true,"true"]'
console.log(JSON.stringify([new Boolean(true), new String('true')]));

// 値だけ
// "5"
console.log(JSON.stringify(5));

実行結果

以下のようにそれぞれJSONの文字列データとして出力されます。

'{"a":10,"b":20,"c":30}'
'[true,"true"]'
"5"

関数、または配列を指定して置き換え処理を実行

第2引数は関数か配列を指定できます。

・keyとvalueの引数を持つ関数を指定することで値を置き換えしたり、除外することができます。

・配列を指定すると、配列に指定されたkeyのみ含めたJSON文字列のみ値を返します。

function replacer(key, value){
  if(typeof value ==="string"){
      return undefined;
  }
  if(key === "c"){
      return value * 2;
  }
  return value;
}

// '{"a":10,"c":60}'
console.log(JSON.stringify({a:10, b:"test", c:30}, replacer));

// '{"b":"test","c":30}'
console.log(JSON.stringify({a:10, b:"test", c:30}, ["b", "c"]));

実行結果

1行目では「key:b」が除外され、「key:c」のvalueが2倍になっています。
2行目では「key:a」が除外されていることが分かりますね！

'{"a":10,"c":30}'
'{"b":"test","c":30}'

関数、または配列を指定して置き換え処理を実行

第3引数を指定することでJSONデータを成形する際のスペースや文字を入れることができます。
※ 指定することで強制的に改行が入るので改行コードは不要になります。

ただし、このスペースや文字列は10文字までしか設定できないため、文字列を10文字以上設定した場合は先頭から10文字分設定されます。

console.log(JSON.stringify({a:10, b:20, c:30},undefined,5));

// 11で設定しているが、スペースは10個までしか反映されない
console.log(JSON.stringify({a:10, b:20, c:30},undefined,11));

console.log(JSON.stringify({a:10, b:20, c:30},undefined,"\t"));

// 11文字設定しているが、10文字までしか反映されない
console.log(JSON.stringify({a:10, b:20, c:30},undefined,"12345678901"));

実行結果

'{
     "a": 10,
     "b": 20,
     "c": 30
}'
'{
          "a": 10,
          "b": 20,
          "c": 30
}'
'{
	"a": 10,
	"b": 20,
	"c": 30
}'
'{
1234567890"a": 10,
1234567890"b": 20,
1234567890"c": 30
}'

投稿 【サンプル】JavaScriptのオブジェクトからJSONデータに変換【JSON.stringify()】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

JSON文字列のデータからJavaScriptのオブジェクトに変換するには、JSON.parse()関数を使用します。

本記事では基本的な使い方から、第二引数の使用方法も含めてご紹介していきます！

構文

JSON.parse(text[, reviver])

第1引数：JSONデータ形式の文字列
第2引数：値を返す前に実行する関数（コールバック関数）

第2引数に関数を指定することで、事前にJSONデータに処理を行った状態でオブジェクトにすることができます。

使い方

JSONデータは文字列（string）型なので、JavaScriptで扱いやすいようにJSON.parse()関数でObjectに変換してから使用します。

JSONデータをJavaScriptのオブジェクトに変換

まずは第1引数だけ指定してJavaScriptのオブジェクトに変換します。

const data = '{"a":10, "b":20, "c":30 }';
const obj = JSON.parse(data);

// {a:10, b:20, c:30}
console.log(obj); 

// 20
console.log(obj.b);

実行結果

1行目はオブジェクト形式のデータが表示されます。

{a:10, b:20, c:30}
20

JSONデータからオブジェクトを返す前に処理を実行

次に第2引数を指定します。
keyとvalueの引数を持つ関数を設定し、関数の戻り値が新しくvalueに設定されます。

ここでの例ではkey=”a”, “b”, “c”、valueは10, 20, 30になり、
keyが”b”の場合のみ、valueを2倍にして返す関数を設定します。

const data = '{"a":10, "b":20, "c":30 }';
const obj = JSON.parse(data, function(key, value){
  if(key==="b"){
      return value * 2;
  }
  return value;
});

console.log(obj); 

実行結果でオブジェクトのbに40が設定されていることが確認できます。

{a:10, b:40, c:30}

投稿 【サンプル】JSONデータをJavaScriptのオブジェクトに変換【JSON.parse()】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

今回は、OfficeのExcel VBAで初心者でも簡単にマクロを作成する方法を紹介します。

Excelのマクロ（VBA）を使ったことがないし、当然プログラミングもしたことがない……
かといって１から勉強を始めるのもハードルが高いなぁ

みみねこ

「マクロの記録」機能で作成したコードを利用すれば、初心者でも簡単にマクロを作成できますよ♪

もちろんプログラミング要素が０とは言いませんが、
ほとんど知識なしでもできてしまう方法ですので、良かったらご参考にしてくださいね。

元となるExcelを作成

まずはマクロを付与する元となるExcelを作成しましょう。

例えば、「健康診断の日程」を社員の人数分印刷するケースです。

以下のように、
まずVLOOKUP関数を利用して「印刷No」を変更するだけで内容を変えられるようにします。
（VLOOKUP関数の使い方については以下を参照してください♪）

【EXCEL】VLOOKUPの使い方（1と0の違い、#N/Aエラー等）

ExcelのVLOOKUP関数について、基本的な使い方として第4引数が「0/FALSE（完全一致）」の場合や「1/TRUE（近似値）」の場合、「#N/A」エラーのIFERROR関数を使った対処方法、使用時の注意事項などサンプルを交えて紹介します♪

nyanblog2222.com

2022.07.18

さて、ここで一つ一つ「印刷No」に値を入れて印刷するを繰り返すのも面倒なので、
From～ToのNoの人へ一括して通知文を印刷したい！とします。

ここで登場するのが処理を自動化させるマクロです。次項から作成方法を説明していきます。

Excelをマクロ形式にする＆開発タブを追加する

前準備としてExcelをマクロ形式にしましょう。

名前を付けて保存する際に、「Excelマクロ有効ブック」を選択して保存します。
こうすることで、ファイルの拡張子が「.xlsm」となり、マクロを保存できるようになります。

次に、もしExcel上部に「開発タブ」が出ていなければ設定してあげましょう。
「開発タブ」からマクロの設定ができます。

「開発」にチェックを入れるとタブが現れます。

「マクロの記録」機能でベースコードを作成

前項までで事前準備もできたため、早速マクロを作成していきましょう。

ただ、いきなりVBAのコードエディタを開き、１からコードを作成……、
なんてことをしてしまうと一気に難易度が高くなってしまうため、
今回はマクロの元となるベースコードを作成するため、Excelの「マクロの記録」という機能を使用します。

「マクロの記録」とは、その名の通りExcelの操作を記録する機能です。

やり方は以下の通り、まず「マクロの記録」をクリックします。

適当にマクロ名を付けて保存します。
（プログラミング言語はアルファベットが基本なので、アルファベットで「動詞＋名詞」のような処理内容がわかる名前がおすすめです）

「OK」を押すと記録が始まるので、記録したい処理を手作業で行います。

今回のケースだと、以下を記録してみましょう。
１．G2の値を変える
２．印刷する

終わったら、記録終了します。

これで記録できました！
マクロボタンをおして、編集を押すと……。

このように、マクロのベースとなるコードができましたね♪

コードを見て、
・G2を選ぶ
・値（2）を入れる
・エンターを押したためG3が選ばれる
・印刷する

という処理内容になっていることがなんとなく分かれば、マクロ作成は難しくありません！
分からなくても、いくつかやっているとなんとなく分かってきますのでご安心を。

また、もし、同じ作業をするだけなら次項のコードの修正は不要なので飛ばしてくださいね♪

コードを適宜修正

前項にてベースコードができましたので、以下のとおり適宜修正していきます。

・G2を選ぶ　→　必要
・値（2）を入れる　→　値にFromToの内容を反映させれるようにする
・エンターを押したためG3が選ばれる　→　G3を選ぶ必要はないため不要
・印刷する　→　必要
◎上記をFromToの間だけ繰り返す！

ここでややこしいプログラミングの知識は一つだけで、「繰り返す」ということです。

繰り返すには「For～Next」というコードを使います。
このコードは、マクロを作るうえではとても重要なもので、
逆にこれだけ覚えていたら、簡易なマクロであればなんとなくの雰囲気だけで作れちゃったりします。

For start To end
     処理
Next

上記の通りstartからendまで、処理を繰り返します。
startの値は一度繰り返すごとに1ずつ増えていき、startの値は処理内で使用することができます。

では、実際に作ってみたコードがこちらです。

Sub PrintFromTo()
　→　マクロ名（関数）
'
' PrintFromTo Macro
'
    Range("G2").Select　→　G2を選ぶ
    
    For i = Range("G5").Value To Range("H5").Value
　　→　iという変数（入れ物）に入れたG5の値からH5の値まで繰り返す
        ActiveCell.FormulaR1C1 = i　→　選んだG2へiの値を入れる
        ActiveWindow.SelectedSheets.PrintOut Copies:=1, Collate:=True, _
            IgnorePrintAreas:=False　→　印刷する
    Next　→　iの値を1プラスしてForに戻る

End Sub　→　マクロを終了する

これでコーディングは終了です。初めてでもなんとなく理解できたら幸いです。

できたらコードエディタを右上の×で閉じて、マクロを実行してみましょう。

想定通り、繰り返し印刷できていたら成功です！

（必要であれば）マクロ実行のためのボタン等を作成する

前項のとおりマクロができましたが、毎回マクロの画面を開いて実行と押すのも非効率なので、
必要であればボタン等装飾してみるのもおすすめです。

今回は、ボタンを押すと設定したマクロが実行できるようにしてみましょう。

まず、図形から丸みを帯びた四角のボタンを作成します。

次にボタンを右クリックし、「マクロの登録」を押すと、
以下のように登録画面が出てきますので、作成したマクロを選択しましょう。

これでマクロボタンの作成についても完了です。

どうでしょう、わりと簡単だったなと思っていただけると嬉しいです。
少し難しいと思っても数回やってみると、
「ふ～ん、こんな感じか」と慣れてくると思いますので、是非チャレンジしてみてくださいね！

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

投稿 【Excel VBA】初心者でも簡単にマクロを作る方法 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

前回はJavaScriptで電卓を作成しました。
今回は前回作成した電卓を元にvue.jsに書き換えしてみましょう。

前回の記事はこちらから！

【初心者】簡単！JavaScriptで電卓の作り方【サンプル】

JSで四則演算や小数点の計算ができる簡易的な電卓を作成。持たせる機能から作り方の考え方までHTML,CSSソースやデモページ付きで解説しているので、プログラミングの勉強や参考に！デモページあり。

nyanblog2222.com

2022.03.06

【初心者向け】JavaScriptでカレンダー作成【サンプル】

JavaScript（JS）でカレンダーをライブラリなしで作り方を紹介。前月、次月を含めた1週間表示や日付の値を取得する方法をHTML,CSSソースやデモページ付きで解説！プログラミング初心者の方へ勉強や参考に！

nyanblog2222.com

2021.01.07

はじめに

まずはじめに前回でも説明しましたが、電卓の機能を説明します。
その後、vue.jsに書き換える手順を説明します。

また、CSSに関しては前回の記事より変更がありませんので今回は割愛させていただきます。

電卓の機能

作る電卓の機能は次のとおりです。

完成イメージはこちらです。

HTML

HTMLコードです。

<head>
  <meta charset="UTF-8">
  <title>電卓</title>
  <link rel="icon" href="https://nyanblog2222.com/wp-content/themes/blogtemplate/images/favicon.ico">
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="style.css">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div id="app">
    <h1 id="header">電卓</h1>
    <div id="calc">
      <div>
        <input readonly v-model="result" type="text"><button v-on:click="c_click">C</button>
      </div>
      <div v-for="row in dataArrays">
        <button v-for="column in row" v-on:click="btn_Click(column)">{{column}}</button>
      </div>
    </div>
  </div>
</body>

vue.jsの設定 → CDNでの設定

<head>
  <meta charset="UTF-8">
  <title>電卓</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="style.css">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="script.js"></script>
</head>

今回vueを使用するため、6行目にheadタグにCDN設定を追加しました。

注意する点として、他のJavaScriptファイルを読み込む前にCDN設定するようにしてください。

また、vue.jsのインストールや最新環境のCDNの情報はこちらから確認してください♪

電卓の各ボタンをv-forで自動作成

<div v-for="row in dataArrays">
  <button v-for="column in row" v-on:click="btn_Click(column)">{{column}}</button>
</div>

// 電卓のボタン
dataArrays: [
  ["7", "8", "9", "÷"],
  ["4", "5", "6", "×"],
  ["1", "2", "3", "-"],
  ["0", ".", "=", "+"],
],

Cボタン以外はvueで自動生成させます。
ボタンの順番やデータはJavaScript側で記述します。

divタグはデータ1行単位でforを回し、buttonタグは1項目（1データ）単位で回しています。

みみねこ

dataArrayと完成イメージ図を見比べると分かりやすいと思います！

クリックイベント書き換え

クリックイベント「onclick」を「v-on:click」に置換します。

vue使用のためv-model、idの設定

inputタグのidを設定していましたが、v-modelでの設定に変更。
divのid=”app”を設定。

JavaScript

こちらがJavaScriptのコードです。

scriptファイルを分けているので、「window.onload」でhtmlの読み込みが終わってから実行するようにしています。

window.onload = function () {
  new Vue({
    el: '#app',
    data: {
      result: "0",
      is_calc: false,
      dataArrays: [
        ["7", "8", "9", "÷"],
        ["4", "5", "6", "×"],
        ["1", "2", "3", "-"],
        ["0", ".", "=", "+"],
      ],
      operators_list: ["÷", "×", "-", "+"  ],
    },
    methods: {
      c_click: function () {
        this.result = "0";
        this.is_calc = false;
      },
      btn_Click: function (val) {
        if (this.operators_list.includes(val)) {
          this.ope_click(val);
        } else if (val === "=") {
          this.equal_click();
        } else {
          this.num_click(val);
        }
      },
      num_click: function (val) {
        if (this.is_calc) this.result = "0";
        this.is_calc = false;

        if (this.result == "0" && val == "0") {
          this.result = "0";
        } else if (this.result == "0" && val == ".") {
          this.result = "0.";
        } else if (this.result == "0") {
          this.result = val;
        } else {
          this.result += val;
        }
      },
      ope_click: function (val) {
        if (this.is_calc) this.is_calc = false;

        if (this.is_ope_last()) {
          this.result = this.result.slice(0, -1) + val;
        } else {
          this.result += val;
        }
      },
      equal_click: function () {
        if (this.is_ope_last()) this.result = this.result.slice(0, -1);

        var temp = new Function("return " + this.result.replaceAll("×", "*").replaceAll("÷", "/"))();
        if (temp == Infinity || Number.isNaN(temp)) {
          this.result = "Error";
        } else {
          this.result = temp;
          this.is_calc = true;
        }
      },
      is_ope_last: function () {
        return this.operators_list.includes(this.result.toString().slice(-1));
      },
    },
  });
};

デモ

こちらがデモページになります。
電卓が表示され、ボタンを押すと実際に計算ができるのでぜひ試してみてください♪

最後に

いかがでしたでしょうか。vue.jsも主流になっていますので使いこなしていきたいですね！

良ければ別のサンプルページも見てみてくださいね♪

【初心者向け】JavaScriptでカレンダー作成【サンプル】

JavaScript（JS）でカレンダーをライブラリなしで作り方を紹介。前月、次月を含めた1週間表示や日付の値を取得する方法をHTML,CSSソースやデモページ付きで解説！プログラミング初心者の方へ勉強や参考に！

nyanblog2222.com

2021.01.07

投稿 【初心者】簡単！vue.jsで電卓の作り方【サンプル】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

今回はJavaScriptで電卓を作成しました。
初心者の方が勉強しやすいシンプルな機能で作ってみました。

まずは簡単なものを完成することを目的にして、
そのあとで機能を追加していくことが勉強するにはおすすめですよ♪

みみねこ

初めから難しいものを作ろうとしても時間がかかって、その内やる気がなくなるのは勿体ないですよね…。（よくある）

別記事でVue.jsを使った記述も紹介しますので、合わせて読んでみてください！

【初心者】簡単！vue.jsで電卓の作り方【サンプル】

JS[JavaScript]で四則演算ができる簡易的な計算機を作成しました。プログラミング初心者の方への勉強向け記事になりますのでデモページを見ながらコード、関数を見ながら作成してみてはいかがでしょうか。

nyanblog2222.com

2022.03.10

はじめに

まずは今回作成する電卓の機能を決定します。

みみねこ

コーディングする前に機能を決定しておくことは、手戻りを防ぐためにも大事ですね♪

今回は次の機能を持たせました。

みみねこ

今回はこのまま進みますが、機会があればアップデートしていきたいですね♪

完成イメージ図はこちらです。デモページもありますので見てみてください。

HTML

まずはHTMLを作成していきます。
作成しているのは、次の3つです。

コード

<div class="wrapper">
  <h1 id="header">電卓</h1>
  <div id="calc">
    <div>
      <input readonly id="result" type="text" value="0">
      <button onclick="c_click()">C</button>
    </div>
    <div>
      <button onclick="num_click(this.innerHTML)">7</button>
      <button onclick="num_click(this.innerHTML)">8</button>
      <button onclick="num_click(this.innerHTML)">9</button>
      <button onclick="ope_click(this.innerHTML)">÷</button>
    </div>
    <div>
      <button onclick="num_click(this.innerHTML)">4</button>
      <button onclick="num_click(this.innerHTML)">5</button>
      <button onclick="num_click(this.innerHTML)">6</button>
      <button onclick="ope_click(this.innerHTML)">×</button>
    </div>
    <div>
      <button onclick="num_click(this.innerHTML)">1</button>
      <button onclick="num_click(this.innerHTML)">2</button>
      <button onclick="num_click(this.innerHTML)">3</button>
      <button onclick="ope_click(this.innerHTML)">-</button>
    </div>
    <div>
      <button onclick="num_click(this.innerHTML)">0</button>
      <button onclick="num_click(this.innerHTML)">.</button>
      <button onclick="equal_click()">=</button>
      <button onclick="ope_click(this.innerHTML)">+</button>
    </div>
  </div>
</div>

みみねこ

input後のbuttonや、button後のbuttonについて
分かりやすいように改行を入れていますが、実際のコードでは改行していないので注意してください。

HTMLファイルを見てみると画像のように表示されます。

HTML解説

• 5行目　input要素
  ・readonly属性にして直接入力不可
  ・計算式や結果を表示するためid=”result”を設定
  ・valueを0にして初期表示
• 6行目　Cボタン
  onclick属性で”c_click()”を設定
• 数字ボタン
  onclick属性で”num_click(this.innerHTML)”を設定
  this.innerHTMLはHTMLの中身を表しています。
  例）9行目であれば”7″が入ります。
• 演算子ボタン
  onclick属性で”ope_click(this.innerHTML)”を設定
• 29行目　イコールボタン
  onclick属性で”equal_click()”を設定

CSS

次にCSSでスタイルを決定します。
”reset.css”も使っているので、この辺りは好きなようにカスタマイズをしてください。

@charset "utf-8";
/*全体*/
.wrapper{
  max-width: 350px;
  margin: 0 auto;
  color: #666;
}
#header,#calc{
  box-sizing: border-box;
  text-align: center;
}
/*ヘッダー*/
#header {
  font-size: 24px;
  padding: 1rem;
}
/*テキスト*/
input{
  box-sizing: border-box;
  width: 75%;
  height: 3.5rem;
  font-size: 1.6rem;
  text-align: right;
  padding: 0 0.75rem;
}
/*ボタン関係*/
button{
  font-size: 18px;
  width: 25%;
  height: 3.5rem;
  color: #333;
  vertical-align: middle;
  border-color: #fff;
}
button:hover{
  background-color: #ddd;
}

設定が終わると、このように表示されるようになります。

JavaScript

コード

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

みみねこ

最初はコピペして自分で理解しながらカスタマイズする方法も勉強するのに向いていますよ！

// データ
var result = "";
// =で計算したかどうか
var is_calc = false;

// 初期表示
window.onload = function () {
  result = document.getElementById('result');
};

// Cキー押下
function c_click(){
  result.value = "0";
  is_calc = false;
}

// 数字キー押下
function num_click(val){
  if(is_calc)  result.value = "0";
  is_calc = false;  

  if(result.value =="0" && val == "0"){
    result.value = "0";
  }else if(result.value == "0" && val == "."){
    result.value = "0.";
  }else if(result.value == "0"){
    result.value = val;
  }else{
    result.value += val;
  }
}

// 演算子キー押下
function ope_click(val){
  if(is_calc)  is_calc = false;
  
  if(is_ope_last()){
    result.value = result.value.slice(0, -1) + val;
  } else {
    result.value += val;
  }
}

// =キークリック
function equal_click(){
  if(is_ope_last())  result.value = result.value.slice(0, -1);

  var temp = new Function("return " + result.value.replaceAll("×", "*").replaceAll("÷", "/"))();
  if(temp == Infinity || Number.isNaN(temp)){
    result.value = "Error";
  }else{
    result.value = temp;
    is_calc = true;
  }
}

// 入力されている値が演算子かどうか
function is_ope_last(){
  return ["+","-","×","÷"].includes(result.value.toString().slice(-1));
}

解説

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

・グローバル変数の定義

2つの変数を定義、初期化しています。
result変数はhtmlのid=”ressult”と紐づけします。

// 表示させるデータ
var data = "";
// =で計算したかどうか
var is_calc = false;

・HTML読み込み後

HTML読み込み後、id”result”と変数のresultを紐づけしています。

window.onload = function () {
  result = document.getElementById('result');
};

・Cボタンクリック

Cボタンクリック時のイベントを記述しています。
ここでは変数の初期化を行っています。

function c_click(){
  result.value = "0";
  is_calc = false;
}

・数字ボタンクリック

数字ボタンクリック時のイベントを記述しています。

function num_click(val){
  if(is_calc)  result.value = "0";
  is_calc = false;  

  if(result.value =="0" && val == "0"){
    result.value = "0";
  }else if(result.value == "0" && val == "."){
    result.value = "0.";
  }else if(result.value == "0"){
    result.value = val;
  }else{
    result.value += val;
  }
}

• 2、3行目
  1度”＝”で計算済みの場合、数字ボタンを押したらresultを初期化します。
  is_calcはfalseにします。
• 5～13行目
  入力した数字によってresultの処理を行います。
  ・1つ目の条件は初期化後、”0″が入力された場合、resultに”0″を設定
  ・2つ目の条件は初期化後、”.”が入力された場合、resultに”0.”を設定
  ・3つ目の条件は初期化後、上記以外の数字が入力された場合、resultに入力値を設定
  ・それ以外は直接resultに入力値を追加

・演算子ボタンクリック

演算子ボタンクリック時のイベントを記述しています。

function ope_click(val){
  if(is_calc)  is_calc = false;
  
  if(is_ope_last()){
    result.value = result.value.slice(0, -1) + val;
  } else {
    result.value += val;
  }
}

• 2行目
  is_calcがtrueの場合があるのでfalseにします
• 4～8行目
  条件によって計算式の処理を変えています。
  1つ目の条件では、直前のボタンが演算子の場合、演算子を切り替えます。
  それ以外では、計算式に入力した演算子を付け加えます。

// 1つ目の条件：例
// 直前の計算式
9×6+
// 押したボタン
-
// 演算子切り替え後
9×6-

・＝ボタンクリック

＝ボタンクリック時のイベントを記述しています。

function equal_click(){
  if(is_ope_last())  result.value = result.value.slice(0, -1);

  var temp = new Function("return " + result.value.replaceAll("×", "*").replaceAll("÷", "/"))();

  if(temp == Infinity || Number.isNaN(temp)){
    result.value = "Error";
  }else{
    result.value = temp;
    is_calc = true;
  }
}

• 2行目
  計算式の最後が演算子の場合、演算子を取り除きます。
• 4行目
  変数tempに計算式の計算結果を設定します。
• 7～9行目
  計算結果がInfinity（無限大）かNaN（数字出ない）場合、resultにErrorを設定します。
• 8～11行目
  tempの値をresultに設定し、計算済み（is_calc）フラグをtrueにします。

・is_ope_last() 関数

計算式の最後が演算子か判定する関数です。
「result.value.toString().slice(-1)」は計算式の最後の文字を取得し、
「[“+”,”-“,”×”,”÷”].includes(…」で4つの演算子と一致するかどうかbool型で返しています。

function is_ope_last(){
  return ["+","-","×","÷"].includes(result.value.toString().slice(-1));
}

デモ

こちらがデモページになります。
電卓が表示され、ボタンを押すと実際に計算ができるのでぜひ試してみてください♪

最後に

いかがでしたでしょうか。
次回はvue.jsに書き換えしてみます！

良ければ別のサンプルページも見てみてくださいね♪

【初心者】簡単！vue.jsで電卓の作り方【サンプル】

JS[JavaScript]で四則演算ができる簡易的な計算機を作成しました。プログラミング初心者の方への勉強向け記事になりますのでデモページを見ながらコード、関数を見ながら作成してみてはいかがでしょうか。

nyanblog2222.com

2022.03.10

【サンプル】JavaScriptのコードまとめリンク集

本記事では当ブログで上げているJavaScript記事のまとめリンク集になります。目次でカテゴリ分けをしているので、気になる内容がありましたら目次から飛んでみてください♪

nyanblog2222.com

2022.09.01

投稿 【初心者】簡単！JavaScriptで電卓の作り方【サンプル】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

今回はOfficeのVBAで、If文を一行で記述する方法を紹介します。

If文を一行で記述する方法

If文は通常、以下のように記述します。

If ( 条件式 ) Then
    処理
End If

これを一行で書くと、以下のようなコードになります。
※「End If」を記述しないことで、実現できます

If ( 条件式 ) Then 処理

Else有りでも一行で書けます。

If ( 条件式 ) Then 処理１ Else 処理２

ElseIfを使う場合は一行では書けないようです。

そもそも、一行で書いた方が良い？

If分を一行で書くと見た目がすっきりして、あたかも「かしこいコード」に見えますが、
必ずしも万人にとって読みやすいと思う記述方法ではないと私は思います。

コードは、自分にも他人にも読みやすいものであるべきです。

なので、
一行で書くと読みやすいコードになると思うのであれば、一行で書いた方が良いし、
一行で書くと”もしかしたら”読みにくいコードになるかもしれないと思うのであれば、分けて書いた方が良いと思います。

例えば、こういったケースはどちらが読みやすいでしょうか。

例）ある関数内で、対象フラグが9（エラーフラグ）なら即リターンする

①

If (TargetFlg = 9) Then Exit Function

②

If (TargetFlg = 9)
  Then Exit Function
End If

私なら①の方がスコープが狭まるので読みやすいです。
内容も複雑ではないので、すぐに理解できます。
ただ②も素直なので、どちらを読みやすいと思うかは人によるかもしれませんね。

例）取得した日付が10文字（YYYY/MM/DD）ならそのまま返し、
　　異なれば（YYYYMMDD）、 10文字（YYYY/MM/DD） にして返す関数

①

If (Len(TargetDay) = 10) Then DayFormat = TargetDay Else DayFormat = Left(TargetDay, 4) & "/" & Mid(TargetDay, 5, 2) & "/" & Right(TargetDay, 2)

②

If (Len(TargetDay) = 10) Then
  DayFormat = TargetDay
Else
  DayFormat = Left(TargetDay, 4) & "/" & Mid(TargetDay, 5, 2) & "/" & Right(TargetDay, 2)
End If

私なら②の方が素直で読みやすいです。
①は一行にすると読みづらすぎます！
恐らく他の人からしても②の方が読みやすいのではないでしょうか。
Elseを使う時点で分けた方がいいかもしれませんね。

ということで、判断に迷ったら
「一行で書くことで、自分や他人にとって読みやすくなるか」を考えて記述すると良いと思います。

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

投稿 【VBA】If文を一行で記述する方法【Access,Excel】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

今回はAccessVBAでDcount関数を使用したときに、
「実行時エラー ‘2471’: クエリ パラメーターとして指定した式でエラー ‘xxx’ が発生しました。」 とエラーコードがでてしまった場合の対処方法を紹介します。

DCount関数の使い方

対処方法を紹介する前に、簡単に使い方を紹介します。

Dcount関数は、
テーブル等（domain）のフィールド（expr）で値があるレコード、かつ条件（criteria）に合致するレコード数を取得します。

例えば、以下の「社員情報」テーブルで「氏名」フィールドをカウントし、
11000以上の社員NOを取得するときは、このように指定します。

・社員情報

・コード

Sub DCount_OK()

    Dim Tmp As Long
    
    Tmp = DCount("氏名", "社員情報", "社員NO > 11000")
    
    Debug.Print Tmp

End Sub

結果は「2」です。

ここで、例では各要素がダブルコーテーション（”）でくくられていることがわかると思いますが、
Dcount関数を記述する際に一癖あるのが、各要素が文字列であることです。

エラーの原因は？どんな状況で発生する？

私の場合、変数を使って条件を可変にしようとした際にエラーがでました。

前述のDcount関数の使い方にも記述しましたが、
Dcount関数は各要素に文字列を入れる必要があります。

そこで、条件の文字列の中に変数名を入れてしまうと、
「’変数名’という値と比較できないよ！」とエラーが出てしまいます。
なんとなく、「”A > 999″」という書き方ができるため、変数でもいけるのでは？と思ったのが間違いでした。

・コード（誤った例）

Sub DCount_Err()

    Dim Tmp As Long
    
    Dim TestErr As Long
    TestErr = 11000
    
    Tmp = DCount("氏名", "社員情報", "社員NO > TestErr")
    
    Debug.Print Tmp

End Sub

・エラーメッセージ

対処方法

対処方法ですが、
以下のように変数部分を文字列と「＆」で結合させると正しく出力されます。

Sub DCount_Err()

    Dim Tmp As Long
    
    Dim TestErr As Long
    TestErr = 11000
    
    Tmp = DCount("氏名", "社員情報", "社員NO > " & TestErr)
    
    Debug.Print Tmp

End Sub

これで、繰り返し処理などで可変の値が入っても対応することができます。

投稿 【Access】Dcount「クエリ パラメーターとして指定した式でエラー ‘xxx’ が発生しました。」対処方法 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

今回は、Windows10のパソコンでタスクバーに表示される
「ニュースと関心事項」を無効化する方法を紹介します。

個人設定用に、一般的な方法（タスクバーで設定）
組織設定用に、グループポリシーやレジストリで設定する方法がありますので、
必要に応じて目次からどうぞ♪

ニュースと関心事項って？　突然現れた気がする……

ニュースと関心事項とは、Windows10 バージョン 1909より標準搭載された、
最新のニュースや天気、その他ユーザーが関心事項に対して簡単にアクセスできるようにしたサービスです。

2021年5月20日のKB5003212パッチにてインストールされました。

2021 年 5 月 20 日 — KB5003212 (OS ビルド 18363.1593) プレビュー - Microsoft サポート

support.microsoft.com

突然現れた、この便利？なサービスですが、
インターネットに繋がらない環境で使う場合（例えば社内ネットワークのみ繋がるセキュアな環境）、
以下のようなエラーメッセージが出てしまうため、人によっては迷惑なものになります。

また、標準ではホバー設定（カーソルが当たると内容を表示する設定）になっているため、
意図しない時に、うっかりニュースが表示されると鬱陶しいと感じてしまいますよね……。

なので、今回はこの「ニュースと関心事項」を無効化する方法について紹介します。

一般的な方法（タスクバーで設定）

タスクバーで右クリックし、
「ニュースと関心事項」-「無効にする」をクリックします。

ちなみに無効化はせずホバー設定だけなくしたい場合は、
ここで「ホバーで開く」をクリックしてチェックを消してください。

グループポリシーで設定

グループポリシー管理画面を開き、
「コンピューターの構成」-「管理用テンプレート」-「Windows コンポーネント」-
「ニュースと関心事項」-「タスク バーのニュースと関心事項を有効にする」を開き、
ポリシーを「無効」にします。

グループポリシーで設定すると、以下の通りタスクバーから項目がなくなります。
（他の方法だとタスクバーから設定変更が可能です）

なので、会社など組織で管理するパソコンであれば、グループポリシーで無効化がおすすめです。

レジストリで設定（レジストリエディター・コマンドプロンプト（BAT））

組織でグループポリシーで管理していない場合は、BATを作って流すのがおすすめです。

レジストリエディター

レジストリエディターを開き、
「コンピューター\HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Feeds」
-「ShellFeedsTaskbarViewMode」
を「2（無効）」にします。

コマンドプロンプト（BAT）

以下をメモ帳に貼り付け保存し、拡張子を「bat」にすると使用できます。

REG ADD "HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Feeds" /v ShellFeedsTaskbarViewMode /t "REG_DWORD" /d "2" /f

以上、今回は「ニュースと関心事項」を無効化する方法でした。
何かの参考になれば幸いです。　ありがとうございました♪

投稿 ニュースと関心事項を無効化する方法【Windows10タスクバー】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

こんにちは。今回はJavaScriptでカウントダウンタイマーを作成してみました！

オリンピックやワールドカップ、クリスマスやお正月など季節の行事事のタイマーとしても使えます！

今回はシンプルなスタイルで作成していますが、CSSで派手なスタイルにしても面白いと思います♪

カウントを取る動きとして似ているアナログ時計を作った記事も
良かったら見ていただけると嬉しいです！

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

先日はJavaScriptでカウントダウンタイマーを作成してみました。今回は前回の記事の内容を利用してアナログ時計を作ってみようともいます。サンプルもありますのでコピペで簡単にできます！初心者の方や勉強されている方におすすめなので、良かったら試してみてください♪

nyanblog2222.com

2020.06.24

HTML

今回のHTMLはとてもシンプルです。

現在時刻とカウントダウンタイマーのp要素をそれぞれ作成しています。

<body>
    <p id="now"></p>
    <p id="count_down"></p>
</body>

JavaScript

時間の表示については、JavaScriptを使用しています。

主に現在時刻の出力とカウントダウンの出力とそれぞれ実装しています。

// 曜日の配列を取得
var week_day = ["日", "月", "火", "水", "木", "金", "土"];

window.onload = function () {

    var id = setInterval(function(){
        // 現在日時を出力
        var now_date = new Date();
        var now_date_str = "今日の日付は" + get_nichiji(now_date) + "（" + week_day[now_date.getDay()] + "）です。" + "<br>" +
            "時刻は" + get_jikoku(now_date) + "です。";
        
        document.getElementById("now").innerHTML = now_date_str;
        
        // 年末までのカウントダウン
        var nen_matsu = new Date(now_date.getFullYear() + 1 + "/1/01");
        var count_down = nen_matsu.getTime() - now_date.getTime();
        
        // 日にちから計算していく
        var day = Math.floor(count_down / (1000 * 60 * 60 * 24));
        count_down -=  (day *(1000 * 60 * 60 * 24));
        var hour = Math.floor(count_down / (1000 * 60 * 60));
        count_down -= (hour *(1000 * 60 * 60));
        var minutes =  Math.floor(count_down / (1000 * 60));
        count_down -= (minutes * (1000 * 60));
        var second = Math.floor(count_down / 1000);
        
        var count_down_str = get_nichiji(nen_matsu) + "まで、あと" +
            day + "日" + hour + "時" + minutes + "分" + second + "秒" + "です。";
        document.getElementById("count_down").innerHTML = count_down_str;
    }, 1000);
};

// 月を正しい表示で出力
function get_month(date_obj) {
    return date_obj.getMonth() + 1;
}

// 〇〇年〇〇月〇〇日表示
function get_nichiji(date_obj) {
    return date_obj.getFullYear() + "年" + get_month(date_obj) + "月" + date_obj.getDate() + "日";
}

// 〇〇時〇〇分〇〇秒表示
function get_jikoku(date_obj) {
    return date_obj.getHours() + "時" + date_obj.getMinutes() + "分" + date_obj.getSeconds() + "秒";
}

// 曜日取得
function get_week_day(date_obj) {
    return week_day[date_obj.getDay()];
}

デモ

出力内容はこちらです！
1秒ごとに現在時刻と翌年の1月1日までのカウントダウンの秒数が表示されています。

↓の赤枠に何も表示されていない場合、数秒そのままでお待ちください。

まとめ

いかがでしたでしょうか。

今回はJavaScriptでカウントダウンタイマーを作成しました！
日付の表示方法やカウントするためのタイマー処理を主に使用しました。

今回は機能を主にご紹介しましたが、CSSでスタイルを設定して
おしゃれなカウントダウンタイマーを作ってみてはいかがでしょうか。

アナログ時計を作った記事も良かったら見てください！

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

先日はJavaScriptでカウントダウンタイマーを作成してみました。今回は前回の記事の内容を利用してアナログ時計を作ってみようともいます。サンプルもありますのでコピペで簡単にできます！初心者の方や勉強されている方におすすめなので、良かったら試してみてください♪

nyanblog2222.com

2020.06.24

投稿 【JavaScript】カウントダウンタイマーの作り方【サンプル】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

こんにちは。

変数の宣言でvar、let、constそれぞれどの状況で使用していますか？

私は特にvarとletについて違いが良く分からなかったので、この機会に調べてまとめてみました。

良かったら参考にしてください！

ローカルスコープとグローバルスコープ

まずは、ローカルスコープとグローバルスコープについてです。

スコープとは、変数が参照したり変更できたりと使用できる有効範囲を指します。

ローカルスコープはある特定の範囲内でのみ有効となるスコープです。
特定の範囲とは、これから出てくる関数やブロックなど括られた範囲を指します。

グローバルスコープは名の通りどこからでも使用できる有効範囲を持つスコープです。

どこでも使用することが可能なので、とても便利であるように感じますが
意図しない箇所で上書きしてしまったり、利用してしまったりすることで
不具合の原因となってしまいます。

そのため、できる限り変数のスコープは小さくすることが
読みやすいコードにつながると言われています。

本記事では特にvarとletに関してスコープを意識して使い分けていくことをおすすめしています！

変数宣言キーワード

varについて

特徴

・ES2015以前より使用できる変数宣言キーワード
・ スコープは関数内部
・ 関数内のどこで宣言しても、先頭で定義した扱いとなる
・ ifやfor文内で宣言した変数でも、同じ関数内であれば使用できる

// 例
function Sample() {
    for(let i=1;i<=3;i++){
        console.log(i)
    }
    
    // ブロック外なので、アクセスできずエラー
    console.log(i)
}

letについて

varとの主な違いはスコープの範囲です。

varではif文やfor文のようにブロック内で宣言した変数でも、
同じ関数内であれば使用することができますが、
letではブロック内で宣言した変数はブロックの範囲を超えると使用することができません。

特徴

・ES2016以降より使用可能（IE9等、少し古いバージョンのブラウザだと動かない場合がある）
・スコープは関数内部、もしくはブロック内部
・varと比べて、よりスコープを限定することができる

// 例
function Sample() {
    var sample1 = 1;
    // var i;

    // 再代入可能
    sample1 = 3;

    for(var i=1;i<=3;i++){
        console.log(i)
    }
    
    // 同じ関数内なので、アクセスできる
    console.log(i)
    
    console.log(gloval_hensu)
}

// 関数外なので参照できず、エラー
console.log(i)

constについて

constはこの3つの中だと、 一番特徴が分かりやすいです。
それは再代入（変更）できないため定数として扱われます。

特徴

・ES2016以降より使用可能（IE9等、少し古いバージョンのブラウザだと動かない場合がある）
・スコープは関数内部、もしくはブロック内部再代入ができない（定数扱いとなる）
・宣言のみはできず必ず値を代入する必要がある。

定数とは、一度宣言されると値が固定され変更できない値を指します。

// 例
// 宣言時に値を代入していないので、エラー
const sample1;

const sample2 = "test2";
const sample3 = "test3";

// 代入できないので、エラー
sample3 = "sample3";

if(sample2 === "test2"){
    const sample4 = "test4";
}

// sample4はブロック内で宣言されているため、
// ブロックの外で使用し、スコープからはみ出ているのでエラー
console.log(sample4);

まとめ

いかがでしたでしょうか。

ちょっとしたことなのですが、
忘れやすかったりするので良かったら時々見に来てください♪

ちなみに、JavaScriptは変数宣言キーワード（var, let, const）を使用しなくても宣言することができます。

キーワードを使用することで有効範囲が変わってくるので、
予期せぬ動きをさせないためにも、使用した方が良いですね！

投稿 【JavaScript】変数、型の違い【var let const】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

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

Canvasとは？

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

HTMLの設定

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

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

<body>
    <canvas id="canvas" width="500" height="500">代替コンテンツ</canvas>
</body>

描画コンテキストの取得

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)・・・指定範囲の四角形を消去し、透明になる

実装

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

<script type="text/javascript">
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    // 塗りつぶしの色を設定
    ctx.fillStyle = "#FFF3D9";
    // 塗りつぶされた状態の四角形を描画
    ctx.fillRect(25, 25, 120, 150);

    // 指定範囲の四角形を消去し、透明になる
    ctx.clearRect(40, 45, 90, 75);

    // 境界線の色を設定
    ctx.strokeStyle = "#C6A35B";
    // 線の幅を設定
    ctx.lineWidth = 5;

    // 四角形の境界線を描画する
    ctx.strokeRect(60, 57.5, 50, 50);
</script>

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

線（パス）を描画

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

関数

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

実装

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

<canvas id="canvas" width="200" height="200">代替コンテンツ</canvas>
<script type="text/javascript">
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    // 塗りつぶし
    ctx.beginPath();    // パス開始
    ctx.moveTo(50,30);  // x=50, y=30に移動
    ctx.lineTo(80,80);  // x=50→80, y=30→80へパスを設定
    ctx.lineTo(20,80);  // x=80→20, y=80→80へパスを設定
    ctx.closePath();    // パス終了
    ctx.fillStyle = "#A2D7DD";  // 塗りつぶしの色を設定
    ctx.fill();  // 塗りつぶしで描画

    // 輪郭線
    ctx.beginPath();    // パス開始
    ctx.moveTo(10,120); // x=10, y=120に移動
    ctx.lineTo(80,20);  // x=10→80, y=120→20へパスを設定
    ctx.lineTo(180,70); // x=80→180, y=20→70へパスを設定
    ctx.closePath();    // パス終了
    ctx.strokeStyle = "#65C294";    // 輪郭線の色を設定
    ctx.stroke();       // 輪郭線で描画

    // 円（三日月）
    ctx.beginPath();    // パス開始
    ctx.arc(250, 60, 40, 0, Math.PI * 2);
    ctx.closePath();    // パス終了
    ctx.fillStyle = "#FFF3D4";  // 塗りつぶしの色を設定
    ctx.fill();  // 塗りつぶしで描画

    ctx.beginPath();    // パス開始
    ctx.arc(270, 60, 25, 0, Math.PI * 2);
    ctx.closePath();    // パス終了
    ctx.fillStyle = "#FFF";  // 塗りつぶしの色を設定
    ctx.fill();  // 塗りつぶしで描画

</script>

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

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

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

円（円弧）の描画

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

関数

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

実装

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

<canvas id="canvas" width="200" height="200">代替コンテンツ</canvas>
<script type="text/javascript">
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    // 円（三日月）大きい円
    ctx.beginPath();    // パス開始
    // (50, 60)を中心に半径40で0～360度分、円を描画
    ctx.arc(50, 60, 40, 0, Math.PI * 2);
    ctx.closePath();    // パス終了
    ctx.fillStyle = "#FFF3D4";  // 塗りつぶしの色を設定（薄い黄色）
    ctx.fill();  // 塗りつぶしで描画

    // 円 小さい円で月の中を表現
    ctx.beginPath();    // パス開始
    // (70, 60)を中心に半径25で0～360度分、円を描画
    ctx.arc(70, 60, 25, 0, Math.PI * 2);
    ctx.closePath();    // パス終了
    ctx.fillStyle = "#FFF";  // 塗りつぶしの色を設定（白）
    ctx.fill();  // 塗りつぶしで描画

</script>

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

まとめ

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

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

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

今回は、Accessのクエリ等を実行した際に、
「式に未定義関数 ‘xxx’ があります。」とエラーメッセージが出て処理できない場合があります。
このエラーには原因が複数パターン想定されるため、それぞれの対処方法を紹介します。

エラー原因

原因は複数パターンありますが、ざっくり言うと
システムがモジュール内に関数内で使用していないのに使っていると判断しているためです。

以下の通り、うっかりミスからややこしいものもあるため
対処するには一つ一つ順に見ていきましょう。
（上から順に可能性の高いパターンです）

対処方法

以下の正常な状態を一部変更し、エラーパターンを作成していきます。

クエリでの関数呼び出し：「挨拶: CallHello()」

モジュール名：「こんにちは」
関数名：「CallHello()」

Function CallHello() As String

CallHello = "Hello World"

End Function

関数を定義していない、又は誤った関数名を使用している場合

勘違いで呼び出す関数を定義していない、又は誤った関数名を使用している場合、
呼び出すことができずエラーになります。

例えば、
Function CallHello() As String　と宣言しているのに、
CallHallo()で呼び出している場合等

調べるには、一度クエリから呼び出している関数名で、Visual Basic画面にて
プロジェクト内のコード内を検索（ショートカットキー：「Ctrl+F」）してみましょう。
もしなければ、誤っていますのでクエリを変更してください。

関数名とモジュール名が同じ場合

関数名とモジュール名が同じ場合、システム上名称が被ってしまいエラーとなります。

例えば、
Function CallHello() As String　と宣言しており、
モジュール名もCallHelloになっている場合等

この場合、関数名又はモジュール名を変更してください。

ライブラリが参照不可になっている場合

ライブラリが参照不可になっており、
ライブラリ内の関数を使用していた場合、エラーとなります。
パソコンの交換やOS・Officeのバージョンアップでエラーが上がるようになった場合は、
このケースの可能性があります。

この場合、Visual Basic画面にてツールタブから参照設定を開き、参照不可がある場合は、
参照をあらためて追加するか、関数を自前で作成する等やり方を変える必要があります。

関数の宣言でPrivateを使っている場合

関数の宣言でPrivateを使っている場合、
モジュール内からしか呼び出すことができないため、エラーとなります。

Privateはアクセス修飾子と呼ばれ、他にPublic等があります。
以下の通りアクセス修飾子によって参照できる範囲（スコープ）が限られており、
・Private Function：モジュール内のみ参照可
・Public Function：モジュール外から参照可
・Function：暗黙的にPublicとなるため、モジュール外から参照可
となります。

なので、例えば、
Private Function CallHello() As String　と宣言している場合は、
Function CallHello() As String 又は
Public Function CallHello() As String
に変更する必要があります。

関数名に２バイト文字が使用されている場合

関数名に日本語等の２バイト文字が使用されている場合、
VBA上はコンパイルできても対応してはいないので、クエリから呼び出すとエラーとなります。

なので、例えば、
Function 挨拶する() As String　と宣言している場合は、
Function CallHello() As String
に変更する必要があります。
（クエリからの呼び出し側も同様に、CallHello()へ変更）

モジュールが破損している場合

モジュールが破損している場合、呼び出せずエラーとなります。

この場合は、新しくモジュールを作成し、ソースコードをコピーして作り直す必要があります。

投稿 【Access】式に未定義関数 ‘xxx’ があります。[原因,対処方法] は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

今回は、Access Runtime（ランタイム版）実行時の
「セキュリティに影響を及ぼす可能性のある問題点が検知されました。」
警告メッセージを非表示にする設定について紹介します。

なぜ警告が表示されるか

警告メッセージに、
「警告：このコンテンツの発行元が信頼できるかどうかを確認することはできません。このコンテンツが重要な機能を備えており、発行元が信頼できる場合を除き、このコンテンツは無効のままにしてください。」
と、書いてあるとおり、発行元が信頼できるかどうかを確認できないためです。

この警告はメッセージこそ違えど、以下のように有償のAccessにも同じように出てきます。

対処方法は、有償・無償共通で以下２つあります。
１．信頼できる場所に追加する
２．すべてのマクロを有効にする

ただ、有償のAccessの場合はセキュリティ設定を変更することで対処できますが、
（ファイル→オプション→セキュリティセンター→セキュリティセンターの設定で、
「信頼できる場所」「マクロの設定」が変更できます。）
無償のAccess Runtime（ランタイム版）は設定変更の機能を持ち合わせていません。

よって、対処方法を実施するためにはレジストリを変更する必要があります。

対処方法

以下のどちらかの箇所のレジストリを変更することです。
１．信頼できる場所に追加する
２．すべてのマクロを有効にする

レジストリ変更方法は
・レジストリエディターで変更する方法
・コマンドプロンプト（BAT）で変更する方法
があります。

両方紹介しますが、コピペするだけででき、見当違いの場所を変更してしまうなどミスも減ること、
複数台のパソコンに反映できること等考慮すると、
コマンドプロンプト（BAT）で変更する方法がおすすめです。

信頼できる場所に追加する

レジストリエディターで変更する方法

まずレジストリエディターを開きます。
「Windowsマーク」キーと「R」キーを同時押し→ファイル名を指定して実行の画面が出たら、
「regedit」と入力してエンターを押すと開くことができます。

その後、以下の階層に移動し、
「コンピューター\HKEY_CURRENT_USER\SOFTWARE\Microsoft\Office\XX.0\Access\Security\Trusted Locations」
左側の枠内の「Trusted Locations」を右クリック→新規→キー
→名前を「Location10（既定のLocation2以外の数値で設定）」に変更
→右側の枠内で右クリック→新規→文字列値→名前を「Path」
→「Path」をダブルクリック→値を普段使用するAccessファイルの入ったフォルダパスに変更
→右側の枠内でクリック→新規→DWORD値→名前を「AllowSubfolders」
→「AllowSubfolders」をダブルクリック→値を「1」に変更

これで設定完了です。
上記の階層はAccessのバージョンによって異なり、以下の通りです。

・Access 2016 Runtime
「コンピューター\HKEY_CURRENT_USER\SOFTWARE\Microsoft\Office\16.0\Access\Security\Trusted Locations」

・Access 2013 Runtime
「コンピューター\HKEY_CURRENT_USER\SOFTWARE\Microsoft\Office\15.0\Access\Security\Trusted Locations」

・Access 2010 Runtime
「コンピューター\HKEY_CURRENT_USER\SOFTWARE\Microsoft\Office\14.0\Access\Security\Trusted Locations」

コマンドプロンプト（BAT）で変更する方法

以下をAccess Runtimeのバージョンに合わせて、
管理者権限を持つユーザーにてコマンドプロンプトから実行してください。

「Windowsマーク」キーと「R」キーを同時押し→ファイル名を指定して実行の画面が出たら、
「cmd」と入力してエンターを押すと開くことができます。

BATで利用する場合、以下で紹介するコマンドをメモ帳へコピーして保存し、
最後に拡張子を「txt」から「bat」にしてから実行（クリック）してください。

・Access 2016 Runtime

REG ADD "HKEY_CURRENT_USER\SOFTWARE\Microsoft\Office\16.0\Access\Security\Trusted Locations\Location10" /v AllowSubfolders /t "REG_DWORD" /d "1" /f
REG ADD "HKEY_CURRENT_USER\SOFTWARE\Microsoft\Office\16.0\Access\Security\Trusted Locations\Location10" /v Path /t "REG_SZ" /d "C:\信頼済みフォルダ" /f

・Access 2013 Runtime

REG ADD "HKEY_CURRENT_USER\SOFTWARE\Microsoft\Office\15.0\Access\Security\Trusted Locations\Location10" /v AllowSubfolders /t "REG_DWORD" /d "1" /f
REG ADD "HKEY_CURRENT_USER\SOFTWARE\Microsoft\Office\15.0\Access\Security\Trusted Locations\Location10" /v Path /t "REG_SZ" /d "C:\信頼済みフォルダ" /f

・Access 2010 Runtime

REG ADD "HKEY_CURRENT_USER\SOFTWARE\Microsoft\Office\14.0\Access\Security\Trusted Locations\Location10" /v AllowSubfolders /t "REG_DWORD" /d "1" /f
REG ADD "HKEY_CURRENT_USER\SOFTWARE\Microsoft\Office\14.0\Access\Security\Trusted Locations\Location10" /v Path /t "REG_SZ" /d "C:\信頼済みフォルダ" /f

すべてのマクロを有効にする

レジストリエディターで変更する方法

まずレジストリエディターを開きます。
「Windowsマーク」キーと「R」キーを同時押し→ファイル名を指定して実行の画面が出たら、
「regedit」と入力してエンターを押すと開くことができます。

その後、以下の階層に移動し、
「コンピューター\HKEY_CURRENT_USER\SOFTWARE\Microsoft\Office\XX.0\Access\Security」
右側の枠内でクリック→新規→DWORD値→名前を「VBAWarnings」
→「VBAWarnings」をダブルクリック→値を「1」に変更

これで設定完了です。
上記の階層はAccessのバージョンによって異なり、以下の通りです。

・Access 2016 Runtime
「コンピューター\HKEY_CURRENT_USER\SOFTWARE\Microsoft\Office\16.0\Access\Security」

・Access 2013 Runtime
「コンピューター\HKEY_CURRENT_USER\SOFTWARE\Microsoft\Office\15.0\Access\Security」

・Access 2010 Runtime
「コンピューター\HKEY_CURRENT_USER\SOFTWARE\Microsoft\Office\14.0\Access\Security」

コマンドプロンプト（BAT）で変更する方法

以下をAccess Runtimeのバージョンに合わせて、
管理者権限を持つユーザーにてコマンドプロンプトから実行してください。

「Windowsマーク」キーと「R」キーを同時押し→ファイル名を指定して実行の画面が出たら、
「cmd」と入力してエンターを押すと開くことができます。

BATで利用する場合、以下で紹介するコマンドをメモ帳へコピーして保存し、
最後に拡張子を「txt」から「bat」にしてから実行（クリック）してください。

・Access 2016 Runtime

REG ADD "HKEY_CURRENT_USER\SOFTWARE\Microsoft\Office\16.0\Access\Security" /v VBAWarnings /t "REG_DWORD" /d "1" /f

・Access 2013 Runtime

REG ADD "HKEY_CURRENT_USER\SOFTWARE\Microsoft\Office\15.0\Access\Security" /v VBAWarnings /t "REG_DWORD" /d "1" /f

・Access 2010 Runtime

REG ADD "HKEY_CURRENT_USER\SOFTWARE\Microsoft\Office\14.0\Access\Security" /v VBAWarnings /t "REG_DWORD" /d "1" /f

どちらの対処方法がいいか

１．信頼できる場所に追加する
２．すべてのマクロを有効にする

の設定方法について紹介しましたが、どちらの方法を選べばいいかですが、
セキュリティの観点だと「信頼できる場所に追加する」、
運用の観点だと「すべてのマクロを有効にする」です。
（ただ個人的には大差ないので、完全に好みかなと個人的には思ってます……）

「信頼できる場所に追加する」を選ぶメリット

利用者の限定されるAccessなので、悪質なマクロ付きファイル自体多くないかもしれません。
ただ、「信頼できる場所に追加する」であれば最低限のセキュリティを担保することができます。
例えば、普段使用するAccessファイルの入ったフォルダ（ファイルサーバー）を信頼済みに設定しておくことで、
それ以外で使用するファイル（例えばメールで送られてきたファイル）のみ警告で注意喚起することができます。

「すべてのマクロを有効にする」を選ぶメリット

「すべてのマクロを有効にする」だとマクロは何でも有効になるので、
どこでAccessファイルを動かしても警告がでることはありません。
なので、組織内でどこのフォルダにAccessを作る等ルールを作る必要はありませんし、
例えば社内の情報部門であった場合、社員から警告についての問い合わせを全く受けることがありません。
もしレジストリエディタで設定する場合は、手順も簡単です。

投稿 【Access Runtime】セキュリティ警告’非表示’設定[ランタイム] は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

今回はAccessのクエリやマクロを使用した際に、
「メモリ不足です。」 と突然エラーコードがでてしまった場合の対処方法を紹介します。

エラーの原因は？どんな状況で発生する？

エラーメッセージが「メモリ」とあるのでパソコンのメモリと勘違いしやすいですが、
原因はクエリやマクロを使用した際に、Accessファイルが2GBを超えてしまうためです。

Accessはファイル全体で最大2GBという制限があります。
私の場合、大規模データを扱うAccessの改修中、
突然「メモリ不足です。」と出て、 以下の対処をすることで解決できました。

＜効果のあったこと＞
・Accessファイルの最適化

＜効果のなかったこと＞
・メモリを8GBから16GBに増設
・仮想メモリを付与
・MaxLocksPerFileというトランザクション処理の最大値を変更
・パソコン再起動
・Accessファイルの修復　等

対処方法

今回のエラーの原因が、Accessファイルが2GBを超過することにあるため、
対処方法は以下のファイルサイズ対策になります。

• Accessファイルの最適化（おすすめ！）
  （手動・自動による最適化）
  Accessファイルを最適化することで、不要な領域を整理する
  メリット：簡単で、今まで通り利用できる
  デメリット：最適化しても容量が2GBを超える場合対応できない
• Accessファイルの分割
  Accessファイルのデータを別のAccessファイルに作り、リンクテーブルで連携する。
  例）AccessAはAテーブル、AccessBはBテーブル。AccessAからBのリンクテーブルを貼る
  メリット：すべてのテーブル容量の合計が2GBを超過しても使用できる
  デメリット：個々のテーブル容量が2GBを超過すると使えない
• DB構築
  SQLServerやPostgresなどDBを構築し、 データはDBからリンクテーブルで利用、編集や更新等はAccessで行う
  メリット：テーブルの容量が2GBを超過しても使用できる
  デメリット：DB構築は少しハードルが高い

ただ、「メモリ不足です。」エラーが出る場合、単純に最適化ができていないことが多いため、 次項からはAccessファイルの最適化だけに絞って説明します。

Accessファイルの最適化（手動）

手動で最適化する方法です。
最適化は数分程度かかることもあるため、ユーザーの都合のいいときに最適化できます。
デメリットは意識的に行わないとならないことです。

方法は、「ファイル」→「情報」から、「データベースの最適化／修復」を選択するだけです。

押すと、最適化が開始され、右下にメッセージが現れます。

Accessファイルの最適化（自動）

自動で最適化する方法です。
Accessファイルを閉じる際に、毎回最適化されるのでユーザーは意識せず最適化できます。
デメリットとしては、毎回最適化に時間がかかることや、
複数ユーザーで頻繁に使用すると破損するリスクがあるため、あまり使用しない方がいいという意見もあります。

方法は、「ファイル」→「Accessのオプション」から、「閉じるときに最適化する」を選択するだけです。

備考：「メモリ不足です。」エラーを再現するには

まず、以下のコードを実行して、2GB弱のデータを作ります。
（コード自体は2GB以上作ろうとするので、処理の途中でAccessが固まる or エラーになります）
コードは、「Microsoft Docs：Access テーブルで操作を実行すると、”ディスク領域またはメモリが足りない” というエラーが発生する」を参考にしています。

Sub CreateBigTable()
　　Dim db As Database, rs As Recordset
　　Dim iCounter As Long, strChar As String
　　Set db = CurrentDb
　　db.Execute "CREATE TABLE BigTable (ID LONG, Field1 TEXT(255), " & _
　　　　"Field2 TEXT(255), Field3 TEXT(255), Field4 TEXT(255))", _
　　　　dbFailOnError
　　Set rs = db.OpenRecordset("BigTable", dbOpenDynaset)
　　iCounter = 0
　　strChar = String(255, " ")
　　While iCounter <= 100000000
　　　　rs.AddNew
　　　　rs!ID = iCounter
　　　　rs!Field1 = strChar
　　　　rs!Field2 = strChar
　　　　rs!Field3 = strChar
　　　　rs!Field4 = strChar
　　　　rs.Update
　　　　iCounter = iCounter + 1
　　Wend
　　MsgBox "Done!"
End Sub

次に、できたテーブルを使用してクエリを作成し、動作させると 「メモリ不足です。」のエラーが再現できます。

投稿 【Access】メモリ不足です。【対処方法・原因】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

今回はC#で使用する配列とリスト（List）のそれぞれの変換方法についてご紹介します。

配列とリストの違い

配列とリストの主な違いは要素数、データの箱の数が固定か可変かどうかです。

配列の場合は宣言時に要素数を指定するため、要素数が固定である必要があります。
また、2次元配列、3次元配列…のように多次元配列を容易に扱うことができます。

一方でリストの場合は要素数の指定がなく、
要素の追加、削除を自由にできるため、要素数を動的に変更することができます。

配列からリスト（List）への変換

配列からリストに変換する方法をご紹介します。

配列 string[] からリスト List<string> に変換するには
コンストラクタの引数に配列 string[] を渡すことで変換することができます。
※ ここでは例で型をstringで説明しています。

以下の例では1行目で配列を初期化し、2行目でリストを宣言して配列からリストに変換しています。

string[] array = {"apple", "orange", "grapes"};
List<string> list = new List<string>(array);

リスト（List）から配列への変換

リストから配列に変換する方法をご紹介します。

リスト List<string> から配列 string[] に変換するには
配列が持つメソッド ToArray() で変換することができます。
※ ここでは例で型をstringで説明しています。

以下の例では1～4行目でリストを宣言・初期化し、6行目で ToArray() メソッドを使って配列に変換しています。

List<string> list = new List<string>();
list.Add("apple");
list.Add("orange");
list.Add("grapes");

string[] array = list.ToArray();

投稿 【C#】配列からリスト（List）、リスト（List）から配列へ変換 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

AccessのクエリやVBA、SQLでよく使うデータ型変換関数をまとめました。

◇よく使うデータ型変換とは？
Googleで頻繁に検索されているものを主に紹介。
・文字列⇔数値
・文字列⇔日付型
・メモ型→文字列（テキスト型）
・数値→通貨型
その中でもあまり使わないものの説明は省略しています。

※許容範囲の大きい型から小さい型への変換は注意してください！
　エラーなく桁落ちするのでバグと認識しにくいです。

よく使うデータ型変換と使用例

文字列⇔数値

・文字列→数値（整数型）

CInt([項目名])

変換例

・文字列→数値（長整数型）

CLng([項目名])

変換例

・文字列→数値（倍精度浮動小数点型）

CDbl([項目名])

変換例

 参考：文字列→数値においてValやCSng、CDecを使わない理由

・Val
文字列から数値への変換といえば、Val関数もありますが、
文字列に「，」や「￥」、全角文字が含まれると対応できない（値が0になる）ため、あまりおすすめできません。
汎用性を考えるとCDbl([項目名])がおすすめです。

・CSng
単精度浮動小数点型は演算誤差が発生しやすくおすすめできません。
そもそもややこしい分野なのであまり理解せず使用するには危険かと思います。 

・CDec
Access クエリではサポートされていません。

・数値→文字列

CStr([項目名])

変換例

↓　文字列変換

・変換値にNullが含まれる場合

変換元の項目に値が何もない（Null）場合がありますが、
変換関数で出力される値は殆どの場合「#エラー」となってしまいます。
そのため、Nullが想定される場合はNullを指定の値に置換するNz関数を利用します。

Nz([項目名], 置換値）

例）CDbl(Nz([項目名],0))、CStr(Nz([項目名],0))
　　変換前にNullが0に置換されるので、エラーとなりません。

文字列⇔日付型

・文字列→日付型

基本、日付型への変換はCDateを使用しますが、
文字列がどのような形式かでやり方が異なります。

・「YYYY/MM/DD」「YYYY年MM月DD日」「gg年MM月DD日」形式の場合

CDate([項目名])

変換例
「#エラー」となっている箇所については、次項から説明します。

・「YYYYMMDD」形式の場合

CDate(Format([項目名],"@@@@\/@@\/@@"))

または、

DateSerial(Mid([項目名],1,4),Mid([項目名],5,2),Mid([項目名],7,2))

どちらの関数を使っても結果は特に変わらないため好みだと思いますが、
個人的には見やすく、ミスも少なそうなのでFormatを使用するのがおすすめです。

変換例

・「YYYY.MM.DD」形式の場合

CDate(Replace([項目名],".","/"))

変換例

・文字列がNullの場合

IIf(IsNull([項目名]),Null,CDate([項目名]))

NullであればNullを返すので、エラーとなりません。

・日付型→文字列型

CStr([項目名])

変換例

メモ型→文字列（テキスト型）

変換関数はありません。

変換不要で、
・メモ型→文字列
に値の代入（更新）ができます。

数値→通貨型

CCur([項目名])

変換例

参考：データ型変換関数一覧（Microsoft公式サイトより）

データ変換関数は主に以下のような「C」から始まるものがあります。
これらの他にも変換関数はありますが、これだけ知っていたら十分かと思われます。

Microsoft：データ型変換関数より引用

投稿 【Access】データ型変換まとめ【文字列・数値・日付など】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

今回は、外字（ユーザー定義文字）の作り方と、インポート・エクスポート方法を紹介します。

外字とは

外字とは、文字コードやフォントデータなどに含まれていない文字で、
日本で言う外字は、主にJIS規格の文字コード（JIS X0208）に含まれない文字を指します。
例えば、以下のような旧漢字ですね。
東洋堂：外字（旧漢字）一覧表

外字をパソコンで使用するには、
・企業や個人が作成したフォントをインストール
・自分で外字を作る（ユーザー定義文字）
に分けることができます。

今回は２つ目の、ユーザー定義文字の作り方を紹介します。

外字の作り方

まず、以下の手順で外字エディターを開きます。

１．キーボード左下の「Windowsマーク」＋「R」を押し、ファイル名を指定して実行
２．「eudcedit」と入力してOK

もしくは

１．画面右下のスタートボタンの隣に検索窓があるので、そこに「外字エディター」と入力
２．外字エディターをクリック

以下のように外字エディターが開きます。

初期画面としてコードの選択が開きますので、
使用したい文字コードを選択し、OKを押します。
（今回の例だと、文字コードF041を外字にします）

すると、以下のように格子状のエディタが開きます。
あとは絵を描くように、マウスやペンタブで文字を作成します。

試しにこんな絵をかいてみました。

外字を書き終えたら「Ctrl＋S」で上書き保存し、外字エディターを閉じます。

さて、うまくできたでしょうか。
Wordを開いて確認します。

今回は、F041を外字としましたので、「F041」と入力し「F5」キーを押して変換します。

うまく変換候補に外字がでてきました。

ばっちりですね♪

外字ファイルはどこにあるか

前項で外字を作成しましたが、どちらに保存されているか紹介します。
外字ファイルの場所は、次項で説明する外字のインポート・エクスポートをする上で知っておく必要があります。

外字は以下の外字ファイルに格納されています。
・EUDC.TTE：外字フォント。外字データを格納
・EUDC.EUF：外字エディター設定ファイル。外字フォントの管理情報を格納

これらの外字ファイルですが、フォントフォルダに格納されています。
ただ、フォントフォルダを以下のようにエクスプローラーで見に行くと、見当たりません。
（C:\Windows\Fonts）

なので、スタートボタン→Windowsシステムツールから、
コマンドプロンプトを開き、以下のコマンドをいれると確認できます。

dir /s C:\Windows\Fonts\eudc.*

このように、外字ファイルが見つかりました。

C:\Windows\Fonts のディレクトリ

2021/02/27  19:10            40,074 EUDC.EUF
2021/02/27  19:10            78,412 EUDC.TTE
               2 個のファイル             118,486 バイト

外字のインポート・エクスポート方法

前項の外字ファイルのインポート・エクスポート方法を紹介します。

どちらにしても、
まずコマンドプロンプトを「管理者として実行」して開きます。

インポート

インポートの場合、コマンドプロンプトで、以下のコマンドを実行します。

ren C:\Windows\Fonts\eudc.tte eudc_old.tte
copy /Y C:\Fonts\eudc.* C:\Windows\Fonts

例として、「C:\Fonts\」に入れた外字ファイルをインポートします。
結果、以下のようにうまくコピーできました♪

C:\WINDOWS\system32>ren C:\Windows\Fonts\eudc.tte eudc_old.tte

C:\WINDOWS\system32>copy /Y C:\Fonts\eudc.* C:\Windows\Fonts
C:\Fonts\EUDC.EUF
C:\Fonts\eudc.tte
        2 個のファイルをコピーしました。

なお「ren」でリネームをかけていますが、バックアップ目的ではなく、
リネームせずコピーコマンドを実行すると、
「要求された操作はユーザー マップ セクションで開いたファイルでは実行できません。」
とエラーが出るからです。詳しくは後述します。

エクスポート

エクスポートの場合、コマンドプロンプトで、以下のコマンドを実行します。
例として、「C:\Fonts\」に外字ファイルをエクスポートします。

copy /Y C:\Windows\Fonts\eudc.* C:\Fonts

結果、以下のようにうまくコピーできました♪

C:\WINDOWS\system32>copy /Y C:\Windows\Fonts\eudc.* C:\Fonts
C:\Windows\Fonts\EUDC.EUF
C:\Windows\Fonts\EUDC.TTE
        2 個のファイルをコピーしました。

エラー事例：「要求された操作はユーザー マップ セクションで開いたファイルでは実行できません。」と出た場合

EUDC.TTEをコピーして上書きしようとすると、
「要求された操作はユーザー マップ セクションで開いたファイルでは実行できません。」と出ます。
EUDC.TTEは外字データの入っているファイルなので、何かしらのソフトで掴んでいるため、と想定されます。

このようなエラーがでます。

C:\WINDOWS\system32>copy /Y C:\Fonts\eudc.* C:\Windows\Fonts
C:\Fonts\EUDC.EUF
C:\Fonts\EUDC.TTE
要求された操作はユーザー マップ セクションで開いたファイルでは実行できません。
        1 個のファイルをコピーしました。

なので、前述のインポート方法に書いたように、
一度リネームしてあげる必要があります。

エラー事例：「アクセスが拒否されました。」と出た場合

例えば、コマンドプロンプトを管理者権限で開かずコピーコマンドを実行したときなど、
Fontsフォルダのデータをコピーもしくは更新しようとすると、
アクセス権限の関係で「アクセスが拒否されました。」と出ます。

このようなエラーです。

C:\Users\XXXX>copy /Y C:\Fonts\eudc.* C:\Windows\Fonts
C:\Fonts\EUDC.EUF
アクセスが拒否されました。
C:\Fonts\EUDC.TTE
アクセスが拒否されました。
        0 個のファイルをコピーしました。

その場合、２つの対処方法があります。

１．コマンドプロンプトを管理者で開き、コピーする

インポート・エクスポート方法にもあったように、
コマンドプロンプトを管理者で開いてコピーする方法です。

２．「cacls」コマンドで、ユーザーに権限を与える

フォントフォルダ全体にユーザー権限を与えることでアクセスできるようにします。

これをするメリットとして、以下のコマンドを一度だけ管理者で実行しておけば、
２回目からはユーザー権限でもコピーできるようになります。
管理者ではないユーザーに共通のフォントファイルを定期的に更新したい場合など有効かと思います。

cacls C:\Windows\Fonts /e /p XXXX（ユーザー名）:F

このように権限が変わり、コピーできるようになります。

C:\WINDOWS\system32>cacls C:\Windows\Fonts /e /p XXXX（ユーザー名）:F
処理ディレクトリ: C:\Windows\Fonts

ユーザー名が分からない場合は、コマンドプロンプトで「whoami」と入力してみてください。

投稿 【Windows10】外字の作り方、インポート・エクスポート方法 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

こんにちは！
前回はJavaScriptでカレンダーを作成しました。
今回は、前回作成したカレンダーに祝日対応を組み込んでいきたいと思います！

前回の記事は下のリンクからどうぞ♪

【初心者向け】JavaScriptでカレンダー作成【サンプル】

JavaScript（JS）でカレンダーをライブラリなしで作り方を紹介。前月、次月を含めた1週間表示や日付の値を取得する方法をHTML,CSSソースやデモページ付きで解説！プログラミング初心者の方へ勉強や参考に！

nyanblog2222.com

2021.01.07

はじめに

祝日の対応ですが、今回はCSVファイルを読み込んで日付判定を行います。
CSVファイルは内閣府のWebサイトから取得できます。
※ 文字コードをShift-JISからUTF-8に変更しました。

直接ダウンロードされる場合はここをクリックしてください。

データは日付、祝日名の2項目で作成されています。

フロー（箇条書き）

箇条書きで処理フローを記述していきます。
CSVファイルの読み込みと当月の日付判定のそれぞれで変更を加えます。

CSVファイル読み込み

1. CSVファイルを読み込み
2. 読み込み完了後、カレンダー表示

当月の日付判定

1. その日付の情報を取得（本日か、祝日か等）
2. 条件に応じてカレンダー（HTML）を設定

HTML

<div class="wrapper">
    <!-- xxxx年xx月を表示 -->
    <h1 id="header"></h1>

    <!-- ボタンクリックで月移動 -->
    <div id="next-prev-button">
        <button id="prev" onclick="prev()">‹</button>
        <button id="next" onclick="next()">›</button>
    </div>

    <!-- カレンダー -->
    <div id="calendar"></div>
</div>

こちらの記事のHTMLと同じなので、解説は省略します♪

【初心者向け】JavaScriptでカレンダー作成【サンプル】

JavaScript（JS）でカレンダーをライブラリなしで作り方を紹介。前月、次月を含めた1週間表示や日付の値を取得する方法をHTML,CSSソースやデモページ付きで解説！プログラミング初心者の方へ勉強や参考に！

nyanblog2222.com

2021.01.07

CSS

前回の記事とほとんど変わりなしですが、
祝日のクラス（=holiday）に日曜日と同様のcolorスタイルの設定を追加しました。

td:first-child,
td.holiday{
    color: red;
}

JavaScript

コード

全体のコードです。
次項で解説しますが、前回の投稿で解説した内容は割愛いたします。

const week = ["日", "月", "火", "水", "木", "金", "土"];
const today = new Date();
// 月末だとずれる可能性があるため、1日固定で取得
var showDate = new Date(today.getFullYear(), today.getMonth(), 1);

// 祝日取得
var request;
window.onload = function () {
    request = new XMLHttpRequest();
    request.open('get', 'syukujitsu.csv', true);
    request.send(null);
    request.onload = function () {
        // 初期表示
        showProcess(today, calendar);
    };
};

// 前の月表示
function prev(){
    showDate.setMonth(showDate.getMonth() - 1);
    showProcess(showDate);
}

// 次の月表示
function next(){
    showDate.setMonth(showDate.getMonth() + 1);
    showProcess(showDate);
}

// カレンダー表示
function showProcess(date) {
    var year = date.getFullYear();
    var month = date.getMonth(); // 0始まり
    document.querySelector('#header').innerHTML = year + "年 " + (month + 1) + "月";

    var calendar = createProcess(year, month);
    document.querySelector('#calendar').innerHTML = calendar;
}

// カレンダー作成
function createProcess(year, month) {
    // 曜日
    var calendar = "<table><tr class='dayOfWeek'>";
    for (var i = 0; i < week.length; i++) {
        calendar += "<th>" + week[i] + "</th>";
    }
    calendar += "</tr>";

    var count = 0;
    var startDayOfWeek = new Date(year, month, 1).getDay();
    var endDate = new Date(year, month + 1, 0).getDate();
    var lastMonthEndDate = new Date(year, month, 0).getDate();
    var row = Math.ceil((startDayOfWeek + endDate) / week.length);

    // 1行ずつ設定
    for (var i = 0; i < row; i++) {
        calendar += "<tr>";
        // 1colum単位で設定
        for (var j = 0; j < week.length; j++) {
            if (i == 0 && j < startDayOfWeek) {
                // 1行目で1日まで先月の日付を設定
                calendar += "<td class='disabled'>" + (lastMonthEndDate - startDayOfWeek + j + 1) + "</td>";
            } else if (count >= endDate) {
                // 最終行で最終日以降、翌月の日付を設定
                count++;
                calendar += "<td class='disabled'>" + (count - endDate) + "</td>";
            } else {
                // 当月の日付を曜日に照らし合わせて設定
                count++;
                var dateInfo = checkDate(year, month, count);
                if(dateInfo.isToday){
                    calendar += "<td class='today'>" + count + "</td>";
                } else if(dateInfo.isHoliday) {
                    calendar += "<td class='holiday' title='" + dateInfo.holidayName + "'>" + count + "</td>";
                } else {
                    calendar += "<td>" + count + "</td>";
                }
            }
        }
        calendar += "</tr>";
    }
    return calendar;
}

// 日付チェック
function checkDate(year, month, day) {
    if(isToday(year, month, day)){
        return {
            isToday: true,
            isHoliday: false,
            holidayName: ""
        };
    }

    var checkHoliday = isHoliday(year, month, day);
    return {
        isToday: false,
        isHoliday: checkHoliday[0],
        holidayName: checkHoliday[1],
    };
}

// 当日かどうか
function isToday(year, month, day) {
    return (year == today.getFullYear()
        && month == (today.getMonth())
        && day == today.getDate());
    }

// 祝日かどうか
function isHoliday(year, month, day) {
    var checkDate = year + '/' + (month + 1) + '/' + day;
    var dateList = request.responseText.split('\n');
    // 1行目はヘッダーのため、初期値1で開始
    for (var i = 1; i < dateList.length; i++) {
        if (dateList[i].split(',')[0] === checkDate) {
            return [true, dateList[i].split(',')[1]];
        }
    }
    return [false, ""];
}

解説

・祝日データ（CSVファイル）取得

// 祝日取得
var request;
window.onload = function () {
    request = new XMLHttpRequest();
    request.open('get', 'syukujitsu.csv', true);
    request.send(null);
    request.onload = function () {
      // 初期表示
      showProcess(today, calendar);
    };
};

XMLHttpRequestオブジェクトを使用して、変数 request にCSVデータを格納しています。
1. request.open()関数でデータ取込のリクエストを行います。
2. request.send()関数でリスエストをサーバに送信します。
3. 7～10行目はロードが成功して完了後に呼ばれます。

つまり、CSVファイルの読み込みが完了した後にカレンダー表示の関数（showProcess）を呼び出しています。

・当月の日付を設定　コード：70～77行目

var dateInfo = checkDate(year, month, count);
if(dateInfo.isToday){
    calendar += "<td class='today'>" + count + "</td>";
} else if(dateInfo.isHoliday) {
    calendar += "<td class='holiday' title='" + dateInfo.holidayName + "'>" + count + "</td>";
} else {
    calendar += "<td>" + count + "</td>";
}

1行目：変数 dateInfoに日付チェックの戻り値を設定します。

2～8行目：dateInfoを使って条件に応じて日付を設定していきます。

・dateInfo.isTodayがtrueの場合、クラスtodayを付与して設定。
・dateInfo.isHolidayがtrueの場合、クラスholidayを付与、titleに祝日名を設定。
・上記以外の場合、日付をそのまま設定。

titleに祝日名を設定しているのは、祝日名をツールチップとして表示させるためです。
ツールチップ：カーソルやマウスポインタを合わせると小さな領域が注釈が表示されるもの。

・日付チェック　checkDate関数

引数：year（年）、month（月）、day（日）
戻り値：日付の情報
・当日かどうか（Bool）
・祝日かどうか（Bool）
・祝日名（文字列）

// 日付チェック
function checkDate(year, month, day) {
    if(isToday(year, month, day)){
        return {
            isToday: true,
            isHoliday: false,
            holidayName: ""
        };
    }

    var checkHoliday = isHoliday(year, month, day);
    return {
        isToday: false,
        isHoliday: checkHoliday[0],
        holidayName: checkHoliday[1],
    };
}

日付チェックの関数です。
条件に応じて戻り値のオブジェクトを作成しています。

・当日判定　isToday関数

引数：year（年）、month（月）、day（日）
戻り値：当日かどうか（Bool）

// 当日かどうか
function isToday(year, month, day) {
    return (year == today.getFullYear()
    && month == (today.getMonth())
    && day == today.getDate());
}

today（Date型）を使って、当日かどうかを判定します。

・祝日判定　isHoliday関数

引数：year（年）、month（月）、day（日）
戻り値：配列 [祝日かどうか（Bool）, 祝日名]

// 祝日かどうか
function isHoliday(year, month, day) {
    var checkDate = year + '/' + (month + 1) + '/' + day;
    var dateList = request.responseText.split('\n');
    // 1行目はヘッダーのため、初期値1で開始
    for (var i = 1; i < dateList.length; i++) {
        if (dateList[i].split(',')[0] === checkDate) {
            return [true, dateList[i].split(',')[1]];
        }
    }
    return [false, ""];
}

3行目：CSVデータの日付はYYYY/MM/DD形式のため、
引数で渡された年月日をYYYY/MM/DD形式で変数checkDateに設定。

4行目：変数dataListには、CSVデータを行毎に配列に格納。

6～10行目：CSVの行数分for文を回します。
ファイルの1行目はヘッダー行のため、初期値=1で設定。

7～9行目：
祝日：dateList[i].split(‘,’)[0]
祝日名：dateList[i].split(‘,’)[1]

祝日とcheckDateが一致する場合、戻り値を配列 [true, 祝日名]で設定して処理を完了。
どのデータとも一致しない場合は戻り値を配列 [false, 空文字]でセットして処理を完了。

デモ

こちらがデモページになります。
祝日の日付が赤くなっており、該当の日付にカーソルを合わせると祝日の名前が表示されます。

ただ、このCSVファイルはその年分までの日付しか入っていないため、
2024年以降の祝日には対応されていません。ご注意ください…。

最後に

いかがでしたでしょうか。
カレンダーを確認するときに祝日は分かっている方が見やすいですね♪

実装も簡単にできたのでお勧めです。

良ければ他の投稿もご覧ください！

投稿 【初心者向け】JavaScriptで祝日対応のカレンダー作成【サンプル】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

こんにちは！
今回はJavaScriptでカレンダーを作成してみました。
カレンダー作成にはライブラリも存在しますが、勉学のために作成する方が多いかと思いますので今回は使用していません。自作すると、カスタマイズが容易であることもメリットですね！

本記事の続きでカレンダーに祝日も反映させました！

【初心者向け】JavaScriptで祝日対応のカレンダー作成【サンプル】

JavaScriptで祝日対応のカレンダーを作成しました。内容：内閣府のWebサイトから取得したCSVファイルを読み込んで日付判定を行い、祝日を赤字表示させツールチップに祝日名を表示する。var request = new XMLHttpRequest();...

nyanblog2222.com

2021.01.09

はじめに

まずはカレンダーに持たせる機能を決定します。
今回は以下の機能を持たせることにしました。

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

また、次以降の投稿で祝日、スケジュール入力の機能を追加したいと考えています。

フロー（箇条書き）

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

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

HTML

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

<div class="wrapper">
    <!-- xxxx年xx月を表示 -->
    <h1 id="header"></h1>

    <!-- ボタンクリックで月移動 -->
    <div id="next-prev-button">
        <button id="prev" onclick="prev()">‹</button>
        <button id="next" onclick="next()">›</button>
    </div>

    <!-- カレンダー -->
    <div id="calendar"></div>
</div>

CSS

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

ただ、JavaScriptで以下にクラスを設定しているので、ご注意ください。

先月、翌月の日付：disabled
当日：today

@charset "utf-8";

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

/*カレンダー*/
#calendar {
    text-align: center;
    width: 100%;
}
table {
    outline: 2px solid #ddd;
    border-collapse: collapse;
    width: 100%;
}
th {
    color: #000;
}
th, td {
    outline: 1px solid #ddd;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}
/*日曜日*/
td:first-child {
    color: red;
}
/*土曜日*/
td:last-child {
    color: blue;
}
/*前後月の日付*/
td.disabled {
    color: #ccc;
}
/*本日*/
td.today {
    background-color: #D65E72;
    color: #fff;
}

/*ボタン*/
#next-prev-button {
    position: relative;
}
#next-prev-button button{
    cursor: pointer;
    background: #B78D4A;
    color: #fff;
    border: 1px solid #B78D4A;
    border-radius: 4px;
    font-size: 1rem;
    padding: 0.5rem 2rem;
    margin: 1rem 0;
}
#next-prev-button button:hover{
    background-color: #D4BB92;
    border-color: #D4BB92;
}
#prev {
    float: left;
}
#next {
    float: right;
}

JavaScript

JavaScriptで実際にカレンダーを作成、表示していきます。

コード

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

const week = ["日", "月", "火", "水", "木", "金", "土"];
const today = new Date();
// 月末だとずれる可能性があるため、1日固定で取得
var showDate = new Date(today.getFullYear(), today.getMonth(), 1);

// 初期表示
window.onload = function () {
    showProcess(today, calendar);
};
// 前の月表示
function prev(){
    showDate.setMonth(showDate.getMonth() - 1);
    showProcess(showDate);
}

// 次の月表示
function next(){
    showDate.setMonth(showDate.getMonth() + 1);
    showProcess(showDate);
}

// カレンダー表示
function showProcess(date) {
    var year = date.getFullYear();
    var month = date.getMonth();
    document.querySelector('#header').innerHTML = year + "年 " + (month + 1) + "月";

    var calendar = createProcess(year, month);
    document.querySelector('#calendar').innerHTML = calendar;
}

// カレンダー作成
function createProcess(year, month) {
    // 曜日
    var calendar = "<table><tr class='dayOfWeek'>";
    for (var i = 0; i < week.length; i++) {
        calendar += "<th>" + week[i] + "</th>";
    }
    calendar += "</tr>";

    var count = 0;
    var startDayOfWeek = new Date(year, month, 1).getDay();
    var endDate = new Date(year, month + 1, 0).getDate();
    var lastMonthEndDate = new Date(year, month, 0).getDate();
    var row = Math.ceil((startDayOfWeek + endDate) / week.length);

    // 1行ずつ設定
    for (var i = 0; i < row; i++) {
        calendar += "<tr>";
        // 1colum単位で設定
        for (var j = 0; j < week.length; j++) {
            if (i == 0 && j < startDayOfWeek) {
                // 1行目で1日まで先月の日付を設定
                calendar += "<td class='disabled'>" + (lastMonthEndDate - startDayOfWeek + j + 1) + "</td>";
            } else if (count >= endDate) {
                // 最終行で最終日以降、翌月の日付を設定
                count++;
                calendar += "<td class='disabled'>" + (count - endDate) + "</td>";
            } else {
                // 当月の日付を曜日に照らし合わせて設定
                count++;
                if(year == today.getFullYear()
                  && month == (today.getMonth())
                  && count == today.getDate()){
                    calendar += "<td class='today'>" + count + "</td>";
                } else {
                    calendar += "<td>" + count + "</td>";
                }
            }
        }
        calendar += "</tr>";
    }
    return calendar;
}

解説

先述したコードに対して細かく解説していきます！
結構長くなってしまったので、不要な方は飛ばしてください。

・グローバル変数の定義

const week = ["日", "月", "火", "水", "木", "金", "土"];

曜日を格納した配列を定義しています。
変更予定がないので、定数（const）で作成しています。

const today = new Date();
var showDate = new Date(today.getFullYear(), today.getMonth(), 1);

・本日の日付オブジェクトを定数で宣言
・表示する日付オブジェクトを宣言

表示する日付オブジェクトは初期化では”today”の年月＋1日固定で作成します。

Q：なぜ”today”をそのまま使用しないか
A：前の月、次の月表示で”getMonth()”に+-1を行っていますが、末日だと先々月、もしくは翌々日になることがあります。

・初期表示

window.onload = function () {
    showProcess(today, calendar);
};

当日の日付オブジェクトを使用して、showProcess関数を呼び出して初期表示を行います。

window.onload = function () {・・・};

↑はHTMLが読み込まれた直後に呼び出される関数です。

・prev()、next()関数

// 前の月表示
function prev(){
    showDate.setMonth(showDate.getMonth() - 1);
    showProcess(showDate);
}

// 次の月表示
function next(){
    showDate.setMonth(showDate.getMonth() + 1);
    showProcess(showDate);
}

「＜」クリックでprev()、「＞」クリックでnext()の関数がそれぞれ呼び出されます。

prev()関数の場合はshowDateオブジェクトに1月分減算後、
next()関数の場合はshowDateオブジェクトに1月分加算後にshowProcess関数を呼び出してカレンダーを表示します。

・カレンダー表示　showProcess関数

引数：date（表示するDateオブジェクト）

var year = date.getFullYear();
var month = date.getMonth();
document.querySelector('#header').innerHTML = year + "年 " + (month + 1) + "月";

ヘッダー（id=”#header”）に年月を表示させます。
getMonth()は0始まりのため、1月の場合、0が取得されます。
そのため、3行目では (month + 1) で月を設定します。

var calendar = createProcess(year, month);
document.querySelector('#calendar').innerHTML = calendar;

createProcess関数でカレンダーを作成し、id=”#calendar”にカレンダーを設定します。

・カレンダー作成　createProcess関数

引数：year（年）、month（月）
戻り値：作成したカレンダー

// 曜日
var calendar = "<table><tr class='dayOfWeek'>";
for (var i = 0; i < week.length; i++) {
    calendar += "<th>" + week[i] + "</th>";
}
calendar += "</tr>";

定数”week”を使用してカレンダー上部に表示させる、曜日を設定します。

var count = 0;
var startDayOfWeek = new Date(year, month, 1).getDay();
var endDate = new Date(year, month + 1, 0).getDate();
var lastMonthEndDate = new Date(year, month, 0).getDate();
var row = Math.ceil((startDayOfWeek + endDate) / week.length);

日付を設定するのに必要な変数を定義します。
それぞれの変数は以下の内容を定義しています。

count：日付のカウント
startDayOfWeek：表示する月の1日の曜日
endDate：表示する月の末日
lastMonthEndDate：表示する先月の末日
row：カレンダー（日付部分）の行数

// 1行ずつ設定
for (var i = 0; i < row; i++) {
    calendar += "<tr>";
    // 1colum単位で設定
    for (var j = 0; j < week.length; j++) {
        if (i == 0 && j < startDayOfWeek) {
            // 1行目で1日まで先月の日付を設定
            calendar += "<td class='disabled'>"
                     + (lastMonthEndDate - startDayOfWeek + j + 1) + "</td>";
        } else if (count >= endDate) {
            // 最終行で最終日以降、翌月の日付を設定
            count++;
            calendar += "<td class='disabled'>" + (count - endDate) + "</td>";
        } else {
            // 当月の日付を曜日に照らし合わせて設定
            count++;
            if(year == today.getFullYear()
              && month == (today.getMonth())
              && count == today.getDate()){
                calendar += "<td class='today'>" + count + "</td>";
            } else {
                calendar += "<td>" + count + "</td>";
            }
        }
    }
    calendar += "</tr>";
}

始めのfor文は行単位、2つ目のfor文はカラム（日付）単位で回します。

3行目、26行目ではtrタグで括っています。

6行目の条件は「1行目、かつ、1日の曜日未満」の場合に8、9行目の処理を行います。
その場合にクラス「disabled」を付与して日付を設定します。
計算式は例で実際に当てはめてみましょう。

例：2021/01
lastMonthEndDate = 31
startDayOfWeek = 5 （金曜日）
日曜日：31 – 5 + 0 + 1 = 27
月曜日：31 – 5 + 1 + 1 = 28

10行目の条件は当月の最終日以降、翌月の日付を設定します。
上記同様、クラス「disabled」を付与して日付を設定します。

それ以外の14行目～24行目の処理は当月の日付1日から末日まで入ります。
また、17行目～19行目の条件は本日の日付かどうかチェックしており、本日の場合はクラス「today」を付与しています。

デモ

こちらがデモページになります。
初期表示は当月で表示され、本日が赤く表示されていると思います。

また、＜＞のボタンをクリックすることで月の移動ができますので、お試しください♪

最後に

いかがでしたでしょうか。
ライブラリを使わなくても意外と簡単に実装ができました！

この後、カレンダーに祝日対応してみましたので、
良ければこちらの投稿もご覧ください！

【初心者向け】JavaScriptで祝日対応のカレンダー作成【サンプル】

JavaScriptで祝日対応のカレンダーを作成しました。内容：内閣府のWebサイトから取得したCSVファイルを読み込んで日付判定を行い、祝日を赤字表示させツールチップに祝日名を表示する。var request = new XMLHttpRequest();...

nyanblog2222.com

2021.01.09

【サンプル】JavaScriptのコードまとめリンク集

本記事では当ブログで上げているJavaScript記事のまとめリンク集になります。目次でカテゴリ分けをしているので、気になる内容がありましたら目次から飛んでみてください♪

nyanblog2222.com

2022.09.01

投稿 【初心者向け】JavaScriptでカレンダー作成【サンプル】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

今回はパソコンの入れ替え後等にVBAマクロ付きのExcelやAccessファイルを使用した際、
「このプロジェクトのコードは、64ビットシステムで使用するために更新する必要があります。
Declareステートメントの確認および更新を行い、
次にDeclareステートメントにPrtSafe 属性を設定してください。」
とエラーコードがでてしまった場合の対処方法を紹介します。

エラーの原因は？どんな状況で発生する？

Office64bitで、
Win32API（32bitのWindows API）を呼び出すと該当のエラーメッセージがでます。
64bitと32bitでは使用できる領域が異なるため、
通常そのまま使うと何かしら問題が発生する場合があります。
よって「使っても良いか」確認の意味も込めたエラーメッセージとなります。

例えば、パソコンの入れ替えやOfficeのバージョンアップで、
Officeが32bitから64bitに変わった際に発生します。

対処方法

対処方法は以下になります。

• Declare文の変更（※１）
  ①PtrSafeを追加
  ②Long型を適宜PtrLong型に変更
• API実行箇所をDeclare文の型に合わせる（引数・戻り値） 

※１　Office64bitでのDeclare文の記述方法は、
以下のとおりMicrosoft公式より公開されていますので、 コピーして使用します。

Microsoft Docs：Win32API_PtrSafe　より、
「Office 2010 ヘルプファイル:64 ビットのサポートが含まれる Win32API_PtrSafe」
へのリンクにとび、
「Office2010Win32API_PtrSafe.exe」をダウンロード・インストール。
インストールすると、
「C:\Office 2010 Developer Resources\Documents\Office2010Win32API_PtrSafe」 に、
Win32API_PtrSafe.TXTが出来上がるので、こちらを開き、該当箇所をコピペする。

なお、Office2010より64bitが新しくできたためOffice2010となっていますが、
他バージョンでも同じように上記のURLからダウンロードします。

コード変更例

例えば、以下のようなコードを記述しているとして、どのように修正するか説明します。
コード内容としては、”user32”というWin32APIを使用し、
「アクティブウィンドウの名前を取得して、出力する」という単純なものです。

Declare Function GetActiveWindow Lib "user32" () As Long
Declare Function GetWindowText Lib "user32" Alias "GetWindowTextA" (ByVal hwnd As Long, ByVal lpString As String, ByVal cch As Long) As Long

Private Sub GetWindowName()

'アクティブウインドウのハンドル取得
Dim lWindowHwnd As Long
lWindowHwnd = GetActiveWindow()

'バッファを確保
Dim sWindowName As String
sWindowName = String(256, Chr(0))

'アクティブウインドウのウインドウ名取得
Dim lWindowNameLen As Long
lWindowNameLen = GetWindowText(lWindowHwnd, sWindowName, Len(sWindowName))

'イミディエイトに出力
Debug.Print "現在アクテイブウインドウのタイトル名は"
Debug.Print sWindowName
Debug.Print "長さは" + Str(lWindowNameLen) + "です"

End Sub

もちろん、Office32bitではエラーメッセージなしで正常に動きます。

Declare文の変更

まず、Win32API_PtrSafe.TXTを開いて該当の箇所
「GetActiveWindow」「GetWindowTextA」などで検索し、コピペします。

Declare PtrSafe Function GetActiveWindow Lib "user32" () As LongPtr
Declare PtrSafe Function GetWindowText Lib "user32" Alias "GetWindowTextA" (ByVal hwnd As LongPtr, ByVal lpString As String, ByVal cch As Long) As Long

Declare文の変更はたったこれだけです♪
注意点は、必ず「Win32API_PtrSafe.TXT」を見てコピペすることです。
バグの元なので全てのLong型をPtrLong型にしないようにしてください。

API実行箇所をDeclare文の型に合わせる（引数・戻り値）

次にAPI実行箇所については、Declare文と睨めっこしながら変更していきます。
今回の場合、GetActiveWindowの戻り値の型であり、
GetWindowTextの第一引数であるlWindowHwndを Long型からLongPtr型に変えます。
命名規則にもよりますが、変数名のルールで型名も考慮しているのであればそちらも変更します。
（ lWindowHwndからlpWindowHwnd）

Private Sub GetWindowName()

'アクティブウインドウのハンドル取得
Dim lpWindowHwndAs LongPtr
lpWindowHwnd = GetActiveWindow()

'バッファを確保
Dim sWindowName As String
sWindowName = String(256, Chr(0))

'アクティブウインドウのウインドウ名取得
Dim lWindowNameLen As Long
lWindowNameLen = GetWindowText(lpWindowHwnd, sWindowName, Len(sWindowName))

'イミディエイトに出力
Debug.Print "現在アクテイブウインドウのタイトル名は"
Debug.Print sWindowName
Debug.Print "長さは" + Str(lWindowNameLen) + "です"

End Sub

他にも元からLong型のものがありますが、Declare文でもLong型なので変更しません。

以上で、VBAのOffice64bit対応は完了です。

補足：PtrSafeやPtrLong型について

簡単に紹介すると以下になります。

• PtrSafe
  Office64bitで実行しても安全であると明示するキーワード
•  

• PtrLong型
  Office32bitではLong型に、Office64bitではLongLong形になる型

このことから、
Office64bitで使えるようにコードを書き換えても、 Office32bitで動くようになっています。

投稿 【対処方法】このプロジェクトのコードは、64ビットシステムで…【Declare,PrtSafe】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

ユーザー定義の用紙サイズ設定とは

なぜ設定をコピーする必要があるか

ユーザー定義の用紙サイズ設定のコピー方法（手動）

1. コピー元のパソコンからレジストリのユーザー定義の用紙サイズ設定をエクスポート
2. コピーする前にレジストリを念の為バックアップ
3. ユーザー定義用紙設定をインポート
4. Print Spoolerの再起動、もしくはパソコンの再起動

１．コピー元のパソコンからレジストリのユーザー定義の用紙サイズ設定をエクスポート

２．コピーする前にレジストリを念の為バックアップ

３．ユーザー定義用紙設定をインポート

４．Print Spoolerの再起動、もしくはパソコンの再起動

ユーザー定義の用紙サイズ設定のコピー方法（BAT）

ユーザー定義抽出.bat（旧パソコンで使用）

@REM 管理者権限で実行すること

ECHO OFF
SET DEF_DIR=C:\USERDEF

ECHO ユーザー定義出力
REG EXPORT HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Print\Forms %DEF_DIR%\UserDef_New.REG

PAUSE

ユーザー定義変更.bat（新パソコンで使用）

@REM 管理者権限で実行すること

ECHO OFF
SET DEF_DIR=C:\USERDEF

ECHO レジストリバックアップ
REG EXPORT HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Print\Forms %DEF_DIR%\UserDef_Backup.REG

ECHO ユーザー定義インポート
%WINDIR%\REGEDIT %DEF_DIR%\UserDef_New.REG

ECHO PrintSpoolerの再起動
NET STOP SPOOLER
NET START SPOOLER

PAUSE

投稿 【プリンター】ユーザー定義の用紙サイズ設定をコピーする方法【レジストリ設定】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

正常に動いていたAccessファイルが、突然 「Microsoft AccessがOLEサーバーまたはActiveXコントロールと通信しているときにエラーが発生しました」 とエラーメッセージが出て使えなくなってしまった場合の対処方法を紹介します。

エラーの原因は？どんな状況で発生する？

エラー原因

調べてみると、対象のAccessファイルのフォーム等に何かしらの不具合があることが原因のようでした。
ただ、「これが原因！」というのは判別しづらいようですね。

どんな状況で発生するか

色々なパターンがあるようですが、
主にAccessファイルを作成したパソコンと異なるパソコンで使用すると起きるようです。

参考として、私は以下の状況でエラーが発生しました。

これは私の想像になりますが、新パソコンのチェック機能の強化により、旧パソコンではチェックされていなかった不具合が表に出てきてしまったのかもしれません。
新しいパソコンだと性能はもちろんセキュリティなども強化され、昔できていたことができなくなることはよくあることだからです。

対処方法・注意事項

対処方法

対処方法は「新しいAccessファイルを作り、元のAccessファイルから全ての情報をインポートする」です。
（説明する際の画像はMicrosoft Office 2010のものですが、手順自体はMicrosoft Office 2019でも同じです）

詳細な手順は以下になります。

（前準備）拡張子がmdbの場合は、accdb変換
必須ではありませんが、mdbはいつか使えなくなる危険性があるのでこのタイミングで変換しておいた方が無難です。
例）CSVインポート.mdb→CSVインポート.accdb
変換した場合はショートカットはもちろん、Accessファイルが他のAccessファイルからリンクテーブルとして参照されている場合、リンク先が変わってしまうためご注意ください。

１．対象のAccessファイルが入っているフォルダと異なるフォルダで右クリックし、 新規作成からMicrosoft Access データベースをクリック

２．新規作成されたAccessファイルを、対象のAccessファイルと同じ名前とする

例）「新規 Microsoft Access データベース.accdb」を作成し、「CSVインポート.accdb」にリネーム

３．２で作成したAccessファイルを開き、外部データタブからAccessデータベースのインポートを選択

４．対象のAccessファイルをクリックして、OKを押すと「オブジェクトのインポート」画面が出るので、オプションをクリック

５．オプションで出てきたチェック項目を全てチェックする

６．全てのタブ（テーブル・クエリ・フォーム・レポート・マクロ・モジュール）ですべて選択をクリックし、OKをクリック

７．Accessファイルを閉じて、元々のAccessファイルのフォルダに移し替える。

※元々のAccessファイルは念のため名前を変えてバックアップとして残しておいてください。

これでAccessファイルの作り直しは完了です。

インポート中に何かしらエラーで取り込めないものがありますが、
恐らく何かしら問題のあるオブジェクトがほとんどですので、
基本不要なものなので気にしなくてもいいかと思います。

ただ、 念のためそのオブジェクトが使われていないかはインポート後に確認して、
必要であれば個別に対象のAccessファイルからコピペしてきてください。

注意事項

上記方法では、VBAのプロジェクト名は引き継がれないので注意してください。
例えば、DAOを使ってテーブル操作をする場合は、Databeseオブジェクトの変数を宣言していたりしますが、その場合、被らないようにプロジェクト名をあえて固有の名前に変えていたりします。

その場合、インポート後に手で直してください。

↓

投稿 【対処方法】Microsoft AccessがOLEサーバーまたはActiveXコントロールと通信しているときにエラーが発生しました は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

こんにちは！
今回はPythonでファイルをリネームするプログラムを作成してみましたので、ご紹介いたします。
良かったら最後まで見てみてくださいね♪

今回は「osモジュール」「globモジュール」をそれぞれ使って一括でリネーム処理をしています。
ファイルをそのままリネームしているので、動かす前にファイルのバックアップは取るようにしてくださいね。

 やりたいこと

こちらが処理前のディレクトリ構成です。

各画像ファイル名の頭4桁「a001」等をキーに連番を振っていきます。
例えば「a001」から「a002」に変わると、また連番が001始まりになります。

サンプルコード

import os
import glob

# １．フォルダパス設定
in_folder = "c:/sample/in/"

# ２．処理するファイル一覧情報を取得
file_list = glob.glob(in_folder + "*")

# ３．連番付与するための変数を初期化
cnt = 0
hold_page = ""

for f in file_list:
    # ４．f_titleにファイル名（拡張子なし）、f_extに拡張子
    f_title, f_ext = os.path.splitext(os.path.basename(f))
    now_page = f_title[1:4]

    # ５．連番設定（キーブレイク）
    if hold_page != now_page:
        cnt = 0
        hold_page = now_page
    cnt += 1
    
    # ６．リネーム処理
    os.rename(f, os.path.join(
        in_folder, now_page + "_picture_" + '{0:03d}'.format(cnt) + f_ext))

以下、コードの解説です。

１．in_folderに元フォルダのパスを設定

２．処理するファイルの情報を一覧で取得

３．連番を付与する変数（cnt、hold_page）を初期化

４．f_titleにファイル名（拡張子なし）、f_extに拡張子を設定
※ リネーム処理に使用します。

５．連番のカウント処理
1つ前のファイル名とキーが異なる場合、連番リセット

６．ファイルリネーム処理

４～６まで全ファイル分処理を続ける

このコードを実行すると、元フォルダに画像ファイルがリネームされてコピーされます。

終わりに

いかがでしたでしょうか？
現在Python勉強中の身ですが、プログラムを動かして結果を確認できるものを作成するのは達成感もありますので、良かったら参考にしてみてください！

ここまでご覧いただきありがとうございました！

投稿 【Python】【キーで連番】ファイル名を一括でリネームする方法 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

こんにちは！前回はファイル名を一括でリネームする方法について、ご紹介いたしました。
今回はファイル名に連番を振る際にキーを設定してキーの値が変わった時に連番が初期化する方法をご紹介します。

前回の記事はこちらです！
良かったらご覧ください。

【PowerShell】【簡単】ファイル名を一括でリネームする方法

こんにちは！皆さんはファイル名を変更する時にどのように変更していますか？ ファイルによって特別なファイル名にしたい場合は手入力せざるをえませんが、決まりのある命名規則に合わせてファイル名を変更するのに毎回手入力するのは時間がもったいないです...

nyanblog2222.com

2020.09.20

※ 筆者がC#での書き方が慣れているため、もっとより良い記述方法があるかもしれません。
その際は記事を更新させていただきます。

前回の記事では、Rename-Itemを使用していましたが、今回は出力先フォルダを変更したかったので、Copy-Itemを使用して、ファイル名を変更しながらコピー処理をする方法を取りました。

やりたいこと

こちらが処理前のディレクトリ構成です。

各画像ファイル名の頭4桁「a001」等をキーに連番を振っていきます。
例えば「a001」から「a002」に変わると、また連番が001始まりになります。

サンプルコード

# １．フォルダパス設定
$in_folder = "c:\sample\in"
$out_folder = "c:\sample\out"

# ２．処理するファイル一覧情報を取得
$file_list = Get-ChildItem $in_folder | sort Name

# ３．連番付与するための変数を初期化
$cnt = 0
$hold_key = ""
foreach($file in $file_list){
    # ４．コピー元パス設定
    $in_file_path = $in_folder + "\" + $file.Name

    # ５．連番設定（キーブレイク）
    $now_key = $file.Name.Substring(0, 4)
    if($hold_key -ne $now_key){
        $cnt = 0
        $hold_key = $now_key
    }
    $cnt++

    # ６．コピー先パス設定
    $out_file_path = $out_folder + "\" + $now_key + "_picture_" + $cnt.ToString("D3") + $file.Extension

    # ７．ファイルコピー
    Copy-Item $in_file_path $out_file_path
}

以下、コードの解説です。

１．$in_folder、$out_folderにそれぞれコピー元とコピー先のフォルダのパスを設定

２．処理するファイルの情報を一覧で取得
また、ファイル名順で処理するよう、取得する際にファイル名でソートをかける

３．連番を付与する変数（$cnt、$hold_key）を初期化

４．コピー元ファイルパスを設定

５．連番のカウント処理
1つ前のファイル名とキーが異なる場合、連番リセット

６．コピー先ファイルパスを設定

７．ファイルコピー処理

４～７まで全ファイル分処理を続ける

このコードを実行すると、コピー先フォルダに画像ファイルがリネームされてコピーされます。

終わりに

いかがでしたでしょうか？
前回同様、コードをコピペして少し変更するだけで簡単に試せるので是非やってみてください！

投稿 【PowerShell】【キーで連番】ファイル名を一括でリネームする方法 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

こんにちは！皆さんはファイル名を変更する時にどのように変更していますか？

ファイルによって特別なファイル名にしたい場合は手入力せざるをえませんが、決まりのある命名規則に合わせてファイル名を変更するのに毎回手入力するのは時間がもったいないです！

今回はPowerShellを使用してファイル名を一括でリネームする方法をサンプル付きでご紹介してきます。

主に使用するコマンドレットはファイル名変更に使用するRename-Itemです。

1つのファイル名を変更

さっそくサンプルコードをご紹介していきましょう。

・Rename-Item -Path “名前を変更するファイルパス” -NewName “新しいファイル名”

Rename-Item：名前を変更
Pathパラメータ：名前を変更するファイルパスを設定
NewNameパラメータ：新しいファイル名を設定

Rename-Item -Path 'C:\sample\in\345525_s.jpg' -NewName 'nyan_001.jpg'

実行すると、ファイル名が「345525_s.jpg」から「nyan_001.jpg」に変更されました。

複数のファイル名を一括に変更

先ほどの例だと1ファイルずつしか変更できませんでした。

これでは実用性はあまりないと言えます。。。

次はファイル名の置換する文字列を指定して一度にファイル名を変更していきます。

・Get-ChildItem  “処理対象ファイルの条件” | Rename-Item -NewName{ $_.Name -Replace “置換する文字列”, “置換後の文字列” }

Get-ChildItem “条件”：ディレクトリ内のファイルのうち、指定した条件に当てはまるファイルの情報を取得
Replace演算子：文字列を置換

Get-ChildItemで条件を付けることにより、条件に当てはまるファイルに対して一括でファイル名を変更することができます。

Get-ChildItem "C:\sample\in\*.jpg" | Rename-Item -NewName{$_.Name -Replace "\.jpg",".jpeg"}

このコマンドを一度実行すると、ファイル拡張子が「jpg」から「jpeg」に変更されました。

ファイル名に命名規則を指定して連番を付ける

最後に複数のファイルに対して命名規則を指定して連番を付けてファイル名を一括で変更していきます。

・Get-ChildItem “処理対象ファイルの条件” | Sort Name | % { $i = 1} { $Newname = “命名規則” + $i.ToString(“000”) + $_.extension; Rename-item $_ $Newname; $i++ }

Get-ChildItem “条件”：処理対象のファイルを指定
Sort Name：ファイル名でソート
％：Foreach-Objectのエイリアス
Rename-Item：名前を変更

$Newname：変更後のファイル命名規則
$i.ToString(“000”)：3桁0詰め表記

先ほどと同様に処理対象のファイルの条件で複数のファイルを一括で処理することができます。

また、ファイル名でソートすることにより、連番を付与したファイルの順番がエクスプローラで表示された順番そのままになります。

Get-ChildItem "C:\sample\in\*.jpg" | Sort Name | % { $i = 1} { $Newname = "picture_" + $i.ToString("000") + $_.extension; Rename-item $_ $Newname; $i++ }

終わりに

いかがでしたでしょうか？
コードをコピペして少し変更するだけで簡単に試せるので是非やってみてください！

投稿 【PowerShell】【簡単】ファイル名を一括でリネームする方法 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

今回はフォルダ内の全てのバッチを実行する方法を紹介します。
例えば、プログラム開発時におけるテスト処理の自動実行等に使えると思いますので、良かったらコピペしてご使用ください♪

コード内容

フォルダ内の全てのバッチを実行する方法は以下のコードになります。

@ECHO OFF

@REM フォルダ内の全てのバッチを再帰的に実行
FOR /R %%I IN ([バッチ名]) DO (
	@REM バッチファイルが存在すれば実行
	IF EXIST %%I (
		ECHO %%I
		CALL %%I
	)
)

上記コードを簡単に説明します。

・[FOR /R]
FOR文は引数に何もつけないと同一階層のファイルを見に行きますが、
/Rをつけることで、サブフォルダも含め全てのフォルダを見に行ってくれます。

・[%%I IN ([バッチ名])]
%%Iに[バッチ名]のパスが入ります。
[バッチ名]はフォルダ内で実行したいバッチファイルのファイル名です。

・[DO (IF EXIST %%I CALL %%I)]
DO以降が実行する内容で、もしフォルダ内に指定のバッチファイルが存在すれば実行します。

コード説明は以上です。
ただこれだけではイメージが湧きにくいと思いますので、次項で実際の使用例を紹介します。

使用例（テスト処理の自動実行）

プログラム開発時におけるテスト処理の自動実行の例です。
テスト処理の自動実行バッチを作っておけば、初回の開発時だけでなく、プログラム変更があって再処理することになっても、同じテスト内容であればすぐに対応できます。

・フォルダ内のテストバッチを全て実行していくバッチ（ALLTEST.bat）

@ECHO OFF

@REM フォルダ内の全てのテストバッチを再帰的に実行
FOR /R %%I IN (TEST.BAT) DO (
	@REM テストファイルが存在すれば実行
	IF EXIST %%I (
		ECHO %%I
		CALL %%I
	)
)

PAUSE

・テストバッチ（TEST.bat）

@ECHO ********************
@ECHO * テストバッチ実行 *
@ECHO *******************+
@ECHO.

・テスト環境

C:\テスト
│  ALLTEST.bat
│
├─1
│  ├─1-1
│  │  │  TEST.bat
│  │  │
│  │  ├─Input
│  │  └─Output
│  └─1-2
│      ├─1-2-1
│      │  │  TEST.bat
│      │  │
│      │  ├─Input
│      │  └─Output
│      └─1-2-2
│          │  TEST.bat
│          │
│          ├─Input
│          └─Output
└─2
    │  TEST.bat
    │
    ├─Input
    └─Output

上記の環境で、フォルダ内のテストバッチを全て実行していくバッチ（ALLTEST.bat）を実行すると、結果は以下になりました。

C:\テスト\1\1-1\TEST.BAT
********************
* テストバッチ実行 *
*******************+

C:\テスト\1\1-2\1-2-1\TEST.BAT
********************
* テストバッチ実行 *
*******************+

C:\テスト\1\1-2\1-2-2\TEST.BAT
********************
* テストバッチ実行 *
*******************+

C:\テスト\2\TEST.BAT
********************
* テストバッチ実行 *
*******************+

全てのテストバッチが問題なく実行されました。

なお、今回のようにすべてのテストバッチを実行する場合であれば、以下のようにテストバッチにエラーレベルを出力する工夫等すると、より良いかもしれませんね。

@ECHO ********************
@ECHO * テストバッチ実行 *
@ECHO *******************+
call hogehoge.bat Input Output
echo %errorlevel% > Output\エラーレベル[%errorlevel%].txt

投稿 【簡単】フォルダ内の全てのバッチ（BAT）を実行する方法【サンプルあり】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

VBAには条件分岐の手段の一つとしてSwitch関数やSelect Caseステートメントがありますが、これらの違いや記述方法を紹介します。
C言語やJAVA言語でのswitch文との比較もしてますので、そちらも良かったらどうぞ♪

Switch関数

Switch関数は、ある式（expr）を評価し、Trueであれば値や式（value）を返します。

構文については以下となります。

記述例として、以下を用意しました。
変数の値と特定の値が一致すれば、メッセージを返し、イミディエイトウィンドウに表示します。

' PrintImmediate
' イミディエイトウィンドウにメッセージを表示
Sub PrintImmediate()
    
    Dim sMsg As String
    sMsg = GetMsg_Switch(2)
    
    Debug.Print sMsg
    
End Sub

' GetMsg_Switch(Integer)
' Switch関数を使ってメッセージを取得
Function GetMsg_Switch(iMsgCase As Integer)

    GetMsg_Switch = Switch(iMsgCase = 1, "正常１", iMsgCase = 2, "正常２")

End Function

結果は、「正常２」と表示されます。

Switch関数を使っていく上で知っておきたいポイントは以下になります。
（例については上記の記述例を元にしています。）
・Switch関数を変数に代入しないとコンパイルエラーとなる
例）○GetMsg_Switch = Switch(iMsgCase = 1, “正常１”, iMsgCase = 2, “正常２”)
　　×Switch(iMsgCase = 1, “正常１”, iMsgCase = 2, “正常２”)
・全ての式を評価するため、除算エラー等が起きる式には要注意
例）iMsgCase = 1で、
　　GetMsg_Switch = Switch(iMsgCase = 1, “正常１”, iMsgCase = 2, “正常２”, iMsgCase = 3, 5 / 0)
　　といったコードの場合、「iMsgCase = 3, 5 / 0」部分も評価し除算エラーとなります。
・式がFalseだった場合、Nullを返す
例）iMsgCaseが3の場合、Nullを変数に代入しようとするため、エラーが起きます。

こういったマイナス要素があるため、私は次項の「Select Caseステートメント」がおすすめです。

Select Caseステートメント

Select Caseステートメントは、ある変数の値（testexpression）を複数の値（expressionlist-n）と比較し、一致していれば特定の処理（statements-n）を行います。

構文については以下となります。

記述例として、以下を用意しました。
変数の値と特定の値が一致すれば、メッセージを返し、イミディエイトウィンドウに表示します。

' PrintImmediate
' イミディエイトウィンドウにメッセージを表示
Sub PrintImmediate()
    
    Dim sMsg As String
    sMsg = GetMsg_SelectCase(2)
    
    Debug.Print sMsg
    
End Sub

' GetMsg_SelectCase(Integer)
' SelectCaseステートメントを使ってメッセージを取得
Function GetMsg_SelectCase(iMsgCase As Integer)

       
    Select Case iMsgCase
    Case 1
        GetMsg_SelectCase = "正常１"
    Case 2
        GetMsg_SelectCase = "正常２"
    Case Else
        GetMsg_SelectCase = "異常"
    End Select
        

End Function

結果は、「正常２」と表示されます。
もし、sMsg = GetMsg_SelectCase(3)だった場合は、「異常」と表示されます。

変数に想定外の値が入っていても、Case Elseがあるためエラーを出さずに対応できます。

参考（C言語のswitch文との比較）

参考になりますが、C言語のswitch文は以下のような書き方をします。

int iMsgCase = 2;

switch(iMsgCase){
  case 1:
    printf("正常１¥n");
    break;
  case iMsgCase:
    printf("正常２¥n");
    break;
  default:
    printf("異常¥n");
}

記述内容はほぼSelect Caseステートメントで、内容もほぼ同等の性能です。
逆にSwitch関数とは、名前は似てますが内容は似てません。

以上、今回はSwitch関数やSelect Caseステートメントについて紹介しました。
両者比較すると、マイナスポイントの多いSwitch関数を使うよりは、Select Caseステートメントを使った方がよいのかなと思います。

Switch関数の強みは条件分岐を1行で書けるところかな？と当初考えましたが、いざコードを書いてみると1行に条件を詰め込むのは逆に読みにくいかもと感じました。。

以下まとめです。

本記事で参考にさせていただいたサイト：
Microsoft Doc：Switch 関数
Microsoft Doc：Select Case ステートメント

投稿 【VBA】Switch関数とSelect Caseステートメント【違いや記述方法を簡単に解説】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

今回はAccess等で使われるVBAで、Shift-JIS（SJIS）・UTF-8等、各種文字コードのファイルを読み込む方法を紹介します。
内容としては、OpenステートメントやADODB.Streamを使った手法です。
自作関数のサンプルもつけてますので、是非ご活用ください！
また、同時にダイアログを開いて対象のファイル名を取得する方法も紹介してますので、良かったらそちらもどうぞ。

紹介する手法

まず、本記事の簡単なまとめから♪

共通で使っているテストデータやサブ関数

説明の際に使用するテストデータや、自作関数の中で呼び出しているサブ関数です。
本記事とは内容が離れますので、飛ばしてもらっても大丈夫です。

テストデータ

今回テストとして読み込むcsvファイルは以下を使用します。
（同じ内容で文字コードがShift-JIS・UTF-8のデータを用意）

No	郵便番号	住所	名前
1	859-5326	東京都春日井市向谷町１－６５	ヤマモトコーポレーション株式会社
2	987-2523	千葉県向田市山本町６５８－４４	華井　譲
3	789-0001	千葉県向田市山本町　ジンダ－ビル２F　２０１号	蓮田不動産株式会社
4	653-6567	大阪府大東市浅田８－９９９	株式会社ハッターフ
5	198-3463	鹿児島県薩摩川内市浜本１２３－７７	山本　茂

（サブ関数）ダイアログを開いて対象のファイル名を取得する

ダイアログを開いて対象のファイル名を取得するサブ関数を用意しました。
直接ファイルパスを次項から紹介する関数のコード上に書いてしまっても良かったのですが、それではコピペして使いにくいので。。

内容としては、GetFileName_csvを呼び出すと、ダイアログを開いてcsvファイルのファイル名を取得し、戻り値として返す関数になります。

' GetFileName_csv
' csvファイル名を取得
Function GetFileName_csv()

    'ダイアログを開いてcsvファイルのファイル名を取得
    'Application.FileDialogを使うには、
    '参照設定でMicrosoft Office 1X.0 Object Libraryの追加が必要
    With Application.FileDialog(msoFileDialogOpen)
        .Filters.Clear
        .Filters.Add "csvファイル", "*.csv"
        .AllowMultiSelect = False
        If .Show = True Then
            GetFileName_csv = .SelectedItems(1)
        End If
    End With

End Function

Openステートメントでcsvファイル読み込み（Shift-JISのみ可）

Openステートメントで、csvファイルを読み込む方法です。
Openステートメントでは、文字コードに合わせて対応していくことができないので、Accessのデフォルトの文字コードであるShift-JISでしか正しく読み取りできません。

以下、Openステートメントを使用したcsvファイル読込関数関数です。

' ReadCSVFile_Open
' csvファイル読込関数（Openステートメントを使用）
Sub ReadCSVFile_Open()
    
    'ファイル名取得
    Dim sOpenFileName As String
    sOpenFileName = GetFileName_csv
    If sOpenFileName = "" Then Exit Sub

    'ファイルを読み込んでイミディエイトウィンドウに内容を表示する
    Dim sBuf  As String
    Open sOpenFileName For Input As #1 'ファイルを開いて[#1]という番号で管理
    Do Until EOF(1)
       Line Input #1, sBuf '1行づつバッファへ格納
       Debug.Print sBuf
    Loop
    Close #1
    
End Sub

こちらの関数を使用して、Shift-JISのファイルを読み込んだ結果はこちらです。

ファイル名：SJIS.csv

No  郵便番号    住所    名前
1   859-5326    東京都春日井市向谷町１－６５    ヤマモトコーポレーション株式会社
2   987-2523    千葉県向田市山本町６５８－４４  華井　譲
3   789-0001    千葉県向田市山本町　ジンダ－ビル２F　２０１号   蓮田不動産株式会社
4   653-6567    大阪府大東市浅田８－９９９  株式会社ハッターフ
5   198-3463    鹿児島県薩摩川内市浜本１２３－７７  山本　茂

正確に読み取れてますね。

試しにこの関数を使って、UTF-8も読み取ってみました。

ファイル名：UTF-8.csv

No  驛ｵ萓ｿ逡ｪ蜿ｷ    菴乗園  蜷榊燕
1   859-5326    譚ｱ莠ｬ驛ｽ譏･譌･莠募ｸょ髄隹ｷ逕ｺ・托ｼ搾ｼ厄ｼ・繝､繝槭Δ繝医さ繝ｼ繝昴Ξ繝ｼ繧ｷ繝ｧ繝ｳ譬ｪ蠑丈ｼ夂､ｾ
2   987-2523    蜊・痩逵悟髄逕ｰ蟶ょｱｱ譛ｬ逕ｺ・厄ｼ包ｼ假ｼ搾ｼ費ｼ・闖ｯ莠輔€€隴ｲ
3   789-0001    蜊・痩逵悟髄逕ｰ蟶ょｱｱ譛ｬ逕ｺ縲€繧ｸ繝ｳ繝€・阪ン繝ｫ・巽縲€・抵ｼ撰ｼ大捷 闢ｮ逕ｰ荳榊虚逕｣譬ｪ蠑丈ｼ夂､ｾ
4   653-6567    螟ｧ髦ｪ蠎懷､ｧ譚ｱ蟶よｵ・伐・假ｼ搾ｼ呻ｼ呻ｼ・譬ｪ蠑丈ｼ夂､ｾ繝上ャ繧ｿ繝ｼ繝・
5   198-3463    鮖ｿ蜈仙ｳｶ逵瑚湊鞫ｩ蟾晏・蟶よｵ懈悽・托ｼ抵ｼ難ｼ搾ｼ暦ｼ・螻ｱ譛ｬ縲€闌・

全角が化けてしまっていますね。
前述のとおり、UTF-8を含む他の文字コードには対応していませんので、読み取る必要があれば次項をお使いください。

ADODB.Streamでcsvファイルを読み込む（UTF-8、Shift-JIS他）

ADODB.Streamで、csvファイルを読み込む方法です。
ADODB.Streamでは、UTF-8、Shift-JISを含む各種文字コードに対応しています。

以下、Openステートメントを使用したcsvファイル読込関数関数です。

' ReadCSVFile_ADODB
' csvファイル読込関数（ADODB.Streamを使用）
Sub ReadCSVFile_ADODB()
    
    'ファイル名取得
    Dim sOpenFileName As String
    sOpenFileName = GetFileName_csv
    If sOpenFileName = "" Then Exit Sub

    'ファイルを読み込んでイミディエイトウィンドウに内容を表示する
    Dim sBuf  As String
    With CreateObject("ADODB.Stream")
       .Charset = "UTF-8" 'SJISの場合、"shift_jis"
       .Open
       .LoadFromFile sOpenFileName
        Do Until .EOS
           sBuf = .ReadText(-2) '1行づつバッファへ格納
           Debug.Print sBuf
        Loop
       .Close
    End With
    
End Sub

なお、上記関数をそのままコピペすると、UTF-8に対応した関数になります。
shift_jisに対応させる場合、

.Charset = "UTF-8"

の部分を、

.Charset = "shift_jis"

に書き換えてください。

その他、UTF-8、Shift-JIS以外の文字コードで読み取る場合は、
「レジストリエディタ」の「HKEY_CLASSES_ROOT\MIME\Database\Charset」から確認してください。
レジストリエディタは、
「Windowsマーク」キーと「R」キーを同時押し→ファイル名を指定して実行の画面が出たら、「regedit」と入力してエンターを押すと開くことができます。

それでは、まずshift_jisのファイルを読み込んでみました。

ファイル名：SJIS.csv

No  郵便番号    住所    名前
1   859-5326    東京都春日井市向谷町１－６５    ヤマモトコーポレーション株式会社
2   987-2523    千葉県向田市山本町６５８－４４  華井　譲
3   789-0001    千葉県向田市山本町　ジンダ－ビル２F　２０１号   蓮田不動産株式会社
4   653-6567    大阪府大東市浅田８－９９９  株式会社ハッターフ
5   198-3463    鹿児島県薩摩川内市浜本１２３－７７  山本　茂

正確に読み取れてますね。

ファイル名：UTF-8.csv

No  郵便番号    住所    名前
1   859-5326    東京都春日井市向谷町１－６５    ヤマモトコーポレーション株式会社
2   987-2523    千葉県向田市山本町６５８－４４  華井　譲
3   789-0001    千葉県向田市山本町　ジンダ－ビル２F　２０１号   蓮田不動産株式会社
4   653-6567    大阪府大東市浅田８－９９９  株式会社ハッターフ
5   198-3463    鹿児島県薩摩川内市浜本１２３－７７  山本　茂

こちらも、正しく読み取ることができました♪

以上、今回の記事が参考になれば幸いです。
関連として、もしUTF-8について知りたい！という方はこちらの記事もご覧ください。

【ファイル】UTF-8のBOM付き、BOM無しの違い・確認・作成について

CSVファイルをExcelで確認すると文字化けすることはありませんか。それは文字コードがUTF-8のBOM無しで作成されているからかもしれません。本記事ではUTF-8のBOM付き、BOM無しの違い、確認方法、作成方法についてご紹介しています。

nyanblog2222.com

2022.07.15

投稿 【VBA】Shift-JIS・UTF-8等、各種文字コードのファイル読み込み【コピペで使えるサンプル付き】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

C言語やJAVAなどで欠かせないインクリメントやデクリメントですが、ExcelやAccessなどで使用するVBAでも使えるか、調べてみました。

・インクリメント
変数の値を1増やす演算　例：i++、++i
・デクリメント
変数の値を1減らす演算　例：i－－、－－i

VBAでインクリメントやデクリメントは使えない？

VBAにはインクリメントやデクリメントという概念がなく、使えません。

試しに、i++やi－－と書くと以下のエラーメッセージが出ます。

コンパイルエラー:

修正候補:式

++iやi－－と書くと以下のエラーメッセージが出ます。

コンパイル　エラー:

修正候補: 行番号 または 行ラベル または ステートメント または ステートメントの最後

VBAでインクリメントやデクリメントが使えない理由としては、
VBA（Visual Basic for Applications）はBASICというプログラミング言語がルーツなので、インクリメントやデクリメントが存在するC言語がルーツのプログラミング言語とは、歴史が異なるからです。

代替案について

気になる代替案ですが、残念ながら有効なものはありませんでした。

加算代入演算子や減算代入演算子は？

試してみましたが、インクリメントやデクリメントと似たことができる加算代入演算子や減算代入演算子ではうまくいきませんでした。

（参考）
・加算代入演算子
変数の値に右辺の値を加算する演算　例：i+=1
・減算代入演算子
変数の値に右辺の値を減算する演算　例：i-=1

以下、エラーメッセージです。

コンパイルエラー:

修正候補:式

インクリメントやデクリメントと同様に、C言語がルーツのプログラミング言語で使用できる加算代入演算子や減算代入演算子についても、概念がないようですね。

関数を作ってみるのは？

無理やり捻りだすとするのであらば、インクリメントやデクリメントする関数を作るのはどうでしょう。

例えば、以下の関数「Increment(ByRef)」でインクリメントできます。

'呼び出し元の関数
Public Function TestIncrement()
　Dim i As Int
　i = 0
　～
　Increment i
　～
End Function

'インクリメント用関数
Sub Increment(ByRef i)
　i = i + 1
End Sub

ただこれははっきり言ってしまえば、自己満足なコードです。
あまり分かりやすくなったとは言いづらいですし、作った本人はいいでしょうが、他の人がコードを見たとき読みにくいコードになるでしょうね。。

以上、今回はインクリメントやデクリメントがVBAでも使えるか、また代替案は何かないか調べてみました。
以下がそのまとめです。

そもそもVBAのルーツであるBASICはあくまで初心者向けの言語のため、いくらインクリメントやデクリメントが分かりやすく効率的だからといって、現状でもi = i + 1と1行で処理できるのですから、これ以上知識が必要となる機能追加は望まれないのかもしれませんね。

投稿 【VBA】インクリメントやデクリメントは使える？代替案は？ は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

Accessマクロで関数（VBA）を呼び出した際に出てくる「指定した式に、Microsoft Accessが見つけることができない関数名が含まれています。」の対処方法をいくつか紹介します。
（内容についてはMicrosoft Access 2010で確認）

マクロで呼び出す関数の名称が間違っている

関数名と、マクロで呼び出す関数の名称が異なっているとエラーメッセージが表示されます。

以下の事例だと、関数名が「FileOpen()」なのに対し、マクロでは「FileOpn()」となってしまっています。
この場合、マクロでは関数名と同じ「FileOpen()」を呼び出してください。

関数：

Public Function FileOpen()
　～
End Function

マクロの関数（プロシージャ）呼び出し：

=FileOpn()

関数名に日本語が含まれる

関数名に日本語が含まれているとエラーメッセージが表示されます。

以下の事例だと、関数名が「Fileを開く()」となっており日本語が含まれています。
この場合、日本語は使わず「FileOpen()」などの名前にしてください。

関数：

Public Function Fileを開く()
　～
End Function

関数名とモジュール名が同じ

関数名とモジュール名が同じ場合エラーメッセージが表示されます。

以下の事例だと、関数名が「FileOpen()」に対し、モジュール名も「FileOpen」になってしまっています。
この場合、モジュール名は「ファイルを開く」など関数名と異なる名前にしてください。

関数：

Public Function FileOpen()
　～
End Function

モジュール名：

FileOpen

ちなみに「関数名とマクロ名が同じ」場合はエラーメッセージは出ません。

投稿 【対処方法】指定した式に、Microsoft Accessが見つけることができない関数名が含まれています。 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

こんにちは、今回はプログラミングにおいて優れたコードを書くためにおすすめの本（リーダブルコード・リファクタリング・デザインパターン）を紹介します。

プログラミング初心者の方は、まずデータフローやプログラミング言語の記述方法について勉強していく方が多いかと思いますが、
今回紹介する本は、初心者から中級者にステップアップしたい方に是非読んでもらいたい本です。

何をもって優れたコードか？
良かったらそちらも考えながら読んでみてくださいね♪

本で解説に使っている言語は？

紹介する本のプログラミング言語は基本的にJavaで解説されています。

普段使っている言語でなければ、理解できるか不安になられる方も多いかもしれませんが、説明が文章で分かりやすく簡潔に書いてあり、図解も多く、最低限何かしらの言語を知っていれば理解できる内容ですので、あまり気にしなくても大丈夫です。
事実、私はC#メインで開発しておりJavaは全く経験がありませんでしたが、すすっと問題なく理解することができました。

なお、リファクタリングやデザインパターンの本はJavaで解説されていることが殆どですので、今回紹介する本以外でも、言語は気にせず人気のある良書を読んでみるのがいいと思います。

プログラミングで優れたコードを書くためにおすすめの本３選

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

• Amazon
• 楽天市場
• Yahooショッピング

今回紹介する本の中でも一押しの本で、
読みやすいコードを書くことを目的に作られた本です。

Java言語で学ぶデザインパターン入門

増補改訂版 Java言語で学ぶデザインパターン入門

created by Rinker

• Amazon
• 楽天市場
• Yahooショッピング

デザインパターンとは、GOF（Gang of Four）と呼ばれる４人がオブジェクト指向でよく使われる手法をカタログとして整理し、出版したものです。

オブジェクト指向における再利用のためのデザインパターン

created by Rinker

• Amazon
• 楽天市場
• Yahooショッピング

本書はこの本を、オブジェクト指向初心者にも簡単に理解できるようにまとめたデザインパターン入門書です。

本書は２３章（デザインパターン２３個分）にわたって構成されており、その全てで簡単なサンプルプログラムがついており、初心者でも分かりやすい内容になっています。

デザインパターンを学ぶことで、
・要求された仕様に対しての解決策（コード）が瞬時に浮かぶようになる
・仕様変更に対応しやすい
・バグが少なくなる
などのメリットや、デザインパターンを開発グループ全員が学ぶことで、
・開発者同士でイメージを言語化し、共有できる
・可読性が上がる
などのメリットがあります。

使用用途と合致したため、私が開発の際によく使っていたデザインパターンは、
「Adapter」「Template Method」「Factory Method」「Singleton」「Strategy」「Facade」「State」
です。どれも便利なので良かったら使ってみてくださいね♪

Java言語で学ぶリファクタリング入門

Java言語で学ぶリファクタリング入門【電子書籍】[ 結城 浩 ]

created by Rinker

• Amazon
• 楽天市場
• Yahooショッピング

本書は、「リファクタリング 既存のコードを安全に改善する（ＭａｒｔｉｎＦｏｗｌｅｒ）」を元に、リファクタリングの本質がわかるように解説されているリファクタリング入門書です。

リファクタリング 既存のコードを安全に改善する（第2版）

created by Rinker

• Amazon
• 楽天市場
• Yahooショッピング

以下本書より抜粋ですが、リファクタリングとは、
外見から見たプログラムの振る舞いを変えずに、プログラム内部の構造を改善する技法です。プログラムの「体質改善」と呼ばれることもあります。

リファクタリングの目的は、
・バグを見つけやすくする
・機能追加しやすくする
・レビューしやすくする
ことです。

本書は１５章にわたって構成されており、
第１章～第４章では、コードを整える小規模のリファクタリング
第５章～第１０章では、クラスを整える中規模のリファクタリング
第１１章～第１５章では、クラスの関係を整える大規模のリファクタリング
を学びます。

なお、それぞれ簡単なサンプルプログラムがついており、初心者でも分かりやすい内容になっています。

元になったリファクタリングのタイトルに「既存のコードを安全に改善」と書かれている通り、汚いコードをきれいなコードにするのはもちろんですが、リファクタリングを学んでいれば初めからきれいなコードを書くことができます。また、リファクタリングの中にデザインパターンの要素もありますので、併せて読んでみてくださいね♪

以上、
今回はプログラミングにおいて優れたコードを書くために、以下の通りおすすめの本を紹介しました。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

• Amazon
• 楽天市場
• Yahooショッピング

増補改訂版 Java言語で学ぶデザインパターン入門

created by Rinker

• Amazon
• 楽天市場
• Yahooショッピング

Java言語で学ぶリファクタリング入門【電子書籍】[ 結城 浩 ]

created by Rinker

• Amazon
• 楽天市場
• Yahooショッピング

何種類か「優れたコードを書くための本」を読んだ中で、私自身が成長できたとっておきの良書なので、是非皆さんも読んでみていただけたら嬉しいです♪

投稿 【プログラミング】優れたコードを書くためにおすすめの本３選【初心者からのステップアップ】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

こんにちは。今回は、App Inventor（MIT App Inventor 2 日本語化プロジェクト）を使ったAndroidアプリ作成について紹介します。
子どもから大人まで、パソコンさえあればだれでも超簡単にスマホアプリが作れますよ♪

App Inventorとは

App Inventorとは、MIT（マサチューセッツ工科大学）が提供しているAndroidアプリ作成ツールです。

以下のようにパズルを作るように各パーツをドラッグアンドドロップするだけで、簡単にアプリを作成できます。

当初はGoogleが提供していましたが、現在はMITが「App Inventor 2」として研究開発・提供されています。また、今後はiOSにも対応予定となっています。
MIT App Inventor

現状、App Inventor 2は日本語対応しておらず、日本であまり知られているツールではありませんが、非公式で日本語化プロジェクトが進められており、今後きっかけ次第で大きく普及が期待できるツールです。
MIT App Inventor 2 日本語化プロジェクト

作ったアプリはGoogle Storeで公開することも可能ですよ。

App Inventorを使用するメリット

App Inventorについて調べてみたところ、以下のようなメリットが書かれていました。

・誰でも作れる
コードでの記述が不要なので、子どもから大人まで誰でも作れます。

・開発環境不要
本来、Androidアプリ作成には以下サイトに書かれているとおり「Eclipse」や「Android Studio」などの開発環境が必要ですが、App Inventorの場合、Web上で開発するため不要です。
参考：初心者がスマホアプリを開発する時に必要な言語とツールまとめ

・バグが少ない
用意されたパーツを組み合わせて作成するため、発見がし辛いようなややこしいバグはありません。
デメリットでもありますが、できることは限られているためバグ自体も少ないです。

App Inventor開発の準備・始め方

App Inventorは基本的にGoogleアカウントさえあれば何もいらないため、以下だけです。

１．Googleアカウントを作る

２．MIT App Inventor 2 日本語化プロジェクトにアクセスし、赤枠をクリック

３．Googleアカウントの認証

４．利用規約に同意

５．完了。「プロジェクトを新規作成」から作成していきます。

スマホアプリ開発初心者がApp Inventorでアプリを作ってみた

スマホアプリ開発初心者の私が、
・App Inventorでの開発はどんなものか
・普段のシステム開発と比べてどうか
を感じるためにApp Inventorでアプリを作ってみました。

アプリの内容は、
アプリを立ち上げた際に表示される「挨拶」ボタンを押したら、「Hello! Nyanblog!!」と音声がでる
という簡単なものです。
ただApp Inventorを使わずコーディングするとなると、以下サイトのようにAPIの知識の知識も必要でしょうし、すぐにはできないでしょうね。コーディング初心者だときっと厳しいと思います。
アプリ開発に利用可能な音声合成まとめ

１．チュートリアルを確認

MIT App Inventor 2 日本語化プロジェクト チュートリアルの動画を上から４つほど見てから作り始めています。
もしこの記事を見て初めて作られる方は、動画でとても分かりやすく解説してくださってるので、１度チュートリアルを見てから始めてみてくださいね。

２．開発

１．プロジェクト作成
「プロジェクトを新規作成」→プロジェクト名を入力

２．挨拶ボタンの作成
ユーザーインターフェースの「ボタン」を画面にドラッグアンドドロップ→右側のプロパティで、「高さ」と「幅」を画面いっぱいに表示＋「テキスト」をご挨拶

３－１．挨拶ボタンの下に猫の画像を表示するため、使うファイルをアップロード
メディアの「ファイルをアップロード」→ファイルを選択

３－２．アップロードしたファイルを表示する
「イメージ」を画面にドラッグアンドドロップ→「高さ」と「幅」を画面いっぱいに表示

４－１．「Hello!Nyanblog!!」と音声化できるように前準備
メディアから「テキスト音声化」を画面にドラッグアンドドロップ

４－２．ロジック部分を作るため、画面切り替え
画面右上の「ブロック編集」

４－３．パーツを組み合わせる
ブロックの「ボタン」をクリック→選択肢が表示されるので、「いつもボタン～」の赤枠部分をビューアーにドラッグアンドドロップ

４－４．パーツを組み合わせる
「テキスト音声化１」をクリック→赤枠部分をドラッグアンドドロップで、先ほど追加したパーツに組み合わせる

４－５．パーツを組み合わせる
「テキスト」をクリック→赤枠部分をドラッグアンドドロップで、先ほど追加したパーツに組み合わせる→空白になっているテキストをクリック→「Hello!Nyanblog!!」と入力

これで完成です。
事前にチュートリアルを見ていたのもありますが、初めてやってもここまで１０分もかかりませんでした。App Inventor恐るべし。

３．ビルド

App Inventorで作った画面を、アプリ化します。

画面上部の「ビルド」タブ→アプリ（apk用のQRコードを表示します）をクリック

スマートフォンで読み取る用のQRが出てきます。

４．スマートフォンで確認

１．App InventorのQRコード読み取り用アプリをインストール

２．App InventorのQRコード読み取り用アプリを起動し、「scan QR code」を押す→読み取りの画面になるため、先ほどビルドしたQRを読み取る
この後、いくつか注意喚起される場合がありますが、気にせずインストール

４．最後に、アプリを起動させ、動作確認して完了。

問題なく、音声がでました♪

以上、私自身アプリを実際に作ってみて、率直な感想は「超簡単！」でした。
機能が限られていたり、繰り返しや分岐が増えるとややこしくなりそうなので多機能の本格的なアプリは厳しくとも、趣味で作るレベルの単機能アプリはそれなりに作れるんじゃないだろうか、という印象です。

App Inventorは、
・こどものプログラミング学習のきっかけ
・日頃の「こういうのがあれば」を形にできる。公開できる。
など、社会にとっても非常に有益なツールです。
MITで現在も開発中ですし、今後も徐々に機能が追加されていけばなと思います。

投稿 【App Inventor】簡単スマホアプリ作成【MIT App Inventor 2】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

今回はつみたてNISAの資産運用シミュレーションをExcelVBAで作ってみました。
計算方法は金融庁のシミュレーションサイトと同様のものとなります。
よかったら前回の記事もどうぞ♪

【Excel】つみたてNISAシミュレーション（1）【計算方法】

金融庁が公開しているつみたてNISAの資産運用シミュレーションをExcelで作ってみようと思います。金融庁のサイトでは具体的な計算方法はありませんでしたが、試行錯誤しながら調べてみましたので気になる方はどうぞ♪1 つみたてNISAとは2 金融庁の資産運用シミュレーション3 計算方法4 グラフ5 まとめ……。

nyanblog2222.com

2020.07.16

マクロ（VBA）が難易度が高い！と思われる方は一度こちらも見てくださいね♪
練習になるかもしれません。

【Excel VBA】初心者でも簡単にマクロを作る方法

業務効率化したい方必見！OfficeのExcel VBAで"初心者でも簡単に"マクロを作成する方法を紹介しています。知識0でも理解できるようサンプルはもちろん画像たっぷりで説明していますので、是非見て試してみてください♪

nyanblog2222.com

2022.07.10

つみたてNISAシミュレーション作成手順

今回は、
１．EXCELシート作成
２．VBAコード記述
３．マクロ設定
の流れで紹介していきます。

１．EXCELシート作成

まず、入力フォームとして以下を作成します。

ボタンについては「開発」タブ→「挿入」→「ボタン」から作成できます。

２．VBAコード記述

まず、「開発」タブ→「Visual Basic」からVBA記述画面を開きます。

記述していくVBAコードについては以下です。
内容の説明については、コードのコメントを参照ください。

基本的に、前回紹介した計算方法のイメージ通り作成します。

１．計算①　配列に月々の複利計算結果を格納

２．計算②　①の配列から、月々の累計元本・積立額を算出。年毎に配列へ格納

３．出力用配列作成　②の配列を元に出力したい要素を計算し、配列へ格納

４．出力　出力用配列から、それぞれEXCELシートに出力していく
　（３までで出力用データの計算は全て行い、
　　後は４でほぼそのまま出力するだけのイメージ）

■TumitateNisaマクロ

Sub TumitateNisa()

    '積立年数から月数をセット
    Dim TOSHIKIKAN_NEN As Integer
    TOSHIKIKAN_NEN = Range("C2").Value2
    Dim TOSHIKIKAN_NEN_ARRAY As Integer
    TOSHIKIKAN_NEN_ARRAY = TOSHIKIKAN_NEN - 1
    Dim TOSHIKIKAN_TUKI As Integer
    TOSHIKIKAN_TUKI = TOSHIKIKAN_NEN * 12
    Dim TOSHIKIKAN_TUKI_ARRAY As Integer
    TOSHIKIKAN_TUKI_ARRAY = TOSHIKIKAN_TUKI - 1
    
    '月投資額をセット
    Dim TOSHIGAKU_TUKI As Long
    TOSHIGAKU_TUKI = Range("C3").Value2
    
    '利回り（年）から利回り（月）表面金利をセット
    Dim RIMAWAEI_TUKI As Double
    RIMAWAEI_TUKI = 1 + (Range("C4").Value2 / 12 / 100)
    
    '各配列用　年数が最大100年まで（12か月*100年）
    'コードがややこしくなるのと、
    'あまり増えても環境によってはEXCELがフリーズしたりするので
    '今回は動的配列にはしない
    Const MAXARRAY_1200 As Integer = 1200
    
    '''''''''''''''''''''''''''''''''''''''''''''''''''
    '
    ' 計算①　配列に月々の複利計算結果を格納
    '
    '''''''''''''''''''''''''''''''''''''''''''''''''''
    Dim TumitateArray(MAXARRAY_1200, MAXARRAY_1200) As Double
    For i = 0 To TOSHIKIKAN_TUKI_ARRAY
        
        Dim Tumitate_Tuki As Double
        Tumitate_Tuki = TOSHIGAKU_TUKI
        For j = 0 To TOSHIKIKAN_TUKI_ARRAY
        
            TumitateArray(i, j) = 0
            
            If j >= i Then
                TumitateArray(i, j) = Tumitate_Tuki
                
                Tumitate_Tuki = Tumitate_Tuki * RIMAWAEI_TUKI
            End If
    
        Next j
    
    Next i
    
    '''''''''''''''''''''''''''''''''''''''''''''''''''
    '
    ' 計算②　①の配列から、月々の累計元本・積立額を算出。年毎に配列へ格納
    '
    '''''''''''''''''''''''''''''''''''''''''''''''''''
    Dim YearSumArray(MAXARRAY_1200, 1) As Double
    Dim GanponSum As Double
    GanponSum = 0
    Dim YearNum As Integer
    YearNum = 0
    For j = 0 To TOSHIKIKAN_TUKI_ARRAY
        
        If j > 0 And j Mod 12 = 0 Then
            YearArrayNum = YearArrayNum + 1
        End If
        
        Dim TumitateSum As Double
        TumitateSum = 0
        For i = 0 To TOSHIKIKAN_TUKI_ARRAY
            TumitateSum = TumitateSum + TumitateArray(i, j)
        Next i
        
        '累計元本
        GanponSum = GanponSum + TOSHIGAKU_TUKI
        YearSumArray(YearArrayNum, 0) = GanponSum
        '累計積立額
        YearSumArray(YearArrayNum, 1) = TumitateSum
    
    Next j
    
    '''''''''''''''''''''''''''''''''''''''''''''''''''
    '
    ' 出力用配列作成　②の配列を元に出力したい要素を計算し、配列へ格納
    '
    '''''''''''''''''''''''''''''''''''''''''''''''''''
    Dim YearTumitateArray(MAXARRAY_1200, 3) As Double
    For i = 0 To TOSHIKIKAN_NEN_ARRAY
        '累計元本
        YearTumitateArray(i, 0) = YearSumArray(i, 0)
        '累計運用益
        YearTumitateArray(i, 1) = YearSumArray(i, 1) - YearSumArray(i, 0)
        '累計積立額
        YearTumitateArray(i, 2) = YearSumArray(i, 1)
        '累計節税額
        YearTumitateArray(i, 3) = YearTumitateArray(i, 1) * (20.315 / 100)
    
    Next i

    '''''''''''''''''''''''''''''''''''''''''''''''''''
    '
    ' 出力　出力用配列から、それぞれEXCELシートに出力していく
    '
    '''''''''''''''''''''''''''''''''''''''''''''''''''
    '前回のシュミレーション結果をクリアしておく
    Range("B7:F106").Clear
    
    '出力開始位置の一つ上にへカーソル移動
    Range("B6").Select

    'それぞれEXCELシートに出力
    For i = 0 To TOSHIKIKAN_NEN_ARRAY
        
        ActiveCell.Offset(1, 0).Activate
        '年
        ActiveCell.Value2 = i + 1
        '累計元本
        ActiveCell.Offset(0, 1).Value2 = Round(YearTumitateArray(i, 0))
        '累計運用益
        ActiveCell.Offset(0, 2).Value2 = Round(YearTumitateArray(i, 1))
        '累計積立額
        ActiveCell.Offset(0, 3).Value2 = Round(YearTumitateArray(i, 2))
        '累計節税額
        ActiveCell.Offset(0, 4).Value2 = Round(YearTumitateArray(i, 3))
        
    Next i
    
    '罫線を引く
    ActiveCell.CurrentRegion.Select
    Selection.Borders.LineStyle = xlContinuous
        
    '桁区切りする
    Selection.NumberFormatLocal = "#,###"
    
    '最終行の文字を赤色にする
    Selection.Rows(Selection.Rows.Count).EntireRow.Select
    Selection.Font.ColorIndex = 3
    
    'カーソルを年数に戻す
    Range("C2").Select

End Sub

３．マクロ設定

最後に作成したマクロをボタンに登録します。
「右クリック」→「マクロの登録」

マクロを選択して、完了です。

シミュレーション使用方法について

使用方法は簡単です。
「年数」「月投資額」「利回り（年）」を入力して、
「つみたてNISAシミュレーションを開始する」ボタンをクリックするだけ♪

試しに、金融庁のシミュレーションと比べてみましたが、
問題なく同じ結果となりました。
資産運用シミュレーション ： 金融庁

色々と分析してみた

せっかくなので、いくつかのパターンでシミュレーションしてみました♪

利回りが3%と5%どれくらい差が出る？（20年・月20,000円・利回り3%or利回り5%）

2%変わるだけで、運用益が倍変わることが分かります。

[3%の場合]

[5%の場合]

20年間最大額積み立てた場合、いくら貯まる？（20年・月33,333円・利回り5%）

つみたてNISAは年40万円・20年間つみたてが可能です。
そこで仮に平均利回りが5%だった場合、以下の結果となりました。

老後2000万円問題！月5000円積み立てると何年で2000万円貯まる？（60年・月5,000円・利回り5%）

月5,000円ですと、56年で達成可能なようです。
元本と運用益の差から、複利の凄さがよくわかりますね。

万が一、今後経済が不況に陥り、利回り-5%（赤字）だとどれだけ損する？（20年・月20,000円・利回り-5%）

前述の利回り5%と比べると、意外に損失が低いことが分かります。

[-5%の場合]

[5%の場合]

投稿 【Excel】つみたてNISAシミュレーション（2）【VBA】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

こんにちは。今回は非同期処理で使うPromiseについて、使い方を紹介していきます。

Promiseは同期、非同期処理の考え方が分からないとチンプンカンプンになってしまうので、よく分からない方は先にこちらの記事をご覧ください。

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

JavaScriptは同期的でシングルスレッドの処理で実行されていますが、非同期処理が可能な言語です。ここでは、非同期処理と同期処理・スレッドについてまず説明し、その後遅延処理について説明していきます。同期処理はプログラムの記述順に1つずつ実行されます。そのため、次の処理は前の処理が終わらないと実行するこ...

nyanblog2222.com

2020.06.02

Promiseは非同期処理が完了した後に結果を返しています。
それでは、基本的な記述方法から始めていきましょう。

基本的な「Promise」の書き方

まずは、Promiseオブジェクトを生成することです。
newでPromiseのオブジェクトを、objに設定します。

var obj = new Promise(function(resolve, reject) {
    resolve("成功");
});

また、Promiseの引数の関数では、二つの関数を引数として取ることができ、それぞれ以下の状態での処理を実施することができます。

・resolve：処理成功時の処理
・reject：処理失敗時の処理

「then」を使ってコールバック処理を実行する方法

続いて、Promiseでthenを使用してコールバック処理を実行してみましょう。

var promise_obj = new Promise(function(resolve, reject) {
    resolve();
});

promise_obj.then(function(success, failure) {
    console.log("こっちが後に出力されるよ");
});

console.log("こっちが先に出力されるよ");

then関数はPromiseが返され、処理が成功もしくは失敗した場合にコールバック関数を取ります。

また、Promise.then()は非同期処理のため、6行目の方が先に処理として登録されますが、8行目の方が先に実行されます。
このように、非同期処理では時間がかかる処理が終わる前に後の処理が完了することがあります。

いかがでしたでしょうか。
今回はPromiseを使って基本的な非同期処理の制御方法について、ご紹介していきました。
他にもさまざまな関数が使用できるので、良かったら試してみてください。

投稿 【JavaScript/JS】Promiseの使い方(then/resolve/reject) は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

こんにちは。今回はVue.jsの基本的な使い方をご紹介します。
実践には及びませんが、初心者の方にはおススメの記事になります。

Vue.jsとは

JavaScriptのフレームワークの1つでUI（ユーザインタフェース）を構築するフロントエンドアプリケーションの開発で使用されています。
また、SPA（Single Page Application）開発に使われることが多いフレームワークになります。

SPAとは単一ページでコンテンツを切り替えるWebアプリケーションを指していますが、以前はFlashが多くの方で使用されていました。
ご存じの方も多いと思いますが、Flashは2020年末にサポートが終了することもあり、Vueを使用するようになった開発者も多いと思います。

Vueインスタンスを作成

new Vueでインスタンスを作成

まずは、Vueオブジェクトのインスタンスを作成します。
コンストラクタで引数にオプションを設定することができます。

オプション

el : element

idやclassを指定して、どのHTMLとVueインスタンスを紐づけるか、指定できます。

<div id="sample"></div>

new Vue({
  el : "#sample"
})

data

Vueで使用するデータを定義することができます。

<div id="sample">
  <p>こんにちは、{{ name }}さん</p>
</div>

new Vue({
  el: "#sample",
  data: {
    name: "山田　花子"
  }
})

// 処理結果
こんにちは、山田　花子さん

methods

Vueで使用する関数を定義できます。

<div id="app">
  <p> {{count}}回</p>
  <button v-on:click="count_up">カウント</button>
</div>

new Vue({
  el: "#app",
  data: {
    count:0
  },
  methods: {
    count_up: function() {
      this.count++;
    }
  }
})

実行画面でボタンをクリックするたびに「1回…2回…」とカウントが上がっていきます。

computed

dataオプションの値を使用して、関数で別の計算をする。
計算結果がキャッシュに格納されるため、処理が高速なのが特徴。

watch

dataオプションの特定の値を監視して、変更時に関数を実行する。

データ表示：マスタッシュ構文

先ほどのdataオプションの項目にもありましたが、Vueでデータを表示するのにマスタッシュを使用することで表示することができます。

例：
<p>こんにちは、{{ name }}さん</p>

マスタッシュとは、口ひげの意味があり、「{」を横にすると口ひげに見えることからこの名が付いています。

ひとこと

いかがでしたでしょうか。
Vueは最近JavaScriptで特に注目を集めているフレームワークの一つです。

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

投稿 【JavaScript】Vue.jsの基本（1）【入門】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

こんにちは。ホームページを閲覧している中で、始めはヘッダーが固定されていなかったのに、途中から常に規定の位置で固定されているページをお見掛けしたことはありませんか？

今回はスクロール中にヘッダーナビゲーションを固定させる方法をご紹介していきたいと思います。

また、本記事のコードではJQueryを使用しています。

HTML

HTMLでは、トップ画像とナビゲーション、サイトの長さを出すためにsection・footer要素を置いています。

<div id="top_visual"></div>
<nav>
    <div class="wrapper">
        <ul>
            <li class="item"><a href="#news">News</a></li>
            <li class="item"><a href="#about">About</a></li>
            <li class="item"><a href="#blog">Blog</a></li>
            <li class="item"><a href="#contact">Contact</a></li>
        </ul>
    </div>
</nav>
<section id="news">
    <div class="wrapper">
        <h1>News</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</section>
<section id="about">
    <div class="wrapper">
        <h1>About</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</section>
<section id="blog">
    <div class="wrapper">
        <h1>Blog</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</section>
<section id="contact">
    <div class="wrapper">
        <h1>Contact</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</section>
<footer>
    <p>© 2020 nyanblog</p>
</footer>

CSS

CSSで見た目を整えていきます。
また、JavaScriptでつけ外しをする「nav.fixed」でヘッダーを固定しています。

@charset "utf-8";

*{
    margin: 0;
}

#top_visual {
    background: url(../img/visual.jpg) center center / cover no-repeat;
    height: 480px;
}

nav {
    background: #fff;
    width: 100%;
}

nav.fix {
    position: fixed;
    right: 0;
    top: 0;
}

.wrapper {
    margin: 0 auto;
    max-width: 100%;
}

nav ul {
    justify-content: flex-end;
    display: flex;
    list-style: none;

}

.item {
    margin: 0 2em;
    padding: 17px 0;
}

.item a {
    color: #B78D4A;
    text-decoration: none;
}

.item a:hover{
    color: #D5BC94;
}

h1 {
    font-size: 1.25rem;
    padding: 2rem 0;
    color: #B78D4A;
    font-weight: normal;
}

p {
    line-height: 2;
    padding-bottom: 4rem;
    color: #555A60;
}

section{
    background-color: #F0F0F0;
    padding: 2em;

}

section .wrapper{
    max-width: 800px;
}

footer {
    background-color: #B78D4A;
    padding: 2em;
}

footer p {
    font-size: .8em;
    color: #fff;
    max-width: 800px;
    padding: 0;
}

JavaScript

JavaScriptでスクロールイベントするたびに、スクロールの位置とnav要素の位置と比較しています。
スクロールの位置を超えると、nav要素に「fix」クラスを付与し、上部に固定させます。

$(function() {
    var pos = $("nav").offset().top;
    var height = $("nav").outerHeight();
    $(window).scroll(function () {
        if ($(this).scrollTop() > pos) {
            $("nav").addClass("fix");
            $("body").css("padding-top", height);
        } else {
            $("nav").removeClass("fix");
            $("body").css("padding-top", 0);
        }
    });
});

デモページ

デモページはこちらです。
実際にスクロールで動かしてヘッダーが固定されることを確認してみてください。

ひとこと

いかがでしたでしょうか。
今回はスクロールイベントを利用して、ヘッダーナビゲーションを固定させる方法をご紹介しました。

簡単にコピペで実装することができますので、良かったら試してみてください。
本記事をご覧くださり、ありがとうございました！

投稿 【JavaScript】スクロール中にヘッダーを固定する方法【簡単・コピペOK】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

こんにちは。今回は一定時間後に処理を実行することができる、遅延実行についてご紹介します。

setTimeout・clearTimeout関数

setTimeout関数は一定時間後に処理を実行する時に使用する関数です。
JavaScriptでは、基本的に同期（上から順番に）処理していきますが、明示的に時間をずらして実行したい場合、この関数を利用します。

こちらの例を見てみましょう。
このスクリプトを実行すると、1秒後にコンソール画面に「実行するよ」と表示されます。

setTimeout(function () {
    console.log("実行するよ");
}, 1000);

また、このようにすると繰り返し処理を実行することもできます。

var cnt = 0;
var countUp = function () {
    cnt++;
    console.log(cnt);
    var timeout = setTimeout(countUp, 1000);
}
countUp();

繰り返しsetTimeout関数を使用すると、無限処理になってしまうので、それを止めるためにclearTimeout関数を使用します。

clearTimeout関数は、setTimeout関数で宣言した処理を解除するための関数です。

var cnt = 0;
var countUp = function () {
    cnt++;
    console.log(cnt);
    var timeout = setTimeout(countUp, 1000);

    if (cnt > 4) {
        clearTimeout(timeout);
    }
}
countUp();

このようにclearTimeout関数を使用することで、指定の条件で繰り返し処理を終了することができます。

setInterval・clearInterval関数

先ほど、setTimeout関数で繰り返しの遅延実行を行いましたが似たような関数でsetInterval関数があります。

setInterval関数は、一定時間ごとに処理を実行することができます。

一方、clearInterval関数はsetInterval関数で宣言した処理を解除する関数です。
こちらが使用例になります。
カウントが5になるまで実行し、超えると処理を止めるようにしています。

var cnt = 0;
var countUp = function () {
    cnt++;
    console.log(cnt);
}
var interval = setInterval(function () {
    countUp();
    if (cnt > 4) {
        clearInterval(interval);
    }
}, 1000);

setTimeoutとsetIntervalの違い

ぱっと見では、setTimeout関数とsetInterval関数の違いはなさそうですが、時間間隔に少し違いがあります。

・setTimeout関数：処理終了時点から次に実行するタイミングを指定

・setInterval関数：処理開始時点から何秒間隔で実行するかを指定

そのため、setInterval関数では、間隔の秒数を超過した処理が行われた場合、時間の感覚がずれる可能性があります。
用途に応じて、関数を使い分けるのがおすすめです。

まとめ

setTmeout関数では、一定時間後に処理。
setInterval関数では、一定時間毎に処理。

両者の違いは間隔時間の開始時点が異なることをご紹介していきました。
遅延関数を使用したい場合、よく使う関数になると思いますので、参考にしてみてください。

良かったら次回の記事も見てみてくださいね！
それでは、本記事をご覧くださり、ありがとうございました。

投稿 【JQuery】遅延実行でイベントを発生させる方法 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

こんにちは。前回はJSONデータの基本操作方法を紹介しました。
詳しくは、こちらからご覧ください。

【JSON入門】JSONデータの参照・追加（更新）・削除

こんにちは。前回はJSONファイルとは何かというのを紹介していきました。詳しくは、こちらからご覧ください。 今回はJSONデータの扱い方の続編となります。宜しければご覧ください。 操作するデータ こちらが今回サンプルのデータです。json_...

nyanblog2222.com

2020.06.28

今回はJQueryを使用したJSONファイルの読み込み方になります。
コピペでも実装可能なので、宜しければご覧ください。

フォルダ構成

今回使用するファイルのフォルダ構成はこちらです。

フォルダ構成
│
├─index.html
│    htmlファイル
├─script.js
│    javascript(JQuery)ファイル
└─data.json
     jsonファイル

JSONファイルの用意

まずは読み込むJSONファイルを準備します。
ファイルの場所は、ローカルファイルではセキュリティの問題で絶対パスで設定できないため、相対パスで簡単に設定できる場所に配置してください。

絶対パス：C:\Users\Guest\AppData…やhttps://nyanblog2222.comなどルートディレクトリからやURLなど、目的地までの経路を頭から最後まで記述

相対パス：../javascript/script.js など、現在地から目的地までの経路を記述

こちらがファイルの内容です。

ファイル：data.json

[
    {
        "name": "yamada",
        "school_year": 2,
        "test": {
            "japanese": 65,
            "english": 80
        }
    },
    {
        "name": "hayashi",
        "school_year": 2,
        "test": {
            "japanese": 45,
            "english": 95
        }
    },
    {
        "name": "sato",
        "school_year": 1,
        "test": {
            "japanese": 75,
            "english": 35
        }
    }
]

JSONファイルの読み込み

$.ajax()

$.ajax()での読み込み方法です。

$.ajax({
    // 読み込みの設定
    type: "GET",
    url: "data.json", // ファイルパス（相対パス）
    dataType: "json", // ファイル形式
    async: false // 非同期通信フラグ
}).then(
    function (json) {
        // 読み込み成功時の処理
        console.log("読み込みに成功しました");
        console.log(json)
        json.forEach(function (data) {
            console.log(data)
        });
    },
    function () {
        // 読み込み失敗時の処理
        console.log("読み込みに失敗しました");
    }
);

読み込みの設定

1～6行目でjsonを読み込む際の設定を記述しています。
ファイル名やファイルの配置を変更する場合、4行目の”data.json”を変更してください。
また、6行目のasyncでは、非同期通信フラグを設定しています。
デフォルトではtrueですがfalseに設定すると、読み込みが終わるまで他の処理を進めることができません。逆に読み込みが終わってる次の処理へ行いたい対場合、falseにした方が良いです。

読み込み後の処理

7行目でthen(成功,失敗)の処理が分かれています。
8～15行目では読み込み成功時の処理を、16～19行目では読み込み失敗時の処理を記述しています。

また、11行目でJSONファイルのデータ全てをコンソールへ出力、
12～14行目でJSON内の配列データを1つずつコンソールへ出力しています。

then()ではなく、done()・fail()を使うことも可能です。
また、どの場合でも処理するconplete()関数もあります。

注意点

Jquery1.8未満では、success()、error()、conplete()が使用されていましたが、現在は非推奨の関数となっております。
上記の関数が無くなることに備えて、done()、fail()、complete()を使用するようにしましょう。

done、fail、complete関数を使用した場合の記述です。

$.ajax({
    // 読み込み設定
}).done(function(json){
    // 成功
}).fail(function(){
    // 失敗
}).always(function(){
    // 常に最後に処理
});

$.getJSON()

$.getJSON()での読み込み方法です。

$.getJSON("data.json")
    .done(function (json) {
        // 成功
    }).fail(function () {
        // 失敗
    }).always(function () {
        // 常に最後に処理
    });

JSONファイルの読み込み -> $.ajax() -> 注意点で記述しているコードと似ています。
設定部分が$.ajax()と比べて少し簡略化されているところが違いですね！

$.ajax()でも、$.getJSON()でも使いやすいと思いますので、自分の好みで使用を決めていいと思います。

読み込みに失敗する場合

コンソール画面でエラーを確認

JSONファイルはちょっとしたミスで読み込めない場合が多くあります。
もちろん失敗した理由が分からなければ修正する方法も分かりません。

そこで、失敗時の関数でこのように記述し、コンソール画面を確認することである程度はエラーの内容を理解することができます。

$.ajax({
    ・・・略
}).then(
    function (json) {
        ・・・略
    },
    function (jqXHR, textStatus, errorThrown) {
        // 読み込み失敗時の処理
        console.log("読み込みに失敗しました");
        // httpステータス
        console.log("jqXHR : " + jqXHR.status);
        // タイムアウト、パースエラー
        console.log("textStatus : " + textStatus);
        // エラーの詳細情報
        console.log("errorThrown : " + errorThrown.message);
    }
);

大体は「jqXHR.status」と「errorThrown.message」の内容をネット検索等、調べたらエラーを解決することができると思います。

JSONファイルのミスを防ぐWEBツール

JSON Pretty Linter

JSONファイルの記述ミスを防ぐためのおすすめはこちらです。
こちらで事前にチェックすることでエラーの割合はかなり減ると思います。

JSON変換ツール

CSV to JSON – CSVJSON

CSVやSQLからJSONに変換できるツールです。
CSVやSQLを良く使用されるかたは一度使用してみてはいかがでしょうか。

まとめ

いかがでしたでしょうか。
今回はJQueryでJSONファイルを読み込む方法をご紹介しました。

JSONファイルを読み込むには、こちらの2つの方法で実装できます。
・$.ajax()
・$.getJSON()

また、JSONファイルの読み込みには、ちょっとしたミスでエラーが発生しますので、デバッグでステータスコードを調べることが解決の近道です。

今回は全3回のJSONの記事でしたが、新しくJSONの内容を学んだ後には新しい記事を投稿しようとおもいます。良かったら次回も見てみてくださいね！

↓↓↓【JSON入門シリーズ♪】

【JSON入門】JSONとは？JS相互変換について(stringify/parse)

JSON入門として、JSONの基本知識と基本的な使い方（JSONとJavaScriptオブジェクトとの相互変換）を紹介します。相互変換については、stringfy関数を使用したエンコード方法（encode）、parse関数を使用したデコード方法（decode）を分かりやすく解説♪

nyanblog2222.com

2020.06.27

【JSON入門】JSONデータの参照・追加（更新）・削除

こんにちは。前回はJSONファイルとは何かというのを紹介していきました。詳しくは、こちらからご覧ください。 今回はJSONデータの扱い方の続編となります。宜しければご覧ください。 操作するデータ こちらが今回サンプルのデータです。json_...

nyanblog2222.com

2020.06.28

【JSON入門】JQueryでのJSON読み込み方法(ajax/getJSON)

JSON入門として、JQueryを使用したJSONファイルの読み込み方を紹介します。「$.ajax()」や「$.getJSON()」を使った読み込み方法や、読み込みに失敗する場合の対処方法など分かりやすく解説♪

nyanblog2222.com

2020.06.30

投稿 【JSON入門】JQueryでのJSON読み込み方法(ajax/getJSON) は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

こんにちは。前回はJSONファイルとは何かというのを紹介していきました。
詳しくは、こちらからご覧ください。

【JSON入門】JSONとは？JS相互変換について(stringify/parse)

JSON入門として、JSONの基本知識と基本的な使い方（JSONとJavaScriptオブジェクトとの相互変換）を紹介します。相互変換については、stringfy関数を使用したエンコード方法（encode）、parse関数を使用したデコード方法（decode）を分かりやすく解説♪

nyanblog2222.com

2020.06.27

今回はJSONデータの扱い方の続編となります。
宜しければご覧ください。

操作するデータ

こちらが今回サンプルのデータです。
json_dataが配列、testはオブジェクトになっています。
※違いは” [ ] ”で括られているか、” { } ”で括られているかです。

var json_data = [
    { name : "yamada", school_year : 2, test : { japanese : 65, english : 80 }, },
    { name : "hayashi", school_year : 2,  test : { japanese : 45, english : 95 }, },
    { name : "sato", school_year : 1,  test : { jananese : 75, english : 35 }, }
];

JSONデータを参照

まずは、作成したJSONデータを参照する方法です。

データの参照方法

json_dataは配列のため、添え字でデータを参照することができます。
それ以外はオブジェクトの構造になっており、「オブジェクト.プロパティ」のように、ドットで参照することができます。

// name、school_year：プロパティ
console.log(json_data[0].name); // => yamada
console.log(json_data[1].school_year); // => 2

// testプロパティ（オブジェクト）にenglishプロパティを保持
console.log(json_data[2].test.english); // => 35

特定のデータのみ参照する方法

filter関数を使用することで、特定のデータのみ参照することができます。

// filter関数
var data = json_data.filter(function (item) {
    // 英語が50点以上の人のデータを取得
    return item.test.english >= 50;
});

// 条件に一致したデータの”name”を参照
data.forEach(function (value){
    console.log(value.name) // => yamada, hayashi
});

JSONデータを追加

新規プロパティを指定して値を追加

プロパティと値をそのままデータに追加する方法です。

それぞれ、
　配列と同じ階層にareaプロパティ「”Tokyo”」が追加
　配列添字 [1] 内のオブジェクトにareaプロパティ「”Osaka”」が追加
になっています。

json_data.area = "Tokyo";
json_data[1].area = "Osaka";

console.log(json_data)
// { name : "yamada", school_year : 2, test : { japanese : 65, english : 80 }, },
// { name : "hayashi", school_year : 2,  test : { japanese : 45, english : 95 }, area: "Osaka" },
// { name : "sato", school_year : 1,  test : { jananese : 75, english : 35 }, },
// area: "Toyko"

push関数でオブジェクトを追加

オブジェクトを作成してpush関数を使う方法です。
push関数で追加したオブジェクトは末尾に追加されます。

var new_data = { name : "tanaka", school_year : 3, test : { japanese : 85, english : 60 }, };
json_data.push(new_data);

// 末尾のデータ
console.log(json_data[json_data.length - 1])
// { name : "tanaka", school_year : 3, test : { japanese : 85, english : 60 }, }

値やオブジェクトを更新する場合

データ内の値やオブジェクトを更新する場合、配列やオブジェクトをそのまま指定して値を設定するだけで更新が可能です。

// プロパティの値を指定
json_data[1].area = "Osaka";
console.log(json_data[1].area) // => Osaka

json_data[1].area = "Nagoya";
console.log(json_data[1].area) // => Nagoya

// オブジェクトを更新
console.log(json_data[2])
// { name : "hayashi", school_year : 2,  test : { japanese : 45, english : 95 }, }

var new_data = { name : "tanaka", school_year : 3, test : { japanese : 85, english : 60 }, };

// name:"hayashi"オブジェクトを"tanaka"オブジェクトに更新
json_data[2] = new_data;
console.log(json_data[2])
// { name : "tanaka", school_year : 3, test : { japanese : 85, english : 60 }, }

JSONデータを削除

指定のプロパティを削除するときは、「delete」演算子を使用します。

// 各配列の"school_year"を削除
json_data.forEach(function (value) {
    delete value.school_year;
    console.log(value)
});

// { name : "yamada", test : { japanese : 65, english : 80 }, },
// { name : "hayashi", test : { japanese : 45, english : 95 }, },
// { name : "sato", test : { jananese : 75, english : 35 }, },

配列の要素を削除したい場合は、削除したい要素をfalse条件にしてfilter関数を使えば可能です。

最後に

いかがでしたでしょうか。
今回はJSONデータの扱い方続編ということで、基本的な操作方法（参照・追加（更新）・削除）についてご紹介しました。
次はもう少し応用的な操作方法をご紹介できたらと思います。

良かったら次回も見てみてくださいね！

↓↓↓【JSON入門シリーズ♪】

【JSON入門】JSONとは？JS相互変換について(stringify/parse)

JSON入門として、JSONの基本知識と基本的な使い方（JSONとJavaScriptオブジェクトとの相互変換）を紹介します。相互変換については、stringfy関数を使用したエンコード方法（encode）、parse関数を使用したデコード方法（decode）を分かりやすく解説♪

nyanblog2222.com

2020.06.27

【JSON入門】JSONデータの参照・追加（更新）・削除

こんにちは。前回はJSONファイルとは何かというのを紹介していきました。詳しくは、こちらからご覧ください。 今回はJSONデータの扱い方の続編となります。宜しければご覧ください。 操作するデータ こちらが今回サンプルのデータです。json_...

nyanblog2222.com

2020.06.28

【JSON入門】JQueryでのJSON読み込み方法(ajax/getJSON)

JSON入門として、JQueryを使用したJSONファイルの読み込み方を紹介します。「$.ajax()」や「$.getJSON()」を使った読み込み方法や、読み込みに失敗する場合の対処方法など分かりやすく解説♪

nyanblog2222.com

2020.06.30

投稿 【JSON入門】JSONデータの参照・追加（更新）・削除 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

こんにちは。JSONファイルについて、ご存じでしょうか。
本記事はJSONファイルについてと、基本的な扱い方についてご紹介します。

JSONファイルとは

どういうファイルなの？

JSONは「JavaScript Object Notation」で直訳すると、「JavaScriptのオブジェクト表記法」となります。

つまり、情報のやりとりができるテキストベースのデータ形式を表しています。
同じようなデータ形式で、XMLファイルが代表的な例としてよく挙げられています。

JSONの良いところ

JSONの特徴は主にこちらの3点を満たしており、この特徴を持つことで、サーバ間の通信やさまざまなプログラミング言語との共有を可能にしています。

• テキストデータのため、軽量
• オブジェクトのように扱える
• 単純な構造

オブジェクトとは似て非なるもの

先ほどのJSONの良いところでも上げましたが、相互変換が可能なため、JSONはオブジェクトのように扱うことができます。

しかし、JSONはテキストデータであり、オブジェクトではありません。

こちらの例を見てください。

// object
var obj = { name: "Taro", old: 17, tel: "000-0000-1" };

// JSON
var json = { "name": "Hanako", "old": 18, "tel": "000-0000-2" };

テキストデータに変換する前のJSONは、連想配列に似た構造となっていますが、明確な違いがあります。
それはこちらです。

• プロパティのみ含めることができ、関数は含められない
• プロパティをダブルクォーテーション（””）で括る
  →括られた文字列のみプロパティとして使用できる

また、注意点として、カンマ、コロンが1つでも抜けているとJSONとして無効になる場合もあります。

この辺りを理解しておくだけでも、開発するときに違うと思います。

JSONの基本的な使い方

さっそく、試してみましょう。
今回はJSONとJavaScriptのオブジェクトとの、相互変換を行ってみます。

オブジェクトからJSONへ（エンコード encode）

stringfy関数
・JavaScriptのオブジェクトからJSONへの変換
・JSONデータとして通信する前に変換することが多い

// object
var obj = { name: "Taro", old: 17, tel: "000-0000-1" };

var json = JSON.stringify(obj);
console.log(json)

JSONからオブジェクトへ（デコード decode）

parse関数
・JSONからJavaScriptへの変換
ファイルから読み込み後、プログラムで使用しやすいようにデコードする必要がある。

注意する点として、jsonはテキストベースなので全体をシングルクォートで括っています。

// JSON
var json = '{ "name": "Hanako", "old": 18, "tel": "000-0000-2" }';

var obj = JSON.parse(json);
console.log(obj)

まとめ

いかがでしたでしょうか。
今回はJSONの基本的な知識と、基本的な扱い方について、ご紹介しました。
次回はJSON登録や更新などについて、ご紹介していきます。

良かったら次回も見てみてくださいね！

↓↓↓【JSON入門シリーズ♪】

【JSON入門】JSONとは？JS相互変換について(stringify/parse)

JSON入門として、JSONの基本知識と基本的な使い方（JSONとJavaScriptオブジェクトとの相互変換）を紹介します。相互変換については、stringfy関数を使用したエンコード方法（encode）、parse関数を使用したデコード方法（decode）を分かりやすく解説♪

nyanblog2222.com

2020.06.27

【JSON入門】JSONデータの参照・追加（更新）・削除

こんにちは。前回はJSONファイルとは何かというのを紹介していきました。詳しくは、こちらからご覧ください。 今回はJSONデータの扱い方の続編となります。宜しければご覧ください。 操作するデータ こちらが今回サンプルのデータです。json_...

nyanblog2222.com

2020.06.28

【JSON入門】JQueryでのJSON読み込み方法(ajax/getJSON)

JSON入門として、JQueryを使用したJSONファイルの読み込み方を紹介します。「$.ajax()」や「$.getJSON()」を使った読み込み方法や、読み込みに失敗する場合の対処方法など分かりやすく解説♪

nyanblog2222.com

2020.06.30

投稿 【JSON入門】JSONとは？JS相互変換について(stringify/parse) は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

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

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

HTML

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

<body>
    <div id="result"></div>
</body>

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 ~にゃんぶろぐ~ に最初に表示されました。