【Rails】AppleMusicを投稿して埋め込む方法

# 1:概要

**apple musicのリンクを投稿し、サイトに埋め込む方法**を２つを紹介していきたいと思います。
サイト上で試聴も可能なため、音楽投稿系サイトを作りたい方々にはおすすめ:relieved:
使いたい方法に応じて選んでいただけたら幸いです。spotifyでも応用できるかと思います。

方法はこの二つです！
①埋め込みリンクを投稿する方法
②普通の共有リンクを投稿して埋め込む方法

使い分け方法は以下を参考に！
①`曲・アルバム・プレイリストのカラムを分けずに投稿できる`
②`携帯のMusicアプリからリンクをコピーして投稿できる`


### 完成図イメージ

![GIF 2022-06-14 5-15-46.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1373315/c87bbb5c-6c0a-7e66-f0d6-1b8fc459ffcf.gif)

### 前提
基本的なCRUD機能に関してはすでに実装出来ているものとします。コントローラー名はpostsで記述しています。

```ruby:開発環境
ruby 2.7.3
rails 6.1.6
```

# ２:applemusic 埋め込みリンクについて
#### applemusicから埋め込みリンクをコピーする方法
そもそもAppleMusicは埋め込みリンクを簡単に取得できるようになっています！（Spotifyも同じく）
パソコンで、iTunesか、[ApplemusicWeb版](https://music.apple.com/jp/listen-now)を開いてログイン
↓
埋め込みたい曲・アルバムを検索!

↓
・・・ボタン→曲を共有→埋め込みコードをコピー
で以下のようなリンクがコピーできるはずです。
`<iframe allow="autoplay *; encrypted-media *;" frameborder="0" height="150" 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/jp/album/%E3%83%9F%E3%83%83%E3%82%AF%E3%82%B9%E3%83%8A%E3%83%83%E3%83%84/1616586638?i=1616586639"></iframe>`
・一曲
・アルバム
・プレイリスト
どれも同じ手順でコピーできます。

詳しくはこちらをご覧ください↓
[Apple Musicの再生プレイヤーをブログやウェブサイトに埋め込む方法](https://www.shellbys.com/entry/apple-music-embed-in-my-blog#:~:text=Apple%20Music%E3%81%AE%E3%80%8C%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF%E3%82%B3%E3%83%BC%E3%83%89%E3%80%8D%E3%82%92%E3%82%B3%E3%83%94%E3%83%BC%E3%81%97%E3%82%88%E3%81%86&text=%E3%81%A8%E3%81%9D%E3%82%8C%E3%81%9E%E3%82%8C%E3%81%AE%E5%8D%98%E4%BD%8D%E3%81%A7,%E3%81%97%E3%81%84%E3%81%8F%E3%81%A0%E3%81%91%E3%81%A7%E3%81%99%E3%81%AD%E3%80%82)

:::note warn
パソコンのみリンク取得可能です。携帯では埋め込みリンクはコピーできません。
:::

#### viewファイルにコピー
上記でコピーしたものを好きなviewファイルにそのままコピーすることで、Applemusicのアルバムや曲を埋め込むことが可能です。サイト上で1分30秒試聴可能になっています。
```HTML:index.html.erb
<iframe allow="autoplay *; encrypted-media *;" frameborder="0" height="150" 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/jp/album/%E3%83%9F%E3%83%83%E3%82%AF%E3%82%B9%E3%83%8A%E3%83%83%E3%83%84/1616586638?i=1616586639"></iframe>
```
プレビューはこのような形。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="oNEPRNd" data-user="nocchi_11" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/nocchi_11/pen/oNEPRNd">
  Untitled</a> by Akari (<a href="https://codepen.io/nocchi_11">@nocchi_11</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
これを投稿でも同じように表示させていきたいと思います。

## ３ いざ実装
## 3-1　埋め込みリンクの投稿
まずは一つ目の方法、埋め込みリンクを投稿し、表示させる方法です。
#### カラム作成
リンクを投稿するカラムを作成し、投稿画面に追加します。今回は`apple`カラムを作っていきたいと思います。
```ruby:ターミナル
$ rails g migration AddAppleToPosts apple:text
$ rails db:migrate
```
paramsの追加を忘れずに！！
```ruby:posts_controller.rb
    private    
    def post_params
        params.require(:post).permit(:body, :apple)
    end
```

#### 投稿Viewファイルの編集
```HTML:new.html.erb
<%= form_for @post do |f| %> 
　　#省略
    #ここから追加
    <%= f.label :AppleMusic埋め込みリンク %>
    <%= f.text_field :apple, :size => 140 %>
　　#ここまで
  <%= f.submit "送信する" %>
```
このまま一覧ページに表示させると、リンクとして機能せず、文字列が表示されてしまうため、調整していきます。
#### Gem導入
Gemfileに`rinku`を追加
```ruby:Gemfile
gem 'rinku'
```
```ruby:ターミナル
$ bundle install
```
#### 一覧Viewファイルの編集
```HTML:index.html.erb
<% @posts.each do |t| %>
    #ここから追加
    <%= Rinku.auto_link(t.apple, :all, 'target="_blank"').html_safe %>
    #ここまで
 <% end %>
```
#### 完成！
これで、applemusicから埋め込みリンクさえコピーしてくれば、誰でも投稿して表示することできるようになりました！

## 3-2　共有リンクを投稿し、埋め込む方法
二つ目の方法、普通の共有リンクを投稿して、それを埋め込む方法です。

一つ目に紹介した埋め込みリンクは、パソコンで開いた際にしか取得することができません。
携帯からも気軽に投稿して埋め込みたいよ～という方はこちらの方法を使っていきましょう！


:::note warn
注意点
一曲のみの投稿と、アルバム・プレイリストでの投稿で、カラムを分ける必要性があります。
:::

#### 共有リンクの取得
以下の手順でリンクを取得できます:notes:
apple musicを開く
↓
埋め込みたい曲・アルバムを検索
↓
・・・ボタン→曲を共有→コピー
![iOS の画像 (24).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1373315/cfcddd5b-6468-3bc4-ccbb-44f0d17c1f22.jpeg)
![iOS の画像 (26).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1373315/7937c968-eb54-2741-7b6f-502f1615aa2d.jpeg)
![iOS の画像 (25).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1373315/87022c41-433d-24bb-3b43-a5219c65ad32.jpeg)

以下のようなコードがコピーできると思います。
`https://music.apple.com/jp/album/%E3%83%9F%E3%83%83%E3%82%AF%E3%82%B9%E3%83%8A%E3%83%83%E3%83%84/1616586638?i=1616586639`

https://music.apple.com/jp/album/%E3%83%9F%E3%83%83%E3%82%AF%E3%82%B9%E3%83%8A%E3%83%83%E3%83%84/1616586638?i=1616586639
#### カラム作成

リンクを投稿するカラムを作成し、投稿画面に追加します。今回は`song`カラムと、`album`カラムを作っていきたいと思います。
```ruby:ターミナル
$ rails g migration AddSongsToPosts song:text album:text
$ rails db:migrate
```
こちらもparamsへの追加を忘れずに！！
```ruby:posts_controller.rb
    private    
    def post_params
        params.require(:post).permit(:body, :apple, :song, :album)
    end
```

#### 投稿Viewファイルの編集
```HTML:new.html.erb
<%= form_for @post do |f| %> 
　　#省略
    #ここから追加
        <%= f.label :AppleMusic：曲のリンク %>
        <%= f.text_field :song, :size => 140 %>
        <%= f.label :AppleMusic：アルバム・プレイリストのリンク %>
        <%= f.text_field :album, :size => 140 %>
　　#ここまで
  <%= f.submit "送信する" %>
```

#### コントローラーの編集
Postsコントローラーのcreateアクションを編集していきます。
```ruby:posts_controller.rb
#省略
def create
    post = Post.new(post_params)

#ここから追加
    songurl = params[:post][:song]
    songurl.slice!(0,23)
    post.song = songurl

    albumurl = params[:post][:album]
    albumurl.slice!(0,23)
    post.album = albumurl
#ここまで
    if post.save
        redirect_to :action => "index"
    else
        redirect_to :action => "new"
    end
end
```
ここの部分の解説は最後に書いていきたいと思います。

#### 一覧Viewファイルの編集
```HTML:index.html.erb
<% @posts.each do |t| %>
    #ここから追加
    <% if t.song.present? %>
        <iframe allow="autoplay *; encrypted-media *;" frameborder="0" height="150" 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<%= t.song %>"></iframe>
    <% end %>
    <% if t.album.present? %>
        <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<%= t.album %>"></iframe>
    <% end %>
    #ここまで
<% end %>
```
一曲とアルバム/プレイリストで分けている理由はここでわかるかと思います。heightの部分ですね。
一曲：` height="150"`
アルバム/プレイリスト：` height="450"`
と異なるため、どちらかに揃えてしまうときれいに表示されなくなってしまいます。


#### 完成！
これで、applemusicから共有リンクをコピーし、誰でも投稿して表示することできるようになりました！

#### 少しだけ解説
ここで、`posts_controller.rb`に追記した以下の部分についてさらっと解説をしていきます。

```rb
songurl = params[:post][:song]
songurl.slice!(0,23)
posts.song = songurl
```
ここでは「songカラムに送信された値から、冒頭の23文字`https://music.apple.com`を削除し、値をカラムに再び代入する」という作業をしています。

>埋め込みリンク
`<省略>"https://embed.music.apple.com/jp/album/%E3%83%9F%E3%83%83%E3%82%AF%E3%82%B9%E3%83%8A%E3%83%83%E3%83%84/1616586638?i=1616586639"></iframe>`

>共有リンク
`https://music.apple.com/jp/album/%E3%83%9F%E3%83%83%E3%82%AF%E3%82%B9%E3%83%8A%E3%83%83%E3%83%84/1616586638?i=1616586639`

二つを見比べてみると、jp/album/~~~以降が同じであることがわかるかと思います。ここで曲やアルバムを識別しているのです。共有リンクからそこだけを抜き出し、HTMLの埋め込み部分に反映させることで、共有リンクから埋め込みを作ることが可能となっています。


##### 1行目~params~

```rb
songurl = params[:post][:song]
```
paramsとはrailsに用意されたgetやpostで送られてきた値を格納するためのメソッドです。
ここでは詳しく説明しないので、気になる方はぜひこちらの記事をご覧ください
[YoutubeURLを埋め込みさせる方法、paramsの解説](https://qiita.com/Kairi_Yasunnde/items/8e931a4670549ba8237e#params%E3%81%A8%E3%81%AF)
[paramsのわかりやすい解説記事](https://qiita.com/tomoharutsutsumi/items/46e6358acc8b45cd7db1)

簡単に言うと、
**変数songurl**に、songカラムに入力した値を格納してます。

現在の変数songurlの中身はこちら

```
https://music.apple.com/jp/album/%E3%83%9F%E3%83%83%E3%82%AF%E3%82%B9%E3%83%8A%E3%83%83%E3%83%84/1616586638?i=1616586639
```

##### 2行目～slice！メソッドについて～
ここから、リンク冒頭の23文字、`https://music.apple.com`を削除していきます。

```rb
songurl.slice!(0,23)
```
rubyの配列にはslice,slice!というメソッドがあります。

>*sliceメソッド：指定された自身の部分配列を返します。*
>*slice!メソッド：指定した要素を自身から取り除き、取り除いた要素を返します。取り除く要素がなければ nil を返します。*

[slice!メソッドの説明はこちら](https://docs.ruby-lang.org/ja/latest/class/Array.html#I_SLICE--21)


つまり、sliceメソッドもslice！メソッドも**指定の文字列を取り出すことができるメソッド**であり、特にslice! メソッドは破壊的なメソッドで、元の文字列は取り出した文字列を除いたものになります。

`.slice!(0,23)`と書くことで、0文字目から23文字を取り出しており、
例えば`a=songurl.slice!(0,23)`と書くと、aの値は`https://music.apple.com`で、もとのsongurlからはこの23文字が取り除かれています。

現在の変数songurlの中身はこちら

```
/jp/album/%E3%83%9F%E3%83%83%E3%82%AF%E3%82%B9%E3%83%8A%E3%83%83%E3%83%84/1616586638?i=1616586639
```

##### 3行目

```rb
posts.song = songurl
```
songカラムにsongurlの中身を戻します。


# 4:おわり
以上になります。
spotifyもこの応用でできると思うので、是非チャレンジしてみてください！

##### 参考資料 
>[【Rails】Rinkuを使い、URLを検出してaタグを自動的に適応させる方法](https://qiita.com/ngron/items/151e1e4b94319bcbdeec)
[ railsアプリに投稿されたYouTubeURLを自動的に埋め込み表示させる方法~無理やり編~](~https://qiita.com/Kairi_Yasunnde/items/8e931a4670549ba8237e)
[Rubyで文字列を削除する方法を現役エンジニアが解説【初心者向け】](https://techacademy.jp/magazine/21758)
[Apple Musicの再生プレイヤーをブログやウェブサイトに埋め込む方法](https://www.shellbys.com/entry/apple-music-embed-in-my-blog#:~:text=Apple%20Music%E3%81%AE%E3%80%8C%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF%E3%82%B3%E3%83%BC%E3%83%89%E3%80%8D%E3%82%92%E3%82%B3%E3%83%94%E3%83%BC%E3%81%97%E3%82%88%E3%81%86&text=%E3%81%A8%E3%81%9D%E3%82%8C%E3%81%9E%E3%82%8C%E3%81%AE%E5%8D%98%E4%BD%8D%E3%81%A7,%E3%81%97%E3%81%84%E3%81%8F%E3%81%A0%E3%81%91%E3%81%A7%E3%81%99%E3%81%AD%E3%80%82)