TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLファイルの解析方法を現役デザイナーが解説【初心者向け】
オーダーメイドコース
icon
icon
HTML

HTMLファイルの解析方法を現役デザイナーが解説【初心者向け】

初心者向けにHTMLファイルの解析方法について解説しています。ブラウザのデベロッパーツールを利用することで、HTMLとCSSの解析を行うことができます。デベロッパーツールの基本操作と解析の手順を覚えましょう。

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

HTMLファイルの解析方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

HTMLファイルの解析方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

HTML解析（HTMLファイルの解析）とは

各ブラウザのデベロッパーツールと呼ばれる検証機能を利用し、そのブラウザで表示されているのhtmlファイルとcssファイルのコードを閲覧し、解析していくことができます。クロームやIEなどそれぞれのブラウザでデベロッパーツールを利用することで見ることができ、それらのコーディングをブラウザ上で書き換えることができます。
どのようなコンテンツ構成になっているかを記述されているコードを見て確認することができ、またパソコン画面やスマホ画面などの任意のサイズの画面でどのように表示されているかを確認することも可能となっています。
また、Webスクレイピングと呼ばれるWebからデータを収集、特定データの抽出することで解析することも可能となります。スクレイピングはタイトルなど任意の部分だけを抽出したりすることが可能となり、それらのデータを元に修正や別のコンテンツを作成することへ利用ができるようになります。

 

HTML解析の方法

デベロッパーツールでの解析はショートカットがあり、WindowsではF12、MacではControl + Option + Iでブラウザ上に表示できるようになります。表示されたElementsを見るとHTMLで書かれたコードが表示されており、任意の加筆修正をすることでhtml表示のテストをすることもできます。
同時にCSSも表示されているので既存のページで使われているコードを見て解析することができ、大きさや色、その他の属性などのテストも可能となります。
これらはブラウザ表示を更新するだけで元のブラウザページに戻るため解析方法としてはとても利用しやすいものになります。Webスクレイピングの方法としてはRubyやPython、Javaなどのプログラミング言語を使用して抜き出していきます。これらのプラグラミング言語にはライブラリと呼ばれる膨大なプラグラムの書かれた拡張機能を利用することができます。
これらのライブラリをインストールし、プログラミングのコードを記述することで任意の抽出などが可能となります。

 

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

HTML解析に役立つツールの紹介

 スクレイピングの方法として各ライブラリを利用する方法がありますが、それぞれの言語で利用するライブラリは別のものなので整理していきます。

Rubyはnokogiri、PythonはBeautifulSoup4、Javaではjsoupなどそれぞれありますが、特徴がそれぞれ違うライブラリが各言語に存在するため代表的なものから利用し、スクレイピングに触れていくことが良いでしょう。

 

実際に解析してみよう

ブラウザのデベロッパーツールを利用してTECHACADEMYのホームページのhtmlファイルのコードを確認します。コーディングの中のtitleの要素を探し出し、この後にスクレイピングされた結果と同じであるか確認をしていきます。
スクレイピングはRubyを利用し、ライブラリはnokogiriを利用しています。nokogiriをインストールした後にtest.rbというファイルを作成し、以下のように記述します。
(test.rb)
require 'open-uri'

require 'nokogiri'

url = 'https://techacademy.jp/'

charset = nil

html = open(url) do |f|

  charset = f.charset

  f.read

end

doc = Nokogiri::HTML.parse(html, nil, charset)

puts doc.title

 

ターミナルで、

ruby test.rb

として実行した際にターミナルに下記の抽出結果が表示され、先ほどのデベロッパーツールで確認したhtmlのtitleと同じであれば成功です。

 

監修してくれたメンター

木村勇土

TechAcademyの現役メンター。

現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。WordPressを中心とした自社のWebサイトの修正などを行なっている。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

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

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

記事を検索

関連するキーワード

関連する記事

HTMLでコードを表示する方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、HTMLでコードを表示する方法について、テックアカデミー...
HTML

HTMLでvalue属性を使って入力初期値を指定する方法を現役エンジニアが解説【初心者向け】

value属性を使ってHTML内の入力初期値を指定する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...
HTML

HTMLでクリック開閉する多階層ツリーのリストを作る方法を現役エンジニアが解説【初心者向け】

HTMLでクリック開閉する多階層ツリーのリストを作る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...
HTML

HTMLで縦線を引く方法を現役エンジニアが解説【初心者向け】

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

Google Apps Script をHTMLで活用する術を現役エンジニアが解説【初心者向け】

Google Apps Script をHTMLで活用する術について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説...
HTML

fontタグの使い方！HTMLでフォントサイズを指定する方法【初心者向け】現役Webデザイナーが解説

HTMLでフォントサイズを指定する方法について解説しています。 初心者でも簡単にフォントサイズや色を指定できるので、ぜひ書き方を覚えておくと良いでしょう。...
HTML

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

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

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や家庭菜園、家族との時間を楽しんでいる。
機械学習

サイト運営に必須！無料で使えるアクセス解析ツール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分でわかる説明動画をまず見てみましょう。
インタビュー

Rubyで形態素解析する方法を現役エンジニアが解説【初心者向け】

Rubyで形態素解析する方法について解説します。   そもそもRubyについてよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプRuby講座の内容をもとに紹介しています。   田島悠介 今回は、Rubyに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 形態素解析する方法について詳しく説明していくね！ 大石ゆかり お願いします！   形態素解析とは 形態素解析とは、対象となる言語の文法や単語の品詞の情報をもとに、文章を形態素（文章を構成する最小の単位）に分解する解析を指します。 例えば、「太郎はこの本を二郎を見た女性に渡した。」という文章であれば太郎/は/この/本/を/二/郎/を/見/た/女性/に/渡し/た/。/と分解できます。   形態素解析エンジンおよびツール 形態素解析を行うためのエンジンやツールがいくつかあります。フリーの形態素解析ツールであれば、MeCab、JUMANやChasenが有名です。 [PR] Webデザインで副業する方法とは形態素解析エンジンMeCabとは MeCabは 京都大学情報学研究科−日本電信電話株式会社コミュニケーション科学基礎研究所 共同研究ユニットプロジェクトを通じて開発されたオープンソース 形態素解析エンジンです。 凡用的な設計がされており、java perl python Rubyなど様々な言語で、MeCabを使用できます。 Rubyで形態素解析する方法 Rubyで解析する場合には、解析用の辞書のインストールとGemのインストールが必要になります。まずは辞書のインストールです。今回はHomebrewでのインストールで紹介します。 terminalで以下のコマンドを実行しましょう。 $ brew update $ brew install mecab mecab-ipadic   次にgemをインストールします。   gem install mecab   これで、require ‘mecab’をすることでMeCabが使用可能になります。   実際に書いてみよう それでは、実際にMeCabを使用してみましょう。 今回は、「太郎はこの本を二郎を見た女性に渡した。」という文章を解析してみます。 以下のコードを書いてみましょう。 require 'mecab' sentence = "太郎はこの本を二郎を見た女性に渡した。" # Taggerクラスのインスタンスを取得 tagger = MeCab::Tagger.new # parseメソッドを使用することで解析結果を文字列で取得 puts tagger.parse sentence   結果は以下の通りです。 なお解析結果は、表層形 品詞,品詞細分類1,品詞細分類2,品詞細分類3,活用型,活用形,原形,読み,発音の形で出力されます。   太郎 名詞,固有名詞,人名,名,*,*,太郎,タロウ,タロー は 助詞,係助詞,*,*,*,*,は,ハ,ワ この 連体詞,*,*,*,*,*,この,コノ,コノ 本 名詞,一般,*,*,*,*,本,ホン,ホン を 助詞,格助詞,一般,*,*,*,を,ヲ,ヲ 二
Ruby

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

PythonでMeCabを利用する方法について解説します。 そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 PythonでMeCabを利用する方法について詳しく説明していくね！ 大石ゆかり お願いします！   形態素解析とは 形態素解析とは、自然言語を単語に分割する作業です。 例えば、「あの花は美しい」という文章は以下のように分割されます。 あの：名詞（代名詞） 花：名詞 は：助詞 美しい：形容詞 英語であればスペース区切りで簡単に分割できます。しかし日本語の場合、辞書や文法ルールを使って分割する必要があります。 言葉は日々新しいものが生まれているため、最新の言葉を知らないと誤った分割をしてしまう可能性があります。 なお、形態素解析は自然言語処理の一部です。自然言語処理は、「形態素解析→構文解析→意味解析→文脈解析」の順番で行われます。 自然言語処理について、詳しくは以下の記事を参考にしてください。 【事例付き】自然言語処理とは！仕組みやライブラリを解説   形態素解析エンジンMeCabとは 日本語の形態素解析エンジン（ソフトウェア）として最も有名なのがMeCabです。 MeCabは、オープンソースの形態素解析エンジンで、誰でも自由に無償で利用できます。 公式サイトからダウンロードできます。 公式サイト MeCabを導入するには辞書が必要です。Windows版にはIPA辞書が添付されています。 その他にもいくつかの辞書があります。 おすすめは、「mecab-ipadic-NEologd」という辞書です。 Web上の情報をもとに週2回以上更新されており、新語や固有表現に強い特徴があります。 「mecab-ipadic-NEologd」の導入にはGitやLinuxの知識が必要となりますが、IPA辞書よりは格段に形態素解析の性能が上がります。 IPA辞書での動作確認が完了したら、ぜひ導入にチャレンジしてみましょう。 mecab-ipadic-NEologd   [PR] Webデザインで副業する方法とはMeCabの導入方法 PythonでMeCabを利用できるようにするには、以下の手順を行います。 以下はWindows版の導入例です。   Pythonのインストール 事前にPythonをインストールしておきましょう。 Pythonのインストールには、関連するソフトウェアをまとめて導入できるAnacondaを利用すると便利です。 Anacondaのインストール方法については以下の記事を参考にしてください より効率よく開発できる！AnacondaでPythonの環境を構築する方法 Anacondaでは用途に応じた複数のPythonの環境を構築できます。ぜひMeCab用の環境を用意しましょう。 Anaconda Navigatorを起動し、EnvironmentsからCreateボタンをクリックします。 Nameには任意の名前(以下では「MeCab」という名前で作成)、Pythonは「3.7」を選択してCreateボタンをクリックします。 少し待つと新しい環境が作成されます。   MeCabのインストール 公式サイトからバイナリパッケージをダウンロードして実行します。 辞書の文字コードは「UTF-8」を選択します。 あとは手順通り進めると、MeCabがインストールされます。 インストールが終わったら環境変数「PATH」に「MeCabをインストールしたフォルダbin」を追加します。MeCabをインストールしたフォルダはデフォルトでは「C:Program Files (x86)MeCabbin」となります。 なお、環境変数の設定方法は以下の通りです。 ※環境変数の設定方法 コルタナに「システムの詳細」と入力し、システムの詳細設定を起動 環境変数ボタンをクリック 表示された画面からシステム環境変数の「Path」を選択し編集ボタンをクリック 新規ボタンをクリックし「C:Program Files (x86)MeCabbin」と入力 OKボタンクリックして順番に画面を閉じる   MeCabの動作確認 インストール終了後、MeCabの動作確認を行いましょう。 コマンドプロンプトを起動し、「mecab」と入力するとMeCabが起動します。 例として「あの花は美しい」と入力してみましょう。 以下のように形態素解析が行われると動作確認は完了です。MeCabを終了するには「Ctrl+C」を押します。 あの花は美しい あの 連体詞,*,*,*,*,*,あの,アノ,アノ 花 名詞,一般,*,*,*,*,花,ハナ,ハナ は 助詞,係助詞,*,*,*,*,は,ハ,ワ 美しい 形容詞,自立,*,*,形容詞・イ段,基本形,美しい,ウツクシイ,ウツクシイ EOS   PythonからMeCabを使う設定を行う PythonからMeCabを使う設定はAnaconda Promptから行います。 コルタナに「Anaconda Prompt」と入力してAnaconda Promptを起動します。 (base) C:Usersユーザー名> Anaconda Promptを起動した直後はbase環境の状態になっています。 以下のように「activate MeCab」と入力してMeCab環境に変更しましょう。 表示が「(base)」から「(MeCab)」になったことを確認します。   (base) C:Usersohtak>activate MeCab (MeCab) C:Usersohtak>   続けて以下のコマンドを入力します。処理が終わるまで待ちます。   pip install ipykernel 次に以下のコマンドを入力します。同じく処理が終わるまで待ちます。 pip install mecab-python-windows 最後に「MeCabをインストールしたフォルダbin」にある「libmecab.dll」というファイルを「AnacondaをインストールしたフォルダLibsite-packages」にコピーします。 Anacondaをインストールしたフォルダはデフォルトでは「C:Usersユーザー名Anaconda3Libsite-packages」となります。   利用例 一連の作業が正しく完了すると、PythonからMeCabを利用できる状態となります。 今回はPythonの実行環境であるjupyterNotebookからMeCabを使用してみましょう。 jupyterNotebookはAnaconda Navigatorから起動できます。 jupyterNotebookを起動したら、新しいPython3ノートブックを作成し、以下のコードを入力して実行します。 特にエラーメッセージが表示されなければPythonからMeCabを利用できる状態になっています。 import MeCab 続いて形態素解析を行ってみましょう me = MeCab.Tagger ("-Ochasen") print(me.parse ("あの花は美しい")) 実行結果は以下のようになります。   あの アノ あの 連体詞 花 ハナ 花 名詞-一般 は ハ は 助詞-係助詞 美しい ウツクシイ 美しい 形容詞-自立 形容詞・イ段 基本形 EOS 形態素解析でエラーが出る場合は、MeCabをインストールする際、辞書を誤って「SHIFT-JIS」で作成してしまった可能性があります。 辞書の文字コードは以下のコードで確認できます。 mecab = MeCab.Tagger("-Ochasen") info = mecab.dictionary_info() print(info.charset) 「SHIFT-JIS」と表示された場合は、一旦MeCabをアンインストールし、フォルダも削除した上で、再度辞書を「UTF-8」に指定してインストールを行いましょう。   監修してくれたメンター 太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア 普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。 開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント。 地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもPythonを使った人工知能（AI）や機械学習の基礎を習得できるオンラインブートキャンプPython講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
Python

サイズ指定に役立つ！CSSでcalc( )を使う方法【初心者向け】

CSSで書くcalcファンクションの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 要素の水平や垂直のセンタリング、可変的な幅の指定や均等に要素を配置したい場合にもcalcファンクションを使えます。 異なる単位で複雑な計算も簡単に指定できます。 レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利でしょう。 目次HTML解析（HTMLファイルの解析）とはHTML解析の方法HTML解析に役立つツールの紹介実際に解析してみよう監修してくれたメンター そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   大石ゆかり CSSで3等分にした要素の幅を設定するにはどうしたらいいですか？ 田島悠介 いろいろ方法があるけどcalcファンクションを使えば簡単だよ。 大石ゆかり calc？CSSで計算ができるんですか？ 田島悠介 その通り！たとえば全体の幅から3等分した要素を作りたいならwidth: calc(100% / 3)のように指定できるよ。 大石ゆかり へぇー。わかりやすいですね。 田島悠介 そうなんだ。まずはどういった記述の仕方をするか見てみよう。 大石ゆかり はい！   calcファンクションとは CSSのcalcファンクションとは、レイアウトやサイズ指定に計算式を使えるようにしてくれるファンクションです。 通常だと100pxや3emのようにレイアウトやサイズを指定しますが、calcファンクションを用いることで、100px + 50pxや、3em – 1em のように四則演算を使えるようになります。 たとえば、縦横150pxの要素をブラウザの表示領域で中央に配置するには以下のように記述できます。 width: calc(100vw / 2 - 150px / 2); height: calc(100vh / 2 - 150px / 2); このように指定すれば、中央位置（50vw, 50vh）から150pxの要素の端から中心までの距離（150px / 2）だけずらした位置を求めて中央にセンタリングできます。   calcファンクションを使うメリット 異なる単位で計算することができる 計算が明白になる calc()は結果の値ではない 異なる単位で計算することができる CSSのcalcファンクションは、異なる単位の値で計算式を作成できます。 異なる単位で計算できれば、相対的な長さの単位（%、em、vwなど）と絶対的な長さの単位（pxやptなど）を組み合わせて、要素をセンタリングするなどの指定が簡単に記述できます。 %、em、pxなどいろいろな単位を組み合わせた計算が可能です。 たとえば、表示領域全体から固定幅 80pxの要素の残りの幅を calc(100% – 80px) のように計算式で求められます。 このように、固定幅の要素と幅が可変する要素を並べたいときに便利です。 計算が明白になる calcファンクションを使うと、値が何を意味しているかが分かりやすくなります。 たとえば3等分の幅にしたい場合、「width: 33.333333333%;」と指定するよりも「width: calc(100% / 3);」としたほうが、3等分の幅にしたいことが明白にわかります。 固定された値を指定するよりもわかりやすく、3分割や7分割などの割り切れない値も設定できます。 calc()は結果の値ではない calcファンクションの計算結果は固定されているわけではなく、ブラウザの幅などに合わせてリアルタイムに計算されます。 たとえば「height: calc(100vh – 50px);」と指定すれば、ブラウザの表示領域に合わせて常に高さが表示領域の半分より50pxだけ少なくなるように調整されます。   [PR] Webデザインで副業する方法とはcalcファンクションの書き方 calcファンクションはCSSで値の代わりとして計算式を指定できます。 widthやheight、font-sizeなど値が指定できるところなら使えます。 構文 プロパティ（widthなど）: calc(式) 四則演算が使用できる 指定する式では四則演算の演算子（+、-、*、/）が使えます。 前後に空白が必要 加算（+）と減算（-）では演算子の前後に半角スペースを空ける必要があります。 除算（/）や乗算（*）では演算子の前後に半角スペースを入れなくても計算式が認識されますが、慣習として四則演算の演算子の前後には半角スペースを入れます。 ※演算子の前後に半角スペースを入れないと、加算や減算ではなく正の値や負の値として認識されます。詳しくは公式ドキュメント「calc() – CSS: カスケーディングスタイルシート | MDN」をご覧ください。 calcが利用できる場所 calcファンクションは、長さ（<length>）、周波数（<frequency>）、角度（<angle>）、時間（<time>）、数量（<number>）、整数値（<integer>）の値を設定する場所に対して使用できます。 入れ子が可能 calcファンクションは入れ子にできます。 入れ子にすると計算式の優先順位を決める、単なる括弧( )として扱われます。   calcファンクションの実装例 実際にcalcファンクションを使った実装例を見てみましょう。 ルートに基づいたサイズ指定 要素を3等分の幅にする 左右のセンタリング 上下の中央配置 ヒーローヘッダーの高さ調整 ルートに基づいたサイズ指定 calcファンクションを使えば、フォントのサイズを相対的に指定できます。 たとえば、calcファンクションでルート（最上位の要素。html要素）のフォントサイズより5px大きいサイズを指定しておけば、ルートのフォントサイズが変更されたら一緒に変わるようにできます。 スマートフォンとPCなどでフォントサイズを一括して変更したいときに便利です。 ソースコード 「text_plus」クラスの要素のフォントサイズをルートのフォントサイズの1.5倍になるようにcalcファンクションで計算します。 ルート（html要素）のフォントサイズが変更されたら、「text_plus」クラスの要素のサイズも変更されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">
CSS

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLファイルの解析方法を現役デザイナーが解説【初心者向け】