  |
はてなキーワード: background-colorとは
横で、かなり遅い言及だけど、CSSの部分に pointer-events: none を入れれば、クリックできるようになるよ。
javascript:var div = document.createElement('div'); div.setAttribute('style', 'display: block; position: fixed; z-index: 2147483647; background-color: #333333; top: 0px; left: 0px; height: 100%; width: 100%; opacity: 0.7;pointer-events: none;'); document.body.appendChild(div);
javascript:var div = document.createElement('div'); div.setAttribute('style', 'display: block; position: fixed; z-index: 2147483647; background-color: #333333; top: 0px; left: 0px; height: 100%; width: 100%; opacity: 0.7;'); document.body.appendChild(div);
目が痛かった
textarea,
.message {
background-color: #7f8283 !important;
}
#body,
body,
.box-curve {
color: #c5c8c6 !important;
background-color: #333 !important;
}
.refererlist ul {
color: #c5c8c6 !important;
background-color: #153555 !important;
}
div.body {
border: #15497f 1px solid !important;
}
span.sanchor {
color: #15497f !important;
}
div.btn-standard,
background-color: #15497f !important;
}
#intro p {
color: #c5c8c6 !important;
background-color: #404142 !important;
}
td.gmenu {
background-color: #384d88 !important;
}
span.label {
color: #c5c8c6 !important;
}
a.keyword,
a.okeyword {
color: #c5c8c6 !important;
background-color: #333 !important;
border-bottom: none !important;
}
a {
color: #2ea6c0 !important;
}
td.username,
h2 {
background-color: #404142 !important;
}
まじな話をすると、N予備校のプログラミング入門コースやるのがオススメ。
一日8時間勉強時間があるなら、だいたい一ヶ月で終わる内容。
月額1000円だけどしっかり勉強すれば一ヶ月の無料期間中に終わると思う。
もともとN高等学校のノンプログラマーの生徒をWebエンジニアとして就職させるために作られたカリキュラムで講師曰く去年はこれで二人エンジニア就職を決めたらしい。
内容も相当親切に説明していて、プログラミングで何か作るだけじゃなくて、就職に必要な環境構築やセキュリティまでみっちりやる。
で講師が書いてる入門コースで習うことがまとめ。テキスト教材もあるけど授業も1項目を2時間で説明している。授業は週2の生放送とそのアーカイブがある。
↓みたいなことが学べる
----
Web ブラウザとは (Chrome, デベロッパーコンソール, alert)
はじめてのHTML (VSCode, HTML, Emmet)
さまざまなHTMLタグ (h, p, a, img, ul, tableタグ)
HTMLで作る自己紹介ページ (HTMLタグ組み合わせ, コンテンツ埋め込み)
はじめてのJavaScript (JS, ES6, エラー)
JavaScriptでの計算 (値, 算術演算子, 変数, 代入)
JavaScriptで論理を扱う (論理値, 論理積, 論理和, 否定, 比較演算子, if)
JavaScriptのループ (ループ, for)
JavaScriptのコレクション (コレクション, 配列, 添字, undefined)
JavaScriptの関数 (関数, 関数宣言, 引数, 戻り値, 関数呼び出し, 再帰)
JavaScriptのオブジェクト (オブジェクト, モデリング, プロパティ, 要件定義)
はじめてのCSS (CSS, セレクタ, background-color, border)
CSSを使ったプログラミング (transform, id, class)
Webページの企画とデザイン (企画, 要件定義, モックアップ, 16進数カラーコード)
診断機能の開発 (const, let, JSDoc, インタフェース, 正規表現, テストコード)
診断機能の組込み (div, 無名関数, アロー関数, ガード句, truthy, falsy)
ツイート機能の開発 (リバースエンジニアリング, URI, URL, URIエンコード)
LinuxというOS (VirtualBox, Vagrant, Ubuntuのインストール, OS, CUIの大切さ)
コンピューターの構成要素 (ノイマン型コンピューター, プロセス, lshw, man, ps, dfの使い方)
ファイル操作 (pwd, ls, cd, mkdir, rm, cp, mv, find, ホストマシンとの共有ディレクトリ)
標準出力 (標準入力、標準出力、標準エラー出力、パイプ、grep)
vi (vimtutor)
シェルプログラミング (シバン, echo, read, 変数, if)
通信とネットワーク (パケット, tcpdump, IPアドレス, TCP, ルーター, ping)
サーバーとクライアント (tmux, nc, telnet)
HTTP通信 (http, https, DNS, hostsファイル, ポートフォワーディング)
GitHubでウェブサイトの公開 (GitHub, リポジトリ, fork, commit, 情報モラル)
イシュー管理とWikiによるドキュメント作成 (Issues, Wiki)
GitとGitHubと連携 (git, ssh, clone, pull)
GitHubへのpush (init, add, status, インデックス, commit, push, tag)
Gitのブランチ (branch, checkout, merge, gh-pages)
Node.js (Node.js, nodebrew, Linux, REPL, コマンドライン引数, プルリク課題)
集計処理を行うプログラム (集計, 人口動態CSV, Stream, for-of, 連想配列Map, map関数)
アルゴリズムの改善 (アルゴリズム, フィボナッチ数列, 再帰, time, プロファイル, nodegrind, O記法, メモ化)
ライブラリ (ライブラリ, パッケージマネージャー, npm)
Slackのボット開発 (slack, mention, bot)
HubotとSlackアダプタ (hubot, yo)
モジュール化された処理 CRUD, オブジェクトライフサイクル, filter)
ボットインタフェースとの連携 (モジュールのつなぎ込み, trim, join)
同期I/Oと非同期I/O (同期I/O, 非同期I/O, ブロッキング)
例外処理 (try, catch, finally, throw)
HTTPサーバー (Web, TCPとUDP, Webサーバーの仕組み, Node.jsのイベントループ, リスナー)
HTTPのメソッド (メソッド, GET, POST, PUT, DELETE, CRUDとの対応)
HTMLのフォーム (フォームの仕組み, form, input)
HerokuでWebサービスを公開 (Webサービスの公開, heroku, dyno, toolbelt, login, create, logs)
認証で利用者を制限する (認証, Basic認証, Authorizationヘッダ, ステータスコード)
Cookie を使った秘密の匿名掲示板 (Cookie, Set-Cookie, expire)
UI、URI、モジュールの設計 (モジュール設計, フォームのメソッド制限, リダイレクト, 302)
フォームによる投稿機能の実装 (モジュール性, textarea, 303)
認証された投稿の一覧表示機能 (パスワードの平文管理の問題, 404, テンプレートのeach-in)
データベースへの保存機能の実装 (データベース, PostgreSQL, 主キー)
トラッキングCookieの実装 (トラッキング Cookie, IDの偽装, Cookie の削除)
削除機能の実装 (データベースを利用した削除処理, 認可, サーバーサイドでの認可)
管理者機能の実装 (Web サービスの管理責任, 管理者機能の重要性)
デザインの改善 (Bootstrap, レスポンシブデザイン, セキュリティの問題があるサイトを公開しない)
脆弱性 (脆弱性, 脆弱性で生まれる損失, 個人情報保護法, OS コマンド・インジェクション)
XSS脆弱性の対策 (XSS, 適切なエスケープ処理, リグレッション)
パスワードの脆弱性の対策(ハッシュ関数, メッセージダイジェスト, 不正アクセス禁止法, パスワードジェネレーター, 辞書攻撃)
セッション固定化攻撃脆弱性の対策 (セッション, セッション固定化攻撃, ハッシュ値による正当性チェック)
より強固なセッション管理 (推測しづらいセッション識別子, 秘密鍵)
安全なHerokuへの公開 (脆弱性に対する考え方, HTTPの廃止)
Webフレームワーク (Express.js, フレームワーク導入, 簡単なAPI, セキュリティアップデート, Cookie パーサー, ミドルウェア, 外部認証, ロガー)
ExpressのAPI (app, Properties, Request, Response, Router)
GitHubを使った外部認証 (Passport, OAuth)
テスティングフレームワーク (Mocha, レッド, グリーン, リファクタリング)
継続的インテグレーション (CircleCI)
クライアントのフレームワーク (Webpack, Chrome 以外のブラウザでもES6)
DOM操作のフレームワーク (jQuery, jQueryアニメーション, this)
AJAX (jQuery.ajax, クロスドメイン, 同一生成元ポリシー, x-requested-by, CORS)
WebSocket (WebSocket, WebSocketの状態遷移, Socket.io)
RDBとSQL (DDL, DCL, CREATE, DROP, INSERT, DELETE, UPDATE, WHERE)
テーブルの結合 (外部結合, 内部結合, 片側外部結合, JOIN ON)
インデックス (インデックス, 複合インデックス, Bツリー)
集計とソート (SUM, COUNT, ORDER BY, GROUP BY)
「予定調整くん」の設計 (要件定義、用語集、データモデル、URL設計、モジュール設計、MVC)
認証とRouterモジュールの実装 (Mocha, supertest, passport-stub, モックテスト)
予定とユーザーの保存 (セキュリティ要件, UUID, 複合主キー)
予定とユーザーの一覧の表示 (非同期処理, Promise, then)
出欠とコメントの表示 (入れ子の連想配列, Promise.all, 子どもからデータを消す)
出欠とコメントの更新 (Promiseチェイン, リファクタリング)
javascript:(function(){var D=document,f=‘postform’,A='setAttribute’,CE='createElement’,CT='createTextNode’,Q='addEventListener’,I='appendChild’,s='style’,w='width’,h='height’,X=g('ftxa’)[s],T=g('oe3’)[s],Z=[135,200,270,344,400],zx,zy,S=g('oejs’),ct=S.getContext('2d’);function b(v,q){var e=D[CE]('input’);e[A]('type’,'button’);e[A]('value’,v);e[Q]?e[Q]('click’,q,!1):e.onclick=q;return e}function g(n){return D.getElementById(n)}function ig(){var P=ct.getImageData(0,0,S[w],S[h]);return P}function ip(P,x,y){ct.fillStyle=’#F0E0D6’;ct.fillRect(0,0,S[w],S[h]);ct.putImageData(P,x,y);}function%20wS(x,y){var%20ox=S[w],oy=S[h],P=ig();X[w]=T[w]=(x+46)+'px’;X[h]=T[h]=y+'px’;S[w]=x;S[h]=y;ip(P,(x-ox)/2,(y-oy)/2);}function%20scr(x,y){var%20P=ig();ip(P,x,y);}for(zx=0;zx<4;zx++){if(S[w]<=Z[zx])break;}for(zy=0;zy<4;zy++){if(S[h]<=Z[zy])break;}var%20TOP=D.getElementsByTagName('body’)[0],N=D[CE]('div’);N[A]('style’,'position:fixed;background-color:#888888;z-index:999;’);N[A]('id’,'pallet’);TOP.insertBefore(N,TOP.firstChild);N[I](b(’%E7%B8%A6%EF%BC%8B’,function(){zy=zy+(zy<4?1:0);wS(Z[zx],Z[zy]);}));N[I](b(’%E7%B8%A6%EF%BC%8D’,function(){zy=zy-(zy>0?1:0);wS(Z[zx],Z[zy]);}));N[I](b(’%E6%A8%AA%EF%BC%8B’,function(){zx=zx+(zx<4?1:0);wS(Z[zx],Z[zy]);}));N[I](b(’%E6%A8%AA%EF%BC%8D’,function(){zx=zx-(zx>0?1:0);wS(Z[zx],Z[zy]);}));N[I](D[CT](’\u00a0’));N[I](b(’%E4%B8%8A’,function(){scr(0,-1);}));N[I](b(’%E4%B8%8B’,function(){scr(0,1);}));N[I](b(’%E5%B7%A6’,function(){scr(-1,0);}));N[I](b(’%E5%8F%B3’,function(){scr(1,0);}));N[I](D[CT](’\u00a0’));N[I](b(’%E4%B8%8A%E4%B8%8B%E5%8F%8D%E8%BB%A2’,function(){var%20P=ig();for(i=0,j=S[h]-1;i<S[h];i++,j–){ct.putImageData(P,0,i-j,0,j,S[w],1);}}));N[I](b(’%E5%B7%A6%E5%8F%B3%E5%8F%8D%E8%BB%A2’,function(){var%20P=ig();for(i=0,j=S[w]-1;i<S[w];i++,j–){ct.putImageData(P,i-j,0,j,0,1,S[h]);}}));N[I](D[CE]('div’));N[I](b(’%E3%83%91%E3%83%AC%E3%83%83%E3%83%88%E5%89%8A%E9%99%A4’,function(){N.parentNode.removeChild(N);}));})();</p>
cssやstyle指定で
tr.even {background-color:silver;}
と指定していたとして、何かのイベントなどで
this.style.backgroundColor='red';
（ここでの this は、対象の要素 - つまり ＜tr class="even"＞）などと指定し、もとに戻すときは
this.style.backgroundColor='';
と、空の文字列を指定すればうまくいくみたい。これは、正式な仕様なのかな？
例としては
＜tr class="even" onmouseover="this.style.backgroundColor='blue';" onmouseleave="this.style.backgroundColor='';"＞
http://1-byte.jp/2011/03/20/20_tips_you_need_to_learn_to_become_a_better_php_programmer/
良いPHPerだって？そんなものは丸めてゴミ箱にでも捨ててしまった方が資源の再利用になる分いくらかマシだ。
つまり俺たちがしなくちゃならないことは「より良いPHPerにならないため」に何ができるかってことなのさ。
それじゃ、始めよう。
?>なんて使っちゃいけない。そう俺たちはBAD PHPer。
無駄なホワイトスペースの出力に悩まされるくらいなら対称性なんて丸めてゴミ箱にでも捨てた方がまだマシだ。非対称性こそが賛美。
require_once("config.php");
未だにこんなことやってるやつがいるのかいベイベー。絶対にダメだ。この一行を見たら俺は悶絶する。
ダメだ、早く何とかしないと。
大抵このconfig.phpの中身はこうなっている。見て絶望だ。
$hoge_path = ''; if (!LOCAL) { define('FOO_FLAG', 1); if (HONBAN) { define('HOGE_FLAG', 1); } else if (TEST) { define('HOGE_FLAG', 2); } } else { $hoge_path = '/local'; define('FOO_FLAG', 2); define('HOGE_FLAG', 3); } define('HOGE_URL', $hoge_path.'/hoge/');
こういうのが延々と続くわけだ。もういやだ。もう見たくない。
本番環境とテスト環境でどういう値の違いがあるのか、ローカル環境だとどうなるのか、まったく把握できる気がしない。
なまじPHPな設定ファイルのせいで、処理をついつい書いてしまう。そしてどんどん複雑になってしまう。
やはり設定データは基本的にYAML等のデータしか定義できない形式のもので用意すべきだ。そして環境ごとに設定ファイルを分けるべきである。
そうすることで何にどういう違いがあるのかすぐにわかるし、diffすれば一度にすべて把握することができる。
# 本番環境設定ファイル foo_flag: 1 hoge_flag: 1 hoge_url: '/hoge/'
# テスト環境設定ファイル foo_flag: 1 hoge_flag: 2 hoge_url: '/hoge/'
# ローカル環境設定ファイル foo_flag: 2 hoge_flag: 3 hoge_url: '/local/hoge/'
// ここで後の処理のためにhogeメソッドを呼び出しておく $q->foo(); // $a['foo']はここに来る時点で真のはず // 2010-03-10 判定がおかしいので修正 // 2010-06-21 やっぱり値が入ってる方が正しい if ( !isset($hoge[0]) ) { }
コメントは保守されない。そう、それは真実。こんなコメントを発見したら即効削除しよう。コメントは基本信じるな。
俺たちにちょっとしたヒントと大きな損害を与えてくれる、それがコメントの役割なのだ。
わかる。いいたい事はとてもわかる。俺たちはしばしばインデントにスペースを使うはずだ。一方でIDEのしっかりした言語ではタブも使うことがある。しかし悪いことに、両者を混同しているプログラマも一定数いるのだ。
タブを画面上で認識しにくいエディタが世の中には存在する（何とは言わないが）
そして画面上で認識しにくいことを理由にタブを気にしないプログラマがいる。
この二つの条件が重なると、タブとスペースの交じり合ったインデントが完成する。もうぐちゃぐちゃだ。これは永遠に続く戦いだ。
私たちが勝利を掴むためにできることなどせいぜい、常にスペースしか使わない。タブを見つけたらその都度スペースに変換する。そういった地道な活動が明日へとつながるのだ。
われわれがプログラムをするとき、何に一番時間がかかってるか。実は変数の命名なのである。ここで拘り過ぎて時間をかけ過ぎては何も進まない。
御託はイイからさっさと書け、だ。しかしとはいっても変数名は重要。日頃からどういうときにどんな名前を使うかを決めておくといい。
そして変数名に型はまったく必要ない。型宣言のないPHPにおいて、型の変数名をつけること自体ナンセンスだ。
$iNumber = 'aaa';
になんの意味もない。コメントを信じるなでも言ったが、これはプログラマを混乱させるだけの害悪なものだ。
変数を使う前に初期化するのは、警告を出さないという意味でも良い癖だ。しかし具体的にどこでやるかが問題だ。
$foo = null; $foo = $q->foo();
こんな初期化に意味はない。よくあるのはやはり、if文で値を振り分けるケースだろう
$foo = null; if ( $hoge ) { $foo = 1; } else if ( $bar ) { $foo = 2; }
このときの初期化はとても有効だ。もしnullの初期化を忘れたまま$fooを使うと警告が出るが、ちゃんと初期化してるので出ない。基本中の基本だ。
function getStatus() { $bReturn = false; if ($i == 2) $bReturn = true; return $bReturn; }(中略)
もし、何かしらの理由で、あなたの書いたif文が間違っていたら？
この書き方をしていれば、間違った値に対して、常にfalseが返る。
私たちが、PHPでsensitiveなデータを取り扱うなら、正しいデータが入力されるまでは、動かないコードを書くべきだ。
trueとfalseの条件がいまいち明確ではないが、本当に動かないコードを書けというのであれば以下のようにすべきだ
function getStatus() { $bReturn = false; if ($i == 2) $bReturn = true; else if ($i == 1) $bReturn = false; else throw new Exception("bad status! $i"); return $bReturn; }
中途半端にfalseを返して生存させる必要性はまったくない。今すぐ死ね！
連想配列のキーを指定する場合だけ定数と間違わないようにクオートで囲まなければならない。そして逆に定数を使いたい場合はクオートで囲ってはいけない。
更に後世のプログラマが処理を見たときに、定数が使いたかったのか、文字列が使いたかったのかを明確にしたい場合はconstantを使うと良い。
// 定数のFOOを使うよということが明確になる print $a[constant('FOO')];
もし、文字列を変数の値と一緒に出力するとき、PHPではコンマの代わりにprintfを使うことが使える。
printf( “Hello, my name is %s“, $sName);
以下の代わりに上記のコードを使う。
echo “Hello, my name is “, $sName;
出力すべき変数が増えれば増えるほど、有効になっていく。とにかく迷ったならば、printfを使え、だ。
三項演算子はとても有効だ。しかし優先順位に難があるせいで、三項演算子をネストしようとすると以下のようなコードになってしまう
$n = (($i == 1) ? 2 : (($i == 2) ? 3 :$i));
括弧だらけで読みにくいったらありゃしない。三項演算子を使うなら一回まで。約束守れないやつは丸めてゴミ箱にでも捨てちまえ。
if ( $flag ) { }
仕様をちゃんと把握しているなら真偽値のチェックなどこれで十分。
もし事前にbool型だというのが確定してるのなら「$flag === true」を使えばいい。
インクリメント、デクリメント演算子は前に付くか後ろに付くかで意味が変わるので慣れるまでは非常にややこしい。
わけがわからなくなるくらいなら初めから使わないほうが良い。見極められないなら使うな。それがPHPerなのだ。
文句なしだ。これは文句がない。
他にも色々あるので覚えておこう
$a %= 1; $a &= 1; $a |= 1; $a ^= 1; $a <<= 1; $a >>= 1;
てっとり早く画面に表示する際にpreはよく使うが、デザインの関係上画面の文字が見えないときがある。
なのでdivを使って以下のようにしとくと便利だろう。
function p($var) {
echo "<div align='left' style='background-color:white;color:black;'><pre>";
print_r($var);
echo "</pre></div>";
}
君らが通常作るアプリケーションなんぞに、定数なんぞ必要ない。いいか、もう一度言う、お前ら程度のもんが、定数使おう何ぞ、おこがましいわ！
大丈夫。なんでもかんでも定数にする必要はない。結局設定ファイルに定数をずらずら作りまくってわけがわからなくなってるパターンが多い。
貴様みたいなもんに、定数は制御できん。いいか設定ファイルはYAML等のデータで持つようにし、その連想配列のデータ構造を一つ持ってるだけで定数の変わりになる。
このメリットに比べれば、定数だと書き換えられなくて良いという利点などこの歯のカスほどのものだ。そんなものは丸めてゴミ箱へ捨ててしまうといい。
認識を改めろ。俺たちはより良いPHPerにならないために努力している。
class Request { private $parameters; private $method; function __construct () { $this->method = $_SERVER['REQUEST_METHOD']; if ( strtoupper($this->method) === 'POST' ) { $this->parameters = $_POST; } else { $this->parameters = $_GET; } } function param ($key) { return isset($this->parameters[$key]) ? $this->parameters[$key] : null; } }
これだけでもいい。たったこれだけでもとても便利だ。ここから拡張してGETやPOSTを明示的に取るメソッドとかも作ってみるといい。自分の手を動かすのだ！
例が良くない。こんなのは引数が20個ある関数から、setを20回呼ぶオブジェクトに変わっただけではないか。
そもそもこの20個の引数とはなんなのか。何かのデータ構造なんであれば連想配列にして引数一つとして渡すべきだし、それぞれまったく異なる用途の変数なのであればWindowsプログラミングじゃあるまいし、20個も引数取る時点で設計が間違えている。
何がいいたいか。別に関数でもオブジェクトでもどっちでもいいということだ。
そんなことで悩んでる暇があったら設計を見直せ。
スキあらば自分自身を返せ。スキあらばオブジェクトを返せ。配列はArrayObjectのARRAY_AS_PROPSで返せ。
ひたすらメソッドチェイン。来る日も来る日もメソッドチェイン。とにかくメソッドチェインを使い続けろ。そこに未来はある。
どんなコードも繰り返すな。もし、少しでも同じコードを書いていたなら、それは関数に置き換えてしまえ。
・・・と、いうのはやめなさい。
一見同じように見えた処理でも前後の流れでまったく違うものということが往々にしてある。
まとめ方にも問題があるケースもある。何でもかんでも関数化すると、関数が膨大に増えていく。君は見たことがあるだろうか。common.phpやfunction.phpの恐ろしさを。
確かに細かく関数化はされているが、適切に関数化していないのである。結合度が非常に高い。なんでもかんでも盲目的にまとめれば良いという話ではないのだ！
あまりに極度に意識しすぎると、プログラムそのものができなくなる。そういう状態に陥る。
気を抜いて。そう気を抜いて。所詮あなたのコードなんてすぐに消えてなくなるよ。きっともっと偉い人が作り直すよ。だからまずは思うが侭にやるといい。
結合度を減らすというのは非常に難しい。何度も何度も失敗し続けて、ようやくここは分けた方が良かったんだなと気付く。次に活かそうと心に決める。そしてまた同じ過ちを繰り返していくわけだ。
まずは実装することだ。これが一番の早道だ。まずはがっつり結合した関数をあえて作るといい。何も考えずに作ろう。
そしてその後に、一部分使いまわしたいとおもうことがあるはずだ。その時に関数に切り出そう。それを繰り返すといい。そのうち初めから分けた方が良いと気付く。
何事も経験が必要である！経験を積まないプログラマは丸めてゴミ箱に捨ててしまえ。
さて、先の例で言うならば、私ならadd_result_outputという関数を作ってしまうだろう。だって、addとresultを連続して呼ぶのはめんどくさいんだもん。一連の流れをいつも使うのなら、その流れをやってくれる関数を作ればいいじゃないか。
function add_result_output ($iVar, $iVar2) { $r = add($iVar, $iVar2); echo result($r); }
もっと言えばクラス化してしまってもいいかもしれない。どんな感じになるかは君の手を動かして確認しよう！
このTipsはとてもわかりにくく、ニッチ過ぎる部分も多いかもしれない。
あくまでも「より良いPHPerにならないための20Tips」なのだ。
君はこの記事を鵜呑みにしてはならない。PHPをPHPと見抜けないPHPerはPHPを使うのは難しい。
もし、あなたがPHPプログラマなら、公式のPHPドキュメントはあなたのケツの穴を拭くための紙になるだろう。
私は、それぞれのセクションを眺めて、各関数でどんなことが出来るかなんぞ、歯クソのゴミ程に役に立たないとおもっている。動けばいい。はは。
あなたは、PHPで用意された既製関数で多くのことが実現できることに、（俺の仕事を減らすなと）驚くはずだ。
この記事があなたの役に立たない事を。
ふざけんな！
★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★
★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★
_________________ここから下は古い情報▼__________________________________________________
今、自分のブログをスクラッチしているので、こちらで。→2008/9/28 スクラッチ完了！BLACK-OUT.CSS公式ページ
作りました
要は、LynxのようなシンプルWebに世界がなればいいのになと思っている方。
そして、どんなサイトでも目線は左右に動かしたくない！スクロールは上下だけで済ませたい！
と、強く考えておられる方むけの情報です。
私はテキストブラウザのLynxを時々使っているのですが、これでサイトを見るとシンプルに見れるのですごく良いんですよね。
ただ、LynxはFlashとか画像が見れないし、マウスが使えないのはいざって時にちょっと不便。
で、Firefoxをテキストブラウザ化できないかなあと、ふと思いまして、思いつきで作ってしまいました。
私めもwebデザイナーやっとるんですが、上記のように、昨今のwebデザインなんて普段はなくていいって思っている奴でして。
仕事じゃ3カラムのサイトとか作りますが自分はそんなん好きじゃないです。色がサイトごとに違うってのも理解できない。
必要なのは情報であってデザイナーのデザインなんてどうでもいいんですよ。
そんな訳で、どんなサイトでもテキストブラウザ状態で閲覧できるFirefox用の拡張cssを作りました（やっつけだけど）。
ただ、ニュースサイトで画像が見れないと困る時もあるので、普段は小さなサムネイルで、カーソルを合わせた時だけ大きく表示されるようにしています。
＠このcssはコンセプト実証モデルです。思いつきで作ってるのでちょっと問題もあります。フィードバックとか意見など頂けると嬉しいかも。
＠将来的には、グリモンでjsも組み合わせてもっとコンソールのような感覚でブラウジングできるようにしたい
＠（参考用）私のよく見るサイト・・・ニコ動、wikipedia、スラッシュドットジャパン、2nn.jp（2ch）、mixi、はてなでホッテントリに上がっているブログ各種
ちなみに、こんなん使うな、既にこんないいのあるわいってのをご存知の方は教えてくれると嬉しいです。
それなりに探したのだけど、見当たらなくて・・・だから自作したので。
/* * ---------------------------- * 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; }
サーバーサイドでマジメに作ったら逮捕されるんだろうか…？けーさつこわいから悪用とかしないでね＞＜
ところで2chのどっかの板の名前欄って人名と地名がランダム表示されるけど、どうやってリストを作成してるんだろ？
<html><head><title>反抗予告ジェネレータ</title><script type="text/javascript"><!-- var safe_mode = 1; var date, place, object, action; date = get_date(); object = get_object(); action = get_action(); httpRequest("http://ja.wikipedia.org/wiki/%E6%97%A5%E6%9C%AC%E3%81%AE%E5%A4%A7%E5%AD%A6%E4%B8%80%E8%A6%A7"); function get_date() { var now = new Date(); now.setTime(now.getTime() + Math.floor(Math.random()*1000*60*60*24*30)); if (safe_mode != 0) { now.setTime(now.getTime() + 1000*60*60*24*(365*3+366)/4*100); } return now.getYear()+"年"+(now.getMonth()+1)+"月"+now.getDate()+"日"+now.getHours()+"時"+now.getMinutes()+"分"+now.getSeconds()+"秒"; } function get_object() { var b = ["小女子", "増田", "ひろゆき", "ぬこ"]; return b[Math.floor(Math.random()*b.length)]; } function get_action() { var b = ["投", "SATSUGAI", "なでなで", "もふもふ"]; return b[Math.floor(Math.random()*b.length)]; } function httpRequest(target_url) { try { if(window.XMLHttpRequest) { httpObj = new XMLHttpRequest(); } else if(window.ActiveXObject) { httpObj = new ActiveXObject("Microsoft.XMLHTTP"); } else { return; } } catch(e) { return; } httpObj.open("GET", target_url, true); httpObj.onreadystatechange = DataRead; httpObj.send(""); return; } function DataRead() { if (httpObj.readyState == 4 && httpObj.status == 200) { var res = httpObj.responseText; var b = new Array(); b = res.match(/>([亜-熙]+)大学/g); place = b[Math.floor(Math.random()*b.length-1)].replace(">",""); if (safe_mode != 0) { place = place.replace("大学", "○○"); } document.body.innerText = date+"に"+place+"あたりで"+object+"を"+action+"します…！"; } } // --></script></head><body style="color:red; background-color:black; font-size:30px; text-align:center;"></body></html>
動作未確認。すんげー冗談半分。
// 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; } ]]></>);
動いたらいいな-