kitak blog

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

THE INCAL を読んだ

読んだ。 DUNE で出会ったアレハンドロ・ホドロフスキーとメビウスが再びタッグを組んで作ったフレンチSFコミック。 街の一角のありふれた場面からビッグバンのように爆発して、宇宙を覆い尽くさんばかりに物語が膨らんでいく。読んでいて圧倒される作品。 …

Ethereum トークン (ERC20 Token Standard) の残高を取得する

8月頃にプレセールで買ったとあるトークンが最近発行されて、Etherscan や My Ether Wallet でトークンが発行されたことを確認したのだけど、自分用の Wallet App を作ってみたくなったので、プログラムからトークンの残高を取得する方法を調べてみた。 web3…

vue-router で初期表示後に、どのルートで解決されたか知りたい

初期ナビゲーションが終わった後のルーターオブジェクトにアクセスすればよい。onReady と currentRoute のコンボでいける。 router.onReady(() => { router.currentRoute; }); vue-router ひと通りドキュメントに目を通していたつもりだったのですが、ひさ…

Webpack を使っていてファイルの相対パスを書くのがつらくなったとき

小ネタ。 Webpack(というよりモジュールバンドラ) を使っていて、ディレクトリの階層が深くなってくると import や require でロードするファイルのパスを ../../../../foo.js のように ../ の数を正確に指定するゲームになってくる。 以下のように書くこと…

Vue で配列を使った算出プロパティの値が変わらないとき

1回ハマったら体が覚えて、次回から気を付けるようになるのだけど、記事にしておく。 例えば、以下のように配列をスタックとして使い、トップを算出プロパティで定義したとき。1秒後にトップの id が 100 になると思いきやそうはならない。Vue は push, pop,…

vue-router でパスにマッチしたコンポーネントの Vue インスタンスにアクセスする

タイトルが長い。 お仕事で vue-router 絡みのプラグインを書いていてアクセスしたくなった。 VueRouter のインスタンスが router として、以下のようにプロパティを参照することでできる。 router.currentRoute.matched[0].instances['default'] あくまで内…

ServiceWorker で、ネットワークから取得しようして失敗したらキャッシュにフォールバックするやつ

ここ最近、ServiceWorker を使って色々試しているのだけど、その中のひとつ。 以下の内容を、エントリーの HTML や参照系の API に適用して、アプリケーションのオフライン対応を実現する。通常はネットワークから取得した最新の内容を使うが、オフラインや…

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 さんに「話しませんか?」と声をかけていただいたのがきっかけ…