Webページを監視して表示崩れが起きていないか検出できるE2Eテストを実装しました | Recruit Tech Blog
お世話になります、フロントエンド担当をしている小原正大です。Webページの表示を監視して差異があった場合、どのページで表示の変化が起きているかを知ることが出来るプログラムを実装したのでそのことについて書こうと思います。 何につかったの？ 僕がフロントエンドを担当しているサービス『料理サプリ』で大規模なフロントエンドコードのリファクタリング行う際に表示テストを自動化するために作成しました。『料理サプリ』はPC・スマホ合わせて大体350-400ページの表示パターンが存在する比較的規模の大きいサイトです。全ページに影響を与えるような作業は大規模な回収となり、今回のリファクタリングでは表示テストの計画などの段取りが必要でした。従来の人手によるQAでは細かいバグを見過ごしたり時間がかかり効率が悪いので、可能な限り自動化しようと考え実装しました。 実装の概要 この監視のシステムは以下の２つ実装を組合わ
今からできるWebコンテンツの次のコト
10月25日、仙台で The NEXT WEB CONTENT 2015 が開催されました。主催である株式会社インフォアクシア設立11周年記念として、Web アクセシビリティを中心に、デザイン、ユーザビリティ、SEO など、Web に関わる様々な話題を扱ったイベントになりました。トピックは広く浅いわけですが、異業種の専門家が集まることで、新たな視点の発見や共通点を見つけることができました。 本イベントの様子は Togetter #tnwc2015 をご覧ください。 Web利用は『終わった』のではなく『変わった』 ここ１年「Web は終わった」というニュアンスが含まれた話題を国内外で耳にします。Mashable が「Web Design is Dead（Web デザインは死んだ）」という記事を公開して話題になりましたし、アプリの利用時間の急増から「The Web Is Dying; Apps
RAIL という Web パフォーマンスモデルの概要
RAIL を簡単に紹介する 主に Googler が、という趣ですが今年に入ってから RAIL というパフォーマンスモデルが紹介される機会が増えてきました。 RAIL は Response / Animation / Idle / Load の頭文字をとった命名で「アプリケーションのライフサイクルの観点から、それぞれのフェーズの基準時間（限界時間）を示したもの」です。 手前味噌ながら Webパフォーマンスにおけるイニシャライズとランタイム で紹介したうちの「ランタイム」部分が細分化されて、それぞれに基準時間を割り当てたようなイメージです。 Idle や Animation あたりの時間は紹介する人・タイミングによって多少ブレている印象ですが、大まかに以下のような感じです。 Response : 100ms 「UI が操作されたときユーザーにレスポンスするまでの応答時間は 100ms 以内」
Webサービスの作り方をプログラミング初心者が勉強した記録記事
近年、よりプログラミング言語習得の注目度が上昇しています。 インターネット上でプログラミングが学べるサービスも多数登場していますが、いざ勉強を始めてみると難しいと感じたり、興味はあるけれど敷居が高いと感じてしまうこともあります。 今回は、未経験者や経験の浅い著者がプログラミングを学んだ成果を記録している記事をご紹介します。 プログラミングをこれから学習する方にとって参考になる内容となっていますので、ぜひ目を通してみてください。 未経験者がWebサービスの作り方を学んで成果を記録した記事 1.ノンプログラマーが3ヶ月でWebサービスを作ってみた｜Qiita http://qiita.com/tabbyz/items/6513e84f319843c316d5 プログラミング関連の知識を記録、共有するサービスQiita内の記事です。 ノンプログラマーで趣味でたまにプログラミングをする程度という筆
10年続いているwebサービスの画像サーバをノーメンテでftpサーバからs3互換のストレージサーバに移行している話
10年続いているwebサービスの画像サーバをノーメンテでftpサーバからs3互換のストレージサーバに移行している話
受託開発の会社が自社サービスを1年運用してきた内容・結果と今後の課題 - ヴェルク - IT起業の記録
boardというサービスを正式リリースしてからちょうど1年が経ちました。 以前、「受託開発の会社が本格的にWebサービスを開発・運用してみてぶつかった課題（只今5ヶ月目）」という記事を書きましたが、その続きというか、現在の状況を書きたいと思います。 boardの開発の始まり boardは2年前の9月に開発を始めました。 その頃は起業して3年目の後半で、案件の管理や見積書・請求書作成などはExcelでやっており、案件数の増加とともに、Excel管理がだいぶしんどくなってきていました。 そこで、何か請求書作成系のクラウドサービスを使おうと思って探し始めたのですが、案件単位で受注するビジネスモデルにフィットするようなサービスがなく、また支払管理・売上管理・見込み管理など、自分が会社を経営する上で必要な部分まで欲しいレベルでカバーしているものがありませんでした。 ちょうど9月の連休があったので、自
[JS]Webサイトの使いやすさ・かっこよさを向上させる、チェックしておきたいスクリプトのまとめ
コンテンツの邪魔にならず操作も快適な画像拡大、スクロールすると一旦ヘッダが隠れるけど上にスクロールすると出現、サーチアイコンをクリックするとにょい～ん伸びて検索ボックスになるなど、ユーザビリティ・アクセシビリティに配慮され、タッチデバイスやレスポンシブ対応にも一役買う優れもののスクリプトを紹介します。
![[JS]Webサイトの使いやすさ・かっこよさを向上させる、チェックしておきたいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/0bc338c3b019bd35cf84848dd648330728cc081c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015082406.png)
クラウドソーシングを使ってWebサービスを作った話 - toyoshiの日記
私が（ほとんど）プログラムなしでクラウドソーシングを使ってWebサービスを作った話を紹介します。 以前「土日で作るWebサービス入門 - toyoshi」という記事を書きましたが、今回書いたコードは20行ぐらいなので、さらに短い時間でWebサービス（というより便利サイト？）を作ることができました。 はじめに 私はWebサービスが好きで、会社を立ち上げて、請求管理サービスMisocaというのを運営しています。 サービスは順調にユーザー数を伸ばしていて嬉しいのですが、問題は私がコードを書かなくなったということです。Webサービスが好きで会社を立ち上げたのに、開発以外の仕事が忙しくてコードは他の人たちが書くようになってしまいました。 でもコードは書きたい！Webサービスを作りたい！でも仕事以外のことをしすぎて会社の成長が遅れてはだめだ。 そういった事情から、だったらせめてプログラムをせずに自分は
Webデザイナーが独学でWebサービスを作って公開するまで
以前の投稿で紹介した個人で開発している“Sketというサービスを一般公開しました。 キリがいいのと整理のために、ここまでの経緯をまとめてみました。 作ったサービス Sket │スケット Facebookアカウントでの登録をベースとした実名制のクラウドソーシング。 また、一般のクラウドソーシングのような依頼と受注の「クライアントと制作者」という関係性だけでなく、フリーランスの方が自分に足りないリソースを補うために協力者を探す「制作者と制作者」の関係で利用できるのも特徴のひとつです。 私について フリーランスのWebデザイナーとしてWebのデザインからコーディングまでをメインに受託をしています。プログラムは過去に一度学んだことはありますが実務で使った経験はなし。 使ってる技術 PHP MySQL CakePHP Sass Grunt jQuery Bootstrap VPS Nginx Git
クラウドセキュリティ基礎 #seccamp
参加しよう！Hardening Project ( Hardening 10 ValueChain #h10v #h・v レポート )
Rails セキュリティガイド | Rails ガイド
このマニュアルでは、Webアプリケーション全般におけるセキュリティの問題と、Railsでそれらの問題を回避する方法について説明します。 このガイドの内容: 本ガイドで取り上げられている問題に対するあらゆる対策 Railsにおけるセッションの概念、セッションに含めるべき項目、有名なセッション攻撃 Webサイトを開くだけで（CSRFによる）セキュリティ問題が発生するしくみ ファイルの取扱い上の注意、管理インターフェイスを提供する際の注意事項 ユーザーを正しく管理する（ログイン・ログアウトのしくみ、あらゆるレイヤにおける攻撃方法） 最も有名なインジェクション攻撃方法の解説 1 はじめに Webアプリケーションフレームワークは、Webアプリケーションの開発を支援するために作られました。フレームワークの中にはセキュリティを比較的高めやすいものもあります。実際のところ、あるフレームワークは他のよりも安
WebCompat
Life with Web Browser Engine (Gecko, WebKit and etc), Mobile and etc. MozillaはFirefoxやFirefox OSの開発以外にもいろんなことをしてが、Mozilla社内にはWebCompat Teamってのがある。 何をしているかを説明すると、Firefoxや他のブラウザで表示されないページを解析して、なぜ表示されないのかを調べ、それを製品やWebの標準に活かすことをやってる。場合によってはコンテンツ制作元・会社へ問い合わせをして、具体的な修正方法を提示するってこともする。 今年になって彼らはアジア圏のモバイルWebサイトを集中的にみてる。具体的には中国と日本。日本も見てるけど、日本語がわからない人が見てるんじゃないのって思う人はいるかもしれないけど、チームメンバーの一人は日本に住んでいるので日本の事情もよく知っ
Webプラットフォームのセキュリティ
4. 事前学習を振り返る • HSTSを元に次のような問題点を考察した その技術では解決できない問題 端末時刻の改ざんによるHSTSの強制失効 その技術の導入により新たに生じる問題 HSTSを用いたユーザー追跡 (HSTS Supercookies) 実装の誤りに起因する問題 指定を誤るとHTTPS非対応のサブドメインがアクセス不能に 仕様上既定されていない振る舞い HSTSはWebSocket(ws:)にも適用されるのか？ CVE-2015-1244: Chrome でWebSocketにHSTSが適用されない HSTSはプライバシーモードにも引き継ぐのか？ またその逆は？ 7. 私の戦歴(参考) • 次のような仕様不備を脆弱性として指摘してきた ChromeのCSP違反レポートの送信先が<base>で制御できる https://crbug.com/431218 ChromeのHTML
優れたWebフロントエンド開発者になるには
この記事では、二人のエンジニアが書いたWeb開発者のためのアドバイスを紹介する。一人はおすすめの有用なツールとテクニックについて、もう一人はブラウザ向けに書くときに遭遇する課題への対処についてアドバイスしている。 今年のはじめ、BazaarvoiceのソフトウェアエンジニアであるRebecca Murphey氏は「A Baseline for Front-End [JS] Developers: 2015」というブログ記事を書き、クライアントサイドWeb開発に使えるツールとアプローチをJavaScript開発者にアドバイスした。記事を要約すると、彼女はこう言っている。 ECMAScript 2015を学ぶ。 Understanding ES6、ES6 Rocks、BabelJSがおすすめだ。私たちはこのリストにAxel Rauschmayer氏の新しい本、Exploring ES6を加える
1ページで完結、Web制作者が助かるチートシート・資料・PDFまとめ
作成：2015/08/10 更新：2017/04/16 Web制作 > 開発環境 ページを移動せずにテンプレートや仕様書を確認したい。今回はPCの横に貼ったり印刷したり、ワンクリックで見れるように、1ページで完結している資料をまとめました。Web制作をする上で便利なチートシートや資料・仕様書まとめです。 エンジニア速報は Twitter の@commteで配信しています。 もくじ WordPress版 受託用マニュアル １．ヒアリングシート ２．WP版ホームページ制作の流れ ３．WordPress管理マニュアル ４．WP版品質チェックシート ５．Wordpress タグ タスクランナー ６．gulp ７．Bower JavaScript 代替言語／JST ８．TypeScript ９．CoffeeScript １０．Jade コーディング用 １１．Chrome 開発ツール １２．html5
quusookagaku.com - quusookagaku リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Avoiding Temptations that Harm Website Performance — SitePoint
SitePoint recently published Lean Websites, by Barbara Bermes—a book that presents the latest techniques for improving web page performance. In this article, Barbara details some of the performance pitfalls that all too often catch us unawares. Web performance matters. Studies have shown that improvements in website performance—such as page load times—can dramatically increase user engagement and
Be mobile friendly with the new W3C Mobile Checker
As the Web has grown to adapt to the various constraints and opportunities of mobile devices, it has also become harder and more expensive for web developers to check the mobile friendliness of their web apps and web pages. Since the Web is increasingly accessed from mobile devices, we thought it essential to find a way to help developers improve the user experience of Web apps on mobile devices.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webデザイン動画講座 | 新米クリエイターズ Webメディア部
http://www.randomusefulwebsites.com/