雑草SEの備忘録

東大を卒業し、SEとして働くことになった。備忘録的に作業を綴る。

jQueryを利用して良い感じの選択ボタンを作る


何か質問とかを作ったときに、選択ボタンってありますよね。

それで、簡単なものだと、ラジオボタンとかになるんでしょうけど、それだとデザイン的にダサいと思ったので、もっとボタンっぽくして、いかにも選択されたような感じのものを作りたいなと思っていました。

サンプルとしては、こんな感じです。

このサンプルでは、AのボタンをクリックするとBとCのボタンが薄くなり、Bのボタンをクリックすると、AとCのボタンが薄くなり、Cのボタンをクリックすると(以下略。

 

こんな感じのを作りたいなと。

で、作ってみたので、ソースのサンプルを紹介します。

ちなみに、ボタンは画像となっており、パワポで作りました。

今回は、jQueryを使うので、まずはこれを読み込みます。

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

jQueryのソースファイルをダウンロードして読みこんでも良いのですが、面倒なのでCDN(コンテンツデリバリーネットワーク)から引っ張ってきます。バージョンは1.11.2を使ってますが、他のバージョンでも良いと思います。たまたま使ったのが1.11.2だっただけです。深い意味はありません。

まずはHTMLから。単純に画像にidをつけ、spanタグでくくっただけですね。spanタグにもidをつけてあります。

<span id="spa"><img src="a.png" id="a"></span>
<span id="spb"><img src="b.png" id="b"></span>
<span id="spc"><img src="c.png" id="c"></span>

次に、Javascriptの部分。

$(document).on('click', 'span#spa', function() {
		choiced('a', 'b', 'c');
})
$(document).on('click', 'span#spb', function() {
		choiced('b', 'a', 'c');
})
$(document).on('click', 'span#spc', function() {
		choiced('c', 'a', 'b');
})

function choiced(choice0, choice1, choice2) {
var mychoice0 = document.getElementById(choice0);
var otherchoice1 = document.getElementById(choice1);
var otherchoice2 = document.getElementById(choice2);
$(mychoice0).animate({
	opacity : "1"
}, {
	duration : 200,
});
$(otherchoice1).animate({
	opacity : "0.3"
}, {
	duration : 200,
});
$(otherchoice2).animate({
	opacity : "0.3"
}, {
	duration : 200,
});
}

大丈夫だと思いますが、これを、

<script type="text/javascript">
</script>

の中に入れてくださいね。

jQueryというか、JavaScript自体初心者なので、ソースが悪いとかいろいろご意見あると思います。ここをこうした方がいいよとか教えてくれる優しい方、教えてくださいm(_ _)m


ちょっとソースの解説しておきましょう。


言うまでもなくポイントは、choiced()メソッドですね。


choiced()メソッドの引数に三つ変数を引き渡しています。


最初の引数は、クリックされた画像のid、二つ目の引数、三つ目の引数はクリックされた以外の画像のidです。


それで、クリックされた画像に関しては、opacityプロパティを1にして透明度を無くし、それ以外に関しては、opacityを0.3にしています。この数値は、透明度なので、適宜お好みの透明度に指定してください。


jQueryのanimateメソッドで、durationに200を指定しています。durationとは、アニメーションの動作時間で、単位はミリ秒です。

このchoiced()メソッドを定義したら、あとは、クリックされた各ボタンに応じてjQueryのメソッドを利用していきます。


それが、$(document)から始まる3つですね。


画像が4つ、5つと増えていってもchoiced()メソッドの引数を増やすことで対応できるソースとなっています。


もっとうまいやりかたがあるかもしれませんが、ひとまずこれで動作したので参考までに。。

補足

これだと、画像の上にカーソルがやってきても指マークにならないですね。ここは、CSSで指定すれば問題ありません。
まずは、imgタグにclass名をつけて、

<span id="spa"><img src="a.png" id="a" class="css20150509"></span>
<span id="spb"><img src="b.png" id="b" class="css20150509"></span>
<span id="spc"><img src="c.png" id="c" class="css20150509"></span>

つけたclass名のオプションにcursor、属性にpointerとすればOK!

.css20150509 {
	cursor: pointer;
}

あとはこの選択された値をどうバックサイドに引き渡すか、ですが、これはまた別の機会に・・・。

JavaのComparatorを使って配列を並び替える(課題解答編)

昨日の記事が個人的には気持ちよく書けたので、忘れないうちに課題の回答例を載せておきます。
色々なやり方があると思いますので、試してみてくださいね。

問1.配列studentarrayを身長順に並べよ。

Arrays.sort(studentarray, new Comparator<Student>() {
	public int compare(Student student1, Student student2) {
		return student1.getHeight() - student2.getHeight();
	}
});


問2.配列studentarrayを年齢順に並べよ。年齢が同じ場合は、身長順に並べること。

Arrays.sort(studentarray, new Comparator<Student>() {
	public int compare(Student student1, Student student2) {
		int temp = student1.getAge() - student2.getAge();
		if (temp == 0)
			temp = student1.getHeight() - student2.getHeight();
		return temp;
	}
});


問3.配列studentarrayを名前順に並べよ。名前が同じ場合は、身長順に並べること。

Arrays.sort(studentarray, new Comparator<Student>() {
	public int compare(Student student1, Student student2) {
		int temp = student1.getName().compareTo(student2.getName());
		if (temp == 0)
			temp = student1.getHeight() - student2.getHeight();
		return temp;
	}
});


問4.配列studentarrayのサイズを7にし、以下のを追加する。
   studentarray[6] = new Student("くらもとますみ", 26, 'x', 168)
   この状態で、性別が'x'→'f'→'m'の順にならべよ。同じ性別内では、年齢順に、同じ年齢であれば名前順(あいうえお順)に並べよ。
(解説)
いろいろな実装法があると思いますが、表を使ってまとめる方法を紹介します。
compare()メソッドの引数は、student1とstudent2の二つですが、今回、性別は、f,m,xの3つですので、3^2(3の2乗)で9通りあります。例えば、同じ性別の時は変数tempには0のまま、それ以外の時は、正の値や負の値を与えるような実装をします。今回は、x→f→mの順番に並べたいので、student1の性別がfでstudent2の性別がmのとき、returnで正の値を返すようにします。
(この表の正負を逆にするとm→f→xの順に並びます。ちなみに私は最初逆にしてましたが、実行してみて逆であることに気づきました。)

st1\st2 f m x
f 0 -1 1
m 1 0 1
x -1 -1 0

この6つのif文を抜けてもtempが0のまま(つまり性別が同じ)であれば、年齢で、年齢も同じならば名前で並び替えるようにif文を続けます。

Arrays.sort(studentarray, new Comparator<Student>() {
	public int compare(Student student1, Student student2) {
		int temp = 0;
		// 性別から、順序を定めるために全9通りのうち性別が異なる
		// 6通りから判断し、tempに格納する。同じ性別の場合は0のまま。
		if (student1.getSex() == 'f' && student2.getSex() == 'm')
			temp = -1;
		if (student1.getSex() == 'f' && student2.getSex() == 'x')
			temp = 1;
		if (student1.getSex() == 'm' && student2.getSex() == 'f')
			temp = 1;
		if (student1.getSex() == 'm' && student2.getSex() == 'x')
			temp = 1;
		if (student1.getSex() == 'x' && student2.getSex() == 'f')
			temp = -1;
		if (student1.getSex() == 'x' && student2.getSex() == 'm')
			temp = -1;
		// 同じ姓別である場合は、年齢順に
		if (temp == 0)
			temp = student1.getAge() - student2.getAge();
		// 同じ性別で同じ年齢ならば、名前順に
		if (temp == 0) 
			temp = student1.getName().compareTo(student2.getName());
		return temp;
	}
});

本来ならば、前述の表の様な二次元配列を作成して、fを0、mを1、xを2に読み替えて二次元配列から-1,0,1を取り出す方法がスマートなのかもしれませんが、少しわかりにくく、Comparatorの使い方の説明とは趣旨が離れてしまうので辞めました。

以上、JavaのComparatorの説明でした。お読みいただき、有難うございました。

JavaのComparatorを使って配列を並び替える

Javaで配列の並び替えをしようと思った時に少し慣れるのに時間がかかったので、書いておきたいと思います。

配列の並び替えには、

Arrays.sort(配列名);

みたいな感じでやれば昇順に並べ替えられます。Listとかだと、Collection.sort()なんてのを使うんだと思います。なんですが、ここの配列名のところで指定できる配列は、intとかcharとか基本データ型の配列です。

もし、何かのオブジェクトを入れたいのであれば、実装方法は二つあります。

1.配列のオブジェクトに、Comparableインタフェイスを実装する

2.配列のオブジェクトはそのままで、Comparatorを用いる(後述)

の二つあると思います。今回は、2のやり方についてのみ記載します。(1はまだ知らん。。)

Comparatorの使い方については、いろいろググりましたが、無駄にラムダ式で記載されていたり、なぜか-1とかが使われていたり、ちょっと私には分かりにくかったです。

というわけで、自分で説明してみようと思います。

0.説明の準備
1.年齢順に並べる
2.文字順で並び替え
3.年齢順、あいうえお順で並び替え
4.性別、年齢、名前の順に昇順に並び替える
5.課題


0.説明の準備
まずは、基本データ型の配列ではなくて、あるエンティティの配列で並び替えを行いたいと思うので、そのエンティティを用意します。今回は、Student型のエンティティで説明します。

public class Student {
	// 年齢
	private int age;
	// 身長
	private int height;
	// 名前
	private String name;
	// 性別
	private char sex;
	// コンストラクタ
	public Student(String name, int age,  char sex, int height){
		this.age = age;
		this.height = height;
		this.name = name;
		this.sex = sex;
	}
	// 以下、ゲッターとセッター
	public int getAge(){ return age; }
	public void setAge(int age){ this.age = age; }
	public int getHeight() { return height; }
	public void setHeight(int height) { this.height = height; }
	public String getName() { return name; }
	public void setName(String name) { this.name = name; }
	public char getSex() { return sex; }
	public void setSex(char sex) { this.sex = sex; }
}

次に、mainメソッドのクラス(名前はなんでもいいが、昔エネルギーの研究をしていたということもあり、SmartEnergyを使ってみた)をつくり、そこに配列を用意します。ついでに、配列を表示させるSystem.out.println()もつけておきます。☆☆☆のところは、あとから、配列を並び替えるために記述する箇所です。

public class SmartEnergy {
	public static void main(String[] args) {
		Student[] studentarray = new Student[6];
		studentarray[0] = new Student("いのうえなおみ", 24, 'f', 158);
		studentarray[1] = new Student("たかはしたつや", 23, 'm', 176);
		studentarray[2] = new Student("いのうえなおみ", 27, 'm', 164);
		studentarray[3] = new Student("えのもとめぐみ", 24, 'f', 162);
		studentarray[4] = new Student("えのもとたすく", 24, 'm', 178);
		studentarray[5] = new Student("さくらぎたかはる", 26, 'f', 163);

		☆☆☆

		for (Student student : studentarray) {
			System.out.println(student.getName() + "," + student.getAge() + ","
					+ student.getSex() + "," + student.getHeight());
		}

	}
}


1.年齢順に並べる
例えば、年齢順に並べるには、次のようにします。☆☆☆の部分に挿入してください。

(記述例1)
Arrays.sort(studentarray, new Comparator<Student>() {
	public int compare(Student student1, Student student2) {
		return student1.getAge() - student2.getAge();
	}
});

Arrays.sortでは、一つ目の引数に、並び替えたい配列を、二つ目の引数には、並び替え方を記述したComparatorを実装したクラスを入れます。今回は、二つ目の引数は、インナークラスとしています。
新たにクラスを作成して、以下のように記述しても構いません。
まずは、☆☆☆のところに以下の一文を記述。SampleComparatorとは、すぐあとで作るComparatorを実装したクラスです。

(記述例2)
Arrays.sort(studentarray, new SampleComparator());

次に、新しいクラスを作りSampleComparatorと名付けることにします。このクラスには、Comparatorを実装します。

(記述例2つづき)
class SampleComparator implements Comparator<Student>{
	public int compare(Student student1, Student student2) {
		return student1.getAge() - student2.getAge();
	}
}

ちなみに、ComparatorのジェネリクスをStudentにしていますが、これは並び替えの対象がStudentだからです。ジェネリクスを指定しなくても以下のように書けばコンパイルはできますし、正常に動作します。

(記述例3:推奨しない)
Arrays.sort(studentarray, new Comparator() {
	public int compare(Object student1, Object student2) {
		return ((Student)student1).getAge() - ((Student)student2).getAge();
	}
});

なんですが、Eclipseを使ってると、色々と警告がでます。単純にダウンキャストを使ってるので未検査のダウンキャストかと思いきや、そうじゃないみたいです。中身はよく分かりませんが、この書き方は推奨しないよということみたいです。Java1.4まではこれで良かったんだそうな。。(昔はジェネリクスという考え方が無かった)
これらの実装をして、mainメソッドのあるクラス(私の場合SmartEnergy)を実行すると、

(実行例1)
たかはしたつや,23,m,176
いのうえなおみ,24,f,158
えのもとめぐみ,24,f,162
えのもとたすく,24,m,178
さくらぎたかはる,26,f,163
いのうえなおみ,27,m,164

といったのがコンソールに表示されると思います。確かに、年齢順に並び替えられています!素晴らしい!

さて、並び替えのルールはこのComparatorの中に記載されています。
一番最初の(記述例1)に戻って下さい。returnのところで、student1の年齢からstudent2の年齢を引いたものを返却しています。student1の年齢の方が大きい場合が正になりますから、結果をみると、student1の年齢がstudent2の年齢よりも大きい時に正を返す場合は、年齢で昇順に並び替わるというわけですね。
ためしに、returnの返却値をstudent2.getAge() - student1.getAge()とすると、年齢で降順(年齢が大きい順)に並び替わります。
正直、このあたり、どっちが昇順でどっちが降順なのかわからなくなります。こういうときは私は、ためしに小さいプログラムを組んで試してみています。
基本的にComparatorの使い方は以上ですが、続いて文字で並び替えてみましょう。

2.文字順で並び替え
あいうえお順で並び替えるときはStringのcompareTo()メソッドを使います。次のコードを☆☆☆に書き加えてください。(1.で☆☆☆に挿入したのは一旦削除してください)

Arrays.sort(studentarray, new Comparator<Student>() {
	public int compare(Student student1, Student student2) {
		return student1.getName().compareTo((student2.getName()));
	}
});

実行して、次のような画面が出ていればOKです。あいうえお順に並び替えることが出来ました。

(実行例2)
いのうえなおみ,24,f,158
いのうえなおみ,27,m,164
えのもとたすく,24,m,178
えのもとめぐみ,24,f,162
さくらぎたかはる,26,f,163
たかはしたつや,23,m,176

ただし、注意しなければいけないのは、StringのcompareTo()メソッドはUNICODE的な順番を比較しています。ひらがなであれば問題ないですが、漢字だと上手くいかない可能性が高いです。


3.年齢順、あいうえお順で並び替え
それでは、年齢順に並べつつ、かつ、同じ年齢の場合はあいうえお順に並べてみましょう。(実行例1)では、「えのもとめぐみ」のあとに「えのもとたすく」となっており、あいうえお順ではありません。
年齢とあいうえお順で並び替えるには、まず、年齢で値を比較し(年齢なので差をとる)、ゼロであれば(同じ年齢であれば)、次にあいうえお順に並べるという手順を踏みます。

Arrays.sort(studentarray, new Comparator<Student>() {
	public int compare(Student student1, Student student2) {
		int temp = student1.getAge() - student2.getAge();
		if (temp == 0){
			return student1.getName().compareTo(student2.getName());
		}
		return temp;
	}
});

上の例ですと、student1の年齢からstudent2の年齢を引いた値をtempに代入します。tempがゼロであれば、同じ年齢であるということなので、今度は、あいうえお順で比較(compareTo()メソッド)し、それを返却するひょうにしています。実行すると次のような結果が出ると思います。年齢順に並んでいますし、「えのもとたすく」が「えのもとめぐみ」より前に来ているのが分かりますね。

(実行例3)
たかはしたつや,23,m,176
いのうえなおみ,24,f,158
えのもとたすく,24,m,178
えのもとめぐみ,24,f,162
さくらぎたかはる,26,f,163
いのうえなおみ,27,m,164


4.性別、年齢、名前の順に昇順に並び替える
もう少し応用して、条件を3つにしてみましょう。男性(m)を先に、女性(f)を後に並び替えるようにするにはどうすれば良いでしょうか。
今回の例では、性別に'f'や'm'といったchar型を用いていますので単純に大小比較ができます。ですが、練習問題ではLGBTの方も勘案して、性別に'x'というものを加えて、LGBT→女性→男性の順に表示させる問題を出しています。今回は、char型の大小比較を使わないで実装してみましょう。

Arrays.sort(studentarray, new Comparator<Student>() {
	public int compare(Student student1, Student student2) {
		int temp = 0;
		if (student1.getSex() == 'm' && student2.getSex() == 'f')
			temp = -1;
		if (student1.getSex() == 'f' && student2.getSex() == 'm')
			temp = 1;
		if (temp == 0) {
			temp = student1.getAge() - student2.getAge();
			if (temp == 0) 
				temp = student1.getName().compareTo(student2.getName());
		}
		return temp;
	}
});

student1の性が'm'かつstudent2の性が'f'のときはtempに-1(負の数)を、student1の性が'f'かつstudent2の性が'm'のときはtempに1(正の数)を代入しています。それ以外(student1とstudent2の性が同じ)のときは、tempはゼロですので、その時は、まず年齢比較、次いで、あいうえお比較をしています。
これを実行すると、次のような結果が得られます。

たかはしたつや,23,m,176
えのもとたすく,24,m,178
いのうえなおみ,27,m,164
いのうえなおみ,24,f,158
えのもとめぐみ,24,f,162
さくらぎたかはる,26,f,163


5.課題
ここまでざっと説明をしてきました。説明だけでは理解が不十分だと思う方は、次の課題をやってみてください。
問1.配列studentarrayを身長順に並べよ。
問2.配列studentarrayを年齢順に並べよ。年齢が同じ場合は、身長順に並べること。
問3.配列studentarrayを名前順に並べよ。名前が同じ場合は、身長順に並べること。
問4.配列studentarrayのサイズを7にし、以下のを追加する。
   studentarray[6] = new Student("くらもとますみ", 26, 'x', 168)
   この状態で、性別が'x'→'f'→'m'の順にならべよ。同じ性別内では、年齢順に、同じ年齢であれば名前順(あいうえお順)に並べよ。

以上、「JavaのComparatorを使って配列を並び替える」でした。久しぶりにSE的なことを書いたので時間もかかったしつかれかました。課題の答えはあとで時間があればアップします。

2015/05/04 追記
解答アップしました!
normalse.hatenablog.jp

Apache2.4とTomcat8を連携させる

【CeontOSにApacheTomcatシリーズ】 第1回 CentOS6.6にApache2.4をインストールする
第2回 CentOS6.6にJava8, Tomcat8をインストール
第3回 Apache2.4とTomcat8を連携させる

 

Tomcat8のインストールが終わったので、今度は、ApacheTomcatの連携です。

ApacheTomcatを連携する理由はグーグル先生に聞けば色々と出てきますが、アクセスしたときにポート番号(8080とか)見えるのはなんだかダサいですよね。

今回はこれを無くします。

 

前回は、編集をviでやりましたが、今回は編集するファイルが少し長いのでWinSCPを使ってやっています。WinSCPの使い方が分からない人はグーグル先生に聞いてください。

viでもできるので、お好きな方を。要するに、ファイルを編集するだけなので。

 

以下、ディレクトリは、適宜、ご自分がApacheTomcatをインストールしたディレクトリに置き換えて読んでください。

また、localhostのところは、ご自身が使用されているサーバのIPアドレスなりFQDNなりに変えてください。localでやっている方は、localhostのままで構いません。

 

ajpモジュールによる連携

今回、ApacheTomcatを連動させるには、ajpモジュールを使います。

/opt/tomcat/apache-tomcat-8.0.20/conf/server.xml

<!-- Define an AJP 1.3 Connector on port 8009 -->
<Connector port="8009" protocol="AJP/1.3" redirectPort="8443" />

という記述があるか確認してください。(たぶんあると思います。なければ追加。)

次に、/opt/httpd/httpd-2.4.12/modulesに

mod_proxy.so
mod_proxy_ajp.so

があるかを確認してください。(たぶんあると思います。)

次に、/opt/httpd/httpd-2.4.12/conf/httpd.confを編集します。

このファイルのどこかに、以下のような記述があると思います。

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_ajp_module modules/mod_proxy_ajp.so

もし、この行の先頭に#がついているのでしたら、削除してください。#はコメントアウトを意味するので、#があると、この二つのモジュールを使うことができません。

 

次にajpを使ってApacheからTomcatに飛ばすための設定をします。

この設定は、httpd.confに記述すればいいのですが、httpd.confには直接記述せず、外部に記述することが推奨されているようですし、多くの解説サイトでもそう解説しています。

まず、/opt/httpd/httpd-2.4.12/conf/の中に、extraディレクトリはあるでしょうか。なければ作成してください。extraディレクトリの中に、httpd-proxy.confというファイルを作ります。このhttpd-proxy.confというファイルにajpの設定を記述しますが、まだ中身は何もなくて構いません。ここで一旦、/opt/httpd/httpd-2.4.12/conf/httpd.confの編集に戻りましょう。

/opt/httpd/httpd-2.4.12/conf/httpd.confの最下部に、以下の1行を追加してください。

Include /opt/httpd/httpd-2.4.12/conf/extra/httpd-proxy.conf

これは、先ほど作った/opt/httpd/httpd-2.4.12/conf/extra/httpd-proxy.confファイルを読み込みますよということを意味します。これで、httpd-proxy.confに書かれた内容が、httpd.confに書かれたかのように振舞います。

そして、ajpの設定をhttpd-proxy.confに記述します。httpd-proxy.confに以下の1行を書き加えてください。

ProxyPass /examples/ ajp://localhost:8009/examples/

これは、http://localhost/examples/で呼び出されたときは、ajp://localhost:8009/examples/に移しますという意味です。それで、ajpモジュールが8009ポートでTomcatを呼び出します。最初に確認したserver.xmlの設定ですね。それで/examples/ですが、これは、Tomcatのwebappsの中(私の例では、/opt/tomcat/apache-tomcat-8.0.20/webapps)に入っていて、Tomcatで使われるWebアプリは、この中に格納していくわけですが、サンプルとして、あらかじめ、examplesというのが入っているわけですね。

そして、今、ApacheTomcatが起動している人は、この設定を有効にするため、ApacheTomcatを再起動してください。

Tomcatの終了は、

/opt/tomcat/apache-tomcat-8.0.20/bin/shutdown.sh

Apacheの終了は、

/opt/httpd/httpd-2.4.12/bin/apachectl stop

Tomcatの起動は、

/opt/tomcat/apache-tomcat-8.0.20/bin/startup.sh

Apacheの起動は、

/opt/httpd/httpd-2.4.12/bin/apachectl start

になります。(パスは各自の環境に合わせてくださいね)

 

http://localhost/examples/にアクセスすると次のような画面が出れば、ここまでは正しく設定できています。(localhostの所は、適宜ご自身のIPアドレスなどに変えてください)

ポート番号8080つけずとも、Tomcatのページが表示されました。

f:id:smartenergy:20150313190839p:plain

 

Apache2.4とTomcat8を連携させてWebSocket接続をする

で、ここまでは、他のサイトにも書いてありますし、そんなに問題なくできます。(最初はそれなりに苦労しますが)

次のWebSocketが問題です。先ほど表示したTomcatのExamplesのページにWebSocket Examplesがあります。それをこのまま使ってみます。

http://localhost/examples/の画面でWebSocket Examplesをクリックします。

 

f:id:smartenergy:20150313200654p:plain

4つのサンプルが出てきました。適当にどれかクリックして遊んでみてください。

WebSocket connection closedなどという文字が出て、WebSocket接続ができていないことが確認できます。

http://localhost:8080/examples/websocket/

のように8080ポートを明示的につけて、同様に4つのサンプルのうちのどれかで遊んでみてください。こんどはWebSocket connection openedなどというのがでて、正しく動くと思います。

つまり、ajpモジュールでは、WebSocketが動作しないわけです。

そして、いよいよ、Apache経由でもWebSocket接続が出来るようにします。

まずは、/opt/httpd/httpd-2.4.12/modulesに、

mod_proxy_wstunnel.so

があるかどうか確認してください。WebSocket接続をするには、このモジュールが必要です。wstunnelとはWebSocketTunnelを意味すると思われます。

そして、このモジュールを使うために、/opt/httpd/httpd-2.4.12/conf/httpd.confを編集します。httpd.confを開いて、

LoadModule proxy_wstunnel_module modules/mod_proxy_wstunnel.so

と書かれているところを探してください。おそらく、この文字列が書かれている先頭には#がついていると思います。この#を外して、モジュールを使うように設定を変えます。

次に、wstunnelを使うための設定を、/opt/httpd/httpd-2.4.12/conf/extra/httpd-proxy.confに記述します。現在、httpd-proxy.confには次の1行のみが書かれていると思います。

ProxyPass /examples/ ajp://localhost:8009/examples/

この行のに、

ProxyPass /examples/websocket/ ws://localhost:8080/examples/websocket/
ProxyPassReverse /examples/websocket/ ws://localhost:8080/examples/websocket/

を付け加えてください。/examples/websocket/で呼ばれたものは、ws://localhost:8080/examples/websocket/に渡しますよということを意味しています。これをwstunnelモジュールがやってくれます。

また、ProxyPassは、条件の厳しいものから書く必要があるので、

ProxyPass /examples/websocket/ ws://localhost:8080/examples/websocket/
ProxyPassReverse /examples/websocket/ ws://localhost:8080/examples/websocket/
ProxyPass /examples/ ajp://localhost:8009/examples/

の順番になります。(ProxyPassReverseは最後でも良いですが、ProxyPassの順番は変えないでください)

この設定をしたのち、ApacheTomcatを再起動します。コマンドは覚えていますか?上で、ajpの設定をした時に書いてあるので、参考にしてください。

そして、再度、

にアクセスしてください。たとえば、Echo exampleだと、次のような応答になるかと思われます。

f:id:smartenergy:20150313200734p:plain

Multiplayer snake exampleとMultiplayer drawboard exampleも遊んでみてください。動くと思います。(操作の説明は英語で書いてあったりするので、分かりにくいかも)

なんですが、なぜか、私の環境では、Chat Sampleは上手く動きませんでした。一旦、WebSocket connection opend.になりますが、テキストボックスに文字を入れてえんたーを推すと、WebSocketがcloseされてしまいます。

なんでだろう。。自分が作った別のWebSocketのプログラムは動いていたので、このサンプルが良くないのかもしれません。

f:id:smartenergy:20150313200058p:plain

 

以上、Apache2.4とTomcat8を連携させるでした!

お疲れ様でした。(書くのも結構疲れる)

 

【CeontOSにApacheTomcatシリーズ】 第1回 CentOS6.6にApache2.4をインストールする
第2回 CentOS6.6にJava8, Tomcat8をインストール
第3回 Apache2.4とTomcat8を連携させる

CentOS6.6にJava8, Tomcat8をインストール

【CeontOSにApacheTomcatシリーズ】 第1回 CentOS6.6にApache2.4をインストールする
第2回 CentOS6.6にJava8, Tomcat8をインストール
第3回 Apache2.4とTomcat8を連携させる

 

今回はCentOSApacheTomcatシリーズの第2回です。

前回のCentOS6.6にApache2.4を入れるの続きです。

今回は、Tomcat8を入れてみようと思います。会社でも使っているのはJavaなので、やはり勉強のために入れるべきはTomcatです。

 

Java8のインストール

Tomcatを入れるためにまずは、Javaをインストールします。

OracleのJava SEダウンロードページに行き、Accept License Agreementの左のラジオボタンをクリック。そうすると、Java SE Development Kitがダウンロードできるようになりますが、今回はCentOSに直接ダウンロードしたいので、操作端末(私の場合Windows 7)にはダウンロードしません。。ちなみに2015年3月12日現在、バージョンは8u40です。

お使いのOSの所にあるrpmを右クリック→リンクアドレスをコピー(Chromeの場合)し、ダウンロードするべきアドレスを取得します。私の場合、CentOS6.6で64 bitなのでLinux x64のjdk-8u40-linux-x64.rpmのリンクアドレスをコピーしました。

cd /usr/local/src/

でダウンロード先ディレクトリに移動し、

wget --no-check-certificate --no-cookies - --header "Cookie: oraclelicense=accept-securebackup-cookie" http://download.oracle.com/otn-pub/java/jdk/8u40-b25/jdk-8u40-linux-x64.rpm

Javarpmファイルをダウンロードします。最後のhttp://以下のところは、先ほど、Oracleのページで取得したアドレスにしてください。

そして、インストールです。

rpm -ivh jdk-8u40-linux-x64.rpm

このコマンドでインストールが開始されます。しばらくするとインストールが終わるので、

java -version

コマンドでjavaのバージョンを確認しましょう。

java version "1.8.0_40"
Java(TM) SE Runtime Environment (build 1.8.0_40-b25)
Java HotSpot(TM) 64-Bit Server VM (build 25.40-b25, mixed mode)

のような表示が出ていたらJavaのインストール成功です。

 

Tomcat8のインストール

そしていよいよTomcat8のインストールを行います。

Apache Tomcatのダウンロードページへ行き、Binay DistributionsのCoreの中に、tar.gzというのがあるので、そこを右クリック→リンクアドレスのコピー(Chromeの場合)してアドレスを取得します。

リンクアドレスを取得したら、wgetでダウンロードします。ここからの作業は、しばらく/usr/local/srcで行います。

cd /usr/local/src
wget http://ftp.yz.yamagata-u.ac.jp/pub/network/apache/tomcat/tomcat-8/v8.0.20/bin/apache-tomcat-8.0.20.tar.gz

アドレスはapache tomcatのサイトで取得したアドレスにしてください。リロードするたびにリンク先が山形大学だったり理研だったり変わりますが、中身は同じです。

次に、ダウンロードしたtar.gzファイルを解凍します。

tar -xvzf apache-tomcat-8.0.20.tar.gz

このディレクトリ(/usr/local/src)のままでも動くのですが、これまで/opt配下にapacheなどを置いてきたので、ここに移動します。

まずは、tomcatディレクトリの作成。

mkdir /opt/tomcat

そして、先ほど解凍したディレクトリごと移動します。

mv apache-tomcat-8.0.20 /opt/tomcat

 

次に、パス(環境変数)を設定します。

/etc/profileを編集します。編集方法は、大きく分けて、二つあります。一つは、WinSCP等のSFTPクライアントソフトを用いてファイルをいじる方法。もう一つは、CentOS上のviを用いて編集する方法です。viはLinuxテキストエディタです。Windowsでいうメモ帳的な。

今回はviを用いた方法を紹介します。

vi /etc/profile

でprofileファイルの中身を見ることができます。拡張子がありませんが、ディレクトリではなくテキストファイルです。

viの使い方は慣れるまで少し時間がかかるかもしれません。

vi /etc/profileコマンドで開いただけでは、書き込むことができません。キーボードの

i

を押すと編集できるようになります。iの意味はinsertのiだと思いますが、分かりません。

iを押して編集モードにしたら、profileファイルの一番最後に

JRE_HOME=/usr/java/default
CATALINA_HOME=/opt/tomcat/apache-tomcat-8.0.20
export JRE_HOME CATALINA_HOME

を加えます。Javaの場所はここだよ、Tomcatの場所はここだよってOSに教えてあげているのですね。たぶん。

ここでちょっと豆知識。profileファイルに追加した、CATALINAというのは、サーブレットコンテナのことを意味します。Tomcatというのは、JavaサーブレットJSPを動かす部分と、apacheのようなwebサーバ(TomcatCoyoteというwebサーバを内包している)が合わさったものになります。

環境変数の記入が終わったら、

Esc

で編集モードを抜けて、

:wq

で保存、viの終了をします。コロンを忘れずに。writeとquitを意味するものと思われます。

これで環境変数の設定が終わりました。いったん、exitでログアウトして再度ログインしてください。(/etc/profileに設定した環境変数を有効にするため)

再度ログインしたら、以下のコマンドを打ってください。(バージョンの違い、インストール先の違いがあるので、適宜パスは変えてください。)

/opt/tomcat/apache-tomcat-8.0.20/bin/startup.sh

Tomcatが起動します。

それでは、正しく起動されているかを確認してみましょう。localで作業されている方は、http://localhost:8080/にアクセスしてみてください。私のようにさくらVPSを利用している人ならさくらVPSから配布されたIPアドレスになります。例)http://160.111.222.333:8080/

ポートを指定するのを忘れないでください。Tomcatのポートはデフォルトでは8080になります。下の様な画面が表示されたらTomcatのインストール成功です。

f:id:smartenergy:20150313161049p:plain

 

【CeontOSにApacheTomcatシリーズ】 第1回 CentOS6.6にApache2.4をインストールする
第2回 CentOS6.6にJava8, Tomcat8をインストール
第3回 Apache2.4とTomcat8を連携させる

CentOS6.6にApache2.4をインストールする

【CeontOSにApacheTomcatシリーズ】 第1回 CentOS6.6にApache2.4をインストールする
第2回 CentOS6.6にJava8, Tomcat8をインストール
第3回 Apache2.4とTomcat8を連携させる

 

私は、勉強のため、さくらVPSでサーバを借りています。

VPSはVirtual Private Serverの略です。

中学生の頃、ホームページを作っていた時はレンタルサーバといえば、HTMLファイルが置けるだけだったり、PerlなどのCGIが動かせるものがほとんどでしたが、今はサーバまでクラウド上で借りれる時代になったのですね。

そこで、Webサーバを立てるため、Apacheを入れようと思いました。CentOSapacheを入れるには、

yum -y install httpd

などというコマンドをたたけば良いのですが、これでインストールできるApacheは今の所、2.2です。

ちなみに、一般的に「Apacheのインストール」などといえば、Webサーバの事を指すようです。上のコマンドでhttpdのことですね。当初、ApacheってApache Software Foundationの事じゃないのかと思っていた私は、してやられた気分になりました。

それで、普通に使う分には、2.2で問題ないのですが、tomcatと連携させるときにちょっと困ったことが起こります。詳細は省きますが、websocketが正常に動作しないのです。

そこで、2.4にする必要に迫られました。2.4はyumではインストールできません。

今回は、Apache2.4をソースからインストールする方法について述べます。

 

まず、前もってインストールしておかなければいけないものがあります。

yum install pcre pcre-devel wget gcc make

このコマンドでpcreやpcre-develをインストールします。wgetやmakeなどはすでにあるかもしれませんが、念のため。

 APRのインストール

次に、APRというライブラリをインストールします。なぜか2.4ではこれを別に入れなければいけないらしい。

APRのダウンロードページに行って、apr-1.5.1.tar.gzをダウンロードします。コマンドは、

cd /usr/local/src
wget http://ftp.tsukuba.wide.ad.jp/software/apache//apr/apr-1.5.1.tar.gz

とします。

2015年3月10日現在、APRのバージョンは1.5.1です。バージョンが変わると、アドレスが変わると思われるので、APRのダウンロードページから、apr-1.5.1.tar.gzを右クリック→リンク先をコピー(chromeの場合)して、リンク先を取得します。APRのダウンロードページは、更新するたびごとにミラーページが違うようです。

/usr/local/srcにダウンロードするのは、linuxディレクトリの使い方の基本らしいですが場所はどこでもかまいません。次に、

tar -xvzf apr-1.5.1.tar.gz

で解凍。apr-1.5.1というディレクトリができるので、

cd apr-1.5.1

で移動し、

./configure --prefix=/opt/apr/apr-1.5.1

とします。configreコマンドは、これからインストールするためにOSやCPUの情報を集めたり、次のmakeコマンドで利用するMakefileファイルを作成したりするためのコマンドです。prefixで、インストール先のディレクトリを指定しています。そして、インストールに入ります。コマンドは、

make
make test
make install

してインストールします。makeでコンパイルし、make testでコンパイルしてできたものが正しく動作することを確認、make installは仕上げのインストールコマンドです。

これで、APRが/opt/apr/apr-1.5.1にインストールされました。

 APR-utilのインストール

次に、APR-util 1.5.4をインストールします。再度APRのダウンロードページに行き、 apr-util-1.5.4.tar.gzをダウンロードして、コンパイル、インストールします。APRの時と同じ流れなので、コマンドだけ列挙します。一行ずつしっかりと実行してください。

cd /usr/local/src
wget http://ftp.tsukuba.wide.ad.jp/software/apache//apr/apr-util-1.5.4.tar.gz
tar -xvzf apr-util-1.5.4.tar.gz
cd apr-util-1.5.4
./configure --prefix=/opt/apr-util/apr-util-1.5.4 --with-apr=/opt/apr/apr-1.5.1
make
make test
make install

configureコマンドでは、apr-utilのインストール先として、prefixで/opt/apr-util/apr-util-1.5.4を指定します。また、with-aprで先ほどインストールしたapr-1.5.1を使うよ、というオプションをつけます。

これでようやくApache2.4をインストールする準備ができました。

Apache2.4のインストール

いよいよApache2.4のインストールです。Apacheのダウンロードページから、apacheをダウンロードしますが、2015年3月10日現在、Stable Release(安定版)が2.4.12になりますので、これをダウンロードします。インストールまでの流れはAPRと同じです。ただし、今回はmake testは不要です。

cd /usr/local/src
wget http://ftp.riken.jp/net/apache//httpd/httpd-2.4.12.tar.gz
tar -xvzf httpd-2.4.12.tar.gz
cd httpd-2.4.12
./configure --prefix=/opt/httpd/httpd-2.4.12 --with-apr=/opt/apr/apr-1.5.1 --with-apr-util=/opt/apr-util/apr-util-1.5.4
make
make install

 

これで、エラーが出てなければ、インストール成功です。Apacheの起動コマンドは、

/opt/httpd/httpd-2.4.12/bin/apachectl start

です。ためしにもう一度

/opt/httpd/httpd-2.4.12/bin/apachectl start

を打ってみましょう。正しく起動されていれば、既に起動されていますという意味のhttpd (pid 541) already runningが出るはずです。(pidは541とは限らない)

この状態で、ローカルで作業をされている方は、http://localhost/にアクセスしてみてください。localhostの部分は、わたしのようにさくらVPSを利用している人なら、さくらVPSから配布されたIPアドレスになります。例)http://160.111.222.333/

f:id:smartenergy:20150310231549p:plain

このような画面がでればapacheが起動できています。

お疲れ様でした。

 

【CeontOSにApacheTomcatシリーズ】 第1回 CentOS6.6にApache2.4をインストールする
第2回 CentOS6.6にJava8, Tomcat8をインストール
第3回 Apache2.4とTomcat8を連携させる

XAMPPで起動したMySQLをコマンドプロンプトから起動する方法

備忘録的に書いておきます。

PHPで開発をしている人の多くは、XAMPPを導入していると思います。

XAMPPでMySQLを起動して、MySQLのコマンドを叩きたいときに少し苦労しました。

ちなみに動作環境は、Widows 7(64 bit)です。Macとかは知らね。

一般的に、XAMPPでMySQLを操作するときは、XAMPPのコントロールパネルでApacheMySQLを起動して、MySQLのAdminボタン(図1の赤枠で囲ったボタン)をクリックしてphpMyAdminを表示させて操作するものと思われます。

 

f:id:smartenergy:20150308151012p:plain

図1 XAMPP Control Panelのスクリーンキャプチャ

 

ただ、わざわざApacheを起動しなくてもいいなと思う時や、コマンドラインでの入力が好きな人にはすこし不便かもしれません。

以下に、XAMPPで起動したMySQLコマンドプロンプトで起動する方法を記述しておきます。Apacheは起動しておく必要はありません。

簡単です。

 

1.XAMPPのコントロールパネルから MySQLのStartボタンをクリック。

2.コマンドプロンプトを起動(Windowsボタン→cmd→Enter)して、

cd C:\xampp\mysql\bin

のコマンドを打つ。パスは、XAMPPのインストールフォルダに合わせてパスは変えてください。デフォルトではこのパスだったはず。。

3.mysql -u root -p

のコマンドを打つ。Passwordを聞かれるので、設定したパスワードを入力してEnter。

rootのところは、MySQLにログインしたいアカウントに適宜変更してください。

 

以上で、MySQLコマンドプロンプトから操作できるようになります。

 

と、ここまでで終われば、苦労はしないのですが、我々は日本人。このままでコマンドを叩くと、selectで表示させた日本語が文字化けしたり、insertで挿入した日本語が文字化けします。

嗚呼!半角文字で暮らせる国に生まれたかった!文字コードとの戦いはSEにとっては避けられない戦いです。

それで、どうすれば良いのかというと、MySQLにログインしたあと、次の二つのコマンドをうってください。

一般的なところで書かれている(例えばこことか)、XAMPPを導入した際に文字コードUTF-8に変更してくださいねという作業は既に終わっているものと想定します。


SET character_set_results = sjis;
SET character_set_client = sjis;

 

1つ目が、selectでテーブルの内容を表示させたいとき文字化けが文字化けしないようにするためのコマンド。

2つ目が、insert等で日本語を挿入したときに文字化けしないようにするためのコマンドです。

なぜ、このようなことが起きるのかというと、コマンドプロンプト文字コードがMS932(要するにSJIS)だからです。(てかMS932ってなんだし。普通にSJISでいいし)

色々調べて、片方のコマンドは載っていても両方のコマンドが載っていなかったりしたので、備忘録的に書いてみました。

 

これまでSE的な内容書いてなかっただけにSEっぽい内容ですね!(初歩的なことだけど)