ルビだけコピーしたくない
上のページを参考にルビつきの文章を選択してボタンを押すとアラートでルビなしの選択テキストが表示されるスクリプトを書いたのでメモ。
-------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>a</title>
</head>
<body>
<section>
<h2>おはなし</h2>
<p>
<ruby><rb>親譲</rb><rp>（</rp><rt>おやゆず</rt><rp>）</rp></ruby>りの<ruby><rb>無鉄砲</rb><rp>（</rp><rt>むてっぽう</rt><rp>）</rp></ruby>で小供の時から損ばかりしている。
</p>
</section>
<div id="foot_bt">
ルビなし文章をアラート
</div>
</body>
</html>
-------------------------------------------
//採用したのはこちら
-------------------------------------------
//いったん削除する
var rtList = document.getElementsByTagName("rt");
var contentList = [];
Array.prototype.forEach.call(rtList, function(rt) {
contentList.push(rt.textContent); //配列に入れる
rt.textContent = ""; //空にする
});
//選択した文章を代入
selection_text = document.getSelection().toString();
//削除したやつを戻す
setTimeout(function() {
Array.prototype.forEach.call(rtList, function(rt) {
rt.textContent = contentList.shift();
});
}, 0);
-------------------------------------------
最初の参考ページにdisplay:none;でルビを消す方法も載っているが、選択したテキストを取得する場合、IE11ではルビが残ってしまい無理だった。
参考：選択中文字列の取得 ブラウザによる違い
このページも役に立った
http://mamewaza.com/support/blog/howto-use-range-selection.html
カテゴリー：javascript, JQUERY
選択したテキストを取得して確認するために、アラートで表示するスクリプトをつくった。
test.js
-------------------------------------------------------
//ボタンが押されたら
$('#test_bt').on('click', function () {
var selObj = document.getElementById('iframe').contentDocument.getSelection();
//もしくはこちら
//var selObj = document.getElementById('iframe').contentWindow.getSelection();
alert("選択した文字列: " + selObj); //アラートで表示
});
-------------------------------------------------------
test.html
-------------------------------------------------------
<div class="ifrm-container">
<iframe src="iframe_test.html"></iframe>
</div>
<div>
<input type="button" value="ボタン" id="test_bt">
</div>
-------------------------------------------------------
あらかじめテキストを選択しておいて、ボタンが押されたら選択されたテキストがはいったアラートを表示する方法をとったのだが、android だとボタンを押すとテキストの選択が解除される。「選択解除」 → 「選択テキストを取得してアラートを表示」の順番になるのでうまく取得できない。
＜＜追記＞＞
android でも選択したテキストをアラートで表示できた。
test.js
//touchend のタイミングでテキストを保存しておけばいい
-------------------------------------------------------
selection-text = "global"; //グローバル変数をつくっておく
$(window).on("load", function(e){
$("#iframe").contents().find("div").on("touchend", function(e){
//ここでグローバル変数にテキストを保存しておく
$(this).data('selection-text',window.getSelection());
});
});
-------------------------------------------------------
touchend 指を離したタイミングでアラートする場合
//touchend のタイミングで取得
-------------------------------------------------------
$(window).on("load", function(e){
$("#iframe").contents().find("div").on("touchend", function(e){
var selObj = document.getElementById('iframe').contentDocument.getSelection();
alert("選択した文字列: " + selObj);
});
});
-------------------------------------------------------
カテゴリー：javascript, JQUERY
iPhone の safari でテキストを選択しようとすると選択がしにくい。長押ししてもテキストを選択できる確率は三回に一回以下だった。
選択できない（しずらい）テキストには特徴がある。長文で改行などのタグが一切入ってないこと。解決策はタグを入れる。
//タグなしなのでテキストを選択しづらい
----------------------------------------------------------
ぶうと云いって汽船がとまると、艀はしけが岸を離はなれて、漕こぎ寄せて来た。船頭は真まっ裸ぱだかに赤ふんどしをしめている。野蛮やばんな所だ。もっともこの熱さでは着物はきられまい。日が強いので水がやに光る。見つめていても眼めがくらむ。事務員に聞いてみるとおれはここへ降りるのだそうだ。見るところでは大森おおもりぐらいな漁村だ。人を馬鹿ばかにしていらあ、こんな所に我慢がまんが出来るものかと思ったが仕方がない。威勢いせいよく一番に飛び込んだ。続つづいて五六人は乗ったろう。外に大きな箱はこを四つばかり積み込んで赤ふんは岸へ漕ぎ戻もどして来た。陸おかへ着いた時も、いの一番に飛び上がって、いきなり、磯いそに立っていた鼻たれ小僧こぞうをつらまえて中学校はどこだと聞いた。小僧はぼんやりして、知らんがの、と云った。気の利かぬ田舎いなかものだ。猫ねこの額ほどな町内の癖くせに、中学校のありかも知らぬ奴やつがあるものか。ところへ妙みょうな筒つつっぽうを着た男がきて、こっちへ来いと云うから、尾ついて行ったら、港屋とか云う宿屋へ連れて来た。やな女が声を揃そろえてお上がりなさいと云うので、上がるのがいやになった。門口へ立ったなり中学校を教えろと云ったら、中学校はこれから汽車で二里ばかり行かなくっちゃいけないと聞いて、なお上がるのがいやになった。おれは、筒っぽうを着た男から、おれの革鞄かばんを二つ引きたくって、のそのそあるき出した。宿屋のものは変な顔をしていた。
----------------------------------------------------------
↓↓↓↓↓↓↓↓↓
//適当に改行タグを入れると選択しやすくなる
----------------------------------------------------------
ぶうと云いって汽船がとまると、艀はしけが岸を離はなれて、漕こぎ寄せて来た。船頭は真まっ裸ぱだかに赤ふんどしをしめている。<br>野蛮やばんな所だ。もっともこの熱さでは着物はきられまい。日が強いので水がやに光る。見つめていても眼めがくらむ。事務員に聞いてみるとおれはここへ降りるのだそうだ。見るところでは大森おおもりぐらいな漁村だ。<br>人を馬鹿ばかにしていらあ、こんな所に我慢がまんが出来るものかと思ったが仕方がない。威勢いせいよく一番に飛び込んだ。続つづいて五六人は乗ったろう。外に大きな箱はこを四つばかり積み込んで赤ふんは岸へ漕ぎ戻もどして来た。<br>陸おかへ着いた時も、いの一番に飛び上がって、いきなり、磯いそに立っていた鼻たれ小僧こぞうをつらまえて中学校はどこだと聞いた。小僧はぼんやりして、知らんがの、と云った。気の利かぬ田舎いなかものだ。猫ねこの額ほどな町内の癖くせに、中学校のありかも知らぬ奴やつがあるものか。<br>ところへ妙みょうな筒つつっぽうを着た男がきて、こっちへ来いと云うから、尾ついて行ったら、港屋とか云う宿屋へ連れて来た。やな女が声を揃そろえてお上がりなさいと云うので、上がるのがいやになった。門口へ立ったなり中学校を教えろと云ったら、中学校はこれから汽車で二里ばかり行かなくっちゃいけないと聞いて、なお上がるのがいやになった。<br>おれは、筒っぽうを着た男から、おれの革鞄かばんを二つ引きたくって、のそのそあるき出した。宿屋のものは変な顔をしていた。
----------------------------------------------------------
（坊っちゃん 夏目漱石）
カテゴリー：iPhone
iPhoneでは、iframeの高さが設定できないので、フレームをはみ出る大きなコンテンツもスクロールバーは表示されず、iframeのサイズが無視されて表示される。
解決するには、iframeの真上の要素にサイズを設定する。
sample.php
----------------------------------------
<?php //スクロール量表示場所 ?>
<div id="log"></div>
<div class="ifrm-container">
<iframe src="iframe_test.html" id="iframe" class="ifrm" scrolling="auto"></iframe>
</div>
----------------------------------------
sample.css
----------------------------------------
.ifrm-container {
width:300px;
height:400px;
overflow:auto;
-webkit-overflow-scrolling:touch;
}
.ifrm {
width:100%;
height:100%;
border:none;
display:block;
}
----------------------------------------
参考サイト
jqueryでスクロールバーを操作する場合は、iPhoneでは、iframeをかこう要素にイベントを設定、それ以外ではiframe要素自身にイベントを設定する
//iPhone以外で100スクロールさせる
----------------------------------------
$($("#iframe").contents()[0]).scrollTop(100);
//スクロール量の表示
$( $('#iframe')[0].contentWindow ).scroll(function () {
var st = $($("#iframe").contents()[0]).scrollTop();
$("#log").html(st);
// });
----------------------------------------
//iPhoneで100スクロールさせる
----------------------------------------
$(".ifrm-container").scrollTop(100);
//スクロール量の表示
$('.ifrm-container').scroll(function () {
var st = $(".ifrm-container").scrollTop();
$("#log").html(st);
});
----------------------------------------
参考：【jquery】iframe内のスクロールイベント設定とスクロール量取得
ただし、iPhoneで表示されるiframeは仕様上テキストが選択できない。テキストが選択したい場合は、擬似フレームを使う。
テキストが選択できない理由はこれだった↓↓
iPhoneで長文のテキストが選択しにくい
カテゴリー：javascript, JQUERY
sample.html
-------------------------------------------
<!DOCTYPE HTML>
<html>
<head>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/test.js" type="text/javascript"></script>
</head>
<body>
<iframe src="iframe_test.html" id="iframe"></iframe>
</body>
</html>
-------------------------------------------
iframe_test.html
-------------------------------------------
<html>
<head>
</head>
<body>
<div>
インラインフレームの内容
</div>
</body>
</html>
-------------------------------------------
test.js
-------------------------------------------
//iframeの内容が完全に読み込まれたら
$(window).on("load", function(e){
//iframeにはタッチやクリックイベントは発行されないためこういう記述
$("#iframe").contents().find("body").on("touchstart", function(e){
alert("タップされた");
});
});
-------------------------------------------
参考ページ１
参考ページ２
ただ、これだとiPhoneのsafariだと「click」うまく動作しない。「touchstart」なら動く。理由はこれだと思う。
iPhoneのsafariだとbody要素に登録したclickは無効なのでdivなどに登録先を変える。
-------------------------------------------
$("#iframe").contents().find("body").on("click", function(e){
alert("タップされた");
});
-------------------------------------------
↓↓↓↓↓↓↓↓↓
-------------------------------------------
$("#iframe").contents().find("div").on("click", function(e){
alert("タップされた");
});
-------------------------------------------
iframe内の部品がクリックされたイベントを起こす場合は↓
■sample.html
-------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<title>Test</title>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$("#hoge").contents().find("#fuga").bind("click", function() {
alert("hogehoge");
});
})
</script>
<iframe id="hoge" src="hoge.html"></iframe>
-------------------------------------------
■hoge.html
-------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<title>hoge.html</title>
<button id="fuga">PUSH!!</button>
-------------------------------------------
参考：http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1036893315
カテゴリー：javascript, JQUERY
異なるイベントで同じ関数を実行させたい場合、イベント発生時の処理用に共通の関数を定義して、それぞれのイベントから実行させる。
サンプルスクリプト
-----------------------------------------------
//検索欄でenterキーが押されたら実行
$('#kensaku-form').keydown(function() {
if( event.keyCode == 13 ) {
myFunc();
return false; //enterキー無効
} //if
});
//もしくは検索ボタンが押されたら実行
$('#kensaku-button').click(function(){
myFunc();
});
//実行される共通の関数
function myFunc() {
alert('イベントが実行されました');
};
-----------------------------------------------
カテゴリー：JQUERY
hover を使ったリンクをつくって iPhone で見ると、リンクにタッチした瞬間には hover は反応せずに指を画面から離した瞬間に反応する。
PC上の hover がマウスポインタを置いた瞬間に反応するように、タッチした瞬間にスマホ画面を反応させるには JQuery を使うといい。
Jquery ファイル
/////////////////////////////////////////////////
//PC用 hover 処理。css に hover を記述するとスマホサイトで見たときに
//挙動がおかしくなるので PC 上の挙動もここでつくる
//PC用とスマホ用を上下入れ替えると、android で挙動がおかしくなる。
//android が hover とtouchstart（touchend）のどちらにも反応するためだと思われる。
$('.touch-res').removeClass("touchstyle").addClass("notouchstyle");
$('.touch-res').hover(
function () {//---マウスオーバーの処理
$(this).removeClass("notouchstyle").addClass("touchstyle");
},//---カンマを忘れずに
function () {//---マウスアウトの処理
$(this).removeClass("touchstyle").addClass("notouchstyle");
}
);
//スマホ用。touchstart & touchend で処理。
$('.touch-res').bind({
'touchstart': function(e) {
$(this).removeClass("notouchstyle").addClass("touchstyle");
},
'touchend': function(e) {
$(this).removeClass("touchstyle").addClass("notouchstyle");
}
});
/////////////////////////////////////////////////
//CSSファイル
/////////////////////////////////////////////////
/* JQuery専用なので、htmlファイルには touch-res クラスだけリンクに設定する*/
.touchstyle { background-color:#d9effc;}
.notouchstyle { background-color:transparent;}
/////////////////////////////////////////////////
問題点がひとつあって、iPhone で次のページに進んだ後、戻るボタンでもどると、リンクの色が変わったままになっている。
iPhone だけなら css の擬似クラス :active で、PC上の hover と同じような反応を出すことができる。ただし、android は反応しなくなる。
カテゴリー：css, JQUERY
top.html というファイルに http://example.com/top/ というurlでアクセスするために、.htaccess に以下の記述をした。
---------------------------
RewriteEngine on
RewriteRule top/$ /top.php
---------------------------
しかしリダイレクトがされない。なぜか？
おそらく RewriteRule の「top/$」の部分は、そういう名前のファイルがないことを条件に指定したパスへリダイレクトを行うからだと思う。だから、top.php という名前のファイルが存在している状態で「RewriteRule top/$」と指定すると top.php というファイルがあるからリダイレクトにならない。（本当なら「top/」のパターンに top.php はマッチしないはずだが）
ひとつわかったこと
転送先のURLのディレクトリに .htaccess ファイルがあると転送後にさらにリダイレクトが実行されるのではまる！！
top.php ファイルがルートディレクトリにない状態だとリダイレクトできる。
ただ、ファイルがないので404エラーになる。
↓↓
---------------------------
RewriteEngine on
RewriteRule top/$ /top.php
---------------------------
top.php ファイルがルートディレクトリにある状態でも以下の書き方ならリダイレクトする。
---------------------------
RewriteEngine on
RewriteRule top/$ /toppage.php
---------------------------
OR
---------------------------
RewriteEngine on
RewriteRule tap/$ /top.php
---------------------------
RewriteRule はいまいちよく分からない。
カテゴリー：さくらインターネット, サーバー設定
PHP の readdir 関数はローカルネットワーク内のフォルダにしかアクセスできない。
外部サーバーにあるディレクトリ内ファイルの一覧を取得するには、fopen 関数を使用するといい。
------------------------------------------------
//urlをひらく。ブラウザでフォルダにアクセスした際、
//フォルダ一覧が見られるApacheの機能を利用。
$fp = @fopen(フォルダのパス, 'r');
while ( !feof($fp) ) {
$row = fgets($fp, 1024);
//ファイル名抽出処理。
}
fclose($fp);
------------------------------------------------
ただし、↑だとブラウザからのフォルダ一覧の表示も許可しなければいけないので、セキュリティ的にはよくない。
fopen は、FTP をサポートしているので ftpサーバーに対してなら ftp_nlist() で取得することも可能か？後日検証。
検索されるファイルが置かれているサーバーにファイルを一覧出力するプログラム（phpファイル）を置いて、その結果を受け取りサーバーで取得する方法もある。その場合、ファイル一覧を取得したいフォルダが複数あって実行のつどフォルダを指定したい場合、フォルダの数だけプログラムが必要か？
参考ページ
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1113905041
カテゴリー：PHP
uwscで秀丸エディタを起動するにはコマンドプロンプトを利用する。
//秀丸エディタを起動
-------------------------------------
CMD = "C:\Program Files\Hidemaru\Hidemaru.exe"
DOSCMD(CMD) //実行
-------------------------------------
//ファイルを指定して秀丸エディタを起動
-------------------------------------
CMD = "<#DBL>C:\Program Files\Hidemaru\Hidemaru.exe<#DBL> <#DBL>C:\フルパス\目的のファイル.html<#DBL>"
DOSCMD(CMD) //実行
-------------------------------------
※パスのProgram Filesに半角スペースがあるので、パス全体を<#DBL>でかこう
//ファイルを指定してマクロを実行
-------------------------------------
CMD = "<#DBL>C:\Program Files\Hidemaru\Hidemaru.exe<#DBL> /xマクロ名.mac <#DBL>C:\フルパス\目的のファイル.html<#DBL>"
DOSCMD(CMD,true) //実行。trueがないとファイルを閉じるまで次の命令が実行されない
-------------------------------------
※マクロは オプション /xマクロ名 で指定
マクロを実行した後の処理
マクロ終了のダイアログを閉じる
-------------------------------------
//#32770はダイアログ。-1は無限待ち
id = GETID("秀丸エディタ", "#32770", -1)
SLEEP(1)
CLKITEM(id, "OK", CLK_BTN)
-------------------------------------
上書き保存と閉じる
-------------------------------------
// ショートカットキーの実行
hide_id = GETID("目的のファイル.html", "Hidemaru32Class", -1)
SCKEY(hide_id, VK_CTRL, VK_S) //保存
//CLKITEM(hide_id, "上書き保存 Ctrl+S", CLK_ACC) //もしくはこれ
SLEEP(1)
CTRLWIN(hide_id, CLOSE) //閉じる
-------------------------------------
カテゴリー：uwsc, 秀丸エディタ
