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

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

初心者向けにPHPでcomposerをインストールする方法について現役エンジニアが解説しています。composerとは、PHPのパッケージ管理システムのことで、ライブラリの依存関係を解決してくれます。composerを公式サイトからインストールする方法やバージョン確認コマンドについて解説します。

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

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

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

PHPでcomposerをインストールする方法について詳しく説明していくね！

大石ゆかり

お願いします！

 
この記事は、PHPのパッケージ管理システム「composer」のインストール方法について記載した記事です。

composerについてよくわかっていない方でも、composerについて理解を深めて、ご自身の開発環境にcomposerをインストールできるように記載しています。
 

目次

 

composerとは

composerとは、PHPのパッケージ管理システムです。
 

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

composerが必要な理由

composerのようなパッケージ管理システムがあることによってライブラリをインストールする際の複雑な依存関係の問題を簡単に解決してくれます。

composerのようなパッケージ管理システムがない環境では、ライブラリAをインストールする際に、ライブラリAがライブラリBを使用しているために、まずライブラリBをインストールしなければならなかった状況があります。つまり、ライブラリAがライブラリBに依存している状態です。

composerからライブラリAをインストールすると、ライブラリBも自動でインストールしてくれます。
 

インストール方法

WindowsOS環境でcomposerをインストールする際には、公式サイトのインストーラー(Composer-Setup.exe)をダウンロードし、インストールを行ってください。

Linx,macOS環境でcomposerをインストールする際の手順は、composerの公式ダウロードページに記載があります。そちらからインストールする際のコマンドを参照し解説します。

インストール手順：
① インストーラーのプログラムをローカル環境に’composer-setup.php’というファイル名でダウンロード

$ php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"

② ダウンロードしたインストールプログラムが改ざんされていないかチェック

$ php -r "if (hash_file('sha384', 'composer-setup.php') === '795f976fe0ebd8b75f26a6dd68f78fd3453ce79f32ecb33e7fd087d39bfeb978342fb73ac986cd4f54edd0dc902601dc') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"

③ インストールプログラム(インストーラー)を実行

$ php composer-setup.php

④ 不要になったインストーラーを削除

$ php -r "unlink('composer-setup.php');"

上記の手順でcomposerをインストールできます。

正常にインストールできていれば、下記のコマンドを実行してcompoerのバージョンが確認できます。

コマンド：

$ composer --version

 

実行結果例：

Composer version 1.10.5 2020-04-10 11:44:22

 

まとめ

以上、PHPのパッケージ管理システムcompoerについて解説しました。

composerは、PHPで開発を行っていく上で今や必須ともいえるツールなので、インストールし、使用方法をマスターしましょう。
 

筆者プロフィール

平野大輝（ひらのだいき）

スキル：PHP・Java・JavaScriptを用いて様々なアプリを開発するWebエンジニア。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

TechAcademyでは、初心者でもPHPやフレームワークのLaravelを使ってWebアプリケーション開発を習得できるオンラインブートキャンプPHP/Laravel講座を開催しています。

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

記事を検索

関連するキーワード

関連する記事

PHPで時間を比較する方法を現役エンジニアが解説【初心者向け】

今回は、PHPで時間を比較する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。  ...
PHP

PHPでfor文（ループ処理）を使う方法【初心者向け】

プログラミングをする際に、数値や数式、文字列を繰り返し用いるシーンは多く見られます。 PHPでは、ループ（繰り返し）処理を行う時に、for文とwhile文...
PHP

PHPでimplodeを使う方法【初心者向け】

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

PHPでクリックされたボタンに応じて別の処理を実行する方法を現役エンジニアが解説【初心者向け】

今回は、PHPでクリックされたボタンに応じて別の処理を実行する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説...
PHP

初めてでも安心！Eclipseのインストール方法【PHPアプリケーション開発環境構築編】

今回は、Eclipseについて、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Eclipseはプログラミン...
PHP

Laravelでリクエストを実行する方法【初心者向け】

Laravelでリクエストを実行する方法について解説します。 POST/GETで値を受け渡す流れを実際にプログラムを書いて理解しましょう。 &nbs...
PHP

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

導入手順を解説！Laravelのインストール方法【初心者向け】

Laravelのインストール方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次composerとはcomposerが必要な理由インストール方法まとめ筆者プロフィール そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   Laravelとは LaravelはWebアプリケーション開発用のフレームワークで、言語にはPHPを使用します。 ここではWindowsとMacそれぞれでのLaravelインストールの手順を紹介します。   大石ゆかり 田島メンター！フレームワークとは何でしょうか？ 田島悠介 一言では難しいんだけど、プログラムを効率的に開発したり、複数人が関わるような時に使う、枠組みのようなものかな。 大石ゆかり PHPは、ソースコードが自由に書けるので、複数人だと規約のようなものが必要になりそうですね。 田島悠介 そうそう。規約を守る仕組みがあったりするんだ。後、データベースを作成すると、変更などが出来るフォームを自動で用意してくれたりする機能なんかもあるんだ。では、インストールの方法を見てみよう！   Laravelをインストールしてみよう 1. PHPのインストール まず最初にPHP開発環境をインストールします。 Windows XAMPPを使用した場合の例です。 以下のリンクにアクセスし、各OSに応じたものをダウンロードしインストールします。 https://www.apachefriends.org/jp/index.html   Mac Homebrewを使用した場合の例です。 以下のリンクにアクセスし、「インストール」の下に書かれたスクリプトをターミナルで実行しインストールします。 http://brew.sh/index_ja.html   2. Composerのインストール 次にComposerのインストールを行います。 Windows 以下のリンクにアクセスします。 https://getcomposer.org/ 「Download」を選択します。 “Composer-Setup.exe”をクリックしてダウンロードし、実行します。 「Next」をクリックします。 インストールしたPHPのパスが自動で表示されます。「Next」をクリックします。 Proxy Settingsの画面が表示されます。プロキシを利用する場合は設定を行います。必要ない場合は「Next」をクリックします。 「Install」をクリックするとインストールが開始します。 Mac コンソールで以下のスクリプトを実行します。 curl -sS https://getcomposer.org/installer | php mv composer.phar /usr/local/bin/composer   大石ゆかり Laravelのインストールには、composerというソフトが必要なんですか？ 田島悠介 composerは依存性管理ツールなんだ。 大石ゆかり 依存性って、何でしょうか？ 田島悠介 例えば、ライブラリAを使いたいけど、ライブラリAにはライブラリBが必要だったり・・・というのを管理してくれるんだ。composerを使ってインストールしたほうがいいね。   3. Laravelのインストール 以下はWindowsとMac共通の手順になります。 Windowsはコマンドプロンプト、Macはターミナルから以下のスクリプトを実行します。 composer create-project laravel/laravel --prefer-dist TEST1 ※”TEST1″の部分は任意のプロジェクト名です。 ※この工程は時間がかかります。 プロジェクトのディレクトリに移動します。以下のコマンドを実行します。 cd TEST1 ※”TEST1″の部分は先ほど設定したプロジェクト名になります。 以下のスクリプトを実行します。 php -S localhost:8000 -t public このようなメッセージが表示されれば準備完了です。 ブラウザを起動しlocalhost:8000にアクセスします。 Laravelのスタート画面が表示されます。終了するときは「Ctrl＋c」を押します。   [PR] PHPを学んで未経験からWebエンジニアを目指す方法とはこの記事を監修してくれた方 中本賢吾（なかもとけんご） アジマッチ有限会社　代表取締役社長 開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。   小学生がUnityでオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がノーコードでSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。   おわりに PHPのフレームワークであるLaravelのインストール方法について説明しました。Laravelでプログラミングを始める上で必ず行う事前準備なので、ぜひやり方を参考にしてみてください。   大石ゆかり 表示されました！ただ、php -Sというのは何でしょうか？ 田島悠介 phpにはインストール時にテスト用のサーバーが入ってるんだよね。ポート番号を指定して、-tでフォルダを指定してあげると、その場所をlocalhost:8000で表示してくれるようになるんだ。 大石ゆかり フレームワークは少し難しそうですねー。 田島悠介 簡単とは言えないね。PHPの基礎が出来てなければいけないし、フレームワークそのものの学習も必要だったりするんだ。ただ、それでも慣れたり、コツを覚えると、高速に開発できるし、変更にも強いって実感出来るんだよね。   PHPを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい プログラミングを学習していて、このように思ったことはありませんか？ テックアカデミーのPHP/Laravelコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、PHP/Laravelを使ったWebアプリケーション開発を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
PHP

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

今回は、Laravel のFormを利用してフォームの作成を行っていきます。 LaravelのFormを利用することで、ブラウザ画面からフォームを利用してデータを送信することが可能になります。 実務でもWebアプリケーションを開発する際、ユーザーがデータをフォーム入力して、データベースに登録する処理はよく利用しますので、非常に実践的な内容になっています。 目次 Formとは Formの例 Laravelとは Laravel の始め方 tinker の使い方 Mysqlの設定 Mysqlの利用 Laravelの処理 Laravel Collectiveの使い方   Formとは WebアプリケーションでFormというと、企業ページへのお問い合わせフォームであったり、SNSの投稿フォームだったり、多岐にわたり多用されます。 このFormという単語ですが、初学者の頃は、Fromと混同しやすくタイプミスが発生する点に注意していただくと、学習がスムーズです。   今回は、LaravelのライブラリであるLaravel CollectiveというライブラリのFormファサードを利用して実装していきます。 Formファサードとはデザインパターンで言うところの、複数のクラスを利用する上で窓口となるクラスを利用して、依存関係を含めシンプルに処理を実装することができる仕組みです。 デザインパターンというのは、プログラミングのアルゴリズムを定型化することで、誰でも高品質な処理を実装することができる考え方です。   アルゴリズムというのは、プログラミングの処理の流れです。 例えば、子供の頃、迷路の本などで入り口から出口までなぞり書きしたことがあるかと思います。 入り口から出口まで後戻りせず、一筆書きで迷路をクリアする処理をアルゴリズムとイメージすると良いかもしれません。   クラスとは、あるオブジェクトの設計図です。 オブジェクトを作るためには設計図を設計した上で、設計図に基づいてオブジェクトの作成が必要です。   オブジェクトとは、クラスという設計図から生成される製品です。 家を例にすると、家という製品（オブジェクト）は、柱や壁や電気や水道やガスなどいろいろな部品によって、クラスという設計図に基づいて構成されています。 つまり、家の設計図がクラスで、実際の家がオブジェクトというイメージになります。   そして、実際の製品をインスタンスと呼びます。 これは、生成する家が全く同じクラス（設計図）に基づくオブジェクト（製品）であっても、インスタンス（田中様の家）、インスタンス（鈴木様の家）というように、生成後は別の意味を持った家になるためです。 家の設計図であるクラスを利用して、様々な家を集積するようなWebアプリケーションを実装する場合、家というクラスだけでなく、車というクラスや、お店というクラスもあるかもしれません。 どの家とどの車が同じ所有者で、その所有者はお店も所有しているのか、お店を利用するだけなのか、というようにクラス同士が連動して動作する場合、最終的なWebアプリケーションがクラスでごちゃごちゃになりかねません。 そこで、Formファサードのような依存関係をシンプルに実装してくれる機能を利用していくと、実務でも保守のしやすい素敵なアプリケーションを実装可能になります。   [PR] PHPを学んで未経験からWebエンジニアを目指す方法とはFormの例 今回は次のようなFormタグを利用します。 Form::model Form::modelで、モデルデータと連動しながらForm処理を開始します。 そうでない場合は、Form::openを利用することができます。   Form::label Form::labelで、ラベルの生成処理をします。   Form::text Form::textで、テキストボックスの生成処理をします。   Form::submit Form::submitで、送信表示の生成処理をします。   Form::close Form::closeで、Formタグの実装を終了します。   今回利用するFormタグ以外にも、たくさんのFormタグが存在するので、Laravel Collectiveの公式ページを参考にしていただくと良いですよ。 LaravelCollective | HTML v6.x   Laravelとは Laravelとは、PHPでWebアプリケーションを開発する際、セキュリティも高く、効率的な開発をすることができるフレームワークです。 フレームワークとは、Web開発における共通処理であるライブラリを呼び出すことで、効率的にWebアプリケーションを開発することができるツールです。 ライブラリとは、よく利用する便利な処理をまとめて実装しているプログラムです。 同じような処理をしているライブラリが、世界中に存在するため、どのライブラリを呼び出し利用するかはプログラマーが考えて決定します。   Laravel の始め方 今回解説する実装環境は、PHP7.2系とLaravel6系とMySQL5.6系です。 MySQLの最新バージョンはMySQL8系ですが、実行環境の都合でMySQL5.6系ですので、基本的にはMySQL8系でも同じ考え方をしていただくと良いです。 今回はcomposerコマンドを利用して、techacademyというプロジェクト名で、Laravel6.x系最新版で立ち上げます。 ^6.0 と書けば、バージョン6.xの最新版が選択されます。   コマンド composer create-project --prefer-dist laravel/laravel techacademy ^6.0 Laravelのインストール方法やcomposerのインストール・使い方についてはこちらの記事を参考にしてみてください。   Laravelのバージョン Laravelの現在の最新バージョンはLaravel8です。 しかし、Laravel6を利用するのは、Laravel6がLTSというバージョンだからです。 LTSとは、長期に渡りサポートされるバージョンを意味します。 最終的なサポート期間がLaravel6のほうがLaravel8よりも長いため、実務ではLaravel6を利用することが多いです。 バージョン 公開日 セキュリティサポート 8.0 2020年9月8日 2021年9月8日まで 7.0 2020年3月3日 2021年3月3日まで 6.0 2019年9月3日 2022年9月3日まで   tinker の使い方 Laravelでは php artisan tinker というコマンドを実行すると、Laravelの機能を実行するREPLが起動します。 REPLとは対話型コマンドでアプリケーションを操作する方法です。   tinkerの起動方法 コマンドラインで次のコマンドを入力するとtinkerが起動します。 php artisan tinker   tinkerの終了方法 REPLの実行中は、行頭に>>>が表示されています。 その状態でexitと入力することでtinkerを終了することができます。 >> exit   MySQLの設定 いくつかMySQLの設定が必要です。 代表的な設定を抜粋して解説します。   config/database.php 設定内容 'default' => env('DB_CONNECTION', 'mysql'), 解説 ここでは、MySQLを利用するという指定をしています。   .env 設定内容 DB_DATABASE=techacademy 解説 ここではtechacademyというデータベースを利用する指定をしています。   MySQLの利用 MySQLの起動 コマンド sudo service mysql start sudo mysql -u root 解説 MySQLが未起動の場合、sudo service mysql startでMySQLを起動します。 sudo mysql -u rootでMySQLにログインします。 今回は学習用なので、ユーザー名がrootでパスワードがないパターンのログインコマンドです。 実務で利用する場合は、任意のログイン情報を設定していただく必要がございます。   techacademyデータベースを作成 コマンド CREATE DATABASE `techacademy`; 解説 MySQLにログイン後CREATE DATABASE `techacademy`;というコマンドを実行することで、techacademyというデータベースを作成することができます。   Laravelの処理 Laravel側で実装する代表的な処理を抜粋して解説します。   tinkerでデータベース接続を確認する方法 コマンド php artisan tinker >>>DB::reconnect(); 解説 php artisan tinkerというコマンドを実行することでtinkerを利用します。 tinkerを利用しているREPLの状態は、行頭に>>>が表示されている状態です。 その状態で、DB::reconnect();を実行します。 無事データベースへの接続が完了していれば、次のような表示がされます。 => IlluminateDatabaseMySqlConnection {#683}   マイグレーションファイルの作成と実行 マイグレーションファイルとは、テーブルの作成・削除、カラムの追加・削除に関するデータベースのテーブル管理を行うファイルです。 コマンド php artisan make:migration create_techacademy_table --create=techacademies php
PHP

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

Web開発でよく使われている「PHP」という言語を初心者向けに解説した記事です。聞いたことはあるけど、いまいちPHPが何なのかよく分からないという人は、ぜひご覧ください。 これからプログラミングを始めようと思っている人にも全体像がイメージできると思います。   今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   目次 PHPとは PHPでできること サーバーとクライアントとは PHPがプログラミング初心者向きな理由 PHPの将来性やエンジニア需要 基本的なPHPの書き方 PHPの基本構文 PHPを学習できるWebサービス PHPを学習できる書籍   PHPとは PHPはHTMLに埋め込むことができるため、Web開発でよく使用されるスクリプト言語です。Web開発でよく使用されるスクリプト言語に、JavaScriptがありますが、PHPとJavaScriptの大きな違いは、そのコードがどこで実行されるかにあります。 JavaScriptは、クライアントサイド（Webサイトを閲覧しているブラウザ）がコードを受け取り、そこで動作します。そのため、どのようなコードが書かれているのか、誰でも見ることができてしまいます。 一方、PHPはサーバーサイドでコードを実行します。クライアントサイドはその結果のみを受け取るため、どのようなコードで導き出された結果なのか見ることができません。 PHPを実行するには、PHPがインストールされたWebサーバーが必要です。ローカルに開発環境を用意したい場合は、XAMPPを使うのが便利です。 また、すぐにPHPを使用することができるレンタルサーバーもあるので、すぐに勉強を始めたいという場合は便利です。   大石ゆかり 田島メンター！サーバーサイドで実行されるというのは、どういうことでしょうか？ 田島悠介 簡単に例えると、サーバーサイドが自分の家、家に訪問してくる人がクライアントサイドかな。 大石ゆかり サーバーサイドは訪問してくる人を選べるってことですか？ 田島悠介 そうそう。外から入ってくる人を選べるので、セキュリティとか、管理人しか入れない領域とかを作ることが出来るんだ。ブログ・ショッピングサイト・SNSなど。では、PHPについて見てみよう！   [PR] PHPを学んで未経験からWebエンジニアを目指す方法とはPHPでできること PHPを使うと、ひとつのページに様々な情報を反映して動的なページを作ることができます。基本的にPHPでよく使用されるのは次の３つです。 HTMLソースコードを生成する PHPを使うと、HTMLソースコードを作成することができます。すべての文章をPHPで書く必要はなく、HTMLの一部分のみPHPで生成するということができます。 データベースと連携する PHPを使うとMySqlやPostgerSQLなどさまざまなデータベースと連携したWebサイトを簡単に作成することができます。 ブログや掲示板などのサイトは、記事をデータベースに記録し、サイトへのアクセスがあるとPHPでその記事のデータをデータベースから読み込んで表示させています。 クライアントから送信された情報を受け取る HTMLのフォームでユーザーが入力した情報をPHPを使って受け取ることができます。HTMLで作成したフォームから送信された情報を受け取って、HTMLソースに表示したり、データベースに保存したりすることができます。   サーバーとクライアントとは 続いてサーバーとクライアントの違いについて、SNSの代表のツイッターを題材にお話しようと思います。まず言葉的な話ですが、クライアントとは、サービスを利用しているユーザー側という意味で、逆にサーバー側とは、データなどを取り扱っているサービス提供側という意味になります。 ツイッターだとスマホを使って操作しているのがクライアント側で、ツイッターの運営会社がサーバー側という事になりますね。クライアントとサーバーと何故別れているかというと、システムの機能性と安全性のためです。   クライアント側の役割 例えばクライアント側(JavaScript)でのプログラムの処理といえば、まず初期表示の時にどこになんの文字または画像を表示させるのかという処理など「ツイート」をクリックすると画面にコメントボックスを表示する。 「DM」を押すと、DMメッセージ一覧を表示させるなどの画面側での処理などをメインで行っています。 実はクライアント側のプログラムというのはユーザー側のパソコンなどスマートフォンなどに、保存されていてそのプログラムを読み込んで動いています。   サーバー側の役割 逆にサーバー側(PHP)では、ユーザーさんがツイートしたデータをツイッター画面から送ってもらって企業側のデータベースに格納する。他のユーザーが、最新のツイートに取得する際に新しいツイートをユーザー側に送るというデータベースに関係する処理を行います。 サーバー側のプログラムはユーザーには基本非公開ですので、改ざんの余地などもありません。ですのでデータ関係の処理をサーバー側に一任しているのです。   PHPがプログラミング初心者向きな理由 まずPHPが他のプログラミング言語と違って初心者向きな所は、「関数」というものが豊富にある点です。 関数とは値を渡せば様々な結果が返ってくるというとても便利なものになります。関数の中でも初心者におすすめの物がarray()という関数で、これはデータを取り扱うために必要な「配列」を作る関数になります。配列とは、複数のデータを保持しておける箱のようなものです。 通常配列のデータを取得する際は、この箱の何番目のデータがほしいというように指定してデータを取得しますが、PHPでは上記の関数で通常の配列とは少し違う連想配列というものを手軽に作れます。 連想配列ではデータの保存場所に数字ではなく名前をつける事ができます。たとえばこの箱の「◯◯」という名前のデータをください指定するだけで、データの取得および保管などができるのです。   もう一点は、型の自動変換機能があるところだと思っています。 プログラミング言語には、データを取り扱う際に型というもの概念があります。例えば「1234」は数字型で「あいうえお」は文字型「2020/06/25」は日付型という扱いがあります。上記で説明した配列にもこれは当てはまります。 数値の配列という形で宣言した場合、数値のデータしかいれる事ができないのです。ですので、通常のプログラミング言語では数値型に文字型のデータなどを入れるとエラーが表示されますが、文字型の1234というデータを文字ではなく数値として変換すれば代入が可能になります。これをキャストといいます。 PHPではこのキャストを指示しなくても暗黙的に行います、ですので初心者で型の事を上手く理解できていない人でもプログラムを組むことができるのです。（余談ですがこの型がプログラムで難しいところといわれている所でもあります。）   PHPの将来性やエンジニア需要 PHPは世界中で利用されています。最新のGitHubの調査(2019年)によるとPHPでは第4位に人気がある言語として記録されています。 PHPが登場したのは1995年ですから、それから20年以上もの間、高い人気を保ったまま利用されていることが分かります。この人気は今後しばらくは続くことでしょう。 GitHubより またPHPは日本国内のソフトウェアの開発現場でも多く利用されています。求人・転職情報サイトGreenでPHPの求人を検索してみると約1200件ヒットしました(2020年6月現在)。 これはフロントエンド(約780件)、Python(約760件)よりも圧倒的に多く、開発現場で最も多く利用されているJava(約1800)の次ぐらいに多い求人数です。 画像出典：Green またITベンダーやシステム開発会社の新入社員研修でもPHPはJavaと並んで多く採用されています。それもやはり求人数の多さから即戦力を意識してのことと思われます。 エンジニアとしてはPHPとフロントエンドの知識を持っていれば、非常に重宝される人材となりうるでしょう。   基本的なPHPの書き方 PHPファイルは「.php」という拡張子をつけることで、PHPファイルであることをコンピューターが認識してくれます。（例　index.php） PHPを記述する場合、「<?php」で始まり「?>」で終わるというルールがあります。この間に書かれるスクリプトは複数行になっても大丈夫です。 また、スクリプトの最後には「;」が必要です。   以下が、HTMLにPHPを埋め込んだ例です。 <!DOCTYPE html> <html> <head> <title>基本的なPHPの書き方</title> </head> <body> <?php echo "HELLO WORLD"; ?>
PHP

誰でもできる！MAMPのインストール方法【初心者向け】

.post-body img{border: solid 1px #eee;} プログラミングの勉強を始める人にとって最初の難関は、開発環境の構築ではないでしょうか。そんな方でも使える開発環境のMAMPのインストール方法を初心者向けに解説した記事です。 MAMP（マンプ）はPHPの開発環境として使われます。XAMPPと同じように、MySQLも一緒に使えるので便利です。 本記事では、MAMPをインストールする方法と、PHPの最初のプログラムが書けるまでを解説しています。 本記事の目次 本記事は下記の流れで解説します。 MAMPとは？ MAMPのインストール方法 PHPでプログラミング MAMPとは？ MAMPとは「macOS」「Apache」「MySQL」「PHP」の頭文字をとったものです。 MAMPは、これらを一括で使うことができ、PHPとMySQLの開発環境として使用できます。 無料ホームページでもそれらを対応したサービスはあるのですが、データ送信に使うFTPソフトが必要だったり、SQLデーターベースの準備が必要で、初心者にとっては難しいこともあります。   なお、名前からMacでのみの利用と思われそうですが、WindowsとMacの両方のOSで使用することが可能です。 また、無料で使えるMAMPと有料版のMAMP PROがあります。違いとして、例えばlocalhostの代わりにユニークなエイリアスを与えることができるなど高機能になっています。ただし、初心者は無料版で十分でしょう。 本記事では、無料版のMAMPのインストール方法のみ紹介します。 [PR] PHPを学んで未経験からWebエンジニアを目指す方法とはMAMPのインストール方法 それでは早速、MAMPをインストールしてみましょう。 MAMPのダウンロードサイトにアクセスしてください。   アクセスすると、このように表示されるので、一番上の画像内にある「Free Download」ボタンをクリックしてください。   Macの場合 次の画面で、MacのPCの場合は種類によってクリックする場所が違います。 新しいPC（M1やM2など）の場合は、「Apple M1/M2 CPU」と書かれた部分をクリックします。 インテルのCPU（i7やi5など）を搭載したPCの場合は、「Intel x86 CPU」と書かれた部分をクリックします。   Windowsの場合 一番上に表示されている「Windows 10+」と書かれた部分をクリックします。 上記のそれぞれのPCに対応した部分をクリックするとブラウザでダウンロードが始まります。 ブラウザの下にダウンロードの進行状況が表示されます。 Mac Windows アプリのサイズがかなり大きいので、ダウンロードに時間がかかります。     macOSでインテルのCPUかどうかを見分けるには？ 左上のりんごのアップルメニューから「このMacについて」をクリックします。 開いた画面に「プロセッサ」と書かれていればインテルのCPUが搭載されていて、「チップ」と書かれていればApple M1などの新しいPCです。   Downloadボタンが見つからないときは？ もしDownloadボタンが見当たらないときは、MAMPのトップページを下にスクロールして「Free MAMP download >」リンクをクリックします。     Windowsでダウンロードが始まらないときは？ Windowsで下記の画像が表示されたときは、「保存」をクリックします。     ここからは、WindowsとMacそれぞれのインストール方法を紹介します。   Windowsでのインストール Windowsの場合は、実行すると次のようなメッセージが表示される場合があります。 この画面は不正なプログラムが自動でインストールされるのを防ぐ機能です。 はいを押して、MAMPのインストール画面を表示してください。 Nextをクリックしてください。   一緒にインストールするアプリを指定します。 今回は無料のMAMPだけインストールするので、チェックは2つとも外してから、Nextをクリックします。   使用許諾契約が英語で表示されます。 同意してインストールを続ける場合は「I accept the agreement」をクリックして選択し、Nextをクリックします。   次はプログラムをインストールするフォルダを指定する画面です。 そのままNextをクリックしましょう。   次に表示される画面は、スタートメニューに登録する場所の指定です。 そのまま「Next」をクリックします。   デスクトップにアイコンを作成するかどうかを決める画面が表示されます。 そのまま「Next」をクリックします。   最後に、今まで入力した情報を確認します。 内容に問題なければ「Install」をクリックします。   インストールが完了するまで、時間がかかる場合があるので気長に待ちましょう。   インストールが完了した画面が表示されます。 「Finish」をクリックしたらMAMPのインストールは完了です。     Macでのインストール 続いてMacのインストール方法です。 ダウンロードしたファイルを開くと、「はじめに」の画面が表示されます。 「続ける」をクリックします。   「大切な情報」が英語で表示されます。 「続ける」をクリックします。   「使用許諾契約」の画面が英語で表示されます。   「続ける」をクリックすると表示されている使用許諾契約に同意するか尋ねられます。 使用許諾契約に同意できるなら「同意する」をクリックします。   続いて「インストールの種類」画面が表示され、インストールに必要な記憶装置の空き容量が表示されます。 インストールするのに必要な空き容量は、使用しているPCやMAMPのバージョンによって変わるので、よく確認しておきましょう。 インストール先の空き容量に問題がなければ、「インストール」をクリックします。   インストールの確認を求められるので、パスワードかTouch IDの指紋認証などで許可しましょう。   さらにインターネットからダウンロードしたアプリをインストールする確認画面が出ます。 「OK」をクリックしてインストールを許可します。   インストールが始まります。 インストールには時間がかかるので、完了するまで待ちます。 インストールが完了したら「閉じる」ボタンをクリックします。   インストールが完了すると、ダウンロードしたインストーラのファイルを削除するか尋ねる画面が表示されます。 インストールできていれば、インストーラは不要なので「ゴミ箱に入れる」をクリックして削除します。 これでMacにMAMPをインストールする作業は完了です。     PHPでプログラミング MAMPがインストールできたら、MAMPを使ってPHPのプログラミングを実行してみましょう。 今回は、ブラウザに「PHPのテスト表示成功!」と出力するプログラムを作成します。 PHPのプログラムを動作させるために、WebサーバであるMAMPを起動しておきます。 ※XAMPPなどの他のサーバアプリがすでにインストールされて起動している場合、ポート番号などが競合してMAMPのサーバが起動できない場合があります。 サーバを起動する MacでMAMPのサーバを起動する まずは、画面下のDockからMAMPをクリックして開いてください。   MAMPのウィンドウと同時に黄色の「Standard View」の画面が表示されたときは「Show this window when starting application」のチェックを外してから、左上の×で閉じます。   MAMPのコントロールパネルが表示されます。 右上にある「Start」をクリックして、サーバを起動します。 しばらくしてサーバの起動が完了すると、クリックした「Start」ボタンが「Stop」に変わって、サーバが起動中であることを表す緑色になります。 WindowsでMAMPのサーバを起動する Windowsの場合は、デスクトップ画面に作成されたMAMPアイコンをダブルクリックして起動します。 MAMPをDropboxとリンクするページが表示されますが、Dropboxとのリンクは必須ではないのでそのままページを閉じて大丈夫です。 起動時にWindows標準セキュリティ機能などにより、ファイアウォールの確認画面が表示されることがあります。 「プライベートネットワーク」だけにチェックを入れて「アクセスを許可する」ボタンを押します。 MAMPが起動してコントロールパネルが表示されます。 既定の設定では、Apache Server（Webサーバ）がMAMPの起動時に自動的に開始されます。 緑の丸がついていたら起動が完了しています。 サーバを停止するには「Stop Severs」、開始するには「Start Servers」をクリックします。 停止や開始には少し時間がかかります。 反応がないからといってサーバの開始・停止ボタンを短時間に連続してクリックしないようにしましょう。   MAMPのサーバからWebページを表示させる ここからはWindows・Mac共通の操作になります。 MAMPのコントロールパネルの「WebStart」をクリックするとブラウザが開き、MAMPのサーバが表示させたWebページが表示されます。 （画面はMacで表示した場合です） 表示されているページのURLの最初の部分が、自分で配置したWebページを表示させるときに必要になります。 自分のPCで表示されているURLの赤枠で囲った部分を覚えておきましょう。   これからPHPのプログラムを書いていきますが、MAMPは開いたままにしておいてください。   プログラムを書くには、書式情報を含まない文字だけの情報を保存できるテキストエディタが必要です。 Winodwsには「メモ帳」、Macには「テキストエディット」が標準搭載されていますので、今回はそちらを使います。   メモ帳（Windows）   テキストエディット（Mac） テキストエディット起動後、「新規書類」をクリックします。   書式情報のないPHPのコードとして保存するために、メニューバーから「フォーマット」->「標準テキストにする」を選択します。 もし、「標準テキストに変換しますか？」と確認画面が出た場合は「OK」をクリックします。   Windows・Macともに、テキストエディタが開けたら次のようにコードを入力します。 <?php print ('PHPのテスト表示成功!') ?> ※「‘PHPのテスト表示成功!’」以外は半角（漢字オフで入力する英数字や記号）で入力します。 Mac Windows 入力できたら、ファイル名をtest1.phpにして、htdocsというフォルダ上に保存します。 メモ帳（Windows）メニューバーの「ファイル」->「名前を付けて保存」Cドライブ  > MAMP > htdocs テキストエディット（Mac）メニューバーの「ファイル」->「保存」アプリケーション > MAMP > htdocs   ここまでできたら、MAMPのコントロールパネルの「WebStart」をクリックし、ブラウザのURLを以下の例のように後半部分を「test1.php」に修正します。 このように http://localhost:ポート番号/htdocs以降のファイルパス という形でMAMPで起動させたサーバから、WebページやPHPのプログラムを読み込めます。 なお、先ほど保存したファイルを更新すると、この出力結果も更新されます。   おわりに MAMPのインストール方法は以上です。 もう少しPHPの基礎を知りたい場合は、PHPで文字列を出力する方法やPHPの変数を使う方法をまずはご覧ください。   PHPを勉強していて、 ・もっと効率的に勉強したい ・誰かに聞きながら学びたい ・自分でWebサービスを作りたい と思ったことはないでしょうか？ そんな方のために、TechAcademyではオンラインブートキャンプPHP/Laravelコースを提供しています。 現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、オリジナルWebサービスを開発することが可能です。 独学に限界を感じている場合はご検討ください。
PHP

【手順を解説】今すぐ分かる！npmのインストール方法

今回は、npmのインストールについて解説します。 npmのインストール手順について説明しているので、Windowsではコマンドプロンプトを、Macではターミナルを使って作業していきましょう。   なお本記事は、TechAcademyのNode.jsオンライン講座の内容をもとに作成しています。   田島悠介 今回はnpmのインストールと、そのnpmを使用したパッケージのインストール方法を見てみよう。 大石ゆかり 田島メンター！確かnpmはNode.jsと一緒にインストールされているんでしたよね？ 田島悠介 そうだね。インストールされているバージョンを確認したら、次はパッケージのインストールに挑戦してみよう。 大石ゆかり 分かりました！   npmのインストール方法 Windows10で指定の方法でNode.jsをインストールすればnpm自体はインストールする必要はありません。 Node.jsをインストールすることでnpmも一緒にインストールされます。 Node.jsのインストール方法も載せています。   npmを使用してパッケージをインストールする npmを使用することでパッケージをインストールする事ができます。 実務上も開発環境を整える際に、npmを使用したパッケージのインストールを行います。 npmについての記事も参考にしてみて下さい。   コマンド npm install パッケージ名 --save npm i パッケージ名 --save   解説 各行に共通する–saveというオプションを入力することで、package.jsonにインストールした旨を記載できます。 package.jsonはnpmでインストールした情報を管理する目録のようなものです。 1行目のnpm installがnpmのパッケージをインストールするコマンドです。パッケージ名の部分にインストールするパッケージ名を記載することでインストール可能です。 2行目のnpm iもnpm installと同様のインストールコマンドです。npm install同様に、パッケージ名でインストールするパッケージを指定します。 一般的にはnpm installを使用します。 一見すると、npm iの方が簡単なように思えますが、パッケージ名や、オプションコマンドを記載していくと、npmコマンドで何をしようとしているか不明確になることを避ける目的でも、npm installの方が明確にインストールをしていると分かるというメリットがあります。   田島悠介 これが基本のインストール方法だよ。package.jsonは、npm initというコマンドでまた別に作成することになるんだ。 大石ゆかり なるほど、あとは「パッケージ名」のところにインストールするパッケージの名前を入れたらいいんですね。 田島悠介 次はグローバルにパッケージをインストールする方法、複数のパッケージをインストールする方法、バージョンを指定してパッケージをインストールする方法を確認してみよう。   [PR] PHPを学んで未経験からWebエンジニアを目指す方法とはnpmでグローバルにパッケージをインストールする グローバルとは使用しているコンピューターのどこからでも使用できるディレクトリ（ファイル）です。   コマンド npm install -g パッケージ名   解説 -を付けたコマンドがオプションになります。 -gと記載することでグローバルを意味します。 これで、このコンピュータのどこからでもパッケージ名で指定したnpmパッケージを利用できます。 指定しない場合は、現在操作をしているディレクトリ（ファイル）内のみで、npmパッケージを利用できる点に注意する必要があります。   npmで複数パッケージを一括でインストールする インストールする際一行づつコマンドを実行することは非常に面倒です。 そこで、複数パッケージを一括インストールすることも可能です。   コマンド npm install  -g パッケージ名 パッケージ名   解説 今回はグローバルに複数パッケージをインストールする様な記載にしました。 -gを記載しなければ、現在のディレクトリ（フォルダ）で使用可能な複数パッケージをインストールする事が可能です。   npmでバージョンを指定してインストール npmではパッケージのバージョンを指定してインストールすることが可能です。   コマンド npm install パッケージ名@x.x.x   解説 パッケージ名の後に@を付け、バージョン番号を記載することでバージョンを指定できます。 例えば、1.0.1というバージョンであれば、パッケージ名@1.0.1と記載します。   今回は、npmのインストールについて解説しました。 いくつかパッケージをインストールする手順をまとめましたので、実際に行ってみてください。 Node.jsの学習サイトもまとめているので、合わせて参考にしてみてください。   田島悠介 いくつかのインストール方法を紹介したよ。 大石ゆかり パッケージは、複数まとめてインストールする他にバージョンを指定したりすることもできるんですね。 田島悠介 これらのコマンドも頻繁に使うことになるので、それぞれのインストール方法の違いをしっかり確認覚えておこう。 大石ゆかり はい！ありがとうございます！   また、オンラインのプログラミングスクールTechAcademyでは、Node.jsオンライン講座を開催しています。 Node.jsを使ってWebアプリケーションを開発することができます。 現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、習得することが可能です。
Node.js

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

本稿は、本稿は、Web Designerdepotのブログ記事を、Web Designerdepotより了解を得て日本語翻訳し掲載した記事になります。   プロトタイピングの概念そのものは、インターネットの成立以前から存在していました。典型的な例として、新しい製品を開発をする人々は最初に製品を組み立て、次に製品が期待した通りに作動するか試します。 最初のバージョンで特許を取得して、潜在的な投資家に製品を見せることもあるかもしれません。もし投資家が独自の生産ラインの設備を利用できるとしたら(例えば既存の会社で働いているなどの理由から)、製造可能なレベルのモデルが完成するまで、製品の開発が進められて、バグの修正も行われます。   昔のデモディスクを覚えていますか？ 機能の制限されたプログラムが入っていたり、ゲームの初歩レベルあるいはゲームが2つだけ入っているようなディスクのことです。プロトタイプはデモディスクと似ている点が多くありますが、よりシンプルでさえあります。 Webサイトやアプリのプロトタイプを作成するのは、期待した通りに作動するか確かめるためです。 プロトタイプの目的は、将来の顧客の獲得というよりも、より良い製品を作るのに役立てることです。 Webサイトやアプリのプロトタイプは、製品が期待通りに作動するか確かめるために作成します。またクライアントや潜在的な投資家に製品の作動を示すこともできます。   最近では、Webとモバイルアプリ用のプロトタイプ作成アプリが多数登場しています。 最近リリースされたデザインツールのAdobe Experience Designerは、Webとモバイルに対応したデザインアプリとしての機能と、プロトタイプ作成用のアプリとしての機能が融合されています。 Adobe社の知名度とプロ向け製品における市場シェアを考えれば、多くの人々が今まで以上にプロトタイプを実践し始めているのも当然かもしれません。   今回の記事は初心者向けのガイドです。デザイン業界でどのような経験を積んできたかにかかわらず(あるいは未経験でも)、プロトタイプを日常的に使い始めた方向けに書いています。 このガイドでは何よりもまず基本的な原則を説明します。もちろんその後に発展的な情報として、役立つツールやアプリをリンクとともにご案内します。   ワイヤーフレーム＆モックアップ VS. プロトタイプ デザイナーとしての経験が豊富な方は、すでにワイヤーフレームやモックアップを編集で利用しているかもしれません。ただ、これらは必ずしもプロトタイプとはいえません。 ワイヤーフレームやモックアップで問題なのは静的なことです。製品の機能についての多くの情報を伝えることができないのです。このため、製品の動作性についてクライアントやデベロッパーに誤解を与えるおそれもあります。こうした理由から、プロトタイプとは一般的に、何かインタラクティブな要素を持つものと定義できます。 ただし、例外的に静的なものにもプロトタイプと見なせるものもあります。 例えば、概念的なプロトタイプや、詳細に作成された設計書などです。重要なのは単にインタラクティブであることよりも、製品に期待される機能について情報を伝えられることだからです。 それでもやはり、ワイヤーフレームやモックアップは単にプロトタイプの作成によく使われているという理由だけで、誰も捨てようとはしません。   いつプロトタイプが必要になるのか？ 何かがどのように作動するかを示す必要があるときにはいつでも、プロトタイプが必要です。 わかりやすい例は、Webアプリやモバイルアプリです。アプリは、モックアップでは簡単に見たり予測したりできない機能を数多く持っている傾向があります。コンテンツ中心型の静的なWebサイトでさえプロトタイプを必要とするかもしれません。 1つの理由として例を挙げると、私は以前クライアントにシンプルなビジネスサイトのモックアップを見せたときに、クライアントから「トップページにある「概要」や「サービス」などをクリックしたら別のページに移行するのか？」、「コンタクトフォームでユーザーが「送信」をクリックしたら、私はメールを受信することになるのか？」と聞かれたことがあります。 シンプルなタスクでさえ不確実性を伴うことがあり、プロトタイプは当て推量を解消するのに役立ちます。 また、簡単なブラウジングの操作さえ、ユーザーやクライアントによってはわかりづらくて大変な作業となりえます。プロトタイプがあればネットワークからサインオフするときにも、当て推量する手間を省くことができます。 加えて、プロトタイプはユーザーテストに役立ちます。ユーザーテストを行うときには、初期段階からプロジェクトのシミュレーションを始めるのがベストです。作業がほとんど完了した後に大きな変更をしなければならない事態は避けたいところです。   [PR] PHPを学んで未経験から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デザイナーのサポートで学びたい場合はご参加ください。
アプリデザイン

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

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