EclipseにTomcatを設定
Tomcatをダウンロード
1, Tomcatのダウンロードサイトへいきます
2, Binary Distributions は以下の tar.gz を選択
今回は7.0.57のバージョンを選択しましたが、こだわりがあれば色々探してみてください。
3, ダウンロードしたapache-tomcat-x.x.x.tar.gzをアプリケーション配下に解凍
EclipseプラグインのSysdeo Tomcatをダウンロード
1, ダウンロードページへ
2, Download配下にあるEclipseのバージョンにあったzipファイルを選択
3, ダウンロードしたzipファイルを解凍するとcom.sysdeo.eclipse.tomcat_x.x.x.jarが作成されるため、これを/Applications/eclipse/pluginsに配置
EclipseでTomcatの設定
1, Eclipseを起動し、設定を開いてTomcatを選択
2, TomcatバージョンにインストールしたTomcatのバージョンを選択
3, Tomcatホームの参照ボタンを選択し、インストールしたTomcatのフォルダを選択
4, okを選択し、設定を閉じる
5, Tomcat起動を選択
Eclipseのツールバーに以下のアイコンがあると思います。左から Tomcatの起動 / 停止 / 再起動です。
6, ブラウザで以下のURLを入力し、開く
上記のようになっていたらTomcatの起動が成功しています。本日も一日お疲れさまでした。
Eclipse Luna (4.4.1)の日本語化
昨日インストールしたEclipse Luna(以下、Eclipse)を日本語化します。英語のままやろうと思ったのですが、、メニューを理解するのにあまりに時間がかかるため挫折。そのうち英語に挑戦します。
Eclipseの日本語化
Pleiadesのダウンロード
日本語化プラグインPleiades (プレアデス)のダウンロード
下記の手順でダウンロードを行います。
1, プレアデスのダウンロードページへ遷移
2, Pleiades プラグイン・ダウンロード 配下の 安定版というリンクを選択
3, Pleiades_*.*.*.zip を選択するとダウンロードが開始されます。
Pleiadesのインストール
1, ダウンロードファイルを解凍すると、Pleiades_*.*.* というフォルダが作成されます。
2, フォルダ内の readmeフォルダ内の readme_pleiades.txt を開き、インストール手順を確認。
3, 2の手順どおりに進めます。plugins、features ディレクトリーを EclipseのECLIPSE_HOMEディレクトリーにコピー。上書きで問題ありません。
4, eclipse.iniファイルを開く。場所は、eclipseのアイコン(右クリック) → パッケージの内容を表示 → Contents → MacOS に配置されています。
5, eclipse.iniの最終行に以下のテキストを追記。
-javaagent:/Applications/eclipse/plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar
*注意: readme_pleiades.txt通りでは起動できず、上記のように変更しました。
6, terminalに以下を入力し、eclipseを起動。
/Applications/eclipse/Eclipse.app/Contents/MacOS/eclipse -clean
起動したEclipseは日本語になっているでしょうか??なっていなかったら頑張ってくださいー。
readme_pleiades.txt にはアンインストールの方法も記載されているので、時間あるときにでも読むのをオススメします。
以上、おやすみなさい。
JDK1.7.xのダウンロードからEclipseの起動まで(mac os x 10.9)
今月からフロントエンドエンジニア(HTML, CSS, JS)から、サーバーサイドエンジニアへ移動しました。
以前に1年ほどJava(SAStruts + DBFlute)をやっていたんですが、、、元々未熟だったのに加え、時間も空いてさらに未熟者になってしまい、泣くハメに><;
少しは勉強せねばと思い、オネンネしていたPCにJava / Eclipseをインストールして勉強環境の下準備の軌跡を綴ったものです。
Java SE Development Kit 7(以下、JDK)のインストール手順
JDKのダウンロード
Javaのダウンロードページからお好きなバージョンを選んだら、Accept License Agreementを選択してダウンロード。
たしか職場のJDKが1.7だったような...と思い、それに合わせてJDK1.7の最新バージョンをダウンロードしました。
JDKのインストール
ダウンロードしたインストーラー(今回はjdk-7u71-macosx-x64.dmg)を開いて下記のように進めていく。
1, ボックスのアイコンを選択
2, 続けるを選択
3, インストールを選択
4, 項目を入力してインストールを選択
5, インストールが完了したので閉じるを選択
JDKの確認
terminalを起動し、 java コマンドと javac コマンドが正常に起動かを確認。
- java -versionを入力し、Enter
java version "1.7.0_71" Java(TM) SE Runtime Environment (build 1.7.0_71-b14) Java HotSpot(TM) 64-Bit Server VM (build 24.71-b01, mixed mode)
- javac -versionを入力し、Enter
javac 1.7.0_71
問題がなければEclipseのインストールに進みます。
Eclipse IDE for Java Developers(以下、Eclipse)のインストール
Eclipseのダウンロード
ダウンロードページに遷移し、お好きなEclipsを選択。
今回はEclipse Luna (4.4.1)を選択しました。
下記画像の通り、リンクを選択するとダウンロードが開始されます。
ダウンロードしたファイル(eclipse-java-luna-SR1-macosx-cocoa-x86_64.tar)をアプリケーション配下で解凍。するとeclipseというフォルダが作成されます。
Eclipseの起動
eclipseフォルダ内のEclipseを選択すると、Eclipseが起動します。
Eclipseの画像が表示され、workspaceを指定してokを選択。
それではEclipse生活をお楽しみくださいー。
参考:
Java SE 7 (JDK 1.7.x) のインストール (Mac | OS X 10.9)|赤び~の備忘録 & 子育て月記
MacにSAStruts開発環境を整える - 発熱するマイナ魂
:before擬似要素に隣接セレクタをつけて直後の要素にスタイルを当てたらどうなるか
デベロッパーツールのHTMLを見て、::beforeに隣接セレクタで直後の要素にスタイルを当てられるんじゃない??と前々から密かに思っていたので実験してみました。
仮にスタイルを当てられるとしても、使う場面はないと思いますがワラ
HTML <p class="text"> <span class="text__mess">ためしてがってん!!</span> </p>
CSS .text:before { content: ""; } .text:before + .text__mess { color: red; }
それでは結果です。
macにインスールしたChromeで確認しました。
テキストが赤くなっていないため、
:before擬似要素に隣接セレクタをつけても直後の要素にスタイルを当てることができない。
といことが分かりました。
はい、どうでもよい実験でした。
おしまい
CSS設計の教科書をまとめてみた
CSS設計の教科書を読んで、今後意識していくべき項目を大雑把にまとめてみました。
もっと知りたいという方は本の購入をオススメします。
よりよいCSSの設計とは
予測しやすい
期待通りに振る舞い、追加したルールが他のルールに影響を与えない。再利用しやすい
抽象的で分離され、再度遭遇した同じUIに対して、再度書き直す必要がない。保守しやすい
新しいルールを追加・更新するときに既存のルールのリファクタリングを必要としない。拡張しやすい
自分と自分以外の人にもメンテナンス・管理がしやすい。
破綻しやすいCSSの特徴
- HTML構造に依存している
- スタイルを取り消している
- 絶対値を多様しいている
コンポーネント設計についての概要も記載されており、とても分かりやすく丁寧にまとまっていました。OOCSSとかSMACSSとかBEMとか聞いたことあるけど、、、という方は必見。
コンポーネント設計の概要について
OOCSS
SMACSS
下記のようにカテゴライズして設計する。
Base
ブラウザ、およびそのプロジェクトに置ける、各要素のデフォルトのスタイルを定義。htmlやbodyに定義するであろう、全体の背景やフォント、リンク色といったものも含む。なるべく書き換えはしたくないため、widthやmargin、padding等は記載しない。Layout
IDを用いて定義されるようなヘッダー、フッター、サイドバー、コンテンツエリア、構成の大枠、セクションを作る要素へのルール。これらはIDで詳細度をあげてもOK。Module
ボタン、見出し、リンクなど、layoutを除くあらゆる再利用可能なオブジェクトが該当。State
JSの制御で切り替わるような状態を表すものやメディアクエリでコンポーネントを制御するものが該当。.is-*という接頭辞をつけるのが推奨。Stateでは!importantを使うのは許容。Theme
テーマを切り替えるようなもの。.them-*という接頭辞をつけるのが推奨。
BEM
オブジェクト/コンポーネントを3つに分けて分類する。
例: <div class="alert alert_waring> <h1 class="alert__title">パスワードが違います。</h1> <p class="alert__body">再度入力してください。</p> </div>
Block
例の.alertが該当。Element、Modifierはこれを基点に命名していく。Element
Blockを構成する要素。alertというBlockに対するElementということでアンスコを2つ付けた命名にする。.alert__title、.alert__bodyが該当。Modifier
BlockまたはElementのバリエーション違いの要素。SMACSSのStateのようなものも該当。上記では、.alert_waringが該当し、Modifierはアンスコ1つつけて命名する。
コンポーネント設計時の注意点
最適化を焦らない
Rule of three。3回繰り返したものは、パターンとして成立する。無駄に詳細度をあげない
h2.title {...} → .title {...}
セレクタとしては要素を省略しても問題無いし、h2でなくともh1やh3でも使用できるようにするべき。構造という責任と見た目という責任の分離 テキストカラーやサイズやボーダーや背景といった見た目とpositionやfloatなどといった構造を一緒のルールセットにしないこと。
開放/閉鎖の原則
コンポーネントのベースとなるルールというのは、上書き・拡張しやすく(開放的) できる限り変更をするべきではない(閉鎖的)再利用がすべてではない コンポーネントにおける再利用性というのは、コンポーネントの単位で再利用するということ。 過剰に再利用することを意識して、異なるコンポーネントを混ぜないように。
さらに設計やリファクタリングを学びたい人には下記がオススメらしい。