JavaScript 長いループ 分割 - hitode909の日記
ブラウザで長いループや、重い処理をともなうループを回したいとき、同期的にJavaScriptを実行するとメインスレッドがブロックしてしまうので、ちょっとずつ細切れに分割して実行したい、ということがある。 昨日久しぶりに書いたら新たなパターンと出会ったので、これまでにどう書いてて今回どうなったかメモ。 setTimeoutする 以前(10年前とか)はこんなのをよく書いていた。 itemsがでかいArrayで、console.logがすごく重い処理だとして読んでください。 function iterateHeavyTask(items) { const startAt = new Date(); while (items.length > 0 && new Date().getTime() - startAt < 10) { console.log(items.shift()); } if (
TypeScript Compiler APIとmdn-browser-compat-dataとbrowserslistを使ってサポートされていない呼び出しを見つける - hitode909の日記
IE11で動かしたいコードでelement.prepend()してたら怒ってほしい ライブラリを使っていたらブラウザ間の差異を気にする必要があまりないけど、最近開発しているプロダクトではDOMのAPIを直接触っているので、このメソッドIEにもあるんだっけ、呼んでいいんだっけ、というのをレビューで確認したりしていて苦労していた。 過去にうっかり呼んでしまったメソッドについてはpolyfillが入っていたりして、appendのpolyfillは入ってるけどprependのpolyfillは入っていないためにIE11でエラーになる、ということが起き得る。 ブラウザ間の差異をlintしてくれるグッズとして、eslint-plugin-compatというeslint pluginがあって、fetch使えませんよ、とか発見してエラーとして報告してくれる。 便利なのだけど、たとえばelement.pre
Slackでの質問にScrapboxで答える - hitode909の日記
Slackやissueで質問がきたら Scrapboxで検索して みつかったらページを案内 みつからなかったらその場でページを書いて案内 さらに疑問点とかあったらScrapboxを見ながら話して、その場で書いていく と言うことをよくやっている。 この動きを続けるとトラブルシュートしてるだけで知識がストックになっていって便利なはず。 聞かれた質問をそのままページにするのではなくて、タイトルは一般的な単語で書くようにしている。「アクセスログはどこにでていますか?」じゃなくて「アクセスログ」のページで、ログの在り処を説明する。そうすると他のページからもリンクしやすい。 逆に、一人だけが持ってる情報をみつけたら、ページだけ作って、ページを作ったので説明を書いてもらえませんか、というお願いをしたりしている。#誰か書いて というタグをつけておくと、書きたい人が書いてくれる、というのを試したりしている。
社内横断で開発効率を上げる取り組み #pepabohatena - hitode909の日記
プレゼンモード 再生 ← / →で移動 fでフルスクリーン escでおわる こんにちは，id:hitode909です．はてな・ペパボ技術大会 #4 〜DevOps〜 @京都において，「社内横断で開発効率を上げる取り組み」というお題で発表しています．この記事は，その発表資料です． 社内横断で開発効率を上げる取り組み はてな・ペパボ技術大会 #4 〜DevOps〜 @京都 hitode909 自己紹介 hitode909 株式会社はてな アプリケーションエンジニア 好きな本はオブジェクト指向入門とドメイン駆動設計 2009年〜 うごメモチーム 2012年〜 ブログチーム 2017年〜 マンガチーム 2018年〜 CTO室(兼務) アジェンダ CTO室での活動 特定のチームに閉じず，社内横断で開発効率を上げるための試み みなさん 学生の方? 🙌 社会人の方? 🙌 Devの方? 🙌 Opsの
Upgrade-Insecure-Requestsを使ってmixed-contentをだいたい直す - hitode909の日記
ブログをHTTPS化するとHTTPのリソースは読み込めなくなってしまう． http://example.com あらため https://example.com/ みたいにドメインはそのままでhttpからhttpsに置換するだけでアクセスできるなら，Upgrade-Insecure-Requestsを使うと簡単． 詳細設定→headに要素を追加 に以下を貼れば完成する． <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 対応しているブラウザで，かつサイト側がHTTPSでの通信を受け付けていたら，HTTPへのリクエストをHTTPSに書き換えてくれる． IEやedgeは対応していないので，IEやedgeでも見てる人が多いブログなら，手で記事内のURLを書き換えたほうが，手間なかわりに喜
Web API: The Good Parts 読んだ - hitode909の日記
よいAPIの作り方を教えてくれる本． たとえばcollectionを返したいときに，[ ]としてArrayで返すのか，{ collection: [ ] }みたいにObjectに入れるのか，悩んでたけど，この本読むと，どっちがいいか分かる． API作ってると，細かいところでちまちま悩むので，良い習慣が紹介されてて良い． TwitterとかGitHubのAPIとかではこうなってる，とか実例がたくさんあるのもよい．たしかに悩んだらそのへんのよさそうなAPIを真似して決めると楽そう． API作りたい人は読んでおくと役立ちそう． Web API: The Good Parts 作者: 水野貴明出版社/メーカー: オライリージャパン発売日: 2014/11/21メディア: 大型本この商品を含むブログ (1件) を見る
失敗する前提でデプロイする - hitode909の日記
うちのチームでは，デプロイするたびに自動的にgitのtagを切るようにしてる．たとえば，いまデプロイしたら，deploy/2014-02-01-14-48とか． たまに，リリースした直後になんかミスってたことに気付いて，慌ててロールバックすることがある． tagを切ってるので，ひとつ前に戻せばいいのだけど，えっと，どれだっけとかいって探すので慌てるし，普段はタグ指定してデプロイしてないので，どうやって戻すか忘れる． デプロイ終わったときに，今回のデプロイを戻すには，これをしましょう，とか表示するようにした． デプロイ終わったらこんなのが出る．前回のデプロイが昨日だったら昨日くらいのタグが出る． ヒント：戻すときは以下のコマンドを実行しましょう cap -S revision=deploy/2014-01-31-15-17 deploy 実装方法としては，こんな感じに，デプロイ前に最新のタグ
コードレビュー - hitode909の日記
コードレビュー，慣れるとできるけど，いきなりdiffを渡されて，どうぞ見てくださいと言われてもよくわからないと思う． やりましょうというのはいいけど，ただむやみに読んでもうまくいかない．変更がある程度大きくなるとdiffだけ見てもよくわからないので，いろいろ見ることになる． 僕はいつも以下のようなことを無意識にやってて，うまくいってる気がしてる．GitHubのPull Requestの仕組みを使ってる前提で． Discussionをさらっと眺めてどういう問題を解決したいのか見る Commit Statusを見て，テスト通ってることを確認する Commitsタブで1コミットずつブラウザの新しいタブに開く 全部クリックし終わったら古い順に1コミットずつ読む 気になる点があったらエディタとかにメモしておく．あとで書き直されるかもしれないので，まだコメントしない 全コミット見終わったらFiles
■ - hitode909の日記
年越しだから新福菜館でラーメン食べた．チャーハンも食べたところ，チャーハンおいしかったけど，食べすぎた．おいしいとは思う．おいしいけど，食べすぎるというのはよくない． View this post on Instagram A post shared by 趣味はマリンスポーツです (@hitode909) www.instagram.com しかしながら，年末感というか，プレミアム感を出すために，普段はラーメン食べてるのに，チャーハンも追加するというのは，ベネフィット感があると主張したとして，誰かれも怒られることはないと思う．しかし，そもそも，たくさん食べればめでたいという価値観は，戦後にチューイングガム大量に噛むと甘みが増すとか言ってる時期で卒業すべきであって，このようなグローバルオポチュニティー世紀である21世紀に，世界中が貴重な資源を取り合いオポチュニティーな感じがあるのに，そうや
【はてなスタッフ非公式ブログバトン】CoffeeScriptについて - hitode909の日記
12月なので，今日から，ブログバトンを始めることにしました． CoffeeScriptについて 最近ちょっとCoffeeScriptを書いたりしていて，チーム内にシェアしたところ，うーんみたいな感じで，あんまり使ったこない人もいそうだったので，まとめておきたいと思います． 経緯 僕はCoffeeScript2011年くらいから使ってて，遊びで書くのは全部CoffeeScriptで書いてる． 仕事では，アプリケーション本体じゃなくて，業務上使う便利ツールなどは，CoffeeScriptで書いてる． CoffeeScript導入のメリットについて． 些細なミスが減る CoffeeScriptでは，JSの構文上の微妙に気をつけるべきところがだいたい解消されている． たとえば，Objectを適当に書いておくと，コンパイル後には最後のカンマだけ自動的に除かれるので，書くときに，ここにカンマがあるとI
Taberarelooがはてなブログに対応 - hitode909の日記
Taberarelooという，Google ChromeからTumblrなどに簡単に投稿できるChrome拡張があるのだけど，このたび，Taberarelooからはてなブログに投稿できるようになった． こんな感じの，ネットで見つけた何かを引用して，それに感想を書く，みたいなエントリが簡単に書ける． こういう記事を投稿できる 使い方 Taberarelooのオプション画面，「ポスト関連」の下のほうに，「はてなブログ」という項目が追加された．これを有効にして，「取得」を押すと，自分の持ってるブログの一覧が出る． 設定画面から有効にする 設定が済んだら，Taberarelooから投稿できる．投稿先のアイコンが並んでるところで，下のほうにブログのアイコンが出てくるので，投稿したいブログを選ぶと，選んだブログに投稿される． 投稿先にブログを選べる ネットでおもしろいものを見つけたときにブログで紹介し
CasperJSで気軽にJSのテストできる - hitode909の日記
ウェブアプリケーションのJSのテストするのにCasperJS使ったら便利だった． CasperJSはPhantomJSにテスト用ユーティリティがついて便利になったやつ． JS，MVCできれいに書いてると，Modelの単体テストとかできるけど，昔ながらの感じだと，ここをクリックしたらこれが表示されること，みたいなテストを書くことになる．けどライブラリとかいろいろあってどれを使えばよいか分からなくて敷居が高い．CasperJSを使ったらこれだけで完結してテスト書ける． PhantomJSは単なるブラウザだけど，CasperJSはテストのフレームワークとか，DOMのテスト関数とかがついてる． 非同期なタスクの実行の仕組みも入ってて，casper.thenっていうのを順番に書いていくと，順番に呼んでくれて，click()して，casper.thenしたら，ページ遷移したら次のページに移動してる．ス
GIGA SCHEMAというウェブサービスを作りました - hitode909の日記
なんでも書けるGIGA SCHEMAを作りました． スキーマを作って，データを投稿できるウェブサービスです． id:hakobe932さんとハッカソンして作りました． GIGA SCHEMA データ構造 こういう感じのデータです． スキーマ データが入る データ 値を持つ，日付でソートされる，データに入る はてなグラフの，1日に何度でも書けるようなやつです．数字だけじゃなくて，なんでも入ります． 便利 クロスドメインXHRで使えるAPIを用意しているので，HTMLとJavaScriptだけでなんか作る場合のストレージとして利用できます． UIもちゃんと作ったので，これ単体で，日記を書いたり，体重を記録するのに使っても便利です．
WebMemcacheというWebサービスを作った - hitode909の日記
MemcachedみたいにキャッシュしてくれるWebサービスがあれば便利そうだと思ったので，作ってみた． おもむろにHTTPアクセスすると，JSONをくれる． set, get, delete, statsのAPIがある．使い方は上のリンク先に書いた．リンク先のコードをクリックするとその場でXHRして試せる． キャッシュなので，Webページから使って便利みたいな感じじゃなくて，何かキャッシュを利用したいプログラムから使う． Rubyから値を複数setして同じ値をgetする例．このように，複数同時に操作できる． require 'net/http' require 'open-uri' http = Net::HTTP.new('webmemcache.appspot.com') response = http.post('/set', 'pi=3.14&e=2.7&namespace=te
GAEで画像をグリッチするAPIを作った - hitode909の日記
「ちょっとこの画像グリッチしたいんだけど…」というときに，指定した画像をグリッチしてくれるAPIがあれば便利だと思ったので，作ってみました．Google App Engineで作りました． http://hitode909.appspot.com/glitch/ 普通の写真がこんな感じになります． 仕組み 指定された画像をjpegに変換して，中身の文字列を置換しています．うまくいくとグリッチされます． 置換するだけでグリッチできる，と以下のエントリに書かれていて，試したら，うまくいきました．すごい． hysysk:blog: today's glitch 3 便利 画像を返すだけなので，どこからでもすぐに使えて，便利だと思います．たぶん携帯からでも使えます． ところで 先月，グリッチを扱ったデザインの本が発売されました．かわいいグリッチがたくさん載っていて，おすすめです． Glitch:
Twitterを動詞と名詞だけにするGreasemonkey - hitode909の日記
Twitterは本来「いまなにしてる？」を共有するシンプルなサービスなので，タイムラインにはシンプルで基本的な品詞(動詞や名詞など)のみ流れるべきだと思い，Greasemonkeyを書きました． hitode909's gist: 131771 — Gist このGreasemonkeyを適用してTwitterにアクセスすると，発言内容が端的に変換されて，タイムラインがシンプルになります． 変換例 以下に変換例を示します． 全てid:masa138さんの発言を変換したものです．怒られないだろうと思ったのでTwitterから転載しました． 冗長だった内容が，端的に変換されていることが分かります． 変換前 変換後 今気づいたけど，明日9時からゼミじゃん＞＜ヤバイ！起きれない＞＜ 気づくゼミヤバイ起きるれる 俺も CSS 書こうかなー CSS書く そろそろ帰って寝ようかなー 帰る寝る @uca_
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はてブの非表示ユーザをlivedoor Readerでも非表示にするGreasemonkey - hitode909の日記