Short Code試作

前回？の続き

とりあえずものは試しと思ってBandcampのアルバムとトラックを埋め込めるショートコードを作ってみた。新しいおもちゃを手に入れたので弄りまわっている状態である。

試作品

アルバム

code

1

{{< bandcamp albumID="1589371023" >}}

output

トラック

code

1

{{< bandcamp albumID="1589371023" trackID="2624468845" >}}

output

実装

単にiframeに変数をぶち込めるようにしてラッパーを用意しただけである。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


{{- $albumID := .Get "albumID" -}}
{{- $trackID := .Get "trackID" -}}
<div class="bandcamp-wrapper">
    {{- if not $trackID -}}
    <iframe style="border: 0; width: 100%; height: 307px;"
            src="https://bandcamp.com/EmbeddedPlayer/album={{ $albumID }}/size=large/bgcol=ffffff/linkcol=0687f5/artwork=small/transparent=true/" seamless>
    </iframe>
    {{ else }}
    <iframe style="border: 0; width: 100%; height: 120px;"
            src="https://bandcamp.com/EmbeddedPlayer/album={{ $albumID }}/size=large/bgcol=ffffff/linkcol=0687f5/tracklist=false/artwork=small/track={{ $trackID }}/transparent=true/" seamless>
    </iframe>
    {{ end }}
</div>

課題点

一見これでまぁええんちゃうの感はあるけど、bandcampのアルバムIDとトラックIDは普段フロントに出ておらずスラッグが用いられているので、このショートコードを利用するにあたってどうにかしてこの対象楽曲のIDを割り出さないといけない。なんだったら一番手っ取り早いのは「埋め込み用iframeのコードを出力してそこからIDを取得する」である。

ちなみにSoundcloudもこの方式だった。URLが分かりやすいのはいいけどその代償がでかすぎる。

どうにかしたいがURLからIDを割り出す手段が思いつかず、共有で出力されるiframeそのまま貼るだけで形になっているので、とりあえず提供されたものをそのまま使うことにする。

普通のサイトの埋め込み

それ以外はというと、Hugo単体でどうにかするのは無理では？という気がしてきたので、なんかそれっぽいものを自作してみることにした。

出来たものがこちらです

1
2
3
4
5
6


{{- $url := .Get "url" -}}
<div class="embed-container">
  {{- if $url -}}
  <iframe src="https://proxy.seeds-9.com/?{{ $url }}" frameborder="0" scrolling="no"></iframe>
  {{ end }}
</div>

もはやショートコードよりURLからOGP割り出すのを書いている

OGPなし

OGPあり

Misskeyのノートとか

流石にリアクションとかは無理ぽ

写真はOGPとして代用されるらしい

ふと思ったけど

これは所謂サマリープロクシとかいうやつでは？