カテゴリー: JavaScript/JQuery

(23) CREATEJSでアニメーション (#2) ボールがマウスに追従

前回の (22) CREATEJSでアニメーション (#1) を改造し、マウスの動きにボールを追従させてみる。



実行サンプルはこちらです。

■プログラム

プログラムの変更箇所は1関数だけ。

test.js

CjTest::moveBall()内に記述している移動先座標の算出処理をまるまる変更する。
便利なことに、stage内に入ったカーソルポインタの座標が stage.mouseX, stage.mouseY に格納されている。ボールはこの座標を目指して1回のtick関数実行時に
 カーソルポインタまでの距離 x 0.1 [pixel]
だけ移動させる。カーソルポインタまでの距離が短くなると 1回の移動距離も短くなり、まるで加速度がついているように見える。

moveBall: function(){
  this.sprite.x += (this.stage.mouseX - this.sprite.x) * 0.1;
  this.sprite.y += (this.stage.mouseY - this.sprite.y) * 0.1;
  this.stage.update();
}

実行サンプルはこちらです。
何だかペットのようでかわいいw


(21) JavaScriptファイルのサイズ削減

やりたいこと

JavaScriptファイルのダウンロード負荷を減らすために文字数を少なくしたい。
すなわち minified file にしたい。

実現方法

sedコマンドで以下のテキスト変換を行う。
1) 行頭の空白文字を削除
2) コメント削除
3) 改行文字削除
4) 空行削除
5) 連続した空白文字を一つにまとめる

上記の5つを以下のコマンドで行う。

TRG=xxxxxx.js
sed -i -r -e "s/^\s+//g" $TRG
sed -i -e "s%//.*$%%g" $TRG
sed -i -e "/^$/d" $TRG
sed -i -e ':loop; N; $!b loop; s/\n//g'  $TRG
sed -i -r -e "s/\s+/ /g" $TRG

(16) ボタン押下時にカーソル位置に文字列を挿入

ボタン押下により、textareaで編集中の文章のカーソル位置に、任意の文字列を挿入したい。
これをJavaScriptで実装する。

ほぼほぼこちらの内容を参考にさせていただいた。
http://qiita.com/noraworld/items/d6334a4f9b07792200a5

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>
$(function(){
  $("a[name='option']").click(function(){
    var textarea = document.querySelector("textarea[name='bun']");
    var sentence = textarea.value;
    var len      = sentence.length;
    var pos      = textarea.selectionStart;
    var before   = sentence.substr(0, pos);
    var word     = $(this).text();
    var after    = sentence.substr(pos, len);
    sentence = before + word + after;
    textarea.value = sentence;
    return false;
  });
});
</script>

</head>
<body>

<textarea name="bun" style="width:100%;height:10rem"></textarea>

<a name="option" href="">[山田さん]</a>
<a name="option" href="">[加藤さん]</a>
<a name="option" href="">[岡本さん]</a>

</body>
</html>

サンプルはこちらです。
//hp.dogrow.net/sample/00016/


(15) HTTPS通信下でJQueryが動かない… [解決]

原因:

読み込もうとしている JQueryのパスが http指定だった…

対策:

変更前

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

変更後

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

※httpの部分を外した。 → ブラウザが適切に補完してくれる。


(8) テキストをクリップボードにコピーする。

WEBブラウザ上にテキストを表示し、その下に [クリップボードにコピーする] ボタンを設置する。
このボタンを押すと、WEBブラウザ上の特定領域内のテキストがクリップボードにコピーされる。
ちょっと便利かも。

手順1:clipboard.jsをホームページに設置する。
(1) https://clipboardjs.com/からダウンロードする。
(2) 解凍した中身を自分のホームページスペースにアップロードする。

手順2:[クリップボードにコピーする]を実装し、そのページをアップロードする。

動作サンプルはこちら
http://hp.dogrow.net/sample/00008/

HTMLファイルの記述

<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="/xxxxx_mypage_xxxxx/clipboard.js/dist/clipboard.min.js"></script>
<script>
$(function () {
  var clipboard = new Clipboard('.mybtn');
});
</script>
</head>

<body>
<pre class=mytext>
あいうえお
かきくけこ
</pre>
<button class=mybtndata-clipboard-target='#mytext'>クリップボードにコピーする</button>
</body>
</html>