ちょっと変わったマニアな作品が集結

Twitterのクライアントを自作しています。
リアルタイム更新をjQueryで行いたいのですが、あまり参考になるサイトがなく困っています。

「ここを見れば簡単にできる方法載ってるよ」または「こういう方法があるよ」というのがあれば是非教えて下さい。

よろしくお願いいたします。

このQ&Aに関連する最新のQ&A

A 回答 (4件)

というかまずこの質問の上でだしてるあなたの質問にだれも返答しないように、


jsというよりもプログラム自体ほとんど未経験なんだと思うけど。
いきなりクライアントというよりも。基本的な部分のプログラムの勉強をまず軽くやったほうがいいよ。
twitterクライアントつくるなら、これの場合はinnerhtmlとかをつかってノードの書き換えや追加、あたりのをまず理解しとかないと、リアルタイム更新というのはできないよ。

あなたが言ってることは、ようはjsonで得たデータをinnerHTMLとかつかってタイムラインの部分のnodeを書き換えてやればいいんだよ。

言葉にするとこの一行ですんじゃうことなんだけどw、そもそものdom操作が理解できてなさそうなので、その人に↑の1行で言っても先ず理解できないでしょうから。助言のしようがちょっとないんだ。
(´・ω・`) javascript dom で検索するといろいろ例文があるので、そこらいちどぐるっとめぐって勉強するといいよ。
あと基本的なjavascriptの構文とともにオブジェクト指向言語の勉強してクラスやメソッドの理解をしておけば、必要な機能をライブラリ化して後で再利用とかできるようになるし、ほかの言語みてもとまどわないだろう。ただjavascriptは型もなにも自由すぎて最初にこいつから勉強するのはあまりおすすめ出来ないんだけどw

ちゃんと勉強するなら
JavaScript本格入門 ~モダンスタイルによる基礎からAjax・jQueryまで
という本がおすすめできる。
けど内容はある程度オブジェクト思考の知識を持ってる人じゃないとスラスラ読めないだろう。
javaの基礎を勉強すると、まずはいいだろう。情報も本もすぐに試せる環境も手にはいるので。
そこからjavascriptを勉強すると早いと思う。
    • good
    • 0
この回答へのお礼

遅くなりました。ご回答ありがとうございます。
まさにご指摘の通りです。
教えていただいた本を読ませていただきます。
ありがとうございました

お礼日時:2012/04/22 11:10

http://web-park.org/javascript/twitter_json.html
jsでやるとなるとここが参考になるんでないかな。
あとはリクエストは1時間70リクエスト以下にしてセットタイムアウトで取得すれば
    • good
    • 0
この回答へのお礼

ありがとうございます。
今回の目的のもの以外でも使えそうなものがありました。
大変参考になります。

お礼日時:2012/04/04 22:43

う。

うんw


まずtwitterAPIの存在はしってるだろうか?
それとJSONとかの理解はしてるだろうか?

この回答への補足

twitterAPIに関してはこれを知らないでクライアントは作れないのは理解してい
ますのでもちろん存じています。
一応タイムラインの獲得まではできています。
JSONに関してははずかしながら勉強していません。
javascript自体つい最近勉強した程度のレベルの者です。
JSONを勉強すれば簡単に解決できるよということでしょうか?

補足日時:2012/04/03 13:52
    • good
    • 0

それはポーリングしたいというのか、ソケット接続したいとかどっちやのん?

この回答への補足

初心者のためポーリングやソケット接続というのはちょっとわからないのですが、単純にいえば

<script type='text/javascript'>
(function(){
var t = setInterval(function(){
location.reload(true);
}, 10000);
})();
</script>

上のように更新させるScriptだと全体をリロードしてしまうのではなく、
<ul>
<li class="timeline"><span class='box_text'>Aさんのツイート内容</span></li>
<li class="timeline"><span class='box_text'>Bさんのツイート内容</span></li>
<li class="timeline"><span class='box_text'>Cさんのツイート内容</span></li>
<li class="timeline"><span class='box_text'>Dさんのツイート内容</span></li>
</ul>
とタイムラインのソースがあり、このliで囲まれている箇所を10秒前後で更新させたいんです。

オフィシャル(https://twitter.com/)でいうと、しばらくすると「2件の新しいツイート」などと表示されますが、それの代わりにその新しいツイートが表示されるようにしたいのです。

補足日時:2012/04/01 22:54
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QPHPからリアルタイムにデータを受け取るには?

PHPとMySQLをつかったウェブアプリケーションの開発に関する情報を収集しています。

クライアントソフトが数分間に一回、サーバーへ情報を取りに行く方法ではなく、以下の方法ができたら負荷が少なくていいかなと考えています。このような手法は可能でしょうか。

・クライアントの発信元情報を、サーバー側のデータベースに記録しておく
・データベースが更新され、通知の必要が生じたら、先ほど記録されたクライアント情報の一覧を取得し、それらにデータを一斉送信
・待機中のクライアントがデータを受け取り、情報が表示される。

クライアント側はブラウザだけではなく、Win32アプリケーションなどAPIの選択肢が幅広いアプリケーションも使えるものとします。もし技術的に無理なようであれば、無難に定期的にデータを取得しに行く方法を採用したいと思います。

Aベストアンサー

クライアントから定期的に取りに行かないとすると、やり方としては大きく2通り。

1.普段はTCPセッションを張って無くて、必要が生じたときにサーバーからクライアントにTCPセッションを張って通知する。
⇒No1の方の回答の通り。イントラならあり得るでしょうね。ブラウザは不可。

2.常時TCPセッションを張っておいて、必要が生じたらサーバーからクライアントに通知する。
⇒WebSocketというキーワードで調べてみてください。HTML5の機能の一つなのでブラウザによってはサポートしている。まだこなれていない技術なのでドキュメントも少ないと思います。
http://ja.wikipedia.org/wiki/WebSocket
 TCPセッションを常時張ったままなので、クライアントが多いとサーバーリソースが持たないかも

現状では、定期的にクライアントから取りに行くのがいいでしょうね。

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qリアルタイム表示ホームページの作成について

はじめまして。
現在、PCで取得した温度データをネットワークを用いてモニターできるシステムを作ろうと思っております。
如何せんWEBプログラムは初めてなもので手探りで進んでいる状態です。

現在考えている方法は
・温度データをテキストファイルで読み込み
・WEBサーバをたちあげて、テキストデータを読み込んで表示
という方法です。
リアルタイムで表示したいため、JAVAscriptを用いたいと思っておりますが、仕様上ファイルの読み書きが難しそうです。
phpも考えたのですが、調べた限り、ブラウザを更新しない限りはデータはリアルタイムで変化しないようです。

今はphpでデータを取得->JAVAscriptで表示
という方法を考えていますが、少しスマートではない気がします。
何か良い方法があるのでしょうか?

どなたかご教授よろしくお願いいたします。

Aベストアンサー

#1です。
>ローカルのファイルを参照して
そのかんきょうがどういうものかわからないが、
Apacheみたいなのがあるなら、うごくとおもうじょ!
ぶらうざもなるべくあたらしげのものを。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>sample</title>

<div>
ただいまの温度<br>
<span id="koko"></span>℃
</div>

<script type="text/javascript">
//@cc_on

if (! /^http/.test(location.href)) {
 alert('この環境じゃ動かない');
} else {
 document.getElementById('koko').innerHTML = getFile('ondo.txt');
}

function getFile ( name ) {
 var obj = new XMLHttpRequest();
 var text = null;
 
 if (obj) {
  obj./*@if(@_jscript) onreadystatechange @else@*/ onload /*@end@*/ = function () {
   if (4 == this.readyState) {
    if (200 == this.status) text = this.responseText;
    if (404 == this.status) text = 'Error! No file.';
   }
  };
  obj.open( 'GET', name, false );
  obj.send();
 };
 return text;
}

</script>

#1です。
>ローカルのファイルを参照して
そのかんきょうがどういうものかわからないが、
Apacheみたいなのがあるなら、うごくとおもうじょ!
ぶらうざもなるべくあたらしげのものを。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>sample</title>

<div>
ただいまの温度<br>
<span id="koko"></span>℃
</div>

<script type="text/javascript">
//@cc_on

if (! /^http/.test(location.href)) {
 alert('この環境じゃ動かない');
} else {
 document.getElementById('kok...続きを読む

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

QMySQLで複数のSELECT文を1文にまとめたい

以下のようなテーブル table1 があります。
*******************
table1
*******************
Name, Kyouka, Score, ID
*******************
山田, 国語, 92, 10001
鈴木, 国語, 71, 10002
田中, 国語, 89, 10003
山田, 数学, 65, 10004
鈴木, 数学, 69, 10005
杉田, 英語, 96, 10006
山田, 英語, 63, 10007
田中, 英語, 76, 10008
...
*******************

カラムIDはPRIMARYを指定しています。
カラムScoreはインデックスを作成しています。

このテーブルで、「IDと教科」を指定したときに、以下の2つのデータを得たいと思っています。
(1) IDに対応する名前と、その教科中の順位
(2) その教科のレコード数

具体例としては、例えば「ID=10001、教科=国語」を指定したときに、「山田、3人中1位」というような情報が得たいです。
(「ID=10001、教科=英語」のようなおかしな組み合わせは指定しないようになっています。)

(1) は、以下のようにして名前と順位を得る事が出来ました。
SELECT Name,
(SELECT COUNT(*) + 1 FROM table1 b WHERE b.Score > a.Score and Kyouka='国語') AS rank
FROM table1 a
WHERE ID='10001'
ORDER BY Score DESC;

(2)は、以下のようにして特定の教科のレコード数を得る事が出来ました。
SELECT COUNT(*) FROM table1 WHERE Kyouka='国語';

しかし、実際にはレコード数が大量にあり、頻繁にこの検索を実行する予定なので、負荷が心配です。
出来るだけサーバーの負荷を減らすために、1回のSELECT文の実行で(1)と(2)をどちらも実現できるような方法はないでしょうか。

また、このテーブルでインデックスを作成しているのはIDとScoreのみですが、より負荷を減らすにはKyoukaにもインデックスを作成した方が良いでしょうか。

何卒、よろしくお願いいたします。

以下のようなテーブル table1 があります。
*******************
table1
*******************
Name, Kyouka, Score, ID
*******************
山田, 国語, 92, 10001
鈴木, 国語, 71, 10002
田中, 国語, 89, 10003
山田, 数学, 65, 10004
鈴木, 数学, 69, 10005
杉田, 英語, 96, 10006
山田, 英語, 63, 10007
田中, 英語, 76, 10008
...
*******************

カラムIDはPRIMARYを指定しています。
カラムScoreはインデックスを作成しています。

このテーブルで、「IDと教科」を指定したときに、以下の2つのデータ...続きを読む

Aベストアンサー

教科中の順位とその教科のレコード数を1回で取得するなら、下記の様にSELECT句内のサブクエリを一つ追加すれば良いだけです。

----------------------------------------
SELECT
Name,
Kyouka,
Score,
(SELECT COUNT(*) + 1 FROM table1 b WHERE b.Score > a.Score AND a.Kyouka = b.Kyouka) AS rank,
(SELECT COUNT(*) FROM table1 c WHERE a.Kyouka = c.Kyouka) AS count
FROM table1 a
WHERE ID = '10001'
ORDER BY Kyouka, Score DESC;
----------------------------------------

また、上記の様に教科をサブクエリ内の結合条件で絞り込んでやると、WHERE句の条件を変えるだけで色々な絞込みが可能です。

例) [国語の全データを取得] -------------
SELECT
Name,
Kyouka,
Score,
(SELECT COUNT(*) + 1 FROM table1 b WHERE b.Score > a.Score AND a.Kyouka = b.Kyouka) AS rank,
(SELECT COUNT(*) FROM table1 c WHERE a.Kyouka = c.Kyouka) AS count
FROM table1 a
WHERE Kyouka = '国語'
ORDER BY Kyouka, Score DESC;
----------------------------------------

性能が気になるようでしたら、下記の様にカウントはFROM句内のサブクエリで取得した方がよいかも知れません。

----------------------------------------
SELECT
Name,
Kyouka,
Score,
(SELECT COUNT(*) + 1 FROM table1 b WHERE b.Score > a.Score AND a.Kyouka = b.Kyouka) AS rank,
c.count
FROM table1 a INNER JOIN
(SELECT Kyouka, COUNT(*) AS count FROM table1 GROUP BY Kyouka) c USING(Kyouka)
ORDER BY Kyouka, Score DESC;
----------------------------------------

なお、他の方も指摘されている通り、Kyoukaカラムにもインデックスを張ったほうが良いと思います。

教科中の順位とその教科のレコード数を1回で取得するなら、下記の様にSELECT句内のサブクエリを一つ追加すれば良いだけです。

----------------------------------------
SELECT
Name,
Kyouka,
Score,
(SELECT COUNT(*) + 1 FROM table1 b WHERE b.Score > a.Score AND a.Kyouka = b.Kyouka) AS rank,
(SELECT COUNT(*) FROM table1 c WHERE a.Kyouka = c.Kyouka) AS count
FROM table1 a
WHERE ID = '10001'
ORDER BY Kyouka, Score DESC;
----------------------------------------

また、上記の様に教科をサ...続きを読む

QPOSTで

POSTで
<a href=sample.cgi?md=aa&tx=zz~>hoge</a>
<a href=sample.cgi?md=bb&tx=yy~>hoge2</a>
<a href=sample.cgi?md=cc&tx=xx~>hoge3</a>
<a href=sample.cgi?md=dd&tx=ww~>hoge4</a>

を送る方法でjavascriptとの組み合わせで出来るのかな?
と思い検索したら

<form action="./sample.cgi" method="POST" name="post">
<input type="hidden" name="md" value="aa">
<input type="hidden" name="tx" value="zz">
          :
<a href='#' onClick="document.post.submit();return false">hoge</a>
<form action="./sample.cgi" method="POST" name="post2">
<input type="hidden" name="md" value="bb">
<input type="hidden" name="tx" value="yy">
          :
<a href='#' onClick="document.post2.submit();return false">hoge2</a>

このような手法が見つかりました
これだと行数が多くなり、なんとなくすっきりしません
どなたかいい解決方法を教えてください
よろしくお願いします

POSTで
<a href=sample.cgi?md=aa&tx=zz~>hoge</a>
<a href=sample.cgi?md=bb&tx=yy~>hoge2</a>
<a href=sample.cgi?md=cc&tx=xx~>hoge3</a>
<a href=sample.cgi?md=dd&tx=ww~>hoge4</a>

を送る方法でjavascriptとの組み合わせで出来るのかな?
と思い検索したら

<form action="./sample.cgi" method="POST" name="post">
<input type="hidden" name="md" value="aa">
<input type="hidden" name="tx" value="zz">
          :
<a href='#' onClick="document.post.submit();return...
続きを読む

Aベストアンサー

JavaScriptオフの場合を考えないなら、このように書けます。


<!-- フォーム -->
<form action="sample.cgi" method="post" name="form1">
<input type="hidden" name="md">
<input type="hidden" name="tx">
</form>


<!-- スクリプト -->
<script type="text/javascript"><!--
function Post(md, tx) {
  form1.md.value = md;
  form1.tx.value = tx;
  form1.submit();
}
//--></script>


<!-- リンク -->
<a href="javascript:Post('aa', 'zz')">hoge</a>
<a href="javascript:Post('bb', 'yy')">hoge2</a>

QJavaScriptde途中で、「exit」するには?

function kensaku(){
s_data = document.kaiin_form.input_name.value;

if(!s_data){ alert("キーワードを入れて下さい!"); }

if(s_data != dumy){ ...... }
for(i=st_no;i<=n;i++){
......省略.................;
.......省略................}
}

----------------------------------
3行目で表示されたアラートをOKで閉じても、4行目以下が実行されてしまいます。
3行目でexitするにはどうすれば良いでしょうか?

Aベストアンサー

>関数(kensaku())からは抜けられませんでした。
そうですね、勘違いしていました、f(^^;
すみません。
if(!s_data){
alert("キーワードを入れて下さい!");
return;
}
ですね。

Qページ間で変数を保持したい

いつもお世話になっております。

今回はhtml間での値渡しについてお聞きしたいです。

現在ある二つのページA,Bを作成していまして、お互いにリンクが張ってあります。
AからBに行く時、Aの中にあるフォームの内容をBに表示したく外部jsファイルでグローバル変数に保持したりなどやってみましたがだめでした。

そもそもこのようなことをjavascriptのみでできるのでしょうか?
また可能ならばどのようにすればよいでしょうか?
ご教授お願いします。

Aベストアンサー

<form action="fB.html" method="get">
とした場合の例ですが、

以下のコードを参考にしてみてください。
------------------------------------------------------------
fA.html
------------------------------------------------------------
<html>
<head>
</head>
<body>
<form action="fB.html" method="get">
<input type="text" name="t" value="textA"></input>
<input type="hidden" name="h" value="hiddenA">
<input type="submit">
</form>
</body>
</html>
------------------------------------------------------------
fB.html
------------------------------------------------------------
<html>
<head>
<script type="text/javascript">
<!--
function init() {
var arr=Array();

var ss = "";
var querys=location.search;
if(querys) {
var q = querys.replace(/^\?/,'').split('&');
for(i=0 ; i<q.length ; i++){
var pair=q[i].split('=');
// arr[pair[0]]=pair[1];
ss += pair[0] + " = " + pair[1] + "\n";
}
}
alert(ss);
}

window.onload= init;

//--></script>
</head>
<body>
</body>
</html>

<form action="fB.html" method="get">
とした場合の例ですが、

以下のコードを参考にしてみてください。
------------------------------------------------------------
fA.html
------------------------------------------------------------
<html>
<head>
</head>
<body>
<form action="fB.html" method="get">
<input type="text" name="t" value="textA"></input>
<input type="hidden" name="h" value="hiddenA">
<input type="submit">
</form>
</b...続きを読む

QボタンをクリックでPHP文を実行

ボタンをクリックしたときのみPHP文を実行したいのですが・・・

<input type="button" onClink="<?php~?>">
でいけるかと思ったのですが、
ページ表示時に<?php~?>が実行されてしまい、うまくいきませんでした。

onClink="window.open(test.php)"
という方法以外でお願いします。

Aベストアンサー

AjaxはもともとJavaScriptの機能である非同期通信をつかったもので。Ajaxという言語があるわけではありません

Ajaxを利用するのであれば、JavaScriptのXMLHttpRequestを使って非同期通信できるような実装をしなくてはなりません
簡単にサンプルコードで書けるほど単純なものでもありません

一般的なサーバーサイドスクリプトの動作として、
ボタンを押す->サーバーへリクエストする->サーバーが処理する->クライアントに何かしらの結果を返す(出力する)です
つまり、PHP等のサーバーサイドスクリプトは、遷移させることが大前提で動作します

ですから、ボタンを押してその場でJavaScriptと同じようにPHPが動くなんてことはありえません。
ボタンを押したらサーバーにリクエストする という動作ならば可能です。

つまり
質問で言われているような
onClink="window.open(test.php)"

<form name="f1" action="test.php" method="post">
<input type="submit" name="submit" value="submit" />
</form>
等のような形になります

こういった一般的な方法だと いちいち画面が切り替わったようになってしまうのを嫌って Ajaxでコレと同じことを、画面を切り替えずに行っているだけに過ぎません

AjaxはもともとJavaScriptの機能である非同期通信をつかったもので。Ajaxという言語があるわけではありません

Ajaxを利用するのであれば、JavaScriptのXMLHttpRequestを使って非同期通信できるような実装をしなくてはなりません
簡単にサンプルコードで書けるほど単純なものでもありません

一般的なサーバーサイドスクリプトの動作として、
ボタンを押す->サーバーへリクエストする->サーバーが処理する->クライアントに何かしらの結果を返す(出力する)です
つまり、PHP等のサーバーサイドスクリプトは、...続きを読む

Qフォームで同じ複数のnameで違うvalueの送信

始めまして、現在一個のフォーム内で複数の同じnameで、違うvalueを送信しようと苦戦しております、、普通にタグを書くだけでは
一個のnameで違うvalueの送信は、最後のvalueしか送信できないです、
phpは使用できません。javaは、、殆ど素人なので、あまり分かりません、、formを一個一個区切るのも、レイアウト上できません、、
どうすればいいのでしょうか?・・・以下タグです。
昨日から、ここから先に進めません。。
先輩方助けてください、本当によろしくお願いします。

<form action="http://hoge.net/hoge/hogecheck.php" method="post">
<input type="hidden" name="site" value="hoge">
<input name="id" type="text" id="idform" maxlength="10" />

<input type="hidden" name="kin" value="3000">
<input type="image" src="buybtn.gif" />
<input type="hidden" name="kin" value="5000">
<input type="image" src="buybtn.gif" />
<input type="hidden" name="kin" value="10000">
<input type="image" src="buybtn.gif" />
<input type="hidden" name="kin" value="20000">
<input type="image" src="buybtn.gif" />

</form>

始めまして、現在一個のフォーム内で複数の同じnameで、違うvalueを送信しようと苦戦しております、、普通にタグを書くだけでは
一個のnameで違うvalueの送信は、最後のvalueしか送信できないです、
phpは使用できません。javaは、、殆ど素人なので、あまり分かりません、、formを一個一個区切るのも、レイアウト上できません、、
どうすればいいのでしょうか?・・・以下タグです。
昨日から、ここから先に進めません。。
先輩方助けてください、本当によろしくお願いします。

<form action="http://hoge...続きを読む

Aベストアンサー

No.2の回答者です。
スミマセンm(__)m、Javaでしたね。PHPで書いてしまいました。。。

Java だったらこれで取れます。(HTML側の修正は不要です。)
String[] kin= req.getParameterValues("kin");


人気Q&Aランキング