root/websites/twicli/index_en.html @ 38609

Revision 38609, 9.7 kB (checked in by NeoCat, 4 years ago)

Add descriptions about insert_hashtag.js plugin.

  • 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 lang="en">
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 is a web browser-based Twitter client. No need for installation. Automatically fetches timeline, and show with cool animation.">
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</head>
22<body>
23<a class="language_selection" href="index.html">Japanese</a>
24<div class="whole">
25<h1><a name="twicli"><img alt="twicli" src="images/icon_large.png" width="48" height="48"> twicli</a></h1>
26<a href="http://delicious.com/save" onclick="window.open('http://delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;"><img src="http://static.delicious.com/img/delicious.small.gif" height="12" width="12" alt="Delicious"> Bookmark this on Delicious</a>
27<table><tr><td>
28<p>
29twicli is a browser-based Twitter client.
30<ul>
31<li>No need for installation. All you need is a Web browser.
32<li>Automatically fetches timeline, and show with cool animation.
33<li>Use cross domain JavaScript to access Twitter directly (no server needed), so your password is sent to Twitter only.
34</ul>
35
36<p>
37Useful when you are in an Internet cafe, doing something else while viewing Twitter timeline.<br>
38Works on Firefox, Safari, Opera, IE8 at the moment, as well as
39Safari on iPhone/iPod touch<br>
40Works on IE7 too, but some parts aren't displayed properly.<br>
41<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>
42</td><td>
43<img alt="screenshot" width="331" height="478" src="usage/usage1.png" align="right">
44</td></tr></table>
45
46<h2><a name="usage">Usage</a></h2>
47<h3><a name="launch">Launch</a></h3>
48Just click the link above, or run it as a bookmarklet.<br>
49When you get asked for authorization, please follow the instruction on each page.<br><br>
50Be careful not to hit <b>API request limit (350 requests per hour)</b> by clicking too much. :-P
51</p>
52
53<h3><a name="howto">How to Use</a></h3>
54<table width="100%"><tr>
55<td width="40"><img alt="prev" onClick="go(-1)" src="images/left.png" class="button"></td>
56<td align="center"><img alt="usage" id="usage" width="600" height="480" src="usage/usage2.en.png"></td>
57<td width="40"><img alt="next" onClick="go(1)" src="images/right.png" class="button"></td>
58</tr></table>
59<script type="text/javascript">
60var i = 0;
61function go(d) {
62        i = (i + d + 4) % 4;
63        var usage = document.getElementById("usage");
64        usage.width = [600,600,480,620][i];
65        usage.height = [480,480,480,710][i];
66        usage.src = "usage/usage"+(i+2)+".en.png";
67}
68</script>
69<img alt="usage" src="usage/usage2.en.png" width="1" height="1">
70<img alt="usage" src="usage/usage3.en.png" width="1" height="1">
71<img alt="usage" src="usage/usage4.en.png" width="1" height="1">
72<img alt="usage" src="usage/usage5.en.png" width="1" height="1">
73
74<h2><a name="faq">FAQ</a></h2>
75<ul>
76<li><b>How to hide tweet which contains specified kerwords?</b><blockquote> => Write "-::keyword:1" into "Pickup Pattern" in the "+" tab.</blockquote></li>
77<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>
78<li><b>Appearance is poor ...</b><blockquote> => Default appearance isn't decorated at all to display many tweets at once. Try adding CSS below to 'user stylesheet' in Preferences in '+' tab for corner-rounded and shadowed tweets display.
79<pre>@import url(styles/round.css);</pre>
80There are some guys publishing more stylesheets for twicli. Your proposal is also appreciated. :-)</blockquote></li>
81<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>
82<li>You can find more information in <a href="http://github.com/NeoCat/twicli/wiki">twicli wiki</a>.</li>
83</ul>
84
85<h2><a name="customize">Customize</a></h2>
86There are also some information about customizing twicli in <a href="http://github.com/NeoCat/twicli/wiki">twicli wiki</a>.
87<h3><a name="css">User Stylesheet</a></h3>
88You can add your own CSS in "user stylesheet" section of the "+" tab. For example;
89<ul>
90<li>to hide user icons : <tt> .uicon { display: none; } </tt>
91<li>wider lines : <tt> .status { line-height: 1.5; } </tt>
92</ul>
93
94<h3><a name="plugins">Plugins</a></h3>
95You can register plugins by setting them at the "Preferences" in the "+" tab.<br>
96Currently, there are plugins below:
97<ul>
98<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>
99<li><b>lists.js</b> : Add a tab that shows lists you following. Specify the name of lists to make tab in "+" tab.
100<li><b>outputz.js</b> : Count how many letters you tweet, and send it to <a href="http://outputz.com/">Outputz</a>.
101<li><b>search.js</b> : Add keyword search by <a href="http://search.twitter.com/">Twitter Search</a> to the "+" tab.
102<li><b>search2.js</b> : Add keyword search by <a href="http://pcod.no-ip.org/yats/">twitter search(yats)</a> to the "+" tab.
103<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>.
104<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.
105<li><b>ssl.js</b> : Use SSL to get timeline and to tweet.
106<li><b>translate.js</b> : Choose "translate" from ▼, then the tweet is translated into the language specified in "+" tab > Translate. (Specify "en" for English.)
107<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>, and <a href="http://www.flickr.com/">Flickr</a>.
108<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>)
109<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>)
110<li><b>geomap.js</b> : Display inline Google Map by clicking the marker (<img src="images/marker.png">) of tweets with GeoLocation.
111<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>)
112<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>)
113<li><b>sound.js</b> <small>[non-default]</small>: Play sound when 'TL'/'Re' is updated.
114<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.
115</ul>
116
117<h2><a name="source">Source</a></h2>
118"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>.
119<p><a href="http://coderepos.org/share/browser/websites/twicli/twicli.html">twicli.html</a> is the main file (HTML+CSS+JavaScript), others are plugins and images.</p>
120<p>Please report any bugs/wishes to <a href="http://twitter.com/NeoCat">@NeoCat</a>.</p>
121
122<h2><a name="link">Links <small><small>(all in Japanese)</small></small></a></h2>
123<ul>
124<li><a href="http://github.com/NeoCat/twicli/wiki">twicli wiki</a>
125<li><a href="http://d.hatena.ne.jp/NeoCat/20080819/1219133294">Development Memo</a>
126<li><a href="http://d.hatena.ne.jp/NeoCat/20080819/1219133294">About development of Plugins</a>
127<li><a href="http://d.hatena.ne.jp/NeoCat/20081121/1227282584">About Outputz plugin</a>
128<li><a href="http://d.hatena.ne.jp/NeoCat/20090101/1230838882">About Regexp plugin(1/2)</a>
129<li><a href="http://d.hatena.ne.jp/NeoCat/20090101/1230913660">About Regexp plugin(2/2)</a>
130<li><a href="http://d.hatena.ne.jp/NeoCat/20090824/1251125679">About Sound plugin</a>
131<li><a href="http://d.hatena.ne.jp/NeoCat/20091101/1257088158">About Lists plugin</a>
132<li><a href="http://d.hatena.ne.jp/NeoCat/20100722/1279741190">About Geomap plugin</a>
133</ul>
134
135<h2><a name="author">Author</a></h2>
136<a href="http://twitter.com/NeoCat">@NeoCat</a>
137
138</div>
139</body>
140</html>
Note: See TracBrowser for help on using the browser.