TechAcademy（テックアカデミー） プログラミング Python PythonでHTMLを解析（パース）する方法を現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
Python

PythonでHTMLを解析（パース）する方法を現役エンジニアが解説【初心者向け】

初心者向けにPythonでHTMLを解析（パース）する方法について現役エンジニアが解説しています。パースとは、一定の規則で記述されたテキストを解析し、プログラムで扱いやすいようなデータに変換する処理のことです。HTMLParserクラスやBeautifulSoupがあります。

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

PythonでHTMLを解析（パース）する方法について解説します。

そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。

 

田島悠介

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

大石ゆかり

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

田島悠介

PythonでHTMLを解析（パース）する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

HTMLパーサーとは

パーサー(parser)とは、一定の規則で記述されたテキストを解析し、プログラムで扱いやすいようなデータに変換する処理のことです。日本語では「構文解析」と言います。

英語のパース(parse)に由来しており、これは文章を解釈、解析する、といった意味です。特にHTMLパーサーとは、HTML文書をパースする処理のことです。

Webサイトから所望のデータを抽出する際に、頻繁に用いられます。

HTMLParserによる方法

HTMLParserはPythonの標準的なHTMLパーサーです。HTMLの開始タグ、終了タグを発見したり、属性を抽出したりできます。

ソースコード

from html.parser import HTMLParser

class MyHTMLParser(HTMLParser):
    def handle_starttag(self, tag, attrs):
        print("タグ開始:", tag)

    def handle_endtag(self, tag):
        print("タグ終了 :", tag)

    def handle_data(self, data):
        print("その他データ :", data)

parser = MyHTMLParser()
parser.feed('<title>タイトル</title>'
            '<h1>見出し</h1>')

 

実行結果

タグ開始: html
タグ開始: head
タグ開始: title
その他データ : タイトル
タグ終了 : title
タグ終了 : head
タグ開始: body
タグ開始: h1
その他データ : 見出し
タグ終了 : h1
タグ終了 : body
タグ終了 : html

 

解説

HTMLParserクラスを継承し、MyHTMLParserクラスを定義しました。

handle_starttag, handle_endtag, handle_datatagメソッドをオーバーライドしました。タグの開始、終了等にあわせて、これらメソッドが呼び出されます。

MyHTMLParserのインスタンスを作成し、サンプルのHTML文書を入力しました。

[PR] 未経験からWebエンジニアを目指す方法とは

Beautiful Soupによる方法

Beautiful Soupはサードパーティ製のPythonライブラリで、HTML, XML文書のパースに多用されています。

HTML文書の階層構造を自動的に解析し、データ構造に反映するので、文書中の目的とするデータを容易に取得できます。

ソースコード

from bs4 import BeautifulSoup
html_doc = '<html><head><title>タイトル</title></head><body><h1>見出し</h1></body></html>'
soup = BeautifulSoup(html_doc, 'html.parser')
print('title: ', soup.title.string)
print('h1: ', soup.body.h1.string)

 

実行結果

title:  タイトル
h1:  見出し

 

解説

先と同様のコードをBeautiful Soupで実装した例です。目的のタグ(title, h1)により簡潔にアクセスできることがわかります。

監修してくれたメンター

橋本紘希

システムインテグレータ企業勤務のシステムエンジニア。

開発実績: Javaプログラムを用いた業務用Webアプリケーションや、基幹システム用バッチアプリケーションなどの設計構築試験。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

TechAcademyでは、初心者でもPythonを使った人工知能（AI）や機械学習の基礎を習得できるオンラインブートキャンプPython講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

Pythonで型を指定する方法を現役エンジニアが解説【初心者向け】

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

Pythonをバージョン指定でインストールする方法を現役エンジニアが解説【初心者向け】

Pythonをバージョン指定でインストールする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して、初心者向けに解説します。...
Python

PythonでWebサイトへ自動ログインする機能の実装方法を現役エンジニアが解説【初心者向け】

PythonでWebサイトへ自動ログインする機能の実装方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します...
Python

バイト型を扱う！Pythonでbytesを扱う方法【初心者向け】

Pythonでbytesを扱う方法について解説します。 そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むと...
Python

Pythonの配列記述にあるコロンの意味について現役エンジニアが解説【初心者向け】

Pythonの配列記述にあるコロンの意味について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Pyth...
Python

Pythonのクラス継承について現役エンジニアが解説【初心者向け】

Pythonのクラス継承について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して、初心者向けに解説します。   ...
Python

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

JavaのTimerクラスの使い方を現役エンジニアが解説【初心者向け】

JavaのTimerクラスの使い方について解説します。実際にプログラムを書いて説明しているので、ぜひ理解しておきましょう。   そもそもJavaについてよく分からないという方は、Javaとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJava講座の内容をもとに作成しています。     田島悠介 今回は、Javaに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Timerクラスの使い方について詳しく説明していくね！ 大石ゆかり お願いします！   Timerクラスとは Timerクラスは一定間隔で定期的な処理を行うためのクラスです。例えば1秒ごとに時刻を表示したい等の場合に利用できます。   Timerクラスで定期的な処理を行う方法 java.util.Timerクラスの public void scheduleAtFixedRate(TimerTask task, long delay, long period)　メソッド、または public void schedule(TimerTask task, long delay, long period)　メソッドを使います。 第一引数として実行したいタスクを指定します。TimerTaskクラスを継承したクラスを作成し、runメソッドの中に実行したい処理を実装します。 第二引数として、開始時刻をミリ秒で指定します。 第三引数は実行間隔で、同じくミリ秒で指定します。 最初のタスクの実行開始時刻を基準に、次のタスク開始時刻を設定するのに対し、scheduleメソッドは直前のタスクの開始時刻を基準に、次のタスク開始時刻を設定します。 その為なんらかの影響でタスクに遅延が発生した場合、遅延後のタスク開始時間を元に次のタスクが実行されます。つまり遅延が発生するとそれ以降の処理がすべて遅延するということになります。 実装方法としてはTimerTaskクラスを継承したクラスを作成し、runメソッドを実装します。Timerクラスのインスタンスを作成し、scheduleAtFixedRateおよびscheduleメソッドを実行する際に継承クラスのインスタンスと、開始時刻、実行間隔を指定するという流れです。   [PR] 未経験からWebエンジニアを目指す方法とは実際に書いてみよう まず、タスククラスです。 import java.util.Date; import java.util.TimerTask; public class SampleTask extends TimerTask { // 実行回数 static int i = 1; public void run() { try { System.out.println("-----------------------------------------"); System.out.println(i +
Java

【事例付き】自然言語処理とは！仕組みやライブラリを解説

2016年末頃、Google翻訳の翻訳精度が飛躍的に向上し、大きな話題となりました。それまでは、英語を日本語に翻訳すると不自然な文章になってしまうことも多かったのですが、現在では、より自然な日本語の翻訳結果を得られるようになっています。それには人工知能（AI）の研究成果が深くかかわっています。 SNSや自然言語の情報をデータ分析する上で、自然言語処理の理解は欠かせません。 自然言語処理とはどのような技術か、実際にどのようなサービスに使われているのか、ぜひ知っておきましょう。   なお本記事は、TechAcademyのAIオンライン講座の内容をもとに作成しています。   目次 自然言語処理とは 自然言語処理の仕組み、原理とは 自然言語処理の事例 自然言語処理ができるライブラリまとめ   田島悠介 今回は自然言語処理について解説するよ。 大石ゆかり 田島メンター！自然言語処理って、なんだか難しそうですね。理解できるでしょうか〜？ 田島悠介 丁寧に説明するから大丈夫だよ。詳しく見ていこう。 大石ゆかり 分かりました！ 自然言語処理とは 自然言語処理とは、私たちが日常的に使っている言葉（以降「自然言語」と表記します）をコンピューターに処理させる一連の技術のことです。人工知能（AI）と言語学の一分野です。 自然言語は、人間がお互いにコミュニケーションを行うために自然発生しました。そのため、プログラミング言語と違い、曖昧さを含みます。また文化的な背景、時代や地域によって様々に変化するため、ルール化が難しい、コンピューターにとって扱いづらいという特性があります。 自然言語処理は、とても古くから研究されており、その研究分野は多岐に渡ります。また現在でも毎年のように各分野で新しい技術が生まれています。 大規模データ時代に求められる自然言語処理   [PR] 未経験からWebエンジニアを目指す方法とは自然言語処理の仕組み、原理とは 自然言語処理は、「形態素解析→構文解析→意味解析→文脈解析」の順で行われます。 また、自然言語処理の前段として、処理対象となる文章群（コーパスといいます）と、単語を識別するための辞書が必要となります。現在では、インターネットを経由して、日々大量の言葉がやりとりされ、多くの新しい単語が生まれています。 処理対象となる文章を収集することが、とても容易になったとも言えます。また、それらの文章から自動的に辞書を作る試みも行われています。   形態素解析 自然言語を、辞書や文法ルールをもとに、「意味を持つこれ以上分割できない最小の単位（以降、総称として「単語」と表記します）」に分割する作業です。 例えば「高い富士山と海が美しい。私はそれを彼女に伝えた」という文章があったとします。前半部分「高い富士山と海が美しい」を形態素解析すると、以下のようになります。 自然言語処理では多くの場合、単語を1つの単位として表し、以降の「構文解析→意味解析→文脈解析」の処理により意味を導き出して行きます。そのため、形態素解析は、自然言語処理で必要不可欠な最初の手順となります。 英語を含む多くの言語では、基本的に単語と単語の間はスペースで区切られているため（わかち書き）、単語への分割は非常に容易です。しかし日本語や中国語、タイ語などでは、通常単語と単語の間にスペースを挿入しないため、文を単語に分割する処理はより複雑となります。   構文解析 形態素解析で得られた単語の関係性を解析する作業です。 係り受け解析とも呼ばれます。構文解析の結果は「構文木」というもので表すことが出来ます。例えば「高い富士山と海が美しい」を構文解析した構文木は以下のようになります。 しかし、もう一つの例として、以下のように「高い」が「富士山と海」に係る例も考えられます。 日本語に慣れていると、前者が正解だということがすぐ分かりますが、それは構文解析とともに意味解析も行っているためです。構文解析段階では、どちらも正解となります。   意味解析 構文解析で文章の係り受けの構造が把握できました。しかしこの状態では、 高いのは富士山だけか、海も高いのか 美しいのは「高い富士山と海」なのか、海だけ美しいのか といった点がはっきりしておらず、正しいものを選択しなければなりません。これは、「意味」を利用して正しい構文木を選択することを意味します。それが意味解析です。 意味解析では、辞書をもとに、単語と単語の関連性を調べながら、正しい構文木を選択します。 「富士山」と「高い」は関連性が高い 「海」と「高い」は関連性が低い よって、高いのは富士山だけ しかし、意味解析は、コンピューターにとっては非常に難しい作業です。コンピューターは「意味」という概念は分かりません。ルール化して伝える（プログラムする）必要がありますが、前記した「単語と単語の関連性」だけが「意味」のルールではないためです。 例えば「高い富士山」と表現すれば、「山としての富士山」を想像しますが、場合によっては「富士山」という商品があり、その価格が高いということを意味しているのかもしれません。 また、前出の文章「高い富士山と海が美しい。私はそれを彼女に伝えた」において、「それを彼女に伝えた」の「それ」とは何を指すのでしょうか？　その答えを得るには、文脈を通して判断する必要があります。   文脈解析 文脈解析は、複数の文を通して、形態素解析と意味解析を行います。文脈解析は、単に解析の対象が長くなっただけではなく、文の関係性も解析しなければならない、とても複雑な作業です。 例えば「高い富士山と海が美しい。私はそれを彼女に伝えた」において「それ」は直前の文章を指します。しかし文章の並びをかえるだけで、とたんに「それ」が指すものは分からなくなってしまいます。 「私はそれを彼女に伝えた。高い富士山と海が美しい」 ここまでの、形態素解析→構文解析→意味解析→文脈解析の過程を経て、やっとコンピューターが自然言語処理を完了した状態となります。それでは、冒頭にお伝えした、Google翻訳の翻訳精度の向上と人工知能（AI）とは、どのような関係があるのでしょうか。   人工知能（AI）との関係 形態素解析と構文解析は、コンピューターにとって比較的行いやすい作業です。しかし意味解析や文脈解析は、より高次元な判断が必要となります。これまで、コンピューターによる翻訳結果が不自然な文章になりがちだったのは、正しい意味解析や文脈解析を行うのが、非常に難しかったからです。 意味解析や文脈解析を行うには、大量のデータでコンピューターに学習させることが必要です。 大量のデータでコンピューターに学習させることを「機械学習」と言います。「機械学習」は人工知能（AI）で総称される技術の１つです。 従来は、紙の辞書を編纂するように、人間がひとつづつ、単語意味や関連性を記述してコンピューターに学習させていました。もととなる文章も、新聞や書籍などから転記していたため、非常に手間と時間がかかりました。 しかし2000年代に入り、高速・高性能なコンピューターが容易に入手できるようになりました。また、インターネットの発展により、従来より格段に多くのデータを収集できるようになりました。 大量の学習データを高速にコンピューターに学習させることができる環境が整ったことで、これまでの何倍ものスピードで、意味解析や文脈解析の学習が行えるようになりました。それにより、コンピューターが人間により近い「意味」の概念を習得できるようになり、自然言語処理の精度が飛躍的に向上することになりました。   自然言語処理の事例 それでは、自然言語処理が使われている例をいくつか見てみましょう。 日本語入力（かな漢字文字変換） キーボードで入力した「かな文字」を「漢字混じり文字」に変換する際、自然言語処理が使われています。ワープロの時代から研究されている分野で、最近は長い文章も精度良く変換できるようになっています。 ATOK Google 日本語入力 MicrosoftIME   機械翻訳 冒頭にお伝えした、Google翻訳をはじめ、ここ数年で急速に精度が上がってきている分野です。また合成音声と組み合わせたサービスも一般的になってきています。 Google翻訳 音声翻訳アプリ NICT（独立行政法人 情報通信研究機構）が開発した多言語翻訳エンジンが使われています。   対話システム 音声または文字で入力した文章を、コンピューターが理解して応答を返すシステムです。スマートスピーカーやSiriなどのアシストサービス、LINEのボット（自動応答システム）などがあります。また、対話システムを容易に構築できるAPIも提供されています。 Amazon Echo LINE Clova WAVE Google Home Siri Cortana りんな Microsoftが作成したLINEの自動応答システム Watson Conversation 対話システムAPI   自然言語処理ができるライブラリまとめ 最後に、自然言語処理ができるライブラリについて見ていきましょう。 MeCab 日本語の自然言語処理器（形態素解析器）システムとして最も有名です。 MeCab   JUMAN こちらも形態素解析器です。WikipediaやWebサイトから収集した辞書により、MeCabと比較して、最近の言葉でも正確に処理を行うことが可能です。 JUMAN   Cabocha 構文解析器です。MeCabと組み合わせて使用します。機械学習(SVM)を利用しています。 Cabocha   KNP 構文解析器です。Webから自動構築した大規模格フレームにより、より精度の高い解析が行えます。 KNP   田島悠介 自然言語処理について、理解は深まったかな？ 大石ゆかり 身近に感じていましたが、とても奥が深い技術なんですね。勉強になりましたー！ 田島悠介 気軽に利用できるAPIもあるから、使ってみるといいよ。深層学習や機械学習、画像認識技術については、また別のところで説明するね。 大石ゆかり 分かりました。ありがとうございました！   今回は、自然言語処理について解説しました。 これから自然言語処理を勉強したい、機械学習を使って何か作ってみたいという方は最初に理解しておきたい内容でしょう。   また、オンラインのプログラミングスクールTechAcademyでは、AIオンライン講座を開催しています。 AI（人工知能）の構築に必要な機械学習・ディープラーニングについて実践的に学習することができます。 現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、習得することが可能です。 この記事を監修してくれた方 太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア 普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。 開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント 地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。
機械学習

PythonでWeb上のHTMLを取得する方法を現役エンジニアが解説【初心者向け】

PythonでWeb上のHTMLを取得する方法について解説します。 そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 PythonでWeb上のHTMLを取得する方法について詳しく説明していくね！ 大石ゆかり お願いします！   Web上のHTMLを取得する方法 Web上のHTMLを取得して解析することをスクレイピングと呼びます。Pythonでスクレイピングを行うにはRequestsとBeautiful Soupというライブラリの組み合わせがよく利用されています。 まずは利用する前にインストールを行っておきましょう。パソコンがMacならターミナル、Windowsならコマンドプロンプトから以下のコマンドでインストールします。   pip install requests pip install beautifulsoup4   Web上のHTMLを取得するのがRequestsです。Pythonには標準でurllibというライブラリが存在しますが、Requestsはそれよりもシンプルに、人が見て分かりやすくプログラムを記述できます。 Requestsの利用方法は以下の通りです。   requests.request(method, url, オプション)   オプションの指定方法など、詳しくは公式ドキュメントなどを参考にしてください。 公式サイト 日本語ドキュメント   取得したHTMLを解析する方法 取得したHTMLを解析するのがBeautiful Soupです。 HTMLを解析するソフトウェアをパーサーと呼びます。 Beautiful Soupの利用方法は以下のとおりです。   soup = BeautifulSoup(テキスト, 'html.parser')   HTMLを解析した結果がオブジェクトsoupに格納されます。詳しくは公式ドキュメントなどを参考にしてください。 公式サイト   [PR] 未経験からWebエンジニアを目指す方法とは実際に書いてみよう 今回のサンプルプログラムでは、Beautiful Soupの公式サイトから、見出しのタイトルを取得してみます。   import requests from bs4 import BeautifulSoup # WebサイトのURLを指定 url = "https://www.crummy.com/software/BeautifulSoup/bs4/doc/" # Requestsを利用してWebページを取得する r = requests.get(url) # BeautifulSoupを利用してWebページを解析する soup = BeautifulSoup(r.text, 'html.parser') # soup.find_allを利用して、見出しのタイトルを取得する elems = soup.find_all("a", class_="reference internal") for e in elems: print(e.getText())   実行結果は以下のようになります。 実際のスクレイピングでは、ここからさらにHTMLの要素や属性を確認しながら抽出条件を絞り込んでいきます。   Porting code to BS4 what the diagnose() function says Differences between parsers Parsing XML Navigating the tree Searching the tree ...（略）   監修してくれたメンター 太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア 普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。 開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント。 地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもPythonを使った人工知能（AI）や機械学習の基礎を習得できるオンラインブートキャンプPython講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
Python

サイト運営に必須！無料で使えるアクセス解析ツール10選

Webサイトを運営していく中で欠かせないのがアクセス解析。 どれだけ良いサイトを作っても人が来ないと意味がありません。どうやったらもっと人が来るか、どのページが一番見られているかなど分析することで改善に繋がります。 今回はサイトのアクセス解析ができるツールをまとめて紹介しています。知らないツールがあればぜひ試してみてください。   なお本記事は、TechAcademyのWebマーケティングオンラインブートキャンプのカリキュラムをもとに執筆しています。   Googleアナリティクス Webのアクセス解析ツールと言えばこれでしょう、逆にこれ以外を思い浮かべる方が難しいです。題名の通りGoogleがサービスも元です。 広告の投資収益率の測定や、Flash、動画、ソーシャル ネットワーク（facebook/twitterなど）のサイトやアプリケーションのトラッキング、売り上げやコンバージョン数に加え、ユーザーの行動や訪問経路の解析までなんでもカバーします。 さらにインターフェイスも見やすいのでまさに無敵です。とりあえず悩んだらこれを選んで間違いはないでしょう。 Googleアナリティクス   忍者アクセス解析 こちらもかなり有名で使われている方も多いと思います。何より設置が簡単ですね。特に無料ブログである忍者ブログとの親和性も高いのでそのコンボはオススメです。 無料版は広告が出てしまうのですが、有料版にすると広告を非表示にできます。ログは4ヶ月間保存できます。アクセス解析初心者から業務までまで幅広く使えるのが人気の理由でしょう。 忍者アクセス解析   [PR] 未経験からWebエンジニアを目指す方法とはYahoo!アクセス解析 これもまた超有名検索サイトYahooのアクセス解析です。Googleのほど有名ではありませんが、原則無料で使え、ユーザー属性分析、リアルタイム分析、組織分析、広告・コンバージョン分析など機能的には引けを取りません。 直感的に使えるグラフィカルなインターフェースもみやすく初心者でも楽しいです。各種基本的数値のリアルタイム解析やリアルタイム足あとなど、リアルタイム分析に重点を置いている点、訪問組織分析やユーザー追跡など、個別の分析が可能な点は他とは一線を画すため重宝されている。 最初に紹介したGoogleアナリティクスと併用して使っている方も多くいて、それがベストな選択肢なのかもしれません。 Yahoo!アクセス解析   Ptengine 登録アカウント数55,000アカウント以上になり最近注目が集まってきているアクセス解析ツールです。グッドデザイン賞も取得したことからセンスのよさが伺えます。なのでユーザーのサイト内での行動をサーモグラフィーで可視化するヒートマップ機能などのグラフィカルな特徴が印象的で使っていてとても楽しいツールといえるでしょう。 リアルタイム解析もうれしいです。カスタムイベントトラッキング機能というのもあり、それは計測したいリンクを管理画 面上で選択すると、そのリンクに対するクリックが計測される機能 です。 WordPressと親和性も高く、専用プラグインがあり、すぐに導入できる点もありがたいですね。 Ptengine   アクセス解析研究所 アクセス解析研究所は、水準が非常に高く独特の機能で人気を集めるアクセス解析ツールです。他社にはない新機能が利用てきるのが特徴で、GPSで誰かの居場所を解析したり、相互リンクの損得バランスのサイトごと分析と面白いことができそうですね。 広告が表示されないので、デザイン的にも美しいです。もちろん無料です。 アクセス解析研究所   FC2アクセス解析 – 無料アクセス解析レンタル/SEO対策 ご存知FC2のアクセス解析ツールです。検索キーワードチェック、リンク元解析、携帯対応、120ページ解析、など他さまざまな機能が搭載されてます。もちろん無料ブログサービスのFC2ブログを利用している人は連携がとてもいいのでぜひ使うべきでしょう。 リアルタイム解析でもあるのもうれしいですね。ごちゃごちゃしてないシンプルなインターフェイスで、すっきり見やすい、管理画面が特徴的です。 FC2アクセス解析 – 無料アクセス解析レンタル/SEO対策   USER LOCAL（ユーザーローカル） USER LOCALは最近良く話題になる無料アクセス解析ツールです。Yahoo!アクセス解析と似ていますが、Yahoo!アクセス解析よりは面倒臭くなく、その点で導入しやすく、より初心者向けといえるでしょう。性別や年齢などのユーザー属性情報を自動で取得できるのも非常に便利です。 USER LOCAL（ユーザーローカル）   ace analyzer　（エースアナライザー） まだ最近できたばかりの比較的新しい解析ツールで、機能も充実していて注目が集まってきています。 アクセス解析用のタグをWEBサイトに設置することが簡単ですし、月・日・時間・曜日別が最初から閲覧できるのは楽で、使いやすいです。 ace analyzer　（エースアナライザー）   アクセス解析 [AccessAnalyzer.com] アクセスログ、アクセス統計、アクセス元統計、システム統計、訪問者統計が解析できます。 アナログな昔ながらのインターフェイスで、数値のみを重視してチェックしたい方におすすめです。 アクセス解析 [AccessAnalyzer.com]   i2i.jp（アイツーアイドットジェイピー） 3G携帯サイト対応なので、3G携帯用ブログページも解析可能で高性能生ログ検索や訪問者のルートが追える足あと追跡機能が搭載されています。 i2i.jp（アイツーアイドットジェイピー）   以上、サイトのアクセス解析ができるツールを集めてみました。 多くの企業がGoogle Analyticsを利用しているかと思いますが、他にも解析ツールはたくさんあります。ツールによって使える機能はそれぞれ違うので、自分たちの運営しているサービスに合わせて選びましょう。 まだこういったツールを導入していないという人は、今回紹介したツールは基本無料で使えるので、ぜひ試してみてください。 [お知らせ]TechAcademyでは初心者でもWebマーケターになれるWebマーケティングオンラインブートキャンプを開催しています。SEOも含めてメンターのサポートによって短期間で習得可能です。
Webマーケティング

日本政府の衛星データプラットフォーム「Tellus（テルース）」とは【インタビュー】

経済産業省からの委託事業として衛星データプラットフォーム「Tellus（テルース）」を開発・運用するさくらインターネット株式会社の竹林正豊さん（写真左）と田中康平さん（写真右）にインタビューしました。 Tellusとは何か、衛星データとは何か、衛星データの市場規模とTellusの特徴、そして学習方法と今後の展望まで伺いました。 お話を伺った人 竹林正豊氏 さくらインターネット株式会社　新規事業部所属。 Tellus xData ALLIANCE Project/PublicRelation Group Producer 2006年大阪芸術大学 芸術学部建築学科修了。慶應義塾大学大学院 システムデザイン・マネジメント研究科在学中。ファッション雑誌編集者、広告クリエイティブエイジェンシーを経て2017年さくらインターネット入社。2018年6月より現職。同社では、クリエイティブディレクション、企画の知見を活かし、広報や広告宣伝、外部イベント、トレーニング、データコンテスト、オウンドメディアなどのプロジェクトを統括。 田中康平氏 さくらインターネット株式会社　新規事業部所属。 Tellus xData ALLIANCE Project/Business Development Group 超小型衛星の開発や衛星搭載電源の研究/開発に従事した後、2019年2月より現職。同社では衛星開発の知見を活かした衛星データの利活用事例検討やビジネス開発を担当。また、宇宙ビジネスメディア「宙畑-sorabatake-」にて企画・編集を担当。   Tellusとは ――最初に、Tellusがどういうものかについてお話いただければと思います。 Tellusとは政府衛星データを利用した新たなビジネスマーケットプレイスを創出することを目的とした、日本発のオープン＆フリーな衛星データプラットフォームです。 さくらインターネットが経済産業省から3年間の受託開発と運用を一任されているプロジェクトで、「宇宙産業ビジョン2030」という国の方針に紐づく形で衛星データのオープンデータ化を行っています。   ――衛星データとはどのようなもので、どのようなことができるのでしょうか？ 前提として、衛星データというと何か難しいもののように思われるのですが、特殊なデータとして見るのではなく、ビッグデータの1つと考えるとよいでしょう。 定期的に上空から地上の様子を撮影しているのが、衛星データです。 言い換えれば、上空から撮影している画像、と捉えると良いでしょう。 なので、プログラミングで画像処理できる人であれば、誰でも解析が可能です。 例えば、国立競技場を定期的に撮影すれば、建設の進捗状況を見ることができますし、空港を見れば、航空機が駐機場に何機いるか数えることもできます。 他の画像と少し異なる点があるとすれば、単なる画像ではあるものの、波長帯（バンド）ごとの画像がある、というところでしょうか。 詳細は省きますが、波長帯ごとの画像を見ることで、対象物の状態を捉えることができるようになります。 例えば、ある田んぼを定期的に撮影すれば、稲の育成状況を知ることができますし、地表面で温度が高いところを知ることもできます。 Tellusの場合、これらのデータは統合開発環境でPythonやR言語を駆使して解析できます。 そのため、ただ見るだけではなく、解析により田んぼの育成状況を知ったり、収穫時期を予測したりもできます。 credit：JAXA キャプション：衛星で撮影した田んぼ(左)とその活性度を示す指標を解析で求めた結果(右)   ――他のデータと比べて、エンジニアから見ると面白い点はありますか。 ある意味タイムマシンのようなもので、通常のデータでは測定しにくい変化を捉えられるのが面白いところだと思います。 IoTデバイスでずっと同じ点を観測し続ければ、高頻度に高精度なデータを取得できますが、「設置したとき」からの「設置した場所」のデータしか取得できません。 衛星データは面的に世界中を定期的に観測しているので、観測分解能は粗かったとしても蓄積された世界中のデータを確認できます。 点として観測している場合には、類推することが難しい問題も、面として観測していれば解決できることもあります。 そのため、本質的な変化をより観察しやすいと思います。 よく事例として取り上げられているのが森林破壊の問題についてです。 インドや中国は経済成長の影響から森林が凄く減っているイメージがありますが、実は森林の面積は増えているそうです。 点として、例えば木材の輸出量や林野火災で失われた面積についてのみ見ていたら分からなかったであろうことも、面として見ることで定量的に評価できるようになるのです。 衛星データを駆使して面で捉えたからこそ、森林が増えている事実に気付くことができた事例です。 他には、何かしらを解析するアプリケーションを作成した場合、日本のみならず、世界中をターゲットにできる点も面白いかと思います。 つまりは、日本の田んぼの育成状況を把握するアプリケーションを開発した場合、衛星データ自体は国内外問わず撮影されているため、海外の田んぼの育成状況を解析するソリューションとしてそのまま展開していくこともできる可能性があるのです。 そのため、開発したアプリケーションの潜在的な市場が広いということも面白い点と言えるでしょう。   [PR] 未経験からWebエンジニアを目指す方法とは衛星データプラットフォーム市場におけるTellusの特徴 ――衛星データ市場の現状を教えてください。 これまで宇宙開発は国主導が多かったのですが、最近では民間の衛星サービスが各国で始まっています。 2010年代には宇宙系のスタートアップ企業も多く出てきてたくさんの衛星が打ち上がりました。 今では1社で百何十基の衛星を運用している企業もあり、気軽に衛星が上がるようになっています。 それに伴い性能も高まっています。 具体的には、撮影する画像の質が上がり始めています。 高分解能の画像も撮れるようになったことで、例えば人影が見えたり、自動車のフロントガラスが撮影できたりします。 この動きの中で、衛星画像の利用促進施策が、アメリカやヨーロッパや中国などにおいて国主導で進んでいます。 衛星データビジネスは世界でも成功事例がまだ多くないため、私たちも手探りの中進んでいます。   ――世界的に見て未開拓な分野なので日本でも市場を延ばす余地があるということでしょうか。 その期待値は上がっている状態です。 世界を見ると、AmazonやSpaceXなどの企業も次に来るのは宇宙ビジネスだと信じて投資をしています。 また、日本でも、2019年には、100億円規模の出資を受けた会社が3社あります。 一方で、その注目度と投資額に反して、日本では宇宙ベンチャー企業は少ない現状もあります。 日本には70社弱しかなく、そこに100社弱のVCから計500億円程が投資されています。 ビジネス活用を促進してさらに宇宙ベンチャー企業を増やすことで、これをバブルにせず継続的な成長ができるよう支援していくつもりです。   ――様々な海外の衛星データが存在する中で、Tellusの独自性はどこでしょうか。 クラウド完結型であること、それから地上データを扱える点です。 今までの衛星データは、知識がないとどこのサーバに何のデータがあるのか分からない状態でした。 またデータサイズが大きく、衛星データを1枚ダウンロードするのに30分から1時間かかりました。 このような利用の煩雑さを解決すべく、Tellusは全てクラウド上で完結できるようにしています。 クラウド上にデータが揃っていて、クラウド上で解析できる環境を作っているのです。 これにより、強いネットワーク環境を持っていない方、高度なマシンスペックを持っていない人でも気軽に衛星データを解析できるようになります。 また、Tellus内で地上データを扱えるようにし、少しでも衛星データが活用しやすい状態も作ろうとしています。 その他の衛星データプラットフォームは衛星データだけを置いている場合が多いのですが、衛星データだけだと解析結果が正しいかどうか妥当性を検証しにくい点が課題です。 Tellusでは、点の地上データと面の衛星データを同じ場所に置いてあることで、活用の幅を広げていくことを試みています。   ――なぜ地上データの掛け合わせを行うことになったのでしょうか。 ビジネス活用による民需の増加がTellusのゴールにあるためです。 従来通りの学術利用目的の政府案件だったら、色々な場所に散らばっている衛星データをまとめて使えるプラットフォームを作るフェーズで終わりでした。 ただ今回が経済産業省からの案件で、ゴールが多くの人から利用してもらい宇宙産業を発展させることだと考えると、衛星データだけでは得意不得意があるので工夫が必要と考えました。 例えば、衛星データには広範囲を撮れる長所はありますが、一方で分解能が粗い短所があります。 それを補完できる地上データがあると、衛星データをさらに幅広く使えるようになります。 逆も然りで、ある点の情報から、他の点の情報を類推するのに衛星データを利用できます。解析結果と地上データを比較しやすい環境であれば、その妥当性をすぐに検証できるのです。 地上データと衛星データを掛け合わせお互いの不得意を補い、ビジネス利用しやすくなることがゴールです。   Tellusの活用事例 ――実際に、Tellusを活用した解析の事例はありますか。 オウンドメディアである宙畑を通して、おいしいみかん畑を探してみる、電動自転車が売れる場所の推測、テニスコートの素材、桜の開花時期の予測などを行いました。 他には、海釣りで魚が釣れそうな場所の予測も行いました。 魚のいる場所はある程度水温や潮目から推測でき、衛星データでそれらが分かるため、場所を割り当てて実際に釣りに行き、その結果、魚がたくさん釣れた事例もあります。 これらの様子となぜ釣れたかの考察をオウンドメディアの「宙畑-sorabatake-」で公開しています。 メディアで紹介した事例を元に、実践してみたり、アイデアを練ったりして、新たな事例を生み出していってほしいですね。 宙畑-sorabatake-『衛星データで漁場を探して、実際に釣りに行ってみようvol.1 ~データ確認編~』の画像   衛星データ全体に目を向けると、土砂崩れの検出、船の検出、海氷の検出などを行うアプリケーションが世の中には出始めていています。 オイルタンクの貯蔵量から石油の残量を推測して、石油価格を予測する使い方もされています。 石油タンクは落し蓋に似た形状になっていて、タンク中の石油残量に応じて蓋の位置が変わります。 そうすると、影の高さが変化するため、影の面積から石油の残量を推定できるのです。 様々な方が宇宙市場に入っていくことで、このような事例がどんどん出てくることを期待しています。 石油タンク監視 Credit : Ursa Space Systems   ――Tellusを扱うにはプログラミングの学習は必須なのでしょうか。 必須ではないですし、プログラミングを習得していない人でも使いやすい状態を目指しています。 Tellusはインターフェースを2種類提供しており、プログラミングができる人向けの統合開発環境と、プログラミング不要でボタンを押しながら解析できる環境（GUI）があります。 GUIのインターフェースを用意している意図は、プログラミングができない人にも衛星データに興味を持っていただけたらと考えているためです。 そして、そのような人が衛星データへの興味を深め、より幅広い活用のためにプログラミングを学習し、ビジネスシーンで活用してくれることが理想です。 ただ、プログラミングができる方が、データを扱う上での選択肢は増えますので、より楽しめるとも思っています。そのための施策も合わせて提供していきたいと考えています。   Tellusの学習について ――Tellusを通じた人材育成についてお聞かせください。 私たちは衛星データを提供して終わりにするのではなく、ユーザー育成を積極的に行なっています。 衛星データとプログラミング共に未経験の人達も、衛星データを使ったビジネスをするステップまで引き上げていきたいと考えています。 ユーザーの中には、「Pythonは習得しており、興味もあるが衛星データで何ができるのか分からない」方が多いため、相談会や講習を行っています。 2018年度まではハンズオンのみで講習を提供していましたが、応募された方が1,000名以上と想定より非常に多く、受講できる方が限られてしまいました。 そこで、全国誰でも参加できるように2019年度から取り組み始めたのがeラーニングです。 また、これまでの学習ターゲットは「衛星データは知らなくても一定Pythonが触れる人」でした。 ただ、「Pythonが触れなくても衛星データに興味がある人」も非常に多く、そういった人々に学習の機会を提供すれば衛星データを用いてビジネス活用する人が増えるのではないかという仮説を立て、今回TechAcademyと共同でPythonの学習を行う初心者向けのコンテンツを作りました。   ――eラーニングの施策は現状いかがでしょうか。 SNSを見ていても「良かった」と言ってくださる方が多いので、凄くいい施策だったと思います。 TechAcademyとの施策で言えば、学習者の熱量が高く、質問が想定より多い印象です。 初心者向けなので、メンターの存在が重要というのは元々の仮説としてありましたが、実証された形ですね。 また、最初はSNSで細々と宣伝しただけだったため、人数が集まらないことを懸念していましたが、フタを開けてみると200人の枠に400人を超えるエントリーがありました。 これにより、普段たちが接していない方々にもニーズがあったことに気がつけました。   ――どのような方がエントリーされていますか。 今回は初心者向けと銘打ったこともあり、開発経験が1年未満だったりプログラミング未経験の方が大多数でした。 また申し込みの際に、400字以内で応募の動機を書く箇所がありましたが、熱意の強い方が多い印象でした。 別軸でいうと、中高生、新規事業をしていて最近流行り始めたから知りたい方、他には解決したい明確な課題を持って申し込まれた方が多い印象でした。 このような幅広い層の方々が利用することで、衛星データの利活用に関する多くの経験が蓄積し、利用事例に繋がることを期待しています。 今回はとてもバランスよく申し込んでいただけたので、今後はさらに幅広い層の方に申し込みしていただければいいなと思っています。 そして今後、受講された方々がTellusを使ってみた結果を公開していく流れができるとさらに嬉しいですね。   ――Pythonを習得しているエンジニアがTellusを使うときには、具体的にどういう学習が必要になりますか。 APIの叩き方や、衛星画像特有の前処理があるので、その辺りの知識がある程度必要になります。 そのため今回の初心者向けTellus学習コースでも、画像処理の基礎を習得できる構成にしています。 普通のカメラはRGB全部まとめて出力されるのですが、衛星はRごと、Gごと、Bごと、と波長毎にスキャンして撮影するので、それぞれの波長を組み合わせながら処理していき、物理的に意味がある値として解析する、ということができるように学習するといいと思います。 また、単なる画像として扱い、画像解析した結果から何かを読み取るというのも良いでしょう。 近年の流行りとしては、物理的な意味を捉えながら解析するというよりは、機械学習等を用いて画像解析した結果から状態を推測する、という方が中心になっているかもしれません。   Tellusの今後の展望 ――今後、利用者を増やす時に、Pythonやプログラミングが分かるエンジニアの方、ビジネスは分かるけれどもプログラミングは分からない方と大きく分けて2通りの方がいると思われますが、それぞれに動いてほしいイメージはありますか。 個人的な思いとしては、まずエンジニアの方々にはTellusを触ってもらいたいです。 膨大な観測データが日々蓄積されており、国内外問わず衛星データを用いたコンペティションが開催されている結果データセットも増えており、エンジニアの方々が触って面白いデータが揃ってきている状況だと思っています。 それらのデータを触った結果、事例が増え、その中のいくつかがビジネスの種になるといいなと考えています。 様々な事例をビジネスパーソンが見たときに、自身の事業と関連のあるものを見つける方もいるでしょうし、ビジネス化の筋道を立てられる技術を見つける方もいるかもしれません。 そのためにも、事例を蓄積していくことが重要だと思っています。 もちろん、エンジニアとビジネスパーソンの方が同一人物であること、もしくは同じチームにいることが理想的ではありますが。 ビジネスパーソンには、宇宙ビジネスに関心を持ち、ビジネス視点から事例創出をしていただけたら嬉しいですね。 そのために、オウンドメディアの「宙畑」では、エンジニア向け記事だけでなく、宇宙ビジネスのニュースも提供することでビジネスパーソンにも見ていただけるようにしています。 ただ、宇宙ビジネスにはまだこうやったら成功する、という王道がありません。 そのため、誰でもアイデア次第では大きく市場を取ることができる可能性があります。 アイデアを思いつくにはエンジニアもビジネスパーソンも関係ないので、自分はエンジニアだからここまでしか、とかビジネスパーソンだから技術は…とか考えず、アイデアを考えることが始めの一歩かもしれません。   ――Tellus利用者にこれからどういう使い方をしてもらいたいでしょうか。 2020年度末までは基本的にデータもコンピューティングリソースも無料で貸出ししているので、まずは触ってみて欲しいと思っています。 そして、どんなことでもいいので、気になったことを少し見てみて欲しいです。 例えば、教科書で学んだこと、テレビで見たこと、日常的に気になっていることなどを、Tellusを利用して自分の目で本当にそうかな？と確かめて欲しいです。 より具体的に言えば、地球温暖化に疑問を持ち、本当に起きているのかを気温情報や環境情報を用いて解析してみたり、自分の町がどう年々変わっているのか見てみたり、どんなことでもいいので、それこそまずは遊んでみるような感覚でTellusを触ってみて欲しいと思っています。 気になったことを鵜呑みにするのではなく、自らデータで解析してみよう、という人が増えてくるといいですね。 そうすることで、遠い存在と思われがちな衛星データが身近になり、課題解決の1つの選択肢として衛星データがあるという考えを持つ人が増えていき、結果として衛星データの利活用が浸透していくといいなと思っています。 （インタビュー/編集：テックアカデミー 田中 翔）   テックアカデミーでは、未経験でもアプリやWebサイトを作れるオンラインブートキャンプを開催しています。 すべての講師が、第一線で活躍する選抜された現役エンジニアなので、上達の速さ、学習の質が圧倒的に違います。 実際に現役エンジニアから学べる無料体験を実施しているので、ぜひ違いを味わってみてください。 忙しくて時間がない方は、15分でわかる説明動画をまず見てみましょう。
インタビュー

まずはここから！HTMLの書き方【初心者向け】現役デザイナーが解説

本記事では、HTMLの具体的な書き方について、初心者向けに現役エンジニアが解説していきます。 本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。 目次HTMLパーサーとはHTMLParserによる方法Beautiful Soupによる方法監修してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLについて解説した記事を読むとさらに理解が深まります。 田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 HTMLの書き方について詳しく説明していくね！ 大石ゆかり お願いします！   【動画でも解説しています。クリックで見る！】   HTMLタグの書き方 HTMLはWebページに表示したい情報に対し、マークアップするための文章構成を表現する言葉です。 たとえば、タイトルや見出し、本文といった区切りをHTMLでは記述できます。   HTMLはタグ＜＞で囲ったまとまりで、文章構成を表現することが可能です。 タグの中には、どのような種類の文章なのかを示す要素名を記述しましょう。 題名であれば<title>、見出しであれば<h1>、段落であれば<p>などです。   <title> のように要素名から始まるタグは開始タグと呼ばれます。 </title> のように、スラッシュ要素名で始まるタグは終了タグを意味し、要素の記述終了を示すものです。 開始タグと終了タグで囲むことで、開始と終了を表現します。 開始タグから終了タグまでのひとまとまりを要素と呼びます。 図の<title>要素はWebページの題名を示すタグであり、この場合、Webページの題名は「タイトル」になります。   要素とは HTML要素には、現在100を超える種類があります。 Webページで表現したい内容によって適切な要素を選び、タグで囲わなければなりません。 代表的なものをいくつかみていきましょう。 <p> – 段落 paragraph（パラグラフ、段落）の略です。 改行のない文章のひとかたまりを示すために使用します。 文章を改行したいときは、改行のタイミングごとに複数のp要素を作ることで改行が可能です。 <h1>要素 headline（ヘッドライン、見出し）の略です。 以下のように見出しの大小を表現するために使用します。 大見出しはh2 中見出しはh3 小見出しはh4 <a>要素 anchor link （アンカーリンク、リンクの起点）の略です。 他のHTMLなどへのリンクを表現するために使用します。 青文字でアンダーラインのあるリンクの見た目になります。 <div>要素 division （ディビジョン、仕切り）の略です。 四角い枠を作って、様々な要素をひとまとめにします。 <img>要素 image（画像）のことです。 画像ファイルを指定し、画像を埋め込みます。 image要素を始めとするいくつかの要素は、開始タグのみで動作し、終了タグは必要ありません。 <meta>要素 meta（大局的な情報）のことです。 Webページの全体的な設定をします。 文字の種類や検索エンジンの検索結果に表示される文章など、様々な項目があります。   [PR] 未経験からWebエンジニアを目指す方法とは属性と値 各要素の細かい動きや働きを設定するための付属情報が属性です。 何の設定かを示すものが属性名、どう設定するかを属性値といいます。 開始タグの＜＞の中、要素名の後にスペースを空けて、属性名=”属性値” の形で記述します。 上記はmeta要素と呼ばれるWebページ全体の設定をするタグです。 charset （キャラクターセット= 文字の種類）をUTF-8という種類の文字に設定しています。   この要素ではこの属性が必要といったように、要素と属性はセットのものが多い傾向です。 たとえば、以下のように記述したうえでTechAcademyという文字をクリックするとtechacademy.jpに飛ぶリンクになります。 <a href="https://techacademy.jp/">TechAcademy</a> <a>要素のリンク先URLを、href (ハイパーテキストリファレンス= HTMLの参照先)という属性に設定しています。   以下の記述は、<img>要素で表示するファイルをsrc（ソース = 情報の源泉）という属性に設定しているものです。 <img src="/image.png">   田島悠介 要素と属性、ぜひ組み合わせて理解してくださいね！ 大石ゆかり タグは全部覚えなければダメなんですか？ 田島悠介 要素は覚える必要はありません。文法はHTMLを書きながら体で覚えましょう。 各要素は、辞書のようなサイトや本で、調べながら読み書きできれば問題ありません。 常に調べながら書いていますよ。 大石ゆかり 今回のタグは、後で覚えてもいいんですね？ 田島悠介 技術は常に移り変わるので、すぐに古くなってしまうためですね。 暗記するよりも、調べ方をマスターして、常に最新の技術を探るのがおすすめです。 大石ゆかり 調べるときはテックアカデミーの記事を参考にしますね！   HTMLを書いてみよう これまでの書き方を踏まえて、実際にコードを書いてみます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTMLの書き方</title> </head> <body> <h1>HTMLの書き方</h1> <p>はじめてのHTMLを作りました</p> </body> </html> 以下ではサンプルコードを解説していきます。   <!DOCTYPE html>はHTMLを示すもの 文頭にある<!DOCTYPE html>は、文章がHTMLであることを示しています。 この記述がなければ、WebブラウザがWebページとして表示できないため必要です。 HTMLの種類によっていくつか書き方のバリエーションはあるものの、今は<!DOCTYPE html>が基本です。   要素の階層構造 要素は、開始タグと終了タグの間に、テキストと他の要素を含めることができます。 以下の例では<body>要素内に<h1>要素と<p>要素を含むものです。 <body> <h1>HTMLの書き方</h1>
HTML

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

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

オーダーメイドコース
TechAcademy（テックアカデミー） プログラミング Python PythonでHTMLを解析（パース）する方法を現役エンジニアが解説【初心者向け】