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

Post on:2016年6月14日

sponsorsr

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

embed.js
embed.js -GitHub

embed.jsの特徴
embed.jsのデモ
embed.jsの使い方

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でも提供されています。

<head>
  ...
  <link rel="stylesheet" href="../dist/embed.min.css" />
</head>
<body>
  ...
  コンテンツ
  ...
  <script src="../dist/embed.min.js"></script>
</body>

<head>

...

</head>

<body>

...

コンテンツ

...

</body>

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

<body>
  ...
  コンテンツ
  ...
  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
  <script src="//platform.twitter.com/widgets.js"></script>
  <script src="../dist/embed.min.js"></script>
</body>

<body>

...

コンテンツ

...

</body>

Step 2: HTML

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

<div id="element">
  <div> コンテンツ</div>
  ...
</div>

<div> コンテンツ</div>

...

</div>

Step 3: JavaScript

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

var x = new EmbedJS({
  input: document.getElementById('element')
});

x.render();

var x = new EmbedJS({

input: document.getElementById('element')

});

x.render();

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

var x = new EmbedJS({
  element: document.getElementById('element'),
  googleAuthKey : 'AIzaSyCqFouT8h5DKAbxlrTZmjXEmNBjC69f0ts',
  highlightCode:false,
  tweetsEmbed:false
});

x.render();