「background-color」を含む日記 RSS

はてなキーワード: background-colorとは

2017-09-11

https://anond.hatelabo.jp/20170910205249

まじな話をすると、N予備校プログラミング入門コースやるのがオススメ

https://www.nnn.ed.nico

一日8時間勉強時間があるなら、だいたい一ヶ月で終わる内容。

月額1000円だけどしっかり勉強すれば一ヶ月の無料間中に終わると思う。

もともとN高等学校のノンプログラマーの生徒をWebエンジニアとして就職させるために作られたカリキュラム講師曰く去年はこれで二人エンジニア就職を決めたらしい。

内容も相当親切に説明していて、プログラミングで何か作るだけじゃなくて、就職必要な環境構築やセキュリティまでみっちりやる。

http://qiita.com/sifue/items/7e7c7867b64ce9742aee#%E3%82%B3%E3%83%B3%E3%82%BB%E3%83%97%E3%83%88%E3%82%92%E3%82%82%E3%81%A8%E3%81%AB%E6%A7%8B%E6%88%90%E3%81%95%E3%82%8C%E3%81%9F%E3%82%B3%E3%83%BC%E3%82%B9%E3%81%A8%E5%86%85%E5%AE%B9

講師が書いてる入門コースで習うことがまとめ。テキスト教材もあるけど授業も1項目を2時間で説明している。授業は週2の生放送とそのアーカイブがある。

↓みたいなことが学べる

----

Webプログラミング入門コース

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開発環境構築コース

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ファイル, ポートフォワーディング)

通信をするボットの開発 (cron, ログ収集)

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)

ソーシャルコーディング (コンフリクト、プルリクエスト)

Webアプリ基礎コース

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)

テンプレートエンジン (テンプレートエンジン, jade)

HerokuWebサービスを公開 (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, 適切なエスケープ処理, リグレッション)

パスワード脆弱性対策(ハッシュ関数, メッセージダイジェスト, 不正アクセス禁止法, パスワードジェネレーター, 辞書攻撃)

セッション固定化攻撃脆弱性対策 (セッション, セッション固定化攻撃, ハッシュ値による正当性チェック)

より強固なセッション管理 (推測しづらいセッション識別子, 秘密鍵)

CSRF脆弱性対策 (CSRF, ワンタイムトークン)

安全なHerokuへの公開 (脆弱性に対する考え方, HTTPの廃止)

Webアプリ応用コース

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チェイン, リファクタリング)

予定の編集と削除 (要件の衝突, 関数再利用)

デザインの改善 (this, グローバルオブジェクト)

セキュリティ対策と公開 (X-Frame-Options, Heroku環境変数)

2017-06-02

ふたば手描きキャンバス拡張BML

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>

2016-03-04

window.OBR = window.OBR||{};(function(OBR){window.OB_releaseVer="01000501";window.OBR=window.OBR||{};OBR.k=OBR.k||;OBR.La=OBR.La||{};window.OBR$=function(d){return document.getElementById(d)};OBR.d=OBR.d||function(){var d={},a={v:function(){return d},h:function(a){d.X=a;d.cb=;d.startTime=(new Date).getTime()},startTime:function(){return d.startTime},log:function(a){var e=((new Date).getTime()-d.startTime)/1E3;1E3>d.cb.length&&d.cb.push(e+" >"+a)},printLog:function(){if(d.X.c.dj)window.console.log(d.cb.join("\n"));else{var a=d.X.b.Ia();a&&(a.innerHTML=d.cb.join("
"),a.style.display="block")}return d.cb.join("\n")}};a.h(OBR);return a}();OBR.printLog=OBR.d.printLog;OBR.H=function(){this.J=[]};OBR.H.prototype.add=function(d,a){var c;"string"===typeof d&amp;&amp;"function"===typeof a&amp;&amp;(c={},c.name=d,c.ai=a,this.J.push(c))};OBR.H.prototype.Qf=function(d){var a,c;OBR.d.log("remove event :"+d);a=0;for(c=this.J.length;a<c;a+=1)if(this.J[a]&amp;&amp;this.J[a].name&amp;&amp;this.J[a].name===d)try{this.J.splice(a,1)}catch(e){OBR.d.log("rm evnt err: "+e)}};</p&gt;

OBR.H.prototype.o=function(d,a,c){var e,b,f,g;a=a||[];c=!!c;OBR.d.log("event fire:"+d);e=0;for(b=this.J.length;e<b;e+=1)if(f=this.J&amp;&amp;this.J[e]?this.J[e].name:"",g=this.J&amp;&amp;this.J[e]?this.J[e].ai:null,f===d&amp;&g)try{g.apply(this,a)}catch(h){OBR.d.log("fire event *"+d+"* error: "+h)}!0===c&amp;&amp;this.Qf(d)};OBR.H.prototype.sa=function(){this.J=[]};OBR.b=OBR.b||function(){var d={},a={},c=document,e=OBR,b=null;a.v=function(){d.X=e;return d};a.h=function(a){e=a};a.Ba=function(){return function(){}};a.Gi=function(){var a=window.jQuery;return void 0!==a?!(/1\.(0|1|2|3|4)\.(0|1)/.test(a.fn.jquery)||/^1\.1/.test(a.fn.jquery)||/^1\.2/.test(a.fn.jquery)||/^1\.3/.test(a.fn.jquery)):!1};a.F=function(a){return null===a||isNaN(a)?null:e.n("outbrain_widget_"+a)};a.Ia=function(){return e.n("ob_holder")};a.ne=function(f){var g=a.Ia();null===g&amp;&amp;(g=e.b.createElement("div",</p&gt;

"ob_holder"),g.style.display="none",f?e.b.insertBefore(g,f):document.body.appendChild(g));return g};a.Vc=function(){if(!e.n(e.c.Pb)){var f=e.b.createElement("iframe",e.c.Pb),g=f.style;g.display="none";g.width="1px";g.height="1px";f.src="about:blank";(g=a.Ia())||(g=a.Va());e.b.Q(f,g)}};a.Va=function(){if(c.body)return c.body;var a;a=e.b.K("","","body",!0);return 0>=a.length?c.lastChild:a[0]};a.createElement=function(a,g,b,e){var d;a=c.createElement(a);"string"===typeof g&amp;&amp;a.setAttribute("id",g);"string"===

typeof b&amp;&amp;(a.style.cssText=b);for(d in e)e.hasOwnProperty(d)&amp;&amp;a.setAttribute(d,e[d]);return a};a.G=function(a){if(e.c.$d===e.c.Od)try{c.createStyleSheet().cssText=a}catch(g){OBR.d.log(g)}else{var b=c.createElement("style"),d=c.body?"string"===typeof c.body.style.WebkitAppearance:!1;b.type="text/css";c.getElementsByTagName("head")[0].appendChild(b);b[d?"innerText":"innerHTML"]=a}};a.N=function(a,g,b,d){var m=c.createElement("script");m.type=e.c.wj;m.src=a;m.charset="UTF-8";m.async=!!g;m.defer=!1;b&amp;&amp;

e.b.s(m,"load",function(a){var f=a.target;f&amp;&amp;setTimeout(function(){f.parentNode.removeChild(f)},3E3)});d&amp;&amp;e.b.s(m,"load",d);return m};a.Cl=function(a,g){var b=e.b.createElement("link",a);b.setAttribute("rel","stylesheet");b.setAttribute("type",e.c.Eh);g&amp;&amp;b.setAttribute("href",g);return b};a.ih=function(a){var g=e.n("ob_iframe");g&amp;&amp;(g.src=a)};a.Hf=function(){var a;a=isNaN(a)?1E5:a;return Math.floor(Math.random()*a)};a.nk=function(a,g,b){return a.replace(g,b)};a.Ll=function(){var f;if(f=OBR.n("objsonpp"))if(a.kj())a.Ka(f.parentNode)&amp;&amp;

f.parentNode.removeChild(f);else return OBR.n("objsonpp");f=c.createElement("iframe");f.id="objsonpp";f.tk&amp;&amp;(f.tk="seamless");(f.frameElement||f).style.cssText="width: 0; height: 0; border: 0";f.src="";c.body.appendChild(f);return f};a.R=function(a){var g,b;b=c.getElementsByTagName("head");try{b&amp;&amp;0<b.length?b[0].insertBefore(a,b[0].firstChild):(g=c.getElementsByTagName("script"),g[0].insertBefore(a,g[0].firstChild))}catch(d){e.d.log("Err insertToHead:"+d)}};a.Kl=function(a){a=a||OBR;return"function"!==</p&gt;

typeof a.H?(OBR.d.log("namespace.EventManager not function"),null):new a.H};a.O=function(a){return encodeURIComponent(a)};a.Ka=function(a){return null!==a};a.pj=function(f){var b,c=!1;if(a.Zc(f))return!1;b=f.Oe().recMode||"";f=f.Oe().dynamicWidgetLayout||"";b=e.c.rk[b]||"";"2"===b&amp;&amp;"1"===(e.c.sk[f]||"")&amp;&amp;(c=!0);c||"1"!==b&amp;&amp;"3"!==b||(c=!0);return c};a.Zc=function(a){return void 0===a||null===a};a.tj=function(b){return a.Zc(b)||""===b};a.getElementsByClassName=function(b,g){g||(g=document);return g.getElementsByClassName?

g.getElementsByClassName(b):a.K("class",b,"*",!0,!0,g)};a.K=function(b,g,e,d,m,l){var p,q,n;p=[];e=e||"*";d=!!d;m=!!a.tj(m);e=l?l.getElementsByTagName(e):c.getElementsByTagName(e);l=0;for(q=e.length;l<q;l+=1)n="class"===b?e[l].className:e[l].getAttribute(b),null!==n&amp;&amp;(!1===m&amp;&amp;(n=n.toLowerCase(),g=g.toLowerCase()),(n=""===b?!0:d?-1<n.indexOf(g):n===g)&amp;&amp;p.push(e[l]));return p};a.Wb=function(a,b,c){a.detachEvent?a.detachEvent("on"+b,c):a.removeEventListener&amp;&amp;a.removeEventListener(b,c,!1)};a.s=function(a,</p&gt;

b,c){a.attachEvent?a.attachEvent("on"+b,function(){c.call(a)}):a.addEventListener&amp;&amp;a.addEventListener(b,c,!1)};a.Q=function(a,b){try{b.appendChild(a)}catch(c){e.d.log("Fail insert into Dom:"+c)}};a.lb=function(b){b=e.n(b);!a.Zc(b)&amp;&amp;a.Ka(b.parentNode)&amp;&amp;b.parentNode.removeChild(b)};a.insertBefore=function(a,b){return b.parentNode.insertBefore(a,b)};a.isArray=function(a){return a instanceof Array?!0:"[object Array]"===Object.prototype.toString.call(a)};a.sb=function(a,b){var c=/htt(p|ps)?:\/\/127\.0\.0\.1(:\d\d\d\d)?/i;

return/^htt(p|ps)?:\/\/([\w\-]*|[\w\-]*\.[\w\-]*)\.outbrain\.com(:\d\d\d\d)?/i.test(a)||c.test(a)?a:b};a.al=function(a){a=a.replace(/^(\s*)/g,"");var b=c.createElement("div");b.innerHTML=a;return b.childNodes};a.Ua=function(a,b){return a?a.getAttribute(b):null};a.xa=function(a,b,c){a&amp;&amp;a.setAttribute(b,c)};a.I=function(a,b){var c=RegExp("[ '\"|]"+b+"[ '\"|]");a&amp;&amp;!c.test("|"+a.className+"|")&amp;&amp;(a.className+=" "+b)};a.ma=function(a,b){a&amp;&amp;typeof b===e.c.$k&amp;&amp;(a.classList?a.classList.remove(b):a.className=

a.className.replace(RegExp("(^|\\b)"+b+"(\\b|$)","gi")," "))};a.$=function(a,b){a=a.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");var c,e;try{return c=RegExp("[\\?&amp;]"+a+"=([^&amp;#]*)","i"),e=c.exec(decodeURIComponent(window.location.href.replace(/\+/g," "))),null===e?b:e[1]}catch(d){return b}};a.sh=function(a){"string"===typeof a&amp;&amp;0<a.indexOf("#")&amp;&amp;(a=a.substr(0,a.lastIndexOf("#")));return a};a.ie=function(a){var b=e.c.ga+"/strip_default.png";a.src!==b&amp;&amp;(a.alt="",a.title="",a.src=b)};a.Oh=function(){var a=</p&gt;

null,b,e,d=null;if("string"===typeof window.OB_MP_feed)a=window.OB_MP_feed;else if((b=c.getElementsByTagName("head"))&amp;&amp;0<b.length)for(e=b[0].getElementsByTagName("link"),b=0;b<e.length;b+=1)if(d=e[b],null!==d.type&amp;&amp;("application/rss+xml"===d.type||"application/atom+xml"===d.type)&amp;&amp;null!==d.href&amp;&amp;""!==d.href){a=d.href;break}return a};a.D=function(a,b){var c=null;a.currentStyle?c=a.currentStyle[b]:window.getComputedStyle&amp;&amp;(c=document.defaultView.getComputedStyle(a,null).getPropertyValue(b));return c};</p&gt;

a.xk=function(){var b=a.Ia(),g,c;a.Ka(b)&amp;&amp;(g=e.b.createElement("span","ob_a"),a.insertBefore(g,b),g.innerHTML=".",c=a.D(g,"color"),a.lb("ob_a"),g=e.b.createElement("a","ob_a"),g.setAttribute("href","void(0)"),g.innerHTML=".",a.insertBefore(g,b),b=a.D(g,"color"),a.lb("ob_a"),c="rgb(0, 0, 0)"===c||"#000000"===c?"#555":c,a.G(".ob-tcolor{color:"+c+"} .ob-lcolor{color:"+b+"} .ob-bgtcolor{background-color:"+c+"} .item-link-container:hover .ob-tcolor{border-color:"+c+"} "+(document.addEventListener?"":".odb_li:hover .ob-zapping-icon,.odb_div:hover .ob-zapping-icon,.item-container:hover .ob-zapping-icon,.ob-dynamic-rec-container:hover .ob-zapping-icon,.odb_li:hover .ob-textual-zapping-icon,.odb_div:hover .ob-textual-zapping-icon,.item-container:hover .ob-textual-zapping-icon,.ob-dynamic-rec-container:hover .ob-textual-zapping-icon{display:none !important;}")))};

a.Ke=function(b){var g=a.Ie("property","og:url","meta","content");null===g&amp;&amp;(g=a.Ie("rel","canonical","link","href"));null!==g||b||(g=window.location.href);null===g&amp;&amp;(g="");return g};a.Ie=function(b,g,c,e){var d=null;b=a.K(b,g,c,!1);null!==b&amp;&amp;0<b.length&amp;&amp;(d=b[0].getAttribute(e));return d};a.jh=function(b){var g,c,d;g=b.g("tracking",!1);c=b.g("comScoreEnabled",!0);d=e.c.je;!1===g&amp;&amp;(!0===c&amp;&amp;!1===d&amp;&amp;!b.Pe())&amp;&amp;(a.Vc(),g=b.q("pid",""),b=e.n(e.c.Pb))&amp;&amp;(b.src=e.c.ga+"/"+e.c.Ub+"3rd/comScore/comScore.htm#pid="+</p&gt;

g,e.c.je=!0)};a.Ei=function(){var b=a.Lb(8);"string"===typeof window.name&amp;&amp;(""===window.name||-1<window.name.indexOf("frame"))?(window.name=b,b=window.name):"string"===typeof window.name&amp;&amp;""!==window.name&amp;&amp;(b=window.name);return b=e.b.O(b.substring(0,9))};a.Lb=function(a){var b,c;b=[];a="number"===typeof a?a:8;for(c=0;c<a;c+=1)b.push("0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz".charAt(Math.floor(61*Math.random())));return b.join("")};a.me=function(a){for(var b="",c=0;c<a.length;c++)b=</p&gt;

b.concat(a[c]?"1":"0");return parseInt(b,2)};a.Xc=function(b){var g=b.getElementsByTagName("a")[0];if(null===b.offsetParent||0===b.offsetHeight||0===b.offsetWidth||0===b.clientHeight||0===b.clientWidth||"none"===a.D(b,"display")||"hidden"===a.D(b,"visibility"))return!1;var c=parseInt(a.D(b,"padding-top"),10)+parseInt(a.D(b,"padding-bottom"),10);return 0===b.clientHeight-c||g&amp;&amp;"none"===a.D(g,"display")?!1:!0};a.Oc=function(a){for(var b in e.La)if(e.La.hasOwnProperty(b)&amp;&amp;e.La[b].l===a)return e.La[b];

return null};a.Rl=function(a){for(var b in a)if(a.hasOwnProperty(b))return!1;return!0};a.Ga=function(a,b){return"function"!==typeof a?null:void 0===b?a():a(b)};a.kj=function(){return"Microsoft Internet Explorer"===navigator.appName};a.Fh=function(a,b){return a*b};a.Ge=function(a){if(!a||""===a)return[];a=a.replace("","").replace("http://","").replace("https://","").replace("www.","").replace("www2.","").split("/");a.pop();return 0<a.length?a:[]};a.ki=function(b,g){var c=a.Ge(b),e=[],d="";if(g>=c.length)d=

c.join(".");else{e[0]=c[0];for(d=1;d<=g;d+=1)e[d]=c[d];d=e.join(".")}return d};a.ti=function(){return"http"+("https:"===c.location.protocol?"s":"")};a.si=function(){var b,g;b=c.getElementById("widgetVersionSync");null===b&amp;&amp;(b=a.createElement("iframe","widgetVersionSync"),g=a.createElement("div",null,"display:none; height:0px; width:0px; border:none;"),g.appendChild(b),a.Va().appendChild(g));return b};a.ql=function(b){var g;g=window.OB_releaseVer;isNaN(g)||(isNaN(b)||g>=b)||(b=a.ti()+"://widgets.outbrain.com/external/sync/outbrainjs.html?needToBeVer="+

b.toString(),g=a.si(),g.src=b)};a.Sg=function(b){b=b.g("widgetVersionSync",0);isNaN(b)||""===b||(b=parseInt(b,10)||0,a.ql(b))};d.Rc=function(){if(b)return b;var a;try{var g=window.localStorage;g.setItem("OBtst","");g.removeItem("OBtst");a=g}catch(c){a={$b:{},setItem:function(a,b){this.$b[a]=b},removeItem:function(a){this.$b[a]=void 0},getItem:function(a){return"undefined"!==typeof this.$b[a]?this.$b[a]:null}}}return b=a};a.hg=function(a,b){d.Rc().setItem(a,b)};a.Qc=function(a){return(a=d.Rc().getItem(a))?

a:null};a.Gh=function(){d.Rc().removeItem("OB-USER-TOKEN")};a.h(OBR);return a}();OBR.ya=function(d,a,c,e,b,f,g,h,k){var m,l;m=this;l=0;k="function"===typeof k?k:OBR.b.Fh;m.start=function(){var p;l+=1;OBR.b.Ga(d,l)?OBR.b.Ga(a,l):(p=OBR.b.Ga(h,l))?OBR.b.Ga(e,l):(p=l===f&amp;&amp;1E3!==f)?OBR.b.Ga(e,l):(OBR.b.Ga(c,l),p=g?k(l,b):b,setTimeout(function(){m.start()},p))};m.start()};OBR.re=OBR.re||{fj:function(){return"complete"===document.readyState}};

OBR.Hc=function(){var d={},a=[];d.add=function(c){a.push(c)};d.remove=function(c){a.splice(c,1)};d.top=function(){return 0<a.length?a.shift():null};d.jj=function(){return 0>=a.length};d.Jl=function(){return a};d.qh=function(){a=[]};return d};

OBR.Ra=function(){function d(e,b){a.pb="resolve"===e?function(a){a&amp;&amp;a(b)}:function(a,g){g&amp;&g(b)};a.Pa=a.kk=function(){throw Error("Promise already completed.");};for(var f,g=0;f=c[g++];)f[e]&amp;&amp;f[e](b);delete c}var a={},c=[];a.pb=function(a,b){c.push({resolve:a,reject:b})};a.Pa=function(a){d("resolve",a)};a.kk=function(a){d("reject",a)};return a};

OBR.Ag=function(d){var a={},c=null,e,b;a.onClickOrAutoplay=void 0;a.onDisplayReady=void 0;a.onError=void 0;a.fetch=function(a){null===c?(c=a,b&amp;&amp;b(c,this),b=null):(c=a,OBR.Ja.of([this]))};a.shown=function(a){e=a;OBR.Ja&amp;&amp;OBR.Ja.pl(d.widgetId,d.playerId,e)};a.stopTimer=function(){if(this.tg){window.clearInterval(this.tg);var a=document.querySelector('[data-ob-player-id="'+d.playerId+'"] .timerNumber');a&amp;&amp;(a.textContent=a.parentElement.getAttribute("data-time"))}};a.placed=function(){OBR.Ja.ol(d.playerId)};

a.uj=function(a){b=a;c&amp;&amp;b(c,this)};a.Ue=function(){return d};a.Hl=function(){return e};a.Nl=function(){return d.when};return a};OBR.Fg=function(){var d={},a="00.000",c=null,e=null,b=0;d.start=function(){null===c&amp;&amp;(c=new Date);null!==e&amp;&amp;(b+=new Date-e)};d.stop=function(){var f=new Date(new Date-c-b),g=f.getUTCSeconds(),f=f.getUTCMilliseconds();e=new Date;return a=(9<g?g:"0"+g)+"."+(99<f?f:9<f?"0"+f:"00"+f)};return d};</p&gt;

OBR.rd=OBR.rd||function(){function d(){var a=window;a.googletag=a.googletag||{};a.googletag.cmd=a.googletag.cmd||[]}function a(a,g,c,e){var d=window;d.$revee&amp;&amp;d.googletag.cmd.push(function(){d.$revee.track({obpid:a,obsid:g,obdid:c,obpu:e});b.d.log("revee fire:"+e);b.d.log("revee fire id:"+c)})}var c={},e=!0,b;c.h=function(a){b=a;c.cc={}};c.Yb=function(f){if(f&amp;&amp;!1!==f.g("activateRevee",!1)){d();var g=f.q("pid",0),h=f.q("sid",0),k=f.q("did",0),m=f.ka();e||c.cc[k]?e&amp;&amp;(e=!1,f=b.b.N(b.c.U+"rva.outbrain.com/analytics-v1.js",

!0,!0,function(){m=document.location.href;a(g,h,k,m)}),b.b.R(f)):a(g,h,k,m);c.cc[k]||(c.cc[k]=!0)}};c.B=function(){e=!0;c.cc={}};c.h(OBR);return c}();OBR.c=OBR.c||function(){var d={},a={},c=OBR,e;a.Cg="opera";a.Od="msie";a.zg="firefox";a.xg="chrome";a.Eg="safari";a.Bg="mozilla";a.Al="boolean";a.$k="string";a.Vl="object";a.gl="undefined";a.Ul="number";a.Pb="ob_iframe";a.$e=!0;a.Ff=0;a.ec="outbrain_widget_";a.wj="text/javascript";a.Eh="このエントリーをはてなブックマークに追加ツイートシェア

2013-11-19

文字列の代入で、 HTML要素のスタイルを既定に戻せる(IE9,FireFox,Chrome)

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='';">

今日日、jQueryなどで処理するからイベントハンドラなど自分スタイルを直接いじることはあんまりないのかもだけど。

2011-03-20

より良いPHPerにならないための20Tips

http://1-byte.jp/2011/03/20/20_tips_you_need_to_learn_to_become_a_better_php_programmer/

良いPHPerだって?そんなものは丸めゴミ箱にでも捨ててしまった方が資源の再利用になる分いくらかマシだ。

つまり俺たちがしなくちゃならないことは「より良いPHPerにならないため」に何ができるかってことなのさ。

それじゃ、始めよう。

1. ?>を使うな

?>なんて使っちゃいけない。そう俺たちはBAD PHPer。

無駄ホワイトスペースの出力に悩まされるくらいなら対称性なんて丸めゴミ箱にでも捨てた方がまだマシだ。非対称性こそが賛美。

2. 設定ファイルPHPで書くな

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/'

3. コメントを信用するな

そう、あなたはこんな状況に遭遇したことがあるんじゃ?

// ここで後の処理のためにhogeメソッドを呼び出しておく
$q->foo();

// $a['foo']はここに来る時点で真のはず
// 2010-03-10 判定がおかしいので修正
// 2010-06-21 やっぱり値が入ってる方が正しい
if ( !isset($hoge[0]) ) {
}

コメント保守されない。そう、それは真実。こんなコメント発見したら即効削除しよう。コメントは基本信じるな。

俺たちにちょっとしたヒントと大きな損害を与えてくれる、それがコメントの役割なのだ。

4. タブとうまく付き合うしかない

わかる。いいたいはとてもわかる。俺たちはしばしばインデントにスペースを使うはずだ。一方でIDEのしっかりした言語ではタブも使うことがある。しかし悪いことに、両者を混同しているプログラマも一定数いるのだ。

タブを画面上で認識しにくいエディタが世の中には存在する(何とは言わないが)

そして画面上で認識しにくいことを理由にタブを気にしないプログラマがいる。

この二つの条件が重なると、タブとスペースの交じり合ったインデントが完成する。もうぐちゃぐちゃだ。これは永遠に続く戦いだ。

私たちが勝利を掴むためにできることなどせいぜい、常にスペースしか使わない。タブを見つけたらその都度スペースに変換する。そういった地道な活動が明日へとつながるのだ。

5. 変数名に時間をかけるな

われわれがプログラムをするとき、何に一番時間がかかってるか。実は変数の命名なのである。ここで拘り過ぎて時間をかけ過ぎては何も進まない。

御託はイイからさっさと書け、だ。しかしとはいっても変数名は重要。日頃からどういうときにどんな名前を使うかを決めておくといい。

そして変数名に型はまったく必要ない。型宣言のないPHPにおいて、型の変数名をつけること自体ナンセンスだ。

コンパイラ様に保証されてない状態での

$iNumber = 'aaa';

になんの意味もない。コメントを信じるなでも言ったが、これはプログラマを混乱させるだけの害悪なものだ。

6. 変数初期化場所

変数を使う前に初期化するのは、警告を出さないという意味でも良い癖だ。しかし具体的にどこでやるかが問題だ。

$foo = null;
$foo = $q->foo();

こんな初期化意味はない。よくあるのはやはり、if文で値を振り分けるケースだろう

$foo = null;
if ( $hoge ) {
    $foo = 1;
}
else if ( $bar ) {
    $foo = 2;
}

このとき初期化はとても有効だ。もしnullの初期化を忘れたまま$fooを使うと警告が出るが、ちゃんと初期化してるので出ない。基本中の基本だ。

7. 不正なら常に死ね

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を返して生存させる必要性はまったくない。今すぐ死ね

8. 連想配列キーアクセスする場合

単なる配列に対して数値をクオートで囲う必要はない。

連想配列キーを指定する場合だけ定数と間違わないようにクオートで囲まなければならない。そして逆に定数を使いたい場合はクオートで囲ってはいけない。

更に後世のプログラマ処理を見たときに、定数が使いたかったのか、文字列が使いたかったのかを明確にした場合はconstantを使うと良い。

// 定数のFOOを使うよということが明確になる
print $a[constant('FOO')];

9. echoよりもprintfを使え

もし、文字列変数の値と一緒に出力するときPHPではコンマの代わりにprintfを使うことが使える。

なぜ?コンマを使うよりも可読性がグッとあがるから

printf( “Hello, my name is %s“, $sName);

以下の代わりに上記のコードを使う。

echoHello, my name is “, $sName;

出力すべき変数が増えれば増えるほど、有効になっていく。とにかく迷ったならば、printfを使え、だ。

10. 三項演算子は一回まで

三項演算子はとても有効だ。しか優先順位に難があるせいで三項演算子ネストしようとすると以下のようなコードになってしま

$n = (($i == 1) ? 2 : (($i == 2) ? 3 :$i));

括弧だらけで読みにくいったらありゃしない。三項演算子を使うなら一回まで。約束守れないやつは丸めゴミ箱にでも捨てちまえ。

11. 真偽値のチェックは生でいけ

if ( $flag ) {
}

仕様をちゃんと把握しているなら真偽値のチェックなどこれで十分。

もし事前にbool型だというのが確定してるのなら「$flag === true」を使えばいい。

12. ++と--の演算子を見極めろ

インクリメント、デクリメント演算子は前に付くか後ろに付くかで意味が変わるので慣れるまでは非常にややこしい

けがからなくなるくらいなら初めから使わないほうが良い。見極められないなら使うな。それがPHPerなのだ。

13. 代入演算子を使え

文句なしだ。これは文句がない。

他にも色々あるので覚えておこう

$a %=  1;
$a &=  1;
$a |=  1;
$a ^=  1;
$a <<= 1;
$a >>= 1;

14. 変数dump関数はより便利に

てっとり早く画面に表示する際にpreはよく使うが、デザインの関係上画面の文字が見えないときがある。

なのでdivを使って以下のようにしとくと便利だろう。

function p($var) {
    echo "<div align='left' style='background-color:white;color:black;'><pre>";
    print_r($var);
    echo "</pre></div>";
}

15. 定数から手を洗え

君らが通常作るアプリケーションなんぞに、定数なんぞ必要ない。いいか、もう一度言う、お前ら程度のもんが、定数使おう何ぞ、おこがましいわ!

大丈夫。なんでもかんでも定数にする必要はない。結局設定ファイルに定数をずらずら作りまくってわけがからなくなってるパターンが多い。

貴様たいなもんに、定数は制御できん。いいか設定ファイルYAML等のデータで持つようにし、その連想配列データ構造を一つ持ってるだけで定数の変わりになる。

このメリットに比べれば、定数だと書き換えられなくて良いという利点などこの歯のカスほどのものだ。そんなものは丸めゴミ箱へ捨ててしまうといい。

認識を改めろ。俺たちはより良いPHPerにならないために努力している。

16. $_GETと$_POSTを生で使うな

できれば何かしら簡単なクラスでもいいのでラップしろ。

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を明示的に取るメソッドとかも作ってみるといい。自分の手を動かすのだ!

17. 関数だのオブジェクトだのの問題ではな

例が良くない。こんなのは引数20個ある関数からset20回呼ぶオブジェクトに変わっただけではないか

そもそもこの20個の引数はなんなのか。何かのデータ構造なんであれば連想配列にして引数一つとして渡すべきだし、それぞれまったく異なる用途の変数なのであればWindowsプログラミングじゃあるまいし20個も引数取る時点設計が間違えている。

何がいいたいか。別に関数でもオブジェクトでもどっちでもいいということだ。

そんなことで悩んでる暇があったら設計を見直せ。

18. メソッドチェインを愛用せよ

スキあらば自分自身を返せ。スキあらばオブジェクトを返せ。配列はArrayObjectのARRAY_AS_PROPSで返せ。

ひたすらメソッドチェイン。来る日も来る日もメソッドチェイン。とにかくメソッドチェインを使い続けろ。そこに未来はある。

19. コードの汎用化は慎重に

どんなコードも繰り返すな。もし、少しでも同じコードを書いていたなら、それは関数に置き換えてしまえ。

・・・と、いうのはやめなさい。

一見同じように見えた処理でも前後の流れでまったく違うものということが往々にしてある。

まとめ方にも問題があるケースもある。何でもかんでも関数化すると、関数が膨大に増えていく。君は見たことがあるだろうか。common.phpやfunction.phpの恐ろしさを。

かに細かく関数化はされているが、適切に関数化していないのである。結合度が非常に高い。なんでもかんでも盲目的にまとめれば良いという話ではないのだ!

20. 結合度は適切に減らし、適切に結合せよ

あまりに極度に意識しすぎると、プログラムそのものができなくなる。そういう状態に陥る。

気を抜いて。そう気を抜いて。所詮あなたコードなんてすぐに消えてなくなるよ。きっともっと偉い人が作り直すよ。だからまずは思うが侭にやるといい。

結合度を減らすというのは非常に難しい何度何度も失敗し続けて、ようやくここは分けた方が良かったんだなと気付く。次に活かそうと心に決める。そしてまた同じ過ちを繰り返していくわけだ。

まずは実装することだ。これが一番の早道だ。まずはがっつり結合した関数をあえて作るといい。何も考えずに作ろう。

そしてその後に、一部分使いましたいとおもうことがあるはずだ。その時に関数に切り出そう。それを繰り返すといい。そのうち初めから分けた方が良いと気付く。

何事も経験が必要である経験を積まないプログラマ丸めゴミ箱に捨ててしまえ。

さて、先の例で言うならば、私ならadd_result_outputという関数を作ってしまうだろう。だってaddとresultを連続して呼ぶのはめんどくさいんだもん。一連の流れをいつも使うのなら、その流れをやってくれる関数を作ればいいじゃないか

function add_result_output ($iVar, $iVar2) {
    $r = add($iVar, $iVar2);
    echo result($r);
}

もっと言えばクラス化してしまってもいいかもしれない。どんな感じになるかは君の手を動かして確認しよう!

最後

このTipsはとてもわかりにくく、ニッチ過ぎる部分も多いかもしれない。

しかしもう一度タイトルを確認してほしい

あくまでも「より良いPHPerにならないための20Tips」なのだ。

君はこの記事を鵜呑みにしてはならない。PHPPHPと見抜けないPHPerはPHPを使うのは難しい

おまけ

もし、あなたPHPプログラマなら、公式のPHPドキュメントあなたのケツの穴を拭くための紙になるだろう。

私は、それぞれのセクションを眺めて、各関数でどんなことが出来るかなんぞ、歯クソのゴミ程に役に立たないとおもっている。動けばいい。はは。

あなたは、PHPで用意された既製関数で多くのことが実現できることに、(俺の仕事を減らすなと)驚くはずだ。

この記事があなたの役に立たない事を。

どんなコメントでも待ってます

ふざけんな!

個人的な感想

この記事に書かれている内容は、丸めゴミ箱に捨てた方が良いレベルです

もしここまで読んでしまったら、丸めゴミ箱に捨てましょう。

プログラ増田のあなぐら

2009-01-18

自己責任論者「タグ荒らし喰らうのも防衛を怠ったユーザ自己責任

ってことになるんスかね。

<span style="font-size:small;font-weight:normal;font-style:normal;color:#000000;background-color:#FFFFFF">

ここに本文を書く。

</span>

こういうトコでタグが使えるってのが意外っちゃ意外よね。

誰が書いたか、お上は知ってるだろうから、酷けりゃBANするんだろうが。

2008-08-10

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

2008.9.28 12:53 追記



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


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





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




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

作りました

【black-out.css

2008.9.13 23:30 追記

2008.8.10 22:29 追記

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

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

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

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

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

何を作ったの?

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

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

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

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

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

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

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

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

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

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

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

@(参考用)私のよく見るサイト・・・ニコ動wikipediaスラッシュドットジャパン、2nn.jp2ch)、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,'MS Pゴシック',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;
}




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



update

2008-07-17

犯行予告ジェネレータ

サーバーサイドでマジメに作ったら逮捕されるんだろうか…?けーさつこわいから悪用とかしないでね><

ところで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 &amp;&amp; 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>

2008-07-07

もん毛スター 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;
	}

]]></>);

動いたらいいな-

2007-09-07

GIGAZINEさんはbackgroundに濃い色を敷かないでください

GIGAZINEさんのサイトはけっこう重いので、すべての要素を読み込む前にテキストを読み始める事になる。けれどバックグラウンドに明度の強い色(濃紺)を敷いているので

background-color: #1c0b5a;

文字色(黒)とバッティングして、背景より上のレイヤーが読み込まれるまで記事が読めないのです。もったいないデザイン上背景に#1c0b5aといった強い色を敷く必要性はないと思うので、もっと明度の薄い色にしてくださるとうれしい。バックは淡色にして、ヘッダロゴに強い色を持ってくるなどすればいいと思いますよ。

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