クラウドワークス エンジニアブログ

日本最大級のクラウドソーシング「クラウドワークス」の開発の裏側をお届けするエンジニアブログ

Internet Explorerを推奨ブラウザから除外します

f:id:tatsuhiro-oishi:20210216172425p:plain

はじめに

クラウドワークスでは、ユーザーのみなさまに快適なサービスをより提供しやすくするために、Internet Explorer(以下IE)を推奨利用環境から外す予定です。

クラウドワークス 〜お知らせブログ〜 Internet Explorer 11を推奨利用環境の対象外といたします

IEをお使いのお客さまにはご不便をおかけしますが、Microsoft Edgeなどの別ブラウザへのご移行をお願いさせていただくことになります。 今回のエンジニアブログでは、なぜIEを推奨環境から外すのかをエンジニア観点でお話させていただこうと思います。

なぜIEを推奨環境から外すのか

今回この決断をしたのは以下の2つの理由からです。

現状のIEはセキュリティ更新プログラムの配信のみで、新規開発は止まっている状況です。昨今のEdgeやChromeなどでサポートされているモダンな機能はサポートされていません。 今後のクラウドワークスのサービス拡充において、IE対応による制限がユーザーへの不利益・不便となることを避けたいという思いからです。

IE特有の対応について

実装面

IEはブラウザ標準の機能に追従していないため、特有の開発対応が必要となります。例えば、利用可能なJavaScriptCSSの機能が限られるため、同等の機能を自分で提供するPolyfill(ポリフィル)が必要になるケースがあります。

以下の記事が参考になります。

また、SlackがIEOperaサポートを終了した時に出した表現がとても良いので引用させていただきます。

Slack の品質向上に集中するため、対応 OS やブラウザをできる限り限定するようにしています。古いバージョンの OS やブラウザも含めて幅広い対象をサポートすることにより、新機能の開発など、Slack の品質向上のための作業にかけられる時間がその分少なくなってしまいます。ですがこれは、私たちにとっても、ユーザーの皆さんの利便性を考えると、とても難しい決断でした。一部のユーザーの方にはご迷惑をおかけすることになり大変申し訳ありませんが、どうぞご理解いただけますよう、よろしくお願いします。

推奨環境として存在する以上、動作確認は必要となります。しかし、現実には確認漏れにより、動作が不完全な状態でリリースされたこともありました。 そのような低品質なリリースではなく、対象を限定して高品質なリリースを継続していきたいです。

一部のブラウザ専用の手法を試したり、コードの自動変換を用いれば、対応はできます。 しかし、それらの手間を考慮するより、より使いやすい機能とはなにかなどのUXに対して時間を割きたいと考えています。

コードの自動変換(Polyfill)

サポートするブラウザを減らすことで、Polyfill の量が減り、パフォーマンス改善とコードサイズの削減が期待できます。 しかし、現在は ES5 を対象としていますが、全体のコードベースから考えると ES2015 に変更するほどの効果はありません。積極的に動かなくするほどではありません。

クラウドワークスのフロントエンドの実装はまだ改善の途上であり、Polyfill の設定変更は効果をみながら行っていきます。 現在のところ、動作保証はしませんが、積極的に動かないようにもしません。

スタイルシートの適用

IEのサポートに際し、スタイルシートの適用が一番の困りごとではないかと思います。IEは他の最新のブラウザと比べて未対応要素独自の拡張仕様が多いためです。OSSで公開されているCSSフレームワークの中身を見てみると、IEのためのHackやFallbackのコメントをよく見かけ、また、IECSSで検索をするとflexboxの不具合を始めとした多くの不具合と、その回避策の記事を見つけることができます。 Microsoft自身もIEを使い続けることは技術負債を抱え続けることになり、"もううんざりだ!"と述べています。 The perils of using Internet Explorer as your default browser

このような問題と向き合い、なるべく多くのブラウザでの動作保証も大事です。しかし、Microsoftの動向を鑑みると、表現の制約を減らし新しいことへの挑戦や、UIの効果的な表現の実現に時間を使いたいと考えます。

動作確認の難しさ

クラウドワークスのエンジニア・デザイナが開発する環境はMacOSとなっており、Windowsでの開発環境がほぼ整備されていません。また、Windows(IE)のE2Eテスト環境も整っていないので、これまでは手動で動作確認していました。

エンジニアが開発中でも手軽に動作確認できる環境ではないので、そこが非常に辛い部分でした。

IEの今

クラウドワークスでのブラウザ利用率

クラウドワークスでのIEの利用率はブラウザ全体の2%程度となっており、直近5ヶ月で見たときのグラフは以下の通りでした。

  • ブラウザ種別

Chrome勢が半数を超えており、次点のSafari勢とで2強の状態です。

f:id:tatsuhiro-oishi:20210216172924p:plain

  • OS別ブラウザ種別

OSがWindowsのユーザーが30%、その中でもChromeが人気となっています。

f:id:tatsuhiro-oishi:20210216173004p:plain

スマートフォンのブラウザからのアクセスが増加傾向にあることから、IEのシェアはこれからも下がっていくと予想しています。

Microsoftの動向とIEのリスク

MicrosoftIE から Edge への移行を強く推奨しています。

弊社としましては、Internet Explorer との後方互換性が必要な業務 Web システムには Internet Explorer を利用いただき、Internet Explorer でなければならない場合以外は Microsoft Edgeをご利用いただくことを提案してきました

加えて、IEでWebブラウジングをし続けることについて、以下のような一般的なセキュリティ上のリスクも指摘されています。

IEを推奨外とした後のクラウドワークスのご利用について

IEクラウドワークスにアクセスするユーザー向けに、Microsoftの転送設定でフォローする予定です。

2020年11月にMicrosoftInternet Explorerで互換性のないウェブサイトにアクセスした場合にはURLの読み込みを拒否し、Edgeに自動的にリダイレクトする」 機能を公開しました。

この「互換性のないウェブサイト」は、非互換リストとして公開されており、ここにクラウドワークスのURLも登録する予定です。

この機能はバージョン87以降のEdgeがインストールされていることが条件となり、IEからEdgeへのリダイレクトは自動的(強制的)に行われます。社内ウェブツールなどでIEを利用したい場合は、利用者側の設定で無効にすることもできます。

Microsoftへ申請すれば個人所有のドメインでも、この非互換リストに追加してもらえます。この申請も難しい審査がある訳ではなく、メールで申し込むだけのようです。

おわりに

繰り返しとなりますが、クラウドワークスではユーザーのみなさまに快適で安全なサービスを提供できるよう日々取り組んでいます。今回のIEの非推奨化はこの取り組みの一部となります。

これまでIEクラウドワークスをご利用いただいたユーザーのみなさまには、一時的にご不便をおかけすることになりますが、ご理解とご協力をお願いいたします。

We're hiring!

クラウドワークスでは、働き方の変革に挑戦するエンジニアを募集しています!

www.wantedly.com

300GB/day出力されるログ基盤をFluent Bit + Fargate + NLBで再構築したら、エンジニアの作業効率が上がった

これは クラウドワークス アドベントカレンダー 24日目の記事です。前日は 畑中 さんの制作会社出身のデザイナーが事業会社に入って感じた5つの悩み事でした。事業会社とデザイン制作会社の違いから生まれる悩みをどう解決したかが伝わる記事でした。

クラウドワークスSREチームの @kangaechu です。最近はM1 Macを購入しました。M1 Macはアプリケーションの対応状況がまだまだなので、Goをソースからクロスコンパイルするなど、今までやったことがないことができてちょっと楽しいです。でももう少しネイティブのアプリが揃うと嬉しいな。

アドベントカレンダーSREチームに入ってからの2年間にチームでやってきたことに続き、2つめのエントリとなります。前回の記事で、Docker化したシステムの一つとしてfluentd(ログ基盤)を挙げました。ここではそのログ基盤についての詳細を書いていきます。

続きを読む

いちエンジニアがファーストビューのデザインを改修した話

f:id:murasahi:20201219073657j:plain

この記事はクラウドワークスアドベントカレンダー19日目の記事です。

クラウドテックのエンジニアをしている久村です。 2020年5月からクラウドテックに異動し、開発をメインで担当しています。 この記事では、サービスの顔とも言えるファーストビューを改修した話ができればと思います。

クラウドテックは、ハイクラスなフリーランス IT・WEB エンジニアやデザイナーに特化したマッチングサポートサービスとして 2015年4月から始まったサービスです。

続きを読む

クラウドワークス開発組織と今後の取り組み

この記事はクラウドワークスアドベントカレンダー 18日目の記事です。 はじめまして。クラウドワークスでEMを担当をさせていただいている庄司です。

EMは、Engineering Managerの略で、そのままですがエンジニア組織のマネージャでして、具体的にはチーム単位での組織設計やメンバとの1on1等を通じた課題の抽出/取り組みを行い、組織を運営する役割を担っています。 今回はEMとして過ごしてきた中で、いいなと感じたことや、組織としての取り組みについて簡単にご紹介できればと思っています。

内容については、人によってご意見が色々と当然あるかなと思いますが、あくまでも私自身の今までの経験を元にした解釈ですのでそのあたりはご容赦くださいませ。

すごくざっくりと私の経歴を書かせていただきますと、大学時代、片道3時間の通学時間の読書のなかで認知心理学アフォーダンスユーザビリティ等に影響を受けUI周りに興味を持ち、周りがメーカに就職してゆく中、webの開発会社に約20年前に就職しました。…が結局はそちら方向には向かわず、携帯電話のミドルウェア開発のベンチャーで上場含めての様々な開発経験であったり、上場企業の子会社でのゲームプラットフォームの立ち上げや運用、本社での事業立ち上げ等を経験させて頂きました。というようなバックグラウンドを持っております。

そんな経歴の私が、ご縁あってクラウドワークスにお世話になっている訳ですが、Webの世界にどっぷりではなかったエンジニアの視点としてクラウドワークスの雰囲気をお伝え出来ればと思っています。

開発組織で、良いなと思っていること

「発信」が組織に根付いている

まず、入社直後に驚いたのはドキュメントの量でした。プロダクト組織ほぼ全員がQiita Teamのアカウントを持っており、エンジニアに限らずプロダクトに関わるメンバが積極的に記事を書いています。その投稿内容は、サービスの機能説明・仕様・設計の経緯・障害対応の手順に限らず、サービス・システムの課題提起や、取組みへの提案なども含まれています。 私の見える範囲では記事の数は11,530本、Qiita以前に利用されていたConfluenceも含めるとかなりの量の記事が社内に公開されています。ルール化はされていませんが、投稿を皆さんチェックしていて、役割関係なくリアクションやコメントも積極的にされており、それがコミュニケーションの一部になっているように思います。

クラウドワークスには、クラウドワークスの重視する価値観や行動の基本が書かれた「カルチャーブック」という文章があり、その中の一つの項目に下記があります。 「成果=結果+伝達」 成果は結果だけでなく伝えることも大切という内容ですが、こういった考え、文化が定着している結果なのかもしれません。 常に新しい情報が投稿され続けることが当たり前になっていることは、すごいことだと思います。

あと、発信という意味では、アドベントカレンダーも自発的にメンバ内で準備を進めてくださいました。エンジニアに限らずPO、デザイナが協力してカレンダーを作り上げているのは、発信に加えて、クラウドワークスっぽい仲の良さが現れているんじゃないのかなと思います。

続きを読む

サービスの成長モデルを定義し、「森も見ながら木を見る」プロダクトマネジメントへ

この記事はクラウドワークス アドベントカレンダー13日目の記事です。

はじめまして、プロダクト開発部にて、crowdworks.jpのプロダクトマネジメントを担当している西村(通称チャンタマ)です。

突然ですが皆さんのサービスでは、KPIをどのように定めていますか?

一般的には、事業部全体の売上目標から因数分解して、特定の指標(会員登録数・継続率など)をKPIとしておくことが多いかと思います。 crowdworks.jpの開発チームでも、長らくそのようなKPIの立て方をしていました。

f:id:tama_1028:20201211220836j:plain

しかしながらサービスの特性や組織設計も関係して、様々な弊害が生じるようになりKPIの立て方を見直す必要性を感じるようになりました。

したがって今期からは、サービスの「成長モデル」を定義し、サービスが抱える様々な問題に対してどのように優先度をつけていくか、その開発スタイルも考え直してみました。

今回は成長モデル作成のプロセスと背景をご紹介します。

複数の開発チームを抱えるプロダクトマネージャーの方、サービス全体の開発方針、優先度の意思決定をする立場にある方などに参考にしていただけると嬉しいです。

続きを読む

© 2016 CrowdWorks, Inc., All rights reserved.