미투데이도 얼른 OAuth기반으로 바꿨으면 좋겠네요.
인증 방식은 비슷하긴 하지만, access_token요청하는 부분 같은 게 없어서 callbackurl로 사용자api키를 받게 되는군요. 보안상 안좋을 것 같은...-_-

그리고, 언제까지 스프링노트에 표시를 할 것인지가 의문입니다.
트위터가 OpenAPI를 참 잘해놔서 그런지 굉장히 많은 서비스들이 튀어나오고 있습니다. 이점은 미투데이에서도 얼른 OpenAPI에 힘을 쓰시는 게...^^

api페이지입니다.
http://codian.springnote.com/pages/86001

요청절차는 이러합니다. 물론 여기가면 더 자세히 나와있습니다ㅠㅠ(웹인증기반 기준!)
http://codian.springnote.com/pages/1645274
1) api키를 발급받습니다.
2) 해당 api키로 인증 토큰을 얻습니다.
3) 그 토큰으로 인증url로 이동시킵니다.
4)사용자가 로그인 하면 지정한 callback페이지로 사용자키를 던져줍니다.
5) 사용자키로 글을 쓰면 됩니다.


1. 일단 API키 발급

http://me2day.net/me2/app/key/list
여기서 새 애플리케이션 키 발급한다음에 등록합니다. 그리고 등록된 키에서 설정을 누르면 웹기반인지 데스크탑기반인지 선택하는데, 웹기반이면 callback주소를 입력받습니다. 이 callback주소는 인증 후에 사용자키를 받는 url이 됩니다.

2. 해당api키로 인증토큰 얻기
config.php파일
[code]<?php
define('A_KEY', '발급받은 api키');
?>[/code]
index.php
[code]<?php
    require_once("config.php");
    $result = json_decode(file_get_contents("http://me2day.net/api/get_auth_url.json?akey=" . A_KEY));
    print_r($result);
?>
<!doctype html>
<html>
    <head>
        <meta charset="EUC-KR">
        <title>미투데이 인증 후 글쓰기</title>
      </head>
    <body>
        <br />
        <a href="<?php echo $result->url ?>">미투데이 인증하기</a>
      </body>
</html>[/code]
php에서 http://me2day.net/api/get_auth_url.json를 요청해서 token을 받습니다. 그러면 인증url이 같이 떨어집니다. 그 url로 이동하게 되면 아래와같이 로그인하는 화면이 나옵니다.
사용자 삽입 이미지
여기서 로그인하고 인증하면 1번에서 지정한 callbackurl로 이동하게 됩니다.

3. callback url에서 데이터받고 글쓰기 폼생성

callback.php
[code]<?php
    require_once("config.php");
   
    $token = $_GET["token"];
    $user_id = $_GET["user_id"];
    $user_key = $_GET["user_key"];
    $result = $_GET["result"];
   
    // 세션저장
    session_start();
    $_SESSION["user_id"] = $user_id;
    $_SESSION["user_key"] = $user_key;
   
    // 인증이 확실한지 확인
    $authKey = "12345678" . md5("12345678" . $user_key);
    $result = file_get_contents("http://me2day.net/api/noop?uid={$user_id}&ukey={$authKey}&akey=" . A_KEY);
?>
<!doctype html>
<html>
    <head>
        <meta charset="EUC-KR">
        <title>미투데이 인증 콜백</title>
        <script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#btnPost").click(function(){
                    var body = $("#inputPost").val();
                    if (body.length < 1){
                        alert("글입력해요!");
                        return;
                    }
                    $.getJSON("post.php?callback=?", {body:body}, function(data){
                        alert("글쓰기 성공 = " + data.result);
                    });
                });
            });
        </script>
      </head>
    <body>
        <?php echo $result ?><br/>
        <input type="text" id="inputPost" name="inputPost" /><br />
        <input type="button" id="btnPost" name="btnPost" value="글쓰기"/>
      </body>
</html>[/code]
보면 user_id랑 user_key를 세션에 저장합니다. 만약 자신의 사이트에서 미투데이인증과 통합을 원한다면 api키를 데이터베이스같은 영속적인 것에 저장하고 쓰는 것이 좋습니다. 그럼 따로 인증같은 것을 하지 않아도, 자신의 사이트만 인증을 해도 글을 쓸 수 있으니까요^^
나중에 api_key값이 바뀐다고 해도, noopapi를 호출해서 인증이 정확한지 확인 후 정확하지 않으면 다시 인증받으면 되니까요^^

user_id랑 user_key만 있으면 이제 글을 쓸 수 있으므로, http://me2day.net/api/noop를 호출해서 유효한지 확인을 합니다. 이제부터 인증받은 api들은 uid와 ukey와 akey를 같이 파라메터에 붙여서 호출해야합니다.
uid는 사용자 아이디, ukey는 임의8자리숫자 + md5(임의8자리숫자 + 사용자키), akey는 api키를 넣으면 됨!

4. 글쓰기
post.php
[code]<?php
    require_once("config.php");
   
    $body = $_GET["body"];
    $callback = $_GET["callback"];
   
    session_start();
    $user_id = $_SESSION["user_id"];
    $user_key = $_SESSION["user_key"];
   
   
    // 인증이 확실한지 확인
    $authKey = "12345678" . md5("12345678" . $user_key);
    $result = file_get_contents("http://me2day.net/api/create_post/{$user_id}.json?uid={$user_id}&ukey={$authKey}&akey=" . A_KEY . "&post[body]={$body}");
   
    header("Content-type: application/json");
    echo "{$callback}({'result':'{$result}'})";
?>[/code]
그냥 api문서대로 호출하면 됨!

테스트 url~
mudchobo.tomeii.com/test/me2daytest/

나중에 php용 라이브러리를 만들어봐야겠다...
 
Posted by 머드초보
,
 
전에 쓰던 마우스가 자꾸 원클릭만 해도 더블클릭이 되어서-_- 갑자기 지르게 되었습니다^^
마우스의 모양은 정말 맘에 드는데, 아직 적응은 안된 것 같습니다 ㅠㅠ
그리고 마우스는 확실히 로지텍이 좋습니다. 마소마우스는 두번째인데, 첫번째 마우스도 그리 안좋은 추억으로 끝이 났었는데... 로지텍의 VX Nano를 쓰고는 정말 좋다고 생각했거든요. 하지만, 이번에 또 마소것을 산 이유는 그냥 이 디자인이 맘에 들었어요-_-

암튼 박스샷입니다
사용자 삽입 이미지

아....색상은 평범한 것이 싫어서 화이트, 블랙 다 제끼고 퍼플을 샀습니다-_- 보라색이 왠지 끌려서...
뭐 나쁘지 않네요~ 색상이 너무 여러개 존재해서 고민을 참 많이 했습니다ㅠㅠ

내용물입니다.
사용자 삽입 이미지
파우치도 맘에듬! 주머니 끝부분이 자석으로 되어있어서 맘에 들어요~ 노트북 들고 나가게 되면 지퍼방식인 경우 자주 열고 닫아야하는데, 이건 그럴 필요가 없으니까요^^
그리고, 건전지도 들어있구요~ 메뉴얼 같은게 있는데, 메뉴얼 없이도 잘 쓸 수 있어요~^^

리시버입니다
사용자 삽입 이미지

로지텍꺼보단 살짝 큰데, 그래도 참 작습니다^^ 4년전에 산 무선마우스는 리시버가 저거의 4배만했던 것 같은데, 기술력이 참 좋아지고 있습니다^^

마우스~
사용자 삽입 이미지

리버가 생각나!


처음에 마우스를 연결하면 포인터가 엄청 빠릅니다. 그래서 마우스옵션에서 느리게 설정해주셔야 할 겁니다.
그리고, 마우스의 본체에 가운데 부분이 없어서 그런지 왠지 정확한 포인팅이 아직 잘 안됩니다.
그리고 로지텍마우스는 클릭 시 전혀 힘이 들어가지 않는데, 이건 왜인지 모르게 클릭 시 힘을 더 쓰게 되네요. 휠도 뭐 그냥 그렇고.

ps. 결론이 뭐냐면 좋은 마우스 사고 싶으면 로지텍꺼 사구요, 디자인을 원하면 이 아크마우스 사시면 됩니다ㅠㅠ
이 아크마우스는 가격대비 좋은 마우스는 아닌지 싶습니다. 하지만, 디자인은 진짜 맘에 드네요!
 
Posted by 머드초보
,
 
저의 스마트폰 사용의 20%(?)를 차지하고 있는 SNS어플에 대해서 소개합니다~^^
생각해보니 제 안드로이드 사용은 게임20%, 인터넷20%, SNS20%, 음악20%, 뱅킹10%,  문자전화10%인 듯-_-

스마트폰을 가지게 되면서 소셜네트워크서비스에 대한 글 작성 같은 것이 쉬워지면서 더욱 관심있게 사용하게 되었는데요^^ 그래서 어플을 리뷰해보려고 합니다~

1. Twitter어플 - Seesmic

트위터 어플은 공식어플이 있는데요. 그냥 깔끔하기만 하고, 트위터어플 중 가장 기능이 없고 최악의 어플인 듯-_- 그래서 다른 어플을 추천해요~ 전 Seesmic이 좋더군요^^
멀티 계정설정도 되는 것 같은데, 전 계정이 하나이므로-_-
일단 메인화면~
사용자 삽입 이미지

Timeline, Replies, Messages, Profile 탭이 보이는군요.
트위터를 사용하시는 분들은 다 아실만한 것들이죠~
Timeline을 보면 자신이 쓴 것은 노란색, 저를 Reply한 것은 하늘색으로 표기되어서 자신에 관련된 글을 보기 쉽게 해주죠.
Replies는 @자신아이디로 검색된 내용을 보여줍니다.
Messages는 DM(Direct Message)를 볼 수 있구요~
Profile은 자신의 정보!

그리고 글을 볼 때 좋은 점은 포토서비스 같은 경우, Twitter공식어플은 직접 웹사이트를 띄워버리는데, 이건 그냥 이미지만 추출해서 보여줘서 참 좋아요~

글을 작성할 땐 사진첨부 및 위치입력, 비디오첨부가 가능합니다. (물론 다른 서비스에 올리고 링크만^^)
사용자 삽입 이미지
저 세번째 아이콘은 뭐지-_- 포토나 비디오 같은 경우 서비스 업체를 고를 수 있습니다^^

그리고 알림기능이 있습니다. 자신에게 Reply가 오거나 DM이 오면 알려주는 것입니다.
사용자 삽입 이미지
Update Interval로 몇분마다 데이터가 있는지를 가져올 지를 정할 수 있습니다. Notifications type같은 경우는 Tweets, Replies, Direct messages가 있는데, Tweets에 체크하는 순간-_- 자신이 팔로우 하는 사람이 많이 있다면 Interval타임마다 미친듯이 진동할 것입니다-_-
암튼, 자신에게 Replies된 것을 바로 알림을 받을 수 있어 참 좋죠~^^

2. 미투데이 - 미투데이

미투데이 어플은 왜 업뎃이 없죠ㅠㅠ 처음에 런칭하고 업뎃 한번도 없었음 ㅠㅠ
암튼, 메인화면입니다^^
사용자 삽입 이미지
이건 위에 Seesmic처럼 탭방식이 아닙니다. 메뉴를 누르면, 모아보는, 나는, 친구들은, 소환받은, 쪽지 등으로 볼 수 있게 되어있습니다.

그리고 글을 선택해서 들어가면 상세보기를 할 수 있습니다. 댓글이 보이고, 댓글을 작성할 수 있으며 미투를 할 수 있습니다.
사용자 삽입 이미지
여기서 댓글을 선택하면 /아이디/형식으로 댓글을 작성할 수 있습니다.
그리고 위글처럼 특정 글에 댓글을 자신의 미투에 쓴 경우 원본 글을 볼 수 있습니다.

그리고 미투데이에서도 알림 기능이 있습니다. 물론 미투데이는 자체적으로 소환받거나 쪽지를 받으면 SMS를 받는 기능이 있지만, 어플에서도 알림기능을 지원합니다^^
아래와 같이 미투데이에서 알림이 왔다고 뜹니다. 클릭하면 소환받은 목록으로 가게 됩니다~
사용자 삽입 이미지


아직 초기버전이라서 기능이 미약한 점이 좀 있는데요. 일단 댓글을 쓰면 지울 수 없습니다-_- 웹으로 가셔서 지우셔야합니다ㅠㅠ
그리고, 친구들 소환하기 기능이 없습니다. 아이디를 직접 외워서 쳐야합니다. 웹에서는 자동완성으로 친구닉넴으로 찾을 수 있는데, 그 기능이 있었으면 좋겠네요~^^

3. 포스퀘어 - Foursquare

포스퀘어는 친구도 별로 없고 그냥 체크인만 하는 상태라 아직까진 잘 모르겠네요-_-
일단 메인화면입니다.
사용자 삽입 이미지

보면 친구가 어디에 마지막으로 체크인을 했는지 보여줍니다. 그리고 Places탭과 Me탭이 있네요.
Places탭을 선택하면 현재 여기 근처에 어떤 지역이 있는지 보여줍니다.
사용자 삽입 이미지
선택해서 체크인 하고 싶은 거 하면 됩니다.
아오~ 지금 포스퀘어 잘 안되네-_- 암튼, 서버장애 엄청 납니다-_-
그냥 해당 지역을 체크인 해서 그 지역의 Mayor가 될 수도 있고, 그 지역에 체크인한 사람이 맘에 들면 친구먹는 거고, 그리고 체크인할 때 트위터와 연동해서 글을 쓸 수 있는 뭐 그런 지역기반sns입니다.
아이디어는 참 좋은 것 같아요~
게다가 해당 지역사람끼리 연결시켜주니 더욱 좋은 듯~

ps. 암튼, 하게되면 빠져듭니다-_-
업무시간에도 계속 미투데이와 트위터를 켜놓는 자신을 보게될 것입니다-_-
 
Posted by 머드초보
,
 
한번 만들어보려고 했는데요... 그냥 우연히 Canvas를 이용한 Coverflow 라이브러리가 있을 것 같아서 검색해보니 역시 있네요.
근데 얘좀 잘못 만들어진 듯-_- Canvas를 여러개 만들어놓고 돌리고 있네요-_- Canvas 하나면 될 듯한데...




사이트
http://jcoverflow.sourceforge.net/

사용법은 파일 다운로드해서 압축풀면, coverflow.js랑 coverflow.css넣고,
[code]<div id="coverflowHolder">
    <div id="__cvfl-coverflow-holder" style="display:none">
        <div id="__cvfl-coverflow">
            <div id="__cvfl-coverflow-wrapper"></div>
            <div id="smallerPreview"></div>
            <div id="__cvfl-coverflow-label"></div>
        </div>
    </div>
</div>[/code]
이런 div를 html에 넣고,
[code]Coverflow.init([리스트배열], {createLabel, onSelectCenter, refill});[/code]
이런식으로 호출해주면 되네요.
저기 리스트배열에는
[{src, labelObject}] 형식으로 src는 이미지 주소를 넣고, labelObject는 선택되었을 때 넣을 데이터를 넣으면 나중에 보여줄 때 편리하게 하는 것 같습니다.
그리고, 함수정의로 createLabel은 현재위치의 coverflow의 정보를 보여주기 위한 html을 리턴하는 함수입니다.
onSelectCenter는 선택된 것 클릭했을 때 액션이고,refill은 잘 모르겠습니다-_-

여러가지 기능이 더 있는 것 같은데, 몬가 문서정리가 하나도 안되어있는 것 같습니다.

아! 주의사항!
coverflow.js파일을 상단에 임포트하려고할 때 window.addEventListener가 undefined가 나와서, 로드가 완료된 뒤 처리하도록 바꿔야해요. 휠이 먹히도록 하는 부분인 듯 한데,
728~729줄을
[code]window.onload = function(){
    두줄넣기
}
[/code]
요렇게 처리!

이걸 응용해서만든! 가수별 앨범목록!
http://mudchobo.tomeii.com/jcoverflow/


안드로이드에서도 잘 되네요. 근데, 약간 느리고, 문제가 있긴 하지만, 일단 잘됩니다(응?)...
사용자 삽입 이미지

 
Posted by 머드초보
,
 
트위터 공식API홈페이지에 가면 PHP용 OAuth라이브러리가 2개가 있는데요. 두개중에 이게 더 나은 것 같아서...

트위터 공식api홈페이지 - http://dev.twitter.com/

OAuth라는 게 2년전에 삽질했던 것이 기억나네요.
트위터도 이 방식으로 인증을 하게 되는데요. 간단하게 동작원리를 설명하면......

1. 연동할 어플리케이션을 등록합니다.
2. 등록하게 되면 Consumer key와 Consumer secret을 발급받습니다.
3. 명시된 Request Token url로 이 키를 이용해 요청하게 되면 인증 url로 가서 이 어플에서 계정접근을 허용할 것인지 묻습니다.
4. 그리고, 허용하게 된다면 Access Token url로 이동해 Access Token을 발급 받습니다.
5. 이 받게 된 AccessToken을 이용해서 해당 어플리케이션은 글쓰고, 정보를 불러올 수 있게 됩니다.

이런 일련의 과정이 있지만, LIbrary가 있으면, 이딴거 몰라도 됩니다-_- 라이브러리가 다 알아서 하니까-_-

일단 앱을 등록합니다.
http://dev.twitter.com/apps/new
application type은 browser로 하고, callback url은 access_token까지 다 받은 다음에 우리 웹사이트로 돌아오기 위한 콜백url을 지정하는 것입니다.
등록을 한 다음에, 해당 애플리케이션의 detail을 보게 되면 consumer key랑 consumer secret이 있습니다.

그리고 라이브러리를 받습니다.
http://github.com/abraham/twitteroauth/downloads
그리고 파일들을 통째로 서버에 올립니다.
그리고, config.php파일을 수정합니다.
consmuer_key랑 consumer_secret을 위에서 등록한 앱의 키값을 등록!
callback은 인증을 하고 accesstoken을 얻은 뒤, 우리 앱으로 돌아올 때 callback url을 지정합니다. 그대로 올렸다면 폴더에 callback.php가 있기 때문에 http://localhost/callback.php가 됨!

그리고, 이제 localhost/index.php를 열고, Sign in with Twitter 클릭하면...
사용자 삽입 이미지
수락하면 대충 이런 데이터를 받습니다.
사용자 삽입 이미지

소스를 보게 되면 callback.php에서 AccessToken을 요청해서 받아오게 되는데, AccessToken과 AccessTokenSecret값만 있으면 글을 쓰거나 정보를 가져올 수 있게 됩니다.
이것을 자신의 사이트에 적용을 하게 된다면 db에다가 저장해놓고 쓰게 된다면, 우리사이트의 인증만으로도 트위터에 글을 쓸 수 있게 됩니다.
인증을 취소할 경우를 대비해서 account/verify_credentials api를 요청해 인증이 살아있는지 확인을 해야합니다.
[code]$connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, $access_token['oauth_token'], $access_token['oauth_token_secret']);[/code]
이렇게 connection객체만 가지고 있으면
[code]$connection->post('statuses/update', array('status' => date(DATE_RFC822)));[/code]
이런 형태로 api를 호출해서 데이터를 가져올 수 있습니다.
 
Posted by 머드초보
,