MobilizeTodayによる総動員

Googleは2015年4月から、モバイルデバイスでの検索結果のランキングに新しいアルゴリズムを導入しました。これは、米国では既に「モバイルガドン」と呼ばれています。 これで、モバイルバージョンのサイトを持たないリソースは低い位置になります。 同時に、検索エンジンはモバイルサイトの要件を説明し、品質を評価してエラーを検出するためのツールも提供しました。 ITの巨人のこのポリシーは偶然ではありません。モバイルデバイスは世界を征服し、地盤を失っていません。



2015年春にYandexが発表した調査によると、2014年末にロシアの都市のインターネットユーザーの68％が少なくとも1か月に1回（1年前に56％）モバイルデバイスを使用してネットワークにアクセスしました。 モバイルユーザーは、サイトのオーディエンスの重要な一部となっています。 2014年には、スマートフォンやタブレットからのサイトへの訪問の割合が1.5倍に増加しました。 さらに、2014年の終わりには、ロシア人はタブレットからのスマートフォンの2倍近くの訪問を行い、アクティビティの増加も増加しました。 世界的な傾向に目を向けると、インターネットユーザーのスマートフォン所有者の割合は80％であり、成長は続いています。







モバイルデバイスからは、一般ユーザーとビジネスの両方が探しています。 それでは、モバイルバージョンのサイトを作成するときが来ました。 長く、高価で、難しい。

サイトのモバイル版が必要なのは誰ですか？

デスク調査を実施したところ、モバイルサイトの欠如はコンバージョンへの大きな打撃であり、したがって会社の収益性が高いことがわかりました。 2014年第4四半期の時点で、モスクワのモバイルユーザーの割合は31％でした。この割合は、首都との相対的な誤差が±2〜3％です。 判明したように、一定の確率で一部のユーザーは、モバイルデバイスに適合していないサイトを離れることがあります。 MobilizeToday.ruで収集された統計情報は次のとおりです。訪問者の46％がナビゲーションに都合の悪いサイトにアクセスする可能性は低く、31％は忠実なままで、23％はすぐにサイトを離れます。 単純な分析を使用して、失われた潜在的な顧客の数を推定してください！ マーケティングや技術的な理由から、ほとんどすべてのビジネスでモバイルサイトが必要です。

• ナビゲーションの利便性およびサイトでのアクションの実行 （登録、電話の注文、商品の選択）。 ユーザーは、ボタンをクリックして見逃したり、情報入力フィールドを増やしてカーソルで何らかの方法で入力することはできません。
• 電子商取引の絶好の機会 -モバイルユーザー向けの製品カードの最適化、見やすさ、バスケットの操作、注文。
• 各プラットフォームのモバイルアプリケーションの開発に料金を支払う必要はありません 。モバイルOSに関係なく、モバイルサイトはどのデバイスのブラウザーでも開きます。
• Googleの制裁を回避し、モバイル検索結果で地位を失わない機能。 グーグルは厳しいですが、グーグルであり、それを考慮する方が良いです。 4月の声明は真実であることが判明しました。非適応サイトはモバイル発行での地位を失っています。
• モバイルデバイス用の追加の設計ソリューション （ショッピングカート、ボタン、ヒント） を作成する機能 。 モバイルデバイスの購入ページは便利でわかりやすいものでなければなりません。そうしないと、ユーザーはすべてのフィールドとすべてのチェックボックスを「キャッチ」するという考えを捨てます。
• ユーザーによる自発的な購入へのビジネスの参加。 サイトの便利なモバイルバージョンが利用できることで、ユーザーはいつでもどこでもアプリケーションを操作できます。帰宅途中に突然ピザを注文したり、交通状況に立っている間に休暇のスーツケースを選択したりしたいクライアントの隣に常にいます。

MobilizeTodayチームはこの状況に注目し、解決策を見つけました。ユーザーが既存のサイトをスマートフォンやタブレットに簡単に適応できるようにソリューションを作成しました。 ソリューションの中心では、Cloud9のAceエディターを備えたクラウドベースのIDEを使用します。 内部では、Gitは視覚的なレイヤーを備えたバージョン管理システムとして使用され、変更の履歴を表示し、ブランチを作成し、競合を解決します。 特定のモバイルデバイスのインターフェイスの変更を完全に制御するために、ブラウザーでのHTMLページの読み込みをインターセプトします。 サイトをレスポンシブにする結果のファイルは、クライアントのサーバーまたはCDNに保存して、最速のダウンロードを実現できます。 ソリューションの主な機能は次のとおりです。

• サイトアドレスは変更されず、すべてのブラウザとデバイスに使用されます
• HTML / CSS / JS標準を使用してモバイルサイトの編集が可能
• 任意のUIフレームワークを使用して、jQueryMobileやBootstrapなどのモバイルバージョンのサイトを作成する機能
• 元のデスクトップページをモバイルデバイス用に最適化された新しいページに部分的または完全に置き換える機能
• localStorageを使用したビルトインキャッシングシステムにより、リクエストの数が最小限に抑えられ、モバイルサイトのパフォーマンスが向上します。
• クラウドIDEでの便利な編集とテスト
• デザイナー、開発者、テスター、さらにはクライアントまで、無制限の数の参加者をプロジェクトに無料で招待できます。
• 変更の履歴を表示する機能を備えた編集結果の自動保存
• ボタンをクリックするだけでCDNでモバイルサイトを公開する
• 適切なモバイルサイト開発により、モバイルフレンドリーで100％Googleがテスト

私たちは他のアプリケーションと多くの仕事をしましたが、必ずしもそれらが好きではありませんでした-他のデザイナーやビルダーには常に制限があります。 MobilizeTodayチームは制限を取り除くことに成功しました-HTML、CSS、およびJavaScriptを使用して、モバイルページを最初から完全に作成し、最低レベルで編集できます。

ツーインワン：クラウドIDE +モバイルデバイス向けのWebサイト最適化

MobilizeToday IDEのユニークな機能は、フロントエンドタスクを解決するためのクラウドベースのIDEとモバイルデバイス用の既存のサイトを最適化する2つのエンティティの組み合わせです。 統合ができる限り効率的に行われるようにしました。

• すべての参加者のコードをリアルタイムで編集した結果を表示する。
• captchaおよびソーシャルネットワークプラグインが機能する一方で、使用されているJavaScriptのアドレスをやり直す必要なく、「ライブ」ドメインで機能する機能。
• プロジェクトブランチ間の瞬時の切り替え。
• URLまたは一意のページ識別子によるバインドを使用して、複数のページに1つのテンプレートを使用する機能。
• ページ上の選択された視覚要素によるコード行のクイック検索、およびその逆-選択されたコード行による要素の検索。
• QRコードを使用して、目的の画面解像度で結果をプレビューし、同時に複数の実際のデバイスで結果をプレビューする機能。
• ソースコードのコンパイル、自動テスト、展開のために外部システムを構成する必要はありません。これらはすべて既に行われています。

MobilizeToday.ruは、複数の開発者と連携できるオンラインエディターではなく、ビジネス上の問題を解決するための自己完結型のシステムです。 MobilizeTodayプロジェクトには、プロジェクトで作業するためのブランチを作成する独自のユーザーインターフェイス（UI）があり、競合を迅速に解決し、プロジェクトに加えられた変更を表示するためのインターフェイスがあります。 ブランチで作業する場合、Gitコマンドを知る必要はありません。システムは、使いやすいインターフェイスを使用してバージョン管理に簡単に対処できます。 これにより、Web開発のレベルが低く、経験のある人々、さらには開発者の関与なしにテキストまたはボタン名を簡単に置き換えることができる顧客を引き付けることができます。 ユーザーは、ファイルを保存したり、リビジョンを手動で作成したりすることを心配する必要はありません。これらはすべて、GoogleドキュメントやオンラインGmailエディターのように自動的に行われます。 通常のファイルは、他のCloud IDEとは異なり、かなり控えめな場所が与えられ、テンプレートやスニペット（既製のコードフラグメント）などの編集エンティティが前面にあります。 これらのエンティティの編集は、モバイルサイトのページを変更したとき、またはページ上の特定の要素を検索したときに自動的に開きます。 このロジックは、主なビジネス上の問題を最適に解決するために作成されました。さまざまなスキルレベルの参加者が関与するモバイルデバイスのサイトインターフェイスを最適化します。



アプリケーションを操作するために、ユーザーはプログラムをインストールおよびダウンロードする必要はありません-ブラウザーのみが必要です。 開始するには、サイト所有者が初期化スクリプトMobilizeToday.ruをデスクトップバージョンのコードに追加します。これにより、メインサイトの操作とパフォーマンスに影響を与えることなく、サイトとIDEが「友だち」になり、アダプティブになります。 デザイナーとコントロールパネルを使用して適応作業が完了すると、静的なHTML、CSS、JSファイル、画像、動的なテンプレートファイルを含むすべての結果ファイルがクライアントサーバーまたはCDNコンテンツ配信ネットワークに配置されます。

完成したモバイルサイトのスキーム

1. ユーザーがモバイルデバイスからサイトを開くと、初期化スクリプトがトリガーされます。
2. スクリプトはデバイスを決定し、CDN（またはクライアントサーバー）から目的のモバイルページまたはテンプレートを要求します。 同時に、モバイルバージョンでは重くて不必要なデスクトップサイトのリソースは読み込まれません。
3. モバイルページは、CDNまたはlocalStorageブラウザーからロードされます（ページが再度開かれた場合）。 既にロードされているデスクトップページのモバイルバージョンへの変換は、外出先で実行され、その後ブラウザに表示されます。

このツールはフロントエンド開発に重点を置いているため、HTML / CSS / JSの束に主な重点が置かれています。 これらのテクノロジーに加えて、XPath 1.0またはCSSセレクターを使用して、元のデスクトップページからデータを選択します。 モバイルページテンプレートを作成するときは、値、条件付きジャンプ、ループを出力するための独自の構文でシンプルなテンプレートエンジンが使用されます。 元のDOMドキュメントを操作するためのシステムAPI関数、およびユーザーデバイスの種類（スマートフォン、タブレット）を決定するための補助関数を使用できます。 モバイルバージョンテンプレートでは、jQuery構文を使用して元のHTMLドキュメントを操作できます。 テンプレートの構文とAPIの使用例については、サイトで公開されているドキュメントで詳細に説明されています。



サーバー側で使用されるテクノロジー（CMS、純粋なHTML、またはPHP）は関係ありません。 MobilizeToday.ruは、ブラウザーでのHTMLドキュメントの読み込みをインターセプトし、サーバーから提供されたマテリアル（HTML）で既に動作します。 リアルタイムでデスクトップサイトで発生するすべての変更は、モバイルにも表示されます。 品揃えと価格の多数の変更を2つの間隔を空けたバックエンドデータベースに複製する必要がないため、これは電子商取引の分野で特に価値があります。



すべてがどのように機能し、どのインターフェイスをユーザーが処理する必要があるかについてのテスト例を見てみましょう。 プロジェクトのリストで、ユーザーはすぐに1つの無料デモプロジェクトにアクセスできます。 会社に複数のサイトがある場合は、各サイトにプロジェクトを作成し、入り口で作業するサイトを選択できます。







IDEインターフェースでは、画面幅の異なるデスクトップ、タブレット、およびモバイルエミュレーターを使用できます。 最後の2つのデバイスでは、横向きと縦向きを使用できます。 したがって、ユーザーはモバイルサイトがどのように見えるか、また何に注意を払う必要があるかをすぐに評価できます。



デバイスを選択したら、編集モードを有効にできます。 右側のブロックには、エミュレーターで開いているページのコードが表示されます。 コードにはバックライトがあり、暗い背景または明るい背景に表示できます。 開発者はコードを変更し、すぐに視覚的な結果を得ることができます。 MobilizeToday.ruインターフェースには、アイコンとツールチップを備えた左右のツールバーが含まれています。 アイコンを使用すると、テンプレートマネージャー、ファイルマネージャー、編集、デバイスタイプ、CSSスタイルの表示などのツールにワンクリックでアクセスできます。







実際のモバイルデバイスでサイトをテストするには、QRコードを使用します。







組み込みのチャットにより、共同編集モードで作業しているプロジェクト参加者が通信できます。 開発の詳細を同僚と話し合うために、サードパーティのメッセンジャーウィンドウに切り替える必要はありません。







ユーザーは、作業をより便利にする設定にアクセスできます。

• 手動保存を有効にする
• ディスプレイの配色とコードの強調表示の設定
• デフォルトのキーボードショートカットとvimエディター設定の構成
• スニペット挿入の視覚化を有効にする
• コードを記述するときのオートコンプリート機能。

一般に、モバイルサイトを作成するための統合システムは便利なソリューションであり、いくつかの利点があります。

• クラウド開発およびテスト環境（Cloud IDE）を使用すると、モバイルバージョンのサイトを簡単に変更できます。 サイトの作成後、HTMLの知識がほとんどない人でもサポートできます。
• 使い慣れたコンテンツ管理システム（CMS）を使用できます。新しいCMSで作業したり、2つのCMSで同時にコンテンツを複製したりするために従業員を再教育する必要はありません。
• サイトのモバイルバージョンは、追加作業なしで自動的に更新され、メインサイトと同じアドレスで利用できます。
• モバイルアプリケーションのバックエンドで作業したり、メインデスクトップサイトのバックエンドのロジックを修正したりする必要はありません。
• モバイルサイトは非常に迅速に作成できます。これは、検索結果で非適応サイトを下げる条件で非常に重要です。

MobilizeToday.ruプロジェクトに取り組んでいる間、最初に2か月ごとに新しいリリースをリリースすることを決定しました。モバイル開発の世界は途方もないペースで開発されており、お客様に常に最も関連性の高いツールを提供してもらいたいと考えています。 わずか数日で、次のリリースがリリースされ、いくつかの重要な変更が行われます。 最初の一歩を踏み出すのがどれほど難しいかを知っているので、ユーザーエクスペリエンスを常に改善しています。ドキュメントを更新し、トレーニング資料を追加し、jQuery MobileやBootstrapなどのフレームワークの接続を簡素化します。 また、リリース2.2では、登録ユーザーは、「猫」のトレーニングと閲覧したページ数の統計のために、プリインストールされたデモプロジェクトにアクセスできます。 将来のリリースでは、必要なオプションをいくつか追加する予定です。

• モバイルページのA / Bテストを簡単に構成および実行する機能。
• 人気のあるUIフレームワークのネイティブサポート、およびそれらに基づく既製のページ要素（メニュー、リスト、ボタン、ヘッダーなど）の提供により、開発を高速化できます。

また、製品にどのような新機能を追加したいかをユーザーの意見を知ることも重要です。フィードバックをお待ちしております。

Googleとの友情を獲得する必要がありますか？

投稿の冒頭で、モバイルデバイスに適合したサイトのバージョンへの一括移行の主な前提条件の1つであるGoogleの位置について言及しました。 検索エンジンがウェブマスターに提供するツールを使用して各サイトをチェックします。 MobilizeToday.ruを使用して最適化されたサイトは、 Mobile-Friendlyでの Googleテストに合格しています。







メインサイトは同じままであるため、MobilizeTodayを使用して適応した場合、GoogleとYandexの検索結果での位置を失うことはなく、モバイルフレンドリーなインターフェイスのおかげで、最適化されていない競合他社をバイパスし、検索結果で上位の位置を占めます。 携帯電話やタブレット向けにサイトを最適化することで、ユーザーの利便性のためにダウンロード速度を忘れず、 速度テストアプリケーションが成功します。



MobilizeToday.ruチームは、キヤノン、サンリオ、東京ガスなどの大手企業を含む日本市場向けに、eコマースプロジェクトを成功させています。 これらは私たちが対処した難しいタスクでした。 これらのプロジェクトの実装中に得られた経験は、IDEの改善に使用されました。 私たちのプロジェクトは、i3DESIGNとともに、東京で開催されたJapan IT Week 2014とバルセロナで開催されたMobile World Congress 2015で発表され、世界の多くの国の専門家がこのアプリケーションの有効性を確信しました。



PS：コード、チェックリストに波紋がある場合、またはサイトをモバイルデバイスに移植する意欲、時間、エネルギーがまったくない場合は、私たちがお手伝いします。



コメントであなたの質問に答える準備ができました！