Web UIアーキテクチャの紹介

こんにちは、同僚。



オライリー出版社の新作のうち、リリース予定のミカゴッドボルトの次の本に注目が集まりました。ミカゴッドボルトは、小冊子にもかかわらず、ウェブ開発の歴史に新しいページを開くことができます。



猫の下で更新











更新：この本で検討される予定のトピックの大まかなリストが送られました。 その中：Sassとの連携、ドキュメントの作成、テンプレートライブラリ、テスト（視覚的回帰、モジュール式、エンドツーエンド）、アセンブリ管理、継続的統合、展開、管理の正当化、そのようなアーキテクチャが必要な理由



Webは進化しており、このプロセスで、Web開発者の現代チームにおける個々の役割は変化しています。



これらの専門家がそれぞれ進歩し、プロフェッショナリズムが向上するにつれて、新しい役割だけでなく、新しい分野もWeb上に形成され始めました。



コンテンツの意思決定者について



Webの開発の初期段階では、特定のページの語彙コンテンツがそのデザイン、コード、さらには検索エンジン最適化と同じくらい重要であると本当に信じているように見える人々の層が形成されました。 彼らが現場に入る前は、コンテンツは後で問題なく延期できる問題であると考えられていました。 「lorem ipsumの設計に取り掛かり、先に進みましょう。 時間が来たら、クライアントはサイトが機能する前に、このテンプレートを実際の高品質のインスピレーションを受けたコンテンツに置き換えます。」



これらの慈善家は、ウェブがコンテンツであることを徐々に強調し始め、コンテンツには十分な時間と適切な注意が必要です。 議論はおさまりませんでしたが、そのような人々は早期計画会議に招待されたり、有能なSEO技術について相談されたり、サイトの編集戦略全体の一般的なトーンとスタイルを開発するよう求められたりしました。 問題は動いており、闘争は困難であり、主にイオナーによって導かれましたが、その結果はすでに誇りに思っています。



それで、これらの孤独な戦士のそれぞれは、彼が興味のある兄弟に会ったその運命の日まで彼ら自身の道を行きました、そして、彼らは両方ともこの闘争で彼らが一人ではないことに気づきました。 最初の友情の連絡先は、徐々に知り合いのネット​​ワーク全体を獲得しました。 最後に、同様の言語学者の大規模なコミュニティが形成され、コンテンツは単なるフィラーではなく価値のある資産であるという考えをますます促進していました。



数十年が経過し、コンテンツに対する闘争は終わったとはほど遠い。 しかし、ウェブデザイナーがサイトのメインページのために「何か他のことをする」ことをもう一度求められるたびに、誰もが彼の悲惨な叫び声を聞くようになります。 そして、ある晴れた日、2008年12月16日、Christina Halvorsonによる記事がA List Apartブログのメインページに掲載されました。 その中で、著者はコンテンツの選択には特別な戦略が必要であると宣言しました。 Christinaは、読者に「松明を手に入れて」、「コンテンツを戦略的計画と合理的な投資を必要とする重要なリソースとして扱い始める」ように求めました。 コンテンツ戦略に携わる人は、「学び、実践し、促進する」ことが奨励されます。 そのため、インターネット上で新しい規律が生まれました。



Halvorson氏の記事は、コンテンツに対する戦略的アプローチの必要性に取り組む最初のものではありませんでしたが、コンテンツ戦略の意味、精神、目的が説明され、そのような作業の専門家の要件が概説されていました。 翌朝、Webコンテンツワーカーのコホート全体が、名前、職業、共有された職業を持っていることに気付きました。 これらの専門家の多くは、ブログ、ポッドキャスト、ビデオ会議の時代に登場しており、彼らの需要の理由は、コンテンツが本当に重要だということです。



アダプティブWebの外観



ほぼ同時に、黒いタートルネックの男が現場に現れ、「インターネットにアクセスできるデバイス」とは何かという一般的な考えをひっくり返しました。 Webの歴史上初めて、オフィスや自宅の椅子に快適に配置された1024 x 768ピクセルのモニターでサイトを表示できるだけでなく、コンテンツ自体が膨大なブロードバンドインターネットチャネルだけでなく配信できることを認めざるを得ませんでした。 iPhoneの出現により、多くの画面解像度オプション、非常に異なるデバイス機能、接続速度のジャンプ、かなり混oticとした入力モードを備えたモバイルWebの新しい時代が到来しました。 開発者である私たちは、ユーザーが誰であり、ガジェットのプロパティが何であるかを推測できなくなりました。



この揺れに対応して、いくつかの新しいソリューションを試しました。 サイト自体をほとんど変更せずに、ピンチジェスチャまたはダブルクリックを使用して画面にスケーリングを実装しようとしました。 他の状況では、モバイルデバイスのユーザーをサイトの切り捨てられたモバイル指向バージョンにリダイレクトするために、ユーザーエージェント文字列検出器が実装されました。 これらのソリューションはどちらも十分ではありませんでした。



ピンチジェスチャでスケーリングが実行されたサイトでは、ナビゲーション、つまりショッピング、注文サービスに問題がありました。 したがって、モバイルトラフィックの増加は損失の増加を意味しました。 モバイルデバイスの操作に特に適したサイトの個別のバージョンを作成するには、個別の開発チームを募集する必要がありました。つまり、一度に2つのバージョンのサイトをサポートする必要がありました。



多くのモバイルサイトは徐々に放棄され、メインバージョンほど速く更新する時間がありませんでした。または、モバイルサイトの機能セットが非常に不足していたため、ユーザーがより複雑な操作を行う必要がある場合は、電話を切ってコンピューターの電源を入れる必要がありましたが、ルートや通話をナビゲートするよりも。 状況には何らかの解決策が必要でした。 最初は、多くの人がiPhoneはつかの間の気まぐれだと思っていましたが、Webの未来はこれらの小型の個人用デバイスにあることがすぐに明らかになりました。



iPhoneがリリースされてから3年後、Web開発コミュニティは、これらすべての問題に対する待望のソリューションをようやく見つけました。 2010年5月25日、Ethan MarcottはA List Apartブログに長い記事を投稿しました。これは単にResponsive Web Designと呼ばれていました。 この記事では、新しい分野については説明しませんでした。また、Web開発者が結集すべきスローガンを宣言しませんでした。 代わりに、「アダプティブWebデザイン」（略称「RWD」）は、ユーザーデバイスの画面サイズを考慮し、既存の表示領域に自動的に適合する新しい世代のサイトを作成する方法を説明しました。 著者は、このプロセスを革新的な技術としてではなく、既存のツールと手法の組み合わせとして説明しています。



レスポンシブWebデザインは、次の機能の組み合わせにすぎません。

• ラバーグリッド。幅はパーセンテージとして計算され、ピクセル単位のハードコードされた寸法はありません。
• 幅100％でコンテナに割り当てられたコンテナを満たす柔軟な画像で、表示領域の設定の変更に応じて拡大縮小されます。
• メディアクエリ-表示領域のサイズに応じて異なるスタイルを設定する機能。 これで、画面サイズに応じてページレイアウトを変更できます。

これらすべての機能は、Marcott氏の記事が登場する何年も前にブラウザに存在していました。 しかし、コンテンツ戦略の記事と同様に、レスポンシブWebデザインに関するこの作業では、これらのツールをすべて組み合わせて、誰もが必死に望んでいた結果を達成する方法を明確に説明しました。



Webインターフェイスアーキテクチャの概念がどのように生まれたのか



Webインターフェイスアーキテクチャの概念については、2013年半ばに初めて考えました。 当時、私はDrupalでクライアントインターフェイスを開発していましたが、私自身の経験から、コンテンツ戦略の専門家が対処しなければならないすべての問題と悲しみを知っていました。 インターフェース（テーマ）の設計は、常に事後に考え抜かれてきました。 これは、マシンインターフェイスの設計者と開発者が作業を終えた後、完成したレイアウトに適用された一種のメイクアップでした。 このプロジェクトに従業員を引き付けるための手順として、プロジェクトで直面した課題を雄弁に語ることはありません。 プロジェクトが開始され、そのデザインが議論され、機能要素が開発されました...その後、フロントエンドの専門家がプロジェクトに招待され、上から私たちに降格されたデザインを正確に実装し、既存のマークアップに引き込みました。



このプロセスを数回生き延びた私は、モバイルデバイスやPC向けの大量のフォトショップドキュメントから、Drupalが投げ出した離婚口に適用できるトピックを再構築するために、どのような試練に耐えなければならないかを強く思い出しました。 友達のRailsの専門家とDrupalのサイトのナビゲーションバーを設計する際に直面しなければならないすべての問題について話し合ったとき、私はそれらがすべての選択肢ではなく、まったく誇張されていないことを認めました！ マークアップの準備が整い、開発者が別の問題の解決に移るとすぐに、結果として生じるdiv、リスト、およびリンクの組み合わせを何らかの形で修正することを夢見るだけでした。 必然的に、デフォルトのナビゲーションマークアップがプロダクションで機能するという事実さえ当てにせずに、デザインのCSSレベルでとんでもないトリックに頼らざるを得ませんでした。



長年にわたり、Webインターフェース開発者のプロフェッショナリズムは、そのようなゴレミックデザインパターンを作成する能力によって判断されてきました。 「ネストされた3番目のdivに疑似要素を挿入し、このスプライトから背景画像を取得します...」-これは、率直に言って、よくない戦闘テクニックの簡単な説明です。 サイトが巨大な技術的負債に埋もれる前に立ち上げられることを期待して、私たちは穴にパッチを当てました。



私たちのタスクは常に複雑になっているため、このようなWebサイト開発プロセスは安定した状態を保つことができないことを知っていました。 したがって、旧式の方法で作業する代わりに、Webインターフェースの開発が（戦略的計画と合理的な投資を必要とする重要なプロセス）になった場合（クリスティーナを言い換えて）、プロジェクトがどうなるか想像してみました。 CSSフレームワーク、ドキュメントツール、ビルドプロセスの開発に参加し、命名規則を提案し、マークアップレベルで作業することができたらどうでしょうか。 UX開発がマシンインターフェイスの構造を決定し、その逆の場合はプロジェクトがどのようになるかを想像しました。



革命が起こったでしょうか？ 誰かが「学び、実践し、促進する」という言葉で私たちのトーチをつかむでしょうか？ しかし、共通のバナーの下に集まる前に、何を掲げるのかを決める必要がありました。 私たちのリクエストは何ですか？ 目標をどのように達成しますか？ それは何と呼ばれますか？



私の名前は何ですか



私の現在の会社はそのような仕事に従事する人に特別なポジションを提供していないことに気づき、私は空席を調べ始め、少なくとも似たようなものを見つけようとしました。 さまざまなサイトを少し調べてみると、上級開発者の後の階層の次のステップはアーキテクトであることがわかりました。 仕事の説明を読むと、心拍が速くなりました。 実際、プロジェクトのごく初期の段階で、特定のプラットフォームのコンテキストでクライアントのニーズを議論するために、特別なアーキテクトを彼に接続する必要があります。 どのテクノロジースタックを使用しますか？ どのタイプのコンテンツを使用する必要がありますか？ コンテンツはどのように作成、保存、表示されますか？ 建築家の参加により、自然に何も作成されず、すべての要素がグローバル構造に織り込まれることに気付きました。 すぐに、データベースとWebサーバーをSassディレクトリ構造に変換することができ、Webインターフェイスアーキテクトという新しい職業が生まれました。



だから、名前を思いついて、私は仕事の説明を調整し始め、そのような専門家がもたらす利点、必要な機会が与えられた場合に彼がどのようにプロジェクトに影響を与えることができるかを反映しました。 これらの考えの結果、Webインターフェースのアーキテクチャに関する簡単な説明が行われ、次の年次企業会議で開催されました。 その後、CSS Dev Confの申請書を送信し、承認されました。その後、約40分間、特別に準備されたプレゼンテーションで自分のアイデアを表現する必要がありました。



満員のニューオーリンズの聴衆に向けて読んだ私のレポート「Raising a Banner for Front-End Architecture」は、すでに最前線で戦っているWebインターフェイス開発者向けのプログラミングドキュメントになりました。 私は彼らが彼らだけではないこと、彼らを支援し確保する準備ができている人々がいることを彼らに伝えたかったのです。 さらに、プロジェクトマネージャーやセールススペシャリストと話をして、しっかりと構築されたフロントエンドの可能性と、そのようなプラクティスがチームと顧客にもたらすメリットについて説明しました。 プロジェクトに影響を与える唯一の方法は、プロジェクトの最初の段階でアーキテクチャに取り組むことです。つまり、顧客はこのクロックに料金を支払う必要があり、マネージャーはこの作業のリソースを適切に計画する準備ができています。



その後、開発者が組織内で誰であり、どのような役割を果たすかを最終的に理解した開発者からの多くの話を聞きました。 Webインターフェイスのアーキテクトとして働いていることに多くの人が気づきましたが、以前はこの用語を使用したことがなかっただけで、他の人はそのような仕事ができると感じていました。 これらの変更のイニシエーターの1つであるため、振り返らないことを好みます。 私が取り組んでいる地位が何であるかは関係ありません。主なことは、私がウェブインターフェースアーキテクトであることです。