Top page  1/36

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Yes / No

CATEGORY未分類

画像に色をつけて、くりんくりん回すやつのコード

CATEGORYjavascript

こちらで使ってる、 モノトーンっぽい画像を赤くしている javascript のコード。
canvas を使ってる。


(function() {
    function insert_red_icon(img, target) {
        // change color with canvas
        // https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial/Pixel_manipulation_with_canvas
        let canvas = target.appendChild(Object.assign(document.createElement("canvas"), {
            width: img.width,
            height: img.height,
        }));
        let ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);
        let imageData = ctx.getImageData(0, 0, img.width, img.height);
        let data = imageData.data;
        for (let i = 0 ; i < data.length ; i += 4) {
            if (data[i] != 0) {
                data[i]     = 255;      // red
//              data[i + 1] =           // green
//              data[i + 2] =           // blue
//              data[i + 3] =           // opacity
            }
        }
        ctx.putImageData(imageData, 0, 0);
    }

    window.addEventListener("DOMContentLoaded", function() {
        document.getElementById("x20170627-0").appendChild(Object.assign(document.createElement("img"), {
//          src: 'https://cdn-ak2.f.st-hatena.com/images/fotolife/a/a-kuma3/20170627/20170627015340.png',
            src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAXEAYAAACqhuhtAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAACXZwQWcAAAAbAAAAFwB5QMvHAAAECUlEQVRYw92XbUhTURjHH++9Tdld21y0trAXS4ygaMYsaVhrhb1IKcKSKIlIpFGXKKSgIKEPRfghCEL6JEQfIiKyD40oadZyG26wohccphS6EJfrbl6bk+7tw+NhNlkvdLKX/5fnnmfn3PP8zrnn7HnyFEVRFAWoaXw8kYjHGQZbW7ag1evpzTBd6TRaj0et1moLC0WR/MLRBdq9GxeqoyMS6et78wbg06dUKpWij8SyLMuyACUly5YVF6MvHj99GgEvXMiTJFEcHf3VafLyEEiWr15tb792DeD160gkEqEPlC29XqfT6QCamwXhyBGAuXM1Gp43mxk6r7fb+/r6+wcGZg+I6ONHURRFAK/X5/P7idflogRmNicSyWQyOXtA2RobkyRJIq3587POGMuiPXQIrcXytT+XSkqWLFm0qKgIoL6+rq62NndPWf78WZYBBgbevXv7FiAUCoefPwegfYlNgZWWyrIsy3Jvr98fDIZCAEND0ej79wDopzchw7AswwCsXFlaumIFwP79e/Y4nQBnz54/f/EiAK2dnwJzuTo67t1zuwE8Hq+3u5seSC55vT5fIAAwMhKLxWIANltFxbp1AG73gwednRQWEE1TU3d3INDT8/uBshUMhsPhMIDVarGQD5+GpsDU6nR6cnJycvbBJEmSxscBeJ7n1WrqYP+f/hswlUqlUqlIS5L+ebA5cziO4wDWr7da164l3vZ2arnir4rjMECLZfXqVasAnj178eLly5n/bwZDYaFeD1BeXlZWVpbpbzIZjUbjpUuYK7569dfsGK78xMTBg/v27d1765YgNDU1NgKYTAsWGI2ZfqKYSCSTABUV5eVWK8DChWazybRmDQKdOEH6/TVgqFQKA3Q6ly8vLl669OjRU6eOHRMEgJqanTu3bwfgOMzqHz70eLq6yDiXK/tNU2AjIxoNz/P87KPMm2cwGAyk1d9PnhDwyhWGYRiG0Wgcjo0bKytbW8+caW4+fhxgYiKdTqdJEnz4MJZNRUVZYG1ttbXV1Tt2AOCLfj8QOfRVVQ6H3U68bW3Z/RBQktCePKnTabVarc3W0FBf73Rev87z0zckFiNPWfXY5csfPoyOxuOCMDgYjUajAKkUFoo3bty+fefOzNwRDy2Aw7FpU2UlQH7+9Gt3plgWF27xYkyaMVBy6DNn5EeFO1VQgOMzJW2OQpPUpAcOdHZ2dT1+3NJy967bff9+JvBt27ZudTgA7HabbcMGUtEKAo4bHv52OCTH6enBgIaGaH8ROa774WFMsVpaHj168sTrzVyrdXW7dlVXk5VubcX+586hHRv73oQIQhvjB4Q7WFPj9/t8T58qSigUDAYCioL+mzfRbt78B0KjC4i2qupPx/Oz+gLtlsxmI/7mOgAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNy0wNi0yN1QwMTo1Mzo0MCswOTowMBUNjZoAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTctMDYtMjdUMDE6NTM6NDArMDk6MDBkUDUmAAAAF3RFWHRwbmc6Yml0LWRlcHRoLXdyaXR0ZW4ACKfELPIAAAAASUVORK5CYII=',
            onload: function() {
                insert_red_icon(this, document.getElementById("x20170627-1"));
                insert_red_icon(this, document.getElementById("x20170627-2"));
            },
        }));
    });
})();

参考にしたのは、MDN の「Canvas とピクセル操作 - ウェブデベロッパーガイド | MDN」。

画像はページと同じドメインじゃないと、画像を変更するときにセキュリティチェックに引っかかる。

SecurityError: The operation is insecure.
大抵のブログはファイルサーバが別ドメインなので、data URI scheme を使ってる。



画像をくりんくりん回しているのは、この css 。

/* rotate notification icon when active */
#x20170627-2 {
    display: inline-block;
    animation: my-icon-rotate 2s linear infinite;
}
@keyframes  my-icon-rotate {
    0% { transform: rotateY(0deg); }
    30% { transform: rotateY(360deg); }
    100% { transform: rotateY(360deg); }
}

javascript

酔いどれアンサラーにも一抹の矜持

CATEGORYプログラム
Felica2Moneyを使って、銀行やクレジットカードの明細をCSVファイルから、MicrosoftMoneyにダウンロードして、家計の収支を管理しています。この度、三菱東京UFJ銀行の法人口座のインターネットバンキングBizStationから、CSVをダウンロードしましたが、Felica2Moneyに取り込むことができません。また、同口座に付随して作ったMUFGCard 三菱UFJニコスVISAカードはビジネス用途ですが、同様に取り込めません。どちらも「CVの先頭行が見つかりません」というエラーがでます。この取り込み方を教えてください。
http://q.hatena.ne.jp/1492920344

投げっ放しの id:hidepon03

彼の諸元。


投げっ放しというか、回答がついてるのにポイント配分せず、自動終了からのキャンセルが4件ほどあるということは、回答のつき具合をウォッチはしてるのは明らかで、正確には投げっぱなしというのではない。

なのに、100% 自動終了。
# 諸元で 100% になってないのは、終了時刻が保存されない昔の質問を含むから

唯一つけた BA は、懐かしのゲッターである背景(bg5551)。
http://q.hatena.ne.jp/1392101997

ポイントを釣りあげれば回答がつくってもんじゃない(特に、今の人力検索は)。


良いように使われてる感が半端ないんだが、さて、どうしたもんかな

人力検索

牡蠣の炒飯(ナンプラー風味)

CATEGORY料理

この間つくった炒飯に使った具は、ナンプラーでもんだ牡蠣。

最近、炒飯に はまってる。


あまり上手に作ることができなくて、いままでは年に数回も作れば良い方だったのだけれど、2016年12月1日の「みなさんのおかげです」を見て「頭で考えるんじゃなくて、乗りで作れば良いのかも」と閃いた。 正にパラダイムシフト。

材料(1.5人分)

  • ごはん 1.5人分
  • 牡蠣 70~80g
  • 小ねぎ 0.5 本
  • ナンプラー 小さじ0.5
  • 少々
  • 胡椒 少々
  • 2個
  • サラダ油 大さじ1
  • しょうが 2枚

牡蠣は、スーパーで売っているにしては、やや大ぶりのものを3個。
よくある水に浸かってるタイプのやつは、火を通すと汁がいっぱい出て びっくりするくらい小さくなるので、気持ち多めの方が吉。

小ねぎは、青いところだけを使う(だから、0.5本)。
サラダ油は、気持ち多いかなという炒飯基準。

1.5人分なのは、そのときの事情。
師匠が、朝ごはんにしっかりとカレーを食べたので、少な目で良いということだったので :-)

作り方

  1. 材料の下ごしらえ
    • 冷やご飯を使うなら、電子レンジで温めておく
    • ひとつの牡蠣を7、8くらいに切り分け(だいたい、5mm角くらい)、ナンプラーで軽くもんでおく
    • しょうがは、千切りにする
    • 小ねぎは、小口切りにする
  2. 少量のサラダ油を熱して、牡蠣を中火で炒める

    むちっとした感じになるまで1分くらい

  3. サラダ油を足して、強火にして しょうがを入れる
  4. すぐに しょうがの香りがしてくるので、卵を割り入れて、すぐ ご飯を入れる
  5. 卵をご飯にからめるようにしながら強火で炒める

    ご飯がほぐれてくるまで1分から1分半

  6. 塩、胡椒で味を調える
  7. お皿によそったら、小ねぎを散らす

味が足りなかったら、ナンプラーを追加で。

師匠にはお褒めの言葉をいただいたが、牡蠣の風味はほんのり感。
より、牡蠣っぽくするならオイスターソースを使えば良いだろうか(今度、試す。

レシピ 炒飯

テストを2件ほど

CATEGORYブログ

highlight.js をいじってて、スマホ(android 標準ブラウザ)で崩れるのに気が付いた。
どうやら、カスタムデータを設定していないときと、属性値を設定しないカスタムデータ属性を取得したときの挙動が違う。
e.dataset.<key> === undefined でカスタムデータ属性が設定されているかどうかを判定できるかと思ったんだけど……


plain only attr name has value

  カスタムデータ属性なし
<code>
値なしのカスタムデータ属性
<code data-key>
PC のブラウザ undefined 空文字列
android 標準ブラウザ 空文字列 空文字列



//  if (code.dataset.lineNumber !== undefined) {
    if (code.hasAttribute("data-line-number")) {
        attr.start_line = code.dataset.lineNumber === "" ? 1 : code.dataset.lineNumber;
    }

DOM の hasAttribute メソッドを使って判定する。
値の取得も、dataset じゃなくて getAttribute メソッド使えばええやん、って気がしなくもないが。





JSON-LD には url 属性があるので、別のページの内容を表す JSON-LD が有効なのか、とか試してみる。

JSON-LD of article 157


リッチスニッペットに反映されるタイミングがよく分からない(少なくとも、クロールされたときじゃない)けど、やっぱり駄目だよな (´・ω・`)

highlight.js JSON-LD クロスブラウザ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。