<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>【webアプリケーション】タグの記事一覧｜ミトラボ</title>
	<atom:link href="https://mito-lab.com/tag/web%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3/feed/" rel="self" type="application/rss+xml" />
	<link>https://mito-lab.com</link>
	<description>フリーランスWebデザイナーの実験と備忘録</description>
	<lastBuildDate>Tue, 02 Feb 2021 06:54:20 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=5.6.17</generator>

<image>
	<url>https://mito-lab.com/wp-content/uploads/2019/11/cropped-fav_mitolab2.0-1-32x32.jpg</url>
	<title>【webアプリケーション】タグの記事一覧｜ミトラボ</title>
	<link>https://mito-lab.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>【Webアプリを作ろう】EclipseのインストールとPleiades(Java環境)の設定</title>
		<link>https://mito-lab.com/eclipse-setting/</link>
					<comments>https://mito-lab.com/eclipse-setting/#respond</comments>
		
		<dc:creator><![CDATA[mito]]></dc:creator>
		<pubDate>Tue, 02 Feb 2021 06:50:44 +0000</pubDate>
				<category><![CDATA[Webアプリケーション開発]]></category>
		<category><![CDATA[コーディングの勉強]]></category>
		<category><![CDATA[webアプリケーション]]></category>
		<guid isPermaLink="false">https://mito-lab.com/?p=2832</guid>

					<description><![CDATA[ということで、webアプリを作ろうと題し、webアプリ作成に必要な基礎知識を備忘録的にまとめていこうと思います。 Webアプリケーションに必要な開発環境とは？ Webアプリケーションのポイントはサーバサイドプログラムと呼]]></description>
										<content:encoded><![CDATA[<p>こんにちは、mito(<a href="https://twitter.com/mito_works" target="_blank">@mito_works</a>)です。</p>
<div class="balloon-box balloon-right balloon-none balloon-bg-gray clearfix">
<div class="balloon-icon maru"><img src="https://mito-lab.com/wp-content/uploads/2024/01/fukidashi.jpg" alt="mito" width="80" height="80"></div>
<div class="icon-name">mito</div>
<div class="balloon-serif">
<div class="balloon-content">最近、静的サイト以外にも、データーベースから値を取得し表示するなど、少し複雑なロジックが入ったアプリケーションを作りたいな..と思うようになりました。</div>
</div></div>
<div class="balloon-box balloon-left balloon-gray balloon-bg-none clearfix">
<div class="balloon-icon maru"><img src="https://mito-lab.com/wp-content/uploads/2019/05/dog2.jpg" alt="momo" width="80" height="80"></div>
<div class="icon-name">momo</div>
<div class="balloon-serif">
<div class="balloon-content">検索結果を検索条件に合わせて表示する。ユーザーが入力したコメントをDBに保管し、表示するなどできると制作の幅が広がるね！</div>
</div></div>
<p>ということで、webアプリを作ろうと題し、webアプリ作成に必要な基礎知識を備忘録的にまとめていこうと思います。</p>
<h2>Webアプリケーションに必要な開発環境とは？</h2>
<p>Webアプリケーションのポイントは<strong>サーバサイドプログラム</strong>と呼ばれるプログラムです。</p>
<div class="balloon-box balloon-left balloon-gray balloon-bg-none clearfix">
<div class="balloon-icon maru"><img src="https://mito-lab.com/wp-content/uploads/2019/05/dog2.jpg" alt="momo" width="80" height="80"></div>
<div class="icon-name">momo</div>
<div class="balloon-serif">
<div class="balloon-content">ブラウザのリクエストによって、<span class="marker2"><strong>サーバ上で動作し、その実行結果をHTMLでレスポンスするよ</strong></span>！</div>
</div></div>
<div class="balloon-box balloon-right balloon-none balloon-bg-gray clearfix">
<div class="balloon-icon maru"><img src="https://mito-lab.com/wp-content/uploads/2024/01/fukidashi.jpg" alt="mito" width="80" height="80"></div>
<div class="icon-name">mito</div>
<div class="balloon-serif">
<div class="balloon-content">ユーザーがブラウザを使い、<span class="marker"><strong>何かしらのサーバプログラムの実行を指令してその結果をまたブラウザ表示で確認するという流れでWebアプリケーションは動く</strong></span>のですね。</div>
</div></div>
<div class="balloon-box balloon-left balloon-gray balloon-bg-none clearfix">
<div class="balloon-icon maru"><img src="https://mito-lab.com/wp-content/uploads/2019/05/dog2.jpg" alt="momo" width="80" height="80"></div>
<div class="icon-name">momo</div>
<div class="balloon-serif">
<div class="balloon-content">サーバサイドプログラムのしくみを実現する技術はいくつかありますが、<span class="marker2"><strong>サーバサイドプログラムをJavaで開発する場合、「サーブレット」と「JSP」という技術を使うよ！</strong></span></div>
</div></div>
<div class="balloon-box balloon-right balloon-none balloon-bg-gray clearfix">
<div class="balloon-icon maru"><img src="https://mito-lab.com/wp-content/uploads/2024/01/fukidashi.jpg" alt="mito" width="80" height="80"></div>
<div class="icon-name">mito</div>
<div class="balloon-serif">
<div class="balloon-content">通常のHTMLのコードと同じようにフォルダごとサーバにアップするとブラウザで確認できるのですか？</div>
</div></div>
<div class="balloon-box balloon-left balloon-gray balloon-bg-none clearfix">
<div class="balloon-icon maru"><img src="https://mito-lab.com/wp-content/uploads/2019/05/dog2.jpg" alt="momo" width="80" height="80"></div>
<div class="icon-name">momo</div>
<div class="balloon-serif">
<div class="balloon-content">通常のWebサーバはHTTPを使ってブラウザと通信する機能は持っているけれど、プログラムを実行する機能は持っていません</div>
</div></div>
<div class="balloon-box balloon-right balloon-none balloon-bg-gray clearfix">
<div class="balloon-icon maru"><img src="https://mito-lab.com/wp-content/uploads/2024/01/fukidashi.jpg" alt="mito" width="80" height="80"></div>
<div class="icon-name">mito</div>
<div class="balloon-serif">
<div class="balloon-content">では、Webアプリはフォルダをサーバアップしただけでは動かないと言うことですか？</div>
</div></div>
<div class="balloon-box balloon-left balloon-gray balloon-bg-none clearfix">
<div class="balloon-icon maru"><img src="https://mito-lab.com/wp-content/uploads/2019/05/dog2.jpg" alt="momo" width="80" height="80"></div>
<div class="icon-name">momo</div>
<div class="balloon-serif">
<div class="balloon-content">はい！なので、Webサーバーに加え、<span class="marker marker2"><strong>プログラムを実行する機能（実行環境）を持った（Web）アプリケーションサーバが必要になります</strong></span>。</div>
</div></div>
<p>特にサーブレットクラスの実行環境を<span class="marker"><strong>サーブレットコンテナ</strong></span>といいます。</p>
<div class="balloon-box balloon-right balloon-none balloon-bg-gray clearfix">
<div class="balloon-icon maru"><img src="https://mito-lab.com/wp-content/uploads/2024/01/fukidashi.jpg" alt="mito" width="80" height="80"></div>
<div class="icon-name">mito</div>
<div class="balloon-serif">
<div class="balloon-content">ということは..Webアプリケーションを開発するには、<span class="marker"><strong>サーブレットコンテナをもつ（Web）アプリケーションサーバーが必要</strong></span>なんですね！</div>
</div></div>
<div class="kaisetsu-box4">
<div class="kaisetsu-box4-title">まとめ</div>
<p>Webアプリケーション開発には、ブラウザと通信する機能（Webサーバ）とサーバサイドのプログラム実行の機能（サーブレットコンテナをもつサーバ）が必要。</p>
</div>
<div class="balloon-box balloon-right balloon-none balloon-bg-gray clearfix">
<div class="balloon-icon maru"><img src="https://mito-lab.com/wp-content/uploads/2024/01/fukidashi.jpg" alt="mito" width="80" height="80"></div>
<div class="icon-name">mito</div>
<div class="balloon-serif">
<div class="balloon-content">Webアプリケーションを作成するために、2種類の機能が必要ということはわかりました。で..どうやってそのサーバを用意したら良いのでしょう？</div>
</div></div>
<div class="balloon-box balloon-left balloon-gray balloon-bg-none clearfix">
<div class="balloon-icon maru"><img src="https://mito-lab.com/wp-content/uploads/2019/05/dog2.jpg" alt="momo" width="80" height="80"></div>
<div class="icon-name">momo</div>
<div class="balloon-serif">
<div class="balloon-content">今回は<span class="marker2"><strong>統合開発環境Eclipse(イクリプス)にPleiades(プレアデス)というソフトウェアをインストールして環境を作ります</strong></span>。</div>
</div></div>
<div class="balloon-box balloon-right balloon-none balloon-bg-gray clearfix">
<div class="balloon-icon maru"><img src="https://mito-lab.com/wp-content/uploads/2024/01/fukidashi.jpg" alt="mito" width="80" height="80"></div>
<div class="icon-name">mito</div>
<div class="balloon-serif">
<div class="balloon-content">ややこしいので用語説明挟みます！</div>
</div></div>
<p>&nbsp;</p>
<div class="simple-box6">
<p><strong>Eclipse</strong>:エディタと開発に関わるツール（コンパイラ、デバッガなど）を統合したソフトウェア。<strong>IDE(Integrated Development Environment)</strong>とも呼ばれます。</p>
</div>
<div class="simple-box6">
<p><strong>Pleiades</strong>:EclipseにApache Tomcatというアプリケーションサーバソフトウェアとその他便利なプラグインを入れたもののことです。</p>
</div>
<div class="balloon-box balloon-right balloon-none balloon-bg-gray clearfix">
<div class="balloon-icon maru"><img src="https://mito-lab.com/wp-content/uploads/2024/01/fukidashi.jpg" alt="mito" width="80" height="80"></div>
<div class="icon-name">mito</div>
<div class="balloon-serif">
<div class="balloon-content">つまり、EclipseとPleiadesの設定を行えば開発ができるということですね！</div>
</div></div>
<h2>Eclipseのインストール</h2>
<p>こちらより最新のEclipseをダウンロードします。</p>
<img class="alignnone size-large wp-image-2833" src="https://mito-lab.com/wp-content/uploads/2021/02/eclipse環境設定1-1024x435.png" alt="" width="1024" height="435" srcset="https://mito-lab.com/wp-content/uploads/2021/02/eclipse環境設定1-1024x435.png 1024w, https://mito-lab.com/wp-content/uploads/2021/02/eclipse環境設定1-300x127.png 300w, https://mito-lab.com/wp-content/uploads/2021/02/eclipse環境設定1-768x326.png 768w, https://mito-lab.com/wp-content/uploads/2021/02/eclipse環境設定1.png 1483w" sizes="(max-width: 1024px) 100vw, 1024px" />
<div class="balloon-box balloon-right balloon-none balloon-bg-gray clearfix">
<div class="balloon-icon maru"><img src="https://mito-lab.com/wp-content/uploads/2024/01/fukidashi.jpg" alt="mito" width="80" height="80"></div>
<div class="icon-name">mito</div>
<div class="balloon-serif">
<div class="balloon-content">以下、mac PCのやり方です。</div>
</div></div>
<div class="t-aligncenter"><span class="color-button01"><a href="https://mergedoc.osdn.jp/">Eclipseダウンロードページ</a></span></div>
<p>&nbsp;</p>
<div>
<div class="balloon-box balloon-left balloon-gray balloon-bg-none clearfix">
<div class="balloon-icon maru"><img src="https://mito-lab.com/wp-content/uploads/2019/05/dog2.jpg" alt="momo" width="80" height="80"></div>
<div class="icon-name">momo</div>
<div class="balloon-serif">
<div class="balloon-content">JavaのFull Editionをダウンロードしましょう！</div>
</div></div>
</div>
<div></div>
<div></div>
<h2>Pleiadesのインストール</h2>
<div>ダウンロードした「pleiades-2020-12-java-mac-jre_20201222.dmg」(*)を展開します。</div>
<div></div>
<div>*最新版が変わるため名称は多少異なる可能性があります。</div>
<div></div>
<h3>Eclipseの実行</h3>
<p>任意の場所に展開したEclipse.appをダブルクリックし、実行します。</p>
<img class="alignnone size-full wp-image-2834" src="https://mito-lab.com/wp-content/uploads/2021/02/eclipse環境設定2.png" alt="" width="446" height="348" srcset="https://mito-lab.com/wp-content/uploads/2021/02/eclipse環境設定2.png 446w, https://mito-lab.com/wp-content/uploads/2021/02/eclipse環境設定2-300x234.png 300w" sizes="(max-width: 446px) 100vw, 446px" /> <img class="alignnone size-large wp-image-2835" src="https://mito-lab.com/wp-content/uploads/2021/02/パースペクティブ変更1-1024x491.png" alt="" width="1024" height="491" srcset="https://mito-lab.com/wp-content/uploads/2021/02/パースペクティブ変更1-1024x491.png 1024w, https://mito-lab.com/wp-content/uploads/2021/02/パースペクティブ変更1-300x144.png 300w, https://mito-lab.com/wp-content/uploads/2021/02/パースペクティブ変更1-768x368.png 768w, https://mito-lab.com/wp-content/uploads/2021/02/パースペクティブ変更1-1536x737.png 1536w, https://mito-lab.com/wp-content/uploads/2021/02/パースペクティブ変更1-2048x983.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" />
<p>日本語化されたWorkspaceが表示されていればOKです。</p>
<p>参考図書はこちらです！<br />
<!-- START MoshimoAffiliateEasyLink --><script type="text/javascript">(function(b,c,f,g,a,d,e){b.MoshimoAffiliateObject=a;b[a]=b[a]||function(){arguments.currentScript=c.currentScript||c.scripts[c.scripts.length-2];(b[a].q=b[a].q||[]).push(arguments)};c.getElementById(a)||(d=c.createElement(f),d.src=g,d.id=a,e=c.getElementsByTagName("body")[0],e.appendChild(d))})(window,document,"script","//dn.msmstatic.com/site/cardlink/bundle.js","msmaflink");msmaflink({"n":"スッキリわかるサーブレット\u0026JSP入門 第2版 (スッキリシリーズ)","b":"","t":"","d":"https:\/\/m.media-amazon.com","c_p":"\/images\/I","p":["\/51eHmbjUjjL.jpg","\/515iWOgMf9L.jpg","\/41gcNt5E5IL.jpg","\/51WcsIGQfcL.jpg","\/51FKdVS3m0L.jpg","\/51yG7wL2taL.jpg","\/41l4SvucRbL.jpg","\/41+kHtgdu0L.jpg"],"u":{"u":"https:\/\/www.amazon.co.jp\/dp\/4295005940","t":"amazon","r_v":""},"b_l":[{"id":1,"u_tx":"Amazonで見る","u_bc":"#f79256","u_url":"https:\/\/www.amazon.co.jp\/dp\/4295005940","a_id":1522799,"p_id":170,"pl_id":27060,"pc_id":185,"s_n":"amazon","u_so":1},{"id":2,"u_tx":"楽天市場で見る","u_bc":"#f76956","u_url":"https:\/\/search.rakuten.co.jp\/search\/mall\/%E3%82%B9%E3%83%83%E3%82%AD%E3%83%AA%E3%82%8F%E3%81%8B%E3%82%8B%E3%82%B5%E3%83%BC%E3%83%96%E3%83%AC%E3%83%83%E3%83%88%26JSP%E5%85%A5%E9%96%80%20%E7%AC%AC2%E7%89%88%20(%E3%82%B9%E3%83%83%E3%82%AD%E3%83%AA%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA)\/","a_id":1465154,"p_id":54,"pl_id":27059,"pc_id":54,"s_n":"rakuten","u_so":2},{"id":3,"u_tx":"Yahoo!ショッピングで見る","u_bc":"#66a7ff","u_url":"https:\/\/shopping.yahoo.co.jp\/search?first=1\u0026p=%E3%82%B9%E3%83%83%E3%82%AD%E3%83%AA%E3%82%8F%E3%81%8B%E3%82%8B%E3%82%B5%E3%83%BC%E3%83%96%E3%83%AC%E3%83%83%E3%83%88%26JSP%E5%85%A5%E9%96%80%20%E7%AC%AC2%E7%89%88%20(%E3%82%B9%E3%83%83%E3%82%AD%E3%83%AA%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA)","a_id":1710692,"p_id":1225,"pl_id":27061,"pc_id":1925,"s_n":"yahoo","u_so":3}],"eid":"TojL0","s":"l"});</script></p>
<div id="msmaflink-TojL0">リンク</div>
<p><!-- MoshimoAffiliateEasyLink END --><br />
&#8211;End&#8211;</p>
]]></content:encoded>
					
					<wfw:commentRss>https://mito-lab.com/eclipse-setting/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
