Ruby

Rubyでライブラリnokogiriを利用してスクレイピングを実行する方法

初心者向けにRubyでライブラリnokogiriを利用してスクレイピングを実行する方法について解説しています。スクレイピングとはWeb上から情報を取得することをいいます。ここではスクレイピングを行うライブラリnokogiriのインストール方法と基本の使い方、実行結果を見ていきましょう。

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

Rubyでライブラリnokogiriを利用してスクレイピングを実行する方法について解説します。

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

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

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

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

ライブラリnokogiriを利用してスクレイピングを実行する方法について詳しく説明していくね！

お願いします！

ライブラリnokogiriとは

webスクレイピングでよく使われるRubyのライブラリーで、nokogiriというライブラリーがあります。他にMechanaizeというライブラリーもあります。

ここにいうスクレイピングとはweb情報を取得したり、加工したりして使用することです。

今回はこのnokogiriというライブラリーを使用してスクレイピングする方法を紹介していきます。

ライブラリnokogiriのインストール方法

Rubyのスクリプトの場合、gem install nokogiriでインストールします。Railsプロジェクトでインストールする場合はGemファイルに、gem ‘nokogiri’ と追記して、bundle install しましょう。

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

ライブラリnokogiriを利用してスクレイピングを実行する方法

nokogiriがインストールできたら早速nokogiriを使ってスクレイピングしてみましょう。ファイル以下のように書いて実行してみましょう。

require 'nokogiri'
  require 'open-uri'

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

#=>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

...............................................................................

...............................................................................

..............................................................................

...............................................................................

<meta property="og:title" content="パーソナルメンターがつくオンラインブートキャンプ | TechAcademy [テックアカデミー]">

<meta property="og:description" content="プログラミング学習で、もう挫折しない。

パーソナルメンターがつくオンラインブートキャンプ。">

<meta property="og:url" content="https://techacademy.jp/">



<meta name="twitter:title" content="パーソナルメンターがつくオンラインブートキャンプ | TechAcademy [テックアカデミー]">

<meta name="twitter:description" content="プログラミング学習で、もう挫折しない。

パーソナルメンターがつくオンラインブートキャンプ。">

...............................................................................

...............................................................................

..............................................................................

...............................................................................

以上のようにwebサイトから情報を取得していますね。

筆者プロフィール

町田　耕

学生時代は会計学専攻。塾講師勤務を経て、企業のCFOとして会社経営に携わる。

会社経営から一線を退いた後、インフラエンジニアの妻の勧めでプログラミングを

独学で始め、プログラミングセミナーなど転々としながら、開発案件に携わるようになる。

現在、フリーランスとして活動しながらテックアカデミーのメンターも勤めている。

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

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

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

TechAcademyでは、初心者でもRuby on Railsを使ったプログラミングを習得できるオンラインブートキャンプRuby講座を開催しています。

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

Rubyで文字列連結を行う方法を現役エンジニアが解説【初心者向け】

Rubyで文字列連結を行う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Rubyについてそ...

Ruby

Rubyのordメソッドの使い方を現役エンジニアが解説【初心者向け】

Rubyのordメソッドの使い方について解説します。そもそもRubyについてよく分からないという方は、Rubyとは何なのか解説した記事を...

Ruby

Rubyでsleepを使う方法【初心者向け】

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

Ruby

RubyでDateTimeのoffsetを使う方法を現役エンジニアが解説【初心者向け】

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

Ruby

Rubyの破壊的メソッドについて現役エンジニアが解説【初心者向け】

Rubyの破壊的メソッドについて解説します。そもそもRubyについてよく分からないという方は、Rubyとは何なのか解説した記事を読むとさ...

Ruby

Rubyでstripを使う方法を現役エンジニアが解説【初心者向け】

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

Ruby

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

今さら聞けない！Rubyとは【初心者向け】｜現役エンジニアが解説

最近よく耳にする「Ruby」とは一体どのような言語なのでしょうか？今回はその「Ruby」の正体を解説していきたいと思います。Web系の企業でもRubyを使っているところは多いので、これからRubyを勉強してみたいという人はぜひ参考にしてみてください。終わりには、学習方法もいくつか紹介しているので、自分の好きなやり方で勉強してみましょう。なお本記事は、TechAcademyのオンラインブートキャンプRuby講座の内容をもとに紹介しています。なお、今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。田島悠介ここではプログラミング言語のひとつ、Rubyについて解説していくよ。大石ゆかり田島メンター！！Rubyはどんな用途で使われる言語なんですか〜？田島悠介一番よく使われているのはWebアプリケーションかな。動的なサイトを作るのにとても役立つんだ。有名なクックパッドなどもRubyを使用して作られているよ。大石ゆかりなるほど。是非覚えてみたいです！目次 Rubyとは Rubyでできることオブジェクト指向とは Rubyの動向 Rubyが日本で人気な理由 Rubyで開発が向いているサービス Rubyのインストール Rubyの書き方 Rubyの基本構文 Rubyの学習方法 Rubyの学習時のポイント Rubyとは Rubyとは、まつもとゆきひろ氏により開発されたオブジェクト指向スクリプト言語です。 CやJavaといったコンパイラ言語は、プログラムを実行するためにはコンパイルという手続き（人間が書いたソースコードを機械命令に変換）を介して初めて実行ができます。しかし、スクリプト言語はこう言った手続きが一切不要で、そのまま実行することができるため、コンパイラ言語に比べてプログラミングを手軽に行うことができます。また、オブジェクト指向言語なので、すべてのデータがオブジェクトとして表現されています。つまり継承などといったオブジェクト指向ならではの機能を使うことができます。継承をすることで書くコードの量が少なくて済み、読みやすく作業効率も上がるでしょう。 Rubyの名前の由来ですが、宝石の「ルビー」から来ています。 Perl(パール)という名前のプログラミング言語がありますが、宝石の真珠(パール)と読み方が同じという点で宝石の名前を取ったようです。なぜRuby(ルビー)なのかというと、当時のまつもと氏の会社の同僚が7月生まれで、7月の誕生石がルビーだったからです。 Ruby/Rails開発のためのおすすめエディタ/IDEも紹介しているので、合わせてご覧ください。 [PR] 未経験からWebエンジニアを目指す方法とはRubyでできること Rubyを使うメリットとして一番大きいのは、Ruby on RailsというWebアプリケーションフレームワークを使うことができるということです。 Ruby on Railsを使うと、WebサイトやWebベースの業務システムを効率良く開発できると言われています。 Rubyを使っている企業は多くあり、そのほとんどがRuby on Railsを使っているのでエンジニアとして活躍することも可能でしょう。オブジェクト指向とは従来のプログラミング言語では困難になってきた、大規模なソフトウェアの開発をより効率よく開発を行うために考え出された概念です。一般的に、以下の特徴を持っています。カプセル化継承ポリモーフィズム（多態性）カプセル化カプセル化とは指定の方法以外で外部からデータにアクセスできないようにすることです。想定外のアクセスにより、本来書き換えてはならないデータを誤って書き換えることがなくなります。たとえば、ゲームのセーブデータなどは簡単に書き換えられてしまう訳にはいきません。そういったデータを書き換えられないようにするためにもカプセル化という機能は重要です。継承継承とは、既にある機能を受け継ぎ、効率よくソフトウェア開発を行うための機能です。例えば、既にあるプログラムを一部改修を加え、新しく作り直したいことがあります。そうした際に、一から作り直すのはかなり面倒です。そこで、継承を利用することで既存の機能をそのまま再利用しつつ、新たな機能を定義することができるのです。ポリモーフィズム（多態性）ポリモーフィズム（多態性）とは、同じ名前の機能（プログラム）を作成でき、それらが独立して存在できることです。例えば、スマートフォンでは動画や音楽が再生できます。この動画や音楽を再生するプログラムをPlayという名前でそれぞれ作ったとします。この時、ポリモーフィズムの概念がないプログラミング言語(C言語など)では、同じプログラムが二重に定義されていますとエラーが出てきます。ですが、RubyやC++などでは音楽ファイルなら音楽を再生し、動画ファイルであれば動画を再生することができます。このように同じ名前のプログラムを複数定義でき、それぞれのデータに合わせて使うことができることをポリモーフィズム（多態性）と言います。 Rubyの動向 Rubyは現在も積極的に開発が進められています。 2020/5/23現在の最新の安定版は2.7.1です。また古いバージョンである2.4は公式サポートが終了しました。最新の2.7系では多くの機能強化やパフォーマンスの改善が行われました。詳しくは2.7.0のリリースノートを参考にしてください。 Ruby 2.7.0 リリースフレームワークであるRuby on Railsも継続して開発が行われています。 2020/5/23現在の最新バージョンは6.0.3.1です。こちらも最新の6.0系では、新しいフレームワークの導入やマルチデータベース対応など、多くの機能追加が行われています。詳しくは6.0のリリースノートを参考にしてください Rails 6.0 (英語) なお、毎年恒例のイベントであるRubyKaigi（ルビー会議）ですが、2020年のRubyKaigi2020はコロナウィルス感染症の影響で延期となっています。ただし中止ではなく延期というのは嬉しいですね。詳しくはリリース記事を参考にしてください。新型コロナウィルス感染症（COVID-19）に関するRubyKaigi2020の対応について Rubyが日本で人気な理由国内のWebサービスとしては、クックパッドや食べログなどがRubyを利用していることは有名です。では、なぜRubyが使われているのでしょうか？一つは、Rubyの開発効率の高さです。 Rubyは「Enjoy for Programing!」を掲げており、プログラマーにとってコーディングしやすいプログラミング言語となっています。直感的に、実装したい機能をコーディングできるためストレスフリーで開発を行うことができます。そして、フレームワーク（Ruby on Rails）の存在です。「Ruby on Rails」とはRubyのWebアプリケーションフレームワークであり、数回のコマンド入力を行うだけで、Webサイトが自動生成できるRuby on Railsは大幅な開発工程の短縮を実現しました。このRuby on Railsの登場により、開発コスト削減を図る企業などでの利用が増加しました。また、スタートアップ企業などがWebサービスを立ち上げるために、Ruby on Rails を利用していることも多いです。また、Rubyは日本で開発されたプログラミング言語であることも利用されている理由の一つです。 C++やJavaといったプログラミング言語の最新情報は英語で書かれていることが多く、それら最新技術を利用するには、一定の英語スキルが必要になります。また、有用な参考書なども英語で書かれていることが多く、それらの翻訳されたものは、誤訳されたものもあります。しかし、Rubyは開発者が日本人ということもあり、日本語で書かれた有用な参考書が数多く手に入ります。そのため、最新情報をいち早く活用することもできるのです。 Rubyでの開発が向いているサービス Rubyは前述の通りRailsと組み合わせてRuby on Railsとして開発を行うことが一般的です。 Ruby on Railsは以下のようなサービスの開発に向いています。スタートアップ企業のWebサービス Ruby on Railsは開発効率が高いため、少人数での短期開発に向いています。スタートアップ企業のWebサービスは短期間での継続的なローンチが求められます。 Ruby on Railsはいわゆるアジャイルと呼ばれる開発手法にも適しており、少人数でサービスの基本機能を立ち上げ、ユーザーのフィードバックを得ながら継続的にサービスを改善していくことに適しています。 WebAPI経由でのサービス展開 WebAPIとはプログラムから利用するインターネット上のサービスです。例えばGoogle MapやTwitterなど、多くのサービスがWebAPIを提供しています。 WebAPIのメリットは既存のサービスを組み合わせて新たなサービスを生み出せることです。例えば気象データを提供するWebAPIをECサイトのサービスと組み合わせることで、他にはない特徴的なサービスを提供できるかもしれません。 Ruby on RailsにはAPIモードという構成があり、アプリケーションを構築する際にAPIモードを選択することでWebAPIを効率よく開発することができます。データベースと組み合わせた基幹系システム意外かもしれませんが、Ruby on Railsは大量のデータ処理や、複雑な計算を行う企業の会計などの基幹系システムのサービス開発にも向いています。 Ruby on RailsはMVCと呼ばれる安定的なサーバアーキテクチャをベースとしています。またデータベースとの連携についてもモデルクラスによるアクセスやコネクションプールなどに標準的に対応しています。レガシーシステムを更新する際の選択肢として考えても良いでしょう。 Rubyのインストール Rubyでプログラムを書こうと思ったらまず、Rubyをインストールする必要があります。手順としては、 Ruby のダウンロードページからダウンロード(執筆時最新版Ruby2.7.1)。Windowsであれば、RubyInstallerというツールでのインストールも可能です。ダウンロードしたファイルを実行し、インストール。インストールが完了したら、ターミナルやコマンドプロンプトから「ruby -v」と入力し、バージョンを確認。 ruby 2.7.1などと表示されれば完了です。田島悠介 RubyはWindowsとMacの両方で使用することができるよ。大石ゆかりやっぱりそれぞれによって開発環境の構築の方法がだいぶ違うんですか？田島悠介そうだね。また、インストールに必要なソフトがあったりと少し複雑なので、なるべく最新の情報を見てひとつずつ順番にやってみるのがいいと思うよ。公式のインストールガイドも参照しよう。 Rubyの書き方 Rubyのファイルは「.rb」という拡張子をつけることで保存されます。実際にターミナル上にHello,world!を出力するプログラムを例に書き方を紹介したいと思います。 print("Hello,world!n") この一文だけで目的のプログラムを作ることができます。他の言語では文末にセミコロンを打ちますが、Rubyではそれが必要ありません。他のプログラミング言語を少しでも学習したことがある方は、Rubyがいかにシンプルであるかが分かるかと思います。実際にRubyを使ってみたいという方は、開発環境の構築方法も合わせてご覧ください。 Rubyの基本構文 Rubyでよく使う基本構文についていくつかまとめて紹介していきます。基礎的な内容になるので、Rubyとは何かよく分からないという方でも覚えておくと今後役に立つでしょう。 if文 if文は「◯◯の場合〜〜する、△△の場合〜〜する」といった条件分岐の処理を行うことができます。「ログインできたらアカウント画面に、できなかったらエラー表示に」といった普段Webサイトを見ていると当たり前のように行なわれている処理が条件分岐なのです。 if ◯◯ then # ◯◯がtrueだった時の処理 else # ◯◯がfalseだった時の処理 end for文 for文は、繰り返し処理をする際に使います。1+2+3+4+…のように手動で足していくのは面倒ですが、「1ずつ増えた数字を繰り返し足して、100まで繰り返す」といった宣言を行うことができるようになります。 for i

Ruby

RubyとNokogiriを使ってHTMLを解析する方法を現役エンジニアが解説【初心者向け】

RubyとNokogiriを使ってHTMLを解析する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそもRubyについてよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプRuby講座の内容をもとに紹介しています。田島悠介今回は、Rubyに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 RubyとNokogiriを使ってHTMLを解析する方法について詳しく説明していくね！大石ゆかりお願いします！ Nokogiriとは？ Nokogiriとは、XML, HTML文書を解析(パース)するためのRubyライブラリです。解析(パース)はHTML文書が一定の文法に従って記述された内容に対して、プログラム内で扱いやすいデータに変換することをさします。文書の構造を解析し、XPathもしくはCSS3のセレクタを用いて、要素を抽出できます。 Webページのスクレイピング(要素の抽出)に多用されるライブラリです。 HTMLを解析するためにNokogiriをインストールしてみよう gemコマンドを用いてインストールします。 gem install nokogiri システムによっては、依存ソフトウェアのインストールが必要なケースがあります。詳細は公式のインストール説明を参照してみましょう。 [PR] 未経験からWebエンジニアを目指す方法とはHTMLを解析してみよう以下、サンプルコードです。 require 'nokogiri' require 'open-uri' doc = Nokogiri::HTML(open('https://nokogiri.org/tutorials/installing_nokogiri.html')) doc.css('nav ul.menu li a', 'article h2').each do |link| puts link.content end 実行結果 $ ruby sample.rb Install with included libraries (RECOMMENDED) Install with system libraries Install with custom / non-standard libraries 解説 1,2行目で必要なライブラリを読み込んでいます。 4行目でURLを指定し、HTMLの構造解析を行いました。 6-8行目で、CSSセレクタでHTMLタグを指定し、ループで順に出力しています。 CSSセレクタの一つ目ではメニュー中のリンク要素、2つ目では本文中の見出し要素を指定しました。執筆してくれたメンター橋本紘希システムインテグレータ企業勤務のシステムエンジニア。開発実績: Javaプログラムを用いた業務用Webアプリケーションや、基幹システム用バッチアプリケーションなどの設計構築試験。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、初心者でもRuby on Railsを使ったプログラミングを習得できるオンラインブートキャンプを開催しています。また、現役エンジニアから学べる無料体験も実施しているのでぜひ参加してみてください。

Ruby

【未来のUIデザイナーへ！】初心者のためのプロトタイピングガイド

本稿は、本稿は、Web Designerdepotのブログ記事を、Web Designerdepotより了解を得て日本語翻訳し掲載した記事になります。プロトタイピングの概念そのものは、インターネットの成立以前から存在していました。典型的な例として、新しい製品を開発をする人々は最初に製品を組み立て、次に製品が期待した通りに作動するか試します。最初のバージョンで特許を取得して、潜在的な投資家に製品を見せることもあるかもしれません。もし投資家が独自の生産ラインの設備を利用できるとしたら(例えば既存の会社で働いているなどの理由から)、製造可能なレベルのモデルが完成するまで、製品の開発が進められて、バグの修正も行われます。昔のデモディスクを覚えていますか？機能の制限されたプログラムが入っていたり、ゲームの初歩レベルあるいはゲームが2つだけ入っているようなディスクのことです。プロトタイプはデモディスクと似ている点が多くありますが、よりシンプルでさえあります。 Webサイトやアプリのプロトタイプを作成するのは、期待した通りに作動するか確かめるためです。プロトタイプの目的は、将来の顧客の獲得というよりも、より良い製品を作るのに役立てることです。 Webサイトやアプリのプロトタイプは、製品が期待通りに作動するか確かめるために作成します。またクライアントや潜在的な投資家に製品の作動を示すこともできます。最近では、Webとモバイルアプリ用のプロトタイプ作成アプリが多数登場しています。最近リリースされたデザインツールのAdobe Experience Designerは、Webとモバイルに対応したデザインアプリとしての機能と、プロトタイプ作成用のアプリとしての機能が融合されています。 Adobe社の知名度とプロ向け製品における市場シェアを考えれば、多くの人々が今まで以上にプロトタイプを実践し始めているのも当然かもしれません。今回の記事は初心者向けのガイドです。デザイン業界でどのような経験を積んできたかにかかわらず(あるいは未経験でも)、プロトタイプを日常的に使い始めた方向けに書いています。このガイドでは何よりもまず基本的な原則を説明します。もちろんその後に発展的な情報として、役立つツールやアプリをリンクとともにご案内します。ワイヤーフレーム＆モックアップ VS. プロトタイプデザイナーとしての経験が豊富な方は、すでにワイヤーフレームやモックアップを編集で利用しているかもしれません。ただ、これらは必ずしもプロトタイプとはいえません。ワイヤーフレームやモックアップで問題なのは静的なことです。製品の機能についての多くの情報を伝えることができないのです。このため、製品の動作性についてクライアントやデベロッパーに誤解を与えるおそれもあります。こうした理由から、プロトタイプとは一般的に、何かインタラクティブな要素を持つものと定義できます。ただし、例外的に静的なものにもプロトタイプと見なせるものもあります。例えば、概念的なプロトタイプや、詳細に作成された設計書などです。重要なのは単にインタラクティブであることよりも、製品に期待される機能について情報を伝えられることだからです。それでもやはり、ワイヤーフレームやモックアップは単にプロトタイプの作成によく使われているという理由だけで、誰も捨てようとはしません。いつプロトタイプが必要になるのか？何かがどのように作動するかを示す必要があるときにはいつでも、プロトタイプが必要です。わかりやすい例は、Webアプリやモバイルアプリです。アプリは、モックアップでは簡単に見たり予測したりできない機能を数多く持っている傾向があります。コンテンツ中心型の静的なWebサイトでさえプロトタイプを必要とするかもしれません。 1つの理由として例を挙げると、私は以前クライアントにシンプルなビジネスサイトのモックアップを見せたときに、クライアントから「トップページにある「概要」や「サービス」などをクリックしたら別のページに移行するのか？」、「コンタクトフォームでユーザーが「送信」をクリックしたら、私はメールを受信することになるのか？」と聞かれたことがあります。シンプルなタスクでさえ不確実性を伴うことがあり、プロトタイプは当て推量を解消するのに役立ちます。また、簡単なブラウジングの操作さえ、ユーザーやクライアントによってはわかりづらくて大変な作業となりえます。プロトタイプがあればネットワークからサインオフするときにも、当て推量する手間を省くことができます。加えて、プロトタイプはユーザーテストに役立ちます。ユーザーテストを行うときには、初期段階からプロジェクトのシミュレーションを始めるのがベストです。作業がほとんど完了した後に大きな変更をしなければならない事態は避けたいところです。 [PR] 未経験からWebエンジニアを目指す方法とは4種類のプロトタイププロトタイピングを始める前に、どの種類を使うか決めます。ほとんどのデザイナーたちが実践しているように、どのようなプロジェクトでも複数の種類を組み合わせて使うことができます。 1. 概念的プロトタイプこのプロトタイプは、形の上では完成した製品と全く似ていません。ここでインターフェースのディテールとレイアウトは重要ではありません。インタラクションとプロセスだけに集中します。全てのプロトタイプの目的は製品の動作性を示すことです。その意味で、このプロトタイピングは原始的な形だといえます。機能性だけがテーマであり、形は問題となりません。この段階では、フローチャート、ポストイットのメモ、PowerPointのプレゼンテーション、アイコンでプロセスを説明するビデオを使ったり、身振り手振りを加えてカメラに向かって録音してもいいでしょう。要点を伝えることができれば何でもいいのです。概念的プロトタイプはプロジェクトの初期段階で使われます。プロジェクトにはまだ名前がないかもしれません。アプリやWebサイトもアイデアの段階なので、「こんな感じで作動すると思う。」と話しているかもしれません。 2. ローファイプロトタイプローファイプロトタイプでは、レイアウトやスクリーンのサイズなど具体的な対象を扱うようになります。このプロトタイプは、作られるのも破棄されるのもサイクルが速いです。ローファイプロトタイプの目的は、あなたとクライアントが基本的な部分に満足できるまで、試行錯誤を最速で繰り返すためのものです。だからプロトタイプに愛着を持つべきではありません。ほとんどのプロトタイプは使い捨てであり、それこそが長所です。「ローファイプロトタイプ」は「ワイヤーフレーム」とよく置き換えることができます。この段階では紙に書いて行うこともよくあります。アプリでローファイプロトタイプを作成するときには、他のスクリーンへのリンクやコメントの機能など、基本的なプロトタイピングの機能を備えているものを使うことがおすすめです。ワイヤーフレームのアプリはインターネットとの連携が容易であるというメリットがありますが、やや動きが遅いことも多いです。概念的プロトタイプと同じくプロジェクトの初期段階で使われますが、ビジネスモデルやプロジェクト名はすでに存在している段階でしょう。上手くいくと確信できるものが持てるまで、頭の中で思いつく無数のアイデアをえり分ける時です。 3. ミディアムファイプロトタイプ段階によっては、ローファイプロトタイプでは要点を把握しにくい一方、ハイファイプロトタイプでは十分過ぎることがあります。スタイルガイドを完全には作成していなかったり、まだグラフィカルアセットを全て作り終えていない段階です。ミディアムファイプロトタイプは、このようなデザインの初期～中間の段階で使うことができます。インタラクションのシミュレーション機能を持つプロトタイピング作成アプリによって作られることも多いです。CSSのフレームワークを利用して、HTMLとCSSによって構築することもできます。 BootstrapとFoundationが、現在存在しているプロトタイピングのツールの中ではおそらく主流です。有名ブランドのイメージがあればそれを使うべきですが、ストックイメージでも足りるでしょう。ストックタイプのUIエレメントは、模作のインターフェイスをより速く構築するために使われます。プロトタイピング作成アプリの多くは、これらのUIエレメントのライブラリを持つことが多く、作業の高速化に役立ちます。ミディアムファイプロトタイプは、リテラル思考型(Literal thinker:全体的なイメージよりも、具体的なステップや言葉の定義から考えるような人)で外観や動作の近似を見たいと思うような人に向いています。彼らにとっては、「未完成」のヘッダーの方が、Webサイトのヘッダーに全く見えないようなスケッチ風の代物よりも、まだ耐えられます。リテラル思考のクライアントには、ワイヤーフレームで素早く考えた初期のアイデアを見せる必要はないでしょう。ミディアムファイプロトタイプの段階で見せる方が、彼らに方向性を分かってもらいやすいです。 4. ハイファイプロトタイプこの段階までプロジェクトが進むと、全てのスクリーンのモックアップが完成していて、全てが立派なものになっているでしょう。製品をバックエンドのコードと統合して、人々に製品の動作性を見てもらう時です。ハイファイプロトタイプは通常、デザインに関する最終的な合意をクライアントと結ぶために使われます。ただのPSDファイルを送るだけれはなく、インタラクティブなものを提示しなければなりません。 2つの方法のうちいずれかによって行われます。1つの方法では、静的なHTMLとCSSを利用して、一部をインタラクティブな外観に仕上げます。もう1つの方法では、画像やPSDのファイル形式をインポートできるアプリを利用して、擬似インタラクティブな特性を加えることで完成品のアプリ（製品）の機能を模倣します。アプリによっては、プロトタイプのデモをWeb上(またはモバイルデバイス上)で行うことも可能です。プロトタイピングのメソッドプロトタイプの主な種類を見たところで、次にプロトタイプを実際に作るためのツールをご紹介します。基本的な使い方も含めてすでにほとんどご紹介していますが、さらに詳細を見てみましょう。あなた自身とクライアント双方にとって適合するメソッドを選びましょう。ビデオまたはプレゼンテーションのプロトタイプこれらは具体的な作業がなされる前に、アイデアを売るためによく使われます。そのため通常は、潜在的な投資家を意識したものです。クライアント向けにも使えますが、他の代替手段の方が効率的なコミュニケーションを図るには優れていることも多いです。アドバンテージは人によって異なるでしょう。ビデオとプレゼンテーションのプロトタイプで、利益率を上げるために作られたものは商業型の公式に従います。聴き手が共感できる問題を提示する。あなたの製品によってその問題がどのように解決されるかデモを示す。 (オプションとして)会社のマスコットをデジタル形式で表現して、キャッチフレーズを叫ばせながら楽しそうにダンスさせる。これらのプロトタイプの中にはアイコン、テキスト、イラストレーションを使うだけで完成するものもあります。他にはアニメーションを利用して、要点を説明するのに動きを使うこともあるでしょう。あなたのアイデアを売ることができれば、正しく使いこなせているといえます。ビデオのプロトタイプと紙のプロトタイピングを組み合わせた良い例をご紹介します。Video Prototype for Mobile Cooking App : Youtube動画よりワイヤーフレームワイヤーフレームは紙面上かアプリにおいて作成できます。ワイヤーフレームは通常ローファイプロトタイプと見なされていますが、時間をかければミディアムファイプロトタイプにアップグレードすることも可能です。もっとも労力をかけるだけの価値はほとんどありませんが。ワイヤーフレームは、作成されるのも破棄されるのも速いです。紙面上でワイヤーフレームを作成することが魅力的である理由の1つです。アプリでワイヤーフレームを作ると、より正確なデザインが可能となり、既存のワイヤーフレームから簡単に編集することもできます。しかし、あなた自身以外には誰も見ないであろうスケッチを速く作成できるという点が、やはりワイヤーフレームの長所として一番優れています。しかし、すで述べたようにアプリでワイヤーフレームを作成すると、より簡単にインターフェースの機能を模倣できるというメリットもあります。紙面上に作成したワイヤーフレームをタップしたところでトントン音が鳴るだけですから、面白いかもしれませんが、あなたの意図するところを伝えることはできません。紙のプロトタイプこれはただのスケッチではないという点で、紙面上のワイヤーフレームとは異なります。紙を利用するのは、物理的でフラットな素材でインターフェースのモデルを作るためです。先にご紹介したビデオのプロトタイプにもその例を見ることができます。インターフェースの要素は、紙にスケッチして、カットして作ります。コピーして予備を作ることもあります。そして作ったピースを他の紙の上に集めます。ある要素のサイズが間違っていれば、他の要素の並びを変えたり、新しいサイズの要素を紙をカットして作るなどの方法があります。またワイヤーフレームより「本物」らしいといえます。特に面白さはないとしても、クライアントは紙のモデルを触ることができます。この触覚に訴える方法はクライアントに多くを説明できるので、他のどんな方法より優れていることもあります。誰でも対象をより深く理解するためには、物理的なコンタクトが必要です。UXデザインの半分は、物理的なインタラクションの使い心地を、デジタルのインターフェースで作り直す作業であるといえます。アプリで作成するミディアムファイおよびハイファイプロトタイプこれらは紙のプロトタイプとの共通点が多いです。以下でご紹介するInvisionなどのアプリで作成するプロトタイプは、あらかじめデザインしたインターフェースの要素をもとに作り始め、これらのピースを集めて完成品を模倣します。異なる点は、全ての作業がスクリーン上でなされることです。完成製品のグラフィック作成やブランド化も可能であり、プロトタイプであっても完成製品のように作成することができます。その次はすでに述べたことですが、アプリによって製品のデモをブラウザやモバイルデバイス上で行うこともできます。また手で触れて感じることも可能になります。クライアントの触覚に訴えることで、もし気に入ってもらえれば、最終的な承認を得たも同然です。コードもちろんインタラクションを必要とする場合には、インターフェースのプロトタイプをコードで作るのがいい方法です。その理由もご紹介します。あなたのワークフローによく合う(とにかくブラウザ上でデザインするような場合)。作成するサイトやアプリに、ボタンなどのインタラクティブな要素が多数存在している。製品作成の最終段階でプロトタイプのコードを利用すると、時間の節約になる。インターフェースの機能性のデモを、アプリを使わずにブラウザ上で実行したい。あなたがキーを押すのが好きで、クリックするのは嫌いである。ブラウザ上でプロトタイピングを行うと、特に修正版を作成中はやや時間がかかります。製品の初期段階ではおすすめしません。ミディアム～ハイファイプロトタイプで使うのがベストです。すでにHTMLやCSSで作業を進める方法を好んでいるとしたら、完成間近のプロジェクトを提示するには最良の方法の1つです。フレームワークによるプロトタイピングフレームワークを利用すると、コードを使ったプロトタイピングのスピードを相当上げてくれます。さらに、完成製品用のフレームワークを利用するとしたら、コーディングの量も少なくて済みます。補足として、BootstrapやFoundationのような人気の高いフレームワークを利用して構築された、ドラッグ＆ドロップ形式のWebページ用エディタもあります。これらを使うことで、ローファイプロトタイプからコードを加えた完成製品まで全て作ることができます。または、これらをプロトタイプを速く作る目的だけに使い、プロジェクトの最終段階ではカスタマイズしたコードを使う方法もあります。どちらの方法でも上手くいくでしょう。プロトタイピングのツールとアプリ理論を理解したところで、プロトタイプの作成に進みましょう。紙のプロトタイプやコードだけに限定せず、アプリをどこかで使うと仮定します。良くも悪くも、多数の優良なアプリから選ぶことになります。繰り返しになりますが、結局はあなたに合うものを選ぶことが大切です。モバイルアプリのデモを実行する機能が必要か？Google DriveやDropboxなどのサービスとファイルの同期が必要か？Githubと統合させるか？ローファイ、ミディアムファイ、ハイファイのどのタイプか？アドバンストスクリプト言語(Advanced scripting)か？などから考えましょう。以下にリストアップするアプリは、これらのニーズに対応しています。何に着目すべきか分かりやすいように、アプリごとに最も関連性の高い機能をご紹介します。これらアプリの多くは主にワイヤーフレームのためのツールとして知られています。ワイヤーフレームのソフトウェアは、インタラクティブなプロトタイプに必要な機能を備えていることが一般的です。人によってこれらのアプリを使うことで得られるアドバンテージも異なります。 AdobeのExperience Design CC 現時点では最新のアプリです。このアプリの登場により、今まで飽和状態だった市場に競争を巻き起こすことになりそうです。単にワイヤーフレームのアプリまたはプロトタイピングのアプリというよりも、デザインアプリです。Sketchや開発終了したFireworksと似ていますが、デザインした全てのものからプロトタイプを作り出すことが可能な点が斬新です。今のところMacのプレビューにのみ対応していますが、2016年末までにはWindows版もリリースされる予定です。プレリリース版は無料ですが、完成版のリリース後にはAdobe Creative Cloudのプランに組み込まれます。プレゼンテーションのソフトウェア MicrosoftのPowerPoint、AppleのKeynote、LibreOfficeのImpress、GoogleのSlidesは全てプロトタイプの作成に使えます。プロトタイプについてのコンセプトはそれぞれ異なっています。スライドにリンク機能を加えるだけで、インタラクティビティを模倣できます。コンテンツ中心型のWebサイト用のプロトタイプにも向いています。またこの中のソフトの少なくとも1つは使った経験のある人も多いでしょう。もし使ったことがなければ、ImpressとSlidesは無料で使えます。 InVision InVisionも有名なアプリの1つで、ハイファイプロトタイピング向きです。バージョン管理を特色としていて、リアルタイムの連携機能やフィードバック機能を売りとしています。Marvelのアプリのように、アニメーション、プロトタイプの組込み、デバイス上でのデモ、などの機能もあります。無料プランではプロトタイプ1つまで作成できますが、それ以降は有料プランで月額15USドルかかります。 InVision Justinmind Justinmindはアプリケーションのハイファイプロトタイプを作成するのに向いているように思えます。JustinmindのサイトではレスポンシブデザインのWebサイトのプロトタイプについても言及されています。アプリ上でのデモ機能もあります。今のところ1年間の有料契約(月額換算で19USドル)からスタートできます。 Justinmind Marvel Marvel Appは有名なプロトタイプのアプリです。基本的に無料プランで、アップデートの価格も全てリーズナブルです。注目の機能は、PhotoShipとSketchのサポート、DriveとDropboxとの同期、Webページ上での組込み型プロトタイプです。これらの機能によって、プロトタイプをアニメーション付きのプレゼンテーションに仕上げることもできます。ハイファイプロトタイプの作成に向いています。 Marvel Proto.io Proto.ioはハイファイプロトタイプ向きのアプリです。複合的なインタラクション、アニメーション、ファイル形式のエクスポート、印刷、組込み、デバイスのデモンストレーションなどの機能が全てビルトインされています。15日の無料お試し期間と、月額24USドルのプランから始められます。 Proto.io POP POPが他のアプリと異なっているのは、ワイヤーフレームのスケッチとデジタル形式のプロトタイプのハイブリッドを作成できる点です。 iPhone、Androidフォン、Windowsフォンなどのカメラでスケッチの画像を取り込み、これらをインタラクティブなプロトタイプに変換します。主に紙で作業を進めるタイプの人には、データを共有するのにいいアプリです。プロジェクト2つまでは無料で利用可能で、以降は月額10USドルの有料プランになります。 POP Flairbuilder Flairbuilderはデスクトップアプリですが、プロジェクトにオンラインのビューア(閲覧用ソフトウェア)機能を利用できます。ミディアムファイのワイヤーフレームとプロトタイプに向いています。インタラクションを追加したり、デバイス上でのデモを行うことが可能で、グリッドベースのデザインにも特色があります。ワンタイム料金で99USドルと高額ですが、Axureよりも安いです。 Flairbuilder Flinto Flintoには、Macアプリ版とWeb用ライト版の2つのバージョンがあります。違いはというと、Macのバージョンの方がより複雑なアニメーション、インタラクションなどの機能をテーブル(表)に加えることができます。またSketchからファイル形式をインポートできるのも、Web用ライト版にはない機能です。ワンタイムの購入価格で99USドルかかります。ライト版(月額20USドル)だとデスクトップバージョンのライセンスも含まれるので、両方の良い部分を利用できます。 Flinto [お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。

アプリデザイン

PythonによるWebスクレイピングの方法を現役エンジニアが解説【初心者向け】

PythonによるWebスクレイピングの方法ついて解説します。そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。田島悠介今回は、PythonでWebスクレイピングする方法についての内容だね！大石ゆかり Webスクレイピングとは何でしょうか？田島悠介 Webスクレイピングでできること、その方法を解説していくね！大石ゆかりお願いします！ Webスクレイピングとは Webスクレイピングとは、Webページの情報をプログラムを使って取得できる技術です。他のプログラミング言語でもWebスクレイピングはできますが、今回はPythonを使ってWebスクレイピングする方法を紹介します。 Webスクレイピングで何ができる？では具体的にWebスクレイピングでは何ができるのでしょうか？たとえば、以下のようなことができます。あるサイトの特定部分のテキストを定期的に取得ネットオークションの価格を自動で取得自動でサイトにログインして、ほしい情報を取得 Webスクレイピングは、業務の自動化などで活躍します。 [PR] 未経験からWebエンジニアを目指す方法とはWebスクレイピングのためのライブラリ・フレームワーク PythonでWebスクレイピングをするための代表絵的なライブラリやフレームワークをいくつか紹介します。 urllib.request Pythonの標準ライブラリです。URLを指定し、Webサイトの情報を取得できます。 Requests urllib.requestに同じく、Webサイトの情報を取得できます。Requestsは人間のためのHTTPとしても親しまれていて、扱いやすいのが特徴です。 beautifulsoup4 beautifulsoup4は、サードパーティ製のhtmlパーサライブラリです。取得したWebサイトから特定のテキスト情報などを抜き出せます。 Webスクレイピングといえばbeautifulsoup4、と覚えてもよいほど有名です。 Selenium 自動でブラウザを操作する為のライブラリです。スクレイピングにも活用することできます。 HTMLの要素にアクセスして情報を取得できるのはもちろん、クリック操作などの制御も可能です。 Scrapy Pythonにおけるスクレイピングのためフレームワークといえば、Scrapyです。 Scrapyは、スクレイピング（Webサイトからデータを取得する）だけではなく、クローリング（プログラムがインターネット上のリンクを辿ってWebサイトを巡回し、Webページ上の情報を複製・保存すること）もできます。少し難易度が高くなりますが、余裕のある方は使ってみてください。実際に書いてみよういくつかライブラリ・フレームワークを紹介しましたが、今回は「beautifulsoup4」を使い、実際にWebスクレイピングをします。 NewsPicksのトップページに表示されている記事のタイトルを自動で取得し、出力するプログラムを書いていきます。サンプルコード(mymod.py) import requests from bs4 import BeautifulSoup result = requests.get('https://newspicks.com/') data_1 = BeautifulSoup(r.text, 'html.parser') data_2 = data.find_all("div", class_="title _ellipsis") for item in data_2: print(item.getText()) 実行結果ボーイング、737減産へ　2割、墜落事故の影響拡大アップル米有料音楽で逆転　スポティファイ上回る【必見】シェアエコのいまを押さえる3つのポイント米大統領、金融緩和を要求　FRBに圧力強める【独自調べ】「令和」改元は、経済にどんな影響を与えるか？【猪瀬直樹】作家の道標は、三島由紀夫とカポーティボーイング、737減産へ　2割、墜落事故の影響拡大アップル米有料音楽で逆転　スポティファイ上回る【必見】シェアエコのいまを押さえる3つのポイント米大統領、金融緩和を要求　FRBに圧力強める東大生が教える｢文章が苦手｣が一瞬で治るコツ Amazon印のワイヤレスイヤホンが開発中？ AirPodsのライバル候補か｢四角いクルマ｣は､なぜ日本で大人気なのか解説 requests.get()でNewsPicksトップページのHTMLを取得 find_allでclassを指定し、タイトルを取得配列に格納された値をfor文とprint文で出力大石ゆかり普段みているようなサイトでも簡単にスクレイピングできるんですね！田島悠介余裕ができたらログインなども試してみてね！大石ゆかり分かりました！ありがとうございます！ TechAcademyでは、初心者でもPythonを使った人工知能（AI）や機械学習の基礎を習得できるオンラインブートキャンプPython講座を開催しています。挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

Python

gemを使った開発！Ruby on Railsでクローラーを使う方法【初心者向け】

RubyのフレームワークのRuby on Railsでクローラーを使う方法について解説しています。分析ツールなどいろんな情報をひとつのサイトにまとめたいという時に便利です。クローラーでは、手動ではできないことをできるので、その面白さを感じるはずです。なお本記事は、TechAcademyのWebアプリケーションオンラインブートキャンプの内容をもとに紹介しています。大石ゆかり田島メンター！！クローラーというのは何ですか〜？田島悠介 Webサイトから情報を習得するプログラムのことを言うんだ。大石ゆかり例えばどんなときに使うんですか？田島悠介たくさんの量のデータを収集したり、それを分析したりするのにもクローラーは利用することができるよ。まずは必要なライブラリを紹介しよう。クローラーとは Rubyを勉強しているとクローラープログラムという言葉を見かけることがあります。このクローラーというのは、Webサイトを巡回して情報を取得するプログラムのことを言います。クローラを使用すれば、Yahooの最新ニュース情報を取得したり、facebookのタイムライン情報を取得するなど便利な機能を作成することができます。人がブラウザを操作して情報を収集するより、手間を省いて効率的に情報を取得することができますね。ただクローラはWebページに負荷をかける行為なので使用する際は注意して使用するようにしましょう。また、サイトによっては、APIを代用して情報を取得できるように用意していることも多いので、何かの情報を取得したいとおもった場合、まずはAPIが無いか調べるようにしましょう。使用する主なライブラリ前提条件として、Railsアプリケーションが作られていることとします。Railsアプリケーションの作り方は、Ruby on Railsなどを参考にしてください。それでは、クローラーを実装する前にクローラーで使用するライブラリの紹介をします。 open-uri open-uriは指定したurlにアクセスするためのライブラリです。このライブラリがないとまずWebページにたどり着くことができないため、必須のライブラリとなっています。 nokogiri nokogiriはスクレイピング、クローラーで頻繁に使用されるライブラリです。取得したHTMLの任意の部分だけ抜き取ったり、string型に変換したりできます。これらのライブラリを使用するには、Railsアプリケーションフォルダの直下にある「Gemfile」ファイルに以下を追記し、コンソールから「bundle install」を実行します。 gem 'nokogiri' ※open-uri は Ruby on Rails 標準ライブラリのため、Gemfileへの追記は不要です。大石ゆかりこのふたつのライブラリが必要になるわけですね。田島悠介これらをrequireで読み込んで、クローラーのプログラムを作成するよ。実際に書いてみよう。大石ゆかりはい！ [PR] 未経験からWebエンジニアを目指す方法とは情報を取得する方法今回はRuby on Railsを用いて、Yahooのトップ情報を取得するクローラープログラムを作成していきたいと思います。初めに、コントローラーを作成します。コンソールで以下のコマンドを入力します。 rails generate controller yahoos 次にそれぞれのファイルを下記のように記述していってください。 app/controllers/yahoos_controller.rb class YahoosController < ApplicationController require "open-uri" require "nokogiri" def index uri = "http://www.yahoo.co.jp/" @doc = Nokogiri::HTML(open(uri),nil,"utf-8") end end app/views/yahoos/index.html.erb <%= @doc %> config/routes.rb Rails.application.routes.draw do get 'yahoos/index' end yahoos/indexページ内を開くと以下のようにyahooのトップページのHTML情報が表示されます。ブラウザで見るのと違い、生のHTML情報なので、HTMLソースが表示されていますね。それでは詳しく見ていきましょう。 Yahooのトップページから情報を取得してきているのは、app/controllers/yahoos_controller.rbファイルのindex関数内にある以下の記述です。以下では、指定したURIの情報を取得し、viewで表示するために@doc変数に格納しています。 uri = "http://www.yahoo.co.jp/" @doc = Nokogiri::HTML(open(uri),nil,"utf-8") app/views/yahoos/index.html.erbでは、@doc変数の内容を表示しています。 <%= @doc %> それでは、index.html.erbを修正し、@docから必要な要素を抽出してみましょう。 @doc変数には、HTML情報が文字列としてではなく、構造化されたHTML文章として取得されています。そのためnokogiriでは、CSSセレクタを使って要素を指定することができます。それでは、Yahooトップページから、リンク要素の一覧を取得してみましょう。「@doc.css(“a”)」と書くことで、@doc変数に格納されたリンク要素（aタグ）の一覧を取得できます。 <% @doc.css("a").each do |link| #

Ruby

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

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

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

Rubyでライブラリnokogiriを利用してスクレイピングを実行する方法

ライブラリnokogiriとは

ライブラリnokogiriのインストール方法

ライブラリnokogiriを利用してスクレイピングを実行する方法

筆者プロフィール

関連するキーワード

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

今さら聞けない！Rubyとは【初心者向け】｜現役エンジニアが解説

RubyとNokogiriを使ってHTMLを解析する方法を現役エンジニアが解説【初心者向け】

【未来のUIデザイナーへ！】初心者のためのプロトタイピングガイド

PythonによるWebスクレイピングの方法を現役エンジニアが解説【初心者向け】

gemを使った開発！Ruby on Railsでクローラーを使う方法【初心者向け】

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

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

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

ライブラリnokogiriとは

ライブラリnokogiriのインストール方法

ライブラリnokogiriを利用してスクレイピングを実行する方法

筆者プロフィール

記事を検索

関連するキーワード

関連する記事

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

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

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