hatena ブログでスーパーの特売風にエントリーをアピールする

portal.nifty.com

こういうデイリーの記事があって、リアルシールで実装していたので今回システム側で実装してみた。↓これがサンプルページ

zamad.hatenablog.com

実装自体は簡単で、エントリー本体にアピールしたいステッカーが入る要素を直接ぶち込んでそれをJSを使ってヘッダー部に貼り直すだけ。 その際に適当に回転させて特売ステッカー感を出してみた。

まずとりあえずブログに特売ステッカーの画像を作ってアップする。

今回はこれを作った。はてなブログぐらいだと 128 x 128 px ぐらいで作ると丁度よかった。形が丸いのでアルファ付きPNGで作っている。

次にエントリーに元ネタ要素を貼り込む。このような class をくっつけた HTML 要素を貼り込む。

<span class="tokubai"></span>

内容が無いので画面上は何も表示されない。

これに対するスタイルシートを、デザインのカスタムとしてこのように作成する

#blog-title span.tokubai{
    position:absolute;
    width: 128px;
    height:128px;
    z-index: 10000;
    background-image: url(https://cdn-ak.f.st-hatena.com/images/fotolife/z/zamad/20161111/20161111174842.png);
}
span.tokubai.d30{ transform:rotate(30deg); }
span.tokubai.d60{ transform:rotate(60deg); }
span.tokubai.d90{ transform:rotate(90deg); }
span.tokubai.d120{ transform:rotate(120deg); }
span.tokubai.d150{ transform:rotate(150deg); }
span.tokubai.d180{ transform:rotate(180deg); }
span.tokubai.d210{ transform:rotate(210deg); }
span.tokubai.d240{ transform:rotate(240deg); }
span.tokubai.d270{ transform:rotate(270deg); }
span.tokubai.d300{ transform:rotate(300deg); }
span.tokubai.d330{ transform:rotate(330deg); }

ブログのタイトル部に移動した時だけ効いてほしいのでこういうセレクタ。画像自体は↑でアップロードした画像のURLを指定する

デザインのカスタマイズでフッター部に JavaScript を書く部分があるので、そこにこのように書いた。

(function(){
    if(document.URL.indexOf("http://zamad.hatenablog.com/entry") == -1){
        return;
    }
    var tokubaiList = document.querySelectorAll("span.tokubai");
    if(tokubaiList.length == 0){
        return;
    }
    var headerTitle = document.querySelector("#blog-title");
    for(var i = 0; i < tokubaiList.length; i++){
        tokubaiList[i].parentNode.removeChild(tokubaiList[i]);
        headerTitle.appendChild(tokubaiList[i]);
        tokubaiList[i].style.top = 10 + Math.floor(Math.random() * 121) + "px";
        tokubaiList[i].style.left = 10 + Math.floor(Math.random() * 81) + "%";
        tokubaiList[i].classList.add("d" + (30 * (1 + Math.floor(Math.random() * 12))));
    }
})();

これで記事に暑苦しいほどのアピールができるようになった。当然HTMLを貼り込まなければステッカーは貼られないのでアピールを記事毎にコントロールできる

テスト的に実装したデザインのブログ意外ではどのように動作するかわからないのでそのへん調整とか必要。

おとなの自由研究 青おに (アスペクト文庫)

おとなの自由研究 赤おに (アスペクト文庫)

おとなの自由研究

2016年後半版 Google Chrome でタブのプロセスIDをチェックする方法

以前までは、URL欄に

chrome://memory-redirect

と打ち込めば表示されていたのだが、最近のバージョンからはこのURLが使えなくなっていて、どうしたものかと。

実は上部の Window menu 内に task manager なる項目があって、これを選ぶと小さいウィンドウが開いてそこにプロセスIDの一覧が表示される。

マイクロソフト 薄型キーボード Bluetooth対応/ワイヤレス/折りたたみ Windows/Androidタブレット/iPad, iPhone対応 Universal Foldable Keyboard GU5-00014

nvAlt 2.2.122 で クォート記号が変換されてしまう問題 on OSX 10.11 El Capitan

Mac 上でのメモアプリケーションとして nvAlt を使っているのだが

brettterpstra.com

久々のバージョンアップがあって上がったと思ったら、クォート記号(シングルクォーテーション と ダブルクォーテーション)が勝手に変換されてしまうという現象に悩まされることになった。 どういうことかというと

このように入力すると

"hoge" 'hoge'

このようになってしまうのだ

“hoge” ‘hoge’

よく見ると、クォートが、所謂全角と呼ばれる幅の広いバージョンになってしまっている。

普通に文章を書く人ならあまり関係ないが自分はプログラムのコードをよく貼りつけて保存するので このような勝手な変換をやってもらうと困る。それにアポストロフィとしても使うのだからこの設定誰得？な設定である。

nvAlt の設定を眺めてもそんな変換を許可するような項目が無い。さてどうする。

実はこのバージョンの nvAlt から Mac本体側のあるユーザー設定項目を採用するようになっていて、その項目が kyeboard の text の設定にある。

この use smart quotes... というところにチェックが入っていると nvAlt 側でもそれに基づき変換がかかるということのようだ。 これは別のエディタでは起こらないのでアプリケーション側でこの設定を使うか否かは決めれるようだ。そして今回、nvAlt は「使う」という設定にしたということだった。

この設定をいじった覚えはないので、デフォルトでオンになっていると思われる。チェックを外せば元通り変換されなくなる。OK。

超ノート術 成果を10倍にするメモの書き方

オキナ プロジェクト耐水メモ オレンジ PW2569

仕事のスピード・質が劇的に上がる すごいメモ。

オレもオレオレ検索エンジンを作ってダッシャーしてみた

このようなサービスがちょっと話題になっていた・・・

pasokatu.com

なのだが、除外がガッツリ過ぎて自分には合わないとか、なんか嘘くせーって感じる人も多いようで、 このエントリーにも頑張れば自分で作れるというので作ってみた。

検索エンジン自作入門 ~手を動かしながら見渡す検索の舞台裏

個人サイト用カスタム検索を作る

まずとにもかくにも Google カスタム検索 に行く

ここで個人サイト用のカスタム検索を1個作る。ちょっとちょっと! 作りたいのは Web 全体の検索で個人サイト用じゃないと思ってしまうが、これで合っているのである。 Google カスタム検索はいきなり Web 全体の検索するカスタマイズができないようになっている仕様なのでまずは個人サイト用のカスタム検索を作るのである。

と Google 本人も言っている

support.google.com

Add ボタンを押して追加する。

必要な項目を記入する。検索するサイトは www.example.com とする。これは「例」として入れているわけでなく実際にこの値で設定する。 名前は適当でいいだろう。言語は日本語にしておこう。

できあがったので、作った検索エンジンを編集する

Web 全体対応に変更

作った検索エンジンの設定を変える。追加したサイトを重視して、ウェブ全体を検索する 設定に変更して、検索する対象のサイト www.example.com を削除する。

これで Web 全体を検索対象にする カスタム検索エンジン を作ることができた。

Rubyでつくる検索エンジン

通常の検索

では「HDMI ケーブル」について調べたいとして普通に Google で検索してみる HDMI ケーブル - Google 検索

このように長々と広告も出るが、トップ2に定番の「価格」と「尼」が出ている。

除外設定

では、価格と尼を除外してみよう

まずカスタム検索の設定画面の先程 www.example.com を削除したところの下の 詳細設定 の文字をクリック

そうすると 除外するサイト という欄が出て来るので、追加 をクリックする。このわかりにくさを見るに、Google 自身も作ったはいいがこの機能はあまり使わせたくないという気持ちがビンビンに伝わってくる。

小さなポップアップが上がるので、おもむろに kakaku.com と書き込んで 保存 する。

この設定画面の右側に設定を試すところがあるのでここで試してみる。

「価格」が除外されて「尼」が一番に来ていることが確認できた。 では同様に「尼」除外してみよう。

バッツリ除外できた。

ホーメル スパム レギュラーN 340g

公開

では作った検索エンジンを公開してみよう

vtec.hatenablog.com

これである。

これは、デザイン の画面から 保存してコードを取得 を押すとコードが取得出来る

コードはこのようなタグとJSコードで構成されている

<script>
  (function() {
    var cx = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

これをこのまま はてなブログのエントリーに貼り付ければおしまいである。 しかしこれは一工夫必要で、実際はこのようなコードをブログに張りつけることになる。

<div>
<script type="text/javascript" src="https://cse.google.com/cse.js?cx=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></script>
<gcse:search></gcse:search>
</div>

あとは、ブログ本来の CSS が検索結果にも適用されるのでここを専用に作ってあげる必要がある。 それにしても簡単にできるもんである。

ボブ・ロス ザ・ジョイ・オブ・ペインティング 決定版DVD-BOX1

ボブ・ロス THE JOY OF PAINTING2 神々しい山 [DVD]

勇者に滅ぼされるだけの簡単なお仕事です〈9〉

オレオレ検索エンジン

作った結果。現状ではアマゾンとカカクコムの検索結果を除外している。

作り方はこれ

vtec.hatenablog.com

Google PageRankの数理 ―最強検索エンジンのランキング手法を求めて―

↓コレ。

2016年 Mac版 Skype の起動音を消す

あのデフォルトであるなんの意味があるかわからない「ぶ〜〜〜〜〜ン、ピ！」っていう起動音がウザイので消す方法。

設定からこのチェックを外す

セガサターン起動音[H.][Remix]

すたいる確認用

h3

h4

コードブロック

function hogehoge(){
    console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa");
}