root/websites/twicli/index.html @ 38810

Revision 38810, 14.4 kB (checked in by NeoCat, 2 years ago)

thumbnail.js: Support ow.ly

  • 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にアクセスします。パスワード等がTwitter以外に送信されることはありません。
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>NGワード（指定語句を含むtweetを隠す）機能はないの?</b><blockquote> →抽出プラグインでできます。(<a href="#link">下記リンク</a>参照)</blockquote></li>
84<li><b>Enterで送信だと誤爆が増える…</b><blockquote> → 「+」タブの設定で「ctrl+enter/shift+enterで発言」を有効にして「保存」することで、enterキーのみでは発言しないようにできます。</blockquote></li>
85<li><b>たまにtweetに失敗するみたいなんだけど…</b><blockquote> → Twitterの過負荷で鯨が出ているのかもしれません。「r」とだけ書いてEnterキーを押すと、一つ前のtweetを再送できます。</blockquote></li>
86<li><b>見た目がしょぼいんだけど…</b><blockquote> → 標準では表示できる情報量を増やすため詰め込みぎみです。
87twicliはCSSを使って見た目を好みに合わせてカスタマイズ可能です。詳しくは下記の「<a href="#customize">カスタマイズ</a>」を参考にして下さい。</blockquote></li>
88<li><b>tweet数が多いときにAPI制限に引っかかる</b><blockquote> →「+」タブの設定で「発言後に自動更新」の設定を解除して「保存」すると、発言後のTL更新を抑止してAPI使用回数を少なくできます。</blockquote></li>
89<li><a href="http://github.com/NeoCat/twicli/wiki">twicli wiki</a>も参考にして下さい。</li>
90</ul>
91
92<h2><a name="customize">カスタマイズ</a></h2>
93<a href="http://github.com/NeoCat/twicli/wiki">twicli wiki</a>にもカスタマイズに関する情報があります。
94<h3><a name="css">ユーザースタイルシートについて</a></h3>
95「+」タブの設定→「ユーザースタイルシート」にCSSを記述して、見た目のカスタマイズが可能です。例えば：
96<ul>
97<li>角丸／影付きの外観に変更 → <tt> @import url(styles/round.css); </tt>
98<li>ユーザのアイコンを消す → <tt> .uicon { display: none; } </tt>
99<li>tweetの行間を広げる　　 → <tt> .status { line-height: 1.5; } </tt>
100</ul>
101他にもtwicli用のユーザースタイルシートを公開して下さっている方がいらっしゃるので、参考にしてみてください(→<a href="https://github.com/NeoCat/twicli/wiki/User-stylesheet">参考</a>)。
102
103<h3><a name="plugins">プラグインについて</a></h3>
104「+」タブの設定でプラグイン(JavaScript)を登録することにより、機能拡張ができます。<br>
105以下のプラグインがあります。
106<ul>
107<li><b>regexp.js</b> : 特定のIDやキーワードを含むtweetを抽出するタブを追加します。詳しくは<a href="http://d.hatena.ne.jp/NeoCat/20090101">こちら</a>。
108<li><b>lists.js</b> : フォローしているリストのうち、指定されたものをタブとして表示します。詳しくは<a href="http://d.hatena.ne.jp/NeoCat/20091101/1257088158">こちら</a>。
109<li><b>outputz.js</b> : tweetした文字数を<a href="http://outputz.com/">Outputz</a>に送信します。
110<li><b>search.js</b> : <a href="http://search.twitter.com/">Twitter Search</a>でのキーワード検索を「+」タブに追加します。
111<li><b>search2.js</b> : <a href="http://pcod.no-ip.org/yats/">twitter検索</a>での検索機能を「+」タブに追加します。
112<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に追加表示します。
113<li><b>followers.js</b> : follower以外<small> (いわゆる片想い) </small>のtweetを青色で表示します。「+」タブの「フォロワーを色付け」の「Renew」ボタンを押して、定期的に最新のfollower一覧を取得する必要があります(デフォルトは無効)。
114<li><b>ssl.js</b> : TL取得やtweet時にSSLで通信を暗号化します。
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>に対応しています。
117<li><b>resolve_url.js</b> : タイムライン上の短縮URLを短縮前のURLに展開します。(created by <a href="http://twitter.com/edvakf">@edvakf</a>)
118<li><b>shorten_url.js</b> : 発言欄で、URLの後に ;;; と打ち込むとURLを短縮します。もう一度打ち込むと元に戻ります。(created by <a href="http://twitter.com/edvakf">@edvakf</a>)
119<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>。
120<li><b>tweet_url_reply.js</b> <span style="font-size: small; color: red">[非標準]</span> : tweetへのリンクURLに内容を取得するボタン(<img src="images/inrep.png">)を追加します。(created by <a href="http://twitter.com/edvakf">@edvakf</a>)
121<li><b>reply_favicon.js</b> <span style="font-size: small; color: red">[非標準]</span> : Re新着時にfavicon(IE,Safari以外)とタイトルを変更します。(created by <a href="http://twitter.com/edvakf">@edvakf</a>)
122<li><b>sound.js</b> <span style="font-size: small; color: red">[非標準]</span> : TLやReの新着時にサウンドを鳴らします。
123<li><b>insert_hashtag.js</b> <span style="font-size: small; color: red">[非標準]</span> : ハッシュタグ(#〜)のタブを開いた状態でtweetすると、末尾にそのハッシュタグを自動追加します。(created by <a href="http://twitter.com/_wa_">@_wa_</a>)
124<li><b>shortcutkey.js</b> <span style="font-size: small; color: red">[非標準]</span> : キーボードショートカットで操作できるようにします(→<a href="https://github.com/NeoCat/twicli/wiki/Shortcutkeys">ショートカットキー一覧</a>)。
125<li><b>multi_account.js</b> <span style="font-size: small; color: red">[非標準]</span> : 複数のアカウントを"+"タブで切り替えられるようにします。タブブラウザと組み合わせれば複数のアカウントを同時利用できます。
126</ul>
127
128<h2><a name="source">ソース</a></h2>
129開発は<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>です。開発途上なので随時アップデートしていきます。
130<p>不具合／要望などは<a href="http://twitter.com/NeoCat">@NeoCat</a>にreplyして頂くと対応するかもしれません。#twicliJP ハッシュタグでつぶやいてもらってもOKです。</p>
131
132<h2><a name="link">リンク</a></h2>
133<ul>
134<li><a href="http://github.com/NeoCat/twicli/wiki">twicli wiki</a>
135<li><a href="http://d.hatena.ne.jp/NeoCat/20080819/1219133294">開発メモ</a>
136<script type="text/javascript">hatena_bookmark("http://d.hatena.ne.jp/NeoCat/20080819/1219133294");</script></li>
137<li><a href="http://d.hatena.ne.jp/NeoCat/20080904/1220482528">プラグイン開発メモ</a>
138<script type="text/javascript">hatena_bookmark("http://d.hatena.ne.jp/NeoCat/20080904/1220482528");</script></li>
139<li><a href="http://d.hatena.ne.jp/NeoCat/20081121/1227282584">Outputzプラグインについて</a>
140<script type="text/javascript">hatena_bookmark("http://d.hatena.ne.jp/NeoCat/20081121/1227282584");</script></li>
141<li><a href="http://d.hatena.ne.jp/NeoCat/20090101/1230838882">抽出プラグインについて(1)</a>
142<script type="text/javascript">hatena_bookmark("http://d.hatena.ne.jp/NeoCat/20090101/1230838882");</script></li>
143<li><a href="http://d.hatena.ne.jp/NeoCat/20090101/1230913660">抽出プラグインについて(2)</a>
144<script type="text/javascript">hatena_bookmark("http://d.hatena.ne.jp/NeoCat/20090101/1230913660");</script></li>
145<li><a href="http://d.hatena.ne.jp/NeoCat/20110119/1295391840">抽出プラグインについて(3)</a>
146<script type="text/javascript">hatena_bookmark("http://d.hatena.ne.jp/NeoCat/20110119/1295391840");</script></li>
147<li><a href="http://d.hatena.ne.jp/NeoCat/20090824/1251125679">soundプラグインについて</a>
148<script type="text/javascript">hatena_bookmark("http://d.hatena.ne.jp/NeoCat/20090824/1251125679");</script></li>
149<li><a href="http://d.hatena.ne.jp/NeoCat/20091101/1257088158">listsプラグインについて</a>
150<script type="text/javascript">hatena_bookmark("http://d.hatena.ne.jp/NeoCat/20091101/1257088158");</script></li>
151<li><a href="http://d.hatena.ne.jp/NeoCat/20100722/1279741190">geomapプラグインについて</a>
152<script type="text/javascript">hatena_bookmark("http://d.hatena.ne.jp/NeoCat/20100722/1279741190");</script></li>
153</ul>
154
155<h2><a name="author">作ってる人</a></h2>
156<a href="http://twitter.com/NeoCat">@NeoCat</a>
157
158</div>
159</body>
160</html>
Note: See TracBrowser for help on using the browser.