レシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話 - クックパッド開発者ブログ

2020/12/01 384 users GraphQL ユーザーエージェント 外村 クックパッド 興味

技術部の外村（@hokaccha）です。今回はクックパッドのウェブサイトのフロントエンドを Next.js などを使って作り直している話を書きます。 この記事で紹介する新システムは、スマートフォン向けのレシピページで確認することができます。もし興味があるかたはレシピページをスマートフォンのユーザーエージェントで開い... 続きを読む

Simpacker: Rails と webpack をもっとシンプルにインテグレーションしたいのです - クックパッド開発者ブログ

2019/07/08 126 users Webpack Rails 外村 webpacker gem

技術部の外村（@hokaccha）です。Rails で webpack を使うためのシンプルな gem を作ったのでそれについて紹介します。 Webpacker Rails で webpack を利用した Web フロントエンドの環境を作る場合、最近では Webpacker が選択されることが多いでしょう。Rails 6 からは Webpacker が標準になることもあり、この流れは... 続きを読む

料理画像判定のためのバックエンドアーキテクチャ - クックパッド開発者ブログ

2017/11/08 103 users バックエンドアーキテクチャ クックパッド開発者ブログ 外村

2017 - 11 - 08 料理画像判定のためのバックエンドアーキテクチャ サービス開発部の外村 ( @hokaccha ）です。 クックパッドのアプリには「料理きろく」という機能があります。 モバイル端末から料理画像のみを抽出して記録することで食べたものが自動的に記録されていくという機能です。 今回はこの料理きろくで画像判定をおこなっているバックエンドのアーキテクチャについて紹介します。なお、... 続きを読む

非SPAなサービスにReactを導入する - クックパッド開発者ブログ

2016/10/26 412 users React 外村 フレームワーク View API

2016 - 10 - 26 非SPAなサービスにReactを導入する 投稿開発部の外村（ @hokaccha ）です。今回はReactについてのお話です。 ReactとSPA 最近JavaScriptやそれを取り巻くフレームワークなどの話題では、サーバ側はAPIのみを提供し、View(HTML)は全てJavaScriptで描画するような、いわゆるシングルページアプリケーション（以下SPA）につい... 続きを読む

モダンJavaScript開発環境 on Rails - クックパッド開発者ブログ

2015/12/14 445 users on Rails クックパッド開発者ブログ Rails 外村

2015 - 12 - 14 モダンJavaScript開発環境 on Rails 投稿推進部の外村（ @hokaccha ）です。 クックパッドブログ の開発でRails上にECMAScript6などのモダンなJavaScript開発環境を導入した経験を元にノウハウを紹介したいと思います。 Railsは Sprockets というgemでJavaScriptやCSSをコンパイルする仕組みが提供さ... 続きを読む

GoでEnd To End Testingフレームワーク書いた - Webtech Walker

2014/10/17 67 users Webtech Walker YAML Actions

SeleniumラッパーなテストフレームワークをGoで書いてみた。初Go。 https://github.com/hokaccha/sprinkler GoのコードでE2Eテストのコード書けてもあんまり嬉しくないのでYAMLで書けるようにした。 scenarios: - name: Hello sprinkler! actions: - visit: http://www.google.com -... 続きを読む

ブログをJekyllからmiddlemanに移行してTravis CIでGitHub Pagesにデプロイするようにした - Webtech Walker

2013/08/26 68 users Middleman jekyll GitHub 興味 ブログ

ちょうど一年くらい前にWordPressからJekyllに移行したんだけど、今回middlemanで作りなおしてみた。 hokaccha/webtech-walker - GitHub 特にJekyllに不満があったわけでもなく単に技術的興味によるもの。 middleman Middleman: Hand-crafted frontend development middlemanはほぼJekyl... 続きを読む

mochaとphantomJSとtravis-ciでフロントエンドJavaScriptのテスト - Webtech Walker

2012/10/23 90 users Travis-CI Jenkins PhantomJS 内容

東京Node学園祭2012 アドベントカレンダーの9日目です。Node.jsとほとんど関係ないうえに内容がけっこう薄い感じなった気がするんですけど気にせずいこうと思います。 フロントエンドのJavaScriptをテストするとき最近はいつもmochaを使ってるんですが、やはりJenkinsとかtravis-ciを使って自動テストもしたいと思って試してみました。 hokaccha/mocha-phan... 続きを読む

Chromeで超簡単にUser Agentを変える方法 :: 5509

2012/02/09 389 users Chrome User Agent Stable 方法 脳みそ

@hokaccha に言われて便利すぎて脳みそ飛び出るかと思った途中から嘘です 以下、見たことのある内容が続きます 全然気がつかなかった・・・いつからだろう・・・ Chromeにビルトインされてるのですぐ使えます。 ちなみに、キャプチャはChromeのdev版なのでstable版は少し違うかもしれません。stable(Macの17.0.963.46)でもOverride User Agentの項目... 続きを読む

iPhone AppのPathみたいなナビゲーションを実装できる Swpnav.js :: 5509

2011/12/19 73 users Path ライブラリ デフォルト ナビゲーション 同僚

PathのナビゲーションをWebページに実装するライブラリです。他にもあると思いますけど、これの特徴は対象に当たっている他のライブラリと干渉しにくいということでしょうか。iScrollみたいなデフォルトのキャンセルが強力なやつはだめだと思います。 サンプルがまさにそれなんですけど、同僚の@hokacchaが作った flipsnap.jsとは共存できます。レイヤー毎にスワイプ判定をしてるので、上位レ... 続きを読む