Eclipse Luna (4.4.1)の日本語化

mac Eclipse

昨日インストールしたEclipse Luna(以下、Eclipse)を日本語化します。英語のままやろうと思ったのですが、、メニューを理解するのにあまりに時間がかかるため挫折。そのうち英語に挑戦します。

Eclipseの日本語化

Pleiadesのダウンロード

日本語化プラグインPleiades (プレアデス)のダウンロード

下記の手順でダウンロードを行います。

1, プレアデスのダウンロードページへ遷移

2, Pleiades プラグイン・ダウンロード 配下の 安定版というリンクを選択

f:id:yagi_suke:20141118003859p:plain

3, Pleiades_*.*.*.zip を選択するとダウンロードが開始されます。

f:id:yagi_suke:20141118004021p:plain

Pleiadesのインストール

1, ダウンロードファイルを解凍すると、Pleiades_*.*.* というフォルダが作成されます。

f:id:yagi_suke:20141118004331p:plain

2, フォルダ内の readmeフォルダ内の readme_pleiades.txt を開き、インストール手順を確認。

3, 2の手順どおりに進めます。plugins、features ディレクトリーを EclipseのECLIPSE_HOMEディレクトリーにコピー。上書きで問題ありません。

f:id:yagi_suke:20141118020207p:plain

4, eclipse.iniファイルを開く。場所は、eclipseのアイコン(右クリック) → パッケージの内容を表示 → Contents → MacOS に配置されています。

f:id:yagi_suke:20141118020825p:plain

f:id:yagi_suke:20141118020836p:plain

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)

mac Java Eclipse

f:id:yagi_suke:20141116002806j:plain

今月からフロントエンドエンジニア(HTML, CSS, JS)から、サーバーサイドエンジニアへ移動しました。

以前に1年ほどJava(SAStruts + DBFlute)をやっていたんですが、、、元々未熟だったのに加え、時間も空いてさらに未熟者になってしまい、泣くハメに><;

少しは勉強せねばと思い、オネンネしていたPCにJava / Eclipseをインストールして勉強環境の下準備の軌跡を綴ったものです。


Java SE Development Kit 7(以下、JDK)のインストール手順

JDKのダウンロード

Javaのダウンロードページからお好きなバージョンを選んだら、Accept License Agreementを選択してダウンロード。

f:id:yagi_suke:20141116002848p:plain

たしか職場のJDKが1.7だったような...と思い、それに合わせてJDK1.7の最新バージョンをダウンロードしました。

JDKのインストール

ダウンロードしたインストーラー(今回はjdk-7u71-macosx-x64.dmg)を開いて下記のように進めていく。

1, ボックスのアイコンを選択f:id:yagi_suke:20141116235516p:plain

2, 続けるを選択f:id:yagi_suke:20141116235529p:plain

3, インストールを選択f:id:yagi_suke:20141116235628p:plain

4, 項目を入力してインストールを選択f:id:yagi_suke:20141116235729p:plain

5, インストールが完了したので閉じるを選択f:id:yagi_suke:20141116235739p:plain

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)を選択しました。

f:id:yagi_suke:20141117004420p:plain

下記画像の通り、リンクを選択するとダウンロードが開始されます。

f:id:yagi_suke:20141117005943p:plain

ダウンロードしたファイル(eclipse-java-luna-SR1-macosx-cocoa-x86_64.tar)をアプリケーション配下で解凍。するとeclipseというフォルダが作成されます。

f:id:yagi_suke:20141117011042p:plain

Eclipseの起動

eclipseフォルダ内のEclipseを選択すると、Eclipseが起動します。

f:id:yagi_suke:20141117011151p:plain

Eclipseの画像が表示され、workspaceを指定してokを選択。

f:id:yagi_suke:20141117011443p:plain

それではEclipse生活をお楽しみくださいー。


参考:
Java SE 7 (JDK 1.7.x) のインストール (Mac | OS X 10.9)｜赤び～の備忘録 & 子育て月記
MacにSAStruts開発環境を整える - 発熱するマイナ魂

:before擬似要素に隣接セレクタをつけて直後の要素にスタイルを当てたらどうなるか

CSS

f:id:yagi_suke:20141116011427p:plain

デベロッパーツールのHTMLを見て、::beforeに隣接セレクタで直後の要素にスタイルを当てられるんじゃない？？と前々から密かに思っていたので実験してみました。

仮にスタイルを当てられるとしても、使う場面はないと思いますがワラ

HTML
<p class="text">
    <span class="text__mess">ためしてがってん！！</span>
</p>
CSS
.text:before { content: ""; }
.text:before + .text__mess { color: red; }


それでは結果です。
macにインスールしたChromeで確認しました。

f:id:yagi_suke:20141116013025p:plain

テキストが赤くなっていないため、
:before擬似要素に隣接セレクタをつけても直後の要素にスタイルを当てることができない。 といことが分かりました。

はい、どうでもよい実験でした。
おしまい

:before擬似要素についてわからない方はこちら。
隣接セレクタってなによって方はこちら。

CSS設計の教科書をまとめてみた

CSS
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
posted with ヨメレバ
谷 拓樹 インプレス 2014-07-24
Amazon
Kindle
楽天ブックス

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などといった構造を一緒のルールセットにしないこと。

  • 開放/閉鎖の原則
    コンポーネントのベースとなるルールというのは、上書き・拡張しやすく(開放的) できる限り変更をするべきではない(閉鎖的)

  • 再利用がすべてではない コンポーネントにおける再利用性というのは、コンポーネントの単位で再利用するということ。 過剰に再利用することを意識して、異なるコンポーネントを混ぜないように。



さらに設計やリファクタリングを学びたい人には下記がオススメらしい。

新装版 リファクタリング―既存のコードを安全に改善する― (OBJECT TECHNOLOGY SERIES)
posted with ヨメレバ
Martin Fowler オーム社 2014-07-26
Amazon
Kindle
楽天ブックス

Macのプロセッサが32bitか64bitかを確認する方法

mac

f:id:yagi_suke:20141114015224p:plain

1, Finder を開く
2, アプリケーション を開く
3, ユーティリティ を開く
4, システム情報 を開く
5, ハードウェア を選択
6, プロセッサ名 を下記の表と比較

プロセッサ名 32bit ／ 64bit
Intel Core Solo 32bit
Intel Core Duo 32bit
Intel Core 2 Duo 64bit
Intel Quad-Core Xeon 64bit
Dual-Core Intel Xeon 64bit
Quad-Core Intel Xeon 64bit
Core i3 64bit
Core i5 64bit
Core i7 64bit

参考:
Intel ベースの Mac のプロセッサが 32 ビットか 64 ビットかを識別する方法 - Apple サポート