作成にはパソコン、デジカメなどが必要です。また、公開・運用するにはWEBサーバーやドメインが必要です。
WEBサイト制作、公開運用に必要な主なもの
⇒今回はパーソナルコンピューター、ブラウザ、テキストエディタ、FTPクライアントについて説明いたします。
パーソナルコンピューター
WEBサイト制作におけるパソコンの役割は以下の通りです。
それぞれ、詳細を解説します。
①WEBサイト制作をメインで行う
パソコンはWEBサイト制作には欠かせません。
WEBサイトはマークアップ言語で作られており、そのマークアップをテキストエディタで編集する為にパソコンを必要とします。テキストエディタを使わず、WORDPRESSといったCMSと呼ばれるツールでWEBサイトを作成する場合は、そのソフトウェアの動作・編集の為に必要になります。
またメールフォームなど、サーバー側の処理で使うphpや、アニメーションなどに使うJavascriptの編集にもテキストエディタを使います。
動画や写真を載せたい場合、その動画や写真の加工編集にもパソコンを必要とします。ロゴやアイコン、図やイラストの作成にもパソコンを利用します。
②WEBサーバーへのアップロード
また、WEBサイト作成後、WEBサーバーへアップロードするときにもパソコンを使います。パソコンからFTPソフトなどを使ってデータ転送する為です。WEBサーバーの設定もパソコンからログインして設定することになります。
③動作確認
WEBサイトは作ったらブラウザソフトでちゃんと表示されるのか、動くか動作確認など評価テストが必要です。その評価テストでもパソコンを使います。
どんなパソコンや環境が必要なの？
WEBサイト制作にはどのような環境、どのようなスペックのパソコンが相応しいのか？下記の項目について解説します。
①OSやスペック
パソコンのOSはMacでもWindowsでも作れます。以前はWEBサイト制作においてWindowsの方が、Google chromeをインストールできるなどの理由で優位でしたが今は、どちらもインストールできる為、差異はありません。
スペック（＝性能）について重要なことは快適に作業する為に必要なスペックのものを選ぶことです。記事中心でWEBサイト制作をするならテキストエディタやWORDPRESSといったCMSが動作する処理能力のもので構わないと思いますが、画像、動画編集等も行うのであれば、ソフトウェアが必要になります。ソフトウェアが要求するスペック以上のものを選び、快適に作業するにはそれ相応のワークメモリが多いものが必要でしょう。
記憶容量については、ECサイトや非常にたくさんの商品・サービスを掲載するようなページ数の多いサイト制作では容量の多いものを選ぶべきです。
自分の場合はWEB制作・編集等にMicrosoft Excelをよく使用します。ExcelなどのOfficeの要求スペックは低いですが、快適に作業するためにミドルスペックレベルのパソコンを使用しています。動画編集もするのでメインのワークメモリを4GByteから8GByteに増設しましたが、それでも快適とはいいがたいです。ちなみにExcelは、WEBサイト内での説明図を作ったり、グラフを作ることも簡単ですし、「htmlファイルで保存」を選択するとpng画像を容易に吐き出すことが出来る為、制作に大変便利で重宝しています。
(参考)Microsoft office2019 要求スペック
| CPU | 1.6 GHz、2 コア |
|---|---|
| メモリ | 4 GB (64 ビット)、2 GB (32 ビット) |
| OS（オペレーティング システム） | Windows 10 |
| ハードディスク | 4 GB の空きディスク領域 |
| 画面解像度 | 1280 x 768 の画面解像度 |
②インターネット接続環境
テキストエディタによる編集作業などの制作はオフライン、インターネット接続なしで作業できます。しかし、制作完了後、公開する為にWEBサーバーへのアップロード時にはインターネットへの接続が必要となります。また、テキストエディタ、画像編集ソフトなどのツールが必要となってきます。ツールをダウンロードする為にもインターネットに接続が必要となってきます。
セキュリティの為にも最新のパッチを適用した最新版のOSと、ウィルス対策ソフトが搭載したものを推奨いたします。
(参考)インターネット接続料金(戸建て) 毎月支払い料金一覧
価格.com調べ(2020年1月)
| 回線名 | 料金 | 速度 | 契約年数 |
|---|---|---|---|
| NURO 光 G2 V(戸建) | 平均3,448円/月 | 下り最大2Gbps | 2年 |
| ぷらら光 ホームタイプ | 平均5,885円/月 | 下り最大1Gbps | 3年 |
| So-net光 プラス(戸建) | 平均5,881円/月 | 下り最大1Gbps | 3年 |
OSのアップグレードは必ずチェック
インターネットに接続するパソコンは常に危険にさらされています。
私たちの世界には、インフルエンザなど目に見えないウィルスが存在しています。
また、あなたに不利益なことをもたらそうと考えている悪い人たちも存在します。
例えば外から帰ってきたらウィルスに感染しないように「うがいや手洗い」など感染を予防したり、ドアに施錠をしたりして防犯に努めます。
それと同じようにインターネット上にもウィルスやサイバー攻撃を企むものが存在します。
パソコンでは最新の更新プログラムの適用やウィルス専用ソフトにより、脆弱性をつくウィルスによる攻撃から守る必要があります。
Windowsは、発売してから最低5年間はメインストリームサポート、メインストリームサポート終了後最低5年間は延長サポートにより脆弱性からパソコンを守るセキュリティ更新プログラムが無償で受けられるようになっています。
WindowsのOSにはサポート期限がある
Windowsのセキュリティ更新プログラムの無償提供などを受けられるサポートには期限があります。主なWindowsのサポート期限については下記のようになっています。
(参考)メインストリームサポートと延長サポートの違い
サポートには2種類があります。 メインストリームサポートと延長サポートです。 メインストリームサポートは最低でも発売から5年間あり、メインストリームサポート終了後、最低5年間は延長サポートに入ります。 延長サポートでは脆弱性やバグの対応のみとなります。
◆メインストリームサポートで受けられること
◆延長サポートで受けられること
◆サポート終了後
（例外として一部企業などはサポートを受けられる）
Windowsのサポートが切れるとどうなるのか？
個人情報流出、情報の改ざん、破壊などの被害にあうリスクが高まります。 Windowsの延長サポート期限が切れると、マイクロソフト社からサポートされない状態になるので期限切れ以降に特にインターネットを介した作業で使用するのはよろしくありません。
なぜかというと、セキュリティ更新プログラムが提供されなくなることのリスクが非常に大きいからです。
最新のセキュリティパッチがあたらなくなるので、いわゆる脆弱性をついた攻撃(サイバー攻撃)に耐えられなくなります。 サイバー攻撃とは、ネットワークを通じて破壊活動やデータの窃取、改ざんなどを行うことです。 目的は国家や企業などの組織体の戦略変更やイメージダウン・株価操作などを狙う組織犯罪、産業スパイ活動などのことを言います。 更には、ハクティビストによる政治的・社会的な主張などがあります。
さらに不正アクセスによる個人情報の流出などがあります。 不正アクセスによって企業が保持する個人情報が数千、数万件と流出し被害が出るなどしています。 サイバー攻撃による世界の被害額は65兆円ともいわれています。 最近は病院などがターゲットとされており、患者のデータを塗り替えられ、手術が受けられないなど被害が出ています。
下記に全てがサイバー攻撃によるものではありませんが、個人情報漏洩による被害実例が一覧化されています。
参考までに。
https://cybersecurity-jp.com/leakage-of-personal-information
ではどんな対策をすればよいか？
下記4点を守りましょう。
＜サイバー攻撃への対策 4点＞
③ブラウザ
WEBサイトの利用者はパソコンやスマートフォンなど様々な端末やブラウザソフトを使って閲覧します。WEBサイトは例えば閲覧しているデバイスによってフォントが違ったりなど、ブラウザやデバイスによって表示誤差があります。また、ブラウザによってマークアップで使用したタグが対応していなかったりして、正常に表示されない場合もあります。
そのため様々な環境でも閲覧する方が滞りなく閲覧できるように、複数のブラウザによる動作、表示確認をする必要があります。厳密にもれなく動作確認をしたい場合はブラウザをインストールして動作確認することを推奨します。特に利用率の高い、Microsoft Edge、Apple Safari、Google Chromeなどは動作、表示確認が必要ですのでインストールしておきましょう。
(参考)代表的なブラウザ
Windows10での標準ブラウザ
OS：Windows10
https://www.microsoft.com/ja-jp/windows/microsoft-edge
MacOS/iOSの標準ブラウザ
OS：macOS/iOS
https://www.apple.com/jp/safari/
Googleが提供するブラウザ、Androidやipad、タブレットなど端末がない場合にも疑似的に環境を作り出せるので便利
OS：Windows/macOS/Android/iOS
https://www.google.co.jp/chrome/
Mozilla Foundationが提供するブラウザ
OS：Windows/macOS/Android/iOS
https://www.mozilla.org/ja/firefox/new/
ブラウザっていくつあるんだワン？
結局、WEBサイトを作ったときにどのブラウザで確認すればいいんだワン？
ニャン太老師ブラウザの全種類を確認するのは現実的ではないニャ。ブラウザもたくさんあるし、Ver等を含めると相当数あるニャ。
そこでシェア率の高い物で確認すべきニャ。
ブラウザのシェア率についてはこちらを参考にするだニャ。
参考：https://gs.statcounter.com/
④テキストエディタ
HTMLやCSS、phpやjavascriptといったファイル作成にテキストエディタは欠かせません。パソコンに標準インストールされている、Windowsのメモ帳やmacOSのテキストエディットでも十分ですが、便利で高機能なテキストエディタがありますので紹介します。
テキストエディタでWEB制作が効率的に編集できるようになるのでパソコンにインストールして使いましょう。
※ちなみにmacOSのテキストエディット.appでは、編集可能にするため細工が必要です。「開く」ダイアログにある「リッチテキストのコマンドを無視する」にチェックを入れます。これで、標準テキストの形式で開くことができます。
テキストエディタを使うメリット
⇒タグやコメントなどの部分は自動的に色分けしてくれるので分かりやすくなります。タグを間違った場合などもわかりやすくなるので便利です。
⇒HTMLのコードを途中まで書くと自動で入力候補を表示してくれます。早く入力完了しますし、うろ覚えでも表示してくれるので便利です。
一つのファイル内でなく、複数のファイルで検索や置換が出来ます。フォルダ内のファイル全て一斉に検索や置換が出来るのでたくさん作ったファイルを制作後に編集するときなどに便利です。
主なテキストエディタ(無料)
| エディタ名 | 料金/対応OS | URL | 特徴など |
|---|---|---|---|
| サクラエディタ | 無料(フリーウェア)/Windows | https://sakura-editor.github.io/download.html | プログラム編集に向いているテキストエディタ。複数エンコード・Grep・マクロ等も完備。 |
| Brackets | 無料(オープンソース)/Windows、Mac | http://brackets.io/ | Adobe社からリリースされている。Google Chromeでライブ・プレビューを使える |
| Visual Studio Code | 無料(フリーソフト)/Windows、Mac | https://code.visualstudio.com/ | Microsoft社が提供するテキストエディタ。HTMLやCSS、Javascriptに対応 |
⑤FTPクライアントソフト
WEBサイトが完成したら基本的にはこのFTPクライアントソフトを使ってパソコンからWEBサーバーへデータ転送します。サーバー側でFTPクライアントソフトがなくても転送できる場合は不要です。また、サーバー側で推奨しているFTPクライアントソフトを使いましょう。
主なFTPクライアントソフト
| ソフト名 | 料金 | 対応OS | URL | 特徴など |
|---|---|---|---|---|
| FFFTP | 無料 | Windows | https://github.com/ffftp/ffftp | 日本で一番使われているとってもいいほど有名です。シンプルで使いやすいです。 |
| Cyberduck | 無料 | Windows、Mac | https://cyberduck.io/ | シンプルで直感的な操作が魅力的です。 |
| FileZilla | 無料 | Windows、Mac | https://filezilla-project.org/ | 転送速度が非常に高速です。 |
FFFTPについて
私がお世話になっているレンタルサーバーを運用しているロリポップさんは基本FTPソフトなしでもWEBサーバーへのデータアップロードができます。 ただし例外として10Mbyte以上のファイルをアップロードする場合はFTPソフトウェアが必要にはなります。 その場合、パソコンにインストールしてFTPソフトを使います。 私の場合は「FFFTP」というソフトウェアを使用しています。 理由はロリポップサーバーが推奨しているFTPソフトウェアかつ無料だからです。たいへん重宝しています。
FFFTPはフリー・ソフトウェア（無料）で個人使用・業務使用もできます。 また、Windows全般に対応しています。私が使っている限りにおいては、通信時の”もたつき”もありません。 WEBサイトのURLは下記になります。参考までに掲載します。
http://osdn.jp/projects/ffftp/
FTPソフトウェアを使用する場合は、サーバーとの接続設定などある程度の知識が必要です。
接続にはWEBサーバー側のURL、IDやパスワードが必要です。 WEBサーバーをレンタル契約する際に必ず連絡が来るはずですので忘れないようにメモしておくことが必要です。
参考：FTPソフトとは
FTPとは？
FTPとは「File」、「Trancefer」、「Protocol」の頭文字をとったものです。 FTPソフトとは、サーバにファイルをアップロードしたり、サーバにあるファイルをダウンロードしたりする際に使うファイル転送用ソフトウェアのことです。
FTPという通信プロトコルによってファイルの転送を行っています。 「FTPクライアント」とも呼ばれています。
FTPS
FFFTPも最新版ではFTPS転送となっています。 FTPSとはFTPS(File Transfer Protocol over SSL/TLS)の略です。 FTPで送受信するデータを、「SSL又はTLS」で暗号化するプロトコルを使用しています。 FTPよりも安全にファイル転送ができます。
もし、お使いのソフトやWEBサーバーがFTPSが非対応であるなら考え物です。 バージョンアップしてFTPSで暗号化しより安全にファイル転送することをおススメします。 と言いますか、FTPでの転送は絶対に止めた方がいいです。 FTPSは第三者などに見られても暗号化されているため、そう簡単に内容が把握できないので安全です。
次回予告
制作に必要なものは？デジカメやビデオカメラ、撮った画像や映像を編集するソフトはどうすればいいのか？
次回はWEBサイト制作に必要なデジカメ、ビデオカメラ、画像、動画編集ソフトについて解説します。
次回はこちら
