2016 年 9 月の記事一覧です(2 件)

[Route53][Amazon S3] Zone Apex へのアクセスをサブドメインにリダイレクトさせる

Zone Apex へのアクセスをサブドメインにリダイレクトさせたメモ。サブドメインは既にAmazon S3でウェブホスティングしていて、Zone Apexに関しては某VPSにAレコードを当てていたのだけど、実質放置していた状態だったので、S3とRoute53を使ってサブドメインにリダイレクトさせることにしました。

Amazon S3の設定

  • バケットを作成する(バケット名はドメインに合わせる)
  • バケットポリシーを作成する
  • 静的ウェブサイトホスティングメニューですべてのリクエストをリダイレクトさせる(画像ご参照)
スクリーンショット 2016-09-22 19.30.19

Route53の設定

  • Zone ApexにAliasを設定
  • Alias Target にS3のアドレスを設定(画像ご参照)
スクリーンショット 2016-09-22 19.29.01

参考サイト

Route53でZone ApexドメインのS3ホスティングサイトをリダイレクトする | hacknote

Flickrのおせっかいな埋め込みコードをJavaScriptで何とかする

ブログなどにFlickrの写真を貼り付ける為の埋め込みコードはちょくちょく変更があって現在はこのような感じになっています

スクリーンショット 2016-09-07 22.19.35

埋め込みコード

<a data-flickr-embed="true"  href="https://www.flickr.com/photos/aoshiman/29246324066/in/datetaken/" 
title="スクリーンショット 2016-08-28 13.38.41"><img src="https://c1.staticflickr.com/9/8373/29246324066_25a75afcac_o.png" width="1024" height="640" alt="スクリーンショット
 2016-08-28 13.38.41"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

これを余計なものを取っ払ってこのようなシンプルな形にしたい

<a href="https://www.flickr.com/photos/aoshiman/29246324066/in/datetaken/" title="スクリーンショット 2016-08-28 13.38.41"><img src="https://c1.staticflickr.com/9/8373/29246324066_25a75afcac_o.png" width="1024" height="640" alt="スクリーンショット 2016-08-28 13.38.41" class="img-responsive"></a>

不要なのは頭のこの部分と

data-flickr-embed="true" 

最後についてくるJavaScript

<script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

逆に必要なのはこれ(これはBootstrapにおけるimgタグのレスポンシブ用クラスです)

class="img-responsive"

で、昼休みの時間で出来上がったのがこのbookmarkletです(雑)。これを上記埋め込みコード生成画面で実行してあげると

javascript:(function(){var e,text,textA,textB,textC; e=document.getElementsByClassName('embed-code-text-field');text=e[0].value;textA=text.replace("data-flickr-embed=\"true\"  ",'');textB=textA.replace("\<script async src=\"\/\/embedr.flickr.com\/assets\/client-code.js\" charset=\"utf-8\"\>\<\/script\>",'');textC=textB.replace("\>\<\/a\>"," class=\"img-responsive\"\>\<\/a\>");e[0].value=textC;console.log(textC);})();

このように埋め込みコードをコンバートしてくれます

スクリーンショット 2016-09-08 21.27.20

参考サイト

Flickrの生成するEmbedコードをユーザースクリプトで自動加工する方法(Firefox + はてなブログの場合) - 酔人日月抄

PAGE TOP