月別: 2017年9月

(25) 文字の縁取り

上下左右にぼかし無しで影を付ければよい。

text-shadow: -1px -1px 0 #222,
              1px -1px 0 #222,
             -1px  1px 0 #222,
              1px  1px 0 #222;

文字に縁取りを加える。

ぼかし有りだとこんな感じ。

text-shadow: -1px -1px 2px #222,
              1px -1px 2px #222,
             -1px  1px 2px #222,
              1px  1px 2px #222;

文字に縁取りを加える。

太くする場合は斜め方向だけでなく、上下左右方向にも影を付ける。

text-shadow: -2px -2px 0 #222,
              2px -2px 0 #222,
             -2px  2px 0 #222,
              2px  2px 0 #222,
             -2px  0   0 #222,
              2px  0   0 #222,
              0   -2px 0 #222,
              0    2px 0 #222;

文字に縁取りを加える。

でないとこうなる。

文字に縁取りを加える。


(24) 画像の直リンクを禁止する方法

やりたいこと

他サイトから、自サイト内の画像への直リンクを禁止したい。
すなわち、他サイトの一部として自サイトの画像ファイルが表示されるのを禁止したい。

なぜならば…
自サイトを設置しているレンタルサーバーの転送量制限に影響するから。
自サイトを設置しているレンタルサーバーの負荷率が上がるから。

自分以外のアクセスがほぼ無いこのサイトでは気にする必要もないのですが… ^^;)

実現方法

.htaccessに以下を追記する。このファイルを画像が置いてあるディレクトリに置く。

SetEnvIf Referer "{自サイトのURL}" ImgRefOK
Order deny,allow
Deny from all
Allow from env=ImgRefOK

説明

1行目: もし「Referer」が「{自サイトのURL}」だったら環境変数「ImgRefOk」をセットする。
2行目: これから deny → allow の順に記述する。
3行名: とりあえず全部拒否する。
4行目: もし環境変数「ImgRefOk」が設定されているならば許可する。

注意

当然だが、HTTPで Refererが送られてこなければこの対策は使えない。
使えないというか、その閲覧者は常に画像が見られない。
本来見えてほしい人にも見えなくなってしまう…

実験

こんなHTMLを自サーバー、他サーバーに置いて実験してみる。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body>
<p>hp.dogrow.netからのアクセス時のみ、↓の枠内に画像が表示されます。</p>
<div style="border:2px #000 solid;margin:5px;padding:5px;display:inline-block">
<img src="//hp.dogrow.net/sample/00024/img/sample.jpg">
</div>
</body>
</html>

(1) 他サーバーに設置した場合

こちら

※当然だが対象画像がキャッシュに残っていれば表示される。

(2) 自サーバーに設置した場合

こちら


(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


(22) CREATEJSでアニメーション (#1)

CREATEJSを使ってJavaScriptでアニメーションをさせてみる。

公式サイトはこちら(↓) TOPページのアニメーションがとってもクールです。

■練習テーマ

まずは簡単なものから、ということで矩形枠内をボールが転がるアニメーションを作る。
壁に当たると時計回りに90度回転して跳ね返る。(処理簡略化のため物理法則とは異なる。)


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

■プログラム

index.html

・6行目:CREATEJSを読み込む。
・7行目:自作のアニメーションスクリプトを読み込む。
・9行目:ページロード完了時にアニメーションを開始する。ID=viewの canvasに表示させる。
・15行目:アニメーションを表示する canvas を用意する。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//code.createjs.com/createjs-2015.05.21.min.js"></script>
<script src="./test.js"></script>
<script>
$(document).ready(function(){
  var obj = new CjTest({id:'view'});
});
</script>
</head>
<body>
<canvas id="view" width="800" height="600" style="border:2px #000 solid;background:#ffe"></canvas>
</body>
</html>

test.js

自作のアニメーションスクリプト。
・30FPSでボールが canvas内を転がる。
・メソッドは3個 init(), makeBall(), movrBall()
・18行目:30FPSの周期処理を起動する。この中でボールの移動と描画更新を行う。

function CjTest(args){
  this.init(args);
}
// prototype
CjTest.prototype = {
  init: function(args){
    // create stage
    this.stage  = new createjs.Stage(args.id);
    // draw ball
    this.canvas = $('#'+args.id);
    this.stageWidth  = this.canvas.attr('width');
    this.stageHeight = this.canvas.attr('height');
    this.makeBall();
    // start animation
    createjs.Ticker.setFPS(30);
    createjs.Ticker.addEventListener('tick', function(){
      this.moveBall();
      this.stage.update();
    }.bind(this));
  },
  makeBall: function(){
    // create sprite
    this.sprite = new createjs.Shape();
    // draw ball
    this.ball_r = 10;
    this.half_r = 5;
    this.sprite.x = this.stageWidth  / 2;
    this.sprite.y = this.stageHeight / 2;
    this.sprite.graphics.beginFill('#f00').drawCircle(0, 0, this.ball_r);
    this.stage.addChild(this.sprite);
    this.stage.update();
    this.sprite.directionRad = 1;
  },
  moveBall: function(){
    var x, y;
    while(1){
      x = this.sprite.x + Math.cos(this.sprite.directionRad) * 10;
      y = this.sprite.y + Math.sin(this.sprite.directionRad) * 10;
      if(this.half_r <= x && x < this.stageWidth  - this.half_r &&
         this.half_r <= y && y < this.stageHeight - this.half_r){
         break;
      }
      this.sprite.directionRad = this.sprite.directionRad + (Math.PI / 4);
    }
    this.sprite.x = x;
    this.sprite.y = y;
    this.stage.update();
  }
};

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


(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