プログラミング入門ナビ by Proglus（プログラス）

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

本ページにプロモーションが含まれる場合があります

You are here: Home / Archives for ツールの使い方

ツールの使い方

Zoomを使ってビデオ会議に参加する方法

By

Zoom（ズーム）とは？

 
Zoomとはワンクリックで参加できるWeb会議システムです。 オンライン上での会議や営業などが増える現代においてZoomはURLをクリックするだけでミーティングに参加できる手軽さ、また多人数同時接続、高品質、多機能などの面でまさに時代に沿ったWeb会議システムと言えます。  
 

招待メールについて

 
Webミーティングに参加するためにはZoomのURLを入手必要があります。 URLについてはZoomミーティングホスト(ミーティングの主催者)から以下のような招待メールで送られてきます。
 
 
 
   
 
赤枠①で囲まれた zoom.usが含まれるURLをクリックします。
 
キャンセルする場合は②のURL、予約時間を変更する場合は③のURLをクリックしてください。
 

Zoomダウンロード からミーティング参加までの手順

 
URLをクリックすると以下のような画面に移りZoomの自動ダウンロードが始まります。
 
※ダウンロードが始まらない場合は右赤枠の”ダウンロード”をクリックしてください。
 
 
 
 
 
ダウンロードが完了したら左下のファイルをクリックするとZoomが起動します。 Zoomを起動すると以下のような画面が表示されます。ここでは緑“コンピューターでオーディオに参加”のボタンをクリックしてください。
 
 
 
 
左下のヘッドフォンのアイコンがマイクのアイコンに変わればミーティング参加完了です。
 

マイクのON/OFF

 
試しに声を出してみましょう。画面左下のマイクのアイコンで緑のメーターが動いていたらマイクがONになっています。
 

 
 
もしマイクを消音にしたい場合はマイクのアイコンをクリックしてみてください。
 
 
 
 
マイクアイコンの横にある”^”ボタンをクリックするとバーが開きマイクの設定ができます。
 
 
 

カメラのON/OFF

 
マイクアイコンの横にあるアイコンがカメラアイコンです。アイコンをクリックすることでON/OFFを切り替えることができます。  
 

カメラがONの場合

 
画面にあなたの顔が表示されます。それがカメラがONの状態です。
 
 

カメラがOFFの場合

 
画面にはアイコンが表示されています。
 
 
カメラアイコンの横の”^”ボタンをクリックするとバーが開きカメラの設定ができます。  
 
 

チャットの使い方

 
Zoomにはユーザー同士がテキストベースでのやり取り(URLの添付など)をするためのチャットスペースが用意されています。 画面下側にあるメニューの、”チャット”と書かれた上のアイコンをクリックします。
 
 
チャット画面が開かれメッセージのやり取りが行えます。
 

会議終了から退室の流れ

 
 
オンラインでのやり取りが終わったら右下の“ミーティングの終了”というボタンをクリックしてください。
 
 
 
 
 
このような画面になるので“ミーティングから退出”をクリックしてください。
クリックしたら退出完了です。
 

まとめ

いかがでしたでしょうか。Zoomにはまだまだ会議を円滑にする他の機能もあります。Zoomを活用してオンライン上でのより良いコミュニケーションに役立てましょう。

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

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

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

今すぐ詳細を確認する

Node.jsをmacOSへインストールする方法

By

node.js（ノードジェイエス）をmacOSにインストールする方法について学習します。

手順

  • node.js のインストール状況を確認
  • Homebrew のインストール
  • nodebrewのインストール
  • インストール出来るnode.jsのバージョンを指定
  • node.jsをインストール
  • 特定のnode.jsのバージョンを利用する

node.jsのインストール確認

まず、お使いのmacにnodejsがインストールされているか、どうかを確認します。
ターミナル上で、下記コマンドを入力して実行（Enterキー謳歌）します。

$ node -v

バージョンが表示される場合は、インストール済みですので、
インストール作業は必要ありません。

バージョンが表示されずに。

$node -v
-bash: node: command not found

と表示される場合は、node.jsのインストールが必要ですので、次の手順へ進んでください。

node.jsのインストール

node.jsをインストールするには、
HomebrewというmacOS用のパッケージマネージャを利用します。

Homebrewとは

Homebrewでは、macOSで利用できる開発ツールのインストールを管理できます。

Homebrewがインストールされているか確認

まず、Homebrewがインストールされているか、確認します。

$ brew -v
Homebrew 2.0.2

バージョンが表示される方は、インストール済みですので、インストール作業は必要ありません。

インストールがされていない方は、

Homebrew公式サイトを参照します。

公式サイト記述があるインストール用のスクリプトをコピーしてターミナルに、貼り付け。実行します。

補足: macに、Command Line Tools がインストールされていない場合は、インストールの途中で

==> The Xcode Command Line Tools will be installed.

Press RETURN to continue or any other key to abort

のように、表示されます。
returnキー（Enterキー）を押します。

インストールのために、macのログインパスワードを求められるますので、パスワードを入力してEnterキーを押します。

homebrewのインストールを確認

homebrewのインストールが完了したら、次のコマンドを実行してください。

$ brew -v

↓ インストールが成功していると、バージョンが表示されます。

Homebrew 2.1.8
Homebrew/homebrew-core (git revision 0cf5; last commit 2019-07-26)

バージョンは学習のタイミングにより異なります。
Homebrewについて、コースで説明していない詳細まで知りたい方は、公式ドキュメントを参照してください。

nodebrewのインストール

続いて、
nodebrewをインストールします。

nodebrewは、node.jsのバージョンを管理するためのツールです。
プロジェクト毎に、node.jsのバージョンを変える必要がある時に、対処しやすくなるメリットがあります。

インストール実行

Homebrewを使用してnodebrewをインストールします。

$ brew install nodebrew

バージョンを確認

インストールが終わったら下記コマンドを実行してバージョンを確認します。

$ nodebrew -v

↓ バージョンが表示される

nodebrew 1.0.0
・・・略・・・

nodebrewでインストールできるnode.jsバージョンの確認

$ nodebrew ls-remote

基本的には、LTSの最新バージョンをインストールすることを推奨します。

しかしながら、バージョンによって動作が変わるケースが無いとは言えないので、
ここでは、node.js10.16.0、npm 6.9.0をインストールしていることを、共有しておきます。

バージョンによる問題が発生した場合は、説明に使ったバージョンを使うことが学習を進める上で有効な場合があります。

参照: Node.js公式サイト

node.jsをバージョンを指定してインストール

下記コマンドで インストールを行います。
v〜 の部分には、インストールしたいバージョンを指定します。

$ nodebrew install-binary v10.16.0

補足： エラー発生時の対処

Fetching: https://nodejs.org/dist/v10.16.0/node-v10.16.0-darwin-x64.tar.gz
Warning: Failed to create the file
Warning: /Users/naka/.nodebrew/src/v10.16.0/node-v10.16.0-darwin-x64.tar.gz:
Warning: No such file or directory
0.0%
curl: (23) Failed writing body (0 != 1058)
download failed: https://nodejs.org/dist/v10.16.0/node-v10.16.0-darwin-x64.tar.gz

という感じでエラーになる場合は、手動でディレクトリを作成します。
下記コマンドを実行して、ディレクトリを作成。

$ mkdir -p ~/.nodebrew/src

再度インストールを行います。

$ nodebrew install-binary v10.16.0

インストールされたバージョン一覧

下記コマンドを実行

$ nodebrew ls

↓バージョンが表示される

v10.16.0
current: none

v10.16.0がインストールされましたが、
current: none・・・まだ有効になっているバージョンはない状態です。

使用するnode.jsのバージョンを指定、

$ nodebrew use v10.16.0

パスを通す

nodeが使えるようにパスを通します（bash利用）。

下記コマンドを実行

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' ＞＞ ~/.bash_profile

注意点： ＞＞ の部分はシステムの都合上、全角文字で表記しています。学習する際は、半角文字に置き換えて実行してください。

パスを通した設定を反映します。

$ source ~/.bash_profile

node.jsのバージョンを確認

下記コマンドを実行

$ node -v

↓バージョンが表示される

v10.16.0

node.jsのインストールが完了しました。

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


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

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

今すぐ詳細を確認する


Font Awesomeのユーザー登録を行いCDNの読み込みコードを取得する方法

By

Webフォントとしてアイコンが使えるFont Awesome （フォントオーサム）ですが、無料プランでもユーザー登録が必須となったため、その手順について説明します。

概要

ユーザー登録を行い、Font Awesome を読み込むためのコード（CDN読み込み）を入手します。

Font Awesome 公式サイトを開く


https://fontawesome.com/

「Start Free」ボタンをクリックします。

Emailをアドレスを登録

メールアドレスを登録して、ボタンをクリックします。

メールアドレスの確認

Check Yror Emailと表示されます。

登録したメールアドレス宛に確認メールが送信されています。

Font Awesomeからのメールを開き、「Confirm my email address + set things up」ボタンをクリックして、メールアドレスの確認を完了させます。

パスワード登録

パスワードの登録を行います。

アンケート画面

アアンケートに回答する画面です。

回答の仕方が分からない場合は、

「No thanks. Let’s skip this step for now」ボタンをクリックして、入力をスキップすることもできます。

フォントオーサムを読み込むコードを控える

ユーザー毎に異なるコード（CDNの読み込み）が表示されますので、後で使えるように、コードを控えておきます。

おわりに

この記事では、Webフォンとしてアイコンが使えるFont Awesomeでユーザー登録を行い、CDNの読み込みコードを取得する方法について説明しました。

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


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

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

今すぐ詳細を確認する


Nuxt.jsの新規プロジェクトを作成する

By

この記事ではWindowsをお使いの方が、Nuxt.jsの新規の空のプロジェクトを作成して、実行するところまでを学習します。

準備

npmのインストール

npmをインストールしていない方は、インストールを行う必要があります。

Windows版

Node.jsとnpmをWindowsにインストールする方法

macOS版

制作中

作業用のディレクトリの作成と移動

ここでは、一例として、ユーザーのホームディレクトリに、nuxt-projectsというディレクトリを作成して学習を行うことにします。

macOSの方は、ターミナル
Windowsの方はコマンドプロンプト、
を起動します。

ディレクトリの作成

mkdir nuxt-projects

と入力してエンターキーを押下。

作成したディレクトリに移動

cd nuxt-projects

と入力してエンターキーを押下。

参考：画面キャプチャ（Windows）

Nuxt.jsの雛形となるプロジェクトの作成

Nuxt.jsの雛形となるプロジェクトをすばやく作成できるツール「create-nuxt-app」が、Nuxt.jsチームによって用意されているので利用します。

npx create-nuxt-app hello

と入力してエンターキー

補足としては。
npxは、npmパッケージのダウンロードと実行を一度に行うツールのことです。
helloの部分はプロジェクト名です。任意の名前を設定します。

対話形式で、設定を行います。

プロジェクト名

? Project name (hello)

Project name、プロジェクト名を設定します。
括弧書きが、デフォルトで使われる名前です。
変更もできるのですが、
今回は、デフォルトの名前を使いたいので、エンターキーを押します。

プロジェクトの説明

? Project description (My scrumtrulescent Nuxt.js project)

プロジェクトディスクリプション、プロジェクトの説明を設定します。
変更もできますが、ここではデフォルトのまま使います。
エンターキーを押します。

サーバーサイドのフレームワークを選択

? Use a custom server framework (Use arrow keys)
❯ none
express
koa
adonis
hapi
feathers
micro

Nuxtアプリケーション内部で利用される、サーバーサイドのフレームワークを選択します.

ここでは使いませんので、noneを選択して、Enterキーを押します。

インストールする機能の選択

? Choose features to install (Press to select, <a> to toggle all, <i> to
inverse selection)
❯◯ Progressive Web App (PWA) Support
◯ Linter / Formatter
◯ Prettier
◯ Axios</i></a>

ここでは使いませんので、選択しないで、Enterキーを押します。

UIフレームワークの選択

? Use a custom UI framework (Use arrow keys) 
❯ none
 bootstrap
 vuetify
 bulma
 tailwind
 element-ui 
 buefy 
   (Move up and down to reveal more choices)

使用するUI フレームワークを選択します。
例えば、知名度が高いものだと、bootstrapです。
ここでは使用しないので、noneを選択してEnterキーを押します。

テストフレームワークの選択

? Use a custom test framework (Use arrow keys)
❯ none
jest
ava

テストフレームワークを選択します。
ここでは使用しないので、noneを選択して
Enterキーを押します。

レンダリングモードの選択

? Choose rendering mode (Use arrow keys)
❯ Universal
Single Page App

レンダリングモードの選択。
Universalは、サーバ側でレンダリング。
Single Page Appはクライアント側でレンダリング。
という違いがあります。

ここでは、Universalを選択して、Enterキーを押します。

作者の名前の設定

? Author name (naka)

Author name、作者の名前を設定します。
入力するか、デフォルトを設定するためのそのままにして、エンターキーを押します。

パッケージ管理ソフトを選択

? Choose a package manager (Use arrow keys)
❯ npm
yarn

パッケージ管理ソフトを選択します。
ここでは、npm （Node Package Manager） を選択してエンターキーを押します。

ここまでの操作で、Nuxtjsの雛形のプロジェクトが作成されました。

参考：すべての設定が終わったろころの画面キャプチャ

※ キャプチャはWindowsですが、macOSでも同様。

プロジェクトの実行

それでは、ひな形のプロジェクトを実行してみましょう。

作成されたhelloフォルダ（作成したプロジェクト名と同名）に移動します。

cd hello

開発モードで制作したプロジェクトを実行します。

npm run dev

下記のような画面が表示されます。Listening onに続くURLをコピーしてGoogle ChromeのURL欄にペーストして、表示します。

下記のような、ダミーのホームページが表示されれば動作確認としてはOKです。

プロジェクトの実行を終了したい場合は、
ターミナル（macOS）, コマンドプロンプト（Windows）にフォーカスをあって（ターミナルやコマンドプロンプトの領域をクリックして）、controlキー + Cキーを押します。

Windows環境で終了して良いか聞かれる場合（Y/N）?は、 Yを入力してEnterキーを押します。

おわりに

この記事では、Nuxt.jsの新規プロジェクトを作成する方法について学習しました。

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


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

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

今すぐ詳細を確認する


jsFiddle ソースコードの保存 – Vue.js入門

By

この記事では、Vue.jsの学習に便利な jsFiddleの使い方について補足説明致します。

学習を進める中で、ソースコードを一旦保存したいときがあると思います。
jsFiddleには、ファイルをセーブする機能がありますので、紹介いたします。

オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」を、世界最大級のオンライン学習プラットフォームUdemy（ユーデミー）で公開中です。

動画で学習する

保存方法

jsFiddleにログインしていない状態から始めます。

コードを書いたら、Sava機能するとセーブされます。
セーブの状態ごとに、URLが発行されるので、これを控えておくと、あとで再現したり、他の人にURLを共有することで、ソースコードを共有することができます。

このurlをコピーして、シークレットモードで起動した、Google Chromeで表示してみると、ソースコードが復元できました。

推測しにくいURLではあるのですが、URLがわかれば内容を確認できてしまうので、機密情報や個人情報が含まれたコードは保存しないことをおすすめします。

fiddlemetaのところに、タイトルや、説明文を書くこともできます。
タイトルを記入すると、public fiddleという扱いになって、他のユーザーからfiddleを探しやすい状態になります。

ちなみに、Public設定になっていなくても、URLがわかればコードを表示することができます。

ソースコードをアップデートしたい場合は、updateを押すと、updateされます。
また、新しくurlが発行されます。/1/というUrlが発行されました。
また、変更して、updateすると、 /1/というUrlが発行されました。

このURLを、控えておくのが面倒という方は、このsign in > sign upからユーザー登録を行って、ログインすると、一覧で管理できるようになります。

無料で利用できるので、使いたい方は使って頂いてもよいと思いますが、コースの学習を進めるにあたって、ユーザー登録は必須ではありません。

ログインした状態にして、画面右上の、アイコンをクリック、
All your fiddlesをクリックすると、保存したソースコードの一覧を確認することができます。

your public fiddleをクリックすると、Public設定になっているものが一覧表示されます。

あと、Forkを使うと
今あるコードの複製を作って、複製後のコードに手を加えていくことができます。
新しいURLが発行されます。

Tidy （タイディ）ボタンをクリックすると、コードフォーマットが整形されて見やすくなります。

おわりに

この記事では、補足説明としてjsFiddle ソースコードの保存について紹介いたしました。

はじめてのVue.js 3 入門！jQuery を使わないウェブ開発 - 導入からアプリケーション開発まで体系的に学ぶはじめてのVue.js 3 入門！jQuery を使わないウェブ開発 - 導入からアプリケーション開発まで体系的に学ぶ中村 祐太 Yuta Nakamura, Proglus （プログラス）Angular.js、React.jsに比べて学習コストが低い注目度抜群のJavaScriptフレームワーク Vue.js！高度化するWeb開発のフロントエンド開発の課題を解決。 4.1 (3647 ratings)122 lectures, 5 hours

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


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

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

今すぐ詳細を確認する