【Movable Type】ブログ記事へのYoutube 動画埋め込みをレスポンシブ対応してみる

2018年9月15日 16:09 | category: Web | 文字数:2637 | 読む目安: 5分以上

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

mt_x_youtube.jpg

ご存知の方も多いと思いますが、弊社(ウェブサイト制作会社)では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を使用してそれを自動化する方法を取りました。
非常に簡単な方法ではあるのですが、そのような解説をしているブログ記事等が見当たらなかったので、この記事を残して置こうと思ったわけです。

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

続きを読む: 【Movable Type】ブログ記事へのYoutube 動画埋め込みをレスポンシブ対応してみる

話題の決済サービス Stripe を使ってみた

2018年9月10日 12:00 | category: Web | 文字数:7761 | 読む目安: 5分以上

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

スクリーンショット 2018-09-09 15.56.56.png

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

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

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

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

  1. Stripeを導入してみる
  2. ダウンロード販売に挑戦してみる
  3. ユーザーグループに参加してみた
  4. 問題発生...!でもサポートに問い合わせて解決できた
  5. まとめ:ウェブディレクターがStripeを使ってみた感想

こんな感じで行ってみましょうー!

続きを読む: 話題の決済サービス Stripe を使ってみた

MTDDC Meetup HOKKAIDO 2018、やりきった!

2018年6月30日 17:18 | category: レポート | 文字数:2061 | 読む目安: 5分

ども、どもども、西山です。

もうすっかり時間が経ってしまいましたが、2018年6月9日(土)にMTDDC Meetup HOKKAIDO 2018を開催しました!
私はMT蝦夷(Movable Type ユーザーグループ 北海道)の主宰として、2013年に続き実行委員長を務めさせていただきました。

DSC_2722.JPG

当日は一般参加者・関係者を含め、210名ほどの方々が集まり、盛大に開催することができました。
いろんな場所で、もう何度も感謝を伝えてきましたが、あえてもう1度、ありがとうございました!

ブログ書くまでがMTDDCというわけで、終了後やっと時間が作れたのでブログ更新です!
前回のブログ更新からもう3ヶ月も経ってたんですね...いやはや(汗)

今まで経験したことのない規模での企画

実行委員会を立ち上げたのが2017年10月19日(木)のこと。
集まったのは、株式会社HAMWORKSのハムさん、関口さん、株式会社インセンブルの濱内さん、そして弊社(株式会社ジャクスタポジション)から私と淺田の5名。
ここからすべてが始まったのですが、ここ札幌ではこれまでにないイベントにしたいという私のワガママをみんなが叶えてくれました。

前回の2013年開催時以降、東京方面との繋がりも増え、東京のセミナーイベントなどにたびたび足を運ぶようになって思っていた事がありました。
それは「北海道にいるとなかなか最新情報を得られる機会がない」ということ。
弊社のように比較的参加できる環境であればよいのですが、会社さんによってはなかなかそうも行かないという事情を聞くたびにすこし残念な気持ちになっていました。

そこで今回、最初に実行委員会で伝えたのが「東京のセミナーに行くのが難しいのであれば、そのスピーカーたちを北海道に集めてしまえばいいじゃん」というもの。
札幌での開催なら、普段東京へ行けない人たちだって参加しやすくなるし、そんなイベントに触れることができれば、もしかしたらもっと積極的に東京などへ情報収集に行こうと思えるんじゃないだろうか、そうすれば結果的に北海道の業界がまた1つ良い方向へ向かえるんじゃないだろうか、ということでした。
そんなわけで、「行けないなら呼べばいい」をコンセプトに今回のイベントを企画したのでした。

ハムさんの協力を得て、ほんとに豪華なスピーカー陣を揃えることができた今回。
集客目標を200名として、ここ札幌では過去最大級のウェブ系イベントにしよう!とスタートしたのでした。

続きを読む: MTDDC Meetup HOKKAIDO 2018、やりきった!

映画「ラーメン食いてぇ!」を観てきた!

2018年3月24日 14:30 | category: 旅行記 | 文字数:1323 | 読む目安: 3分

どもども。
先々週、MT東京のイベント参加のために東京へ行った際、映画「ラーメン食いてぇ!」を観てきました。
結論から言うと、これはもう観て大正解な映画でした!

原作は、2015年2月から3月にかけウェブ上で公開されていた漫画。
今は第1話がこちらのサイトで引き続き無料公開されているほか、Amazonで単行本・電子書籍が購入できます。

当時、この漫画を読んですっかり大ファンになったのですが、その実写版が3年の時を経て公開された、というわけです。
映画公開のことを知ったときは大興奮だったのですが、なんと上映予定に私の住む札幌がない...。公式ウェブサイトには順次公開とあるので、いずれ公開されるのかもですが、残念な気持ちでいっぱいでした。

そんな中、先々週の出張のことを思い出し、「東京で観られる!」というわけで時間を作って行ってきたのです。

続きを読む: 映画「ラーメン食いてぇ!」を観てきた!

MT東京-45でセッションを担当してきました!

2018年3月17日 21:48 | category: レポート | 文字数:1523 | 読む目安: 4分

ども、どもども。
去る3月10日、渋谷のロフトワークCOOOP10で開催された「【MT東京-45】進化するMovableType.net事例特集&なかなか聞けないお金事情」にて、セッションを担当してきました。

DSC02487.jpg

数ヶ月前になりますが、MT東京の藤さんにイベント登壇依頼をいただき、今回のテーマがMovableType.netで、ワタシも普段からよく利用しているサービスだったこともあってもちろん承諾。
どんな内容がいいですかねーって感じで相談している中で、「おそらくMovableType.netを利用してウェブサイト構築を請け負っている制作会社さんの参加が多くなるだろう」「他の制作会社がどんな感じ(費用感・利用ケース)で請け負っているのか知りたいのでは」ということにクローズアップして構成しようという話になりました。

続きを読む: MT東京-45でセッションを担当してきました!

ブログ再開して4年で100記事になりました。

2018年3月12日 17:57 | category: ネタ | 文字数:548 | 読む目安: 2分

cover_20180312.png

ども、どもども。
このブログ、書き始めてから4年が経ちました。
正確には3月21日でまる4周年、そしてこの記事でめでたく100記事めになります!

このブログの最初の記事はこちら

上にもある通り、このブログの以前にも個人ブログは存在していて、さらにその前の日記CGIと合わせると来年の2019年末には20周年になるのですね...(遠い目)
昔の記事は過去に葬ってしまったのでわかりませんが、通算どれくらいの記事(日記)を書いてきたのだろう...懐かしくも恥ずかしい、そんな記憶です。

100記事めだからと特に感傷にふけることもないのですが、せっかくなのでブログは今後も続けていきたいなと思っております。
オウンドメディア...とまでは言わないまでも、このブログを通して、ワタシがどんなことを考えているのかなどが伝わることもあるでしょうし、アウトプットしていく場というのはオンライン/オフラインに関係なく、今後も増やしていきたいですしね。

ここ最近はすっかりSNSでの投稿が増えてしまいましたが、"We♥Blog"の気持ちで今後ともよろしくです!
(会社ブログもたまーに更新してます...が、もう少し頻度上げていかなきゃ汗)

常時SSL化後に消えてしまったFacebookの「いいね!」数を元に戻す方法:Movable Typeテンプレート版

2018年2月25日 13:44 | category: Web | 文字数:3392 | 読む目安: 5分以上

20180225.jpg

ども、どもども。

ここ1〜2年くらいで、さまざまな理由からウェブサイトのURLを常時SSL化することが増えてきました。
すでに数ヶ月も前になりますが、この個人ブログも2017年5月にSSL化を実施したところです。

ブログに限らず、ウェブサイトをSSL化するのは「URLを変更する」ことを意味するわけですが、通常は301リダイレクトなどを設置していれば、特にそれまでと変わらずブログを運営していくことができます。
ただ、ひとつだけ変わってしまうのが、URLに紐づくサービス...例えばFacebookの「いいね!数」であったり、はてなブックマークの「ブックマーク数」だったりします。
それらサービスではSSL化することで別のURLと認識されてしまい、それまでの数値がリセットされてしまうんですね。

はてなブックマーク数の例

あまり多くのブックマーク数ではないのですが、参考まで(汗)

常時SSL導入前のはてなブックマーク数:7ユーザー

常時SSL導入後のはてなブックマーク数:1ユーザー

私のブログでは、はてなブックマーク数を掲載していなかったのでそれほど気にならなかったのですが、Facebookのいいね!数についてはSSL化したことでリセットされてしまったのがすごくもったいない気がしていました。
とは言え、SSL化を実施してしまった後に気がついたので、個人ブログだし良い勉強になったってことで気にしない気にしない...と思うようにしていました。

...いや、だめだ、気になる(汗)

SSL化後もFacebookいいね!数を引き継ぐ方法はあるわけだし、このまま見過ごすのは...なんだかやっぱりもったいない!
というわけで、SSL導入から9ヶ月ほど経った後にこの施策を実施することにしたのです。

続きを読む: 常時SSL化後に消えてしまったFacebookの「いいね!」数を元に戻す方法:Movable Typeテンプレート版

.htaccessで特定のIPアドレス以外をメンテナンスページへ302リダイレクトさせてみた

2018年2月17日 22:08 | category: Web | 文字数:2819 | 読む目安: 5分以上

ogp.jpg

ども、どもども。
ウェブサイトの公開時、あるいはメンテナンス時に自分のIPアドレス以外をメンテンスページへリダイレクトさせて、その間にゆっくりと作業を進めたい。
この仕事をやっているとわりとよくある話だと思います。

これを実現するためのhtaccessによるメンテナンス表示(IPアドレスでのアクセス制限)は以下になります。

ErrorDocument 503 /maintenance/index.html #表示させるメンテナンスページ

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{REQUEST_URI} !=/maintenance/ #アクセスを許可したいディレクトリ
  RewriteCond %{REMOTE_ADDR} !=000.000.00.00 #アクセスを許可したいIPアドレス
  RewriteRule ^.*$ - [R=503,L]
</IfModule>

<IfModule mod_headers.c>
  Header set Retry-After "Fri, 13 February 2018 09:00:00 GMT" #メンテナンス終了予定時刻を設定
</IfModule>

これで、自分(のIPアドレス)以外がアクセスを試みた際、メンテナンスページが表示されます。
503エラーで表示させるためどのURLへのアクセスであっても同じ内容(メンテナンス)が表示され、そのサービス(サーバー)が一時的に利用できない状態であることを意味するため、例えばGoogleボットなどが訪れても最後に書いてあるRetry-Afterを拾ってメンテナンスが終わる頃に再訪問してくれるという感じになります。( 参照:Wikipedia HTTP 503

こちらの方法がいわゆるお作法に基づく正解なのですが、今回の場合はちょっと事情が違いました。

今回構築したのはいわゆるLP(ランディングページ)だったので、HTML+フォームのページ以外には表示するコンテンツが無く、ドキュメントルートにindex.phpだけを設置、テンプレートHTML類も公開ディレクトリ以外に設置していました。
また、今回が初公開となることからすでにindex.htmlを設置し、その中で公開日についてアナウンスしていました。そのため今回のメンテナンス作業(公開作業)はBASIC認証などを用いるのではなく、公開日をアナウンスしているindex.htmlをルートに設置したまま実施しなければならない状況でした。

例えば、index.htmlとindex.phpがルートにある状況なら、通常、https://www.example.com/ にアクセスした際はindex.htmlが優先表示されます(Apacheの設定による)し、また今回はフォームの画面遷移URLがすべて https://www.example.com/#confirm のような感じで遷移するように構築していたため、ルートにindex.htmlを置いてメンテナンスすることはできませんでした。(index.html#confirmなどになってしまう)

それで上記のhtaccessによるメンテナンス表示をしようとしたのですが、今回はここで問題が生じました。
503エラーだとURLが変化しないため、実体がある/maitenance/index.htmlにはアクセスできるのですが、https://www.example.com/ へアクセスした時は、htaccessで実体のないファイルへのアクセスを遮断していたためか500エラーになってしまいました。

でもこのまま作業が進められないのは困ってしまいます。
そこで、これ以外の方法でなんとか自分以外のアクセスをメンテナンスページへ誘導する方法を考えることにしました。

続きを読む: .htaccessで特定のIPアドレス以外をメンテナンスページへ302リダイレクトさせてみた

クロネコWebコレクト利用時に「お支払い手続きエラー」になる原因とその対策がわかった。

2018年2月10日 15:23 | category: Web | 文字数:2174 | 読む目安: 5分

HIRAyamatoneko_TP_V.jpg

ども、どもども。

弊社ではSKELETON CARTという自社開発のショッピングカートシステムを販売しています。
もちろん販売しているだけじゃなくって、複数の自社クライアントのECサイトにも導入しているのですが、たまにそのクライアントから「お客さん(購入者)がクレジットカード決済できなかったらしい」と連絡を受けることがありました。

ところが、何度確認しても特に問題が見つけられず、これまで原因特定には至っていませんでした。
本当であればそのお客さんに、エラーになってしまったその状況をもっと色々聞ければいいのですがそうも行かず...。
悶々としていたところ、あるクライアントから有力情報(スクリーンショット)が届きました。

続きを読む: クロネコWebコレクト利用時に「お支払い手続きエラー」になる原因とその対策がわかった。

CMC_Meetup in 札幌 キックオフに参加してきた!

2018年1月27日 15:56 | category: レポート | 文字数:2154 | 読む目安: 5分

ども、どもども。
昨日、CMC_Meetup in 札幌 キックオフに参加してきました!
CMC_Meetupとは「コミュニティマーケティング」について考えるコミュニティ(Community Marketing Community)のことで、その生い立ちなどについては、主宰の小島英揮さんのブログ記事を御覧ください。

小島さんとは2014年のAWS Cloud Roadshowで初めてお会いして、その後はFacebook上でお友達になっていたのですが、小島さんの投稿でこのCMCの存在を知り、いつか参加してみたいと思っていたイベントでした。

そして、それを決定的なものにしてくれたのがこの時の記事。
この記事の内容にすごく共感できて、こりゃ行かねばならないな、と。

コメント欄にもありますが、そこで小島さんに札幌開催の可能性を聞き、密かに期待していたのでした。
そして昨夜、それが現実のものとなることに。

続きを読む: CMC_Meetup in 札幌 キックオフに参加してきた!

アクセスの多い記事

アイテム

  • mt_x_youtube.jpg
  • Screenshot_responsive.png
  • Screenshot_original.png
  • (135) BiSH : オーケストラ[OFFICIAL VIDEO] - YouTube 2018-09-15 14-52-15.png
  • 20180915140314-c9d393896fc2bee3f20ab179df27447f07a0ee9a.png
  • 36728450_1845025465540351_8027216974834565120_o.jpg
  • スクリーンショット 2018-09-09 15.56.56.png
  • DSC_2970-2.jpg
  • 71C_0627.jpg
  • DSC_3190.JPG