一軒家で防犯カメラを設置したいと考えたことはありますか？

私自身、新築を建築中に防犯カメラを設置することになりましたので、
選んだ防犯カメラや設置するために必要なものをご紹介いたします。

さらに防犯カメラの設定方法も記載しておりますので、合わせてご参考になればと思います。

購入したもの

今回は新築建築中に施工してもらうことになり、
以下の3つを購入いたしました。

屋外用カメラ
Tapo C500 | 屋外パンチルトセキュリティWi-Fiカメラ – TP-Link

撮影保存用
サンディスク 高耐久microSDカード 128GB

カメラ設置用器具
露出用四角ボックス | PV4B-ANF – 未来工業

選んだ理由

屋外用カメラ　TP-Link「Tapo C500」

TP-Link WiFi ネットワークカメラ みまもりカメラ 屋外カメラ 防犯カメラ パン/チルト対応 スマホ アプリ 1080p FullHD IP65 防水 防塵 音声通話 メーカー保証1年 Tapo C500

created by Rinker

• Amazon
• 楽天市場
• Yahooショッピング

防犯カメラについては、以下の条件で選びました。

• 屋外用カメラであること
  →　防水防塵必須
• パンチルト（カメラの首振り機能）対応での自動追尾機能があること
  →　設置場所にもよるかと思いますが、より防犯性を高めるため
• Wifiでの通信に問題がなさそうであること
  →　製品によっては良く途切れたりしてしまうようなので。口コミを見て判断
• メーカーに一定の信頼があること
  →　安くても使えなくては意味がないので、マイナーなメーカーは避けました。
• 予算内であること
  →　１台１万円未満で探しました

当てはまったのが、TP-Link「Tapo C500」と塚本無線「ゴマちゃん2」でした。

最終的に見た目が好みだったため、TP-Link「Tapo C500」にしました。

撮影保存用　サンディスク「高耐久microSDカード 128GB」

SDカードの選定にあたっては、tapoの公式サイトを参考にしました。
Tapoカメラが対応するMicroSDカードは何ですか？

寿命や信頼性などの観点から「高耐久」
かつ、「Tapo C500」の解像度は1080pなので、
以下の表より2週間程度保存できる128GBにしました。

サンディスクにしたのは、SDカードの最大手メーカーで信頼性があったためです。

カメラ設置用器具　未来工業「PV4B-ANF」

防犯カメラの電源アダプタは防水対応ではないため、
直接壁面に取り付ける場合は別途器具が必要でした。
（場合によって電源を壁面に埋め込めるようなので、工務店と相談してみてください。）

本製品は、工務店に言われたものを選びました。

みみねこ

調べてみると、防犯カメラの設置においてはメジャーな製品のようです！

TP-Linkとは？どの会社が作っているの？

TP-Linkとは、中国が本社の世界シェアNo.1のWi-Fi機器メーカーです。

暗号化方式はWPA・WPA2を使用しており、そこまで心配する必要はないかと思いますが、
恐らく心配しているのは中国製品ということ…。

Tapoアプリで録画データを確認できますが、中国のサーバーを経由しており、さらに常時接続する必要があるため、当然リスクはあります。

私は、TP-Linkの製品を以前から仕事やプライベートで使用していて馴染みがあり、屋外カメラなのでリスクが低いと考え、購入を決めました。

みみねこ

個人的な感想です。あくまで自己責任でお願いします！

もし国内製品であることを重視するのであれば、以下のような製品もおすすめですが、
価格がぐっと上がるのでご自身の要望に合うカメラを見つけてみてください♪

・日本製のカメラ、サーバー

パナソニック VL-WD813K センサーライト付屋外ワイヤレスカメラ VLWD813K

created by Rinker

• Amazon
• 楽天市場
• Yahooショッピング

・ネット環境不要の防犯カメラ

WTW 塚本無線 500万画素XPoEバレット型白4台 HDD2TB搭載 PoE給電屋外用防犯カメラ 家庭用 ネットワークカメラ レコーダー スマホ

created by Rinker

WTW 塚本無線

• Amazon
• 楽天市場
• Yahooショッピング

製品を確認

屋外用カメラ：Tapo C500

開封し、中身を確認してみます。

内容は以下が同梱されています。

• Tapo C500 … カメラ本体
• 電源アダプター
• 取り付け用テンプレート
• ネジ・アンカー類
  アンカー × 4
  ネジ(大) × 4
  ネジ(小) × 2
• 防水シール
• クイックスタートガイド 説明＆取り付け編 … 英語で記載
• クイックスタートガイド アプリ導入編 … さまざまな言語で記載
• GNUライセンスノート
• 保証書

SDカード：SDXCカード

このカメラに対応しているのは4GB~512GBのSDHCまたはSDXCカードです。

今回は128GB、SDXCカードを購入しました。

カメラ設置用器具：露出用四角ボックス

内容は以下が同梱されています。

• トラスタッピンねじ × 4
• なべ小ねじ × 4
• 絶縁キャップ大 × 4
• 絶縁キャップ小 × 4
• 真鍮ナット × 4
• ケーブルブッシング

カメラ設置の前のセッティング – 機材編

テンプレートとコードの取り付け

まず、取り付け用テンプレートをカメラ本体に取り付けます。

カメラから出ているコードを画像のようにテンプレートの穴に通します。

テンプレートをカメラ本体にはめます。

ネジ小でカメラ本体とテンプレートを固定します。

次にカメラ本体のケーブルとアダプタのケーブルを接続します。

この防水シールをカメラ本体のケーブルとアダプタのケーブルの間に挟み、接続します。

カメラにSDカードをセット

カメラにSDカードをセットします。

画像赤枠がSDカードをセットする場所になります。
ネジで固定されているので、ドライバーで外してください。

SDカードをセットします。
文字が記載してある方を下にして差し込みます。

ネジを留めなおして完了です。

これで設置前の機材準備は完了です。

余談：リセットボタン

画像の赤枠がリセットボタンになります。wifiの接続エラーなどで押すこともあるかもしれませんので、頭の片隅に入れておいてください。

カメラ設置の前のセッティング – アプリ編

ここからはスマートフォンを使ってセッティングします。

【アプリ】TP-Link Tapoのインストール

TP-Link Tapoのアプリをインストールします。

アプリを起動すると画面が表示されるので、

• TP-Link IDをお持ちでない方は「TP-Link IDを作成」
• TP-Link IDをお持ちの方は「ログイン」

をそれぞれタップします。

TP-Link IDを作成

IDを作成する場合は以下の画面よりメールアドレスとパスワードを設定してIDを作成していきます。

作成後は設定したメールアドレス宛にメールが届きますので、
メールを開き「Click to Finish」をタップして登録を完了させます。

マイホームよりカメラ（デバイス）を追加

ログインするとマイホームのページが開きます。

右上の「＋ボタン」→「デバイス追加」→「屋外用カメラ」→「Tapo C500」よりカメラ（これよりアプリ内ではデバイスと呼びます）を追加します。

スマートフォンがこちらの画面へ切り替わりますので、
カメラのアダプタをコンセントへ差し、電源を入れます。

カメラのLEDが緑と赤に点滅するようになったらスマートフォンの画面の「次へ」をタップします。

スマートフォンをTapoデバイスのWi-Fiに接続します。

続いて、カメラ（デバイス）を家のWi-Fi（2.4GHz）に接続し、ペアリングします。

Wi-Fi接続後、ピコン！とカメラから？音が鳴ります。

カメラ（デバイス）に名前、設置場所（別の場所を作成）、アイコンを設定してください。
これらはマイホームに表示されるので、複数カメラを付ける場合に区別できるように設定しましょう。

これでデバイスの追加は完了です。

完了画面ですが、なぜか1台目の設定では英語、2台目では日本語で表示されました。
内容は一緒なのですが、参考までにそれぞれ載せておきます。

「いいね」をタップすると、Tapo Careクラウドサービスの広告が表示されます。
録画内容をクラウド上に保存することができたりしますが、
今回はSDカードに保存するため「スキップ」をタップします。

すると、ポップアップが出てきますが、「Got It（了解）」をタップするとこの広告は終わります。

この画面はSDカードを使用する場合はSDカードを追加して、初期化、動作を確認してください。という内容です。
すでにSDカードを入れているので、そのままボタンをタップして進んでください。

デバイスの追加は完了です。
「スタート」をタップして次へ進みます。

SDカードの初期化

SDカードを初期化するか尋ねるポップアップが表示されます。
「初期化」をタップするとSDカードの初期化が始まります。
初期化が完了すると、SDカードが検出された旨のポップアップが表示されます。

SDカードを後から入れた場合は、画面右上設定ボタンより
「ストレージ＆録画」→「microSDカード」→「microSDカードを初期化」より初期化が行えます。

ファームウェアアップデート

ファームウェアが最新でない場合は設定ボタンに赤いマークがついているので
「ファームウェアアップデート」→「アップデート」よりアップデートを行います。

アップデートが完了すると画像のように「最新のフォームウェア」と表示されます。

不具合の修正や性能の向上が行われるため、この辺りは個人の判断になりますが基本的にアップデートは行うようにした方が良いと思います。

これでアプリの設定は完了です。

変更した機能

個人で変更した設定についてご紹介します。個人の好みや使用用途によって設定を変えてみてください。

外壁に設置

工務店にお願いして2か所、このような形で外壁にカメラを設置していただきました。

まとめ

設定も分かりやすかったですし、機能的に今のところ不満はないのですが、
1点だけどうしても困ったところがありました。

ネジが硬すぎて開かなかったところでした。
女性の力では開けられない、閉められないのでは…？と思うくらい硬かったです。

夫に頼んでやってもらいましたが、男の人でもかなり硬かったみたいですね。
DIYを少しでも考えている方は電動ドライバーを検討してもいいかもしれません…。

屋外用カメラ
Tapo C500 | 屋外パンチルトセキュリティWi-Fiカメラ – TP-Link
撮影保存用
サンディスク 高耐久microSDカード 128GB
カメラ設置用器具
露出用四角ボックス | PV4B-ANF – 未来工業

投稿 【屋外防犯カメラ】Tp-link C500の設置【一軒家・家庭用】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

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 ~にゃんぶろぐ~ に最初に表示されました。

最近、携帯電話をiPhone（7）からXiaomiに変更しました。

本記事では使用しているととある不便を感じたため、それを解消する方法をご紹介いたします。

それは、ロック画面で表示されるgoo newsを誤タップしてしまうことです…。

iPhone7から変えたので端末の大きさは結構変わったこともあるかもしれませんが、頻繁に誤タップを起こすので使用開始1週間で許容できなくなってしまいました…。

みみねこ

表示させるたびにニュースが切り替わっていたので、格安SIMを使用している私にとってはデータ通信料が上がるのではと気になってしまいました。

なぜアンインストール？

なぜ無効化ではなく、アンインストールの方法を紹介しているのか？

先に無効化を行っていたのですが、通知でおすすめとして頻繁に表示されてしまうため、
それはそれで邪魔に感じ、今回アンインストールという方法を行っています。

もし再度必要になった場合でも再インストールも行えそうでした。
Google Playアプリでは出てきませんでしたが、Googleアプリで「Mi Wallpaper Carousel」検索するとGoogle Playのリンクが表示され、そこからインストール可能です。

5分もかからずに終わりますので、良かったら試してみてください♪

アプリの削除方法

こちらのアプリですが、「壁紙カルーセル」と呼ばれる端末に初期から入っているアプリになります。

そのためか普通に削除しようとしても見つからず、ひと手順加える必要があります。

流れとしては、こちらになります。

ここからは画像付きで説明しています。

1.「設定」をタップ

「設定」アイコンをタップします。

2.「アプリ」をタップ

設定内の「アプリ」をタップします。

3.「アプリを管理」をタップ

「アプリを管理」をタップします。

4.「…（縦）」をタップ

「アプリを管理」画面でアプリ一覧が表示されました。

通常、アプリ一覧からアンインストールしたいアプリをタップするのですが、
このままだと「壁紙カルーセル」は表示されません。

表示させるため、画面右上に表示されている「…」をタップします。

5.「すべてのアプリを表示」をタップ

「すべてのアプリを表示」をタップします。

6.検索枠で「壁紙」と入力し、「壁紙カルーセル」をタップ

検索枠に「壁紙」と入力すると、「壁紙カルーセル」のアプリが表示されるのでタップします。

7.「アンインストール」をタップ

あとは、通常のアプリを削除する方法と一緒です。

「アンインストール」をタップします。

8.「OK」をタップ

「OK」をタップし、作業は完了です。
ロック画面を開いて、ニュースが表示されなかったり「壁紙カルーセル」のアイコンが左下になければ大丈夫です！

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

毎日使用するものですから、できるだけストレスなく使っていきたいですよね♪
また他にも紹介する内容があれば発信していこうと思います。

投稿 【Xiaomi】ロック画面に表示されるニュースを消す方法 は 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 ~にゃんぶろぐ~ に最初に表示されました。

今回は、電気・ガス料金などの公共料金の請求書（払込票）に記載されたバーコードを
PayPay（ペイペイ）アプリで読み取った（スキャン支払いの写真）際に
「このバーコードは利用できません」とエラーが出てしまう原因や対処方法を紹介します。

↓スマートフォンの画面下部に出るこのエラーです。

よくある原因や対処方法

「このバーコードは利用できません」とエラーが発生してしまった際に、
ついついバーコード自体がおかしいと思ってしまいますが、
よくある原因として「バーコードの読み取りミス」があります。

バーコードが上手く読み取れない主な原因としては

１．暗い場所で読み取ってしまっている
２．バーコードの紙が歪んでいる
３．バーコードを読み取り時に表示される四角の枠内で納めようとしてしまっている

などが考えられます。
中でも、3番の四角い枠については、あくまで枠を中心にして読み取るというだけで、
枠内で読み取る必要はない（むしろ枠内で読むとエラーがでやすい）ので要注意です！

上記を踏まえて、上手く読み取る方法（対処方法）としては以下となります。

その他の対処方法

もし前項でできない場合は以下も試してみてください。

参考として、公式ヘルプの引用も載せておきますのでよかったらご確認ください。

バーコードが読み取れない場合は、以下をお試しください。
・PayPayアプリのバージョンを最新にする
・明るい場所で読み取りをする
・バーコードを真上から読み取る
・四角い枠内ではなくバーコードが読み取り画面の90%ほど表示されるように近づけて読み取る
・10秒以上読み取る
・携帯電話端末を横向きにして読み取る
・バーコードの汚れを拭き取る
・バーコードが破れている場合は可能であれば新しいものに交換する

PayPay公式ヘルプ（請求書払いについて）より引用

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

投稿 PayPay「このバーコードは利用できません」原因や対処方法（ペイペイ） は 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 ~にゃんぶろぐ~ に最初に表示されました。

今回は、Excelの機能である「VLOOKUP関数」についてサンプルを交えて紹介します。

みみねこ

VLOOKUP関数はとても便利な機能ですが、使い方を間違えると痛い目を見ます。

是非、基本の使い方から注意事項までご確認ください！

基本的なVLOOKUP関数の使い方

VLOOKUP関数は、①検索対象を②ある場所（範囲）で探し、④存在すれば（もしくは近似値があれば）その行にある③指定列の値を返す関数です。

VLOOKUP関数の引数は以下になります。
⇒VLOOKUP(①,②,③,④)

VLOOKUP関数は、
・複数のシートにまたがっているデータを必要な情報のみ１つのシートにまとめる
・システムからcsv形式で抽出した複数のデータを必要な箇所のみ抜き出し分析する
などなど、使いやすい関数なので知っていて確実に損のない機能です。

この関数は第4引数によって使いどころが異なるので、次項からは分けて説明していきます。

第4引数が「0/FALSE（完全一致）」の場合

検索対象が存在した場合に、値を返します。存在しなければ「#N/Aエラー」を返します。

例：商品販売記録

商品の販売記録を管理する帳簿です。
商品テーブルに商品の情報を入れ、商品販売記録にて販売代金を管理しています。

値段のD5セルに
「=VLOOKUP(C5,$I$5:$K$9,3,FALSE)」を入れ、その後列にコピーしています。

これで、商品名を入れると値段を引っ張ってくることができるようになりました。

例：健康診断の通知

社員リストのデータを元に、健康診断の通知文書を作成します。

・健康診断シート

・通知文書

印刷Noを変えるとそれぞれの値が変わるように、
C3→「=VLOOKUP($G$2,社員リスト!$A:$G,2,FALSE)」
C4→「=VLOOKUP($G$2,社員リスト!$A:$G,3,FALSE)」
C5→「=VLOOKUP($G$2,社員リスト!$A:$G,4,FALSE)」
C9→「=VLOOKUP($G$2,社員リスト!$A:$G,5,FALSE)」
C10→「=VLOOKUP($G$2,社員リスト!$A:$G,6,FALSE)」
と、入れています。

これで、印刷Noを変えるだけで通知対象を変えることができるようになりました。

第4引数が「1/TRUE（近似値）」の場合

検索対象が存在した場合に、近似値を返します。

近似値というのがミソで、
検索範囲内の上から順に見ていって検索対象が見つからなければ、検索対象以下の行をとってくる性質があります。
上から順にみるため、検索する範囲が必ず昇順（小さい順）に並んでいる必要があります。

また、検索対象以下の値が存在しなければ「#N/Aエラー」を返します。

例：成績管理

点数に対してS～Eまでの評価をつけるパターンです。

D3に「=VLOOKUP(C3,$F$3:$I$8,4,TRUE)」と入れて、列にコピペしてます。

これで、点数の値によって自動で評価をつけられるようになりました。

#N/Aエラーの対処方法

検索対象が見つからない等で「#N/A」エラーが出たときの対処方法です。

この対処にはIFERROR関数を使います。
⇒IFERROR(①,②)

例えば、以下のようになります。

=VLOOKUP(C5,$I$5:$K$9,3,FALSE)
↓
=IFERROR(VLOOKUP(C5,$I$5:$K$9,3,FALSE),”※商品テーブルにありません”)

エラー内容が一目でわかるようになりましたね。

注意事項

VLOOKUP関数は、よく知らず使うと必ず痛い目を見ます。
よく注意して使うようにしてください！

第4引数のTRUEとFALSEに注意する

一番気を付けて欲しいのがこちらです。
内容は前述の通りで、動作が全く異なるため注意してください！

第2引数の検索する場所（範囲）は必ず固定しておく

下部のセルへコピペする際に範囲がずれてしまうので、必ず値を$をつけて固定してください。

例えば、以下のように$を付けてください。
（第２引数にカーソルを当ててF4を押すとまとめて$をつけれます）
VLOOKUP(C5,I5:K9,3,FALSE)
↓
VLOOKUP(C5,$I$5:$K$9,3,FALSE)

第4引数は省略しない

第4引数は省略すると、基本的には「1/TRUE（近似値）」になります。

分かっていてやっているのであればまだいいのですが、
前述のとおりFALSEとTRUEでは動きが異なり、TRUEだと近似値をとるので、結果を見ても気づきにくいです。

また、省略の仕方（第4引数の「,」の有無）によってTRUE、FALSEが変化するようで、

VLOOKUP(C5,$I$5:$K$9,3)　→　TRUE（近似値）
VLOOKUP(C5,$I$5:$K$9,3,)　→　FALSE（完全一致）
となります。

なので、TRUEであっても省略しない方が安全かと思います。

第4引数がTRUEの時、検索する範囲が昇順であること

前述の通り、
TRUE（近似値）だと「検索対象以下の値をとる」ため、昇順でないと正しい値が出ません。

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

投稿 【EXCEL】VLOOKUPの使い方（1と0の違い、#N/Aエラー等） は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

CSVファイルをExcelで確認すると文字化けすることはありませんか。
それは文字コードがUTF-8のBOM無しで作成されているからかもしれません。

UTF-8とは文字コードの一種です。
本記事ではUTF-8、UTF-16等のファイルでBOM付き、BOM無しの違い、BOM有無の確認方法、作成方法についてご紹介させていただきます♪

BOM付き、無しの違いについて

まずBOMの話を進める前にUnicodeとUTF-8、UTF-16、UTF-32の話を少しします。

UnicodeとUTF-8、UTF-16、UTF-32とは

ここでは簡単に話をしますが、

Unicodeとは世界中の様々な文字を集めた定義（符号化文字集合）のことです。

UTF-8、UTF-16、UTF-32はUnicodeを符号化して文字コード（符号化方式）が設定された状態です。
要は番号が振られています。この番号の振り方が異なるのでUTF-8、UTF-16、UTF-32があります。

また、UTF-16とUTF-32にはコンピュータの構造によってエンディアン（バイトオーダー）方式が異なります。

BOMとは

BOMの説明に戻りますが、BOMというのはバイトオーダーマーク（byte order mark）といい、ファイルの先頭に付与されます。
※ メモ帳等のテキストエディタで開いて目視で確認することはできません。

このBOMの値を見てUTF-16、UTF-32エンディアンを判定します。

みみねこ

…ん？ということはもしかしてUTF-8にはBOMは必要ない？

UTF-8はエンディアン方式の違いはないので本来BOMは必要ありません。

しかし、アプリ（プログラム）によっては文字コードをUTF-8と判断できず、文字化け等の不具合を起こすことがあります。
※ Microsoftのアプリ（Excel、メモ帳）で多い

また逆にBOM付きを想定されていないアプリ（プログラム）では、不具合を起こす場合があります。
※ Webページの開発で使われるhtmlやPHPではBOM無しでないと動作しない場合がある

そのため、UTF-8ではBOM付き、BOM無しのファイルが存在します。

ファイルのBOM確認方法

ここではBOM有無の確認方法についてご紹介します。

Windowsに標準で入っているメモ帳で確認するのが一番簡単です。

メモ帳での確認方法

ファイルをメモ帳で開いたときに右下に文字コードが表示されます。

ただし、Windowsのバージョンによっては保存することで自動的にBOM付きのファイルで上書き保存してしまうことがあるので注意が必要です。

※ サクラエディタやTeraPadなど他のテキストエディタでも確認できるものもありますので、確認してみてください。

バイナリエディタでの確認方法

正直バイナリエディタで確認する必要はありませんが、どうしても文字コードを見て確認したい場合はバイナリエディタでBOMを確認することができます。

バイナリエディタでファイルを開き、先頭バイトが「EF BB BF」が付いているとBOM付きファイルであることを確認できます。

画像ではフリーソフトの「Stirling」を使っています。

BOM付き、BOM無しのファイルの作成方法

メモ帳での作成方法

メモ帳で「ファイル」→「名前を付けて保存」で画像の画面が表示されるので、画像下部の「エンコード」クリックで

・UTF-8
・UTF-8(BOM付き)

を選ぶことでBOM付き、BOM無しのファイルを作成することができます。

※ サクラエディタやTeraPadなど他のテキストエディタでも作成できるものもありますので、確認してみてください。

補足

先ほど少し出てきましたが、MicrosoftのExcelではBOM無しでは文字化けしてしまいます。

そのため、ファイルをExcelファイルで開いたとき、文字化けが起こっている場合はBOM無しであることを疑ってみてください。
※ ただし半角文字の場合、文字化けを起こさないこともあるので
　文字化けが起こらない ＝ BOM付き とは限らないので注意してください。

※ 別記事でExcelでBOM付きファイルを開く方法をご紹介する予定です。

まとめ

本記事ではUTF-8のファイルについての説明、BOM付き・BOM無しの確認や作成方法をご紹介しました。

アプリによってBOM付き、無しで動く、動かないが異なるので統一されるとファイルが扱いやすくなって良いですね！

投稿 【ファイル】UTF-8のBOM付き、BOM無しの違い・確認・作成について は 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 ~にゃんぶろぐ~ に最初に表示されました。

パソコン起動時のBIOS（UEFI）の立ち上げですが、メーカーによって押すキーが異なり面倒ですよね。

DellだったらF2連打だったり、HPだったらF10だったり……。
メーカー内でも機種によって異なる場合もあるため、毎回、インターネットで調べるのも大変です。
また、失敗するとログイン画面まで進んでしまうので、そうなるとまた再起動しなくてはいけません。

そんな悩みを解決するため、各メーカー共通の
ログイン後にBIOS（UEFI）を失敗しないで確実に立ち上げる方法を紹介します。

紹介する方法は以下の通りです♪

コマンドプロンプトから「shutdown /r /fw」コマンド実行

コマンドプロンプトを開き、BIOS起動させる方法です。
黒い画面（コマンドプロンプト）を開くので少しややこしく見えますが、慣れると一番簡単です。

１．デスクトップ左下の「スタート」ボタンか「虫眼鏡」ボタンをクリック

２．検索画面に「cmd」と入力すると右側にコマンドプロンプトのメニューが表示されるので、
　「管理者として実行」をクリック

３．管理者でコマンドプロンプトが立ち上がったら、以下のコマンドを入力

shutdown /r /fw

これで、1分後に再起動され、BIOS画面が表示されます。

shutdownコマンドや引数について

shutdown：シャットダウンや再起動ができるコマンド
/r：再起動
/fw：次回起動時にBIOSを起動

ちなみに、
通常1分後に再起動されますが、最後に「/t 0」をつけると即再起動できます。
（/t：シャットダウンや再起動までの時間を指定（即時実行の場合0））
例） shutdown /r /fw /t 0

Windowsの設定から画面操作

Windowsの設定から画面操作でBIOSを立ち上げる方法です。

１．「スタート」ボタンを右クリックし、設定をクリック

２．設定画面右側のシステム欄を下へスクロールすると「回復」があるのでクリックし、
　「今すぐ再起動」×２をクリック

↓

↓

３．オプションの選択画面で以下のとおり順にクリック
　「トラブルシューティング」→「詳細オプション」→「UEFIファームウェアの設定」→「再起動」

↓

↓

↓

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

投稿 ログイン後にBIOS（UEFI）を立ち上げる方法【Windows11】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

先日、我が家のテレビ用の外付けHDDが壊れました！

みみねこ

我が家の愛する怪獣（0歳10ヶ月のワンパク娘）が、
外付けHDDのケーブルを引っ張ってコネクタ部分を破壊してしまいました……涙

その時に外付けHDDを格安で修理した経験や、今までのパソコン修理経験をもとに、
今回はテレビやパソコンで使用する外付けHDDの修理方法を紹介します♪

外付けHDDが壊れた！　パターン別に修理方法を紹介♪

外付けHDDが壊れる原因としては複数パターンがありますが、
詳細を説明する前に、まずそれらのパターンと対処方法のまとめは以下になります。

修理する際は、「外付けHDDの調子が悪い。おそらくこれは物理的な破損だ！」と断定したくなりますが、事前に一度ファームウェアアップデートやチェックディスクを実施してから修理に移ることをおすすめします。
誤ってHDDケースやHDDを買って動かなかったら損ですからね……！

何が壊れているか見当がつかない場合は、新しい外付けHDDを買うのも有りだと思いますよ♪
例えば、以下の商品はAmazonで一番人気のある商品ですが、
テレビ録画対応で容量が4TB、値段も1万円と意外とお手頃です♪

外付けハードディスク 4TB テレビ録画/PC/PS4/4K対応 HD-AD4U3

created by Rinker

バッファロー

• Amazon
• 楽天市場
• Yahooショッピング

外付けHDDケースの物理的破損

子どもやペットのいる家ではありがちで、かつ私自身最近起きたことなので詳細に書かせていただきます♪
（私の場合、以下のコネクタ部分が外れ故障しました……）

赤枠のコネクタ部分が……こんなことに！

用意するもの

・プラスドライバー

ボールグリップドライバー

created by Rinker

ベッセル(VESSEL)

• Amazon
• 楽天市場
• Yahooショッピング

・HDDケース

購入する商品は、AC電源供給でテレビ録画対応と書かれているものを選ぶのがポイントです。
USBバスパワー（電気をテレビからとる）ものは相性があるのでお勧めしません！

私はロジテックのLHR-EKWU3BKを購入しました♪

HDDケース 3.5インチ LHR-EKWU3BK

created by Rinker

ロジテックダイレクト

• Amazon
• 楽天市場
• Yahooショッピング

壊れた外付けHDDケースからHDDを救出

まず、壊れたHDDケースを分解し、HDDを取り出します。

・裏返してネジを露出させて分解

・ネジを外したら中身を引っ張ると、HDD本体とケースの基盤が接合されたものがでてくるので、HDDとケース基盤を分ける

↓

・ケース部分

・HDD

裏面にHDDの基盤もついているので、誤って取り外さないように注意してください！

HDDを新しいケースに装着する

・HDDケースはこのような中身
　もちろんHDDは入っていないので中に挿入する

・ネジを外し、外側と基盤部分に分ける

・HDDとHDDケースの基盤をネジで接合して、ケースに収納する

↓

・完成

これで完成です！　HDDはそのままなので、今まで撮ったデータも残っています♪

外付けHDDケース・HDDのソフト的不具合

外付けHDDのファームウェアが公式サイトにあれば、パソコンに接続して、アップデートします。

あまり無いですが、
購入当初から不具合が続いているのであれば、このケースの可能性があります。

「[外付けHDDの名前]　アップデート」などで一度検索し、マニュアル通りにアップデートしてみてください。

HDDの物理的破損

新しいHDDを用意して、HDDケースに挿入します。

HDDは外付けHDDにあうものであれば何でもいいですが、
Western Digital製が壊れにくいです。容量は4TB以上が推奨。
（名前は出しませんが、すぐ壊れるメーカーもあります……2,3年程度で壊れる場合も！）

内蔵HDD 6TB WD Blue 3.5インチ WD60EZAZ-EC

created by Rinker

ウエスタンデジタル(Western Digital)

• Amazon
• 楽天市場
• Yahooショッピング

HDDケースへの挿入は前述の「外付けHDDケースの物理的破損」を参考にしてください。

また、もし新しいHDDに壊れたHDDのデータをコピーしたい場合は以下を参照してください。

【簡単】不良セクタのあるHDD・SSDをコピーして交換する方法【無料の方法も】

不良セクタのあるディスク（HDD・SSD）をコピーして新しいディスクに交換する方法を紹介します。ディスクコピー機（デュプリケーター）を使う方法と、フリーのコピーソフト（クローンソフト）を使う方法です。コピーソフトやコピー機でエラーが出てしまいコピーできないという方は是非ご覧ください♪

nyanblog2222.com

2020.09.21

HDDの論理的な破損

外付けHDDをパソコンに接続して、HDDの修復コマンドを実行します。

具体的には以下になります。

・検索でcmdと入力し、コマンドプロンプトを管理者として実行する

・チェックディスクで修復
　コマンドプロンプトで「CHKDSK /F [HDDがつながっているドライブ]」

これで今回の記事は以上です。

外付けHDDの故障は原因がはっきりわかっていれば簡単に直せますので是非やってみてくださいね！
ただもし原因がわからない場合は、お手頃な新品を購入するのも有りだと思いますのでご検討ください。

外付けハードディスク 4TB テレビ録画/PC/PS4/4K対応 HD-AD4U3

created by Rinker

バッファロー

• Amazon
• 楽天市場
• Yahooショッピング

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

投稿 【簡単】テレビの外付けHDDが壊れたので格安で修理してみた【無料の方法も】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

Dell製ノートパソコン「Vostro 3510」を購入したので、実機レビューします！
メモリ増設・SSD換装の参考に分解画像付きです。

購入するか迷ってる方の参考になれば幸いです♪

購入した経緯・価格・性能

経緯

2021年10月5日からWindows11がリリースされ、私も使ってみたかったのですが、
我が家のパソコンは全てアップグレード対象外だったのでパソコンを購入することにしました。
以下の条件で価格.comにて調べた結果、Dell「Vostro 3510」が最安クラスでした。

＜条件＞
文書作成、データ管理はもちろん、
プログラミングや画像編集など多少負荷の高い処理が快適にできること
・Windows11インストール済　もしくは　アップグレード可能
・画面15.6インチ以上
・メモリ8GB以上
・CPUスコア10,000以上
・M.2 SSD 256GB以上
・日本語キーボード
・Webカメラ付き
・無線LAN対応

価格

価格.com「Vostro 3510 価格.com限定 プレミアム Core i5 1135G7・8GBメモリ・256GB SSD・Windows 11搭載モデル」

金額は2021年11月17日時点で、送料・消費税込で63,280円でした♪　

性能

製品詳細は以下になります。
Dell「Vostro 3510 【即納】価格.com限定 プレミアムモデル（SSD・大容量メモリー搭載）Q-2」

購入した「Vostro 3510」を、Speccyで見るとこんな感じです。

外観

こちらが実機の画像になります。

・付属品含め全ての製品

・ブラックカーボンでクールな印象のデザイン

・左側面にUSB Type-A×2、HDMI、電源

・右側面にSDスロット、イヤホンジャック、 USB Type-A×1、LANポート

・裏面

バッテリー内臓タイプのスリムなボディーです。

・キーボードや画面

パソコンを開くとキーボードが傾斜になりタイピングしやすいです。
また、キー同士も離れているので打ち間違いを防ぎます。

写真では分かりにくいですが、画面はノングレアなので目に優しく綺麗です。

デザインは良い感じです♪
ただCD／DVDの内臓ドライブはありませんので、人によってはマイナスポイントかもしれません。

性能調査

ベンチマークソフト等を使用した調査です。

こちらの記事と比較すると「Vostro 3510」の速さが客観的に分かるかもしれません。
以下記事のパソコンも日常使いで快適に使えるコスパの良いノートパソコンですが、
はっきり言って段違いです！

HPパソコン「15s-eq1000」レビュー【メモリ増設の参考に分解画像付】

HP製ノートパソコン「15s-eq1000」を購入したので、実機レビューします！　メモリ増設・SSD換装の参考に分解画像付きですので、良かったら参考にご覧ください♪

nyanblog2222.com

2021.02.01

起動時間

電源ボタンを押してユーザーにログインするまでの時間をタイマーで測ってみたところ、
「13.03秒」でした。SSDの中でもPCIe×NVMe接続なので超高速です。

CristalDiskMark

CristalDiskMarkは、各種ストレージ (HDD, SSD, USBメモリなど) の速度を測定するベンチマークソフトです。

ちなみにSEQ1MでHDDだと200MB/s前後、SATA3接続2.5インチSSDだと500MB/s前後、
M2-SSDだとSATA3.0接続で500MB/s前後、PCIe×NVMe接続で2000MB/s前後が大体の目安です。

結果は以下となりました。
M2-SSDのPCIe×NVMe接続としては1.5倍、SATA3.0接続としては7倍、HDDと比べると17倍程度速いです。

ベンチマーク結果が実際の速度とイコールになるわけではないですが、
HDDが標準だった数年前と比べると、時代が変わったと言わざるを得ない程の速度です。

PCMARK10

PCMARK10は、パソコンのアプリケーション実行における総合的なパフォーマンスを計測するベンチマークソフトです。

・Essentials…アプリの起動時間、ビデオ会議、Web検索など、基本的な機能について測定
・Productivity…表計算、文書作成など、事務処理に使用する機能について測定
・Digital Contents Creation…画像編集、３Dレンダリング、動画編集など、グラフィック機能について測定

ちなみに各スコア3000以上が快適に作業できる目安です。

結果は以下となりました。
事務作業はもちろん、画像や動画編集も快適に行うことができます。
（GPUはオンボードなので、高品質なネットゲームなどは正直厳しいと思いますが）

分解

メモリ増設時などの参考に、分解方法を記述します。

分解するには、まず背面のネジ８か所の外していきます。
（青部分のネジは完全には外れないので、緩めるだけ）

裏面の蓋をはがします。力を入れなくとも簡単に開きますので、難易度低めです。

裏面から見たパーツ群はこちら。

・バッテリー

メモリ増設・SSD換装をする場合、まずバッテリーを外す必要があるため、
３つのネジと、コネクタを外して引き抜いてください。

・メモリ
１スロット空いているので、増設可能です。DDR4を購入ください。

既存のメモリ

・SSD

１つネジを外します。

非常にコンパクトなSSDが出てきます。無線チップと大きさは変わりません。

・無線チップ

どのメモリを増設したらいい？

一番良いのは既に挿されているメモリと同一メーカー同一メモリタイプを購入することですが、
そもそも市販されていない場合もあるため、
同一メモリタイプのメモリを購入するのがおすすめです♪

みみねこ

異なる種類のメモリを増設すると、稀に既存メモリとの相性問題が発生する……かも！？

例えば、今回紹介しているモデルのメモリは
「S.O.DIMM」（ノートパソコン用）の「DDR4」で
モジュール規格は「PC4-25600(DDR4-3200)」なので、以下のメモリ等が最も適しています。

Crucial CT8G4SFS832A 8 GB（DDR4、PC4-25600、SODIMM）

created by Rinker

Crucial(クルーシャル)

• Amazon
• 楽天市場
• Yahooショッピング

メモリタイプの調べ方は、パソコンを分解してみるか、
以下のようなサイトで対応メモリの検索をして購入することをおすすめします。
株式会社アドテック：対応メモリ検索

ただこれは私個人の考えではありますが、
経験上、S.O.DIMMでDDR4という規格の範囲内であれば、別種のメモリでも、
ほぼ正常に動きますので気にしないで欲しいものを買うのもありだと思っています。
※ただし、自己責任でお願いいたします。。

なお、「S.O.DIMM」「DDR4」はメモリの形状に関わるので必須です。

おすすめポイントや注意点は？

おすすめポイントはこちらです！
・コスパ◎
・性能が非常に高く、プログラミングや画像編集など負荷の高い処理でも快適に使用できる

注意点
・内臓CD/DVDドライブがついていない
・GPUはオンボード（軽いネットゲームなら対応できるが、高性能なものは厳しい）

以上、いろいろ書きましたがこの値段でこの性能はかなり「買い」だと思います！
低価格帯のノートパソコンでも十分に高負荷な作業ができる時代になりましたね。

なお、コスパのいいノートパソコンの選び方はこちらをご覧ください♪

【パソコン】コスパの高いノートパソコンの選び方【タイプ別】

今回はコスパの高いノートパソコンの選び方をタイプ別で紹介します。人によってどの様なレベルの性能が必要か異なりますが、購入にあたって最低限どのようなポイントに気を付けるべきか紹介しますので、良かったら見て行ってください♪1 ノートパソコンの調べ方＆最低条件2 利用目的：ネット検索や動画視聴＆選び方3 利用目的……

nyanblog2222.com

2020.08.08

投稿 Dellパソコン「Vostro 3510」レビュー【メモリ増設の参考に分解画像付】 は 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 ~にゃんぶろぐ~ に最初に表示されました。

今回は、Accessのクエリのデザインビューで、各フィールド（項目）の幅を一括で拡げる方法を紹介します。

フィールド内容が長くて隠れている際に有用ですよ♪

項目の幅を一括で拡げる方法

例として、こちらのクエリを一括で広げます。
現状は、郵便番号表示用や、お名前の後ろが隠れてしまっています。

１．フィールドをすべてドラッグし、フィールド名の間に（赤枠部分）カーソルを持っていく

２．＋マークが出てきたらダブルクリックする

これで、すべてのフィールドを一括で広げることができました♪

蛇足：フィールド名が複雑な場合は１つ１つズームがおすすめ

前項でフィールド幅を一括で拡げるする方法はお伝えしましたが、
フィールド名が複雑な場合は、フィールドの幅を広げるよりは１つ１つズームがおすすめです。

ズームは、フィールド名で右クリック→「ズーム」で使えます。

このようにズーム画面で全体が表示されます。
もちろん画面上で編集も可能です。

便利なところは、見やすい以外に、
Ctrl＋Enterで改行ができてミスに気付きやすいところです♪

式が複雑な場合はおすすめですよ。

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

投稿 【Access】クエリのデザインビューでフィールド幅を一括で拡げる方法 は 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 ~にゃんぶろぐ~ に最初に表示されました。

今回は、Accessで「すべてのアクセスオブジェクト （ナビゲーションウィンドウ）」を非表示にする方法を紹介します♪

本設定で、全てのオブジェクト（テーブル・クエリ・フォーム・レポート・マクロ・モジュール）を隠すことができます。

非表示方法１（オプション変更）

「すべてのアクセスオブジェクト （ナビゲーションウィンドウ）」を非表示にすることで、
Access利用者に触らせたくない・見せたくないオブジェクトを隠すことができるようになります。

手順としては以下となります。

１ ．ファイルタブ→オプション→カレントデータベース→「ナビゲーション ウィンドウを表示する」のチェックを外す

２．OKを押すとAccessの再起動を求められるので、指示通り開きなおす

これだけで以下のように、「すべてのアクセスオブジェクト （ナビゲーションウィンドウ）」を非表示にすることができます。

表示方法１ー１（オプション変更）

逆に「すべてのアクセスオブジェクト （ナビゲーションウィンドウ）」が非表示になっていた場合の表示方法を紹介します。

まず、先ほどの逆設定をする方法です。

１ ．ファイルタブ→オプション→カレントデータベース→「ナビゲーション ウィンドウを表示する」のチェックを入れる

２．OKを押すとAccessの再起動を求められるので、指示通り開きなおす

以上です。

表示方法１－２（Shift押下）

オプションを変えずに開く方法もあります。

１．「Shift」を押しながら、Accessファイルをダブルクリックして開く。

これで 「すべてのアクセスオブジェクト （ナビゲーションウィンドウ）」 が表示した状態で開けます。

番外編：非表示方法（Access Runtime（ランタイム版）使用）

次に、Access利用者にAccess Runtime（ランタイム版）を使ってもらう方法があります。

Access Runtime（ランタイム版）は無償のAccessで、有償版とは違い
そもそも「すべてのアクセスオブジェクト （ナビゲーションウィンドウ）」を見る機能が搭載されていません。

Download Microsoft Access 2016 Runtime from Official Microsoft Download Center

Microsoft Access 2016 Runtime を使用すると、コンピュータに Access 2016 を完全インストールしていないユーザーに対しても、Access 2016 アプリケーションを配布することができます。

www.microsoft.com

「すべてのアクセスオブジェクト （ナビゲーションウィンドウ）」を見る機能がないだけで、
Accessファイル自体は普通に使用できるので、
無償で対応できるAccess Runtime（ランタイム版）もおすすめです。

今回の記事は以上です。

また、オブジェクト単位の隠しオブジェクト機能を使った非表示設定については
こちらで紹介していますので良かったらどうぞ！

【Access】非表示のテーブル等を表示する【隠しオブジェクト】

Accessで隠しオブジェクトとなっている非表示のオブジェクト（テーブル・クエリ・フォーム・レポート・マクロ・モジュール）を表示する方法について紹介します♪

nyanblog2222.com

2021.11.06

何かの参考になれば幸いです。それでは♪

投稿 【Access】すべてのアクセスオブジェクトを非表示（ナビゲーションウィンドウ非表示） は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

今回は、Accessで隠しオブジェクトとなっている非表示のオブジェクト
（テーブル・クエリ・フォーム・レポート・マクロ・モジュール）を表示する方法を紹介します。

以下のように、存在するはずのオブジェクトが非表示になっている状態を表示させます♪

オブジェクトの非表示設定

まず、どうやってテーブルなどを非表示にしているかですが、
オブジェクトに、隠しオブジェクトという属性を付与することによって非表示にしています。

手順としては以下となります。

１．オブジェクトを右クリックし、テーブルプロパティ→隠しオブジェクトのチェックを入れる

↓

これで、このように非表示になります。

非表示にすることで、Access利用者に触らせたくない・見せたくないオブジェクトを隠すことができるようになります。

オブジェクトの表示設定

それでは本題の表示方法です。

１．ファイルタブ→オプション→カレントデータベース→ナビゲーションオプション

２．隠しオブジェクトの表示のチェックに入れる→OK

これで、以下のように薄っすらとオブジェクトが表示されるようになります。
中身の確認だけしたい場合は、これだけでもOKです。

４．薄っすらと表示されるオブジェクトを右クリックし、テーブルプロパティ→隠しオブジェクトのチェックを外す

↓

これで隠しオブジェクトではなくなり、通常通り表示されます。

今回の記事は以上です。

また、「すべてのアクセスオブジェクト （ナビゲーションウィンドウ）」自体の非表示設定については
こちらで紹介していますので良かったらどうぞ！

【Access】すべてのアクセスオブジェクトを非表示（ナビゲーションウィンドウ非表示）

今回は、Accessで「すべてのアクセスオブジェクト （ナビゲーションウィンドウ）」を非表示にする方法を紹介します♪ 本設定で、全てのオブジェクト（テーブル・クエリ・フォーム・レポート・マクロ・モジュール）を隠すことができます。 非表示方法...

nyanblog2222.com

2021.11.06

何かの参考になれば幸いです。それでは♪

投稿 【Access】非表示のテーブル等を表示する【隠しオブジェクト】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

食洗機、便利ですよね！

ただし、食洗機を使用するには本体を買うだけではなく、
食洗機用にキッチンの蛇口工事する必要があったり、
その工事費用に1万5,000円〜2万5,000円もかかったりと、何かとハードルが高いです。

今回はそんな食洗機の工事に当たる、
分岐水栓の取り付けを工事不要で簡単に取り付けする方法を紹介します♪

ちなみに本記事内で、分岐水栓を取り付けする食洗機はパナソニック製のプチ食洗です。

みみねこ

過去に何度か分岐水栓の取り付けを行っていますが、お安く簡単にできるので、
自己責任ですが試してみる価値ありかと思いますよ♪

取り付けに必要なもの

今回使用したものは、ドライバー、分岐水栓だけです。
分岐水栓はAmazonで購入しましたが、かかった費用は2000円弱でした。

・プラスドライバー
分岐水栓のネジを締める際に使いました。100均で売っているもので大丈夫です。

・分岐水栓
タカギ製の全自動洗濯機用分岐蛇口を使用します。
用途が違うので不安になるかもしれませんが、耐久性が高く水漏れしにくいのでおすすめです。

みみねこ

過去に他社の類似製品も使ったことがありますが、数か月で水が漏れだしました。

食洗機を使用している間は蛇口を開けっ放しなので、水圧に耐えれないのかもしれませんね。

ちなみに、タカギ製は2年から3年は持ちます（中のゴムが朽ちたら製品の交換が必要）

※購入前に以下を参考に、蛇口の口径が適合しているかご確認ください。

分岐水栓の取り付け方法

方法としては、
「分岐水栓を蛇口に差し込む」だけです♪

ただ、少し力が必要なので、力に自信のない方は誰かに手伝ってもらうと良いかもしれません。
（私は夫にやってもらいました）

ちなみに、今回取り付けする蛇口と分岐水栓はこちらです。

・分岐水栓のゴム部分を熱湯に浸す

分岐水栓の説明書には書いてありませんが、
これがとても重要で、そのまま蛇口に取り付けしようとしてもゴムが硬くて入りません。

熱湯には大体30秒から1分程は浸してください。
ちなみに浸すには夫のプロテインシェーカーが程よい大きさでした。

・分岐水栓を蛇口に押し込む

思い切り蛇口に押し込みます。
ここで最後まで押し込めないと、水が漏れだしますので要注意です。

・分岐水栓のネジを締め、ホースを取り付ける

最後に分岐水栓のプラスドライバーでネジを締めて、食洗機に付属のホースを取り付けたら完成です。
※食洗機を実際に使用する前に、水が出るかはご確認ください。

みみねこ

工程が少ないので、素人でも簡単です！
分岐水栓は2年～3年ほどでゴムが朽ちるので、消耗品として考えてください。
消耗品かつ見た目がちょっと不細工なので、長年引っ越しやリフォームの予定がないのであれば工事するのも有りだと思います。。

これで、今回の記事は終了です。

ちなみに、工事不要で分岐水栓も要らないタンク式の食洗機もあるようです。
良かったら参考にどうぞ。

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

投稿 【工事不要】食洗機に使う分岐水栓を自分で取り付けしてみた【簡単】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

今回は、Google ChromeでGoogle検索した際に表示される
「ダークモードをご利用いただけます。」とは何か、
試しに「オンにする」を押してダークモードになってしまった際に戻す方法等を紹介します。

夫

ダークモード！？　くっ、俺の邪気眼が疼いてやがる……！

「オンにする」←ぽちっとな

…

画面が真っ暗になったー！！？

みみねこ

……何か言っておりますが、放っておきましょう。

Googleのダークモードとは？「オンにする」とどうなる？　

ダークモードとは、その名の通りブラウザを黒くする機能です。
パソコンでは「ダークモード」、モバイル デバイスでは「ダークテーマ」と呼びます。

以前からダークモードは、Chrome初期画面にて使用することができていましたが、
2021年9月から検索エンジン上でも使用できるようになりました。

使用するメリットとしては、
・消費電力が下がる
・目が疲れにくくなる
があげられます。純粋に使っていて「かっこいい！」というのも大きなメリットの一つでしょうね。

プログラマーで黒いコードエディターを使っている人は結構多いので、好んで使う方も多いかもしれません。

ちなみに「ダークモードをご利用いただけます。」という招待メッセージは、
Chromeを使っていれば必ず出るわけではなく、滅多にでないレアなもののようです。

実際に「オンにする」ボタンを押すと……。

↓

画面が黒くなります！

ダークモードからの解除方法等

ダークモードは、
検索画面で右上の歯車マークをクリック→「ダークモード：オン」
で簡単に解除できます♪

逆にダークモードにしたい場合は、
検索画面で右上の歯車マークをクリック→ 「ダークモード：オフ」
を押してください。

以上、今回はダークモードについて紹介しました♪
何かの参考になれば幸いです。それでは。

投稿 Google「ダークモードをご利用いただけます。」とは？解除方法等 は 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 ~にゃんぶろぐ~ に最初に表示されました。

今回は、テーブルやクエリを結合するユニオンクエリの使い方を紹介します。

SQLが苦手な方は、
「小技）SQLが分からなくても大丈夫！ミスなく簡単にユニオンクエリを作成する方法」
も合わせてご覧になってください。

ユニオンクエリとは

ユニオンクエリは、テーブルやクエリを結合することができるクエリです。
それ以上でもそれ以下でもありませんが、 使えると非常に便利なクエリです。

例えば、実際の業務では
AというテーブルとBというテーブルがあった際に、
途中の処理は違うけど最終的に同じデータの構造にして結合させるとき等に使ったりします。

テーブルの結合自体は追加クエリ等でも実現できますが、
新しくテーブルを作る、もしくは結合元のテーブルに追加して更新してしまう必要があったりと
テーブルを結合させるだけならユニオンクエリがスマートかと思います。

基本の使い方（UNION）

ユニオン画面の開き方

クエリデザイン→ユニオンで、ユニオン画面が開けますので、
そこにコードを入れることで使用できます。

１．クエリデザインをクリックし、デザインビューを開く

２．ユニオンをクリック

３．コード画面が開くので、記述して保存したら使用できるようになる

２つのテーブルを結合

基本的にユニオンクエリでは、
SELECT句で繋げたいテーブルを呼び出し、UNIONで結合させます。

例えば、テーブル1・2を結合させる場合は以下のように記述します。

SELECT * FROM テーブル1
UNION SELECT * FROM テーブル2;

◆実際のデータ例

・結合データ

・ ユニオンクエリ出力結果

このように結合されます。
重複している 社員NO「100001」 は1件になって出力されます。
重複も出したい場合については後述します。

３つ以上のテーブルを結合

単純にUNIONを追加していくだけで、3つ以上結合することもできます。

SELECT * FROM テーブル1
UNION SELECT * FROM テーブル2
UNION SELECT * FROM テーブル3;

◆実際のデータ例

・結合データ

・ユニオンクエリ出力結果

基本＋α

重複レコードの扱い（UNIONとUNION ALL）

先ほどUNIONでは重複レコードは除去されるとお伝えしましたが、
逆に重複レコードも表示したい場合は、UNION ALLを使います。

使い方は、UNIONをUNION ALLに置き換えるだけです。

SELECT * FROM テーブル1
UNION ALL SELECT * FROM テーブル2;

◆実際のデータ例

・結合データ

・ユニオンクエリ出力結果

絞り込み（Where）

ユニオンクエリは、通常の選択クエリと同様に絞り込みができます。
注意点として、絞り込む際はそれぞれのSELECT～に対してWhere句をつけることです。

★OK例（それぞれにWhere句）
　例えば、テーブル1から社員NO「100001」、テーブル2から社員NO「200001」を抜き出し結合する場合

SELECT * FROM テーブル1
where 社員NO = 100001
UNION SELECT * FROM テーブル2
where 社員NO = 200001;

◆実際のデータ例

・結合データ

・ユニオンクエリ出力結果

★NG例（最後にWhere句）
　例えば、本当は社員NO「100001」「200001」だけを抜き出したい場合

SELECT * FROM テーブル1
UNION SELECT * FROM テーブル2
where 社員NO = 100001 OR 社員NO = 200001;

◆実際のデータ例

・結合データ

・ユニオンクエリ出力結果

この場合、Where句はテーブル2に適用されるため、テーブル1は全て出力されます。

並び替え（ORDER BY）

ユニオンクエリは、通常の選択クエリと同様に並び替えができます。
注意点として、Where句とは異なり最後にORDER BY句をつけて全体を並び替えることです。
（途中につけてもエラーにはなりませんが並び替えされません）

SELECT * FROM テーブル1
UNION SELECT * FROM テーブル2
ORDER BY 生年月日

◆実際のデータ例

・結合データ

・ユニオンクエリ出力結果

注意：結合するテーブルのフィールドが異なったらどうなるか

問題なく実行できる場合もありますが、基本的には合わせるのが無難です。

データ型が異なる場合

項目のデータ型が異なっている場合でも、テキスト型として結合されます。

例えば、テーブル1のある項目が日付型、テーブル2のある項目がテキスト型だった場合

SELECT * FROM テーブル1
UNION SELECT * FROM テーブル2;

◆実際のデータ例

・結合データ

・ユニオンクエリ出力結果

異なるフィールド（データ型が異なる）

項目数が異なる場合

項目数が異なる場合はエラーがでます。

SELECT * FROM テーブル1
UNION SELECT * FROM テーブル2;

◆実際のデータ例

・結合データ

・ユニオンクエリ出力結果

「ユニオン クエリで選択した 2つのテーブルまたはクエリの列数が一致しません。」

項目名が異なる場合

ユニオンクエリは項目名を見ていないため、問題なく処理できます。

SELECT * FROM テーブル1
UNION SELECT * FROM テーブル2;

◆実際のデータ例

・結合データ

・ユニオンクエリ出力結果

小技）SQLが分からなくても大丈夫！ミスなく簡単にユニオンクエリを使う方法

ここまで読んで、SQLを学んだことがない方は、

Accessの知識だけで出来ないのはややこしいな……。ユニオンクエリって難しいな……

と思う方もいらっしゃるかもしれません。
確かに基本レベルのテーブル結合ならともかく、Where句等を使った少し難しいユニオンクエリをやろうとするとSQLの基本知識が必要です。

ただ、次に紹介する方法であれば特にSQLの知識がなくとも使うことができます。

具体的には以下のように作成します。

１．クエリを作成してSQLビューで開き、メモ帳にコピー（;は削除）

↓SQLビューで開く

↓

SELECT [テーブル1].ID, [テーブル1].社員NO, [テーブル1].氏名, [テーブル1].生年月日, [テーブル1].所属
FROM テーブル1
WHERE ((([テーブル1].社員NO)=100002));

↓「;」を削除し、メモ帳にコピー

SELECT [テーブル1].ID, [テーブル1].社員NO, [テーブル1].氏名, [テーブル1].生年月日, [テーブル1].所属
FROM テーブル1
WHERE ((([テーブル1].社員NO)=100002))

２．改行してUNION　or UNION ALLを入れる

SELECT [テーブル1].ID, [テーブル1].社員NO, [テーブル1].氏名, [テーブル1].生年月日, [テーブル1].所属
FROM テーブル1
WHERE ((([テーブル1].社員NO)=100002))
UNION

３．クエリを作成してSQLビューで開き、メモ帳にコピー（必要であれば並び替えをする）

↓

SELECT [テーブル2].ID, [テーブル2].社員NO, [テーブル2].氏名, [テーブル2].生年月日, [テーブル2].所属
FROM テーブル2
ORDER BY [テーブル2].生年月日;

↓

SELECT [テーブル1].ID, [テーブル1].社員NO, [テーブル1].氏名, [テーブル1].生年月日, [テーブル1].所属
FROM テーブル1
WHERE ((([テーブル1].社員NO)=100002))
UNION
SELECT [テーブル2].ID, [テーブル2].社員NO, [テーブル2].氏名, [テーブル2].生年月日, [テーブル2].所属
FROM テーブル2
ORDER BY [テーブル2].生年月日;

４．並び替えをする場合は、ORDER BY句の前にあるテーブル名を消す

前述の通り、並び替え（ORDER BY）だけは「最後に１つだけ」というルールがあるため全体にORDER BYがかかるように前のテーブル名は削除します。

SELECT [テーブル1].ID, [テーブル1].社員NO, [テーブル1].氏名, [テーブル1].生年月日, [テーブル1].所属
FROM テーブル1
WHERE ((([テーブル1].社員NO)=100002))
UNION
SELECT [テーブル2].ID, [テーブル2].社員NO, [テーブル2].氏名, [テーブル2].生年月日, [テーブル2].所属
FROM テーブル2
ORDER BY 生年月日;

５．メモ帳からユニオンクエリ上にコピーして完成

出来上がりです。

◆実際のデータ例

・結合データ

・ ユニオンクエリ出力結果

これなら、SQLが分からなくても難なくできるかと思います♪

投稿 【Access】ユニオンクエリで結合テーブル作成【UNION】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

今回は、ブロガー界隈の有名人なかじさんが運営を開始した、
みんなのブログランキング（通称みんブロ）を紹介します。

みんなのブログランキングとは（概要）

みんなのブログランキング（通称みんブロ） は、2021年8月12日から
ブロガー界隈で有名な、中島大介さん（通称なかじ）が運営しているランキングサイトです。

みんなのブログランキング | 初心者でも楽しめるブログランキング

初心者でも楽しめるブログランキング

blogrank.jp

なかじさんは株式会社メリル代表取締役で

をされている、その道10数年のWeb職のプロです。

みみねこ

なかじさんのyoutube「ウェブ職TV」は、ブロガーにとってとてもためになります！

今回ご紹介するみんブロは、

登録すると、このようにランキングされてモチベーションアップなどに繋がり楽しいですよ♪

登録方法

・ユーザー登録・サイト登録

サイトにアクセスしたら右上のユーザー登録から登録

メールアドレス・もしくはtwitterでログイン

すると以下のメッセージが出てきますので、サイト登録をクリック

こちらにサイト登録をして、登録完了です♪

・登録情報の確認

登録できたら、マイページから確認できます。

こんな感じで表示されます♪

・追加登録

追加登録はマイページにカーソルを当てて、サイト登録からできます。

被リンクについて

被リンクはURLを他サイトにリンクしてもらうことで、
良質な被リンクはGoogleの上位表示に大きく影響を与えるといわれています。

なかじさんがyoutube上で公言されていますが、
みんブロはnofollow属性がついていないため、登録することで被リンク扱いされます。

ランキングサイト等、ブログ内容と直接関係のないサイトからの被リンクのSEO効果は
一般的にそれほど高くはないとは言われていますが、初心者のうちは非常にありがたい存在です。

みみねこ

ランキングに興味なくても、
被リンク対策として登録だけしておくのも有りですね♪

なお、過去に当ブログで被リンクを簡単に増やす方法をご紹介していますので、
良かったらそちらもみてください♪

【初心者ブロガー必見】誰でも簡単に被リンクを増やす方法【努力不要】

[ブログの被リンクの確実な増やし方] 被リンクを増やすには「良質な記事を書くこと」だけではありません！初心者ブロガーで人見知りの筆者が、実体験を元に、簡単な手続きで100%ブログの被リンクを作ることができる方法を紹介します。※超初心者でもOK♪

nyanblog2222.com

2020.12.20

良いところ・（人によっては）悪いところ

・簡単に被リンクが得られる
前述の通り非常に簡単に確実に被リンクが得られます。
これだけでも登録する価値があります♪

・モチベーションアップ
現在の立ち位置が分かるため、もっと上位に行きたい！という気持ちが出たり、
自分よりもブログを始めるのが早い人や遅い人と比べられるので
競争心によりモチベーションが上がりました！

・同種のブログの研究
カテゴリ毎にランキングがあるので、ブログ研究が捗ります。
例えば、他のTips系ブログがどのようなデザインやアフィリエイト商材を使っているかなど気になっていたため、非常に参考になりました。

みみねこ

楽しいし、お得です！

・ランキングが下がることによるモチベーションダウン
現在、みんブロは登録者数が急上昇しています。
なので当初はランキング上位でも、
登録者の絶対数が増え続けているため、当分の間は徐々にランキングが下がっていきます。

なので、ランキング順位だけを見てしまうと
相対的にサイトの価値が下がっていっているように見えるため
人によってはモチベーションダウンに繋がってしまうかもしれません。

みみねこ

登録者数の増加が落ち着くまでの間は、
ランキングの上位○％という見方がおすすめです

参考：なかじさんのみんブロの説明

参考として、なかじさんのみんブロ説明リンクを付けておきますね。

・ブログ初心者でも楽しめる”みんなのブログランキング”に込めた想い

ブログ初心者でも楽しめる"みんなのブログランキング"に込めた想い｜中島大介 / なかじ

こんにちは、なかじ(@ds_nakajima)です。 さっきリリースした「みんなのブログランキング」というブロガー向けの新サービスについて話したいことがあります。 みんなのブログランキング | 初心者でも楽しめるブログランキング 初心者でも...

note.com

・【新サービス公開！】みんなのブログランキングに込めた想い

・ブログ初心者がみんブロ(みんなのブログランキング)を使うメリット

みみねこ

みんブロ、被リンクがつくだけでも登録する価値ありですね！

個人的にはドメイン取得日と絡めて他の人と比べれるのが面白いな～と思いました♪

投稿 【被リンク獲得】なかじのみんブロ（みんなのブログランキング）に登録してみた！ は 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 ~にゃんぶろぐ~ に最初に表示されました。

プログラミング言語やWordPressやら、動きを確認するデモページを
別ページで表示させているサイトありますよね！

今回デモページを作成するにあたり、方法を調べたので大きく3つの手順でご紹介します♪

デモページの用意

まずはデモページを準備します。

フォルダを用意し、その中にデモページのファイルを準備します。

demo1フォルダに
　js/script.js
　css/style.css
　index.html
を準備してみてください。

試しなのでindex.htmlだけでも大丈夫です。

分かりやすく、画像にしてみました！

デモページのサンプル

試しにやってみたいという方は
こちらのコードをコピーして使用してください。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>デモサンプル</title>
    <meta name="viewport" content="width=device-wisth,initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <!--[if lt IE 9]>
<script type="text/javascript" src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
    <link rel="stylesheet" href="css/style.css">
    <script src="js/script.js"></script>
</head>
<body>
    <div>
        <p>デモサンプルです。</p>
        <p>表示させてみましょう！</p>
    </div>
</body>
</html>

style.css

@charset "utf-8";
p {
    // テキストを中央配置
    text-align: center;
}

script.js

window.onload = function() {
    // コンソール画面に"hello world!!"を表示
    console.log("hello world!!")
}

サーバにファイルをアップする

今回サーバへのファイルアップロードにはffftpのソフトを使用しています。

アップロードができれば、どのソフトを使用してもOKですし、
サーバ会社の管理画面よりファイルをアップしても問題ありません！

デモを配置する親フォルダを作成

デモを配置する親フォルダをWordPressがインストールされているフォルダ直下に作成します。

画像で表示されているフォルダやファイルを参考に場所を見つけてください。

初期設定にもよりますが、ドメイン直下もしくはWordPressフォルダ直下にあることが多いです。

また、「wp-admin」「wp-content」「wp-includes」のフォルダや
「.htaccess」「index.php」のファイルがあるフォルダと考えると見つけやすいです。

今回は「demo」というフォルダを作成しています。

親フォルダにデモファイル一式をアップロードする

続いて、先ほど作成した「demo」フォルダに「demo1」フォルダ毎アップロードします。

「demo」フォルダに複数のデモが格納されるイメージです。

デモページの表示

先ほどアップロードしたデモページをさっそく確認してみましょう。

デモページのリンクの貼り方

htmlに実際にリンクを貼ってみましょう。

「リンク」をクリックし、URLを設定します。

URLは
https://[ドメイン]/[デモの親フォルダ]/[デモのフォルダ]/
のように設定してください。
※ 例：https://nyanblog2222.com/demo/demo1/

デモページの確認

こちらのページから先ほど設定したデモページを確認することができます。

デモページ

まとめ

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

簡単に作ることができますが、
デモページのファイルをどこに置けばいいのか悩んだので今回は記事にしてみました。

一度親フォルダを作成しておけば
次からも同じように3つの手順でデモページを引き続き作成することができます。

良かったら参考にしていただければ嬉しいです！

最後までご覧いただき、ありがとうございました♪

投稿 【WordPress】サイトにデモページを貼りたい！【作り方】 は 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 ~にゃんぶろぐ~ に最初に表示されました。

今回は、故障したシロカ（siroca）の電気圧力鍋「SP-D131」の修理方法を紹介します♪

シロカ 電気圧力鍋 SP-4D151 ホワイト ［大容量4Lモデル/高圧力90Kpa/1台6役（圧力・無水・蒸し・炊飯・スロー調理・温め直し）]

created by Rinker

• Amazon
• 楽天市場
• Yahooショッピング

先日、シロカの電気圧力鍋をうっかり内釜をせず使用したところ、故障してしまいました。
ネットで検索してみると、どうも温度ヒューズが切れたことが原因で、
メーカーでの修理費用はなんと7000円強かかるとのこと…。

みみねこ

こ、これは自力で直すしかない……。駄目だったら新品を買えばいいや！

ということで、自力でのヒューズ交換にチャレンジすることにしました。

結果的には思ったより簡単に修理できましたので、
自己責任ですが試してみる価値ありかと思います♪

修理に必要なもの

今回使用したものは、ペンチ、ドライバー、温度ヒューズ、圧着工具です。

温度ヒューズと圧着工具はAmazonで購入しましたが、
かかった費用は約1500円だけです。

・温度ヒューズ
既存のヒューズは142℃でしたが、調べてみると価格が高いので139℃にしました。
ヒューズは温度がXX℃を超えると溶断する過熱保護素子なので、
安全性を考えると142℃以下がよいかと思います。

エルパ 2本入 ペレット型温度ヒューズ139℃ SF-139H／温度上昇からの電流回路の保護に ／ELPA 朝日電器

created by Rinker

• Amazon
• 楽天市場
• Yahooショッピング

・圧着工具
圧着工具の代用品としてペンチでできるかと思っていましたが、
硬すぎて圧着できなかったので専用器具を購入しました。

エーモン/amon 電工ペンチ 全長約255mm コードの被膜むきに 1452

created by Rinker

• Amazon
• 楽天市場
• Yahooショッピング

・小型ペンチ、プラスドライバー
ネジを外す際に使いました。両方100均で売っているもので大丈夫です。

修理方法

方法としては、
「裏蓋をとり、温度ヒューズを交換する」だけです♪

・小型ペンチの先で裏蓋のネジを回し、基盤を露出させる
※小型ペンチがなかったら、サイズの合うマイナスドライバーがあればなんとかなると思います。

中を開けるとこんな感じで基盤が現れます。
今回は、赤枠内の温度ヒューズを交換します。

・ネジをプラスドライバーで外す

・被覆をずらして、ヒューズの鉛線を小型ペンチや圧着工具で切断する
※既存のヒューズの線と新しいヒューズの線を圧着させるため、
　この際、なるべく既存の線を残すように切るのがポイントです。
　
　

こんな感じで切ります。

・新しい温度ヒューズを圧着工具を使い、金具で圧着

両端ができたら、元の通りに戻して完成です♪

・元に戻し、最後に電源をつけて確認
うまく修理に成功しました♪
もちろん、その後カレーや肉じゃが、角煮等々色々なものを作りましたが、問題なく作動しています。

みみねこ

はじめてやるので上手くいくか不安でしたが、思ったより簡単でした！
またうっかり壊しても、
次からは圧着工具があるのでヒューズ代だけで済みそうです。笑

カレーや煮物はもちろん、ピクルスやご飯も炊けちゃうので少なくとも週に1度は使っています♪
良かったら確認してみてください。

シロカ 電気圧力鍋 SP-4D151 ホワイト ［大容量4Lモデル/高圧力90Kpa/1台6役（圧力・無水・蒸し・炊飯・スロー調理・温め直し）]

created by Rinker

• Amazon
• 楽天市場
• Yahooショッピング

投稿 【ヒューズ交換】シロカの電気圧力鍋が壊れたので自力で修理してみた は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

今回は、リトルサーバー「リトルプラン」を２年半使用した体験談（現在も利用中）や、
他社との比較等を紹介します。

リトルサーバーとは

リトルサーバーは、驚異的な低価格と、平均以上の性能を備えた
コストパフォーマンスを徹底追及したレンタルサーバーです。

優れているポイント

公式のおすすめポイントより、
私がWordPressサイトを運営する上で良いと思うものを抜粋してみました！

価格・性能面から他サーバーとの比較

公式に書かれている性能表から、
他の低価格レンタルサーバーと比べると以下の通りとなりました。

・比較するレンタルサーバー、プラン

・比較結果
金額面では、コアサーバ・リトルサーバー、
性能面では、ColorfulBox・リトルサーバーが優秀！

このことから、
リトルサーバーが格安サーバの中ではコスト・性能面の両方で最も優れていることが分かりますね♪
比較内容の詳細は以下を参照ください。

コスパ最高！WordPress可の低価格帯レンタルサーバ比較

今回はWordPress可の低価格帯レンタルサーバをご紹介します。レンタルサーバとは、その名の通りサーバを貸し出すサービスです。Webサイトをお店に例えると、土地は「レンタルサーバ」、お店作成ツールが「WordPress」、お店にたどり着くための住所が「ドメイン」といったところでしょうか。今回はWordP...

nyanblog2222.com

2020.05.04

逆に他より劣っている点は、やはりマイナーで使用しているユーザーが少ないところでしょう。

本当に使って問題ないのかな……？

と気になる方も多いと思いますので、私が実際に２年半使ってみた感想を次から紹介します♪

実際に使ってみた感想

結論から言うと、安かろう悪かろうの部分はありますが、ほぼ問題なく使えています。
早くて安いので、ある程度リスクを許容できるのであれば、とてもコスパ良いです！

良いところ　格安なのに高性能！

金銭面

私は「リトルプラン」を年間契約していますが、
価格面はとても優秀で、3300円／年以上取られることはありません。
更新も自動更新にしていますが何不自由なく更新できました。
領収書もお願いしたらもらえます。
（連絡すると自動で受け取ることも可）

性能面

・WordPressインストールなど設定面
コントロールパネルから簡単にインストールや設定ができます。

・速度
閲覧していて全く違和感のない速度です。
本サイトは現在でもリトルサーバーを使用しているため、体感できるかと思います。

・容量等
全く気にしなくていい程度には大容量で、特に不自由はありません。

障害やメンテナンス、サポート体制について

２年間の間で障害は、すべてのサーバー（３つ）で合わせて６回起きており、
１時間程で収束しています。
対策していても障害は稀に起きることなので、支障がないレベルかと思います。

メンテナンスについては、
平日の深夜に実施されるため、あまり気になることはありません。

サポートについては、問い合わせフォーム起点でのメールサポートのみですが、
平日休日問わず、30分以内に返信が来ますのでストレスはありません。
回答は真摯で的確な印象です。

悪いところ　トラブルが稀にあり

とにかく格安で高性能なのですが、一部安かろう悪かろうの部分もあります。

発生したトラブル

格安なのである程度は仕方がないですが、この２年間で以下のような問題が生じました。

一応、問い合わせすることですべて解決できましたが、
気になる方は多いかもしれません。

・PHPのモジュール版を使うとサイトへのアクセスエラーが起きた
→問い合わせしたところ、速度に遜色のないFastCGIを勧められ、使用することになりました。

【Wordpress】「このサイトにアクセスできません　接続がリセットされました」

そのエラー、PHPの設定かもしれません！Wordpress管理画面やWebサイトにアクセスする際に「このサイトにアクセスできません　接続がリセットされました」というエラーが頻繁に発生する際の対処方法を紹介します♪

nyanblog2222.com

2020.06.17

・Bingウェブマスターツールに登録できなかった
→問い合わせしたところ、いろいろと試してもらい、登録できるようになりました。
　担当者が言うには、偶然直ったためなぜ直ったのかわからないようでした。

・突然の障害に巻き込まれて、ブログが見れなくなった
　→問い合わせしたところ、すぐ直してもらえました。

物足りないところ

・サーバーが冗長化されていない
障害やメンテナンスがある際はサイトが使えなくなります。

最後に

以上、メリットやデメリット等紹介しましたが、
結論、稀にあるトラブルを許容できれば、コスト・性能面の両方で優れたサーバーです！

ちなみに個人でWordPressサイトを運営するなら、
WordPress高速化が使える「ワードプラン」と「リトルプラン」がおすすめです♪

投稿 【体験談】２年半リトルサーバーを使ってみた【WordPress】 は 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 ~にゃんぶろぐ~ に最初に表示されました。

今回は、Excelにてワイルドカードと呼ばれるアスタリスク「*」・はてな(クエスチョン)「?」を検索する方法を紹介します。
合わせて「*」「?」が検索できない理由やワイルドカードについても説明していますので、そちらもご一緒にどうぞ♪

アスタリスク(*)・はてな(?)の検索方法

「*」「?」の前に「~」をつけると検索できるようになります。

「~*」

「~?」

「*」「?」が検索できない理由やワイルドカードについて

「*」「?」が検索できない理由

アスタリスク(*)・はてな(?)を普通に「*」「?」で検索すると、
検索対象の「*」「?」だけではなく全ての文字が検索されてしまいます。
例）Excelで「123」「あいう」「?123」のセルがそれぞれあったとき、
「?123」の「?」を検索しようとすると、
「123」も「あいう」も「?123」も検索される。

これは、「*」「?」がワイルドカードと呼ばれる特殊文字のため、
検索する際は単純に「*」「?」として認識されていないからです。

ワイルドカードとは

ワイルドカードとは、一般的にトランプ等のカードゲームの「万能カード」を連想することが多いかと思いますが、
情報分野におけるワイルドカードについても似た意味で「万能」と言えます。

ワイルドカードは、検索する際にどのような文字や文字列にもマッチする特殊文字です。

「*」　…　0文字以上のどのような文字や文字列にもマッチ
「?」　…　1文字のどのような文字にもマッチ

例）「123456」「あういえお」というセルがあった場合、
　　以下のような検索キーを使うと、このようにマッチします。

投稿 【Excel】アスタリスク(*)・はてな(?)の検索方法【簡単】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

以前、非対応だったiPhone7の楽天モバイル設定方法を紹介しましたが、
ついに2021年4月27日から正式に楽天モバイル公式でiPhone 6s以降も対応しました！
楽天モバイル：iOS14.4以降を搭載するiPhoneの楽天回線対応について

なので今回は、設定を戻す（本来の楽天モバイル設定に切り替える）方法を紹介します♪

なお、以前私が紹介した方法は、SIMロック解除アダプタ「SmartKingXX」を使用したもので
「（参考）旧版　iPhone7 iOS 14.4での楽天モバイル設定方法」
の内容になります。

楽天モバイル設定への戻し方（切り替え方法）

プロファイル削除

以下手順で楽天モバイル用プロファイルを削除します。
「設定」→「一般」→「プロファイル」→
「インストールされているプロファイル」をタッチ→「プロファイルを削除」

SIMロック解除アダプタを外す

iPhone7の電源を切り、
SIMロック解除アダプタを外し、楽天モバイルSIMのみをセットします。

iOSを最新にアップデート

楽天モバイルはiOS 14.4以降で対応しています。
なので、現在iOS 14.3以前の場合は以下の手順でアップデートします。
「設定」→「一般」→「ソフトウェア・アップデート」

キャリア設定をアップデート

「設定」→「一般」→「情報」に行った際に、
キャリア設定のアップデートが求められるので、アップデートします。

（参考）旧版　iPhone7 iOS 14.4での楽天モバイル設定方法

iPhone7 iOS 14.4で、非対応だった楽天モバイル「Rakuten UN-LIMIT VI」を利用する方法です。

2021年4月27日まではiPhone7は「Rakuten UN-LIMIT VI」に対応しておらず、
iOS 14.3以降は無料で紹介されているインターネットからキャリアバンドル（ipcc）を取得して読み込ませる方法では上手くいきませんでした。
なので、SIMロック解除アダプタであるスマートキングXX（SmartKingXX）を使用して楽天回線に接続しています。

SIMカードが届くまでにやること

楽天モバイルSIMカードが届くまでにやっておくことは以下になります。

MNP転出手続き

現在他社で使用している電話番号を楽天モバイルで継続して使用するのであれば、MNP転出手続きが必要です。
転出のMNP予約番号を取得するには１週間以上かかる場合があり、
予約番号は楽天モバイル契約時に必要なので事前に手続きしておく必要があります。
転出方法については、「[他社名]　MNP転出」で検索すると出てきます。

楽天モバイル「Rakuten UN-LIMIT VI」契約

以下から契約できます。
楽天モバイル公式

SmartKingXX購入

SIMロック解除アダプタであるSmartKingXXを購入します。

楽天モバイル回線を掴むために使用するため、
SIMロック解除済みであっても必要です。

購入する際は、iPhone7のiOSが対応しているか確認してください。

【NEW新方式! 】BlueSea iOS15.0.2対応 SmartKing SIMロック解除アダプタ SoftBank/au/docomoのiPhoneXS/X 、iPhone8/8plus、iPhone7/7plus/6s/6s plus/iPhone se(第1世代) SIM ロック解除Nano-SIMカード Unlock スマートキング SmartKingXX

created by Rinker

BlueSea

• Amazon
• 楽天市場
• Yahooショッピング

iPhoneの自動更新を止める

現在、SmartKingXXはiOS 14.4まで対応していますが、今後の最新iOSにも対応しているかは分かりません。

よって、以下の手順で自動的にiOSが更新されることを防ぎます。

「設定」→「一般」→「ソフトウェア・アップデート」→「自動アップデートをカスタマイズ」→「iOSアップデートをインストール」をオフ

SIMカードが届いたらやること

Rakuten Linkをインストールし、ログインする

Rakuten Linkは携帯及び固定電話への通話やSMSが無料となる素晴らしいサービスです。

まずiPhone7の電源を切り、楽天モバイルのSIMカードを差し込みます。
次に電源をつけて、Wifiをつないだ状態でAppleStoreからRakuten Linkをインストールします。
その後、ログインしたら準備完了です。

iPhoneにSmartKingXXを履かせたSIMカードを差し込む

購入すると以下が届きます。
SIMカードを取り出すピンとSIM下駄（チップ）のみ使用します。

まずiPhone7の電源を切り、
ピンを使ってiPhone7からSIMフォルダーを取り出したら、SIM下駄を取り付けます。

（表）

（裏）

SIM下駄の上に楽天モバイルのSIMカードを載せたら、iPhone7に差し込みます。

電源をつけると以下の画面が表示されるため、
「Set IMSI Manual Unlock」をタッチします

「JP Docomo」をタッチ

「了解」をタッチ

既存プロファイルを削除し、楽天モバイル用のプロファイルをインストールする

・既存プロファイル削除
「設定」→「一般」→「プロファイル」→「インストールされているプロファイル」をタッチ→「プロファイルを削除」

・楽天モバイル用のプロファイルをインストール
こちらをsafariで開き、インストールします。
格安SIM スマホの格安プラン比較：iPhoneの構成プロファイル

これで、最後にiPhone7の再起動をすれば、すべての設定が完了です。
左上の圏外と表示されているところにアンテナマークが出て、右にRakutenと表示されれば成功ですよ♪

もし、表示されなかったら以下を試してみてください。
・１０分程度待ってみる
・機内モードオンオフ
・再起動
これでも駄目ならすべての設定をやり直してみてください。

投稿 【正式対応】iPhone7の楽天モバイル設定への戻し方 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

先日、当ブログで1日100PV/月間3000PVを達成しました！
初心者ブロガーのリアルな実情（収益・PV・記事数）や、
現在のPVに達するためにした工夫、
IT系ブログ（Tipsメイン）のPV・収益事情等を紹介します♪

収益・PV・記事数

当ブログでは、
約10か月・97記事で、1日100PV/月間3000PVを達成しました！

※PV数や収益の実数は公開してはならないとされているため、おおよそです。

2020年4月にドメイン取得・ブログを作成し、
2020年6月にGoogle AdSense合格で収益化、
2021年1月に1日100PV/月間3000PVを達成しました。
現在2021年3月ですが、2月では1月のPV数を大きく超えています。

2020年10月から私生活の変化から記事投稿数が激減していますが、
この時期から逆にPV数が徐々に上昇していっています。

PVが上昇した主な理由としては、以下が考えられます。
・ドメインパワー上昇
　ブログを運用し始めて半年以上たったため、Googleに評価され始めた
・上位表示を意識した記事の投稿
　2020年9~10月頃から、どういった内容の記事が上位表示されるのか初心者なりに分かり始めたため、上位表示を意識した記事タイトルや内容にした

現在のPVはブロガーの中ではどんな立ち位置か

「1日100PV/月間3000PV」は、
ブロガーの中でどのような立ち位置なのか調べてみました。

月間10万PV以上：[中級]トップアマ
月間3万PV以上：[中級]アマチュア
月間1万PV以上：[中級]ノービス
月間3000PV以上：[初級]脱ビギナー
月間3000PV未満：[初級]ビギナー

ブログ部：PV数でわかるブロガー番付｜あなたのブログはどのレベル？