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>

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

그럼 앞의 두 강좌를 기본으로 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 에 접속하시면 직접 보실 수 있습니다. 게을러서 죄송합니다 ㅠ.ㅠ

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

이를 막는 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 체크 결과가 중요하지 않다면 위 예제처럼 사용하셔도 무방하겠군요.

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

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

새로 만들어진 검색창…. 예쁜가요??? ^^ IE7에서만 조금 어긋나는 느낌이 있는데.. IE6, IE8, FF등의 브라우져에서는 깔끔하게 보이는군요. 이넘의 크로스 브라우징 정말 때려죽이고 싶습니다. :’(

아래는 인증 샷입니다.

학교 졸업하자마자 머리에서 지워버렸던 삼각함수를 다시 공부해야 할 계기가 생겨서.. 찾아보습니다. 평소에 생활에 어떻게 써먹는지를 배웠더라면 아직도 기억하고 있었을텐데… 그렇지 않았기에 처음부터 새로 공부해야 하는 어려움.

삼각함수를 모두 다 알게 된건 아니지만 내가 필요로 하는 부분에 대해서 정리하고 코딩을 완료 했습니다. 아래 노트는 인증샷 ^^
이름하여 평소에 공부하자~~~

트랙백 클릭시 자동으로 클립보드 복사해주는 스크립트 만들려다가 보니 Firefox에서는 제대로 작동을 하지 않아 만들어 봤습니다.

Flash의 Clipboard를 이용하여 클립보드에 저장하는 방법입니다. IE+Firefox둘다 잘 작동됩니다. 오페라에서는 작동 않되는거 같군요..

swf파일은 다음 링크에서 다운로드 받으시면 됩니다.
http://www.jeffothy.com/weblog/uploads/clipboard.php

[copy_clipboard.js]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function copyClipboard(inElement)
{
    if (inElement.createTextRange)
    {
        var range = inElement.createTextRange();
        if (range && BodyLoaded==1)
            range.execCommand('Copy');
    }
    else
    {
        var flashcopier = 'flashcopier';
        if(!document.getElementById(flashcopier))
        {
            var divholder = document.createElement('div');
            divholder.id = flashcopier;
            document.body.appendChild(divholder);                                                                                                                                   
        }
        document.getElementById(flashcopier).innerHTML = '';
        var divinfo = '<embed src="_clipboard.swf" FlashVars="clipboard='+encodeURIComponent(inElement.innerHTML)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
        document.getElementById(flashcopier).innerHTML = divinfo;
    }
    alert('클립보드에 복사되었습니다.');
}

[example.html]

1
2
3
4
5
6
7
8
9

<html>
<head>
    <title>Flash를 이용한 클립보드 복사 예제</title>
</head>
<body>
    <script type='text/javascript' src='copy_clipboard.js'></script>
    <span id="myurl" onclick="copyClipboard(document.getElementById('myurl'));" style="cursor: pointer;">http://www.blueiblog.com</span> - URL을 클릭하시면 클립보드에 복사됩니다.
</body>
</html>