[jQuery]餡小話softalk読み上げちょっと効率化

2017.12.14

ゆ虐はゆっくりボイスで読み上げるのを聴くといい塩梅のBGMになる。
wikiのまとめを読み（聞き）尽くしたので大元を漁ることにした。
でも餡庫はコピー対策頑張ってるから選択も右クリックもできない。
ぶっこ抜くのがすごくめんどくさい。

20190906追記

バージョンアップしたので。
機能的に要るのか？って気持ちもあるけど、リンクを「https://」で統一してSSLに対応。

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.3/clipboard.min.js"></script>
<script src="scripts.js"></script>
<div class="formset">
<ul>
 	<li><textarea name="text" id="before" placeholder="原文"></textarea></li>
 	<li>
<ul class="btnset">
 	<li><span class="generate">エンコ</span></li>
 	<li><span class="copy" data-clipboard-target="#after">コピー</span></li>
 	<li><span class="clear">クリア</span></li>
</ul>
</li>
 	<li><textarea name="text" id="after" placeholder="結果"></textarea></li>
</ul>
</div>

「クリア」したときに「原文」にフォーカスさせて手間を一つ減らした。

$(function(){
"use strict";
//clipboard.js
var clipboard = new Clipboard('.copy');

$('.generate').on('click',function(){
var beforeTxt = $('#before').val();
beforeTxt = beforeTxt.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,'');
$('#after').val(beforeTxt);
});
$('.clear').on('click',function(){
$('#before').val('');
$('#before').focus();
});
});

しばらくぶりにアクセスしたら、餡庫自体に読み上げ機能が追加されてた。
ブラウザ依存の機能みたいだけどブラウザにより安定しないらしい。
chromeだと読み上げがたまに止まる。

そもそものコピー対策（≒セキュリティ？）について

餡庫は選択も右クリックも効かないし、
ソースを見てもテキストデータは表示されない。
閉鎖的にやりたいとか、アフィブログ対策だとか、多分そういう狙いなんだと思う。
ちょっと前までなら書き写す以外打つ手が無いんじゃないのみたいな堅牢さが個人サイトブームだった頃、たまにこういうサイトあったなぁってのを思い出していい感じ。

やりたいこと

餡小話本文をコピーしてsoftalkにペーストして再生したい。

上記の通りめんどくっさい事になってるけれど、
最近のブラウザについてる、Chromeでいう「検証」があれば表示してる状態のソース（＝テキストデータ）を閲覧できる。
んでこのエリアはコピーができる。
だから、ここを切り口にするとこんな感じでアレすることができる。

  1. 検証からテキストデータ部分をコピーする
  2. テキストエディタに貼り付けて、「oncopy=”return false;”」「oncontextmenu=”return false;”」とかの邪魔くさいのを削除
  3. HTMLファイルとして保存
  4. WEBブラウザで開く
  5. コピーしてsoftalkにペースト

「検証」から引っこ抜いたものは改行タグとか、ものによってはリンクもついてたりするからそのまま使えない。
いちいち置換するのもめんどくさいからhtmlとして保存、閲覧をかませてタグを除去している。

こんなこと毎度やってるとまあめんどくさいったらないので、
この程度なら作業の片手間って我慢できるくらいの手間に抑える方法を考えた。
js（jQuery）で簡略化できないかって思って調べた。

こんな感じにした

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.3/clipboard.min.js"></script>
<script src="scripts.js"></script>
<div class="formset">
<ul>
 	<li><textarea name="text" id="before" placeholder="原文"></textarea></li>
 	<li>
<ul class="btnset">
 	<li><span class="generate">エンコ</span></li>
 	<li><span class="copy" data-clipboard-target="#after">コピー</span></li>
 	<li><span class="clear">クリア</span></li>
</ul>
</li>
 	<li><textarea name="text" id="after" placeholder="結果"></textarea></li>
</ul>
</div>

上から

  • 加工前のテキストデータを突っ込むtextarea
  • 各種動作のトリガーになるボタン
  • 加工後のテキストデータを表示するtextarea

を作成。

// JavaScript Document
$(function(){
"use strict";
//clipboard.js
var clipboard = new Clipboard('.copy');

$('.generate').on('click',function(){
var beforeTxt = $('#before').val();
beforeTxt = beforeTxt.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,'');
$('#after').val(beforeTxt);
});
$('.clear').on('click',function(){
$('#before').val('');
});

});

上から

  • 「コピー」クリックでクリップボードにタグを除去したデータを格納
  • 「エンコ」クリックでtextarea「原文」の内容からタグを除去してtextarea「結果」に表示
  • 「クリア」クリックでtextarea「原文」にペーストしたテキストを削除

「clipboard.js」は指定の要素内にある文字列をクリップボードに放り込んでくれるプラグイン。
コピーしてきたのを貼り付けてボタン押してボタン押してsoftalkに貼り付けて再生、って流れになる。
「クリア」はあってもなくてもって気もするけど、付けてみたら意外といい感じになった。

もっと簡略化できないのか

ブラウザ上でsoftalkなり棒読みちゃんなりにぶっこんで再生するまでをしてくれればええよなって、
以前phpだか何かでsoftalkを操作しようとしたことがあって、
ネットワークとか欲をかかずにPC内で完結させるならできんこたないかなってのはあるけど、
アドオンでもなくただベタ打ちするだけの作業なので、
例えばひょんな事でファイル整理してパスが変わっちゃったらとか、
今後も使い続けられるようにって考えたら、
欲をかかずに今のこれが丁度いいかなって思ったりしてる今。

もっと楽な方法はなかったのか

iPhoneの標準機能に読み上げがあるんだけど、
ページ全体読みやがるし、
ノンストップで読み続けるし、
音声なんか違うなって違和感あるし、
読み上げてる間ずっとスマホアクティブでバッテリー持ってかれるし、
機能としてはとても簡単なんだけど色々と気に入らなくて却下した。
単純に読み上げてくれるだけでいいならこっちでいいとは思う。

スポンサーリンク

コメント

タイトルとURLをコピーしました