https://www.clien.net/service/board/cm_iphonien/15617743CLIEN

이전 글에서 사용한 위젯 설정법입니다.

1. Scriptable 앱이 필요합니다.

https://scriptable.app/

자바스크립트로 거의 모든 걸 할 수 있습니다. 개발을 좀 아시는 분이라면 이 앱 설명대로 단축어 앱보다 더 편리하게 기능을 만들 수 있습니다.

2. Weather Cal 위젯 코드를 받습니다.

Scriptable 앱의 갤러리에서도 받을 수 있으나, 거기서 받으면 예전 코드가 받아집니다.

https://github.com/mzeryck/Weather-Cal GitHub 저장소에서 weather-cal.js 파일 내용을 복사해서 스크립트를 하나 생성해줍니다.

아이폰으로 하려면 힘들기 때문에 iCloud Drive 로 컴퓨터에서 하시는 걸 추천합니다. Scriptable 폴더에 넣으시면 앱에도 나옵니다.

3. 위젯 셋업을 진행합니다.

Scriptable에서 Weather Cal 스크립트를 실행하면 셋업이 진행됩니다.

과정 중에 open weather 사이트에서 api key 발급이 필요합니다.

https://openweathermap.org/ 가입을 하시면 기본으로 api key가 하나 발급됩니다.

사이트에서 확인하거나 메일을 보시면 api key가 발급되었다면서 오는 메일이 있습니다.

api key를 셋팅 창에 붙여넣습니다.

그 외 시키는 대로 진행을 하면 됩니다.

여기까지 하면 기본 세팅된 위젯을 사용하실 수 있습니다.

4. 투명 배경

위젯 투명 배경은 사실 위젯이 들어가는 부분의 배경을 따로 만들어서 위젯 배경으로 지정하는 걸로 눈속임을 하는 것입니다.

Scriptable 갤러리를 보면 Transparent Widgets라는 스크립트가 있습니다. 

받아서 시키는대로 하시면 위젯 배경으로 사용할 이미지를 만들 수 있습니다.

다시 Weather Cal 스크립트를 실행해서 배경설정으로 만들어진 이미지를 선택하면 됩니다.

5. 자유롭게 구성하기

위젯 내에 요소들도 마음대로 배치할 수 있습니다.

해당 부분은 weather-cal.js에 const layout으로 선언된 부분에 해당합니다.

구성 방법과 사용할 수 있는 요소 목록은 https://github.com/mzeryck/Weather-Cal#layout 여기 보시면 설명이 되어 있습니다.

6. 코로나 현황과 QR 체크인

코로나 현황을 가져올 국가와 눌렀을 때 주소를 아래와 같이 설정하였습니다.

 covid: {
    // Country for COVID information.
    country: "S.%20Korea"
    // URL to open when the COVID data is tapped.
    ,url: "kakaotalk://con/web?url=https://accounts.kakao.com/qr_check_in"
  },

7. 화씨와 섭씨

설정을 바꿔도 온도가 화씨로 나오는 버그가 있어서 살짝 수정한 부분이 있습니다. 

해당 부분은 Weather Cal code.js에 있는데 (weather-cal.js가 실제 로직이 있는 weather-cal-code.js를 받아서 돌아가는 구조로 되어 있습니다)

// Find all possible language matches.
 const languages = [locale, locale.split("_")[1], Device.locale(), Device.locale().split("_")[1]].map(lang => lang.toLowerCase())

디바이스 언어의 _ 기준 split 후 인덱스 값과 소문자로 변경하도록 하였습니다.

위젯 설정에서 update code를 하시면 GitHub에서 최신 소스를 받아 덮어쓰기 때문에 날아갈 수 있습니다.

8. 제 세팅 공유

// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: green; icon-glyph: magic;
// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: deep-purple; icon-glyph: calendar;
/*
~
Welcome to Weather Cal. 
Run this script to set up your widget.
You can duplicate this script to create multiple widgets. Make sure to change the name of the script each time.
Adjust the layout and other settings below.
Happy scripting!
~
*/
/*
 * SETTINGS
 * Adjust the settings of your widget.
 * ===================================
 */
const settings = {
  widget: {
    // Set the locale code. Leave blank "" to match the device's locale.
    locale: ""
    
    // Set to imperial for Fahrenheit, or metric for Celsius
    ,units: "metric"
    // The size of the widget preview in the app.
    ,preview: "medium"
    // Set the padding around each item. Default is 5.
    ,padding: 5
    // Decide if icons should match the color of the text around them.
    ,tintIcons: false
  },
  
/*
 * LAYOUT
 * Decide what items to show on the widget.
 * ========================================
 */
// You always need to start with "row" and "column" items. Set the width of a column with parentheses, like "column(90)".
// Adding left, right, or center will align everything after that. Add "space" for a flexible space, or "space(50)" for a specific height.
// There are many possible items, including: date, greeting, events, reminders, current, future, forecast, battery, sunrise, text
  layout: `
  row
   column
    date
    greeting
    covid
    events
    space
   column(70)
    center
    current
    future
  `,
  
/*
 * LOCALIZATION
 * Change the language or wording of text displayed.
 * =================================================
 */  
 
  localization: {
  
    // The text shown if you add a greeting item to the layout.
    nightGreeting: "님, 좋은 밤되세요."
    ,morningGreeting: "님, 좋은 아침입니다."
    ,afternoonGreeting: "님, 좋은 하루되세요."
    ,eveningGreeting: "님, 남은 하루도 잘 마무리하세요."
  
    // The text shown if you add a future weather item to the layout, or tomorrow's events.
    ,nextHourLabel: "1시간 후"
    ,tomorrowLabel: "내일"
    // Shown when noEventBehavior is set to "message".
    ,noEventMessage: ""
  
    // The text shown after the hours and minutes of an event duration.
    ,durationMinute: "m"
    ,durationHour: "h"   
    
    // Each {token} is replaced with the number from the data.
    ,covid: "신규 확진자: {todayCases}"
    
    // The text shown for the Weeknumber
    ,week: "Week"
  },
 
/*
 * ITEMS
 * Choose how each item is displayed.
 * ==================================
 */  
   
  // DATE
  // ====
  date: {
    // If set to true, date will become smaller when events are displayed.
    dynamicDateSize: true
    // If the date is not dynamic, should it be large or small?
    ,staticDateSize: "small"
    // Determine the date format for each date type. See docs.scriptable.app/dateformatter
    ,smallDateFormat: "MMMM d일(E)"
    ,largeDateLineOne: "MMMM d일"
    ,largeDateLineTwo: "EEEE"
  },
  
  // EVENTS
  // ======
  events: {
    // How many events to show.
    numberOfEvents: 3
    
    // Minutes after an event begins that it should still be shown. 
    ,minutesAfter: 5
    // Show all-day events.
    ,showAllDay: true
    // The hour (in 24-hour time) to start showing tomorrow's events. 0 for always, 24 for never.
    ,showTomorrow: 20
    // Can be blank "" or set to "duration" or "time" to display how long an event is.
    ,showEventLength: "duration"
    // Set which calendars for which to show events. Empty [] means all calendars.
    ,selectCalendars: []
    // Leave blank "" for no color, or specify shape (circle, rectangle) and/or side (left, right).
    ,showCalendarColor: "rectangle left"
  
    // When no events remain, show a hard-coded "message", a "greeting", or "none".
    ,noEventBehavior: "message"
  },
  
  // REMINDERS
  // =========
  reminders: {
  
    // How many reminders to show. Use 0 for all.
    numberOfReminders: 3
    // Set to true for a relative due date ("in 3 hours") instead of absolute ("3:00 PM")
    ,useRelativeDueDate: false
  
    // Set to true to show reminders without a due date. Default is false.
    ,showWithoutDueDate: false
  
    // Show reminders that are overdue.
    ,showOverdue: true
    
    // Set to true to hide reminders due in future days.
    ,todayOnly: false
    // Set which calendars for which to show events. Empty [] means all calendars.
    ,selectLists: []
    // Leave blank "" for no color, or specify shape (circle, rectangle) and/or side (left, right).
    ,showListColor: "rectangle left"
  },
  // SUNRISE
  // =======
  sunrise: {
  
    // How many minutes before/after sunrise or sunset to show this element. 0 for always.
    showWithin: 0
    
    // Set to true to use separate "sunrise" and "sunset" elements. Default is false.
    ,separateElements: false
  },
  // WEATHER
  // =======
  weather: {
  
    // Show the location of the current weather.
    showLocation: true
    
    // Show the condition and temperature horizontally. Default is false.
    ,horizontalCondition: true
  
    // Show the text description of the current conditions.
    ,showCondition: false
    // Show today's high and low temperatures.
    ,showHighLow: true
    
    // Show the percent chance of rain in the future weather item.
    ,showRain: true
    // The hour (in 24-hour time) to switch to tomorrow's weather. 0 for always, 24 for never.
    ,tomorrowShownAtHour: 20
    // Set the amount of days to show in the forecast item.
    ,showDays: 3
    
    // Set the format for each day of the week in the forecast item.
    ,showDaysFormat: "E"
    
    // Set to true to show today's weather in the forecast item.
    ,showToday: false
  },
  
  // COVID
  // =====
  covid: {
  
    // Country for COVID information.
    country: "S.%20Korea"
    // URL to open when the COVID data is tapped.
    ,url: "kakaotalk://con/web?url=https://accounts.kakao.com/qr_check_in"
  },
  // WeekNumber
  // ==========
  week: {
  },
/*
 * FONTS
 * Change the size, color, and font of various text elements.
 * ==========================================================
 */ 
 
  font: {
  
    // Set the default font and color.
    defaultText: { size: 14, color: "ffffff", font: "regular" },
  
    // Any blank values will use the default.
    smallDate:   { size: 17, color: "", font: "semibold" },
    largeDate1:  { size: 30, color: "", font: "light" },
    largeDate2:  { size: 30, color: "", font: "light" },
  
    greeting:    { size: 17, color: "", font: "semibold" },
    eventLabel:  { size: 14, color: "", font: "semibold" },
    eventTitle:  { size: 14, color: "", font: "semibold" },
    eventTime:   { size: 14, color: "ffffffcc", font: "" },
    noEvents:    { size: 14, color: "", font: "semibold" },
  
    reminderTitle:  { size: 14, color: "", font: "" },
    reminderTime:   { size: 14, color: "ffffffcc", font: "" },
    
    largeTemp:   { size: 14, color: "", font: "light" },
    smallTemp:   { size: 14, color: "", font: "" },
    tinyTemp:    { size: 12, color: "", font: "" },
  
    customText:  { size: 14, color: "", font: "" },
  
    battery:     { size: 14, color: "", font: "medium" },
    sunrise:     { size: 14, color: "", font: "medium" },
    covid:       { size: 14, color: "", font: "medium" },
    week:        { size: 14, color: "", font: "light" },
  },
}
/*
 * CODE
 * Be more careful editing this section. 
 * =====================================
 */
// Names of Weather Cal elements.
const codeFilename = "Weather Cal code"
const gitHubUrl = "https://raw.githubusercontent.com/mzeryck/Weather-Cal/main/weather-cal-code.js"
// Determine if the user is using iCloud.
let files = FileManager.local()
const iCloudInUse = files.isFileStoredIniCloud(module.filename)
// If so, use an iCloud file manager.
files = iCloudInUse ? FileManager.iCloud() : files
// Determine if the Weather Cal code exists and download if needed.
const pathToCode = files.joinPath(files.documentsDirectory(), codeFilename + ".js")
if (!files.fileExists(pathToCode)) {
  const req = new Request(gitHubUrl)
  const codeString = await req.loadString()
  files.writeString(pathToCode, codeString)
}
// Import the code.
if (iCloudInUse) { await files.downloadFileFromiCloud(pathToCode) }
const code = importModule(codeFilename)
// Run the initial setup or settings menu.
if (config.runsInApp) {
  const showPreview = await code.runSetup(Script.name(), iCloudInUse, codeFilename, gitHubUrl)
  if (!showPreview) return
}
// Set up the widget.
const widget = await code.createWidget(settings, Script.name(), iCloudInUse)
Script.setWidget(widget)
// If we're in app, display the preview.
if (config.runsInApp) {
  const preview = settings.widget.preview
  if (preview == "small") { widget.presentSmall() }
  else if (preview == "medium") { widget.presentMedium() }
  else if (preview == "large") { widget.presentLarge() }
}
Script.complete()