株式会社mediba の技術ブログ
全166件
HTTP/2を取り入れたページの表示速度向上への取り組み
2017/11/08
ブックマーク
初めまして。フロントエンドエンジニアの謝花（ジャハナ）です。 入社して8ヶ月ほど経ちましてこうして初めてブログを書きます。 沖縄を離れて長い年月が経ちますが、東京では「ジャハナ」が人名だと認識されず未だに苦しんでおります。（電話ごしだと100%聞き取ってもらえません） そんなこんなで楽しくお仕事させていただいているのですが、最近とあるプロジェ
Speed Indexを使ったWebパフォーマンス改善の振り返り
2017/09/28
ブックマーク
こんにちは。制作部の苅部です。 今回は、サービス横断でのWebパフォーマンス改善を1年間続けた中で指標としてSpeed Indexを採用した振り返りを書き残しておこうと思います。 Speed Indexとは 時間ごとの描画面積で算出される値で、体感速度の指標として参考にすることができます。 UX向上としてのWebパフォーマンス改善を考える時に、他の指標よりも役に立ちます。 DOMConte
【小ネタ】Lambda@Edgeのログはどこに…？
2017/08/28
ブックマーク
こんにちは、AWS Lambda と戯れる日々を過ごしているインフラストラクチャー部の沼沢です。 みなさん、AWS Lambda 使っていますか？ Lambda では CloudWatch Logs に /aws/lambda/関数名 というロググループ名でログを出力することができますね。 Lambda@Edge でも同じようにログを出力しようと思ったのですが、ロググループが見つからず困ったので同じように困ってる人の助けになれば
正式版 Lambda@Edge でデバイス判定をする
2017/08/21
ブックマーク
こんにちは、インフラストラクチャー部の沼沢です。 以前、 Lambda@Edge を使ってデバイス判定をする記事を書きましたが、最近 Lambda@Edge が正式リリースされたので、正式版での検証も実施してみます。 以前書いた記事はこちら Lambda@Edge でデバイス判定をする | mediba Creator × Engineer Blog 概要 今回も、前回と同じように以下の判定をできるようにします。 iPhone iPad Android 上記
【小ネタ】AWS WAF の設定を if 文に例える
2017/08/18
ブックマーク
こんにちは、最近 WAF WAF しているインフラストラクチャー部の沼沢です。 WAF(Web Application Firewall) といえば、SQL インジェクションなどの Web アプリケーションへの攻撃をブロックするためのファイアウォールです。 そんな用途とは少し異なり、AWS WAF を使って CloudFront や Application Load Balancer へのアクセス制限をする機会が多いのですが、自分自身、WAF というものにあまり縁
babel-preset-env@2.0 を試した -トランスパイル環境をスケールさせていく -
2017/08/04
ブックマーク
こんにちは、制作部 フロントエンドエンジニアの武田です。 入社して5ヶ月経ちました。 ECMAScript の推し proposal は Cancellation API です。 今回は開発には切っても切れない Babel 、そのプリセットである babel-preset-env についてお話します。 このプリセットは Browserslist 1 の記述で compat table 2 を利用し、指定された環境にあったトランスパイルができるプリセットです。 使い方
IcoMoonを使ってSVGからアイコンフォントを作る方法
2017/06/21
ブックマーク
こんにちは！制作部 デザイナーの森本です。 最近は、スマートフォンなどの端末の解像度が上がってきているため、アイコンであっても大きな画像が必要になりますが、多用するとページの描画速度の低下にも繋がってしまいます。 そこで、画像を多用せずとも高解像に対応できる「アイコンフォント」を簡単に作る方法をご紹介いたします。 今回は最近使ってみて一
Laravel5.2から5.3にバージョンアップしたときの話
2017/05/29
ブックマーク
こんにちは。広告システム開発部の竹谷です。 私のチームのサービスで、Laravelのバージョンを5.2から5.3にあげたときの話を書きます。 すでに5.4も出ていますが、段階的にまずは5.3にあげました。 PHPのバージョンは7.0.9です。 ドキュメント ドキュメントはこちらになります。 https://laravel.com/docs/5.3/upgrade#upgrade-5.3.0 composer.jsonの修正からやってみる まずは、composer.json を修
新人Webデザイナーが１年の学びを振り返る
2017/05/25
ブックマーク
制作部でデザイナーをしている渡邉と申します。 昨年、2016年の4月に入社して6月の頭で配属1年になります。 学生時代は現代アートを専攻する科でカリキュラムにあらがって写真とか撮ってました。 さて今回は、私が新米Webデザイナーとして配属されてからのたくさんの学びの中から、つまずいた点や重要だと感じた点について紹介し、2年目にどう繋げていくべきかを書
複数台のGatlingサーバを用いた負荷試験について
2017/05/15
ブックマーク
メディアシステム開発部の野崎です。 メディアシステム開発部では、「 au Webポータル 」や「 au スマートパス 」といった、 多くのユーザ様にご利用頂いているサービスを担当しています。 このようなシステムでは新規開発や機能追加時には負荷試験を実施することは必須となります。 そこで今回は、Webシステムの負荷試験について 負荷を生成する環境にフォーカスし
Lambda@Edge でデバイス判定をする
2017/04/25
ブックマーク
こんにちは、インフラストラクチャー部の沼沢です。 今回は、2016年の re:Invent で発表された Lambda@Edge を使って、リクエスト元のデバイス判定を実装してみます。 Lambda@Edge といえば、 CloudFront の Edge ロケーション上で Lambda が実行できる 画期的なサービスです。 現在は Limited Preview 中で、General Availability を待ち望んでいるサービスの1つです。 Lambda@Edge についてはこちら
パーサコンビネータで構文解析をより身近なものにする
2017/04/21
ブックマーク
こんにちは、広告システム開発部の菅原です。 今回は構文解析のお話です。構文解析は、コンパイラ、自然言語処理（テキストマイニング）、AST（抽象構文木）、AltJS（Alternatives to Javascript） などのベースとなる重要な技術の一つです。本記事では、実例としてコンパイラを交えて説明しつつ、パーサコンビネータを使って簡単に構文解析を行えることを紹介してい
Google Optimize導入とA/Bテスト実施のポイント
2017/04/19
ブックマーク
フロントエンジニアの苅部です。 medibaシステム本部では一部サービスのA/BテストをGoogle Optimize(以下Optimize)で実施しております。 先日Optimizeの一般利用が可能になったようですので、これから初めてA/Bテストを実施する方に向けて、使用感を共有できたらと思います。 Optimizeの特徴 1. 無償版でも十分使える 無償版でもほとんどの機能が利用できるため、予算のないプロジ
Travis CIを使用したGolangビルド
2017/04/18
ブックマーク
みなさん、Golang書いてますか？ お久しぶりです。メディアシステム開発部の森竹です。 前回は Docker for Macを使ってRuby on Rails開発環境を構築する を紹介させて頂きました。 今回はTravis CIを使用したGolangビルドを紹介させて頂きます。 ビルド Travis CI でGolangビルドを実行し、AWS S3へPUTします。ビルドサーバーでGolangビルドする案もありましたが、下記の観点を鑑み、Travis CI
二次元的なレイアウトが可能になる次世代のCSSレイアウト、Grid Layout Moduleについて
2017/04/07
ブックマーク
こんにちは、制作部 松本です。 私はこれまでCSSレイアウトで display プロパティ用いる際、 inline-block や table 、 最近では flexbox を使用してきました。 今でも float を多用している方はあまりいないのではないかと思います。 本記事では、よりフレキシブルなレイアウトが実現できる grid について紹介します。 grid は複雑なため、まだ体系的に全ての機能を説明できるほど