norinyang メガ進化!

気ままに色々

Golang の開発環境構築

Mac で Go のビルド環境を構築した。
brew で簡単にインストールできたので良いですね

特にこだわりとかないので、最新版を入れておきます

brew update
brew install go

これをやると

As of go 1.2, a valid GOPATH is required to use the `go get` command:
  http://golang.org/doc/code.html#GOPATH

`go vet` and `go doc` are now part of the go.tools sub repo:
  http://golang.org/doc/go1.2#go_tools_godoc

To get `go vet` and `go doc` run:
  go get golang.org/x/tools/cmd/vet
  go get golang.org/x/tools/cmd/godoc

You may wish to add the GOROOT-based install location to your PATH:
  export PATH=$PATH:/opt/boxen/homebrew/opt/go/libexec/bin

こんな感じにな説明が出てきます
最後の PATH 部分は入れる環境によって差があると思います
ぼくは昔遊んだ boxen で homebrew が入っているので変なパスが書かれている

上から順に

golang.org/doc/code.html#GOPATH

How to Write Go Code - The Go Programming Language

The GOPATH environment variable specifies the location of your workspace. It is likely the only environment variable you'll need to set when developing Go code.

To get started, create a workspace directory and set GOPATH accordingly. Your workspace can be located wherever you like, but we'll use $HOME/go in this document. Note that this must not be the same path as your Go installation.

ワーキングディレクトリのパスを通しておく必要があるらしい
ドキュメント中では $Home/go をワーキングディレクトリにしているっぽい
どこでもいいって書いてあるから適当なディレクトリを切ってそこにパスを通す

mkdir ~/Development/Go
export GOPATH=~/Development/Go

ぼくは上記の場所にした

For convenience, add the workspace's bin subdirectory to your PATH:

設定したワークスペースのサブディレクトリ bin を PATH に入れておく必要があるので下記を追加

export PATH=$PATH:$GOPATH/bin

golang.org/doc/go1.2#go_tools_godoc

続いてこちら
Go 1.2 Release Notes - The Go Programming Language

Both binaries are still included with the distribution, but the source code for the godoc and vet commands has moved to the go.tools subrepository.

Also, the core of the godoc program has been split into a library, while the command itself is in a separate directory. The move allows the code to be updated easily and the separation into a library and command makes it easier to construct custom binaries for local sites and different deployment methods.

Updating: Since godoc and vet are not part of the library, no client Go code depends on the their source and no updating is required.

The binary distributions available from golang.org include these binaries, so users of these distributions are unaffected.

When building from source, users must use "go get" to install godoc and vet. (The binaries will continue to be installed in their usual locations, not $GOPATH/bin.)

なんかごちゃごちゃ書いてあるけど、godoc と vet が入ってないって話が書いてあって
分離されていると何が嬉しい、分離されていても不便はない、ということのようだ

とりあえずコマンド実行

go get golang.org/x/tools/cmd/vet
go get golang.org/x/tools/cmd/godoc

これで先ほど指定した GOPATH いかに pkg, src が出来上がっているはず

PATH 追加

You may wish to add the GOROOT-based install location to your PATH:

べつにのぞんじゃいないけど念のため追加

とりあえずできた?

何もやってないけどとりあえずできたはず

指輪型デバイスRingが届いた


Ring : Shortcut Everything. by Logbar inc. — Kickstarter

はめてみる

f:id:norisu0313:20141029222412j:plain
でかい
f:id:norisu0313:20141029222411j:plain
ちょうどいい

正直10分で飽きた

  • Androidアプリがすぐクラッシュする
    • Xperia Z3さんなのでマシンパワー足りていないなんて事は無い
  • アプリ起動してないとジェスチャー認証されない
    • まぁ、わかっちゃいた
  • そもそもRingがでかくて抑えてないとすっぽ抜ける
    • メール掘り起こしたらSize:01で注文してたので一番小さいやつf:id:norisu0313:20141029220746p:plainf:id:norisu0313:20141029220920p:plain
    • サイズ調整用のプラスチック治具ついてたけど効果なし
  • 結局文字が入力できるか謎
    • 上の動画では文字(少なくともアルファベットと数字)が入力できてるけど試せるところがない


指輪型デバイス RingからEngine Yardへのデプロイ - Engine Yard Blog

こちらRingで面白いことされてる記事

感想

一応投資案件だしダメでもともとという気持ちだったけど理想と現実のギャップがすごい
これからもなんかあれば積極的に投資していきたい意欲高まった

とりあえず猫耳ヘッドホンは投資済み!

2014/10/29 23:35 追記

iOSAndroidで大して変わらんやろと思っていたけどあまりにもうまく動かないので手元のiPad mini 2で試してみることにしたらレスポンスが劇的に良くなったしできる操作が多い

Android開発者募集してたの思い出されて良い

audioタグを使うときの注意

最近Webサービス自分で作ろうと思ってこそこそ色々してるんだけど
audioタグを使ったらすごくレスポンスが悪くなったので備忘録
ちなみに、audioタグを50個とか並べたときの話です。1つとかなら気にしなくて大丈夫

起こった事

最近は僕のようなデザインなんて全く分からない人間でもなんとかなるようにいろんなテンプレートがあるのでそれを使ってレスポンシブルなサイトを作っていた
確認端末は

基本的にはMBP Chromeで確認しながらつくって、携帯端末でも追加で確認という感じ

audioタグで音が再生できるようになったのでいざiPhoneで確認してみるとレスポンスがが返ってこない
サーバ側の応答を確認してみると即座に返しているように見える
ただ、jsやcssが読み込まれにくるのがやたらと遅い

ドキュメントを返してから、そのドキュメント内で呼ばれているファイルを取得する迄30秒近くかかってしまっている

しかも遅いだけならまだしも、Safariが操作不能な状態に陥ってあげくクラッシュしおる。。。
まぁ、もうすぐiPhone6が出ようかというときに5で検証してるのでスペックの話はあるんだけど、いくらなんでもひどすぎる

考えられそうな事

  • jsのイベント登録が遅い
    • js読まれる前段階がすごく遅いので関係なさそう
  • 画像の量が多すぎて読み込みが遅い

— audioタグつける前は許容範囲に収まっていた

  • やっぱaudioタグ?

まぁ、考えてみるとやっぱaudioタグ怪しいよね!って事で

色々やってみる

  • preload=“none” を試してみた
  • srcの中身を空にしてみた
  • audioタグを全部消してみた

audio タグ消す意外の方法は全く効果がなかった。。。
どういうこっちゃねん。。。

しゃーないのでごにょごにょしてみた

htmlの中にaudioタグを埋め込むのは諦めて、Javascript使ってどうにかします

<span class="track-preview" data-track-id="912271090">
  <i class="start-track-preview icon-play" data-preview-src="http://a625.phobos.apple.com/us/r30/Music4/v4/4d/3e/6c/4d3e6c6d-8a55-6a24-8b20-881a20c2d0cb/mzaf_4364382391745539868.plus.aac.p.m4a"></i>
  <i class="stop-track-preview icon-pause" style="display:none"></i>                  
   誰でもロンリー
</span>
<span class="track-preview" data-track-id=...
<span class="track-preview" data-track-id=...
<span class="track-preview" data-track-id=...
( function () {
  audio = document.createElement("audio");
  trackId = undefined;
  $('.start-track-preview').each( function (index, value) {
    $(value).on('click', function (event) {
      var trackPreview = $(value).closest('.track-preview');
      trackPreview.find('.stop-track-preview').show();
      $(value).hide();
      previewSrc = $(value).attr('data-preview-src');
      if (previewSrc !== $(audio).attr('src')) {
          if (trackId !== undefined) {
            audio.pause()
            $('.track-preview[data-track-id=' + trackId + ']').each( function (index, target) {
                $(target).find('.stop-track-preview').hide();
                $(target).find('.start-track-preview').show();
            })
          }
          $(audio).attr('src', previewSrc);
      }
      audio.play()
      trackId = $(trackPreview).attr('data-track-id')
    });
  });
  $('.stop-track-preview').each( function (index, value) {
    $(value).on('click', function (event) {
      var trackPreview = $(value).closest('.track-preview');
      trackPreview.find('.start-track-preview').show();
      $(value).hide();
      audio.pause()
      trackId = undefined;
    });
  });
} ) ();

あらかじめAdioElementをJavascript内に用意しておいてそのsrc属性を入れ替えて音声を再生したり、停止したりしています
ちょっと雑な方法だけどとりあえずコレでレスポンスに関しては解決した

まとめ

audioタグがあるだけで何かiPhone Safariさんはなんかするんかね?
教えて偉い人!
Mac Safari だとどうなるか調べてないけどダメなんかね?
(自分でやれってかんじですね
そもそもaudioタグ並べるなって話もあるかもしれない
つらみある
Videoタグだってにたような感じになるんかね?

ChefでMackerelをインストールする方法

Chefを最近勉強している
そもそもRubyよくわかんないしつらい気持ちになるけど
日本語の記事があるからなんとかなるという感じ

Calling for Beta Testers! Mackerel: A Revolutionary New Kind of Application Performance Management

はてなが作っている「新しいアプリケーションパフォーマンスマネージメント」ツールMackerelをChefでインストールして設定ファイルかいてスタートしてみる

エージェントをインストールする

f:id:norisu0313:20140831181553p:plain

いろんな方法が用意されているみたいだけど、とりあえずCentOSに入れたいのでrpmでインストールされてほしい
yumリポジトリが用意されているのでそれを使ってインストールしてみる

yumリポジトリを追加する

opscode-cookbooks/yum · GitHub

これを使ってyumリポジトリを追加する
自分で書いてもいいけど使えるものは使っていきたいし、再利用性高そう
仕事で使うとかなら色々考えるけど
そうじゃないのでいいや!

knife cookbook site install yum -o site-cookbooks

これでsite-cookbooks以下に上記のコードが落ちてきてさらにgit commitまでされます
このままだとMackerelのリポジトリが追加されないので
site-cookbooks/yum/recipes/default.rb
を編集して追加されるようにします
yum_globalconfigで色々かかれているけど、今回は必要ないのでとりあえずコメントアウト
Mackerelリポジトリ用の設定を追加します

#yum_globalconfig '/etc/yum.conf' do
#  cachedir node['yum']['main']['cachedir']
#  keepcache node['yum']['main']['keepcache']
#  debuglevel node['yum']['main']['debuglevel']
#  exclude node['yum']['main']['exclude']
#  logfile node['yum']['main']['logfile']
#  exactarch node['yum']['main']['exactarch']
#  obsoletes node['yum']['main']['obsoletes']
#  proxy node['yum']['main']['proxy']
#  installonly_limit node['yum']['main']['installonly_limit']
#  installonlypkgs node['yum']['main']['installonlypkgs']
#  installroot node['yum']['main']['installroot']
#  distroverpkg node['yum']['main']['distroverpkg']
#  releasever node['yum']['main']['releasever']
#  action :create
#end

yum_repository "mackerel" do
  description "mackerel-agent"
  baseurl 'http://yum.mackerel.io/centos/$basearch'
  gpgkey 'https://mackerel.io/assets/files/GPG-KEY-mackerel'
  action :create
end

わすれずにrun_listに"recipe[yum]"を追加!

mackerel-agentをインストール

もうyumリポジトリ追加されているのでmackerel用のcookbook作ります

knife cookbook create mackerel -o site-cookbooks

site-cookbooks/mackerel/recipes/default.rbを編集してインストールされるようにします

#
# Cookbook Name:: mackerel
# Recipe:: default
#
# Copyright 2014, YOUR_COMPANY_NAME
#
# All rights reserved - Do Not Redistribute
#
# mackerel をインストールしてある状態にする
package "mackerel-agent" do
  action :install
end

こんだけ!簡単!

Agentを起動してみる

今度はmackerel-agentを起動して、OS起動時のサービスを有効化してある状態にする

# mackerel を起動して、OS起動時のサービスを有効化してある状態にする
service "mackerel-agent" do
  action [ :enable, :start ]
end

とりあえずこれで動くはずなのでやってみる
わすれずにrun_listに"recipe[mackerel]"を追加!

knife solo cook [user@ip]
    ================================================================================
    Error executing action `start` on resource 'service[mackerel-agent]'
    ================================================================================

あかんかった。。。
いろいろ調べてみるとどうやら設定ファイルがかかれていない(存在しない)のがよくないみたい

「Mackerelエージェントをインストールする」ページにいってみるとちゃんと起動する前に設定ファイル書くようにかいてある
API Keyなにかわからないとそりゃ動かんだろうししょうがないか

設定ファイルを用意する

というわけで設定ファイルが書かれるようにする
とりあえず環境べつに設定分けたいとかないのでtemplate以下に設定ファイルおいてそれが渡されるようにする
site-cookbooks/mackerel/templates/default/mackerel-agent.conf
に設定書いておいておく
Mackerelにサインインすると確認できるのでそれを参考に
API Keyだけなのでここは割愛

# mackerel
template "mackerel-agent.conf" do
  path "/etc/mackerel-agent/mackerel-agent.conf"
  source "mackerel-agent.conf"
  owner "root"
  group "root"
  mode 0644
  notifies :reload,'service[mackerel-agent]'
end

ここでポイントなのはこの設定を書く場所
Service Startする設定の前に書くこと!

全体にするとこんな感じ

#
# Cookbook Name:: mackerel
# Recipe:: default
#
# Copyright 2014, YOUR_COMPANY_NAME
#
# All rights reserved - Do Not Redistribute
#
# mackerel をインストールしてある状態にする
package "mackerel-agent" do
  action :install
end

# mackerel
template "mackerel-agent.conf" do
  path "/etc/mackerel-agent/mackerel-agent.conf"
  source "mackerel-agent.conf"
  owner "root"
  group "root"
  mode 0644
  notifies :reload,'service[mackerel-agent]'
end

# mackerel を起動して、OS起動時のサービスを有効化してある状態にする
service "mackerel-agent" do
  action [ :enable, :start ]
end

これで大丈夫!

まとめ

Mackerelいろんなことができるみたいだし日々機能追加されているみたいだし楽しみ!
Chefも少しずつ勉強してちゃんと使えるようになっていきたいし、頑張る予定

Chef実践入門 ~コードによるインフラ構成の自動化 (WEB+DB PRESS plus)

Chef実践入門 ~コードによるインフラ構成の自動化 (WEB+DB PRESS plus)

会社のインフラエンジニアに聞いたらこの本がよいらしいのでとりあえず買ってみた
コマンドしっかり書かれていてなぞっていくと色々できるようになるのでわかりやすい!

入門Chef Solo - Infrastructure as Code

入門Chef Solo - Infrastructure as Code

前にこの本を買って読んでいたんだけど
このときは実際にコマンドうたずに本当に読んでいただけなのであんまりみになってなかった
ちなみに上の本にはこの本の内容も含まれているので上買っておくのが良さそう

flickrでprivate設定の写真を共有しようとしてめっちゃはまった

f:id:norisu0313:20140707002323j:plain

flickrは基本的に全部private&only you設定にしていてただの画像ストレージとしてつかっているけど、最近写真を共有したくなったのでGuest Pass作ろうとしたらめっちゃはまった

flickr基本的に全部英語でかかれているから日本人には結構つらい感じになっている
一方でいろんなことを厳密に設定できるから何をどう設定したら変わるのかがすげー分かりにくい

とりあえずググる

なんにせよやり方調べようと思って検索してみた
flickr 共有」とかで検索すると、Guest Pass作る方法をいろんなサイトで説明されている
例えば下のサイトとか
[Flickr]非公開(プライベート)写真を家族や身内だけに共有する方法について調べてみた件 | ツインズパパの徒然日記 Ver.2

基本的にかいてある方法でやってるつもりなんだけどAlbum(昔のSet)共有することができない
右上のボタン押しても「Grab the link」が出てこない
f:id:norisu0313:20140707002750j:plain
Moreってボタン押しても何も出ない
f:id:norisu0313:20140707002752j:plain

なぜ。。。???

全くもって原因がわからないので、とりあえず色々な設定を変えまくってみて原因が分かった

Safety level of this photo という設定

個別の写真詳細ページに行くといろんな設定をみることができる
下の方(一番下)に行くと画像のように権限設定が色々かかれている
f:id:norisu0313:20140707003302j:plain
このSafety level of this photoという設定が重要
エキサイト翻訳にかけてみると「この写真の安全レベル」
はい、意味が分かりませんね
Flickrの使い方 - Flickr FAQ 日本語訳/コンテンツフィルタ
こちらをみると
ようは、レーティングのことみたい
ゲームで言うならCERO
ここが「Restricted」になっているのが問題(ちなみに「Moderate」でもダメ)
f:id:norisu0313:20140707003305j:plain
このように設定を「Safe」にすると誰にでも見せてよいことになるらしい

Albumないのファイル設定を全部変える

やり方は検索したら出てくるので割愛
Flickrで写真の公開範囲(private/public)を変更する方法
これは公開設定だけど、にたような感じで変えれる

これでゲストパスがとれるようになった

これで、一番最初のURLの通りGuest Passを取得できるようになった
f:id:norisu0313:20140707004636j:plain

便利!!

まとめ

Upload時のデフォルト設定でとりあえず全部ネガティブな方向へMAXにしていたからはまったぽいけど、検索しても日本語情報出てこなかったので備忘録かねて記載
とりあえず、flickrは日本語の説明とかも追加してほしいけどローカライズ基本的にめんどくささしかないし対応されなさそう
flickrアカウントある前提で友人と話できないから日本だとつらい
設定多すぎて使い方分かんない&米Yahooアカウント必要なので勧めづらいというのもある
なにはともあれ解決できてよかった

結婚式の余興のためにWebサービス作った

先日結婚式によんでいただきました

とってもいい式でした\\\\(۶•̀ᴗ•́)۶////
挙式、披露宴、二次会と全部しっかり参加させていただきました
幸せそうやったでぇ◟꒰◍´Д‵◍꒱◞

京都住みなのに場所が東京だったので大変遠い
どれぐらい遠いかって言うと
f:id:norisu0313:20140527223845j:plain
ご存知の通りこれぐらい

なので、二次会の幹事や式の受付などのお手伝いはできませんでしたが
普段とぉぉおぉぉおおぉおおぉおおおおぉおおおぉぉおおおっても
お世話になっている友人なので何かせねば!
と思い二次会で余興をさせていただくことにしました( ✧Д✧) キラーン

とはいえ

特に人に見せられる特技がある訳でもないし
いつも一緒に恥をかいてくれる友人連中は今回は式に呼ばれていない
てか、今回は主役で新郎ってやつをやっている
さすがに新郎に「一緒に余興しようぜ(° ꈊ °)✧」とはいえないので
お祝いサービスを作ることにしました!

締め切りは5/24

サービスを作ると決断したのは5/15この時点で閉めきりまで9日しかねいじゃないですか(*´﹃`*)
しかも流石に一人で全部やるのは無理だってことで

仲間を集める

ぼくは、友情と努力があれば勝利は自ずとついてくるって、小学3年生ぐらいからとある聖書で学んでいるので
今週の少年ジャンプ|集英社『週刊少年ジャンプ』公式サイト shonenjump.com
いつもお世話になってます
友情パワーを集めればこのタスクは解決できる!!
友人H「今週末お時間あったりしませんか?」
友人M「日曜日に遊びに行っていいですか?」
先輩I「何も言わずにバックエンド作ってください」
これで仲間が集まった(๑˃̵ᴗ˂̵)و

嘘みたいだろ、これ動いてるんだぜ

5/18 10:45 友人宅に集合して作り始めました
まぁ、集まって、環境構築してたらすぐにお昼ご飯って感じだったので実質作り始めたのをお昼すぎてから
こっからは努力で乗り切る!
というわけで、13:00-21:00まで開発!!

やっぱりジャ○プは嘘つかない

こんな雑な感じなのに動くものができたんだからボクのバイブルはやっぱり嘘つかないと確信を得ました!!

当日

二次会で発表させてもらいました、上司に頼んで「サービスリリース発表!」みたいな動画とらせてもらってそれを流して
会場でみなさんに実際に触ってもらうって感じにしました
ネタが内輪ウケって感じだったのでかなり心配していましたが、思ったよりうけたんじゃないですかね?

サイト埋め込みコードをつくるには?

サイト埋め込みコードを作るにはどうしたらいいのかを最近真剣に考えてた

Youtubeだとこういうの

<iframe width="560" height="315" src="//www.youtube.com/embed/WIKqgE4BwAY" frameborder="0" allowfullscreen></iframe>

実際に埋め込むとこうなる

Twitterだとこういうの

<blockquote class="twitter-tweet" lang="ja"><p>「アナと雪の女王」主題歌の百花繚乱カバー合戦で日本人が完敗すぎる件 | 熊坂仁美 | note (54 users) <a href="http://t.co/kkaZmuaqHe">http://t.co/kkaZmuaqHe</a></p>&mdash; はてなブックマーク::Hotentry (@hatebu) <a href="https://twitter.com/hatebu/statuses/457530582189080577">2014, 4月 19</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

実際に埋め込むとこうなる

ほかのサイトでも色々あるけどとりあえずこの2つをみるとYoutubeはiframeを直接書いているけどTwitterの場合はblockquoteを一緒に読み込んだwidget.jsでiframeに置き換えるっていうことをしている

どっちがいいんですかね?

とりあえず、どっちがいいのかって話はサイトの特性によると思うんだけどYoutubeとかだと動画の高さや幅が基本的に固定でよいのでjavascriptで何かを頑張る必要があんまりない
一方でTwitterの場合コンテンツの高さが投稿毎に違ったりする、特にメディアが引っ付いていたりすると高さを推定しづらいし、ある程度レスポンシブルで動的に横幅かわるとかっこ良かったりするので、固定にするのは無理があるけどかといって上の方しか見えないとか、スクロールバーでるとかかっこわるい
その辺り解決するためにjavascriptを利用しているようである
さらにTwitterのよいところはblockquote内にコンテンツ事態の内容が書かれているので、埋め込み先のサイトがRSSとかに対応していたときとかにリーダーで読むことができるので幸せな気持ちになれますね
このblockquoteをiframeに置き換えているのも当然javascriptでやっている

Youtubeの方法だと掘り下げるものがあんまりないのでTwitterみたいなアプローチでするならどうしたらいいか考えてみる

気をつけるべきこと

  • 埋め込み先のサイトで読み込まれるjsはプレーンでかくべき
    • 埋め込み先サイトでどんなライブラリが使われているかわからないので、ライブラリを読み込むことによって事故が起きる可能性がある
  • 埋め込み先のサイトで読み込まれるjsが埋め込み先のサイトに影響を与えないようにする
    • 名前空間が必ずユニークになって衝突したりしないようにする
  • 複数回jsが読み込まれても問題ないようにする
    • ユーザはわざわざスクリプトタグが1つになるように書き換えたりしないので複数回読み込まれることを想定する
  • 1回しかjsが読み込まれなくても問題ないようにする
    • これは理想的にはやった方がいいけど、どっちでもいい気がする
    • リテラシーの高いユーザが消す可能性を考慮する
  • pjaxに対応しているサイトに埋め込まれても問題ないようにする
  • オートページャーで読み込まれるサイトでも問題ないようにする
  • 自信以外のサイトの埋め込み投稿がされている可能性がある
  • 同じコンテンツが複数張られる可能性がある
    • IDをつける場合にコンテンツが同じでもユニークなるようにする
  • jsが動かない環境を想定する
    • blockquoteをiframeに置き換える方法ならコンテンツの内容を入れておく、リンクをつけておくなどしておくとよい
  • コードが埋め込まれる場所に影響をされないコードにする
    • 例えば、bodyの直下にあるとか、blockquoteの中で一番下にあるとか、そういう事を決めつけたコードにしない

こんなもん?気をつけたらよい気がしますね

iframeでレスポンシブル

iframeでレスポンシブルに対応するにはどうしたらよいのか?
というのを考えたときに色々問題あるんだけど、とりあえず幅が動的にかわるにはどうしたらいいかは簡単でwidthとmin-widthとmax-widthをiframeに指定してあげればいい

width 基本的なサイズで、これ以上大きくしたくないサイズを指定
min-width 一番小さいサイズでこれ以上小さくなってほしくないサイズを指定
max-width 画面に対して最大でどういう大きさまで許容できるか%で指定する

問題は高さをどうするかである
iframeの中からiframeの高さを変更するもしくは外からコンテンツの高さを取得する必要がある
当然クロスサイトドメイン制約があるので
iframeで読み込むページの高さを取得して、heigthに代入する方法 - Eiji
こういう方法は使えない
なので、PostMessageを使用するのが一般的?なきがする
postMessageとiframeでクロスドメインメッセージを送受信してみる | Zafiel
この方法でiframeの内部のコンテンツでresize時とload時に外側にメッセージ送ってそれにあわせてiframeのサイズ変えればレスポンシブルに高さかわって幸せな気持ちになれる

これでよいんだけどPostMessageに対応していないブラウザでみたときにレスポンシブルにならない

PostMessageに対応していない場合のiframeレスポンシブル

俺たちのIE7以前とか対応してなかったりする訳ですね!
正直シェアとか考えるとそこまでしなくていい感じしかしないけどどうやらTwitterはそこを解決しているようである
PostMessageが使えないので
iframeで読み込むページの高さを取得して、heigthに代入する方法 - Eiji
コンテンツの高さを取得するにはこっちの方法でとるしかなくなる
ということは、クロスサイトドメイン制約をどうにかして回避すればよい!

ではどのようにiframeでクロスサイトドメイン制約を回避するのかといえば
iframeの中のコンテンツをsrcで読み込むのではなく、jsで直接差し込んでやればよい
src のない iframe を動的生成した際の location の謎 - Please Sleep
こんな感じ
上のサイトで説明されていますが、locationの値が親と子で同じになるらしい
つまりクロスサイトじゃなくなる!!!
こうすることで、window.parent.documentとかとれちゃうようになるみたいですね

これで高さをかえるようにするとPostMessageに対応していないブラウザでもうまく動くようになる!!はず。。。
(軽く実験した程度ぐらいで、実際にはこの手段を使わなかったので行う場合はシッカリ検証してください

肝心のコンテンツはじゃぁどうやって取得するのかといえば、jsonpで頑張ってとる
って感じですかね
Twitterjsonpでやってるみたい

まとめ

ぶっちゃけ、PostMessageでレスポンシブル対応ぐらいまでやったらいい気がする
それ以上やるのはつらい気持ちにしかならなさそう

Twitterのコード読む努力はしたけど、minifyされてるので大変読みにくいしsとかaとかに変数名とか関数名がなってるので間違ってる部分が多々ありそう
あと、推測してる部分もかなりある