Rev. 2.73

최근 트위터로부터 유입되는 트래픽이 급증했습니다. 글 제목과 URL을 복사하고 붙여넣었을 뿐입니다. 하지만 요딴식의 트위팅은 정말 짜증나고 귀찮죠. 좀처럼 트위터에 시간을 할애하지 못하는 분들도 계실거고요. 그래서 PHP와 트위터 API를 이용하여 블로그에 포스팅하는 것과 동시에 트위터에도 포스팅되도록 만들었습니다. 아래는 PHP를 이용하여 트위터에 원격으로 포스팅하는 방법에 대하여 소개한 내용입니다.

curl -u 사용자명:암호 -d status="메시지" http://twitter.com/statuses/update.xml

아시다시피 트위터는 다양한 방식의 API를 제공합니다. 그 중에는 curl을 이용하여 트위터에 원격으로 포스팅할 수 있고 이것을 PHP로 작성하면 다음과 같습니다.

<?php
  // Set username and password
  $username = 'username';
  $password = 'password';
  // The message you want to send
  $message = 'is twittering from php using curl';
  // The twitter API address
  $url = 'http://twitter.com/statuses/update.xml';
  // Alternative JSON version
  // $url = 'http://twitter.com/statuses/update.json';
  // Set up and execute the curl process
  $curl_handle = curl_init();
  curl_setopt($curl_handle, CURLOPT_URL, "$url");
  curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT, 2);
  curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER, 1);
  curl_setopt($curl_handle, CURLOPT_POST, 1);
  curl_setopt($curl_handle, CURLOPT_POSTFIELDS, "status=$message");
  curl_setopt($curl_handle, CURLOPT_USERPWD, "$username:$password");
  $buffer = curl_exec($curl_handle);
  curl_close($curl_handle);
  // check for success or failure
  if (empty($buffer)) {
    echo 'message';
  } else {
    echo 'success';
  }
?>

변수 $buffer에는 원격지 서버가 응답한 내용이 들어 있고 이것으로 성공 여부를 구분할 수 있습니다.

Comments



이것은 Toki Woki에서 만든 스크롤 시계입니다. <div> 요소의 overflow 속성을 절묘하게 이용하여 만들었습니다. 소스를 보니 MooTools 라이브러리를 기반으로 슈퍼 클래스를 상속하여 사용하고 있습니다. 이것을 Prototype 라이브러리로 다시 작성해 보았습니다. :

(function() {
  var barDim = 64, sbDim = 18;
  var Bar = Class.create({
    initialize: function(dir) {
      this.dir = dir;
      var dim = dir == 'v' ? barDim : (Prototype.Browser.Gecko ? barDim : barDim + sbDim);
      this.holder = new Element('div', {style: 'width:' + (dir == 'h' ? dim : sbDim) + 'px; height:' + (dir == 'h' ? sbDim : dim) + 'px; overflow: auto; float: left'});
      this.content = new Element('div', {style: 'line-height: 0'}).update(' ');
      this.activate(true, true);
      this.holder.insert(this.content);
    },
    activate:function(b, now) {
      var side = this.dir == 'h' ? 'width' : 'height';
      if (now) this.content.setStyle(side + ':' + (b ? barDim + sbDim : barDim / 2) + 'px');
      else this.content.morph(side + ':' + (b ? barDim * 2 : barDim / 2) + 'px');
    }
  });
  var HBar = Class.create(Bar, {
    initialize: function($super){
      $super('h');
      this.holder.setStyle('margin-left:' + sbDim + 'px; margin-right: ' + sbDim + 'px');
    }
  });
  var VBar = Class.create(Bar, {
    initialize: function($super, push){
      $super('v');
      push && this.pushRight();
    },
    pushRight:function() {
      this.holder.setStyle('margin-left:' + barDim + 'px');
    }
  });
  var Digit = Class.create({
    initialize: function(push) {
      var holder = this.holder = new Element('div', {style: 'width:' + (barDim + 2 * sbDim) + 'px; float: left; margin-right: 5px'});
      this.bars = [new HBar(), new VBar(), new VBar(true), new HBar(), new VBar(), new VBar(true), new HBar()].each(function(it) { holder.insert(it.holder);});
      this.lights = [
        [1, 1, 1, 0, 1, 1, 1],//0
        [0, 0, 1, 0, 0, 1, 0],//1
        [1, 0, 1, 1, 1, 0, 1],//2
        [1, 0, 1, 1, 0, 1, 1],//3
        [0, 1, 1, 1, 0, 1, 0],//4
        [1, 1, 0, 1, 0, 1, 1],//5
        [1, 1, 0, 1, 1, 1, 1],//6
        [1, 0, 1, 0, 0, 1, 0],//7
        [1, 1, 1, 1, 1, 1, 1],//8
        [1, 1, 1, 1, 0, 1, 1] //9
      ];
      push && this.pushRight();
    },
    show: function(n) {
      n = Math.floor(n);
      n = n % 10;
      var light = this.lights[n];
      this.bars.each(function(it, index) { it.activate(light[index] == 1); });
    },
    pushRight: function() {
      this.holder.setStyle('margin-left: 12px');
    }
  });
  function showTime() {
    var now = new Date();
    h1.show(now.getHours()/10);
    h2.show(now.getHours());
    m1.show(now.getMinutes()/10);
    m2.show(now.getMinutes());
    s1.show(now.getSeconds()/10);
    s2.show(now.getSeconds());
  }
  var h1 = new Digit(), h2 = new Digit(), m1 = new Digit(true), m2 = new Digit(), s1 = new Digit(true), s2 = new Digit();
  $('main').insert(h1.holder).insert(h2.holder).insert(m1.holder).insert(m2.holder).insert(s1.holder).insert(s2.holder);
  showTime();
  setInterval(showTime, 1000);
})();

덧. IE에서는 작동하지 않습니다.

Comments

jQuery용으로 만들어진 jQSlickWrap 플러그인을 이용하면 보시는 것 처럼 이미지의 피사체를 피하여 문자열들을 어울리게 배치할 수 있습니다. 실제로 애플로고 이미지를 첨부하고 jQSlickWrap 플러그인을 적용한 것입니다. 작동원리는 간단합니다. HTML5의 <canvas> 요소를 이용하여 이미지 데이터의 정해진 구간으로 루프를 돌면서 색상값을 근거로 피사체가 끝나는 위치을 분석하고 가상의 <div> 요소에 분석한 너비를 적용하여 바꿔치기하는 것입니다.
이 블로그는 Prototype 라이브러리를 사용하기 때문에 jQSlickWrap 플러그인을 그대로 날로먹을 수가 없어서 Prototype의 클래스로 변환하여 적용하였습니다. MIT 라이센스라 부담없이 마구 때려 고쳤습니다. 필요하신 분은 가져다 쓰셔도 무방합니다.

사용법 :

new SlickWrap(img, {
  bgColor: null,
  bloomPadding: false,
  resolution: 18,
  cutoff: 5
});

다운로드 :

Comments