2021-12-20

シムズ4でBTSのアバターを作って楽しむ ②ゲーム導入編

The Sims 4 BTS

前回のPC購入編に引き続き、この記事ではゲームの購入～インストールまでを記事にまとめていきます。

各項目の所要時間は以下の通りです。

シムズ4 購入約5分
Origin ダウンロード約5～20分
シムズ4 ダウンロード約20～50分

ゲームの容量が18GBもあるので、お使いのPCのスペックによりますがダウンロードするのにとても時間がかかります…。

しかも「Origin」とは何ぞやって感じですが、これはプラットフォームといって、「あつまれ動物の森」でいうところのSwitchみたいな関係にあたるものです。

つまりシムズ4をダウンロードするためには避けて通れないのです…。

またシムズ4をダウンロードしてからも、Originにサインインしてからシムズ4を起動するようになるので、アンインストールしたりしちゃだめですよ。

それでは、各項目について解説していきたいと思います。

シムズ4購入する前に
シムズ4の価格
シムズ4 購入時の支払い方法
Step1 シムズ４を購入する
- ①ダウンロード画面へ
- ②サインイン or アカウント作成
Step2 Originをダウンロードする
Step3 シムズ4をダウンロードする

シムズ4購入する前に

公式からPCの動作環境について案内が出ています。

「せっかくゲームを購入したのにうちのPCじゃ動かなかった！！」なんてならないように以下を必ずご確認ください。

▼シムズ4でBTSのアバターを作って楽しむ①PC準備編

haolog.hatenablog.com

シムズ4の価格

一番はじめに皆さんが一番気になっているであろうシムズ4の購入価格についてです。

通常価格は4000～5000円程度してしまうのですが。。。なんと現在は年末セールでスタンダード版は513円、デラックス版は648円で購入することができます✨

2023年現在、無料で購入することができるようになりました✨

▼ちなみにスタンダード版とデラックス版とで2種類ありますが、違いはこのようになっています。

筆者はスタンダード版を購入していますが、正直これで十分遊べています！(笑)

ただ100円程度しか違いませんので、データ量が多くなることさえ気にならなければどちらを購入してもいいんではないでしょうか。

ここではスタンダード版の購入方法を紹介していきますが、恐らくどちらも手順はどちらも同じだと思います。

シムズ4 購入時の支払い方法

対応している支払い方法はこの4つです。

クレジットカード
コンビニ/PAY-EASY
PayPal
UNIONPAY

コンビニも対応しているのはありがたいですね！

Step1 シムズ４を購入する

ではシムズ4の購入ダウンロード方法について記載していきます。

①ダウンロード画面へ

シムズ4は以下のリンク先からダウンロードすることができます。

「The Sims™ 4」 - ダウンロード無料 - Electronic Arts

②サインイン or アカウント作成

購入ダウンロードにはゲーム制作会社のEAアカウントに登録が必要です。

サインインの画面が出てきたら、すでに作成済みの人はそのままサインインします。

アカウントがない人は画面上部の「アカウント作成」を押し、画面の内容に従って進んでいってください。

認証コードを入力して、以下の画面が出てきたらアカウントの作成は完了しましたので、「始めよう」を押して次に進みましょう！

Step2 Originをダウンロードする

次はOriginをダウンロードしていきます(所与時間約5～20分)。

お使いのPCに合わせてWinかMacかを選択し「ダウンロード」を押してください。

▼このような画面が出てきたら「保存」を押します。

▼続けて画面の右下にこんなのが出てくると思いますので、「OriginThinSetup.exe」の文字をクリックします。

Originのインストール画面が出てくると思いますので、案内に従って進んでいってください。

残念ながら筆者はすでにダウンロードしてしまっているので、割愛させていただきます…。

Step3 シムズ4をダウンロードする

最後にシムズ4をダウンロードしていきます(所要時間約20～50分)。

①Originにサインインする

Originを起動するとサインイン画面が出てくると思いますので、購入した時のアカウントでサインインしてください。

②シムズを選ぶ

次に「ゲームライブラリ」を開き、シムズ4の画像をクリックします。

③シムズをダウンロードする

次に、下の画面で「キューに追加」か「今すぐダウンロード」というボタンが出てると思いますので、それを押して案内通りに進んでください。

(筆者はすでにインストール済みなので「プレイ」と表示されています)

▲この画面の通りに「プレイ」と表示されれば、シムズ4で遊ぶことができるようになっています。

いかがでしたでしょうか？

シムズ4ダウンロードが完了したら、次は私が制作したBTSシムのダウンロード準備です。

BTSシムのダウンロードの準備については次の記事で解説していきたいと思います。

最後までお読みいただきありがとうございました。

haolog.hatenablog.com

2021-12-19

シムズ4でBTSのアバターを作って楽しむ ①PC準備編

The Sims 4 BTS

シムズ4（The Sims 4）とは、アバターを自作したり、家を建築したりしてその世界の中で遊べるPCゲームのことです。

かなり細かく作り込めるので、筆者もこんな感じでBTSメンバーのアバターを作成してみました（かなり似ているんじゃないでしょうか…！）

https://twitter.com/VJHMJK/status/1464203719055081480
▲こちらのシムは皆さんもダウンロードできるようにしますので、少々お待ちくださいね

私が思うシムズの魅力はこの3点です！

約500円で買切りできちゃう
追加アイテムは無料でDLできる
ゲームの自由度がかなり高い

シムズ4のPC版は現在500円無料で購入ができます。

また、追加したいアイテムは自作してる作家さんたちから無料でダウンロードできることが殆ど。

なので最初に払ってしまえば後は無料で遊び放題なんです✨

しかも、男性のシムに女性用の服を着せたり、同性シム同士で結婚させたりすることができ、自分の思うままに世界を作り込めるのも大きな魅力だと思います。

ここまでで興味が湧いて来た人もいるのではないでしょうか？

そんな方のために当サイトで、シムズ4をプレイするために必要な手順をまとめていきたいと思っています。

（そして筆者はあわよくばシムズ友達を作りたい）

この記事では主にシムズ4をダウンロードするために必要なPCの準備についてまとめました。

シムズ4をプレイするのに必要なもの
PCの準備
- Windows PCの推奨スペック
- Mac PCの推奨スペック
これからPCを買う予定の方
すでにPCをお持ちの方
- Windows PCのスペックを確認する
- Mac PCのスペックを確認する
  - ①OS／プロセッサ／グラフィックス／メモリを確認する
  - ②ストレージを確認する

シムズ4をプレイするのに必要なもの

シムズ4をプレイするために必要なものはこの1つです。

PC（パソコン）
インターネットにつながる環境

①のPCは、後ほど説明する最低限必要なスペックを満たすPCならデスクトップPCでもノートPCでもOKです。

②については、この記事を見れている時点で特に問題ないと思いますが、ゲームのダウンロード時にかなり重いデータのやり取りがありますので、ポケットWi-Fiとかは注意が必要です。

その他に、ゲームの中の世界を拡張していくのにPC操作の知識が少々必要になりますが、このサイトでも解説していきますので一緒に覚えましょう！

PCの準備

シムズ4をプレイするためにはPCが必要です。

しかしPCであれば何でも良いというわけではなく、性能が低いPCでゲームをしようとすれば、映像がカクカクになってしまったり、ゲームが全く動かないということになってしまいます。

例えばケータイもそうですよね。YouTubeなんかを一昔前のガラケーで見ようとしたら画質も悪いし、動画もカクカクになってしまうと思います。

そのため、シムズ4公式サイトでも「最低限この条件を満たしたPCを用意してくださいね～」というのが紹介されています。

しかし、上記２つはあくまでも最低限の条件なので、「まあこれだけの性能を揃えたPCなら動作は保証するよ」という意味です。

「快適にゲームがしたいならこれが推奨だよ」ということで、推奨しているスペックが別途以下のリンク先で紹介されています。

以下に推奨スペックをまとめてみました。

Windows PCの推奨スペック

OS	64ビット Windows 7、 Windows 8、 Windows 8.1、 Windows 10
CPU(プロセッサ)	Intel core i5 以上、 AMD Athlon X4 以上
メモリ	4GB RAM 以上
GPU(グラフィックス)	NVIDIA GTX 650 以上
ディスク容量	18GB以上の空き容量

Mac PCの推奨スペック

OS	Mac OS® X 10.11 以降
CPU(プロセッサ)	Intel Core i5 以上
GPU(ビデオカード)	NVIDIA GeForce GTX 680 以上、 AMD Radeon RX 560 以上
メモリ	8GB 以上
ストレージ	18GB以上の空き容量

「プロセッサ」や「グラフィックス」なんて聞き慣れない方も多いですよね💦

そう思いまして下記に『これからPCを買う方』と『すでにPCをお持ちの方』とで、それぞれのパターンに合わせて準備方法を記載しました。

ご参考にしていただければ幸いです。

これからPCを買う予定の方

これからPCを買う予定の方は、以下を手順で購入するのがおすすめです。

家電量販店のPC売り場に行く
店員さんに「このスペックを満たすＰＣが欲しいんですけど」と先ほどの条件を見せて探してもらう
PCの機種と店頭価格をメモって一旦帰る
公式通販サイトやAmazonなどと価格を比較して、欲しいとこで買う

PCに詳しくないし、自分で調べるのは面倒だという方は、店頭で買ってしまうのが一番楽だと思います。

ただ無駄なオプションを付けて高値で買わされる可能性に注意してください。

個人的にオプションは、最低限の保証とウイルスソフトと必要であればOfficeソフトが付いてこればいいかなと思います。

金銭的に厳しいという方は、やっぱりネットで買うのが一番安いのでおすすめです。

でも安価なPCはその分すぐ壊れるという意味でもあるので、故障時の保証はちゃんとつけましょう。

筆者はDELLの通販で15万円くらいのゲーミングノートPCを購入したんですが、1年ほどで故障しました(笑)

でも4年間の保証をつけていたので無償で修理してもらえましたよ😊

すでにPCをお持ちの方

すでにPCをお持ち方は、PCのスペックが先ほどの推奨スペックを満たしているか確認していきます。

WindowsとMacとでスペックの確認方法が異なりますので、それぞれ解説していきます。

Windows PCのスペックを確認する

まずは先ほどのおさらいとして、Windows PCでシムズ4をプレイするための推奨のスペックを見てみましょう。

OS	64ビット Windows 7、 Windows 8、 Windows 8.1、 Windows 10
CPU(プロセッサ)	Intel core i5 以上、 AMD Athlon X4 以上
メモリ	4GB RAM 以上
GPU(グラフィックス)	NVIDIA GTX 650 以上
ディスク容量	18GB以上の空き容量

それでは ①OS／CPU／メモリ、②GPU、③ディスク容量の順番で、お持ちのWindows PCのスペックを確認していきます。

①OS／プロセッサ／メモリを確認する

OSは、バージョンが「Windows 7以降」で尚且つ「64ビット対応」であるかを確認します。

CPU(プロセッサ)は、簡単に言うとPCの脳みそのことです。殆どのPCはIntel Core ～という製品が積まれていて、このIntel Coreに続く数字がi3、i5、i7、i9と大きくになるに連れて頭の回転が速いということになります。今回は推奨スペックである「i5」以上であるかを確認します。（もしAMD Athlonの人がいたら私のTwitterへ…）

メモリは、よく作業スペースに例えられます。数字が大きければ大きいほど作業スペースが広い、つまり高性能ということで、今は8GBがスタンダードです。今回は推奨スペックである「4GB」以上であるかを確認します。

以下の手順で確認することができます。

キーボードのWindowsロゴキーとRキーを同時に押す
出てきた画面で「dxdiag」と入力して、OKを押す

▼筆者はこのような画面が出てきました。

▼表にまとめるとこんな感じ。

	推奨スペック	筆者PCのスペック
OS	64ビット Windows 7、 Windows 8、 Windows 8.1、 Windows 10	64ビット Windows 11
CPU(プロセッサ)	Intel core i5 以上、 AMD Athlon X4 以上	Intel Core i7
メモリ	4GB RAM 以上	16384MB RAM （16.384GB）

OSのバージョンは非推奨ですが、プロセッサ、メモリは推奨のスペックを満たしていることがわかりますね。

②グラフィックスを確認する

次にグラフィックスが「NVIDIA GTX 650 以上」であるかを確認していきます。

グラフィックス(ビデオカード)は、映像処理の分野における脳みそのことです。プロセッサと違って製品名が沢山あるので、一概に数字が大きければ良いというわけではありません。どの製品が優れているのか比較している専門サイトがあるので、それを参考にお持ちのPCが推奨スペックより優れているかを確認します。

確認手順は、先ほどOSなどを確認した画面の「ディスプレイ」というタブを開くと確認することができます。

▼筆者はこのような画面が出てきました。

「NVIDIA GeForce GTX 1650」となっていますね。

それでは以下のサイトを参考にして、推奨スペックの「NVIDIA GTX 650 以上」以上の性能を持つか確認していきます。

GPU（グラフィックボード）性能比較表【2021年最新版】

各製品に対して性能値が書いてあると思いますが、この性能値は高ければ高いほど優れているということになります。

▼推奨スペックのNVIDIA GTX 650の性能値は「541」となっています。

▲筆者PCのNVIDIA GeForce GTX 1650の性能値は「3428」となっているので、推奨スペックを満たしていることがわかりますね。

③ディスク容量を確認する

最後にディスク容量に「18GB以上の空き容量」があるかを確認していきます。

富士通さんのサイトでOSのバージョンごとに確認手順の記載されていたので、ご参考ください。

富士通Q＆A｜ハードディスクの容量を確認する方法

▼筆者のPCではこのような画像が出てきました。

18GB以上の空き容量があることがわかりますね！(筆者のPCはディスクを2つ積んでいるので2個表示があります)

Windows PCのスペック確認は以上で完了です！

Mac PCのスペックを確認する

まずは先ほどのおさらいとして、Mac PCでシムズ4をプレイするための推奨スペックを見てみましょう。

OS	Mac OS® X 10.11 以降
CPU(プロセッサ)	Intel Core i5 以上
GPU(ビデオカード)	NVIDIA GeForce GTX 680 以上、 AMD Radeon RX 560 以上
メモリ	8GB 以上
ストレージ	18GB以上の空き容量

それでは ①OS／プロセッサ／グラフィックス／メモリ、②ストレージの順番で、あなた様がお持ちのMac PCのスペックを確認していきます。

①OS／プロセッサ／グラフィックス／メモリを確認する

・OSは、バージョンが「10.11 以降」であるかを確認します。

・CPU(プロセッサ)は、簡単に言うとPCの脳みそのことです。殆どのPCはIntel Core ～という製品が積まれていて、このIntel Coreに続く数字がi3、i5、i7、i9と大きくになるに連れて頭の回転が速いということになります。今回は推奨スペックである「i5」以上であるかを確認します。

・GPU(ビデオカード)は、映像処理の分野における脳みそのことです。プロセッサと違って製品名が沢山あるので、一概に数字が大きければ良いというわけではありません。どの製品が優れているのか比較している専門サイトがあるので、それを参考にお持ちのPCが推奨スペックより優れているかを確認します。

・メモリは、よく作業スペースに例えられます。数字が大きければ大きいほど作業スペースが広い、つまり高性能ということで、今は8GBがスタンダードです。今回は推奨スペックである「8GB」以上であるかを確認します。

確認手順については、Apple公式サイトで丁寧に解説されていましたので以下をご参照ください。

Apple｜Mac のシステム情報について

▼Apple公式サイトの画像を参考にすると、以下のことがわかりますね。

▼表にまとめるとこんな感じ。

	推奨スペック	参考画像のスペック
OS	Mac OS® X 10.11 以降	11.0.1
CPU(プロセッサ)	Intel Core i5 以上	Intel Core i9
GPU(ビデオカード)	NVIDIA GeForce GTX 680 以上、 AMD Radeon RX 560 以上	AMD Radeon Pro 5500M 4GB
メモリ	8GB 以上	32GB

OS、CPU、メモリは推奨のスペックを満たしていることが簡単にわかりますね。

GPUの見方に付いては以下のサイトを参考にします。

GPU（グラフィックボード）性能比較表【2021年最新版】

各製品に対して性能値が書いてあると思いますが、この性能値は高ければ高いほど優れているということになります。

では「Radeon Pro 5500M 4GB」と推奨スペック「Radeon RX 560」の性能値を比較してみましょう。

▼推奨スペックのAMD Radeon RX 560の性能値は「1866」となっています。

▲参考画像のAMD Radeon Pro 5500M 4GBの性能値は「3426」となっているので、条件を満たしていることがわかりますね。

②ストレージを確認する

最後はストレージに18GB以上の空きがあるかを確認します。

ストレージの確認方法はApple公式サイトで丁寧に解説されていましたので以下をご参照ください。

Apple｜Mac ストレージの空き領域を増やす

▼Apple公式サイトの画像を参考にすると、「402.19GB利用可能」となっているので推奨スペックの「18GB以上」を満たしていることがわかりますね。

いかがでしたでしょうか？

PCの準備ができたら、次はシムズ４の購入です。

購入方法については次の記事で解説していきます。

haolog.hatenablog.com

2021-11-12

開発メモ：編集中のPHP・CSSをブラウザで自動更新する方法

この記事ではLocal by Flywheelで構築したWordPressサイトのテーマファイル（PHP・CSSファイル）を、Browser SyncとGulpをインストールして、ブラウザ上でリアルタイムプレビューする方法について記載していきます。

Browser Syncの最大のメリットは、例え開発環境がWindowsであっても、iPhoneさえあればSafari上でのウェブページ表示を確認できることです。

しかし、Browser SyncだけではPHPファイルを表示することができないので、今回はGulpもインストールして設定していく必要があります。

導入に必要な手順は次の４Stepです。

WP用のテーマファイル格納場所の把握
Node.jsをインストール
Browser Syncをインストール
Gulpをインストール

※VS Codeがインストール済であること、Local by FlywheelでWPサイト構築済みであることを前提としています。

では４Stepについて簡単に解説していきたいと思います。

WP用のテーマファイル格納場所の把握

Local by Flywheelで構築したWPサイトのテーマは、初期状態であれば下記のパス「themes」フォルダに保存されていると思います。

C:\Users\ユーザー名\Local Sites\サイト名\app\public\wp-content\themes

私の場合は「themes」フォルダの中に更に「mytheme」というフォルダを作って、こんな感じでテーマ用のファイルを配置しました。

themes
┗mytheme
　┣index.php
　┗style.css

最終的には「themes」のフォルダ内に、「package.json」と「gulpfile.js」を配置していきます。

themes
┣gulpfile.js
┣package.json
┗mytheme
　┣index.php
　┗style.css

Node.jsのインストール

Node.jsのインストール方法については、Progateさんのページでかなり丁寧に解説してくださっていますので、そちらをご参考ください。

https://prog-8.com/docs/nodejs-env-win

Gulpのインストール

Gulpのインストールについては下記を参考にしました。

【gulp4】gulpとはなにか? 環境構築してみよう windows10版 | shuu11 code

しかし手順がかなりざっくりで、初心者には厳しいものがあったので、改めて解説します。

まずはコマンドプロンプト上で、下記コマンドで先ほどの「themes」フォルダまで移動します。

cd C:\Users\ユーザー名\"Local Sites"\サイト名\app\public\wp-content\themes

※cdとはコマンドを実行したいフォルダまで移動するためのコマンド

※ユーザー名とサイト名は設定によって異なります

※Local Sitesを""で括るのを忘れずに！

次に下記のコマンドを実行してください。「themes」フォルダ内に「package.json」ファイルが生成されます。

npm init -y

次に下記のコマンドでGulp CLIとGulpをインストールします。

npm install gulp-cli gulp -D

次に下記のコマンドでGulpが正常にインストールされているか確認します。

npx gulp -v

バージョンが表示されれば問題ありません。

次に下記のコマンドで、「themes」フォルダ内に「gulpfile.js」を生成します。

npx -p touch nodetouch gulpfile.js

次に生成した「gulpfile.js」をテキストエディタで開き、下記の内容をコピペして保存します。

//----------------------------------------------------------------------
//  モード
//----------------------------------------------------------------------
"use strict";

//----------------------------------------------------------------------
//  モジュール読み込み
//----------------------------------------------------------------------
const gulp = require("gulp");
const { src, dest, series, parallel, watch, tree } = require("gulp");

const bs = require("browser-sync");

//----------------------------------------------------------------------
//  関数定義
//----------------------------------------------------------------------
function browserSync(done) {
  bs({
    files:["./mytheme/**","./mytheme/*.css"],    // 指定した値が変更されるとブラウザをリロードする
    proxy : "サイト名.local", 
    port : 3000,    // browsersyncサーバが使うポート番号を変更できる
    notify: false,     // ブラウザ更新時に出てくる通知を非表示にする
    open: "external",    // ローカルIPアドレスでサーバを立ち上げる
  });

  done();
}

//----------------------------------------------------------------------
//  タスク定義
//----------------------------------------------------------------------
exports.bs = series(browserSync);

/************************************************************************/
/*  END OF FILE                                                         */
/************************************************************************/

files:では、どこのフォルダの何というファイルをブラウザで読み込むか？というのを指定しています。

通常であればfiles:"./src/**"という記述だけで動くはずですが、私の場合は何故かCSSファイルの変更を読み込んでくれなかったので、"./mytheme/*.css"と追記しています。