JavaScript+無名関数

投稿者: yoshi () | コメント (0)

tech2
Creative Commons License photo credit: PabloBD
なんとなく、こんなコードが好きだ!
と、唐突もなく書いてしまいました。

(function(o) {
    window.addEventListener('load', o, false);
})(function() {
    var nodes = document.getElementsByTagName('a');
    for (var i = 0; i < nodes.length; i++) {
        nodes[i].onmouseover = function() {
            console.log(this.href);}
    }
});

コード自体はページ内のリンクのマウスオーバでリンク先URLをコンソールに出してるだけです。

どうでしょうか、なんとなくシュッとしてる感じがしませんか?
具体的にどの辺がと問われると困ってしまいますが、
個人的に悩ましい問題から開放されているのです。

それは、名前を付けるという事をしていないのです。

ではでわ。

css3でtext-shadowを使ってみた

投稿者: nishi () | コメント (0)

みなさんこんばんは。
もうすっかり夜ですね。お腹もなるってものです。


ここのところfontでウキウキしていた私ですが
fontつながりということで、
ちょっくら影でもつけてみようかと思います。


text-shadow

これまで、CSSで影つけたことがなく、
もっぱら画像で作っておりまして
そのせいで大きさだとか重なりだとか
そのあたりがなんだか悩ましい事になったりしたことが
多々ありました。
が、このプロパティを使うとなんと便利なことに、
影の部分がレイアウトに影響を及ぼさないのです。


スクロールバーも発生しないのです。
wonderfulですね。


こんな感じでhtmlを書くとします。


<div class="sample03">EIPLAB</div>



CSSは


 
.sample03{
	font-size: 100px;
	color: #669933;
	padding: 5px;
	text-shadow: 3px 6px 8px #333333;
}

こんな感じにしてみます。


数値は、左から
1.横方向の距離(正の値で右、負の値で左に離れる距離です)
2.縦方向の距離(正の値で下、負の値で上に離れる距離です)
3.ぼかしの強さ(幅といいますか。ぼんやり大きくなったり、小さくつけたり調整するところ)
4.影の色
の指定となります。


そうしてブラウザでみてみると、


こんな感じになります。
影の色を調整すると、また違ったイメージになりますね。


文字から距離をおかないでおくこともできます。


 
.sample03{
	font-size: 100px;
	color: #ffcc66;
	padding: 5px;
	text-shadow: 0 0 6px #6666cc;
 
}



こんな感じですね。


文字の色を変えると
また違ったイメージになりますね。






背景の色とあわせたりすると面白いかも。


とてもいいなあと思ったところは、
この影、たくさん並べて書くことが可能なのです。


 
.sample03{
	font-size: 100px;
	color:rgba(255,255,255,0.8);
	padding: 5px;
	text-shadow: 0 0 6px #6666cc, 3px 6px 8px #333366, 20px 20px 33px #cc6699;
 
}




3種類の影を書いてみました。
この場合、先に指定した影が文字の一番近くにできます。
なので、3番目に指定した影は
一番後ろにつくことになります。


ついでに、文字色の指定の仕方を
前にやった、透明度が指定できるやりかたに
してみましたところ





こんな感じになりました。


デザインする時はphotoshopとかなので
cssでやると、えーっと・・・って考えながら
作らないといけませんが
慣れの問題なのかもしれません。


文字で指定できるところの良いところは
修正が簡単!だと思いますので
頑張っていきましょう!というところですね。

カテゴリ: CSS

MOTODEV Studio for Android

投稿者: jun () | コメント (0)

こんにちは。
JavaScriptでWebサービスを書きたかったのですが、Xperia acroを入手してしまったためMOTODEV Studio for AndroidでAndroid開発環境を作ってみようかと思います。

MOTODEV Studio for AndroidはEclipseベースのIDEとなっています。

開発環境

Macbook Pro (Snow Leopard)

準備編

まずはAndroid SDKを入手します。

ダウンロードはこちらから

お好きな場所へ解凍します。

android-sdk-mac_x86/tools/android を実行します。

Installed packageから必要なSDKを選択してインストール。全部選ぶとかなり巨大ですのでご注意を。

また、Google API、Galaxy tab 用の拡張パッケージもインストールできます。

MOTODEV Studio for Androidをダウンロード。

http://developer.motorola.com/docstools/motodevstudio/

ダウンロードはこちらから。

最初にユーザ登録をしなければなりません。

ログイン後、Mac OS X 64bit用をダウンロードします。

MOTODEV_Studio_for_Android_2_2_1_MacOSX-x86_64.jarを実行するとインストーラが起動します。

インストールされたアプリケーションを起動します。

workspaceを任意に指定 -> deviceを新規追加。(今回はXperia acroにdpi等を合わせました)

File -> New -> Android ProjectでHelloWorldというプロジェクトで作成。

すると雛形が全て出来上がります。

こんな感じです。

motodevstudio

開発する準備が整いましたね。

続きはまた今度。

WindowsでRockMongoからmongoDBを使ってみよう

投稿者: akiue () | コメント (0)

前回はコマンドプロンプトからmongoDBを使って行きました。
しかし、コマンドプロンプトからでは使いにくい上に、
2バイトコードを入力する事ができませんでした。
今回はrockmongoというmongoDB管理ツールをインストールし、
そこからデータの登録と検索をしてみます。

[今回の環境]

lenovo X200
Windows XP Professional SP3
Internet Explorer8
mongoDB 1.8.2
rockmongo-on-windows 0.0.2

rockmongoをダウンロード

まずrockmongoをダウンロードしましょう。

ブラウザで以下URLを開いてください。

http://code.google.com/p/rock-php/

開いたらDOWNLOADリンクをクリックします。
※画像のマウスカーソルの場所を参考にしてください。

遷移先画面でファイル名のリンクをクリックします。
※画像のマウスカーソルの場所を参考にしてください。

さらに遷移先の画面でファイル名のリンクをクリックします。
※画像のマウスカーソルの場所を参考にしてください。

rockmongoの配備

ダウンロードが完了したらファイルを解凍してください。
解凍したフォルダ名を「rockmongo-on-windows」から「rockmongo」に変更します。

そのフォルダをxamppの配下に配備します。
c:\xampp\htdocs配下に「rockmongo」フォルダを移動します。

コマンドプロンプトからmongoDBをスタートします。
参照

すでに起動している場合は以下のようなメッセージが表示されます。

C:\xampp\mongodb\bin>net start "mongoDB"
要求したサービスは既に開始されています。
 
NET HELPMSG 2182 と入力すると、より詳しい説明が得られます。
 
C:\xampp\mongodb\bin>

RockMongoの起動

それではrockmongoを起動しましょう。
C:\xampp\htdocs\rockmongo\rockstart.batをダブルクリックしてください。

RockMongoのログイン画面が表示されましたでしょうか?

UserNameとPasswordの両方にadminと入力して、
「Login and Rock」ボタンをクリックしてください。

下記の画面が表示されたら無事にmongoDBに接続が完了しています。

RockMongoにはUIに日本語が用意されているので、
日本語に変更しましょう。
右上のEnglishの右側にある下矢印をクリックしてプルダウンを表示し、
プルダウンの中から「日本語 -Japanese」をクリックしてください。
※画像のマウスカーソルの場所を参考にしてください。

表示が日本語に変わると、一気に親近感がわきますね♪

データの登録

この掲載を順番に進めている方は、すでにデータが3件登録されています。
画面左の「books」をクリックしてください。

一階層下が表示されるので、「things」をクリックしてください。

クエリー実行画面が表示されてきました。
画面右下には登録済みのデータが表示されています。

次にメニューから「挿入」をクリックしてください。
※画像のマウスカーソルの場所を参考にしてください。

データの登録にはコマンドプロンプトで実行したコマンドのJSON部分を利用します。
Create Row画面が表示されたら、
Dataエリアの「{」と「}」の間に以下を入力してから、

"book_name" : "Google Android" , "price" : "3000" , "digest" : "Androidの開発方法を詳細に記載している"

画面下部の「保存」ボタンをクリックしてください。

登録が無事に完了して、クエリー画面が表示されてきました。
先ほど登録したデータもちゃんと表示されてますね♪

データの検索

検索はアクションが「findAll」になっていることを確認してから、
テキストエリアに以下の検索条件を入力してから、

{book_name : "Google Android"}

「Submit Query」ボタンをクリックしてみましょう。
条件にマッチした2件だけが表示されていますね。
今回は無事2バイト文字も登録されてます。

おや?画面上部にWarningが表示されましたね。

Warning: date_default_timezone_get(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'Asia/Tokyo' for '9.0/no DST' instead in C:\xampp\htdocs\rockmongo\web\rockmongo\app\classes\VarEval.php on line 105

どうやらtimezoneを設定していないと言っているようです。
php.iniにtimezoneを設定してあげましょう。

C:\xampp\htdocs\rockmongo\php\php.iniに以下のように変更してから保存します。
[変更前]

[Date]
; Defines the default timezone used by the date functions
; http://php.net/date.timezone
;date.timezone =
date.timezone=Asia/Beijing

[変更後]

[Date]
; Defines the default timezone used by the date functions
; http://php.net/date.timezone
;date.timezone =
;date.timezone=Asia/Beijing
date.timezone=Asia/Tokyo

いったんRockMongoを終了します。
C:\xampp\htdocs\rockmongo\rockstop.batをダブルクリックしてください。
すぐにもう一度起動します。
C:\xampp\htdocs\rockmongo\rockstart.batをダブルクリックしてください。

これでWarningはでなくなりました。

まとめ

RockMongoはすごく便利です。
今回は記載しておりませんが、
スクリプトからデータ登録する事もできます。
これで2バイト文字を扱うことができるようになりました。
次回はRockMongoを利用して色々して行こうと思います。

参考

過去分はこちら

Gitにおけるトピックブランチの使い方

投稿者: kadoppe () | コメント (0)

Example of using the combined Git and Hg status in my bash prompt
Creative Commons License photo credit: ben_onthemove

こんにちは!kadoppeです。

前回に引き続き今回もGitネタについて書いてみようと思います。今回は「トピックブランチ」についてです。

トピックブランチってなに?

トピックブランチとは、何か特定の機能や、それに関する作業を行うための専用のブランチです。

機能追加やバグ修正の必要が出てきた場合、その都度専用のトピックブランチをmasterブランチから作成します。

トピックブランチには、そのブランチが扱う作業の目的とは関係の無いコミットを含めてはいけません。必ずそのブランチが扱う作業に関するコミットのみを含めるようにします。

機能追加やバグ修正が完了したら、トピックブランチをmasterブランチへmergeします。その後、masterブランチをpushすることで、トピックブランチに対して行った修正が公開されます。

どういう単位でトピックブランチをつくるの?

いくつか考え方があるみたいですが、僕はRedmineなどのバグ管理システムにおけるチケットの単位でトピックブランチを作成します。

「1チケット = 1トピックブランチ」です。

僕はブランチにチケットの番号を名前として付けて管理しています。こんな感じ。

こうすることで、あるトピックブランチが扱う作業の範囲がはっきりするので、コミット先のブランチを迷うことなく、開発をスムーズにすすめやすくなるかと思います。

トピックブランチを使うと何がうれしいの?

トピックブランチを使うメリットでパッと思いつくものを2点紹介します。

複数の作業を同時並行で進めやすい

複数の作業を同時並行で進めたい時に、それぞれの作業ごとにトピックブランチを作成しておくと、便利です。

例えば、上司からの指示で突然ある作業の優先度が急上昇した場合でも、ブランチをささっと切り替えるだけですぐにその作業にとりかかることができます。

もし、全てのmasterブランチ上で作業していたら、いろんな作業のコミットがごっちゃごっちゃになってしまいますし、修正中のソースコードの退避も行う必要があったりして、こうは簡単にいかないですよね。

コミットログの書き換え・整理が楽になる

作業中、どんどん修正をコミットしていくわけですが、機能追加やバグ修正が完了し、一連の修正を公開する直前でコミットログを眺めてみると次のように思うことがあります。

  • 「もっとこういう順番で修正・コミットすればよかったな」
  • 「このコミットはいらないな」
  • 「このコミットとこのコミットは一つにまとめればよかったな」

トピックブランチで作業を進めていれば、コミットの順番を入れ替えたり、複数のコミットを一つにまとめてからmasterブランチにマージすることができますし(git rebase -i)、特定のコミットのみをトピックブランチから選択してmasterブランチにマージする、なんてこともできます(git cherry-pick)。

もちろん、masterブランチだけでもコミットログの書き換えを行うことができますが、複数の作業を同時並行で進めていた時の混乱や、誤って整理する前のコミットを公開リポジトリにpushしてしまうリスクを考えると、トピックブランチを使ったほうがよさそうですね。

まとめ

以上、簡単ではありますが、Gitにおけるトピックブランチの使い方についてまとめてみました。細かいコマンドなどについては参考書を調べたりGoogle先生に訪ねてみてくださいね。

ブランチを作成するコスト、切り替えるコスト、マージするコストが低いGitだからこそのワークフローですよね。他の分散型VCSではどうなんだろう、と少し気になりました。

長くなったので今回はこんな感じで。
それではー!