최근 개발(?)한 코드(?)들

페르시아에서는 왕이 미치면 카프카스로 전쟁을 하러 간다더니 저는 요즘 웹진 만들면서 꾸역꾸역 삽질하며 본의 아니게 키운 기초체력을 활용하여 오도방정 뛰어다니는 중입니다. 음… 이번 학기 성적은 과연 어떨까…

저번에 올린 Noto Sans 테스트 페이지는 건너뛰고, 그 이후 추가로 작업한 것들을 부끄러우나마 올려 봅니다 *-_-* 참고로 위에 있을수록 최신작(?)입니다.

is.gd / waa.ai URL shortener

완전히 개인적인 이유로 작업함. 뒤에 ?from=주소 형식으로 넣으면 prompt를 띄워서 축약주소를 가져갈 수 있게 해놓았다. 에러 핸들링까지는 했는데, isset()은 다룰 줄 모르겠어서 일단 못 함. (그리고 그걸 각 쇼트너 api들이 알아서 해주고있다... ㅋ... ㅋㅋㅋ... 역시 개인의 무능이 체제의 공교함으로 커버되는 21세기로군 ㅋㅋㅋㅋㅋㅋㅋㅋ) 기왕이면 프롬프트 종료 후 history.back()까지 먹여주면 좋았겠지만, 그건 아직은 내 능력 밖이라고 생각된다.

북마크릿으로 쓰시려면 적당한 즐겨찾기를 만드시고 주소를 아래와 같이 수정하세요.

is.gd

javascript:void(location.href='http://eojin.esy.es/isgd.php?from='+encodeURI(location.href))

waa.ai

javascript:void(location.href='http://eojin.esy.es/waaai.php?from='+encodeURI(location.href))

핵심: PHP JSON 파싱 // 다차원 배열 참조 // 에러 핸들링 // sgwlan에서 waa.ai가 멀웨어로 캡쳐되는 문제에 대하여 -_-;

Y'over There!

태어나 처음으로 작성해 본 php 웹앱(?). Yo 사용자에게 메시지 내용이 파라미터로 담긴 PHP url을 GET방식으로(;;;) 전송한다. 수신자는 * from YOVERTHERE라는 노티를 받고, 눌러 보면 송신자가 보낸 메시지가 나온다. 그냥 Yo라는 초단순 앱을 가지고 API 실습을 해 보는 데 의의가 있었음.

핵심: API 사용하기

adblock bookmarklets

픽시브 광고 안보이게 없애기(for touch.pixiv.net):

javascript:(function(e,a,g,h,f,c,b,d){if(!(f=e.jQuery)||g>f.fn.jquery||h(f)){c=a.createElement("script");c.type="text/javascript";c.src="http://ajax.googleapis.com/ajax/libs/jquery/"+g+"/jquery.min.js";c.onload=c.onreadystatechange=function(){if(!b&&(!(d=this.readyState)||d=="loaded"||d=="complete")){h((f=e.jQuery).noConflict(1),b=1);f(c).remove()}};a.documentElement.childNodes[0].appendChild(c)}})(window,document,"1.3.2",function($,L){$("span[css*='premium_info_bar'], span[class*='premium_info_bar'], .comic-banner, a[href*='premium'], .ad-banner, #add-to-home-screen, .premium-page, .info, .ad-container, .ad-body, div[id*='nend'], div[class*='ads-']").css("display","none");});

경향신문 모바일 광고 숨기기(for m.khan.co.kr):

javascript:(function(e,a,g,h,f,c,b,d){if(!(f=e.jQuery)||g>f.fn.jquery||h(f)){c=a.createElement("script");c.type="text/javascript";c.src="http://ajax.googleapis.com/ajax/libs/jquery/"+g+"/jquery.min.js";c.onload=c.onreadystatechange=function(){if(!b&&(!(d=this.readyState)||d=="loaded"||d=="complete")){h((f=e.jQuery).noConflict(1),b=1);f(c).remove()}};a.documentElement.childNodes[0].appendChild(c)}})(window,document,"1.3.2",function($,L){$("#nbpmobilead_div, #mz_wrap, #div_photolink, iframe, .m_btm_ad, span[class*='_2beon'], div[class*='_2beon']").css("display","none");});

다른 php로 넘어갈 때마다 새로 눌러줘야 하는 매우 불편한 애드온. 쉽게 말해서 실제로는 쓸모가 없다. 그냥 jQuery로 작성한 스크립트로 북마클릿을 만들 수 있다는 데 의의를 두기로. 그놈의 동일출처 정책이 뭔지...

(혹시나 써보고 싶으시다면 다음과 같이 합니다. ①아무 페이지나 북마크(즐겨찾기)에 추가하세요. ②위의 코드를 쫙 복사하세요. ③방금 북마크한 페이지를 수정(편집)합니다. 이름은 적당히 "픽시브 광고 ㄲㅈ" 같은 걸로 바꾸시고, 기존 주소(URL)를 지우고, 방금 복사한 위의 코드를 붙여넣고, 저장 또는 적용하세요. ④해당 사이트를 돌아다니다가 광고가 짜증날 때마다 북마크를 누릅니다. 끗)

핵심: benalman.com/code/test/jquery-run-code-bookmarklet (...;;;)

초간단 선택지 카드

웹진에 사용할 일이 있을 것 같아 꼬박 3시간 걸려 만든 j쿼리 장난입니다. 각 카드에는 고유번호 id가 붙어 있고, 버튼을 누르면 버튼에 부여돼 있던 번호를 고유번호로 가지는 카드가 나타나는 식이죠. 실행취소 버튼은 만들 수가 없다는 게 함정 ㅋ

핵심: replace(/\D/,'') // $(".phase[id=p"+to+"]").show();

초간단 폰 배경화면 생성기

제가 혼자 쓰려고 만든 것인데 사용법은 간단합니다. 두 개의 빈칸에서 색을 선택하고 SET을 누르면 그라데이션이 만들어지는데 이거 그냥 SAVE IT 눌러서 저장해 쓰면 되는겁니다. 색은 hex와 name을 지원하고, 잘 모르겠으면 그냥 옆의 RANDOM 누르면 알아서 채워줍니다. 모바일에서 SAVE가 잘 안 되시는 분들은 기본 브라우저에서 직접 열어봐 주세요.

핵심: Math.random 함수로 0부터 ffffff까지 사이에서 랜덤 돌려 16진수로 반환받기 // 문서 전체 내용에서 특정 클래스 찾아 셀렉트하기 // toDataURL 메소드로 base64인코딩해서 href로 돌리기

초간단 더보기 버튼

웹진 워드프레스에 삽입할 자체 제작 숏코드용으로 목업했던 것입니다. 실제 shortcode 함수에서는 [more text="버튼에 들어가는 말" colorback="버튼 색과 말풍선 테두리 색" colortext="버튼에 들어가는 말의 색"]말풍선에 들어갈 말[/more] 구조로 사용 가능합니다.

핵심: .next() // calc(50% - 14px); // border-left-color, border-left-style 등으로 잘게 쪼개어 지정해주고 jQuery에서 꼼꼼하게 셀렉트하기

위키백과 링크 자동 전환기

역시 웹진 개발 과정에서 쾌적한 독자 경험을 위해 혼자서 뚝딱뚝딱 짜본 코드입니다. 문서 내의 wikipedia를 포함하는 모든 링크에 대하여, 사용자가 모바일로 접속했을 경우 링크를 모바일 전용 링크로 덮어씁니다. 위키백과가 아직은 자체적으로 리디렉션을 하지 않는 게 이상하다 싶어서, 그리고 제가 폰으로 보는 PC뷰의 잔글씨를 참을 수 없어서 만들었습니다.

핵심: if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { (…함수…) } // position:absolute; top:50%; left:50%; transform:translatex(-50%) translatey(-50%);

비상용 명함 제조기

페이지가 시키는 대로 버튼을 누르거나 입력하다 보면 명함이 완성됩니다. 우클릭해서 다른 이름으로 저장해 쓰면 되는 것이지요. (그렇습니다 이때는 아직 toDataURL같은 건 꿈에도 몰랐습니다.) canvas를 배우느라 여념이 없어서 많은 뒷이야기가 있었지만 그냥 이제는 다 잊기로 한 참 서글픈 코드였습니다. 처음 만들었을 땐 너무 웃겨서 낄낄거리면서 했다고 합니다.

핵심: 문서 로딩 시점에서 하얗게 색칠된 명함 크기 캔버스 작성 // 이미지를 file로 받아와서(이 원리는 아직도 모름…) 또는 기존 URL로부터 삽입 // 버튼 클릭하면 그 버튼 근처 input에서 val 얻어다가 캔버스에 뿌리기

친척용 컨디션 카드

잘 읽고 자기가 해당이 있는 조건들을 클릭해 선택하고 출력해서 목에 걸고 다니면 되는 카드입니다. 여기 올라온 코드들 중 제일 구현이 막막했던 녀석인데 j쿼리 없이 checkbox "마법"으로 해결하는 레퍼런스가 있어서 그걸로 해결봄. “어진이 아이디어는 어진이가 디자인까지 해야 100%가 나오는 것 같아”라는, 마냥 기분 좋아할 수만은 없는 피드백이 있었습니다.

핵심: checkbox 자체는 숨기고 그 옆에 label for로 연결을 시켜 여기에 각 노드를 넣음 // .checkbox-class:checked ~ .class // @media print로 not:checked display none

flickOut bookmarklets

javascript:(function(){var a=document.getElementById('allsizes-photo').getElementsByTagName('img')[0].src;prompt('Ctrl+C to use it :-)',a)})()

flickr.com에서 저작권이 'All Rights Reserved'로 설정돼 있어서 다운로드를 못 하는 사진들이 있을 수 있죠. 하지만 이런 사진들도 '모든 크기 보기' 페이지는 지원하는데요, 거기서 사용하시면 됩니다. 이 북마클릿을 설치해 두셨다가 "https://www.flickr.com/photos/(영숫자)/(숫자)/sizes/(알파벳)"처럼 생긴 주소의 모든 크기 페이지에서 북마클렛을 실행해 주세요. 이미지 주소를 복사할 수 있는 경고창을 띄웁니다.

핵심: getElementById, getElementByTagName.src (네 그렇습니다 왕초보 코드입니다.)

앞으로도 추가가 될… 까나?

혹시나 소스를 보시거나 포크하시려거든 코드펜 현관에서 엽토군을 찾아주세요.