ウェブフロントエンドhtmlチュートリアルWeb バージョンの Jianshu を個人用の Jianshu デスクトップ アプリケーションにすばやく変換_html/css_WEB-ITnose
最近Googleの拡張機能やアプリケーションにとても興味があったので、公式ドキュメントを勉強して記録としてこの記事を書きました。もし間違いがあれば、転載する必要がある場合はご指摘ください。ソース。
1. 技術要件
デスクトップ アプリケーションを作成するための HTML CSS JavaScript などのフロントエンド テクノロジの使用方法 そういえば、Google Chrome は素晴らしい製品だと言わざるを得ません。 V8 エンジンは Chrome での JavaScript の実行効率を大幅に向上させました。Google Chrome はオペレーティング システムと考えることもできます。Chrome アプリはその上で実行されるアプリケーションです。 Chrome アプリの開発は非常に高速で、非常に興味深いテクノロジーです。例として、短い本の Web バージョンをデスクトップ アプリケーションにすばやく組み込んでみましょう。また、互換性もあります。
ドキュメントと書籍のリファレンス: 公式ドキュメント: chrome apps about_apps 参考書籍: Chrome 拡張機能とアプリケーション開発
Google を使用して Web ページをデスクトップ アプリケーションに直接構築すると、これは非常に簡単で、開発者は HTML CSS JavaScript フロントエンド テクノロジを習得するだけでよく、公式ドキュメントと組み合わせることで、基本的にすぐに習得できます。したがって、基本的な HTML CSS JavaScript テクノロジがあれば、独自の特性を備えた簡単なデスクトップ アプリケーションをすぐに開発できます。逆に、Baidu にアクセスしてください。すぐに使いこなすことができます。この記事の目的: 短い本の Web バージョンをデスクトップ アプリケーションにすばやく変換します。Webview タグをマスターするだけで、短い本のデスクトップ アプリケーションが完成します。コードレベルを説明する前に、完成したレンダリングを次に示します。
2016-02-20 19:22:14 .png
2. アプリケーションの説明
アプリケーションを作成する前に、Chrome アプリにどのようなファイルを含めるべきかを説明させてください。これは次の部分で構成されます。
- manifest ファイルは、アプリに関する情報を Chrome に提供します。このアプリは何ですか?どのように機能するのでしょうか?追加でどのような権限が必要ですか?
- バックグラウンド スクリプトイベント ページを作成し、ソフトウェア ライフ サイクルを確実に管理するために使用されます
- すべてのコードは、HTML CSS JS を含む Chrome アプリ パッケージに含める必要がありますおよびネイティブ クライアント モジュール。
- すべての アイコン およびその他の有益なリソースは、パッケージに含めるのが最適です
- 注: さらに詳しく知りたい場合は、公式ドキュメント: chrome apps first_app
これを理解した後、コードのディレクトリ構造を見て理解することができ、1 つずつ説明します。
2016- 03-05 23:05:43.png
2. コードの説明
css/images/js/ フォルダーと main.html があることがわかります。 json ファイルを図に示しますが、最も重要なのは、manifest.json main.html background.js の 3 つのファイルです。以下の説明では、これらの 3 つのファイルにも焦点を当てます。 2.1.manifest.jsonmanifest.json ファイルの役割は、上記のアプリケーションの説明で明確に説明されています。実際、Chrome アプリだけでなく、Google 拡張機能にも json 形式のマニフェストが必要です。したがって、manifest.json ドキュメントは重要です。コードは次のとおりです:
{ "app":{ "background":{ "scripts":["js/background.js"] } }, "manifest_version":2, "name":"简书", "version":"0.1.0", "description":"谷歌应用版的简书，对网页版本作出一些优化#__#,添加到桌面方便启动.", "icons": { "16": "images/ico_16.png", "48": "images/ico_48.png", "128": "images/ico_128.png" }, //权限 "permissions":[//这里需要简书网页域名的权限以及webview调用简书页面显示到新窗口 "http://www.jianshu.com/*", "webview" ]} 上記のフィールドの意味は非常に明確なので、見てみましょう:
app //Event Page会监听onLaunched事件，随即创建窗口，应用介绍有说这个作用，这里意思是app下面的background域会通过js/background.js创建窗口。manifest_version //整数表示文件自身格式的版本号,按照这个写就好了name //应用名称version //版本号其他都是某字段对应的意思，这里不一一解释
さらに詳しく知りたい場合は、私が勝ちましたGoogle の公式ドキュメントがすべて翻訳されたとは言えません。詳細な手順についてはマニフェストを参照してください。 2.2.main.htmlmanifest.json ファイルを定義すると、ブラウザーはアプリケーションの名前、実行方法、必要な権限を認識できるようになります。したがって、アプリケーションが開始されると、アプリケーションはイベント ページを通じて onLaunched イベントをリッスンし、ウィンドウを作成します。それでは、ウィンドウにはどのようなインターフェイスが表示されるのでしょうか。このインターフェイスは main.html ファイルです。このインターフェイスは主に開発者の気分に依存しますが、必要に応じて何でも記述できますが、その機能については後述します。コードは次のとおりです。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>简书桌面版</title> <link rel="stylesheet" type="text/css" href="css/main.css"> <script type="text/javascript" src="js/control.js"></script></head><body> <div id="title_bar">简书--找回文字的力量 <a id="close"></a> <a id="minimize"></a> </div> <webview id="web_content"></webview></body></html>
main.html ファイルのコード構造は非常に単純です。このインターフェイスは、タイトル、コントロール ボタン (閉じると最小化)、および 3 つの部分に分けることができます。 WebView によって表示されるメインコンテンツ ウィンドウが表示された後、ウィンドウのスタイルを変更したい場合は、次のように CSS ファイルを追加します。
//添加边框body{ margin: 0; padding: 0; border: #EEE 1px solid;}//标题栏部分样式#title_bar{ -webkit-app-region:drag; //作用是让鼠标可以拖动窗口界面 height: 26px; line-height: 26px; font-size: 15px; background-color: #EEE; padding: 0 10px; box-sizing: border-box;}//控制图标样式#title_bar a{ position: relative; -webkit-app-region:no-drag; //让控制图标可以被点击 display: inline-block; float: right; height: 14px; width: 14px; margin: 6px; border: gray 1px solid; box-sizing: border-box; border-radius: 7px;}#close:hover{ background-color: #cf4646;}#minimize:hover{ background-color: #46B6CF;}/** * show content * 这定义webview调用简书网页页面后宽高的定义 */#web_content{ width: 100%; height: 614px;} わかりました。ウィンドウのスタイルはおそらく書き出されます。次に行うことは、このページをウィンドウとして表示する方法です。これは、background.js ファイルに応じて異なります。 2.3.background.js簡単に言うと、background.js はアプリケーション起動時に作成されるウィンドウを指定します。 上記のコード:
//Event Page监听onLaunched事件chrome.app.runtime.onLaunched.addListener(function(){ var screenWidth = screen.availWidth; var screenHeight = screen.availHeight; var width = 1200; var height = 640; var main_window = chrome.app.window.get('main'); if (main_window) { main_window.show(); }else{ //这里就创建了一个id是main的新窗口，窗口内容是main.html chrome.app.window.create("main.html",{ id:'main', bounds:{ width:width, height:height, left: Math.round((screenWidth-width)/2), top: Math.round((screenHeight-height)/2) }, minHeight: height, minWidth: width, maxHeight: height, maxWidth: width, frame: 'none'//不显示标题栏目，因为我们自己有写标题样式，不用使用默认的。 }); }}); これを見ると意味がわかります。コメントを介してコードを確認します。アプリケーションが作成されたので、インターフェースがどのようなものかを見てみましょう。ただし、その前に、まずアプリケーションを Google Chrome にロードする必要があります。Google Chrome を開き、アドレス バーに chrome://extensions/ と入力し、開発者モードを開いて、解凍した拡張機能をクリックしてロードします。最後に [ロード] をクリックします。作成したアプリケーション パッケージが正常にロードされると、次のようになります:
jianshu.png
クリックして開始したら、次を参照してください:
2016-03-06 12:07:14.png
main.html很好地显示出来了，其中标题（简书--找回文字的力量），两个控制按钮，中间一大快空白部分（空白部分是即将显示的主题内容）都是我们刚才定义的。现在我们就差最后一步就可以完成这个简书桌面应用了，就是利用Webview Tag调用简书网页页面，将其显示在main.html的
//webwiew methodswindow.onload = function(){ var web_content = document.getElementById('web_content'); web_content.src="http://www.jianshu.com/";//定义获取的网页页面//在应用显示之前加载以下文件，但是应用加载出来后，在应用里面某些界面还需要脚本，所以下面又增加了一个方法。 web_content.addContentScripts([ { name: 'jianshu', matches: ['http://*.jianshu.com/*'], css: { files: ['css/jianshu.css'] }, js: { files: ['js/jquery.1.11.3.min.js','js/jianshu.js'] }, run_at: 'document_start' }]);//在每次页面加载后加入以下文件 web_content.addEventListener('loadcommit', function(e) { web_content.executeScript({ file: "js/jquery.1.11.3.min.js" }); web_content.executeScript({ file: "js/jianshu.js" }); });//控制按钮的方法，缩小以及关闭，还多写了一个最大化的方法，不过没有调用 var current_window = chrome.app.window.current(); document.getElementById('minimize').onclick = function(){ current_window.minimize(); } document.getElementById('close').onclick = function(){ current_window.close(); } document.getElementById('maximize').onclick = function(){ current_window.isMaximized()?current_window.restore():current_window.maximize(); }} 完成后界面是这样的：
2016-03-06 12:24:57.png
2.4.增加自己的特色到了这一步，恭喜你，你已经可以自己打造一个桌面应用了，到此，我们的简书桌面应用已经可以运行，我们现在要做的就是收尾工作，既然都已经将网页版本的简书都放进了我们的webview标签之中，那么我们为何不写一些自己想要的样式呢？在control.js文件中，我们分别引入了js/jquery.1.11.3.min.js js/jianshu.js css/jianshu.css文件，那么它们是干么的呢，这些文件可以在简书页面加载时候一同加载进去，让我来演示一下就明白了。比如说，在上面的图中左侧有个手机按钮来提示下载简书app，但是我已经下载了不想再看到，所以我可以写个js将其隐藏掉，将代码写在js/jianshu.js里，审查元素，知道其class是：ad-selector，所以可以这么写：
$(document).ready(function(){ $(".ad-selector").hide(); //将那个图标隐藏 $(".search-form").removeAttr('target');//不要target属性 $('a').removeAttr('target');}) 我们可以来看看效果：
2016-03-06 12:25:48.png
怎么样，还不错吧，同样的，如果你对简书布局有什么想改动的地方，可以将css代码写在 css/jianshu.css中，好了，现在简书桌面应用已经打造完成了，只要将这个应用移动到你的桌面，就可以和使用其他应用一样使用了，而且兼容所有平台，当然前提是你得有谷歌浏览器。
3.总结
终于，我们将网页版简书打造成了桌面版，是不是非常方便，总结来看就是我们先定义 manifest.json文件，告诉浏览器我们编写的应用是什么，怎么启动什么的，然后再定义启动页面main.html,最后background.js将其作为窗口调用，这样一个桌面应用就完成了，如果要进行修改，可以利用webview进行引如css js文件，就如同js/control.js引入的js/jianshu.js css/jianshu.css文件，就是这样。
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？Mar 04, 2025 pm 12:32 PM公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？Mar 17, 2025 pm 12:27 PMこの記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？Mar 17, 2025 pm 12:20 PM記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
WebページのPNG画像にストローク効果を効率的に追加する方法は？Mar 04, 2025 pm 02:39 PMこの記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています
＆lt; datalist＆gt;の目的は何ですか 要素？Mar 21, 2025 pm 12:33 PMこの記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; Progress＆gt;の目的は何ですか 要素？Mar 21, 2025 pm 12:34 PMこの記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
HTML5＆lt; time＆gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素？Mar 12, 2025 pm 04:05 PMこの記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします
＆lt; meter＆gt;の目的は何ですか 要素？Mar 21, 2025 pm 12:35 PMこの記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。
EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
