• Safariのデベロッパ機能の再発見

    WebデベロッパとデザイナのためのSafariの豊富なツール群を探る準備をしましょう。Webコンテンツを検査する方法、Responsive Design ModeとWebDriverについて、シミュレータとデバイスを使い始める方法をご紹介します。また、Vision Proとのペアリング、アプリケーションでコンテンツを検査可能にする方法、Responsive Design ModeでOpen with Simulatorを使用してあらゆるデバイスでWebサイトをテストする方法も紹介します。

    リソース

    関連ビデオ

    Tech Talks

    WWDC23

    WWDC21

  • ダウンロード
    Array
    • 6:20 - HTML image source set

      <img
        src="astronaut_1x.jpg"
        srcset="astronaut_2x.jpg 2x astronaut_3x.jpg 3x"
      />
    • 6:27 - CSS image set

      .starfield {
        background-image: image-set("stars_1x.jpg" 1x, "stars_2x.jpg" 2x);
      }
    • 6:32 - CSS resolution media query

      @media (min-resolution: 2dppx) {
        .divider-line {
          border: 0.5px solid grey;
        }
      }
    • 13:41 - Inspectable WKWebViews and JSContexts

      let webConfiguration = WKWebViewConfiguration()
      let webView = WKWebView(frame: .zero, configuration: webConfiguration)
      
      if #available(macOS 13.3, iOS 16.4, *) {
        webView.isInspectable = true
      }
      
      let jsContext = JSContext()
      jsContext?.name = "Context name"
      
      if #available(macOS 13.3, iOS 16.4, tvOS 16.4, *) {
        jsContext?.isInspectable = true
      }
    • 15:32 - WebDriver test

      from selenium import webdriver
      from selenium.webdriver.common.by import By
      from selenium.webdriver.safari.options import Options as SafariOptions
      
      options = SafariOptions()
      driver = webdriver.Safari(options=options)
      
      driver.get("https://webkit.org/web-inspector/")
      
      search_element = driver.find_element(by=By.ID, value="search")
      search_element.send_keys("device")
      
      assert(driver.find_element(by=By.LINK_TEXT, value="Device Settings"))
      
      driver.quit()