#daiizメモ

ときどきいいことを書きます

daiizの自由帳ブックマークランキング2016

日記

去年やったので今年もやります．

daiizの自由帳の2016年ブックマークランキングベスト51(累計573ブックマーク)

# タイトル
1位 リンクもまるごとキャプチャしてSVGで出力するChromeスクリーンショット拡張をつくりました - daiizの自由帳
2位 機械学習でつかう画像を集める作業を少しラクにするツールをつくりました - daiizの自由帳
3位 TensorFlowで食神の定食画像を分類する実験 - daiizの自由帳
4位 TensorFlowで画像分類した定食たちの銀河をつくった - daiizの自由帳
5位 Windows、Mac、LinuxでChromeアプリが廃止される！ 開発者はどうすればよいか？ - daiizの自由帳
6位 SVG ScreenshotをChromeウェブストアで公開しました - daiizの自由帳
7位 傾き認証 - daiizの自由帳
8位 写真を与えると食神定食番号が判定されるウェブアプリをつくりました - daiizの自由帳
9位 4日間TensorFlowを触って機械学習に入門した - daiizの自由帳
10位 GyaPC::Asia Tokyo 2016 で Scrapbox の話を聞いてきた - daiizの自由帳
11位 SVG ScreenShot 開発版に Scrap to Scrapbox 機能を付けた - daiizの自由帳
12位 txtファイルをウェブページに変身させる実験 - daiizの自由帳
13位 「最高の夏」に応募しよう - daiizの自由帳
14位 Google Cloud Vision API をすばやく試す - daiizの自由帳
15位 深さ優先探索と幅優先探索 - daiizの自由帳
16位 リアルタイムスライドアプリを作ってDentoo.LTで発表しました - daiizの自由帳
17位 SVG Screenshot のウェブアプリを公開しました - daiizの自由帳
18位 RHODIAのマウスパッドが便利 - daiizの自由帳
19位 ホットエントリーを画面いっぱいに散りばめるChrome拡張をつくった - daiizの自由帳
20位 おかげさまで2周年 - daiizの自由帳
21位 argparse - daiizの自由帳
22位 【SVG ScreenShot】スクリーンショット画像ファイルをURLとして使えるようになりました - daiizの自由帳
23位 Cloud Vision API のOCRでウェブページを検索するAndroidアプリをつくった - daiizの自由帳
24位 【日記】果実酒 - daiizの自由帳
25位 Chrome拡張機能でカッコいいポップアップウィンドウを開く - daiizの自由帳
26位 TensorFlowでの画像分類実験で使える便利スクリプトを書きました - daiizの自由帳
27位 便利になった - daiizの自由帳
28位 グーグルの新アプリ『Spaces』を使ってみた - daiizの自由帳
29位 D3.js再入門したい - daiizの自由帳
30位 株式会社はてなに入社しました - daiizの自由帳
31位 【日記】銀歯の詰め物が取れた - daiizの自由帳
32位 #1955派 - daiizの自由帳
33位 貼り紙メーカー - daiizの自由帳
34位 【日記】2匹目はポッポ - daiizの自由帳
35位 【日記】土曜日 - daiizの自由帳
36位 【日記】3月7日（みんな）で焼肉を食べる日 - daiizの自由帳
37位 【横浜駅 出口】市営地下鉄 → JRきた西口 - daiizの自由帳
38位 フライドポテトの会#2 - daiizの自由帳
39位 23歳になりました - daiizの自由帳
40位 100〜200円で家で辛い雑炊が食べられてすごい - daiizの自由帳
41位 【GAE/Python 解決済】GAEでPILをimportするのに躓いて一日悩んだ話 - daiizの自由帳
42位 GitHubのリポジトリリストのグラデーション波が格好いい - daiizの自由帳
43位 ゼロから作る Deep Learning、をはじめる - daiizの自由帳
44位 レポート提出マシーン - daiizの自由帳
45位 Polymer Summit 2016 のCodelabをやっていく - daiizの自由帳
46位 Hello, Shadow DOM & Custom Elements! - daiizの自由帳
47位 daizの日記ブックマークランキング！！ - daiizの自由帳
48位 NaN - daiizの自由帳
49位 青軸キーボードを買った - daiizの自由帳
50位 ぱっと試せる環境は大切 - daiizの自由帳
51位 【TensorFlow】画像データをTFRecordファイルに詰める - daiizの自由帳

generated by 年間ブックマークランキングジェネレーター

累計ブックマーク数は昨年と比べて2.9倍となりました．ありがとうございます！！！

f:id:daiiz:20161229220643j:plain

メリークリスマス

LEGO

これはレゴシティ アドベントカレンダーの6 ~ 24日目の記事です．

レゴアドベントカレンダーが完成しました！！！

24日目の箱の窓からは，22日目と23日目に用意された犬ぞりに乗ったサンタクロースがやって来ました．1日目に登場したギターを弾く人が出迎えます．21日目のツリーと11日目の木をつなげると大きなクリスマスツリーができました．

ソリの後部にはプレゼントの袋が積まれています．クリスマスツリーの根本には20日目のプレゼントボックスが置かれています．

メリークリスマス！

メリークリスマスの関連記事

新機能

日記

これについて，あれからまた少し進化して，オプションページで複数のScrapboxのボックス名を登録できるようになった．スクリーンショット撮影時にボックス名を選択できる便利機能．

f:id:daiiz:20161224144555p:plain
オプションページでの設定の様子


f:id:daiiz:20161224144627p:plain
スクリーンショット撮影時にボックスを選んでいる様子


f:id:daiiz:20161224144704p:plain
「Capture」ボタンを押すとScrapboxページが作成される

SVG ScreenShot 開発版に Scrap to Scrapbox 機能を付けた

メモ Scrapbox tech

先日公開されたScrapboxのBookmarklet機能（URLパラメータbodyにページのコンテンツを渡すと，Scrapboxに新規ページを作成してくれるもの）が大変便利だったので，これをSVG ScreenShot 開発版から呼び出せるようにした．SVG ScreenShot Chrome拡張機能のオプションページで Scrapbox のプロジェクトid（ボックスid）を登録しておくだけで使える．

f:id:daiiz:20161222142621p:plain

普段通り，ウェブページ上でスクリーンショットを撮りたい部分を指定して撮影するだけでOK．撮影時には「Capture」ボタンではなくて「Scrap」ボタンを押すことでScrap to Scrapbox機能が使える．このボタンは従来の「Capture」と全く同じ動作（スクショを撮ってSVG ScreenShotのウェブアプリにアップロードする動作）をした後，Scrapbox の Bookmarklet で指定されていたURLにアクセスしてScrapboxのボックス内にページを生成する．Scrapbox上にページを作るために，下記の情報をURLパラメータに乗せて送信する．

  • ウェブページのタイトル
    • これをScrapboxページのタイトルにする
  • ウェブページのURL
  • SVG ScreenShot コンテンツのサムネイルのURL
    • https://svgscreenshot.appspot.com/c/x/****.png のようなやつ
    • このURLをScrapboxの画像記法 [] で挿入する

ページの閲覧者がSVG ScreenShot 拡張機能をインストールしている場合，Scrapboxページ内のSVG ScreenShotコンテンツのサムネイル画像をホバーすると，スクショ元のページのリンクを含んだSVGがオーバレイされる．これによりスクリーンショット内のリンクを踏んでその先のページにアクセスすることもできる．

https://i.gyazo.com/e82799b82501052ed6d84e01c6c5e087.gif

撮影してからページが作成されるまでの様子はこんな感じです．

https://i.gyazo.com/841927ab73a2b32f7ad580d296d1000d.gif

https://i.gyazo.com/30d080b08fcb35aba67c73bbcd5236c5.gif

Scrapboxのページ一覧にはこのように表示される．
f:id:daiiz:20161222150015p:plain

詳細はまた書きます．

関連記事

Retinaディスプレイでのchrome.tabs.captureVisibleTab

chrome 日記

MacBookのRetinaディスプレイなどの高解像度ディスプレイを使用していると，Chrome拡張機能のAPI chrome.tabs.captureVisibleTabで撮影されるタブのスクリーンショットの画像が縦横N倍のサイズになるらしい．Nの値はJavaScriptでwindow.devicePixelRatioの値として得られて，Retinaディスプレイの場合は2だった．自分で作って使っているSVG ScreenShotにおいて，スクショ範囲のリンク位置などを描画するSVGは等倍で取得できるが，その背景に表示するスクショ画像のサイズが大きくなってしまう問題で困っていた．具体的な状況としては，本来はこうなって欲しいシーンで，

f:id:daiiz:20161221233335p:plain

下の2つの画像を左上を基準に重ねたような，スケールがズレたものが得られてしまう． これだと背景画像が大きくて，リンク位置がずれてしまっている．

f:id:daiiz:20161221233208p:plain

f:id:daiiz:20161221233217p:plain

このように対処して解決した．

関連情報

日頃 MacBook Pro 使いの id:kanata_02 の報告によってこの問題に気付き，SVG ScreenShot の修正ができました．（だいぶ前の話になりましたが，）ありがとう！

以上， TeamJ Advent Calendar 2016 の21日目の記事をお送りしました．
今年も残すところあと10日ですね．

好きな色

お題「この色が好き」

好きな色です．

  • #e9e7e4

    • 最も好きな灰色です

  • #fff176

  • #558B2F

    • 緑部門です
    • 黄色と同じページで出会いました

  • #eb3338

    • 赤部門です
    • 最近お気に入りのウェブサービス Scrapbox の theme「M-Red」で出会いました

  • カラーコード不明

    • 水色部門です
    • 上高地で見た透き通った水面の色です．この色は感動的に美しいと思います．本物は写真よりもずっと綺麗でした．

f:id:daiiz:20161219175322j:plain

f:id:daiiz:20161219175326j:plain

以上， TeamJ Advent Calendar 2016 の19日目の記事をお送りしました．なんと今年も残り10日と少しなんですね．