1. TOP
  2. Spearly CMS
  3. チュートリアル
  4. 自分のPCでWEBサイトを作成・編集する準備をしよう

自分のPCでWEBサイトを作成・編集する準備をしよう

SpearlyCMSで作成したコンテンツを、WEBサイトに埋め込んでいきましょう。

この章では、自分のPCでチュートリアル用のWEBサイトのデータを作成、編集するための、テキストエディタとブラウザを用意していきます。

すでに簡単なHTMLを編集する準備の整っている方は、この章を飛ばし、次の「プロジェクトを作成しよう」へ進みましょう。

タグ埋め込み動作確認用の準備を行う

WEB開発を行う際に必要なのは主にブラウザとコードエディターです。
このチュートリアルでは、テキストエディタの「Visual Studio Code」の準備をしていきます。

テキストエディタを準備する

テキストエディタには様々な種類のものがあります。
今回は初心者でも扱いやすい「Visual Studio Code」を紹介します。

VScodeを公式サイトからダウンロードする

「Visual Studio Code(通称: VSCode)」は、マイクロソフト社の開発したコードエディタです。初心者から上級者まで幅広く利用することができます。

VScodeの公式サイトにアクセスし、「Download」のボタンをクリックし、ダウンロードを開始してください

ダウンロードフォルダを開き、zipファイルがダウンロードされていることを確認します。

VScodeをインストールする

ダウンロードしたVScodeのzipファイルをダブルクリックして解凍します
展開されたVScodeのアイコンのファイルをダブルクリックし、VSCodeを開きましょう。
しばらくすると、VScodeの画面が開かれます。
これでVSCodeのインストールは完了です。

VSCodeの簡単なセットアップ

インストールしたばかりだと、日本語でなかったり不便ですので、初心者に向けて簡単な使い方とセットアップの説明をします。

VSCodeはオープンソースのため、詳しい設定やより良い方法が常に更新されます。
また、テキストエディタはVSCode以外にも種類がありますので、詳細についてはご自分で検索されることをお勧めします。

以下のチュートリアルは簡単な説明にとどめますことをご了承ください。

ファイルを開く

一例として、デスクトップに作成したプロジェクトフォルダをVSCodeで開きます。
デスクトップにフォルダを新規作成しましょう。

VSCodeのFile > Openから開きたいファイルを選択します。
先ほどデスクトップに作成したフォルダを選択しましょう。
これでファイルをVSCodeで開くことができました。
試しにindex.htmlを作成してみましょう。
  1. 新規ファイル作成ボタンをクリックし、index.htmlという名前にします。

    デスクトップのフォルダを開くと作成されていることが確認できますね。
  2. index.htmlにHelloWorldと書きましょう。
  3. それでは作成したindex.htmlをブラウザで表示させてみましょう。今回はVScodeのプラグインである「Live Server」を使用していきたいと思います。
  4. VScodeの左メニューある拡張機能アイコンを選択します。
    拡張機能検索窓に「Live Server」と入力して検索し、プラグインをダウンロードします。
  5. インストールが完了すると以下のような画面になります。
  6. プラグインが有効になると画面の右下に「Go Live」というボタンが表示されます。このボタンをクリックするとWebブラウザが立ち上がり、現在開いているファイルをWebブラウザで表示させることができます。
    また、開きたいファイルを右クリックして「Open with Live Server」を選択することでも立ち上げることができます。
  7. では実際にやってみましょう。
    開きたいファイルの「Go Live」を押します。
    すると以下の画像のように表示ができました。
    このようにして目的のファイルをWebサイト上で表示することができます

ターミナルウインドウを開く

Web制作をしていると、Gitなどコマンドラインツールとしてターミナルを用いることがあります。

VSCodeはターミナルウインドウを表示する機能がありますので、こちらも説明しておきます。
  1. VSCodeを開き、上部メニューの「Terminal > New Terminal」をクリックします。
  2. これでターミナルを開けました。
pwdで現在のディレクトリを確認できたり、cdでディレクトリ移動など、ターミナルにコマンドを打つことでファイル操作を行うことができます。
➜  Desktop pwd
/Users/{ユーザー名}/Desktop
➜  Desktop cd SpearlyCMStutorial
➜  SpearlyCMStutorial pwd
/Users/{ユーザー名}/Desktop/SpearlyCMStutorial
➜  SpearlyCMStutorial
SpearlyCLOUDでGitHubと連携させて利用される場合は、ターミナルからGit操作を行います。

日本語にする

VSCodeを日本語にする拡張機能をインストールします。
VSCodeの左側のサイドメニューの「Extensions」をクリックします。
拡張機能の検索欄が出ますので、そこに「Japanese」と入力し、お好きな拡張機能を選び、「install」を押します。
画像は、Microsftが提供している「Japanese Language Pack for Visual Studio Code」をインストールしたときのものです。
これで日本語の拡張機能が追加できました。

テキストエディタの用意ができたら早速SpearlyCMSで作成したコンテンツをWEBサイトに埋め込んでいきましょう！
「プロジェクトを作成する」へ


最終更新日: