Udemy

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

2019-06-04 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（プログラス）でプログラミングを学んで、創れる人になろう！

ベータ版として提供期間中のため、期間限定・人数限定にて通常は有料のコンテンツを特別に無料でお試し頂けます。

今すぐ詳細を確認する

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

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

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

準備

npmのインストール

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

Windows版

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

macOS版

制作中

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

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

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

ディレクトリの作成

mkdir nuxt-projects

1	mkdir nuxt-projects

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

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

cd nuxt-projects

1	cd nuxt-projects

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

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

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

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

npx create-nuxt-app hello

1	npx create-nuxt-app hello

と入力してエンターキー

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

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

プロジェクト名

? Project name (hello)

1	? Project name (hello)

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

プロジェクトの説明

? Project description (My scrumtrulescent Nuxt.js project)

1	? Project description (My scrumtrulescent Nuxt.js project)

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

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

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

? 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>

? 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)

? 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

? Use a custom test framework (Use arrow keys)

❯ none

jest

ava

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

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

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

? Choose rendering mode (Use arrow keys)

❯ Universal

Single Page App

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

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

作者の名前の設定

? Author name (naka)

1	? Author name (naka)

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

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

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

? Choose a package manager (Use arrow keys)

❯ npm

yarn

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

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

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

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

プロジェクトの実行

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

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

cd hello

cd hello

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

npm run dev

1	npm run dev

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

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

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

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

おわりに

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

オンライン動画を使って学習する

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

ベータ版として提供期間中のため、期間限定・人数限定にて通常は有料のコンテンツを特別に無料でお試し頂けます。

今すぐ詳細を確認する

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

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

Node.jsとnpmをWindowsにインストールする方法について学習します。

Node.jsとは？

Node.js（ノードジェイエス）というのは、ざっくり言ってしまうと、サーバ側で動作するプログラムをJavaScriptで書くために使う技術です。

npmとは？

npm（ネヌピーエム）というのは、Node Package Managerの略で、node.jsのモジュールを管理するツールです。

Rubyでいうところのgemとか、LinuxのCentOSでいうところのyum に相当するようなイメージです。

補足として、モジュールというのは、ざっくり言うと、Node.jsで使える便利なソフトウェアの塊のことです。

node.jsとnpmのインストール

Node.jsをインストールすると、一緒にnpmもインストールされます。
Windowsで使える、Node.jsのインストーラーをダウンロードして、インストールを行います。

node.jsのダウンロード

Node.jsの公式サイト（日本語）のダウンロードページをWebブラウザで開きます。
ダウンロード | Node.js

LTSと表示されているバージョンをダウンロードします。
お使いのパソコンに合わせて、32bit版か64bit版を選択してください。
Windows10で32bit版か64bit版かを確認したい

補足として、LTSはLong Term Support、日本語でいうと長期サポート版のことです。
ざっくりいうと、長い期間メンテナンスされることが計画されているバージョンのことです。

基本的には、LTSの最新バージョンをインストールすることを推奨します。
しかしながら、バージョンによって動作が変わるケースが無いとは言えないので、
ここでは、node.js10.16.0、npm 6.9.0をインストールしていることを、共有しておきます。バージョンによる問題が発生した場合は、説明に使ったバージョンを使うことが学習を進める上で有効な場合があります。