Clever Geek Handbook

サイトにアクセスせずにレスポンシブサイトを作成するためのツール

モバイルバージョンを持たないサイトがあり、モバイルユーザーが最小限の時間で快適に使用できるようにする必要があります。



サイトへの変更を高速化する方法について説明し、編集中のサイトにアクセスせずにライブサイトですばやく組版するためのツールを検討します。



通常の方法で実行できます-サイトをコピーしてマシン上で変更するか、すべてを作業サイトに直接書き込みます（これはしない方がよいです）。







ユーザースクリプト、livereload、sass、またはその他のプリプロセッサが助けになります。 このセットを使用すると、サイトの適応時間が数回短縮されます。







1.ユーザースクリプト



まず、ユーザースクリプトから始めます。これには、chrome、firefoxに基づいた任意のブラウザープラグインを使用できます。



クロムtampermonkeyが適切な場合、その例で示します。



CSSとビューポートを追加する



被害者のサイトにアクセスして、headタグの内容を確認します。ほとんどの場合、headタグの最後に記述するメタ、ビューポートタグ、スタイルを追加する必要があります。



tampermonkeyのユーザースクリプト 
// ==UserScript== // @name https://habr.com/ // @namespace http://tampermonkey.net/ // @version 0.1 // @description Minimal append link tag to head, enjoy css // @author You // @match https://habr.com/* // ==/UserScript== (function() { 'use strict'; let filename = 'http://localhost:5500/common.css'; let link = document.createElement('link'); link.rel = "stylesheet"; link.href = filename; document.head.appendChild(link); //      head let metaViewport = document.createElement('meta'); metaViewport.name = "viewport"; metaViewport.content = "width=device-width, initial-scale=1.0"; document.head.appendChild(metaViewport); })();








jQueryがサイトで接続されている場合は、接続されていない場合は通常のJavaScriptを使用します。

できた これで、表示すると、タグが追加されていることがわかります。ディスク上のファイルへの直接パスを指定することで、すでに作業できます。 サーバーの電源を入れてさらに進みます。



CSS配布用サーバー



サーバーを起動するには、多くのいずれかを使用するか、エディターでプラグインを使用します。



npmがインストールされている場合は、静的パッケージを使用します。phpがかかる場合は、サーバーなどを使用できます。



さらに簡単な方法があります。たとえば、人気のあるライブサーバーなど、Visual Studioコードとプラグインを使用します。







vscodeのcssファイルでディレクトリを開き、バーの[ライブ]ボタンをクリックします-localhost：5500サーバーが起動するので、リンクタグでlocalhost ：5500 / common.cssを指定します



プリプロセッサ



裸のcssを書きたくないし、sassを使用したいので、vscodeにライブsassコンパイラも配置します。 別のサーバーを使用している場合、sass watch common.sassサーバーが配布するディレクトリ内のコンソールをポイントすることにより、公式のsassプログラムを使用できます。

これで、このサイトのコードにアクセスすることなく、あらゆるサイトに適応するツールを作成できました。







自動更新



さらに便利なのは、cssファイルを変更するときのページの自動更新です。 自動更新には、livereloadを使用します。ほとんどの一般的なエディターと、chromeおよびfirefoxに基づくブラウザー用のlivereloadプラグインがあります。



拡張機能をchromeに、拡張機能をvscodeに入れました。 vscode ctrl + shift + p> livereload startコマンドラインのコマンドでlivereloadサーバーを起動します。



その後、ブラウザで拡張機能をインストールした後に表示されるボタンをクリックします。 すべて、CSSスタイルを変更すると、サイト上の変更がすぐに表示されます。







2. 2番目の方法は、すべてブラウザ同期



NPMおよびブラウザー同期。 これら2つの単語を知っている場合は、おそらくこの方法をお勧めします。



追加：このアプローチを試しましたが、非常に便利で、最も重要なのは非常に簡単でした！ 後で、あらゆるサイトのレスポンシブスタイルを作成する例で、このアプローチに関する詳細な記事を書きます。

モノクロームの Habraiserに再び感謝します



取扱説明書



  1. nodejsをインストールします（まだインストールしていない場合）
  2. プロジェクトフォルダーで、 npm initコンソールでプロジェクトを初期化します（初期化するときは、プロジェクトの名前を入力するだけです）
  3. Browser-syncのインストール：コンソールにnpm i browser-sync --save-devと入力します
  4. 以下の構成をコピーし、任意の名前（proxy.jsなど）で.jsファイルを作成し、構成で作業するURLを変更することを忘れないでください
  5. コンソールでノードproxy.jsを実行します
  6. 完了、サーバーは実行中です。 静的フォルダーに入れたファイルを変更するときのブラウザー同期は、自動的にページをリロードします。




Habrauser config @monochromer 
 let browserSync = require('browser-sync').create(); browserSync.init({ proxy: 'http://site.com', serveStatic: ['static'], files: ['static/**/*.*'], rewriteRules: [ { match: /<\/head>/i, fn: (req, res, match) => `<link rel="stylesheet" href="/custom.css" />` }, { match: /<\/body>/i, fn: (req, res, match) => `<script async src="/scripts.js"></script>` } ] });






このアプローチの利点：



  1. お気に入りのエディターで作業し、ブラウザー拡張機能の機能に制限されない
  2. gitによるバージョン管理




まとめ



現在、アダプティブレイアウトに十分なスキルがあれば、平均50％のモバイルオーディエンスにサイトを適合させることができ、検索エンジンはモバイルバージョンが必要であると直接書き、その可用性を確認します。



終了したら、スタイルをサイトにアップロードし、いくつかのタグを頭に追加するだけです。



追加：以下のコメントで、 ivan386はスタイルの例を挙げればいいと書いています。 この場合、新しい記事を書く必要があります。この記事では、モバイルメニューを追加して、州のWebサイトを被害者として取り上げ、それを改編します。


More articles:


All Articles