HTML

HTML5のvideoタグで動画のストリーミング配信の仕方を現役エンジニアが解説【初心者向け】

初心者向けにHTML5のvideoタグで動画のストリーミング配信の仕方について解説しています。最初にストリーミングとは何か、そのメリットとデメリットを説明します。次にvideoタグの使い方と、サムネイルやサイズ調整などの基本的な機能について学習しましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

HTML5のvideoタグで動画のストリーミング配信の仕方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

今回は、HTMLに関する内容だね！

どういう内容でしょうか？

videoタグで動画のストリーミング配信を行う方法について詳しく説明していくね！

お願いします！

ストリーミングとは

ストリーミングとは、音声や動画などのメディアを再生する技術のことです。ストリーミングはメディアをすぐに再生することができることから、動画配信サービスや音楽配信アプリで使用されています。これまでは一度メディアをダウンロードしてから再生するサービスが主流でしたが、インターネットの発達から現在はストリーミング再生を採用しているサービス、アプリがメインになっています。

メリット

ストリーミングのメリットはダウンロードと違い、インターネットに接続していれば、端末に転送されることなく再生されるので、スマホやパソコンのストレージを使わないのがメリットです。これによりメディアの再生形式と機種に依存することなく様々なメディアを楽しむことができます。

デメリット

端末のストレージを消費することなく再生できる一方でインターネットがなければメディアが再生されないのでネットワークが不安定な環境や通信制限がかかると再生が不安定になります。

また、Wifiを使用している場合は気にしなくてもいいですが、携帯回線を使用している場合は動画を再生するたびにデータ通信量が消費されるので、何も気にせずに使うと簡単に通信制限がかかってしまいます。おそらく、スマホで動画配信を見た経験のある方だとどちらも経験したことのある話だと思います。

videoタグの基本的な使い方と高度な設定を知ろう

動画をストリーミング再生するためにはHTMLのvideoタグを使って実現できます。早速使い方を紹介していきます。

基本的な使い方

基本的な使い方は、videoタグで動画ファイルを参照するだけです。HTMLで画像を扱ったことのある方はimgタグを使う方法と同じです。

<video src="video.mp4"></video>

これで動画は表示できますが、再生はされません。コントローラを追加することで動画を再生、一時停止、ボリューム調整をすることができます。コントローラを追加するには、controls属性を指定します。

<video src="video.mp4" controls></video>

これでストリーミングするための準備ができました。

サムネイルをつける

ここからは、videoタグの属性をつかった高度な設定について紹介します。まずは動画ストリーミングサイトでよく使われている動画のトップ画像（サムネイル）を入れる方法です。サムネイルはposter属性をつかって画像ファイルを指定することで乗せることができます。サムネイルを使うことで、動画の内容をしる手がかりになります。

<video src="video.mp4" poster="samne.jpg"></video>

自動再生する

autoplay属性を指定することで、ページを読み込んだことで動画が自動で再生されます。

<video src="video.mp4" autoplay></video>

サイズを調整する

videoタグで動画を再生すると、動画のサイズでそのままHTMLに表示され、大きいサイズだと、ブラウザの画面をはみ出す上に見ずらいです。そこで、width、heightを使って幅と高さを調整する必要があります。これにより、サイトのデザインに合わせて動画をはめ込みやすくなります。

<video src="video.mp4" width="320" height="240">

[PR] Webデザインで副業する方法とは

動画を埋め込んで再生してみよう

それでは、実際にサンプルコードを使って動画をブラウザで再生しましょう。まずは再生したい動画ファイルを用意します。動画はmp4かogg用意します。用意したら以下のサンプルHTMLと一緒に任意のフォルダ内に保存します。なお、動画ファイルの名前はご自分のものに合わせて変更しておきます

<head>
    <title>ビデオデモ</title>
    <meta charset="utf-8">
</head>

<body>
    <h1>ビデオストリーミング</h1>
    <video src="./mov_hts-samp005.mp4" controls width="320" height="240"></video>
</body>

保存したHTMLをダブルクリックしてブラウザから見ると、このように動画がブラウザ上で再生できるようになります。

監修してくれたメンター

メンター三浦さん

モバイルゲームを運用している会社のエンジニアをしています。趣味でWEB開発やクラウドコンピューティングもやっており、ソフトもハードもなんでもやります。

TechAcademyジュニアではPythonロボティクスコースを担当しています。好きな言語はPython, Node.js。

内容分かりやすくて良かったです！

ゆかりちゃんも分からないことがあったら質問してね！

分かりました。ありがとうございます！

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

HTMLで右寄せ・中央寄せ・左寄せをする方法【初心者向け】現役エンジニアが解説

この記事ではWebページ制作の際に、要素の右寄せ・中央寄せ・左寄せを実現するHTML/CSSの記述方法について、テックアカデミーのメンター（現役エンジニア）が実...

HTML

HTMLで画像の画質が荒くなる原因と対処法を現役デザイナーが解説【初心者向け】

HTMLで画像の画質が荒くなる原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そ...

HTML

HTML5でページ内リンクを設定する方法を現役エンジニアが解説【初心者向け】

HTML5でページ内リンクを設定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そも...

HTML

HTMLのフォントサイズで最大値・最小値を指定する方法を現役エンジニアが解説【初心者向け】

HTMLのフォントサイズで最大値・最小値を指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します...

HTML

特定の場所に移動したい！HTMLでジャンプする方法【初心者向け】

今回はHTMLでジャンプする方法を説明していきます。 HTMLでジャンプするというのは、今見ているページから別の情報が掲載されているページに移動するという...

HTML

入門から応用まで！HTMLの学習に役立つリファレンスサイト10選

HTMLで作りたい機能があるのに方法がわからない時、大きな味方になってくれるのが、リファレンスサイトです。今回はそんなHTMLのリファレンスサイトを10...

HTML

あわせてよく読まれている記事

HTML5でストリーミング動画配信を実装する方法を現役エンジニアが解説【初心者向け】

HTML5でストリーミング配信された動画再生実装する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 HTML5でストリーミング配信された動画再生実装することで、HTML5だけでなく配信技術に対するご理解も深まります。実務では、HTML5でストリーミング配信する会社への就職、HTML5でストリーミング配信を実装する案件獲得などに繋がります。そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介ストリーミング再生を実装する方法について詳しく説明していくね！大石ゆかりお願いします！ HTML5で配信された動画再生実装する方法（video要素の使い方） HTML5 では、videoタグを記述することでプラグインを使わずに動画を再生することができるようになりました。その方法は、まず、videoタグの中にsrc属性で音声ファイルのアドレスを指定します。次にcontrols属性によって、音声の再生や停止などのユーザーインターフェースを指定しましょう。ブラウザごとに表示されるインターフェース（操作パネル）は異なるため、それぞれを確認してから使用しましょう。また、controls属性を別の属性として記述することによってvideo表示方法を変えることが可能です。 autoplayは自動再生、loopは繰り返しなどと変更することが可能です。動画のストリーミング配信とは動画をストリーミング再生する場合大きく２種類の考え方があります。それが、HTTP Live Streamingとプログレッシブダウンロードです。 HTTP Live Streaming 動画のストリーミング配信で一般的な方法はHTTP Live Streaming（HLS）という技術を利用しています。 HTTP Live Streamingは元々、アップルがiOS向けに開発しました。 HTTPという汎用的なプロトコル（規格）を利用することで、様々な媒体に対して動画配信が可能です。メリット手元の端末にダウンロードしない為、著作権対策が可能専用サーバーを用意する必要がないデメリット通信回線が高速安定でない場合は再生が止まってしまうプログレッシブダウンロードプログレッシブダウンロードは疑似ストリーミングと呼ばれ、配信データをダウンロードして再生します。メリットすべてのデータをダウンロードし終わっていれば、オフライン状態で再度再生が可能。デメリットオフライン状態で再度再生が可能ということは、著作権上問題が発生する。 [PR] Webデザインで副業する方法とはHTML5で動画のストリーミング再生を実装する方法 HTTP Live Streaming HTTP Live Streamingを利用したストリーミング配信動画の再生実装方法です。 m3u8ファイルについて m3u8ファイルはストリーミング再生される動画のプレイリストのようなものです。 m3u8ファイル自体をダウンロードしてもオフラインで再生はできません。 m3u8ファイルを利用してストリーミング再生している例としては、TVer、FOD、GYAO!などがあります。 m3u8ファイルを利用した実装 HTTP Live Streamingを利用したストリーミング配信動画を利用する場合は、ライブ配信もオンデマンド配信もどちらにも適しています。ライブ配信というのは、現在進行系で配信している内容を、配信と同時に見ることを意味します。オンデマンド配信というのは、過去に配信されていたものを、後日ストリーミング再生で見ることを意味します。 <video src=”./video/test.m3u8″ controls> でtest.m3u8というファイルを指定することでストリーミング配信されたファイルを再生することが出来ます。これは、htmlと同じ階層内にあるvideoフォルダの中に、test.m3u8というファイルを用意しているという意味になります。これだけは覚えたい！絶対パスと相対パスの違いを参考にしていただくと階層についてご理解が深まります。＊なお次のコードを動作させるためには、./video/test.m3u8の位置に必要なファイルを用意する必要があります。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> </head> <body> <video src="./video/test.m3u8" controls> </video> </body> </html> プログレッシブダウンロードプログレッシブダウンロードを利用して、疑似ストリーミング再生をする方法です。 mp4の利用 <source src=”./video/test.mp4″> のように指定することでプログレッシブダウンロードを利用した疑似ストリーミングが可能です。大きなサイズの動画の場合には分割させる必要があるものの、短い動画はvideoタグによりmp4ファイルなどを再生することが可能です。＊なお次のコードを動作させるためには、./video/test.mp4の位置に必要なファイルを用意する必要があります。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>プログレッシブダウンロード</title> </head> <body> <video controls> <source src="./video/test.mp4"> </video> </body> </html> QuickTimePlayerの利用また、QuickTimePlayerで再生することもできます。 <source src=”./video/test.mov”> で指定したvideoタグをhtmlに埋め込んで利用可能です。＊なお次のコードを動作させるためには、./video/test.movの位置に必要なファイルを用意する必要があります。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>QuickTimePlayer</title> </head> <body> <video controls> <source src="./video/test.mov"> </video> </body> </html> この記事を監修してくれた方中本賢吾（なかもとけんご）アジマッチ有限会社　代表取締役社長開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。小学生がUnityでオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がノーコードでSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。大石ゆかり HTML5でストリーミング再生を実装する方法がよく分かったので良かったです！田島悠介ゆかりちゃん、今後も分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。

HTML

今さら聞けない！GitHubの使い方【超初心者向け】

開発者にとってなくてはならないサービスとしてGitHubがあります。エンジニアにとっては当たり前のサービスですが、これからプログラミングの勉強を始める初心者にとってはよくわからないかもしれません。そこで今回は、GitHubの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそもGitHubとは何なのか、どんな時に使うツールなのかを知っていきながら、実際の使い方を紹介しています。本格的に使おうと思ったらもっと多くのことを知る必要がありますが、業務で使うということでなければ十分でしょう。目次ストリーミングとはvideoタグの基本的な使い方と高度な設定を知ろう動画を埋め込んで再生してみよう監修してくれたメンター Gitについてそもそもよく分からないという方は、GitHubとは何なのか解説した記事を読むとさらに理解が深まります。今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。大石ゆかり田島メンター！！GitHubってなんですか〜？田島悠介 GitHubはね、Gitをオンライン上で管理するサービスだよ。大石ゆかりもう少し詳しく教えてもらえますか〜？ GitHubとは GitHubとは、ソフトウェア開発プロジェクトのためのソースコード管理サービスです。ソースコードを更新したバージョンの管理や閲覧、バグ追跡機能、SNSの機能を備えており、開発者にとってなくてはならないサービスです。また、GitHubを使ってソースコードの管理を行っている企業も多数あります。 GitHubが人気な理由と類似サービスとの違い GitHub は、Git を使用したソフトウェア開発とバージョン管理のための人気のあるプラットフォームおよびクラウドベースのサービスです。コードを効率的に保存、管理、共同作業するために必要なツールを開発者に提供します。ユーザーフレンドリーなインターフェースと豊富な機能を備えた GitHub は、世界中の開発者にとって不可欠なツールとなっています。 GitHub はテクノロジー業界では有名な名前かもしれませんが、ライブカジノへのユニークなアプローチを持つオンラインカジノ市場も多くの日本人プレイヤーに人気を集めています。その一例が、プレイヤーに没入型でインタラクティブなゲーム体験を提供する日本の市場志向のオンラインカジノ、ライブカジノハウスです。オンラインカジノブランドレビュー関連ページで調べる通り、ライブカジノハウスは、日本の文化と技術の要素を取り入れることで、ライブカジノの伝統的なコンセプトを次のレベルに引き上げます。伝統的な日本の衣装を着たライブディーラーから高度なバーチャルリアリティテクノロジーまで、ライブカジノハウスはプレイヤーにユニークなゲーム体験を提供します。イノベーションと顧客満足に重点を置いているライブカジノハウスは、日本市場で大きな支持を得ています。その成功は、日本のオンラインカジノ業界の可能性を浮き彫りにし、多様な興味や好みに応えるために継続的に進化している様子を示しています。より多くの日本のプレーヤーがエンターテインメントのニーズのためにオンラインカジノに目を向けるにつれて, ライブカジノハウスや他の日本の市場志向のオンラインカジノが、伝統的なカジノ体験の限界を押し広げ続ける様子を見るのはエキサイティングです。 GitHubと同じようなソースコード管理サービスとしては、BitbucketやGitLabなどがあります。それぞれのサービスとの違いをもとに、GitHubが人気な理由を見ていきましょう。理由1：無料のプライベートリポジトリソースコードを管理する単位をリポジトリと呼びます。リポジトリは格納場所という意味で、他の利用者にも公開されるパブリックリポジトリと、公開が関係者だけに限定できるプライベートリポジトリがあります。ソースコードを公開したくない場合は、プライベートリポジトリを選択する必要がありますが、以前はGitHubは有料、BitbucketやGitLabでは無料という状況でした。しかし2020年4月から、GitHubでも無料のプライベートリポジトリを無制限に作成可能になりました。これによりGitHubを使いたかったがソースコードは公開したくない個人や企業の利用が大幅に増え、さらにGitHubの人気が高まる状態となりました。理由2：オープンソースコミュニティに育まれたSNS機能オープンソースとはソースコードが公開されており、誰でも無料で利用できるソフトウェアのことを指します。また、オープンソースコミュニティとは、オープンソースの開発者同士の集まり、結びつきのことです。 GitHubでは以前から多くのオープンソースが管理されており、たくさんのオープンソースコミュニティが形成されています。このオープンソースコミュニティに育まれる形で、GitHubには以下のような機能が充実しており、コミュニティが開発を行いやすくなっています。コミュニティの中で誰がどのぐらい貢献しているかを可視化する機能（スター、貢献度）開発メンバーの知見を共有する機能（Wiki、GitHub Pages）ソースコードの更新などに関する議論をやりとりする機能（Issues、Codeとの連動）単にソースコード管理サービスとしての機能だけを捉えると、実はGitHub、Bitbucket、GitLabとも大きな違いはありません。しかしこのような開発しやすい環境を支援する機能という点では、GitHubが頭一つ抜けている印象を持ちます。理由3：先進的な機能の拡充 GitHubは2018年にMicrosoft社に買収され、傘下の一企業となりました。 Microsoft社は買収後もGitHubを独立企業として維持する意向を示しており、両社はオープンソースコミュニティにとっても良好な関係となっています。このような環境の中から、以下のような先進的な機能が次々と誕生しています。世界中のエンジニアに人気のあるMicrosoft社のフリーのソースコード編集ソフト「Visual Studio Code」をオンラインで利用できる「Codespaces」オープンソースコミュニティに開発者としてではなく、資金提供者として参加できる「Sponsors」機能ソフトウェアの開発から公開までの一連の流れをサポートする「GitHub Actions」これら先進的な機能は類似のソースコード管理サービスにはないものであり、開発者にとってGitHubを選ぶ理由の1つとなっています。 GitHubのアカウント登録それではさっそくGitHubに登録してみましょう。まずは、GitHubのトップページにアクセスします。ここでメールアドレスを入力し、緑色の「Sign up for GitHub」ボタンをクリックします。次の画面でUsername（ユーザー名）やPassword（パスワード）を入力します。下の方にある「Pick the spiral galaxy」は、不正なユーザー登録を防ぐための仕組みです。クイズになっており渦巻状の銀河の絵を数回選択します。なお、このクイズは定期的に変わるようです。決められた回数、クイズに正解すると「Create account」ボタンを押せるようになります。ボタンを押して次に進みましょう。このような画面になります。登録したメールアドレスに認証のメールが届きます。メールの内容に従いユーザー認証を行ってください。以上でGitHubのアカウント登録は完了です。大石ゆかり GitHubの登録はできました♪それで、どうやって使うんですか〜？田島悠介その前にいくつか知っておいたほうがいいことがあるから、教えておくね。大石ゆかりはい、お願いします♪ [PR] Webデザインで副業する方法とはGitHubを使う上で知っておきたい事前知識早速GitHubを使っていきたいところですが、使い始める前に知っておきたい事前知識を3つ紹介します。ここで紹介する言葉がまったくわからない場合は、理解しておきましょう。事前知識1：ローカルリポジトリとリモートリポジトリ事前知識2：コミットとプッシュとは事前知識3：ブランチ（branch）とは事前知識4：インデックス（index）とは事前知識1：ローカルリポジトリとリモートリポジトリリポジトリとは、ファイルやディレクトリの状態を保存する場所です。変更履歴を管理したいディレクトリなどをリポジトリの管理下に置くことで、そのディレクトリ内のファイルなどの変更履歴を記録することができます。リポジトリは自分のマシン内にある「ローカルリポジトリ」とサーバなどネットワーク上にある「リモートリポジトリ」の2カ所にあります。基本的にローカルリポジトリで作業を行い、その作業内容をリモートポジトリへプッシュする流れで行います。事前知識2：コミットとプッシュとは最低限この2つは知っておきましょう。コミット(commit) ファイルの追加や変更の履歴をリポジトリに保存することプッシュ(push) ファイルの追加や変更の履歴をリモートリポジトリにアップロードするための操作事前知識3：ブランチ（branch）とはソフトウェアの開発では、現在リリースしてるバージョンのメンテナンスをしながら新たな機能追加やバグ修正を行うことがあります。このような、並行して行われる複数のバージョン管理を行うために、Gitにはブランチ（branch）という機能があります。ブランチは履歴の流れを分岐して記録していくものです。分岐したブランチは他のブランチの影響を受けないため、同じリポジトリ内でそれぞれの開発を行っていくことができます。事前知識4：インデックス（index）とはリポジトリ管理下にあるディレクトリの中には、一時的に使うファイルなど、Git管理が不要なものもあります。そこでGitでは、バージョン管理する対象のファイルやフォルダを「インデックス」と呼ばれる台帳に登録することで、必要なもののみバージョン管理が行えるようになっています。逆に言えば、新たにフォルダやファイルを作成した場合、コミットする前にインデックスに登録する必要があります。忘れないようにしましょう。 GitHubの使い方それでは使い方を覚えていきましょう。基本的なGitの作業は下記のような流れとなるので、GitHubを使って順番に紹介します。なお、「1」の作成は初回のみ行い、「2」から「5」を繰り返します。基本的に小さい作業の単位でコミットを行い、ある程度作業がひと段落した時にプッシュをするのが一般的です。コミットの作業がわかりやすいように、コミットメッセージを残しておくと、ログを追っていく時に役立ちますので覚えておきましょう。 Githubでリポジトリを作成（git init）ファイルの作成、編集を行うファイルの作成/変更/削除をgitのインデックスに追加する（git add）変更結果をローカルリポジトリにコミットする（git commit）ローカルリポジトリをプッシュしてリモートリポジトリへ反映させる（git push） GitHubでリポジトリを作成（git init）まずはリポジトリを作成します。 GitHubにログインした状態で以下にアクセスします。 https://github.com/new 次に表示される画面では、「Repository name」の入力のあと、必要に応じて「Description」も入力します。また、リポジトリの種類を「Public」か「Private」を選択します。ソースコードを公開したくない場合は「Private」を選択すると良いでしょう。最後に、リポジトリの中にあらかじめREADMEファイルを作成しておく場合は「Initialize this repository with a README」にチェックを入れます。 .gitignoreやlicenseについては後で追加や変更ができるので、Noneを選択します。必要項目の入力が終わり「Create repository」ボタンをクリックするとリポジトリの作成は完了です。次の画面で、リモートリポジトリのアドレスが表示されますので、控えておいてください。ファイルの作成、編集を行うはじめに、ローカルのPC上にローカルリポジトリを作成します。今回は「awesome」というディレクトリを作成することにします。以下の操作はWindowsであればPowerShell、Macであればターミナルで行います。コマンドは1行ずつ、最後にEnterキーを押して入力しましょう。 mkdir awesome cd awesome git init 「mkdir」は新しくディレクトリを作成するコマンドで、「cd」はディレクトリを移動するコマンドです。 awesomeというディレクトリを作成し、そのディレクトリに移動してから作業が始まります。そして、この「git init」コマンドはGitリポジトリを新たに作成するコマンドです。バージョン管理を行っていない既存のプロジェクトをGitリポジトリに変換する場合や、空の新規リポジトリを作成して初期化する場合に使用します。 git initコマンドを実行するとカレントディレクトリをGitリポジトリに変換します。次に、テキストエディタなどで以下のHTMLファイルを作り、先ほどのawesomeフォルダに「hello.html」という名前で保存しましょう。現在の状態を確認しましょう。 git status 結果は以下のようになります。 hello.htmlが「Untracked files」、つまりインデックスに登録されていないファイルとして表示されています。 On branch master Untracked files: (use "git add <file>..." to include in what will be committed) hello.html ファイルの作成/変更/削除をgitのインデックスに追加する（git

Git

今さら聞けない！ターミナルの使い方【初心者向け】

Mac OSを使っていると、システム環境設定などでは設定することができない、高度な設定をしたいと思う場合があるかと思います。そのようなカスタマイズをおこなうためには、Mac OSのターミナルという機能を使う必要があります。また、ターミナルはプログラミングをする際にも利用します。そこで今回は、初心者向けにターミナルの利用方法を紹介します。なお本記事は、TechAcademyのWebアプリケーションオンラインブートキャンプの内容をもとに紹介しています。なお、今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。目次本記事は、下記の流れで説明します。主要コマンドも紹介しているので、記事を読んだらすぐに使ってみてください。ターミナルとはターミナルの使い方ターミナルの主要コマンドターミナルとはターミナルとは、コマンドと呼ばれる命令文を用いてMacの操作や設定をおこなうためのツールです。通常は利用する必要はありませんが、高度な設定をする場合や、Macでプログラミングをおこなう場合には利用する必要があります。 Windowsにおけるコマンドプロンプトと呼ばれているものとほぼ同じものです。ターミナル上では、マウスやトラックパッドを用いて操作するのではなく、キーボードで「コマンド」と呼ばれる命令を入力することによって操作します。この記事では、ターミナルの基本的な使い方や、よく利用されるコマンドについてまとめています。 [PR] Webデザインで副業する方法とはターミナルの使い方ターミナルは、「アプリケーションフォルダ」内の「ユーティリティフォルダ」にインストールされています。起動すると、次のような真っ白な画面が表示されると思います。しばらくすると時刻などが表示されますので、それまで待ちましょう。このとき表示されている文字の意味は、次の通りです。ログイン日時：ターミナルを起動した日時、1行目に表示コンピュータ名：コンピュータの名前、2行目前半に表示ディレクトリ：現在のディレクトリの位置、2行目後半に表示 ※この画像では個人情報が含まれるために上記の情報は消していますが、実際は画像中赤文字の上にこれらの情報が表示されますディレクトリとは、「Finder」で言うところの「フォルダ」と同じものです。例えば、先ほどの画像で示したターミナルで開いているディレクトリは、個人情報なため、ここでは白で隠してありますが、Macのユーザ名と同じ名前のディレクトリです。 Finderですと、次のようにフォルダに該当します。（左側のメニューから、自分のユーザ名と同じフォルダを開いています）このように、ターミナルは特定のディレクトリについて操作をおこなうツールになります。そのため、特定のファイルに対して操作をおこないたい場合、そのファイルが存在するディレクトリに移動してから操作する必要があります。（詳しくは「コマンドの使い方」にて記載します）ターミナルの設定は、通常のアプリケーションと同じく、上部バーの「ターミナル」内にある「環境設定」からおこなえます。背景や文字の色を変えたい場合は、この環境設定中にある「プロファイル」から変更することができます。ここでは、あらかじめ用意されているいくつかの配色パターンから、背景色や文字の色を選ぶこともできます。例えば、この画像中にある「Homebrew」を選択すると、ターミナルは次のように変わります。また、これらの配色は自分の好きな色にカスタマイズすることもできます。カスタマイズする場合は、同じくプロファイルの左下にある「+」ボタンから、新しいプロファイルを作成し、右側の「テキスト」や「ウィンドウ」のタブを切り替えながら、色などを選択します。ターミナルの主要コマンド基本的な設定がわかったら、ターミナルのコマンドを覚えていきましょう。今回は、ターミナルでよく利用するコマンドを11個紹介していきます。全てのコマンドは、入力した後にEnterを押すことによって実行されます。 cd ディレクトリ間を移動する場合に使用します。「ターミナルの使い方」でも述べたとおり、ターミナルでは1つのディレクトリしか開くことができません。そのため、他のディレクトリにあるファイルを操作したい場合は、そのディレクトリまで移動する必要があります。（パスを指定する方法もありますが、ここでは割愛します）このディレクトリの移動に用いるコマンドが「cd」コマンドです。「cd ディレクトリ名」と入力して実行します。例えば、現在のディレクトリ中にある「Documents」ディレクトリへ移動したい場合は、「cd Documents」と入力します。このとき、もし入力したディレクトリが存在しない場合は、「No such file or directory」というエラーが出ます。また、現在のディレクトリよりも1つ上のディレクトリへ移動したい際は、「cd ../」と入力します。これらのディレクトリ名は、連続で入力することもできます。例えば、Documentsディレクトリ内にあるtextディレクトリを開きたい場合は、「cd Documents/text」と入力すると移動できます。 ls 現在のディレクトリ内に存在する、ディレクトリやファイルを表示するコマンドです。このコマンドは「ls」のみで実行します。例えば、先ほど画像で示したユーザ名のディレクトリですと、この図のように表示されます。（ユーザー名は白で隠してあります） Finderのフォルダと比較すると、全く同じ名前のディレクトリを表示していることが分かるかと思います。先ほど紹介したcdコマンドでディレクトリを移動する際は、このlsコマンドで事前に移動したいディレクトリが存在するか確認すると便利です。 mkdir ディレクトリを作成するためのコマンドです。「mkdir 作成したいディレクトリ名」で実行します。例えば「mkdir AAA」と入力し実行すると、AAAというディレクトリが作成されます。 rm ファイルを削除するコマンドです。「rm ファイル名」で実行します。このコマンドで削除したファイルはゴミ箱には入らず、また警告等も出ませんので、十分注意して実行するようにしてください。誤って重要なファイルを削除してしまった場合、コンピュータが起動しなくなる可能性もあります。 mv ファイルやディレクトリの名前を変更する場合や、移動する場合に利用します。用途が2つあるので紛らわしいのですが、どちらの場合も「mv AAA BBB」のように入力して実行します。 AAAとBBBは、ファイルまたはディレクトリの名前です。このコマンドを実行した場合の動作は、このAAAとBBBによって、次のように異なります。 BBBというディレクトリが存在する場合は、AAAをBBBの中へ移動 BBBというファイルが存在する場合で、かつAAAがファイルの名前である場合は、BBBへ上書き保存 BBBが存在しない場合には、AAAをBBBという名前に変更 cp ファイルをコピーするコマンドです。「cp AAA BBB」と入力すると、AAAというファイルがBBBという名前でコピーされます。このとき、BBBというファイルが既に存在している場合は、BBBへ上書き保存します。また、BBBがディレクトリの名前である場合は、BBBディレクトリの中にAAAがコピーされます。 pwd 今開いているディレクトリまでのパスを表示します。ターミナルで今どのディレクトリを表示しているのか分からなくなったら、このコマンドを実行しましょう。このコマンドもlsと同様に、「pwd」のみで実行します。 man コマンドのマニュアルを開きます。マニュアルは英語ですが、各コマンドのオプションなどが表示されるので、1度は試してみましょう。「man マニュアルを開きたいコマンド名」で実行します。例えば、「man man」と入力した場合は、次のようにmanコマンドの利用方法が表示されます。このマニュアルを読んでいると、「OPTIONS」という項目があることが分かるかと思います。この記事では説明を割愛しましたが、多くのコマンドにはオプションと呼ばれる機能を付加して実行することができます。例えばmvやcpコマンドで「-n」オプションを付けて実行すると、上書き保存を防止することなどができます。特にプログラミングなどをターミナルでおこなう場合にはオプションもかなり利用することになると思いますので、こちらのmanコマンドでオプションの使い方などを一通り目を通してみましょう。このマニュアルは、終了する場合に「q」を入力します。 qを入力して終了しないと、次のコマンドを受け付けませんので注意しましょう。 find ファイルやディレクトリの検索に利用します。「find 検索する場所 -name 検索するファイル名」で実行します。「検索する場所」が分からない場合には、先ほどのpwdコマンドやlsコマンドを用いて、大体の目星を付けましょう。 clear ターミナル画面をクリアし、表示された文字を全て消去します。実行した内容が取り消される訳ではありません。同じコマンドを何度も実行する場合などは、どのコマンドをいつ実行したのかが分かりにくくなってしまいます。そのような場合はこのコマンドを実行し、一旦ターミナルを見やすくしましょう。このコマンドは「clear」のみで実行できます。 exit ログアウトする場合に用います。通常のターミナル利用では、ログアウトせずにターミナルを終了しても問題ありません。しかし、サーバ等に接続している場合は必ずこのコマンドでログアウトしてからターミナルを終了しましょう。このコマンドは「exit」のみで実行できます。 exitではなく、「logout」コマンドでもログアウトすることができます。さいごに今回の記事は以上です。ターミナルではかなり高度な設定や操作をおこなうことができます。しかし、コマンドを一度実行してしまうと、その操作を取り消すことはできません。 rmコマンドの欄にも記載しましたが、コンピュータ中の重要なファイルを消去してしまったり、破損させてしまったりした場合は、起動しなくなる場合も起こりえます。インターネット上では、ターミナルで実行できる様々なコマンドが紹介されていますが、どのような動作をするのか分からないコマンドは、十分に調べてから実行するようにしましょう。 [お知らせ]TechAcademyでは初心者でもエンジニアになれるオンラインブートキャンプを開催しています。各自にパーソナルメンターがつきます。また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。

プログラミング

HTMLでvideo要素で動画が自動再生されない原因と対処法を現役エンジニアが解説【初心者向け】

HTMLでvideo要素で動画が自動再生されない原因と対処法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも、HTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 video要素で動画が自動再生されない原因と対処法について詳しく説明していくね！大石ゆかりお願いします！目次 video要素について video要素の注意点と問題点自動再生されない原因と対処法まとめ video要素について video要素はWebページ内に動画を埋め込む要素です。簡単なサンプルプログラムを見てみましょう。なお動画はフリー素材(商用利用可能)なものを以下のサイトから使用しています。 Mazwai – Free video clips <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Cache-Control" content="no-cache"> <title>Sample</title> <style> video { width: 300px; height: auto; } </style> </head> <body> <video src="myvideo.mp4" controls muted autoplay playsinline

HTML

HTMLで複数の動画切り替えを実行する方法を現役エンジニアが解説【初心者向け】

HTMLで複数の動画切り替えを実行する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも、HTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介複数の動画切り替えを実行する方法について詳しく説明していくね！大石ゆかりお願いします！目次動画を再生するには複数の動画を切り替えるには複数の動画を切り替えてみよう動画を再生するには HTMLを動画で再生させるためにはvideoタグを使う方法があります。以下のようにvideoタグにsrc属性で動画のリンクや保存先を指定すれば動画を表示、再生させることができます。 <video src="./video.mp4"></video> videoタグについて詳しくは以下の記事をご覧ください。 HTML5のvideoタグで動画のストリーミング配信の仕方を現役デザイナーが解説【初心者向け】 [PR] Webデザインで副業する方法とは複数の動画を切り替えるにはさて、先ほど紹介した方法だと動画を一つしか再生できませんが、ここから複数の動画を動的に変更させるためにはどうすればいいのでしょう？まず真っ先にサーバーサイドのコードを用意して動画ごとにページを作ることですが、それだと用意するファイル数も多くなりますし、毎回サーバーリクエストを行なうことになります。同じページ上で複数の動画を動的に切り替えるためには、videoタグのsrc属性が再生する動画ファイルを指定しているので、src属性の値を変えるためにJavaScriptを使う方法があります。簡単に手順をまとめると以下のようになります。 Videoタグにidをもたせて、動画を再生するファイルgetElementByIdメソッドでVideoタグを取得できるようにするボタンなどでgetElementByIdメソッドを実行し、srcの値を変更する関数を入れるボタンには関数に渡す引数の値をつけておく大体このような手順です。実際にサンプルを動かしながら実装方法をみていきましょう。複数の動画を切り替えてみようそれでは実際にサンプルを動かしてみましょう。以下のサンプルHTMLを適当なフォルダに保存します。動画ファイルはHTMLと同じ保存先に保存しましょう（mp4推奨）。動画のファイル名はサンプルを参考に適宣変えてください。なお、手元に再生できる動画が無い方は以下のリンクのサイトの動画であればフリー素材の動画をダウンロードできます。 https://pixabay.com/ja/videos/ <head> <title>ビデオデモ</title> <meta charset="utf-8"> </head> <body> <h1>ビデオストリーミング</h1> <video id="movie" src="./1.mp4" controls width="320" height="240"></video> <hr> <h3>再生する動画を選択</h3> <button onclick="playVideo(1)">1</button> <button onclick="playVideo(2)">2</button> <button onclick="playVideo(3)">3</button> </body> <script> function playVideo(num) { console.log(num); tag = document.getElementById("movie"); switch (num) { case 1: tag.src = "./1.mp4"; break; case 2: tag.src = "./2.mp4"; break; case 3: tag.src = "./3.mp4"; break; } } </script> 実際にHTMLを保存したら、画像のような画面でボタンを押すと動画が簡単に切り替わります。ちなみに今回はposter属性を付けませんでしたが、poster属性も変わるようにしたいときも同様の方法で動画と一緒に切り替えることができます。監修してくれたメンターメンター三浦モバイルゲームを運用している会社のエンジニアをしています。趣味でWEB開発やクラウドコンピューティングもやっており、ソフトもハードもなんでもやります。 TechAcademyジュニアではPythonロボティクスコースを担当しています。好きな言語はpython, Node.js 大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

HTML

HTMLで埋め込み動画の音声を消す方法を現役デザイナーが解説【初心者向け】

HTMLで埋め込み動画の音声を消す方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介埋め込み動画の音声を消す方法について詳しく説明していくね！大石ゆかりお願いします！動画を埋め込むvideoタグ以前はwebサイトに動画を埋め込みたい際、FlashやQuickTimeなどのプラグインを使うのが一般的でしたが、HTML5ではvideoタグを使って簡単に動画を表示させることができます。基本的なコードはいたってシンプルです。 <video src="hoge.mp4" controls></video> これで動画をいとも簡単に埋め込むことができます。また、videoタグはimgタグとは違い、閉じタグが設定されているので <video src="hoge.mp4" controls> <p>お使いのブラウザは古いので、この動画を見ることができません。</p> </video> のように、動画がサポートされていないブラウザに対して代替テキストを入れ子にして記述することもできます。音声を消すmuted属性とても簡単な動画の埋込ですが、サイトを開いたとき、もしくは再生ボタンを押したときにいきなり音が鳴ってしまったら閲覧者もびっくりしますし、スマホなどでは周りの迷惑になってしまいます。そんな時に設定しておきたいvideoタグの属性が「muted」です。こちらを記述しておくことで、動画が再生されたときは最初は音を消した状態で再生されるように設定することができます。 videoタグの属性ですので、videoタグ内に記述してあげるだけなので、いたって簡単です。 <video src="hoge.mp4" muted controls></video> たったアルファベット5文字を記述するだけなので、videoタグを用いるときはなるべく記述してあげたほうがいいでしょう。 [PR] Webデザインで副業する方法とは埋め込み動画の音声を消してみよう実際に音声を消した状態で動くコードを用意いたしました。コードはコチラです。一応対応ブラウザの幅を広げるため.webmの拡張子の動画も用意しておきました。 <video controls muted> <source src="https://techacademy.jp/magazine/wp-content/uploads/2020/01/video.mp4"></source> <source src="https://techacademy.jp/magazine/wp-content/uploads/2020/01/video.webm"></source> </video> ぜひ試してみてください。監修してくれたメンターメンター増田直子 40歳直前までHTMLの存在すら知らなかったのですが、現在はWordPressを中心としたwebデザイン/コーディングをしているフリーランサーです。趣味はスキューバーダイビング・年間3度は海のある国内外へ旅行してます。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

HTML

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

HTML5のvideoタグで動画のストリーミング配信の仕方を現役エンジニアが解説【初心者向け】

ストリーミングとは

メリット

デメリット

videoタグの基本的な使い方と高度な設定を知ろう

基本的な使い方

サムネイルをつける

自動再生する

サイズを調整する

動画を埋め込んで再生してみよう

監修してくれたメンター

関連するキーワード

あわせてよく読まれている記事

HTML5でストリーミング動画配信を実装する方法を現役エンジニアが解説【初心者向け】

今さら聞けない！GitHubの使い方【超初心者向け】

今さら聞けない！ターミナルの使い方【初心者向け】

HTMLでvideo要素で動画が自動再生されない原因と対処法を現役エンジニアが解説【初心者向け】

HTMLで複数の動画切り替えを実行する方法を現役エンジニアが解説【初心者向け】

HTMLで埋め込み動画の音声を消す方法を現役デザイナーが解説【初心者向け】

TechAcademyから
現役エンジニアの方へ
お知らせ

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

ストリーミングとは

メリット

デメリット

videoタグの基本的な使い方と高度な設定を知ろう

基本的な使い方

サムネイルをつける

自動再生する

サイズを調整する

動画を埋め込んで再生してみよう

監修してくれたメンター

記事を検索

関連するキーワード

関連する記事

あわせてよく読まれている記事

TechAcademyから 現役エンジニアの方へ お知らせ

TechAcademyから
現役エンジニアの方へ
お知らせ