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