フロントエンド

Headless Chrome でブラウザテスト自動化入門

こんにちは。サーバーサイドエンジニアの@akane_256です。

今日は、Headless Chromeを使ったブラウザテストの自動化(入門)について書きたいと思います。

目次

  • Headless Chromeとは?
  • 興味を持った背景
  • 今回やったこと
  • 実際のソースコード
  • まとめ

Headless Chromeとは?

  • Chrome59(2017/6月頃)から搭載された機能
  • ChromeをGUIなしでコマンドラインから実行できる
  • DOMのノードを取得したり、画面キャプチャを撮ったりできる
  • ツールと組み合わせて自動テストに使ったりする

ブラウザを開いて、特定のページを開き、自分で目視確認しなくても、
あらかじめ作ったプログラムをコマンドから実行をすれば
自動でキャプチャをとったり指定の要素を取得したりすることができます。

続きを読む

作業ミスを減らすFirefoxアドオンを公開

結婚写真を撮影できるスタジオ検索サイト「Photorait」担当エンジニアの武田(@takedajs)です。

先日、自分が担当しているPhotoraitでスタジオを探し実際に結婚写真を撮影してきました。自分が携わってるサービスをユーザとして使うのは、感慨深いですね!一つ夢が叶いました涙

さて本題です。
最近Firefoxの大きなバージョンアップ(Firefox Quantum)があり、ページ読み込み速度の大幅な改善などありましたが、その一方で最新の開発手法(以下、WebExtensions)ではないFirefoxアドオンが利用できなくなりました。僕の場合、利用していたFirefoxアドオンが全て利用不可に。。。マジか。。。

そこで今回は、最新のFirefoxでも利用できる、作業ミスを減らすFirefoxアドオンを開発し公開しましたので紹介します!ターゲットユーザが少ないと思うので、かなりニッチなアドオンです笑

続きを読む

swift3でニュース配信アプリを作ってみる #2 (実装編)

こんにちは、サーバーサイドエンジニアの菅原です。
今回は前回の続き「swift3でニュース配信アプリを作ってみる #1 (storyboard編)」
で実装のソースをベースにみていきたいと思います。

URLSessionを使ってHTTP通信する

  • urlRequestに取得したいapiのリクエストURLを設定する
  • URLSessionを使ってタスクを作る
  • Jsonの結果データを取得する
  • 返って来たデータを整形し、Article.swiftのオブジェクトの中に入れていく。
  • task.resume()でタスクを開始する

続きを読む

DRESPIC開発の裏側 ~技術選定~

はじめまして!システムエンジニアの谷渕です。

今日は、DRESPIC( https://drespic.net )についてお話ししようと思います。

DRESPICとは…?

top

DRESPICは、2017年1月11日にオープンした、ウエディングドレスのクチコミサイトです。私はこのサイトの立ち上げエンジニアとして、昨年からDRESPICに関わっています。サイトを0から立ち上げるという、わくわくと不安といろいろな気持ちを抱えて、事業責任者の、「ドレス業界に革命を起こしたい!」という夢に乗っかって、一緒に叶えよう!と決意し、DRESPICをつくってきました。
続きを読む

ブラウザのウォーターフォール図でサイトのパフォーマンスを知る

 こんにちは。初めまして!メディア開発本部 エンジニアの東です。2年目のサーバサイドのエンジニアで、サイトのパフォーマンスチューニングをやっています。本日はWebページのパフォーマンスを知る一つの手段である、ページの表示完了までのウォーターフォール図についてその見方を紹介したいと思います。

続きを読む

もう迷わない!CSS3のFlexboxで手軽にレイアウト

みなさま、こんにちは!エンジニアの東です。

フロントエンドの開発は不慣れな私はCSSの扱いもまだまだ未熟です。

というのも、私は、自身の業務では、CSSはなかなか触る機会がないです。

それもあって、私はCSSには苦手意識がありまして・・・特にfloatの扱いがうまくできないんですよね・・・!floatを使ってコンテンツを配置しようとすると大体レイアウトが崩れて、混乱します。

そんな私でも、floatの代替として使える非常に便利なものがありましたのでそちらを紹介したいと思います。

それは、CSS3 Flexbox

今回、こちらについて紹介したいと思います。

続きを読む

Phaserではじめるカジュアルゲーム開発 – PART 1

はじめまして。メディア開発本部の榎本です。

近年、HTML5のCanvas, WebGLなどのWeb技術でのゲーム開発に向いた技術が増えて、Webブラウザ向けのゲーム開発が盛り上がりを見せています。
しかし、それに合わせて、JavaScriptによるゲーム開発フレームワークも乱立し、正直どれを選べばいいか迷ってしまうほどです。

今回はそのたくさんあるJavaScriptのゲーム開発フレームワークから Phaser(フェイザー)というフレームワークを使ってゲーム開発の基礎を学んでいきたいと思います。

Phaserとは

Phaserとは何か

Phaserとは、Pixi.jsをコアにして、サウンドや衝突判定や物理演算などを追加した2Dゲーム開発フレームワークです。

続きを読む