Powered by Movable Type 3.16Syndicate this site(XML)
< April | | November >
2010.05.04

[SCRIPTJS : Get delicious links

デリシャスのブックマークを取得したい!

■多謝
http://2xup.org/log/2006/12/25-2118

デリシャスのJSONフィード
http://del.icio.us/feeds/json/XXXXXX/?count=10
これをたたくとJSON返ってきますんで
こいつをJSでさばくということです。

var ul = document.createElement('ul');
for (var i=0, post; post = Delicious.posts[i]; i++) {
  var li = document.createElement('li');
  var a = document.createElement('a');
  a.setAttribute('href', post.u);
  a.setAttribute('title', post.d);
  a.appendChild(document.createTextNode(post.d));
  ul.appendChild(li);
  li.appendChild(a);
} 
document.getElementById('delicious_update_list').appendChild(ul);
//u URL
//d タイトル
//n メモ
//t タグ

呼び出す場所のdiv等に「delicious_update_list」というidを振るべし。このJSだとリストタグとして返ってきますよ。

Posted by inami at 11:26 PM

[SCRIPTJS : Get fricker images

フリッカーの画像を取得してHTMLに貼り付けたい時

●その1
Widgetがあるよ
http://www.flickr.com/badge.gne

●その2
JS(JSONP)でもってこれるよ

■外部JS

function flickrJsonAPI(json){
var div = document.getElementById("flickrjsonApi");
var items = json.items.slice(0, 1);
for (var i = 0; i < items.length; i++) {
var item = items[i];
var a = document.createElement("a");
var img = document.createElement("img");
var media = item.media.m;
img.setAttribute("src", media);
a.setAttribute("href", item.link);
a.setAttribute("title", item.title);
a.appendChild(img);
div.appendChild(a);
}
}

■HTML

//ヘッダ
<script type="text/javascript" src="js/frickerJsonApi.js"></script>
//ボディ
<div id="flickrjsonApi"></div>
<script src="http://api.flickr.com/services/feeds/photos_public.gne?id=*****&set=*****&jsoncallback=flickrJsonAPI&format=json"
type="text/javascript" charset="utf-8"></script>

画像をオリジナルサイズで持ってきたかったので、JSでサイズを規定している

var media = item.media.m;

をreplaceで違うものに置き換えてやればいけるのでは、と

var media = item.media.m.replace(/_m.(jpg)$/, "_o.$1");

(※_oというのは「original image, either a jpg, gif or png, depending on source format」。http://www.flickr.com/services/api/misc.urls.html

…だけど権限だかなんだかのせいで、結局オリジナルサイズを取得することができなかった…。というか、frickerの仕組み的に画像ダウンロード(PCに保存)ができないっぽいんで、そもそもダメだった。

■多謝
http://www.metareal.org/2008/06/15/display-flickr-photos-on-your-website-using-json-feed-api/

Posted by inami at 04:26 AM
2010.05.03

[SCRIPThtml5 SVG

■多謝
http://ja.wikipedia.org/wiki/Scalable_Vector_Graphics

SVG(Scalable Vector Graphics)は、XMLによって記述されたベクターグラフィック言語のこと、あるいは、SVGで記述された画像フォーマットのこと。W3Cでオープン標準として勧告されている。

XMLで記述するため、Webブラウザ上で閲覧でき、テキストエディタなどで編集することができる。またハイパーリンクを画像中に埋め込んだり、JavaScriptなどと連携させることもできる。ベクターグラフィックであるため、ベクターデータによる画面表示では拡大や縮小をしても描写の劣化が起きない。画像データの画面表示はWebブラウザのプラグインによって色調補完を行ないドット落ちを補正する機能を持つものがある。

Posted by inami at 06:37 PM

[SCRIPThtml5 section

sectionタグ

・セクションで内容を明示的に区切る。idとかつけておけば分かりやすくなる。
・ブロック要素じゃない。ソース上でわかりやすくするだけ?
・区切ったらh1など何度でもつけられる。

■多謝
http://www.html5.jp/tag/elements/section.html

section 要素は、一般的なドキュメント・セクションやアプリケーション・セクションを表します。セクションとは、この文脈においては、コンテンツの主題をグループ化するものです。通常はヘッダーを、場合によってはフッターを伴います。

section 要素は、一般的なコンテナ要素ではありません。スタイリング目的やスクリプティングにとっての都合で要素が必要になったとき、ウェブ制作者は、代わりに、div 要素を使うことが推奨されます。一般的な規則として、section 要素は、その要素のコンテンツが明示的にドキュメントのアウトラインにリストされる場合にのみ適切だということです。

<article>
 <hgroup>
  <h1>Apples</h1>
  <h2>Tasty, delicious fruit!</h2>
 </hgroup>
 <p>The apple is the pomaceous fruit of the apple tree.</p>
 <section>
  <h1>Red Delicious</h1>
  <p>These bright red apples are the most common found in many
  supermarkets.</p>
 </section>
 <section>
  <h1>Granny Smith</h1>
  <p>These juicy, green apples make a great filling for
  apple pies.</p>
 </section>
</article>

section 要素を利用することで、ウェブ制作者はどこにでも h1 要素を使うことができるようになる点に注目してください。該当ののセクションが、トップ・レベルなのか、第2レベルなのか、第3レベルなのかどうかについて心配する必要はありません。

Posted by inami at 04:34 PM
CopyRight© ´MNGN.COM´. All Rights Reserved.