StarFree(スターフリー)サーバー開設〜データアップロードまで。

## Netowlに登録
まずは以下のサイトに行き会員登録を済ませましょう。
[SterServer](https://www.star.ne.jp/)

![スクリーンショット 2021-01-31 0.39.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/a33efdd2-f384-0471-c0fa-74d3fee765d6.png)

右上の「会員登録」から、「Netowl」のログインフォームに飛びます。

![スクリーンショット 2021-01-31 0.40.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/d691ea98-b2be-a01c-262e-17235d21e326.png)

中盤あたり、「新規会員登録」を、押し登録を開始します。
ここからは、流れにそって登録をしましょう。（説明は割愛します）

※注意点として、<font color="red">**以下をメモしておきましょう。**</font>

・ネットオウルID
・ニックネーム
・パスワード

ちなみに覚えやすい様に、「ネットオウルID」と「ニックネーム」は同じものを登録してもOKです。

## ログイン〜無料サーバー開設
ここからが本題です。「ネットオウル」の登録が終わったら、「スターフリーサーバー」を開設します。ただしこれが上手いことUI設計されていて、すぐに辿り着いけないようになってます。では。

### ログイン
一旦、トップページ戻ります。
[SterServer](https://www.star.ne.jp/)

![スクリーンショット 2021-01-31 1.03.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/1761e3e8-cce1-78ef-c980-d5e8adf90f02.png)

そしたら、ページの<font color="red">**フッター**</font>までスクロールしましょう。
そこに<font color="red">**「無料レンタルサーバー」**</font>と表記があるはずです。超いじわるですね・・・。ここをクリックします。

そうすると以下の様な、ページに飛びます。
タイトルには「StarServer<font color="red">**Free**</font>」とありますね？

![スクリーンショット 2021-01-31 1.04.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/438b977d-6c21-a3a8-cffe-a6faadf636e8.png)

メインビジュアル部分の「今すぐ始める」をクリックしましょう。

![スクリーンショット 2021-01-31 0.50.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/f364d31e-2e2e-195c-03ba-c407e49d1074.png)

ログインを求められたら、「Netowl」に登録したアドレスとパスでログインします。
すると以下の様な画面になります。

![スクリーンショット 2021-01-31 0.50.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/46d4fa99-eb6f-14fa-31cd-e3ba1016e929.png)

３つの簡単な説明として、

・左：HTML/CSS/JSのアプリが動きます。バックエンド、つまりデータベース関連の<font color="red">**PHP・MySQLは使用不可**</font>

・真ん中：上記と同じ。ただ容量が大きいだけ。

・右：HTML/CSS/JS/PHP/MySQLが使えます。ここもいじわるなところですが、明記はありませんが、おそらく<font color="red">**Wordpressも使えます。**</font>

とりあえず今回は、HTML用に「左」、PHP(Wordpress)用に「右」を用意すればOKです。
まずは<font color="red">**「左」**</font>から。

#### HTML用サーバの開設

フリーの「お申し込み」をクリックしましょう。
すると以下の様な画面に飛びます。

![スクリーンショット 2021-01-31 0.51.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/613097c8-9fe2-25ad-adef-fb5fd16364f0.png)

「ドメイン」を入力します。
※注意点として、<font color="red">**同じドメインは作成出来ません。**</font>このあとWordpress用のドメインを取得するので、<font color="red">**使用頻度が高い方をわかりやすいドメイン**</font>にする方が後々管理が楽です。

例として、ここで「testserver<font color="red">**2**</font>」としておくことで、Wordpress用サーバーの方で、「testserver」というドメインが使用できます。自分の管理しやすい方法でドメイン設定しましょう。

![スクリーンショット 2021-01-31 0.58.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/7052f77b-42ae-9dfc-b531-7f54e41f3f30.png)

ドメインが決まったら、「利用規約に同意する」をチェックし、「確認画面」を押します。
そして、<font color="red">**いじわるシリーズ第３弾です。**</font>

![スクリーンショット 2021-01-31 0.54.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/0a6a74f4-1fdb-fd61-e749-716af3bf7e1a.png)

「選択したプランで申し込む」を押します。<font color="red">**赤いボタンを押すと有料会員になってしまいます。**</font>注意しましょう。

![スクリーンショット 2021-01-31 0.54.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/5648c2e8-cbd5-9edc-6eae-1acad29218d9.png)

この画面が出ればOKです。続いてWordpress用も開設します。

#### Wordpress用サーバの開設

![スクリーンショット 2021-01-31 0.49.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/512e59b8-5172-82fa-8215-bff2423fbd4a.png)

一旦この画面に行って、「今すぐ始める」を押します。（ログイン画面が出たら、ログインしましょう）

![スクリーンショット 2021-01-31 0.50.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/1f97b6cf-7e99-bee3-edc5-abace9399f4f.png)

この画面で「フリー PHP/MySQL」の「お申し込み」を押します。

![スクリーンショット 2021-01-31 0.58.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/573a76fa-82c6-0be4-b7ac-e8f6df157eab.png)

あとは先程同様、「ドメイン」を入力し、「利用規約に同意」、「確認画面」を押します。

![スクリーンショット 2021-01-31 1.00.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/fba4959a-5154-4de2-f612-322d888e9f73.png)

ここも同様、「選択したプランで申し込む」を押します。

![スクリーンショット 2021-01-31 1.01.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/21ab6cea-51ba-4ffe-731e-36a6b86c5928.png)

この画面が出たらOKです。<font color="red">**開設まで最大２４時間かかる**</font>みたいなので、開設中ということを確認したら、一旦放置しましょう。

#### 契約状況の確認

直接管理画面にジャンプしても良いのですが、どうせみんなログイン方法を忘れるので、今は頭からのログインに慣れましょう。おきまりの以下の画面に行きましょう。

![スクリーンショット 2021-01-31 1.04.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/415ce9eb-fc20-7d50-2402-5751ff939afd.png)

右上の「ログイン」を押します。

![スクリーンショット 2021-01-31 1.04.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/df4d22d1-96d0-1833-3c71-fce1adb84259.png)

これが、会員のページになります。
左側のナビゲーションから<font color="red">**「スターサーバー管理」**</font>を押します。（上記画面のちょうど切れてるところです）

そうすると以下の様な画面になります。

![スクリーンショット 2021-01-31 1.05.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/76c55774-d943-16c4-c63f-1ee92310a44f.png)

ここで、<font color="red">**いじわるシリーズ第４弾です。**</font>
強調がここだけ無いので、わかりずらいのですが、<font color="red">**「無料プラン管理」**</font>を押します。

ちなみに余談ですが、このUIを検証して見ると、ボタン高さが18px、フォントサイズが10pxで、「モバイル向けデザインガイドライン」をダブルで無視してるので、「流石にわざとだろうなぁ」と思いました。

![スクリーンショット 2021-01-31 1.05.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/e490f463-93e1-cb1c-0442-337bd893031a.png)

そうすると、この様に「HTML用サーバー」が「稼働中」、<font color="red">**「WordPress用サーバー」が「設定準備中」**</font>ということがわかります。

先ほども言った様に、WordPress用の開設には時間がかかるので、一旦放置しましょう。（寝ましょう。）
しばらくして以下の様になっていれば開設OKです。

![スクリーンショット 2021-01-31 12.33.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/cb9f21f1-a5ef-e1b0-fad9-17c64669a9c6.png)

## FTPの設定
最後にFTPの設定です。

FTPで接続するにあたり、必要な情報は以下になります。
・ドメイン
・ホスト名
・FTPパスワード

一応忘れないためにも、ログインから説明します。

### ログイン

![スクリーンショット 2021-01-31 13.56.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/2d432233-fb05-132b-774e-a80b5f44e13d.png)

この画面の右上より、「ログイン」を押します。
ログインフォームの入力を求められたら、入力しログインしましょう。
以下がログイン後の画面です。

![スクリーンショット 2021-01-31 13.57.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/6efad004-2488-f26c-6720-6285219cd801.png)

この画面の、左下「スターサーバー管理」を押します。

![スクリーンショット 2021-01-31 13.59.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/f4fd52fc-9dea-e6eb-2f92-656d48557ea0.png)

左側の小さい文字で、「無料プラン管理」があるので、押します。

![スクリーンショット 2021-01-31 14.01.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/40c35495-631c-c93f-4846-286901f7b606.png)

契約中のサーバーの一覧が見れます。
今回「フリー」プランのFTP設定をすることとして話を進めます。

### FTP設定
契約中のサーバーの一覧から、「フリー」の欄の<font color="red">**「サーバー管理ツール」**</font>を押しましょう。

![スクリーンショット 2021-01-31 13.45.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/78d98bed-3331-9d9f-b619-7dffcd8ad433.png)

アカウント情報の画面に飛ぶので、まずは<font color="red">**「サーバー情報」**</font>を押します。
飛んだ先で「サーバー基本情報」が見れます。<font color="red">**ホスト名**</font>をメモしましょう。(以下参照)

![スクリーンショット 2021-01-31 14.06.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/efbf2143-396e-47b8-365a-ceb1a8ee019f.png)

次に左側の欄から「FTPアカウント設定」を押します。

![スクリーンショット 2021-01-31 14.11.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/b89ff52f-d024-eac8-5dae-f81d400c4de9.png)

「対象ドメイン選択」と出ますので、一覧から<font color="red">**「選択」**</font>を押します。

![スクリーンショット 2021-01-31 14.11.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/aac13665-a72f-1417-7ce4-ca3063c0f10c.png)

今度は「FTPアカウント設定」と出ますので、FTPアカウント一覧から<font color="red">**「編集」**</font>を押します。

![スクリーンショット 2021-01-31 14.12.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/08484538-1fcc-30c5-ca57-5a79c0776dfc.png)

パスワードを入力する前に、<font color="red">**「FTPアカウントID」**</font>をメモ。(以下参照。)

![スクリーンショット 2021-01-31 14.12.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/8a8174d5-bb07-cb7e-67a2-2e3553e1452e.png)

メモ出来たら、「パスワード」を入力し、「確認画面」を押します。
※注意書きにもありますが、<font color="red">**ハイフン(-)、ドット(.)、カンマ(,)、をパスワードないに含めましょう。**</font>

![スクリーンショット 2021-01-31 14.13.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/993a05eb-28bd-f01e-62c1-e6d9d94b1341.png)

この画面が出たら、「確定する」を押します。
<font color="red">**忘れず、パスワードをメモしましょう。**</font>

これでFTPの設定は完了です。
ここまでの状態を確認します。
以下の３つの情報をメモ出来てますでしょうか？

・FTPホスト名
・FTPアカウントID
・FTPパスワード

## FTPログイン

`FileZila`を使用します。

起動したら、「ファイル」→「サイトマネージャー」の順でログイン画面を起動します。(以下参照)

![スクリーンショット 2021-01-31 14.29.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/44c57e12-3c07-c827-2b80-6d192d1c0eda.png)

<font color="red">**先程作成したメモを用意し**</font>、サイトマネージャーにて「新しいサイト」→「ホスト、ユーザー、パスワード」を入力→「接続」の順で進めます。(以下参照)

![スクリーンショット 2021-01-31 14.32.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/473f0118-7f72-5a10-659a-2f405d380b80.png)

以下の様に、ログインできれば成功です。あとは任意のファイルをアップロードしましょう。

![スクリーンショット 2021-01-31 14.39.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/c437a30a-070e-7d3b-89a5-ce854f1b4b9d.png)

おわりです。お疲れ様でした。