TechAcademy（テックアカデミー） Webアプリケーションコース プログラミング Ruby Rubyでライブラリnokogiriを利用して スクレイピングを実行する方法
オーダーメイドコース
icon
icon
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

Rubyのコードをexe化する方法を現役エンジニアが解説【初心者向け】

Rubyのコードをexe化する方法について解説します。   そもそもRubyについてよく分からないという方は、Rubyとは何なのか解説した記事...
Ruby

Rubyでカレントディレクトリを取得する方法【初心者向け】

Rubyでカレントディレクトリを取得する方法について解説します。   そもそもRubyについてよく分からないという方は、Rubyとは何なのか解...
Ruby

Rubyでメソッド引数を呼び出す方法を現役エンジニアが解説【初心者向け】

Rubyでメソッド引数を呼び出す方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 &nbs...
Ruby

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

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

Rubyでtrimを使って文字列の空白を削除する方法を現役エンジニアが解説【初心者向け】

Rubyでtrimを使って文字列の空白を削除する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...
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デザイナーのサポートで学びたい場合はご参加ください。
アプリデザイン

今さら聞けない！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

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

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

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

目的を見失わないために！プロトタイピングの間違った手法とは

本稿は、Studio by UXPinのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。また本記事はUXPinのUXデザイナーであるMarcin Treder氏によって投稿されました。 プロトタイピングの間違ったやり方は、あなたが思っている以上にUXデザインを損ないます。 そして、プロトタイピングを実行する段階が早すぎることがなぜ危険なのか、私の経験を基に説明します。   急成長するUXデザイン 10年前にはUXデザインは、デジタル製品の開発プロセスの一部で使われているだけでした。それが2000年代以降に広まり始め、今や全ての製品開発においてUXデザインは重要な役割を果たしています。 次のGoogleトレンドによる分析グラフも、UXデザインの急成長を示しています。   リーン開発、アジャイル開発、ウォーターフォールモデル（上流から下流への開発工程）などの数々のシステム開発のタイプの実例を見たところ、多くの会社ではプロジェクトの時間節約のために、プロトタイピングを早すぎる段階で実行していることに気づいたのです。 その結果、短期的にはチームにとって時間節約になるかもしれませんが、長期的には修正や故障が数多く起こるために、かえって時間がかかるのです。 これでは、デザインの間違いを修正する過程で正しいアイデアを見つけるという、UXの真の価値が失われてしまいます。   間違ったプロトタイピングの危険性 私は、プロトタイプはその良さが生かされないまま、いわば現実離れしたおもちゃになりつつあるのではと思っています。 実際にプロトタイピングは、ものを良く見せるためだけに使われることも多くなっています。その結果としてデザインプロセスは、高い費用がかかり、肥大化し、バラバラに分離した、混乱するようなものになってしまうのです。 私が過去に、ビジュアルデザインのバックグラウンドを持つUXデザイナーと一緒に、eコマースのデザインの仕事をしたときに、まさにこの罠に陥っていました。Photoshopに慣れている彼らは、いきなり実際のサービスをイメージしたモックアップからデザインを始めました。 デザインに問題があれば、サービス責任者からフィードバックを受けたり、インタラクションモデル（ターゲットとするユーザーと共同でデザインを考える手法）においてユーザーから問題を指摘されることもあります。 もちろん、実際のサービスに寄せたプロトタイピングから始める方法が役立つこともあるのですが、それをデフォルトにするのは良くありません。 製品のデザインに、PhotoshopやSketchなどを使うのは、デザインプロセスのもっと後の段階でいいのです。 何よりもまず、そもそものプロトタイプの存在意義について考えてみましょう。   [PR] 未経験からWebエンジニアを目指す方法とはプロトタイピングの3つのコスト削減効果 プロトタイピングは実は古くからある概念であり、またインタラクションデザインにおける唯一の手法ではありません。 Michael Guggenheim氏の記事『The Long History of Prototypes』によると、 「プロトタイピングは開発における「原型」として理解されるべきものではなく、またインダストリアルデザインにおけるベータ版（サンプル製品のソフトウェア）のようなものでもありません。プロトタイピングは開発を進めるための手法です。つまり、仮のモデルであり、ブリコラージュ（使えるものを何でも利用して作ること）や、ユーザーの参加、製品の修正などの「オープンな革新」を可能とするものです。決して見知らぬユーザーのために、閉鎖的な実験室で完成度の高い製品を作るための手法ではありません。」 プロトタイピングは、ユーザーに製品への最短経路を提供するものであるべきです。プロトタイプは製品開発の初期において、製品のアイデアをそれを受け取る人（顧客）に示すことができます。これこそプロトタイピングの真の価値です。 プロトタイピングを効果的に使うと、次のようなメリットがあります。 製品のアイデアを検証する 製品の詳細を修正する 製品のアイデアを拡張する デザインの検証、修正、拡張をプロトタイピングで実行すれば、製品開発のコストを大幅に削減できます。 またエンドユーザーにプロトタイプを試用してもらう時期が早いほど、後々高いコストがかかるエラーが発生する可能性も低くできます。これこそプロトタイプを初期から作成するべき理由です。 初めに最もコストのかからないプロトタイプを作成し（ファイデリティを柔軟に変更できて、一応使える代物であれば、プロトタイプとしては完璧です！）、ユーザーのフィードバックを受けた後でイテレーション（反復型の短期の開発サイクル）を行えばいいのです。 外観のデザインの完成度を高めるために多くの時間を費やしたり、プロトタイピングで使うためだけにスクリプト言語でアニメーションを作成するとしたら、時間とエネルギーの無駄です。ユーザーに最初に製品を紹介したときに、良く評価されないリスクが高くなります。 多くのケースにおいて、わざわざグラフィックデザインのツールを使って作成したモックアップから、プロトタイプを作るメリットはありません。最初に完成度の高いデザインに陶酔してしまったら、ユーザーに製品のアイデアを検討してもらうのも、製品を改良するのも難しくなるというデメリットがあるだけです。 つまり、イテレーション（反復型の短期の開発サイクル）の精神が失われてしまうのです。 プロトタイプを最大限活用するには、素早く実践し、チームで共同作業を行い、ユーザー調査に基づいてイテレーション（反復型の短期の開発サイクル）を行うべきです。   プロトタイピングが役立つケース しかしながら、モックアップのプロトタイピングが非常に役立つケースも存在します。   既存のアセットを変更するケース 既存のアセットに小さな変更を加えるだけであれば、効率的です。 グラフィックやコードから小さな操作（要素の再配置など）をするだけで十分なので、わざわざデザインし直すメリットはありません。   顧客向けのプレゼンテーションを行うケース グラフィックで作られたプロトタイプは、顧客向けのプレゼンテーションを行う場合に役立ちます。逆に、完成度の低いプロトタイプをプレゼンテーションで使っても、顧客の関心を引くことはできないでしょう。 すでにユーザーに製品を試用してもらっていて、製品の最終的なインターフェースに自信を持てるとしたら、顧客向けに完成度の高いプロトタイプを作成してもいい段階です。 優れたプロトタイプを顧客に示すことで、より契約獲得の可能性が高まると思います。   複雑なプロジェクトのケース 現実世界のシミュレーションをプロトタイプに反映しなければならないような場合を考えてみてください。 このような複雑なプロジェクト（または「重要度」は高いが「緊急度」は低いプロジェクト）では、現実の変動するデータにアクセスできるプロトタイプを作るのが有効です。 コストは高くつくかもしれませんが、目的を達成するには必要です。しかし他のケースでは、プロトタイプに時間を投資する価値があるかどうか考えましょう。   実際のイテレーションの例 UXPinの方針では、プロトタイピングは迅速に共同作業で行われるべきであるとしています。そして私たちはすでに述べた基準も実践しています。 最近の事例（デザインエディターのインターフェースの再設計）を紹介します。   全体のプロセス カスタマーサポートに寄せられたユーザーからのフィードバックを検討した後、チームでデザインの原則を考えました。例えば、「気を散らすものの排除」、「予測できるアーキテクチャ」、「一貫性のある外観」などです。 次に、2日間かけてアイデアをまとめ、最終的にUIのプロトタイプを作成しました。そしてプロトタイプを20人のユーザーに試用してもらった後に、イテレーション（反復型の短期の開発サイクル）を行い、ここでやっと最終的な製品をデザインするための準備が完了しました。 以上は外観デザインだけのプロセスです。全体ではユーザーテストを含めて2週間近くかかりました。 新しいUIを再設計するために作成した、初期のプロトタイプの例を次にご紹介します。   プロトタイプの3つのバージョン例 バージョン1 インターフェースの主要な構成部品（ナビゲーション要素など）の、一番良い配置位置を考えるために、多数の可能性を試してみました。上の画像は、試したUIデザインの1つです。サイトマップは右下に置いています。これらのテストを行う中で、幸運なことに私たちは、元々の要素の配置はユーザーのニーズと一致していないことに気づきました。 バージョン2 デザインエディタをデザインする上で大変なのは、高機能を搭載しながら、インターフェースはシンプルにわかりやすい設計にしなければならないことです。 上の画像は、編集モードごとに切り替えができる、タブのようなシステムです。すっきりした外観で、ユーザーからも「切り替えをしやすい。」というフィードバックをもらえましたが、欠点も見つかりました。 アイコンの名前の表示がないため、各機能を見つけにくい。 小さな画面上では、約80pxの余白部分を見つけにくい。 このバージョン2は、バージョン1を基にして30分ほどで作成したものですが、テストを一巡させた後に破棄しました。 バージョン3 このプロトタイプの最終的なバージョンは、実際に製品化したサービスのデザインに近いものです。バージョン1とバージョン2での反省を生かしています。 もしバージョン1 のプロトタイプを作成していたら、ユーザーにとってサイトマップが見つけにくいデザインのままだったと思います。また、私たちがバージョン2で満足していたら、さらに悪い事態になっていたかもしれません―ユーザーはエディタの機能のアイコンを見つけるのが難しいままだったと思います。 どちらのケースでも、後々の修正に高いコストがかかるだけではなく、粗悪な製品を売り出すことになっていたでしょう。   最後に UXデザインも他のデザインと同様に、プロトタイピングが必要です。 車のデザインから建築に至るまで、プロトタイピングなしには良いデザインを生むことはできません。しかし、プロトタイピングを全体のデザインプロセスから独立したものと考えるべきではありません。 プロトタイピングはその本来の目的―製品のアイデアの検証、製品の修正、製品開発の拡張などに役立てるべきです。そして製品を使うユーザーを中心として、チームでデザインの共同作業を進めるべきです。 正しい段階で、正しい理由で、正しいプロセスを実行しましょう！ [お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートを受けながら学びたい場合はご参加ください。
アプリデザイン

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

オーダーメイドコース
TechAcademy（テックアカデミー） Webアプリケーションコース プログラミング Ruby Rubyでライブラリnokogiriを利用して スクレイピングを実行する方法