岩家.net

はじめに

Twitter でのお友達 （今は following かな？） のつぶやきを一覧するアプリ 「ついともにた」 の新バージョンを公開しました．

twitomonitor [ついともにた]

背景

Kanasan.JS JavaScript第5版読書会 #2 の LT でこのアプリについて発表させていただいた ことで，モチベーションがグッと上がった気がします．

そしてもうひとつ．

みんなの最新updateを一望できる「twitter100」をリリースしました : akiyan.com via kwout

akiyan.com の中の人 が 「つぶやき一覧」 系のサービスを公開されたことですね．この一件がかなり大きいかも．

変更点

ver. 0.1.0 における主な変更点は次のとおりです．

• ログインの単純化．
• 「お友達リスト」 をアイコン表示に．
• 「モニタ」に移動機能を追加．
• JavaScript による実装部分を jQuery ベースに移行．
• それに伴うHTMLの再構成．
• ロゴ．

変更点についての簡単な解説

ログインの単純化

以前から Twitter Reader のログイン方法をステキに感じていたので，同様に，ワンクリックでログインできるようにしてみました．

これには，最近ようやくわかってきた JSONP な手法を使っています．流れとしては次のような感じですかね．

1. 「ログイン」ボタンをクリックする．
2. <script src="http://twitter.com/statuses/friends.json?callback=hogehoge"></script> を生成する．
3. ↑ のソースは hogehoge( json ); といったものになる．
4. ログイン後の処理をあらかじめ定義した関数 hogehoge が実行される．

なお，事前に Twitter にログインしていない場合には，2．の段階で認証のダイアログが表示されるかと思います．Twitter で利用しているニックネームとパスワードを入力すればOKです．（一度済ませたら，ブラウザを閉じるまで（？）は認証不要です．）

「お友達リスト」 をアイコン表示に

テキストよりもアイコンでの方が探しやすいかな？ということで．省スペースにもなりましたしね．

アイコンをマウスオーバーすると，リスト上部にそのユーザのニックネームが表示されます．また，クリックでそのユーザの 「モニタ」 の表示・非表示を切り換えられます．

「モニタ」に移動機能を追加

「モニタ」 右上部の 「←」「→」 をクリックすると，それぞれ左隣・右隣の 「モニタ」 との位置が入れ替わります．

JavaScript による実装部分を jQuery ベースに移行，それに伴うHTMLの再構成

DOM 操作やイベント処理，簡単なエフェクトをすばやく記述できていい感じです．書いてて楽しいですね，ホント．

ロゴ

Twitter っぽいと言われている Pico-alphabet を使いました．（via：twitter のロゴに似ているフリーフォント「Pico-alphabet」 ::: creazy photograph． ）

おわりに

さっそくアプリを使いながら本エントリを書いてますが，さっそくバグが見つかりました＞＜ 自動 （手動でも） 更新後の 「モニタ」 の時間表示がヘンになってますね．今後の最初の課題．．．と．

あと，IE （6 だけ？）で動かない，と言う不具合についてだけは，しばらくの間スルーしますｗ

参考

Twitter!―Twitter APIガイドブック

以前の ついったー名古屋 味仙オフ にて tsupo さん よりいただいた本です．Twitter API を利用して得られるJSONデータのフォーマット関連において特に参考になりました．

• 

  Twitter!―Twitter APIガイドブック

  posted with amazlet on 08.02.14

  辻村 浩
  九天社 (2007/09)
  売り上げランキング: 63745

  Amazon.co.jp で詳細を見る

Main Page - jQuery JavaScript Library

jQuery に関するドキュメントです．

クイックリファレンス 第5版―JavaScript1.5対応

文法や仕様については 本家 に任せるとして，各種オブジェクトのメソッド，それらの動作について素早く知りたいときに重宝します．

• 

  JavaScriptクイックリファレンス 第5版―JavaScript1.5対応

  posted with amazlet on 08.02.15

  David Flanagan 木下 哲也 福龍興業
  オライリージャパン (2007/05)
  売り上げランキング: 18385

  Amazon.co.jp で詳細を見る

はじめに

以前からやってみたいことがあったので，ニコニコ動画の API をちょっと触ってみてます．

実装ついては，以下のエントリを参考にさせていただいてます．

• Perlでニコニコ動画のflvとコメントxmlをダウンロードする (Yusukebe::Tech)
• 404 Blog Not Found:perl - 勝手に添削 - ニコニコ動画ダウンローダー
• 404 Blog Not Found:perl - ニコニコ動画ダウンローダー新認証対応版

で，実際に指定した動画のコメント （XMLデータ） を取得して中身を覗いてみたところ，

てってってーのなんとか コメ取得memo via kwout

と比べて 1つ，要素が追加されているようなので，ちょっとメモっときます．まぁ要素名を見れば役割はすぐわかるんですけどね．

コメントXML の概要

※ 一部編集してあります．

<?xml version="1.0" encoding="UTF-8"?>
<packet>
  <thread last_res="10157" resultcode="0" revision="2" server_time="1202711246" thread="1202600766" ticket="0×8a8b2d0"/>
  <view_counter id="sm2280725" mylist="8455" video="126697"/>
  <chat anonymity="1" date="1202708675" mail="184" no="9661" thread="1202600766" user_id="…" vpos="4270">…</chat>
  <chat anonymity="1" date="1202708675" mail="184" no="9662" thread="1202600766" user_id="…" vpos="8524">…</chat>
  <chat anonymity="1" date="1202708686" mail="184" no="9664" thread="1202600766" user_id="…" vpos="5123">…</chat>
    .
    .
    .
</packet>

「view_counter」 要素が追加されていますね．

各属性についてのメモ

thread 要素

last_res

最後のコメント番号．つまり，これがコメントの総数を表しているっぽい．

resultcode

？

revision

？

server_time

データ取得時間？

thread

動画に結び付けられているスレッド （コメントの集合かな？）の番号？

ticket

？ 16進数表記．

view_counter 要素

id

カウンタのID．== 動画のID，かな．

mylist

「マイリスト」登録数．

video

動画の再生数．

chat 要素

anonymity

匿名投稿フラグ．

date

コメント投稿日時．

mail

コメントに対するコマンド．

no

コメント番号．

thread

コメントが所属するスレッドの番号．

user_id

ユーザID．匿名時には暗号化される．

vpos

コメントの動画再生位置．数値の内容はよくわかってない．

おわりに

次は，XMLデータの加工方法を勉強せねば．

はじめに

お仕事でちょっとした swf を作った方がよさげな状況な今日この頃，さて，どうしたものか．．．

以前，WCAN mini ActionScript vol. 4 の懇親会で （一部で） 話題に挙がった haXe （「ハックス」 とか 「エックス」 とか読むようです），これを使ってみることにしました．

記事の続き

午後，そろそろお客さんのところへ向かいますか．．．と家を出てビックリ．

迷った挙句，強くなる雪の中，スタッドレスタイヤに交換してから出発しました．

今考えると，交換しといてよかったな．．．と．