📖 メモに動画やスライドを埋め込む
DocBaseでは一部Webサービスの動画やスライドをメモに埋め込むことができます :smile_cat: 
現在以下のサービスに対応しています。
追加してほしいWebサービスがありましたらサポートにお寄せください。

<span style="color:#d70910;">※ 特定のドメインでのみコンテンツの読み込みを許可する設定を行う必要がある場合では、`<irame>` の属性値を修正する必要があります。詳しくは</span>[Vimeo](#vimeo)<span style="color:#d70910;">をご確認ください。</span>

# 目次

## Google関連
- <a href="#google-docs">Google Docs</a>
- <a href="#google-drive">Google Drive</a>
- <a href="#google-maps">Google Maps</a>
- <a href="#google-calendar">Google Calendar</a>

## ストレージ
- [Box](#box)

## スライド共有
- <a href="#slideshare">slideshare</a>
- <a href="#speaker-deck">Speaker Deck</a>

## 動画配信
- <a href="#youtube">YouTube</a>
- <a href="#vimeo">Vimeo</a>
- [WISTIA](#wistia) 


## 音楽配信
- [Spotify](#spotify)
- [Apple Music](#apple-music)

## ブログ
- [Tumblr](#tumblr)

## SNS
- [Twitter](#twitter)

## その他
- <a href="#codepen">CodePen</a>
- [diagrams.net](#diagramsnet)
- <a href="#loom">Loom</a>
- [PlantUML](#plantuml)
- [Miro](#miro)


### プロトタイピングツール
#{https://help.docbase.io/posts/112330}

# 貼り付け方

## Google関連
### Google Docs
<iframe src="https://docs.google.com/spreadsheets/d/1VGcoPOXhvrgnJltnf7kSuMEEChHesilHsfiPY0UXub4/pubhtml?widget=true&amp;headers=false"></iframe>

1. 「ファイル」→「Webに公開...」をクリック
1. 「埋め込む」タブから公開したい範囲を選択、「公開する」ボタンをクリック
1. 表示されたiframeのコードをコピー、メモに貼り付け


### Google Drive
<iframe src="https://docs.google.com/file/d/0B9c21-Ap3cYPVHR6LUsyS0p0QTg/preview?resourcekey=0-FqM9inpVX4vVk7bX0V1LkQ" width="640" height="480" allow="autoplay"></iframe>
1. ファイルを右クリック
1. 「共有...」からメンバーが見えるように共有設定をする
1. 共有のURLでファイルを開く
1. 「アイテムを埋め込む」からiframeのコードをコピー、メモに貼り付け


### Google Maps
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d207359.63228549558!2d139.58120699999998!3d35.701759!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018ee4833dc8999%3A0x915b0e8d4aa9acce!2z5qCq5byP5Lya56S-44Kv44Os44Kk!5e0!3m2!1sja!2sjp!4v1426125342110" width="600" height="450" frameborder="0" style="border:0"></iframe>

1. 目当ての場所にピンを立て、画面右下の歯車のアイコンをクリック
1. 「地図を共有または埋め込む」をクリック
1. 「地図を埋め込む」タブに切り替え、iframeのコードをコピー、メモに貼り付け

### Google Calendar
<iframe src="https://www.google.com/calendar/embed?src=ja.japanese%23holiday%40group.v.calendar.google.com&ctz=Asia/Tokyo" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

1. 左下に表示されているカレンダー名にマウスオーバーすると「▼」ボタンが出てくるので、クリックして「カレンダー設定」をクリック
1. 「このカレンダーを埋め込む」セクションからiframeのコードをコピー、メモに貼り付け


## ストレージ
### Box
 <iframe src="https://app.box.com/embed/s/oo2fbyutdvz898f1wdv195g9ecdspb23" width="500" height="400" frameborder="0" allowfullscreen webkitallowfullscreen msallowfullscreen></iframe> 

1. ファイルの「…」（More Options）アイコンをクリックします
2. 「More Actions」から「Embed Widget」をクリックします
3. 表示された埋め込みコードをコピーし、メモにペーストします


## スライド共有
### slideshare
<iframe src="//www.slideshare.net/slideshow/embed_code/37836040" width="425" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>

1. スライドの下に並んでいるアイコンのうちの左から2番め、「< >」のアイコンをクリック
1. 「Embed」のテキストボックスからiframeのコードをコピー、メモに貼り付け

__※slideshareもVimeoと同様、`</iframe>`の後に`<div>`タグがついているので、`</iframe>`以降は削除して貼り付けをお願いします。__

### Speaker Deck
<iframe class="speakerdeck-iframe" frameborder="0" src="https://speakerdeck.com/player/c52d95450d824080961819d92c6f7f68" title="小さくはじめて、チームを育てる #docbase #devKan" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" style="border: 0px; background: padding-box padding-box rgba(0, 0, 0, 0.1); margin: 0px; padding: 0px; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 40px; width: 560px; height: 420px;" data-ratio="1.3333333333333333"></iframe>

1. Speaker Deckのスライドページを開き、右下の  <i class="fas fa-upload"></i> アイコンをクリック
2. 「Embed」タブに切り替え
3. 「Copy iframe embed code」をクリックして埋め込みコードをコピー
4. メモに貼り付け

![7b29bbf4-4d08-49f9-9dd2-815d9db3a793-1920x1264r.png](https://image.docbase.io/uploads/62130550-4e8d-425e-901f-5abcf044ff6b.png =WxH)

## 動画配信

### YouTube
<iframe src="https://www.youtube.com/embed/OlEI9eA5zjI" frameborder="0" allowfullscreen></iframe>

1. 動画ページを開き、「共有」をクリック
1. 「埋め込みコード」からiframeのコードをコピー、メモに貼り付け


### Vimeo
<iframe src="//player.vimeo.com/video/20510064" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

1. 動画の右上にアイコンが3つあるので、その中の「共有（紙飛行機のアイコン）」をクリック
1. 「埋め込み」からiframeのコードをコピー、メモに貼り付け

__※ 特定のドメインでのみ動画の再生を許可する設定を行った動画では、以下のように`<irame>`の属性値を修正する必要があります。__

#### 「埋め込み」から取得できるコード
```html
<div style="padding:177.78% 0 0 0;position:relative;">
  <iframe src="https://player.vimeo.com/video/20510064?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="PXL_20240414_034213428">
  </iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
```
#### 修正後のコード
`<iframe>`の属性値に<span style="color:#c6018b;">referrerpolicy="strict-origin-when-cross-origin"</span>を追加します。
```html
<div style="padding:177.78% 0 0 0;position:relative;">
  <iframe referrerpolicy="strict-origin-when-cross-origin" src="https://player.vimeo.com/video/20510064?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="PXL_20240414_034213428">
  </iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
```

### WISTIA
<iframe src="https://fast.wistia.net/embed/iframe/axlrgwe29y" title="henshu_kou_0131_1.mp4 Video" allow="autoplay; fullscreen" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen msallowfullscreen width="640" height="381"></iframe>
<script src="https://fast.wistia.net/assets/external/E-v1.js" async></script>

1. 管理画面から動画ページを開く
2. 「Embed & Share」ボタンをクリック
3. 「Inline Embed」タブのOpstions「Embed Type」にて「Fallback」を選択
4. 生成されたコードをコピー、メモに貼り付け


## 音楽配信
### Spotify
<iframe src="https://open.spotify.com/embed/track/0d2iYfpKoM0QCKvcLCkBao" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

1. 曲の「…」アイコンをクリックします
2. 「シェア」から「埋め込みコードをコピー」をクリックします
3. メモにペーストします


### Apple music
<iframe allow="autoplay *; encrypted-media *;" frameborder="0" height="450" style="width:100%;max-width:660px;overflow:hidden;background:transparent;" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation" src="https://embed.music.apple.com/us/album/girls-like-you-feat-cardi-b-single/1381582726"></iframe>

1. 「<span class="lsf u-fz-xl">upload</span>」アイコンをクリックし、表示された「<i class="fas fa-code"></i>」アイコンをクリックします
2. メモにペーストします


## ブログ

### Tumblr
 <div class="tumblr-post" data-href="https://embed.tumblr.com/embed/post/ovYcU4NRFQ7GAoHRe9g8_A/166540445922" data-did="21d49fae6c4f9c7d3ec746defb15e27c0d76742e"><a href="https://support.tumblr.com/post/166540445922/best-stuff-first">https://support.tumblr.com/post/166540445922/best-stuff-first</a></div>  <script async src="https://assets.tumblr.com/post.js"></script>

1. 埋め込みたい投稿の「…」ボタンからメニューを開き「Embed」をクリックします
2. 表示された埋め込みコードをメモにペーストします


## SNS

### Twitter
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">検索がパワーアップしていい感じになりました<a href="https://t.co/J8CZhOeRVs">https://t.co/J8CZhOeRVs</a><br><br>今まではゆるふわだった検索のアルゴリズムを見直し、大幅に精度が上がりました！<br>タイトル・本文・コメントでの絞り込みもオプションに追加し、なんと添付ファイルからも検索できるようになりました✨ <a href="https://t.co/1QNFElzCBp">pic.twitter.com/1QNFElzCBp</a></p>&mdash; DocBase (@docbaseio) <a href="https://twitter.com/docbaseio/status/1055338020994347008?ref_src=twsrc%5Etfw">2018年10月25日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

1. 埋め込みたいツイート右上の「<i class="fas fa-angle-down fa-lg"></i>」ボタンをクリックし、メニューを開きます
2. 「ツイートをサイトに埋め込む」をクリックします
3. 表示された`iframe`のコードをコピーし、メモにペーストします


## その他
### CodePen
<iframe height='306' scrolling='no' src='//codepen.io/BenjaminVilina/embed/NPLBNd/?height=306' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/BenjaminVilina/pen/NPLBNd/'>SCSS Hover Implode</a> by Benjamin Vilina (<a href='http://codepen.io/BenjaminVilina'>@BenjaminVilina</a>) on <a href='http://codepen.io'>CodePen</a>.
</iframe>

1. 画面上部の「Sahre」をクリックして開き、「Embed」をクリック
1. 右上にある「iframe」の文字をクリック
1. 上のテキストフィールドにiframeのコードが表示されるのでコピー、メモに貼り付け


### diagrams.net
<iframe frameborder="0" style="width:100%;height:343px;" src="https://viewer.diagrams.net/?highlight=0000ff&edit=_blank&layers=1&nav=1#RrVRNb6MwEP01HLdKcJImx5I07WErrZRDj5UDA1g1DDKTQPbXrw3DV0mlXWl9QJ4345nxe2M8sc%2FqFyOL9A0j0J6%2FiGpPHDzf3618%2B3XArQXWu20LJEZFLbQcgJP6DQwuGL2oCMpJICFqUsUUDDHPIaQJJo3BahoWo55WLWQCM%2BAUSj1H31VEaYtu%2FccBfwWVpF3l5WbXes4y%2FEwMXnKu5%2FkiblbrzmSXiy9apjLCagSJZ0%2FsDSK1u6zeg3bUdrS1547fePu%2BDeT0Nwe47avUF%2Bg6bvqiW8fFFQwpS81PeQb9C0tFCnPrOiMRZp4IuoAnrRLnICwsmlKmrbG025IMfvZE%2Bg5JZeHSZ3Xi5uch1liFqTT0gHH8w9H7YSAGe4vQhgUGSXLVlbB2rLTeo0bTdCiOzeoLjTyLZlmPds0HvTj3DttOImVp63w55q72nFEm2V0b6hHEDL8AZkDmZkPY629ZbX4N%2FprtapgtC7ZYOpqr%2Fj1Inuekzz1oajcs6zczsZhpfMAwkCXMpLb3oXvSfaFkTD9DkrUPLUtg7gxFpqLIlQmqVBGcCumEPVRWfZcQc%2BKfwHrN9lFmSjvCXkFfweXqArnfJdv35P4foq02E9FWm7loQmzmom3%2FXTNrDk%2B%2B8Y1%2Bq%2BL5Dw%3D%3D"></iframe>
1. 「File」メニューを開き、「Eｍbed」から「IFrame...」をクリック
1. 「create」ボタンをクリック
1. 表示されたIframeのコードをコピーし、メモにペーストします

### Loom
[Loom](https://www.useloom.com/)(旧Opentest)はPCの画面録画と同時にインカメラでの録画もできて、録画した動画を簡単に共有したり、サイトに埋め込んだりできます。DocBaseのメモに貼っていただくことで、動画を使ったマニュアルやレビューなどに活用できるのではないでしょうか。

<iframe width="630" height="394" src="https://www.useloom.com/embed/077569089cb942b6a3ba2fdc6a10f531" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
※ こちらの動画は[Loom](https://www.useloom.com/)のFAQの動画です。


#### 参考サイト
[動画マーケも簡単に？海外で人気の録画ツールOpentestは、レビューや情報共有にも有効](https://seleck.cc/853)

### PlantUML
```plantuml
autonumber
Bob -> Alice : Authentication Request
Bob <- Alice : Authentication Response
```

    ```plantuml
    autonumber
    Bob -> Alice : Authentication Request
    Bob <- Alice : Authentication Response
    ```

1. コードブロックを作成し、言語を`plantuml`に指定します
2. コードブロック内にPlantUMLの構文で記述すると、レンダリングして表示されます

### Miro
<iframe width="768" height="432" src="https://miro.com/app/live-embed/uXjVOxtiH2I=/?moveToViewport=-893,-514,1949,970" frameBorder="0" scrolling="no" allowFullScreen></iframe>

1. ボード左上のシェアボタンから「埋め込み」をクリックします
    - ![スクリーンショット\_2022-05-26\_12\_24\_38.png](https://image.docbase.io/uploads/ea3338d9-a581-4506-b0de-960685e64e88.png =600x)
2. 表示された埋め込みコードをコピーし、メモに貼り付けます
    - ![FireShot\_Capture\_118\_-\_My\_First\_Board\_\_Online\_Whiteboard\_for\_Visual\_Collaboration\_-\_miro\_com.png](https://image.docbase.io/uploads/124c6f20-3c4c-405d-8fee-4b8c9e3bda4c.png =600x)