Home > Javascript Archive

Javascript Archive

Save Pages

mycodestockというWebサービスがある。
https://mycodestock.com/
これはプログラムなどのソースのスクラップを簡単に保存できる便利なサービスだ。
私はその簡潔さから便利に大変活用させてもらっている。長らく使っている間に、かなりのソースやTipsがたまってきた。
しかしながら、世間的にはそんなに流行っていないように見える。これは非常に恐ろしいことだ。
なぜならば、いつサービスが終了するかわからないからだ。どうみても個人が運営している。
急にサービス終了するととっても困る。

ということで、とりあえずダンプしたい。ローカルに保存しておきたい。
そこでいろいろ魚拓系のサービスやらChromeの拡張機能やら探したが、うまく保存できるものがなかった。
mycodestockはログインして使うものなので、Webサービスによる魚拓は難しい。
またAjaxで動的にコンテンツが読み込まれているので、「名前を付けて保存」をしても必要なコンテンツは保存されない。
Chromeの拡張機能でスクリーンショットを撮るやつは画像で保存するやつばっかりで、それじゃコピペできないじゃんという。

仕方がないから自分で作ることにした。
Save Pages
HTMLをそのまま保存して、HTMLからページを復元する、コピペ可能なスクリーンショット。
ajaxで動的に作成されたエレメントもHTML化して保存するので安心すべし。(何しろそのために作ったのだ)
今のところ画像とかスクリプトには対応してない。要望あれば。

追記:もっといいのがあった。https://chrome.google.com/webstore/detail/gokffdfnlmampchciemmflgbckijpmlb
もっと早く知っていれば・・・!まあ、たのしかったからいいか。

以上

最近のGoogle検索が軟弱な件

どうも最近のGoogle検索は、複数キーワードで検索する時に結果が変です。
全部のキーワードを含んでいなくても検索結果としてあがってきます。
再現率を上げるのは結構ですが、適合率がひどいことになっています。
これを回避するには全部のキーワードをダブルクオーテーションで囲まないといけない。
めんどくさい。

というわけでブックマークレット作っておきました。しょうもないけど結構時間は節約できるはず。

以上

chromeのエクステンション作った

なぜかchromeにはGoogleツールバーがなさそうなので、なんちゃってを作った。
SearchBarFindInPage

MigemoFindInPageをパクリまくって。
ソースをパブリックドメインで公開されていて、非常にありがたい話です。
私のソースもそのうち公開しますが、そこら中から寄せ集めただけで整理すらできていないので後日。
とっても無駄だらけのソースと思います。ま、インストールすればみれちゃうだろうけど。

動作としては、普通にアドレスバーからgoogle検索後、任意のページでマウスを上の方に持って行くとツールバーが現れます。
ボタンをクリックするとページ内検索がMigemoFindInPageのインターフェースを使ってできるという。
なんというパクリ方。

以上

リストを絞り込むためのブックマークレット

フォームのリストから選ぶやつ、つまりタグのselect、数が多いと項目を探すのめんどくさい。
というわけで部分文字列で絞り込めるブックマークレット作った。
対象のリストを選択してから実行する。テキストボックスが出るので、そこに文字列を入れる。

IEだとoptionにスタイルシートが効かないから、ちょっとトリッキーな実装になった。

※フレームを含むページだとうまく動かない。誰か何とかしてください。
以上

センチメンタルインクリメンタル

どうしようもなく更新してないので、くだらないブックマークレットを作っておきました。
Inc Dec
URLの最後の数字をインクリメントして転送するだけという。

以上

Javascript関連の投稿を修正

ブログに無理矢理載せようとして動かなくなっていたサンプルを修正しました。
例えば下記
簡単ドラッグ可能領域
特定の要素の上でマウスホイールのイベントを取る。(jQuery)
jQueryでFormのバリデーション

以上

テキストエリアにコードを書くためのHTMLエンティティ化ブックマークレット CodeWrite

コメントにコードを書けるようにしろ、との意見があった。まったくもって正統な要求である。
というわけで何とかしようと思ったけど、Wordpressよくわからんのであきらめて、代わりにブックマークレット作っておいた。
HTMLエンティティ化したい部分を選択して実行すれば変換してくれる。textareaの中に対してしか作用しないけど。
Wordpressのjavascriptをだいぶパクっています。

これで我慢してください。

以上

google map ムズカシス

addOverlayとかってsetCenterしてからじゃないとエラーになるんですねえ。すごいはまった。


map = new google.maps.Map2(document.getElementById("map"));
point = new google.maps.LatLng(40, 135);
marker = new google.maps.Marker(point);
// map.addOverlay(marker);     //  エラー
map.setCenter(point);
map.addOverlay(marker);        //  OK

わかりにくい。

以上

google map jsapiで華麗にはまったこと

jsapiってなんだよまったく。GMap2とかがgoogle.maps.Map2になるって?まあ、名前変更しといたら動いたけどさ。というわけで、いろいろはまったけど、悔しいのがインターフェースの日本語化。マップの右上のMapとかSateliteを地図とか航空写真にしたいの。
GMap2の時代は(といってもその時代のこともよく知らないんだけど古いWebの情報によると)、api受け取るときのURLを


<script src="http://maps.google.com/maps?file=api&v=2&key=hoge" type="text/javascript"></script>

じゃなくて(hogeはapiキー)


<script src="http://maps.google.co.jp/maps?file=api&v=2&key=hoge" type="text/javascript"></script>

って感じにしとけば日本語になった。(.com⇒.co.jp)
でもjsapiだとこれだとだめ。どうしたらいいんだと結構探し回ったら、結局ドキュメントに書いてあった。。
http://code.google.com/intl/ja/apis/ajax/documentation/


google.load("maps", "2", {"language" : "ja_JP"});

でも、日本語にならない!えぇえええーjsapiってなんなのーーーって思ってたら、こっちのほう
http://code.google.com/apis/ajax/documentation/
にはlunguageで指定できるのはISO639って書いてある。サンプルは全く同じだけどISO639って何だと思って調べたら日本語はja・・・。そういうわけで、


google.load("maps", "2", {"language" : "ja"});

ってやればちゃんと日本語になったというわけさ!

疲れた。
以上

jQueryでウェブデザイン

ひさびさにjQueryをのぞくといろいろ便利そうなプラグインが出てる。

1.レイアウト
ウェブページのレイアウトって、クロスブラウザでやろうと思うとなかなか大変である。スタイルシートとかIEとFirefoxではだいぶ違う。
・Docking layout manager
きっとクロスブラウザ。少なくともFirefox3とIE7では同じに見えた。
http://labs.rajeeshcv.com/layoutmanager/default.html

・Flexify
もっといろいろできるっぽい。リサイズ可能なスプリッターもある。
http://plugins.jquery.com/project/Flexify

2.フォーム
フォームはかっこよく、かつ便利にしたいもの。
・Labelize: a jQuery Label Maker
フォームを含んだいくつかのHTML要素をひとまとめにできる。これは便利。スタイルシートのクラスを指定してlabelize()ってやればいいみたいで、その際引数にマウスオーバ時のスタイルシートを指定できるようだ。(なにも渡さなければマウスオーバ時になにも変化しない)
http://github.com/bentlegen/labelize/tree/master


<html>
<head>
	<script src="jquery-1.2.6.js"></script>
	<script src="jquery.labelize.js"></script>
	<style>
		* {margin: 0 0 0 0; padding: 0 0 0 0;}
		.radio-label { background-color: #F0FFF0; width: 200px; color:#000000; font-weight:bold;}
		.radio-label-hover { background-color: #333333; color:#ffffff; font-weight:bold;}
	</style>
</head>
<body>
<script>
	$(function() {
		$('li.radio-label').labelize('radio-label-hover');
	});
</script>

<div>
<form>
	<ul>
	<li class="radio-label"><input type="radio" name="radio"/> テスト 1</li>
	<li class="radio-label"><input type="radio" name="radio"/> テスト 2</li>
	<li class="radio-label"><input type="radio" name="radio"/> テスト 3</li>
	</ul>
</form>
</div>
</body>
</html>

以上

Home > Javascript Archive

Search
Feeds
Meta
 合計:010890
 今日:0192 昨日:0214

Return to page top