カテゴリー別アーカイブ: Web Applicaation

JavaScript Event

DOM Keyboardイベントで押されたキーを判別するにはkeyプロパティを使う

JavaScript はたった数年で浦島太郎だ!
見つけてビックリ。
いやコンピューター関連は全部そうなんだけど。

JXA をやっている時に Objective-c 関連のサイトを探しまくった時。
日本の個人サイトは全部情報が古いまま放置ばかりででチト頭にきたことがある。
Linux 関連ではもう使えないコマンドを書いたブログの放置多すぎ!
古い情報なんか何も役に立たない。

そうはなりたくはないので色々と書き換えすることに。
Fedora Tips 以下も古いよな、次はココかな。

canvas size

Smart Phone Game ページを追加。
というか「ひよこを倒す」の糞みたいなコードを ES6 で書き換えた。
iPhone と Google Chrome の開発者モードでしか確認していない、多分大丈夫。

んでドハマリしたこと。
canvas のサイズは style で指定してはいけない。
こんなページをみつけてやっと解決した。

HTML canvas 基礎0 – socialakiba wiki

var ES6Game = class {
    constructor() {
        // etc...
    doBlockBreaking() {
        this.canvas = document.createElement("canvas");
        // Do not use.
        //this.canvas.style.width = `${document.documentElement.clientWidth}px`;
        //this.canvas.style.height = `${window.innerHeight}px`;
        // OK!
        this.canvas.width = document.documentElement.clientWidth;
        this.canvas.height = window.innerHeight;

と。

style 指定だと moveTo 等がワケワカな位置になってしまう。
それ以外は何も難しいことはなかった。

とにかく古臭いコードの一掃だ!

click addEventListener

前回なにげに書いたコードを見返してアレ?となった。
addEventListener には click イベントを指定できるのか。
touchend とか mouseup みたいなのでなくていいんだね。

タッチパネルとマウスの両方がこの指定でイケるみたい。
それぞれでどんな感じになるか実験ページを書いてみよう。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>タップとクリック</title>
<!-- for Smart Phone -->
<meta name="viewport" content="
    width=device-width,
    initial-scale=1.0,
    minimum-scale=1.0,
    maximum-scale=1.0,
    user-scalable=no" />
<style>
body {
    -webkit-text-size-adjust: 100%;
    font-size: 24pt;
}
div {
    background-color: #000088;
    border: 1px solid #0000ff;
    color: #ffffff;
}
</style>
<script type="text/javascript"><!--

    var counts = [0, 0, 0];
    var touch, mouse, click = null;

    var init = function() {
        // Touch
        //if (window.TouchEvent) {
            touch = document.getElementById("ID_TAP");
            touch.addEventListener("touchend", function() {
                counts[0] += 1;
                touch.innerHTML = "タップカウント: " + counts[0];
            });
        //}
        // Mouse
        mouse = document.getElementById("ID_MOUSE");
        mouse.addEventListener("mouseup", function() {
            counts[1] += 1;
            mouse.innerHTML = "マウスカウント: " + counts[1];
        });
        // Click
        click = document.getElementById("ID_CLICK");
        click.addEventListener("click", function() {
            counts[2] += 1;
            click.innerHTML = "クリックカウント: " + counts[2];
        });
    }
    //-->
</script>

</head>
<body onLoad="init()">

<div id="ID_TAP">タップカウント: 0</div>
<br />
<div id="ID_MOUSE">マウスカウント: 0</div>
<br />
<div id="ID_CLICK">クリックカウント: 0</div>
<br />
<p><a href=".">Back</a></p>
</body>
</html>

タップとクリック

tap_click

あれ?タッチパネルエミュレートで mouseup イベントが発生するのね。
iPhone Safari で試してもやはり同じ、そういうものなのか。

touchend は当然タッチパネルかエミュレートでしか反応しない。
まあこのイベントは本来マルチタッチ用途ですし使い道が違うかと。

click イベントという名前も直感的だし両対応だし今後はコイツだな。
しかし HTML5 関連サイトでもあまり見かけないような。

a download

Web を回って気になるタグを見つけた。
a 要素には download 属性を付けることができるんですね。

a 要素 – HTML | MDN

Safari は現在未対応か、残念。
Apple はセキュリティ関連で対応しないのかもだけど。

JavaScript – aタグのdownload属性 – Qiita

こんなことができるみたい。
いや、これって通常はダウンロードできないファイルに使えないか?
application/x-php とかね。
PHP が実行される前のファイルのままダウンロードできるかも。

<a href="#" download="index.php">PHP ファイルをダウンロード</a>

とやってみると Chrome は OK だけど Firefox はダメ。
PHP は当然のように実行されてしまった、残念。
うーん、素直に MDN の方法を試してみる。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>a download</title>
<!-- for Smart Phone -->
<meta name="viewport" content="
    width=device-width,
    initial-scale=1.0,
    minimum-scale=1.0,
    maximum-scale=1.0,
    user-scalable=no" />
<script type="text/javascript"><!--
    var init = function() {
        var link = document.createElement('a');
        link.innerHTML = 'download php file';

        link.addEventListener('click', function(ev) {
            link.href = 'index.php';
            link.download = "download.php";
        }, false);
        document.getElementById("ID_DL").appendChild(link);
    }
    //-->
</script>
</head>
<body onLoad="init()">
<div id="ID_DL"></div>

<br />
<p><a href=".">戻る</a></p>
</body>
</html>

a download

a_download

リンクの下線が表示されないしマウスカーソルも矢印のまま。
でもクリックすれば Chrome, Firefox 共ダウンロードできた。
クリックした後は下線が付くのは何故なんだろうな?

PHP はやはり実行された後のファイルしか取得できない。
そういう使い方ではないということでしょう。

でも通常はダウンロードにならない PHP でもダウンロードになるのは確認できた。
iOS 版 Chrome はガン無視されたじゃねーかコノヤロウ。
モバイルで便利そうな仕組みなのにモバイル未対応という…
まあ今後どうなるかはワカンナイZE!

JavaScript clientWidth

あけましておめでとうございます。

さて元旦からいきなりですが。
iOS9 Safari Bug | PaePoi
やっとコレの回避策が解りました。

【Javascript】ブラウザの表示領域サイズ取得について – すたら日記

うおぉ、document.documentElement.clientWidth を使うのか!
古いページだけどモバイル Safari でもこのメソッドは使えるようです。
window.innerWidth のバグじゃなかったのね。

ついでに、window.outerWidth は Safari で使えないようだ。
それはもうどうでもよくて。

早速パソコン表示は 728px バナーに戻すとしよう。
よしよし元通り、パソコン用でモバイルバナーはやはり変だったし。

チェック用途の実験ページも書き換えて。
ソースはパソコンで Ctrl+U ね(手抜き)
画面サイズ取得

safari_width

あれ?キチンと window.innerWidth で取得できている。
試しに document.documentElement.clientWidth をコメントアウト。
やはり駄目、取得後ならイケるみたいだが理由はワカンネエ!
レスポンシブ・ウェブデザインってムズい!

以下おまけ。

aqua

無料ガチャでアクアきたー!
って水属性ばかり強くなってどないせーと、風と光をくれよ…
特攻は HR 2 人、まあいいかお年玉をもらった。