forked from NeoCat/twicli
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex_en.html
141 lines (131 loc) · 9.85 KB
/
index_en.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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<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 is a web browser-based Twitter client. No need for installation. Automatically fetches timeline, and show with cool animation.">
<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>
</head>
<body>
<a class="language_selection" href="index.html">Japanese</a>
<div class="whole">
<h1><a name="twicli"><img alt="twicli" src="images/icon_large.png" width="48" height="48"> twicli</a></h1>
<table><tr><td>
<p>
twicli is a browser-based Twitter client.
<ul>
<li>No need for installation. All you need is a Web browser.
<li>Automatically fetches timeline, and show with cool animation.
<li>Use cross domain JavaScript to access Twitter directly (no server needed), so your password is sent to Twitter only.
</ul>
<p>
Useful when you are in an Internet cafe, doing something else while viewing Twitter timeline.<br>
Works on Firefox, Safari, Opera, IE8 at the moment, as well as
Safari on iPhone/iPod touch<br>
Works on IE7 too, but some parts aren't displayed properly.<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')" 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')">Launch twicli</a></div>
</td><td>
<img alt="screenshot" width="331" height="478" src="usage/usage1.png" align="right">
</td></tr></table>
<h2><a name="usage">Usage</a></h2>
<h3><a name="launch">Launch</a></h3>
Just click the link above, or run it as a bookmarklet.<br>
When you get asked for authorization, please follow the instruction on each page.<br><br>
Be careful not to hit <b>API request limit (350 requests per hour)</b> by clicking too much. :-P
</p>
<h3><a name="howto">How to Use</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.en.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,620][i];
usage.height = [480,480,480,710][i];
usage.src = "usage/usage"+(i+2)+".en.png";
}
</script>
<img alt="usage" src="usage/usage2.en.png" width="1" height="1">
<img alt="usage" src="usage/usage3.en.png" width="1" height="1">
<img alt="usage" src="usage/usage4.en.png" width="1" height="1">
<img alt="usage" src="usage/usage5.en.png" width="1" height="1">
<h2><a name="faq">FAQ</a></h2>
<ul>
<li><b>How to hide tweet which contains specified kerwords?</b><blockquote> => Write "-::keyword:1" into "Pickup Pattern" in the "+" tab.</blockquote></li>
<li><b>My tweets are sometimes lost ...</b><blockquote> => Twitter may be too crowded. Try writing just "r" and hit enter to re-post your previous tweet.</blockquote></li>
<li><b>Appearance is poor ...</b><blockquote> => Default appearance isn't decorated at all to display many tweets at once. You can customize twicli's appearance using CSS. Please refer <a href="#customize">"Customize" section</a> below.</blockquote></li>
<li><b>Too much API usage when I tweet frequently ...</b><blockquote> => Disable "Update after post" in "Preferences" in "+" tab to suppress automatic update after tweet is posted.</blockquote></li>
<li>You can find more information in <a href="http://github.com/NeoCat/twicli/wiki">twicli wiki</a>.</li>
</ul>
<h2><a name="customize">Customize</a></h2>
There are also some information about customizing twicli in <a href="http://github.com/NeoCat/twicli/wiki">twicli wiki</a>.
<h3><a name="css">User Stylesheet</a></h3>
You can add your own CSS in "user stylesheet" section of the "+" tab. For example;
<ul>
<li>to apply corner-rounded and shadowed appearance : <tt> @import url(styles/round.css); </tt>
<li>to hide user icons : <tt> .uicon { display: none; } </tt>
<li>wider lines : <tt> .status { line-height: 1.5; } </tt>
</ul>
There are some guys publishing more stylesheets for twicli (=><a href="https://github.com/NeoCat/twicli/wiki/User-stylesheet">twicli wiki</a>).
<h3><a name="plugins">Plugins</a></h3>
You can register plugins by setting them at the "Preferences" in the "+" tab.<br>
Currently, there are plugins below:
<ul>
<li><b>regexp.js</b> : Add a tab that extracts timeline that has specific keywords, ID, etc. <a href="http://d.hatena.ne.jp/NeoCat/20090101">Detail(in Japanese)</a>
<li><b>lists.js</b> : Add a tab that shows lists you following. Specify the name of lists to make tab in "+" tab.
<li><b>outputz.js</b> : Count how many letters you tweet, and send it to <a href="http://outputz.com/">Outputz</a>.
<li><b>search.js</b> : Add keyword search by <a href="http://search.twitter.com/">Twitter Search</a> to the "+" tab.
<li><b>search2.js</b> : Add keyword search by <a href="http://pcod.no-ip.org/yats/">twitter search(yats)</a> to the "+" tab.
<li><b>favotter.js</b> : Indicate latest popular favorited tweets like <span style="background-color:#6fc; color:#00c;">[fav:3]</span>. Thanks to <a href="http://favotter.matope.com/">Favotter</a>.
<li><b>followers.js</b> : Colorize tweets of users that you don't follow in blue. To use this, you need to fetch the list of followers by clicking the "Renew" button at the "Color followers" section.
<li><b>ssl.js</b> : Use SSL to get timeline and to tweet.
<li><b>translate.js</b> : Choose "translate" from ▼, then the tweet is translated into the language specified in "+" tab > Translate. (Specify "en" for English.)
<li><b>thumbnail.js</b> : Add thumbnails to the URL of some photo sharing services. Currently supports <a href="http://twitpic.com/">twitpic</a>, <a href="http://movapic.com/">movapic</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>, and <a href="http://instagr.am/">Instagram</a>.
<li><b>resolve_url.js</b> : Replace short URLs with the originals in the timeline. (created by <a href="http://twitter.com/edvakf">@edvakf</a>)
<li><b>shorten_url.js</b> : Typing a URL in the text area followed by three semicolons (;;;) makes a shortened URL. (created by <a href="http://twitter.com/edvakf">@edvakf</a>)
<li><b>geomap.js</b> : Display inline Google Map by clicking the marker (<img src="images/marker.png">) of tweets with GeoLocation.
<li><b>tweet_url_reply.js</b> <small>[non-default]</small>: Add a button (<img src="images/inrep.png">) to get the content to URL of a tweet. (created by <a href="http://twitter.com/edvakf">@edvakf</a>)
<li><b>reply_favicon.js</b> <small>[non-default]</small>: Change favicon(not supported by IE and Safari) and the title when 'Re' is updated. (created by <a href="http://twitter.com/edvakf">@edvakf</a>)
<li><b>sound.js</b> <small>[non-default]</small>: Play sound when 'TL'/'Re' is updated.
<li><b>insert_hashtag.js</b> <small>[non-default]</small>: Append the hashtag to your tweets automatically while a tab for the hashtag is opened. (created by <a href="http://twitter.com/_wa_">@_wa_</a>)
<li><b>shortcutkey.js</b> <small>[non-default]</small>: Enable operation by shortcut keys. (-><a href="https://github.com/NeoCat/twicli/wiki/Shortcutkeys">List of the shortcut keys</a>)
<li><b>multi_account.js</b> <small>[non-default]</small>: Switch between multiple accounts in '+' tab. Useful with tabbed browsers.
</ul>
<h2><a name="source">Source</a></h2>
"twicli" is developed at <a href="http://coderepos.org/share/browser/websites/twicli/">CodeRepos</a> and <a href="http://github.com/NeoCat/twicli/">github</a> under <a href="LICENSE.txt">MIT license</a>.
<p>Please report any bugs/wishes to <a href="http://twitter.com/NeoCat">@NeoCat</a>. Your patches are also appreciated.</p>
<h2><a name="link">Links <small><small>(all in Japanese)</small></small></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">Development Memo</a>
<li><a href="http://d.hatena.ne.jp/NeoCat/20080819/1219133294">About development of Plugins</a>
<li><a href="http://d.hatena.ne.jp/NeoCat/20081121/1227282584">About Outputz plugin</a>
<li><a href="http://d.hatena.ne.jp/NeoCat/20090101/1230838882">About Regexp plugin(1)</a>
<li><a href="http://d.hatena.ne.jp/NeoCat/20090101/1230913660">About Regexp plugin(2)</a>
<li><a href="http://d.hatena.ne.jp/NeoCat/20110119/1295391840">About Regexp plugin(3)</a>
<li><a href="http://d.hatena.ne.jp/NeoCat/20090824/1251125679">About Sound plugin</a>
<li><a href="http://d.hatena.ne.jp/NeoCat/20091101/1257088158">About Lists plugin</a>
<li><a href="http://d.hatena.ne.jp/NeoCat/20100722/1279741190">About Geomap plugin</a>
</ul>
<h2><a name="author">Author</a></h2>
<a href="http://twitter.com/NeoCat">@NeoCat</a>
</div>
</body>
</html>