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("タップされた");
});
});
-------------------------------------------
参考ページ1
参考ページ2
ただ、これだと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, 秀丸エディタ
uwscでzipファイルの解凍や圧縮をしたい場合はpowershellを使うのが便利。
zipファイルを扱えるpowershellはv5以降。windows7ではバージョンアップが必要。
powershellのバージョン確認コマンド
------------------
$PSVersionTable
------------------
また、windows7でpowershell v5をインストールするには .NET Framework Ver.4.5以降が必要
windows7で .NET Framework のバージョンを確認する方法
http://www.atmarkit.co.jp/ait/articles/0910/15/news116.html
解凍コマンド
------------------------------------
Expand-Archive 解凍したいファイル.zip 解凍後のフォルダ名
------------------------------------
圧縮コマンド
------------------------------------
Compress-Archive 圧縮したいフォルダ 圧縮後のフォルダ名.zip
------------------------------------
なのでuwscでのコマンドは
解凍
------------------------------------
PS = "Expand-Archive 解凍したいファイル.zip 解凍後のフォルダ名"
POWERSHELL(PS) //実行
------------------------------------
圧縮
------------------------------------
PS = "compress-archive 圧縮したいフォルダ 圧縮後のフォルダ名"
POWERSHELL(PS) //実行
------------------------------------
もしくはUWSCからコマンドプロンプトを動かして
解凍
------------------------------------
CMD = "powershell Expand-Archive 解凍したいファイル.zip 解凍後のフォルダ名"
DOSCMD(CMD) //実行
------------------------------------
圧縮
------------------------------------
CMD = "powershell compress-archive 圧縮したいフォルダ 圧縮後のフォルダ名"
DOSCMD(CMD) //実行
------------------------------------
カテゴリー:uwsc, コマンドプロンプト
calibreを使ってepubをテキストにすると「漢字かんじ」のように漢字とルビがつながる。「漢字(かんじ)」のようにルビを括弧でかこいたいのでcalibreで変換前にひと手間加える。
1.epubをzip形式に変換して、本文が書かれたhtmlファイルを取り出す。
2.htmlファイルを秀丸マクロで変換。
--------------------------------
//隣り合うルビを結合する
replaceallfast"<ruby>([^<]*?)<rt>([^<]*?)<¥/rt><¥/ruby><ruby>([^<]*?)<rt>","<ruby>¥¥1¥¥3<rt>¥¥2",regular;
//隣り合うルビタグがなくなるまで置換
while (result != 0) {
replaceallfast"<ruby>([^<]*?)<rt>([^<]*?)<¥/rt><¥/ruby><ruby>([^<]*?)<rt>","<ruby>¥¥1¥¥3<rt>¥¥2",regular;
//#a = result;
//$a = str(#a);
//message $a;
}
//ルビを括弧でかこう
replaceallfast"<rt>","(";
replaceallfast"</rt>",")";
//不要なrubyタグを削除
replaceallfast"<ruby>","";
replaceallfast"</ruby>","";
message "終了";
--------------------------------
3.変換後のhtmlファイルをzipの中に戻し、epub形式に戻す。そのepubをcalibreでテキスト変換する。
カテゴリー:秀丸エディタ, 電子書籍
外部ネットワークからCentOSの自宅サーバーにアクセスするときの確認事項の覚書
poderosaやffftp共通
・ポートが開いているか
サーバー側のルーターにアクセスしてポートが開いているか調べる。
poderosa(SSH)は22番
ffftpは20~21番
・必要なサーバーソフトは立ち上がっているか
poderosa(SSH)httpd(Apache)が起動しているか確認
ffftpはsftpdが起動しているか確認
・iptablesが接続の邪魔をしていないか
iptablesの設定を確認。もしくは起動を終了させる。iptablesの設定例
なお、初期設定ではrootを使ってffftpでログインできない
詳細
ffftpで接続はできるのにサーバー側のファイル一覧が表示されない場合は、サーバー側でPASVモードの接続が許可されてない可能性が高い。「設定変更」-「拡張」タブ-「PASVモード」のチェックをはずす。もしくはサーバー側の設定を変更してPASVモードでの接続を許可する。
参考ページ
カテゴリー:CentOS, SSH, 自作PC