WebページへのSNSの埋め込み
WebページへのSNSの埋め込み
WebページへSNSを埋め込む時の方法をこちらにまとめます
YouTubeの埋め込みの場合
YouTubeを埋め込むにあたって、YouTubeには以下の3種類のURLが存在することを理解しておく必要がある
[ブラウザから視聴するURL]
# ブラウザからの視聴 https://www.youtube.com/watch?v=ZZ3PMuqYR7Y
[Webページへの埋め込みするURL]
# Webページへの埋め込みのHTML <iframe width="560" height="315" src="https://www.youtube.com/embed/ZZ3PMuqYR7Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
[共有からコピーしたURL]
#共有からのURL https://youtu.be/ZZ3PMuqYR7Y
以下のようにWebページにYouTubeでの共有からコピーしたURLを貼り付けた場合にYouTubeの動画が埋め込まれるようにする為には、以下のようにする
[app/views ファイル] .embed-youtube = content_tag 'iframe', nil, width: width, height: height, src: embed.youtube_url(embed.identifier), \ frameborder: 0, gesture: 'media', allow: 'encrypted-media', allowfullscreen: true [app/decorators/embed_decorator.rb] module EmbedDecorator def youtube_url(url) array = url.split('/') "https://www.youtube.com/embed/#{array.last}" end end # 上記は、YouTubeの埋め込みHTMLを利用しこのHTMLの中に使用するURLは、Webページに入力したYouTubeの共有ボタンからコピーしたURLとは違うので、埋め込み用のURLにメソッドを使って加工している
Twitterの埋め込みの場合
YouTubeを埋め込むにあたって、YouTubeには以下の3種類のURLが存在することを理解しておく必要がある
[ブラウザから確認するURL]
# ブラウザからのTweetの確認 https://twitter.com/ManCityJP/status/1431615787647713284
[WebページへTweetを埋め込みするURL]
# WebページへTweetを埋め込みするHTML <blockquote class="twitter-tweet"><p lang="ja" dir="ltr">🌟 圧巻のパフォーマンス 🌟<br>ご声援ありがとうございました!!<br>良い週末をお過ごしください ✨<br><br>プレミアリーグ第3節<a href="https://twitter.com/ManCityJP?ref_src=twsrc%5Etfw">@ManCityJP</a> 🔵 5-0 🔴 アーセナル<br>⚽️ 前節に続き5ゴールをゲット 💙<br>⚽️ 2試合連続クリーンシート達成 💙<br><br>🔷 <a href="https://twitter.com/hashtag/ManCity?src=hash&ref_src=twsrc%5Etfw">#ManCity</a> <a href="https://t.co/czqLs4HgcV">pic.twitter.com/czqLs4HgcV</a></p>— Manchester City (@ManCityJP) <a href="https://twitter.com/ManCityJP/status/1431615787647713284?ref_src=twsrc%5Etfw">August 28, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
[Tweetの共有からコピーしたURL]
# Tweetの共有からコピーしたURL https://twitter.com/ManCityJP/status/1431615787647713284?s=20
以下のようにWebページにTweetでの共有からコピーしたURLを貼り付けた場合にTweetが埋め込まれるようにする為には、以下のようにする
[app/views ファイル] .embed-twitter blockquote.twitter-tweet a href="#{embed.identifier}" script src="https://platform.twitter.com/widgets.js" charset="utf-8" # 上記は、Tweetの埋め込みHTMLを利用しこのHTMLの中でWebページで入力したURLを使っている
上記の[blockquote]タグは、[iframe]タグに置き換わるが、このHTMLの変換はhttps://platform.twitter.com/widgets.jsが行なっている。
参考記事
YouTube動画埋め込み時に「www.youtube.com で接続が拒否されました。」が表示された際に確認すること | アナライズギア開発ブログ
HTMLでの<iframe>
HTMLでの
<iframe src="(Webページの中に組み込みたいHTMLのファイル)" width="(Webページに組み込むHTMLの横幅)" height="(Webページに組み込むHTMLの縦幅"></iframe>以下が実際の使用例
<iframe src="test3.html" width="200" height="100"></iframe>
[test1.html]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p>これは、テストです。</p> <iframe src="test3.html" width="200" height="100"></iframe> </body> </html>
[test2.html]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p>iframeタグの検証になります。</p> </body> </html>
上記の[test1.html]をブラウザで表示した画面が以下になります。
参考記事
html_safeメソッド
[html_safe]メソッドとは?
Railsでは、<%=%>を使ってHTMLの出力をする場合<%=%>の中に[<],[>],[&],["]といったHTMLにおいての特殊な文字を入れると、HTMLとしての意味で表示されてしまうため、Railsでは自動でこういった文字をエスケープしてブラウザ上でHTMLとしての解釈ではなく、文字としての記号として表示するようにしている。
しかし、場合によってはエスケープせずに<%=%>の中の[<],[>],[&],["]といった記号をHTMLとしての意味として使いたい場合がある。
こういった場合は、<%=%>の中で自動でエスケープされてしまうのを止めることでHTMLとして[<],[>],[&],["]といった記号を使う事ができる。
このような自動でエスケープされてしまうのを止めるメソッドが、[html_safe]メソッドです。
実際に<%=%>の中での自動エスケープと[html_safe]メソッドを使って自動エスケープを止める検証が以下のようになります。
# slim形式での記述 h3.box-title = '<p>文章</p>' # 上記の記載は、ブラウザの検証ツールでは以下のように表示されて、pタグなどがエスケープされているのが分かる <h3 class="box-title"><p>文章</p></h3>
上記は、<h3 class="box-title"></h3>
の中にrubyコードが記述されているがpタグがエスケープされてpタグのまま記述されている
# slim形式での記述 h3.box-title = '<p>文章</p>'.html_safe # 上記の記載は、ブラウザの検証ツールで以下のように表示されて、<p>タグがエスケープされず表示されてブラウザがHTMLタグとしての意味で表示しているのが分かる <h3 class="box-title"><p>文章</p></h3> <p>文章</p> </h3>
上記は、<h3 class="box-title"></h3>
の中にrubyコードが記述されてその中にある
タグがエスケープされずブラウザでHTMLの
タグの意味として表示されている
参考記事
slim形式の[|]と[']
slim形式の[|]と[']
slim形式でパイプライン(|)とシングルクォーテーション(')の意味がなかなか理解できなかったので、こちらにまとめます。
パイプライン[|]は、[|]以降に記載したものをコピーしてテキストとして定義する
シングルクォーテーション[']は、パイプライン[|]と同様に[']以降に記載したものをテキストとして定義するが, 末尾にスペースを1つ作る
以下にパイプライン[|]とシングルクォーテーション[']の動きがイメージしやすいように例を示します
p テスト1
上記のように記述すると下記のようになり、[テスト1]がエスケープされず<テスト1>と表示される
p | テスト1
上記のように記述すると下記のようになり、[テスト1]がエスケープされて<テスト1>と表記されず、テスト1だけで表示される
p | テスト1 テスト2
上記のように記述すると下記のようになり、[テスト1]と[テスト2]が1行に繋がって表示される(パイプラインより深く記述されたものは、コピーされて1行に表示される)
p | テスト1 テスト2
上記のように記述すると下記のようになり、[テスト1]と[テスト2]が1行に繋がって表示される(パイプラインより深く記述されたものは、コピーされて1行に表示される)
p | テスト1<br> テスト2
上記のように記述すると下記のようになり、[テスト1]と[テスト2]が改行されて表示される
p | テスト1 ' テスト2
上記のように記述すると下記のようになり、[テスト1]と[テスト2]の間にスペースができない
p ' テスト1 ' テスト2
上記のように記述すると下記のようになり、[テスト1]と[テスト2]の間にスペースができる
参考記事
【Rails】 slimの書き方をマスターしよう! | Pikawaka - ピカ1わかりやすいプログラミング用語サイト
インライン要素とブロックレベル要素
インライン要素とブロックレベル要素
インライン要素とブロックレベル要素が曖昧だったため、こちらにまとめます
インライン要素とブロックレベル要素の例を以下に示します
<h1 style="background-color: blue;"><p>テストです</p></h1> # ブロックレベル要素の中にブロックレベル要素 <h1 style="background-color: blue;"><strong>テストです</strong></h1> # ブロックレベル要素の中にインライン要素 <h1><strong style="background-color: blue;">テストです</strong></h1> # ブロックレベル要素の中にインライン要素 <strong style="background-color: blue;">テストです</strong> # インライン要素 <strong style="background-color: blue;">テストです</strong> # インライン要素
上記の結果が以下になります
上記からも分かるようにブロックレベル要素は、横いっぱいに広がり、次のブロックがある場合は行が変わる
インライン要素は、文字いっぱいにまでの領域で改行されないのでインライン要素を連続すると横に連なる
※ルール
・ブロックレベル要素: ブロックレベル要素の中には、ブロックレベル要素とインライン要素どちらも配置できる
・インライン要素: インライン要素の中には、インライン要素は配置できるが、ブロックレベル要素は配置できない
# OK <h1><p>テストです</p></h1> <h1><strong>テストです</strong></h1> # NG <strong><p>テストです</p></strong>
参考記事
HTML&CSSブロック要素とインライン要素の違いをしっかり知る!!ブロック要素でセンターにする方法も! - YouTube
simple_form Gem
[simple_form]Gemについて
[simple_form]Gemは、Railsでのフォームの記述を簡単にする為のGemです。
また、[enum_help]Gem(enumの日本語翻訳)と組み合わせる事で、enumを利用したラジオボタンを作成する時などに[enum_help]Gemの翻訳ファイルを読み込んで自動で日本語のラジオボタンなどにしてくれる。
[simple_form]Gemの主な使い方
Gemfileに以下のように記述する
[Gemfile] gem 'simple_form'
↓
$ bundle install
↓
以下コマンドで[simple_form]の設定ファイルを作成する
$ rails generate simple_form:install # [simple_form]Gemにbootstrapのデザインを適用したい場合は、下記で実行する rails generate simple_form:install --bootstrap
↓
[simple_form]Gemを使ったフォームの記述例を以下に示します。
[app/views ファイル] <%= simple_form_for @article, url: admin_article_path(@article.uuid) do |f| %> <%= f.input :title %> <%= f.input :slug %> <%= f.input :eye_catch, as: :file %> <%= f.input_field :position, as: :radio_buttons %> <%= f.input :eyecatch_width, placeholder: "100" %> <% end %>
[db/schema.rb] create_table "articles", force: :cascade do |t| t.string "slug" t.string "title" t.datetime "created_at", null: false t.datetime "updated_at", null: false t.integer "position", default: 0, null: false t.integer "eyecatch_width" t.index ["slug"], name: "index_articles_on_slug" end
上記で生成されるフォームは、以下のようになる。
これは、[simple_form_for]に渡した@articleと[f.input]に渡している属性からカラムのデータの型を確認して、formのtypeを勝手に決めてくれる
フォームのlabelの日本語は、「aoncig/locals/activerecord.ja.yml」にカラムの翻訳情報を記述しておくと勝手にlabelも日本語にしてくれる
また、こちらのフォームはバリデーションエラーの際も自動でエラーメッセージを以下のように表示してくれる
エラーメッセージに主語を付与したい場合は、下記の記事を参考にしてください
Rails: simple_formの日本語エラーメッセージに主語をつける方法
※ポイント
[simple_form]Gemは、勝手にフォームを作成してくれるがオプションを付与することでカスタマイズする事ができる(以下に一部の例を示します)
・プレースホルダーを付与する
<%= f.input :eyecatch_width, placeholder: "100" %>
・ラベル名を変える
<%= f.input :title, label: "ラベル名" %>
[simple_form]Gemは、カラムのデータ型を確認して自動でフォームのtypeを勝手に決めてくれるがオプションを付与することでフォームのtypeをカスタマイズする事ができる(以下に一部の例を示します)
asオプションを使ってinputタグのtype属性を変える事ができます
・ファイルのアップロードフォームを作成する(type属性をfileにする)
<%= f.input :eye_catch, as: :file %>
・ラジオボタンを作成する(type属性をradioにする)
<%= f.input_field :position, as: :radio_buttons %>
ラジオボタンを作成する時にハマったこと
ラジオボタンを作成する際に以下のように記述してもラジオボタンが生成されず、ハマってしまいました
<%= f.input :position, as: :radio_buttons %> # 下記が正しい記述 <%= f.input_field :position, as: :radio_buttons %>
上記は、inputタグに[form-control]というbootstrapのクラスが勝手に付与されてしまっているのが原因でした。
下記に[f.input]と[f.input_field]で生成されるHTMLを示します
※ 以下が[f.input]で生成されたHTML <span class="radio radio radio"> <label for="article_position_left"> <input class="form-control enum_radio_buttons optional" type="radio" value="left" checked="checked" name="article[position]" id="article_position_left"> 左寄せ </label> </span> ※ 以下が[f.input_field]で生成されたHTML <span class="radio radio radio"> <label for="article_position_left"> <input class="enum_radio_buttons optional" type="radio" value="left" checked="checked" name="article[position]" id="article_position_left"> 左寄せ </label> </span>
公式に[simple_form]Gemでは、通常のf.inputで生成されるフィールド周りのdivのラッパーを[f.input_field]で記述することで全て取り除くこともできると記述されている
参考記事
Active Storageについて
Active Storageについて
Active Storageは、モデルにカラムを持たせることなく画像のアップロードを実現できる機能
Active Storageでは、モデルオブジェクトに画像ファイルをアタッチする(アタッチ: 所属する)
Active Storageでは、以下の2つのテーブルが生成され、モデルオブジェクトにマッピングしている
・active_storage_attachments: モデルオブジェクトとactive_storage_blobsとの中間テーブル
・active_storage_blobs: 実際に画像が保存されてる場所を管理するようなテーブル(keyやfilenameなどが格納されている)
Active Storageの主な使い方は、以下になる
$ rails active_storage:install
↓
$ rails db:migrate
↓
アプリケーションが使うサービスごとに以下のように定義する
[config/storage.yml] local: service: Disk root: <%= Rails.root.join("storage") %> test: service: Disk root: <%= Rails.root.join("tmp/storage") %>
↓
利用するサービスをActive Storageに認識させるには、以下のように記述する
以下は、ローカルDiskサービスをdevelopment環境で使う場合
[config/environments/development.rb] config.active_storage.service = :local # ここで指定している画像の保存先のlocalは、[config/storage.yml]で定義したもの
↓
[has_one_attached]を定義して、レコードとファイルの間に1対1のマッピングを設定する(1対多の時は、[has_many_attached]を定義)
モデルにカラムを追加しているわけではなく、ストロングパラメーターで受け取る時は、モデルに定義した他の属性と一緒に受け取れる
[app/models ファイル]
has_one_attached :カラム名
↓
モデルオブジェクトにアタッチしているファイルの有無を確認する時は、以下のようにして確認できる
モデルオブジェクト.カラム名.attached?
# 以下が使用例
user.image.attached?
ファイルを表示する時は、以下のようにして表示できる
<%= image_tag user.image %>
画像を削除する時は、以下のようにして削除できる
user.image.purge
↓
今のままの状態だと表示される画像の大きさが元の画像の大きさのままなので、[ImageMagick]という画像変換ツールをインストールする
$ brew install imagemagick
↓
[ImageMagick]をrailsで使えるようにするために、[mini_magick]Gemをインストールする
[Gemfile] gem 'mini_magick'
↓
画像の幅を指定したい時は、以下のようにして幅を指定して表示できる
<%= image_tag user.image.variant(resize:'300x300') %>
※ポイント
Active Storageの画像の削除は、中間テーブルである[active_storage_blobs]テーブルからデータを削除するだけでも連動して[active_storage_blobs]テーブルからも対象のデータを削除してくれる(以下が実験した内容)
[1] pry(main)> ActiveStorage::Attachment.where(name: "favicon") ActiveStorage::Attachment Load (0.2ms) SELECT "active_storage_attachments".* FROM "active_storage_attachments" WHERE "active_storage_attachments"."name" = ? [["name", "favicon"]] => [#<ActiveStorage::Attachment:0x00007f9f0a930ac0 id: 66, name: "favicon", record_type: "Site", record_id: 1, blob_id: 66, created_at: Mon, 06 Sep 2021 18:30:10 JST +09:00>] [2] pry(main)> image = ActiveStorage::Attachment.find(66) ActiveStorage::Attachment Load (0.3ms) SELECT "active_storage_attachments".* FROM "active_storage_attachments" WHERE "active_storage_attachments"."id" = ? LIMIT ? [["id", 66], ["LIMIT", 1]] => #<ActiveStorage::Attachment:0x00007f9eed2341f8 id: 66, name: "favicon", record_type: "Site", record_id: 1, blob_id: 66, created_at: Mon, 06 Sep 2021 18:30:10 JST +09:00> [3] pry(main)> image => #<ActiveStorage::Attachment:0x00007f9eed2341f8 id: 66, name: "favicon", record_type: "Site", record_id: 1, blob_id: 66, created_at: Mon, 06 Sep 2021 18:30:10 JST +09:00> [4] pry(main)> image.purge (0.1ms) begin transaction ActiveStorage::Attachment Destroy (0.8ms) DELETE FROM "active_storage_attachments" WHERE "active_storage_attachments"."id" = ? [["id", 66]] Site Load (0.1ms) SELECT "sites".* FROM "sites" WHERE "sites"."id" = ? LIMIT ? [["id", 1], ["LIMIT", 1]] Site Update (0.2ms) UPDATE "sites" SET "updated_at" = ? WHERE "sites"."id" = ? [["updated_at", "2021-09-06 18:33:59.094072"], ["id", 1]] (0.9ms) commit transaction (0.2ms) select sql from (select * from sqlite_master where type='table' union select * from sqlite_temp_master where type='table') where tbl_name = 'active_storage_blobs' ActiveStorage::Blob Load (0.2ms) SELECT "active_storage_blobs".* FROM "active_storage_blobs" WHERE "active_storage_blobs"."id" = ? LIMIT ? [["id", 66], ["LIMIT", 1]] (0.1ms) begin transaction ActiveStorage::Attachment Exists (0.2ms) SELECT 1 AS one FROM "active_storage_attachments" WHERE "active_storage_attachments"."blob_id" = ? LIMIT ? [["blob_id", 66], ["LIMIT", 1]] ActiveStorage::Blob Destroy (0.6ms) DELETE FROM "active_storage_blobs" WHERE "active_storage_blobs"."id" = ? [["id", 66]] (1.6ms) commit transaction ActiveStorage::Attachment Load (0.2ms) SELECT "active_storage_attachments".* FROM "active_storage_attachments" WHERE "active_storage_attachments"."record_id" = ? AND "active_storage_attachments"."record_type" = ? AND "active_storage_attachments"."name" = ? LIMIT ? [["record_id", 66], ["record_type", "ActiveStorage::Blob"], ["name", "preview_image"], ["LIMIT", 1]] Disk Storage (0.4ms) Deleted file from key: KF9bAwWS6tNWnmF8SEgUQ4Rn Disk Storage (0.5ms) Deleted files by key prefix: variants/KF9bAwWS6tNWnmF8SEgUQ4Rn/ => ["/Users/higmonta/workspace/runteq/application_tasks/2563_higmonta_runteq_curriculum_advanced/tmp/storage/va/ri/variants/KF9bAwWS6tNWnmF8SEgUQ4Rn/c5d249056ad8a9a7cea59197db22bc5591a40e7cddb3ed3912d5f4fb529e84be", "/Users/higmonta/workspace/runteq/application_tasks/2563_higmonta_runteq_curriculum_advanced/tmp/storage/va/ri/variants/KF9bAwWS6tNWnmF8SEgUQ4Rn/507e6b2952e87503b6ff212d6c1ba25a9f0bec18f0e49c952d43737c702fe518"]
参考記事
【Rails】 Active Storageを使って画像をアップしよう! | Pikawaka
【Rails 5.2】 Active Storageの使い方 - Qiita
コマンドラインで画像処理が行える便利ツール「ImageMagick」:知っトクWindowsツール(1/2 ページ) - @IT