CodingFirst

C言語、Perl、JavaScript、最近はPythonも。出来上がったものより、プログラムを書くことが好き。あと、スイーツ。

スポンサーサイト

  • このエントリーをはてなブックマークに追加
  • web拍手 by FC2
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Javascrptで TwitterのRSSを取得する

  • このエントリーをはてなブックマークに追加
  • web拍手 by FC2

JavaScriptで twitter の RSSを取得する。

つぶやきのまとめはブログなどのサービス使うので十分。
でも、ちょっとRSSが取得したかったので書いてみた。

twitterのRSSの取得は REST API を使えば簡単。
REST API Resources | Twitter Developers
調べてみると、user_timeline のURLを書くだけいいと分かった。
それだとつまんないのでもう少し情報入れて、gist にスクリプトを貼った。

そのまえに動作サンプル。



動作させたスクリーンショット

twit-prof.png

最後にgistに貼ったスクリプト




Javascript: The Definitive Guide (Definitive Guides)Javascript: The Definitive Guide (Definitive Guides)
(2011/05/10)
David Flanagan

商品詳細を見る

Twitter API ポケットリファレンス (POCKET REFERENCE)Twitter API ポケットリファレンス (POCKET REFERENCE)
(2011/07/15)
山本 裕介

商品詳細を見る

Twitterで英語をつぶやいてみる (生活人新書)Twitterで英語をつぶやいてみる (生活人新書)
(2010/05/07)
石原真弓

商品詳細を見る
スポンサーサイト

Pythonで簡易掲示板を作った

  • このエントリーをはてなブックマークに追加
  • web拍手 by FC2

Pythonで簡易掲示板を書いた。
CGIPythonを動かし、表示側はJavaScript

まずはスクリーンショット。

mini-bbs.png

単純に文字を書き込めるだけ。
ソースコード上はスレッドとか意識して書いたけど、
UIがピンとこなかったので対応せず。

そうそう。Pythonで書く初のコードでした。
書いた感じ、すごくシンプルでとっつきやすかったんだけど、
コードをググって探すのがちと大変。
チュートリアルくらい読んでからはじめるべきかも知れない(あたりまえ?)

さて。コード的には shelveというのが特徴的だったので使ってみた。
ハッシュディクショナリを簡単に保存、読み込みができる。
これ、すごい楽でいいな。
個人的にはデータはテキストの方が好きだけど、
ぱっと何か作る時には積極的に利用すべし。

他は、リスト、ディクショナリの操作などなどで
大したことはないかな。

そうそう。JavaScriptで少し苦労した。
createElement したエレメントに onclick を設定しても呼ばれない。
これは、addEventListener()を使うのが正解らしい。こんな感じ。

var del=document.createElement('input');
del.type='button';
del.value='del';
del.addEventListener('click',(function(id){return function(){
  if(confirm("delete?")==false) return false;
  form1.q.value='del';
  form1.date.value=id;
  form1.submit();
}})(date));

作ったスクリプトは gistに置いた。
https://gist.github.com/912445


Pythonで評判が良さそうだった本をあげておく。
GAEやるようになったら買おう。




みんなのPythonみんなのPython
(2006/08/22)
柴田 淳

商品詳細を見る


初めてのPython 第3版初めてのPython 第3版
(2009/02/26)
Mark Lutz

商品詳細を見る


PythonクィックリファレンスPythonクィックリファレンス
(2004/03)
アレックス マーテリ

商品詳細を見る

東京の電力使用状況グラフをJavaScript+GoogleChartで作った

  • このエントリーをはてなブックマークに追加
  • web拍手 by FC2

東京電力の使用状況グラフをJavaScript
東京電力電力供給状況APIGoogle Chart APIで作った。

とりあえず、できたグラフを画像で貼っとく。3/27 です。ご注意を。

tepcopow.jpg

で、下記は動作例。動いてれば、現在の日付で画像がプロットされる。

動いてればここに表示される

以下、覚え書きなど。

東京電力電力供給状況APIは、
東京電力の使用状況グラフなどのデータをプログラマが使えるようにAPI化し、
月日指定や直近のデータをJSONPで返してくれる。すげーっ。
使い方などはサイトにわかりやすく書いてあります。ありがたや、ありがたや。
サーバは GAEを使ってるそうです。私も使ってみたい!!

Google Chart APIは、
グーグル提供のグラフ化した画像を取得するAPI。
こちらは難解なので使ったものだけ覚書を書いとく。

chs=500x300
画像サイズ。300,000px以内。
chtt=20110317
グラフのタイトル。URIencode()して渡す。
chxt=x,y
軸線の表示。x=底辺、y=左辺、r=右辺、t=てっぺん(あれ?なんていうんだ)
chxr=1,1000,6000,1000
軸の単位。chxt[1]=y=左辺を0(%)→1000、100(%)→6000とし、1000刻みで表示(わかりづら!)
chxl=0:|0|1|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|18|19|20|21|22|23|
カスタムの軸ラベル。chxt[0]=x=底辺に棒グラフの棒毎に0,1,2..とラベルをつける
chg=0,10.0
補助線。底辺はなし、左軸は500刻み。
chbh=10,2
棒の太さを10pxと隣との間隔を2px。
chd=t1:28,27,22|50
tは0-100の数字(小数可)でデータを並べる指定。1は..なんだっけ..
この場合、棒は28,27,22の3つで、2軸目は50の横線(横線は後述)
chdl=today|capacity
chdで指定した第1列の凡例をtodayとし、第2列の凡例をcapacityとする
chco=FFBB00,FF0000
chdで指定した第1列の色をFFBB00(オレンジ)、第2列をFF0000(赤)とする
cht=bvs
ベースとなるグラフに棒グラフを指定する
chm=H,FF0000,1,0,2
Hが横線、FF0000が赤、1が第2列目、0が横一直線、線の太さが2px

あちこちのサンプルみながら書いたので、説明もちょとあやしいので、
Chart Feature List - Google Chart Tools / Image Charts (aka Chart API) - Google Code
を一読しましょう。

さて、ソースコード。gistに貼っといた。
https://gist.github.com/889164

ふぅ。疲れた...

参考サイト:




プログラミング Google App Engineプログラミング Google App Engine
(2011/01/24)
Dan Sanderson

商品詳細を見る

JavaScript 第5版JavaScript 第5版
(2007/08/14)
David Flanagan

商品詳細を見る

続きを読む »


JavaScriptでYouTubeのWebAPIを使ってみた

  • このエントリーをはてなブックマークに追加
  • web拍手 by FC2

JavaScriptでYouTube Data APIを使って、 動画検索とサムネイル表示を作ってみた。

WebAPIを勉強するのには、YouTube Data APIだと、
登録とか不要なのでいいかも知れない。

YouTube の API とツール - Google Code
http://code.google.com/intl/ja/apis/youtube/overview.html

まずはWebAPIは何だろ?とは思ってたんだけど、
一言でいうとURLかな。
たとえば、"cat"を検索するのは以下のURL。
JavaScriptとか使わずともブラウザでアクセスできる。

http://gdata.youtube.com/feeds/api/videos?vq=cat

データがずらーっと出てくるだけだけなので面白くない。
これをJavaScriptで使うには、
JSONPで返すような URLにしてscriptタグに埋め込めばいい。

<script
 src='http://gdata.youtube.com/feeds/api/videos?vq=cat&callback=func' />
<script>
function func(data){
  ...
}
</script>

コールバック関数の引数はfeedの親が返ってくるんだけど、
詳しくはリファレンスを参照。

リファレンス ガイド: Data API プロトコル
http://code.google.com/intl/ja/apis/youtube/reference.html

あとはデータを加工するだけなので、
サンプルを gistにあげておいた。
キーワード検索すると30個サムネイル表示して、
画像を2秒おきに切り替えるおまけ付き。

とりあえず、"アニメ"とか"AKB"とか検索してみると面白い。
余計なものが無いのですごく高速に動く。

Player APIをみたらプレーヤを埋め込めそうだったので
そのうち試したいな

あと、Google Codeの
API と デベロッパー ツール
にて、いろんなWebAPIが提供されてるので
これらもそのうち使ってみたいな!


ブログパーツを自作しよう Webサービス+JavaScript編ブログパーツを自作しよう Webサービス+JavaScript編
(2008/08/20)
蒲生 睦男

商品詳細を見る

WebAPIの本は検索してみると、
なんだかこむずかしそうな本が多いな。。
これなら気楽に読めそうかなぁ。。。


JavaScriptでURLをちょっと賢く解読する。

  • このエントリーをはてなブックマークに追加
  • web拍手 by FC2

ちょっと賢くURLデコードする。UTF-8限定だけど。

Googleの検索結果とかでURLに %E3%81%AD%E3%81%8E などと、
%xxな文字列になっている事があるが、

URIの規則を定める RFC 3986 では、URIにASCIIの非予約文字[1]以外の文字データを用いる場合には、「%xx」(xxは16進数)という形でコードを表記することが定められている。
URLエンコード - Wikipedia
という事で、JavaScriptで元の文字に戻すには、decodeURIすればいい。

decodeURI('%E3%81%AD%E3%81%8E'); //=>'ねぎ'

でもエラーに弱くて、例えば、

decodeURI('%E3%81%AD%E3%81%8E%E5%A4%A7%E7%9B%9B%E3%82');
  //=>'URIError: URI malformed'

例外が起きて変換できない。最後の %E3%82 の後に1個足りないせい。
そこだけ除いてデコードするっきゃない。
正規表現で有効なデータを抜き出して decodeURIすりゃいい。

var utf8uri = new RegExp(
   "%[0-7][0-9A-F]|"+
   "%C[2-9A-F]%[89AB][0-9A-F]|%D[0-9A-F]%[89AB][0-9A-F]|"+
   "%E[0-F](?:%[89AB][0-9A-F]){2}|"+
   "%F[0-7](?:%[89AB][0-9A-F]){3}|"+
   "%F[89AB](?:%[89AB][0-9A-F]){4}|"+
   "%F[CD](?:%[89AB][0-9A-F]){5}","ig");
s=s.replace(utf8uri,function(whole){
  return decodeURI(whole);
});

UTF-8のURIエンコードだけにマッチングする正規表現にしてみた。

UTF-8っておもしろいコードしてるな!!
1~6バイトの可変長で、1バイト目でバイト数が分かるようになってて、
1バイト目かどうかを識別できるのがいい!
ASCIIコードと上位互換してるってのも気配りできてる感じでいい。

さてと、急に話は変わるけど、
URIエンコードされた文字列みてると、たまに %25E3%2581 とか
%25 がやたらでてくる場合があるんだけど、%25って % の事。
つまり、2回 encodeURI()したってこと。
更に、何度も何度も encodeURIされてて、
%25252525E3
とかニコニコ成長してく(笑)。

これも正規表現使ってさくっと変換してみよう~。

s=s.replace(/%(?:25)+([0-9A-F][0-9A-F])/g,function(whole,m1){
  return "%"+m1;
});

うん。満足。
正規表現って便利だな。はまる人が多いのもわかる気がする。

さてさて、
両方足したデコードできるサンプルを↓に置いてみた。


↑のソースはgistに置いた。

UTF-8も面白かったけど、やっぱ正規表現

正規表現はプログラマにとって必修科目と思うんだけど、
以外にさっぱり分からんって人が多いんだよな。。

まぁ、人の事はいいとして、正規表現は複数の言語を渡り歩くためにも、
熟考しといたほうがいいんだけど、まだ、読めてないんだよなぁ↓の本。


詳説 正規表現 第3版詳説 正規表現 第3版
(2008/04/26)
Jeffrey E.F. Friedl

商品詳細を見る

つい、クックブックとかに手を出しそうになる。


正規表現クックブック正規表現クックブック
(2010/04/15)
Jan Goyvaerts、Steven Levithan 他

商品詳細を見る

あと、文字コードはこの本がいいって聞いたことあったな。


プログラマのための文字コード技術入門 (WEB+DB PRESS plus) (WEB+DB PRESS plusシリーズ)プログラマのための文字コード技術入門 (WEB+DB PRESS plus) (WEB+DB PRESS plusシリーズ)
(2010/02/18)
矢野 啓介

商品詳細を見る

 | HOME |  »

Search

Recent Entries

Foot Print



Categories

Monthly

Recent Comments

Recent Trackbacks

Profile

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。