フロントエンドに関する記事とニュース
-
2017/10/06Groovy製のSeleniumラッパーライブラリ「Geb」で、可読性の高いテストを書いてみよう
今回はSeleniumのラッパーライブラリであるGebの紹介です。Gebは前回のSelenideと同様、Seleniumのラッパーライブラリの一つです。JVM上で動作する動的言語のGroovyで記述されており、Groovyの機能を利用した簡潔な記述が可能です。本記事では、Gebのメリットを簡単に紹介し、サンプルコードを利用しながら、Gebの基本的な記述、最近の動向やベストプラクティスをご紹介していきたいと思います。
-
2017/09/05次々と移り変わる技術のトレンドをつかみ、エンジニアとデザイナーの橋渡し役を務める――フロントエンドエンジニアの面白さとやりがいとは？
Webのフロントエンド分野はトレンドの移り変わりが激しく、スペシャリスト、つまりフロントエンドエンジニアとして生きていくためには、目まぐるしく移り変わる技術をキャッチアップしていかねばならない。第一線で活躍するエンジニアはどのように技術を吸収しているのか。また、フロントエンドエンジニアの役割や醍醐味とは何か。株式会社ディー・エヌ・エーでフロントエンジニアとして活躍する遠藤直樹氏に話を聞いた。
-
2017/08/24Javaで簡単にUIテストを書けるSelenideを使おう～Selenideの概要とテストの保守性を上げるPage Objectパターンの紹介
WebDriverのJavaラッパーであるSelenideは、WebDriverを素で使うよりも容易にかつ記述量を抑えてテストを記述することができます。本記事では、前半でSelenideの概要と特徴について解説し、後半では、日本Seleniumユーザーコミュニティが提供するテスト用サイトを題材に、Selenideを使ったWebアプリケーションテストの書き方について解説します。
-
2017/07/25SeleniumとWebDriverの最新事情～標準化が進み、さらに強力なテストツールへ！ その影でSelenium IDEは……
Webブラウザの自動操作と言えばSelenium、というのが以前にもまして一般に定着してきたように感じられます。一方で、Seleniumの利用形態や実装方法、そもそもSeleniumと呼ばれるものが持っていた意味合いや責務などは、以前のものから徐々に発展し、変わりつつあります。本連載ではSeleniumやその中核技術であるWebDriverにまつわる最新事情をピックアップし、入門から一歩踏み込んだ応用的な部分を中心にご紹介していきます。第1回となります今回は、最新事情の概観です。
-
2017/06/21Google AMP No Standalone対応前に知っておくべきポイント（2017年5月版）
本連載はLINEのフロントエンドエンジニアのチームがWeb開発において注目・活用している技術を紹介します。今回はGoogleのAMP（Accelerated Mobile Pages）対応についてお話します。実際の業務で「No Standalone AMP」実装をおこなう前にエンジニアが認識しておきたい、各種ポイントをまとめた記事となっています。
-
2017/06/12Rails 5.1でReact.js連携アプリを構築してみよう
2017年4月27日に正式リリースされたRuby on Rails 5.1では、フロントエンド回りに大きな変更がありました。新たに採用されたYarnやwebpackなどを用いて、Rails上でReact.js連携アプリを構築する手順を紹介します。また、ReactベースのMaterial-UIを使ったサンプルも紹介します。
-
2017/06/01マルチカラムも解説、Web用パーツをカスタマイズしたいときに役立つCSSスタイリング入門書
CodeZineの連載「CSSで作るWeb用パーツ」が本になりました。『デザインサンプルで学ぶCSSによる実践スタイリング入門』は、Webデザイナーやフロントエンドエンジニアでなくても「見出しやフォームをカスタマイズしたい」という方、特にHTMLとCSSは少し分かるけれど自分でコーディングできない方におすすめです。
-
2016/12/07JSフレームワークを使ったHTMLテンプレート利用のススメ
前回、Webシステムの運用現場では「HTMLの文言、デザインの修正がすぐにできない」「サーバサイドの技術がわからないとHTMLが修正できない」といった問題が生じていることを紹介しました。そして、それらの問題の原因の一つに、PHPでのSmartyやRubyのERBといったサーバサイドテンプレートがある、これらの問題はクライアントサイドでのHTMLテンプレートを使うと解決しやすくなることを説明しました。もっとも、現在フロントエンドエンジニアがチーム内にいない場合には、具体的にはどのような方法がとれ...
-
2016/10/18開局6か月／900万DL突破の「AbemaTV」、急成長するウェブサービスを支えるフロントエンドエンジニアの舞台裏
開局6か月弱で、900万ダウンロードを達成したインターネットテレビ局の「AbemaTV（アベマティーヴィー）」。ユーザー数の多さはもちろん、動画サービスの特性上、「長時間ユーザーと接する」「処理が重たい」「実用系と異なりエンターテイメント系では、ユーザーがすぐに他サービスに移行してしまう」といった課題を抱えるジャンルにおいて、UI/UXを受け持つフロントエンドの技術にかかる期待や責務は大きい。「Web Initiative Center」という専門部署を立ち上げ、サービスの品質改善を力強くドラ...
-
2016/09/16サーバサイドHTMLテンプレートからの脱却のススメ
PHPのSmartyやフレームワークが提供しているHTMLのViewエンジン（LaravelのBladeなど）、RubyのERBのようなHTMLテンプレートを使ったWebシステムでは、こんな問題に遭遇します。「HTMLのデザインや文言をちょっと変えるくらいすぐにできないものか」「デザインやUIをリッチにしたいが、PHPやRubyなどサーバ側の言語が分からないから直せない」。また、このような課題から、想定より時間がかかり、スケジュールが遅れたり、作業する担当者には、どのようなスキルをもった人（エ...
-
2016/03/09ASP.NET 5に対応したComponentOne Studio for ASP.NET MVCを試してみよう
本連載では、業務アプリケーション開発に適したクロスプラットフォーム対応のUIライブラリ「ComponentOne Studio」について、具体的なサンプルを交えながら、その特長を紹介していきます。ComponentOne Studioは業務アプリケーションを開発するエンジニアをサポートするべく、さまざまな対応を行っています。その中でも現在開発中のASP.NET 5にも早い段階からサポートしており、定期的なアップデートを通じて我々の手元に届けられます。前回では、ComponentOne Stud...
-
2015/10/21ComponentOne Studio for ASP.NET MVCにおけるWeb API連携
本連載では、業務アプリケーション開発に適したクロスプラットフォーム対応のUIライブラリ「ComponentOne Studio」について、具体的なサンプルを交えながら、その特長を紹介していきます。ComponentOne Studioは先日2015J v2がリリースされ、Windows10やVisual Studio 2015への対応が行われました。第3回は2015J v2の簡単な紹介と、注目機能であるWeb APIを中心にサンプルを交えて紹介します。
-
2015/08/24キャリアアップには得意分野以外の知識も必要？ 『絵で見てわかるWebアプリ開発の仕組み』編集者に訊く
翔泳社が8月17日（月）に刊行した『絵で見てわかるWebアプリ開発の仕組み』は、Webアプリ開発の分業化が進み、自分の関わらない作業が理解できなくなっている方に贈る、Webアプリ開発の全体像を把握するための解説書です。企画を立てたりサービス全体を統括したりする一つ上の開発者になるために不可欠な、他領域の知識を身につけておきましょう！
-
2015/08/11ComponentOne Studio for ASP.NET Web Formsで使えるコンポーネント（イベントカレンダー／グリッドビュー編）
本連載では、業務アプリケーション開発に適したクロスプラットフォーム対応のUIライブラリ「ComponentOne Studio」について、具体的なサンプルを交えながら、その特長を紹介していきます。第2回は、前回に続いて、2015J v1で大きく機能追加されたイベントカレンダー、パフォーマンス改善されたグリッドビュー、そしてマップなどのコントロールについて紹介します。
-
2015/07/14ComponentOne Studio for ASP.NET Web Formsで使えるコンポーネント（入力補助／チャート編）
本連載では、業務アプリケーション開発に適したクロスプラットフォーム対応のUIライブラリ「ComponentOne Studio」について、具体的なサンプルを交えながら、その特長を紹介していきます。第1回は、Webアプリケーション向けコンポーネントの概要と、入力およびチャート関連コンポーネントについて解説します。
-
2014/11/07ユーザーの操作は発見の宝庫！ ユーザビリティーテストでユーザー視点に立った開発をしよう
「ユーザビリティーテスト」という言葉を聞いて何を想像しますか？ マジックミラー付きの実験室でユーザーが操作している様子を観察する。そういった大掛かりなイメージを持たれがちですが、ちょっとした準備で、自分たちのオフィスで日常的に実施することができます。製品が完成した時やサービスをリリースする直前だけ行うのではなく、小さな機能の実装単位でユーザビリティーを確かめてみましょう。今回は、ユーザビリティーテストとは何なのか、やることで何がわかるのか、いくつかの具体例を元にイメージを掴んでみます。
-
2014/08/20まずは「gulp」を動かしてみよう！ ～セットアップとはじめてのタスク実行
「gulp.js」は、フロントエンドの開発や製作で便利なタスクランナーです。最初のコミットから、まだ1年ほどの若いプロダクトですが、ここのところ耳にする機会が増えてきました。この連載では、インストールからその使いこなしまで、数回に渡って紹介していきたいと思います。JavaScriptプログラマだけでなく、HTML・CSSを扱う人、PhotoshopやIllustrator使いにもユーザが広まっています。本稿も、プログラマに限らず、広いユーザ層に読んでもらえたら幸いです。
