oEmbedとSphinx

195 Views

October 04, 24

#sphinx #python #oembed #oEmbed #oEmbedPy #Python #Sphinx #動画埋め込み

スライド概要

profile-image
スライド一覧

Sphinx「で」プレゼンテーションをする人。 ※主にバックアップ用のスライドをアップロードします。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

ダウンロード(pdf - 1.12MB)

関連スライド

slide-thumbnail

Sphinxを通して考える、「拡張」の仕方
python sphinx
user-img Kazuya Takei 626
slide-thumbnail

pytestでRust製CLIをe2eテストしてみよう / PyCon mini 東海 2024
sphinx python
user-img Kazuya Takei 300
slide-thumbnail

猫でも分かるUnreal Engineの学び方 - 超初心者向け編 - 2023 v1.0
ue4 ue5 ue-beginner
user-img エピック ゲームズ ジャパン 1.3M
slide-thumbnail

Unreal Engine5 Lumenの仕組みと肝心なところ
ue5 ue-rendering ue-lumen
user-img エピック ゲームズ ジャパン 1.1M
slide-thumbnail

最新の6.0で学ぶ！初めてのひとのためのSpring Security
java spring security
user-img tada 1M
slide-thumbnail

SQL滅ぶべし
user-img 株式会社ホクソエム 856.9K
各ページのテキスト
1.

と oEmbed Sphinx という体裁の自作ライブラリ宣伝 …

2.

はじめに 例えば、 サイトに の動画を埋め込むと Web YouTube き、 あなたの環境ではどうしていますか？

3.

YouTube 動画を自サイトに埋め込む よくある方法> 1. 動画のページにアクセスする。 2. 「共有」ボタンを押す。 3. 「埋め込む」ボタンを押す。 4. 表示された <iframe> タグをコピーする。 5. 自分のサイトに貼り付ける。 <

4.
[beta] 
YouTube

動画を自サイトに埋め込む
よくある方法>

<

<iframe
width="560" height="315"
src="https://www.youtube.com/embed/Oyh8nuaLASA?si=sZZJQDzAwoc2vwQm"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
</iframe>
5.

YouTube 動画を自サイトに埋め込む の場合> 1. 動画のページにアクセスする。 2. [embed] ショートコードに、URLを埋め込む。 <WordPress [embed width="560" height="315"] https://www.youtube.com/watch?v=Oyh8nuaLASA [/embed]

6.
[beta] 
YouTube

動画を自サイトに埋め込む

の場合>
1. <よくある方法>と同様に <iframe> タグをコピー
する。
2. raw ディレクティブに埋め込む。
<Sphinx

.. raw:: html
<iframe
width="560" height="315"
src="https://www.youtube.com/embed/Oyh8nuaLASA?si=sZZJQDzAwoc2vwQm"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyrosco
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
</iframe>
7.

< よくある方法>を振り返る Good: 正規の手順 カスタマイズできる Bad: 取得までの手順が面倒 得た内容が、やや長いHTML ↑Goodをちょっとだけ妥協して、Badを改善したい

8.

oEmbed

9.

とは oEmbed https://oembed.com/ サイトのコンテンツを「埋め込み用」の形 式で提供するためのフォーマット コンテンツ提供側（プロバイダー）が同じフォー マットを返すAPIを提供することで、 利用側での 取り扱いを容易にする。 Web

10.

とは oEmbed サポートしているコンテンツの種類は4種類 photo : 画像 video : 動画 link : リンクのみ（APIレスポンスを返すだけが 目的） rich : その他（iframeなど）

11.

の使い方 oEmbed API 実際のコンテンツからエンドポイントを取得する 2. プロバイダー一覧からURLを組み立てる 1.

12.

の使い方(1) oEmbed API 実際のコンテンツからエンドポイントを取得する コンテンツのHTMLから次の条件の link タグを 探す。 rel 属性が alternate type 属性が application/json+oembed or text/xml+oembed

13.
[beta] 
の使い方(1)

oEmbed API

<html>
<head>
<!-- 略 -->
<link rel="alternate" type="application/json+oembed" href="https://www.you
<link rel="alternate" type="text/xml+oembed" href="https://www.youtube.com
</head>
</html>

href 属性のURLをそのままリクエストしましょう。
14.

の使い方(2) oEmbed API プロバイダー一覧からURLを組み立てる https://oembed.com/providers.json からコンテン ツのURLに該当するプロバイダーを探す。 見つかったら、 endpoints.url にURLを付与して リクエストする。

15.

の使い方(2) oEmbed API [ { "provider_name": "YouTube", "provider_url": "https://www.youtube.com/", "endpoints": [ { "schemes": [ "https://*.youtube.com/watch*", "https://*.youtube.com/v/*", "https://youtu.be/*", "https://*.youtube.com/playlist?list=*", "https://youtube.com/playlist?list=*", "https://*.youtube.com/shorts*", "https://youtube.com/shorts*", "https://*.youtube.com/embed/*", "htt //* t b /li *"

16.

もうちょっと楽したくない？

17.

の使い方 oEmbed API 実際のコンテンツからエンドポイントを取得する 2. プロバイダー一覧からURLを組み立てる 3. oEmbedPyを使う (New!!) ※Python限定 1.

18.

oEmbedPy https://pypi.org/project/oEmbedPy

19.

とは oEmbedPy 自作のPython製oEmbedライブラリ。 今のところはConsumer（クライアント）機能だ け 2種類ある「APIの使い方」のどちらにも対応 最初にプロバイダー一覧から探索 見つからなければコンテンツをチェック

20.

でレスポンスを確認できる CLI $ oEmbed.py 'https://www.youtube.com/watch?v=Oyh8nuaLASA' type: video version: 1.0 html: <iframe width="200" height="113" src="https://www.youtube.com width: 200 height: 113 title: Yoshi (NES - Nintendo Switch Online) / Speedrun B-Type(Level author_name: attakei author_url: https://www.youtube.com/@attakei provider_name: YouTube provider_url: https://www.youtube.com/ cache_age: None thumbnail_url: https://i.ytimg.com/vi/Oyh8nuaLASA/hqdefault.jpg thumbnail_width: 480 th b il h i ht 360

21.

Sphinx 拡張として使える extensions = [ # After extensions "oembedpy.ext.sphinx", ] この設定をして、 .. oembed:: URL と記述するだけ で、埋め込みが書けるようになる。

22.

Sphinx 拡張として使える .. oembed:: https://www.youtube.com/watch?v=Oyh8nuaLASA :maxwidth: 640 :maxheight: 640 Yoshi (NES - Nintendo Switch Online) / Speedrun B-Type(Level 1 to 5)… 5)…

23.

Sphinx 拡張として使える .. oembed:: https://x.com/attakei/status/1640391212485181441 kAZUYA tAKEI @attakei · フォローする とりあえず初期の目的分の動作はするようになったの で、Twitter側でもふわっとツイート。 Python製のoEmbedクライアントライブラリです。 （車輪の再発明に近いなにか） pypi.org oEmbedPy oEmbed client for Python. 午前1:31 · 2023年3月28日 返信 リンクをコピー 1件の返信を読む

24.

Sphinx 拡張として使える .. oembed:: https://image.docswell.com/s/ku-suke/LK7J5V-hello-docswell 目次 1 / 13

25.

まとめ

26.

とoEmbedPy oEmbed oEmbed = oEmbedPy =( ) 埋め込みコンテンツの「提供」を統一する規格 多分 モダンなPython製oEmbedライブラリ

27.

YouTube 動画を自サイトに埋め込む 真・Sphinxの場合> 0. Sphinx上にoEmbedPy拡張を導入する。 1. 動画のページにアクセスする。 2. oembed ディレクティブに、URLを埋め込む。 < .. oembed:: https://www.youtube.com/watch?v=Oyh8nuaLASA Yoshi (NES - …

28.

おわり