旧. -開発日記-

〜とあるプログラマーのつぶやきや開発メモなど〜

IntelliJ IDEAでWebアプリケーション作成 〜Hello World〜

こんばんは、最近はまたフロントよりサーバーメインになってきてるKinokoです。
さっそくですがお題の通り、IntelliJ IDEAで
JavaのWebアプリケーションを作成してみます。

Eclipseではググれば大量にそのやり方があるけど、IntelliJ IDEAだと
全然見つからない...。

これからIntelliJでWebアプリ開発をスタートする人のためにも
Hello World表示までを残したいと思います。



1 : プロジェクトの作成

f:id:librastudio:20130823014347p:plain

Webアプリケーションを作成するために、まず
JavaEE Web Module」を選択し、Project nameを"helloWorld"と入力。
Project SDK、こちらは事前にインストールしたJava SDKのパスを
指定してあげればOK。

そうするとプロジェクトのひな形が自動で出来上がります。
これはJava EE仕様で定義されているディレクトリ構造なので
変更したり消してしまったりしては駄目です。(ソースフォルダを作ったりはOK)



2 : クラスの作成

ということで、ディレクトリ構造は崩さないでパッケージと
クラスファイルを作成してみます。

f:id:librastudio:20130823014351p:plain

パッケージ「hogehoge.com」を作り、その中にHelloWorldクラスを作りました。
メソッドが一つ用意してあって、"Hello World!"を返すだけです。



3 : JSPファイルの編集

JSPファイルが実際の表示にあたるので、内にスクリプトレットで

<body>
<%=HelloWorld.show()%>
</body>

と入力します。
※importも忘れずに。 この辺の基本的な部分はJ2EE関連本などを参考に...。

f:id:librastudio:20130823014356p:plain



4 : Artifactの設定

これがEclipseではなかったんですが、IntelliJ IDEAではこのArtifactというのを使って
作ったWebアプリケーションをjarやWARファイルとかにパッケージしましょう、
といったものです。
場所は、File->Project Structure->Artifacts

f:id:librastudio:20130823014359p:plain



5 : Tomcatの設定

これはおなじみ。
IDEに使用するアプリケーションサーバーを教えてあげます。
今回はTomcatということで、Run->Edit Configurations...を指定。
以下のような画面が出るので、左上の「+」
Tomcat Server >Localを選択します。

f:id:librastudio:20130823014402p:plain


詳細を入力する画面が出るので以下のように打ち込みます。

f:id:librastudio:20130823014407p:plain


「Deployment」タブで切り替え、"4 : Artifactの設定"
設定した内容をセットしてやります。

中央にある「+」を押せば
先ほど設定したhelloWorld:war explodedがセットされます。

f:id:librastudio:20130823014410p:plain



6 : 実行

最後は諸々打ち込んだ情報がちゃんと表示されるか見てみます。
Tomcatの設定をしたことで、メニュー部分に以下のような
Tomcatのアイコンが表示されたはずです。

f:id:librastudio:20130823014414p:plain

その横になる三角の実行ボタンを押してTomcatを起動、
ブラウザで表示させてみます。(全部勝手にやってくれます)


無事エラーもなくいけば以下のように表示されるはずです。

f:id:librastudio:20130823014420p:plain
引き続きIntelliJ IDEAで楽しいWebアプリケーション制作を☆
Eclipseよりなんかシンプルかなぁと感じたKinokoでした。

MacにTomcatインストール

久々のJava環境セットということで。

Windows時代は散々やってきたんですが、
Macは使い始めたのがここ1年くらいだったので。

簡単にメモ書き程度に...。



Tomcatを落としてくる
本家:http://tomcat.apache.org/download-70.cgi


■解凍

$ tar zxf apache-tomcat-7.0.40.tar.gz


■解凍されたTomcatフォルダ内のbin/に移動しstartup.shを叩く

$ cd apache-tomcat-7.0.40/bin
$ sh startup.sh


■ブラウザでhttp://localhost:8080/にアクセス

f:id:librastudio:20130821031212p:plain
上のページが表示されたら起動成功。



ちなみに、
終了時には起動時と同じディレクトリにある shutdown.sh を同じく叩けば停止します。

$ sh shutdown.sh 


こんな簡単なことなんですが、Windowsで
しかも初めて二十歳くらいの時、このネコちゃんページ表示さすので
すごい苦労してた思い出が...。

OpenGL ES 〜頂点バッファの生成〜

頂点バッファ生成のメモ書きです...。
OpenGLで三角形でも四角形でも、とにかく描画を行うには
頂点バッファと呼ばれる領域に格納してやる必要があります。

では例として、OpenGLでプリミティブを表示するのに
頂点の位置情報を浮動小数の1次元配列で表します。

例えば三角形の位置情報を指定する場合、

float[] vertexs = {
  0.0f, 1.0f, 0.0f, //頂点0 (左上)
  0.0f, 0.0f, 0.0f, //頂点1 (左下)
  1.0f, 1.0f, 0.0f, //頂点2 (右上)
};

このような形で頂点を指定してやります。
この情報をOpenGL ESへ転送するのに、Javaは火葬マシン上の変数を
ビッグエンディアンで格納されることが保証されているため
このままでは渡せません。

この問題を解決するためにこの配列をBufferに変換してやります。

float配列をFloatBufferに変換

上記のような頂点座標のfloat配列は以下の流れでFloatBuffer化されます。


[1] バッファのメモリ確保
[2] ネイティブのエンディアン指定
[3] ByteBuffer型のオブジェクトをFloatBufferに変換する
[4] [3]で変換されたFloatBufferに最初の頂点座標(float配列)をセットする


これをコードで書くと以下のようになります。

  ByteBuffer bb = ByteBuffer.allocateDirect(vertexs.length * 4);
  bb.order(ByteOrder.nativeOrder());
  FloatBuffer fb = bb.asFloatBuffer();
  fb.put(vertexs);
  fb.position(0);


簡単に解説すると、
ByteBufferクラスはバッファのメモリを格納するクラスで
allocateDirectで、メモリサイズを指定しています。

※vertexs.length * 4は「配列の要素数 * 4 (float = 4byte)」

次にネイティブのエンディアンを指定するために
ByteBufferオブジェクトのorderメソッドを使用します。
ByteOrder.nativeOrder()、このメソッドで
ネイティブのエンディアンを取得します。

ByteBuffer→FloatBufferの変換は、asFloatBuffer()で変換します。

最後、その変換されたオブジェクトでput()を呼びます。
fb.position(0)は、JavaのInputStreamやOutputStreamと同様、
書き込みが発生するたびに次書き込むための位置が1進んでしまうため、
それを戻す処理を行っています。

このようにして頂点バッファを生成してやります。
メモメモ完了。

スマホの手書き風モックアップを簡単につくれちゃう

アプリ開発を共同で(1人でもいいんですが)行ってく中で、
簡単なモックアップを共有しあえたらと思ってて、色々探してたら
こんな便利なものが!

それは


『Balsamiq Mockups』


こちら実は有料で、$79...。
高い安いは人それぞれですが、私の所感では


「高っ!」


といった感じでした。
ただ、ものは試しとういことでトライアル版をダウンロード。

そしたら... 何とまぁ使ってみたら、
非常に使いやすいじゃないですか。
10分くらい適当に触ってるだけでほとんど
使いこなせちゃうくらいどシンプル!!!

正直Photoshopやパワポでもサクサク作れちゃう人にとっては
やや魅力にかけるかもしれませんが、私はパワポでも
結構億劫になってたんでコレはメチャクチャ気に入りましたー。
ドラッグ&ドロップでひょいひょい配置してあっというまに
モックアップが完成しちゃいます。

特にデザイナーの人とやりとりするプログラマーの方に大変
おすすめなので、アプリ開発者は是非是非!



※こんな感じで一通り使いそうなUIがギッシリ☆ 
f:id:librastudio:20130817232741p:plain

OpenGL ES 〜OpenGL ESとは〜

「3D描画を行うためのライブラリ」、
OpenGLを簡単に説明するとこんな感じでしょうか。

OpenGLというと、ちょっと複雑なイメージを持ちますが
自分も初めて触った時、一瞬で挫折しそうになるくらい
好きになれませんでした。

でも触って書いたコードを動かしてると...
何とも不思議。そのOpenGLが織りなす世界に
今ではすっかり魅了されてしまいました。

ということで、今日から自分への備忘録もかね、
またAndroidを学習する方が自分みたいにOpenGLの世界に
魅せられてくれればなぁ、という想いをこめて書いて行こうと思います。


AndroidiPhoneといったモバイル端末で使用するのは、
主にこのOpenGL ESになります。
これはOpenGLというAPI群から一部分を削除し、
組み込み用途に特化したものになります。

具体的には


  • 直線
  • 三角形


上の3つだけでOpenGL ESを使って描画を行うことになります。
私は初めてこの説明を受けた時、こんなシンプルな仕組みで
ポリゴンとかを表現してるなんて...と無知ながら感動したものです。

そして、このOpenGL ESは3Dだけのためのライブラリではなく、
これを用いて高速な2Dゲームなんかも作れてしまいます。
ちまたで有名(?)なlibgdxやAndEngineといったものも、
内部的にOpenGL ESを使って処理されています。

また、OpenGL ESといってもバージョンがいくつかあり、
ここでは1.1にいったん絞って書いていこうと思います。



次回は簡単な図形を表示するところまでを書けたらと思います。

AndroidManifest.xmlでのuses-featureについて

当方のアプリ「Doodle Maker」をタブレット対応化したのですが、
私は個人でNexus7を所有しており、当然開発時も検証にそちらを使用していました。

そしていざアップデートが完了し、自分で検索してみたらアプリが一向に見つからない。
おかしいと思い、Google Developer Consoleで調べてみたらなんと
AndroidManifest.xmlが原因でNexus7が非対応となってるではありませんか!


色々調べてみたら、なんとこんなことが。
http://android.roof-balcony.com/api-reference/uses-feature/
「mucchinのAndroid戦記」さんより

「Doodle Maker」はカメラ機能を必要としているため、Permissionとして
上記を指定してやる必要があります。


ただここで注意点なのですが、
android.permission.CAMERAを指定し、かつ<uses-feature>を
明示しなかった場合、自動で下記が有効化されることとなります。

<uses-feature android:name="android.hardware.camera" android:required="true">
<uses-feature android:name="android.hardware.camera.autofocus" android:required="true">


ややこしいのですが、android.hardware.camera
これが "true" になっていると、
Nexus7はフトントにしかカメラがないことが原因で
Google Play上ではフィルタリング対象となってしまい、
検索でひっかからなくなってしまいます。

カメラ機能をフルに使ったアプリで、かつNexus7にも対応させるために、
上記を追記してやることで、無事Nexus7からもダウンロードすることが可能になりました。

Android開発環境紹介 〜IntelliJ IDEA編〜

最近までアップデート作業におわれていたのですが、
Androidアプリを作る際、みなさんはどの開発環境を使っていますか?

当然私はEclipseでした。


特にほかに選択肢もなければ、またいまいち評判のよくないIDEとはいえ、
Eclipse以外ないなぁといった印象でした。

そんな中、私の尊敬するプログラマーの先輩にあるIDEを紹介いただきました!

それがこれです!!!


IntelliJ IDEA

f:id:librastudio:20130809020723p:plain


Eclipse基本的な機能はもちろんのこと、
対応してる言語も多くちょっとこれから注目のIDEAです。

しばらくはこちらを使ってAndroidアプリは作っていこうかと思います。
また使用していてメモする内容等あったら備忘録として残そうかと思います。

とりいそぎ紹介まで。