2013-03-13

ボスが来た!」ボタン作ってみました。&ソース公開 by秘ブの人

先日、アダルト専用ブックマーク「秘ブ」(http://hibu.jp/)を公開した者です。

http://anond.hatelabo.jp/20130308124428

これね。

http://anond.hatelabo.jp/20130308140354

の方のご指摘で「ボスが来た!」機能が欲しいということでしたので、作ってみました。

javascriptでほぼ全部実装したのですが、だいぶ苦労しました。

javascript特有の、関数オブジェクトに登録できるとことか、できるだけ汎用的にコードを構成するとことかが難しく…。ちょっとした変態言語だとは聞いていましたけどね。

職業プログラマの方からみればそれはそれはスパゲッティな感じでしょうが、お勉強を兼ねてソースも公開したいと思います

目次

1.「ボスが来た!」ボタンってどういうもん?
2.ライセンス
3.ソース
4.設置の仕方
5.悩んだところ
6.悩んでるところ


1.「ボスが来た!」ボタンってどういうもん?

デフォルトでは、右下に「ボスが来た!」ボタンを表示して、クリックすると「年号西暦変換表」の表示に切り替えますタイトルファビコンも変更します。

デモページ無いんで、どんな感じになってるかはhttp://hibu.jpを御覧ください。

2.ライセンス

プログラムを公開するときにはライセンスってものを設定しなければいけないらしいと聞き、一応書いておくか―と思って調べました。

結果、↓で一番上にあったGPLライセンスにすることにしました。

GPLMITCCなど主要ライセンスの内容と意味のまとめ

http://smkn.xsrv.jp/blog/2009/03/summary_for_gpl_mit_cc_etc/

Webデザイナーが覚えておく、代表的なライセンスまとめ

http://kojika17.com/2011/01/web-designers-have-to-remember-license-summary.html


3.ソース

匿名ダイアリーではHTMLの部分と日本語がちゃんと表示できないみたいなので、見たい方は↓のURLで見れると思います

http://hibu.jp/js/BossComes.js

っていま見てみたら日本語文字化けしてる…。

ブラウザでは文字コードUTF-8にしてみてください。

4.設置の仕方

最初bodyタグ直下scriptタグで読み込んでたんですが、ページ全体の読み込みが遅くなっちゃいまして。

bodyタグを閉じる直前にscriptタグで読み込むと良い感じです。

5.悩んだところ

a.)ボタンの表示を初期化するところでwindow.onloadがブラウザによって効いたり効かなかったり。

http://q.hatena.ne.jp/1267885206

↑のkebo987654さんの回答からコードをお借りして解決。

b.)どうせページを偽装するならタイトルも変えなきゃってことで、どうやってタイトル変えるのって探したらこれで一発でした。

Javascriptタイトル名称を変更する

http://www.wsj21.net/_bbs/main/tpc_771.html


c.)でもって、タイトル変えたものの、ファビコンが変わってない。これじゃバレるってことでファビコンも変えることに。

Favicon の動的変更の裏側

http://webcraft.seesaa.net/article/184698281.html

DYNAMIC FAVICONS

http://softwareas.com/dynamic-favicons


ファビコンは、一回linkタグファビコン指定の部分を消してから、書きなおさなきゃ変わらないみたいです。

ファビコンファイル拡張子ごとにmine-typeを変更するところは頑張った。

d.)javascriptでね、「ボスが来た!」ボタンで実行する関数トグルしなければならなかったんですよ。

本当のページ表示中に実行する関数→偽のページを表示する関数

偽のページ表示中に実行する関数→本当のページを表示する関数

って具合に。

でも、関数をelementのonclickに登録するのがなかなかうまく行かなくて。

でもググった結果、↓のようにしたらできました。

動的にonclickを追加する

http://devkuromaku.blog.shinobi.jp/javascript/%E5%8B%95%E7%9A%84%E3%81%ABonclick%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B




6.悩んでるところ

考えつくままに書いていったので、素人目に見てもなんとなくスマートさがないなぁと。

もっと処理を高速化できそうなところとか、こう書けばもっとスマートになるよっていうのを教えていただけると嬉しいです。

記事への反応 -

記事への反応(ブックマークコメント)

アーカイブ ヘルプ
ログイン ユーザー登録
ようこそ ゲスト さん