PHP

今さら聞けない！XAMPPをインストールする方法【超初心者向け】現役エンジニアが解説

Webアプリケーションの開発環境「XAMPP（ザンプ）」をインストールする方法を、画像を13枚使って初心者向けに解説する記事です。インストール方法の他に、ApacheとMySQLの使い方もあわせて紹介します。

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

プログラミング初心者にとって、開発環境の構築は最初難しいこともあると思います。

そこで、今回は開発環境のうち、使われることも多い「XAMPP（ザンプ）」をインストールする方法と、簡単な使い方・設定方法をご紹介します。

ぜひ記事を参考にインストールしてみてください。

（※記事でインストールする環境のOSはWindows10です）

XAMPPとは

XAMPPとは、Webアプリケーション開発に欠かすことのできないソフトウェアとそれ以外にもあると便利なツールを、無料で一括インストールすることができるパッケージのことです。

そもそも、Webアプリケーションを作成するには、最低でも以下が必要になります。

Apache（Webサーバ）
MySQL（SQLデータベース）
Webプログラミング言語（PHP、Rubyなど）

しかし本来この3つのソフトウェアはそれぞれ別の団体で作成・アップデートされているため、個別にダウンロード・インストールする必要があります。

これらのソフトウェアのインストールは、Webアプリケーション開発を初めてする人にとっては理解しにくいところがあるため、肝心のアプリ開発の前に挫折することもあるでしょう。

そんな時に役に立つのが「XAMPP」です。

ただし、XAMPPはパッケージとしての特性上、ソフトウェアによっては最新版のものでなかったりすることもあります。

そのため、商用利用する際は、セキュリティ面からそれぞれのソフトウェアのバージョンアップが必要になるのでご注意ください。

いろんなソフトウェアで成り立っているんですねー。

Webアプリケーションって何か特別な感じがするけど、プログラムで作られているソフトウェアで成り立っているんだ。

テスト環境では、セットでダウンロードした方がいいですね。

そうだね。XAMPPっていうパッケージが一般的なので、これをインストールしてみよう！

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

XAMPPのインストール方法

ここからは、XAMPPのダウンロード・インストール方法をご紹介します。

(1)XAMPPパッケージをダウンロード

まずは、Apache Friendsにアクセスします。

上記画像赤枠の「Windows向け XAMPP8.0.2(PHP8.0.2)」をクリックしてください。

Macの場合は「OS X向け XAMPP8.0.2(PHP8.0.2)」をクリックしてください。

なお、「8.0.2」の部分はバージョンです。

執筆時点では「8.0.2」でしたが、パッケージの更新により変わる可能性があります。

クリック後、下記画面に切り替わりインストーラーのダウンロードが開始されます。

ダウンロードが完了するまで少々お待ちください。

ここで、ダウンロードしたファイルは「xampp-windows-x64-8.0.2-0-VS16-installer.exe」です。

このファイル名もパッケージのバージョンによって変わる可能性があります。

(2)XAMPPインストール

先ほどダウンロードした、「xampp-windows-x64-8.0.2-0-VS16-installer.exe」をダブルクリックします。

最初に以下の警告が表示されます。

これは「C:￥Program Files にインストールするとユーザー権限の関係でXAMPPの動作が制限される」という意味です。

別のフォルダにインストールするため、問題ありません。

「OK」をクリックします。

ここで下記画面が表示されますので、「Next」をクリックしてください。

次にインストールするソフトウェアを選択する画面が表示されます。

今回はすべてのソフトウェアをインストールするので、すべての項目にチェックを入れて「Next」をクリックしてください。

※注意
既にインストールされているソフトウェアは灰色になり、選択できません。

つづいて、インストールするフォルダの選択です。

デフォルトのインストール先は「C:xampp」になっているので、ここは変更せずに「Next」をクリックしてください。

※注意
インストール後、「C:xampp」は約740MBのフォルダになるので、Cドライブの容量にお気をつけください。

次は言語の選択です。

日本語は選択できないため「English」のまま「Next」をクリックしてください。

ここで表示される画面は「Bitnami」という、オープンソースプロジェクトについての説明です。

今回は「XAMPP」のインストールの紹介ですので、下記画面のチェックは外して「Next」をクリックしてください。

WordPressやRedmineに興味がある方は、別途「Bitnami」を確認してみてください。

最後に「XAMPP」をインストールしていいか聞かれるので、今までと同様に「Next」をクリックしてください。

クリック後、下記画面が表示されます。

お使いのPCのスペックにもよりますが、インストールには1分～5分程度かかります。

このように表示されたらインストール完了です。

このあと、「XAMPP」の動作確認をするので、画面赤枠のチェックボックスにチェックを入れた状態で、「Finish」をクリックしてください。

また、普段XAMPPを使う場合は「スタートボタン」→「XAMPP」→「XAMPP Control Panel」をクリックすると開きます。

インストールは、フォルダを選択するぐらいで、けっこう簡単ですねー。

パッケージになっていて便利だね。

ただ、ちょっとソフトウェアが多いですね。

簡単に説明すると、ApacheがWebサーバで、基本的にはファイルとフォルダを返すんだ。

MySQLがデータベース、FTPサーバがFilleZilla、メールサーバがMercury、WebalizerはApacheのログを詳しく解析してくれて、TomCatはJavaで作られたWebサーバで、PHPとPerlはプログラミング言語なんだ。

XAMPPの使い方

最後にXAMPPの簡単な使い方を紹介します。

今回は、「Apache」と「MySQL」の実行方法について説明します。

操作はいたって簡単で、下記画面の赤枠の「Start」をクリックするだけです。

正常に「Apache」「MySQL」が起動すれば、下記画面のように、PID(s)、Port(s)に数字が表示されます。

この時の注意点です。

お使いのPCに「Skype」がインストールされている場合、「Apache」が起動できないことがあります。

その場合は、Windowsのデスクトップの右下にあるインジケータでSkypeアイコンを右クリックし、「Skypeを終了」を選択してSkypeを終了させます。

その後、改めて「XAMPP」を起動して、「Apache」を起動してください。

おわりに

XAMPPのインストール方法は以上です。

インストールが完了したら、XAMPPの文字化けを直すためにphp.iniの設定を合わせて行いましょう。

執筆してくれたメンター

太田和樹（おおたかずき）

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績：画像認識技術を活用した駐車場混雑状況把握、音声認識を活用したヘルプデスク支援システム、ロボットアプリの開発、大規模基幹系システムの開発・導入マネジメント。著書「知識ゼロからの機械学習入門（技術評論社）」。

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

Skypeがポート番号を使っていることがあるんですねー。バッティングすると少し面倒なことになりそうですね。

そうだね。プログラムって、ポート番号を指定して立ち上げることも出来るんだよね。

プログラムがポート番号を使うんですか？何か実際の例はありますか？

例えばブラウザにhttps://www.yahoo.co.jp:443って接続するとわかりやすいかな。Webサーバプログラムに接続してるんだよね。他の番号を入力するとエラーになるから、443には何かプログラムが起動しているってわかるよね。

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

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

【Windows編】今すぐ簡単にできる！PHPのダウンロード方法

Windows10環境にPHPをインストールする手順について説明します。ここでは64bit OSを前提としてますが、32bit OSでもインストーラが異...

PHP

PHPで配列の値の重複をチェックする方法を紹介【初心者向け】

PHPで配列の値の重複をチェックする方法について解説します。そもそもPHPについてよく分からないという方は、PHPとは何なのか解説し...

PHP

XAMPPでポート番号を確認する方法【初心者向け】

PHPの開発環境としてもよく使われるXAMPPでは、ポート番号を確認することができます。今回は初心者向けに、自分の端末が使用してるポート番号を確認する方...

PHP

PHPでSQLを実行する方法を現役エンジニアが解説【初心者向け】

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

PHP

PHPで配列（Array）の中身を出力する方法を現役エンジニアが解説【初心者向け】

今回は、PHPで配列（Array）の中身を出力する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

PHP

PHPでカンマ区切りの値を配列データに変換する方法を現役エンジニアが解説【初心者向け】

今回は、PHPでカンマ区切りの値を配列データに変換する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...

PHP

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

【デザイン事例を紹介！】グリッドデザインのWebサイトが良い15の理由

本稿は、Design School Canvaのブログ記事を、Design School Canvaより了解を得て日本語翻訳し掲載した記事になります。また本記事は、Mary Stribley氏によって投稿されたものです。グラフィックデザイナーにとって、グリッドは特に重要なデザインツールであるとされています。ほんの数本のグリッドの存在がデザインに加わることが、デザインプロジェクト全体にとって、極めて重要なのはなぜでしょうか？デザイナーは一人一人異なる答えを持っているかもしれませんが、要するに、グリッドは、それなしでは時間もかかり、面倒で困難なデザインを構築するのに役立ってくれるのです。もしあなたがグリッドデザインの世界を探求しようか迷っているとしたら、グリッドをレパートリーに加えるだけで、デザインが非常に良くなる15の理由をお話します。 01. コンテンツが整理されるグリッドの主な利用価値の1つは、デザインの要素を整列化、順序化したり、Webページをクリーンできちんとしたデザインにするのに役立つことです。これはグリッドの整列機能の効果であり、グリッドの役割の大部分を占めていると言えます。グリッドシステムを確立することで、要素を整列化するのに使える基本構造を自分自身で創ることが可能となるのです。そして、これによりクリーンで整理されたレイアウトを実現できます。例として、Christine Wisnieski によるTwist CreativeのGridデザインのレイアウトを見てみましょう。各要素がきれいに整列されて、全体としてクリーンな仕上がりになっています。グリッドを使うときには、各要素をきれいに整列できるようなタイプのものを見つけましょう。要素とは具体的には、文章、画像、グラフィックなどで、その他どのような対象も要素となりえます。最終的な完成イメージという大まかな全体像から始めて、それに合うグリッドを組み立てましょう。 02. あなたの仕事を高速化する常に高速化と効率化を追い求める世界で生きる私たちにとって、「効率改善」などは耳に聞き慣れた言葉ですから、このメリットの説明は、すんなりと受け入れてもらえるかもしれません。グリッドは、あなたのデザインにかける時間を、よりスピードアップして充実したものにしてくれるでしょう。というのも、どのポジションに要素を配置するのが最高の選択なのかを示すガイドとしても、機能してくれるからです。要素が良く見えそうなポジションを手さぐりで探してから、ランダムに配置するという作業をしなくても、グリッドがあれば、あなたを自然な解へと導いてくれるでしょう。グラフィックデザイナーのTroy Templeman氏が述べるように、「Gridデザインは、どの場所にコンテンツを配置できるかというよりむしろ、どの場所にコンテンツを配置すべきかという、デザイナー自身の決定をサポートすることで、デザインのプロセスをスピードアップしてくれる。」というわけです。グリッドは家の建築の土台のようなものとして考えることができます。一番最初に建造しておくべきものの1つであり、そこからさらに構築を進めます。 [PR] PHPを学んで未経験からWebエンジニアを目指す方法とは03. 文章の居心地が良くなるようなレイアウトを実現できる少なくとも、グリッドと文字は、2つのデザイン要素として相性のいいの組合せです。強力なグリッドは、文章量の多いレイアウトを、よりすっきりとして組織化された印象に整えてくれます。ボディコピーの文章も読みやすくしてくれるでしょう。文章を読みやすくするのに役立つグリッドの手法の1つに、「ベースライングリッド」があります。これはノートの罫線のようなもので、文章の1行1行がベースラインとなるグリッドの上に乗ります。これらのグリッドは、文章で作られた各要素が、同じ高さに並ぶように整えてくれます。もしあなたが文章の行を整列していなくても、多くの人はその特定のアンバランスな箇所には気づかないかもしれませんが、あなたのデザインが全体として散らかっているということは無意識的に気づくものです。つまり、小さな変化が大きな効果をもたらしてくれるのです。これは、「ベースライングリッド」の実例です。各行がそれぞれ整列されていて、クリーンですっきりとしたタイポグラフィーの効果を生み出しています。 04.　他のデザイナーとの共同作業をもっと容易にしてくれるあなたも今までに他のデザイナーと共同で仕事をしたことがあるでしょうか？そのような場面では、グリッドは、ストレスとコミュニケーションの齟齬をいくらか和らげてくれるかもしれません。すでにお話したように、グリッドはデザインに基本構造を作るのに役立ち、個々の要素がどの場所に置かれるべきかについての方針も示してくれます。もし、あなたが最初にグリッドからデザインを組み立てていれば、新しいデザイナーが途中から加わったときにも、あなたのデザイン手法や、要素の配置の意図を理解してもらえるでしょう。例として、あなたが下にあるようなデザインに取り組んでいて、これから第3パラグラフを作成するときに、他のデザイナーに参加してもらうよう依頼するケースを考えてください。グリッドシステムを使っていれば、配置や整列を正確に実践できます。加えて、「カラムの幅はどのくらいにしますか？」「1つ前のカラムからどのくらいの距離を空けて配置しますか？」などのメッセージが行ったり来たりすることも少なくなるでしょう。というのも、グリッドによって全ての答えはすでに用意されているからです。他のデザイナーと共同で仕事をする時には、わかりやすくて、最終的な完成品に合うグリッドシステムを構築しましょう。必要なカラムの数が3つであるなら、13も使う必要はありません。グリッドシステムを組み立てていないうちから、要素の整列を行うのは避けましょう。グリッドを機能的で役立つものにしておくのが大切です。 05. バランスの整ったデザインを創りやすいグリッドの美しさはその統一感にあります。あなたのデザインを複数のカラムに分割しようとするときには、シンメトリーなレイアウトから始めることになるでしょう。左右のどちら側のデザインがもう一方の側からずれているか判断することも、容易になるでしょう。例として、以下のMaan Ali氏によるWebサイトのデザインを見てみましょう。左右対称なグリッド、大きさの均一化されたブロックと文章を使うことで、均整のとれたデザインになっています。他の例として、Braulio Amado氏によるデザインでは、中央のグラフィックを加えて3つのカラムとして表現することで、シンメトリーで完璧なバランスになっています。かなり強いデザインであるために、圧迫感のある印象を人に与えやすいにもかかわらず、きちんと整列して完璧なバランスを実現することで、クールで落ち着いたデザインになっているのです。 06. マルチページのレイアウトに統一感を与えるグリッドは複数ページのレイアウトにも役立つでしょう。レイアウトにグリッドを使うことで、あるページから別のページへ、あるレイアウトから別のレイアウトへ、グリッドを継承することが可能です。容易にレイアウト全体の一貫性を保つことができます。例として、WebサイトのRolling Stoneを考えてみましょう。数多くのページから構成されていますが、各ページの構造やコンテンツはそれぞれ異なっています。全体のページで一貫したレイアウトを保ちながら、各ページごとに最高の方法でデザインするには、どうしたら良いと思いますか？以下の画像では、WebサイトのRolling Stoneの音楽のページとトップページを比較しています。4つのカラムで構成されるグリッドデザインを使うことで、一貫性があり、クリーンで、親しみが持てるような外観になっています。一方で、各ページにある空白のスペースも、ページがしっかり機能することに役立っています。グリッドがマルチページのレイアウトに役立つ具体例としては、スタイルガイドのようなマニュアルが一般的です。これらは教育目的で使われ、線形のデザインで整えるのが望ましいため、グリッドが活用されるのです。例として、以下のMike CollingeによるBosphorusのスタイルガイドでは、グリッドが統一して使われています。複数のページをデザインするプロジェクトに取り組んでいるとしたら、「素晴らしいマルチページのレイアウトを設計するためのチェックリスト」に目を通しておきましょう。 07. 階層化したデザインを表現できる Gridデザインの共通の前提は、グリッドを使うことで各要素を均一なサイズのブロックに分けることですが、こうすることで自動的にデザインをコントロールできます。階層化はデザインにとって大切なことであり、グリッドはこの階層化をスピードアップして容易にしてくれます。あなたが階層化の大切さにまだ気づいていないとしても、全てのデザインは少なくとも3段の階層を持つべきである理由のリストによって、その認識は変わるでしょう。例として、NASAのホームページのデザインを見てみましょう。 4つのカラムのグリッドで構成されるデザインで、より重要度の高い画像を、複数のカラムや列の領域まで引き伸ばして大きくすることで、階層を表現しています。「ハロウィーンの空を飛ぶ活動を終えた彗星」の左上の画像は、2カラム×2列分のサイズに広げられ、ページの中で最も注目を引くようにデザインされています。他の重要な話にも、画像が複数のカラムに引き伸ばされたものがあります。印刷物にもグリッドをデザインの基本として使うことができます。複数のカラムのサイズに拡大することで、ある要素に注目を集めたり、逆に小さなカラムのサイズにして、ある要素を目立たないようにすることができます。次の例は、David Tang氏によるデザインで、数字の23や30に注目を集めるように、グリッドの大きさや配置が工夫されています。 08. 散らかったレイアウトと、さよならできるグリッドは、恐怖の散らかったデザインを一掃してくれる素晴らしいツールです。そのためには、マージンを使いましょう。マージンとは、デザインのまわりの余白のことです。一般的に、マージンが狭いほど、あなたのデザインは詰まって散らかって見えてしまいます。マージンをより広くすることで、整ったクリーンなデザインに見せることができます。以下の例では、マージンがグレーの色でマークされています。グリッドとマージンはしばしば一緒に使われますが、この組合せには、デザインをより開かれたクリーンな印象にする効果があります。散らかったデザインを回避するもう1つの方法は、ガターを使う方法です。ガターとは、グリッドのカラム間にある余白のことです。ガターのサイズは調整できますが、機能するグリッドを作るためには、全体のガターサイズは統一しましょう。マージンとガターを組み合わせることで、効果的な結果を生み出している例を見てみましょう。このAisle One によってデザインされた壁紙は、マージンとガターが目立つようなデザインであるため、それぞれいかに効果的に使われているかに気づかせてくれます。 09. 心地よいデザインの世界が開ける芸術家や写真家など数多くのデザイナーが、グリッドを作品のベースに使っている理由は、数学的な美しさを持つデザインを生み出すと考えられているからです。グリッドによって心地よいデザインを生み出す方法の1つに、「三分割法」があります。最も基本的かつ簡単な方法の1つです。写真の技術としてもよく使われる方法ですが、理論の根本は、各2本の水平線と垂直線によって、全体のデザインを9つの均一な区画分けることにあります。線の交点(以下の例ではブルーの円)にデザイン要素を置くことで、心地よいデザインを生み出します。この理論が写真に使われるとき、写真家は、レンズの焦点がこれらの交点に集まるようなフレームを慎重に選びます。試しに「三分割法」をあなたのテキストデザインに取り入れて、目に心地よくなるかどうか確認してみましょう。ページを水平方向と垂直方向に均等な3×3の区画に分けて、これらのシンプルなガイドを応用するだけです。 10.　グリッドのルールを破ってインパクト効果を狙うグリッドのレイアウトのルールを守ることで、クリーンで整った美しいデザインを生み出すことができますが、時にはグリッドのルールを破ることで、ユニークで人目を引くような効果を狙うことができます。例として、99Uによるデザインでは、シンプルな3カラムグリッドが使われていますが、イエローの文字を対角方向にページ全体に走らせることで、グリッドによるクリーンな直線性のルールを破っています。「Think differently(考え方の転換)」というメッセージを伝えるには、印象的で記憶に残りやすく、実に効果的なデザインです。グリッドのルールを破ると、特定の要素に注目を集める効果もあります。例として、このBig CartelのWebサイトのデザインを見てみましょう。要素はグリッドに従って整列されていますが、いくつか例外的なデザイン要素があります。グリッドから飛び出ている要素が、強い垂直ラインのデザインを破ることで、人の視線を引く効果があります。 11. 柔軟性に富むグリッドがあなたのデザインに合うかどうか心配になりますか？全てのグリッドは柔軟性に富むので、デザインの変化にも対応できますから、心配する必要はありません。あなたがグリッドを作るときには、好きなだけカラムの数を選ぶことができるのは、グリッドの柔軟性の１つです。以下の例では、1カラムのデザインと、2または3カラムのデザインの比較を示しています。もちろん一般的には、デザイナーやデザインの必要性に応じて、最大13カラムの範囲でグリッドが構成されます。以下の例では、フルページサイズの画像と文字、そしてシンプルなレイアウトタイプを活かしたデザインで、1カラムのグリッドシステムとして完璧です。次のDesign Surgeryによるレイアウトのデザインは、13カラムで構成されています。所々に入っている画像と相まって、長くなりがちな記事の文章を効果的に魅せています。最終的にカラムの数はあなた次第です。ただ、カラムの数が多いほどデザインの柔軟性が高まり、数が少ないほどシンプルで柔軟性が低くなることも、デザインする時には心に留めておきましょう。 12. 対角線のデザインに役立つ文字通り、異なる角度からのデザインのアプローチにも、グリッドは役に立ちます。グリッドは水平または垂直に並べるだけではなく、対角線の軸上に配置しても、効果的です。 Andrew Ackroyd氏によってデザインされたポスターは、フォントと画像が対角線のグリッド上に並べられ、モダンでスタイリッシュな効果を生み出しています。対角線のグリッドは、画像の多いレイアウトにも役立ちます。Karen Hoffstetter氏によるこのデザインでは、対角線を活かしたフレームを使った画像で、全体が埋め尽くされたデザインです。またこのデザインでは、対角線のグリッドに加えて、水平方向と垂直方向グリッドも使われていることが、要素の美しい整列を可能にしています。 13. 万能に使えるグリッドが最も利用されているのは、雑誌や編集のレイアウトなどですが、その他のどんな用途にも、デザインツールとして活用できます。多くの有名なロゴは、グリッドシステムに基づいて作成されています。例えば、Braunの有名なロゴは、グリッドを使用して、文字をクリーンで強さのあるデザインに統一するプロセスから、誕生したのです。グリッドはまた、イラストレーション全般にも使うことができます。Dean Gorissen氏による、都市のイラストレーションでは、クリーンでシャープな角度が使われていますが、これが対角線のグリッドの形が利用されたことを示しています。どのような用途であれ、グリッドは、計り知れないほど便利なツールとなってくれるでしょう。全てのデザインスタイルやデザイナーにとって有益なツールではないかもしれませんが、多くのケースにおいては役に立ちます。あなたの次のプロジェクトでも、グリッドの活用を考えてみてください。 14. 余白のデザインに役立つあなたは余白を活かしたデザインの世界を深く掘り下げてみたいと思っていますか？グリッドは余白のデザインにも役立ちます。デザインを複数のカラムに分けて、要素を並べた後、残ったいくつかの列やカラムは空けたままにして余白を作りましょう。 João Oliveira氏によるこのレイアウトでは、グリッドのいくつかの領域を空けておくことで、余白を広く作っています。その結果として、スタイリッシュかつ洗練されたデザイン、機能的でミニマルなレイアウトが実現されていて、散らかりや不要な要素は全くありません。同様に、Mehmet Gozetlik氏によるポスターのデザインでも、グリッドの機能が活かされています。フォントと画像が中央のカラムに整列され、外側のカラムは余白にされています。美しくバランスが取られていて、要素が中央に集められた、視覚効果も高いポスターデザインです。 15. 読者の目に優しいデザイン活字印刷のレイアウトを読みやすくすることで、グリッドは、文章のデザインにも役立ちます。人間の目は、文章のまとまりの長さにとても敏感です。文章のまとまりが長すぎると、最後まで読み進めるのも辛くなりますが、短すぎても細切れな印象になり、しっかりと読み込むのが難しくなります。一般的に、行の黄金比は、1行あたり、単語数で6以上、合計文字数で空白も含めて約50～65文字になるとされています。文字の多いレイアウトにグリッドを使うことで、簡単に素早く均一なカラムを作ることができます。カラムを使うことで、文章の長さを強力にコントロールできます。これこそ、新聞でグリッドを基本としたレイアウトがよく使われている理由です。読みやすいコンテンツを作るのに役立っているのです。編集に関することをもっと学びたいと思いますか？「世界の編集デザインベスト50」のリストが紹介されているWebページを訪問して、目を通しておきましょう。次はあなたの番です：グリッドデザインを早速実践しましょうあなたがグリッドのファンであるなしに関わらず、非常に多くのデザインで役に立つことは明らかです。グリッドの起源は13世紀に遡るというのも、驚くにはあたらないことかもしれません。グリッドには、デザインのバランスを整えて整列することから、対角線のデザインでタイポグラフィーをクールに見せることに至るまで、数多くの活用方法があります。グリッドは、デザインのページ上のただの線ではありません。デザインを構造化し、デザインの方向性を示し、デザインを形作ることで、あなたの望む完成イメージを実現する力があるのです。 [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

Webデザイン

誰でもできる！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

今すぐ設定できる！Javaの開発環境の構築方法(Windows編)【初心者向け】

Javaの開発環境の構築方法について解説しています。Eclipseを使ってJavaでのプログラミングができるように設定していきましょう。 Javaについてそもそもよく分からないという方は、Javaとは何なのか解説している記事をまずご覧ください。なお本記事は、TechAcademyのJava講座の内容をもとに作成しています。田島悠介今回は、Eclipseを使ったJavaの開発環境の構築手順を見てみよう。大石ゆかり田島メンター！！Eclipseというのは何ですか～？田島悠介 Eclipseは総合開発環境(IDE)のひとつで、Javaやそれ以外のたくさんの言語に対応しているんだ。今回はWindowsでのインストール方法を解説していくよ。大石ゆかりよろしくお願いします！目次事前準備 Javaのインストール Eclipseのインストール Eclipseを日本語化初期設定の手順入れておくと便利なツール事前準備 Eclipseを動作させるためには、JRE1.7以上が必要です。JREが17.以上がインストールされている場合は、「Javaのインストール」を読み飛ばしてもかまいません。今回は、コマンドでのJavaの実行もできるように、JDKをインストールしておきます。また、Windows10を使用していますが、Windows7、8でも同様の手順でインストール可能です。 ※ライセンスについて Java自体はオープンソースであり、オープンソース版のJDKとして無償で利用できるOpenJDKが存在しています。 Javaのライセンス自体はOracle社が保有しており、Oracle社が提供するJDKはOpenJDKと区別できるよう、OracleJDKと呼ばれています。OracleJDKは2019年4月16日以降「個人的な使用や開発目的に限り無償」、企業での使用などそれ以外は「有償」に変更となりました。 OpenJDKとOracleJDKは基本的には「同一」であり、セキュリティパッチの提供期間がOpenJDKの方が短い、という違いがあります。本記事では機能が同一であり、個人使用や開発では無償で利用できることから、OracleJDKのインストール方法を紹介しています。 OpenJDKを利用したい場合は、以下の公式サイトからダウンロードします。 jdk.java.net [PR] PHPを学んで未経験からWebエンジニアを目指す方法とはJavaのインストール事前準備まずは、32bitと64bitでダウンロードするファイルが異なるので、パソコンのビット数を確認しておきましょう。デスクトップの左下のWindowsのマークを右クリックして、システムをクリックします。システムの種類のビット数をメモしておきます。 JDKのダウンロード Javaの開発環境であるJDK(Java SE Development Kit)をダウンロードします。 ※以下の手順では最新版のJDKがダウンロードされます。過去のバージョンのJDKは以下のサイトからダウンロードできます。過去のバージョンのJDKをダウンロードする： Oracle Java Archive それでは最新版のJDKをダウンロードしましょう。Javaのページにアクセスして、「無償で試す」をクリックします。「JDK Download」をクリックします。 Windows x64 Installerの右側にある「jdk-14.0.1_windows-x64_bin.exe」をクリックします。「I reviewed and…」にチェックを付けてダウンロードボタンをクリックします。 JDKのインストールダウンロードしたインストーラを実行し、次へをクリックします。後でパスを設定するときに必要なので、インストール先をメモしましょう。次へをクリックします。インストールが実行されます。閉じるをクリックしてインストール完了です。環境変数の設定次は、インストールしたJavaを使うための、環境変数を設定します。デスクトップの左下のWindowsのマークを右クリックして、システムをクリックします。システムの詳細設定をクリックします。環境変数をクリックします。システム環境変数のPathを選択して、編集をクリックします。新規をクリックし、インストール時にメモしたパスに「bin」を追記して入力します。入力が終わったらOKをクリックします。環境変数の画面に戻るので、OKをクリックします。システムのプロパティの画面もOKをクリックして、設定を完了します。動作確認最後に、動作確認を行いましょう。動作確認はコマンドプロンプトでjavacを使い、バージョンを表示することで確認できます。デスクトップの左下のWindowsのマークを右クリックして、ファイル名を指定して実行をクリックします。「cmd」と入力し、OKをクリックします。コマンドプロンプトの画面に、「javac -version」と入力し、Enterキーを押します。以下のように「javac 14.0.1」などとバージョンが表示されれば、JDKのインストール確認完了です。 ※表示されるバージョンはインストールしたJDKのバージョンにより異なります。大石ゆかり EclipseじゃなくてJDKというのをダウンロードするんですか？田島悠介 JDKはJavaの開発環境なんだ。総合開発環境の前にこちらをインストールしておくよ。大石ゆかり分かりました！次はどうしたらいいんでしょう？田島悠介今度はEclipseの方をダウンロード・インストールするよ。手順を見てみよう。 Eclipseのインストール Eclipseのダウンロードページにアクセスして、インストーラをダウンロードします。 Download の「Windows 64bit」をクリックします。もう一度、Downloadをクリックすると、ダウンロードが始まります。ダウンロードしたインストーラ(eclipse-inst-win64.exe)を実行します。 Eclipse IDE for java Developersをクリックします。後で日本語化する時に使うので、Installation Folder(インストールフォルダ)をメモしておいてください。メモをとったら「INSTALL」をクリックします。 Accept Nowをクリックします。インストールが完了するまで数分待ちましょう。以下のような画面になったらインストール完了です。 LAUNCHをクリックしてEclipseを起動します。ワークスペースを指定します。特に指定がなければ、そのままLaunchをクリックします。 Eclipseが起動しました。英語のメニューになっていますので、次は日本語化してみましょう。一旦、Eclipseは終了しておいてください。 Eclipseを日本語化日本語化するためにPleiadesというプラグインを導入します。 Pleiadesのダウンロードページにアクセスして、Windowsをクリックします。以下のリンクをクリックします。ダウンロードしたzipを解凍します。解凍により出てきたsetup.exeを実行します。選択ボタンを押し、Eclipseをインストールしたフォルダの中にある「eclipse.exe」を選択します。選択が終わったら「日本語化する」をクリックしましょう。日本語化が完了したら、Eclipseをインストールしたフォルダに有る「eclipse.exe -clean.cmd」を実行します。以下のように、日本語化されたEclipseが起動します。次回以降は、デスクトップのEclipseのショートカットから起動すれば、日本語化された状態で起動します。初期設定の手順それではEclipseを使ったJavaプロジェクトの作成と実行方法について確認しましょう。「ようこそ」のタブは閉じます。 Eclipseではプロジェクトと呼ばれるまとまりを作成し、その中にパッケージやソースコードを作成していくことでプログラミングを行います。ファイルメニューから新規>Javaプロジェクトをクリックします。プロジェクト名を適宜設定します。半角英数字で指定しましょう。漢字などの日本語は使用できません。入力したら「完了」をクリックします。以下のような画面になります。次に「src」を右クリックし、新規 > パッケージをクリックします。パッケージ名を適宜設定します。こちらも半角英数字で指定しましょう。入力したら「完了」をクリックします。作成したパッケージを右クリックし、新規>クラスをクリックします。名前を適宜設定します。また「public static void main(String[] args)(V)」にチェックを付けます。入力したら「完了」をクリックします。以下のような画面になります。「MyProject1」の中に「mypkg」というパッケージを作成し、さらにパッケージの中にJavaのソースコード「MyClass1.java」を作成した状態です。「.java」の部分は拡張子と呼ばれ、ファイルの種類を表しています。 Javaのプログラムの拡張子は「.java」となります。それでは簡単なソースコードを入力しましょう。 MyClass1の「// TODO 自動生成された…」の下に以下のように入力します。 System.out.println("こんにちは！Javaプログラミング！"); 入力が終わったら実行してみましょう。ツールバーの実行ボタンをクリックします。以下のように実行結果が表示されれば成功です！正しく動作しない場合、入力ミスなどが無いか確認しましょう。入れておくと便利なツール Eclipseには「プラグイン」と呼ばれる機能拡張の仕組みが存在します。例えば、前述した日本語化もPleiadesというプラグインを導入することで実現しています。以前は機能毎に後からプラグインを導入する必要がありましたが、最近のEclipseではあらかじめ主なプラグインが導入済となっています。ここでは導入しておくと便利な設定の1つとしてダークモードを紹介します。またプラグインのインストール、インストール済プラグインの確認方法についても見ていきましょう。ダークモード最近はOSや多くのエディタなどでも取り入れられているダークモードですが、Eclipseでも対応しています。 Eclipseでダークモードを設定するにはウィンドウメニューから設定を選択し、一般>外観でルック＆フィールを「ダーク」に選択します。設定後はEclipseを再起動すると良いでしょう。起動すると以下のようにダークモードが適用されます。プラグインの導入方法新たなプラグインを導入するには、ヘルプの「新規ソフトウェアのインストール…」をクリックします。作業対象を「すべての使用可能なサイト」とし、名前からプラグインを選択します。今回はデータベースPostgreSQL用のプラグインを選択しました。確認画面が表示されます。次へをクリックします。ライセンスに同意し、完了をクリックします。しばらくするとプラグインのインストールが完了します。導入済プラグインの確認方法導入済のプラグインを確認するには、ヘルプから「Eclipse IDE について」をクリックします。表示された画面の「インストール詳細」をクリックします。以下のようにインストール済のソフトウェアやプラグインを確認することが出来ます。以上、WindowsでJavaのEclipseを使った開発環境の構築と動作確認ができました。実際にJavaでプログラミングをしようと思ったら準備するものが多いと感じるかもしれませんが、一連の作業を終えれば実際にプログラミングをすることができます。田島悠介以上でJavaの開発環境構築とEclipseの日本語化は完了だよ。大石ゆかり Pleiadesの導入がちょっと難しそうですね…… 田島悠介このような環境構築はバージョンが変わったりするとやり方も変化する場合があるので、うまくいかない場合は新しい情報もチェックしてみよう。大石ゆかり調べながらやるのが大事ってことですね。ありがとうございました！ Javaの学習サイトもまとめているので、合わせてご覧ください。また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。 [お知らせ]オンラインのプログラミングスクールTechAcademyでは、Java講座を開催しています。JavaやServletの技術を使ってWebアプリケーションの開発を学ぶことができます。現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートします。

Java

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

PythonをXAMPPで使う方法について解説します。そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。田島悠介今回は、Pythonに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 PythonをXAMPPで使う方法について詳しく説明していくね！大石ゆかりお願いします！ XAMPPとは Webアプリケーションはクライアント（ブラウザ）とサーバーで構成されます。Webアプリケーションの開発に必要なサーバーのソフトウェアをまとめてインストールできるのがXAMPPです。 XAMPPには以下のソフトウェアが含まれます。WindowsやMac、Linux版などがあり、全て無償で利用できます。 Apache：Webサーバー MariaDB：データベース PHP：プログラミング言語 Perl：プログラミング言語 XAMPPと書いてザンプと読みます。「X」は複数のOSに対応していることを指し、「AMPP」は上記のソフトウェアの頭文字です。もともとはLinux専用で「LAMPP」と呼ばれていました。 PythonをXAMPPで使うメリット XAMPPには上記のようにPHPやPerlといったプログラミング言語が含まれていますが、設定をすることでPythonも利用できます。 PythonをXAMPPで使うとPythonで書いたプログラムをWebサーバー上で実行できます。 PHPやPerlよりPythonを使いたい場合にはお勧めです。なお、PythonのWebフレームワークであるFlaskやDjangoをApacheで動作させるためには、XAMPPに加えてWSGIという定義に準拠させるソフトウェアの導入と設定が必要になります。この記事ではフレームワークは使わずPython単体での利用方法を確認します。 [PR] PHPを学んで未経験からWebエンジニアを目指す方法とはPythonをXAMPPで使う方法まずは公式サイトからXAMPPをダウンロードしてインストールしましょう。 XAMPP公式サイト同様にPythonもダウンロードとインストールを行います。 Python公式サイト Windowsの場合には、インストールした後で環境変数「PATH」の設定が必要となります。環境変数の設定については以下を参考にしてください。環境変数の設定インストールが終わったらPythonをXAMPPで利用する設定を行います。XAMPPのコントロールパネルを開き、Apacheの右側にあるConfigボタンをクリックし、一番上の「Apache(http.conf)」を選択します。 httpd.confファイルが開いたら、一番下に以下を追記して保存します。 AddHandler cgi-script .py ScriptInterpreterSource Registry-Strict 追記したらhttpd.confファイルを閉じ、XAMPPのコントロールパネルからApacheのStartボタンをクリックします。最後にPythonのプログラムを作成して動作確認を行いましょう。 XAMPPをインストールしたフォルダに以下のファイルを作成します。1行目にはPythonをインストールしたフォルダから指定します。 test.py #!C:Usersuser1Anaconda3python.exe # -*- coding: utf-8 -*- print("Content-Type: text/htmln") print("Hello Python!") ブラウザから「http://localhost/test.py」にアクセスし、以下のように表示されることを確認しましょう。監修してくれたメンター太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント。地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、初心者でもPythonを使った人工知能（AI）や機械学習の基礎を習得できるオンラインブートキャンプPython講座を開催しています。挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

Python

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

今回は、Eclipseについて、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Eclipseはプログラミングをより効率的に実装できる開発環境です。実務でもEclipseを利用しているプロジェクトは多いので、実務に備えて学習してみてくださいね。目次XAMPPとはXAMPPのインストール方法XAMPPの使い方おわりに執筆してくれたメンターそもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。大石ゆかり田島メンター！エクリプスって何でしょうか？田島悠介元々はJava言語で作られているJavaプログラムの開発ツールなんだけど、PHPのプログラムも書くこともできるんだ。大石ゆかりテキストエディタで書くよりもメリットがあるんですか？田島悠介コード補完や、ステップ実行なんかもあって便利なんだ。では、インストール方法を見てみよう！今回の記事の流れ少し長い記事になるので、下記のような流れで説明していきます。インストール前の確認 Eclipseのインストール Eclipseを使ってみるインストールする方法だけでなく、日本語化の対応方法、簡単な使い方もあわせてご紹介します。 Eclipseとは Eclipse（エクリプス）は「統合開発環境（IDE）」と呼ばれるものです。初期のコードはIBM VisualAgeに由来しています。 2001年にオープンソース化されました。現在は様々なプラグインを利用することで、主流となっているプログラミング言語であればどんなものにも適用できます。 ※今回はWindows10でインストールしていますが、基本的な使い方はMacも同じです。 [PR] PHPを学んで未経験からWebエンジニアを目指す方法とはインストール前の確認 Eclipseをインストールする前に、お使いのPCの「対応ビット数」について確認しましょう。 Eclipseのインストーラをダウンロードする際に必要な情報なので、事前に調べておきます。対応ビット数の調べ方「スタートボタン」→「PC情報」と入力し、「PC情報」を選択します。赤枠の部分にある「64ビット」という記載があれば64ビットです。今回使用するのは、「64ビット」です。 32ビットバージョンをお使いの方は、2018年までの古いバージョンのものであれば利用自体は可能です。しかし、PCスペックの都合上、どうしても32ビットを利用しなければならない状態を除いて、64ビットバージョンを利用していただくと良いです。なお、今回のEclipseは「MergeDoc Project」が提供している、「Pleiades All in One」というパッケージを使用します。通常Eclipseをインストールすると、日本語化プラグインを導入するまでは表記が英語になります。「Pleiades All in One」を使用すると、インストールと同時に日本語プラグインを適用してくれます。加えて、利用したい言語のプラグインや、Eclipse動作環境に必須のJava系プログラムも設定されておりスムーズです。ただし、「Pleiades All in One」はWindowsにしか使うことができません。したがって、LinuxやMacでEclipseをインストールする場合は、英語版のEclipseをインストールしてください。 Eclipseのインストールここからはインストールの手順を解説します。 (1)インストーラをダウンロードここでは、Eclipseのダウンロード方法を解説します。まずは、MergeDoc Projectのサイトにアクセスして、赤枠の「Eclipse2021」をクリックします。画面が切り替わったら、プログラミング言語とビット数に合ったものをダウンロードします。今回は赤枠の、64bitのPHPの「Full Edition」を選びます。「Standard Edition」ではJavaなどのEclipseの動作に必要なソフトウェアが付属していないエディションなので、今回は使用しません。 Downloadをクリックすると、ダウンロードが開始されます。ダウンロードファイル名は、pleiades-2021-09-php-win-64bit-jre_20210919.zipのような形式です。ダウンロードするファイルは約719MBと大きいので、PCの空き容量には十分お気をつけてください。 (2)EclipseインストールここではEclipseのインストール作業を解説します。ダウンロードしてきたzipファイルを展開（解凍）します。 zipファイルを右クリックして、「全て展開」を選択すると次のような画面になります。解凍する先はCドライブ直下にするため、画像の赤枠にあるように「C:￥」としてCドライブを選択してから、「展開」をクリックします。展開（解凍）すると「pleiades」というフォルダができます。「pleiades」というフォルダを開くと、次のようなファイルとフォルダが表示されます。最初に「xampp」フォルダを開き、赤枠で囲んだ「xampp-control.exe」をダブルクリックしてください。ここで言語を選択するので、「英語（米国国旗）」を選択し「Save」をクリックしてください。さらに新しい画面が表示されますので、「Apache」「MySQL」の右横の「Start」ボタンを押してください。完了したらWebブラウザを起動し、「http://localhost/」とURL欄に入力してください。このような画面が表示されたら、XAMPPのインストール起動は完了です。続いて、「pleiades」フォルダ内にある「eclipse」フォルダを開きます。さらに「eclipse」フォルダ内にある「eclipse.exe」を実行します。 ※注意：「eclipsec.exe」という似ている名前のファイルがあるので注意してください。「eclipse.exe」を実行した後、画面が切り替わるまで少々お待ちください。ワークスペース・ランチャー画面が表示されたら「OK」ボタンをクリックします。これで、日本語化されたPHPプラグイン導入済みのEclipseのインストールが完了しました。 Eclipseを使ってみるここでは、Eclipseの基本的な使い方をご紹介します。 Eclipseを使う際は、事前に次の2つのファイルを実行しましょう。 xampp-control.exe eclipse.exe xampp-control.exeは、「xampp」フォルダにあります。 eclipse.exeは、「pleiades」フォルダ内の「eclipse」フォルダにあります。 Eclipseを起動 eclipse.exeを実行したら、「ファイル」→「新規」→「PHPプロジェクト」を選択します。新たな画面が表示されたら、各項目を入力します。最初は、デフォルトで選択済みの状態でよいです。今回のプロジェクト名はtestにしてみます。今回入力した内容プロジェクト名：test 内容：ワークスペース内に新規プロジェクトを作成(チェックを入れる) PHPバージョンデフォルトPHP設定を使用(チェックを入れる) プロジェクト・レイアウト：プロジェクトをソース・フォルダとして使用(チェックを入れる) JavaScriptサポート：なし(チェックを外す) 項目を入力したら「完了」ボタンを押します。ここで最初の画面に戻ったら、画面左側に今作った「test」が表示されます。作成した「test」を選択し、「ファイル」→「新規」→「PHPファイル」を選択します。この画面が表示されたら、ファイル名を「sample.php」として「完了」ボタンを押します。 EclipseでPHPプログラムを書いてみようここでプログラムを書いてみましょう。サンプルプログラム <?php $a = 'Hello eclise '; echo $a; $b = 'Hello Pleiades All in One 日本語ディストリビューション '; echo $b; phpinfo(); 実行結果解説 <?phpでは、PHPプログラムを開始しています。 $a = ‘Hello eclise ’;では、Hello ecliseという文字列と、 という改行コードを変数$aに代入しています。 echo $a;では、変数$aを表示しています。 $b = ‘Hello Pleiades All in One 日本語ディストリビューション ’;では、Hello Pleiades All in One 日本語ディストリビューションという文字列と、 という改行コードを、変数$bに代入しています。 echo $b;では、変数$bを表示しています。 phpinfo();では、PHP情報を表示しています。プログラム実行とエンコードプログラムを実行してみます。左側にある「test」プロジェクトの▼マークをクリックして、ツリー表示させます。表示した「test」プロジェクトの中に、「sample.php」があります。「sample.php」を右クリックして「実行」→「PHP Webアプリケーション」を選択します。選択後、次のように表示されたらテストプログラムの実行は成功です。しかし、今のままでは文字化けしています。そこで、表示されている画面上で右クリックをして、「エンコード」→「Unicode(UTF-8)」を選択します。エンコードを変更すると文字化けがなおります。今後、文字化けが発生した場合も同様の方法で修正してください。まとめ Eclipseを利用することで、PHPの開発環境を簡単に構築できました。 Eclipseを利用する場合は、「MergeDoc Project」が提供している、「Pleiades All in One」を利用すると簡単でした。ぜひ自分でインストールして、アプリを開発してみてください！ PHPの開発環境として使えるXAMPPのインストール方法もあわせてご覧ください。大石ゆかりプロジェクトを作らなければいけないのは、少し手間ですねー。田島悠介小さいプログラムの場合は、特にそうかもしれないね。大石ゆかりプロジェクトはEclipseのツールの形式に対応したファイル形式みたいな感じで、ワークスペースは保存するフォルダであっていますか？田島悠介その通り！最初の内はテキストエディタでいいかもしれないけど、慣れたら何かのIDEを使って作成するようにしたいね。 PHPを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたいプログラミングを学習していて、このように思ったことはありませんか？テックアカデミーのPHP/Laravelコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、PHP/Laravelを使ったWebアプリケーション開発を学べます。まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

PHP

XAMPPを使ってWordPress用にローカル環境構築する方法【初心者向け】

WordPressを使ったサイト制作でも、ローカル環境を構築することができます。サイトをカスタマイズして、完成させてから公開したいという方におすすめです。「ローカル環境を構築」と言うと、専門的で敷居が高そうですが、XAMPPを使うと手軽にできます。今回は、XAMPPを使ってWordPress用にローカル環境構築する方法をお伝えします。なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。大石ゆかり田島メンター！！WordPressのカスタマイズをしてみたいんですけど、はじめから本番環境でやるのって怖いので、何かいい方法はないですか？田島悠介それならXAMPPを使ってパソコン上にローカルの開発環境を作るといいよ。大石ゆかり XAMPPですか・・・？なんか難しそうですね・・・・・。田島悠介手順を踏めばそんなことないよ！やってみようか。大石ゆかりはい、お願いします！ XAMPPをダウンロード、インストールまずはXAMPPをインストールしてみましょう。上記のリンクを参考に試してみてください。一緒に簡単な使い方もチェックしておくと良いでしょう。 XAMPPを起動起動して、「Apache」と「MySQL」をスタートさせます。スタートさせたら、ブラウザに「http://localhost」を入力して開いてください。言語を選べるので、一番端の日本語を選択します。この画面が表示されたら準備完了です。 [PR] PHPを学んで未経験からWebエンジニアを目指す方法とはセキュリティ設定まずはセキュリティを設定していおきましょう。左のメニューから、「ステータス」を確認してください。赤枠で囲んだ部分が「要注意」として警告が出ていると思います。このままでは、外部から攻撃されてしまうリスクがあります。リンク先から、セキュリティの設定をしましょう。 MYSQLのROOTパスワードとXAMPPのディレクトリ制御（.htaccess）のユーザ名とパスワードを決めていきます。ここで決めたパスワードは忘れないように注意してください。なお、XAMPPのセキュリティについては、XAMPPでセキュリティ設定を行う方法でより詳しく紹介しています。 WordPress用のデータベースをMySQLに作成ホーム画面の左メニュー、ツールの「phpMyAdmin」をクリックしてください。ログイン画面が表示されるので、言語で日本語を選択します。その下には、先ほど設定したMySQLのユーザ名とパスワードを入力します。 MySQL接続の照合順序が「utf8_general_ci」にであることを確認してください。 OKなら、上部にある「データベース」をクリックします。続いて、作成するデータベースの名前を決めて入力します。 WordPress用なので、「wp」とするとわかりやすいかもしれません。 XAMPPにWordPressをインストールいよいよWordPressをインストールしていきます。まず、WordPressの公式サイトからWordPressをダウンロードしてください。ダウンロードしたzipファイルは解凍ソフトで解凍し、XAMPPの中に移動します。移動する場所は、C:￥xampp￥htdocsのフォルダの中です。この「htdocs」というフォルダが、公開ディレクトリになります。これで、WordPressのインストールは完了です。ブラウザからログイン最後に、ブラウザからログインしてユーザー名などを設定します。 http://localhost/wordpress（ここは、作成したフォルダ名で変わります）/にアクセスしてください。このあとは通常のWordPressを設定するときと同じですので、WordPressをインストールする方法を参考にログインしてみてください。ログインできると、ローカル環境でWordPressの編集ができるようになります。いかがでしたか？ WordPressを本格的に自分でデザインしてみたい！という人は、ぜひチャレンジしてみましょう。 WordPressをさらに使いこなしたい場合は、WordPressを最新版にアップグレードする方法も合わせてご覧ください。大石ゆかりこれで安心してカスタマイズができます♪ 田島悠介そうだね。失敗しても気軽に作り直せるから安心だね！大石ゆかりはい♪ [お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。

WordPress

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

今さら聞けない！XAMPPをインストールする方法【超初心者向け】現役エンジニアが解説

目次

XAMPPとは