ツールの使い方

VSCodeで画像が表示されない場合の対処法

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

この記事は、オンライン講座「ウェブ開発入門完全攻略コース – プログラミングをはじめて学び創れる人へ！未経験から現場で使える開発スキルを習得！」のサポート記事です。

VSCodeとは

・プログラミングを行う際にコードを記述する「エディタ」と呼ばれるソフトウェアです。

・エディタを用いてコーディングを行うことで、拡張機能などを活用して効率的に開発を進めることができます。

・VSCodeは現在最も人気のあるエディタの一つです。

VSCodeでの画像表示

VSCodeでは、以下のように画像のプレビュー機能があります。

コンピューター内の画像ファイルを別途開かなくても、エディタ内から画像の中身を確認できるので、開発を進める際に便利です。

VSCodeで画像が表示できない場合

以下のように「An error occurred while loading the image」とエラーが表示される場合の対処法についてお伝えします。

画像ファイルが正常に保存されているか確認

webフォルダをエクスプローラーで開いてみて、画像ファイル自体が破損していないかを確認してみてください。

画像が正常に保存できない原因としては、例えば以下が考えられます。

・ネットワークの通信が不安定
安定したネットワーク環境下で再度ダウンロードを行ってみてください。

・ストレージが不足している
余分なファイルなどを削除して、画像保存のための保存領域を確保しましょう。

・アンチウィルスソフトがブロックしている
画像の保存を妨げているセキュリティソフトなどが無いか確認してみてください。

VSCodeの再起動

もし画像が正常に保存されている場合は、ファイルの保存が反映されていない可能性があるので、VSCode自体の再起動などを行ってみてください。

まとめ

この記事では,VSCodeで画像が表示されない場合の対処法について説明しました。このような症状が発生した場合は、画像の保存状態について確認してみてください。

動画で学ぶプログラミング入門

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

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

今すぐ詳細を確認する

VirtualBoxでNATとホストオンリーアダプターによる安全なネットワーク環境構築方法

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

この記事では、VirtualBoxのネットワーク環境をNATとホストオンリーアダプターを用いて構築する方法を紹介します。

よくあるVirtualBoxネットワーク設定の例として、ブリッジアダプターを使ったものがありますが、外部ネットワーク、仮想マシン、ホストOSの全ての通信が可能になってしまいセキュリティ的によろしくありません。

そこで、NATとホストオンリーアダプターを設定することで、

仮想マシンから外部ネットワークに接続できる
外部ネットワークからは仮想マシンに接続できない
ホストOSからゲストOSへの接続ができる

というセキュリティ的に安全なネットワーク環境が構築することができます。

では、構築手順を説明していきます。

実行確認環境

NATとホストオンリーアダプターを用いたネットワーク設定に関して、macOS、Windowsともに動作確認を行っております。

仮想マシンOS（今回はCentOS7を使用）は既にインストールされている前提としています。

実行環境は以下となっております。

ホストOS： macOS(Catalina 10.15.4)、Windows 10(バージョン 1909)
VirtualBox：6.1.4
仮想マシンOS： CentOS7.8.2003

※VirtualBoxのバージョン、OS毎にUIが異なる可能性があります。

VirtualBoxの設定

VirtualBoxの設定を行います。

アダプタの作成

まずは、ホストオンリーアダプター用のアダプターを作成します。

VirtualBoxを起動し、ツールの横にある横線3つのボタンを選択してください。

プルダウンメニューが表示されるので、以下のように「ネットワーク」を選択します。

以下のような画面が表示されるので、「作成」ボタンをクリックしてアダプターを追加します。

追加したアダプターを選択（ダブルクリック）して、IPv4アドレスを設定します。

デフォルトで以下のように「アダプターを手動で設定」が選択されており、自動的にIPv4アドレスが設定されているはずです。選択されていなければ「アダプターを手動で設定」を選択しましょう。

設定されているIPv4は後ほど、CentOSの設定で使用するのでメモしておきましょう。

※アドレスはそれぞれの環境で違います。

これでVirtualBoxの設定は完了です。

仮想マシンの設定

次に仮想マシンの設定をします。

NATの設定

まず、設定の対象となる仮想マシンを選択し、「設定」ボタンをクリックします。

すると以下のような設定画面が出てくるので、「ネットワーク」をクリックします。

WindowsだとmacOSのUIと表示が異なることがありますが、同じように「ネットワーク」をクリックしてください。

以下のように「アダプター１」がデフォルトで割り当てが「NAT」になっていればOKです。

「NAT」になっていなければ、プルダウンから選択して変更してください。

ホストオンリーアダプターの設定

次にホストオンリーアダプターの設定を行います。

「アダプター２」を選択し、「ネットワークアダプターを有効化」にチェックを入れます。

※アダプター２が非活性で選択できない場合は、起動している仮想マシンを停止してください。仮想マシンのウィンドウの×ボタンを押して、「power off the machine」を選択後「ok」ボタンを押すことで停止できます。

「ネットワークアダプターを有効化」にチェックを入れた後、設定が変更できるようになるので割り当てをクリックして「ホストオンリーアダプター」を選択してください。

「名前」のアダプターは先ほど作成したアダプター名にしてください。

設定できたら「ok」ボタンを押して、ホストオンリーアダプターの設定は完了です。

CentOSの設定

最後にCentOSの設定を行います。

ネットワークマネージャー起動

まずは、設定したい仮想マシンを選択して起動してください。対象仮想マシンをダブルクリックすると起動できます。

その後、設定したユーザIDとパスワードを入力してログインします。

次にネットワークマネージャーを開くために以下のコマンドを入力してください。

nmtui

すると以下のようなネットワークマネージャが開くので、「Edit a connection」を選択してEnterキーを押します。

enp0s3の設定

まずはenp0s3の設定を行います。

以下のような画面が表示されるので、「enp0s3」を選択してEnterキーを押します。

※選択は十字キーで行います。

IPv6の「Automatic」を選択してEnterキーを押します。その後、プルダウンが表示されるので、「Ignore」を選択してください。

また、「Automatically connect」にチェックを入れてください。

※チェックはSpaceキーで入れることができます。

設定が完了したら「OK」を選択肢、Enterキーで完了させてください。

enp0s8の設定

「OK」選択後にEnterキーを押すと先ほどの選択画面に戻ります。

次は「■ ■ ■ ■ 1」という文字列を選択してEnterキーを押してください。

※「■ ■ ■ ■ 1」という文字列は文字化けしていなければ、「enp0s8」となっているようです。

まずは、名前を変更しましょう。

「Profile name」を選択後、「■ ■ ■ ■ 1」を「enp0s8」に変更しましょう。

次にIPv4の「Automatic」を「Manual」に変更します。

「Manual」に変更後、「Show」を選択してEnterキーを押します。

以下のように詳細が表示されます。

「Addresses」を選択し、Enterを押してIPアドレスを入力しましょう。

入力するIPアドレスは、アダプターの作成でメモしたIPアドレスを使用します。入力するIPアドレスはホストOSのIPv4を下限、ネットマスクを上限の範囲として適当に決めます。

今回はメモしたIPアドレスを以下のように変更して入力します。

メモしたIPアドレス：192.168.xxx.1

↓

入力するIPアドレス：192.168.xxx.2

※xxxは個人の環境によって変わります。

IPアドレスの入力が終わったら、enp0s3の設定と同様にIPv6を「Ignore」に変更、「Automatically connect」にチェックを入れます。

設定後、「OK」を選択しEnterを押します。

選択画面に戻ったら今度は「Back」を選択し、Enterキーを押します。

ネットワークマネージャー終了

「Quit」を選択、Enterキーを押してネットワークマネージャーを終了します。

設定の反映

設定を反映させるために以下のコマンドを入力してください。

systemctl restart NetworkManager 
systemctl restart network

以下のようにエラーが表示されなければOKです。

動作確認

ネットワーク設定が上手くいっているかどうか確認します。

外部ネットワークへの接続

まず、仮想マシンから外部のネットワークに接続できるかどうか確認します。

pingコマンドを使ってGoogleに接続できるか確認してみましょう。

ping google.com

以下のように応答が返ってきていれば外部ネットワークに接続できています。

ホストOSからゲストOSへの接続ができる

ホストOSからssh接続で確認してみましょう。

左側がホストOSのターミナル、右側が仮想マシンのCentOSのターミナルです。

macOSの方はターミナル、Windowsの方はコマンドプロンプト、PowerShellなどで実行してみてください。

以下のsshコマンドでホストOSから仮想マシンに接続します。

ssh root@192.168.56.2

※root（ユーザID）、192.168.56.2（IPアドレス）などは個人の環境に合わせて変更してください。IPアドレスは仮想マシン上で画像のように「ip addr」と入力するとenp0s8のinetから確認することができます。

左の画像のように仮想マシンにログインできたら接続できています。

これでNATとホストオンリーアダプターを使ったネットワーク環境が構築できています。

お疲れ様でした！

動画で学ぶプログラミング入門

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

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

今すぐ詳細を確認する

APIって何？使い方やメリットを初心者にもわかりやすく解説！

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

はじめに

API（読み：エーピーアイ）という言葉を聞いたことがあるでしょうか。

簡単にいえば、ソフトウェアの機能の一部を外部のソフトウェアから使用できるようにする仕組みのことです。

これだけ聞いてもピンと来ない方もいらっしゃるでしょう。

この記事では、APIとは何なのか？どう役立つものなのか？を初心者にもわかりやすく説明します。

また、有名なAPIについても紹介しますので、実際に使ってみる際の参考になれば幸いです。

まずは体験：APIを使ってみよう

APIについて理解するには、まずは実際にAPIを使ってみるのが早いです。

MacOSを使っている方はターミナル、Windowsを使っている方はコマンドプロンプトを開いて下記のように打ち込んでみてください。

$ curl "http://zipcloud.ibsnet.co.jp/api/search?zipcode=1000014"

ここで登場したcurlは、サーバとのデータのやりとりをするためのコマンドで、APIを使う時に使用されることが多いです。

今回の例ではWebサーバ（http://zipcloud.ibsnet.co.jp）とのデータやりとりをするために使用していると考えてください。

このコマンドを実行すると下記のような実行結果が得られます。

{
	"message": null,
	"results": [
		{
			"address1": "東京都",
			"address2": "千代田区",
			"address3": "永田町",
			"kana1": "ﾄｳｷｮｳﾄ",
			"kana2": "ﾁﾖﾀﾞｸ",
			"kana3": "ﾅｶﾞﾀﾁｮｳ",
			"prefcode": "13",
			"zipcode": "1000014"
		}
	],
	"status": 200
}

何やら住所が出てきましたね。

実は先ほどのcurlコマンドを実行した際にアクセスしたWebサーバはzipcloudという郵便番号データ配信サービスです。

zipcloudのサービスURL（http://zipcloud.ibsnet.co.jp）に続く部分「/api/search?zipcode=1000014」では、「郵便番号100-0014の住所データが欲しい」とリクエストしています。

その結果「東京都千代田区永田町」の住所が返されたというわけですね。

外部からのリクエストを受けてzipcloudが保有している住所データベースを検索し、該当住所を返すというこの機能がまさにAPIなのです。

APIとは？

改めてAPIとは何なのか説明していきます。

API（Application Programming Interface）は、広い意味ではある機能をソフトウェア同士で共有するための仕組みです。

よく界隈で耳にする「APIを公開する」や「APIを叩く」といった文脈では、その中でも特に「Web API」のことを指します。

Web APIとは、APIの中でもWebサービスから提供されているもののことです。

冒頭の例でもzipcloudというサービスのWeb APIを使って住所情報を取得しましたね。先ほどはコマンドで手動で取得しましたが、通常は自分のWebサービスで二次利用するために活用します。

例えば自分のWebサービスでユーザーに住所入力をしてもらう時、郵便番号だけを入れたら住所を自動で補完入力してくれるような機能は、このWeb APIを使えばできますね。

このように、とあるソフトウェア（自分のWebサービス）から別のソフトウェア（今回の例ではzipcloud）の機能を利用するための仕組みがAPIです。

APIのメリット

APIを使うメリットについてみていきましょう。以下は主にWeb APIのことについて説明していきます。

提供する側

まず、APIを提供する側のメリットについてです。大抵のAPIは無料で提供されていることが多く、蓄えられたデータへのアクセスも許可するため、一見メリットがないように見えるかもしれません。

しかし、便利なAPIを公開しそれを使うWebサービスが増えれば増えるほどユーザーの目に触れる機会も増え、ついてはそれが自社サービスへの導線を拡大し、シェアを獲得することにつながります。

また、多くのWebサービスに使われるほど自社開発機能との組み合わせで新しい使い方が発見されたり、それがビジネス提携のきっかけになるなど、ビジネスチャンスを広げる機会としても有効です。

開発した機能を自社だけで独占するのではなく、多くの人に向けて公開し、さらなる便利な使い方を模索していくという考え方はまさにオープンイノベーションを体現しているといえます。

使用する側

次にAPIを使用する側のメリットですが、こちらは想像に難くないでしょう。

他社ですでに開発された便利な機能や、蓄えられたデータを二次利用できるためより新しいサービスを効率よく開発することができます。

ユーザー側の視点からも便利な場合が多いです。例えば別のサイトでユーザーが登録したアカウント情報をAPIによりそのまま活用して自社サイトでのログインに使用してもらう場合、ユーザーは面倒な会員登録をせずに済みます。

また、アカウント情報は重要な個人情報です。自社のセキュリティレベルで管理するよりもより大きなサイトで信頼性の高いシステムを活用して管理した方が、より高いセキュリティレベルを保つことができます。

有名なAPI

より具体的に理解するため、様々なサイトで多く活用されている著名なAPIについて見ていきましょう。

Google Map

よく、レストランや美容院を探すWebサイト等で所在地を見ようとするとGoogle Mapが表示されることはありませんか？

これは、そのサイトでGoogle Map APIを使用しているためです。

このように、GoogleはWebサイトでGoogle Mapの地図やストリートビューを表示できるAPIを公開しています。

Amazon Pay

ネットでお買い物をするときいざ支払いの場面になると、通常はそのサイトで初めて購入する場合はアカウント作成から始まります。その中で支払い方法や配送先住所を登録しますよね。

しかし、サイトによってはここでアカウントを作成する以外にも「Amazon Payで支払い」のオプションが提示されることがあります。

これを選択すると、ユーザーがAmazonで登録している配送先や支払い方法をそのまま使用できるため、面倒なアカウント作成をせずに済みます。

このように、ユーザーの利便性を重視してAmazonが提供するAmazon Pay APIを活用しているサイトも多いです。

Facebook

Facebookはユーザーのログイン情報を提供するAPIを公開しています。

例えば、とあるWebサイトを利用するにはユーザー登録が必要だったとしましょう。

少し気になるコンテンツがあってそれを見たいだけだったのに、登録が面倒だからといって離脱してしまうユーザーは多いです。

そんな時、FacebookログインAPIを使えば、そのサイトでのユーザー登録の代わりにすでに保有しているFacebookアカウントでログインしてもらうことができます。

まとめ

APIについて、その用途やメリットを紹介しました。

自分のWebサービスならではの部分はもちろん自力での開発にこだわるべきですが、公開されているAPIで活用できそうなものはどんどん取り入れて効率よく開発しましょう。

また、自分でAPIを作って公開するのもおすすめです。実際に作ってみることでAPIに関する理解を深められるのはもちろん、いろんな人が使ってくれることで新しい使い道が見つかったり、ユーザーを自分のWebサービスへ誘導できることがあります。

まずはこの記事で取り上げたAPIを使って理解を深めてみると良いでしょう。

動画で学ぶプログラミング入門

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

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

今すぐ詳細を確認する