ストリーミングはほとんどのブラウザと
Developerアプリで視聴できます。
-
美しいリッチなリンクの確実な表示
メッセージで受信したウェブサイトのリンクを、シンプルなテキストのURLよりはるかに魅力的にすることができます。ウェブページに少しのメタデータを提供することで、ウェブサイトへのリンクがアイコン、イメージ、動画などのリッチなコンテンツを含めることができます。訪問者がウェブサイトと同じぐらい素晴らしく見えるリンクを共有する方法を確認します。
リソース
関連ビデオ
WWDC21
WWDC19
-
ダウンロード
Hi, I'm Tim Horton from the Safari and WebKit team, and today I'm going to show you how easy it is to ensure that users get beautiful, rich presentations when sharing links to your website in Messages and elsewhere on the system.
Imagine that a user of your site is reading about your latest new product, and wants to share a link to it with their friend. They'll use the Share Sheet in Safari and send it via Messages.
On the other side, their friend will see a very inviting link to tap on.
I'm going to walk you through the straightforward steps you need to take to get your link looking just as good as these. First, we'll talk about customizing the title. Then, about adding helpful icons. And then large images, to make our links really pop. Then we'll go a step beyond the links we've seen so far and add autoplaying inline video. And finally, we'll finish up with a few other resources you can use to help improve your site. So, let's jump right in by customizing the title of our link. You likely already have an HTML
tag </span></span><span class="sentence"><span data-start="69.0">in the <head> of your pages, and that will work just fine. </span></span><span class="sentence"><span data-start="74.0">There is a little bit of unnecessary duplication </span></span><span class="sentence"><span data-start="76.0">between the title and the domain, though. </span></span><span class="sentence"><span data-start="78.0">We could change the page's title, </span></span><span class="sentence"><span data-start="80.0">but in this case, we still want the window title in Safari </span></span><span class="sentence"><span data-start="82.0">to have the Apple suffix. </span></span><span class="sentence"><span data-start="85.0">So instead, we can add another tag to our page's <head>. </span></span><span class="sentence"><span data-start="89.0">This is a <meta> tag, with the name "og:title". </span></span><span class="sentence"><span data-start="93.0">The "og" there stands for "Open Graph," </span></span><span class="sentence"><span data-start="96.0">which is the standard that specifies </span></span><span class="sentence"><span data-start="97.0">the names of these tags. </span></span><span class="sentence"><span data-start="99.0">The web browser will still use the <title> tag </span></span><span class="sentence"><span data-start="101.0">for the window title, </span></span><span class="sentence"><span data-start="103.0">but the rich link will use the "og:title" instead. </span></span><span class="sentence"><span data-start="108.0">Now we have a nice title with no redundancy. </span></span><span class="sentence"><span data-start="112.0">It's best to keep titles unique and informative </span></span><span class="sentence"><span data-start="114.0">so that rich links contain at least as much context </span></span><span class="sentence"><span data-start="116.0">as the URL would have provided. </span></span><span class="sentence"><span data-start="119.0">You should also avoid </span></span><span class="sentence"><span data-start="120.0">duplicating the site name in the title, </span></span><span class="sentence"><span data-start="122.0">since the domain name is also provided </span></span><span class="sentence"><span data-start="124.0">on the second line of the link. </span></span><span class="sentence"><span data-start="126.0">It's important to keep in mind </span></span><span class="sentence"><span data-start="127.0">that JavaScript does not run when creating rich links, </span></span><span class="sentence"><span data-start="130.0">so the Open Graph tags </span></span><span class="sentence"><span data-start="132.0">need to be in the source of the page </span></span><span class="sentence"><span data-start="134.0">and cannot be generated dynamically. </span></span><span class="sentence"><span data-start="137.0">Next, we can spruce up our link a bit </span></span><span class="sentence"><span data-start="139.0">by adding an icon. </span></span><span class="sentence"><span data-start="142.0">There are many ways to specify icons, </span></span><span class="sentence"><span data-start="144.0">from favicons to Apple touch icons, </span></span><span class="sentence"><span data-start="146.0">and it's likely your site already uses one of them. </span></span><span class="sentence"><span data-start="150.0">If it doesn't, the best way to add an icon </span></span><span class="sentence"><span data-start="152.0">is by adding a "link rel equals icon" tag </span></span><span class="sentence"><span data-start="155.0">to your site's <head>. </span></span><span class="sentence"><span data-start="158.0">And this is what our link looks like now. </span></span><span class="sentence"><span data-start="160.0">For some pages, this is all you need. </span></span><span class="sentence"><span data-start="162.0">If a large hero image doesn't make sense, </span></span><span class="sentence"><span data-start="164.0">you can stop here. </span></span><span class="sentence"><span data-start="167.0">But in our case, we have a nice big image </span></span><span class="sentence"><span data-start="168.0">that is specific to this page, </span></span><span class="sentence"><span data-start="170.0">so let's continue on and make our link even nicer. </span></span><span class="sentence"><span data-start="175.0">To provide an image for a rich link, </span></span><span class="sentence"><span data-start="177.0">we can add another Open Graph meta tag to our <head> -- </span></span><span class="sentence"><span data-start="179.0">this time, "og:image". </span></span><span class="sentence"><span data-start="182.0">The content is just the URL of the image. </span></span><span class="sentence"><span data-start="186.0">Now our link looks just like the real one on apple.com! </span></span><span class="sentence"><span data-start="190.0">You may have noticed that we don't show the icon </span></span><span class="sentence"><span data-start="191.0">if we have an image. </span></span><span class="sentence"><span data-start="193.0">It's still a good idea to specify both, </span></span><span class="sentence"><span data-start="195.0">because there are times when we'll fall back to the icon -- </span></span><span class="sentence"><span data-start="198.0">for example, in cases of poor network connectivity.</p><p></span></span><span class="sentence"><span data-start="203.0">You should only use "og:image" for interesting images </span></span><span class="sentence"><span data-start="205.0">that are specific to the particular page. </span></span><span class="sentence"><span data-start="208.0">Generic fallback images -- </span></span><span class="sentence"><span data-start="209.0">like your company's logo or a user's avatar -- </span></span><span class="sentence"><span data-start="212.0">should be icons instead. </span></span><span class="sentence"><span data-start="215.0">Images should not include text. </span></span><span class="sentence"><span data-start="217.0">Rich links are presented at many sizes, across many devices. </span></span><span class="sentence"><span data-start="221.0">The same image will be shown all the way from Apple Watch </span></span><span class="sentence"><span data-start="223.0">to iPad Pro, </span></span><span class="sentence"><span data-start="224.0">and text in an image will not scale well </span></span><span class="sentence"><span data-start="226.0">across all of those. </span></span><span class="sentence"><span data-start="228.0">And as I mentioned before, you should still specify an icon </span></span><span class="sentence"><span data-start="231.0">even if you also have an image.</p><p></span></span><span class="sentence"><span data-start="234.0">Now we'll take our link a step beyond images </span></span><span class="sentence"><span data-start="237.0">and introduce an autoplaying, autolooping video. </span></span><span class="sentence"><span data-start="241.0">All that's needed for inline video </span></span><span class="sentence"><span data-start="243.0">is yet another Open Graph tag. </span></span><span class="sentence"><span data-start="246.0">This time, "og:video". </span></span><span class="sentence"><span data-start="248.0">The URL should point to a small, downloadable video file </span></span><span class="sentence"><span data-start="252.0">of any format that iOS and macOS can natively play.</p><p></span></span><span class="sentence"><span data-start="257.0">As you see, the video plays inline. </span></span><span class="sentence"><span data-start="260.0">If the video contains audio, </span></span><span class="sentence"><span data-start="261.0">it starts out muted but with the option to unmute it. </span></span><span class="sentence"><span data-start="266.0">If you can't host a video file yourself, </span></span><span class="sentence"><span data-start="268.0">you can instead point your og:video at a YouTube embed URL. </span></span><span class="sentence"><span data-start="273.0">YouTube videos won't autoplay, </span></span><span class="sentence"><span data-start="275.0">but the user can tap to play them. </span></span><span class="sentence"><span data-start="277.0">It's important to note that this is specific to YouTube; </span></span><span class="sentence"><span data-start="280.0">other embedded players will not work.</p><p></span></span><span class="sentence"><span data-start="284.0">When adding video metadata to your site, </span></span><span class="sentence"><span data-start="287.0">it's important to keep the size in mind. </span></span><span class="sentence"><span data-start="289.0">The icon, image, and video together </span></span><span class="sentence"><span data-start="292.0">are limited to 10 megabytes, </span></span><span class="sentence"><span data-start="294.0">and the smaller they are, the faster the link will appear </span></span><span class="sentence"><span data-start="296.0">and the happier your users will be. </span></span><span class="sentence"><span data-start="300.0">You should use directly referenced video files </span></span><span class="sentence"><span data-start="302.0">for the ideal autoplaying behavior. </span></span><span class="sentence"><span data-start="305.0">And like I said earlier, except for YouTube, </span></span><span class="sentence"><span data-start="307.0">embedded video that requires HTML or plug-ins </span></span><span class="sentence"><span data-start="310.0">is not supported. </span></span><span class="sentence"><span data-start="313.0">I hope you'll take this information </span></span><span class="sentence"><span data-start="314.0">and go and add Open Graph metadata to your website </span></span><span class="sentence"><span data-start="317.0">to make sure that when your users share links to it, </span></span><span class="sentence"><span data-start="319.0">they get the best possible experience. </span></span><span class="sentence"><span data-start="321.0">For more information and additional resources about </span></span><span class="sentence"><span data-start="323.0">what we've talked about, </span></span><span class="sentence"><span data-start="325.0">use the links in the Resources section </span></span><span class="sentence"><span data-start="327.0">associated with this video.</span></span></p> </section> </li> <!-- sample code --> <li class="supplement sample-code" data-supplement-id="sample-code"> <section> <ul class="no-bullet padding-top-small margin-bottom"> </ul> </section> </li> <!-- search --> <li class="supplement search active" data-supplement-id="search"> <section class="transcript-results-summary"> <p class="message smaller lighter"><!-- to be populated --></p> <p class="instructions smaller lighter text-center">特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。</p> <p class="error smaller lighter italic text-center" style="display:none;">クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。</p> </section> <!-- search results --> <ul class="transcript-results row"> </ul> </li> </ul> </section> </section> </section> <input id="analytics-meta" type="hidden" data-event-name="Tech Talks" data-event-id="tech-talks-205" data-session-id="205" data-video-name="美しいリッチなリンクの確実な表示" data-session-response-id=""> </main> <link rel="stylesheet" href="/assets/styles/footer.dist.css"> <footer id="footer" class="footer" role="contentinfo" aria-labelledby="footer-label"> <div class="footer-content"> <h2 class="footer-label" id="footer-label">Developer Footer</h2> <developer-breadcrumbs> <li class="footer-breadcrumbs-item"><a href="/videos/">ビデオ</a></li> <li class="footer-breadcrumbs-item"><a href="/videos/tech-talks/">Tech Talks</a></li> <li class="footer-breadcrumbs-item">美しいリッチなリンクの確実な表示</li> </developer-breadcrumbs> <nav class="footer-directory" aria-label="Apple Developer Directory" role="navigation" lang="ja-JP"> <!--googleoff: all--> <div class="footer-directory-column"> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-platform" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-platform"> <h3 class="footer-directory-column-section-title">プラットフォーム</h3> </label> <a href="#footer-directory-column-section-state-platform" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">メニューを開く</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">メニューを閉じる</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/ios/">iOS</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/ipados/">iPadOS</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/macos/">macOS</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/tvos/">tvOS</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/visionos/">visionOS</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/watchos/">watchOS</a></li> </ul> </div> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-tools" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-tools"> <h3 class="footer-directory-column-section-title">ツール</h3> </label> <a href="#footer-directory-column-section-state-tools" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/swift/">Swift</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/xcode/swiftui/">SwiftUI</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/swift-playgrounds/">Swift Playgrounds</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/testflight/">TestFlight</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/xcode/">Xcode</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/xcode-cloud/">Xcode Cloud</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/sf-symbols/">SF Symbols</a></li> </ul> </div> </div> <div class="footer-directory-column"> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-topics" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-topics"> <h3 class="footer-directory-column-section-title">トピックとテクノロジー</h3> </label> <a href="#footer-directory-column-section-state-topics" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">メニューを開く</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">メニューを閉じる</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/accessibility/">アクセシビリティ</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/accessories/">アクセサリ</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/app-extensions/">App Extension</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/app-store/">App Store</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/audio/">オーディオとビデオ（英語）</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/augmented-reality/">拡張現実</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/design/">デザイン</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/distribute/">配信</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/education/">教育</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/fonts/">フォント（英語）</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/games/">ゲーム</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/health-fitness/">ヘルスケアとフィットネス</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/in-app-purchase/">アプリ内課金</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/localization/">ローカリゼーション</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/maps/">マップと位置情報</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/machine-learning/">機械学習</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="https://opensource.apple.com">オープンソース（英語）</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/security/">セキュリティ</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/safari/">SafariとWeb（英語）</a></li> </ul> </div> </div> <div class="footer-directory-column"> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-resources" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-resources"> <h3 class="footer-directory-column-section-title">リソース</h3> </label> <a href="#footer-directory-column-section-state-resources" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">メニューを開く</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">メニューを閉じる</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/documentation/">英語ドキュメント（完全版）</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/documentation/">日本語ドキュメント（一部トピック）</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/learn/">チュートリアル</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/download/">ダウンロード（英語）</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/forums/">フォーラム（英語）</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/videos/">ビデオ</a></li> </ul> </div> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-support" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-support"> <h3 class="footer-directory-column-section-title">サポート</h3> </label> <a href="#footer-directory-column-section-state-support" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/support/articles/">サポートドキュメント</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/contact/">お問い合わせ</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/bug-reporting/">バグ報告</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/system-status/">システム状況（英語）</a></li> </ul> </div> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-account" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-account"> <h3 class="footer-directory-column-section-title">アカウント</h3> </label> <a href="#footer-directory-column-section-state-account" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">メニューを開く</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">メニューを閉じる</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/account/">Apple Developer</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="https://appstoreconnect.apple.com/">App Store Connect</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/account/ios/certificate/">Certificates, IDs, & Profiles（英語）</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="https://feedbackassistant.apple.com/">フィードバックアシスタント<span class="loc-en-only nowrap"></span></a></li> </ul> </div> </div> <div class="footer-directory-column"> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-programs" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-programs"> <h3 class="footer-directory-column-section-title">プログラム</h3> </label> <a href="#footer-directory-column-section-state-programs" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">メニューを開く</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">メニューを閉じる</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/programs/">Apple Developer Program</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/programs/enterprise/">Apple Developer Enterprise Program</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/app-store/small-business-program/">App Store Small Business Program</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="https://mfi.apple.com/">MFi Program（英語）</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/programs/news-partner/">News Partner Program（英語）</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/programs/video-partner/">Video Partner Program（英語）</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/security-bounty/">セキュリティ報奨金プログラム（英語）</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/programs/security-research-device/">Security Research Device Program<span class="nowrap">（英語）</span></a></li> </ul> </div> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-events" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-events"> <h3 class="footer-directory-column-section-title">イベント</h3> </label> <a href="#footer-directory-column-section-state-events" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/events/">Appleに相談</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/events/developer-centers/">Apple Developer Center</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/app-store/app-store-awards/">App Store Awards（英語）</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/design/awards/">Apple Design Awards</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/academies/">Apple Developer Academy（英語）</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/entrepreneur-camp/">Entrepreneur Camp（英語）</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/jp/wwdc24/">WWDC</a></li> </ul> </div> </div> <!--googleon: all--> </nav> <section class="footer-mini" vocab="http://schema.org/" typeof="Organization" lang="ja-JP"> <div class="footer-mini-news"> <div class="copy"> <a href="https://apps.apple.com/jp/app/apple-developer/id640199958">Apple Developerアプリ</a>を入手する </div> <div class="content"> <div class="color-scheme-toggle" role="radiogroup" tabindex="0" aria-label="Select a color scheme preference"> <label data-color-scheme-option="light"> <input type="radio" value="light" autocomplete="off" onchange="window.setPreferredColorScheme(event.target.value)" /> <div class="text">Light</div> </label> <label data-color-scheme-option="dark"> <input type="radio" value="dark" autocomplete="off" onchange="window.setPreferredColorScheme(event.target.value)" /> <div class="text">Dark</div> </label> <label data-color-scheme-option="auto"> <input type="radio" value="auto" autocomplete="off" onchange="window.setPreferredColorScheme(event.target.value)" /> <div class="text">Auto</div> </label> </div> <script async src="/assets/scripts/color-scheme-toggle.js"></script> </div> </div> <link rel="stylesheet" href="/assets/styles/language-dropdown.css?17182448067"> <div class="language-dropdown dropdown-container legacy-form hidden"> <select class="dropdown" aria-label="Language Dropdown"></select> <span class="dropdown-icon icon icon-chevrondown" aria-hidden="true"></span> </div> <script src="/assets/scripts/language-dropdown.js?17182448067"></script> <link rel="stylesheet" href="/assets/styles/language-dropdown.css"> <div class="footer-mini-legal"> <div class="footer-mini-legal-copyright">Copyright © 2024 <a href="https://www.apple.com/jp/">Apple Inc.</a> All rights reserved.</div> <div class="footer-mini-legal-links"> <a class="footer-mini-legal-link" href="https://www.apple.com/jp/legal/internet-services/terms/site.html" class="first">利用規約</a> <a class="footer-mini-legal-link" href="https://www.apple.com/jp/legal/privacy/">プライバシーポリシー</a> <a class="footer-mini-legal-link" href="/jp/support/terms/">契約とガイドライン</a> </div> </div> </section> </div> </footer> <script src="/assets/scripts/params.js"></script> <script src="/assets/scripts/watchable.js"></script> <script src="/assets/scripts/timeout.js"></script> <script src="/videos/scripts/play/play.js?04012409282"></script> <script src="/videos/scripts/hls/rtc.min.js?59182451067"></script> <script src="/videos/scripts/hls/hls.min.js?59182451067"></script> </body> </html>