Lv.4 Webにまつわる基礎知識
🐧目次🐧
本記事では、Webリテラシーを学習した管理人が、覚えておきたいと思った箇所についてピックアップしたものをご紹介していきます！
基礎的なものになりますのでよければ一緒に学びましょう♪
コンピュータについて
動画編集のおすすめPCスペック
PCスペックで意識したいことは以下の４点です。
SSDとは
内蔵型と外付け型があり、ストレージともよばれていて、ファイルを保存する場所のことです。カイリ調べによると、外付け型の容量は2TB以上はあるとよいようです！
Amazonのおすすめはこちら▽
- 超高速スピードで、高解像度の写真や動画を保存・編集・管理
- プロのクリエーターの大容量ニーズにも対応する大容量のポータブル SSD なら画像やビデオの編集、保存に余裕が持てます。
- 軽量 約52gでコンパクト。旅行やビジネス、どこにでもに持ち出せます。
- Windows とMac に対応
同商品でも500GB＝4TBまであるので必要な容量に応じて選べるのはうれしいですね！
CPUとは
CPUはパソコンの頭脳と呼ばれ、制御と演算を担当します。現在はIntel社のCPUが主流になっています。
グレードは、Core i9＞Core i7＞Core i5＞Core i3の順番で良いです。
引用：
【Intel CPU】Core i9, Core i7, Core i5, Core i3の世代の一覧・見分け方のまとめ
とのことで、最低でもCore i5、動画編集となるとCore i7はあった方が望ましく、予算次第ではCore i9を検討した方がよいでしょう。私もまだ十分なスペックのPCを検討できてないので、いざ本格的に活動するとなったら慎重に検討します💦
GPUとは
画像や映像の処理に特化した制御と演算を担当します。GPUが必要かどうかはどんなソフトを使用して主に動画編集を行うのかにもよって変わります。
「スムーズに動画編集を学び、実際に動画編集する」ことを考えると、やはりGPUを搭載したPCの仕様が好ましいです。
とのことで、予算によっては検討した方がよさそうです。
とても分かりやすい記事があったのでご紹介します！▽
メモリとは
コンピュータの記憶を担当していて、一般的にはRAMを指します。下記の例が具体的にわかりやすいため、共有しますね！
メモリとは、CPUが処理を実行するためのデータを一時的に記憶する場所です。
わかりやすく例えると机のような役割をします。
机は広ければ広いほど、書類や資料を並べたり、筆記用具や工具を置いたりと作業はしやすくなりますし捗ります。
狭い机では、一旦引き出しや棚にしまって、また出してという風に、作業スピードが遅くなります。
引用：
メモリの役割について【パソコンの話】｜NSK LOG｜日本ソフト開発株式会社
動画編集用のPCだと、16GBは欲しいといわれています。
上記の点を踏まえて、自分に合ったスペックのPCをぜひ検討してみてください！
文字コードってなに？
文字コードとは、アルファベットやひらがな等の文字をビット列(0と1の組み合わせ)に対応させた規格です。
引用：
【IT用語】 「文字コード」とは？実はコンピューターの基幹部分！ | Pikawaka
文字コードには複数の種類が存在しますが、WebではUTF‐8が主流となっています。文字コードは開発環境と本番環境で統一する必要があり、文字化けはテキストを作成した側と開く側の文字コード（ルール）が異なる場合に起きます。
文字化けを防ぐためには以下の2点を確認するとよいようです。
参考：
文字化けを防ぐ&解消する方法-独学!未経験からWebデザイナーになる!!
また、Windows10の場合になりますが、原因と対策についてわかりやすく記載されているためぜひご覧ください。
ネットワーク周りについて
LANとWAN
用語についておさらいです。
- LAN：社内や自宅などの小規模なネットワークのこと
例）近くの人とゲーム機で通信する場合
- WAN：電話回線など、通信事業者が提供する広域のネットワークのこと
LANのLは「Local」、WANのWは「Wide」なのでわかりやすいです。
IPアドレスについて
IPアドレスとはインターネット上の住所のことを指します。世界中で重複がないように設定されていて、例えば電源を切ったりするとIPアドレスが変わることがありますが、それはその時に空いているIPアドレスが割り当てられるからです。リモートワークが普及している昨今、IP制限（特定のIPからのみアクセスを可能にする）をかける会社も多いのではないでしょうか。私も開発環境やバックログなどのツールはIP制限がかけられていたため、特にルーターを使用していた際には毎日のようにIPアドレスが変わっていたためとても大変でした。（ルーターによるのかもしれませんが・・・(;^_^A）光回線だと安定することが多い印象です。
URL、ドメインについて
基本中の基本になりますが、URLとドメインについて改めて学びました。
ドメインとは下記の赤文字の箇所を指し、URLはドメインを含む全ての文字を指します。
https://kairi-video-editing.hatenablog.com/
┗ ドメイン ┛
┗ URL ┛
ドメインはドメイン事業者から購入することができ、取得は早いもの勝ちになります。安いものでは年間1000円ほどで契約できます。当ブログのドメインを決める際にも、被らないよう模索しました。SNSのIDなども被らないように早いもの勝ちなので利用している方はわかりやすいかと思います。
Webアプリケーションってアプリと何が違うの？
「Webアプリケーション」という単語は私は聞きなれなかったのですが、スマートフォンで目にするアプリと似ていて、違いはインストールが不要でブラウザから利用できるもののことを指します。さまざまなECサイトやteamsやzoom、チャットワーク等々の社内の情報共有で使用する業務ツール、PCやゲーム機で連動してできるゲームなどがあげられます。これらはIDとパスワードがあれば利用端末にかかわらずアクセスできることがメリットになります。Webが必要不可欠になっている私たちにとってなくてはならない技術になっていることがわかります。
SSLと証明書について
現場でたまに耳にしていたものの、恥ずかしながら説明できるほど十分に理解できていなかったため改めて学習しました。この証明書はどのようなページでもスタンダードになっていて、検索エンジンも推奨しています。
SSLサーバ証明書は、ウェブサイトの「運営者の実在性を確認」し、ブラウザとウェブサーバ間で「通信データの暗号化」を行うための電子証明書で、GMOグローバルサインなどの認証局から発行されます。 SSLサーバ証明書には、ウェブサイトの所有者の情報や、暗号化通信に必要な鍵、発行者の署名データが含まれています。SSLサーバ証明書が導入されたウェブサイトは、URLがHTTPSから始まり、先頭には鍵マークが表示されるようになります。
引用：
サーバー周りについて
よく目にするクラウドってなに？
クラウドとは下記の説明がわかりやすいため、共有しますね！
クラウドサービスとは、ソフトウェアのインストールが必要ないサービスです。
サービスには、Gmail、Yahoo!メールなどのWebメールやTwitter、InstagramなどのSNSなどがあります。たとえば、Webメールではデータがすべてインターネット上で保存され、送受信もインターネット上のアプリを経由します。
引用：
クラウドとは？意味・定義 | ITトレンド用語 | NTTコミュニケーションズ
メリットとしては下記3点があげられます。
- 導入までのスピードの速さ
- スペック調整のしやすさ（費用面でも◎）
- 利便性の高さ
それぞれの詳細です▽
1：数分で利用開始できます
2：例えば自分が経営している飲食店がテレビで取り上げられることになった場合、放送後にHPへのアクセスが集中してサーバがダウンすることが予想できます。このようにあらかじめ予想できるときに、スペックを上げておくことでアクセスが集中しても耐えられるようになります。ただ、放送からしばらくするとアクセスも落ち着いてくると考えられますよね。その場合はスペックを元に戻すこともできるので、コスト面でも運用しやすいです。
3：
利便性の高い様々なサービスがソフトウェアベンターやクラウド事業者から提供されており、これらを利用することで自社の業務効率の向上やアプリ、ITツールの開発、運用に強いられていた負担の軽減を実現してくれます。
こちらの記事がわかりやすくまとめていたのでご紹介します▽（3の引用元）
ローカル環境とは
Webアプリケーションを動作させるためにLAMP環境というものが必要です。
LAMP環境とは以下4つのことを指します。
私は開発経験はないのですべてはわかりませんが、事業会社のディレクターとして勤務していた際、サポートが切れるということでPHPのバージョンアップをする必要がありました。ページ数が少ないサイトの場合はスムーズに切り替えられる場合が多いですが、ページ数が膨大な量になると影響範囲が広いため、段階を踏んで切り替えるなど検討した方がよいでしょう。それぞれ詳しくは興味があればぜひ調べてみてください！
下記サイトは私が経験したことの詳細になりますので共有します！
また、上記のLAMP環境を構築できるアプリケーションとしてXAMPPやMAMPが人気のアプリケーションとなっています。プログラミング言語や何がしたいかによってどちらを選ぶか決めた方がよいよいです。こちらは専門外のため、閲覧したサイトご紹介します。
本番サーバにどうやって接続するのか
本番サーバへの接続方法はSFTP接続とSSH接続があります。よく聞くのはSFTP接続のFileZillaというものです。SFTP接続は単純なファイルのアップロードとダウンロードが可能です。
もう一方のSSH接続はサーバーの操作も可能という点が異なり、より上級者向けの接続方法となります。開発を専門で学習する方は個人でぜひ調べてみてください！
画像などのファイル・フォントについて
JPEGとかよく聞くけど違いって？
みなさん画像の保存形式の違いについて、それぞれ説明できますか？恥ずかしながら私は過去の画像の保存形式がこれだから、とかイラストだからPNG,画像だからJPEGかなというような感覚だったため、改めて学びました。
JPEG
- 主に写真や複雑なイラストに利用される
- いったん画像を荒くすると元に戻すことができない非可逆圧縮
- 圧縮率の設定が可能
- 圧縮すればするほどファイル容量を小さくできるがそれに伴って画質は落ちる
- 背景の透過は不可能
GIF
- アイコンやバナーとして利用される
- 静止画をパラパラ漫画のようにコマ送りにすることでアニメーションファイルを作成することができる
- 背景の透過が可能
PNG8
- アイコンやバナーに利用される
- アニメーションファイルは不可
- GIFよりもファイルサイズが軽い
- 背景の透過が可能
PNG24
- 写真や複雑なイラストに利用される
- 圧縮を元に戻せる可逆圧縮
- メリットは多いがファイルサイズが大きくなりやすい
WebP
- 画像サイズが軽くなる
- ページの表示速度が速くなる⇒SEO対策になる
その他比較についてこちらをご覧ください▽
WebPとは？メリットやその他の画像形式との違い、変換方法を紹介|企業で働くクリエイター向けウェブマガジン「CreatorZine（クリエイタージン）」
ビットマップ画像・ベクター画像・SVG画像について
ビットマップ画像は色の点が集まって構成された絵のことで、ベクター画像は点と点をつなぎ合わせて構成された絵のことです。
ビットマップ画像
- きめ細やかな色表現ができる
- 写真や絵画は基本的にこのビットマップ画像
- PhotoshopやIllustrator『ピクセル』という画像形式はこのビットマップに当てはまる
ベクター画像
- どれだけ拡大しても画像が荒くならない
- 無数の色が含まれる写真はベクトル画像では再現がむずかしい
- PhotoshopやIllustratorでの『シェイプ』『パス』はこのベクトル画像に当てはまる
参考：
SVG画像
ベクターデータの画像形式の一つで、テキストファイルで保存されているためテキストの一部を変更すると画像にも反映されてます。例えばグラフを作成しているときに数値が変動した場合テキストを変更するだけでグラフの割合も変わるようになります。
いずれも適した画像ファイルを選択するとともに、適切な画像サイズにリサイズしてから使用することを意識しましょう。ファイル容量が大きくなるとサイトの表示速度が遅くなり、ユーザーの離脱にもつながります。
Webフォントってなに？
Webフォントとはユーザーの環境に左右されずに同じフォントをすべてのユーザーに見せることができるフォントのことです。いろんな端末で検証をしたりサイトを閲覧すると経験するのですが、同じサイトでもフォントが異なる場合があります。これは端末やブラウザごとに持っているフォントが異なるために起こりますが、これを防ぐことができます。おすすめはGoogle Fontsの定番のNoto Sans JPです。サイト制作するときもこのフォントで制作を進めることが多いです。
アイコンフォントもある！
このブログにもあるコメントのアイコンだったり、リストのアイコンだったり、よく目にするアイコンはアイコンフォントとして存在します。これらは解像度に左右されないため、拡大や縮小をしても画質は落ちませんし、フォントなのでCSSを修正すれば簡単に色を付けることができます。いくつか気になるアイコンフォントのサイトをブックマークして、自分が使用したい箇所にあったデザインのフォントシリーズを使えるようになるといざというとき便利です！
音声・動画のファイル
音声と動画についてはこれまで扱ったことがなく、ファイル名などの基本の基本も知らなかったので備忘録でまとめました！
音声のファイル：mp3
動画の拡張子
- mov：Appleのファイル形式
- mp4：圧縮率が高く、データを軽くすることができるため多く使用されている
まとめ
今回はWebにまつわる基礎知識についてざっくり広い範囲でまとめました。ご存じのことも多かったかもしれませんがいかがでしたでしょうか。私はなんとなく知っているけど人に教えるほど理解ができていないなと痛感した部分も多かったので復習にもなりました。
本日の学習部屋はここまで！
次回からいよいよアプリを触りながら実戦に向けて学習します。
お疲れさまでした！
