わーい！コンテナたのしー！🐾 こんにちは。流行りには積極的に乗っていきたい。インフラエンジニアの光野です。 弊社が運営するファッションサイト IQON では、日々200以上の提携ECサイトから100万のオーダーで商品をクロールしています。 新商品の追加・商品の在庫状況・セールの開催など情報は日々変化するため、弊社において「正しくクロールすること」と「速くクロールすること」は肝心カナメの要素です。 本記事では、特に「速くクロールする」という目的で構築した コンテナベースの新クローラーシステム を紹介いたしま

APIStudy #5参加レポート 2月21日、高円寺のヴァル研究所にてAPIStudy#5が開催されました。これはAPI設計のベストプラクティスを皆で考えるというLTとワークショップの形式で行われている勉強会になります。 今回はその参加レポートになります。 APIを巡る動き まず最初に主催であるアプレッソの脇野さんによる発表がありました。この1、2月の間にAPI関連のニュースをよく見るようになったそうです。例えば次のようなニュースがありました。 デバイスAPIはどこまで使える？最新事情を紹介──HTML

こんにちは、Webフロントエンドエンジニアの権守です。 フロントエンドエンジニアの皆さんは、リリース前の社内QAにてデザイナーにピクセルのずれを指摘されて修正したという経験があるのではないでしょうか。今回はiQONのPC・スマホサイトを構築する上で、デザインデータに忠実なCSSコーディングをどのように実現しているかを紹介します。 ツールの利用 PerfectPixel 既に利用されている方も多いかもしれませんが、デザインとのピクセルずれの確認には PerfectPixel がオススメです。 Perfect

こんにちは、エンジニアの荒井です。 2016年はAMP（Accelerated Mobile Pages）の正式サポートがアナウンスされ、導入した方も多いのではないでしょうか。VASILYでもAMPを導入し数ヶ月運用しています。AMPの導入に関しては、関連記事も多く存在しますが、導入したことによって得られた結果について触れている記事は少ないと感じています。そこで本記事では、弊社でのAMP導入事例と、AMPによって得られた効果を紹介したいと思います。これから導入を検討している方はAMP対応による効果の一例と

こんにちは、インフラストラクチャー部の沼沢です。 今回は、CloudFront + S3 での IP アドレスベースのアクセス制限を実現する方法をご紹介します。 実現したかったこと 特定の外部拠点から参照されるファイルを S3 に配置したい 独自ドメインが使いたかったため、CloudFront を前段に用意 ファイルへのアクセスを特定の外部拠点の IP アドレスのみに制限したい S3 の URL への直アクセスはさせたくない これを実現しようとしてググってみると、 CloudFront の IP アドレス

APIは一般的にプル型の技術です。クライアント側からアクセスがあるまでは待ちの状態になります。クライアント側から見ても、サーバ内部でどのデータが更新されているのかはアクセスしてみるまで分かりません。この手の問題で厄介になるのが「どのデータが削除されたのか」が確認しづらいということです。すべてのデータを見た上で、抜け落ちていれば削除されたといった確認方法であったり、処理の履歴を見て判断すると言った方法になってしまいます。 そこでサーバ側からでもデータの更新を伝えられる方法を使って、クライアントとのコミュニケ

マイクロサービス システムをごく小さくまとめ、APIベースで機能を提供するマイクロサービスがより広がっていくと考えられます。多くのモノリシックなシステムにおいて密結合が拡張性やメンテナンス性において負の資産となっています。マイクロサービス化することで結合ポイントを減らし、開発を容易にします。 マイクロサービスは多くがモデルデータのCRUD操作をREST APIにて提供します。HTMLを返すものは多くありません。まさにAPI向けの施策と言えるでしょう。ただし、サービスの分け方をうまくやらないと、ただシステム

あけましておめでとうございます。 バックエンドエンジニアの塩崎です。 今年の抱負として「テクノロジー系の同人誌を書く！」と言ったら、「アニメの女の子が出てくる漫画」のことだと勘違いされてしまいました。 いつもはiQONに関することを書いているこのTECH BLOGですが、今回の記事はiQONには全く関係のない内容です。 新年会用に低温調理器具を作った話を紹介します。 はじめに 今年のVASILYの新年会は「各地の温かいもの」を持ち寄るという企画を行いました。 しかし、僕は実家に帰らずにアキバ近辺をうろうろ

フロントエンジニアの茨木です。 皆様はCSSを書く際にコーディング規約を意識しているでしょうか。かつて、弊社にはCSSのコーディング規約が存在せず、CSSファイルの肥大化・クラス命名規則の不統一が発生していました。メンテナンスが難しくなってきた為、1年半ほど前にCSSコーディング規約を設けました。若干のルール追加を伴いながら、現在まで問題なく運用できています。本記事ではフロントエンドで運用しているCSSのコーディング規約に関して紹介します。 導入環境 本記事では以下の環境を前提にしています。 Ruby o

カスタマーサポート課の伊藤です。 re:InventでAppStream 2.0が発表されました。HTML5によってアプリケーション配信を行う事により端末のOSを気にせずに、デスクトップアプリケーションを利用できるサービスと言うことで、早速動作確認をしてみました。

こんにちは。制作部の平尾です。 前回は Animate CC→Javascriptに変換してアニメーション を作ってみたお話をしたのですが、今回はVue.jsを触ってみたお話をしようと思います。 事例みたいなものはネット上にたくさん落ちているので、今回はJavaScript初級くらいでも簡単にできて便利だよ。ということをお伝えしたいと思います。 （この記事は mediba Advent Calendar 2016 の5日目です。） Vue.jsとは 本家のサイト に書いてあるものをだいぶ雑に言い換えてみる

APIは外部リソースからデータを取得して他のデータと合わせて自分たちのサービスに付加価値を追加できますが、同じように外部からデータを取得する手法としてスクレイピングが知られています。今回はスクレイピングとAPIの違いを紹介します。 スクレイピングとは？ スクレイピングはサーバサイドのプログラミング言語を使って外部サーバへアクセスし、そのコンテンツから自分たちの欲しい情報を引き出す手法です。多くはHTMLを返す場合に使われ、DOMを解析したり正規表現を使ってデータを抜き出します。 スクレイピングはサービスが

こんにちは。 今日も元気にクローラー作成！バックエンドエンジニアのりほやんです。 最近クローラーを作成する機会が多く、その時にXPathが改めて便利だと思ったので XPathについてまとめてみました！XPathを学ぶ方の役に立てれば幸いです。 初級編 XPathとは XPathはXML文章中の要素、属性値などを指定するための言語です。 XPathではXML文章をツリーとして捉えることで、要素や属性の位置を指定することができます。 HTMLもXMLの一種とみなすことができるため、XPathを使ってHTML文

こんにちは、新卒三年目のナガサキです。 新卒一年目の椎橋くんがブログを書いていたので、私も負けじと書いてみます。 nextdeveloper.hatenablog.com まずは簡単に自己紹介をさせて頂きます。 私は2014年に弊社（株式会社ネクスト）に入社しましたが、この年は30歳になる年でした。大学院で博士課程まで進み、就職しようと思ったときにはそんな歳になっていました。。新卒研修中の健康診断で、一人だけバリウムを飲むことになり、先輩に気を遣って頂いたのはこれまででも私くらいでしょう。 さらに私はエン

Webブラウザは常にセキュリティ、ユーザへの安全なインターネット提供を前提に作られています。そのため外部リソースを組み合わせて使うAPIとは相性が悪いことがあります。iOSやAndroidといったスマートフォンアプリやサーバサイドのプログラミング言語では当たり前のようにできることがWebブラウザではできないのです。 今回はAPI利用時に注意したいJavaScriptによる外部リソース取得方法について紹介します。 JSONP HTML4の時代において、JavaScriptから外部リソースを取得する方法は限ら