root/websites/twicli/index.html

Revision 39206, 15.6 kB (checked in by NeoCat, 21 months ago)

Add note about posting tweets via GAE server

  • Property svn:mime-type set to text/html; charset=UTF-8
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2<html>
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5<meta http-equiv="Content-Script-Type" content="text/javascript">
6<meta name="description" content="twicliはWebブラウザ上で動くTwitterクライアントです。WebブラウザさえあればMacでもWinでもLinuxでも動きます。タイムラインを随時、自動的に取得してアニメーション表示していきます。">
7<title>twicli - A Web Browser-Based Lightweight Twitter Client</title>
8<style type="text/css"><!--
9body { background-color: #115; margin: 0; padding: 0; }
10.whole { width: 800px; padding: 20px; margin: 0; background-color: #fff; font-size: 90%; }
11.launch { margin-left: 100px; padding: 10px; text-align: center; color: #00f; background-color: #cfc; border: 2px solid #393; width: 200px; font-size: large; }
12.button { cursor:pointer; }
13li { margin: 4px; }
14h1 { border-bottom: solid 2px red; }
15h2 { border-left: solid 1.2em #cf6; padding-left: 4px; }
16h3 { border-left: solid 1.2em #fc0; padding-left: 4px; }
17img { border: none; }
18.language_selection { float:left; margin-left:700px;}
19pre { background-color: #ddf; border: 1px solid #66f; }
20--></style>
21<a class="language_selection" href="index_en.html">English</a>
22<script type="text/javascript">
23function hatena_bookmark(url) {
24        document.write('<a href="http://b.hatena.ne.jp/entry/'+url+'"><img src="http://d.hatena.ne.jp/images/b_entry.gif" width="16" height="12" alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク"><\/a>');
25        document.write('<a href="http://b.hatena.ne.jp/entry/'+url+'"><img src="http://b.hatena.ne.jp/entry/image/'+url+'" alt="はてなブックマーク" title="はてなブックマーク"><\/a>');
26}
27</script>
28</head>
29<body>
30<div class="whole">
31<h1><a name="twicli"><img alt="twicli" src="images/icon_large.png" width="48" height="48"> twicli</a></h1>
32<script type="text/javascript">hatena_bookmark("http://www.geocities.jp/twicli/")</script>
33<table><tr><td>
34<p>
35twicliはWebブラウザ上で動くTwitterクライアントです。
36<ul>
37<li>WebブラウザさえあればMacでもWinでもLinuxでも動きます。インストールも不要。
38<li>タイムラインを随時、自動的に取得してアニメーション表示していきます。
39<li>専用サーバなどは介さず、クロスドメインJavaScriptで直接Twitterからツイートを取得するため高速です。<br><small><small>(ツイートの送信はJavaScriptコールバックで結果を取得するためGAEサーバ経由で行われます。)</small></small>
40</ul>
41
42<p>
43ネットカフェで他事しながらTwitterを眺めたいときなどに便利かも。<br>
44今のところFirefox3以降, Safari4, Chrome, Opera10, IE8で動いています。<br>
45iPhone/iPod touchのSafariでもOKです。<br>
46IE7でも一応動作しますが、一部の表示が乱れます。<br>
47<div class="launch"><a onclick="window.open('twicli.html', 'twicli', 'width=280,height=600,menubar=no,toolbar=no,scrollbars=yes,location=no,resizable=yes'); return false;" href="javascript:void window.open('http://twicli.neocat.jp/twicli.html', 'twicli', 'width=280,height=600,menubar=no,toolbar=no,scrollbars=yes,location=no,resizable=yes')">twicliを起動</a></div>
48</td><td>
49<img alt="screenshot" width="331" height="478" src="usage/usage1.png" align="right">
50</td></tr></table>
51
52<h2><a name="howto">使い方</a></h2>
53<h3><a name="launch">起動</a></h3>
54上のリンク(bookmarklet)をクリック、またはブックマークにD&amp;Dで登録して選択すると、別窓で起動します。<br>
55初回アクセス時や、+タブの「ログアウト」をクリックした場合は、認証を求められます。ブラウザ上、もしくはサーバ経由で認証(OAuth)を行って下さい。<br><br>
56あんまり激しくクリックしまくるとAPI制限(350回/1時間)に引っかかりますので、基本まったりご使用下さい。^^;
57</p>
58
59<h3><a name="usage">操作方法</a></h3>
60<table width="100%"><tr>
61<td width="40"><img alt="prev" onClick="go(-1)" src="images/left.png" class="button"></td>
62<td align="center"><img alt="usage" id="usage" width="600" height="480" src="usage/usage2.png"></td>
63<td width="40"><img alt="next" onClick="go(1)" src="images/right.png" class="button"></td>
64</tr></table>
65<script type="text/javascript">
66var i = 0;
67function go(d) {
68        i = (i + d + 4) % 4;
69        var usage = document.getElementById("usage");
70        usage.width = [600,600,480,480][i];
71        usage.height = [480,480,480,710][i];
72        usage.src = "usage/usage"+(i+2)+".png";
73}
74</script>
75<img alt="usage" src="usage/usage2.png" width="1" height="1">
76<img alt="usage" src="usage/usage3.png" width="1" height="1">
77<img alt="usage" src="usage/usage4.png" width="1" height="1">
78<img alt="usage" src="usage/usage5.png" width="1" height="1">
79
80<h2><a name="faq">FAQ</a></h2>
81<ul>
82<li><b>公式ハッシュタグは?</b><blockquote> → <a href="http://search.twitter.com/search?q=%23twicliJP">#twicliJP</a> です。疑問//不具合/ご要望などなど、なんでもどうぞ。</blockquote></li>
83<li><b>ダイレクトメッセージ(D)を送るには?</b><blockquote> → 「d ユーザ名 メッセージの内容」と発言欄に書いて送信します。2回目以降はDタブで返信ボタンを押せば簡単です。なお相手が自分をフォローしていないと送信できません。</blockquote></li>
84<li><b>NGワード(指定語句を含むtweetを隠す)機能はないの?</b><blockquote> →抽出プラグインでできます。(<a href="#link">下記リンク</a>参照)</blockquote></li>
85<li><b>Enterで送信だと誤爆が増える…</b><blockquote> → 「+」タブの設定で「ctrl+enter/shift+enterで発言」を有効にして「保存」することで、enterキーのみでは発言しないようにできます。</blockquote></li>
86<li><b>たまにtweetに失敗するみたいなんだけど…</b><blockquote> → Twitterの過負荷で鯨が出ているのかもしれません。「r」とだけ書いてEnterキーを押すと、一つ前のtweetを再送できます。</blockquote></li>
87<li><b>見た目がしょぼいんだけど…</b><blockquote> → 標準では表示できる情報量を増やすため詰め込みぎみです。
88twicliはCSSを使って見た目を好みに合わせてカスタマイズ可能です。詳しくは下記の「<a href="#customize">カスタマイズ</a>」を参考にして下さい。</blockquote></li>
89<li><b>tweet数が多いときにAPI制限に引っかかる</b><blockquote> →「+」タブの設定で「発言後に自動更新」の設定を解除して「保存」すると、発言後のTL更新を抑止してAPI使用回数を少なくできます。</blockquote></li>
90<li><a href="http://github.com/NeoCat/twicli/wiki">twicli wiki</a>も参考にして下さい。</li>
91</ul>
92
93<h2><a name="customize">カスタマイズ</a></h2>
94<a href="http://github.com/NeoCat/twicli/wiki">twicli wiki</a>にもカスタマイズに関する情報があります。
95<h3><a name="css">ユーザースタイルシートについて</a></h3>
96「+」タブの設定→「ユーザースタイルシート」にCSSを記述して、見た目のカスタマイズが可能です。例えば:
97<ul>
98<li>角丸/影付きの外観に変更 → <tt> @import url(styles/round.css); </tt>
99<li>ユーザのアイコンを消す → <tt> .uicon { display: none; } </tt>
100<li>tweetの行間を広げる   → <tt> .status { line-height: 1.5; } </tt>
101</ul>
102他にもtwicli用のユーザースタイルシートを公開して下さっている方がいらっしゃるので、参考にしてみてください(→<a href="https://github.com/NeoCat/twicli/wiki/User-stylesheet">参考</a>)。
103
104<h3><a name="plugins">プラグインについて</a></h3>
105「+」タブの設定でプラグイン(JavaScript)を登録することにより、機能拡張ができます。<br>
106添付のプラグインには以下のものがあります。
107<ul>
108<li>標準プラグイン (デフォルトで有効のもの)<ul>
109<li><b>regexp.js</b> : 特定のIDやキーワードを含むtweetを抽出するタブを追加します。詳しくは<a href="http://d.hatena.ne.jp/NeoCat/20090101">こちら</a>。
110<li><b>lists.js</b> : フォローしているリストのうち、指定されたものをタブとして表示します。詳しくは<a href="http://d.hatena.ne.jp/NeoCat/20091101/1257088158">こちら</a>。
111<li><b>outputz.js</b> : tweetした文字数を<a href="http://outputz.com/">Outputz</a>に送信します。
112<li><b>search.js</b> : <a href="http://search.twitter.com/">Twitter Search</a>でのキーワード検索を「+」タブに追加します。
113<li><b>favotter.js</b> : <a href="http://favotter.matope.com/">ふぁぼったー</a>の最新2000件のふぁぼられ数を<span style="background-color:#6fc; color:#00c;">[fav:3]</span>のようにTLやユーザのtweetに追加表示します。
114<li><b>followers.js</b> : follower以外<small> (いわゆる片想い) </small>のtweetを青色で表示します。「+」タブの「フォロワーを色付け」の「Renew」ボタンを押して、定期的に最新のfollower一覧を取得する必要があります(デフォルトは無効)。
115<li><b>translate.js</b> : ▼から「翻訳」を選ぶと、「+」タブ>「翻訳」で指定した言語にtweetを翻訳します。
116<li><b>thumbnail.js</b> : 写真投稿サービスのURLを含むtweetにサムネールをつけます。現在<a href="http://twitpic.com/">twitpic</a>, <a href="http://movapic.com/">携帯百景</a>, <a href="http://f.hatena.ne.jp/">HatenaFotolife</a>, <a href="http://tumblr.com/">Tumblr</a>, <a href="http://yfrog.com/">yFrog</a>, <a href="http:/plixi.com/">Plixi</a>, <a href="http://img.ly/">img.ly</a>, <a href="http://ow.ly/">Ow.ly</a>, <a href="http://www.flickr.com/">Flickr</a>, <a href="http://instagr.am/">Instagram</a>, <a href="http://picplz.com/">picplz</a>, <a href="http://moby.to/">Mobypicture</a>, <a href="http://via.me/">via.me</a>, <a href="http://www.youtube.com/">YouTube</a>, <a href="http://www.nicovideo.jp/">ニコニコ動画</a>, <a href="http://www.slideshare.net/">SlideShare</a>に対応しています。
117<li><b>embedsrc.js</b> : tweetに含まれるリンクURLの内容をオーバーレイ表示するボタン(<img src="images/jump.png">)を追加します。現在<a href="http://gist.github.com/">github:gist</a>, <a href="http://www.youtube.com/">YouTube</a>, <a href="http://www.nicovideo.jp/">ニコニコ動画</a>, <a href="http://www.slideshare.net/">SlideShare</a>に対応しています。(created by <a href="http://twitter.com/_wa_">@_wa_</a>)
118<li><b>resolve_url.js</b> : タイムライン上の短縮URLを短縮前のURLに展開します。(created by <a href="http://twitter.com/edvakf">@edvakf</a>)
119<li><b>shorten_url.js</b> : 発言欄で、URLの後に ;;; と打ち込むとURLを短縮します。もう一度打ち込むと元に戻ります。(created by <a href="http://twitter.com/edvakf">@edvakf</a>)
120<li><b>geomap.js</b> : ジオタグ(GeoLocation)が付加されたtweetで、マーカ(<img src="images/marker.png">)をクリックした際にGoogle Mapをインライン表示します。詳しくは<a href="http://d.hatena.ne.jp/NeoCat/20100722/1279741190">こちら</a>。
121<li><b>tweet_url_reply.js</b> : tweetへのリンクURLに内容を取得するボタン(<img src="images/jump.png">)を追加します。(created by <a href="http://twitter.com/edvakf">@edvakf</a>)
122<li><b>related_results.js</b>: ▼に関連するツイートを表示するメニューを追加します。(created by <a href="http://twitter.com/tkawa">@tkawa</a>)
123<li><b>mute.js</b>: ▼に指定したユーザやハッシュタグを含むツイートを1時間非表示にする機能を追加します。
124</ul><li>非標準プラグイン (デフォルトでは無効のもの)<ul>
125<li><b>reply_favicon.js</b>: Re新着時にfavicon(IE,Safari以外)とタイトルを変更します。(created by <a href="http://twitter.com/edvakf">@edvakf</a>)
126<li><b>sound.js</b>: TLやReの新着時にサウンドを鳴らします。
127<li><b>insert_hashtag.js</b>: ハッシュタグ(#〜)のタブを開いた状態でtweetすると、末尾にそのハッシュタグを自動追加します。(created by <a href="http://twitter.com/_wa_">@_wa_</a>)
128<li><b>shortcutkey.js</b>: キーボードショートカットで操作できるようにします(→<a href="https://github.com/NeoCat/twicli/wiki/Shortcutkeys">ショートカットキー一覧</a>)。
129<li><b>multi_account.js</b>: 複数のアカウントを"+"タブで切り替えられるようにします。タブブラウザと組み合わせれば複数のアカウントを同時利用できます。
130</ul>
131
132<h2><a name="source">ソース</a></h2>
133開発は<a href="http://coderepos.org/share/browser/websites/twicli/">CodeRepos</a>か<a href="http://github.com/NeoCat/twicli/">github</a>上で行っています。パッチや勝手にコミット大歓迎です。なお、ライセンスは<a href="LICENSE.txt">MITライセンス</a>です。開発途上なので随時アップデートしていきます。
134<p>不具合/要望などは<a href="http://twitter.com/NeoCat">@NeoCat</a>にreplyして頂くと対応するかもしれません。#twicliJP ハッシュタグでつぶやいてもらってもOKです。</p>
135
136<h2><a name="link">リンク</a></h2>
137<ul>
138<li><a href="http://github.com/NeoCat/twicli/wiki">twicli wiki</a>
139<li><a href="http://d.hatena.ne.jp/NeoCat/20080819/1219133294">開発メモ</a>
140<script type="text/javascript">hatena_bookmark("http://d.hatena.ne.jp/NeoCat/20080819/1219133294");</script></li>
141<li><a href="http://d.hatena.ne.jp/NeoCat/20110206/1296934235">API呼出しについて</a>
142<script type="text/javascript">hatena_bookmark("http://d.hatena.ne.jp/NeoCat/20110206/1296934235");</script></li>
143<li><a href="http://d.hatena.ne.jp/NeoCat/20080904/1220482528">プラグイン開発メモ</a>
144<script type="text/javascript">hatena_bookmark("http://d.hatena.ne.jp/NeoCat/20080904/1220482528");</script></li>
145<li><a href="http://d.hatena.ne.jp/NeoCat/20081121/1227282584">Outputzプラグインについて</a>
146<script type="text/javascript">hatena_bookmark("http://d.hatena.ne.jp/NeoCat/20081121/1227282584");</script></li>
147<li><a href="http://d.hatena.ne.jp/NeoCat/20090101/1230838882">抽出プラグインについて(1)</a>
148<script type="text/javascript">hatena_bookmark("http://d.hatena.ne.jp/NeoCat/20090101/1230838882");</script></li>
149<li><a href="http://d.hatena.ne.jp/NeoCat/20090101/1230913660">抽出プラグインについて(2)</a>
150<script type="text/javascript">hatena_bookmark("http://d.hatena.ne.jp/NeoCat/20090101/1230913660");</script></li>
151<li><a href="http://d.hatena.ne.jp/NeoCat/20110119/1295391840">抽出プラグインについて(3)</a>
152<script type="text/javascript">hatena_bookmark("http://d.hatena.ne.jp/NeoCat/20110119/1295391840");</script></li>
153<li><a href="http://d.hatena.ne.jp/NeoCat/20090824/1251125679">soundプラグインについて</a>
154<script type="text/javascript">hatena_bookmark("http://d.hatena.ne.jp/NeoCat/20090824/1251125679");</script></li>
155<li><a href="http://d.hatena.ne.jp/NeoCat/20091101/1257088158">listsプラグインについて</a>
156<script type="text/javascript">hatena_bookmark("http://d.hatena.ne.jp/NeoCat/20091101/1257088158");</script></li>
157<li><a href="http://d.hatena.ne.jp/NeoCat/20100722/1279741190">geomapプラグインについて</a>
158<script type="text/javascript">hatena_bookmark("http://d.hatena.ne.jp/NeoCat/20100722/1279741190");</script></li>
159</ul>
160
161<h2><a name="author">作ってる人</a></h2>
162<a href="http://twitter.com/NeoCat">@NeoCat</a>
163
164</div>
165</body>
166</html>
Note: See TracBrowser for help on using the browser.