Mtk's Blog: JavaScript

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

2020年2月22日土曜日

Selenium IDE でヤフオク！のブラックリストにIDをまとめて登録する方法

How to register dubious ID at Yahoo Auction blacklist all at once

個人売買サイトのヤフオク！は、特定の ID のユーザーとの取引を拒否できるブラックリストの機能があります。
悪意を持った利用者の ID をブラックリストに登録しておくと嫌がらせやいたずらを防ぐことができます。
ブラックリストに登録されると、同一人物が使っていると推測される ID もブロックの対象になるのでサブアカウントも含めて取引の拒否ができます。
ヤフオク!要注意IDリストの Web サイト(以下「要注意IDリスト」と略します) に記載されている数十件の ID を登録しようと思ったのですが、ブラックリストに登録する画面は一度の操作で一つの ID しか登録できません。
一度の操作で全ての ID を登録したいので、Web ブラウザーの Firefox に自動テストツールの Selenium IDE を使って一括登録しました。
90件の登録に4分くらいで済みました。
一般的な手段ではありませんが、そのときのソースと使い方をまとめました。

環境

Windows 10
Firefox 71.0
Selenium IDE 3.16.1

実手順

要注意IDリスト (http://ochisatsu.com/caution/) のIDを抽出する (配列の書式にならべる)
抽出した ID をヤフオクのブラックリストに登録する

時間短縮のために1番目は JavaScriptで抽出し、2番目は Selenium IDE を使いました。

要注意IDリスト (http://ochisatsu.com/caution/) のIDを抽出する方法

これが最大の難関です。
ID を一つずつダブルクオーテーションで囲み、カンマでつなげます。
三人分 ID を登録したい場合は次の構文になります。

return ["一人目のID", "二人目のID", "三人目のID"]

要注意IDリストなどに記載されている ID を配列にならべて出力する JavaScript を作りました。
このブログを書いている時点で要注意IDリストの Web サイトを Firefox で開き、F12 キーを押して Console で下の JavaScript を実行すると表示されている ID を全て配列の構文でコンソールに出力できます。

var tableIndexes = new Array(5, 7, 9, 11, 13, 15);
var text = '';
tableIndexes.forEach(function(tableIndex) {
    var table = document.getElementsByTagName('table')[tableIndex];
    var bottom = table.rows.length;
    for (var row = 1; row < bottom; row++) {
        var cell = table.rows[row].cells[0];
        if (text != '') text += ', ';
        text += '"' + cell.childNodes[0].firstChild.data + '"';
    }
});
console.log('return [' + text + ']');

抽出した ID をヤフオクのブラックリストに登録する方法

Firefox に Addon の Selenium IDE をインストールする

Firefox に Selenium IDE がインストールされていなければ下記の URL を Firefox で開いて「Add to Firefox」をクリックすればインストールできます。
https://addons.mozilla.org/en-US/firefox/addon/selenium-ide/

Firefox のメニューバーに Selenium IDE のアイコンが表示されればインストール成功です。

Selenium IDE のスクリプトをダウンロードし展開する

抽出した ID をヤフオクのブラックリストに登録するスクリプトを Gist に載せました。
https://gist.github.com/mtk-f/4e8c31306171460b9e61021933b026cb

画面右上にある「Download ZIP」をクリックして ZIP ファイルをダウンロードし、展開しておきます。

Selenium IDE を起動してスクリプトファイルを開く

Selenium IDE のアイコンをクリックして Selenium IDE を起動させます。
Open an existing project をクリックします。

Gist からダウンロードして展開したファイルを選択します。

スクリプトを編集する画面が表示されるので、コマンド1行目の Target に要注意IDリストから抽出した return 文をコピー・貼り付けて Run Current test のボタンをクリックします。

これで ID がブラックリストに次々に追加されていきます。

2019年11月30日土曜日

手入力した HTML を即座にプレビュー表示する HTML の作り方

HTML Previewer in web browser

当ブログの著者は HTML を手入力する機会が多いのですが、入力した内容を確認するために

HTML テキストエディターに入力する
テキストファイルを保存する
Web ブラウザーでテキストファイルを開いて結果を確認する (2回目以降はファイルをリロードする)

という手順を踏んでいました。
PC にプリインストールされているメモ帳と Web ブラウザーさえあればすぐに Web ページを作ることができるのですが、メモ帳と Web ブラウザーの往復が面倒でした。
そこで、Web ブラウザーだけで HTML を即座にプレビュー表示する HTML を作って上記の手順を不要にしました。
文字の置換機能付きです。
必要としている方がいらっしゃったらご自由にお使いください。

blog.fujiu.jp 手入力した HTML を即座にプレビュー表示する HTML

環境

Windows 10
Firefox 70 と Internet Explorer 11 で確認済み

ソース

使い方

画面上部のテキストエリアに HTML を入力すると画面下部にプレビューされます。
Firefox や Internet Explorer の F12 キー開発ツールと併用するとデバッグがはかどります。
「保存する」ボタンで入力した内容をファイルに保存できます。
Web ブラウザーを終了したりリロードすると入力した内容が消えてしまう点は要注意です。

2018年3月17日土曜日

[JavaScript] エラーを無視して実行する方法

How to forcibly execute mistaked code

JavaScript のコードにエラーがあっても実行を止めない方法をいくつか試してまとめました。
どうしても動作しないコードをスキップして処理を継続したいときに使えそうです。

blog.fujiu.jp [JavaScript] エラーを無視して実行する方法

環境

Windows 10
Internet Explorer 11

未定義の関数のエラーを無視する方法

JavaScript は未定義の関数を実行するとエラーが発生し、その時点で実行が終了します。
たとえば alert を arert にタイプミスした次のコードはエラーで終了します。

arert("arert は未定義の関数");

このようなエラーがあっても実行を続行させるには try catch を使って次のようにコーディングします。

try {
    arert("arert は未定義の関数");
} catch (e) {
}

arert という関数が定義されていれば実行され、定義されていなければ catch (e) の {} の中のコードが実行されます。
実行時に関数が定義されているかわからない環境で使えそうです。

未定義の要素を参照したときのエラーを無視する方法

未定義の要素を参照したときもエラーが発生し、その時点で実行が終了します。
HTML 文章に id="nothing" という要素がない場合に次のコードを実行するとエラーになります。

document.getElementById("nothing").innerHTML = "something";

このコードも try catch で囲めばエラーを起こさず実行出来ますが、別の方法もあります。
次のように if 文を使うとHTML 文章に要素があれば直後の {} の中のコードが実行され、要素がなければエラーにならずに else {} の中が実行されます。
else {} は省略可能です。

if (document.getElementById("nothing")) {
    document.getElementById("nothing").innerHTML = "something";
} else {
}

シンタックスエラー (文法ミス) を無視する方法

上の2点は文法が正常なコードを前提にしています。
JavaScript はシンタックスエラーのコードをそのまま実行できません。
たとえば次のコードは if を iv にタイプミスしているので実行できません。

iv (true) {alert("Error");}

このようなミスを含むコードを実行するためには eval 関数を使います。

eval('iv (true) {alert("Error");}');

eval 関数が実行されるとシンタックスエラーが発生し、その時点で実行が終了されます。
実行を継続するには try catch を使います。

try {
    eval('iv (true) {alert("Error");}');
} catch (e) {
}

これでシンタックスエラーを無視して実行を継続できます。

2017年12月16日土曜日

JavaScript でグラフを作る方法 (Chart.js)

meta name='twitter:description' content='JavaScript で Webブラウザーにグラフを描けるChart.jsを使ってみました。多機能で便利です。' />

How to draw charts on web browsers with Chrat.js

Chart.js はWebブラウザーにグラフを描画できるMITライセンスのオープンソースJavaScriptライブラリーです。
グラフはWebブラウザーのcanvasタグで描画するため、普及率の高いWebブラウザーに対応できます。
この Chart.js を使ってWebブラウザー用のグラフを作ってみました。

blog.fujiu.jp JavaScript でグラフを作る方法 (Chart.js)

環境

Windows 7、Internet Explorer 11
Windows 10、Edge

固定データの棒グラフを表示する

Chart.js でグラフを表示するには、グラフ化したいデータを JSON 化し、 Chart.js のクラスを呼び出すだけです。
気象庁が公開しているCSVファイルから一部抜粋して簡単な棒グラフを作ってみました。

これをEdgeで表示するとこうなります。

14～19行目のJSONデータを表示したい内容に合わせて変更すればグラフを変更出来ます。

公開データをグラフ化する

一般公開されているCSVファイルの内容をJSONに変換してグラフ化してみました。
気象庁が定期的に更新しているCSVファイルをリアルタイムに棒グラフ化します。
ただし、このブログを書いている時点では気象庁のWebサイトはクロスドメインアクセス (Access-Control-Allow-Origin) を開放していないため Windows 7 のInternet Explorer 11 でしか動作確認出来ませんでした。

参考にしたコンテンツ

Chart.js は棒グラフのほかにも折れ線グラフ・レーダーチャート・円グラフ・バブルチャート・散布図などがあり、棒と折れ線を重ねることもできます。
そのほか色やアニメーションなど多彩な機能を備えています。
ただし公式サイトは英語のみ。
http://www.chartjs.org/docs/latest/

2017年10月28日土曜日

Visual Studio Code で Angular の開発環境を構築する方法

How to make Visual Studio Code adapt for Angular

最近のはやりのWebアプリケーション開発ツール Angular を Visual Studio Code で利用する方法を調べてその結果をまとめました。

環境

Windows 10
Visual Studio Code 1.17.1

Node.js をインストールする

Node.js は Angular で使われるWebサーバーやツールが含まれている実行環境です。
Node.js を公式サイト https://nodejs.org/en/ からダウンロードしてインストールします。
今回は Recommended For Most Users のインストーラーをインストールしました。

blog.fujiu.jp Visual Studio Code で Angular の開発環境を構築する方法

Angular CLI をインストールする

Angular CLI はAngularを利用するためのツール集です。
Node.js に含まれる npm コマンドが必要です。
コマンドプロンプトから次のコマンドを入力します。

npm install -g @angular/cli

%USERPROFILE%\AppData\Roaming\npm にファイルがインストールされました。

Angular プロジェクトを作成する

Cドライブのルートにサブフォルダーを作り、そこに開発するプロジェクトを作成します。
コマンドプロンプトから次のコマンドを入力します。

cd C:\
ng new ang-app

1行目はカレントフォルダーの移動、3行目が Angular プロジェクトを作成するコマンドです。
ng は Node.js に含まれるコマンドです。

ang-app というフォルダーに　"Welcome to app!!" というAngularアプリケーションのひな形が作られるので次のコマンドで起動します。

cd C:\ang-app
ng serve

ng serve はAngularプロジェクトをWebサーバーで起動させるコマンドです。
下の画像のように Compiled successfully と表示されたら

Webブラウザーで http://localhost:4200/ を開くと次のような画面が表示されれば成功です。

コマンドプロンプトに　Compiled successfully と表示されている間は"Welcome to app!!"が起動したままですが、コマンドプロンプトで Ctlr + C を入力すると停止できます。

Visual Studio Code で Angular プロジェクトを開く

コマンドプロンプトに次のコマンドを入力するとVisual Studio Code で Angular プロジェクトのフォルダーを開けます。

code C:\ang-app

Angular開発するために Visual Studio Code に拡張機能をインストールする必要があると思ったのですが、デフォルトでシンタックスハイライトやコード補完が機能していました。
F12キーで「定義に移動」もできました。

ng serve を開始して app.component.ts を編集して上書き保存したら自動で再コンパイルされWebブラウザーがリロードし、結果を即座に確認できました。

結論

Visual Studio Code は Angular の開発環境としてそのまま使える
ただしHTMLを WYSIWYG でコーディングできないので、HTMLをプレビュー表示する拡張機能をインストールするかほかのエディターとの併用すると良さそうです。
今回はコマンドラインの入力にコマンドプロンプトを使いましたが、Visual Studio Code のターミナルを使うと効率が上がりそうです。

参考にしたコンテンツ

Angular JavaScript Tutorial in VS Code
Home · angular/angular-cli Wiki · GitHub

2014年5月31日土曜日

JavaScriptをWebコンテンツを見ながらデバッグする [Intenet Explorer] [firefox]

How to debug the JavaScript sources with watching the web contents
ホームページを作ったり、Webアプリケーションを開発しているとJavaScriptを使うことがあるかと思います。
JavaScriptを動かしながらじっくり検証したいことこともあるかと思います。
そんなときはInternet Explorer10・11やFirefoxの開発ツールを使うと簡単にデバッグすることが出来ます。

Inernet Explorer 11の場合

F12キーを押します。またはAltキーを押してメニューの
ツール - F12 開発ツール
をクリックします。

画面の下に開発ツールの画面が表示されるので一番左側の「デバッガー」(虫のイラストのような記号)というボタンをクリックします。

フォルダーのアイコンをクリックすると読み込まれているファイルが表示されます。デバッグしたいJavaScriptが書かれたHTMLファイルかJavaScriptファイルを選択します。

ソースが表示されるので、JavaScriptのステートメントの左側をクリックするとブレークポイントを置けます。

JavaScriptを実行させてブレークポイントで一時停止させてみました。変数にマウスポインターを重ねると内容が表示されます。ウォッチ式にもされます。
一時停止から再開するときは右向き三角ボタンかF5キー、ステップごとに実行するにはステップインボタンかF11キーで操作します。
console.logを実行すればコンソールに文字列を出力することもできます。

開発ツールを終了するにるにはF12キーを押すか、開発ツール画面右上の×ボタンをクリックします。

Inernet Explorer 10の場合

F12キーを押します。またはAltキーを押してメニューの
ツール - F12 開発ツール
をクリックします。

画面の下に開発ツールの画面が表示されるので「スクリプト」というタブをクリックします。

ソースが表示されるので、JavaScriptのステートメントの左側をクリックするとブレークポイントを置けます。

ブレークポイントで停止させるには「デバッグ開始」ボタンをクリックします。
「デバッグ開始」ボタンはクリックするたびに「デバッグ停止」ボタンに変化します。

開発ツールを終了するには「デバッグ停止」ボタンをクリックし、F12キーを押すか、開発ツール画面右上の×ボタンをクリックします。

Firefox 29の場合

F12キーを押します。またはAltキーを押してメニューの
ツール - Web開発 - 開発ツールを表示
をクリックします。

画面の下に開発ツールの画面が表示されるので「スクリプト」というデバッガをクリックします。

開発ツール左側のソースの欄に読み込まれているファイルが表示されます。デバッグしたいJavaScriptが書かれたHTMLファイルかJavaScriptファイルを選択します。

ソースが表示されるので、JavaScriptのステートメントの左側をクリックするとブレークポイントを置けます。

JavaScriptを実行させてブレークポイントで一時停止させてみました。変数にマウスポインターを重ねると内容が表示されます。ウォッチ式にもされます。
一時停止から再開するときは開発ツール画面の左上にある右向き三角ボタンかF8キー、ステップごとに実行するにはステップインボタンかF11キーで操作します。

開発ツールを終了するにるにはF12キーを押すか、開発ツール画面右上の×ボタンをクリックします。

まとめ

異なるブラザーでもほぼ同じことが出来ました。
方法を知っておくと開発が楽になりそうです。

2014年5月17日土曜日

HTMLソースのミスやエラーを素早くチェックする

How to parse HTML sources quickly

インターネットを利用する上で、HTMLのソースを入力する機会はあると思います。
Webアプリの開発者ならもちろん、ブログや掲示板への書き込みなどHTMLタグを使うことがあると思います。
書き込みをした後にHTMLタグにミスがあったこととに気がついた、なんて経験をお持ちの方は多いではないでしょうか。
HTMLタグをチェックするには The W3C Markup Validation Service というサイトが便利です。
※はじめにAbout The W3C Markup Validation Service(英語のみ) http://validator.w3.org/about.html をお読みください。

1.

http://validator.w3.org/
を開きます。

2.

Validate by Direct Inputをクリックします。

3.

テキストエリアにチェックしたいHTMLソースを入力して Check をクリックします。
※個人情報や機密方法を含むHTMLソースは入力しないでください。該当する文字を別の文字に置き換えるなど、別の方法でチェックしてください。

4.

エラーがあるとエラーの数が表示されます。

下の方にスクロールするとエラーの詳細が表示されます。

エラー内容はともかく「Line 1」とあるので1行目に問題があることが分かります。

5.

エラーがなければPassedと表示されます。

最近はHTMLソースを自動生成するサービスを利用する機会が増えたため手打ちする機会は少なくなりました。
ですが、万が一HTMLソースにミスがあるのを見落とすと検索エンジン最適化(SEO)に悪影響が出る可能性もあります。
Webコンテンツを管理している方ならチェックすることをお勧めします。
ちなみに最初の画面でURIを入力すると公開されているWebコンテンツのHTMLソースを丸ごとチェックできます。

2014年3月22日土曜日

[JavaScript] XMLコンテンツをWebに表示する

Try to show the XML Web content with JavaScript

今回作るアプリケーション

XMLコンテンツJavaScriptを使ってブラウザーに表示させるブラウザーアプリを作ってみました。
JavaScriptネタはいろいろなサイトで紹介されていて出尽くしてる気がしますが一つくらい自分で作ってみようと思い至りました。

開発環境は次の通りです。
・Windows8 64bit + Internet Explorer 10
・Windows7 32bit + Internet Explorer 11
※Firefoxでは動作しませんでした。

JavaScriptでWebコンテンツを利用する上での問題点

仕様によりJavaScriptで扱えるWebコンテンツは制限があります。
Webサービスを提供するサーバーのドメイン名やプロトコル(オリジン)と、JavaScriptのコンテンツが置かれているサーバーのドメイン名が一致している場合に限ります。
クロスドメイン制限などと呼ばれるようです。
ただし、Webサービスを提供するサーバーが次のようなヘッダーを出力する場合はドメイン名が異なるサーバーからでも利用することができます。
Access-Control-Allow-Origin: *

ただし、最近は異なるオリジンにアクセスできるブラウザーもあるようです。
Internet Explorer 10/11では、ローカルドライブに保存されたhtmlファイルを実行する場合はクロスドメインの制限を受けないようで期待通りの動作をしました。
今回は、MSN産経ニュース http://sankei.jp.msn.com/rss/news/flash.xml をJavaScriptでWebに表示することにします。

ソース

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>sample</title>

  <style type="text/css">
    * { font-family: Arial, Helvetica, Sans-Serif; }
    table, th, td { vertical-align: top; border: solid 1px; }
    .nowrap_area { white-space: nowrap; }
  </style>

  <script type="text/javascript"><!--
  function showContent() {
    //ボタンを操作不可にする (連打禁止措置)
    var update_button = document.getElementById("update_button");
    update_button.disabled = true;

    //MSN産経ニュースのXML Webサービスを取得
    var url = "http://sankei.jp.msn.com/rss/news/flash.xml";
    var request = new XMLHttpRequest();
    request.open("GET", url, true);
    request.send("");
    request.onreadystatechange = function () {
      // readyState=4 はデータ受信完了
      if (request.readyState == 4) {
        // status=200 はリクエスト成功
        if (request.status == 200) {
          //テーブルに表示済みの内容を削除
          var content_table = document.getElementById("content_table");
          for (var i = content_table.rows.length - 1; i > 0; i--) {
            content_table.deleteRow(i);
          }

          //受信したXMLコンテンツをテーブルに表示
          var xml = request.responseXML;
          var items = xml.getElementsByTagName("item");
          var len = items.length;
          for (var i = 0; i < len; i++) {
            var item = items[i];

            //テーブルに行追加
            var row = content_table.insertRow(-1);

            //テーブルに1列目追加 (見出し)
            var xmlTitle = item.getElementsByTagName("title")[0].firstChild.nodeValue;
            var cell1 = row.insertCell(-1);
            cell1.innerHTML = xmlTitle;

            //テーブルに2列目追加 (概要とリンク)
            var cell2 = row.insertCell(-1);
            var xmlDescription = item.getElementsByTagName("description")[0].firstChild;
            var xmlLink = item.getElementsByTagName("link")[0].firstChild.nodeValue;
            //description要素が配信されない場合はnull
            var description = (xmlDescription != null ? xmlDescription.nodeValue + "<br />" : "")
              + "<a href=\"" + xmlLink + "\" target=\"_blank\">" + xmlLink + "</a>";
            cell2.innerHTML = description;

            //テーブルに3列目追加 (配信日時)
            var xmlPubDate = new Date(item.getElementsByTagName("pubDate")[0].firstChild.nodeValue);
            var cell3 = row.insertCell(-1);
            cell3.innerHTML = xmlPubDate.toLocaleString();
            //CSSで改行禁止に設定したクラス名を追加
            cell3.className = "nowrap_area";
          }
        }

        //データ受信後にボタンを操作可能にする
        update_button.disabled = false;
      }
    }
  }
  //-->
  </script>
</head>
<body>
  <input type="button" value="コンテンツ更新" id="update_button" onclick="showContent();" />

  <table id="content_table">
    <tr>
      <th>見出し</th>
      <th>概要とリンク</th>
      <th>配信日時</th>
    </tr>
  </table>
</body>
</html>

拡張子がhtmlのテキストファイルに次のソースを貼り付けて保存します。今回は sample.html というファイル名で保存しました。
※文字エンコードはBOM無しUTF-8に設定して下さい。

Internet Explorerを起動して保存したファイルをドラッグ・ドロップします。

「ブロックされているコンテンツを許可」ボタンをクリックします。

画面が表示されたら「コンテンツ更新ボタン」をクリックすると

その時点のMSN産経ニュースの情報を表示します。著作権保護のため画像の一部にぼかしを入れてます。

今回のサンプルは、ローカルドライブに保存したHTMLファイルをInternet Explorerで開くことが動作条件なので実用性はありません。

これを応用して、ザ・数唱 / Digit Span PLAY のWebページの表示言語を切替えるのに使ってみました。
http://www.fujiu.jp/AndroidApp/app010_digitspan.shtml

Androidアプリザ・数唱 / Digit span PLAY を公開しました。

2013年11月23日土曜日

[JavaScript] テキストボックスやボタンの幅を変えるアニメーション

JavaScript for widgets Animations
JavaScriptでテキストボックスを伸縮させるのWebコンテンツを作ってみました。

次の環境で動作確認しました。
・32bit版Windows7のInternet Explorer10
・64bit版Windows8のInternet Explorer10
・Windows8のFirefox25

これはテキストボックスは通常の大きさです。

このテキストボックスにカーソルをフォーカスすると幅がグイーンと伸びます。

カーソルを移動してフォーカスを失うとアニメーションしながら元の幅に戻ります。

以下ソースです。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8" />
 <title>要素の伸縮アニメーション</title>
 <script type="text/javascript"><!--
 function stretchElement(id, from, to, diff) {
  var txtWidth = from;
  var elem = document.getElementById(id);
  var timer;

  function stretch() {
   if (timer != null) {
    clearTimeout(timer);
   }

   txtWidth += diff;
   elem.style.width = txtWidth + "px";

   var isReflexive = false;
   if (diff > 0 && txtWidth <= to) {
          isReflexive = true;
   } else if (diff < 0 && txtWidth >= to) {
       isReflexive = true;
   }

   if (isReflexive) {
       //再帰呼出し
       timer = setTimeout(arguments.callee, 10);
   } else {
       elem.style.width = to + "px";
   }
  stretch();
 }
 //-->
 </script>
</head>
<body>
 <input
  type="text"
  id="txt1"
  onfocus="stretchElement('txt1', 200, 400,  8);"
  onblur ="stretchElement('txt1', 400, 200, -8);"
  style="width: 200px;" />

 <div style="text-align: center;">
  <input type="button"
   id="btn1"
   onmouseover="stretchElement('btn1', 200, 600,  24);"
   onmouseout ="stretchElement('btn1', 600, 200, -24);"
   style="width: 200px;" value="伸縮するボタン" />
 </div>
</body>
</html>

stretchElement関数が今回のスクリプトです。
第1引数 : 要素のID名
第2引数 : アニメーション開始時の横幅(px単位)
第3引数 : アニメーション終了時の横幅(px単位)
第4引数 : 10ミリ秒あたりの変化量(px単位)。大きければ速く、小さければ遅くアニメーションします。

使い方はこのようになります。
<input
type="text"
id="txt1"
onfocus="stretchElement('txt1', 200, 400, 8);"
onblur ="stretchElement('txt1', 400, 200, -8);"
style="width: 200px;" />

onfocus="stretchElement('txt1', 200, 400, 8);"
が「フォーカスされたら200pxから400pxに伸びる、10ミリ秒あたり8pxの幅で」という意味になります。

onblur ="stretchElement('txt1', 400, 200, -8);"
は「フォーカスを失ったら400pxから200pxに縮む、10ミリ秒あたり8pxの幅で」という意味です。

テキストボックス以外にも適用できます。
たとえば
<input type="button"
id="btn1"
onmouseover="stretchElement('btn1', 200, 600, 24);"
onmouseout ="stretchElement('btn1', 600, 200, -24);"
style="width: 200px;" value="伸縮するボタン" />
と書けば、マウスポインターを重ねるたびに伸びたり縮んだりするボタンができます。

改善の余地はありますが、ホームページのソースをHTML5に置き換える作業をしていて何となく思いついたので書いてみました。

以上、参考になれば幸いです。

新アプリケーション

2020年2月22日土曜日

How to register dubious ID at Yahoo Auction blacklist all at once

環境

実手順

要注意IDリスト (http://ochisatsu.com/caution/) のIDを抽出する方法

抽出した ID をヤフオクのブラックリストに登録する方法

Firefox に Addon の Selenium IDE をインストールする

Selenium IDE のスクリプトをダウンロードし展開する

Selenium IDE を起動してスクリプトファイルを開く

関連ブログ

2019年11月30日土曜日

HTML Previewer in web browser

環境

ソース

使い方

関連ブログ

2018年3月17日土曜日

How to forcibly execute mistaked code

環境

未定義の関数のエラーを無視する方法

未定義の要素を参照したときのエラーを無視する方法

シンタックスエラー (文法ミス) を無視する方法

関連ブログ

2017年12月16日土曜日

How to draw charts on web browsers with Chrat.js

環境

固定データの棒グラフを表示する

公開データをグラフ化する

参考にしたコンテンツ

関連ブログ

2017年10月28日土曜日

How to make Visual Studio Code adapt for Angular

環境

Node.js をインストールする

Angular CLI をインストールする

Angular プロジェクトを作成する

Visual Studio Code で Angular プロジェクトを開く

結論

参考にしたコンテンツ

関連ブログ

2014年5月31日土曜日

Inernet Explorer 11の場合

Inernet Explorer 10の場合

Firefox 29の場合

まとめ

関連ブログ

2014年5月17日土曜日

1.

2.

3.

4.

5.

関連ブログ

2014年3月22日土曜日

今回作るアプリケーション

JavaScriptでWebコンテンツを利用する上での問題点

ソース

関連ブログ

2013年11月23日土曜日