Lessをeclipseでいじろう！！

この投稿はCSS Preprocessor Advent Calendar 2012の１５日目の投稿です。このポストでCSS Preprocessor Advent Calendar 2012を知ったという方は一日目の投稿から読むことをお勧めします

ここまでの１４日間のAdvent calendarでLessに興味を持ち、導入意欲も湧いてきたかと思いますが、私自身、初歩的な環境構築がわかっておらず。。。

そこで、家ではMac,仕事場ではWindows環境な私が両環境で共通で使えそうなEclipse上でLessを記述する方法例を書きます。（ハードル低くてすみませんｗｗ）

今回、作成したサンプルプロジェクトのソースはgithubに置いてあります。

内容：

Lessとは

SassよりLessって・・・

開発環境

環境構築

Lessをいじる
コンパイル

まとめ

（内容で、間違っていたら指摘してください　＞＜）

でわ・・書きます。

Lessとは

（一日目からみている人は読み飛ばしてください）

まず、ややこしいのですが、Lessは、Lessフレームワークのことではありません。

Lessフレームワークは、「通常のCSS仕様に沿った書き方で」多画面対応のためのフレームワークのようです。

一方、Lessは、「CSS仕様にはない書き方」を補うものです。

例えば、宣言ブロックのネスト、プログラミング言語でお馴染みの「変数」、「ミックスイン（Mixin）」、「演算」、「カラー関数」だそうです。

twitterのBootstrapツールで採用されている実績あり。

（cssはいじったことあるのですが、詳しくメリット、デメリットまで理解してないです　＞＜）

んで、CSSの仕様上ネストや変数などが使えないので、「別言語でCSSを生成しちゃえばいいんじゃね？」ってことで、Lessが生まれました。

別言語が「メタCSS言語」＝「Sass」（先輩）、「Less」（後輩）・・・etc

生成処理がはいるので、コンパイルが必要です。

Lessは、javascript、SassはRubyです。

Lessは、２通りの使い方がある。

１．毎回、HTMLが読み込まれた時にコンパイル　→　CSS生成　→　描画

２．予めコンパイルしてCSS生成済み　→　描画

詳細はこちらのサイトで確認を　＞＜

Lessの説明終了。

SassよりLessって・・・

Sassの派生でLessが生まれたようです。Sassさんは、先輩だからイロイロできることありすぎて、短期間では理解は難しそう・・・「なぜこうなっているのか？」と疑問になってコンパイラの処理を覗こうとしたとき・・Ruby言語の学習コストが痛い。。

TwitterがBootstrapツールを公開してるし・・・・

てことで、テーマは、Lessで投稿！！

→やっと言えたｗｗ

開発環境

MacBook Pro Retina 10.8.2

Eclipse4.2

環境構築

Mac編

参考サイト

１．Eclipse3.7.1以上を用意

Eclipseのバージョン確認画面

２．コンパイルをしたいなら
version 1.1.5以上のless.jsを用意する。（詳しいことはコンパイル説明で・・）

githubの画面

３．xtextをEclipseにインストールする

編集するため？に使用する

Xtext　2.2.1以上

ダウンロード先：

http://download.eclipse.org/modeling/tmf/xtext/updates/composite/releases/

対象プラグイン選択

プラグイン一覧確認画面

同意画面

再起動してXtextの設定完了
４．Lessプラグインをインストール

一覧からLessプラグインを選択・インストールする

ダウンロード先：

http://www.normalesup.org/~simonet/soft/ow/update/

Lessを選択

一覧確認画面

同意画面

再起動して、Lessプラグインインストール完了~
５．「.less」ファイルに関連づけされているか確認
適切に設定が完了すれば、「.less」ファイルの関連付け設定がされているはず。

ファイルの関連付け確認画面

６．拡張子が「.less」なファイル作成
WebProject作成感覚で適当に作成

プロジェクト画面

７．Lessをいじる
詳しいことは、他のサイトを参考にしてください＞＜

参考に書いlessコード

コンパイル

１通り目
毎回、HTMLが読み込まれた時にコンパイルする場合
一般的にこの記述を書く
less.jsは、ここから落とす

HTMLが読み込まれた時にコンパイルする場合の例

２通り目
gitからコンパイル用の圧縮ファイルを解凍したのが下記キャプチャ

lesscの選択画面

binフォルダになにやら「lessc」ファイルがある。
こいつにeclipseのワーキングスペースで書いた「lessファイル」のパス渡せばコンパイルができる？？。
と思ったのですが、上手くいきません
次~
makeファイルがあります。
これ実行したらいいんじゃね？

ファイル構成画面

ダブルクリックしたらこんな感じ

ダブルクリックした時の結果画面

nodeやらgitやらコマンドが見つからないとのこと・・
うーん、入れてもいいんだけど・・今回は放置。。
逃げで、Less用のGUIコンパイラであるCodeKitでコンパイルします。

CodeKit起動画面

→できるだけEclipseでやりたかった　けど妥協~
Eclipseのプロジェクトをドラッグ＆ドロップする

ドラッグ＆ドロップ

cssのパスを整える

CodeKitの環境設定画面

CSSパスを設定する

コンパイルしたCSSの出力先を設定する。

ファイルパス設定

リフレッシュしないと画面には反映しない

まとめ

Lessについて理解していることを整理してみた。
Eclipseで開発できるって便利そう~
今後は、
Webが熱いので、このテーマをもう少し掘り下げるかな~

掘り下げたときは、随時Guthubにアップしますね~

これで、CSS Preprocessor Advent Calendar 2012の１５日目の私の
投稿は完了です！！

以上

【Android】4.1のエミュレータを使ってみます。

Android4.1のメモです。
【１．開発環境】
 下記です。

【２．SDKの準備】
昨日の夕方アップデートした時はまだ、Android４．１がなかったのですが。
今日アップデートしてみると、新しいのが提供されておりました！！

早速ポチットな～

回線遅いｗ

【３．エミュレータ作成】
これはいつもの通り、クリッククリック～
まず、OSのホームスクリーンの移動を楽にするために、
GPU　emulationを有効にします。

ザックリとしてエミュレータの設定

Android４．１からエミュレータスキンのHD が加わったようです。
む・・・QHDのスキンは・・・・・ないですね～
そもそも、QHD（540x960）のような中途半端なディスプレイサイズは、海外でのニーズはないのかもしれません。
Android２．３の端末で何個かの機種は、QHDサイズの端末を見かけました。
今後は・・・・ないかもしれません。

エミュレータ作成完了～

エミュレータ起動

い

初見で思ったのは・・・しぶいデザインです＞＜
【４．まとめ】
お！！
ナビゲーションバーがありますね～
今まで、エミュレータではナビゲーションバー表示ができませんでしたが・・・

ある！！

これで、だいぶ開発が楽になったのかな？？

でも・・・エミュレータだとGPU　Emulationのおかげでホーム画面は動かせますが・・・・・
その他のデフォルトアプリ起動がイマイチかな・・・・・最終的には端末が必要ですね。

お財布が・・・orz

でわでわ～

【swing】Eclipse3.7の「WindowBuilder 」でSwingでレッツアプリ開発！！ その４

前回の続き
プログレスバーを使用してみる。

１．追加ソース

 /**
  * Initialize the contents of the frame.
  */
 private void initialize() {
  frame = new JFrame();
  frame.setBounds(100, 100, 450, 300);
  frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  frame.getContentPane().setLayout(new BorderLayout(0, 0));
  JButton btnNewButton = new JButton("開始");
  frame.getContentPane().add(btnNewButton, BorderLayout.SOUTH);


  progressBar = new JProgressBar(0 , 100);

  frame.getContentPane().add(progressBar, BorderLayout.NORTH);
  btnNewButton.addActionListener(this);
  timer = new Timer(100 , this);
  timer.start();


 }

 /**
  * 汎用String格納用メンバ変数
  * メモリ効率を考えてStringBuilderを使用する。
  * */
 StringBuilder mStringBuilder = new StringBuilder();
 /* (非 Javadoc)
  * @see java.awt.event.ActionListener#actionPerformed(java.awt.event.ActionEvent)
  */
 public void actionPerformed(ActionEvent e) {
  if(mStringBuilder !=null){
   mStringBuilder.delete(0, mStringBuilder.length());
  }
  mStringBuilder.append(e.getActionCommand());
  //開始のボタンイベントかどうか
  if(mStringBuilder.toString().equals("開始")){
   //警告ダイアログを表示する。
      JLabel label = new JLabel("Message");
      label.setForeground(Color.RED);
      JOptionPane.showMessageDialog(frame, label);



  }else{
   //ActionEventがクリックボタンではない場合,プログレスバーの値変更処理開始
   int value = progressBar.getValue();
   if (value == 100) {
    timer.stop();
    return;
   }else{
    progressBar.setValue(value + 1);
   }
  }
 } 

 2.プログレスバーが表示された。

プログレスダイアログが表示された。

３．プロジェクトについて
ここのサイトに格納しております。何かのお役に立てたら幸いです。

【swing】Eclipse3.7の「WindowBuilder 」でSwingでレッツアプリ開発！！ その３

前回の続きです。

前回作成した、Buttonにクリックイベントを追加してみます。
下記がソースです。色を変更しているところが追加したところです。

package jp.co.hanatann.swing_hello;

import java.awt.Color;
import java.awt.EventQueue;

import javax.swing.JFileChooser;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JOptionPane;

import java.awt.BorderLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.io.File;

import javax.swing.JButton;

public class Swing_Hello implements ActionListener{
 private JFrame frame;

 /**
  * Launch the application.
  */
 public static void main(String[] args) {
  EventQueue.invokeLater(new Runnable() {
   public void run() {
    try {
     Swing_Hello window = new Swing_Hello();
     window.frame.setVisible(true);
    } catch (Exception e) {
     e.printStackTrace();
    }
   }
  });
 }

 /**
  * Create the application.
  */
 public Swing_Hello() {
  initialize();
 }

 /**
  * Initialize the contents of the frame.
  */
 private void initialize() {
  frame = new JFrame();
  frame.setBounds(100, 100, 450, 300);
  frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  frame.getContentPane().setLayout(new BorderLayout(0, 0));


  JButton btnNewButton = new JButton("開始");
  btnNewButton.addActionListener(this);
  frame.getContentPane().add(btnNewButton, BorderLayout.SOUTH);

 }

 /* (非 Javadoc)
  * @see java.awt.event.ActionListener#actionPerformed(java.awt.event.ActionEvent)
  */
 public void actionPerformed(ActionEvent e) {
  //開始のボタンイベントかどうか
  if(e.getActionCommand().equals("開始")){
   //警告ダイアログを表示する。
      JLabel label = new JLabel("Message");
      label.setForeground(Color.RED);
      JOptionPane.showMessageDialog(frame, label);



  }

 }

}

アプリの使用としては、開始ボタンを押して警告ダイアログを表示させる仕様です。

開始ボタン押下

警告ダイアログが表示される。

簡単ですね　＾＾

【swing】Eclipse3.7の「WindowBuilder 」でSwingでレッツアプリ開発！！ その２

前回の続きです。
前回は、swingのベースとなるframeを作成しました。
今回は、ボタンを追加してみました。

1.frameにBorderLayoutを追加する。
これを追加すると、レイアウトが綺麗になるっぽいので追加しますｗｗ

frameへBoarderLayoutを追加

 ２．Buttonを追加

frameへButtonを追加する。

 3.Buttonのプロパティをいじってみる。

Buttonのプロパティ:textを変更してみる。

 4.アプリを実行してみる。

アプリの下部にButtonが追加されたことが確認できる。

【swing】Eclipse3.7の「WindowBuilder 」でSwingでレッツアプリ開発！！ その１

eclipse3.7からWindowBuilderというプラグインが追加されて用です！！！

swingについては、耳にした程度で・・・・具体的にこれで開発したことはありません。

このswingは、
ぱっとみ、マルチスレッド向きでは、無い？って印象です。
シングルスレッド向きのアプリは、作成しやすいのかな？



百聞は一見にしかず！！！
何かアプリを作成してみます。

eclipse3.7のWindowBuilderプラグインはデフォルトでは、無効になっているので、有効にする。

WindowBuilderのプラグインをインストールする。

新規->その他を押下

javaプロジェクトを選択

プロジェクトが生成された

新規->その他->WindowBuilder->Application Windowを選択

パッケージ名と名前を入力する。

swingで必要なフレーム類がプロジェクトへ生成された

プロジェクトをJavaアプリとして起動する。

アプリが起動した。

下記は、生成されたソースの貼り付け

package jp.co.hanatann.swing_hello;

import java.awt.EventQueue;

public class Swing_Hello {

 private JFrame frame;

 /**
  * Launch the application.
  */
 public static void main(String[] args) {
  EventQueue.invokeLater(new Runnable() {
   public void run() {
    try {
     Swing_Hello window = new Swing_Hello();
     window.frame.setVisible(true);
    } catch (Exception e) {
     e.printStackTrace();
    }
   }
  });
 }

 /**
  * Create the application.
  */
 public Swing_Hello() {
  initialize();
 }

 /**
  * Initialize the contents of the frame.
  */
 private void initialize() {
  frame = new JFrame();
  frame.setBounds(100, 100, 450, 300);
  frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 }

}

ほほー、
あっという間に作成できました　＾＾

【Android】Androidのapkをデコンパイルやeclipseへデバック用にプロジェクトを読み込みしてみる。

もし、自分のプロジェクトを紛失して、apkのみしか無い場合の事を考えて、プロジェクト作成できるか、ちょっと調べてみました。


ただ・・・・いろいろありますが２通りあることがわかりました。


１.環境
WindowsXP
Android開発環境
著作権上問題のないAndroidnoapkファイル
 ecilpse環境
apktoolとdex2jarをダウンロード　（dex2.jarについては後日）
００３SH 端末

EclipseにGitを設定(1)

EclipseにSVNは設定してたけど、Gitを使ってみたくなった・・・・
設定にいたるまでのメモ代わりに書きます。

改めて、何Gitって？
ていうのは、Google先生に任せて・・・・・・・・・

とりあえず、 設定開始～

1.環境設定
１．１　All in one Eclipse３．６
１．２　これに予めあるプラグイン先の    http://download.eclipse.org/egit/updates    を使用可能にする

Eclipseのウィンドウ->設定->設定ダイアログを起動後、図のようにGitプラグインのサイトを有効にする。

１．３　いるものだけ選択して、プラグインのインストール開始～

Eclipseのヘルプ->新規ソフトウエアのインストール->インストールダイアログを起動後、作業対象から先ほど有効にしたGitのプラグインURLを選択する。

インストールするプラグインを選択する。

１．４　Eclipseが再起動でプラグインのインストール完了しているはず！！
これは、いわゆるEGitっていうプラグインですね。
詳細なドキュメントはここです

２．自前のGitサーバへプロジェクトを登録
プロジェクトを登録するために、無料でプライベートなサーバを調べてみました。
（お金があったら・・・有料にしたいｗｗ）
２．１オープンストレージ
オープンストレージを使ってGitサーバを構築
->これって、よく見かけます・・・使えるのは下記かな？
・sugar Sync
・BusyBox
・Nドライブ？
・YahooBox　－＞これ凄く問題あり・・今カスタマーセンターへ問い合わせ中
メモ代わりに問い合わせ内容のリンク張っておきます。

２．２Gitサーバ
無料のGitサーバを調べるとちらほらヒット
その中で、プライベートで使えるサイトで選んだのがこれ
bitbucket
https://bitbucket.org/
 これの良いところは、プライベートで使えるから・・・・・
ただ・・最大データ容量が書かれていないので、いくつまで使えるかわかりませんｗｗ

いろいろ設定して、いざゴニョゴニョEclipseをいじる
gitサーバ側のuser:emailとuser:nameを設定

・・・お

Gitリポジトリパースペクティブに登録されたではないかｗｗ

大変かな？と思ったら、直ぐできたｗｗｗ
通常のプラグインと同じ間隔でやるかぁ～


っと思ってたら・・・PullとかHEADとかコミットとか旨くいかないｗｗ
ううーん、どうしようかこれｗ