はてなハイクソルジャーの使い方

https://chrome.google.com/webstore/detail/%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%8F%E3%82%A4%E3%82%AF%E3%82%BD%E3%83%AB%E3%82%B8%E3%83%A3%E3%83%BC/hhgejafgjjjfaocaopajkhgmdgaeimin?hl=ja
簡単な説明
インストールするだけではてなハイク内のSPAM投稿を非表示にするchrome専用拡張機能。
制作時間は半日で公開してちょこちょこ修正していまver1.10。


もっと詳しい説明
=======================================
時は20XX年。はてなハイクはスパムの軍勢に包まれた…


たたかえ「はてなハイクソルジャー」！ハイクの平和をレッツ守るのだ！


……というノリで作った。
例えばこんなスパム、最近おおいですよね！




もう見るだけでイライラしてきますが、こういったスパムは、ほぼ見えなくなります。
もちろん、ハイクの自動読み込みにも対応してるので、下にスクロールしてハイクサーフィンしても問題なし！新着を読み込んでも大丈夫！


実際に確認してみれば一目瞭然なのでまずは使ってみてください。

　　　　　↓↓↓↓↓↓↓↓↓↓
見づらかったタイムラインが綺麗に。


あとついでに、右側の注目キーワードもスパムタイトルを非表示にするようプログラムしておきました。
こちらも割と便利です。
　
あらきれい。


使い方はchromeにインストールするだけ。
https://chrome.google.com/webstore/detail/%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%8F%E3%82%A4%E3%82%AF%E3%82%BD%E3%83%AB%E3%82%B8%E3%83%A3%E3%83%BC/hhgejafgjjjfaocaopajkhgmdgaeimin?hl=ja


インストールしてブラウザを再更新すると、URL右にアイコンがつくのだ。

このアイコンじゃまだなーといわないで！はてなハイクのときしか表示しないので、特に気にならないでしょう。
このアイコンをクリックするとウィンドウが表示されて、一応スパム機能のONとOFFが選択できるようになってます。
万が一、投稿したいタイトルがあるのに表示されない場合は、ここでOFFにできるのでどうぞ。ONOFFを切り替えたら再更新してください（通常は自動で更新されるはずなんだけど）


というかそういうのを見つけたら私に報告ください。ちゃちゃっとなおしますので。


■今後について
スパム非表示以外にも機能をつけたいんだけど思い浮かばないんだよね…なんか他にやったほうがいいことあるかなぁ。
え？FIREFOXも頼む？やだむりめんどいchrome使ってください。
え？スマホもたのむ？やりたいのは山々なんだけど、できるとすればハイクアプリの形になると思います。Mac持ってないんだわ。開発環境がなくて無理かな。


追加機能できました。説明はこちらへ
http://d.hatena.ne.jp/tukihatu/20140917/1410943668

昨日の試合は戦力差が出てしまった感

横浜DeNAベイスターズ

一日たって、やっぱり采配批判が出てるなぁ。私は采配は間違ってないと思う派。
キヨシは慢心があったとかなんとかコメントしてるらしいですが、そんなものはないように感じてます。
次の日を考えてしまった、というのが慢心というならそうなのかな？
流れを読み取れなかった、というのが慢心というならそうなのかな？


使える長さが足りないんですよねー我らがベイスターズは。


尚成が後1回粘ってくれればよかったんですが、さすがにソロ3発浴びたら変えざるを得ません。
で、5回の時点で残っていたのは
三上、大原、長田、平田、山口、林、ソーサの7人。
このうち長田は投げすぎ、山口とソーサは昨日投げた。次の日も巨人戦。しかも初先発の外人だから中継ぎが必要。
なので三上、大原、平田、ソーサの4人で残りのイニングを消化するつもりだったのでしょう。ちょうど一人1イニング食ってくれれば…という計算。
しかし、三上と平田はルーキーですし、大原は（監督の）信頼が低いので、サポートとして長田、山口を準備せざるをえなかったんだとおもいます。


結果は、三上はまあ投球準備足らずということで仕方ないとして（よく抑えたよなぁ）、十分に余裕があった平田や山口は悪かったですね。
山口はいい球投げてるように見えますが、へんなヒット打たれますね。球威もあると思うのですが。なぜかあの時だけ雨も降ったし。
しかし、もうベテランなのだから、回途中からの登板は弱いとか直してほしいですね…


ベンチの戦力が整っていませんでしたね。
ルーキーではなくアトリやコバカンとかいてくれれば何とかなったかもしれませんが。巨人相手にルーキー投入は分が悪すぎました。
ただ、それはきっと監督もわかってると思います。中堅ベテランつかわないんじゃなくてつかえないんだと。
アトリやコバカンといった中堅が戻ってきて活躍してくれれば一番いいんですけど…
ほんと、もう一人ロングリリーフできる投手がベンチにいてくれればね…
長田が江尻の二の舞になってからでは遅いので早く何とかしてほしいところ。中堅はよ出てきて！


しかーし…ルーキーは1イニング様子をみて、大原はヒット打たれたら交代（しかも絶好調のアンダーソン）っていうのが、大原の信頼のなさを物語ってますね…そんなに信用ないのか。なにしたん大原…（打順的な問題もあるだろうけど）


今日の試合はその前にファーム交代があるんじゃないかな？ちょっと疲労がね…相手も同じですが。
幸い本拠地だからファームから投手よべばある程度整えられると思いますがどうだか…
まあモスコーソが完封勝利してくれる予定だから、余計な心配かもしれませんが（震え声）

floatで出来る縦方向の隙間対策にfont-size:0;を使うな

技術

vertical-align:bottom;を使ってくださいねー。今はフォントサイズ以外の方法がちゃんとありますので。


久しぶりに技術の話。
つい最近「floatを使ったら縦に隙間が出来てしまった。font-size:0;を使えば直るんですけど文字の％指定が無効になっちゃって…」という話が来てびっくりしたので。
というかいつの時代ですか！


font-sizeを0にして難を逃れるなんて下の下策です。他に方法があるのでやめましょう。


上にも書いたように代替にvertical-align:bottom;を使えばOKです。
vertical-align:bottom;の場合指定する場所にコツがあって、
指定するのは、floatをかけたタグ内にある画像要素すべてにします。
imgタグにかけると大体直ります。

<ul class="clearfix">
<li><img src="images" width="100" height="100" alt="" /></li>
<li><img src="images" width="100" height="100" alt="" /></li>
<li><img src="images" width="100" height="100" alt="" /></li>
</ul>

<ul class="clearfix">
<li><img src="images" width="100" height="100" alt="" /></li>
<li><img src="images" width="100" height="100" alt="" /></li>
<li><img src="images" width="100" height="100" alt="" /></li>
</ul>
（css）
ul{ padding:0; margin:0; list-style-type:none;}
ul li{ float:left; padding:0; margin:0; list-style:none;}

例でソースを書きましたが、これを実際に動かすと縦に隙間が出来ます。
これは、floatがかかっているblock内（li内）の要素に画像がある場合改行コードが文字として認識されてしまいフォントサイズ文の幅を持つバグです。
正直ばかばかしいバグです。


直すにはvertical-align:bottom;を使います。ie6でもie7でも対応してますので。

（css）
ul{ padding:0; margin:0; list-style-type:none;}
ul li{ float:left; padding:0; margin:0; list-style:none;}
ul li img{vertical-align:bottom;}


font-size:0;で直した場合以下の問題がありますので絶対にやめましょう。
・フォント表示されないと画像読み込めなかった人にはどう対応する気なの？
・SEO的に良くなさそう。画像にaltはいってるでしょ？その文字隠し文字扱いになりそうじゃない？
・％指定のサイトだと文字可変がそこの子要素でできなくなる


vertical-align:bottom;でなぜ直るかというと、そもそもの原因が初期設定でインラインのvertical-alignがbottom、画像のvertical-alignがbaseline？のため、上下でずれてしまうのが原因と見ています。
そのためテキストのほうに画像も合わせてやれば直るみたいです。
しかしそうすると今度は右に隙間が出来そうなものなのですが…できません。
じつはvertical-align:top;にしても直るのでbaseline指定が誤作動起こすのかも？他にもtext-topとかにしたら隙間できそう。
バグだしあまり追求しても仕方ないですけども。

mp4でエンコードした動画が、どうやってもプログレッシブダウンロード（ストリーミング）されない問題

プレイヤーのせいかとおもったら動画のせいらしい。知らなかった。

http://help.adobe.com/ja_JP/scene7/using/WS53B6356D-ABB4-46f7-9EDB-BDFFFBD50D0C.html


重要： Scene7 Publishing System で作成またはエンコードされていないプログレッシブダウンロード配信用の MP4 ファイルは、再生で問題が発生することがあります。MP4 を再生する前に、ビデオプレーヤーはファイルのインデックス（moov atom）にアクセスする必要があります。ファイルの末尾にインデックスがあると、プレーヤーはファイル全体がダウンロードされるまでインデックス処理を待機しなければいけなくなります。この遅延により、ダウンロードが完了するまでビデオの再生が開始されないため、ユーザは使いにくさを感じます。MP4 の再生開始に時間がかかり、ダウンロードの完了を待たずに再生が始まることがない場合、moov atom がファイルの末尾にある可能性があります。サードパーティユーティリティを利用して、MP4 の moov atom の位置を変更できます。


つまりMP4は、moov atom（moovだけの時もある）を読み込まないと、再生を開始できないんだそうです。


もうちょっと（私に分かるように）分かりやすく書くとこう。

moov atomってなんなの？→ファイルのインデックスとのこと。

ファイルのインデックスってなんなの？→おそらくファイル情報を格納しているDBデータのことでは？

ファイル情報って？→曲の再生時間やコーデック情報などのこと。コーデック情報が分からないと、そりゃあ再生できないよね。

どうしてファイルの末尾にインデックスがあると、プレーヤーはファイル全体がダウンロードされるまでインデックス処理を待機するの？→そりゃあファイルとはテキストデータの集合体だから上から読んでいくじゃんか。末尾にインデックスがあればそれを見つけるために必然的に全体をダウンロードしなきゃいけないでしょ？そういうこと。

moov atomを上に移動させることはできないの？→基本的にエンコードソフトに設定があるはず。
すでにエンコード済みのmp4の場合は、再エンコードするか、力わざになるがバイナリエディタでmp4を開いて、下にあるmoov atomを上に書き換えるしかなさそう。（ちゃんとコピー取ってから作業してね）


種が分かればこれほど単純なこともない。

2カード終わったのでベイスターズについて書いてみる

なんで負けるやよ！くやしいやよ！


中日戦は投手の調子が割かしよくて勝ち越したけど、巨人との対戦では馬鹿試合になったりと…なんだかなぁ。せっかく巨人の投手陣が調子悪いときなので勝っておきたかったんだけど。


投手
ソト頑張れ。井納くんは5回5失点と成績見れば散々だけど、打たれたヒットは少ないし合格点かと。少なくとも須田くんよりはいい感じだった。コントロールいいみたいだし。ちょっとデジャブだったんだけど。
三嶋くんは先発で見てみたい。
吉川はダメやね。四球多すぎなので一度二軍調整してきて欲しい。
ばんてふとか秀悟はその調子でｵﾅｼｬｽ。加賀ちゃんも悪くない気がする。
えーとあとは鄭か。貧打の中日に2回4失点ではまだ難しそうだね。横須賀横須賀。


野手
ブランコおかしなことやってるけど、あの調子が続くとは思わないし、周りも頑張って欲しいかな。ブランコがぶらんこ乗るところ見たいよ…
石川キャプテンの調子はいいけどそれが主軸につながっていない感。
内村とモーガンが調子上がってきてないからかな？
モーガンは未知数なところもあるけど、小技が出来るので2番バッターと考えれば今のぐらいでもいいかも。
ラミちゃんがんばれー
荒波は打てていないけど、彼をスタメンから外すのは絶対にダメ。守備の貢献度がものすごいので。
高城は…うーん…ぱっとしないなー。
ソトや井納に何度も首振られているし、フォローとコミュニケーションをもっととったほうがいい気がする。リードを1人で学ぶのも大切だけどさ。
でも監督の期待が大きいのは分かる。井納の時にベテランの鶴岡を捕手で使わなかったからなー。


監督
あいかわらず甘い。もうちょっと非情な判断も時には必要だと思うんだが…


総評
打線もどうのこうのあるけど、やっぱルーキー投手が鍵。もうこれでしょ。
枚数足りないんですよ、やっぱり5試合は頑張るけど1試合は捨て試合（小杉とか）になってしまうと100％負け越すので、5人目6人目が出てきて欲しい気持ち。
あと高崎がそろそろいい成績になってくれれば。

shadowbox.js ver3.0.3の日本語説明が無いので全部書いてみる。（オプション編）

技術

確認してない項目も結構あるので、これ通りに動くかはわかりません。公式に書いてあるので大丈夫だとは思いますが。


オプション
※オプション要素は通常時、Shadowbox.initかShadowbox.setupに書いてください。
※機能順です。オプション横の括弧内はデフォルト値です。よく使いそうなものや注意点は赤字。
※値は文字列・数字列を正しく設定しないと反映されません。クォートの使いどころに注意。


使えなくなったオプション
■language
国名を入れると言語対応してくれていた（過去形）
実はver3.0からは削られた機能のようで書いても意味は無い。
代わりにダウンロードするときに対応する言語を選べるようになった。
■players
Shadowboxをつかって対応するファイルタイプを指定できた（過去形）
こちらもver3.0からは削られた機能のようで書いても意味は無い。
代わりにダウンロードするときに対応するファイルタイプを選べるようになった。


デザイン関係（要素表示非表示）
■overlayColor（"#000"）
表示時の周りのグレーゾーン（画像以外の部分）の色を指定できます。
■overlayOpacity（0.5）
表示時の周りのグレーゾーン（画像以外の部分）の透明度を指定できます。
■showOverlay（true）
falseにすると表示時の周りのグレーゾーン（画像以外の部分）を非表示にする。
■viewportPadding（20）
ブラウザ縦横の余白を設定できる。px単位。
説明しにくいが、画像がブラウザより大きい時この数値が0だと、ブラウザ幅いっぱいでリサイズ表示する。
デフォルトの20だと20px両横を開けるようにリサイズ表示する。（handleOversizeの設定にも依存します）


表示アニメーション関係
■animate（true）
falseにすると全てのアニメーション表示を無効にする。
■animateFade（true）
falseにすると全てのフェードアニメーション表示（FIFO）を無効にする。
上と似ているが、animateFadeはフェードのみ無効。スライドインやズームインの動作は残る。
■animSequence（"sync"）
リサイズシャドーで使用するアニメーションシーケンスを選択できる。（原文ママ）
分かりにくいので詳細に書くと、Shadowboxで画像などを開いた時、画像が読み込まれる前に黒いウィンドウが小さい状態から大きく開く動作がある。その動作のパターンを選択できる。
"wh"：横に広がってから縦に広がる、"hw"：縦に広がってから横に広がる、"sync" ：両方同時に広がる
noneとかはパラメータに無いので出来ない模様。全部切るにはanimateオプションをfalseにするかresizeDurationを0に設定すれば出来るかも。
■resizeDuration（0.35）
上のリサイズシャドーのアニメーションの時間を設定できる。秒単位。
■initialWidth（320）
上のリサイズシャドーで使用する黒いウィンドウの小さい状態の横幅を設定する。px単位。％は無理？
■initialHeight（160）
上のリサイズシャドーで使用する黒いウィンドウの小さい状態の縦幅を設定する。px単位。％は無理？
■fadeDuration（0.35）
フェードアニメーション（FIFO）の時間を設定できる。秒単位。


画像表示時の設定関係
■handleOversize（"resize"）
指定の横幅、縦幅より大きい画像を表示する時の挙動を設定できる。
"none"：原寸で左上から表示する。はみ出た部分は切り取られる
"resize"：画像をリサイズして表示する。
"drag"：原寸で左上から表示する。画像をドラックして見ることが出来る。
HOMEのExamplesの一番下にサンプル（テキストボタンの三つのリンク）があるので見てみるとよいかも。


動画表示時の設定関係
■autoplayMovies（true）
falseにすると開いたときの動画の自動再生を無効にする。flv、QuickTime、Windows Media Player限定と思われる。
■showMovieControls（true）
falseにすると動画のコントロールバーを非表示にする。QuickTime、Windows Media Player限定と思われる。flvはできると書いていない…
■handleUnsupported（"link"）
表示するためのプラグインが無い、または古い場合の挙動を設定できる。
swf、flv、QuickTime、Windows Media Player限定と思われる。
"link"：ダウンロードリンクなどを表示する、"remove"：表示できない要素をリストから消去する


Flash表示時の設定関係
■flashParams（{bgcolor:"#000000"}）
flashに渡すparam要素を設定できる。デフォルト値に背景色が入っているので、flashを表示する場合は必須項目になるかも。
設定方は配列形式が一番やりやすいと思います。
デフォルト値は置き換えられるので、他の要素を追加しつつbgcolorもそのまま使いたい場合は、あらためてbgcolorを記載する必要があります。
例）flashParams:{wmode:"transparent",quality:"high"}
■flashVars（{}）
flashに渡すFlashVars要素を設定できる。flash表示時に使用。
■flashVersion（"9.0.0"）
flashを表示する時の最低バージョンを設定できる。バージョン以下だと「playerダウンロードしなさい」の代替リンクが出る。


ギャラリーモード関連
■continuous（false）
ギャラリーモード（連番ファイル表示）使用時に、最後の要素を表示している時は次へボタンが出ないが、
trueにすると次へボタンを表示して最初の要素にループさせる。前へボタンも同じ挙動になる。
■counterType（"default"）
ギャラリーモードで左下に数字リンクがあるUIになる。
"default"：数字リンクなし、"skip"：数字リンクあり
■counterLimit（10）
ギャラリーモードで数字リンクがある場合、その数字リンクをいくつ設置するか設定できる。
現在位置から計る模様。
■slideshowDelay（0）
スライドショー機能の設定。秒単位。
0秒を指定すると機能自体がoffになる。
■displayCounter（true）
falseにするとギャラリーモードの左下の数字部分を非表示にする。
■displayNav（true）
falseにするとギャラリーモードの下のナビを全部非表示にする。（数字部分とボタン部分、閉じるボタン含む）
■enableKeys（true）
falseにするとギャラリーモードをキーボードで操作できなくなる。（キーボード…？左右とか元々できるってことだろうか…）


その他機能関係
■modal（false）
trueにすると表示時の周りのグレーゾーン（画像以外の部分）をクリックすると、画面を閉じるアクションを無効化できる。なんでtrue…？
■troubleElements（["select", "object", "embed", "canvas"]）
Shadowboxを開いている時には、非表示にするタグ名を設定する。
おそらくIE6やandroid対策。どちらもz-indexが上手く聞かない時に使うといい。ナイス設定。
ただデフォルト値から変更することは無いと思われるので放置安定。
■skipSetup（ture）
Shadowboxを開くたびに設定を初期化して再読み込みする機能？
falseにすると同じモードの場合なら読み込み時間の短縮になるということ。true安定。


JS連携
■onClose
onClose要素を付与。発動条件は「Shadowboxを閉じた時」
関数要素は一つで、最後に表示されたギャラリーの要素が入るらしいです。
例）onClose:function(data){}
■onOpen
onOpen要素を付与。発動条件は「Shadowboxを開いた時」
関数要素は一つで、現在のギャラリーの要素が入るらしいです。
このコールバックからブール値falseを返すことで、開口部からシャドーを防ぐことができます。（原文ママ）
な、なんのこっちゃ…リサイズシャドーを禁止できるということかもしれません。
■onChange
onChange要素を付与。発動条件は「ギャラリーモードで次の画像ボタンを押した後、現在表示の画像が消えた時」
関数要素は一つで、表示されようとしているギャラリーの要素が入るらしいです。
■onFinish
onFinish要素を付与。発動条件は「ギャラリーモードでつかう要素のロードが終わった時」
関数要素は一つで、現在のギャラリーの要素が入るらしいです。


一応設置方法も
1. cssとjsを読み込む

<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>

2. 設定する

<script type="text/javascript">
Shadowbox.init();
</script>

もしくは

<script type="text/javascript">  
Shadowbox.init({
    //オプション記載（例：flashの場合）
    flashParams:{wmode:"transparent"},

});  
</script>

3. リンクに設置する
通常

<a rel="shadowbox;width=535;height=330" href="milk.swf">

ギャラリーモード

<a href="beach.jpg" rel="shadowbox[Vacation];width=535;">The Beach</a>
<a href="pier.jpg" rel="shadowbox[Vacation]">The Pier</a>


拡張編はこちら（まだ）

どのページでもユーザCSSを追記できるブックマークレット setCssScript

技術

いちおう作ったのでここに置いとくか。
iphone用のブックマークレットで、ユーザCSS書けるものをつくったった。
f.hatena記法が貼り付けできなくていらいらして作った。需要全く無いなーきっと。
（もちろんその他機種でも出来る）

http://let.hatelabo.jp/tukihatu/let/gYC-y5a7ovXcDw

貼り付けコードは長いのでこちら（同時にfirebugも立ち上がるコード）
http://h1beta.hatena.ne.jp/tukihatu/189921615520458898

貼り付けコピーがすごくやりにくいからスマホこわいわぁ。


一応機能を書くなど。
・ユーザCSSを書き込んでデザインを変えたり非表示のものを表示したりできる
・iPhone用に作ったけど全ブラウザ対応（何でもOK）
・クッキー記憶で、二度目に開いた時はユーザCSSを復元（ただしクッキーに保存できるレベルの文章量）
・cssの適応範囲を、サイト全体 or ページ単位で選べる


仕様と対象ユーザ
・ようするにbodyタグの一番下にstyleタグを書き込んで表示を変える仕組み
・ある程度CSSの知識が必要
・firebug使える人


機能的にはこれで十分なはずだけど、また後で何か増えるかもしれない。スペースないｗ