にこらとてすらの反省会

新年明けましておめでとうございます

新年一発目からSiReFaSoの宣伝のようなものを思いついたのでお付き合い頂ければと思います。

自分のサイトに更新情報を表示する

SiReFaSoには作成した当時からRSSの他にJSONPというAPIのようなものが利用出来るようにしています。まだ作りたてで不安定だったもので（今でも不安定ですけど）積極的に紹介していなかったのですが、もういいやと思って何か一つデモのようなものを書いてみました。

続き

こんなの

ソース

<!-- head内に書く -->
<style type="text/css">
/*<![CDATA[*/
#sirefaso-widget p, #sirefaso-widget dl, #sirefaso-widget dt, #sirefaso-widget dd {
  margin: 0;
  padding: 0;
}
#sirefaso-widget {
  margin: 0 auto;
  width: 160px;
  height: 240px;
  background-color: #eee;
  overflow: auto;
}
#sirefaso-widget p {
  background-color: #cc3;
  font-size: 16px !important;
}
#sirefaso-widget p a {
  font-family: Impact,Chicago,'Comic Sans MS','平成明朝','ＭＳ Ｐ明朝',serif !important;
  color: #ffb;
  display: block;
  text-align: center;
}
#sirefaso-widget dl, #sirefaso-widget dl a {
  font-size: 12px !important;
  font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif !important;
}
#sirefaso-widget dt {
  color: #363;
  background-color: #cfc;
  font-weight: normal !important;
  white-space: nowrap;
}
#sirefaso-widget dd {
  background-color: #ccf;
  text-indent: 1em;
  margin: 0 !important;
  padding: 3px 0 3px 0;
}
/*]]>*/
</style>
<!-- /head内に書く -->
<!-- 設置したい場所に書く -->
<div id="sirefaso-widget">
<p><a href="http://sirefaso.appspot.com/" title="SiReFaSo - 伺かゴースト更新フィード">SiReFaSo</a></p>
</div>
<!-- /設置したい場所に書く -->
<!-- 設置したい場所以降に書く -->
<script type="text/javascript">
//<![CDATA[
var author = 'Don'; // 検索ワードを指定
var url = 'http://sirefaso.appspot.com/update.json?callback=sirefasoWidgetInit&query=' + encodeURI(author);
var s = document.createElement('script');
s.src = url;
s.charset = 'utf-8';
var widget = document.getElementById('sirefaso-widget');
widget.appendChild(s);
function sirefasoWidgetInit(r) {
  var dl = document.createElement('dl');
  widget.appendChild(dl);
  for (var i = 0, l = r.length; i < l; i++){
    var dt = document.createElement('dt');
    var date = document.createTextNode(r[i].date);
    dt.appendChild(date);
    var dd = document.createElement('dd');
    var a = document.createElement('a');
    a.href = r[i].link;
    var title = document.createTextNode(r[i].title);
    a.appendChild(title);
    dd.appendChild(a);
    dl.appendChild(dt);
    dl.appendChild(dd);
  }
}
//]]>
</script>
<!-- /設置したい場所以降に書く -->

カスタマイズ

script内の"author"っていう部分に検索ワードを指定すると検索結果が表示されます。CSSを変えればデザインを変えられます。私センスないんでオシャレに変えて頂けると嬉しいです。

ということで、今年もよろしくお願いします。