【CSS】iphoneでbrタグを含む長文をうまく選択する方法

iphoneでbrタグをまたいで文章を選択すると、希望の文字列より広範囲で四角く選択されてしまう。これはiphoneの使用のよう。

この問題はbrタグを使わず、CSSで改行すると解決できる。

html
-----------------------------
<br>
-----------------------------

↓↓↓↓↓

html
-----------------------------
<span class="br"></span>
-----------------------------

css
-----------------------------
.br:before {
content: "\A";
white-space: pre-wrap;
}
-----------------------------

CSSで改行

久しぶりに立ち上げたサーバーにつながらなかった時の対処法

久しぶりに立ち上げた CentOS がインターネットつながらない。CentOS内のFireFox からインターネットが見れず。WindowsPCのFFFTPからもアクセスできず。

やったこと。

1.
------------
ifconfig
------------

ネットワーク環境を確認する。NICが正常に認識されていればOK。eth0のところに自身のIPアドレスが表示されていればいい。

2.
------------
ping 192.158..0.9 ← 自分自身のIPアドレスに送った
------------

返ってきたメッセージ
------------
Destination Host Unreachable
------------

デフォルトゲートウェイがダウンしている状態に返ってくるメッセージということで、ルーターを再起動させて解決できた。

2018年2月にもサーバーに繋がらないトラブルに遭遇した。

やったこと

サーバーを再起動してもルーターを再起動してもダメ。

フレッツ光の2セッション目に自宅サーバーを繋げていたが、1セッション目(Windows)のルーターを切ったら繋がった。つまりセッション数が足りない?

1セッション目のプロバイダを nifty から ocn に変えたあと、はじめて自宅サーバーを立ち上げたことを思い出した。

Windows から1セッション目のルーターにアクセスすると、 nifty の設定も残っていて、nifty と ocn の両プロバイダともにルーターはアクセスを試みていた。

使っていない nifty の情報を削除。すると2セッション目が空いて自作サーバーもつながった。

mysql_query($sql) OR die(mysql_error()) の意味

mysql_query($sql) OR die(mysql_error()) の意味。

or演算子 → 左辺がtrueの場合に右辺の式は無視される
die関数 → 指定されたメッセージを出力して、スクリプトを強制終了させる関数

【さくら】pearのCache_Liteでキャッシュする

PEAR ライブラリの Cache_Lite でキャッシュする方法
サンプルスクリプトも含めてこのページがわかりやすかった

サンプルスクリプトもほぼそのまま
----------------------------------------------------------------
<?php

// クラス読み込み
require_once('Cache/Lite.php');

// IDのセット
//$cache_id = $_SERVER["REQUEST_URI"]; //こんなんでもいい
$cache_id = '123456';
// オプション
$options = array(
//さくらの場合、/tmp/はホームディレクトリより上にあるがキャッシュは保存できる。ただ他ユーザーと共有なのでホームディレクトリ以下に保存するほうがいいと思う
// 'cacheDir' => '/tmp/', //キャッシュ保存先
'cacheDir' => '/home/acount_name/tmp/', //共有サーバーなのでホームディレクトリ以下。フォルダは作って事前に作る必要がある
'caching' => 'true', // キャッシュを有効に
'automaticSerialization' => 'true', // 配列を保存可能に
'lifeTime' => 10, // 10(生存時間:10秒)
'automaticCleaningFactor' => 200, // 自動で古いファイルを削除(1/200の確率で実行)
'hashedDirectoryLevel' => 1, // ディレクトリ階層の深さ(高速になる)
);

// オブジェクトのnew
$cache = new Cache_Lite($options);

// キャッシュデータがあるかどうかの判別
if ( $cache_data = $cache->get($cache_id) )
{
echo "【キャッシュ使用】
";
$buff = $cache_data;
}
else
{
// キャッシュデータがない。APIからデータを読み込む処理
// データ取得処理ここから
// ……………………… $read_data にデータを入れておく
$read_data = date('Y/m/d H:i:s');
// データ取得処理ここまで

echo "【キャッシュ未使用】
";
$buff = $read_data;
//$cache->save($buff); ← $cache_id は省略できる?(明示したほうが安心)
$cache->save($buff,$cache_id); //キャッシュを保存
}
print_r($buff);
?>
----------------------------------------------------------------

JQUERYのPOST(ajax)で戻り値を複数返す

JQUERYのPOST(ajax)で戻り値を複数返すには、PHPからjavascriptへのデータの受け渡しの際に配列をJSON形式に変換する

//PHP側
-------------------------------------
$data_arr = array($data1, $data2);

//連想配列でも可
//$data_arr = array('apple'=>'りんご', 'peach'=>'もも', 'pear'=>'なし');

//javascriptに受け渡すため配列をJSON形式に変換
$datas = json_encode($data_arr);
echo $datas; //JQUERYに渡す
-------------------------------------

JQUERY側
-------------------------------------
data_arr = JSON.parse(data); //戻り値をJSONとして解析
alert(data_arr[0]);
alert(data_arr[1]);
-------------------------------------

iphoneのブラウザで文字列を選択できない

iphoneのブラウザで文字ができない現象に遭遇。通常文字列を長タップすると選択およびコピーのポップアップが出るが、それがでなくなる。

出なくなる条件。

  • タグを含まない文字列が長く続く
  • line-heightの値が250%などと大きい
  • viewport(スマホサイズの指定)がある
  • 以上3つの条件が揃うとコピーができない。文字列の長さを短くしたり、line-heightの値を小さくするとコピーができるようになる。viewportの指定を外せば、タグを含まない長い文字列でも、line-heightが大きい値でもコピーに支障なし。

    現象はiphone5s(iOS9.3.2) と iphone6s(iOS9.3.3) で確認。それぞれの端末で選択できなくなるまでの文字数が違う。この違いが、画面の大きさからか、スペックからか、OSのバージョンからなのかは不明。

    対症療法として文字列中の適当な箇所になどのタグを入れるとコピーできるようになる。

    2016/09/22 追記
    原因判明。読み込んでいた二つのcssファイルそれぞれに #content があった。一つ消したら不具合もなくなった。

    さくらのサブドメインを別のサーバーで使いたい

    やりたいこと

    現在、さくらレンタルサーバーAでドメインとサブドメイン一個を運用中。ドメイン自体はお名前.comで取得したもの。

    これにサブドメインをもう一個追加したい。追加先は新しく契約したさくらレンタルサーバーB。

    現在
    -------------------------
    ドメイン ← さくらレンサバAで運用中
    サブドメイン ← さくらレンサバAで運用中
    -------------------------

    こうしたい
    -------------------------
    ドメイン ← さくらレンサバAで運用中
    サブドメイン ← さくらレンサバAで運用中
    新サブドメイン ← さくらレンサバBに追加
    -------------------------

    さくらレンサバBにサブドメインの設定をして、ドメイン取得元のお名前.comでDNS設定をする。

    参考:サブドメインの設定方法メモ

    しかし、設定が完了し時間をおいても一向にサブドメインにアクセスできない。IEでアクセスしても「見つかりません」エラーが返ってくる。Chormeでアクセスするとエラー内容の詳細が分かった。

    エラー内容
    ----------------------------------------------------------
    The requested URL /php.cgi/index.html was not found on this server.
    ----------------------------------------------------------

    ようは、新しいサブドメインのルートフォルダにphp.cgiがなかったからで、コピーしたら動いた。

    参考:さくらインターネットでPHPを.htmlで動かす.htaccessの設定方法

    さくらのmysqlサーバーのサブドメインを指定した別サーバーからもログイン可能。(レンサバAのmysqlサーバーにレンサバBからログインができる)

    【CSS】android4.xでposition:fixedで上下左右中央揃え

    position:fixedで上下左右中央揃えをする方法をネットで調べた。

    -------------------------------
    .box1{
    position: fixed !important;
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    margin:auto;
    width:145px;
    height:145px;
    }
    -------------------------------

    しかしandroid4.x系だとうまくいかないらしく自分のはまる。

    対策、これでうまくいく。

    -------------------------------
    .box1{
    position: fixed !important;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    }
    -------------------------------

    参考;

    http://youknow.jp/web/css-position

    【javascript】getElementByIdとgetElementsByClassNameの違い

    javascriptのgetElementByIdで値を取得したようにgetElementsByClassNameで値を取得しようとすると取得できなかった。getElementsByClassNameはたんにgetElementByIdのClass版ではなかった。

    getElementByIdとgetElementsByClassNameでは戻り値が違う。

    getElementByIdの戻り値
    -----------------------------------------------------
    存在する場合は要素(オブジェクト)を返し、存在しない場合はnullを返す。
    -----------------------------------------------------

    getElementsByClassNameの戻り値
    -----------------------------------------------------
    存在する場合は1個以上のHTMLCollectionを返し、
    存在しない場合は0個のHTMLCollectionを返す。
    -----------------------------------------------------

    getElementById
    getElementsByClassName

    getElementByIdがオブジェクトを返すのに対して、getElementsByClassNameは配列っぽいものを返す。複数返すからgetElementsByClassNameなのね。

    //idにクリックイベントを設置
    -----------------------------------------------------
    document.getElementById('content').click = function (e){
    alert("クリックされた");
    }
    -----------------------------------------------------

    //classにクリックイベントを設置
    -----------------------------------------------------
    document.getElementsByClassName('box1')[0].onmouseup = function (e){
    alert("クリックされた");
    }
    -----------------------------------------------------

    ルビつきの文章からルビを削除してコピペする

    ルビだけコピーしたくない

    上のページを参考にルビつきの文章を選択してボタンを押すとアラートでルビなしの選択テキストが表示されるスクリプトを書いたのでメモ。

    -------------------------------------------
    <!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