Archive for the ‘JavaScript’ Category

このページの目次

« Older Entries
Newer Entries »

ブックマークレット「ページに落書き！β」を作りました

金曜日, 3月 6th, 2009

こんにちは、なかわけです。

仕事で開発していたFlashを作りながら思いついたのでブックマークレットを作りました。

名づけて「ページに落書き！」です。

ブックマークレット「ページに落書き!」

ブックマークレット「ページに落書き!」

使い方は下のコードをブックマークとして追加してください。

ブックマークバーに登録するとクリックしやすくてオススメです。


javascript:(function(){var d=document; var s=d.createElement("script"); s.charset="UTF-8"; s.src="http://nakawake.net/download/flash/ScrawlInPage/load.js?"+(new Date()).getTime(); d.body.appendChild(s)})();

次に落書きしたいページにアクセス後、先ほど追加した「ページに落書き！」ブックマークレットをクリック。

そうするといま表示中のページに落書きすることができます。

オススメの使い方は、ミーティングのときにページに直接描きながら説明したり、人の顔に落書きしてぷぷっと笑ったりしてください。

現在ベータ版ですが今後ちょとずつバージョンアップしていきます。

Tags: , ,
Posted in Flash, JavaScript | No Comments »

IE6がgzip圧縮が使えない

木曜日, 12月 11th, 2008

こんにちは、なかわけです。

仕事中にphpで動的に生成したJavascriptやCSSがIE6でうまく動かない問題が起こりました。
動的に生成されたCSSの結果をコピペして静的ファイルして置き換えるとうまく動きました。

そのときは原因がわからなくてなんとなくごまかしてその場をしのぎましたがまた同じ問題に直面して今度こそはちゃんと原因を追究しないとなということでその場にいる仲間で調査しました。すると、以下のような記事を見つけました。

JSファイルが圧縮転送されてくると実行されないことがあった

参考：http://mz.skr.jp/note/2007/11/ie6-gzipped-javascript.html

IE6はgzip圧縮に対応しているようですが、どうやらその挙動は怪しいようです。
仲間と相談して圧縮しない設定にしたら、JSもCSSもちゃんと動作するようになりました。 

この不具合によってだいぶ時間を費やしました；；
またこの現象について調べてもあまり関連記事が見つかりませんでした。あまり知られてないのかな？
だとするとみんなに知ってほしいです。結構はまって時間浪費しますｗ 

 

Tags: , , ,
Posted in JavaScript, web全般 | No Comments »

Javascriptの不特定多数の引数を処理する関数の書き方

日曜日, 6月 1st, 2008

こんにちは、なかわけです。

最近、仕事でJavascriptを書くことが多いです。

で、そのときに引数が何個来るかわからない（呼び出す場所によって引数の個数が違う）関数の処理を書かないけなくて、どうすればいいのかわからなくてググったんですが、うまく検索にヒットしませんでした。

それでなんとなく思いついた方法でうまくいったので、自分用メモついでに紹介しておきます。

Javascriptの関数の部分

function hoge(args){
for(i=0; i<args.length; i++){
//処理したい内容
alert(args[i]);
}
}

Javascriptを呼び出す部分

<a href=”javascript:hoge(['foo', 'bar', 'baz']);”>アラートでます</a>

と、こんな感じでした。実際に動かしてみたサンプルです。


アラートでます

もし、この方法間違ってるとか正しい方法を知っている方がいらっしゃいましたら、コメントください。ぜひ。

Tags:
Posted in JavaScript | No Comments »

IEでsetAttribute()とremoveAttribute()がうまく動かない問題

木曜日, 3月 6th, 2008

こんにちは、なかわけです。

今日もまた仕事中に困って、解決した問題の話です。

Javascriptで要素（タグ）に属性を設定したり削除したりするときに、
setAttribute()やremoveAttribute()を使用します。

以下はclass属性をセットしたいときの例です。

var element = document.getElementById(“hoge”);
element.setAttribute(“class”, “foo”);

でも、これではIEではうまく動作しません。
IEの場合は、

var element = document.getElementById(“hoge”);
element.setAttribute(“className“, “foo”);

と書かなくてはいけません。
これはバグではなく仕様だそうです。

それから、次は、removeAttribute()で属性を削除する例です。
id属性がhogeのタグについているonClick属性を削除する場合です。

var element = document.getElementById(“hoge”);
element.removeAttribute(“onClick”);

しかし、これだとまたまたIEではうまく動作しません。

ariyasaccaさんのサイトには、IEでは仕様が違うため、
まず、setAttribute()で新しく関数を設定し、それをさらにremoveAttribute()で
削除するという方法を紹介されてました。

でも、なかわけが試してみたところIE7でうまく動きませんでした。
結局、removeAttribute()ではJavascriptを動作させる属性は削除できないみたいでした。
しょうがないので以下のような方法でやり過ごすことにしました。

setAttribute(“onclick”, new Function(“”));

要するに、何もしない関数を設定するという方法。
これだと、クリックしても何も起きないので、
見た目上onClickは削除されたように見えます。

しかも、かなり重要なことを発見しました。
属性名を小文字で書かないとうまく動かない！！（IE7で確認）

setAttribute(“onClick”, new Function(“”));

ではダメなのです。うまく処理されません。

setAttribute(“onclick“, new Function(“”));

今日はこれに気づくまでに1時間かかりました。
これもIEの仕様なんでしょうね。
あ～あ、今日も勉強になった・・・。

Posted in JavaScript | No Comments »

JavaScriptのカレンダーライブラリ「Yahho Calendar」

水曜日, 3月 5th, 2008

こんにちは、なかわけです。

今日も仕事でJavaScriptをがんばってみました。
実際そんなにがんばるところはなかったですが。

まず、以下のことがしたかったです。

テキストフィールドをクリックしたときに、
カレンダーがポンッとポップアップで表示されて
（ポップアップウィンドウではなくレイヤーとして表示されて）、
そのカレンダーの日付をクリックすると
その日付がテキストフィールドに自動的に入力されてる。

でも、まあやりたいことそのままのライブラリなんてないだろうから
複数のライブラリを組み合わせて作るかな、と思ってたら
ほぼそのままのライブラリがありました。

Yahho Calendarというそうです。
（はじめスペルミスかと思ったｗ）
米Yahoo!のYUI（Yahoo! User Interface Library）を利用している
ところからこの名がついたそうな。

使い方も作者のページに親切に書いてあります。
参考にさせてもらいました。ありがとうございました

■YUIカレンダーを日本語化＆ポップアップ対応＆祝日も表示 – Yahho Calendar
ゼロと無限の間に：Sandbox

Posted in JavaScript | No Comments »

PHPからJSONを作成してAjaxでRequest

金曜日, 2月 29th, 2008

こんにちは、なかわけです。

きょうは、仕事でAjaxをがんばってみました。
やってみたことは以下の内容です。

1.AjaxでPHPにアクセス
2.PHPは配列のデータをJSON形式に出力
3.戻ってきたJSON形式のデータをJavascriptのeval()で扱える形式に変換
4.innerHTMLなどでHTMLを更新

そもそもなかわけがAjaxなんか書けるわけがなく、
以下のサイトを参考にさせてもらいました。
■【PHP TIPS】 20. PHPからJSON作成を扱う

JSONなんて表記法も初めて知りましたし、勉強になった。
Ajaxておもしれ。

Posted in Ajax, JavaScript, php | No Comments »

JavascriptによるFlashの頭出し再生

月曜日, 5月 21st, 2007

こんにちは、なかわけです。

JavascriptによるFlashの頭だし再生。仕事で作ってみたのでまとめときます。

概要はこんな感じ。ひとつのFlashの中で複数のコンテンツが存在するときに、HTMLのリンクからある特定のコンテンツから再生する。

つくりかたは結構カンタンで、Flashを配置しているHTMLにJavascriptの「location.search」を使用してURLのおしりに付けている変数を取得します。location.searchって賢いもんで、たとえば

http://nakawake.net/flash.html?content=4

というURLがあったときに?content=4だけ取得するんです。すごい。

この取得した値をFlashに受け渡すには参照ファイル名の後にくっつければいいので、Javascriptと一緒に書くと、

document.write(' <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="550" height="400" id="urlvariables" align="middle"> ');
document.write(' <param name="allowScriptAccess" value="sameDomain" /> ');
document.write(' <param name="movie" value="urlvariables.swf' + location.search + '" /> ');
document.write(' <param name="quality" value="high" /> ');
document.write(' <param name="bgcolor" value="#ffffff" /> ');
document.write(' <embed src="urlvariables.swf' + location.search + '" quality="high" bgcolor="#ffffff"   width="550" height="400" name="urlvariables" align="middle" allowScriptAccess="sameDomain"   type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> ');
document.write(' </object> ');

とすれば、JavascriptがFlashを出力しつつURLの変数を取得してFlashに渡してくれます。
あとは別のHTMLページのリンクを、

<a href="flash.html?content=1">コンテンツ1</a>
<a href="flash.html?content=2">コンテンツ2</a>
<a href="flash.html?content=3">コンテンツ3</a>

と書けば、リンクをクリックしたときにFlash変数を受け取って該当のコンテンツから再生されます（もちろんここで触れてないですが変数を受け取った後のFlash内の処理もActionScriptで書かないといけませんけどね）。

とまあここまでなら日記に書くことはないですが、今日仕事で変な現象に出会いました。上記のように作ったページがInternetExploreでは正常に再生されたのですが、FireFoxで見てみると白い画面（背景色）で固まってしまいました。

そのときは仕事の締め切りが迫っていてかなり焦りまくりました。
で、結局何が原因だったかというと、こんな感じでした。

[ 推測できる原因 ]
Flash全体の容量が不明のため読み込み状態が続いてしまう

途中から再生するために、始めに読み込むべきFlash全体の容量がわからなくて処理がつまずいていたようです。IEはそこらへんをうやむやに処理したらしく再生できたようでFFは止まってしまいました。

[ 対処法・解決方法 ]
ムービーの最初にプリローダをつけてロードが完了したら該当のコンテンツにジャンプするようにActionScriptを書く

全体の容量がわからないのであればわかるようにプリローダーをつけてあげればいいだけの話でした。ここでカンタンに書いておりますが原因究明にかなり時間使っちゃったよぅ・・・。

Posted in Flash, JavaScript | No Comments »

長いURLを強制改行（折り返し）するJavascript

水曜日, 2月 28th, 2007

こんにちは、なかわけです。

今日は仕事中にすごいいい情報を手に入れました。今日1日の価値はかなり高いです。

ウェブデザイナーのほとんどの人が悩んだことがあるんじゃないでしょうか。長いURLを表示したときにレイアウトが崩れてしまう症状。ほぼ全てのブラウザでレイアウトを崩す長いURLですが、今日イチバンいいと思われる回避策を発見しました。

行う作業はIE用の処理とそれ以外のブラウザ（Gecko系）用の処理の2つです。

まず、IE用の処理としてIE独自のCSSプロパティ word-break を設定します。html全体もしくは適応箇所に

word-break:break-all;

を設定すれば、親要素の幅内で自動的に改行（折り返し）してくれます。（IE独自のCSSプロパティというところがシャクな気がしますがこれがもっとも簡単安定したものと思います）

次にGecko系用の処理ですが、これがすごい！サーバにアップしてリンクするだけでできちゃうJavascriptがあったんです。書いてくれた人に感謝。サンプルも公開されてます。詳しい分かりやすい説明は小粋空間さんのページに紹介されてますので簡単に説明しますが、url_breaker_plus.user.jsというJavascriptファイルをダウンロード、自分のサーバにアップロードして適応したいページの<html>の直前に

<script src=”url_breaker_plus.user.js” type=”text/javascript”> </script>

と挿入するだけ。とても簡単。

ただ1点うまくケースを発見しました。それは、長いURLが<table>内に含まれるときにこのJavascriptが無効化されてしまいます。たぶん、table要素が特殊なためJavascriptでうまく処理されないものと思われます。
なかわけが考えた対処法としましては、長いURLの親要素の<td>に

display:block;

とスタイルをつけてあげればうまく処理されます。

この今日の発見によりいままで悩んでたレイアウト崩れが全て解決されました。あーうれし。あー今日はもう満足。

Posted in JavaScript | No Comments »

Javascriptの読まれるタイミングと実行のタイミング

日曜日, 2月 11th, 2007

こんにちは、なかわけです。

昨日、仕事で発見した（というか仲間と話してて見つけた）Javascriptの話。

まずなかわけは、とあるページを制作していてチェックボックスにチェックを入れた後にページを更新するとチェックが残っていることに気が付きました。そのとき作っていたページの仕様上チェックが残っているのがまずかったので、更新したときにはチェックが外れるようにしようとJavascriptを書きました。

最初に書いたのは下のような感じ・・・

▼HTML側

<html>
<head>
…
<script type="text/javascript" language="JavaScript" src="file.js"> </script>
…
</head>
<body>
…
<input type="checkbox" id="CheckBox">
…

▼外部Javascriptファイル

document.getElementById(“CheckBox”).checked = false;

簡単な解説をしますと、htmlファイルが外部のJavascriptファイルと読み込んでいて、そのJavascriptファイルには、htmlファイルに書いてあるチェックボックスをfalse（外せ！）と書いていたんですが、うまく動きませんでした。
その後近くの仲間となんでかね？と話していながら解決した書き方がしたみたいな感じ・・・

▼HTML側

<html>
<head>
…
<script type="text/javascript" language="JavaScript" src="file.js"> </script>
…
</head>
<body onLoad="CheckBoxFalse()">
…
<input type="checkbox" id="CheckBox">
…

▼外部Javascriptファイル

function CheckBoxFalse() {
   document.getElementById(“CheckBox”).checked = false;
}

要はどういうことかというと、ソースが読み込まれる順番だったんですね。
最初に書いた書き方だと、

htmlファイルを読み込み
　↓
Javascriptファイルを読み込み（チェックボックスを外せ！）
　↓
<body>読み込み
　↓
チェックボックスを表示

これだとチェックボックスがまだ表示される前にチェックボックスを外せ！と処理されてしまいます。ばかですね、なかわけって。後の書き方だと、

htmlファイルを読み込み
　↓
Javascriptファイルを読み込み（チェックボックスを外せ！っていう命令があるよ）
　↓
<body>読み込み（と同時にチェックボックスを外せ！命令を実行してね）
　↓
チェックボックスを表示（と同時にチェックボックスを外す）

となり、意図した通りに動いてくれます。気づけば当たり前のことだし、こうしてまとめて書いてるとまぬけな自分が悲しい・・・。

プログラムは上から下に処理されるんだっつーの!!

Posted in JavaScript | No Comments »

<textarea>をクリックすると内容が選択されるJavascript

木曜日, 2月 1st, 2007

こんにちは、なかわけです。

最近見かけたちょっと親切なJavascript。自分のために覚書き。

サイトでソースコードをコピーしてもらいたいときにテキストエリアを使用しますが、そのまま使ってしまうとそのテキストエリアに入力できてしまったり、テキストを選択するときにドラッグしないといけませんよね。
今日紹介するのは（といってもなかわけが発見したわけじゃないけど）、テキストエリアをクリックするとテキストが選択できちゃうサンプルです。

▼下の<textarea>をクリックするとテキストが選択できちゃうサンプル

初めてみたときに、お！と思いました。実際どう書くかは下のソースコードをコピーして参考にしてください。といいつつもう使ってみたり。

▼サンプルソースコード

あ～こういうの見つけると、いいサイト作りたいって思う・・・。Javascriptってめんどくさいけど楽しい。

Posted in JavaScript | No Comments »

« Older Entries
Newer Entries »