何をビルドする

私たちは純粋なJavaScriptで独自のIOSのウィジェットを作成します.これを達成するために、我々は偉大なアプリをスクリプトと呼ばれる使用します.スクリプトを使用すると、JavaScriptスクリプトを作成し、IOSデバイス上でそれらを実行することができます.あなたのデバイス上で別のものを自動化し、IOSのホーム画面のウィジェットでスクリプトを表示するには、これらのスクリプトを使用することができます.
このチュートリアルの主な目的は、スクリプトのウィジェットを作成するための起動ガイドを提供することです.したがって、スクリプトとスクリプトを構築するための基本といくつかの有用なトリックを学ぶ簡単なウィジェットを構築します.作成されたウィジェットは、次のように表示されます.

必要条件

JavaScriptの基本的な知識は役に立つでしょうが、必要ありません.前述のように、我々はScriptable アプリケーションのウィジェットを作成するため、あなたのデバイスにインストールする必要があります.
MacOSでの開発とテストを容易にするためにScriptable desktop app (β)
代替は、iCloudを使用してスクリプトを同期し、他のオペレーティングシステム上で動作する必要がありますデスクトップ上のiCloudフォルダ内のスクリプトを編集します.これは、お気に入りのテキストエディタでスクリプトを編集し、IOSデバイス上でテストすることができます.

ウィジェットの作成

今、我々はすべてのウィジェットを作成を開始する準備が整いました.
まず、新しい空のスクリプトを作成し、次のスニペットを追加します.

async function createWidget() {
  // Create new empty ListWidget instance
  let listwidget = new ListWidget();

  // Return the created widget
  return listwidget;
}

let widget = await createWidget();

// Check where the script is running
if (config.runsInWidget) {
  // Runs inside a widget so add it to the homescreen widget
  Script.setWidget(widget);
} else {
  // Show the medium widget inside the app
  widget.presentMedium();
}
Script.complete();

このスニペットは、新しいウィジェットインスタンスを作成して返すための新しい関数を追加します.次のステップでは、ウィジェットがホーム画面ウィジェット内でスクリプトが実行されたときに作成され、設定されます.スクリプトがスクリプト可能なアプリの中で実行される場合は、ウィジェットのプレビューが表示されます.
ウィジェットがすぐにリフレッシュしないので、プレビューは便利です.これとは対照的に、スクリプトを実行するときにプレビューは常に最新の状態になります.
場合は、アプリケーション内のスクリプトを実行すると、空の白い四角が表示されます.🎉🎉

コンテンツの追加

基本ウィジェットを走らせることができました.ウィジェットのレイアウトは、異なる表示された要素を保持するスタックに基づいています.スタックはお互いにネストできます.デフォルトでは、ListWidgetは垂直にコンテンツをスタックします.

Tip #1
When you want to debug more complex layouts, add a colored border to your elements so you can easily detect its size and position.

まず、背景色を設定し、その後我々のウィジェットにいくつかの見出しを追加し、いくつかのスタイリングを与える.したがって、以下のスニペットをcreateWidget() アフターメソッドnew ListWidget(); .

  // Set new background color
  listwidget.backgroundColor = new Color("#000000");

  // Add widget heading
  let heading = listwidget.addText("🚀Next🚀");
  heading.centerAlignText();
  heading.font = Font.lightSystemFont(25);
  heading.textColor = new Color("#ffffff");

  // Spacer between heading and launch date
  listwidget.addSpacer(15);

背景色を設定するには、backgroundColor 作成したListウィジェットインスタンスのプロパティ.私達は16進数の値で新しい色を割り当てる#000000 , それは私たちに黒い背景を与える.
その後、ウィジェットに新しいテキストを追加し、見出し変数に保存します.変数を使用して、我々は今、追加のテキストにアクセスすることができますし、いくつかのスタイリングを与える.我々のケースでは、我々はテキストセンターを整列させ、デフォルトのフォントを変更し、それを白いテキストの色を与える.あなたがテキストと他のサポートされたフォントのために異なるオプションに興味があるならば、訪問してくださいWidgetText とFont スクリプトのドキュメント.
最後に、作成した見出しと次の要素の間にいくつかの間隔を追加します.

データの取得

次の起動予定日を表示するには、APIからデータを取得する必要があります.したがって、次のAPIを使用しますDocumentation spacexdata.com API .

⚠️ Sidenote ⚠️
If you use an API that requires an API key or secret, never share your script with the key inside. Every other person could use the API with your access if the key gets public, e.g. on GitHub. Always store the key in a variable at the beginning of your script to easily find and remove it before sharing. Even better, don't hard code the key and instead pass it as an argument to your script.

APIからデータを取得するには、次の2つの新しい関数をスクリプトに追加します.

async function getNextLaunch() {
  // Query url
  const url = "https://api.spacexdata.com/v4/launches/next";

  // Initialize new request
  const request = new Request(url);

  // Execute the request and parse the response as json
  const response = await request.loadJSON();

  // Return the returned launch data
  return response;
}

function getLaunchDateTime(launchData) {
  // Parse launch date to new date object
  const launchDateTime = new Date(launchData.date_utc);
  return launchDateTime;
}

最初の関数は指定されたURLにリクエストを送り、レスポンスをJSONとしてパースします.番目の関数は、提供されるデータセットから日付文字列を抽出し、dateオブジェクトとして返す小さなヘルパーです.
今、我々は内部の以前定義された機能を呼ぶことができますcreateWidtet() APIからデータを取得し、起動日を取得します.したがって、単に次の行を追加しますcreateWidtet() 関数以降listwidget.addSpacer()

  // Fetch next launch date
  let launch = await getNextLaunch();
  let launchDateTime = getLaunchDateTime(launch);

取得したデータの表示

APIデータを取得したので、ウィジェットの内部に表示する必要があります.これを実現するために、ウィジェットにテキストを追加し、基本的な書式設定を適用する2つの新しい関数を作成します.

function addDateText(stack, text) {
  let dateText = stack.addText(text);
  dateText.centerAlignText();
  dateText.font = Font.semiboldSystemFont(20);
  dateText.textColor = new Color("#ffffff");
}

function displayLaunchDateTime(stack, launchDateTime, precision) {
  // Check if next launch date is precise enough and display different details based on the precision
  if (precision == "hour") {

    // Add launch date
    const dateOptions = { year: "numeric", month: "2-digit", day: "2-digit" };
    let datestring = launchDateTime.toLocaleDateString(undefined, dateOptions);
    addDateText(stack, datestring);

    // Add launch time
    const timeOptions = { hour: "numeric", minute: "numeric" };
    let timestring = launchDateTime.toLocaleTimeString(undefined, timeOptions);
    addDateText(stack, timestring);
  } else if (precision == "day") {

    // Add launch date
    const dateOptions = { year: "numeric", month: "2-digit", day: "2-digit" };
    let datestring = launchDateTime.toLocaleDateString(undefined, dateOptions);
    addDateText(stack, datestring);
  } else {
    addDateText(stack, "No day for next launch given");
  }
}

The addDateText() 関数は、関数がテキストを追加するべきインスタンスと、表示するテキストを保持する文字列を取得する.その後、指定したテキストを指定したスタックに追加し、要素にスタイルを適用します.

Tip #2
If you want to display some text with a variable length, you can add a minimumScaleFactor() between 0 and 1 to the text. This specifies the amount the text will scale down to fit inside the widget.

The displayLaunchDateTime() 関数は少し複雑です.テキストを追加するインスタンス、表示すべきDateTimeインスタンス、および精度パラメータを取得します.精度は、次の起動のAPI応答で送信されます.これはどのように正確に起動時間が知られている、我々は我々だけで、または起動の時間を表示するかどうかを決定するために使用される決定します.
インサイドdisplayLaunchTime() 関数は、与えられた精度をチェックします.これに基づいて、正しい書式を日付のインスタンスに適用し、呼び出しによってスタックに追加しますaddDateText() . 次の発射日が十分にわかっていないならば、我々は次の発射日がまだ知られていないというメッセージを示します.
現在我々の内部createWidget() 関数を呼び出すことができますdisplayLaunchDateTime() 関数を呼び出して、ListWidgetインスタンス、作成した日付、およびAPI応答からの精度を渡してデータを表示します.ファイナルcreateWidget 以下に関数を示す.

async function createWidget() {
  // Create new empty ListWidget instance
  let listwidget = new ListWidget();

  // Set new background color
  listwidget.backgroundColor = new Color("#000000");

  // Add widget heading
  let heading = listwidget.addText("🚀Next🚀");
  heading.centerAlignText();
  heading.font = Font.lightSystemFont(25);
  heading.textColor = new Color("#ffffff");

  // Spacer between heading and launch date
  listwidget.addSpacer(15);

  // Fetch next launch date
  let launch = await getNextLaunch();
  let launchDateTime = getLaunchDateTime(launch);

  // Add the launch time to the widget
  displayLaunchDateTime(listwidget, launchDateTime, launch.date_precision);

  // Return the created widget
  return listwidget;
}

あなたのホーム画面に追加

あなたのホーム画面にウィジェットを表示するには、スクリプトスクリプトを作成する必要がありますスクリプト(下のGISTの最終的なスクリプトを見つけることができます).その後、空のウィジェットを与える必要がありますあなたのホーム画面に新しい小さなスクリプトウィジェットを追加します.今、ウィジェットを押すと、ウィジェットを編集し、ウィジェットの設定で作成したスクリプトを選択できます.
それはあなたが今あなたのスクリーンに作成されたウィジェットを参照してくださいする必要があります.🚀🚀
私はこの小さなチュートリアルをお楽しみください.あなたがどんな問題に遭遇するか、私がチュートリアルをするべきである若干の追加の話題を提案したいならば、私に手紙を書いてください.
ハッピーコーディング👨🏼‍💻
< div >