페이스북의 공유, 좋아요, 댓글수 조회하는 법

작년에 한 번 블로그 방문객 벼락 맞은 이후로, 정말 오랜만에 블로그가 흥했던 한 주였다. 블로그 방문객이 갑자기 팍 늘어나는 이유는 100% SNS 때문이고, 99% 페이스북 때문이다. 포스팅 URL을 트위터 개인 계정으로 공유하고 있긴 하지만 영향력이 미미하고, 이상한모임 페이스북 페이지로도 보내는데 그 덕을 많이 보고 있다. 페이스북 개인 계정은 거의 안 쓰고 있어서, 이쪽으로는 공유를 안 하고 있다. 어떤 글들이 페이스북에서 반응이 좋았는지 그리고 그런 글들만 뽑아두고 싶은 생각이 들어 간단히 작업해봤다. http://api.facebook.com/restserver.php?method=links.getStats&urls=조회하고싶은URL을 조회하면 XML형태로 리턴값이 나오는데, 좋아요/공유/댓글 수와 그 합산 값이 함께 표시된다. 블로그 포스팅 하단에 ‘좋아요’버튼에 표시되는 숫자는 합산된 수치다. 총 290여개의 글을 썼는데, 이 중에 합산 수치가 30개… Read the rest

[PHP] 태그의 attribute 값, 파라미터 값 추출 등

문자열 처리 하다보면 워낙 자주 쓰이는 것들인데, 그때마다 찾게 되어서 까먹지 않도록 정리. 속성 값 구하기 <img src=“OOOOO” width=“OOO” height=“OOO”> 와 같이 되어 있을 때, src, width, height 값을 구하는 수식 1234 function getAttribute($html,$tag) {     preg_match( '@'.$tag.'="([^"]+)"@' , $html, $match );    return array_pop($match);} 파라미터 값 구하기 http://www.dev-diary.com/index.php?a=OOO&b=OOO&c=OOO 와 같이 되어 있을 떄, a, b, c 값을 구하는 수식 12345 function getParameter($url,$tag) {    $parts = parse_url($url);    parse_str($parts['query'], $query);    return $query[$tag];        } 태그 사이값 구하기 <b>OOOOOOO</b> 와 같이 되어 있을 때, 태그 사이에 있는 값 구하는 수식 12345 function getTextBetweenTags($string, $tagname) {    $pattern = "/<$tagname>(.*?)<\/$tagname>/";    preg_match($pattern, $string, $matches);    return $matches[1];}  … Read the rest

[Android Tutorial] Action Bar 스타일 적용

예전에 좌우 스와이프 가능한 탭 기반의 앱 만들기에서 살짝 다뤘던 것이 액션바였는데, 이번에 이 스타일의 앱을 만들면서 부딪혔던 문제들이 있어서 추가로 기록한다. 컬러, 스타일 등을 바꾸는 것이 꽤 복잡한데 Android Action Bar Style Generator를 활용하면 정말 쉽게 바꿀 수 있다. 하지만 한 가지 안 되는 것이 탭 메뉴의 텍스트였는데, 아래 구문을 추가하면 변경이 가능하다. Style Generator를 사용하면 styles_OOO.xml 파일이 생성되는데, 맨 위의 style 태그 사이에 아래 코드를, 12 <item name="android:actionBarTabTextStyle">@style/ActionBarTabTextStyle.Tabtheme</item><item name="actionBarTabTextStyle">@style/ActionBarTabTextStyle.Tabtheme</item> 그리고 텍스트 스타일을 지정하는 별도의 태그를 아래와 같이 설정하면 된다. 12345 <style name="ActionBarTabTextStyle.Tabtheme" parent="Widget.AppCompat.Light.ActionBar.TabText">    <item name="android:textSize">14sp</item>    <item name="android:textColor">@color/actionBarText</item>    <item name="textAllCaps">false</item></style> 그리고 기본적으로 탭에는 모든 문자가 대문자로 나오게끔 되어 있는데, textAllCaps를 false로 설정하면… Read the rest

무료영화 for olleh tv, 핫이슈에!

현재 관리하고 있는 앱은 2개가 있는데, 하나는 코믹시스트이고 하나는 무료영화 for olleh tv다. 아무래도 코믹시스트 쪽에 신경을 쓰느라 이쪽은 별로 투자를 못 하고 있는데, 혹시나 하고 살펴보니 엔터테인먼트 분야 핫이슈에 있었다 🙂 다운이 비교적 잘 나와주고 있는 덕분에 이달 안에 다운수도 4만을 넘을 것으로 보인다. 아무래도 ‘올레TV’라는 잘 나가는 서비스의 덕을 보고 있는 것일텐데, 완전히 새로운 서비스를 만드는 것에 비해 확실히 반응이 좋다. 물론, 기존 서비스에 악영향을 줘서는 안되겠고. (이 서비스는 KT측의 승인을 받았다) 기능이 카탈로그 서비스에 한정되어 있고, 무료영화 특성상 오래된 영화가 많기 때문에 새로운 가치를 만들어내기가 쉽지 않다. 그래도 업데이트를 시키긴 해야 할텐데, 어떻게 구성해야 할지 고민. 그래도… Read the rest

[크롬 익스텐션 Tutorial] 내부, 외부 링크

크롬 익스텐션 Tutorial 내부, 외부 링크 링크 설정할 때, 익스텐션 내부에서 움직이는 것과 브라우저의 페이지를 변경하는 것 2가지가 있는데, 파라미터 전달하는 부분이 약간 다르다. html 1234567891011121314151617 <!doctype html><html lang="ko">    <head>    <meta charset="utf-8">            <title>Chrome Extension Test</title>    <style>    body {        min-width: 400px;        margin: 10px;    }    </style>    <script src="test.js"></script>     </head>    <body>                    <div id="result"></div>    </body></html> js 123456789101112131415161718192021222324 document.addEventListener('DOMContentLoaded', function () {    document.getElementById('result').innerHTML="<span id='outlink' style='cursor:pointer;'>comixest.com</span><br><span id='inlink' style='cursor:pointer;'>다른 페이지</span>";    document.getElementById("outlink").addEventListener("click", myFunc, false);    document.getElementById("outlink").myParam = "http://www.comixest.com";    function myFunc(evt) {        goURL(evt.target.myParam);    }            document.getElementById("inlink").addEventListener("click", myFunc2, false);    document.getElementById("inlink").myParam = "page2.html";    function myFunc2(evt) {        goURLin(evt.target.myParam);    }       }); function goURL(key) {     chrome.tabs.getCurrent(function (tab) {      chrome.tabs.update({url: key});    });} function goURLin(key) {     document.location.href=key;} html은 그냥 div로 영역만 잡아 놓고, 나머지는 전부 js에서 했다. 브라우저의 URL을 변경하려면 permission 에서 tabs 를 설정해야 한다. 123 "permissions": [](#)"tabs"],… Read the rest

[크롬 익스텐션 Tutorial] GET, POST 방식 호출하기

이번에 웹툰 뷰어 크롬 익스텐션을 만들면서, 가장 중요한 것은 서버의 데이터를 가져와서 뿌리는 부분이었다. 여기서는 간단하게 이미지만 출력하는 부분을 구현하였다. html, js, json을 만들어내는 php 3가지가 필요하다. html 1234567891011121314151617 <!doctype html><html lang="ko">    <head>    <meta charset="utf-8">            <title>Chrome Extension Test</title>    <style>    body {        min-width: 400px;        margin: 10px;    }    </style>    <script src="test.js"></script>     </head>    <body>                    <div id="result"></div>    </body></html> js 1234567891011121314151617181920212223242526 var test = {    requestImages: function() {        var req = new XMLHttpRequest();        req.open("GET", "http://www.comixest.com/chrome/getListTest.php?no=1", true);        req.onload = this.showImages.bind(this);        req.send(null);    },    showImages: function (e) {        var response = eval('(' + e.target.responseText + ')');         for (var i = 0; i < response.data.length; i++) {            var div = document.createElement('div');             div.id="list"+i;            document.getElementById('result').appendChild(div);                         var img = document.createElement('img');            img.src = response.data[i].cover_img;             document.getElementById(div.id).appendChild(img);        }        },}; document.addEventListener('DOMContentLoaded', function () {    test.requestImages();}); json 1 {"data":[{"cover_img":"http:\/\/www.comixest.com\/img_data\/6825w.jpg"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/2698w.jpg"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/4183w.jpg"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/3044w.jpg"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/6146w.jpg"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/6273w.jpg"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/8159w.jpg"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/8779w.png"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/8442w.jpg"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/8847w.png"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/9133w.png"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/9147w.png"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/9045w.png"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/9156w.png"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/6610w.png"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/9037w.png"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/9041w.png"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/9029w.png"},{"cover_img":"http:\/\/www.comixest.com\/img_data\/9127w.png"}]} php는 DB끌어와서 json 만들어내는 부분 밖에 없으니, 코드는… Read the rest

코믹시스트 웹툰 뷰어 Chrome Extension 개발

코믹시스트를 리뉴얼하면서 정말 많이 고민했지만 뚜렷한 답을 찾지 못한 것이, 바로 웹툰이었다. 기존 사이트가 출판 만화를 중심으로 구성됐기 때문이다. 웹툰과 관련된 해결해야 할 가장 큰 문제는 ‘그 많은 웹툰 중 도대체 뭐가 재미있나’와 ‘그 많은 웹툰을 어떻게 꼬박꼬박 빠지지 않고 보느냐’ 라고 생각했다. 전자는 커뮤니티가 확대되거나 리뷰어가 보강되어야 해결될 수 있는 부분인 반면, 후자는 모아놓으면 상당수 해결될 수 있는 문제다. 그래서 모바일에는 각종 모아보기 앱이 나와있고, 왓챠와 알람몬으로 유명한 스타트업에서도 웹툰 앱을 발표했었다. (다만, 무슨 문제가 있는 것인지 양쪽 모두 앱 출시후 곧 내렸다) 웹툰 플랫폼에 악영향을 미치지 않으면서 유저가 웹툰 목록을 쉽게 관리할 수 있는 방법이 없을까, 고민하다가 Chrome… Read the rest

PHP Tutorial 사이트 추천 – PHPGang

나 같이 막 코딩하는 사람에겐 무엇보다 튜토리얼이 참 많은 도움이 되는데, 자주 찾게 되는 튜토리얼만 잘 모아놓은 사이트가 있어서 추천. 유명해서 알만한 사람은 다 알 것 같다는 생각도 들지만, 구글링해보면 국내 게시물 중에서는 언급한 게시물이 별로 없는 것 같기도. Facebook 연동 부분을 찾다가 알게된 사이트인데, 페북 연동 외에 다양한 기능에 대한 설명을 볼 수 있다. http://demo.phpgang.com/… Read the rest

PNG 파일 사이즈를 줄여주는 맥용 앱 Pngyu 추천

웹서비스를 운영하면 이미지 사이즈에 민감해질 수 밖에 없다. 계정 용량도 그렇지만, 트래픽이 문제기 때문이다. 트래픽이 많아져도, 없어도 고민 😡 가능하면 유입량은 많으면서 트래픽 사이즈는 줄이는게 중요한데, 그래서 이미지 사이즈를 줄여주는 것을 많이 찾아봤지만 이 앱이 가장 좋은 것 같다. 딱 기능이 1개 밖에 없는 앱이라서 가볍고, 압축 속도도 이 정도면 충분히 빠른 것 같다. 그 동안 tinypng를 오래 썼었는데, 올리고 다운 받는 과정이 생략되어 매우 만족스럽게 쓰고 있다. 2년 가까이 업데이트가 이뤄지고 있지 않아 이 버전이 마지막 버전이라고 보면 될 것 같다. 그리고 사용해보진 않았지만 윈도우용으로도 있다. Pngyu 다운 받기… Read the rest

추천 분석툴 Hotjar

오늘 아침에 Product Hunt에서 7월의 BEST를 소개하는 메일을 받았다. 여러 아이템 중에서 분석 툴을 제공한다는 Hotjar를 가입해봤는데, 깔끔하게 잘 만들어진 느낌이다. HEATMAPS, RECORDING, FUNNELS, FORMS, POLLS, SURVES, RECRUITERS 까지 총 7개의 툴을 제공하는데, 이 중에 HEATMAPS, RECORDINGS, FUNNELS를 사용해봤다. HEATMAPS는 웹 페이지 어느 부분에서 클릭이 일어나는지 이미지 상으로 볼 수 있고, RECORDING은 유저가 움직이는 동선을 동영상으로 바로 확인할 수 있고, FUNNELS은 가정한 이동 경로로 얼마나 많은 비중의 유저가 이동하는지 확인할 수 있다. Google Analytics나 Naver Analytics만 보면서 어느 수준 이상의 분석을 못 하고 있었는데, 이 툴을 활용하면 그 동안 놓쳤던 부분을 보완할 수 있을 것 같다. 최근에 『린스타트업』 책을 보면서… Read the rest