プログラミング入門ナビ編集部

【AWS Cloud9】ソフトウェアアップデートで警告メッセージが表示された時の対処方法

2023-08-02 By プログラミング入門ナビ編集部

この記事は、Udemyオンライン講座「はじめてのRuby on Rails入門-RubyとRailsを基礎から学びWebアプリケーションをネットに公開しよう」のサポート記事です。

なお、アクセス時期によっては実際のサイトと記事中の画像で表示が異なる場合があります。

ソフトウェアアップデートで警告メッセージが表示された時の対処方法

ソフトウェアのアップグレードしたタイミングで”Pending kernel upgrade”と警告表示された時の対処法として、以下手順をお試しください。

手順

(1) ソフトウェアアップデート実行

$ sudo apt update && sudo apt upgrade

(2) Do you want to continue? [Y/n] 箇所
Y を入力してエンターキー。
Do you want to continue? [Y/n] Y

(3) Pending kernel upgrade 警告表示画面
新しいLinuxカーネルのバージョンが利用可能で、適用するかどうか確認されています。
エンターキーで次へ進みます。

(4) Which services should be restarted? 画面
アップデートによって影響を受けたサービスを再起動する必要があることを表しています。適用する場合は、再起動が必要になります。
エンターキーでApacheサービスとパッケージを管理しているパッケージキットを再起動します。

(5) アップデート完了

(6) 再度ソフトウェアアップデート実行
以下のように表示されていればOKです。

$ sudo apt update && sudo apt upgrade →0 upgraded, 0 newly installed, 0 to remove and 0 not upgraded.

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

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

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

WindowsからSSHでサーバに接続する方法（RLogin利用）

2023-07-11 By プログラミング入門ナビ編集部

Windows環境から、サーバにSSHを使って接続する方法について学習します。

この記事は、オンライン講座「Linuxサーバー構築運用入門」のサポート記事です。

SSH（エスエスエイチ）とは

Secure Shell（セキュアシェル）といって、暗号や認証の技術を利用して、安全にリモートコンピュータと通信するための仕組みです。

WindowsからSSHでサーバに接続する方法を動画を使って学習する

いろいろなターミナルソフト

SSH接続するときに、Macの方、標準でインストールされている。ターミナルというアプリを使うのですが、
Windowsの場合は、ターミナルソフトをダウンロード、インストールして使う必要があります。

この記事では、
RLogin（アールログイン）を使います。無料です、タブが使えるなど、使いやすいです。

筆者は、普段の多くの時間ではmacを使っていますが、Windowsで開発するときは、このソフトをつかっています。

基本的には好みのターミナルソフトを利用していただければ良いです。

他には、
歴史が長く、定番の
PuTTY （パティ）
Tera Term（テラターム）
というのもあります。

ただし、後発のRLoginに比べると使い勝手は劣ると思います。

RLoginのインストール

それでは、Rloginのダウンロードとインストールを行います。

WebブラウザでRLoginの公式サイトを開きます。

インストールおよびアンインストール

インストールおよびアンインストールをクリックします。

ダウンロード

実行プログラム(32bit)
実行プログラム(64bit)
お使いのWindowsの環境によって、どちらかをダウンロードします。

どちらをインストールしたらよいかわからない方は、
32bit、64bitどちらかを、Windowsのシステム情報から確認します。

Windows10の場合 : スタートアイコン → 設定→システム→バージョン情報→デバイスの仕様→システムの種類。

関連記事：Windows10で32bit版か64bit版かを確認したい

ファイルの解凍

ダウンロードしたzipファイルを解凍します。
ファイルを右クリックして、「すべて展開」を選択します。

フォルダの移動

このrloginフォルダを任意の場所に移動します。

例えばですが、

ローカルディスクC / ユーザー / ユーザー名
で、新規フォルダ toolsを作成して、その中に配置します。

RLoginを使ってSSH接続

RLoginの起動

RLogin.exeをダブルクリック起動します。

Server Select

サーバ接続に関する情報を設定します。
「新規」ボタンをクリックします。

新規サーバ接続設定

必要情報を入力、設定します。

エントリー/コメント : 任意の接続先の名前を記述
プロトコル：「ssh」を選択
Server Address : 接続したいサーバのIPアドレスを入力
Socket Port : sshを選択
User Name : LinuxのユーザーIDを入力
Password/phrase : ユーザーのパスワードを入力（パスワード認証の場合）
デフォルト文字セット : 「UTF-8」を選択

ちなみに、公開鍵認証の場合は、SSH Identity Keyの下の「参照」ボタンをクリックして、秘密鍵を選択します。

サーバへ接続

1. 設定を選択して

OKボタンをクリック

公開鍵の確認

接続ボタンをクリックします。

接続完了

サーバへSSHで接続できました！

ログアウト

ログアウトするには、
exit
と入力して、エンターキーを押します。

再度接続

メニューの

ファイル > サーバに接続

をクリックします。

サーバ選択

接続先を選択して、OKボタンを押します。

接続完了

再度接続できました

RLoginはタブに対応

RLoginはタブに対応しています。一度に複数の接続を並列して行うことができるので便利です。

おわりに

この記事ではWindowsからRLoginを使ってSSHでサーバに接続する方法について初心者向けに説明しました。

オンライン講座、Linuxサーバー構築運用入門（CentOS7, PHP7, Apache, MySQL, WordPress対応）では、Linuxの操作に慣れていない方向けに、コマンドの使い方から始まり、最終的にはLinuxサーバを設定してhttps対応の独自ドメインのオリジナルブログが公開できるように説明します。

動画で丁寧に説明していますので、ぜひご利用ください！

Bestseller

はじめてのLinuxサーバー構築運用入門 - Linuxコマンドを基礎から学ぶ中村祐太 Yuta Nakamura, Proglus （プログラス）Linuxコマンド操作を基礎から学習してLAMPを構築できる. Linux, Apache MySQL(MariaDB), PHP, WordPressのインストールを実施.

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

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

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

【最新版】GitHub PagesでWebサイトを無料で公開しよう（初学者向け）

2023-07-04 By プログラミング入門ナビ編集部

概要

この記事では、無料でWebサイトの公開が可能なGitHub Pagesへ、GitHubのアカウント作成から、Webサイトの公開と削除するところまでを解説します。

この記事は、オンライン講座「ウェブ開発入門完全攻略コース – HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！」とProglus「新HTML入門」のサポート記事です。

なお、アクセス時期によっては実際のサイトと記事中の画像で表示が異なる場合があります。

GitHubアカウントの作成

GitHubのページへアクセス

GitHubのページへアクセスし、「Sign up」をクリック。

メールアドレスを入力

登録するメールアドレスを入力し、「Continue」をクリック。

パスワードを入力

パスワードを入力し、「Continue」をクリック。

ユーザーを入力

任意のユーザ名を入力し、「Continue」をクリック。

「製品のアップデートやお知らせをメールで受け取りますか？」と質問があり、受け取りたい場合は入力欄に「y」、受け取りたくない場合は「n」を入力し、「Continue」をクリック。

ロボットではないか検証

ロボットではないかと尋ねられるので、「検証する」をクリック。

検証が終わったら、「Create account」をクリック。

コードを入力

登録したメールアドレス宛に確認用のコードが送信されるので、コードを入力。

登録完了できました。

トップページに戻る

左上のマークをクリックすると、ログインした状態で作成したアカウントのトップページが表示されます。

新規リポジトリ作成

リポジトリの作成画を開く

ログインした状態でGitHubのトップページ(https://github.com/)から、「＋」のアイコンのボタンをクリック。

「New repository」をクリック。

新規リポジトリ作成

Repository nameにリポジトリの名前を入力します。
ここでは「my-site-repository」としておきます。

GitHubでソースファイルを管理する場合、自分だけが見れるPrivateと、ほかの人も見ることができるPublicがあります。
今回は外部へ公開するため、チェックボックスを「Public」としておきます。

一番下まで行き、「Create repository」をクリックすると、リポジトリが作成されます。

「my-site-repository」というリポジトリが作成されました。

ファイルのアップロード

アップロードのページ

作成したリポジトリのページから、「uploading an exsiting file」をクリックして、アップロードのページに移動します。

ファイルのアップロード

アップロードしたいファイルやフォルダを枠内へドラッグアンドドロップします。

アップロードが終わったら、「Commit changes」をクリックして保存します。

確認

リポジトリのページへ行くと、アップロードされていることが確認できます。

ページの公開

設定を開く

「Settings」をクリック。

GitHub Pagesの設定

左項目の「Pages」から、「None」で「main」をクリック。

「Save」をクリックして保存します。

保存すると、以下の画像のようにURLを取得できます。

確認

URLをクリックし、アップロードしたサイトが表示されればOKです。

作成したサイトが無事公開されました！

ページの削除

設定を開く

ページの公開でアクセスしたリポジトリのページから、「Settings」をクリックして一番下まで行き、「Danger Zone」の「Delete this repository」をクリックします。

リポジトリを削除

確認フォームに太字の「ユーザ名/リポジトリ名」を入力した後に下のボタンを押すと、リポジトリを削除してサイトを削除することができます。

まとめ

今回はGitHubのアカウントの作成から、作成物をWebサイトへ公開 / 削除するところまでを解説しました。
ご不明点は、Udemy、Proglus（プログラス）内に設置したQ＆Aコーナーにてお知らせください。

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

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

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

OpenAIアカウントの作成方法を紹介します！

2023-07-04 By プログラミング入門ナビ編集部

この記事は、Proglusオンラインプログラミング学習講座「ChatGPTの使い方入門 – 最新AIビジネス活用プロンプトエンジニアリングでより良い回答を得よう」とUdemyオンライン講座「ChatGPTの使い方入門-最新AIビジネス活用プロンプトエンジニアリングでより良い回答を得よう」のサポート記事です。

このサポート記事では、OpenAIアカウントの作成方法を紹介します。
ChatGPTを利用するためには、OpenAIのアカウントが必要になります。
なお、アクセス時期によっては実際のサイトと記事中の画像で表示が異なる場合があります。

OpenAIアカウント作成方法

ChatGPTの公式サイトにアクセス

ChatGPTの公式サイトにアクセスします。
「Try ChatGPT」をクリック。

サインアップ

既にOpenAIのアカウントを持っている場合は「Log in」をクリックしてログインします。
新規でアカウント作成する場合、「Sign up」をクリック。

メールアドレスを入力

アカウントの作成方法は2つあります。
1) メールアドレスで作成
2) Googleアカウント、Microsoftアカウント、Appleアカウントで作成
今回はメールアドレスを使ってアカウントを作成をしていきます。
ご自身のメールアドレスを入力して、「Continue」をクリック。

パスワードを入力

パスワードを入力します。
パスワードは8文字以上入力してください。
パスワードを入力して、「Continue」をクリック。

OpenAIからメールが届きます

登録したメールアドレス宛にOpenAIからメールが届きます。

送信されてきたメールを開いて、「Verify email address」をクリック。
このリンクの有効期限はメールが届いてから5日間ですので、注意して下さい。

名前と誕生日を入力

「Tell us about you」というページが開きます。
ご自身の名前と誕生日を入力して、「Continue」をクリック。

電話番号を入力

「Verify your phone number」というページが開きます。
メッセージが受け取れる電話番号を　入力して、「Send code」をクリック。

認証コードを入力

Open AIからメッセージが届きます。
　メッセージに記載されている認証コードを入力。

ChatGPTを始める

ChatGPTの説明が表示されています。
「Next」をクリック

これで、ChatGPTを利用することが出来ます。
OpenAIアカウントが作成することができました。

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

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

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Visual Studio CodeでHTMLを書くときの便利な設定方法！ミスの防止や開発効率UPに役立てよう

2023-05-10 By プログラミング入門ナビ編集部

はじめに

HTML言語の習得に欠かせないのがエディタです。昨今は非常に便利なエディタが多く開発されていますね。

本記事では、その中でも特に人気の高いVisual Studio Codeで使えるおすすめの設定方法をお伝えします。

ミスの防止や開発効率のUPに役立つので、初心者の方はもちろん全てのエンジニアの方におすすめしたい内容です。

macOSとwindowsで多少メニューや見た目が異なるため、初心者の方でも混乱しないように両方の設定画面を掲載しています。

Visual Studio Codeとは

プログラミングに欠かせないエディタですが、本サイトで一押しのおすすめエディタがVisual Studio Codeです（VSCodeと略称でも記載されます）。

ほぼ全てのプログラミング言語に対応し、使い勝手も良いため近年人気が急上昇しています。

使ったことの無い方もぜひ使用してみてください。下記から入手できます。

Download Visual Studio Code

タブの設定

コードを書く時にはタブでインデントが使えると便利ですね。この1タブあたりでスペースいくつ分のインデントがつくかを設定できます。

こだわりが特になければ、見やすさの観点から「2」を推奨します。

VSCodeではデフォルト値が4になっていることが多いので、下記の手順で変更しましょう。

[macOSの場合]

上部メニューバーの「Code」→「Preferences」→「Settings」を開きます。

検索窓で「tab size」と入力し、出てきた「Editor: Tab Size」の欄に2を入力しましょう。自動で保存されるのでそのまま閉じて構いません。

[windowsの場合]

上部メニューバーの「File」→「Preferences」→「Settings」を開きます。

検索窓で「tab size」と入力し、出てきた「Editor: Tab Size」の欄に2を入力しましょう。自動で保存されるのでそのまま閉じて構いません。

Emmetの日本語設定

次にEmmnet（エメット）の設定を行いましょう。Emmnetというのは、ざっくりといえば入力補間機能のことです。

例えばVSCodeで適当なHTMLファイルを新規作成し、最初にエクスクラメーションマーク「！」を入力しタブキーを押すだけで下記のようにHTML文書の雛形が自動で作成されます。

入力の手間が省けて便利ですが、VSCodeのデフォルト設定ではhtmlタグの言語（lang属性）が英語（en）になっているので、日本語の文書を作成することが多い場合はここを日本語にいちいち変える必要があります。

都度変更するのは面倒ですし変更忘れも心配なので、雛形自体を修正しておくのがおすすめです。

下記の通り実施してください。

[macOSの場合]

上部メニューバーの「Code」→「Preferences」→「Settings」を開きます。

下記のように検索窓で「emmet」と入力し、出てきた候補の中から「Edit in setting.json」を探してクリックしましょう。

setting.jsonが開くので、最後の中かっこの手前に下記のように追加します。Command+Sキーでファイルを保存してください。

[windowsの場合]

上部メニューバーの「File」→「Preferences」→「Settings」を開きます。

下記のように検索窓で「emmet」と入力し、出てきた候補の中から「Edit in setting.json」を探してクリックしましょう。

setting.jsonが開くので、最後の中かっこの手前に下記のように追加します。Ctrl+Sキーでファイルを保存してください。

なお、setting.jsonに追加するコードは下記です。必要に応じコピー&ペーストしてください。

    ,
    "emmet.variables": {
        "lang": "ja"
    }

設定後にもう一度「！」とタブキーを押して下記のようにlang属性が日本語になっていればOKです。

不可視文字の表示

スペースや予測不能なゴミデータは通常下記のように空白で表示され、見ることができません。そのため、いくつ分の空白が空いているのかや、全角なのか？半角なのか？も気付きにくいです。

ここに、全ての半角スペースを可視化する機能を適用すると下記のように半角スペースの部分に丸グロをつけることが可能です。

このように見やすくすることで、コーディング時にありがちな半角スペースと全角スペースを間違えるミスに気付きやすくなります。

設定は下記のように行います。

[macOSの場合]

上部メニューバーの「Code」→「Preferences」→「Settings」を開きます。

検索窓で「render control characters」と入力し、出てきた「Editor: Render Control Characters」の欄にチェックを入れ、「Editor: Render Whitespace」はallを選択しましょう。自動で保存されるのでそのまま閉じて構いません。

[windowsの場合]

上部メニューバーの「File」→「Preferences」→「Settings」を開きます。

全角スペースの表示

「全角スペースを間違えて入れてしまう」のは初心者が陥りやすい頻出ミスです。

先ほどの半角スペース可視化を行っても全角スペースには丸グロがつかず、発見できない可能性があるためさらに対策を講じましょう。

ここではVSCodeの拡張機能である「zenkaku」をインストールして、下記のように全角スペースに色（この画面例ではグレー）を付けるよう対策します。

これで全角スペースが入っていたら一目でわかりますね。

下記が具体的なやり方です。

[macOSの場合]

左側メニューアイコンにカーソルを当て、「Extensions」と出るものをクリックします。

次に検索窓に「zenkaku」と入力して出てきた下記のアイコンをクリックし、緑の「Install」ボタンを押しましょう。完了後にVSCodeの再起動が必要です。

[windowsの場合]

下記の左側メニューアイコンをクリックします。

次に検索窓に「zenkaku」と入力して出てきた下記のアイコンをクリックし、緑の「Install」ボタンを押しましょう。完了後にVSCodeの再起動が必要です。

HtmlHint

2023/04/08現在、拡張機能「HtmlHint」はメンテナンスされなくなったため非推奨とされています。
本コースコースでも導入は非推奨としています。

非推奨の拡張機能をインストールすると、下記のような影響が考えられます。

最新のセキュリティ対策が施されていないため、ハッキングやマルウェアの脅威にさらされる可能性がある。(セキュリティの問題)
最新のバージョンと互換性がないため、VSCodeの機能が正しく動作しなくなる可能性があります。たとえば、ファイルの自動保存、デバッグの実行、または他の拡張機能の使用に問題が発生することがある。( 機能の問題)

■代替となる拡張機能について
HTMLHintをインストールしてご利用してください。(名前が類似していますが、オレンジ色のアイコンです)

HTMLフォーマッタ

最後に、自動でHTMLの構文に即したインデントをつけるなど、HTMLを自動整形する機能を設定しましょう。

この機能を有効にすると、下記のようなコードが、

macOSの場合：SHIFTキー+optionキー+Fキーで、windowsの場合：SHIFTキー+ALTキー+Fキーで下記のように自動整形されます。

headとbodyにインデントがついて見やすくなりましたね。

時間短縮になるのでぜひ活用してください。

設定は下記のように行います。

[macOSの場合]

上部メニューバーの「Code」→「Preferences」→「Settings」を開きます。

検索窓で「html.format.enable」と入力し、出てきた「Enable/disable default HTML formatter」の欄にチェックを入れます。すでに入っている場合はそのままで構いません。

また、再度検索窓に戻り「html.format.indentInnerHtml」と入力し、出てきた「Indent <head> and <body> sections」の欄にチェックを入れます。自動で保存されるのでそのまま閉じて構いません。

[windowsの場合]

上部メニューバーの「File」→「Preferences」→「Settings」を開きます。

まとめ

HTMLのコーディングにおすすめしているVisual Studio Codeでの便利な設定について紹介しました。

少し数が多いですが、最初のこの一手間で驚くほど快適になるのでぜひ全て設定することをおすすめします。

また、本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。

新HTML入門（Proglus）

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

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

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する