早速何か作ってみた

せっかく本読んだので何か作らない訳にはいきません。というわけでいくつか物を作ってみました。

greasemonkeyを使ったyoutubeのダウンローダ

1のgreasemonkeyはHD画質の動画が上げられるようになったYouTubeから高画質mp4をダウンロードする物です。作りも雑ですがとりあえずソースは貼ってみます。

// ==UserScript==
// @name YouTube Download Link maker
// @namespace http://light-of-moe.ddo.jp
// @description youtube downloads
// @include *
// ==/UserScript==

(function(){
    if (document.getElementById('download-youtube-video') ==null &&
       !!(document.location.href.match(/http:\/\/[a-zA-Z\.]*youtube\.com\/watch/))) {
	var swfArgs= window.swfArgs || unsafeWindow.swfARgs;
	var yt_mp4_path='http://www.youtube.com/get_video?fmt=22&video_id='+ swfArgs['video_id']+'&t='+ swfArgs['t'];
	var div_embed=document.getElementById('watch-embed-div');
	div_embed.innerHTML=div_embed.innerHTML+'<br /> <div id=\'download-youtube-video\'><a href=\''
	    +yt_mp4_path+'\'><button>Download as MP4</button></a></div>';}})();

Amazonの商品紹介みたいな画像がくるくる回っているやつ

これは結構似たようなものを見ますが個人的に画像を動かしてみたかったのでテストで作ってみました。画像は適当にグーグル先生から色々拝借しました。

http://light-of-moe.ddo.jp/~sakura/javascript/roundimage/

色々詳細は続きを読むで...。

メインのスクリプトはこんな感じです。コメントも有りませんがきっと読めば分かります。

続きを読むからどうぞ。

function AnimationImage(image,start){

  this.image = image;
  this.counter = start;

  this.right = image.parentNode.clientWidth - image.width;
  this.initialWidth = this.image.width;
  this.initialHeight = this.image.height;

  
 this.X = this.right/2 + this.right/2  * Math.sin(this.counter/180*Math.PI);
 this.image.style.left = this.X + "px";

  this.image.style.height = this.initialHeight * 0.75 + this.initialHeight * 0.25 * Math.cos(this.counter/180*Math.PI) + "px";
  this.image.style.width  = this.initialWidth  * 0.75 + this.initialWidth  * 0.25 * Math.cos(this.counter/180*Math.PI) + "px";
  if(90 < this.counter && this.counter <270){
    this.image.style.zIndex=2;
  }else{
    this.image.style.zIndex=3;
  }
}

AnimationImage.prototype.updateState=function(){
  this.counter+=3;
  this.counter%=360;
  this.right = this.image.parentNode.clientWidth - this.image.width;

  this.X = this.right/2 + this.right/2 * Math.sin(this.counter/180*Math.PI);
  this.image.style.height = this.initialHeight * 0.75 + this.initialHeight * 0.25 * Math.cos(this.counter/180*Math.PI) + "px";
  this.image.style.width = this.initialWidth   * 0.75 + this.initialWidth  * 0.25 * Math.cos(this.counter/180*Math.PI) + "px";


  this.image.style.left = this.X + "px";
  if(90 < this.counter && this.counter <270){
    this.image.style.zIndex=2;
  }else{
    this.image.style.zIndex=3;
  }
}

function getElements(classname, tagname , root){
  if (!root) root = document;
  else if (typeof root == "string") root = document.getElementById(root);
  
  if(!tagname) tagname = "*";
  
  var all = root.getElementsByTagName(tagname);
  
  if (!classname) return all;
  
  var elements = [];
  
  for(var i=0; i < all.length; i++){
    var element = all[i];
    if (isMember(element , classname))
      elements.push(element);
      }
 
  return elements;
  
  function isMember(element , classname){
    var classes = element.className;
    if(!classes) return false;
    if(classes == classname) return true;
    
    var whitespace = /\s+/;
    if(!whitespace.test(classes)) return false;

    var c = classes.split(whitespace);
    for(var i =0; i < c.length; i++){
      if(c[i] == classname)      return true;
    }
    return false;
    }
  }

function updateWorld(){
  for(var i=0;i<AnimationImages.length;i++){
  AnimationImages[i].updateState();
    }
}

var AnimationImages = new Array;
function stop(){
  clearInterval(timer);
  var button = document.getElementById('startButton');
  button.disabled = false;
  var button = document.getElementById('stopButton');
  button.disabled = true;
}
function init(){
  if (AnimationImages.length == 0){
    var images = getElements("image","img","round_image");
    if(!images) return;
    for(var i=0;i<images.length;i++){
      AnimationImages.push(new AnimationImage(images[i],360/images.length * i));
    }
  }
}
function exec(){
  
  var button = document.getElementById('startButton');
  button.disabled = true;
  var button = document.getElementById('stopButton');
  button.disabled = false;
  timer = setInterval(updateWorld,30);
  
}

こんな感じのスクリプトで上手く動いています。

コードの記述的に問題が多い(と自分は思う)のでまとめ。

AnimationImageクラスのコンストラクタとupdateStateメソッドで同じ処理を書いてしまっていますね。これは良くないので気をつけないと駄目ですね。

あと名前空間を無駄に使い過ぎですね。まずグローバル変数が多いのがいけないですね。特にtimer変数などという一般的な名前をグローバルにしては良くないでしょう。モジュール化を念頭においてコーディング出来るようになりたいですね。

技術的な観点からいくつか気になる点のまとめ。

上のと何が違うのかというと、字面で言えない部分をここでは技術的な観点と呼びます。

DOMレベル1のイベントハンドリングを行なっている

==> DOMレベル2の物を使いたい

HTML+CSSの知識が自分にはまだ不十分な点が多い

==>要勉強

FireBugの使い方が分からない。

<script src="./hogehoge.js"></script>で読み込んだ部分にブレークポイントを仕込む方法が分からないので調べる

以上の点が気になります。
日々精進あるのみです。