끌어당겨셔 새로고침 하기 javascript 버젼 pullToRefresh

끌어당겨셔 새로고침 하기 javascript 버젼

모바일웹페이지에서 상단을 끌어당겨 새로고침을 하기
- 사용 모듈 : https://github.com/BoxFactura/pulltorefresh.js
- 사용 방법

< script src="https://github.com/BoxFactura/pulltorefresh.js"></ script>
< script>
    // initialize
    PullToRefresh.init({
      mainElement: '.global-body',
  instructionsPullToRefresh:'새로고침 하려면 당기세요',
  instructionsReleaseToRefresh:'새로고침 하려면 놓으세요',
  instructionsRefreshing :'새로고침 하는중...',
  shouldPullToRefresh:function(){return $('.global-body').scrollTop() === 0},
      onRefresh: function() { 
        // on refresh code goes here
        //alert('refresh') 
if($('.global-body').scrollTop() === 0){
location.reload(true);
}
      }
    });
</ script>

위에 간단하게 적용하는 스크립트이다.
내용은,
* mainElement : 새로고침할때 어떤 요소(element)앞에서 당겨지는지 해당 엘리먼트를 입력.
ㄴ적용해 보면 해당 엘리먼트(ID, class, element)앞에 새로고침하는 표시가 나오게 된다
* pullToRefresh가 기본으로 적용 되었을때는 영문으로 표시 되니, 텍스트로 변경할려고 하면 아래 정보를 변경한다
- instructionsPullToRefresh:'새로고침 하려면 당기세요',
- instructionsReleaseToRefresh:'새로고침 하려면 놓으세요',
- instructionsRefreshing :'새로고침 하는중...',
* 끌어당겨새로침 기능을 적용하다 보면, 스크롤을 내린 후 위로 올리는 동작중에 새로고침이 동작되는 경우가 있는데..
이때는 정확한 조건에 맞는지 확인을 해야 한다. 이 부분을 체크하는게 shouldPullToRefresh 부분이다.
- shouldPullToRefresh: 특정 엘리먼트의 scrollTop을 비교해서 처리하거나, 어떤 조건을 받아서 처리해 주면 된다.
ㄴ위 소스에서 처럼 하거나, mainElement가 body 가 아닌 경우
shouldPullToRefresh:function(){return !this.mainElement.scrollTop}

* onRefresh : 새로고침 처리 수행에 대한 결과 처리(action) 하는 부분. 
ㄴ일반적으로 페이지 새로고침. 그외 특별한 동작을 만들 수 있겠다.

DOMDocument()를 이용해 입력된 string에서 html의 유효성을 체크해 보자

libxml_use_internal_errors(user_errors)
- libxml의 표준 에러 정보를 비활성화 하고, 사용자 정의 오류를 할 수 있도록 해줌.
- user_errors : option 항목으로 사용자 오류 처리가 가능할지 여부를 지정. 기본값은 false

libxml_clear_errors()
- libxml 오류 버퍼를 지움.

libxml_get_errors()
- libxml 오류 버퍼가 있을때 오류 정보를 배열로 반환. 없을때는 빈 배열을 반환함.


위 정보와 DOMDocument()를 이용해 입력된 string에서 html의 유효성을 체크해 보자

$string = '<div>안녕하세요</div><span>네. 안녕하세요';
$doc = new DOMDocument();
libxml_use_internal_errors(true);
libxml_clear_errors();
$doc_re = $doc->loadHTML($string);

if(count(libxml_get_errors())>0)  echo '에러 발생';

에러 존재 여부에 따라서 이후 처리를 해주면 되겠다.

데이타를 엑셀 시트로 작성시 유용한 스타일

데이타를 엑셀(excel) 시트로 작성시 유용한 스타일

 

1. 숫자를 일반문자 형태로 처리

style='mso-number-format:"\@";'

 

2. 숫자로 3자리마다(천단위) 콤마 찍기

style='mso-number-format:"\#\,\#\#0_;'

 

3. 한 셀(sale cell)에 줄바꿈(newline) 처리가 필요할때

style='mso-data-placement:same-cell;'

 

 

 

php soap 통신 개발시 'SoapClient' not found 에러 대처

Soap 통신시 Class 'SoapClient' not found 에러

SOAP(Simple Object Access Protocol)는 인터넷상에서 xml기반으로 메세지를 상호 교환할때 사용한다.

soap 통신 프로그램 개발시 "SoapClient" not found에러가 발생하게 되면
이는 서버에 soap 라이브러리가 활성화 되어 있지 않은것이다.

우선,
현재 서버에서 soap 관련 라이브러리가 설치되어 있나 확인을 한다.
간단히, phpinfo()로 확인을 해보면,
Soap Client enabled
Soap Server enabled
되어 있어야 한다.





만약, 없다면..
서버에서 soap 설치여부를 다시 확인
[root@~]rpm -qa | grep php-soap 엔터
 결과값이 없으면 설치해야 한다.

설치
[root@~]yum install php-soap 엔터
 파일 다운로드 받으면서 중간에 "Is this ok [y/n]" 나오면 Y 엔터
 complet! 메세지 출력이 되면서 설치 완료된다.

다시 체크
[root@~]rpm -qa | grep php-soap
php-soap-5.3.3-46.el6_6.x86_64

설치된것을 확인할 수 있다.

이제 서버를 재시작해주면 soap를 사용할 수 있다.
[root@~]service httpd restart

jquery bPopup 플러그인 팝업 위치 재지정하기

jquery bPopup modal popup 플러그인 사용시

팝업창 위치 새로 고침하기


bPopup을 이용해 기본 팝업 설정을 해주고,

$('selector').bPopup({


});


기본은 한번 실행후 다시 클릭을 하면 이전에 설정된 위치에서 시작된다.

보통은 같은 내용을 이용해 문제가 없겠지만,

팝업안의 컨텐츠가 계속 달라져야 한다면,

위치가 초기 위치에 고정되다 보니 컨텐츠를 제대로 볼수 없을때가 있다.


이때,


$('selector').reposition(animationSpeed) 을 이용해 주면 된다.


resposition()은 bPopup 플러그인 version 0.10.0 이상에서 동작한다.




예제)

$('#selector').click(function(){


var bpopup = $('selector').bPopup();

bpopup.reposition(100);


});




HTML5의 placeholder 속성 사용하기

placeholder 속성은 한 단어나 짧은 구로 이루어진 ‘힌트’를 나타냅니다. 이러한 힌트는 사용자가 입력 상자에 데이터를 입력하는데 도움을 줍니다. 보통 아이디나 비밀번호를 입력하는 UI에서 ‘아이디를 입력하세요’나 ‘영어와 숫자로 이루어진 비밀번호를 입력하세요.’와 같은 메시지를 입력 영역의 자리에서 제공하는 경우에 사용됩니다.


다음과 같이 마크업합니다.

<input type="text" name="aaa" placeholder="이름을 입력하세요" />


스타일을 이용해서 placeholder가 세로 중간에 보이게 하려면,

line-height:normal 을 이용하면 된다.

<input type="text" name="aaa" placeholder="이름을 입력하세요"  style="line-height:normal" />


placeholder 속성은 html5에 존재하는 속성으로 Internet Explorer 를 제외한 대부분의 html5를 지원하는 브라우져에서 동작한다.


참고.

http://www.w3schools.com/tags/att_input_placeholder.asp



jquery를 이용해 텍스트 블링크(blink) 만들기

간단히 jquery를 이용해서 블링크 텍스트를 만들어보자.
해보니, 굳이 움직이는 gif로 할필요없겠다. 경우에 따라서는 css를 이용해서 순간순간 블링크 텍스트 색상도맘대로 변경할수도 있고.

<span class='icn_new'>new</span>

//블링크 시작.
var icn_blink = setInterval(function(){
$('span.icn_new').fadeOut('slow').fadeIn('slow');
},2000);

//블링크 중지가 필요할경우,  
$('span.icn_new').mouseover(function(){clearInterval(icn_blink);});

적용되는 브라우져는
ie7.0이상, firefox, crome, opera 에서 이용가능하다. 

pdo로 prodcedure 사용시 잘못된 결과값을 보여줄때.

pdo를 사용해보려고, 서버 셋팅 및 기본 코딩을 잡아 보고 있던중에
스토어드프로시져(내부에 동적쿼리로 작성)를 사용중에 결과값이 잘못가져오는 경우가 발생.
결과값이 컬럼과 value가 제대로 매칭되지 않는 문제가 발생했다.
웹 서버 버젼은 
- php  version 5.1.6
- mysql client API version 5.0.37 
이다.
이 환경에서 동적쿼리가 포함된 프로시져 사용시 결과값이 잘못 가져오는 경우가 생겨서 한참 고생했다. 구글링을 한참 하다 보니, PDO::ATTR_EMULATE_PREPARES 이부분을 프로그램에 적용후 해당 문제가 해결되었다.
정확한 이유는 모르겠으나, 대략적으로 쿼리 파싱을 PDO쪽에서 할건지 mysql서버쪽에서 할건지를 결정하는거 같다. 이부분을 동적쿼리인경우 PDO쪽에서 하도록 해줘서 해결된 문제다.(prepared를 client 또는 server쪽에서 하도록 정하는 부분인거 같은데, 서버쪽에서 하는것이 10%정도 더 효과가 있다고 한다.)
PDO에 대한 버젼에 따라서 이런 문제가 있지 않나 싶다.

프로그램 부분은

$dbh = new PDO('mysql:host=db서버;dbname=데이타베이스', '계정','비밀번호',array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES euckr"));
$dbh->setAttribute(PDO::ATTR_EMULATE_PREPARES, true);

이렇게 해주면된다.
이부분이 없이 PDO사용이 가능하다면 빼주는것이 좋다고 한다. 

이걸 해결해 볼려고, 구글링을 하다가 찾은 여러 포스트중 아래 두개 포스트에서 많은 이해를 할수 있었다.(영문이라, 나름 이해하는라 힘들었음..ㅠㅠ)
http://wezfurlong.org/blog/2006/apr/using-pdo-mysql/
http://isp-control.net/ispcp/ticket/2402
인용 : 

The "ATTR_EMULATE_PREPARES" attribute allows to emulate the prepared queries for RDBMS that don't support this feature. By default, emulation is actives (ATTR_EMULATE_PREPARES == TRUE). That means that the queries will not be prepared by the Mysql Server (Server-Side) but by PDO (Client-Side). The final result is identical, all the parameters are automatically quoted and so, we have not problem with SQL injection in both cases.

Now, what is the subject here ? What the difference with the native and emulated support for prepared queries ?

Some RDBMS don't support prepared queries. That means that the queries will be prepared by PDO (

Client-Side

) and not by the Server (

Server-side

). The final result is the same but for performances reasons, it's better to use native support when it's possible. Indeed, for example, with Mysql, we can take 10 % free.

Th remaining problem with Mysql is that for versions prior 5.1.17 (in reality 5.1.21 for us), the prepared queries can't be cached. So, we have 10 % free but we lost 20 - 35 %...

That for why, the native support should be used when possible (only with Mysql server >= 5.1.21 (for us).

To resume, the parameter ATTR_EMULATE_PREPARES should be set to TRUE for Mysql server version prior 5.1.21 and to FALSE for other versions. By default the ATTR_EMULATE_PREPARESis set to TRUE.

TRUE: Support for prepared queries is emulated. FALSE: Support for prepared queries is not emulated. The native support is used.
 

나중에 서버 php버젼을 업그래이드 하게되면, 다시한번 살펴봐야겠다.


 

pdo_mysql 확장 모듈 올리기

pdo_mysql을 이용하기 위해서 pdo_mysql 확장모듈을 서버에 설치해보자.
(개개의 서버마다 서버 설정 및 모듈 설치 경로가 다를수 있으니, 이부분은 환경에 맞게 확인을 해서 설치를 한다.)

linux 웹서버에 로그인한후,
//pdo확장모듈을 다운받을경로로 이동
#cd /usr/local/src
//pdo확장모듈 최신 다운.
#wget http://pecl.php.net/get/PDO_MYSQL-1.0.2.tgz 
//압축해제.
#tar -xzvf PDO_MYSQL-1.0.2.tgz
//압축해제한 pdo모듈 dir로 이동.
#cd PDO_MYSQL-1.0.2
//phpize(php의 확장모듈을 올리는 유틸)위치 확인
#whereis phpize  (whereis로 못찾을경우 find -name phpzie 으로 찾아본다)
#/usr/local/bin/phpize
//php-config 위치 확인
#whereis php-config
//설치하기
#./configure --with-php-config=/usr/local/bin/php-config --with-pdo-mysql=/usr/local/mysql
#make
#makeinstall
//extension dir로 이동후 pdo_mysql.so 존재여부확인.
#cd /usr/local/lib/php/extenstions/no-debug-zts-2006613
#ls pdo_mysql.so

여기까지 pdo_mysql 확장모듈 설치가 끝났다.
이제 프로그램에서 실제로 사용하기 위해서 php.ini 추가를 해준다.

//php.ini에
#vi /usr/local/apache/conf/php.ini
extension=pdo_mysql.so 추가
//아파치 리스타트

이제 pdo를 맘껏 사용해보자...^^


*phpize ?
이건, php 확장 모듈을 php재컴파일을 하지 않고 설치해주는 유틸이란다.
사용방법은 위에 pdo_mysql 설치 예시에서 처럼,
phpize 실행 --> ./configure 환경설정 --> make 를 해주면된다고 한다.


중복되지 않는 랜덤 숫자 가져오기

배열처리중 중복되지 않는 순번으로 출력시키기.
총 10개의 데이타중에 중복되지 않게 5개를 가져오기.

$total_cnt = 10;
$k_nums = range(0,$total_cnt-1);
shuffle($k_nums);                       
for($i=0;$i<$row_cnt;$i++){
    if($i>5)    break;
    $k=$k_nums[$i];        //랜덤 번호 가져오기.
    echo $k ."\t";
}

이런게 필요할때가 있다.
db에서 랜덤으로 뽑으면 좋겠지만, 그렇지 못한경우 위와 같이 하면 중복되지않게 출력을 할수 있다.

flash 대체 컨텐츠 처리하기.

브라우져 또는 기기에 따라서 플래쉬가 실행되지 않을때가 있다.
이때, 플래쉬를 대체할만한 컨텐츠를 추가해주면, 접근성이 향상이 된다.

아래 flash를 삽입해주는 스크립트를 참고한다.
function embedFlash(id, url, width, height, altText, flashVars, wmode) {
	if (!flashVars) flashVars = '';
	if (!wmode) wmode = 'window';
	if (!altText) altText = '';

	var str = '' +
	'<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,115,0" width="' + width + '" height="' + height + '" id="' + id + '">' +
		'<param name="movie" value="' + url + '" />' +
		'<param name="wmode" value="' + wmode + '" />' +
		'<param name="FlashVars" value="' + flashVars + '" />' +
		'<!--[if !IE]>-->' +
		'<object type="application/x-shockwave-flash" data="' + url + '" width="' + width + '" height="' + height + '" name="' + id + '">' +
			'<param name="wmode" value="' + wmode + '" />' +
			'<param name="FlashVars" value="' + flashVars + '" />' +
		'<!--<![endif]-->' +
			'<div class="alt-content alt-' + id + '">' + altText + '</div>' +
		'<!--[if !IE]>-->' +
		'</object>' +
		'<!--<![endif]-->' +
	'</object>';
	document.write(str); 
} 

아래 블로그주소에서 더 자세한 설명과 여러가 대체방법에 대해서 설명이 되어 있다.
http://blog.wystan.net/2008/03/25/flash-alternative-content-and-noscript 

json 이란?

발췌 원문 : http://pjm0000.egloos.com/3605520

JSON 기초
 
JSON으로는 JavaScript 객체로 표현된 데이터를 한 함수에서 다른 함수로, 또는 비동기식 애플리케이션의 경우, 웹 클라이언트에서 서버 측 프로그램으로 쉽게 전달할 수 있는 스트링으로 변형할 수 있다. 문자열이 약간 이상해 보이지만 JavaScript에 의해 쉽게 인터프리팅 되고, JSON은 name/value 쌍 보다 복잡한 구조도 표현한다. 예를 들어, 단순한 키와 값 리스트 대신, 배열과 복합 객체들을 나타낼 수 있다.
 
 
1. JSON 예제
 
JSON에서는 name/value 쌍이 다음과 같이 표현된다.
 
이는 매우 기본적인 것이고, 텍스트의 name/value 쌍 보다는 더 많은 공간을 차지한다.
 
하지만, JSON은 여러 name/value 쌍들을 하나로 연결할 때 진가를 발휘한다. 우선, 다음과 같이, 여러 name/value 쌍으로 데이터 레코드를 생성할 수 있다.

{ "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" }

신택스의 관점에서 보면 name/value 쌍 보다 나은 점이 없어 보이지만, 이 경우, JSON은 훨씬 더 사용하기 쉬우며, 가독성도 놀랍다. 예를 들어, 위 세 개의 값들은 같은 레코드의 일부이다. 중괄호는 그 값이 같은 커넥션을 갖고 있다는 것을 표시하고 있다.
 
2. 값들의 배열
 
값을 나타내야 할 때, JSON은 보다 읽기 쉽고, 덜 장황하다. 예를 들어, 인명부가 있다고 해보자. XML에서는, 수 많은 오프닝/클로징 태그에 둘러싸이게 되고, 전형적인 name/value 쌍을 사용한다면, 독점적인 데이터 포맷을 사용해야 하거나, person1-firstName처럼 키 네임을 수정해야 한다.
 
JSON에서는 다음과 같이 괄호를 사용하여 레코드를 그룹핑 할 수 있다.

{ "people": [
  { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
  { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
  { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
]}

이해하기도 어렵지 않다. 이 경우, people이라는 하나의 변수가 있고, 값은 세 개의 아이템을 포함하고 있는 배열이며, 각각의 레코드에는 이름, 성, 이메일 주소가 있다. 위 예제는 레코드들을 모두 투입하는 방법과, 아이템을 괄호가 있는 싱글 값으로 그룹핑 하는 방법을 설명하고 있다. 물론, 같은 신택스를 사용할 수 있지만, 여러 값들(각각 여러 레코드들을 갖고 있음)을 갖고 있다.

{ "programmers": [
  { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
  { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
  { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
 ],
"authors": [
  { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
  { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
  { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
 ],
"musicians": [
  { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
  { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
 ]
}

여기에서 주목해야 할 점은 각각이 다수의 값을 내포하고 있는 많은 값들을 표현할 수 있는 당신의 능력이다. 또 하나 주목해야 할 점은 레코드의 name/value 쌍들은 다른 메인 항목(programmers, authors, musicians)에 따라 변한다는 것이다. JSON은 완전히 동적이고, JSON 구조 안에서 데이터를 표현하는 방식을 바꿀 수 있다.
 
또 한 가지 알아두어야 할 것은 JSON 포맷 데이터로 작업할 때 제약 조건이 없다는 점이다. 따라서, 어떤 것을 표현하는 방식을 바꿀 수 있고, 심지어는 같은 데이터 구조 내에서 같은 것을 다른 방식으로 나타낼 수도 있다.
 
3. JavaScript에서 JSON 사용하기
 
JSON 포맷을 다룬 후라면, JavaScript에서 이것을 사용하는 것은 간단하다. JSON은 네이티브 JavaScript 포맷이고, JavaScript 내에서 JSON 데이터와 작업하기 위해 특별한 API나 툴킷이 필요 없다.

4. JSON 데이터를 변수에 할당하기

예를 들어, 새로운 JavaScript 변수를 만들고, JSON 포맷 데이터 스트링을 여기에 직접 할당한다고 해보자.

var people =
  { "programmers": [
    { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
    { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
    { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
   ],
  "authors": [
    { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
    { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
    { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
   ],
  "musicians": [
    { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
    { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
   ]
  }


복잡하지 않다. people에는 이제 JSON 포맷 데이터가 포함되어 있다.
하지만, 많은 것을 수행하지 않는다. 데이터는 여전히 유용한 포맷으로 되어있지 않다.
 
5. 데이터에 액세스 하기
 
위의 매우 긴 스트링은 단순한 배열일 뿐이고, JavaScript 변수에 그 배열이 있다면 쉽게 액세스 할 수 있다. 사실, 그 배열을 마침표로 구분할 수 있다. 따라서, programmers 리스트의 첫 번째 엔트리의 성(last name)에 액세스 하려면, JavaScript에서 다음과 같은 코드를 사용해야 한다.

people.programmers[0].lastName;

인덱싱은 '0' 부터 시작한다. 따라서, 이것은 people 변수에 있는 데이터로 시작한다. 그리고 나서, programmers라고 하는 아이템으로 이동하고, 첫 번째 레코드([0])에 액세스 한다. 마지막으로, lastName 키의 값에 액세스 한다. 결과는 "McLaughlin"이라는 스트링 값이다.

다음은 같은 변수를 사용하는 예제들이다.

people.authors[1].genre   // Value is "fantasy"
people.musicians[3].lastName  // Undefined. This refers to the fourth entry, and there isn't one
people.programmers.[2].firstName // Value is "Elliotte"
 
이 신택스로도, 다양한 JSON 포맷 데이터로 작업할 수 있고, 추가 JavaScript 툴킷이나 API가 필요 없다.

6. JSON 데이터 수정하기
 
위에 나타난 점과 괄호 표기법을 사용하여 데이터에 액세스 하듯, 같은 방식으로 데이터를 쉽게 수정할 수 있다.

people.musicians[1].lastName = "Rachmaninov";

문자열에서 JavaScript 객체로 변환했다면 변수에 있는 데이터를 수정하면 된다.

7. 문자열로 변환하기
 
물론, 모든 데이터 수정은 텍스트 포맷으로 쉽게 변환할 수 없다면 가치가 없다. 이것 역시 JavaScript에서는 간단하다.

String newJSONtext = people.toJSONString();

이것이 다이다.
원하는 곳 어디에서나 사용할 수 있는 텍스트 문자열이 생겼으니, 이것을 Ajax 애플리케이션에서 요청 스트링으로 사용할 수 있다.


훨씬 더 중요한 것은, 어떤 JavaScript 객체라도 JSON 텍스트로 변환할 수 있다. 원래 JSON 포맷 스트링으로 할당된 변수로만 작업할 필요가 없다. myObject라는 객체를 변형하려면, 같은 종류의 명령어를 실행하면 된다.


String myObjectInJSON = myObject.toJSONString();


이것이 JSON과 다른 데이터 포맷과의 가장 큰 차이이자, 이 시리즈를 통해 탐구할 주제이다. JSON에서는, 단순한 함수를 호출하면, 포맷팅 되어 사용하기에 알맞은 데이터를 얻을 수 있다. 다른 데이터 포맷의 경우, 미가공 데이터와 포맷 데이터간 변환은 여러분의 몫이다. Document Object Model 같이 데이터 구조를 텍스트로 변환하는 함수를 제공하는 API를 사용할 때도, 네이티브 JavaScript 객체와 신택스 보다는, API를 배우고 그 API의 객체를 알아야 한다.
 
많은 JavaScript 객체들과 작업할 때, JSON은 데이터를 서버 측 프로그램으로 요청을 보내기에 알맞은 포맷으로 쉽게 변환할 수 있다.



트위터 특정 url에 대한 트윗횟수 가져오기

트위터 공유기능 구현하다 보면, 트윗된 횟수를 보여줘야 할때가 있다.
이때, 트위터에서 기본 제공되는 공유버튼을 이용하면 되겠지만, 내맘대로 버튼모양을 바꾸고 싶다면,  아래 url로 공유하는 url을 대입해서 호출해주면, 트윗된 횟수를 알수 있다.
호출url:
http://urls.api.twitter.com/1/urls/count.json?url=http%3A%2F%2Fwww.daara.co.kr%2Fnews%2Fnews_view2.php%3Fidx%3D138891&callback=twttr.receiveCount

결과:
twttr.receiveCount (
{
}
)

결과는 json형태로 받을수 있으니, 적절해 값을 추출해서 사용하면 가능할거 같다.(트위터가 이 url을 변경하지 않는한....^^)

다만, 트윗을 할때 실시간으로 트윗횟수를 받을 없을거다.(트위터 공유창과 원본글이 존재하는 페이지의 도메인이 다른 문제(보안문제발생)로 트윗공유후 페이지 로딩없이 트윗회수가 올라가진 않을거이다.)
 

홈페이지 모바일 접속 구분해서 이동시키기

php에서.

// 웹브라우저 user agent 체크
if( preg_match('/(iphone|samsung|lgtel|mobile|android|blackberry|symbian|sony|ipod)/i', $_SERVER['HTTP_USER_AGENT']) ) {
   //모바일이면
   session_start();
    if($_GET[v]=="PC"){
        $_SESSION["useragent"] = "PC";
    }else{
        $_SESSION["useragent"] = "";
    }
    if($_SESSION["useragent"]!="PC"){
        echo"<script>location.href='http://m.daara.co.kr';</script>";
        exit;
    }
}

javascript에서
if(/lgtelecom/.test(ua) || /android/.test(ua) || /blackberry/.test(ua) || /iphone/.test(ua) || /ipad/.test(ua) || /samsung/.test(ua) || /symbian/.test(ua) || /sony/.test(ua) || /SCH-/.test(ua) || /SPH-/.test(ua)){
//이동처리
}

위에서 처럼 페이지 상단에 넣어주고 처리를 해주면된다.

facebook share 할때 description을 잘못가져가는 경우.

요즘 소셜 공유 기능이 대세다, 
그 기능을 붙이는 것은 소셜 api와, 또 여러 블로그, 카페등 인터넷에서 많이 도움이 되는 글들을 찾아볼수 있다.
이번에 소셜공유 버튼을 붙이다 보니, facebook share를 할때, 정보를 잘못읽어가는 경우가 자주 생겨서 여기저기 찾다가 답이 된ㄴ 글을 http://akrabbestari.blogspot.com/2011/01/facebook-share-wrong-description-by.html 에서 찾았다.

facebook share에서는 기본적으로 description meta tag에서 해당 정보를 찾아보고, 해당 정보가 없을경우, 페이지내에서 최소 120자 이상의 글을 가지고 있는 첫번째 paragraph(p tag)를 찾아서 거기에 있는 내용으로 공유 텍스트를 입력해준다는것이다.
(그 p tag안에 있는 내용은 tag를 포함하지 않아야 한다.)

암튼, facebook share를 할때 정확한 정보를 facebook에서 찾아갈수 있도록 하기 위해서는
1. description meta tag를 이용하거나,
2. p tag 안에 html tag가 없는 내용을 120자 이상 넣어주면 된다.(단, 필요에 따라서는 display:none을 처리해서 감춰줘도 된다. 난 이렇게 했다.^^)

둘중 하나만 해줘도 제대로된 정보를 facebook이 읽어갈수 있다.

a 태그에서 href 없이 onclick 어트리뷰트 제대로 사용하기

http://www.serve.co.kr/tv/default.asp

동영상 플레이를 재생하는 태그가 잘못 사용되어진 부분이 있습니다.

a class="SV_point_color1 SV_pointer" onclick="javascript:playVod('','95845','95845','');"

해당 a 태그안에 href가 없다.
onclick으로 javascript 사용을 하고 있는데... 해당 javascript도 한번 보자..

function playVod(wcode, url, ser, isfree)
{
//동영상 플레이전 힛트수 업데이트처리
var url2 = "/tv/tv_count.asp";
var functionName = "";
var strParam = "ser="+ser ;
var strAsync = true;
var returnType = "";
var strDocName = "";
SERVE.Xml.xmlHttp(url2, functionName, strParam, strAsync, returnType, strDocName);

var isSuc = "Y";
if (wcode == 908) { //RTN
// ret = chk_login();
ret = true;
if (ret) {
window.open('','rtn_vod','width=420,height=420,toolbar=no,location=no,menubar=no,scrollbars=auto,resizable=no,top=100,left=100');
} else {
isSuc = "N";
}
//url = url+"&servenm=&serveid=";
document.frmVod.serveid.value = "";
document.frmVod.servenm.value = "";
document.frmVod.target="rtn_vod";
} else {
url = '/news/vod_viewer.asp?ser='+url
window.open('','media_player','width=810,height=520,scrollbars=no,resizable=no');
document.frmVod.target="media_player";
}

if (isSuc == "Y") {
document.frmVod.action = url;
document.frmVod.submit();
}
}

길긴하지만 봐야 할것은 url 파리미터 이겠다.
해당 javascript를 기준으로 a 태그를 올바르게 고쳐보면

a href="/news/vod_viewer.asp?ser=95845" class="SV_point_color1 SV_pointer" onclick="javascript:return playVod('','95845','95845','');"

이렇게 되어야 하겠고. playVod 함수에서는 return false 처리를 해주면 되겠다.

a 태그에 href 있고 없고는 기술적으로는 문제가 안 될 수 있겠으나 SEO(Search Engine Optimizing)에서 보면 많이 달라질 수 있다. 링크가 있느냐 없느냐에 따라서 구글의 pagerank를 고려한다면 노출 우선순위가 달라질 수 있는 것이고. 검색로봇들이 웹페이지를 수집해갈 수 있는 경로가 없다는 것은 해당 컨텐츠가 검색이 안될 수 있다는 것이니까.
이런 작은 태그 하나 하나도 습관이 되는게 좋겠다.

windows vista sidebar gadget 만들기 - 부동산써브 검색

부동산써브의 통합검색 서비스 사이드바 가젯을 만들어 봤다.

아래 개발 가이드 페이지를 참고했다.

http://msdn.microsoft.com/msdnmag/issues/07/08/SideBar/default.aspx?loc=ko

처음에는 RSS 위치만 바꿔서 분양정보에 대한 gadget을 만들었는데...
생각했던 내용들을 전부 적용하려면 좀 더 생각들을 하고 기능들을 추가해야 하기에 우선 간단하게 적용할 수 있는 검색 가젯을 만들어서 등록해 봤다.
음.. 조금전에 등록했는데, 아직 갤러리에서는 안 보임.
http://gallery.live.com/results.aspx?c=39&bt=1&ti=2

디자인 좀 더 해야 할듯도 하고... ㅎㅎ..

간단하게 구조를 살펴보면... 우선 파일 리스트는 아래와 같다.
- gadget.xml : gadget 요약 XML
- gadget.html : 기본 HTML
- style.css : 기본 CSS
- serve1.gif : 로고 이미지 파일
- btn_search2.gif : 검색 버튼 이미지 파일

gadget.xml 파일에 대해서는 msdn 페이지를 확인하는게 좋겠고...
gadget.html 파일이라고 해봐야 부동산써브 통합검색(http://www.serve.co.kr/search/) 페이지로 검색하기 위한 form 태그 하나만 들어가 있을 뿐이다. 크기와 위치 조절을 위해서 CSS를 약간 수정했고.. 이미지 파일이야 기본적으로 필요한것들이라서 들어가 있는 것이고.

처음에 분양쪽 RSS(http://www.serve.co.kr/rss/news_category.asp?srch_code1=29&srch_code2=152)를 적용하면서 gadget을 파악하면서는 몇시간 정도 시간이 필요했는데... 이해를 하고 나니 검색가젯을 만드는데는 몇분정도.. 뭐.. 디자인 맞추느라고 시간이 좀 더 걸리긴 했고...(분양쪽은 몇가지 수정 좀 한후에 올리려고 함..)
욕심을 부려서 네이버위젯(http://desktop.naver.com/openapi/index.nhn)도 비슷한 구조면 바로 해 보려고 했더니.. 쩝.. 네이버는 구조가 많이 다르네..
야후에는 예전에 경희가 만들었던게 있고.. http://kr.widgets.yahoo.com/gallery/gallery.html?wid=184
DAUM이 아직 개발가이드를 공개 안한거 같은데.. 흠.. 못 찾은 건가...

시간 되는데로 하나씩 만들어봐야 할텐데.. ㅎㅎ....

META TAG에 대해서 알아보자.

- META TAG (메타태그) -

META TAG를 사용한다는 것은 자신의 문서를 남에게 보여주는 일정형식이 있는데 그것에 대한 정보

를 나타낼때 사용을 하는 것입니다. 그러므로 개인이나 가족의 홈페이지로서 어떤 특정인들만의 방문

만을 목적으로 했다면 구태여 사용하지 않아도 지장은 없습니다. 그러나 각종 검색엔진에서 검색로봇

이 당신의 홈페이지를 찾아서 나타나게 해주려면은 META TAG 의 사용은 필연적일수 밖에 없습니다.

즉 홈페이지의 홍보와 자사의PR을 위한다면 META TAG의 역활이 가장 크다고 할것입니다.

또한 여러분이 계정에 올려놓은 홈을 다른 계정으로 옮겼을 시에도 자동으로 이동한 홈으로 가게

해주는 것도 바로 이 META TAG 를 사용한것입니다. META TAG<HEAD>~~~~</HEAD>

사이에 넣어주면 되는것입니다.

<HTML>

<HEAD>
<TITLE>SAVER의 META TAG 강좌</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=euc-kr">
<META HTTP-EQUIV="refresh" CONTENT="10; URL="이동할 홈주소">
<META NAME="Description" CONTENT="홈페이지의 정의">
<META NAME="Keyword" CONTENT="당신의 홈페이지 키워드">
<META NAME="Author" CONTENT="제작자 이름">
</HEAD>

<BODY>
문서의 내용이 들어가는곳.
</BODY>
</HTML>

위의 META TAG 의 각각의 역활에 대해서 설명을 하도록 하겠습니다.

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=euc-kr">


이 테그는 한글 전용으로 나타남을 뜻하는 것입니다.IE의 경우는 이것이 정해지면 다른 언어는 깨져

보이는 경우가 있는데 브라우저에서 한글표현이 자유롭도록 만들어주는 태그입니다.여러분의 홈에도

당연히 들어가는 것이 좋습니다. 참고로 CHARSET=ISO-8859-1은 영어권 전용을 의미합니다.

<META HTTP-EQUIV="refresh" CONTENT="10; URL="이동할 홈주소">


웹페이지를 방문 하다보면 주로 첫화면에서 많이 나오는 상황인데 일정한 시간이 지나면 마우스

를 클릭하지 않아도 다음 페이지로 넘어가는걸 많이 보셨을 것입니다. 그러한 경우에 사용하는 태그

입니다. 여기서는 10초가 지나면 지정한 URL 로 이동을 하게 되는것입니다. 이외에도 이테그는 여러

분이 무료계정을 사용하시다가 다른 계정으로 옮겨갈경우 또는 도메인이 바뀌어서 기존의 도메인에서

바뀐 도메인으로 이동할때도 사용되는 테그 입니다.

<META NAME="Description" CONTENT="홈페이지의 정의">


이테그는 그렇게 많이 사용되지는 않으나 알아두시는 것도 괜찮을 것으로 봅니다. 홈의 가장 핵심이

되는 단어를 넣어주시면 됩니다. 예를 들어 홈페이지 강좌 사이트라고 했을때 가장 핵심이 되는 단어

는 무엇일까요? HTML SCHOOL 이런 단어를 넣어주면 될까요? 저는 도메인 네임을 적어넣었습니다.

여러분은 여러분홈에 맞는 주제어를 찾아서 넣어주시면 됩니다.

<META NAME="Keyword" CONTENT="당신의 홈페이지 키워드">


META TAG 중에서 가장 중요한 태그라고 보시면 됩니다. 검색로봇이 웹페이지에 접근했을 때 홈페

이지가 어떤 내용을 다루고 있나를 알게 해 주는 역할을 합니다. CONTENT="~" 부분에 여러분의

홈페이지를 나타내는 키워드를 되도록 이면 많이 입력해 주시기 바랍니다.많을수록 좋습니다.

다다익선이 여기에 해당되는 단어입니다.CONTENT 안에 핵심어들을 콤마로 나열해 주면 됩니다.

예 : HTML,JAVA,CGI,CSS,홈페이지,프로그래밍,등등.

<META NAME="Author" CONTENT="제작자 이름">


이테그는 홈을 만든 본인의 이름이나 예명등을 넣어주면 됩니다.

웹 출판을 한다면 보다 많은 META TAG가 있습니다만은 META TAG의 필요성은 이정도만 아셔도

되리라 봅니다. 홈페이지를 만드신다면 최소한 위의 META TAG정도는 넣어주시기 바랍니다.

출처 : Tong - 까비천사님의 tag/css통

새창에 form 전송하기

가끔 새창을 열고 열린창에 폼전송을 해야하는 경우가 생긴다 이때 사용할 수 있는 소스이다.

■ 새창을 띄우는 page 소스

<script language="javascript">
function Check() {
form1.target = 'newW'; //타겟지정, 아래에는 url을 적지않는다
window.open ('', 'newW', 'width=300,height=300,resizable=no,scrollbars=no');
}
</script>


<form name="form1" method="post" action="test.asp" onSubmit="Check();return true;">
이름<input type=text name=a> <br>
나이<input type=text name=b>
<input type=submit value="새창에 전송">
</form>


■ 열린창(새창)에서 확인 (test.asp)

<%=request("a")%> | <%=request("b")%>

[자스]encodeURI, encodeURIComponent, escape 함수 차이점

개발을 하다보면, 문자인코딩을 해야 하는경우가 상당히 있다.
자바스크립트의 경우는 문자 인코딩/디코딩 관련함수가 몇가지 있다.

자바스크립트(JavaScript)에서는 다음의 함수들로, 문자를 인코딩/디코딩한다.
1. encodeURI() / decodeURI()
최소한의 문자만 인코딩합니다.
; / ? : @ & = + $ , - _ . ! ~ * ' ( ) #
이런 문자는 인코딩하지 않습니다.
http:// ... 등은 그대로 나옵니다.


2. encodeURIComponent() / decodeURIComponent()
알파벳과 숫자 Alphanumeric Characters 외의, 대부분의 문자를 모두 인코딩합니다.
http:// ... 가 http%3A%2F%2F 로 됩니다.



3. escape() / unescape()
예전부터 있던 오래된 함수입니다. encodeURI() 와 encodeURIComponent() 의 중간 정도의 범위로 문자를 인코딩합니다.

주로 escape() / unescape()를 많이 쓰는데, 이부분은 asp에서도 동일하게 쓸수 있다.