www.ni4.jp

ども、どもども。
今日はMovable Typeの記事の中に含まれるYouTube動画をレスポンシブ対応する方法について、書いてみようと思います。

ご存知の方も多いと思いますが、弊社（ウェブサイト制作会社）ではMovable Typeをプラットフォームにしてウェブサイトを構築することが多いです。
クライアントはMovable Typeを使用してブログ記事を書いたり、自社商品などの紹介ページを作成したりするわけです。

そんなウェブサイト、今はスマートフォンなどに対応する「レスポンシブ」対応を行うのが一般的になっているわけですが、先日、あるクライアントから「商品紹介に複数のYouTube動画を掲載したい」という相談を受けました。
YouTube動画を掲載することはなんら問題ないのですが、レスポンシブ対応するとなるとちょっと考えなければなりません。

1. YouTubeの埋め込みコードに対応するCSSを追加してレスポンシブ対応する
2. 1記事（1ウェブページ）に1つの動画を掲載できるようカスタムフィールドを用意する
   複数のYouTube動画を載せたい場合は、その分のカスタムフィールドを用意するか、あるいはプラグイン（MTAppjQueryなど）を使用して、任意の数のカスタムフィールドを追加できるようにカスタマイズする
3. テンプレート上でそのカスタムフィールドの出力部分を任意のブロック（例：<div class="youtbe">iframeのコード</div>）で囲み、レスポンシブ用のCSSが適用されるようにする

ワタシが勉強不足かもしれませんが、一般的にはこんな感じかなと思います。
ただ、今回相談をいただいたクライアントが利用する予定だったのはMovableType.netというサービスで、カスタムフィールドを規定数用意しておくことは可能ながら、プラグインを利用して任意の数を掲載できるようにすることはできませんでした。

よって、無制限にYouTube動画を掲載できるようにするためには、ブログ記事本文欄にYouTubeの埋め込みコード（iframe）をコピペで貼り付けていく必要があります。
ただ、そうなるとYouTube埋め込みコードを設置するたびにそのHTMLソースコードを編集して、iframeを<div class="youtube">〜</div>などで囲むようにしなければなりません。

我々のように慣れている人にとってもこれはちょっと面倒。
そこで今回はJavaScriptを使用してそれを自動化する方法を取りました。
非常に簡単な方法ではあるのですが、そのような解説をしているブログ記事等が見当たらなかったので、この記事を残して置こうと思ったわけです。

では、さっそく進めていきましょうー

ども、どもども。
ここ数年、話題の決済サービスStripeを使ってみました。

これまで、クレジットカード決済代行サービスはいくつか利用してきましたが、ちょっとした「かゆいところ」がありました。

• 決済手数料の問題（月額維持費的なものも含む）
• 購入者アカウント登録の必要性
• アカウント審査時間（利用開始までの時間）の問題
• ダウンロード販売への対応可否（ドキュメント不足あるいは難読問題含む）
• テスト環境の利用しやすさ
• 別ウィンドウ問題（ https://www.ni4.jp/2018/02/post_97.html ）

これらを一挙に解決できそうなサービスがStripeでした。
決済手数料などを他の決済サービスと比較した結果などは他のブログ記事さんでも紹介されているのでそちらにお任せします（笑）
アカウント登録も無料ですし、利用開始までの流れなども特にマニュアルなどなくてもサクサクと進められると思うので、まずは触ってみると良いんじゃないでしょうか。
最初、私も英語のドキュメントがとっつきにくいと思ったのですが、わかりやすい英語でしたし、難しいところはGoogle翻訳などを使用してもクリアできる感じだったので大丈夫と思います。

というわけでこのブログでは、プログラマーではない私の目線で「うまく行ったところ／うまく行かなかったところ」など、これまでの経緯をまとめてみようと思います。