Webの最近の記事

MTDDC Meetup TOKYO 2018に参加してきました!

2018年11月10日 12:06 | category: Web | 文字数:1702 | 読む目安: 4分

IMG_4218.jpg

ども、どもども。
1週間前になりますが、MTDDC Meetup TOKYO 2018に参加してきました!

全5会場、30ほどのセッションが用意された一大イベントで、参加者は270名ほどだったようです。
会場となったのは、Yahoo!Japanセミナールーム。
なんどかYahoo!LODGEには行ったことがありましたが、セミナールームも非常にキレイで設備もよく、気持ちよく参加することができました。

続きを読む: MTDDC Meetup TOKYO 2018に参加してきました!

【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: Web | 文字数: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、やりきった!

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

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

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

DSC02487.jpg

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

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

常時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コレクト利用時に「お支払い手続きエラー」になる原因とその対策がわかった。

MovableType.net Dashboard Utilityのバージョンアップ

2017年12月13日 18:06 | category: Web | 文字数:1064 | 読む目安: 3分

ども、どもども、西山です。
この記事はMovable Type Advent Calendar 2017の13日目の記事です。
昨年のこの企画で、MovableType.netのダッシュボードを使いやすくするChromeエクステンションを公開しました。

それから1年、今年はこのエクステンションをぷちバージョンアップし、version 0.3.0をリリースしました!
MovableType.netをご利用の方、特にウェブサイト制作会社さんなど、クライアントのウェブサイトを多数管理している方にご利用いただきたいエクステンションです。

続きを読む: MovableType.net Dashboard Utilityのバージョンアップ

札幌ウェブ屋だらけの忘年会 Vol.5

2017年12月 3日 14:31 | category: Web | 文字数:1119 | 読む目安: 3分

ども、どもども、西山です。
前回のブログ記事公開からはや2ヶ月...その間もいろいろあったのですが、なかなかブログ記事を書けずにいました。
お仕事いっぱいいただけて嬉しい限りです。

さて、そんな最近ですが、一昨日の12月1日(金)にここ数年恒例となった「札幌ウェブ屋だらけの忘年会」を開催しました。
今年で5回目の開催で、今回も多くの方に集まっていただきましたー!

一昨年に第3回を30名以上で開催するも、初めての大人数(それまでは10〜20名ほど)での開催を甘く見ていた幹事4名。
当日は大混乱の中での開催となりました...
それを反省して開催した昨年の第4回、原点回帰と銘打って少人数開催するも、今度は「行きたかったのに募集人数少なすぎ!」という大変多くの反響を...(汗)
そこで今回は再び40名規模での開催となりました。

続きを読む: 札幌ウェブ屋だらけの忘年会 Vol.5