kitak blog

Kみたいなエンジニアになりたいブログ

puppeteer で Speed Index を算出

puppeteer という Headless Chrome を Node から操作する API が今日発表されたので、以前、記事を書いた WebPagetest を使わずに Speed Index を算出する - kitak blog を puppeteer でやってみた。 puppeteer の良さ Chrome Developer Tools の開発チーム…

DOM 要素が可視状態か調べる

小ネタ。 要素が可視状態かどうか調べたくなって、そういや jQuery に :visible ってセレクタがあったな、と思い出し、おもむろにコードを読んでみた。 結論、こんなかんじで調べることができる( jquery/hiddenVisibleSelectors.js at 2d4f53416e5f74fa98e0c…

Vue.js の scoped slot の理解

毎回混乱して、ドキュメントを読んでいるのでまとめ。 以下のようなスロットの機能を利用したコンポーネント child で考える。 <div> {{ foo }} <child> <span>{{ bar }}</span> </child> {{ baz }} </div> https://jp.vuejs.org/v2/guide/components.html#コンパイルスコープ に書いてある話ですが…

プロフェッショナル 仕事の流儀「天職は、生涯かけて全うせよ~うなぎ職人・金本兼次郎」を見た

土用の丑の時期だからか、NHK オンデマンドのおすすめに出ていたので見た。 江戸時代からの鰻の老舗「野田岩」の五代目 金本兼次郎さんを取り上げている。 http://www.nhk-ondemand.jp/goods/G2013050750SA000/?capid=sns002 個人的に刺さった部分。 常日頃…

now での bot の 24 時間運用

最近、bot を now で運用しているのでメモ。 PaaS の free plan というと、一定時間アクセスがないと sleep したり、24時間連続で動かすことができないものが多く、bot を 24 時間稼働させるためにあの手この手を使って、中々苦労する印象がありますが、now …

最近 2017年7月

一年前に書いたブログ( これからの1日の過ごし方 - kitak blog )がスターされて、「この記事を書いてから一年か。そういえば今年も半分が終わったな」と思ったので、適当に最近あったことを書いておきます。 最近の1日の過ごし方 ここ最近は これからの1日の…

Kotlin の JavaScript サポートを試す

Kotlin 1.1 で JavaScript がサポートされたので、Your first Node.js app with Kotlin – Miquel Beltran – Medium を読みながら試してみました。仕事で JavaScript ばかり書いている背景があるので、気分転換で一見 JavaScript っぽくない別言語 で Node で…

シンプルな PaaS 「Now」で Go で書いたアプリのデプロイを試した

けっこう前に存在を知ったんですが、全然触っていなかったので試してみました。 Now 自体の説明は、公式サイト( Now – Realtime global deployments )や中の人の翻訳( http://qiita.com/nkzawa/items/8bf62549f79ebbcaafd8 )を読むのがいいと思います。 Now …

デヴィッド・リンチ監督作品 ストレイト・ストーリー を観た

観た。脳卒中で倒れた兄に会いにトラクターで560kmを移動したアルヴィン・ストレイトというおじいさんの実話を基に作られた映画。 ストレイト・ストーリー リストア版 [Blu-ray]出版社/メーカー: パラマウント ホーム エンタテインメント ジャパン発売日: 20…

雪花の虎 を読んだ

読んだ。 雪花の虎 4 (ビッグコミックススペシャル)作者: 東村アキコ出版社/メーカー: 小学館発売日: 2017/01/12メディア: コミックこの商品を含むブログ (1件) を見る 上杉謙信が女性だったら、そんな大胆な仮説に基いて書かれた漫画。登場する資料だけでは…

RxJS を使って、Vuex のようなものを書いた

散歩していたときにふと思いついたので書いてみた。 Vuex のゲッター、Vue の算出プロパティの実装は Observer パターンが適用されているので、Observer パターンが根底にある Rx で上手く実装できるんじゃないかな、という思いつきだったんですが、思いの外…

かくかくしかじか を読んだ

読んだ。 かくかくしかじか 5 (マーガレットコミックスDIGITAL)作者: 東村アキコ出版社/メーカー: 集英社発売日: 2015/06/25メディア: Kindle版この商品を含むブログ (7件) を見る 東京タラレバ娘、海月姫の東村アキコの伝記的な漫画。高校時代から始まり、…

Vue.js のリストレンダリング( Virtual DOM 実装 )と相性の悪いデータの変更

この間、現場で直面したやつの個人的なメモです。対象のバージョンはこの記事を書いている時の最新バージョン v2.3.0。 以下のようなリストレンダリングをおこなうコンポーネントがあるとして、 <script> export default { name: 'list', data() { return { items: [</script>…

ウェブアプリのパフォーマンスに対する共通の捉え方を持つ

最近、一緒に仕事をしている企画者に「ブラウザAでページBを開いたら重かったです」と言われたことがあって、そのときに思ったこと。 「重かったです」と言ってくるということは何か良からぬことが起きている気がするけれど、それだけだと何が起きているのか…

date-fns に乗り換えて、スクリプトのファイルサイズを削減した

題の通り。 Browserify を使ったプロジェクトでファイルサイズを大きくしているライブラリを探す - kitak.blog で moment がけっこうな割合を占めているということを書いたのだけど、少し前に moment から date-fns に乗り換えて、ファイルサイズを削減でき…

誰が音楽をタダにした? を読んだ

読んだ。 mp3 が世の中に普及して音楽業界を変えるに至った話をストーリー仕立てでまとめた一冊。 mp3 を生み出した研究者、音楽業界、「シーン」と呼ばれるインターネットの地下コミュニティ、この3つの糸が絡み合いながら、物語が進行していく。自分にとっ…

ルパート・サンダース監督 Ghost in the Shell を観た

今日の午前中に、渋谷の TOHO シネマズで観た。 都市や街並みの映像が良かった。単純にきれいだし、アニメ映画版、イノセンスと続く、ブレードランナーの DNA の系譜を継いでいるように感じた。 また、ひとつひとつのシーンの撮り方や、各所に散りばめられた…

Vue.js v2 で揮発性の現象を扱う(ダイアログ等を実装する)

同僚に題の相談を受けていたんですが、そのときに「あんまりこの話、ググっても見かけないね」という話になったのでブログに書いておきます。 SPA でダイアログを実装する機会があると思うんですが、よくある事前にコンポーネントツリーのルート直下にダイア…

逃げるは恥だが役に立つ ( 9 ) を読んだ

最終巻を読んだ。 逃げるは恥だが役に立つ(9) (Kissコミックス)作者: 海野つなみ出版社/メーカー: 講談社発売日: 2017/03/13メディア: Kindle版この商品を含むブログ (3件) を見る 最終巻の見どころは、百合ちゃんがポジティブモンスターに「呪い」に…

BroadcastChannel API を使ってみた

BroadcastChannel API を使ってみた。 同一オリジンのタブ・ウィンドウ・フレーム間でデータを送受信できる API。API の詳しい説明は BroadcastChannel API: A Message Bus for the Web | Web | Google Developers に譲ります。コードは、パッと見、Cross-Do…

Vue v1.x から v2.x へアップデートした

Vue v1.0.15 から最新の v2.2.4 へアップデートしたのでメモ。かかった時間は2日程度だった(ついでにやった Browserify から Webpack への移行も含む)。 全体を通して、内部実装は大きく変わったが API 自体は v1 とある程度互換性があるので、vue-migration…

デヴィッド・リンチ監督作品 Twin Peaks: Fire Walk With Me を見た

Twin Peaks: Fire Walk With Me (邦題: ツイン・ピークス ローラ・パーマー最期の7日間)を見た。 ツイン・ピークス/ローラー・パーマー最期の7日間 デイヴィッド・リンチ リストア版 [Blu-ray]出版社/メーカー: パラマウント ホーム エンタテインメント ジ…

Vue.js Tokyo v-meetup="#3" で発表しました

発表しました。 vuejs-meetup.connpass.com 発表 去年の Vue.js Advent Calendar で書いた記事( Vue.js 2.0 の算出プロパティ周辺のコードリーディング - kitak.blog )の内容について、@kazupon さんに「話しませんか?」と声をかけていただいたのがきっかけ…

ドラマ版 ツイン・ピークス を見た

デヴィッド・リンチの作品を何か見たいな、ということで、5月から続編が始まるツイン・ピークスを見た。 ドラマの放送は自分がちょうど生まれた頃にやっていて、小学生の頃、軽部アナがめざましテレビで映画版を紹介しているのを見た記憶がぼんやりとある。…

Vuex でのエラーの扱いについての個人的な考え

最新の dex.fm — Development at Mercari US で、Redux でのエラーの扱いについての言及があって、自分は Vuex (Redux インスパイアな Vue の状態管理ライブラリ)でどうやっていたっけな、というのを文章で簡単に書いておきます。あくまで個人の考えです。 …

デヴィッド・リンチ監督作品 マルホランド・ドライブ を見た

見た。 マルホランド・ドライブ [DVD]出版社/メーカー: ポニーキャニオン発売日: 2002/08/21メディア: DVD購入: 2人 クリック: 128回この商品を含むブログ (278件) を見る デヴィッド・リンチの映画を見たことがなくて、色々な人におすすめを聞いたら、全員…

最近読んだ本 2017/02

大きな魚をつかまえよう―リンチ流アート・ライフ∞瞑想レッスン作者: デイヴィッドリンチ,David Lynch,草坂虹恵出版社/メーカー: 四月社発売日: 2012/04メディア: 単行本購入: 1人 クリック: 12回この商品を含むブログ (8件) を見る レッスンというより、デヴ…

Visual Studio Code で使っているプラグイン 2017/02

バンバン入れて、後で「おれ、これなんでいれたんだっけ…?」となりがちなのでメモ。基本的にプラグインあんまり入れない派です。 File Peek File Peek - Visual Studio Marketplace require/import しているファイルの内容をちょっと確認したり、修正すると…

Browserify が生成したファイルを webpack で扱おうとしてハマった

webpack で Browserify で生成されたファイル( shim library )を import して生成されたファイルを実行したら、require を呼び出しているところで実行時エラーになった。 ファイルに require が含まれていて、それを webpack がパース(依存関係を解決)しよう…

WHYから始めよ! を読んだ

読んだ。 WHYから始めよ!―インスパイア型リーダーはここが違う作者: サイモン・シネック,栗木さつき出版社/メーカー: 日本経済新聞出版社発売日: 2012/01/25メディア: 単行本購入: 1人 クリック: 31回この商品を含むブログ (8件) を見る Why から始め、…

VISA デビットカードを使ったら口座残高が通知されるようにした

VISA デビットカードを使ったら口座残高が通知されるようにしたので、個人の技術的な備忘録。 三菱東京UFJダイレクトのページの操作を自動化して、口座残高を調べる - kitak.blog の続きにあたります。ざっくりこんなかんじです。 (あらかじめ、VISA デビッ…

MPEG-2 TS の PCR のメモ

MPEG-2 TS パケットのヘッダーをパースするプログラムを読んでいたら、PCR というキーワードがでてきたので調べた。個人的なメモ。 PCR の説明は デジタル映像の「アーカイブ&デリバリー」に関する技術情報サイト|mpeg.co.jp > VIDEO-ITを取り巻く市場と技…

回転寿司酒場 銀座沼津港 に行ってきた

Bitcoin長者のわっかむさん( @yuma300 )と愉快な仲間たちで行ってきました。 回転寿司酒場 銀座沼津港ジャンル:回転寿司住所: 中央区銀座1-8-19 キラリトギンザ 8Fこのお店を含むブログを見る(写真提供:早瀬あゆき) 銀座なのに沼津港? このお店、Bitcoin…

三菱東京UFJダイレクトのページの操作を自動化して、口座残高を調べる

家計簿アプリ自給自足の一環。今日はブラウザ操作を自動化して、口座残高を調べます。VISA デビッドをつかったらメールが来るように設定しているので、最終的にそれをハンドリングして、口座残高を LINE とかに通知したい。 こんなかんじの Python のスクリ…

Google Cloud Vision API の OCR 機能でレシートを読んでみる

題の通り。 趣味で家計簿アプリをちまちま作っているんですが、レシートを読んで支払った金額を入力する機能が実装できるかどうか検証するために触ってみました。事前に GCP Console でプロジェクトを作ったり、API キーを発行しておきます。 コードはこんな…

Create Your Own Programming Language を読んだ

Create Your Own Programming Language を読んだ。 どこかで、CoffeeScript の作者はこの本がきっかけで CoffeeScript を作った、と紹介されていて気になっていた。 この本では、言語処理系について学びながら、Python と Ruby を足して2で割ったような Awes…

VISA デビットカードを作った

自分のクレジットカードを使うことに対する感覚が少し麻痺している気がするのと、月単位での買い物の内容を分析しやすくするために VISA デビットカードを作って使うことにした。 個人的に、インターネットで買い物ができるのであれば、特別クレジットカード…

応天の門 を読んだ

読んだ。 応天の門 1巻 (バンチコミックス)作者: 灰原薬出版社/メーカー: 新潮社発売日: 2014/11/21メディア: Kindle版この商品を含むブログを見る 在原業平と菅原道真のコンビが怪事件を解決していくサスペンス物。在原業平が持ってきた事件を菅原道真がロ…

年末年始の休暇中に読んだ本

炬燵に入り、みかんを摘みながら読んだ。 サピエンス全史(上)文明の構造と人類の幸福作者: ユヴァル・ノア・ハラリ,柴田裕之出版社/メーカー: 河出書房新社発売日: 2016/09/08メディア: 単行本この商品を含むブログ (15件) を見る サピエンス全史(下)文明の…

TypeScript で書いている Node.js サーバーをファイルが変更されたときに自動で再起動したい

題の通り。 TypeScript に慣れるために、TypeScript でちょっとした Node.js サーバーを書いていたときのメモ。 GitHub - TypeStrong/ts-node: TypeScript execution environment for node で TypeScript のコードを直接 Node.js で動かすことができるのだけ…

ふしぎの国のバード を読んだ

読んだ。 (ビームコミックス(ハルタ))" title="ふしぎの国のバード 1巻 (ビームコミックス(ハルタ))">ふしぎの国のバード 1巻 (ビームコミックス(ハルタ))作者: 佐々大河出版社/メーカー: KADOKAWA / エンターブレイン発売日: 2015/05/15メディア: Kin…

2016年のふりかえり

今年も残すところあと少し。今年のふりかえりです。 去年のふりかえりはこれです。 2015年のふりかえり - kitak.blog 仕事 去年に続き、ウェブフロントエンド中心に JavaScript のコーディングなど。サービスや大きめの機能をいくつかリリースできたのと、そ…

2016年に使った&来年使いそうな JavaScript 関連のものと所感

2016年に使った&来年使いそうな JavaScript 関連のもの 以下のカテゴリでなんとなく書いてみます。去年と比べて大きく変わらないかんじです。動きの早かった 2, 3年前から、年々、動きはゆっくりになってきているというのが個人的な印象。 トランスパイラ ビ…

WebPagetest を使わずに Speed Index を算出する

題の通り。 WebPagetest を使うと、Speed Index というページのコンテンツがいかに速くレンダリングされたかの総合的なスコアが算出できます。Speed Index は、定期的にこのブログで取り上げていますが、算出方法の内容は https://github.com/t32k/webpagete…

JavaScript のサイズを減らすことと効率良くキャッシュさせるためのメモ

題について、頭に浮かんだ考えや、手を動かして試したことのメモ。試行錯誤中なので、都度追記するか、そのときの考えを別途書く。 背景 モジュールバンドラに Browserify や Webpack を利用して一枚岩の bundle.js を生成している 機能追加を繰り返したこと…

Vue.js 2.0 の算出プロパティ周辺のコードリーディング

この記事は Vue.js Advent Calendar 2016 の21日目です。 https://skyronic.com/blog/vuejs-internals-computed-properties の記事に算出プロパティのミニマムな実装例が示されているのですが、実際に Vue のコードでどのように実装されているか調べました(…

Dev Morning の幹事を引き継ぎました

Dev Morning という朝活イベントに常連として参加しているんですが、幹事をされていた @tejitak さんが起業してタイに移住されるので、幹事を引き継ぎました。 今後は iOS エンジニアの @shingt さんと共同で幹事を行います。 Dev Morning って? 渋谷周辺の…

vue-templatify という Browserify プラグインを作った

2016/2/1 追記: 単一ファイルコンポーネントでも、JSとテンプレートを分けて書くこと自体はできるので(refs: https://jp.vuejs.org/v2/guide/single-file-components.html#関心の分離について)、このプラグインは基本的に不要かもしれません。 作った。 gith…

上品で心地よい一杯 - 金色不如帰

大きな仕事が終わったので、有休をとった。特に予定もないので、来年のオフィス移転に合わせた引っ越し先の検討がてら、ラーメンの人気店にいくことに。 来年からオフィスは新宿になる。検討している引っ越し先のひとつが京王新線の初台、幡ヶ谷あたり。その…

Hammerspoon と Karabiner Elements でキーカスタマイズした

新しいMacBook Proが届いたんだけど、Karabiner(旧 KeyRemapForMacBook)が動かない。そこで、Karabiner 使えない対策: Hammerspoon で macOS の修飾キーつきホットキーのキーリマップを実現する - Qiitaを参考にしながら、以前のMacBookでおこなっていた「Vi…