「margin」を含む日記

■anond:20210315235950

margin-(top|bottom|left|right)

padding-(top|bottom|left|right)

Permalink | 記事への反応(0) | 10:23

ツイートシェア

■anond:20190110011902

photoshopで作ったpsdのwebデザインを渡されて、フロントエンド担当がHTML/CSSコーディングしてるんだけどどうなのこれ？

デザインカンプとかのこと？

そういう職場もある

客に見せるデザインカンプの方が先に必要なことも多々あるのでは

自分も否定的に思うこともあるけど

なんでphotoshop使うの？webページ作るんでしょ？最初からHTMLで書けよ？

最近はFigmaのようなWebページやモバイルアプリなどのUIデザインのツールが多くある

それをそのPhotoshopのようなデザインカンプ作成に使うのはありだと思う

というか、こっちの方がデータがXMLやJSON形式だったりするので、デザインからそのままコードに落とし込みやすい

Figmaでネイティブのデスクトップアプリさえデザインして一発で落とし込む試みをGitHubで開発している人もいる

ラフの段階でphotoshopでササっと書いた方が客と調整しやすいもんな

上述したとおり、デザインカンプのことですね

でも最終的にはHTMLで出すんだから、デザイナーがHTML/CSS書いて来いよ

いきなりHTML/CSSを書くと、後から抜本的な調整が不可能になる

プログラミングも同じで、かなり書いてから、やっぱあれナシだから、みたいなのは嫌なので

それをなんか知らないけど、普段使わねーphotoshop開いてルーラー出して、

「ここと、ここのボックスは10pxだからーmarginを...」

「ここは、webフォントの〇〇を使おう」

とかフロントエンド担当が相談してんのｗ

ピクセルパーフェクト？みたいな考え方も職場に寄る

自分も馬鹿げていると思うこともあるが、そもそも社内研修やスクールでそう教えてるところもある

自分もそう教えられたときがあって、その場では嫌々ながら教えられたやり方で課題をこなしたりしてた

ここで逆らっても意味ないなあ、と思ったので

客なり講師なりを全否定するなら、そこに自分がいる意味がなくなっちゃうよなあ、とも思ったので

正直、そういう場合はちょっと揉めることが多いのだけど、仕方がないですね

最初からデザイナーがHTMLで書けよ

UIライブラリもフレームワークも充実してんだからphotoshopで大枠を調整したら、ササっと書けよ自分でよ

photoshopで書かれた夢いっぱいキラキラデザインの実現可能性をなんでこっちで検証しなきゃいけねーんだよボケが

上述通り、いきなりHTMLで良くない場合がある

ライブラリやフレームワーク前提にさせてくれない仕事がある

仕様等の客の話を聞きながら勝手に自分の中で、あのライブラリやあのフレームワーク使えば楽勝だろう、と思っていると、

後々になってその前提としていたライブラリやフレームワークでは実現が難しい仕様を喋りだしたりすることもある

今の会社含めて2社しか経験してないので、一般的かどうかは判断できないが、前職ではHTML/CSSまでデザイナーの人が書いてたぞ

だから、職場に寄る話でしかない

そういう職場もある

というか、もっと酷い職場もあ(ry

(zeplinが吐く糞みたいなコードじゃなくて、ちゃんと構造化された綺麗なHTMLね)

Zeplinは知らないけど、ツールにクソコードを吐かれるのはよくあるので、そこは相談するしかないのかなあ

相談するだけ無駄なケースも多いので、転職するとか、仕事自体を蹴ってしまうことも考えるべきかも

あんまり仕事選ぶと生きてけないけど

現に生きてけないで🍣

本来はこうでしょ？

（中略）

とかいう下らんやり取りを止めろカスども

自分も若い頃は自分のやり方が正解だと思っていたし、

今になって思い返しても、自分のやり方の方が正しかったんじゃん、やっぱアホだろあれは、

と思うこともあるけど、世の中そんなもんなのでなんとも言い難い

決定権が自分にないと当然無理だし、フリーランスで決定権が持てても今度は仕事が小さくなるし

photoshopは画像編集ソフトであって、webページ作成ソフトじゃねーんだよ!そんな事も分かんねーのか？

それは偏見

例えば、音声のスペクトル、声門とかを画像編集ソフトでプレビュー、加工することもなくはない

もっとも、それ専用のアプリ使った方がいいのは言うまでもないが

自分は普段はPhotoshopを使ってないけど、PSはJavaScriptなどでプラグインが書けるはずだし、

ユーザー数の多さ、コミュニティの大きさはバカにならない

といっても、何でもPhotoshop同様、何でもExcelの世界で、Excelで仕様書とかあんたバカァ？とは思う

（中略）

HTML/CSS分かんねーなら今すぐudemyで勉強してこいハゲ！

これもやんわり、なんとかなりませんか？みたいに言うぐらいしかできない気がする

でも、意見するだけで攻撃的になる人もいるので、転職案件なのかもなあ

ダニング＝クルーガー？

3. そもそもデザイン要るの？

そもそも何でもかんでもwebページをポスターみたいに着飾るんじゃねーよ

巷に溢れてるキラキラデザインのwebページ糞使いにくいぞ

ランディングページならともかく、よく使うwebアプリを着飾るんじゃねーよ、開発もしにくい、使いにくいしでまったく良いこと無い

それは客が要求するのもあるんで

大抵Craigslist, Hacker News くらいのデザインで十分なんだよ

最近の自分みたいだな

フロントエンドエンジニアみたいな肩書でドヤってる人を見るとウンザリする

いっそJavaScriptなくした方がいいんじゃないかとさえ思うときがある

Webブラウザのタブごとに動作しているわけで、ブラウザが重くなる原因の1つだと思うし、

もっとシンプルでミニマムな設計がいい

ブラウザ上でしか動作しないJavaScript書いて人生を消費したくない

webデザイナーはカスだったけど、前職に比べて給与は上がったから、しばらくは居る

自分はこのままだと精神が病むと思ったので辞めました

お金で買えない価値がある

でも、本当に？

自動車保険だって人の死亡を結局はお金で解決してるんだよ？

チャップリン「人生に必要なものはすべて金ｗ」

Permalink | 記事への反応(0) | 06:16

ツイートシェア

■CSS はグローバルにやるのかローカルにやるのか

この辺、よくわからない...

FLOCSSは知らなかったけど、その質問、かなりどうでも良い枝葉末節なような・・・そもそもコンポーネントは文脈によって用例が1000ぐらいある用語だし、巻き上げはES6/TSではそもそも文法でチェック対象。CSSをどう構造化するかもチームの意思決定とか次第だし、CSS in JSの方が良い。 https://t.co/Y14qF4NzpQ— 渋川よしき (@shibu_jp) May 3, 2019

vueはあくまでjsだからね。
jsはjsで管理した方がいいし、cssはcssで管理した方がいい。
でないと確実に肥大化する。
css設計さえしとけばコンポーネントファイルになんて書く必要ないしね。
CSS設計使えない現場ならコンポーネント内でやった方がいいけど。 https://t.co/8jGzRGXlD8— かずきち@プログラミングスクール経営者 (@kazukichi3110) November 28, 2019

渋川様は、どちらかというとウェブアプリケーションよりで、ウェブカツ!! 様は、どちらかというとウェブ制作よりだから意見の相違が見られるのかな。以下が、自分にとっての答えっぽいな...

CSS設計わかんないよーって方は、まず「borderより外側のスタイルをコンポーネントに含めない」を意識するといいかも！

// Bad
.list .box {
margin-bottom: 10px;
border: ...;
padding: ...;
}

// Better
.box {
border: ...;
padding: ...;
}

.list .box {
margin-bottom: 10px;
}— ダーシノ / NES.css (@bc_rikko) December 6, 2019

Permalink | 記事への反応(1) | 15:06

ツイートシェア

■会社のwebデザイナーが無能すぎてヤバいｗｗｗｗ

去年の冬に転職したweb系のプログラマー。

今の会社のwebデザイナーが無能すぎてしんどい。

以下愚痴

1. photoshopでwebデザインすんな！

photoshopで作ったpsdのwebデザインを渡されて、フロントエンド担当がHTML/CSSコーディングしてるんだけどどうなのこれ？

なんでphotoshop使うの？webページ作るんでしょ？最初からHTMLで書けよ？

いや分かるよ

ラフの段階でphotoshopでササっと書いた方が客と調整しやすいもんな

でも最終的にはHTMLで出すんだから、デザイナーがHTML/CSS書いて来いよ

それをなんか知らないけど、普段使わねーphotoshop開いてルーラー出して、

「ここと、ここのボックスは10pxだからーmarginを...」

「ここは、webフォントの〇〇を使おう」

とかフロントエンド担当が相談してんのｗ

バカなの？死ぬの？

最初からデザイナーがHTMLで書けよ

UIライブラリもフレームワークも充実してんだからphotoshopで大枠を調整したら、ササっと書けよ自分でよ

photoshopで書かれた夢いっぱいキラキラデザインの実現可能性をなんでこっちで検証しなきゃいけねーんだよボケが

今の会社含めて2社しか経験してないので、一般的かどうかは判断できないが、前職ではHTML/CSSまでデザイナーの人が書いてたぞ

(zeplinが吐く糞みたいなコードじゃなくて、ちゃんと構造化された綺麗なHTMLね)

本来はこうでしょ？

「このボックス内の文字が溢れたらどうなりますか？」

「このボタンにマウスオーバーしたときの画像下さいとか」

「レイヤーでマウスオーバー時の画像保存してあります」(←ふざけんなｗｗ

とかいう下らんやり取りを止めろカスども

photoshopは画像編集ソフトであって、webページ作成ソフトじゃねーんだよ!そんな事も分かんねーのか？

2. webデザイナーがphotoshop職人でHTML/CSSを全然理解してない

webデザイナーだよね？あんたらは？

webが頭についてるならwebの事ちっとは理解すべきなんじゃねーの？

「いやCSSよく分かんないんでじゃねーよ！」

Reactを書けとは言わない

でもせめて、CSSフレームワーク, flexbox, grid layoutとかは知ってるべきでしょ？

photoshopで簡単に作れてもwebページだと大変なことだってあるんだバーカ

psd渡してあとは頑張ってね！でよくwebデザイナー名乗ってるなｗ

webのこと分からないwebデザイナーなんてマジで笑いごとで済まねーぞｗ

建築デザイナーの人が大工までやりなさいと言ってるんじゃない

でも建築基準くらいは知っておくべきでしょ？

webデザイナーならHTML/CSSを最低限知っておくべきなんじゃねーの？

んである程度分かるなら、photoshopで頑張って画像作る手間でHTMLを書けよと言いたいんだよ

いい加減目を覚ませ！！！

HTML/CSS分かんねーなら今すぐudemyで勉強してこいハゲ！

3. そもそもデザイン要るの？

そもそも何でもかんでもwebページをポスターみたいに着飾るんじゃねーよ

巷に溢れてるキラキラデザインのwebページ糞使いにくいぞ

ランディングページならともかく、よく使うwebアプリを着飾るんじゃねーよ、開発もしにくい、使いにくいしでまったく良いこと無い

パララックスもモーダルウィンドウもうぜーとしか思わんｗｗ

大抵Craigslist, Hacker News くらいのデザインで十分なんだよ

それを何でもかんでもデザインの所為にして、下らん工数使って何がしたいんだか

UI/UXを考えたデザイン変更じゃなくて、糞webデザイナーのオシャレ(笑)に付き合うくらいだったら、もっと他に開発すべきことが無いか考えろ

そのwebサイトが当たらない理由をデザインの所為にするんじゃねーボケカス

まとめ

webデザイナーはカスだったけど、前職に比べて給与は上がったから、しばらくは居る

でもいつかこいつらを首にしたい

あとこいつらの肩書をWebコラ画像職人に変えたい

Permalink | 記事への反応(23) | 01:19

ツイートシェア

■anond:20181114142424

margin=余白

padding=肉付け

Permalink | 記事への反応(0) | 14:39

ツイートシェア

■anond:20171116210216

そのbyはby more thanっていうセットフレーズの一部

https://eow.alc.co.jp/search?q=by+more+than

もっと詳しく言うなら

https://en.oxforddictionaries.com/definition/by

3 Indicating the amount or size of a margin.

‘the raising of VAT by 2.5%’

Permalink | 記事への反応(1) | 10:13

ツイートシェア

■Vimの不思議なインデント

int
main()
{
printf("Hello Masuda!\n");
return 0;
}

コピペしたらインデント消えたわ…gg=Gでインデントなおさんと。

	int
main()
{
	printf("Hello Masuda!\n");
	return 0;
}

そうじゃない…そうじゃないんだ…。

BSDスタイルでは戻り値の型の前にインデント入れたら駄目なので困った。

" tN    Indent a function return type declaration N characters from the
"       margin.  (default 'shiftwidth').
" 
" 	cino=		    cino=t0		cino=t7 >
" 	      int	      int			 int
" 	  func()	      func()		  func()

cinoptionsでこれを設定すれば解決できるのは知ってる。

だけどデフォルトでインデント入れるのはどういう事情があってのことなんだろう。

Permalink | 記事への反応(0) | 01:11

ツイートシェア

■http://anond.hatelabo.jp/20140925164738

#pics>div {
display: inline-block;
float: none!important;
margin: auto;
}

↑の定義入れてから出直してこいやオタンコナス。

(大なり記号が増田の仕様でエスケープされるだろうから適当に解釈しろよ！）

Permalink | 記事への反応(0) | 17:12

ツイートシェア

■増田の広告向けCSS

「Stylish」用にちまちまと「要素を検証」してこうした

div.afc,
div#afc_footer,
div.google_afc_blocklink
    {
        background:#e9e9e9;
        font-size:100%;
        padding:0;
        border:solid 1px #e9e9e9;
    }
div.afc div.google_ads_by,
div.afc div.google_afc_blocklink li
    {
        margin:0;padding:0;
    }

が自分にしか効かないCSSなんだから（自分は絶対に広告をクリックしないのだから）

div.afc,
div#afc_footer,
div.google_afc_blocklink
    {
        display:none;
    }

これでいいや

参考

はてなダイアリー無料版の広告に向くスタイルシート - Imamuraの日記

http://d.hatena.ne.jp/Imamura/20140528/hatenaad

Permalink | 記事への反応(0) | 23:50

ツイートシェア

■あまりに使いにくいから FirefoxアドオンStylish用ユーザーCSS

http://anond.hatelabo.jp/20130108203837

あまりに使いにくいから FirefoxアドオンStylish用ユーザーCSS

@-moz-document url-prefix("http://b.hatena.ne.jp/"){

.ad-head-text{display:none!important;}

.ad-unit{display:none!important;}

.thumbnail{display:none!important;}

.entry-data{display:none!important;}

.entry-contents blockquote{display:none!important;}

.shim-elem-for-height{display:none!important;}

.entry-meta{display:none!important;}

.entry-comment{display:none!important;}

.entry-unit{width:100%!important;margin:0!important;}

.entry-vertical-3,.entry-vertical-4{background:none!important;}

.entry-contents{padding:0!important;}

ul.users{height:22px!important;border-top:1px solid!important;}

.users span{font-size:12px!important;font-weight:bold!important;}

}

他のブラウザのは誰か書いてくれるだろう

Permalink | 記事への反応(0) | 12:15

ツイートシェア

■はてなブックマーク用ユーザースタイルシート

http://b.hatena.ne.jp/entrylist

のページ限定でsafariでしか確認してません。

以下をテキストファイルにコピペしてhatena.cssとかで保存。

safariだと環境設定の詳細のスタイルシートで選択すればマシになります。

ちょっと更新。

/*********************************************************************************/

#container #main .box-wrap div ul.entry-vertical-4,

#container #main .box-wrap div ul.entry-vertical-3 {

background: none !important;

}

#container #main .box-wrap div ul.entry-vertical-3 li.entry-unit,

#container #main .box-wrap div ul.entry-vertical-4 li.entry-unit,

#container #main .box-wrap div ul.entry-vertical-3 li.ad-unit,

#container #main .box-wrap div ul.entry-vertical-4 li.ad-unit {

display: block !important;

}

#container #main .box-wrap div ul.entry-vertical-4 li.entry-unit,

#container #main .box-wrap div ul.entry-vertical-4 li.ad-unit,

#container #main .box-wrap div ul.entry-vertical-3 li.entry-unit,

#container #main .box-wrap div ul.entry-vertical-3 li.ad-unit {

width: auto !important;

}

#container #main .box-wrap div ul.entry-vertical-4 div.entry-contents,

#container #main .box-wrap div ul.entry-vertical-3 div.entry-contents {

border: none !important;

}

#container #main .box-wrap div ul.entry-vertical-4 div.entry-contents a.thumbnail,

#container #main .box-wrap div ul.entry-vertical-3 div.entry-contents a.thumbnail {

float: right !important;

padding: 0 0 0 20px !important;

}

#container #main .box-wrap div ul.entry-vertical-4 div.entry-contents a.thumbnail img,

#container #main .box-wrap div ul.entry-vertical-3 div.entry-contents a.thumbnail img {

max-width: 180px !important;

}

#container #main .box-wrap div ul.entry-vertical-4 div.entry-contents h3,

#container #main .box-wrap div ul.entry-vertical-3 div.entry-contents h3 {

clear: none !important;

}

#container #main .box-wrap div ul.entry-vertical-4 div.entry-contents h3,

#container #main .box-wrap div ul.entry-vertical-3 div.entry-contents h3 {

font-size: 20px !important;

}

#container #main .box-wrap div ul.entry-vertical-4 ul.entry-meta,

#container #main .box-wrap div ul.entry-vertical-3 ul.entry-meta {

border: none !important;

border-top: 1px dotted #ECECEC !important;

clear: both !important;

}

#container #main .box-wrap div ul.entry-vertical-4 ul.entry-meta li.tag,

#container #main .box-wrap div ul.entry-vertical-3 ul.entry-meta li.tag {

clear: none !important;

margin: 0 0 0 15px !important;

}

/*********************************************************************************/

http://anond.hatelabo.jp/20130108203837

Permalink | 記事への反応(0) | 00:45

ツイートシェア

■[ぷろとら]音ゲー情報サイト管理人によるゲーム解析音源掲載事件　【総合まとめ】

【お知らせ】

事件当事者(TA2)への愚痴を掲載をしてしまいました。申し訳ございませんでした。また、一行掲示板におけるTA2氏の発言をまとめる予定です。

纏めwikiができたのでリンクを貼っておきます。

以降、書くべきことは全て↓のwikiにまとめています。

http://wikiwiki.jp/wanapa/

なお、これ以外にも特定サークルへの中傷を行なっていた模様です。私が過去にまとめた記事が証拠となり嬉しい限りです。

http://henkaya.blog.fc2.com/blog-entry-15.html

(WEB魚拓http://megalodon.jp/2012-0602-1456-56/henkaya.blog.fc2.com/blog-entry-15.html )

追記：6月4日午後一時ごろの記事主は私じゃないです。

簡潔な経緯

音楽ゲーム情報サイト「ぷろとらどっとこむ」(http://purotora.com)の管理人:森野聖樹（←ハンドルネーム。以降TA2）氏が、

初心者向けに、音楽ゲーム「BeatmaniaIIDX」シリーズの譜面攻略法を掲載した。

譜面画像と音パターンを用意していたが、その音パターン内に、

PS2ゲームソフト「beatmaniaIIDXシリーズ(DJTROOPERS もしくは EMPRESS)」内の"Wanna Party?"という曲のデータを解析し抜き出し、音源を使用している疑惑が5/12(土)夜中に発覚。一行掲示板による追求後、

TA2氏がこれを認め、合法な音源に差し替えたが、返答の遅れ、口調、言い訳、掲示板の頻繁なログ消失が不満を買い、TA2氏への抗議が続いたが、

更新停止二日後にサイト更新再開（アフィリエイト継続）。開いた広告スペースに小さくお詫び文を載せ、同月30日にレイアウト変更と言いつつ謝罪文こっそり削除。
投稿者IPの表示+批判意見発言者のIP制限 （NGワード設定は不明）にて批判の意見を抑えこみつつサイト運営を続けている。

なお、この解析事件によるIP表示の書き込みでTA2氏のIPが判明。同人サークル「状態変家」に対し、ネット上の掲示板で誹謗中傷を行なっていたIPと一致。

http://henkaya.blog.fc2.com/blog-entry-15.html

これを問い詰めると、TA2氏は誹謗中傷したことを認めた（謝罪しておらず態度が問題）。今回の解析事件以外にも、同人界隈でトラブルを起こしていたことが明らかになった。

「ぷろとらどっとこむ」とは何か。

ネタ集め・まとめサイト/創作系サイト　兼　beatmaniaIIDX情報まとめサイト。

初期の頃は音楽ゲームとニュースを少し紹介するサイトだったが、IIDX新作稼働初期に一行掲示板の情報を集めていたところ、ゲーセン店員やプレイヤーのサイト訪問が増え、規模が拡大し音ゲー情報サイトとして有名になった。ガラケーでも見やすい携帯用のまとめページがあるのが特徴。

この管理人TA2氏主催の同人サークルの参加者も増え、同人イベントでも有名になっていった。

TA2氏の存在はIIDXスタッフも知っており、

作曲担当のDJYOSHITAKA氏に自分の同人CDを持たせ写真を撮ることに成功していた。

他スタッフからは体調を気遣われることもあった。

また、ポップンミュージック新作ロケテのアンケートの「よく使用するサイト」の質問で
はちま起稿、オレ的ゲーム速報＠刃　とともに、「ぷろとらどっとこむ」の項目が設けられていた。そのくらい有名な音ゲー情報サイトになっていた。

今回の事件、何が問題か？

1. TA2の言動は目に余るものが多く、音ゲー情報のまとめ役として、同人音楽同人絵のクリエイターを束ねている同人サークルのTOPとしてふさわしくない。
2. 自分の立場を把握した謝罪文を出しておらず、信頼を損ねたことについて把握していない
3. 一日程度の更新停止のみで、サイト運営を再開することにより、アフィリエイトによる広告収入を得ており、反省の意思が見られない
4. 自サイトの掲示板にて、批判的な意見を書き込んだIPを規制していることから、今後の改善が見込めないのではないか。なお、この批判意見は、1～3が原因であるものが多い。
5. 十分な反省の態度が見られないこの状態で同人イベントに参加し続けることで同人界隈に更なる悪影響を及ぼす恐れがある。

ログ

１：http://anond.hatelabo.jp/20120519032040

２：http://anond.hatelabo.jp/20120512131058

３：http://anond.hatelabo.jp/20120512130433

４：http://anond.hatelabo.jp/20120512230254

隔離用1行掲示板設置後　http://anond.hatelabo.jp/20120512223315

↑の魚拓　http://megalodon.jp/2012-0513-0229-30/purotora.com/cgi-bin/4-bbs/view.cgi?st=1&to=800

発覚直後の魚拓、生ログ（HTML）

http://t.co/sPcPDkWo

http://www1.axfc.net/uploader/He/so/363116

一行掲示板の問題

ログの復元不可レベルの消失が数回発生

意図的に消したのであれば、掲示板の炎上を抑えこんでいること

うっかり消去したのであれば、バックアップ設置の怠り

CGIのエラーで消えるのであれば、このCGIのプログラマーのミス

が責任として問われる。頻繁に消える為、2chネットwatch板住人によりWEB魚拓が頻繁に取られていたようだ。

投稿者IPの表示

TOPページからは書き込みIDが見えない、投稿件数を見るか投稿して中に入らないとIPが見れない。

契約者固有ID表示

携帯電話の使用者の契約者固有IDが見える状態にあった。

395 爆音で名前が聞こえません sage New! 2012/05/18(金) 22:20:03.84 ID:jKX6qZ860

対処法書きに言ったらNGされたんだけど。洒落にならんぞ

　

以下書き込みたかった全文

端末固有IDをそのまま表示してしまったことは、冗談にならないほど深刻なセキュリティ事故です。既に悪意を持った第三者が端末固有情報を利用している可能性が否定できません。

セキュリティ事故の被害者に、問題が起こったことを周知し、対処してもらう必要があります。

また運悪く被害者となってしまった方が、あまりこちらのサイトに来訪されない方であった場合、伝わらない可能性があるので、最低半年程度、事故が起こった事実を掲示する必要があるかと存じます。

被害者の方に対して、対処策を伝えることも重要です。SNSや各種WEBサイトにて、かんたんログインに類する機能を使っていた場合、即刻それを取りやめるよう要請。機種変更をし、固有IDを手放すことの奨励。

同等機能のをもった機種に変更の必要があるなら、その資金援助やサポートなど、即刻やるべきことがあります。重ね重ね申し上げますが、これはセキュリティ事故です。真摯な対応をお願いいたします。

また、TA2氏はこの抗議に対し、

携帯固有IDが漏洩したのではないかという指摘について、このIDは、インターネットのサービスを利用する際に、常にやりとりされる情報であり、

適切な認証システムを利用される限りはセキュリティ上問題になるという認識はございません。

しかしながら、個人情報の漏洩であるという考え方も可能であるため、利用者の方にご不安を与えてしまったことをお詫び申し上げます。

と言及しているが・・・

↓証拠のURLです。URL欄に貼り付けてみましょう。

view-source:http://purotora.com/cgi-bin/1-bbs/view.cgi?st=1&to=10

<font size="2">
<form action="/cgi-bin/1-bbs/write.cgi?guid=ON" method="POST" style="margin:0em;">

http://d.hatena.ne.jp/maru_cc/20080331/1206938154

guid=ON　という文字をソースに入れることで、ケータイ同意なしに個体識別番号を取得している。

常にやり取りされる情報ではなく、意図的に取得しているようだ。

Permalink | 記事への反応(7) | 13:09

ツイートシェア

■Portable electronic equipment battery technology

1, about the trickle charge, rapid charging and stable battery charging algorithm

According to the energy requirements of the final application, a battery may contain up to 4 lithium ion or lithium polymer battery core, its configuration will have a variety of change, at the same time with a mainstream power adapter: direct adapter, USB interface or car charger. Remove the core quantity, core configuration or power adapter type difference, the battery has the same charge characteristics. So they charge algorithm. Lithium ion and li-ion polymer battery best charging algorithm can divided into three phases: trickle charge, rapid charging and stable charge.

trickle charge. For depth discharge core to charge. When core voltage in less than about 2.8 V, use a constant 0.1 C of the current charging for it.

fast charging. Core voltage trickle charge more than the threshold, improve the charging current rapid charging. Fast charging current should be lower than 1.0 C.

stable voltage. In the fast charging process, once the core 4.2 V voltage, stable voltage phase began. This is through the minimum charge current or timer or of the two joint to interrupt charge. When the minimum current below about 0.07 C, can interrupt charge. The timer is to rely on a default to trigger the timer interrupt.

Advanced battery charger with additional security function normally. For example, if the core temperature exceeds the given window, usually 0 ℃-45 ℃, charge will be suspended.

Remove some very low-end equipment, now on the market/li-ion polymer lithium ion battery solutions are integrated with the outer components or, in accordance with the characteristics of the charging to charge, this is not just to get better effect charge, but also for safety.

lithium ion/polymer battery charge is an example of applications-double input 1.2 A lithium battery charger LTC4097

LTC4097 can be used to exchange adapter or USB power supply for single quarter/polymer lithium ion battery. Figure 1 for double input 1.2 A lithium battery charger LTC4097 schemes. It USES constant current/constant voltage algorithm charging, from exchange adapter power charge, programmable filling up to 1.2 electric current A, and with USB power can be as high as 1 A, at the same time, automatic detection in each input voltage whether there. This device also provide USB the current limit. Applications include PDA, MP3 players, digital camera, light portable medical and test equipment and big color cellular phone. The performance characteristics: no external micro controller charging termination; The input power automatic detection and choice; Through the resistance from the exchange of charging adapter input can be as high as 1.2 A programming charge current; The resistance of programmable USB charging current is up to 1 A; 100% or 20% USB charging current set; The input power output and existing bias NTC (VNTC) pin as a 120 mA drive ability; NTC thermistors input (NTC) pin for temperature qualified charged; Pre-settings battery voltage with floating plus or minus 0.6% accuracy; Thermal regulation maximize charge rate and free hot air LTC4097 can be used to exchange adapter or USB power supply for single quarter/polymer lithium ion battery. The use of constant current/constant voltage algorithm charging, from exchange adapter power charge, programmable filling up to 1.2 electric current A, and with USB power can be as high as 1 A, at the same time, automatic detection in each input voltage whether there. This device also provide USB the current limit. Applications include PDA, MP3 players, digital camera, light portable medical and test equipment and big color cellular phone.

2, lithium ion/polymer battery scheme

Lithium ion/polymer battery charge scheme for different number of core, core configuration, and power types are different. At present mainly have three main charging scheme: linear, Buck (step-down) switch and SEPIC (booster and step-down) switch.

2.1 linear scheme

When the input voltage in big with the charger with sufficient clearance of core after opening voltage, it is linear scheme, especially 1.0 C fast charging current than 1 A big too much. For example, MP3 players usually only one core, capacity from 700 to 1500 mAh differ, full charge voltage is open 4.2 V. MP3 player power is usually the AC/DC adapter or USB interface, the output is the rule of 5 V; At this time, the linear scheme is the most simple, most charger of the efficiency of the scheme. Figure 2 shows for lithium ion/polymer battery solution linear scheme, basic structure and linear voltage neat device.

linear scheme charger application examples-double input Li + charger and intelligent power source selector MAX8677A

MAX8677A is double input USB/AC adapter linear charger, built-in Smart Power Selector, used for rechargeable single quarter by Li + batteries portable devices. The charger integration of the battery and the external power source and load switch charging all the power switch, so that no external MOSFET. MAX8677A ideal used in portable devices, such as smart phones, PDA, portable media players, GPS navigation equipment, digital camera, and digital cameras.

MAX8677A can work in independent USB and the power input AC adapter or two input either one of the input. When connecting external power supply, intelligent power source selector allows the system not connect battery or can and depth discharge battery connection. Intelligent power source selector will automatically switch to the battery system load, use the system did not use the input power supply parts for battery, make full use of limited USB and adapter power supply input. All the needed electric current detection circuit, including the integration of the power switch, all integration in the piece. DC input current highest limit can be adjusted to 2 A and DC and USB input all can support 100 mA, 500 mA, and USB hung mode. Charge current can be adjusted to as high as 1.5 A, thus support wide range of battery capacitive. Other features include MAX8677A thermal regulation, over-voltage protection, charging status and fault output, power supply good surveillance, battery thermistors surveillance, and charging timer. MAX8677A using save a space, hot enhanced, 4 mm x 4 mm, 24 of the pins TQFN encapsulation, regulations, work in exceptional temperature range (40 ~ + 85 ℃).

2.2 Buck (step-down) switch scheme

When A 1.0 C of the charging current more than 1 A, or the input voltage of the core than with high voltage open many, Buck or step-down plan is A better choice. For example, based on the hard drive in the PMP, often use single core lithium ion battery, the full of open is 4.2 V voltage, capacity from 1200 to 2400 mAh range. And now PMP is usually use the car kit to charge, its output voltage in a 9 V to 16 between V. In the input voltage and battery voltage is the voltage difference between high (minimum 4.8 V) will make linear scheme lowers efficiency. This kind of low efficiency, plus more than 1.2 A 1 C fast charging electric current, have serious heat dissipation problems. To avoid this kind of situation, will the Buck scheme. Figure 3 for lithium ion/polymer battery charger scheme Buck diagram, basic structure with Buck (step-down) switching voltage regulators completely the same.

2.3 SEPIC (booster and step-down) switch scheme

In some use of three or four lithium ion/polymer core series equipments, charger of the input voltage is not always greater than the battery voltage. For example, laptop computers use 3 core lithium ion battery, full charge voltage is open 12.6 V (4.2 V x3), capacity is 1800 mAh to 3600 mAh from. Power supply input or output voltage is 1 6 V AC/DC adapter, or is car kit, the output voltage in a 9 V to 16 between V. Apparently, the linear and Buck solutions are not for this group of batteries. This is about to use SEPIC scheme, it can in the output voltage is higher than when the battery voltage, can be in the output voltage less than when the battery.

3, and power detection algorithm is proposed

Many portable products use voltage measurements to estimate the remaining battery power, but the battery voltage and surplus power relationship but will with the discharge rate, temperature and battery aging degree of change, make this kind of method can top 50% margin of error. The market for longer to use product demand unceasingly strengthens, so the system design personnel need more accurate solution. Use capacity check plan come to measure battery or consumption of electricity, will be in a wide range of application power to provide more accurate estimate of the battery power.

3.1 power detection algorithm is one of the examples of application, function complete list, double the battery portable battery application design

power detection principle. Good capacity check plan at least to have battery voltage, temperature and battery electric current, measuring method; A micro 9 a; And a set of and the verification of the punishment power detection algorithm is proposed. Bq2650x and bq27x00 is full capacity check program function, with a measuring voltage and temperature of the digital converter (ADC) and a measuring electric current and charging sensor the asp. These capacity check plan also has a microprocessor, is responsible for the implementation of the Texas instruments power detection algorithm is proposed. The algorithm can compensate the lithium ion battery life.low self-discharge, aging, the temperature and discharge rate, and other factors. Chip embedded microprocessor as host system processor save these calculation burden. Capacity check program can provide remaining power state information, bq27x00 series products also offer surplus can Run Time (Run Time to Empty) host may at any Time to capacity check plan these information query, then LED indicator light through or displays will inform the user battery. Capacity check meter is very easy to use, the system processor need only configuration 12 C or HDQ communication drive can.

The battery circuit description. Figure 4 (a) can be used for identification of IC functions with typical application circuit batteries. According to the use of IC testing program is different, the battery needs to have at least three to four outside the terminal.

VCC and BAT pins will even to the battery voltage, so that for, C power and the battery voltage measurement. The battery is connected a grounding resistance smaller detection resistors, let capacity check meter high impedance SRP and SRN input can monitor sensor resistance on both ends of the voltage. Through testing the current flows through a resistor can be used to judge the battery or release the amount of electricity. Designers choose detection resistance value must be considered when resistance on both ends of the voltage can't more than 100 mV, low resistance may be more hours in current errors. Circuit board layout must ensure that SRP and SRN to testing from as close as possible to the connection of the resistor sensor resistance end; In other words, they should be the Kelvin attachment.

HDQ pin need external and resistors, this resistance should be located the host or the main application, such capacity check plan to the battery and portable devices when sleep function enable connection broken. Advice and resistance choose 10 k Ω.

battery identification. A low cost WeiMao batteries are getting more and more serious, these cells may not contain OEM requirements of security protection circuit. So, genuine battery may contain figure 4 (a) shows the appraisal circuit. When to identify the battery, the host to contain IC (bq26150, the function is cyclic redundancy check (CRC)) issued the battery packs a ask value (challenge), the CRC will contain battery according to this inquiry value and, in the building of the IC in CRC polynomial calculation the CRC value. CRC is based on the host of command and IC secret in the query of the definition of the CRC polynomial completed, the host in CRC values calculated with the calculation result of well battery comparison to identify the appraisal success.

Once the battery through the appraisal, bq26150 will issue commands to ensure that the host and quantity test plan of material lines between normal communication. When the battery connection interruption or to connect, the whole the identification process will be repeated again.

double the battery application. Figure 4 (b) for use bq26500 support double the typical application of lithium ion battery circuit. In order to support more battery, and this circuit is adding a adjustable regulators. Capacity check millions of BAT pin and the bottom of a battery anode linked to complete the variable voltage measurement of the battery.

Host to be able to read capacity check plan of variable voltage measurement battery, to make sure the end of discharging threshold and charging terminate threshold. As for the remaining state power (RemainingStateofCapacity), do not need to read can use directly.

The above bq2650x and bq27x00 etc capacity check plan provides the battery manufacturer a simple to use options, this scheme L [just measuring battery voltage to be precise, so these capacity check plan can be applied to various battery framework, and can support the battery identification and double the battery application '

3.2 power detection algorithm is an example of applications another, can apply to all kinds of general voltmeter new IC.

Today's many manufacturers can provide a variety of voltmeter IC,, the user can choose the suitable function device, to optimize the product price. Use voltmeter measurement of storage battery parameters, the separate architecture allows users in the host custom power measurement algorithm within. Eliminating embedded processor battery cost. On this to Dallase semicconductor company called cases of DS2762 chip for typical analysis. A new separate voltmeter IC, its structure see chart 5 (a) below.

DS2762 application characteristics

DS2762 is a single quarter of lithium battery voltmeter and protection circuit, integrated into a tiny 2.46 mm x 2.74 mm inversion of packaging. Due to internal integration for power detection of high precise resistance, this device is very save a space. It is the small size and incomparable high level of integration, for mobile phone battery and other similar handheld products, such as PDA, etc, are all very ideal. Integrated protection circuit continuously monitoring the battery voltage, over voltage and flow fault (charging or discharge period). Different from the independent protection IC, DS2762 allow main processor surveillance/control protection FET conduction state, such, can DS2762 through the protection of the power system and the control circuit implementation. DS2762 can also charge a battery consumption has depth, when the battery voltage within three V, provide a limit of the charging current recovery path.

DS2762 accurate monitoring battery current, voltage and temperature, the dynamic range and resolution of common satisfy any mobile communication product testing standards. The measurement of current for internally generated when the integral, realize the power measurement. Through the real-time, continuous automatic disorders correct, the precision of power measurement can be increased. The built-in measuring resistance due to eliminate manufacturing process and temperature and cause resistance change, further improve the precision of the voltmeter. Important data stored in 32 bytes, can add the lock EEPROM; 16 bytes of SRAM are used to keep dynamic data. And DS2762 all communication all through the 1-Wire, more communication interface node, minimize the battery and the connection to the host. Its main features for; Single quarter of lithium battery protector; High precision current (power measurement), voltage and temperature measurement; Optional integrated 25 m Ω measuring resistance, each DS2762 after fine-tuning alone; 0 V battery restore charge; 32 bytes can lock EEPROM, 16 bytes SRAM, 64 a ROM;

1-Wire, node, digital communication interface; Support more battery power management, and through the protection system control FET power; Dormancy mode power supply current only 2 µ A (most); Work mode power supply current for 90 µ A (most); 2.46 mm x 2.74 mm inversion of packaging or 16 feet SSOP package led, and both are can choose with or without detection resistance; After has with e

Permalink | 記事への反応(0) | 11:54

ツイートシェア

■stylishで新UIはてブエントリーページのサイドバーを下に持ってくる

http://b.hatena.ne.jp/entry/hatena.g.hatena.ne.jp/hatenabookmark/20110405/1301981564

https://addons.mozilla.org/ja/firefox/addon/stylish/

見た目だけ変えてみたぞ。

あんまりいいもんじゃないと思うけど、サイドバーがなくなったらどんな感じになるか体験してみるといいんじゃないかな。

まあどんなもんかやってみて。叩き台、印象の変化の確認。

あとおまけでスター順の部分は消しておいた。#scored-bookmarksってあるだろ、そこじゃ。

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("http://b.hatena.ne.jp/entry/") {

#container .curvebox-body {
  padding-right:20px !important;
}
#main, #sidebar {
  width:100% !important;
  float:none !important;
}
#sidebar {
  margin-left:0 !important;
}

#scored-bookmarks{
  display:none !important;
}

}

じゃあの。

二版

http://b.hatena.ne.jp/entry/lifehack2ch.livedoor.biz/archives/51229298.html

うりゃ！

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("http://b.hatena.ne.jp/entry/") {

#container .curvebox-body {
  padding-right:20px !important;
}
#main, #sidebar {
  width:100% !important;
  float:none !important;
}
#sidebar {
  margin-left:0 !important;
}

#scored-bookmarks{
  display:none !important;
}


.comment {
  display:inline !important;
}
.bookmark-list .profile-image {
  width:16px!important;
  height:16px!important;
  margin-left:-24px!important;
}
.user-navigator.user-navigator-large {
  width:34px!important;
  height:20px!important;
}
.bookmark-list li {padding-left:32px!important;}


}

Permalink | 記事への反応(0) | 18:03

ツイートシェア

■http://anond.hatelabo.jp/20091109174350

あとリフレ派なんてものはありませんよ。リフレ政策をバカにする人たちがつけたレッテルだと思っています。

私が言ってるのは、http://wiki.livedoor.jp/reflation/　にリンクしてるバナーです。リフレ派というのは、バカにする用語なんですか？いちご等で自称していたのでそうは思いませんでした。申し訳ない。

それでは本題。

Q1. デフレはよくないのではないか？

A1. デフレもインフレもよくない。

まず最初からおかしい。マイルドなインフレが一番望ましいというのは世界の経済学者のほとんどが賛成する。たしか、そういう統計がどこかにあった。

　デフレもインフレもよくない、これは、共通認識です。ただし、どちらかといえば低いインフレのほうがいいと考えている学者が多い。君の指摘は、揚げ足をとってるだけ。「Q１．1緩やかなインフレは悪いことですか？　A1.ゼロインフレが好ましいので金融政策でゼロに近づけるべき」　という記述があって、「池田は主流の学者と意見が違う」と言える。それでも、１＋１＝３のような間違えではなく、主流の学者と違う意見を持っているというだけだ。

　また、その場合にも、「たしか、そういう統計がどこかにあった。」いうような指摘は、学者を非難するのにはよろしくない。たとえば、「JEFFREY ROGERS HUMMEL (2007) Econ Journal Watch, 4, 46-59 にMost　macroeconomists now favor a low but still positive rate of inflation.　という表記がある。だから、池田の意見は主要なマクロ経済学者の意見とは異なる」というように、ちゃんと文献をあげるべきだ。

　加えて次のECBのHPを見てほしい（これは、Q2にも関係する）。普通の中央銀行がかなりゼロインフレに近いインフレ値が好ましいと考えているのがわかる。

Reasons for aiming at below, but close to, 2%

Inflation rates of below, but close to, 2% are low enough for the economy to fully reap the benefits of price stability.

It also underlines the ECB’s commitment to

中略

# take into account the possibility of HICP inflation slightly overstating true inflation as a result of a small but positive bias in the measurement of price level changes using the HICP

http://www.ecb.europa.eu/mopo/strategy/pricestab/html/index.en.html

　以上のように、ヨーロッパ中央銀行は、HICP(Harmonised Index of Consumer Prices )で２％以下かつ２％に近いHICPを誘導目標としている。しかもHICPは、少量のポジティブバイアス（実際のインフレ値より少し多めにでる）性質がある。だから、ECBが目標としているマイルドインフレは、かなりゼロインフレに近い。

Q2. 日銀はいくらでも紙幣を印刷できるのだから、インフレにできるのでは？

A2. ゼロ金利状態では貨幣需要が飽和しているので、中央銀行がマネタリーベースを増やしても銀行の貸し出しが増えず、市中に流通するマネーストックは増えない。

はい。これもおかしい。いわゆるバーナンキの背理法を理解していない。

　まず、バーナンキの背理法は、日本のネット社会に広がったスラングである。普通の「（経済）学部生が習うような」教科書に載ってるようなものではないし、（世界）標準の経済学者が使う用語ではない。バーナンキは、彼の師匠であるフリードマンに敬愛をこめて、お金を刷ってヘリコプターで撒けばインフレになると言っただけである。それを日本人が変な名前を付けた。これは、無限にお金を刷って（金融政策）撒けば（財政政策）、いつか・どこかで・なんらかの規模の物価上昇が高確率でおきるであろうとしか言えない。ヘリコプターマネーをすれば、適正な物価が保てるというものではない。

　それは、上記したECBのHPにも見られる

provide an adequate margin to avoid the risks of deflation. Having such a safety margin against deflation is important because nominal interest rates cannot fall below zero. In a deflationary environment monetary policy may thus not be able to sufficiently stimulate aggregate demand by using its interest rate instrument. This makes it more difficult for monetary policy to fight deflation than to fight inflation.

　ヨーロッパ中央銀行ですら、「デフレ時には、金融政策で総需要の刺激ができなくなり、デフレに立ち向かえなくなる」と言っている。デフレ時に、金融政策（マネタリーベースを増や）しても、デフレ克服は難しいというのは、池田や日銀だけじゃなく少なくてもヨーロッパ中央銀行の意見でもある。

　また、「ゼロ金利状態では貨幣需要が飽和しているので、中央銀行がマネタリーベースを増やしても銀行の貸し出しが増えず、市中に流通するマネーストックは増えない。」というのは、おそらく池田が嫌いなケインズ学派の流動性の罠という考え方であり、教科書に載っている。

Permalink | 記事への反応(1) | 21:08

ツイートシェア

■http://anond.hatelabo.jp/20090518113828

改行を行区切り（BR要素）じゃなくて段落区切り（P要素）として認識するから。ユーザスタイルシートでP{margin: 0 !important}にすれば空かなくなるよ。

Permalink | 記事への反応(0) | 11:48

ツイートシェア

■Google chrome でブロックレベル要素の高さを揃える話

自分用にメモ。

padding-bottom: 32768px;
margin-bottom: -32768px;

これで高さ揃えるってのが去年の10月頃に出てたと思うんだけど、これやるとGoogle Chrome で背景画像が正しく出ない。

下のページ見てもらうと分かるんだけど、サイドバーの背景が出てないんだよね。

http://www.linkthink.co.jp/contact/

試してみたら、色なら出ることがわかった。

背景「画像」がダメなんだ。背景「色」なら敷ける。

仕事で使ったこと無くて良かった。

Permalink | 記事への反応(3) | 11:31

ツイートシェア

■Firefoxをテキストブラウザ化するcss作った【黒画面】【コンソール】

2008.9.28　12：53　追記

★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★

• 公式サイトを開設しました。
• デモ動画、マニュアル付きダウンロード・パッケージをご用意しております。
• 当エントリより下記の公式ページより情報を得られる事を強く推奨いたします。
  • http://zamamin.org/labs/black-out

★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★

_________________ここから下は古い情報▼__________________________________________________

今、自分のブログをスクラッチしているので、こちらで。→2008/9/28　スクラッチ完了！BLACK-OUT.CSS公式ページ

作りました

【black-out.css】

2008.9.13　23：30　追記

• wmtg.netドメイン失効に伴い、zamamin.comに変更

2008.8.10　22：29　追記

• bookmarkletを作りました！！Firefox以外でも手軽にお試し頂けます。
  • 　http://anond.hatelabo.jp/20080810224028

当エントリは、下記の方におすすめの情報でございます。

1. Firefoxユーザーである（※他ブラウザでもいけます。が、当エントリでは導入方法を紹介していません。追記したbookmarkletだとoperaやsafariなどのブラウザでもすぐにお試しできます）
2. Firefoxのアドオン「stylish」を入れている。もしくは必要なら入れてもいいって人。
3. （mixiをPCで使っている場合）右に出てくる鬱陶しいバナーにうんざりしていたり、日記とコミュにしか興味がない人。
4. お気に入りのブログが、情報源の質には満足しているが左右のアフィリが鬱陶しい点を残念に思ってる人
5. コンソール（CUI）が好きな人、シンプルなのが好きな人、ぶっちゃけ文字以外用がないのに飾りの画像とかWEBにいらねーよと思ってる人
6. カラム、２カラムのレイアウトのせいで、目線が左右に移動しないといけないのがイラっとくる人、コードは上から下だけでいいだろって思っている人
   • wikipediaも段組みやめてくれよサイドバーうざいよ、デフォルトの白背景色は目が痛いって思ってる人とか特に
7. リンクテキスト探しがきらいな人、どこがリンクがすぐに知りたい人
8. 背景色が明るいのが目が疲れる人、壁紙も黒にしちゃってるような人、長時間ネットしまくりなんで目が疲れにくいのがいい人
9. サイトによって極端に読みにくいサイズや色のテキストがあることに普段からイラっときている人

要は、LynxのようなシンプルWebに世界がなればいいのになと思っている方。

そして、どんなサイトでも目線は左右に動かしたくない！スクロールは上下だけで済ませたい！

と、強く考えておられる方むけの情報です。

何を作ったの？

私はテキストブラウザのLynxを時々使っているのですが、これでサイトを見るとシンプルに見れるのですごく良いんですよね。

ただ、LynxはFlashとか画像が見れないし、マウスが使えないのはいざって時にちょっと不便。

で、Firefoxをテキストブラウザ化できないかなあと、ふと思いまして、思いつきで作ってしまいました。

私めもwebデザイナーやっとるんですが、上記のように、昨今のwebデザインなんて普段はなくていいって思っている奴でして。

仕事じゃ3カラムのサイトとか作りますが自分はそんなん好きじゃないです。色がサイトごとに違うってのも理解できない。

必要なのは情報であってデザイナーのデザインなんてどうでもいいんですよ。

だから2chのシンプル画面とか大好きです。

そんな訳で、どんなサイトでもテキストブラウザ状態で閲覧できるFirefox用の拡張cssを作りました（やっつけだけど）。

ただ、ニュースサイトで画像が見れないと困る時もあるので、普段は小さなサムネイルで、カーソルを合わせた時だけ大きく表示されるようにしています。

＠このcssはコンセプト実証モデルです。思いつきで作ってるのでちょっと問題もあります。フィードバックとか意見など頂けると嬉しいかも。

＠将来的には、グリモンでjsも組み合わせてもっとコンソールのような感覚でブラウジングできるようにしたい

＠（参考用）私のよく見るサイト・・・ニコ動、wikipedia、スラッシュドットジャパン、2nn.jp（2ch）、mixi、はてなでホッテントリに上がっているブログ各種

ちなみに、こんなん使うな、既にこんないいのあるわいってのをご存知の方は教えてくれると嬉しいです。

それなりに探したのだけど、見当たらなくて・・・だから自作したので。

導入方法について

1. Firefoxのアドオン「stylish」をインストールします。→　https://addons.mozilla.org/ja/firefox/addon/2108
2. インストール後、stylishの管理画面を開きます。（Firefoxウィンドウの右下にあるメモ帳っぽいアイコンで右クリック→スタイルの管理）
3. 「スタイルの管理」で「書く」を選択、タイトルはblack-outとかテキトーに入れてください。で、下記のコードを貼付けて保存してください。
4. どんなサイトでも同じデザイン（コンソールのような画面）になります。なお、いつでもstylishdのメニューでcssの有効／無効は切り替えられますのでご安心を。
5. テストとして、wikipediaを見てみられると雰囲気が掴めると思います。

/*
 * ----------------------------
 * black-out.css
 * author zamamin.com
 * build 2008.8.09 15:03
 * version 0.0.31
 *  fix @namespaceを書いてなかったので追加
 * ----------------------------
 *
 */

@namespace url(http://www.w3.org/1999/xhtml);

/* 全てのエレメントをリセット */
body,body * {
background-image:none !important;
background-color:#000 !important;
border-color:#333 !important;
text-decoration:none !important;
color:#aaa !important;              /*<- テキスト色 */
font-size:16px !important;          /*<- 文字サイズ */
font-weight:normal !important;
padding:0.15em !important;
margin:0 !important;
line-height:1.25em !important;
text-align:left !important;
text-indent:0 !important;
font-family:Arial,Helvetica,Verdana,'ヒラギノ角ゴPro W3','Hiragino Kaku Gothic Pro',Osaka,'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif !important; 
float:none !important;
clear:both !important;
position:relative !important;
width:auto  !important;
height:auto  !important;

}

body {
background-color:#000 !important;
padding:0.5em !important;
}

body * p, body * div,
body * h1, body * h2, body * h3, body * h4, body * h5, body * h6{
margin-bottom:0.3em !important;
float:left !important;
clear:both !important;
}


/* リンク色 */
body * a,
body * a *{
color:#a50 !important;
}

/* アクセス済みのリンク色 */
body * a:visited{
color:#a50 !important;
}

/* カーソルを合わせた時のリンク色 */
body * a:hover,
body * a:hover *{
color:#0aa !important;
background-color:#609 !important;
}


/* 画像は普段は小さくサムネイル表示。鬱陶しいので薄く表示 */
body * img{
opacity:0.3 !important;
height:15px !important;
width:15px !important;
}

/* 画像はマウスカーソルもっていけば原寸サイズになる */
body * img:hover{
opacity:0.9 !important;
height:auto !important;
width:auto !important;
}


button,
input,
select,
option,
textarea{
 color:#f00 !important;
 padding:0.05em !important;
 height:auto !important;
}

/* テーブルのスタイル */
table{
border:none;
}

table td,
table th{
border:none;
border-right:1px dashed #999 !important;
border-bottom:1px dashed #999 !important;
}



/* for 2ch（暫定） */
body * dt{
font-weight:bold !important;
}


/* 二コ動 */
embed#flvplayer{
height:540px !important;
width:952px !important;
}

既知の問題点というか仕様

• ごちゃごちゃしたサイトに出くわした時に、必要に応じて使う、というのを想定しています。どんな時でも使える万能cssではないです
• mixiの日記投稿のように、文字入力に関してはあまりメリットはないです。view専用のcssと考えられるとよいかと。
• windowsではメイリオの入っているvista機やxp機がおすすめです。macは、まぁとりあえずこのフォントでいいかなとテキトーにやっています（一応、macとwin両方で閲覧テスト済み）
• objectやembedタグのあるサイトでは、objectやembed部分が変になるかも。今後の課題。ニコ動だけ特別対応させています。
• リンクカラーがオレンジなのは映画イノセンスのオレンジ色の画面が好きだったから
• スタイルを何もかも破壊するのでfirebugもおかしくなります

update

• 2008.8.10 21:05
  • @namespaceを書いていなかったので追記。ありがとうございました。 -> http://pc11.2ch.net/test/read.cgi/software/1216790587/553

Permalink | 記事への反応(2) | 11:36

ツイートシェア

■もん毛スター for firefox

動作未確認。すんげー冗談半分。

// Hatena Monge Star user script
// 2008-07-07
// by masda. (http://anond.hatelabo.jp/20080707043247)

// ==UserScript==
// @name           Hatena Monge Star
// @namespace      http://anond.hatelabo.jp/20080707043247
// @description    Hatena Monge Star
// @include        http://b.hatena.ne.jp/entry/*
// @version        0.3.1
// ==/UserScript==

// deriving from [http://d.hatena.ne.jp/Hamachiya2/20080707/HatenaBlackStar2] ver Firefox
//               [http://f.hatena.ne.jp/hatenacinnamon/20070109001332]
// Thx! and CUTE!


location.href = 'javascript:(' + function() { (function (w) {

	if (typeof(w.Ten) == 'undefined') {
		return;
	}

	HatenaBookmarkMongeStar = new Ten.Class({
		initialize: function(li, entryTitle) {
			var comment = '';
			var tags    = '';
			var commentSpans = Ten.DOM.getElementsByTagAndClassName('span', 'comment', li);
			if (commentSpans.length > 0) {
				comment = Ten.DOM.scrapeText(commentSpans[0]);
			}

	        var tagsSpans = Ten.DOM.getElementsByTagAndClassName('span', 'user-tag', li);
			if (tagsSpans.length > 0) {
				$A(tagsSpans[0].getElementsByTagName('a')).each(function(a) {
					tags += '[' + Ten.DOM.scrapeText(a)+ ']';
				});
			}

			var title = tags + comment;
			if (title.length == 0) {
				var name = Ten.DOM.scrapeText(li.getElementsByTagName('a')[1]);
				title = name + 'のブックマーク';
	        }

			// this.uri   = 'http://b.hatena.ne.jp/keyword/' + li.getElementsByTagName('a')[1].href;
			var u = li.getElementsByTagName('a')[1].href;

			if (u.indexOf('#') == -1) {
				this.uri = u + '#_HatenaMongeStar';
			} else {
				this.uri = u + '_HatenaMongeStar';
			}

			this.title = title + ' - ' + entryTitle;

			this.comment_container = Hatena.Star.EntryLoader.createCommentContainer();
			var target = commentSpans[0] || li;
			target.appendChild(this.comment_container);

			this.star_container = Hatena.Star.EntryLoader.createStarContainer();
			this.star_container.className = 'hatena-star-star-container MongeStarContainer';
			target.appendChild(this.star_container);
		}
	});


	var tryCount = 0;
	var tryMax = 300;
	function waitForHatenaStar() {
//		if (Hatena.Star.EntryLoader.loaded) {
//			Hatena.Star.EntryLoader.loaded = false;
		var s = document.getElementsByClassName('hatena-star-add-button');
		if (s.length) {

			Hatena.Star.EntryLoader.loaded = false;

			Hatena.Star.EntryLoader.loadEntries = function() {
				var entries = [];
				var title = Ten.DOM.scrapeText(Ten.DOM.getElementsByTagAndClassName('span', 'title', document.body)[0]);
				var ul = document.getElementById('bookmarked_user');
				if (ul) {
					$A(ul.getElementsByTagName('li')).each(function(li) {
						if (li.className != 'more') {
							entries.push(new HatenaBookmarkMongeStar(li, title));
						}
					});
				}
				return entries;
			}
			new Hatena.Star.EntryLoader();

		} else {
			if (++tryCount > tryMax) {
				setTimeout(waitForHatenaStar, 400);
			}
		}
	}

	setTimeout(waitForHatenaStar, 500);

})(window); }.toString() + ')()';



GM_addStyle(<><![CDATA[

	.MongeStarContainer {
		margin-left: 4px;
	}

	.MongeStarContainer .hatena-star-add-button {
		background-color: #fc6 ! important;
	}

	.MongeStarContainer a {
		text-decoration: none ! important;
		color: #f80 ! important;
		font-size: 10px;
		position: relative;
	}

	.MongeStarContainer a:before {
		content: '毛';
		font-size:small;
	}

	.MongeStarContainer a .hatena-star-star {
		filter: alpha(opacity=00);
		-moz-opacity:0.00;
		opacity:0.00;

		position: absolute;
		top: 0;
		left: 0;
	}

	.MongeStarContainer .hatena-star-inner-count {
		color: #f90 ! important;
	}

]]></>);

動いたらいいな-

Permalink | 記事への反応(0) | 04:32

ツイートシェア

■ちょとｓYレならんしょこれは・・？

<ul id="menu">
	<li><a href="#">だらだら</a></li>
	<li><a href="#">だらだら</a></li>
	<li><a href="#">だらだら</a><ul><li>だらだら</li><li>だらだらだらだらだらだら</ul></li>
	<li><a href="#">ゆっくり</a><ul><li>していってね！</li></ul></li>
</ul>

こんな感じのリストに

#menu li{
	display:block;
	float:left;
	margin-left:0;
	padding-left:0;
	margin-right:1em;
	border:1px dashed red;
}
#menu li ul{
	position:absolute;
	display:block;
	margin-left:0;
	padding-left:0;
	border:1px dashed black;
}
#menu li li{
	list-style:none;
	border:0 none;
	float:none;
	width:auto;
}

こんな感じのスタイル書いて

window.onload=function(){
	var li=document.getElementById("menu").childNodes;
	for(var i=0;i<li.length;i++){
		if(li[i].childNodes[1]){
			var submenu=li[i].childNodes[1];
			li[i].onmouseover=function(){
				this.childNodes[1].style.display="block";
			}
			li[i].onmouseout=function(){
				this.childNodes[1].style.display="none";
			}
		}
	}
};

みたいなスクリプト書いたときのIEの挙動がおかしい！助けて！

Permalink | 記事への反応(1) | 20:46

ツイートシェア