LoginSignup
8
8

More than 5 years have passed since last update.

Kobito Widgetを発明した

Last updated at Posted at 2014-10-16

任意のウェブページの情報をKobitoに表示します。
以下のようなフォーマットを編集中のウィンドウに貼り付けます。

<script>
widget(url, selector);
function widget(url, selector) {
  var req = new XMLHttpRequest();
  req.onload = function() {
    var el = document.createElement('div');
    var base = url.replace(/(^https?:\/\/.*?)\/.*$/gm, '$1');
    el.innerHTML = this.responseText;

    var result = el.querySelector(selector);
    var h = result.innerHTML;
    h = h.replace(/ src="\//gm, ' src="' + base + '/');
    h = h.replace(/ src="[^\/(http)]/gm, ' src="' + url + '/');
    result.innerHTML = h;

    var container = document.createElement('div');
    container.appendChild(result);
    document.body.insertBefore(container, document.body.firstChild);
  }
  req.onerror = function(){ console.error("error"); }
  req.open('GET', url);
  req.send();
}
</script>
// <link rel="stylesheet" href="http://weather.livedoor.com/css/weather.css" type="text/css">

url: 埋め込む対象のURLです
selector: 切り出す範囲のCSSセレクタです

cssが必要なら必要に応じてタグを追加します。

天気予報

スクリーンショット 2014-10-16 11.03.40 PM.png

株価

スクリーンショット 2014-10-16 11.48.40 PM.png

おまけ: Twitterタイムライン

スクリーンショット 2014-10-16 11.39.57 PM.png

これはTwitterから提供されるコードそのままです。

8
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
8