プログラミング入門ナビ

プログラミング学習初心者のための情報メディア by Proglus（プログラス）

MySQLのGPGキーの有効期限切れのためインストールに失敗する場合の対応方法

By

MySQLのGPGキーの有効期限切れのためインストールに失敗する場合の対応方法について説明します。

本記事は、Proglus（プログラス）「Google Cloud Platform（GCP）入門」、Udemy 最速で学ぶ – Google Cloud Platform（GCP）入門完全攻略コースのサポート記事です。

エラーメッセージ

Public key for mysql-community-client-8.0.28-1.el7.x86_64.rpm is not installed

原因

MySQLのGPGキーの有効期限切れのため、MySQL8.0.28では新しいキーで署名される。

解決方法

新しいGPGキーをインポートしてから、MySQLをインストールする

yumの場合（CentOS 7）

$ sudo rpm --import https://repo.mysql.com/RPM-GPG-KEY-mysql-2022

補足：sudoは、管理者権限が必要な場合に付与する。

出典

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

【Arduino入門】LCD（液晶ディスプレイ）に文字を表示しよう

By

Arduinoを使って、LCD（1602A）に文字を表示するプログラミングする方法を学習します。

動画で学習する

チャンネル登録してね！

LCDとは？

LCDは、Liquid Crystal Displayの略で、日本語でいうと液晶ディスプレイのことです。

ブレットボードで接続

ブレッドボードで組むとこのような感じです。

Arduinoは、入門書などで一番メジャーな、Arduino UNOを使います。
厳密にいうと、互換ボードです。

LCDの型番は1602Aです。

Amazonでベストセラーになっている、elegoo(エレゴ)のスターターキットに入っていた、LCDです。
キットを買ってしまえば、何も考えなくても、検証するためのいろいろなパーツが揃うので便利です。

16文字を2行表示できます。

操作メニューを表示したり、センサーから取得をした値を出力するなど、色々な使い方ができそうです。

LCD 1602AのPINアサイン

これらのPINを利用します。

  • VSS・・・グランドピン
  • VDD・・・+5V付与
  • VO・・・LCDのコントラストを調整するためのピン
  • RSとRWとE・・・Arduinoと、LCD間の通信の制御
  • D4〜D7の4本・・・実際のデータの受け渡し
  • AとK・・・LEDバックライトを制御するための端子です。

接続図

接続図を起こすと、このようになります。

ArduinoとLCDによるHello Worldプログラミング

それでは、Hello Word!と表示するプログラムを、実行してみましょう。

#include <LiquidCrystal.h>

LiquidCrystal lcd(7, 8, 9, 10, 11, 12);

void setup() {
  lcd.begin(16, 2);
  lcd.print("Hello, World!");
}

void loop() {

}

簡単なコードの説明ですが、
includeで、このLCDを操作するために、ライブラリを読み込みます。
Arduinoのどのピンをディスプレイのどのピンに接続するかを定義します。
第1引数が、LCDのRSピンに接続するArduino側のピン番号
第2引数が、LCDのRWピンに接続するArduino側のピン番号
第3〜第6引数が、dataピンに接続するArduino側のピン番号

setup関数は、プログラム実行時に1回呼び出されます。

lcd.begin関数で LCDの列と行の数を設定します。
16文字、2行を設定します。

lcd.print関数で「Hello, World!」とLCDにメッセージを出力します。

プログラムをマイコンボードに書き込み、
1行目に、Hello. World!と表示されればOKです。

また、ボリューム抵抗で、コントラストを調整できます。

表示位置を2行目にするには、

lcd.setCursor関数を使います。

#include <LiquidCrystal.h>

LiquidCrystal lcd(7, 8, 9, 10, 11, 12);

void setup() {
  lcd.begin(16, 2);
  lcd.setCursor(0, 1);
  lcd.print("Hello, World!");
}

void loop() {
}

2行目に表示されました。

尚、lcd.setCursor関数の、
第2引数に0を指定すると、1行目、
第2引数に1を指定すると、2行目に表示されます。

列の表示位置の指定

あと、列の表示位置、
言い換えると、横方向の表示位置を調整するには、
第一引数をのパラメーター調整します。

#include <LiquidCrystal.h>

LiquidCrystal lcd(7, 8, 9, 10, 11, 12);

void setup() {
  lcd.begin(16, 2);
  lcd.setCursor(2, 1);
  lcd.print("Hello, world!");
}

void loop() {
}

3列目から表示されるようになりました。

動的に表示内容を変更する

setup関数は1回しか呼ばれませんが、
loop関数を使うことで随時、表示内容を変えることもできます。

たとえば、プログラムを起動してからの、秒数をLCDに表示してみましょう。

#include <LiquidCrystal.h>

LiquidCrystal lcd(7, 8, 9, 10, 11, 12);

void setup() {
  lcd.begin(16, 2);
  lcd.setCursor(2, 1);
  lcd.print("Hello, world!");
}

void loop() {
  lcd.setCursor(0, 0);
  lcd.print(millis() / 1000);
}

プログラムの実行を開始した時から現在までの時間をミリ秒単位で返す関数です。
割る1000で、秒に変換しています。

実行すると、秒数をカウントアップするようになります。

おわりに

Arduinoを触ってみたら、すごい面白いなと思いました。
検証を積み重ねていけば、実用的な製品も作れそうですし、プログラミング学習にも使えそうです。

ぜひ、パラメータを変えたりしながら、動作を検証してみてください。

参考文献

LiquidCrystal | Arduino

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

Visual Studio Codeのメニューを 日本語化する方法と英語化する方法について解説！

By

プログラミング初心者の受講生の方から良くいただくご質問、

Visual Studio Codeのメニューを、

  • 日本語にする方法
  • 英語に戻す方法

ついて解説します！

動画で学習する

チャンネル登録お願いします！

Visual Studio Codeのインストール直後のメニュー表示

Visual Studio Codeをインストールするとメニューは英語表記です。
英語が並んでいると、それだけで見るのが嫌だなと思ってしまう方もいらっしゃると思います。

しかしながら、Visual Studio Codeを普段使う時によく使うメニューは、限られていて、

  • File ファイル
  • New File 新規ファイル
  • Save 保存
  • Open 開く

レベルの単語の意味がわかれば、日常のコーディング作業は問題なく使えます。
すでに実質日本語になっているような簡単な単語です。

わからない英単語が出てきたら、ネットの辞書で調べれば大抵理解できます。

私は、Visual Studio Codeの細かい設定や操作についてネットで調べる時に、
英語の情報に頼ることも多く、英語表記のままにしておくことが多いです。

もちろん、メニューを日本語化することもできます。

Visual Studio Codeメニューの日本語化

メニューの View > Command Paletteを選択

languageと入力して、検索。
Configure Display Languageを選択

ここで、もし、jaが表示されている場合は、jaを選択すれば日本語化できます。
jaが表示されていない場合は、
Install Additional Languages を選択

Japanese Language Pack for Visual Studio Codeを選択

Installをします。

メニューのView > Command Palette > Configure Display Languageを選択

Japaneseを意味する、jaを選択します。

Visual Studio Codeを再起動をします。

メニューの日本語化ができました。

Visual Studio Codeメニューのを英語メニューに戻したいときは、

表示 > コマンドパレット > Configure Display Language

Englishを意味する、enを選択します。

再起動を求められるので、再起動をします。

Visual Studio Codeのメニューが英語表記に戻りました。

検証環境

  • Visual Studio Code　1.63.2 macOS版

Windowsでも、基本的には同じ操作です。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

【01/04更新】Udemyプログラミング入門講座等の割引クーポン配布

By

地域によっては、外出自粛要請がでています。

不要不急な外出は控えて、自宅でオンライン動画をつかって学習しませんか？
世界最大級の学習プラットフォームUdemy(ユーデミー)で使える、期間限定の割引クーポンを配布します。

期間

2022/01/04（火）より1ヶ月

割引クーポン

下記リンクを経由すると、Udemyコースが割引価格で受講できます。

このコースが気に入ったら、ぜひレビュー投稿をお願いいたします。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

Nuxt.jsでcreate-nuxt-appを使った新規プロジェクトの作成方法

By

本記事は、Udemy「Nuxt.js入門決定版！」 、Proglus（プログラス）「Nuxt.js」サポート記事です。

プロジェクトファイルを配置する場所

記事では、
macOS, Windows共通: ユーザーのホームディレクトリ直下の、”nuxt-projects” という名前のディレクトリ（フォルダ）を作成して作業します。

プロジェクト作成方法

create-nuxt-appというnuxt.jsプロジェクトの雛形を作るアプリケーションを使います。

記事では、プロジェクト名は”hello”とします。
学習内容により、適宜プロジェクト名を変更してください。

ターミナルを使い、nuxt-projects内へ移動します。

操作例)
$ cd nuxt-projects

これで、nuxt-projects配下に、helloプロジェクトのディレクトリが作成されるように準備ができました。
エンターキー押下して次へ進める。

プロジェクト作成

$ npx create-nuxt-app hello

エンターキー押下して次へ進める。

補足：プロジェクト名である、”hello”の部分は、学習内容により適宜変更してください。

対話形式で、プロジェクトを設定する

create-nuxt-app v3.7.1 の質問項目と、設定内容は、下記となります。
尚、バージョンアップにより、質問項目が変更となる場合があります。

Generating Nuxt.js project in hello
? Project name: (hello)

プロジェクトネームを設定できます。カッコの中のhelloがデフォルトの値です。
デフォルトの値を使いたいので、そのままエンターキーを押下。

? Programming language: (Use arrow keys)
❯ JavaScript
TypeScript

プログラミング言語を選択します。
このコースではJavaScriptを利用します。
JavaScriptにカーソルがあたっている状態で、エンターキー押下

? Package manager:
Yarn
❯ Npm

パッケージマネージャーを選択します。
ざっくりいうと、ソフトウェア管理ツールです。
このコースでは、Npmを利用します。
エンターキー押下

? UI framework: (Use arrow keys)
❯ None
Ant Design Vue
BalmUI
Bootstrap Vue
Buefy
Chakra UI
Element
Framevuerk
Oruga
Tachyons
Tailwind CSS
Windi CSS
Vant
View UI
Vuetify.js

UIフレームワークを選択します。
知名度が高いものでいうと、たとえば、boostrapがあります。
ここでは選択しないので、Noneを選択した状態で、
エンターキー押下

? Nuxt.js modules:(Press ＜space＞ to select,＜a＞o toggle all,＜i＞ to invert selection)
❯◯ Axios – Promise based HTTP client
◯ Progressive Web App (PWA)
◯ Content – Git-based headless CMS

Nuxt.jsのモジュールを追加する場合は、選択するのですが、
ここでは、なにも選択しないで、エンターキー押下

? Linting tools:(Press ＜space＞ to select,＜a＞o toggle all,＜i＞ to invert selection)
❯◯ ESLint
◯ Prettier
◯ Lint staged files
◯ StyleLint
◯ Commitlint

Linting toolsを選択できます。
ざっくりいうと、コードレビューツールですが、ここでは使わないので、そのままエンターキー押下

? Testing framework: (Use arrow keys)
❯ None
Jest
AVA
WebdriverIO
Nightwatch

テストフレームワークの選択です。
ここでは使わないので、Noneを選択して、エンターキー押下

? Rendering mode: (Use arrow keys)
❯ Universal (SSR / SSG)
Single Page App

レンダリングモードを選択します。
ざっくりいうと、
Universalは、サーバー側で、jsを実行してレンダリングするモード。
Single Page Appは、クライアント側でjsを実行してレンダリングするモード。

ここでは、Universalを選択します。
補足：セクション「Nuxt.js & FirebaseによるSPA開発入門」の場合は、
Choose rendering modeの選択で、Single Page Appを選択してください。

エンターキー押下

? Deployment target: (Use arrow keys)
❯ Server (Node.js hosting)
Static (Static/Jamstack hosting)

Serverの方は、node.jsとして サーバーで動かす場合に選択、
Staticは、静的なファイルとして、静的ファイルを書き出して動作するので静的ホスティングサービス上にデプロイする場合に選択。

ここでは、Serverを選択します。
エンターキー押下

? Development tools: (Press ＜space＞ to select,＜a＞o toggle all,＜i＞ to invert selection)
❯● jsconfig.json (Recommended for VS Code if you’re not using typescript)
◯ Semantic Pull Requests
◯ Dependabot (For auto-updating dependencies, GitHub only)

開発ツールの設定に関する項目です。
VS Codeを使うので、jsconfig.jsonにチェックを入れます。スペースキーを押して、黒丸になれば、選択状態です。
エンターキー

? What is your GitHub username? (naka)

GitHubのユーザー名を入れます。特に理由がなければ、デフォルトの設定でOKなので、エンターキーをおしてください。

Version control system:
❯ Git
None

ソースコードのバージョンコントロールで、Gitを使うかの選択です。
コース内では、Gitは使いませんが、後で使いたくなることを考慮して、Gitを選択してエンターキー押下。
処理が行われます。数分掛かります。

“Successfully”と表示されればOKです。

動作確認

ターミナルで、下記を実行。
helloディレクトリに移動

$ cd hello

開発モードでサーバーを起動
$ npm run dev

画面に表示されているURL(例：http://localhost:3000/)をコピー、

Google ChromeでURLを開いてください。

このような、画面が表示されていればOKです。

補足：学習タイミングによってはUIが異なることが想定されます。

次のレクチャーへ進んでください。

検証環境

  • node.js v14.18.1
  • create-nuxt-app v3.7.1
  • nuxt.js 2.15.8

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する