ラベル Javascript の投稿を表示しています。 すべての投稿を表示
ラベル Javascript の投稿を表示しています。 すべての投稿を表示

2014年6月25日水曜日

スクラップブックマーク



はてなブックマークのjavascriptをお気に入りに登録させてしまう仕様をみて


ほーそんなこともできるんですね。


灯台下暗しといいますか、クリック一発で登録の手軽さをこういった形で実現してしまうとはさすがです。


そこで、新発見があったのですから応用して、スクラップブック(本文中の記事だけを取得する)用に


出来ないかと考えてみました。


FireFox用



<a href='javascript:
var h = window.document.getElementById("bkmark");
if(!h){
var f=window.document.createElement("form");
f.method="POST";
f.target="bkmark";
f.action="○○○.php");
f.innerHTML="<input type=\"hidden\" name=\"doc\" id=\"bkmark\"><input type=\"hidden\" name=\"title\" id=\"bkmark_title\"><input type=\"hidden\" name=\"url\" id=\"bkmark_url\">";

var ifr=window.document.createElement("iframe");
ifr.name="bkmark";
ifr.width=0;
ifr.height=0;

window.document.body.appendChild(f);
window.document.body.appendChild(ifr);
h = document.getElementById("bkmark");
}
h.value = escape(window.getSelection().getRangeAt(0)) || "";
window.document.getElementById("bkmark_title").value = escape(document.title);
window.document.getElementById("bkmark_url").value = escape(location.href);
if(h.value){f.submit();}
void(0);
'>スクラップブックマーク(FireFox用)</a>



上記のURLをはてなブックマークと同じように、ブラウザのお気に入りに登録します。


始めは、XMLHttpRequest を使っていたのですが、別ドメインへのアクセスが出来ないことが


すぐにわかり(使う前に気がつけよ。。。)断念しました。


はてなブックマークは、local.href でGETでタイトルとURLを送っていましたが


データを一方的に送信するだけでよいので、iframe枠内に見えないところでPOST送信することにしました。


(一番下に黒いぽちがでてますけど。。。)


スクラップブックで長めの文章を送るとなるとGETではバイト数が足りなくなる場合があるからです。





指定の文章の取得には、window.getSelection().getRangeAt(0) 


でマウスで選択したテキスト部分をPHPプログラムへ送信します。


PHP側は、適当に DBに保存するなり、ファイルに書き出すなりして


後で自分で確認できるように作っておけば良いかと思います。


IEの場合は、window.getSelection().getRangeAt(0) の代わりに


(window.document.selection.createRange())[0]  を使えばできるような気がします。(試してません)


自分のサイト以外でこういったJavascriptを実行させるテクニックは面白いですね。


(FireFoxのアドオンとかは基本的にこれなんですけどね。。。気がつけよ。。。)


Greasemonkeyとかがなぜ流行るのかようやくピント来た気がします(遅)





Beep音



1行テキストに onkeyup onkeydown onkeypress などのイベントハンドラーを設定し


リターンキーの挙動をデフォルトと変えた場合に、Beep音(ビー)がなります。


FireFoxでは、出なかったのですが、IEでスピーカーをつけたときに気が付きました。




function sampleKeydown(event){
var key = event.charCode || event.keyCode || 0;
if(key == 13){
// 何らかの処理
return false;
}
}

<input type="text" onkeydown="return sampleKeydown(event);">



リターンキーが押されたときに key == 13 のときに 処理後に return false ; してやれば、


Beep音は出ませんでした。


IEのBeep音もいろいろ種類があるけれども、Javascriptで制御できる


Beep音っては、どのくらいあるんだろう。


マウスクリックしても、「カチッ」音がするし、あれって制御できるもんなんだろうか。


普段、あんまりスピーカーとかつけてないもんで以外に盲点でした。





IE6 でロールオーバーがちらつく問題



CSSの background-image の position を変化させて


ロールオーバーを実装したときに、画像が表示されるたびに


ちらちらと画像が消えては表示される、ちらつきがでる場合があります。


background-position を変更するたびに画像を再読み込みしているのが


原因らしいです。また、この現象は、IE6特有で他では起こらないとのことです。


対処法としては、


CSSのみで対処する場合



html {
filter: expression(document.execCommand("BackgroundImageCache", false, true));
}


Javascriptで対処する場合



try {
document.execCommand(”BackgroundImageCache”, false, true);
} catch(e) { }


expression はもっぱら処理が遅いとのことなので


Javascriptで対処するほうが良いのかな。





background



CSSの background属性の取得について、だめだった報告。


Javascriptで以下のように 単純な jQuery を利用したソースを書く。


(Firefox2,IE6にて)




<html>
<head>
<style type="text/css">

#hoge{
background: transparent url('hoge.gif') no-repeat 10px 10px;
width: 10px;
height: 10px;
}

</style>
</head>
<body>
<div id="hoge"></div>
<input type="button" id="btn" value="background get!">

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#btn').click(function(){
alert( $('#hoge').css('background') );
});
});
</script>
</body>
</html>



上記で ボタンを押すと、アラートが表示されるが、FireFoxは空欄が表示され、IE6は、undefined が表示される。


次に backgroundを 個別の属性に分けて試してみると


値が取得できた属性




  • background-image

  • background-repeat

  • background-color

  • background-attachment

  • background-position-x(IEのみ)

  • background-position-y(IEのみ)


値が取得できない属性




  • background-position


background-position を backgroundPosition としてみても取得はできなかった。


なぜ、background-position だけ取得できないんでしょうかね?


特別な意味でもあるのかな?


はてなで質問してみてるけど、どうも仕様的にそうなってるみたいな雰囲気???





JQueryで連続した半角英数字を任意の場所で改行するプラグイン



長い半角英数字が改行されず思いのほかレイアウトが崩れることってありますよね。


特に掲示板みたいなユーザに入力してもらうようなシステムの場合


開発時に想定してなかった長い半角英数字なんかをいれられて、


後から「おおおなんじゃこりゃぁああああ」なんてことがたまにあります。





ただ、最近までレイアウトが多少崩れても「まぁいっか」くらいの気持ちでして(←だめだね)


どうしても解決しなければいけないときは、textarea を強引に流用したり誤魔化してきたような。。。。とはいえ、そんなずぼらなことではいけない気もするのでjQueryのプラグインを作ってみました。





IE系のCSSには、独自に拡張した word-break: break-all; を使えばすぐに解決できるのですがそれ以外のブラウザがまだ対応してないみたいでここがちょっとネックですね。


CSS3くらいには標準になるのかな?





いろいろ、調べてみると任意改行文字 8203を使うのがなんとなく意図した内容に近いみたいです。


各テキストの1文字ずつにこれを挟んでようやく解決。(しかし、テキストの量が多くなると処理に時間がかかりすぎるかも)





(追記)2009/12/09 version 0.2 以下の参照ページでご指摘いただいた修正をしました。


【jQuery】word-break:break-all;をie以外でも実装するjQueryプラグイン


げことじさんありがとうございました。





jquery.wb.js - 0.2



jQuery(function($){

$.wb = {

version: 0.2

,sep: String.fromCharCode(8203)

,remake: function(elm){
var h = elm.contents();
elm.html('');
$(h).each(function(){
if(this.nodeType == 3){
elm.append($.trim(this.textContent.split('').join($.wb.sep)));
}else if(this.textContent == ''){
elm.append(this);
}else{
elm.append($.wb.remake($(this)));
}
});
return elm;
}
}

$.fn.wb = function(){
if(/msie/i.test(navigator.userAgent)){
$(this).css('word-break', 'break-all');
}else{
$.wb.sep = (/firefox\/2/i.test(navigator.userAgent)) ? '<wbr />' : String.fromCharCode(8203);
$(this).each(function(){ $.wb.remake($(this));});
}

return $(this);
}
});


レイアウトの調整デモ





参考:FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」





しかし、この任意改行文字のような特殊文字って結構あるんですね。


ぜんぜん知りませんでした。


特殊文字のコード一覧








※作ったもののJavascriptがONじゃないと使えないですねぇ。。。





2008年11月18日火曜日

jQueryでSelectの表示を変えるプラグイン



元ネタは、こちらを参考にさせていただきました。



プルダウンで都道府県などを入力(選択)するイライラを解消するPrefSupport.js


http://moto-mono.net/2008/07/19/prefsupport.html



プルダウンでたくさんの選択肢を表示するときに、スクロールバーがでてしまうのは


どうも、不恰好だなぁと思ったことのあるかたなら、利用してみてください。


デモ


JQueryでselectタグのプルダウンをカスタマイズする demo


ダウンロード


jquery.cs.js


利用には、jQueryが必要です。


追記(2009/11/20):jQuery-1.3.2 に対応いたしました。








特に、デザイン的に配慮はあまりしていませんので、シックで無骨な感じが気になる方は


素敵なデザインでサンプルを作ってもらえるとうれしいです。


プログラム的に、いろいろ悩んだところは


select タグをクリックすると、デフォルトのプルダウンが即座に出てしまうのを


Javascriptでどうやって制御するのかに苦労しました。


ブラウザごとに、プルダウン表示のタイミングが違うみたいで最終的に



1 mousedown event 取得
2 focus 実行
3 select disabled 属性 ture
4 blur 実行
5 event stop 実行


この順番で、処理をすると、意図した通りになりました。


(IE6,IE7,FF3,GC)


この辺は、ソースを見てもらえればわかると思います。


また、もっと上手な方法があるよーって方は、教えてもらえるとうれしいです。





2008年7月9日水曜日

IE6でJavascriptがうまく動かないとき






<a href="javascript:void(0);" onclick="javascript:location.href = 'http://www.example.com';">移動だ!</a>


上記のような、a タグの href 属性に javascript:void(0); をセットして


onclick 属性で、javascript処理をしようとしたときに、FireFoxや、IE7では、特に問題にならなかったのですが


IE6は、上記では動きませんでした。




<a href="javascript:void(0);" onclick="javascript:location.href = 'http://www.example.com';return false;">移動だ!</a>



解決策としては、onclick 属性の最後に return false; をつければOKです。(仕様?)


他のイベントハンドラーの場合も多分必要です。


文法的に間違ってないのに a タグに設定したJavascriptが、IE6で動かないって時は、一度試してみてください。





2008年2月14日木曜日

IEで、preタグにinnerHTMLで改行を入れると無視される



HTMLのタグに、記述したままを表示する pre タグがあります。



<pre>
ほげほげ
どもども
こんにちわ
</pre>


br を使わなくても、改行して表示してくれます。


しかし、IEで動的にJavascriptで pre タグにテキストを書き込むと


自動的に改行コードを半角スペースに変換するらしく


思ったとおりに表示できません。


FireFoxやOperaだとそんなことはないようです。


詳しくはこちら


http://d.hatena.ne.jp/brazil/20060917/1158465641


IE用に別に処理を書くしかなさそうです。



// jQuery.js を使用

var doc = "ほげほげ(改行)どもども(改行)こんにちわ(改行)";

if($.browser.msie){
doc = doc.replace(/\x0D\x0A|\x0D|\x0A/g,'\n\r');
$("pre").text(doc);
}else{
$("pre").text(doc);
}

---------------------------------------------------------------
<pre></pre>



IEの場合だけ、改行コードを置換したらうまくいきました。


この手のIE対応は、本当に自分じゃ解決しきれない


難しい現象が多いので、ネットで解法を公開なさってくれている方に


感謝いたします。





2007年11月11日日曜日

JQuery でごりごりJavascriptのプログラムを書いていたときに、



急にFireFoxの挙動がおかしくなり困ったことに。


画面の更新を何回かすると、アプリごと落ちる現象です。(更新回数とかは不規則)


Exception Interface Code:0xc00000005 Flags:0x00000000 Record: 0x0000000000000000 。。。。


詳細を見ると上記のようなエラーコードとか、モジュールの情報とかいろいろ詳でてくるんだけど


細かくちまちま調べる気になれず、何が起こったかを調べるより


Javascriptを順番にコメントアウトしてどの記述が影響しているのかを調べるほうに注力しました。


結論から言うと以下のコードは、落ちる可能性がある。(原因は不明)


リスト1



$(function($){

(function($){
コード1。。。
})($);

(function($){
コード2。。。
})($);

(function($){
  コード3。。。
 })($);

});


以下のように書き直すと、問題解決しました。


リスト2



$(function($){
コード1。。。
});

$(function($){
コード2。。。
});

$(function($){
  コード3。。。
});


どちらも、HTML読み込み完了後にJavascriptが実行されるような記述です。(JQuery参照)


リスト1のように、とりあえず内容別に名前空間を分けて書きたいなぁと、


深い意味も考えず書き始めました。


最初のコード1までは特に問題なく、コード2を書き足したあたりから、


不穏な動きが始まりコード3を書き足したときにようやく何かがおかしいなぁと思い始めた次第です。


(特にコードの量が増えると、落ちる頻度があがるような気がしました。)


もともと、FireFoxにFireBug、YSlow、Greasemonkeyなどのアドオンを


複数インストールしていた関係もあって、


FireFoxの挙動がおかしく強制終了するようなことはしょっちゅうありました。


プログラムを書いているときも、そういう別原因の要素が働いているのかとも思い、


納期もあるしあんまり原因追求へ脱線している時間もないと放置していたわけです。


(たまにIEで確認したりするときも問題はなかったので、余計放置していました。)


しかし、他のPCのFireFoxでも落ちる現象を確認したときは


さすがに自分のコードが原因だと確信しました。


Javascriptを書いているときって環境依存の部分の検出ってほんとに


めんどくさいし、手間のかかることだから蓋をしておきたくなりますよね。


でも、見つけた時は、あきらめてとりかかるしかない。。。


(もちろん、見つかっていない部分も探さないといけないですけどね。)


結局、現象はおさまりましたが、JQuery(Javascript)の勉強不足で


原因というのは分かっていません。


ただ、いろいろ調べてみて自分自身、原因特定の糸口もつかめず苦労したので


同じような現象になったかたがおられたら、とりあえずでもいいので


上記のように書き直してみて、現象がおさまれば幸いと思った次第です。


(書き直しによる解決は、あくまで自己責任でお願いします)


原因の調査はできるときにしたいと思いますが、誰か教えてくれる


親切な人がいましたら、是非ともトラックバックやコメントでお願いします。





2007年6月14日木曜日

Drawライブラリー Javascript

Open-jACOB Draw2D



フローチャート図などVisioやPowerPointで書くような図がかけます。





ブラウザ上にそのままフリーハンドでかけます。

Thinkature - Real-time collaboration for the web







wz_jsgraphics.js 図形が非常にきれいにかけます。

DHTML: Draw Line, Ellipse, Oval, Circle, Polyline, Polygon, Triangle with JavaScript





Prototypeベースのグラフィックスフレームワーク

SVG/VML/Canvas の方式で描画することが出来ますのでIEでもOKです。

Prototype Graphic Framework













Powered by ScribeFire.

Javascript Game

Javascript でマリオ

http://overdrawn.net/mario/#



かなり良くできてます。すげーが、マリオがどこに?クリボーをクリックするとへこみます。

?ブロックをクリックするときのこがでてくるけど、とることができない。。。どうやるんだ?



ブロック崩し

これが、Javascriptでできてるとは信じられません。

DHTML Arkanoid V1.2B | Level 1









Powered by ScribeFire.