「ヤサイ増し」ステッカー追加!! 続 hatena ブログでスーパーの特売風にエントリーをアピールする

portal.nifty.com

vtec.hatenablog.com

に引続き「ヤサイ増し」ステッカーを追加してみた。

f:id:zamad:20170118182547p:plain

ということは次のステッカーはアレになる。

f:id:zamad:20170118195717p:plain

ということは次のステッカーはコレになる。

f:id:zamad:20170118200256p:plain

サンプル zamad.hatenablog.com

Mac の Alfred2 がいつのまにか Alfred3 になっていた件

特にチェックもなく使ってたらなんだか Alfred2 が終わってて Alfred3 になっているというじゃないですか。

インストール

ということで早速バージョンを上げてみた。 上げてみたというか、Alfred2 と Alfred3 はまったく別物のアプリとして動作するので新規インストールとでも言う感じか。

www.alfredapp.com

ダウンロードしてマウントして Applications フォルダにつっ込むだけ。名前も Alfred 3 となっているので Alfred 2 と共存できる。

ライセンス

自分は Alfred2 の PowerPack のライセンスを持っているのであるが、これが引き継がれないのである。

アップグレードという項目があったので、これでアップグレードを試みる

f:id:zamad:20170118101531p:plain

Web の画面が開く。

f:id:zamad:20170118101652p:plain

ここに Alfred 2 で取得したライセンスをぶち込む

f:id:zamad:20170118102228p:plain

Alfred 3 のライセンスが £14、永久ライセンスが £25 となっている。かなり愛用しているのでお布施の意味もこめて永久ライセンスにする。 2017-01-18 のレートで、25GBP = 3521 JPY である。中々の値段だ。

ちなみにアップグレードでなく普通に買うと £35 となって、かなり高い。

上のスクリーンショットの状態は £14 のほうを選択している状態なので £25 をクリックして永久ライセンス側を選択状態にして、Proceed to Checkout ボタンを押す。

あとは、クレジットカード情報をポンポンと入力して終了。 メールにライセンスが届くのでアクティベートしておしまい。

インストールした Workflow や設定は Alfred2 から自動的にスライドされる。

FBステッカー追加!! 続 hatena ブログでスーパーの特売風にエントリーをアピールする

portal.nifty.com

vtec.hatenablog.com

に引続き追加。facebookで話題 ステッカー追加。

f:id:zamad:20161227132350p:plain

貼る角度をランダムにしていたら上下逆さまになることが結構あるので、左右90度以上傾かないように変更。

早速貼ってみる。ウム。

zamad.hatenablog.com

上西産業 のぼり 本日特売日(黄) J-13

上西産業 のぼり 本日特売日(黄) J-13

タカ印 のぼり 40-6052 本日特売日

タカ印 のぼり 40-6052 本日特売日

Hatena ブログの編集モードの怪

この hatena ブログというのはエントリーごとに編集モードを内部で持っているっぽく。元も設定で Makrdown モードにしていても、Android 等のアプリ側からエントリーを作ると、そのエントリーは PC 側からでも WYSIWYG モードとして扱われてしまう。

オレオレ検索エンジン作ってダッシャーしなくてよかったかも

vtec.hatenablog.com

してみたわけだが、実はそんなことしなくてもよかったかも

こういう Google 公式の Chrome の拡張を知ったのだ。

chrome.google.com

ここにヤな奴のドメインをぶち込んでおくと、検索から消滅してくれる。

だからオレオレしなくていいわけで。

ナノブロック サンタクロース NBC_200

ナノブロック サンタクロース NBC_200

ナノブロック マリーナベイ・サンズ NBH_123

ナノブロック マリーナベイ・サンズ NBH_123

The Meat Guy サーロインブロック (約1kg)

The Meat Guy サーロインブロック (約1kg)

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

portal.nifty.com

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

zamad.hatenablog.com

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

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

f:id:zamad:20161111174842p:plain

今回はこれを作った。はてなブログぐらいだと 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を貼り込まなければステッカーは貼られないのでアピールを記事毎にコントロールできる

f:id:zamad:20161114130417p:plain

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

おとなの自由研究

おとなの自由研究

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

以前までは、URL欄に

chrome://memory-redirect

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

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