Firefox에서는 MP3음원을 지원하지 않고, Safari 브라우저에서는 OGG형식의 음원을 지원하지 않습니다. 또, Chrome은 WAV형식의 음원을, Opera 브라우저는 OGG와 MP3형식의 음원을 지원하지 않는군요. 뭔가 통일되는 구석이 없습니다…

아래표는 브라우저 버젼별로 AUDIO태그에 지원되는 음원 형식입니다. 추후 변동사항이 있으면 업데이트 하도록 하겠습니다.

아래 소스는 오디오 플레이 서비스 時, 오디오 TAG를 먼저 사용하고 AUDIO태그를 지원하지 않을 경우 OBJECT나 EMBED 태그를 사용하여 플레이 서비스를 하는 방법입니다.

<audio controls autobuffer>
	 <!--// s: OGG -->
	 <span class="strong">
	 	<strong><source src="1234.ogg" /></strong>
	 </span>
	 <!--// e: OGG -->	 
 
	 <!--// s: MP3 -->
	 <span class="strong">
	 	<strong><source src="1234.mp3" /></strong>
	 </span>
	 <!--// e: MP3 -->
 
	 <!--// s: WAV -->
	 <span class="strong">
	 	<strong><source src="1234.wav" /></strong>
	 </span>
	 <!--// e: MP3 -->	 
 
	 <!--// s: EMBEDDED PLAYER -->
	 <span class="strong">
		<strong><EMBED src="1234.wav" autostart="true" loop="false" volume="100" /></strong>
	 </span>
	 <!--// e: EMBEDDED PLAYER -->
</audio>

아래 캡쳐화면은 자바스크립트 Alert을 레이어로 처리한 경우에 플래시에 Alert레이어가 가린 경우입니다.

이런 경우 플래시에 wmode파라미터를 주고 transparent값을 주게 되면 플래시가 레이어를 가리는 현상이 사라지게 됩니다.
플래시의 경우 OBJECT 엘리먼트와 비 IE계열을 위한 EMBED 엘리먼트 두곳에 wmode를 설정 해 주셔야 합니다.

<object classid....>
	<param name="wmode" value="transparent">
	...
	...
	<embed ... wmode="transparent" ... />
</object>

아래는 완성된 플래시 삽입 코드 입니다. 위의 wmode를 아래와 같이 플래시 코드중 원하시는곳에 삽입 해 주시면 됩니다.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
	codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" 
	width="100%" height="200" id="ie_chart" align="middle">
	<param name="wmode" value="transparent">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="movie" value="movie.php" />
	<param name="quality" value="high" />
	<param name="bgcolor" value="#FFFFFF" />
	<embed src="/open-flash-chart.swf?data=movie.php" quality="high" bgcolor="#FFFFFF" width="100%" 
		height="200" name="chart" align="middle" allowScriptAccess="sameDomain" 
		type="application/x-shockwave-flash" wmode="transparent"
		pluginspage="http://www.macromedia.com/go/getflashplayer" id="chart" />
</object>

이렇게 하면 위 캡쳐화면에서 레이어가 플래시에 가리던 현상이 아래 캡쳐화면처럼 레이어가 플래시 위에서도 이쁘게 잘 보이는 것을 확인하실 수 있습니다.

스페셜 한정판으로 2CD+2DVD 초기판도 발매되었는데요… 소장하고 싶습니다 ㅠ.ㅠ 일본사람들은 한정판이란 단어를 무척 좋아하는데… 저도 좋아하게 되어버렸습니다. 한정판이라면 역시 소장가치가~~~ 쿨럭

앨범 정보는 오리콘 사이트에 접속하시면 확인 하실 수 있습니다.
http://www.oricon.co.jp/music/release/d/847974/1/

앨범은 지마켓에서 13,200원에 판매 중입니다. 구매를 원하시는 분은 왼쪽 구매하기 버튼을 클릭하세욤.
(링크를 통해 구매하시면 블로그 운영에 도움이 된답니다 ^^)

그럼 愛すべき未来へ를 감상해 볼까욤!!!

앨범명 “Whistle”로 2010년 1월 27일 발매되었습니다. 아래는 앨범 수록곡 리스트 입니다.

1. レール
2. ビタミンＩ
3. 告白
4. 君のいない世界
5. すてがらＨＯＬＬＹ
6. 哀しみの向こう側
7. うけんビーチ
8. 少年
9. Ｓｕｐｅｒ　Ｐｏｓｉｔｉｖｅ
10. Ａｎｓｗｅｒ
11. 帰り道
12. 時をこえ

그럼 レール 뮤직비디오 즐감하세요..

가끔 GEE 뮤비가 첨 시작할때 12시가 되면 마네킹들이 살아 움직이면서 노래를 부르는데… 동물원이 살아있다가 연상되는 컨셉입니다 ^^. 자 GEE를 들으면서 열심히 하루를 시작하도록 하죠 ^^

블루아이블로그의 첫 이벤트인 트랙백 이벤트는 최신 영화 정보 블로그를 운영중이신 페니웨이님이 당첨되셨습니다. 축하드립니다. 변변치 못하지만 USB 8G가를 어제 배송요청 하였습니다. 아마 빠르면 오늘쯤 받아보시지 않을까 합니다 ^^

아래는 머신 페니웨이님의 블로그 캡춰 하면과 블로그 주소입니다. 영화정보를 원하시면 즐겨찾기가 필요할만한 블로그입니다 ^^

블로그 주소 : http://pennyway.net

TOG>는 아래와 같은 특징을 베이스로 개발된 서비스 입니다.

1. 보이스 포스팅이 가능한 마이크로 블로그
2. 네이버나 다음 카페를 무색하게 할 진화된 실시간 카페
3. 온라인 친구들과 직접적으로 연결되는 VoIP 및 SMS 및 MO 서비스

이런 블로그가 없었다는게 정답이지 않을까 하는… 고생도 많이 한 서비스입니다.

아직 TOG CBT에 참여의사를 밝히지 않으셔서 이용이 불가능한 네티즌 여러분들중 참가를 원하시는 분들은 제게 메일 주세욤~~ (제 메일 주소는 bluei at blueiblog.com 입니다.)

그럼, 앞으로도 TOG에 많은 관심과 사랑 부탁드리겠습니다. TOG의 주소는 http://tog.kr입니다 ^^

아래 링크는 그동안 제가 토그에 관해 쓴 포스팅 리스트 입니다.

http://www.blueiblog.com/ko/archives/1379 / 제가 매체 노출되었습니다 ^^ [도전! 콘텐츠 强小기업] 세중게임즈
http://www.blueiblog.com/ko/archives/1353 / 저희 회사에서 준비중인 SNS 2.0 “TOG”

원곡과 또다른 느낌의 기타 연주… 정말 훌륭하군요… 호텔 캘리포니아의 박력과 편한함을 안겨주는 기타 소리… 앞으로도 많은 활약 부탁드립니다.

정성하군의 다른 연주를 듣고 싶으시면 정성하군의 홈페이지 http://www.sunghajung.com/로 접속 해 보세요 ^^

그럼 앞의 두 강좌를 기본으로 PHP를 이용한 bit.ly API 코딩하기 실전으로 들어가도록 하겠습니다. 이 API 코딩법만 익히게 되면 다른 bit.ly API를 이용하는것도 어렵지 않으니 집중하고 내용을 이해 하도록 노력해 주세요.

P.S. 그리고 댓글좀 써주세요 ㅡㅡ; 댓글 없는 포스팅을 보게되면 강좌를 연재할 의욕이 꺽인답니다. ^^

PHP로 Shorten메소드 호출

이제 어떠한 방식으로 데이터를 주고받는지 알게 되었다면 PHP를 이용하여 bit.ly의 API를 이용하여 짧은 URL을 얻어오는 방법을 설명 하겠습니다. 이번 강의에서 사용될 PHP의 함수는 아래와 같습니다.

1. file_get_contents : 로컬내 파일 또는 원격지의 파일 내용을 문자열로 가져오는 함수
2. json_decode : JSON으로 만들어진 문자열을 JSON 객체로 변환 해주는 함수

위 두 함수는 모두 PHP 코어의 일부분으로 따로 설치 하실 필요는 없습니다. 다만 PHP 버젼에 따라 작동되지 않을 수 있습니다.

그럼 간단하게 긴URL을 bit.ly에 던져서 짧은URL을 얻어 출력하는 내용으로 코딩 해보도록 하겠습니다.

$data = file_get_contents("http://api.bit.ly/shorten?version=2.0.1&longUrl=http://www.blueiblog.com/ko/archives/1976&login=xxxx&apiKey=xxxxxxxxxxxx");
$data = json_decode($data);
foreach($data->results as $row) {
        $surl = $row->shortCNAMEUrl;
}
echo $surl;

그럼 이번에는 함수를 만들어서 언제든 빼 쓸 수 있도록 해보겠습니다.

/**
 * License by Blueⓘ
 *
 * @param String longURL 짧게 변경할 긴 문자열의 URL
 * @return String 짧게 변환된 URL
 */
function getShortURL($longURL) {
        $data = file_get_contents("http://api.bit.ly/shorten?version=2.0.1&longUrl=".$longURL."&login=xxxx&apiKey=xxxxxxxxxxxx");
        $data = json_decode($data);
        foreach($data->results as $row) {
                $surl = $row->shortCNAMEUrl;
        }
        return $surl;
}
 
echo getShortURL("http://test.com");
// OUTPUT : http://bit.ly/9ICmwA

그 업그레이드 판으로 그래프로 6개월간의 카드 사용내역을 나, 와이프, 그리고 합계를 한셋으로 하여 그래프로 보여주는 기능을 완성시켰습니다. 역시 사람은 그래프로 보여야 보기 더 쉽군요 ^^. 프로그래머라서 가능한게 많아서 참 좋습니다 ^^

아래는 인증샷입니다 ^^

이번에는 앞서 설명했던 내용을 토대로 shorten메소드에 대해서 알아보도록 하겠습니다. shorten메소드는 bit.ly의 API중 우리가 가장 많이 사용하게 될 메소드입니다. shorten메소드는 http://www.blueiblog.com/ko/archives/1976 와 같은 긴 주소를 http://bit.ly/b4ihSW 와 같이 짧게 줄여주는 역활을 합니다.

그럼 shorten메소드의 사용법에 대해서 알아보도록 하겠습니다.

Shorten Method 요청 및 결과

Shorten메소드는 아래와 같은 파라미터를 입력해야 사용 할 수 있습니다. 입력해야 할 파라미터와 그 설명은 아래와 같습니다.

그럼 위 메소드를 어떻게 사용하는지 알아보도록 하겠습니다. 우선 http://www.blueiblog.com/ko/archives/1976 주소를 짧게 변경하고 싶다면 아래와 같이 shorten메소드를 호출 해 보겠습니다. 브라우저의 주소 입력 창에 아래와 같이 입력해보세요. (아래 이미지를 클릭하시면 원본 사이즈로 보실 수 있습니다.)

http://api.bit.ly/shorten?version=2.0.1&longUrl=http://www.blueiblog.com/ko/archives/1976&login=xxxx&apiKey=xxxxxxxxxxxx

이와 같이 브라우져에 데이터를 요청하게 되면 다음과 같은 결과를 얻을 수 있습니다.

{
    "errorCode": 0, 
    "errorMessage": "", 
    "results": {
        "http://www.blueiblog.com/ko/archives/1976": {
            "hash": "b4ihSW", 
            "shortCNAMEUrl": "http://bit.ly/9pTARb", 
            "shortKeywordUrl": "", 
            "shortUrl": "http://bit.ly/9pTARb", 
            "userHash": "9pTARb"
        }
    }, 
    "statusCode": "OK"
}

위 결과 처럼 Shorten메소드의 호출 결과는 JSON데이터로 반환 됩니다. format파라미터를 xml로 입력하면 xml로 결과를 반환 받을 수 있습니다. 아래는 xml로 반환 받은 경우의 결과 데이터 입니다.

<bitly>
	<errorCode>0</errorCode>
	<errorMessage/>
	<results>
		<nodeKeyVal>
			<shortKeywordUrl/>
			<hash>b4ihSW</hash>
			<userHash>9pTARb</userHash>
			<nodeKey>http://www.blueiblog.com/ko/archives/1976</nodeKey>
			<shortUrl>http://bit.ly/9pTARb</shortUrl>
			<shortCNAMEUrl>http://bit.ly/9pTARb</shortCNAMEUrl>
		</nodeKeyVal>
	</results>
	<statusCode>OK</statusCode>
</bitly>

위 결과 처럼 xml로도 데이터를 반환 받을 수 있습니다. 하지만 우리는 기본포맷인 json으로 받은 데이터를 이용하여 프로그램을 작성 할 것입니다.

마이크로 블로깅으로 인해 숏URL 서비스가 인기를 얻는 세상이 왔습니다. 옛날 같으면 쓰지도 않던 기능인데 말이죠 ^^

저 역시 블로그 글을 출판하게 되면 자동으로 트위터에 포스트의 제목과 URL을 추가하여 출판하고 있습니다. 하지만 역시 블로그의 주소는 길기에… 어쩔수 없이 Short URL기능을 이용해야 합니다. 그래서 bit.ly의 Short URL API에 대해 알아 보았습니다.

그럼 PHP를 이용하여 bit.ly의 Short URL을 가져오는 방법에 대해서 알아보도록 하겠습니다.

bit.ly의 API Key 얻기

여느 API와 마찬가지로 API를 이용하기 위해서는 API Key를 얻어야 합니다. 우선 http://bit.ly의 홈페이지로 이동 한 후 회원가입을 합니다. 회원 가입후 어카운트 정보를 확인하면 아래와 같이 API Key가 보여집니다. (제 API Key 보안을 위해 ^^; 해당 부분은 모자이크 처리 했습니다.)

물론 이렇게 얻은 API Key가 유출되었다면 우측의 Reset키를 누르시면 새로운 API Key를 발급 받으실수 있습니다.

bit.ly API 목록

bit.ly는 다른 OPEN API에 비해 API의 종류가 매우 간단합니다. 우선 API 리스트는 아래와 같습니다.

1. shorten : 우리가 제일 필요로 하는 API로 URL을 bit.ly의 짧은 URL로 바꾸어주는 API입니다.
2. expand : bit.ly/xxxxx 형식으로 되어 있는 Short URL을 원래의 URL로 바꾸어주는 API입니다.
3. info : bit.ly의 Short URL에 해당하는 정보를 보여주는 API입니다.
4. stats : bit.ly Short URL의 트래픽 및 레퍼러 정보를 보여주는 API입니다.
5. errors : bit.ly에서 사용되는 ERROR CODE를 보여주는 API입니다.

P.S. bit.ly의 API 문서 페이지는 http://code.google.com/p/bitly-api/wiki/ApiDocumentation 입니다.

1.4버젼이 공식 릴리즈 되면서 jQuery API 페이지의 변화가 보이는군요…(jQuery 1.4가 릴리즈 되었는데 홈페이지의 변화 부터 봅니다 ㅡㅡ;) 그동안 좀 보기 어려웠다고 할만한 API페이지가 조금 더 보기 쉽게 변화 되었습니다. 워낙 다른 API에 비해 메뉴얼이 어려워서 진입장벽이 있다고 생각하는 jQuery이기때문에 API 페이지에 신경쓴건 좋았다고 평하고 싶습니다.

jQuery 1.4 Release Note

우선 jQuery 1.4에서 변화된 내용을 살펴보면…

1. 좀 더 쉬운 setter 함수
2. .css()와 .attr()의 성능 향상
3. 빠른 element 생성
4. 기타 등등

입니다… 뭐 워낙 많아서… 번역하기 힘듭니다 ^^ http://jquery14.com/day-01/jquery-14 에 접속하시면 직접 보실 수 있습니다. 게을러서 죄송합니다 ㅠ.ㅠ

뭐 전체적으로 성능이 무척 향상 되었고 괜찮은 기능좀 넣었다 라고 보시면 될거 같습니다.

세상에서 가장 소중한 우리 아이들. 출산전에는 우리 아이가 훌륭한 사람이 되길 소망해보지만 막상 출산에 임박하면서 부터는 같이 숨쉴수 있는 것만으로도 너무 행복합니다. 여러분도 그렇죠? ^^

그래서 우리 아이의 건강을 지켜주는 소아 예방접종 일정표를 구해 적어봅니다. 다들 아시는 내용이지만 소아 예방접종은 국가가 지원하는 필수 예방접종과 기타 예방접종으로 나누어 지며 필수 예방접종의 경우 가까운 보건소에서 무료로 접종 가능합니다.

아래 표는 소아 예방접종 일정표 입니다. http://niptmp.cdc.go.kr/nip/schedule/ptninjschedule.asp에 접속하시면 더욱 자세한 정보를 얻으실수 있습니다.

드뎌 100명을 돌파 했습니다. 이제 다음 목표는 1000명을 목표로 ^^

저를 팔로잉 하고 싶으신분들은 ^^ http://twitter.com/dadyzeus 로 접속하셔서 팔로잉 해주세요 ^^

저역시 마찬가지랍니다 ^^ 솔직히 예전에 포스팅을 보면 자동으로 다음뷰 추천 카운트 되게 했었는데… 결국 다음이 알아차렸나 봅니다 ㅠ.ㅠ 이제는 자동으로 추천이 증가 하지 않더군요… 아래는 인증샷..

결국 포스팅에 추천 5가 넘기 힘든 저로써는 천군만마를 놓쳤죠… ^^ 뭐 그래서 별의 별 방법을 다 써보았습니다. 구걸도 해보고 혼자 여러 컴퓨터로 접속해 추천도 해보고… 하지만 제 글은 인기가 없나 봅니다.

뭐 전문적인 블로그도 아니고 이것저것 잡학다식한 블로그라 꾸준히 찾아오는 사람도 없고… 별수 없죠..

그래서 본격적인 구걸을 해보았죠.. 추천 부분의 문구를 바꾸었습니다. 아래처럼…

“도움이 되지 않더라도 추천을 요망한다는 문구인데…” 추천이 별로 없는것을 봐서는… 꽤 도움들이 되시나 봅니다 ^^

이를 막는 CSS는 다음과 같습니다.

textarea {
    resize: none;
}

위 CSS는 전체 textarea의 리사이징을 막는 CSS이며 foo라는 이름을 가진 TEXTAREA만 막기 위해선 아래와 같이 사용 하시면 됩니다.

textarea[name=foo] {
    resize: none;
}

크롬과 사파리에서의 문제점은 위와 같이 막을 수 있으나 CSS 2 Validation을 체크하게 되면 아래와 같은 에러가 발생 합니다.

Property resize doesn’t exist in CSS level 2.1 but exists in [css3] : none

즉 현재 많이 사용되고 있는 CSS 2에서는 지원되지 않는 프로퍼티이며 CSS 3부터는 지원한다는 이야기 입니다. 현재 위 프로퍼티는 Webkit 엔진을 가진 브라우저에서만 사용 가능 하나 Validation 체크 결과가 중요하지 않다면 위 예제처럼 사용하셔도 무방하겠군요.

http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/에서 “iPad GUI PSD”란 타이틀로 공개 되었습니다.

아이패드(iPad) 템플릿 다운로드

삼보 노트북은 왠지 못미덥다는 생각을 가지고 있지만 이번 타블렛 PC는 좀 관심이 갑니다. 가격만 맞으면 사고 싶은 욕망이~~~

OS는 윈도우 모바일 혹은 안드로이드등이 탑재될 예정이며 한컴 오피스가 기본으로 서비스 될 예정이랍니다.

아래 그림처럼 블로그를 출판하면 자동적으로 트위터에 포스팅 되죠 ^^. 블로그 펌링크가 길기에.. bit.ly를 통해 숏링크를 받아서 처리합니다. 혹 숏링크에 오류가 생길경우는 그대로 블로그 펌 링크를 올리기도 합니다.

혹 워드프레스 쓰시는분중 필요한분은 말씀하세요 ^^