プログラマーの調べ物

プログラマーが調べ物をするときに役に立つサイトを作ります。

JSPのページエンコーディングを設定して文字化けを解消する

こんな感じで、文字化けが発生してしまった。

f:id:sho322:20161210182115p:plain

最初はこんな感じで書いていました。 これを変更していきます。」

<html>
<body>
    <h2>Hello World!</h2>
    <ul>
        <li><a href="<c:url value='/echo' />">エコーアプリケーションへ</a></li>
    </ul>
</body>
</html>

上のJSPを以下のように変更しました。

<%@page pageEncoding="UTF-8"%>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Hello JSP!</title>
</head>
<body>
    <h2>Hello World!</h2>
    <ul>
        <li><a href="<c:url value='/echo' />">エコーアプリケーションへ</a></li>
    </ul>
</body>
</html>

すると、このように文字化けを解消することができました。

f:id:sho322:20161210182131p:plain

参考>

http://www.atmarkit.co.jp/ait/articles/0412/25/news006.html

https://ja.netbeans.org/docs/techinfo/javasourceencoding.html

MacにDockerをインストールする

HomebrewでDockerをインストールします。

インストールコマンド

以下のコマンドでDockerをインストールします。

$ brew cask install virtualbox
$ brew install docker
$ brew install docker-machine
$ brew cask install docker-toolbox

インストールの確認をします。

$ virtualbox --help
Oracle VM VirtualBox Manager 5.1.8

$ docker -v
Docker version 1.12.3, build 6b644ec

$ docker-machine -v
docker-machine version 0.8.2, build e18a919

仮想マシンを作成する

$ docker-machine create --driver virtualbox sample-docker

$ docker-machine ls
NAME            ACTIVE   DRIVER       STATE     URL                         SWARM   DOCKER    ERRORS
sample-docker   -        virtualbox   Running   tcp://192.168.99.100:2376           v1.12.3   

仮想マシンsshで接続

以下のコマンドでDockerに接続できます。

$ docker-machine ssh sample-docker

Docker HubからOSのイメージをダウンロードします。

$ docker pull centos:7

イメージの確認をします。

$ docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
centos              7                   0584b3d2cf6d        4 weeks ago         196.5 MB

イメージを基にコンテナを作成

$ docker create -it --name centos7 centos:7

コンテナの確認は以下です。

$ docker ps -a
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS               NAMES
9fae2f4431f8        centos:7            "/bin/bash"         39 seconds ago      Created                                 centos7

起動中のコンテナにアタッチします。

$ docker start 9fae2f4431f8
$ docker attach 9fae2f4431f8
[root@9fae2f4431f8 /]#

コンテナの生成と起動を同時に行うのは

docker run [option] イメージ名[:タグ名] [引数]

です。

--nameでコンテナ名を指定します。

色々インストールして、環境を作っていきます。

# yum -y install mysqld

MEANアプリケーションを構築する準備をする。

MongoDBをインストールする

こちらの記事を参考にして、Homebrewでインストールします。 http://qiita.com/hajimeni/items/3c93fd981e92f66a20ce

HomebrewでMongoDBをインストールするコマンド。

brew install mongodb

MongoDBを起動します。

mongod --config /usr/local/etc/mongod.conf 

MongoDBに接続します。

mongo

MongoDBの稼働テストをしてみます。

> 
> db.articles.insert({title: "Hello World"})
WriteResult({ "nInserted" : 1 })
> 
> db.articles.find()
{ "_id" : ObjectId("583af05314d36c0c0896312d"), "title" : "Hello World" }
> 

Node.jsをインストールする

以下の記事が参考になります。 http://qiita.com/takeshi81/items/805f504503cd93151ca6

HomebrewでNode.jsのインストールをしてきたのですが、今はNodebrewというのが出てきたみたいです。

まずHomebrewでインストールされたNode.jsをアンインストールします。

brew uninstall --force node

次に、HomebrewでNodebrewをインストールします。

brew install nodebrew

以下のコマンドで最新版のNode.jsをインストールします。

nodebrew install-binary stable

エラーが出ました。

Fetching: https://nodejs.org/dist/v7.2.0/node-v7.2.0.tar.gz
Warning: Failed to create the file 
Warning: /Users/hoge/.nodebrew/src/v7.2.0/node-v7.2.0.tar.gz: No such file or 
Warning: directory
                                                                           0.0%
curl: (23) Failed writing body (0 != 940)
download failed: https://nodejs.org/dist/v7.2.0/node-v7.2.0.tar.gz

ディレクトリがないというエラーなので、必要なディレクトリを作ってあげます。

mkdir ~/.nodebrew
mkdir ~/.nodebrew/src

無事にインストールが完了しました。

$ nodebrew install-binary stable
Fetching: https://nodejs.org/dist/v7.2.0/node-v7.2.0-darwin-x64.tar.gz
######################################################################## 100.0%

~/.bashrcにパスを通します。

$ vi ~/.bashrc

以下を入力。

export PATH=$HOME/.nodebrew/current/bin:$PATH

読み込みます。

source ~/.bashrc 

インストールされているバージョンは以下のように確認します。

nodebrew ls
v7.2.0

current: none

current: noneとあるので、使用するNode.jsを指定します。

nodebrew use stable
use v7.2.0

すると、使用するNode.jsが設定されます。

$node -v
v7.2.0


$nodebrew ls
v7.2.0

current: v7.2.0

npmも一緒にインストールされます。

npm -v
3.10.9

Sassを活用する以前の基礎知識

Sassのインポート機能

Sassでは、@importを使うことで、他のファイルを読み込むことができます。 importは読み込み元のファイルのある場所から読み込みたいファイルをたどれるようにしなければなりません。

たとえば、main.scssにcomponents/common/_header.scssを読み込ませたい場合。

scss
├── base
├── components
│   ├── common
│   │   └── _header.scss
│   └── parts
├── main.css
├── main.css.map
├── main.scss
├── pages
└── utils

以下のように記述します。

@import "./components/common/header";

読み込み先ファイル名の「_」は削除します。 また、拡張子(.scss)は不要です。

コンパイルすると、以下のようにちゃんとファイルが読み込まれています。

.header {
  color: #000; }

header.scssには、先頭に「」がついています。 Sassの仕様で、「_」からはじまるscssファイルは「パーシャル」と呼ばれ、それ自体はCSSコンパイルされない仕様になっています。

リセットCSSを使ってみる

リセットCSSとは、ブラウザごとの差異をリセットし、差分がない状態にするものです。

以下のサイトが詳しそう。 http://creive.me/archives/10438/

sanitize.cssは以下のサイトで手に入れることができます。 https://jonathantneal.github.io/sanitize.css/4.0.0/sanitize.css

このCSSを_sanitize.scssとしてファイルに書き込み、importすればOKです。

Mac上HTML/CSSのコーディング環境を構築する

コンパイルとは、SassをCSSに変換することです。 Sassのコンパイルには、ソフトウェアを使ってGUIで実行する方法と、CUIで行う方法がありますが、一般的にはCUIを使います。

Node.jsをインストールする

Homebrewを使ってインストールしましょう。

brew install node

でインストール可能です。

node -v

でバージョンが表示されればOKです。

次に、Gulpをインストールします。

npm install gulp -g

でGulpがインストールできます。

一般ユーザーで実行すると、

Please try running this command again as root/Administrator.

というエラーが出たので、ルートで実行します。

sudo npm install gulp -g

gulpの実行はgulpfile.jsがある場所で以下のコマンドを実行します。

gulp

Gulpは

  • ファイル保存時の自動コンパイル
  • ファイル保存時のブラウザの自動リロード
  • コンパイルされたファイルのdistFolderへの出力

などをやってくれます。

次に開発環境としてKoalaをインストールしてみましょう。
http://koala-app.com/

Koalaは登録したSCSSを自動でCSSコンパイルしてくれるツールです。 インストール方法は以下のサイトを参考にしてください。

https://liginc.co.jp/web/html-css/css/56599 http://itstudio.co/2016/05/23/5755/

“Koala.app”は、開発元が未確認のため開けません。 というエラーメッセージが出た場合は、こちらを試してみてください。

https://helpx.adobe.com/jp/x-productkb/global/cpsid_93896.html

システム環境設定をいじればインストールできるようになります

JBoss Application Server5をインストールしてみる。

brew install wgetwgetコマンドをインストールします。
wgetJBoss Application Server5をダウンロードします。

wget https://sourceforge.net/projects/jboss/files/JBoss/JBoss-5.1.0.GA/jboss-5.1.0.GA-jdk6.zip/download

downloadという名前でwgetされているので、リネームして、解凍します。

mv download jboss-5.1.0.GA-jdk6.zip 
unzip jboss-5.1.0.GA-jdk6.zip

jdk6が必要と書いてあるので、インストールしましょう。

詳しくは前回の記事を参考にしてください。 http://programmers-investigation.hatenablog.com/

brew cask info java6
brew cask install java6
jenv add /Library/Java/JavaVirtualMachines/1.6.0.jdk/Contents/Home/
jenv local oracle64-1.6.0.65

JBossのインストールはこれで完了です。 とりあえず動かしてみましょう。

/opt/jboss/jboss-5.1.0.GA/bin に移動して、

./run.sh 

を叩きます。 すると、

jboss/jboss-5.1.0.GA/server/default

が動きます。

コンソールに、

15:32:36,890 INFO  [AjpProtocol] Starting Coyote AJP/1.3 on ajp-127.0.0.1-8009
15:32:36,894 INFO  [ServerImpl] JBoss (Microcontainer) [5.1.0.GA (build: SVNTag=JBoss_5_1_0_GA date=200905221634)] Started in 20s:843ms

と出ていれば、起動完了です。

ブラウザで開くと、JMX-Consoleが見れます。
http://localhost:8080/jmx-console/

Ctrl + CJBossを停止させることができます。

programmers-investigation.hatenablog.com