ラベル HTML の投稿を表示しています。 すべての投稿を表示
ラベル HTML の投稿を表示しています。 すべての投稿を表示

2013年10月6日日曜日

Bloggerで記載したはずの投稿タイトルが消えてしまう

Bloggerでタイトルを書いてプレビューや保存、公開などをしたところ、タイトルが消えている場合がある。現象の詳細は最下部の「現象」欄を見てほしい。

原因

閉じるタグ(</~>)が無いなどの不正なタグ使用を行ったため。

対策

どうしても開くタグ(<~>)のみ使用したい時はエスケープ文字を使おう。つまり、『<』を用いたければ『&lt;』、『>』は『&gt;』と記述しよう。エスケープ文字を知らない場合は『エスケープ文字 html』でググれば説明してくれているウェブページが簡単に見つかる。

所感

単純な原因ではあるがエラーメッセージを出さずに消すので面食らってしまった。消しても構わないので、理由を示すメッセージを表示してほしい。

なお、本文ではこのような事象は起きない。というのは作成画面では『<』や『>』などは自動的にエスケープ処理され、HTML編集画面では不正なタグ使用に対してエラーメッセージが表示されるからである。

(HTML編集画面でのエラーメッセージの例)


Bloggerでは見出しタグ:<h1>~<h6>の文字の大きさが不揃いになるので注意しよう

通常、HTMLの見出しタグ:<h1>~<h6>は、<h1>が最上位の見出しで文字が最も大きく、以下数字が小さくなるにつれて文字が小さくなります。Bloggerのエディタ画面では同様の表示になりますが、実際の画面ではそうならないので注意しましょう。というか、使えんよな。。。

以下に、検証時に使用した例とHTMLソース、エディタ画面、表示画面の画像を置きましたので、ご覧ください。

検証時に使用した例

下記のありがとうございますは<h1>から<h6>まで昇順に並んでいますが、文字の大きさが順に小さくなっておらず大きくなったり小さくなったりして見えると思います。

ありがとうございます

ありがとうございます

ありがとうございます

ありがとうございます

ありがとうございます
ありがとうございます

2013年9月21日土曜日

CSSでのぶら下げインデント設定方法

初歩的な事ではあるが忘れていたのでメモ書き。

■CSSでぶら下げインデントを設定する方法

下記をCSSに追記した後に該当部分を<div class="terms">~</div>で囲む。
当然ながら<div>タグではなく、<li>タグに仕込んでもよい。

■CSS追記内容
div.terms{
  margin-left: 1.0em;
  text-indent: -1.0em;
}

日常的に使わないと忘れてしまうんだよな、気をつけないとね。

以上

2013年9月13日金曜日

特殊な条件でJavascriptのsplitを実行した場合の挙動

Javascriptのsplitで、分割対象の文字列と区切り文字に色んな値を入れて試した結果のメモ。
いや、ちょいと詰まったもんで。
1.分割対象の文字列、区切り文字の両方共に値を指定しない場合
要素数zeroの配列ができる。
2.文字列と区切り文字の値が等しい場合(何らかの値を必ず設定)
要素数が2、2個の要素共に値が空文字("")の配列が生成される。
3.分割対象の文字列のみ値を設定した場合
文字列は1文字ずつ分割される。
4.区切り文字のみ値を設定した場合
要素数が1、要素の値が空文字("")の配列が生成される。
5.文字列に区切り文字が無い場合
要素数が1、その要素の値が文字列の配列が生成される。
6.文字列の先頭が区切り文字の場合
要素数が2、始めの要素の値は空文字("")、最後の要素の値は文字列から区切り文字を除いた値の配列が生成される。
7.文字列の先頭が区切り文字の場合
要素数が2、始めの要素の値は文字列から区切り文字を除いた値、最後の要素の値は空文字("")の配列が生成される。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
      function  disp(str,sep){
        var ary = (str.value).split(sep.value);
        var test = document.getElementById("test");
        if(Array.isArray(ary)){
          var j = ary.length;
          test.innerHTML = "要素数:" + j + "<br />";
          var val = new String;
          for(i=0,j=ary.length;i<j;i++){
            switch(ary[i]){
              case null:
                val = "null";
                break;
              case " ":
                val = "space";
                break;
              case undefined:
                val = "undefined";
                break;
              case "":
                val = "空文字";
                break;
              default:
                val = ary[i];
                break;
            }
            test.innerHTML += i + "⇒" + val + "<br />";
          }
        }else{
          alert(typeof(ary));
        }
      }
    </script>
  </head>
  <body>
    <form>
      <p>String:<input type="text" id="str"></p>
      <p>Separator:<input type="text" id="sep"></p>
      <input type="button" id="btn" value="show" onclick="disp(str,sep);">
    </form>
    <div id="test"></div>
  </body>
</html>


検証ツール

文字列:
区切り文字:

2013年9月12日木曜日

FIrefoxとnavigator.languageとgeneral.useragent.locale

FirefoxでJavascirptのnavigator.languageで表示される言語は、configのgeneral.useragent.locale(要はメニューの表示言語)だと今までは思っていた。だが、この認識が誤っているのに気づき、調べた結果、以下内容になった。

==ここから==

Firefoxでの言語設定には2種類ある。かいつまんで記載すると、

  1. ブラウザのメニューとダイアログの表示に使用される設定
  2. ウェブページの表示に使用する言語に対する優先順位の設定

となる。各々の設定は、下記方法で行う。

  1. 表示したい言語の言語パックをインストールした後に、about:configでgeneral.useragent.localeに希望の言語を設定してFirefoxを再起動。(言語パック->ココを参照)
  2. メニュー:ツール > オプション > コンテンツ > 言語 > 言語設定 で現れる画面で、ウェブページで使う言語の優先度を最高位にする。
2.の意味がよく分からない場合は、優先度を変えた後にココ(https://addons.mozilla.org/)にアクセスするといいと思う。優先度が高い言語で表示されるはず。

さて、上記2個の各々の設定を変えながら、navigator.languageの値を見てみると、

  1. メニューの言語が何であれ、navigator.languageの値は変わらない。つまり、general.useragent.localeの値には依存していない。
  2. 優先度が最も高い言語がnavigator.languageに設定されている。
という結果になった。
ちなみに、Chromeで同様の確認を行ったところ、意外にも異なる結果になった。
Chromeでの結果->http://amor2k.blogspot.jp/2013/09/chromenavigatorlanguage.html


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
      function  check(){
        alert(navigator.language);
      }
    </script>
  </head>
  <body>
    <input type="button" id="btn" value="show" onclick="check();">
  </body>
</html>

OS: Windows 7 Progessional(64bit) Service Pack1
Firefox: 23.0.1

以上

Chromeと言語設定とnavigator.language

Chromeでの言語設定には2種類ある。かいつまんで記載すると、
  1. ブラウザのメニューとダイアログの表示に使用される設定
  2. ウェブページの表示に使用する言語に対する優先順位の設定
となる。(詳細はココを参照->https://support.google.com/chrome/answer/95416?hl=ja)
この2個の設定の各々でnavigator.languageの値を見てみた。すなわち、下記内容で確認を行った。

  1. メニューに表示される言語を変えた場合の値
  2. 優先度が最も高い言語を変えた場合の値
結果は、

  1. メニューに表示される言語になった。
  2. 優先度をどのように変えても、メニューに表示される値になった。
となり、個人的には大変意外な結果になった。
ちなみに、Firefoxでも同様の調査をしたが、結果は異なった。
Firefoxでの結果->http://amor2k.blogspot.jp/2013/09/firefoxnavigatorlanguagegeneraluseragen.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
      function  check(){
        alert(navigator.language);
      }
    </script>
  </head>
  <body>
    <input type="button" id="btn" value="show" onclick="check();">
  </body>
</html>

OS: Windows 7 Progessional(64bit) Service Pack1
Chrome: 29.0.1547.66 m

以上

2013年9月11日水曜日

textContentとinnerTextと改行

textContentは改行コードを無視する。
innerTextは改行コードを考慮する。
ただしinnerTextはIE,Chromeのみの対応で、Firefoxでは定義されていない。
( textContentは、IE,Chrome,Firefoxで対応されている。
  参照⇒https://developer.mozilla.org/ja/docs/Web/API/Node.textContent )

ではFirefoxで文字列を改行させたい場合はどうするか?
思いつく対応方法は下記2つ。
  1. 改行コードを改行タグ"<br />"で置換して、innerHTMLに設定。
  2. テキストを改行コードで分割して生成した各文字列を<div>や<p>などのブロック要素のテキストノードに設定して連結する。
もっと見栄えのよい方法はないかな?

2013年8月30日金曜日

2013年8月28日水曜日

Firefoxと音声ファイルと音量調節

Firefoxでmp3等の音声ファイルを再生する場合、音声調節はon・offのどちらかしか選択できない。 htmlのaudioタグのcontrolでも同様である。
IEやChromeではスライダーで調整できるので、Firefoxも対応してほしい。
なお、音声ファイルをvideoタグで処理すると、Firefoxでも音声をスライダーで調整可能になる。
OS: Windows 7 Progessional(64bit) Service Pack1
Firefox: 23.0.1
IE: 10.0.9200.16660
Chrome: 29.0.1547.57 m

2013年8月26日月曜日

Firefoxと動画ファイルとオブジェクトURL

Firefoxにおいて、htmlのvideoタグのソース(src)にmp4等の動画ファイルに対するオブジェクトURLを設定すると(window.URL.createObjectURL)、再生ボタンを押しても反応が無く、またエラーにもならない。
IE、Chromeでは再生可能。
なお、mp3等の音声ファイルではIE・Chrome・Firefoxのいずれも再生できた。
なんだこりゃ。


OS: Windows 7 Progessional(64bit) Service Pack1
Firefox: 23.0.1
IE: 10.0.9200.16660
Chrome: 29.0.1547.57 m


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
       function test(){
         var file = document.getElementById("Myfile").files[0];;
         var objecturl = window.URL.createObjectURL(file);
         var video = document.getElementById("video");
         video.src = objecturl;
       }
    </script>
  </head>
  <body>
    <form>
      <input type="file" id="Myfile" onchange="test()">
    </form>
    <div id="play">
      <video id="video" controls="controls" onerror="alert('ERROR!')"></video>
    </div>
  </body>
</html>

【追記(2013/08/30)】
動画ファイルの中でも.oggと.webmはFirefoxで正常に再生できた。
この現象が起きる動画は、.mp4ファイルのみのようだ。
また、音声ファイルではあるが、.m4aで該当の事象が発生した。

下記の記事に
「特許の問題を回避するため MPEG4、H.264、MP3 および AAC のサポートは、Firefox に直接組み込まれてはいません。代わりに、OS またはハードウェアのサポートに依存します。」
という記載があるが、関係しているかな?
参考記事⇒リンク


2013年8月24日土曜日

検索条件を設定せずにJavascriptでtestを実行すると、戻り値がtrueになるんだね

標題の件、個人的には意外だったもんで、備忘録として書いた。
検証に用いたソースは以下。
なお、ブラウザによる違いは無かった。(IE,Firefox,Chrome)当然だけど。


<html>
  <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
      function  search(text){
        var regexp = new RegExp(text,"gi");
        alert(regexp.test(document.getElementById("test")));
      }
    </script>
  </head>
  <body>
    <form>
      <input type="text" id="text">
      <input type="button" id="btn" onclick="search(text.value);">
    </form>
    <div id="test"></div>
  </body>
</html>

2013年8月21日水曜日

Javascriptで水平線(<HR>)の後に文字を入力した時の表示が意外な結果になった

水平線の後に文字を表示するJavascriptを作る場合、通常はinnerHTMLを使うと思う(サンプル1)。


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
      function test(){
        comm.innerHTML = "<hr>";
        comm.innerHTML += "おはよう";
      }
    </script>
  </head>
  <body onload="test()">
    <div id="comm">
    </div>
  </body>
</html>

結果:IE,Chrome,Firefoxで確認







ところが、違うコードにしてみると(サンプル2)、意外な結果になった。


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
      function test(){
        var comm = document.getElementById("comm");
        comm.appendChild(document.createElement("hr"));
        comm.innerText += "おはよう";
      }
    </script>
  </head>
  <body onload="test()">
    <div id="comm">
    </div>
  </body>
</html>
結果:IE,Chromeで確認








結果:Firefoxで確認






ふーん。そうなんだ。変だ。。。

なお、実施環境は下記。
OS: Windows 7 Progessional(64bit) Service Pack1
Firefox: 23.0.1
IE: 10.0.9200.16660
Chrome: 28.0.1500.95m

2013年8月17日土曜日

input type="file"のonchangeイベントで各ブラウザの挙動が異なる

ファイルを選択するとアラートが表示されるHTMLを(サンプル1)、下記手順で実行してみる。
1:何らかのファイルを選択する。
2:再度選択ボタンを押した後にキャンセルする。

IEとFirefoxでは何も起きないが、Chromeではアラートが表示される。


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script type="text/javascript"></script>
  </head>
  <body>
    <form>
      <input type="file" id="Myfile" onchange=alert("ok")>
    </form>
  </body>
</html>

少し掘り下げて調査するため、ファイルを選択するとファイル名、選択されていない場合はメッセージを表示するHTMLを(サンプル2)、上記と同一手順で実行してみた。
IEとFirefoxではファイル名が、Chromeではメッセージ「nothing!」が表示される。

つまり、キャンセルした時、IE,Firefoxでは前回選択したファイル名を選択し続け、
Chromeでは何も選択していない状態に変わっている。


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
      function checkFile(){
        var file = document.getElementById("Myfile").files[0];
        if(file){
          alert(file.name);
        }else{
          alert("nothing!");
        }
      }
    </script>
  </head>
  <body>
    <form>
      <input type="file" id="Myfile" onchange="checkFile()")>
    </form>
  </body>
</html>

正しい挙動はどちらなのかは分からないが、揃えてほしいと思う。

面倒くせぇ。

なお、実施環境は下記。
OS: Windows 7 Progessional(64bit) Service Pack1
Firefox: 23.0.1
IE: 10.0.9200.16660
Chrome: 28.0.1500.95m