2011年3月アーカイブ

2011年3月30日

アメーバピグのアイテムを描いてみた。


最近java習得の必要性を感じているため、そのことばかり書いてきましたが、今日は違うことを書きたいと思います。

ふとしたことをきっかけに、昨年の12月くらいから、アメーバピグを始めました。
昔、セカンドライフブームの時期にとりあえずやってみた「仮想空間」はひどくつまらなかったので、これまであまりアメーバピグには魅力を感じていませんでした。

しかし、いざアメーバピグをやってみるとUIもしっかりしているし、
ちゃんと楽しめる仮想空間サービスであることに驚きました。

特に「ひし形」の中に展開される街並みやアイテムは、とってもかわいい!

ということで、僕も自分の部屋の中にあるものを実際にイラレで描いてみました。

マット拡大-01.jpg
ずばり、「サッカーのスタジアムの模様柄の玄関マット」です。。。
これを、実際に部屋に配置してみるとこうなります。

アメーバマット配置-02.jpg
※実際のアメーバピグの画像の上に、自作のアイテムを合成しました。

実は、このマットは昨年誕生日に友人達からもらったものです。
大切なものなので、いつか本当にピグ上に配置できたらいいな。。。

2011年3月29日

インクリメントとデクリメント


javaなどで、++とか、--を演算子として使いますが、いまいち使いこなせていないのでメモします。
a++
は、以下と同義です。
a = a + 1
「++」のことをインクリメント演算子と言います。

もう予想はつくと思いますが、
a--
は、以下と同義です。
a = a - 1
「--」のことをデクリメント演算子と言います。

しかし、僕自身まったく無知であったのですが、
「x + 1」、「x++」、「++x」ではまったく意味が異なります。
「x++」のように、++が後ろにつくものを『前置演算』
「++x」のように、++が前につくものを『後置演算』
といい、以下に例を示したのですが、違う挙動を示します。
//パターン1
var x = 10;
var y = x + 1;
document.writeln(x);//結果=10
document.writeln(y);//結果=11

//パターン2
var x = 10;
var y = x++;
document.writeln(x);//結果=11
document.writeln(y);//結果=10

//パターン3
var x = 10;
var y = ++x;
document.writeln(x);//結果=11
document.writeln(y);//結果=11
体系的にみっちりと学習することの大切さを学びました。。。

2011年3月25日

javaでコードを書く時に気をつけたい6つのこと。


かなり前の話になりますが、下記の本を読みました。
初心者でも、たいへんわかりやすく、かつ力のつきやすい良い本だと思います。
この本の冒頭では、javaでコードを書く際に気をつけることとして、以下の6つの点を指摘されていました。
忘れないように、メモしたいと思います。

ーjavaでコードを書く際に気をつけることー

  1. 名前からデータの中身が煩雑しやすい(○:name,title △:a1,b1)
  2. 長過ぎず、短すぎず(○:keyword △:kw,keyword_for_site_search)
  3. 見た目が紛らわしくない(△:passwd,password,usr,user)
  4. 1文字目のアンダースコアは、特別な意味を持つ場合があるので使わない(○:name △:_name)
  5. あらかじめ決められた記法で統一する(△:lastName,first_name)
  6. 基本的には英単語とする(○:name,weather △:namae,tenki)
分かっていても、ついつい上記の点を守れなくて苦労することが多いですが、
これを機に守っていきたいです。。。

Javaの統合開発環境として、MacにAptana Studioを導入しました。


これまで、javaを書くときもDreamweaverを使用してきましたが、Eclipseベースの開発環境にしたく、Aptana Studioを導入しました。

画像:Aptana Studioダウンロードページ
20110325-1.png
上記サイトよりダウンロードしたものは、英語Ver.なので、こちらよりPleiadesをダウンロードして、日本語化を行います。
Pleiadesをダウンロードして解凍すると、[features][plugins]フォルダができるので、この中身をAptana Studioのアプリケーションフォルダの中に既にある[features][plugins]に追加します。

さらに、Macでは非常にわかりにくいのですが、
/Applications/Aptana Stduio/Aptana Studio.app/Contents/MacOSの中にある、
AptanaStudio.iniファイルをテキストエディタなどで開き、末尾に以下のコードを記載します。
-javaagent:/Applications/Aptana Studio 2.0/plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar
これで日本語化に必要な作業は終了です。
画像:日本語化した後のAptana Studio起動画面
20110325-2.png
無事に日本語化できました。環境導入って意外に時間がかかるので、スムーズにできてホッとしました。

2011年3月23日

jQueryを使って、クリックすると伸びるように出現するパーツをつくる。


昨年制作したサイトの中に、フリーペーパーミュージアムというサイトがあります。
「まるで冊子を手にとって読んでいるような、"触感"を感じてもらう」
というコンセプトの下、左部のメニューには、クリックするとメニューが伸びて出てくる仕掛けを作りました。
今日は、そんなパーツを作る仕組みをメモします。

以下のコードを.jsデータに書き込みます。
$(document).ready(function(){
	$(".hidden_box").hide();
	$("h1.button").click(function(){
		$(this).toggleClass("active").next().slideToggle("fast");
	});

});
赤色に装飾されている部分は、htmlファイルのクラス属性と対応しています。
その上で、この.jsファイルに対応するhtmlファイルの例を以下に記載します。
<!DOCTYPE html>
<html lang="ja"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>2010_0320</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/上のコードを記載したもの.js"></script>
</head>
<body>
<h1 class="button"><a>Where are you?(Please click here!)</a></h2>
    <div class="hidden_box">
        <div class="block">
        	<p>In Starbucks!</p>
        </div><!--block-->
    </div><!--hidden_box-->
</body>
</html>

ここに記したものを実際にこちらにアップしました。
この仕組みは、IEなどでも上手く動いているので、とても使い勝手がよいですよ★

2011年3月22日

javaでブラウザサイズを取得する。


閲覧者のブラウザのサイズを取得するjavaを調べたのでメモします。

http://osima.jp/blog/js-getBrowserWidth/より引用
//▼ブラウザの横幅を取得
function getBrowserWidth() {
        if ( window.innerWidth ) {
                return window.innerWidth;
        }
        else if ( document.documentElement && document.documentElement.clientWidth != 0 ) {
                return document.documentElement.clientWidth;
        }
        else if ( document.body ) {
                return document.body.clientWidth;
        }
        return 0;
}
//▼ブラウザの縦幅を取得
function getBrowserHeight() {
        if ( window.innerHeight ) {
                return window.innerHeight;
        }
        else if ( document.documentElement && document.documentElement.clientHeight != 0 ) {
                return document.documentElement.clientHeight;
        }
        else if ( document.body ) {
                return document.body.clientHeight;
        }
        return 0;
}

2011年3月21日

java、jQueryでクロスブラウザ対応。


先日クロスブラウザ対応で、javaでUA情報を獲得していたサイトを見つけたのでメモします。
//変数uaに、UA情報を全て小文字にした状態で入れる。
var ua = navigator.userAgent.toLowerCase();
さらに、閲覧するブラウザに合わせてクラス属性を付与するやり方も見つけた。
//取得したappVersionの文字列の中に「Win」という文字列があったらhtmlにwinというクラス属性を付与する。
if(navigator.appVersion.indexOf("Win")){
     $("html").addclass("win"); 
}
java、jQueryを駆使すれば、ユーザーの閲覧環境に事細かに合わせたサイトがつくれるようです。
iPadやアンドロイド、PCではブラウザの表示画面サイズなどに対応するサイトを作れるようになりたいですね。。。
OpenID対応しています OpenIDについて

このアーカイブについて

このページには、2011年3月に書かれたブログ記事が新しい順に公開されています。

次のアーカイブは2011年4月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。