cherenkov's暗中模索blog

2012-05-27

ChromeのCSS::selectionが一部反映されない件

WinVista, Chrome 19.0.1084.52 m, Firefox 12.0。
文字列を選択した際の背景色を指定するCSSの::selectionをこのブログに適用してみたが、Chromeは文字列以外の部分の色がデフォルトのままだった。どうしたもんかいのぅ。

::selection {
    background: pink !important;
}
::-moz-selection {
    background: pink !important;
}

Skitch for WindowsはWindows8のみ

スクリーンショットや画像にきれいに字入れするソフトのSkitch。
Evernoteに買収されて無料化されました。Windows版はあるのかぐぐってみましたが、
今のところ、Windows8用しか見つかりませんでした。

Skitch app for Windows in the Windows Store Preview

勝手に移植

Chrome拡張機能「切込隊長補佐」をリリースしました | しらさかブログZ

見やすいです。
しかし拡張を入れるのもなんなんでStylishに移植しました。
インストールはこちら
やまもといちろうBLOG(切込隊長補佐) - Themes and Skins for Tea-nifty - userstyles.org

動作確認
しばらくぶりに東京に帰ってきてみたら、補佐が着任していた: やまもといちろうBLOG（ブログ）

2012-05-07

中国のケンタッキーで発見！かた焼きそばバーガー

youkuのCMで見つけた。かた焼きそばが具のハンバーガー。新感覚。
中国でケンタッキーは肯德基というらしい。
Welcome to KFC.com.cn

中華な品目が目立ちますね。
価格表示で円マークが使われているのが気になる。元も￥なの？

ちょい読みにっき「Coders at Work プログラミングの技をめぐる探求」

Douglas Crockford氏の章だけ。

テレビ放送科で勉強
E（プログラミング言語？）
数多くあるJavaScript Frameworkはいずれ2,3個に収まるだろう。なかでもMicrosoftのAtlasは生き残ると予想。理由はこういった競争にMSはいつも残るらしい。

Atlas Solutions これか？

Yahooで氏が推進している取り組みのひとつがコードリーディング。
FORTRANからの癖でつい一文字変数名を使ってしまうことにもがいている。
コードリーディングする際には、まずJSLintを通してから。

JSLint,The JavaScript Code Quality Tool

波括弧を前につけるな。

開き波カッコ { の手前で改行するべきではない - わからん

睡眠時無呼吸症候群で集中力と記憶力が落ちた時期があったらしい。今は回復。
クヌース

クヌース著作の The Art of Computer Programming を学生の頃に家賃を二ヶ月滞納して手に入れたらしい。
自分は、「時に英語の文章を書き、時にJavaScriptのコードを書く作家」だと思ってる。
ブログなどで技術をわかりやすく紹介する文章が書ける人は重宝する。
エンジニアを採用する時に気をつけていることは、コードリーディングをさせる。自らが書いた自信があるコードを説明させる。プレゼンテーション力を重視。

2012-05-05

このブログのデザインメモ

あまりカスタマイズせず、気に入ったデザインを適用する方針。
なお、以下の設定はテンプレートを変更するとリセットされてしまうので注意。

Bloggerテンプレートデザイナーでぽちぽち調整していく。

"テンプレートデザイナー"への行き方は、設定 - テンプレート - "カスタマイズ"
テンプレート：エスィリアルの水色ベースを選択。
背景："お祝い"カテゴリから緑のクローバーを選択。
レイアウト：サイドバーの位置が右で一列のものを選択。
幅を調整：レイアウトを変更してから、"幅を調整"に移動して"デフォルトにリセット"をクリックして、ブログ全体：960px。サイドバー：310px。
アドバンス：

Background：メインの背景を#ffffffに変更。
投稿タイトル："B"ボタンをクリックしてBoldを有効化。

カスタムCSS：画像の影、角丸

.post-body img {
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5) !important;
  padding: 10px !important;
  border-radius: 8px;
}

ソースコードをシンタックスハイライトさせる Syntax Highlighter を組み込む準備。

Syntax Highlighter Scripts Generator を使うと便利。ホスティングされているファイルを読み込むコードを生成してくれる。
テーマと言語を気軽に選ぶ。必要になったら後から足す。

Generateボタンを押すと以下の様なコードが表示されるのでコピー。

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script language="javascript" type="text/javascript">
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>

テンプレートを編集する。
- 設定 - テンプレート - "HTMLの編集" - "続行" と進むとテンプレートのソースコードが表示される。
- </head> の前にコードを貼り付けて保存。

以上でシンタックスハイライト導入完了。使い方は、HTML編集モードで、

<pre class="brush: css;">
コード
なお、シンタックスハイライト部分のHTMLタグなどの<は&lt;に書き換える必要がある。
</pre>

参考： @minorut blog: Blogger にシンタックスハイライト JavaScript ライブラリSyntaxHighlighter を導入するには

AutoPagerizeされてもシンタックスハイライトが効くようにする。ついでにjQueryを使えるようにしておく。

Syntax Highlighterを導入した要領で以下のコードをテンプレートの </head> 前に追加する。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
var InsertNode = function(evt) {
   SyntaxHighlighter.highlight();
};
jQuery(document).ready(function($){
(function() {
  $(document).bind('AutoPagerize_DOMNodeInserted AutoPagerAfterInsert', InsertNode);
  if (window.addEventListener) { 
    window.addEventListener('AutoPatchWork.DOMNodeInserted', InsertNode, false);
  }
})();
});
//]]>
</script>

テンプレートにJavaScriptを書く場合は正しく解釈させるために //<![CDATA[ が必須。（保存後シングルクォーテーションが文字実体参照に変換されたりした。）
jQuery読み込み後、すぐにjQuery.noConflict() してjQueryが持つ$関数を封印して、すでに定義されている$関数との衝突を避ける（合ってるよね？）。jQuery(document).ready(function($){ のようにすれば中で $が使える。それ以外はjQuery.find( のように$ではなくjQueryを使う。
無名関数(function(){で括ったのは、機能ごとのブロックにしておいたほうが後から見やすいと思ったから。
参考：

ページタイトルをブログ名が後ろにくるようにテンプレートを修正。「ブログ名: エントリータイトル」→「エントリータイトル - ブログ名」

    <b:if cond='data:blog.pageType == "index"'>
    <title><data:blog.title/></title>
    <b:else/>
    <title><data:blog.pageName/> - <data:blog.title/></title>
    </b:if>
    <!--<title><data:blog.pageTitle/></title>-->

2012-05-03

facebookの「いいね！」する前に確認するグリモンを作った

インストールはこちらから
facebook like button daemon for Greasemonkey
(firefox/greasemonkey, chromeで動作確認)

このグリモンを適用すると

こんな感じで一般のサイトに設置された公式の「いいね！」ボタンの上にカバーをかぶせます。

カバーをクリックすると確認がでて、OKを押すとカバーが消えて「いいね！」できるようになります。
ワンクッションはさむことで誤いいね！を予防します。

ちょうどいい記事がありました。
エロサイトに「いいね」した人がエロサイトを見ていたとは限らない | コーヒーサーバは香炉である

これなら偽ボタンがあってもへっちゃらですね！

グリモンだと読み込みが完了されてから実行されるのでカバーが付くまでにラグがある。
これを補うためにグリモンよりも早い段階で実行されるStylishで目立つようにしておいたほうがいいかもしれない。

@-moz-document url-prefix("http://www.facebook.com/plugins/like.php"),
url-prefix("https://www.facebook.com/plugins/like.php") {
body {
  background-color: tomato !important;
}
}