タグ別アーカイブ: javascript

Twitterの画面がハッキングされた!? #javascript

Twitterのタイムライン(ホーム)を改造して遊ぶJavascriptを作ってみました。いつも見ている見慣れたTwitterの画面が大変なことに!?

あそびかた

  1. このリンクをツールバーなどにドラッグしてブックマーク保存してください。
  2. Twitterに移動してログインしましょう。
  3. Twitterのホームが表示された状態で、保存したブックマークを選択すると、左上に小さなメニューが表示されます。
    faulttersample
  4. 「no1: don’t mouseover!」というリンクをクリックすると、Twitterの画面に変化が起きて面白いことが起こります!

※実際にハッキングしたりデータを書き換えたりはしていません。表示をちょこっといじっているだけなので心配しないでくださいね。

※FirefoxとSafariでは動作確認済み

いろいろ追加していこうかなとおもってます 😈

Google Maps APIの地図でマーカーがドラッグできない件

いやー、はまった。今日半日くらいこの現象に費やしてしまった。

症状:
HTMLに埋め込んだGoogleMapのマーカーで、draggable: trueに設定しているにもかかわらず、ドラッグできない現象が発生。

marker = new google.maps.Marker(this.point,{ draggable: true });

原因はUnloadでした。メモリリーク防止のために入れていたgoogle.map.Unloadがなぜか邪魔していたみたい。Prototype.jsを使用しているので下記の様に書いていたのですが、

Event.observe(window, 'unload', google.maps.Unload());

このコードのカッコひとつ、Unload()←コレ を削除すると、なおった。

Event.observe(window, 'unload', google.maps.Unload);

なんだか分からないけど、助かった!

[canvas] アニメーションにしてみる

前回に引き続き、canvasタグでブラウザ上で図形作成中。
今回はアニメーションに挑戦してみます。と入っても、Javascriptで描いている図形のこと、Javascriptでループすれば簡単にアニメーションが作れるのは道理。

ただ、単にループせず、setInterval()を使ってループ時間は調整する。

サンプルをアップしてみましたので、ソースのご参考までに。

続きを読む [canvas] アニメーションにしてみる

[CKEditor] WYSIWYGで編集中のデータを取得する

CKEditorがかなり便利。かなり使いやすいWYSIWYGエディタで、導入も驚くほどカンタン。インストール方法もまとめておきたいが、詰まった点があったのでメモ。

CKEditorにもネイティブでプレビュー機能があるのだが、当然エディタで編集している範囲しかプレビューされない。エディタが入っている以外のinputタグの内容などもあわせた「編集内容をプレビュー」機能を持たせたければ、エディタから編集中のデータを取り出さなければならないので、その方法です。

// 「editor1」が、CKEditorに置き換えたtextareaを差すので、環境に合わせ変えてください。
data = CKEDITOR.instances.editor1.getData();
alert(data);

CKEditor自体も、formをsubmitする際にエディタ部分のデータを取得してtextareaのvalueに突っ込んでいるみたい。