はてなブックマーク

タイトルはオマージュです。 はてなブックマークのコメント（簡易）閲覧専用のFirefoxブラウザ拡張を公開しました。 gyazo.com 先日 公式な新しいはてなブックマーク拡張 が公開されました。その告知を読んでいて知ったのですが、Firefoxではブクマ拡張が新規インストールできなくなっているようです。 さっとブコメ見たいときってやっぱりあると思うので作ってみました。簡易版なので公式から閲覧用の拡張が公開されるまでのつなぎとしてご利用ください。 addons.mozilla.org 機能 情報の取得には はてなブックマークエントリー情報取得API を利用しています。 ブックマークの表示順は新着順のみ ログイン機能なし なのでマイブックマークからの検索などはないです スターなし のシンプルなものです。 あとタグの表示の実装を忘れていて今は表示できていないです。使う人がいれば追加するかも。

どうもこんにちは、今日は便利な Chrome 拡張のご紹介です。 これは GitHub 上の issue link （#666 とかっていうやつ）を情報量の多い、見やすいバッジに変換してくれる拡張です。 親イシューにいくつかイシューをまとめて管理したいときに、イシューの状態（open/close や assignee ）が一目でわかってとても便利。 Chrome 拡張の permission の関係で GitHub 用と GitHub Enterprise 用の二つをご用意しております GitHub Issue Badges - Chrome ウェブストア permission が https://github.com のみ GitHub Issue Badges (for Enterprise) - Chrome ウェブストア permission が https://*/* になってい

はてなでアプリケーションエンジニアをしている id:hatz48 です。この記事は はてなデベロッパーアドベントカレンダー の 13 日目です。 昨日は id:dekokun による dekotech.dekokun.info でした。私は去年は developer.hatenastaff.com こんな記事を書いていました。 今年は、はてなのサービス開発合宿で TypeScript のみを使ってアプリケーション開発をした話をします。 はてなのサービス開発合宿 はてなのサービス開発合宿については はてなスタッフアドベントカレンダー一日目で紹介されています。三日間、いつもとは違うチームで、通常業務から離れ、集中して開発するというものです。 開発自体は、実は三日間で完成はしなかったのでいまでも隙間の時間で開発を続けています。とある社内システムに、ちゃんとしたアクセス制御をいれて実装しなおそうと

async/await は ES7 の機能で、非同期処理を記述する上で非常に便利な機能である（仕様は安定していないと思う） まだ実装している処理系はないと思うが、babel などの transpiler をつかうと利用できる async/await をつかうと非同期処理を以下のように書くことができる function a() { return new Promise(function(resolve, reject) { setTimeout(function() { resolve('hello, ') }, 0) }) } async function b() { var value = await a() return value + 'world' } async function c() { var value = await b() console.log(value) ret

Golang の勉強がてらちょっとしたツールを作ろうと思って、まず websocket サーバーを書いてみた。 書いてみたと言っても go の websocket chat は golang-samples/websocket · GitHub ここにサンプルがあって、これをそのまま使っても良かったのだけれどいくつか気になったのでよりシンプルに書き直してみた。 hatz48/go-websocket-sample · GitHub 気になったのは二つあって、一個は client id が競合しそうに見えた点。 https://github.com/golang-samples/websocket/blob/master/websocket-chat/src/chat/client.go#L35 ここで maxId をインクリメントしている. この NewClient 関数は https:/

chrome 拡張は普通にインストールすると、シークレットモードで有効になっていない。 有効にするには拡張機能(chrome://extensions)から、「シークレットモードでの実行を許可する」にチェックを入れればよいのだけど、自分で書いた拡張をこれで有効にして実行したら以下のようなエラーが出た Unchecked runtime.lastError while running tabs.executeScript: Cannot access a chrome:// URL at ... 試しにシークレットウィンドウから chrome://... の URL(拡張機能の js ファイル) にアクセスしても、禁止されていてみることができない。 シークレットモードからは executeScript することが出来ないのかなーと思って調べてみた Overview - Google Chro

前回 xhr で画像をダウンロードして zip するコードを書いた。せっかくなので拡張にしてみた。 imazip 使い方 上の拡張をインストールすると、URLバーの横に こういうボタンがでるので、画像をダウンロードしたいページでそれを押す。 押すと、マウスオーバーした html 要素がふわっとハイライトされるようになる。 これだと選択した要素内に画像がないので空の zip になってしまう こんな感じに選択されればオッケー。 クリックすると、その要素内の画像が zip してダウンロードされる。 実装 chrome 拡張内で実行されるコードはページをブロックしないので、重い処理は拡張内のコードで実行してあげればよい。 ページ内からダウンロードしたい画像のURLを抽出する 拡張のコードで、画像を取得・zip (ここは前回と同じ) zip をローカルにダウンロードする けど拡張からページの doc

クロスドメイン制約がない状況で、Web ページ内に表示されている画像を一括で zip してダウンロードしたいみたいな欲求ありませんか。私にはありました。 ありがたいことに jsZip というライブラリがあり、これを使えば JavaScript で zip ファイルを作成することができます。手順としては以下のような感じでしょうか ダウンロードしたい画像の url 一覧を作る 画像をすべてダウンロード 完了したら画像データを jsZip で zip する zip したものを blob にして、ダウンロード用のリンクを作る ご存知のようにブラウザの JavaScript はシングルスレッドで動作しており、JavaScript で時間のかかる処理を行うとユーザーの操作がブロックされます。jsZip による zip 処理もファイル数が少ないうちはいいのですが、ファイル数が増えてくると結構時間がかかっ

クライアントで少しリッチなアプリが作れるようになりたいと思って、 chrome 拡張 で 2ch ブラウザを作ってみた。 nichrome 開発周り Chrome 拡張は js/css/html での開発になるので、それぞれ TypeScript/less/underscore-template を Grunt でビルドするようにした。 サーバーサイドはないので、デプロイツール等はなし。 Grunt では本当はテストも走らせる予定だったのだが、まだテストが書いてない。。 クライアントサイドMVC Backbone.js を使っていたのだけれど、いつくつかの理由から何も使わずに MVC(P?) っぽくかいてみることにした。基本的はに Backbone.js のやり方をまねて、Model の役割を一部サービスクラスに分離した感じ。 Service層導入の経緯 Backbone はいろんな書き方

最近、あまり買い物上手ではないことに気がついた。 何かを買う際にネットでよく調べてから買うのだけれど、それでもいまいちな結果になることが多い。 どうも、スペックと価格ばかりを気にしてしまうのが良くないらしい。 スペック上の数値が良くてもトータルの仕上がりは別物だったりするし、安い品にはやはり安い理由があるようだ。 ここ数年で失敗してしまった（自分には合わなかった）買い物と、そんな中でも買ってよかったものを紹介。 失敗した・自分には合わなかった 😢 失敗だった買い物。 商品が悪かったものもあるが、良く考えず買った結果自分には合わなかっただけのものもある。 有機ELのテレビ 2018年くらいに購入した某海外メーカーの有機ELテレビ。 とくべつ有機ELのテレビが欲しかったわけではないのだけれど、家電量販店のテレビコーナーで見比べたらやっぱり有機ELのものが綺麗に見えた。黒が、黒い。 有機ELは

id:hitode909 さんからバトンが回ってきたので、TypeScript いいよね、っていう話をする。 TypeScript TypeScript は C# を作ってる人が作ってるという altJS 。言語の特徴とかは wikipedia 、勉強するときは TypeScript クイックガイド を見るのが良いと思う。JavaScript 書ける人にとっては学習コストは比較的低めと思う。 簡単にいうと ECMAScript 6 を一部先取りして型アノテーションをプラスしたもの。自分が altJS 選ぶ時に基準にしたのが以下の二つで 静的な型チェックがある 導入・離脱が容易 この二つの要求にもっとも合致するのが TypeScript だった。特に後者は「プログラミング言語」として語られると軽視されがちだけど実用上とても重要だと思う。 静的な型チェックのうれしさ 特に説明しなくてもいいかも

jQuery のプラグインを書くお作法みたいのがあって、だいたいどのプラグインも以下のように書かれている (function($) { $.fn.myPlugin = function() { ... }; }) (jQuery); これTypeScriptで書こうと思ったらこんな感じになった。 /// <reference path="path/to/jquery.d.ts" /> module jQuery { var $:JQueryStatic = <JQueryStatic>jQuery; $.fn.myPlugin = function() { ... }; } jQuery モジュールを定義すると外側の即時関数は大体同じにコンパイルされる。 ただしこうすると jquery.d.ts の jQuery の定義を上書きしてしまうらしいので、$ に型アノテーション付きで jQuer

株式会社はてなに入社しました！ ３月で前職を退職して、４月から株式会社はてなで働く事になりました。 金曜日に初期研修を終えて一息つくことができたので今回の転職について少しまとめようかとおもいます。 きっかけ あ、ありのまま起こったことを話すぜ「俺は、はてブのホッテントリを毎日眺めていたら、いつのまにかはてなスタッフになっていた」何を言っているのか(ry 前職はいわゆるSIerで、社内の開発支援を行う部署に所属していました。大学の修士課程でソフトウェア工学を学んでいたこともあり、ソフトウェア開発を効率化する仕事に意義は感じていたのですが、もっと多くの人を楽しませるサービス開発をしたいという気持ちから、（勝手ながら）転職を考えるようになりました。 転職するのはそれなりにエネルギーを使いますし、どうせなら自分が面白いと思うサービスの開発がしたいと思っていました。そんなおりに（たぶん2011年の夏