0からのWebアプリケーション 〜環境構築、サンプルアプリ作成①〜
とりあえずWebアプリケーションをつくって動かしてみようということで、サイトを参考にまず環境構築に挑戦!
2014年度版 Eclipse + Struts2 による Java Web アプリ開発入門 | Cyokodog
で始めてみた。が、PCがMacだったため、EclipseとTomcatのインストールはMacのサイトを参照。
Eclipseをインストール
» Java環境構築(Mac版) Eclipseのインストール Tech Fun.cc
Tomcatをインストール
MacにTomcat7をインストールする - @thorikiriのてょりっき
あと、文章のみでわかりづらいところを画面を踏まえての説明と、参考ページとバージョンが違い、かえたところを以下に記載。
2014年度版 Eclipse + Struts2 による Java Web アプリ開発入門 | Cyokodog
・「[プロジェクトエクスプローラー]の[MyServlet.java]を選択した状態で、[右クリック][実行][サーバで実行]を選択し、ダイアログを表示したら[完了]をクリック。」を画面で補足
補足①新しいサーバを設定するため、以下を選択する
補足②以下リンクをクリック
補足③今回使用している「Tomcat v7.0 Server」を選択し「Finish」
補足④「Hello , MyServlet!」を表示させるためにプロジェクト実行!「MyServlet.java」⇒「Run As」⇒「Run on Server」を選択
補足⑤「Tomcat v7.0 Server at localhost」を選択し「Finish」
補足⑥「Hello, MyServlet !」が表示される!
ついでにWebブラウザでも
・「log4j-1.2.17.jar」は別サイトでダウンロードする
補足①以下サイトからダウンロード
Apache log4j 1.2 - Download Apache log4j 1.2
補足②ダウンロードした「log4j-1.2.17.tar.gzを解凍し「log4j-1.2.17.jar」をEclipseのlib配下にコピー
$ cd ~/Downloads $ tar zxvf log4j-1.2.17.tar.gz
と、「Struts2」のライブラリをEclipseにいれるところまでは、一応順調にきた。が、「ログイン画面の作成」のところで「http://localhost:8080/HelloStruts2/login.action」にアクセスすると以下エラーが発生。。。
LoginAction.javaのアノテーションの指定方法が、バージョンアップしたことによりかわったみたいなので、別のページを参考に変更してみたが、現象は同じ。。。
参考ページ
[ 2514 ] Struts2.0.11.2から2.1.6にしてみて困ったこと ::: Serendipity 2 future lies'n sundome. (´・ω・)
はまりそうな予感なので、struts.xmlで指定するやり方のサイトを元にサンプルアプリを作成することに変更。。。恥ずかしい。。。次回へ続き。。。
0からのWebアプリケーション 〜Webの発端〜
今まで、組み込み、業務系のわたしがおくる。Web知識があまりなく、これからWebを勉強したいひとへの記事。わたしも超初心者なので、参考文献のうけるりですが。。。
HTML、CSS、JSP、サーブレット、フレームワークといろいろな言葉があるWebアプリケーション。言語から勉強してもいまいち役割などがわからないので、まず「なぜ」Webアプリケーションができたのか。
最も効率よく「技術」を学ぶ方法⇒その歴史や背景を抑えること。技術はひとが生み出している。必要になった背景から問題意識が生まれ、それを解決するために新しい技術が生み出される。それの繰り返し。 by プロになるためのWeb技術入門
Webアプリケーションとは?
デスクトップアプリケーションとWebアプリケーションを比較
項目 | デスクトップアプリケーション | Webアプリケーション |
---|---|---|
処理の主体 | 手元のPC | サーバ |
画面の表示 | OS上の表示 | Webプラウザ上で表示 |
インストール | 必要 | 不要 |
その他例えば、Webアプリケーションはインストールがいらいないので、アップデートなどの作業がいらない。アクセスすれば最新になっているなどなど!
Webアプリケーションがどのように発展したか?
インターネットの普及で生活が劇的に便利になった(例:Amazon、運行情報など)。そもそもインターネットとはなに?
インターネットとは世界中のコンピュータを接続するネットワーク網
もともと世界規模で構築されたものではなく、誕生してから10数年の間に、さまざまなコンピュータネットワークを相互接続することで発展。
インターネット(Internet)
「インター(Inter)は「〜の間」とか「相互」。「ネットを相互につないだ」もの
インターネット普及の立役者・World-Wide WebとMosaic
インターネットの原型は遡ること今から45年前の1969年に、「ARPANET(アーバネット)」と呼ばれるアメリカ国防総省が研究・調査目的のために構築したネットワーク。軍事利用。。。当初の20年近くは大学や研究機関の関係者など、ごく一部の限られたひとだけが利用していた。
なぜ!?
・インターネットを利用するためのコンピュータやネットワークが高価だった
・利用用途が電子メールの交換やファイル共有といった比較的地味なものが中心だった
と考えられている。普段コンピュータに縁のない人々にはあまり興味が向かないし、そもそも、当時はコンピュータが一般的ではなかった。
World-Wide Web(WWW)
世界ではじめてWWWが提案されたのは1989年、欧州原子核研究機構(CERN(セルンorサーン))という組織の中で、核素粒子の実験成果を全世界の研究者で共有しようという話になったが、当時の電子メールやファイル転送といった技術ではどうにも使いがってが悪かった。。。試行錯誤が重ねられ、CERN所属のティム・バーナーズ=リー博士が、提案・開発したのがWWW。
博士は研究成果を「HTML(Hyper Text Markup Language)」と呼ばれる統一された形式で表現することを考えた。研究成果には図表や参考文献などもある。これらをテキストファイル(文字だけで構成されたファイル)だけで表現できるようにした⇒HTML。
一番の目玉は「Hyper Text(ハイパー・テキスト)」と呼ばれる仕組みで文章間の参照が「Hyper Link(ハイパー・リンク)」というコンピュータに理解できる形式で記述されているので、瞬時に参照先の文書が閲覧できる。
このようなネットワーク上でリンクされたハイパーリンクのつながりが、あたかも蜘蛛の巣のようにみえることから、World-Wide Web(世界に広がる蜘蛛の巣)と名付けられた!
情報の相互伝達効率が大幅に向上。
現在のWebブラウザの祖先・NCSA Mosaic
WWWが登場してもしばらくは研究者間でひっそり利用されていた。当時のWebブラウザ(Lynx(インクス、http://lynx.browser.org/)等)では、文字+画像、動画を混在させる表現ができず、テキストと画像のページは別々なのが一般的だった。
文字、画像を混在させて表示できるようにしたのが、イリノイ工科大学の米国立スーパーコンピュータ応用研究所(NCSA:National Center for Supercomputing Applications)に在籍していたマーク・アンドリーセンらによって1993年に開発されたNCSA MosaicというWebブラウザ。
・無料で誰でも利用できるように公開された
・豊かな表現もできるようになったため、一般に近い人々の興味を惹くようになった
ことからWWWの利用は大きく広がった。さらに
・HTMLはプログラミング知識がなくても、比較的簡単に記述できるため、さまざまな人々がさまざまな情報をインターネット上に公開するようになった
・1990年後半からパーソナルコンピュータの高性能化と低価格、ネットワークのインフラも普及し、常時安価で利用できるようになった
ことからインターネットの利用が一気に普及していった。
Webを支える技術
WWWによるハイパーテキストの公開と閲覧は、具体的には「Webサーバ(WWWサーバ、HTTPサーバともいう)」と「Webクライアント(Webブラウザ)」というソフトウェアで実現している。
※ソフトウェア例
【Webクライアント】
Internet Exporer、Firefox、Safariなど
【Webサーバ】
「Apache HTTP Server(アパッチ)」、
Microsoft社の「Internet Information Services(通称IIS)」など
なぜサーバとクライアントに分けるの?
管理が楽(サーバ1箇所にコンテツを集められる)
支える技術①URL「そのリソースはどこにあるの?」
WebブラウザがWebサーバから目的のコンテンツをどうやって得るのか
インターネット上のコンテンツを一意にする仕組みが必要
URL(Uniform Resource Locator)(統一資源位置子)
スキーム
リソースの取得方法。RFC1738という文書で規定されている。 よく利用されるスキーム。
スキーム名 | 説明 |
---|---|
https | 暗号化されたhttp通信を表す |
mailto | 電子メールの宛先を表す |
ftp | FTPプロトコルによる入手を表す |
file | ファイル・システム中のファイルやディレクトリを参照 |
ホスト名
リソースが存在するホスト(コンピュータ)名を表す。一般的にネットワークに接続されてほかのコンピュータからの要求を受け取り、処理した結果を返すようなコンピュータのことを「ホストコンピュータ」と呼び、ここでいう「ホスト名」。
一意を保つために、親ドメインを2010年現在、日本では「日本レジストリサービル(JPRS)」という会社が管理している。2002年4月1日以前は、「日本ネットワークインフォメーションセンター(JPNIC)」という団体が管理していた。ローカル名は組織の中で自由に決めてOK。
パス名
ホスト名で指定されたコンピュータ上のリソースの位置を示す。
支える技術②HTTP「どんな形式でおくればいいの?」
WWWを実現するためにURLの他に、Webサーバ⇔Webクライアント間に通信の取り決めが必要だった。インターネットにはさまざまな種類のコンピュータがつながっているため、どのように通信を行うか取り決めが必要。この通信方法の取り決めを「通信プロトコル(Communications protocol)」という。
WWWができた当時、FTP(ファイルの転送プロトコル)、SMTP(メールの送信プロトコル)が存在した。バーナーズ=リー博士はこれを参考にHTMLの転送に適したプロトコルを新たに考案。これが「HTTP(Hyper Text Transfer Protocol)」。
URLやHTTPの技術仕様はインターネット上の「RFC(Rquest for Comments)」で公開されている。
CGIの誕生「動的なコンテンツつくりたいよね」
CGIは現在のWebアプリケーションが登場するきっかけとなった。CGIが誕生する前、
・Webサーバは「あらかじめ用意された情報を公開する」という機能しかなかったこのため、動的なコンテンツが必要になった。例えば、時間により挨拶がかわる、アクセス数が表示されるなど。
HTMLが非常に単純なテキスト形式だったため、自動的にHTMLを作成したり、既に存在するHTMLにちょっとした変更を加えるだけで、動的なものがつくれた。
・プログラムによって生成されるコンテンツを「動的コンテンツ」
・あらかじめ用意されたコンテンツを「静的コンテンツ」
動的なコンテンツをWebクライアントに渡すには
・Webサーバとコンテンツを生成するプログラムとの連携が必要
そこで考えだされたのが「CGI(Common Gateway Interface)」という仕組み。
実際にWebサーバ上で動作し、コンテンツを生成する目的で主に利用されたのは「Perl」。また、大規模なシステムや高速性が求められる場合は「C言語」。
・CGIはあくまでも「Webサーバとプログラム間でリクエストとレスポンスをやりとりするための規約」。
サーブレットの登場
CGIにおいて、開発言語、性能の問題。。。
・Perlは手軽にテキスト処理を行うことが得意な言語のため、大規模なアプリケーションの開発にはあまり向いていない。
・大規模・複雑なアプリケーションを開発するのに必須とも言える、オブジェクト指向プログラミングも取り入れられていない(Perl5はオブジェクト指向利用可)。
従来はWebブラウザからリクエストが届くたびに、CGIを通してプロセスを起動しないといけない。起動に少し時間がかかり、アクセス数が増えると処理が追いつかなくなり、利用者がアクセスした時にWebページがなかなか画面表示されないという事態を招きかねない。
Java/サーブレットの誕生
上記、問題を抱えていたところ登場したのが、JAVA。メリットは
・オブジェクト指向の機能をフルサポートしているため大規模システムの開発がしやすい
・当時広く使用されていたC言語によく似た文法のため開発者に受け入れやすかった
ちなみに、JAVA自体はWebアプリケーションのために開発された言語ではない。でもWebアプリケーションは当事企業におけるシステム開発でも主流になりつつあった。
ここで誕生したのがJavaEE(Java Enterprise Edition 企業向けJava、当時はJ2EE(Java2 Enterprise Edition)と呼ばれていた)の一部として「サーブレット(Servlet)」というWebアプリケーション開発をサポートするための機能。サーブレットはCGIでいうPerl、C言語の部分に相当。
・サーブレットはJavaで作られたHTMLなどのWebコンテンツを生成するためのプログラム
・サーブレットはWebサーバと同じプロセスの中でコンテンツを生成するプログラム
このため、CGIのように毎回起動する必要がなくなった(ただし、Perlが改良され、現在はWebサーバから直接Perlプログラムを実行できるようになっている。Apacheのモジュールとして公開されているmod_perlが有名)。
Javaでアプリケーションを開発することのメリット
・特定のOSやハードウェアに依存せずに動作するという特徴がある!
「JavaVM」と呼ばれる仮想的なコンピュータ言語にコンパイルして実行する。「JavaVMが動作するコンピュータさえあればどこでもプログラムを動かせる!
JSPの誕生
サーブレットの問題点
・サーブレット(Javaのプログラム)内にHTMLを記述するためWebデザイナにプログラムの知識が必要
・サーブレット(Javaのプログラム)内にHTMLを記述するためサーブレットによって出力されるHTMLが想像しにくい
このため、「JSP(Java Server Pages)」という技術が誕生。HTML内にHTMLのタグにちかいかたちでJavaプログラムが記述できる。「<%」「%>」でくくる。このようなにJSP内部に書かれたJavaプログラムを「スクリプトレット(Scriptlet)」とよぶ。
※ちなみに、Javaではよく「〜レット(let)」とよぶものがある。「小さな」という意味を表す。「アプレット」は「小さなアプリケーション」、「サーブレット」は「サーバー上で動かす小さなプログラム」、「スクリプトレット」は「小さなスクリプト」が語源みたい。
Webアプリケーションフレームワーク
Webアプリケーションが普及し重要で大規模なシステム(銀行口座、証券など)に 利用されるようになってきた。このため
・ゼロからサーブレットやJSPを作成するとコーディング量が膨大になり時間がかかる
・開発者も増え勝手に独自のライブラリやクラスを作ってしまう恐れがある
再利用できる部分を増やしてアプリケーションを開発しやすくするための土台が「フレームワーク」。フレームワークはアプリケーションの基盤となり、フレームワークを土台にして必要な部分を作り足せば、望むアプリケーションが開発できる!
そして、現在Webアプリケーション開発の世界で必ずと言ってよいほど使わるのが「Webアプリケーションフレームワーク」!
・参考文献
Amazon.co.jp: 「プロになるためのWeb技術入門」 ――なぜ、あなたはWebシステムを開発できないのか: 小森 裕介: 本
ちなみに、こうゆうのを漫画にしたらみんな読みやすいですかね(笑)
Web開発メモ
初心者の僕がこれからWeb開発の勉強を始めようとNAVERまとめの「Web開発」でみつけたサイト等のメモ的な記事
PHP関連
【初心者向け】最速でphpを学ぶための厳選記事集 - NAVER まとめ
JAVA関連
Javaのフレームワークの種類と特徴 - NAVER まとめ
HTML/CSS関連
『CSS』の基礎知識・テクニックが参考になるWEBサイトまとめ - NAVER まとめ
【HTML/CSS】見出しデザインの参考になるWEBサイトまとめ - NAVER まとめ
本
Webサービスをつくる前に読んでおいた方がいい本まとめ - NAVER まとめ
ITエンジニアがこの夏読むべき厳選良書とそのレビューまとめ - NAVER まとめ
ツール関連
Webサービス作成に使えるサービスやツール - NAVER まとめ
学習
プログラミング未経験者がwebサービスをリリースできるようになるまでに最低限必要な動画まとめ - NAVER まとめ
その他
WEBサービス開発でコーディングするまでにやるべきこと - NAVER まとめ
HTML・CSS・JSの三位一体!海外に学ぶWebサイトのスマートな開発・管理方法まとめ - NAVER まとめ
HTML・CSS をゼロから独学する時に参考になるまとめ - NAVER まとめ
Swiftris(Swift×Tetris)
先輩から試してほしいと依頼があり試してみた。
https://www.bloc.io/swiftris-build-your-first-ios-game-with-swift
Swiftris is a free tutorial that teaches the basics of Swift as you build a 2D puzzle game.
Swiftrisは、2Dパズル・ゲームを構築しながら、スウィフトの基本を教える無料のチュートリアル。
オンラインのプログラミング学習サイトBLOCがつくったテトリスを作りながらSwiftを学べるサイト。
チュートリアルは11ある。まずは試してみよう!の意気込みで試したので、ソースはチュートリアルをコピペしただけ(^^; チュートリアルはすべて英語で翻訳しながら進めた。時間は多少かかったが、ちゃんと最後にはTetrisが完成!ちなみに僕は、Objective-C、Swiftともにド素人。英語も中学生レベルに達しているかいないか(恥ずかしい。。。)。なので、一番、翻訳が大変だった。すべての処理を理解していないが、順々に説明してくれているので初心者向けだと思う。
早速、メールアドレスを入力して試してみよう!LEARN MORE!
1 Introduction to Swiftris
プログラム初心者でもできる。Swift、SpriteKit、Xcodeを使用しているとのこと。
2 Creating a New Game Project
チュートリアル通りに新規プロジェクトを作成し実行してみたらこんなゲームができた。
3 Adding Assets
これもチュートリアル通りに進めて、追加ファイル(swiftris-assets.zip)をダウンロードしてプロジェクトに反映。
追加ファイルをダウンロード(swiftris-assets.zip)
「Sounds」「Sprites.atlas」フォルダを追加
イメージファイルを追加
アイコンを追加
↓↓↓結果↓↓↓
最後に「GameScene.swift」と「GameViewController.swift」をチュートリアル通りに変更し実行!ちなみにXcode6Beta5でないと「GameScene.swift」でコンパイルエラーが発生する。
ダウンロードサイト:https://developer.apple.com/jp/xcode/downloads/
4 And Array We Go
ブロックの有無を保持する配列の作成と解説。
5 A Ticking Clock
時間を管理する処理の追加と解説。
6 Block Party
ブロックを管理するclassの追加と解説。
7 Shaping Up
各ブロックのクラスを追加。
8 Let Them Fall
ブロックが落ちる処理を追加。でも、無限に落ちていく(^^;
↓↓↓↓↓
9 Playing by the Rules
ブロックを動かせないけど、フィールド内で積み上がるようになった!
10 Touch Me, Move Me
クリックするとブロックがまわった!!!
↓↓↓↓↓
今度はドラッグでブロックが移動するようになった!
↓↓↓↓↓
ちなみに、ドラッグのオブジェクトは以下を追加する
最後にSwipeのオブジェクトを追加したら、下方向へのドラッグでブロックの落ちる速度が早くなった!
11 Adding Flare
SCORE、LEVELラベル、音楽を追加・・・おっ!すごい!完成した!
ソースはこちら
https://github.com/peacemaker07/Swift.git
IoTapp勉強会(2回目)に行ってきた
Arduinoで部品をいじってきたけど、いまいち抵抗がある理由などが曖昧だったり、回路設計は全然できないので、基礎を学ぼうと行ってきた。
イベントページ⇒https://atnd.org/events/54449
場所
RMバーガー (東京都千代田区外神田3-10-12 日加石油ビル2F)
※入り口のドア
お店を入って一番奥にニコ生の放送ができるセットがある!主催者のひとの話だと、融通がきくところみたい。相談すれば大抵のことはやらせてもらえるとのこと。
講師
猫とロボット社 飯田さん
ユーザから作ってほしいもののリクエストをもらって製品を作成している。その他エクストリーム半田付けというエクストリームスポーツをしているらしい。
エクストリーム半田付け⇒http://www.nekotorobot.com/2013/12/blog-post.html
内容
まず、ハードを触る上で大事なこと3つを教わった
★電気の流れを意識する★
電気は電圧の高いところから低いところに流れる。部品によっては電気の流れを意識しなければいけないものもある!(例:LED)
★部品の限界を知る★
LED、モータなど部品には、適切な電圧、電流がある ⇒ 定格電圧、定格電流
※定格:機器や装置、部品などについて、指定された条件における仕様、性能、使用限度などのこと
これを守らないと部品が壊れる!LEDで定格以上の電圧、電流を流すと壊れてしまう(光らなくなる)。。。
↓↓↓抵抗をいれる↓↓↓
抵抗はオームの法則で計算できる!
http://diy.tommy-bright.com/
秋月電子のLED部品ページに添付されている計算式
http://akizukidenshi.com/download/led-r-calc.pdf
★いろいろなパーツを知る★
秋月電子、千石電商などに行って実際にみるのがよいけど、できないひとはホームページをみるのもよい!どのような部品があるかわかると、いろいろ想像が膨らんでくる!
以上の3つを理解していじっていこう!ちなみに「なんでも電圧に変換できればArduinoでよめるので製品が作成できる!」by飯田さん
以降はArduinoのHelloWrold的なLチカをしたり質疑応答を行い終了。
飯田さんが紹介してくれたハード、ソフト
−ハード
Bluetooth Low Energyモジュール(BL600)
Spark Core(Wifiモジュールが搭載されているArduino的なもの。Web上でコーディングができ、ネットワークごしにSpark Coreへプログラムをダウンロードできる。値段は39ドル。)
−ソフト
Eagle(フリーで使用できる回路図、パターン図作成ツール。回路図から自動でプリントパターンを生成できる!飯田さん愛用。)
DesignSpark
IoT −IoTapp(あいおーてぃーあっぷ)勉強会に行ってきた−
Internet of Things : IoT
最近、興味があって知りありが勉強会があることを教えてくれて行ってきた。
「IoTapp(あいおーてぃーあっぷ)勉強会」
nomad news base(3F)
今回の開催場所。
木のいす、机ですごくあたたかみがありおしゃれな場所。
一般の方も勉強などで使用できる。
konashi(http://jsdo.it/konashijs/)
今回の勉強会で使用したフィジカル・コンピューティングツールキット。
マイコン側の開発をせずに、ソフトエンジニアなどが手軽にプロトタイピングができる。
Arduinoはマイコン側のプログラムも組まないといけないが、それがいらない。
iOSから命令を送りkonashiを動かしている。
値段は「10,260円」。
↓iPad×konashi
内容は講師の松村さんのプレゼン、そのあとに実際にkonashiを使って、konashiについているスイッチを押すとLEDが光る、振動モーターを振動させたり、電波強度をiOSに表示したりとHelloWorld的なことを行いました。
ソースは以下サイトで編集して、konashiとBLEで繋いで 動作させる
http://jsdo.it/
1階にはDMM3Dプリントサービスの工房があった!( ̄□ ̄;)
Arduinoもネットに繋げたい!
Arduinoで音を感じる
今まで単体のものばかり作成してきたので、何か組み合わせてつくりたいなぁ〜っと思って、ググっていたらよさげなのがあった
エレクトレット・コンデンサ・マイク(ECM)でオーディオレベルメータを作る
http://arms22.blog91.fc2.com/blog-entry-284.html
マイクを使うのは初めてで、勉強になったのはECMの音声信号はとても小さいため、Arduinoに入力してもノイズと区別がつかないそうだ。このため、OPアンプというものを使用し、大きな信号にしてArduinoに入力する。
今回使用したOPアンプは「定電圧オーディオアンプ LM386」。
(すごく低レベルですが、オーディオアンプって音を増幅するために使うものなのですね。。。)
ソースなどはこちら↓
https://github.com/peacemaker07/Arduino/tree/master/LED_Volume