#スマートウォッチ アプリ開発者になるのは素晴らしい考えですが、HTML 開発者だったらどうでしょうか?まったく別のプラットフォームに切り替えずに夢を実現できますか? HTML スキルをすべて捨てて、ゼロから始めなければなりませんか?心配しないで。ティゼンが助けに来ます。
Tizen は、スマートフォンからスマートウォッチまで、さまざまなデバイスに対応する Linux ファミリのオペレーティング システムです。 Tizen は Linux Foundation 内のプロジェクトですが、Tizen Association によって指導されており、そのメンバーには Samsung、Intel、その他のテクノロジー業界の有名企業が含まれています。
このチュートリアルでは、ウェアラブル デバイス用の Tizen SDK をインストールして構成する方法と、IDE を使用してスマートウォッチ アプリケーションを開発する方法を説明します。はじめましょう。
1.SDK をインストールして構成する
ステップ 1: Tizen SDK またはウェアラブル用 Tizen SDK?
現在、Tizen SDK と Tizen SDK for Wearable の 2 種類の SDK が利用可能です。あれから チュートリアルはスタンドアロンのスマートウォッチ アプリの開発に関するものです。Tizen が必要です ウェアラブルデバイス用のSDK。
Tizen 開発者 Web サイトからダウンロードできます。 操作に適切な インストール マネージャー をダウンロードする必要があります。 システムとバージョン。オンライン インストールよりオフライン インストールを希望する場合は、 SDK イメージ もダウンロードする必要があります。オペレーティング システムが Windows 8 または Windows 8.1 では、Windows に分類されたインストール ファイルをダウンロードできます。 7. Windows 8 および 8.1 では正常に動作します。
ステップ 2: 要件
お使いのコンピューターが満たすべきハードウェアおよびソフトウェアの要件については、Tizen の詳細な手順を参照してください。
お使いのコンピューターがこれらのハードウェア要件を満たしていない場合でも、SDK をインストールできます。ただし、これを行うと、スマートウォッチ エミュレータの速度が低下し、アプリケーションのテストが適切に行われなくなります。詳細については、ドキュメントを参照してください。 BIOS で 仮想化テクノロジー (VT) を有効にする方法と、Windows で データ実行防止 を有効にする方法について説明します。
ステップ 3: SDK をインストールする
- 前にダウンロードした インストール マネージャー を実行します。これは、オペレーティング システムとバージョンに応じて、tizen-wearable-sdk-2.2.159_windows64.exe のようなファイル名を持つ .exe ファイルです。
- 「Advanced」をクリックして次の画面に進みます。
- この画面で、SDK イメージ ラジオ ボタンを選択し、適切な SDK イメージを含む zip ファイルに移動します。オフライン インストールを好み、必要な SDK イメージを開発マシンに既にダウンロードしていることを前提としていることに注意してください。
- #SDK イメージ zip ファイルを選択し、ダイアログ ボックスで 開く をクリックします。 システムは「
- SDK イメージを抽出しています」というメッセージを表示します。抽出が完了したら、「OK」をクリックします。 「 次へ
- 」をクリックすると、「ライセンス契約」ウィンドウが表示されます。 ライセンスに同意し、「 次へ」をクリックします。
- 次に設定ウィンドウ が表示されます。すべてのボックスにチェックを入れて、「
- 次へ」をクリックすることをお勧めします。 最後に、 Installation Manager がインストール場所を尋ねてきたら、パスを選択し、
- Install をクリックして選択内容を指定します。 BIOS が正しく構成されている場合、Intel Hardware Accelerated Execution Manager (Intel HAXM) もこのプロセス中に自動的にインストールされます。そうでない場合は、インストール プロセスを終了し、Intel HAXMM
- がインストールできるように BIOS を構成します。 オペレーティング システムが Windows の場合は、データ実行防止 を有効にすることを忘れないでください。インストールを続行します。
- 必要に応じて、 Intel HAXM
ステップ 4: IDE の構成
SDK がインストールされているフォルダーを参照し、ide
- サブフォルダーに移動します。
- IDE という名前の実行可能ファイルを実行します。 数分後、開発したアプリケーションを保存するための ワークスペース の場所を尋ねるウィンドウが表示されます。選択した場所のパスを指定し、
- OK をクリックします。構成が完了すると、IDE が表示されます。 ステップ 5: IDE 関数
IDE の左側のペインには、
プロジェクト エクスプローラーと
接続エクスプローラーの 2 つのウィンドウがあります。 プロジェクト エクスプローラーユーザーが作成したプロジェクトを表示します。 接続エクスプローラー 現在利用可能な接続デバイス、エミュレーター インスタンス、またはリモート デバイスをリストします。
步骤 6:创建模拟器实例
- 在连接资源管理器中,点击模拟器管理器图标(最左侧的蓝色按钮)。
- 在出现的用户帐户控制窗口中点击是。这将打开模拟器管理器窗口。
- 点击新增并为模拟器实例命名。
- 点击确认后,将会创建新的模拟器实例。单击模拟器图标中带有箭头的蓝色按钮以启动模拟器。
启动模拟器需要一些时间。当它启动并运行时,您应该会看到一个带有类似于以下屏幕截图的启动屏幕的窗口。模拟器实例应显示为连接资源管理器中的一个条目。
从开始屏幕底部中间点向上滑动,转到显示设备或模拟器上已安装应用程序的屏幕。由于您尚未安装任何应用,因此仅显示设置图标。
您可以通过从屏幕顶部中间向下滑动来返回到上一屏幕或退出应用程序。
2. 开发一个简单的漫画应用
在此示例中,我们将创建一个简单的应用程序来显示漫画。让我们依次看看每个步骤。
第 1 步:创建新项目
让我们在 IDE 中创建一个新项目。
- 转至文件 > 新建 > Tizen 可穿戴式 Web 项目。
- 在出现的窗口中,选择基本 > 基本应用,然后将项目名称设置为myapp。
- 勾选使用默认位置复选框或浏览到您选择的其他位置,然后点击完成。
- 您的新项目 myapp 应显示在项目资源管理器中。
- 点击myapp左侧的小箭头展开项目结构。
- 您应该会看到一个index.html文件、一个css子文件夹、一个js 子文件夹,以及一些其他文件和文件夹。
HTML、CSS 和 JavaScript 构成了 Tizen 平台上编程的基础。如果您是 HTML 向导,那么您无需学习新的编程语言即可为 Tizen 平台编写应用程序。您可以使用现有的 HTML、CSS 和 JavaScript 技能。
第 2 步:添加文件、资产和资源
我们首先需要向 myapp 项目添加两个子文件夹:comic 和 images。为此,请右键单击 IDE 中的 myapp 项目文件夹,然后选择新建 > 文件夹。子文件夹应显示在 IDE 中展开的 myapp 文件夹中。
从 GitHub 下载此项目的源文件,然后导航到 images 子文件夹,其中包含许多 png 文件。将 png 文件复制到您刚才创建的 images 子文件夹中。
您可以将文件粘贴到Project Explorer窗口中的images子文件夹中,方法是右键点击子文件夹并从弹出菜单中选择粘贴 .
接下来,右键点击 comic 子文件夹并选择新建 > 文件,在 comic 子文件夹中创建具有以下文件名的 9 个 HTML 文件>。确保包含文件的 .html 扩展名。
- page1.html
- page2.html
- ...
- page9.html
现在,comic 子文件夹中应该有九个 HTML 文件。
第 3 步:添加代码
现在让我们编辑 index.html 中的代码。该文件是您的应用程序的入口点。双击 index.html 在 IDE 中打开该文件。 将 <title></title>
标记的内容更改为 <title>2nd Race</title>
。接下来,使用以下内容更改 标记的内容:
<body> <div> <div><img src="/static/imghwm/default1.png" data-src="images/coverpage.png" class="lazy" alt="Cover Page" /></div> <div><a href="#" class="btn" ><<</a><a href="comic/page1.html" class="btn" >>></a></div> </div> </body>
我们所做的就是向页面添加一个图像和两个导航到其他页面的按钮,因为我们的漫画将有十页。完成这些更改后,从菜单中选择文件 > 保存来保存文件。
如果您不熟悉 HTML 和 CSS,Tuts+ 提供了大量优秀教程,可帮助您快速掌握 Web 开发的基础知识。
接下来,双击 css 子文件夹中的 style.css 并更改其内容,如下所示。
* { font-family: Verdana, Lucida Sans, Arial, Helvetica, sans-serif; } body { margin: 0px auto; background-color:#0a3003; } img { margin: 0; padding: 0; border: 0; width: 100%; height: auto; display: block; float: left; } .btn { display: inline-block; padding: 15px 4% 15px 4%; margin-left: 1%; margin-right: 1%; margin-top: 5px; margin-bottom: 5px; font-size: 30px; text-align: center; vertical-align: middle; border: 0; color: #ffffff; background-color: #4b4237; width: 40%; height: 80px; text-decoration: none; }
我们为正文、图像和导航菜单添加了一些样式。完成更改后,保存文件。
同样,将代码添加到您创建的所有其他 HTML 文件中。 css 子文件夹中的 style.css 文件必须从外部链接到所有这些 HTML 文件。如果您不确定此步骤,请从 GitHub 下载源文件并检查源文件以进行澄清。
第 4 步:测试应用
要测试您的应用,请选择myapp项目文件夹,然后从菜单中选择项目 > 构建项目构建项目。确保模拟器实例已启动并正在运行。
右键单击myapp文件夹,然后选择运行方式 > Tizen 可穿戴 Web 应用程序以在模拟器中运行该项目。使用用户界面中的箭头按钮导航到下一页或上一页。从屏幕顶部向下滑动可退出应用程序。
结论
在本教程中,我们使用 Tizen SDK 构建了一个简单的漫画应用程序 可穿戴并在捆绑的智能手表模拟器上运行 IDE。当您准备好安装并运行它时,真正的乐趣就开始了 物理设备。
您可以在 Samsung 和 Tizen 开发者网站上找到大量附加信息。你还在等什么?
以上がスマートウォッチ アプリ開発のために Tizen を探索する: 概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ブール属性は、値なしでアクティブ化されるHTMLの特別な属性です。 1.ブール属性は、無効化された入力ボックスを無効にするなど、存在するかどうかによって、要素の動作を制御します。 2.彼らの実用的な原則は、ブラウザが異なっているときに属性の存在に応じて要素の動作を変更することです。 3.基本的な使用法は、属性を直接追加することであり、高度な使用法はJavaScriptを介して動的に制御できます。 4.一般的な間違いは、値を設定する必要があると誤って考えており、正しい執筆方法は簡潔にする必要があります。 5.ベストプラクティスは、コードを簡潔に保ち、ブールのプロパティを合理的に使用して、Webページのパフォーマンスとユーザーエクスペリエンスを最適化することです。

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1)w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2)リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3)HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1)HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2)コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3)HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの将来は、無限の可能性に満ちています。 1)新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2)Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3)パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境

ホットトピック









