root/websites/twicli/index.html @ 35821

Revision 35821, 9.6 kB (checked in by NeoCat, 4 years ago)

-add lists.js plugin
-make lists.js/resolve_url/shorten_url plugins default
-and cosmetic changes

  • 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<title>twicli - A Web Browser-Based Lightweight Twitter Client</title>
7<style type="text/css"><!--
8body { background-color: #115; margin: 0; padding: 0; }
9.whole { width: 800px; padding: 20px; margin: 0; background-color: #fff; font-size: 90%; }
10.launch { margin-left: 100px; padding: 10px; text-align: center; color: #00f; background-color: #cfc; border: 2px solid #393; width: 200px; font-size: large; }
11.button { cursor:pointer; }
12li { margin: 4px; }
13h1 { border-bottom: solid 2px red; }
14h2 { border-left: solid 1.2em #cf6; padding-left: 4px; }
15h3 { border-left: solid 1.2em #fc0; padding-left: 4px; }
16img { border: none; }
17.language_selection { float:left; margin-left:700px;}
18--></style>
19<a class="language_selection" href="index.en.html">English</a>
20<script type="text/javascript">
21function hatena_bookmark(url) {
22        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>');
23        document.write('<a href="http://b.hatena.ne.jp/entry/'+url+'"><img src="http://b.hatena.ne.jp/entry/image/'+url+'" alt="はてなブックマーク" title="はてなブックマーク"><\/a>');
24}
25</script>
26</head>
27<body>
28<div class="whole">
29<h1><img alt="twicli" src="icon.png" width="32" height="32"> twicli</h1>
30<script type="text/javascript">hatena_bookmark("http://www.geocities.jp/twicli/")</script>
31<table><tr><td>
32<p>
33twicliはWebブラウザー上で動くTwitterクライアントです。
34<ul>
35<li>Webブラウザ上さえあればMacでもWinでもLinuxでも動きます。インストールも不要。
36<li>タイムラインを随時、自動的に取得してアニメーション表示していきます。
37<li>専用サーバなどは介さず、クロスドメインJavaScriptで直接Twitterにアクセスします。パスワード等がTwitter以外に送信されることはありません。
38</ul>
39
40<p>
41ネットカフェで他事しながらTwitterを眺めたいときなどに便利かも。<br>
42今のところFirefox, Chrome, Safari, Opera, IE8で動いています。<br>
43iPhone/iPod touchのSafariでもOKです。<br>
44IE7でも一応動作しますが、一部の表示が乱れます。<br>
45<div class="launch"><a href="javascript:void window.open('http://www.geocities.jp/twicli/twicli.html', 'twicli', 'width=280,height=600,menubar=no,toolbar=no,scrollbars=yes,location=no,resizable=yes')">twicliを起動</a></div>
46</td><td>
47<img alt="screenshot" width="331" height="478" src="usage1.png" align="right">
48</td></tr></table>
49
50<h2>使い方</h2>
51<h3>起動</h3>
52上のリンク(bookmarklet)をクリック、またはブックマークにD&amp;Dで登録して選択すると、別窓で起動します。<br>
53認証を求められたら、"twitter.com"からの要求かを確認した上で、Twitterのアカウント／パスワードを入力してください。<br><br>
54あんまり激しくクリックしまくると<b>API制限(150回/1時間)</b>にすぐ引っかかりますので、基本まったりご使用下さい。^^;
55</p>
56
57<h3>操作方法</h3>
58<table width="100%"><tr>
59<td width="40"><img alt="prev" onClick="go(-1)" src="left.png" class="button"></td>
60<td align="center"><img alt="usage" id="usage" width="600" height="480" src="usage2.png"></td>
61<td width="40"><img alt="next" onClick="go(1)" src="right.png" class="button"></td>
62</tr></table>
63<script type="text/javascript">
64var i = 0;
65function go(d) {
66        i = (i + d + 4) % 4;
67        var usage = document.getElementById("usage");
68        usage.width = [600,600,480,480][i];
69        usage.height = [480,480,480,710][i];
70        usage.src = "usage"+(i+2)+".png";
71}
72</script>
73<img alt="usage" src="usage2.png" width="1" height="1">
74<img alt="usage" src="usage3.png" width="1" height="1">
75<img alt="usage" src="usage4.png" width="1" height="1">
76<img alt="usage" src="usage5.png" width="1" height="1">
77
78<h2>カスタマイズ</h2>
79<h3>user stylesheetについて</h3>
80「+」タブのuser stylesheetにCSSを記述して、見た目のカスタマイズが可能です。例えば：
81<ul>
82<li>ユーザのアイコンを消す → <tt> .uicon { display: none; } </tt>
83<li>発言の行間を広げる　　 → <tt> .status { line-height: 1.5; } </tt>
84</ul>
85
86<h3>プラグインについて</h3>
87「+」タブのPreferencesでプラグイン(JavaScript)を登録することにより、機能拡張ができます。<br>
88以下のプラグインがあります。
89<ul>
90<li><b>regexp.js</b> : 特定のIDやキーワードを含む発言を抽出するタブを追加します。詳しくは<a href="http://d.hatena.ne.jp/NeoCat/20090101">こちら</a>。
91<li><b>lists.js</b> : フォローしているListsのうち、指定されたものをタブとして表示します。詳しくは<a href="http://d.hatena.ne.jp/NeoCat/20091101/1257088158">こちら</a>。
92<li><b>outputz.js</b> : 発言した文字数を<a href="http://outputz.com/">Outputz</a>に送信します。
93<li><b>search.js</b> : <a href="http://search.twitter.com/">Twitter Search</a>でのキーワード検索を「+」タブに追加します。
94<li><b>search2.js</b> : <a href="http://pcod.no-ip.org/yats/">twitter検索</a>での検索機能を「+」タブに追加します。
95<li><b>favotter.js</b> : <a href="http://favotter.matope.com/">ふぁぼったー</a>の最新2000件のふぁぼられ数を<span style="background-color:#6fc; color:#00c;">[fav:3]</span>のようにTLやユーザの発言に追加表示します。
96<li><b>followers.js</b> : follower以外<small> (いわゆる片想い) </small>の発言を青色で表示します。「+」タブのColor Followers→Renewボタンを押して最新のfollower一覧を取得する必要があります(デフォルトは無効)。
97<li><b>sound.js</b> <span style="font-size: small; color: red">[非標準]</span> : TLやReplyの新着時にサウンドを鳴らします。デフォルトでは入っていませんので、使用するにはPreferences＞Pluginsの先頭あたりに追加してください。
98<li><b>resolve_url.js</b> : タイムライン上の短縮URLを短縮前のURLに変換します。(created by <a href="http://twitter.com/edvakf">@edvakf</a>)
99<li><b>shorten_url.js</b> : 発言欄で、URLの後に ;;; と打ち込むとURLを短縮します。もう一度打ち込むと元に戻ります。(created by <a href="http://twitter.com/edvakf">@edvakf</a>)
100</ul>
101
102<h2>FAQ</h2>
103<ul>
104<li><b>NGワード（指定語句を含む発言を隠す）機能はないの?</b><blockquote> →抽出プラグインでできます。(下記リンク参照)</blockquote></li>
105<li><b>たまにポストに失敗するみたいなんだけど…</b><blockquote> → Twitterの過負荷で鯨が出ているのかもしれません。「r」とだけ書いてポストすると、一つ前の発言を再送できます。</blockquote></li>
106<li><b>見た目がしょぼいんだけど…</b><blockquote> → 表示できる情報量を増やすため詰め込みぎみなのと、NeoCatの怠慢です…。twicli用のuser stylesheetを公開して下さっている方がいらっしゃるので、参考にしてみてください。改善案もお待ちしてます。</blockquote></li>
107</ul>
108
109<h2>ソース</h2>
110開発は<a href="http://coderepos.org/share/browser/websites/twicli/">CodeRepos</a>上で行っています。パッチや勝手にコミット大歓迎です。なお、ライセンスは<a href="LICENSE.txt">MITライセンス</a>です。開発途上なので随時アップデートしていきます。
111<p><a href="http://coderepos.org/share/browser/websites/twicli/twicli.html">twicli.html</a>が本体(HTML+CSS+JavaScript)。他にプラグイン、画像ファイルが要ります。</p>
112<p>不具合／要望などは<a href="http://twitter.com/NeoCat">@NeoCat</a>にreplyして頂くと対応するかもしれません。</p>
113
114<h2>リンク</h2>
115<ul>
116<li><a href="http://d.hatena.ne.jp/NeoCat/20080819/1219133294">開発メモ</a>
117<script type="text/javascript">hatena_bookmark("http://d.hatena.ne.jp/NeoCat/20080819/1219133294");</script></li>
118<li><a href="http://d.hatena.ne.jp/NeoCat/20080904/1220482528">プラグイン開発メモ</a>
119<script type="text/javascript">hatena_bookmark("http://d.hatena.ne.jp/NeoCat/20080904/1220482528");</script></li>
120<li><a href="http://d.hatena.ne.jp/NeoCat/20081121/1227282584">Outputzプラグインについて</a>
121<script type="text/javascript">hatena_bookmark("http://d.hatena.ne.jp/NeoCat/20081121/1227282584");</script></li>
122<li><a href="http://d.hatena.ne.jp/NeoCat/20090101/1230838882">抽出プラグインについて(1/2)</a>
123<script type="text/javascript">hatena_bookmark("http://d.hatena.ne.jp/NeoCat/20090101/1230838882");</script></li>
124<li><a href="http://d.hatena.ne.jp/NeoCat/20090101/1230913660">抽出プラグインについて(2/2)</a>
125<script type="text/javascript">hatena_bookmark("http://d.hatena.ne.jp/NeoCat/20090101/1230913660");</script></li>
126<li><a href="http://d.hatena.ne.jp/NeoCat/20090824/1251125679">soundプラグインについて</a>
127<script type="text/javascript">hatena_bookmark("http://d.hatena.ne.jp/NeoCat/20090824/1251125679");</script></li>
128<li><a href="http://d.hatena.ne.jp/NeoCat/20091101/1257088158">listsプラグインについて</a>
129<script type="text/javascript">hatena_bookmark("http://d.hatena.ne.jp/NeoCat/20091101/1257088158");</script></li>
130</ul>
131
132<h2>作ってる人</h2>
133<a href="http://twitter.com/NeoCat">@NeoCat</a>
134
135</div>
136</body>
137</html>
Note: See TracBrowser for help on using the browser.