WEB EGG

Leko

Leko
/

ChromeのBlink LazyLoadを有効にしたらページのロード時間が約10倍早くなった

 · 3 min read

Lazy load はよく知られた web サイトの高速化テクニックの1つですが、 自前で lazy load を実装したりライブラリを使う必要がなくなる 未来が実現しつつあります。 Chrome のレンダリングエンジン Blink が 画像や iframe の LazyLoad…

Gatsbyの記事にoEmbed準拠のコンテンツを埋め込めるようにした

 · 4 min read

(※↑ はただの記事用のサムネイル画像です) 記事の中に URL を書くだけで oEmbed 準拠のコンテンツを埋め込めるようにしました。 oEmbed を聞いたことない方はまずデモを見てみてください。 oEmbed…

ブログをMiddlemanからGatsbyに乗り換えた雑感

 · 6 min read

2017年にこのブログはWordpressからMiddleman製に作り変えたのですが、この度MiddlemanからGatsbyへ移行しました。前回の移行の記事はこちらです。 — Wordpressで運用していたブログをMiddleman+Netlifyに変更した | WEB…

プログラム内でdotenvを読み込むのをやめた話

 · 2 min read

dotenv というRuby発のOSSがあります。 .env って名前のファイルに環境変数を列挙してライブラリを読み込むと、それらの値をプロセス内の環境変数として値を展開してくれるというツールです。 もちろん Node.js版 の実装も存在します。 Heroku…

lerna-changelogで始める頑張りすぎないリリースノート自動生成

 · 2 min read

hothouse というpackage.jsonとlockfileを更新してPR出すツールを公開するときに、 「リリースノート頑張りたくないな」と思い、なるべく楽にそれなりのリリースノートを残せる方法を探った結果、 lerna-changelog というLerna…

package.jsonを更新してPRを作成できるCLIツールhothouseを作った

 · 3 min read

hothouse というツールを作成しました。 package.jsonとロックファイルを更新してGitHubにpull requestを作成するCLIツールです。 npmかYarnをパッケージマネージャとして使用できます。 普通のリポジトリだけではなく、LernaやYarn…

lernaでnpmにpublicなscoped packageをpublishする方法

 · 1 min read

hothouse という、package.jsonを更新してPRを作成するGreenkeeperのようなOSSを作る際に、 プラグイン開発用の内部I/Fを @hothouse/types というpublicなパッケージとしてpublish…

ReactのNew Context APIは便利だけどreduxを使うのはやめないと思った

 · 3 min read

Reduxの新しいContext APIが発表され、2ヶ月くらいが経過した。 — React’s ⚛️ new Context API – DailyJS – Medium 私は少しバージョンの古いReact…

Algoliaを利用してサイト内検索機能を実装する

 · 6 min read

こんにちは。 当ブログのサイト内検索をしたことある方はお気づきかもしれませんが、サイト内検索に Algolia を利用しています。 (後述の事情により月初に使えなくなることがたまにありますが)動作速度もかなり早く、安定して稼働してます。 運用コストもゼロで、記事書いてPR…

MiddlemanのビルドにWebpackを組み込む方法

 · 2 min read

こんにちは。 当ブログは Middleman にて運用しているのですが、検索機能や遅延ロードなどで実装したJavaScriptのビルドにはAsset pipelineなどは使わずに webpack でビルドしています。 Rails5.1が今beta…

CLIアプリに使えそうな特殊文字たちで遊んでみた

 · 6 min read

こんにちは。 Githubのトレンドに vadimdemedes/ink というツールが上がっており、CLIといえば chjj/blessed やReact版の Yomguithereal/react-blessed…

React nativeで音声を録音する

 · 5 min read

こんにちは。 React Nativeで音声の録音機能を実装した時のメモです。 使用するライブラリはAndroidにも対応しているので、iOS/Android両方対応してみます。 つくったもの — Leko/ReactNative-KitchenSink: Kitchen…

ネイティブのPromiseより早いbluebirdのPromiseの便利機能をまとめてみた

 · 3 min read

こんにちは。 ES6のPromiseはBluebirdの4倍遅いらしい PromiseのライブラリBluebirdが提供するAPIのうち、個人的に便利だと思ったものについてまとめます。 なお、標準のPromiseにも搭載されている機能については割愛します。 Promise…

条件付きな構文が多い昨今のNode.jsのアロー関数の構文をまとめてみた

 · 3 min read

シンプルすぎて難解?昨今のNode.jsのオブジェクト周りの構文をまとめてみた に続いて、今度はアロー関数編です。 おそらく今まではこんな感じで関数を書いてたと思います それがアロー関数の構文を使用すると、 const hoge = options =>…

シンプルすぎて難解?昨今のNode.jsのオブジェクト周りの構文をまとめてみた

 · 3 min read

こんにちは。 たまには基礎に返ってみるのも良いじゃないか、ということで 今回は、 { a, b, c } とか昨今のNode.js…

Node.jsのProxyでdirty checkとmethod missingを実現してみる

 · 5 min read

過去に phpのマジックメソッドを使ってRailsのfind all by_*メソッドを実装してみる | WEB EGG という記事を書いたのですが、Node.jsでも Proxy…

ChatWorkだってSlackしたい!!

 · 3 min read

なんとも日本語が不自由な感じのタイトルですが、始めます。 普段仕事でChatWorkを使っているのですが、どうにもUIが好きになれない。 別に使いにくくはないんですが、趣味でSlack…

MMDのモデルにブラウザで踊って頂いた

 · 2 min read

2016/12/03 末尾に追記しました この記事は 12/3 Three.js Advent Calendar と 12/4 Hamee Advent Calendar…

開発者ツールで使える便利なcopy関数

 · 2 min read

こんにちは。開発者ツールネタです。 ChromeでもFirefoxでもSafariでも使える便利な関数が色々あります。 その中の1つ copy 関数について紹介したいと思います。 copy…

canvasのCORS制限を突破する

 · 3 min read

こんにちは。 画像をくっつけるツール というjsで簡単な画像処理を行うSPAを作った時に、 URLを指定して画像を読み込んで結合する、という要件があり、 この要件とcanvas周りでハマったので対象方法を残します。 何が起きたか、なぜ起きるか URLをimgタグのsrc…

HTML5のConstraint validationでライブラリ要らずならくらくバリデーション

 · 4 min read

こんにちは。 Hamee Advent Calendar 2015 8日目の記事です。 Chromeの開発者ツールでHTMLの要素を眺めていたら validity という属性を見つけました validityプロパティの中には patternMismatch , tooLong…

フォーム周りで地味に使うUIと実現方法

 · 4 min read

れこです。 Hamee Advent Calendar 2015 2日目の記事です。 「明日使えるフロントエンドと作業効率化の備忘録」とか銘打っておきながら、 フロントエンドの記事を書くのはものすごく久々な気がします。 フォームやinput…

Karmaを使ってIEのテストをMacから行う

 · 6 min read

久々の更新です。 社会人になってからいつの間にか1年が経過していました。時が立つのは早いものです。。。 最近はインプットを増やしてばかりで全然アウトプットできていなかったので、少しずつアウトプットできればと思います。 ここんところ業務の都合でPHP…

Taskloudを制作する際に使用したライブラリまとめ

 · 2 min read

久々にフロントの話題です。 4月に Taskloudというアプリをリリース しました。 その際に、色々と使ってみたかったライブラリを使って感触を得たので、 ご紹介がてら使用感をメモしておきます。 FastClick ftlabs/fastclick https://github…

Chrome拡張を作ってweb版ChatWorkを改造してみた

 · 7 min read

こんにちは。 とても今更ながら、Chrome拡張機能がHTMLとCSSとjsで作れるらしいので、作ってみました。 よくあるサンプルの、「ただalert出すだけ」だと芸がないので、 web版のChatWork…

jsとcanvasでグラフの描画(力学モデル)を実装した

 · 5 min read

こんにちは。 今回は、 力学モデル (グラフ描画アルゴリズム) – Wikipedia というグラフを描画するための面白いアルゴリズムを見つけたので、 こいつをJavaScript(CoffeeScript)とcanvas…

Backbone.jsとRuby on Railsを連携させる際のメモ

 · 3 min read

Ruby on RailsはシンプルなAPIだけ構えておいて、 Backbone.jsをAPIクライアントとして連携させる際に Railsでコントローラをscaffold…

CodeIQのFizzBuzzダンジョンLV1~4を解いた

 · 2 min read

こんにちは。 CodeIQ というプログラミングの問題を解くサービスで面白そうな問題を見つけました。 挑戦者求む!クロノス・クラウン合同会社 柳井 政和@FizzBuzzダンジョンさん|CodeIQ よくあるFizzBuzz…

【(」・ω・)」うー!(/・ω・)/にゃー!】 ksnctfのCrawling Chaosを解いてみた

 · 3 min read

こんにちは。 私にはセキュリティの知識は全くと言っていいほど無いのですが、 今日突然SECCONに参加する予定の友達に、 「この問題、JavaScriptなんだけど、解ける?」 と聞かれたので、見てみました。 問題は、 ksnctf というサービスの、 Crawling…

CookieClikerをjsから操作してみる

 · 6 min read

久しぶりの更新です。 最近、Twitterの一部界隈で Cookie Clicker というゲームが流行っているようです。 ゲームのパロディ、 ヒロイン※の官能小説 なども出るほど、日本で人気なようです。 そんなに面白いのかと思ってページを開いてみたら、 ただCookie…

Sublime Text2の作業効率を加速させるパッケージ11個

 · 3 min read

こんにちは。 湿度で髪が跳ねまくっています。れこです。 今日は、何を思ったのか、 Sublime Text2でインストール可能なパッケージを全部見てみよう と思ってa~z…

webページにローカルファイルをドロップ可能にするjQueryプラグインを作ってみた

 · 4 min read

こんにちは。 セミが鳴き出しましたね。夏、嫌な季節です。 さて、Macで良いリネームアプリを探しているのですが、 なかなか決定版が見つからずに嘆いています。 そんな時ふと思いました。 (使ったことないけど) HTML5のFileAPI…

[AOJ] 1135 Ohgas' Fortune

 · 1 min read

AOJの1135、Ohgas’ Fortuneをjsで解きました。 こちらも入力の処理に手間取り、クリアタイムは24分です。 問題文は こちら これは、特に悩むことも無く。 率直に解きました。 コード

[AOJ] 1137 Numeral System

 · 1 min read

AOJの1137、Numeral SystemをJavaScriptで解きました。 入力の処理に時間を取られ、35分強かかってしまいました。 問題文は こちら 文字列操作の問題ですね。 replace+eval…

CoffeescriptとTypescriptから学ぶjsでのクラス・継承パターン

 · 5 min read

こんにちは。 最近、オライリー・ジャパンの 「 JavaScriptパターン――優れたアプリケーションのための作法 」という本を読んでいます。 この本は、JavaScriptでのコーディングパターンや、 Javascript…

titanium-cliとGruntを使って、コマンドラインからiOS・Androidアプリのビルドを自動化する方法(前編)

 · 7 min read

こんにちは。れこです。 最近は、友人と いちれこプロジェクト という活動をしていまして、 まだ詳細は非公開ですが、iOSとAndroid両方に対応したアプリを作っています。 双方のプラットフォーム用の言語や、独自仕様を覚えるのは面倒なので、 JavaやObjective-C…

Backbone.js×sinon.jsのテストでspyが上手く動かない時のメモ

 · 3 min read

こんにちは。 最近、 Backbone.js というライブラリを使って、制作をしています。 Backboneいいですね〜。 各UI…

CoffeeScriptでjQueryプラグインを書いてみて思ったこと

 · 2 min read

こんにちは。 昼夜逆転が一周してやっと普通の生活に戻って来ました。れこです 最近、CoffeeScriptというJavaScriptのライブラリにハマっています。 半年前くらいに流行った、賛否両論なjsライブラリです。 非常にシンプルにjsを書くことができて、Ruby on…