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

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

Zabbix Advent Calendar 2016の10日目の記事です。カスタマーサポート課の伊藤です。 サーバーワークスZabbixスペシャリスト 九龍として今回はZabbix 3.0/3.2 の構築手順をご案内します。Zabbix の構築は、Serverパッケージインストール、DB構築、フロントエンドパッケージインストール、が主な流れとなります。Zabbix ServerとZabbixフロントエンド、ZabbixDBはそれぞれ、TCP/IPで接続しているので、ネットワーク的に疎通が取れれば、単一イ

こんにちは、Webフロントエンドエンジニアの権守です。今回は弊社で開発中のサービスで実装した商品画像の拡大プレビュー機能の実装について紹介します。 概要 新サービスの商品詳細ページに次の動画のような拡大プレビュー機能を実装しました。 このように拡大プレビュー機能があることで、デザインの細部や生地感がわかり、ユーザにとってよりよい体験を与えることができると思います。 仕様 今回、機能を実装する上で満たさなければいけなかった仕様です。 画像をマウスオーバーした際に横に拡大プレビューを表示する 元の画像はカルー

10月13日に Enterprise APIs Hack-Night #7 が開催されました。今回はMarTech（マーケティング×テクノロジー）をテーマに行われました。マーケティング分野はテクノロジーの発展がめざましく、マーケティングオートメーションなどのキーワードにも注目が集まっています。 この記事では各登壇内容について紹介します。 APIでつながるマーケティングの実現 株式会社シャノン 技術統括本部 取締役 堀 譲治 さま 資料はこちら シャノンではマーケティングプラットフォーム、マーケティングオー

2016年9月20日、第三回目となる Fashion Tech meetup を開催しました。前回に引き続き、 MERY を運営する株式会社peroli様、 FRIL を運営する株式会社Fablic様との共同開催となりました。 今回も増枠を設けるほどの申込みがあったのですが、イベント当日は台風16号が接近し、天候に恵まれない日となってしまいました。 そんな中、悪天候にも関わらず多くの方が足を運んだくださり、Fashion Tech meetupへの期待を感じられ嬉しく思います。 今回、弊社からも2名登壇し

フロントエンドエンジニアのnibaです。 先日、iQONのスマホページでviewportの改善を行いました。 その際の技術選定や工夫について述べていきたいと思います。 viewportについて まず初めにviewportに関して説明します。 viewportはHTMLメタ要素の一つです。これを指定することにより、スマホ/タブレットで表示される際の描画領域幅やスケールを決定できます。 viewportは以下のようなタグで指定できます。 < meta name = 'viewport' content

こんにちは。制作部の西野です。 このmediba Creator × Engineer ブログの立ち上げ担当をしておりました。 9月でブログの開設から1年になりますので、少し早いですが振り返りをしようと思います。 ブログ立ち上げの背景 このブログは、medibaのエンジニア、デザイナーが最近経験したこと、興味があって調べたこと、学んだことを投稿しているブログです。 medibaの開発のことをもっと知ってもらいたい サービスを開発、運用する上で貯めたナレッジを社内外に共有したい 技術を広めることで社会貢献に

こんにちは。制作部の苅部です。 今回は最近実施したGoogle Analyticsを使ったA/Bテストについて書こうと思います。 仕組み自体はすごくシンプルですので、ツールの導入が難しい場合にも簡易的なA/Bテストが実施できると思います。 Google Analyticsを使う機会が少ないエンジニア/デザイナーの方や、普段フロントエンドの実装をされてないディレクターの方に向けて、今回の事例を簡単に共有できればと思います。 実施の経緯 運用中のサービスで採用しているアイコンについて、「どうもわかりづらい」「

Webフロントエンドエンジニアの権守です。 今回は、iQONのWebアプリのAPIリクエスト部分の仕組みを改善したことについて紹介します。 前提 このブログでも何度か紹介していますが、iQONでは、ネイティブアプリとWebアプリの両方で、共通のAPIを利用して開発を行っています。 そのため、通常のRailsアプリケーションと異なり、iQONのWebアプリ版のモデル部分では、DBへのアクセスを行わずAPIへのアクセスを行い、データを取得します。 こういった形式を扱うGemとしては her などがありますが、

みなさま、こんにちは！エンジニアの東です。 フロントエンドの開発は不慣れな私はCSSの扱いもまだまだ未熟です。 というのも、私は、自身の業務では、CSSはなかなか触る機会がないです。 それもあって、私はCSSには苦手意識がありまして・・・特にfloatの扱いがうまくできないんですよね・・・！floatを使ってコンテンツを配置しようとすると大体レイアウトが崩れて、混乱します。 そんな私でも、floatの代替として使える非常に便利なものがありましたのでそちらを紹介したいと思います。 それは、 CSS3 Fle

エンジニアの荒井です。現在VASILYでは サマーインターンシップ を開催しています。募集開始後、さっそく多くの方からご応募いただいています。 インターンコースのひとつにフロントエンド開発コースがあるのですが、HTMLを書くのか、サーバーサイド言語を書くのか等、業務範囲に興味がある方が多いようです。そこで今回は、VASILYフロントエンドチームの役割と、インターンシップの内容について紹介したいと思います。 VASILYでのフロントエンドエンジニアの役割 はじめにVASILY内でのフロントエンドエンジニアの

こんにちは、CTOをしている山田です。 JAWS DAYS2016参加してきました。何と参加者が1100名以上だったようで、すごい盛り上がりでした。 改めてコミュニティの凄さとそれを惹きつけるAWSの魅力を実感しております。また、隅々まで気配りが行き届いた本当に素晴らしいイベントでした。 運営者の皆様お疲れ様でした。 私はユーザートラックの「 ユーザの本音、AWS入れてどうなった？ 」というパネルディスカッションにパネラーとして参加してきましたので、そこでお話した内容をまとめます。 このセッションは、これ

こんにちわ、フォースを信じてる鈴木です。 ネクストでは、業績目標を達成したご褒美に全従業員参加の社員旅行をします。 会社の成長とともに参加者が増え、4回目の2015年は海外子会社も含めて500人超が参加をしました。今回は、そんなネクストの一大行事の裏側で活躍したクリエイターの日と開発チーム「teamぼんじり」についてお話ししたいと思います。 課題がたくさんある社員旅行 さて、500人が参加する社員旅行。もちろん旅行代理店の方にお願いはしていますが、旅行の企画や運営は社内の12名の実行委員が主体的に行ってい

明けましておめでとうございます！auスマートパス開発部の新井です。 medibaで提供しているサービスではDynamoDBを利用しているサービスがあります。 Q: Amazon DynamoDB とは何ですか? Amazon DynamoDB は、完全マネージド型の NoSQL データベースサービスであり、高速で予測可能なパフォーマンスとシームレスな拡張性が特長です。 https://aws.amazon.com/jp/dynamodb/faqs/ DynamoDBは、スループット容量を変更することができ