; 개발자 센터 | tyle

개발자 센터


여러분의 웹사이트/CMS에 타일을 포함시켜, 이용자가 직접 이미지를 만들 수 있도록 할 수 있습니다. 타일은 모달창으로 실행되어 완벽하게 여러분의 웹사이트의 일부인 것처럼 작동됩니다. 사용자는 별도의 가입이나 인증절차 없이 타일인지 모른 상태로 여러분의 웹사이트에서 작업을 완료합니다.

Demo

jsFiddle에서 예제확인

준비

클라이언트 토큰 생성

api_key는 일단 예시와 같이 testApiKey로 설정하십시오. support@tyle.io로 연락을 주시면 독립된 api_key를 먼저 발급해드립니다.

스크립트 삽입

아래의 스크립트를 웹사이트에 삽입하면 모든 준비가 완료됩니다.

 <script>
      (function(){var j=document.createElement("script");j.type="application/javascript";j.src='https://tyle.io/sdk/sdk-0.1.1.js';document.body.appendChild(j);})()
</script>

작동

타일 구동 메소드

여러분의 웹사이트에서 아래의 함수를 실행하면 웹사이트내에 타일 모달창이 작동되고 콜백을 발생시킵니다. 예제는 아래와 같습니다.

 <script>
      tyleSDK.open({
            api_key : 'testApiKey', // 준비중
            user_token : 'testUserToken',
            done_callback : function(data){
                  // do something using data.images
            }
      });
</script>

Parameters

슬라이드 내부의 값에 대한 설정값은 배열로도 지정이 가능합니다(ex. t1[]=나는&t1[]=천재다)
이렇게 되어 있는 것은 필수 파라미터입니다.

Key Type Default Description
api_key String API를 이용하기 위한 웹사이트에 할당된 고유키
user_token String 여러분의 웹사이트에 로그인된 사용자의 고유키입니다. 클라이언트상 노출되므로 임의 조정이 어렵도록 알파벳 대소문자와 숫자가 포함된 해쉬된 형태의 문자열이 좋습니다.
done_callback Function function(data){ } 사용자가 타일에서 생성한 이미지들을 여러분의 웹사이트에서 어떻게 처리할 것인가 정의하는 콜백함수입니다. 이 함수를 통해서 여러분은 화면에 표시 및 자체 DB에 저장할 수 있습니다. data에는 base64로 인코딩된 이미지들과 텍스트 정보가 들어 있습니다.
 { 
    card_id : "1I3ecoe796c",
    title : "테스트 입력 카드",
    slides : [
        {
            t1 : '제목 텍스트 정보',
            t2 : '본문 텍스트 정보'
        }
    ],
    images : [
        'data:image/png;base64,iVBO...',
        'data:image/png;base64,bAbo...'
    ]
}
cancel_callback Function function(data){ } 사용자가 발행까지 가지 않고 모달창을 취소하는 경우입니다.
modal_max_width Number 1024 타일 모달창의 최대 크기로 단위는 px입니다.
modal_max_height Number 800 타일 모달창의 최대 크기로 단위는 px입니다.
selector String #target-dom 타일을 모달이 아닌 특정 Dom내에 위치시킬 수 있습니다.
no_sidebar Boolean false 좌측 상단의 사이드바와 사이드바를 여는 버튼을 숨길 수 있습니다.
no_header Boolean false 최상단의 관련 도구들을 숨길 수 있습니다. 완료 버튼도 함께 사라지기 때문에 외부 페이지에서 tyleSDK.save() 혹은 tyleSDK.done() 을 호출하도록 하여야합니다.
no_footer Boolean false 하단의 타일 사이트 관련 정보를 숨길 수 있습니다.
card_id String cPYEjPwiTB1472616291 시작시 특정 카드 수정모드로 진입합니다.
duplicate_card_id String cPYEjPwiTB1472616291 시작시 특정 카드의 디자인과 내용으로 진입합니다.
layout_id String FS 시작시 특정 레이아웃 타입으로 진입합니다.
T B L R FS MS SS TS BS LS RS
container_padding Number 23 시작시 컨테이너 여백을 지정합니다.
box_padding Number 23 시작시 박스 안쪽 여백을 지정합니다.
color_id String warm_00 시작시 특정 색상으로 진입합니다.
색상 전체보기
size_id String size-10 시작시 사이즈를 지정합니다.
사이즈 전체보기
size String 900x900 시작시 사이즈를 지정합니다. 단위는 px입니다.
box_enabled Boolean true 시작시 박스 보이기 여부를 지정합니다.
true false
box_gradient String none 시작시 박스의 그라데이션 여부를 지정합니다.
none oneway twoway
box_border_style String 시작시 박스의 외각선 모양을 지정합니다.
solid dotted
box_border_type String 시작시 박스의 선모양을 지정합니다.
tblr tb lr none
box_border_radius Number 시작시 박스의 동그란 모양을 결정합니다.
0 100
image_enabled Boolean true 시작시 배경이미지 보이기 여부를 지정합니다.
true false
image_url String 시작시 배경이미지를 지정합니다.
http://domain.com/example.jpg
image_scale Number 1 시작시 배경이미지의 크기를 지정합니다.
100 110 120 130 140 150 160 170 180 190 200
image_rotate Number 0 시작시 배경이미지의 회전을 지정합니다.
0 90 180 270
image_source String 네모사진 시작시 배경이미지의 출처를 명시합니다.
네모사진
logo_enabled Boolean true 시작시 로고 보이기 여부를 지정합니다.
true false
logo_url String 시작시 로고를 지정합니다.
http://domain.com/example.jpg
logo_size String m 시작시 로고를 사이즈를 지정합니다.
s m l xl
logo_align String 시작시 로고의 가로 정렬을 지정합니다.
left center right
logo_valign String 시작시 로고의 세로 정렬을 지정합니다.
top middle bottom
logo_invert String 시작시 로고의 특수효과를 지정합니다.
auto y n w b
t1_enabled Boolean true 시작시 제목텍스트를 보이기 여부를 지정합니다.
true false
t1 String 시작시 임의의 제목텍스트를 지정합니다.
t1_id String 시작시 제목텍스트를 지정합니다.
폰트 전체보기
t1_size Number 시작시 제목텍스트 사이즈를 지정합니다.
60 70 80 90 100 110 120 130 140 150 160
t1_align String 시작시 제목텍스트 가로정렬을 지정합니다.
left center right justify stretch
t1_valign String 시작시 제목텍스트 세로정렬을 지정합니다.
top middle bottom
t1_area String 시작시 제목텍스트가 박스안으로 들어갈지 지정합니다.
in out
t2_enabled Boolean true 시작시 본문텍스트를 보이기 여부를 지정합니다.
true false
t2 String 시작시 임의의 본문텍스트를 지정합니다.
t2_id String 시작시 본문텍스트를 지정합니다.
폰트 전체보기
t2_size Number 시작시 본문텍스트 사이즈를 지정합니다.
30 40 50 60 70 80 90 100 110 120 130
t2_align String 시작시 본문텍스트 가로정렬을 지정합니다.
left center right justify
t2_valign String 시작시 본문텍스트 세로정렬을 지정합니다.
top middle bottom
url String 시작시 임의의 웹주소의 컨텐츠를 가져와서 지정합니다. 제목/본문/대표이미지 등이 인식됩니다.(현재 미지원)
https://yourdomain.com
return_type String base64 어떤 타입으로 이미지 결과를 반환 받을건지 지정합니다.
base64 url modal
language String ko 사용가능한 언어코드
  • en - English
  • ko - 한국어

타일 저장/추출 메소드

타일 모달내에서 추출까지 대부분의 작업은 이루어지지만, CMS등에서 강제 저장을 발생시키기 위해서는 아래의 메서드를 호출하십시오.

 <script>
      tyleSDK.save()
</script>

모달 외부에서 강제로 추출까지 진행하려면 아래의 메서드를 호출하시면 됩니다. 이 메서드가 호출되면 타일 SDK는 전달받은 doneCallback을 호출합니다.

 <script>
      tyleSDK.done()
</script>

타일 종료 메소드

타일 모달의 배경이나 X를 눌러 사용자가 닫을 수도 있지만, 웹사이트 자체에서도 수동으로 닫을 수 있습니다.

 <script>
      tyleSDK.close()
</script>

스타일링하기

여러분의 웹사이트에서 구동되는 모달창의 프레임은 간단하게 CSS 변경만으로도 바꿀 수 있습니다. 모달을 구성하는 엘리먼트는 #tyle-sdk-wrapper라는 최상위 객체에 포함되어 있으므로 자체 CSS 설정시 #tyle-sdk-wrapper #tyle-sdk-iframe-wrapper {}와 같이 최상위 객체를 같이 지정하여 오버라이드를 해주시면 됩니다.

엘리먼트의 계층구조는 아래와 같습니다.

 <div id="tyle-sdk-wrapper">
      <div id="tyle-sdk-iframe-wrapper">
            <div id="tyle-sdk-iframe-bg"></div>
            <iframe id="tyle-sdk-iframe" frameborder="0"></iframe>
      </div>
      <div id="tyle-sdk-overlay"></div>
</div>

Save base64 as image binary

done_callback을 통해서 전달받은 base64는 인터페이스상에서는 플랫폼에 상관없이 쉽게 사용가능합니다. 이 이미지를 자체 서버에 저장하는 경우는 아래의 코드들을 참고해주세요.

Node.js
http://stackoverflow.com/questions/6926016/nodejs-saving-a-base64-encoded-image-to-disk
http://stackoverflow.com/questions/20267939/nodejs-write-base64-image-file
PHP
http://stackoverflow.com/questions/11511511/how-to-save-a-png-image-server-side-from-a-base64-data-string
ASP
http://stackoverflow.com/questions/14629104/save-base64-to-an-image-using-classic-asp

iOS / Android에서의 호출

모바일의 경우에 성능상의 문제로 SDK script를 호출하기 보다 직접 create 페이지를 호출하는 것하고 결과에 대한 콜백을 받는 것을 추천합니다. 웹뷰 호출시 https://tyle.io/create?api_key=xxx&user_token={sdk_id+xxx} 주소를 부르고 네이티브에서 tyleSDKCallback(jsonResult)를 웹뷰쪽에서 호출 할 수 있도록 건네주시면 됩니다.

직접 호출하는 경우에는 user_token 값 앞에 sdk id를 붙여서 호출하셔야합니다. sdk id가 100이고 기본적인 user_token이 asdf라면 user_token=100-asdf와 같이 호출해주여야합니다. sdk id는 hhlee@tyle.io에 문의를 주시면 됩니다.

※ jsonResult 값은 done_callback과 동일합니다.

iOS

Switf3 기반 WKWebView를 이용합니다.

참고자료 :

Android

webview.addJavascriptInterface를 이용합니다.

참고자료 :

SDK내 모든 카드리스트 호출

귀사의 SDK를 이용하여 작성된 카드 리스트를 불러올 수 있습니다. 가입한 계정의 이메일을 {your@example.com}에 입력하여 간단한 인증을 합니다.

GET https://tyle.io/sdk-cards/{api_key}/{your@example.com}.json

Parameters

Key Type Default Description
last_card_id String last_card_id보다 작은 조건으로 리스트를 불러옵니다. 보통 리스트에서 '더보기'를 눌렀을 때 추가적으로 불러오게 되는데 이때 지정을하여 다음 페이지를 불러 올 수 있습니다.
 {
    "status":"done",
    "message":"",
    "rows":[
        {
            "user_id":"UkxEIJTIFdPS0FJhZGlv",
            "title":"테스트입니다!",
            "tags":"자동디자인,테스트,카드뉴스",
            "hits":0,
            "description":"테스트로 작성한 설명",
            "created_at":"2016-11-02 10:29:46",
            "updated_at":"2016-11-04 11:37:55",
            "lang":"ko",
            "card_id":"xvbZFofzqtm"
            "view_url":"https://tyle.io/cards/xvbZFofzqtm"
            "update_url":"https://tyle.io/update/xvbZFofzqtm"
        }
        ...
    ]
}

특정 유저의 모든 카드리스트 호출

특정 유저가 SDK를 이용하여 작성된 카드 리스트를 불러올 수 있습니다. SDK 호출시 입력한 user_token을 이용하시면 됩니다.

GET https://tyle.io/sdk-cards/{api_key}/{user_token}.json

Parameters

Key Type Default Description
last_card_id String last_card_id보다 작은 조건으로 리스트를 불러옵니다. 보통 리스트에서 '더보기'를 눌렀을 때 추가적으로 불러오게 되는데 이때 지정을하여 다음 페이지를 불러 올 수 있습니다.
 {
    "status":"done",
    "message":"",
    "rows":[
        {
            "user_id":"UkxEIJTIFdPS0FJhZGlv",
            "title":"테스트입니다!",
            "tags":"자동디자인,테스트,카드뉴스",
            "hits":0,
            "description":"테스트로 작성한 설명",
            "created_at":"2016-11-02 10:29:46",
            "updated_at":"2016-11-04 11:37:55",
            "lang":"ko",
            "card_id":"xvbZFofzqtm"
            "view_url":"https://tyle.io/cards/xvbZFofzqtm"
            "update_url":"https://tyle.io/update/xvbZFofzqtm"
        }
        ...
    ]
}

특정 유저의 카드 삭제

특정 유저의 카드를 삭제합니다. SDK 호출시 입력한 user_token을 이용하시면 됩니다.

DELETE https://tyle.io/sdk-cards/{api_key}/{user_token}/{card_id}.json
 {
    "status":"done",
    "message":""
}

Add Image Library

각 유저의 '나의 이미지들'에 임의로 등록이 가능합니다.

POST https://tyle.io/custom/add-image-libs

Parameters

Key Type Default Description
api_key String API를 이용하기 위한 웹사이트에 할당된 고유키
user_token String 여러분의 웹사이트에 로그인된 사용자의 고유키입니다. 클라이언트상 노출되므로 임의 조정이 어렵도록 알파벳 대소문자와 숫자가 포함된 해쉬된 형태의 문자열이 좋습니다.
image_url[] String 업로드할 이미지에 대한 원격지 주소를 등록합니다. 배열키이므로 여러개를 등록하실 수 있습니다.
 {
    "status":"done",
    "code":200,
    "message":"Success upload",
    "data":[]
}

주소로 통해 시작틀 생성

타일의 제작화면을 열 때, 지정된 파라미터를 이용하여 시작틀을 설정할 수 있습니다.

GET https://tyle.io/create?k1=v1&k2=v2...
Key Type Default Description
duplicate_card_id String cPYEjPwiTB1472616291 시작시 특정 카드의 디자인과 내용으로 진입합니다.
layout_id String FS 시작시 특정 레이아웃 타입으로 진입합니다.
T B L R FS MS SS TS BS LS RS
container_padding Number 23 시작시 컨테이너 여백을 지정합니다.
box_padding Number 23 시작시 박스 안쪽 여백을 지정합니다.
color_id String warm_00 시작시 특정 색상으로 진입합니다.
색상 전체보기
size_id String size-10 시작시 사이즈를 지정합니다.
사이즈 전체보기
size String 900x900 시작시 사이즈를 지정합니다. 단위는 px입니다.
box_enabled Boolean true 시작시 박스 보이기 여부를 지정합니다.
true false
box_gradient String none 시작시 박스의 그라데이션 여부를 지정합니다.
none oneway twoway
box_border_style String 시작시 박스의 외각선 모양을 지정합니다.
solid dotted
box_border_type String 시작시 박스의 선모양을 지정합니다.
tblr tb lr none
box_border_radius Number 시작시 박스의 동그란 모양을 결정합니다.
0 100
image_enabled Boolean true 시작시 배경이미지 보이기 여부를 지정합니다.
true false
image_url String 시작시 배경이미지를 지정합니다.
http://domain.com/example.jpg
image_scale Number 1 시작시 배경이미지의 크기를 지정합니다.
100 110 120 130 140 150 160 170 180 190 200
image_rotate Number 0 시작시 배경이미지의 회전을 지정합니다.
0 90 180 270
image_source String 네모사진 시작시 배경이미지의 출처를 명시합니다.
네모사진
logo_enabled Boolean true 시작시 로고 보이기 여부를 지정합니다.
true false
logo_url String 시작시 로고를 지정합니다.
http://domain.com/example.jpg
logo_size String m 시작시 로고를 사이즈를 지정합니다.
s m l xl
logo_align String 시작시 로고의 가로 정렬을 지정합니다.
left center right
logo_valign String 시작시 로고의 세로 정렬을 지정합니다.
top middle bottom
logo_invert String 시작시 로고의 특수효과를 지정합니다.
auto y n w b
t1_enabled Boolean true 시작시 제목텍스트를 보이기 여부를 지정합니다.
true false
t1 String 시작시 임의의 제목텍스트를 지정합니다.
t1_id String 시작시 제목텍스트를 지정합니다.
폰트 전체보기
t1_size Number 시작시 제목텍스트 사이즈를 지정합니다.
60 70 80 90 100 110 120 130 140 150 160
t1_align String 시작시 제목텍스트 가로정렬을 지정합니다.
left center right justify stretch
t1_valign String 시작시 제목텍스트 세로정렬을 지정합니다.
top middle bottom
t1_area String 시작시 제목텍스트가 박스안으로 들어갈지 지정합니다.
in out
t2_enabled Boolean true 시작시 본문텍스트를 보이기 여부를 지정합니다.
true false
t2 String 시작시 임의의 본문텍스트를 지정합니다.
t2_id String 시작시 본문텍스트를 지정합니다.
폰트 전체보기
t2_size Number 시작시 본문텍스트 사이즈를 지정합니다.
30 40 50 60 70 80 90 100 110 120 130
t2_align String 시작시 본문텍스트 가로정렬을 지정합니다.
left center right justify
t2_valign String 시작시 본문텍스트 세로정렬을 지정합니다.
top middle bottom
url String 시작시 임의의 웹주소의 컨텐츠를 가져와서 지정합니다. 제목/본문/대표이미지 등이 인식됩니다.(현재 미지원)
https://yourdomain.com

카드의 데이터

GET https://tyle.io/explore/{카드번호}.json

Response(json)

 {
    "status":"done",
    "message":"",
    "row":{
        "card_id":"xvbZFofzqtm",
        "title":"항상 따고!",
        "slides":[
            {
                "t1":"여기를 두 번 클릭하여 제목을 입력해주세요",
                "t2":"여기를 두 번 클릭하면 본문을 여러줄 입력 가능합니다."
            },
            {
                "t1":"여기를 두 번 클릭하여 제목을 입력해주세요",
                "t2":"여기를 두 번 클릭하면 본문을 여러줄 입력 가능합니다."
            }
        ],
        "images":[
            "https://d1s0awd0642fry.cloudfront.net/cards.exports/xv/xvbZFofzqtm/tyle-xvb-1.png",
            "https://d1s0awd0642fry.cloudfront.net/cards.exports/xv/xvbZFofzqtm/tyle-xvb-2.png"
        ]
    }
}

타일을 운영하면서 만든 여러가지 소스들입니다. 모두 MIT 라이센스이므로 자사에 자유롭게 사용가능합니다.

Jquery - CardNews Player

타일의 플레이어는 이미지들만 지정하면 해당 이미지들을 자유롭게 플레이할 수 있는 라이브러리입니다. 마우스 기반, 터치기반에서도 자유롭게 스와이프할 수 있으며 반응형입니다.

https://github.com/tyleteam/jquery-tyle-player



jQuery - Progress Indicator

컨텐츠페이지에서 현재 유저가 얼마나 읽었는지 상태를 알려주는 막대입니다.

https://github.com/tyleteam/jquery-progress-indicator