scriptable 한번 건들여보자.

e3hope·2022년 3월 14일
2

scriptable

목록 보기
3/3

저번에 포스팅한거처럼 오늘은 scriptable에 대한 간단한 코딩을 말해보고자 한다.
최대한 쉽게 작성하고 코딩을 모르는사람도 볼 수 있게 작성해보고자 했다. 초보자관점으로 수정에 대한 내용을 작성했으니 처음부터 코드를 작성하는 경우에는 아마 원하는 정보를 얻기 어려울 수 있다.

배경 색상 변경

const backgroundColor = "#ffffff";
{중략}
color: backgroundColor

위의 내용은 예시이다.
const, let은 변수를 선언할 수 있게 해준다. 간혹 var가 있는경우도 있는데 몰라도 색상을 변경하는데 지장이 없다. 넘어가면 된다.

다음의 backgroundColor, Color는 변수명이다. 변수란 쉽게 말하자면 '변할수 있는 값'인데 그값에 이름을 붙혀준게 변수명이다.
중요한가? Yes
중요하다. 우리는 저 변수명을 보고 이 변수가 어디에 쓰일지 예상할 수 있다.
backgroudColor(배경색) 이면 배경의 색상을 나타내는 변수로 말이다.

뒤의 "#ffffff"가 색상값이다.
이거다. 이게 하얀색이든 노랑색이든 변경을 해주는 그 색상값이다.
내가 원하는 색상으로 어떻게 바꾸냐고? 16진수색상표를 검색해서 원하는 색상을 찾는다. 그리고 저기 ffffff 대신에 넣는다. 예를 들자면 "#ff0004"를 넣으면 빨강색이되고 "#0019ff"를 쓰면 파란색이 된다. 색상이 굉장히 다양하기 때문에 예시보단 직접 색상표를 찾아 작성하는 것을 추천한다.

마지막으로 color: backgroundColor 는 위젯의 color 즉, 색상의 값을 backgroundColor라는 변수로 지정해준다. 이게 없으면 색을 지정을 못한다. 그러나 아마 여러분의 코드에는 작성되어 있을 것이니 넘어가도 좋다.

텍스트 색상 변경

let text = widget.addText("텍스트");
text.textColor = new Color("#ffffff");

텍스트 색상 변경도 배경 색상 변경과 크게 다르지 않다. 위젯텍스트의 경우 먼저 위젯을 생성하고 위젯안에 텍스트를 생성해두고 색상 변경을 진행해야한다. 또 경고창같은곳에 쓰이는 텍스트필드의 경우에도 먼저 경고창을 생성해주고 텍스트필드를 생성후 색상을 변경하면된다.

여기에서는 text가 변수명이며 위젯안의 "텍스트"라는 값이 담긴 텍스트이다. 그 후 textColor를 통해 색상을 선언해준 것이다.

색상은 위의 배경 색상 변경에서 봤듯이 16진수색상표를 검색하여 원하는 색상을 "#ffffff"에 넣어 변경을 해주도록 하자.
출저:https://docs.scriptable.app/widgettext/

공백

addSpacer(length: number)

사용방법은 Widget.addSpacer(10) 으로 한다.

공백? 그냥 코드에서 띄어쓰기 하면 되는거 아닌가? 라고 생각할 수 있는데 아니다.
따로 공백을 넣어주는 코드가 존재한다. 정확히 말하자면 위젯이나 리스트 안에 빈공간을 추가하는 것이다. 뒤의 숫자는 공백의 길이이며 잘모르겠는경우 null을 쓰면 자동으로 맞춰준다고하니 잘모르겠는경우 null을 써보자.
출처: https://docs.scriptable.app/listwidget/#-addspacer

주의점

원작성자가 무단수정금지 또는 무단배포금지가 있는 경우 건들여선 안된다.
당연한걸 왜적냐고?
적혀있어도 나하나는 괜찮겠지? 하고 공유하는 순간 배포가 되고 퍼지고 유료가 될수도 있다. 원작성자의 고생과 노력을 무시하는 행위이다. 수정하기전에 꼭 무단수정금지, 무단배포금가 있는지 확인하고 수정하도록 하자.

profile
성장하고 싶은 개발자

0개의 댓글