Home > Javascript Archive

Javascript Archive

コードプリンター 0.1リリース

また大げさに書きましたが、世の中にあるJavascriptのライブラリを下手に使ってソースコードを色分けして印刷するためのツールを作ったので公開しておきます。
google-code-prettifyバージョン
コードプリンター by prettify

dp.SyntaxHighlighterバージョン
コードプリンター by dp.SyntaxHighlighter

サーバに何かデータを送っているわけじゃないので、機密漏洩とかは気にせんでよいです。
firefox3だと


w = window.open("about:blank", '_blank');
w.document.open();
w.document.write('<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">');
w.document.write('<link href="prettify/prettify.css" rel="stylesheet" type="text/css" />');
w.document.write('</head><body>'+$('#printcode').html()+'</body></html>');
w.document.close();
w.document.body.innerHTML = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaa";

みたいなことができて、新しいウインドウを開いて内容を書き込めたんだけど、firefox2だと最後の行がエラーだった。

あと、いつもいつもIEですが、preタグのinnerHTMLに代入すると勝手にエンティティ化されるばかりか改行コードも空白になっちゃうというひどい仕様が私を今の今まで苦しめた。改行コードは以下のようになるらしいです。
http://d.hatena.ne.jp/brazil/20060917/1158465641

こういう大したこと無いツールに結構労力を使っている。

以上

最近のjQuery

なんか1.2.4が怪しかったとかですぐに1.2.5が出てたんだけど、なんか1.2.5はうまく動かないなーと思っていたら1.2.6が出てた。今のところちゃんと動く。

以上

副産品 ImgHider的なブックマークレット

先日の2chまとめサイトをJavadoc風にして仕事している風になるブックマークレット2ch2Javadocの副産品として、画像をただ隠すだけのブックマークレットができました。
こっちはたぶんIEでも動く。IE7では動いた。

以上

2ch2Javadoc-0.1 リリース

なんて大げさな話ではありませんが、個人的に役に立つブックマークレットを作成したので公開してみます。
2chのまとめページをJavadoc風に変換するブックマークレットです。
会社などで2ch系のページを見ている時にモニタを覗き込まれたら大変です。そこでこのブックマークレットは一見するとJavadocを見ているかのように偽装してくれます。2chを見ながらバリバリ仕事している感が出ますね!

すごく重いですがそんなことは気にしない。Firefoxでしか確認していません。
画像が貼ってある場合は「関連項目:showImage(int)」というのが挿入され、showImage(int)にマウスオーバーすれば表示されます。変な画像が画面にいっぱいだとリスク高いですもんね!
今のところ痛いニュースニュー速クオリティにしか対応してません。というわけで看板に偽りありで、2ch自体は変換できません。会社からはアクセスできないため、個人的には需要がないためです。そのうち他のメジャーなまとめサイトにも対応したいと思います。自分のために。万が一需要があれば本家2chにも対応いたします。

以上

jQueryトリビアルメモ4 要素の追加

最近ボールペンのキャップを閉め損ねて指が青色になって行きます。

javascriptでDOMの要素を追加するにはdocument.createElement()ですよね。


var div = document.createElement("div");
document.body.addChild(div);

jQueryでやるにはどうしたらええのか。最初分からんかったとです。まあ、ひとつには上記のやり方で追加するってのもありです。追加したものもjQueryで使えます。しかしまあ、なんとなくやりたくない。単にタグを追加するには


$("#hoge").append('<a href="http://www.google.com">google</a>');

で子要素に追加できるし、


$("#hoge").appendTo('<a href="http://www.google.com">google</a>');

で後ろに追加できるし、


$("#hoge").before('<a href="http://www.google.com">google</a>');

で前に追加できる。でもこんなことしたら属性をいじれないし、なによりDOMっぽくない。戻り値に追加した要素が入ってくるわけでもない。
でもどうやら$(“<foo>”)でfooタグを追加できるっぽい。そういうわけで以下のように書ける。


$("#hoge").before(
                  $("<a>").attr("href", "http://www.google.com").html("google")
               );

“<a>”でも”<a/>”でもいけた。

以上

Javascriptのすごいライブラリみつけた  Processing.js

Processing.js
これはハンパねえ。
ProcessingをJavascriptに移植したものらしい。Processingというのもよく知らんのだけど、イメージやらアニメーションを簡単に使えるようにしたプログラミング言語。で、それをJavascript上で実現したというのがProcessing.js。
まあ、デモ見てください。

下にもサンプルからのコピペ。WordPressうざいのでiframeで。

ソース:


<html
<head>
<script type="text/javascript" src="http://red-treasure.com/js/processing.js"></script>
<script type="text/javascript">
window.onload = function() {
	var canvas = document.getElementById("canvas");
	Processing( canvas, canvas.previousSibling.textContent );
};
</script>
</head>
<body>
<script type="application/processing">
// All Examples Written by Casey Reas and Ben Fry
// unless otherwise stated.
int num = 60;
float mx[] = new float[num];
float my[] = new float[num];

void setup() 
{
  size(200, 200);
  smooth();
  noStroke();
  fill(255, 153); 
}

void draw() 
{
  background(51); 
  
  // Reads throught the entire array
  // and shifts the values to the left
  for(int i=1; i<num; i++) {
    mx[i-1] = mx[i];
    my[i-1] = my[i];
  } 
  // Add the new values to the end of the array
  mx[num-1] = mouseX;
  my[num-1] = mouseY;
  
  for(int i=0; i<num; i++) {
    ellipse(mx[i], my[i], i/2, i/2);
  }
}
</script><canvas height="200" width="200" id="canvas" name="canvas" />
</body>
</html>

もちろんどんなブラウザで動くと言うわけではなく、むしろFirefox3をターゲットにしてるようですが、IE以外ならまあ動くんじゃないでしょうか。IEでなぜだめかってcanvas使ってるから。
あと、すごい重いらしい。
まだまだベータって感じですが、Processingの2D関連のAPIはすでにほとんど移植済みっぽい。

いろいろデモもあるし、これから発展するんじゃないかなあ。
適当な抜粋デモへのリンク:
http://ejohn.org/apps/processing.js/examples/basic/storinginput.html
http://ejohn.org/apps/processing.js/examples/topics/reflection1.html
http://ejohn.org/apps/processing.js/examples/custom/molten.html

以上

続・ブックマークレット

この前作った入り口発見用のブックマークレット、地味に便利だったため若干改良した。
リンク先のリンクをブックマーク(いみわからんな)

以上

ブックマークレットを作ってみた

頭の頭痛が痛いとか、体の体調が調子悪いなどと言っておくと、なかなか冗長性があってデータ欠損に強いんではないでしょうか。「(頭)の(頭痛)が(痛い)」のカッコのうちどれか1つがかけても意味が通じていい。両端二つはなくてもいいという。

いまさらながらブックマークレットでも作ってみようと思って作ってみた。


javascript:(
    function(){
        var l=[];
        for (i=0;i<document.links.length;i++) {
            if (location.hostname==document.links[i].hostname) {
                l.push(document.links[i].href);
            }
        }
        var rl="";
        for (j=0;j<l.length;j++) {
            rl+='<a href="'+l[j] + '">'+l[j]+'</a><br/>';
        }
        var r=document.createElement('div');
        r.id="LURLR";
        r.innerHTML=rl;
        r.style.position="absolute";
        r.style.left="10px";
        r.style.top="10px";
        r.style.border="2px solid #00FF00";
        r.style.zIndex="100";
        r.style.backgroundColor="white";
        r.style.textAlign="left";
        var b=document.createElement('input');
        b.type="button";
        b.value="Delete";
        b.onclick=function(){document.body.removeChild(document.getElementById("LURLR"))};
        r.appendChild(b);
        document.body.appendChild(r);
    }
)();

まあ、くだらないやつ。どっかのページで使うと、同じドメイン内へのリンクだけ抽出するという、エロサイトの入り口発見にしか使えないような機能。
念のため使い方をメモしておく。
上記のコードを1行にしてコピーしてアドレスバーにぶちこんでEnterするか、以下のリンクを右クリックでお気に入り(ブックマーク)に追加しておいて、適用したいページを開いてブックマークを選択して使う。たぶんFirefoxでしか使えない。
少なくともIE6じゃ使えない。

上みたいにするときはaタグのhrefに書いておけばいいが、二重引用符を&quot;(半角で)にしておかないとだめ。
暇があればもうちょっとまじめな奴、サーバと連携したりとかしてもいいなぁ、とは思う。

以上

マップレット2

空前絶後のマップレット人気にあやかり、引き続きマップレットの話です。

前回、マップレットの大枠だけを示しましたが、どっちかっていうと順番が逆でした。
とっとと作ってみたほうがいい。
というわけで、Mapplet Scratch Pad
これを登録し、エディタにマップレット用のコードを書くと、とりあえず動かしてみれるというスグレモノ。
私もこれで動作確認しながら作成しました。
で、これでそこそこ動くようになったら前回の記述どおりのファイルを作ってアップロード。そして公開という流れでいいんじゃないでしょうか。

以上

Google マップの

マップレット、いまいちはやりませんね。強引にはやらせるぞ。

そういうわけで、今、圧倒的流行を見せているGoogleマップのマップレット!遅れをとらないためにテンプレートを書いてみます。まずは大枠。


 01 : <?xml version="1.0" encoding="UTF-8"?>
 02 : <Module>
 03 : <ModulePrefs title="__MSG_title__"
 04 : 			description="__MSG_description__"
 05 : 			author="kosumi"
 06 : 			author_email="mail@adress"
 07 : 			screenshot="http://screenshot.png"
 08 : 			thumbnail="http://thumbnail.png"
 09 : 			height="150">
 10 : 	<Require feature="sharedmap"/>
 11 : 	<Locale messages="http://default/ALL_ALL.xml" />
 12 : 	<Locale lang="ja" messages="http://japanese/ja_ALL.xml" />
 13 : </ModulePrefs>
 14 : <Content type="html">
 15 : <![CDATA[
 16 : __MSG_instructions__
 17 : <script>
 18 : </script>
 19 : ]]>
 20 : </Content>
 21 : </Module>

たぶんいろいろ設定パラメータはあるんでしょうが、上記くらいでいいんじゃないでしょうか。各行の意味は下記の通り。


 01 : XMLの決まり文句。
 02 : 
 03 : タイトル。"__MSG_title__"は別ファイルに定義。
 04 : 説明文。"__MSG_description__"は別ファイルに定義。
 05 : 作者
 06 : 作者のメールアドレス
 07 : スクリーンショット画像へのURL。ちょっと大きめの画像。
 08 : サムネイル画像へのURL。小さい画像。
 09 : 画像の高さ
 10 : しらん
 11 : デフォルトの変数定義ファイル。
 12 : 日本語の変数定義ファイル。
 13 : 
 14 : 
 15 : 
 16 : やや長い説明文。"__MSG_instructions__"は別ファイルに定義。

16~18行にJavascriptを記述し、まあ、マップレットとしてはここが本体です。”__MSG_”系の変数(マクロ?)は11行目、12行目で参照されているファイルに記述します。これはいろんな言語にあわせてタイトルや説明文を用意できるようにするためです。上記の例では英語のものと日本語のものを用意し、日本語でアクセスされた場合は日本語のタイトル・説明文が、それ以外の言語からアクセスされた場合は英語のタイトル・説明文が表示されます。
日本語の場合の説明文の例を下記に示します。


<?xml version="1.0" encoding="UTF-8"?>
<messagebundle>
  <msg name="title">集合場所決定ツール</msg>
  <msg name="description">集合場所を決定するためのツール</msg>
  <msg name="instructions">クリックした点の中心を求めます。マークをクリックすると削除されます。もうちょい賢くしたいけど・・・くっ、ガッツが足りない!</msg>
</messagebundle>

というわけで、枠はこんな感じであとは本体を書くのみ。GoogleMapAPIみたいな感じで書けばよいです。ちょっと仕様が違うけど。
以下、Googleによるhello world。


  // Center the map in the Mediterranean and zoom out to a world view
  var map = new GMap2();
  var point = new GLatLng(38, 135);
  map.setCenter(point, 2);

  // Add a marker to the center of the map
  var marker = new GMarker(point);
  map.addOverlay(marker);

  // Open a "Hello World" info window
  var message = "こんにちは!こんにちは!";
  marker.openInfoWindowHtml(message);

以上

Home > Javascript Archive

Search
Feeds
Meta
 合計:016022
 今日:0020 昨日:0168

Return to page top