Skip to content

Commit b7d4866

Browse files
xtetsujixtetsuji
committed
Twitter 文字数カウントの別バージョン (tweet-count2.html) を追加
tweet-count.html にダークモードなど色々機能を追加。 このあとも管理機能を追加予定。
1 parent b4daebe commit b7d4866

File tree

1 file changed

+139
-0
lines changed

1 file changed

+139
-0
lines changed

‎tweet-count2.html

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta name="robots" content="noindex,nofollow" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
6+
7+
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
8+
<title>文字数カウント</title>
9+
<style type="text/css">
10+
@media (prefers-color-scheme: dark) {
11+
body {
12+
background-color: #000;
13+
color: #bbb;
14+
}
15+
textarea, button, input[type="text"], input[type="button"] {
16+
color: #bbb;
17+
background-color: #222;
18+
}
19+
}
20+
h1 { font-size: 1.5em; }
21+
strong { color: darkgray; font-weight: bold; font-size: 18pt; }
22+
input.tweet { font-size: 14pt; }
23+
textarea#twitter_draft_counter {
24+
font-size: 14pt;
25+
width: 100%;
26+
height: 5em;
27+
overflow: visible;
28+
}
29+
</style>
30+
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
31+
<script type="text/javascript">
32+
const lazy_hash = {
33+
string: "",
34+
interval: 30_000,
35+
last_queued_at: 0,
36+
queue(string) {
37+
this.string = string;
38+
// 直近 ms 以内に書き込みがあれば書き込みジョブがあるので何もしない
39+
// 直近 ms 以内に書き込みがなければジョブを作成
40+
const now_time = (new Date()).getTime();
41+
if (now_time - this.last_queued_at > this.interval ) {
42+
this.last_queued_at = now_time;
43+
this.jobid = setTimeout(()=>{
44+
const escaped = "#" + encodeURIComponent(this.string);
45+
if ( location.hash !== escaped ) {
46+
location.hash = escaped;
47+
// console.log(`DEBUG: udpate hash: "${this.string}"`);
48+
} else {
49+
// console.log(`DEBUG: relax hash: because same things`);
50+
}
51+
}, this.interval);
52+
// console.log(`DEBUG: queue "${this.string}"`);
53+
} else {
54+
// console.log(`DEBUG: not queue`);
55+
}
56+
},
57+
clear() {
58+
clearTimeout(this.jobid);
59+
}
60+
};
61+
$(document).ready(function(){
62+
//var count = 1;
63+
var hash_text = location.hash.substring(1);
64+
if ( hash_text ) {
65+
$("#twitter_draft_counter").text(decodeURIComponent(hash_text));
66+
}
67+
$("#twitter_draft_counter").keyup(function(){
68+
var tweet = this.value;
69+
if($("#tco_shorten")[0].checked) {
70+
// ティコリンクに短縮されたものとして計算する
71+
tweet = tweet.replace(/\bhttp:\/\/[^ ]+/g, "http://t.co/1234567890");
72+
tweet = tweet.replace(/\bhttps:\/\/[^ ]+/g, "https://t.co/1234567890");
73+
}
74+
if($("#twitpic_append")[0].checked) {
75+
//tweet = tweet + " http://twitpic.com/123456";
76+
tweet = tweet + " http://t.co/1234567890"; // やっぱりティコリンク
77+
}
78+
// location.hash = "#" + encodeURIComponent(tweet);
79+
lazy_hash.queue(tweet);
80+
document.title =
81+
"ツイート文字数カウント：" + tweet.substring(0, 20).replace(/\n/g, " ") + (
82+
tweet.length > 20 ? "…" : ""
83+
);
84+
let char = tweet.length;
85+
let bytes = encodeURIComponent(tweet).replace(/%\w\w/g,'?').length;
86+
let info_html = '<strong>'+(140-char)+'</strong> (';
87+
info_html += char+'文字、'+bytes+'バイト)<br />';
88+
info_html += 'Twistory的には、残り<strong>'+(255-bytes)+'</strong>バイト、UTF-8文字列では残り約<strong>'+(Math.floor((255-bytes)/3))+'</strong>文字は打てるでしょう。';
89+
$("#twitter_draft_info").html(info_html);
90+
});
91+
$("#twitter_draft_counter").keyup(); /* 一度押しておく */
92+
93+
$("#tco_shorten").click(function(){
94+
$("#twitter_draft_counter").keyup();
95+
});
96+
$("#twitpic_append").click(function(){
97+
$("#twitter_draft_counter").keyup();
98+
});
99+
100+
$("#reset_twitter_draft_counter").click(function(){
101+
if(confirm("内容をリセットしますか？")){
102+
$("#twitter_draft_counter").val("");
103+
$("#twitter_draft_counter").keyup();
104+
}
105+
});
106+
$("#open_twitter_client").click(function(){
107+
var screen_name = $("#screen_name").val(); // or .text() ?
108+
if(!screen_name)screen_name="";
109+
// if(confirm("Tweetbotを起動します")){
110+
location.href = "tweetbot://"+screen_name+"/post?text="+encodeURIComponent($("#twitter_draft_counter").val());
111+
// }
112+
});
113+
});
114+
</script>
115+
116+
</head>
117+
<body>
118+
119+
<h1>文字数カウント</h1>
120+
121+
<!--
122+
id="twitter_draft_counter1" を作っておいて、これを複製すると良さそう
123+
この id の中の要素は id ではなくて class 指定にして複製について問題なくしておく
124+
-->
125+
<div class="word_count" id="twitter_draft_counter1">
126+
<textarea id="twitter_draft_counter"></textarea>
127+
<br />
128+
<div style="display: none"><!-- 暫定で見せない -->
129+
<label><input type="checkbox" id="tco_shorten" checked="checked">t.coリンクで短縮された場合の文字数を計算</label><br />
130+
<label><input type="checkbox" id="twitpic_append">twitpicのアドレスが一つついた場合の文字数を計算</label><br />
131+
</div>
132+
<div id="twitter_draft_info"></div>
133+
<button id="open_twitter_client">Tweetbotでオープン</button>
134+
(<label>screen_name: <input type="text" id="screen_name" value="" /></label>)<br />
135+
<input type="button" id="reset_twitter_draft_counter" value="リセット" />
136+
</div>
137+
138+
</body>
139+
</html>

0 commit comments

Comments
 (0)