Leko

Leko
/

GatsbyでReactコンポーネントをDynamic importしてCode Splitするwork around

 · 3 min read

前記事のGatsby 製サイトに Algolia のサイト内検索を実装するを実現するにあたって、色々ライブラリが増えるけどページのロード時間は増やしたくなかったので React Suspense(以下 Suspense)+ React.lazy + Dynamic import…

Gatsby製サイトにAlgoliaのサイト内検索を実装する

 · 5 min read

ブログをGatsbyに移行してからずっとサボっていたサイト内検索機能ですが、ゴールデンウィークで時間があったので実装してみました。なお、当記事はAlgolia自体の知識がある前提で書いてます。Algolia自体の説明やMiddleman…

Intl.NumberFormatでゼロ埋めや%表記などの数値表現を楽に実装する

 · 6 min read

Number#toFixed や Math.round/floor/ceil を駆使して表示用の値を整形することってないでしょうか。カンマ区切りをオレオレユーティリティ関数で実装したりそういったことを実現するライブラリを探したことはないでしょうか。ほとんどの JavaScript…

Dive into Deno:プロセス起動からTypeScriptが実行されるまで

 · 34 min read

Denoのコードを読んでみました。Rust に入門したばかりで基礎知識が足らず四苦八苦していますが、Deno のプロセスが起動してから TypeScript のコードが実行されるまでの仕組みについて愚直に読んでみたメモです。想定読者Deno の内部挙動に興味があるNode.js…

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を作った

 · 4 min read

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

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を主に使っているため、しばらく情報を追わずにいたが、— React…

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

 · 6 min read

2019/05/06追記この記事は古いです当サイトはMiddlemanからGatsbyに移行したため、この記事の内容は古くなっております。動作デモはありませんが、Middleman製サイトに検索機能を実装する場合にはこのまま続きをお読み下さい。現サイトで運用されているGatsby…

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とかあったなぁ、と懐かしみつつ そういえばPowerline…

React nativeで音声を録音する

 · 5 min read

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

ネイティブの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のfindallby_*メソッドを実装してみる | WEB EGGという記事を書いたのですが、Node.jsでもProxyの登場により、似たようなことができるのでは? と思ったので試してみました。今回の題材は、同じくRails…

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 というアプリをリリースしました。その際に、色々と使ってみたかったライブラリを使って感触を得たので、ご紹介がてら使用感をメモしておきます。FastClickftlabs/fastclickhttps://github.com…

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 Chaos…

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パーツの結合度が下がるので、全体の見通しが良くなり、メンテもしやすくなります。今作っているものはそこまで規模が大きいものではないのですが、大規模js…

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

 · 2 min read

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