[JS]埋め込みはこれでOK!Google Mapも動画も音楽もコードもツイートも簡単に埋め込めるスクリプト -embed.js

Google Mapをはじめ、YouTube, Vimeo, Vine, TEDなどの動画、SpotifyやSoundCloudなどの音楽、GitHub, CodePen, JS Binなどのコードなど、さまざまなメディアをWebページに簡単に埋め込むことができるスクリプトを紹介します。

サイトのキャプチャ

embed.js
embed.js -GitHub

embed.jsの特徴

embed.jsでは、さまざまなメディアをWebページに埋め込むことができます。
2年ほど前にも紹介しましたが、今年大きくバージョンアップしたので改めて。

サイトのキャプチャ
  • :heart:(ハート)や:smile:(スマイル)などの絵文字を使ったテキストを埋め込めます。
  • リンクを検出して、bit.ly, buff.ly などの短縮URLに置き換えます。
  • Twitterのツイートを埋め込みます。
  • YouTubeやVimeoの動画をAPIから取得して埋め込みます。
  • dailymotion, vine, TEDなどの動画共有サービスもサポート。
  • SpotifyやSoundCloudなどの音楽サービスもサポート。
  • HTML5プレイヤーにサポートされた音楽ファイル(.wav, .mp3, .ogg)を埋め込みます。
  • HTML5プレイヤーにサポートされた動画ファイル(.webm, .mp4)を埋め込みます。
  • GitHubは余分なコードなしで埋め込みます。
  • Markdown記法で書かれたテキストもパースして埋め込みます。
  • コードをシンタックスハイライト対応で埋め込みます。
  • Codepen, JS Bin, JSFieldなどのコードとプレビューを埋め込みます。
  • Googleマップを埋め込みます。

embed.jsのデモ

デモではさまざまなメディアが埋め込まれており、コードを編集していろいろ試すこともできます。

デモのキャプチャ

Demo: Basic
絵文字を使ったテキスト、リンクを短縮URLに変更して埋め込められています。

デモのキャプチャ

Demo: Youtube/Vimeo
YouTubeやVimeoなどの動画が埋め込められています。

デモのキャプチャ

Demo: Instagram/Flickr
InstagramやFlickrなどの画像共有サービスにも対応。

デモのキャプチャ

Demo: Twitter
ツイートのURLを記述するだけで埋め込められます。

デモのキャプチャ

Demo: Spotify/Soundcloud
SpotifyやSoundCloudなどの音楽サービスにも対応。

デモのキャプチャ

Demo: Code Highlighting
コードの埋め込みはシンタックスハイライト対応です。

デモのキャプチャ

Demo: Markdown
Markdown記法で書かれたコンテンツが埋め込められています。

デモのキャプチャ

Demo: GitHub
GitHubもサポートされています。

デモのキャプチャ

Demo: Google Map
Google Mapの埋め込みも簡単です。

embed.jsの使い方

Step 1: 外部ファイル

当スタイルシートとスクリプトを外部ファイルとして記述します。
ファイルはそれぞれCDNでも提供されています。

Twitterを埋め込む時には「widgets.js」、コードのシンタックスハイライトには「highlight.min.js」を使用します。

Step 2: HTML

埋め込む場所を用意します。

Step 3: JavaScript

セレクタで埋め込み先を指定し、スクリプトを実行します。
まずは、基本書式。

Google Mapsを埋め込む時の記述です。

top of page

©2017 coliss