[NativeScript] AngularでiOS、Androidアプリが作れる?! NativeScript試してみた!

Angular関連で調べていたら、

Angularでスマホアプリが作れるという

NativeScript』を発見!!!

どんなことができるか試してみました。

2018/08/26 追記
Angularを使うほどのガチガチ(画面遷移多い等のコンテンツもりもり)のスマホアプリを作る気はないので、ReactNativeに乗り換えました。

詳しくわ ⇨ React Native でシンプルなメモアプリを作った!

個人レベルのスマホアプリ開発にAngularは向かないと判断しました。

それにAngularのチームもAngularをクロスプラットフォーム化するよりも、

PWAでいいやん?って思ってそうです。(ストア承認いらないし。。。)

NativeScriptを使うのは、

TypeScriptオンリーか、Vue.jsをスマホアプリ開発でも使いたい場合でしょうか?

試してないので、ご意見あればコメントよろしくお願いします。

この記事はAngularでNativeScriptのチュートリアルを解説しているので、どうしてもAngularでスマホアプリをしたい方の参考になれば嬉しいです。

目次

Hello World!!!

では、お決まりのあれやってみます。

スマホに例のあれを表示できました。

NativeScriptのWelcomeのページの、

Get Started → 「Get Started with TypeScript & Angular

をクリックすると不思議な画面に飛ばされます。

(アプリ作っている人からしたらいつも見るやつなのかな?)

どうやら出てくるQRをスマホで読み込めばいいらしい。。。

と思ったけど、そうじゃなくて、スマホのアプリをインストールして、

そのアプリからQRを呼んでね。ということらしい。

二つのアプリをインストールしてみた。

  • NativeScript Playground
  • NativeScript Preview

上の方を起動してQRコードを読み取ると・・・

パソコン画面がエディターに早変わり。

真ん中を拡大。

Angularやってる人からしたら馴染みのあるコード。

そして、スマホの方を見てみると。

まさか、スマホでHello Worldをやる日が来るとは!!!!

ただ、物足りないので少しいじってみたけど、表示されない。。。

`<div>Hello World</div>`
`<p>Hello World</p>`

よくわからないので、用意してあるチュートリアルやってみます。

NativeScriptの基本を学ぶ

チュートリアル:レッスン1です。

(ここからは公式ページの翻訳になります。必要なときは私のコメントをこのように小さく書いておきます。)

NativeScript&Angularスタートガイドへようこそ。

この実践的なチュートリアルでは、

クロスプラットフォーム

iOSとAndroidアプリをゼロから構築します。

この最初のレッスンでは、

NativeScriptの概要、

Playground環境の使用方法、

およびこのチュートリアルで構築する内容を学習します。

このガイドで問題が発生した場合は、

NativeScriptコミュニティフォーラムが役立ちます。

このチュートリアルを表示している ペイン は展開可能です。

拡大または縮小して、あなたに適した幅を見つけてください。

ステップ1.最初のアプリを起動して実行する

あなたが現在使っている環境を

NativeScript Playgroundといいます。

NativeScript Playground

NativeScript Playgroundは、

簡単なNativeScriptアプリケーションを

開発するためのブラウザベースの環境です。

ネイティブのiOSやAndroidの開発に必要な

さまざまなSDKやツールをインストールすることなく、

アプリを開発できるので、

NativeScriptの学習を始めるには最適な場所です。

このガイドを完了するために必要なのは、

iOSまたはAndroidデバイスだけです。

実際にNativeScriptプレイグラウンドを見てみましょう。

先程、紹介したHello Worldを表示できてればOKです。

あなたはあなたの最初のNativeScriptアプリを

あなたのデバイス上で実行しています!(公式興奮。)

あなたのアプリが起動しているので、

ちょっと試してみましょう。

ステップ2.開発ワークフローの確立

NativeScriptでは、

JavaScriptを使用して

ネイティブiOSやAndroidアプリを開発できます。

このアプローチの利点の1つは、

NativeScriptはファイルが変更されるたびに

バイトコード ビルドを実行する必要がないため、

NativeScriptがアプリケーションをすばやく更新できることです。

(めっちゃはやい、ノンストレス)

これをいくつかの更新を行うことで実際に見てみましょう。

コードをいじってみよう!

アプリのapp / app.component.tsファイルを開き、

template:のところのみを次のコードに置き換えます。

template: “<Label text=’hello NativeScript’></Label>”

これにより、ラベルのテキストが更新されます。

WindowsではCtrl + S、

macOSではCmd + Sを入力して変更を保存します。

端末のアプリは自動的に更新されます。

(この辺はAngularと同じですね。まさかスマホで。。。)

複数のデバイスで同時に開発することができます。

複数のiOSまたはAndroidデバイスをお持ちの場合は、

それぞれにNativeScript Playgroundアプリをダウンロードし、

このアプリのQRコードをスキャンしてください。

NativeScriptプレイグラウンドでは、

Ctrl + SまたはCmd + Sキーボードショートカットで

すべてのファイルが保存されます。

このガイドの後半では、複数のファイルを変更する予定で、

その単一のキーボードショートカットを使用して、

すべてのファイルを同時に保存することができます。

NativeScriptを使用することの最大のメリットの1つは、

実際に実際に見たような高速開発ワークフローです。

コードを変更して、複数のデバイスであっても

それらの変更を即座に確認することができます。

上部にある[SAVE]ボタンをクリックすると、

現在のプレイグラウンドの作業を保存できます。

これにより、将来使用するために

ブックマークできるURLが生成されます。

NativeScriptがほかと違うところ

(訳者は他を知らないので公式の鵜呑み。)

NativeScriptでは、

ネイティブのiOSとAndroidの

ユーザーインターフェイスコンポーネントを

使用してアプリを構築します。

NativeScriptは、WebViewまたはWebブラウザを使用しません。

これは単純な<​​Label>を使用するときは明白ではありませんので、

もう一度変更して、NativeScriptの可能性を理解してください。

app / app.component.tsファイルを開き、

その内容をチャートを示す次のコードに置き換えます。

このコードが現在行っていることを

正確に理解しなくてもOK。

AngularとNativeScriptが次のレッスンで

どのように機能するかについて学習します。


app / app.component.tsファイルを保存します。

あなたのデバイス上に次の図が表示されます。

Groceriesは、

このチュートリアルで作成する

アプリケーションの名前です。

いくつかのコード行で完全にネイティブの

iOSとAndroidのチャートを使用しているアプリになったね。

クールだって、そうだろう?(俺たちが作ってるんだ当たり前だろう👍)

NativeScriptプレイグラウンドの

仕組みをシンプルにを説明したので、

次のレッスンで、NativeScriptとAngularについて学びます。

最初から完全なアプリを構築します。

NativeScriptプレイグラウンド画面の

下部にある「エラー」セクションに注意してください。

このチュートリアルでエラーが発生した場合は、

このペインにエラーが表示されます。

Sidekickを使ってみよう!

使い方がわけわからんので一旦保留にしました。

チュートリアルの続きはこちら:ユーザーインターフェイスの作成
チュートリアルの途中ですが、一旦脇道にそれます。

私としてはチュートリアルを続けたいのですが、

前のステップを終えたら公式さんがこんな画面をだしてきました。

軽く覗いてみます。

Sidekickを使用してNativeScript開発環境を強化しましょう!

Sidekickは、次のことにお役に立てます。

  • お気に入りのコードエディタ、ソースコントロール、および使用する他のツールを補完
  • 視覚的に魅力的で簡単に保守しやすいアプリケーションを作成するための豊富なスターターテンプレートを提供
  • プラグイン管理、クラウドビルド、豊富なデバッグ経験を提供

こんな事書かれたら試さない訳にはいかない。

インストールで困ったところ

インストールして、英語ばかりの表示がでて困りました。

コピペできず、機械翻訳できなかったので、

打って、訳してみました

you can opt to send anonymous usage statistics to help us improve nativescript sidekick. this information will be used to identify trends and usage patterns, and by doing so, improve the quality of the ptoduct and the services it offers. the gathered anonymous data is kept confidential and will be used strictly to enhance the user experience.

(訳)

あなたは匿名の使用統計を送信して、

私たちが原住者(使用者?)の仲間を改善するのを助けることができます。

この情報を使用してトレンドと使用パターンを特定し、

それによって提供されるサービスの品質を向上させます。

収集された匿名データは機密保持され、

厳密にユーザーエクスペリエンスを向上させるために使用されます。

if you agree to participate in this program , we will:
・collect information about the software and hardware configuration that nativescript sidekick needs to function.
・collect information on how you use nativescript sidekick and its services

(訳)

このプログラムに参加することに同意する場合、私たちは以下を行います:

・ネイティブスクリプトの仲間が機能するために

必要なソフトウェアとハードウェア構成に関する情報を収集します。

・ネイティブスクリプトとそのサービスの使い方に関する情報を収集する

無料でいろいろ用意してもらっているので、

そのくらい送ります!!!!『YES』

下の規約の同意にもチェックが必要のようです。

開発する上で規約は大切だと思いますが、

面倒なので読んでません。m(_ _)m

規約↓

NativeScript Sidekick Terms of Service 03_30_18

インストールしたけど、使い方が分からず断念。。。

さて、気を取り直してチュートリアルやっていきましょう。

ユーザーインターフェイスの作成

さて、チュートリアル:レッスン2にいきます。

このレッスンでは、

マークアップ、スタイリング、イメージなど、

NativeScriptユーザーインターフェイスを

構築する方法を学習します。

これを行うために、このガイドでは、

以下のことを行う食料品管理アプリ

Groceries」を構築していきます。

  • 既存のRESTfulサービスに接続
  • ユーザー登録とログインを提供
  • 認証されたユーザーが食料品をリストに追加および削除を可能に
  • クロスプラットフォーム(iOSとAndroid)を実行

このチュートリアルを最後まで実行すると、

次のようなアプリが表示されます。

では、ユーザーインターフェイスコンポーネントを

追加する方法を見てみましょう。

ステップ3. UIコンポーネントの追加

Web用のアプリケーションと

NativeScriptを使用したアプリケーションの主な違いは、

使用するUI要素にあります。

NativeScriptアプリケーションはブラウザを使用せず、

DOMを持っていません。

したがって、<span>のような要素は単に機能しません。

代わりに、NativeScriptは、

それぞれがネイティブの

iOSとAndroidのコントロールで実装された、

幅広いUI要素の スイート を提供します。

例えば、一つ前のステップの<Label>は、

実際にはiOSではUILabel、

Androidではandroid.widget.TextViewとして

レンダリングされます。

NativeScriptを使用することの素晴らしい点は、

これらのネイティブの詳細が

開発者として透過的であることです。(わかりやすいということ?)

<Label>と入力し、NativeScriptでレンダリングの詳細を処理させます。

Groceries UIの構築を開始するための

新しいUIコンポーネントを追加して、これを実行しましょう。

app / app.component.tsファイルを開き、

その内容を次のコードに置き換えます。

次に、app / login / login.component.htmlファイルを開き、

次のコードを貼り付けます。

Ctrl + SまたはCmd + Sを使用してファイルを保存します。

デバイスに次のユーザーインターフェイスが表示されます。

この例では、特にAngularを初めて使用した場合、

多くの疑問があるでしょう。

このチュートリアルでは、

今まで気になっていた疑問を解消することに役に立つでしょう。

ここでは、UIコンポーネントに焦点を当てる前に

確認しておきたいことがいくつかあります。

WHY TYPESCRIPT?

TypeScript は、NativeScriptとAngularの両方を使用する

JavaScriptの型付きスーパーセットです。

NativeScriptプレイグラウンドと

NativeScriptコマンドラインインターフェイスの両方で、

TypeScriptをシームレスに使用できるようになりました。

変更するたびにTypeScriptコードをJavaScriptにコンパイルするためです。

TypeScriptは、コード補完などの強力な機能と、

すべてのWebブラウザでサポートされていない

JavaScriptの新しい機能を使用できるため、

JavaScript開発者に多くのメリットをもたらします。

「import」のキーワードは何をしていますか?

importキーワードはJavaScriptの新しい機能で、

関数、変数、クラスをあるJavaScriptモジュールから

別のJavaScriptモジュールにインポートすることができます。

この場合、importコマンドを使用して、

angular / core npmモジュールから

Angular Componentクラスのリファレンスを取得しています。

@COMPONENTは何ですか?

(公式わかりにくい、、、

簡単に言うとTSファイルと関係があるファイルや

それらのオプションの設定をするところ。つまり、

TSファイルをどう扱ってほしいかを書くところ。)

Angularでコンポーネントは、ビュー、

またはユーザーが見るユーザーインターフェイスの

一部を管理します。

コンポーネントを使用して

個々のUI要素またはページ全体を定義することができ、

最終的にはこれらのコンポーネントに一連のロジックを追加し、

それらを使用してアプリケーション全体を構築します。

Componentという構文で、

Componentクラスが使用されるという

興味深い方法に注目してください。

これはTypeScriptデコレータで、

TypeScriptクラスまたはメソッドに

追加情報を付けることができます。

今のところ、空のAppComponentクラスに

メタデータ設定を追加する方法と考えることができます。

@ComponentデコレータのtemplateUrlプロパティは、

このコンポーネントに対してレンダリングする

テンプレートファイルをNativeScriptに通知します。

このガイドでは、NativeScriptテンプレートは

HTMLサフィックスではありませんが、テンプレートファイルには

.html syntaxesが使用されています。

これは、syntaxesが一般的な開発IDEで

最も優れた構文強調を提供する傾向があるためです。

(tap)や[text]のようなAngular構文は

有効なXMLではないため、

このガイドではテンプレートに

.xmlサフィックスを使用していません。

デコレータのselectorプロパティは、

別のコンポーネントのテンプレート内での

コンポーネントの使用方法を定義します。

例えば、selector: ‘foo-bar’でセレクタを定義する

コンポーネントは、別のコンポーネントによって

template: “<foo-bar></foo-bar>”というテンプレートとして使用できます。

NativeScriptは、最初のAngularコンポーネントを

自動的に使用するので充分です。

したがって、この最初の

コンポーネントのselectorプロパティは無関係です。

コード解説

上記のhtmlコードでは、

2つの新しいNativeScript UIコンポーネント、

テキストフィールドボタンが追加されています。

HTML要素とよく似たNativeScript UIコンポーネントは、

動作や外観を設定できるようにする属性を提供します。

追加したばかりのコードでは、次の属性が使用されます。

 <TextField hint=”Email Address” keyboardType=”email” autocorrect=”false” autocapitalizationType=”none”></TextField>
hint:ユーザーに何を入力するかを指示するプレースホルダテキストを表示します。
keyboardType:入力のためにユーザに提示するキーボードのタイプ。

keyboardType = ‘email’は、電子メールアドレスを入力するために

最適化されたキーボードを示します。

NativeScriptは現在、テキストフィールド用の

5種類のキーボードをサポートしています。

autocorrect:モバイルオペレーティングシステムが

ユーザー入力を自動修正するかどうかを決定するboolean属性。

電子メールアドレスのテキストフィールドの場合、

自動修正動作は望ましくありません。

autocapitalizationType:オペレーティングシステムが

ユーザー入力を自動的にどのようにキャパシタライズするかを指定します。

autocapitalizationType = ‘none’は、

ユーザー入力オプションを完全にオフにします。

NativeScriptは、テキストフィールドで

4つのユーザー入力をサポートしています。

secure:テキストフィールドのテキストを

マスクする必要があるかどうかを決定するboolean属性。

これは通常パスワードフィールドで行われます。

<Button text=”Sign in”></Button>

<Button text=”Sign up for Groceries”></Button>

text:ボタン内に表示されるテキストを制御します。

NativeScriptアプリケーションを構築するために

使用できるUIコンポーネントは数多くありますが、

そこにあるすべてのものを調べるのに時間がかかることがあります。

次に、上記の例の<StackLayout>の

新しいUIコンポーネントに注目し、

NativeScriptアプリケーションで

UIコンポーネントを整理する方法について説明します。

NativeScriptドキュメントのコードサンプル部分は、

さまざまなNativeScript UIコンポーネントの

コピー&ペーストのフレンドリーな例を見つけるのに最適な場所です。

TextFieldButtonコードのサンプルページは最もシンプルです。

Webまたはハイブリッド開発の

経験がある場合は、

Native Raboyのハイブリッドアプリ

ネイティブにアップグレードするためのガイドが役立ちます。

ステップ4.レイアウトによるUIコンポーネントの整理

NativeScriptはブラウザを使用して

UIコンポーネントをレンダリングしないため、

display:blockやdisplay:inlineのような

Webレイアウトの概念は

NativeScriptアプリケーションでは機能しません。

代わりに、NativeScriptにはいくつかの

異なるレイアウトUIコンポーネントが用意されています。

これにより、ネイティブAndroidおよびiOSレイアウトメカニズムを

使用してコンポーネントを配置できます。

NativeScriptにはいくつかのレイアウトコンテナがありますが、

主に3つのレイアウトコンテナがあります。

<StackLayout>を使用すると、子のUI要素を縦方向または横方向にスタックできます。
<GridLayout>は、インターフェイスをHTMLマークアップの<table>のような一連の行と列に分割します。
 <FlexboxLayout>では、webのdisplay: flexという構文を使用してUIコンポーネントを配置できます。

もう1つのレイアウト例をアプリケーションに追加して、

すべての動作を確認しましょう。

コードをいじってみよう!

app / login / login.component.htmlファイルを開き、

その内容を次のコードに置き換えて、新しいコンポーネントを追加します。

ファイルを保存します。あなたのアプリが変更で更新されると、

あなたのデバイスで次のように表示されるはずです。

すべてのUI要素を正しく閉じ、

自己終了宣言を使用しないように特別な注意が必要です。

✖:<Button text=”Sign in” />

○:<Button text=”Sign in”></Button>

この例では、<StackLayout>コンポーネントから始めて、

何が起こっているのかを解説しましょう。

<StackLayout>は、NativeScriptの最も単純なレイアウトです。

デフォルトではユーザーインターフェイスコンポーネントをスタックし、

コンポーネントに

orientation = ‘horizo​​ntal’属性を与えた場合は水平方向に配置します。

この例では、<StackLayout>は

2つの<TextField> と <Button>コンポーネントが

真に積み重なる理由です。

この例のもう1つのレイアウトコンポーネントは、

<FlexboxLayout>コントロールです。

<FlexboxLayout>を使用すると、

Webアプリケーションでを整列させるのに

使用するのと同じフレックスボックス構文を

使用してコンポーネントを整列することができます。

Flexboxは一般的に垂直センタリングに使用されます。

これは、このチュートリアルで使用したものです。

次のステップは、

Flexboxシンタックスを使用した例を中心としますが、

新しいNativeScriptコンセプト(CSS)を学ぶ必要があります。

ネイティブスクリプトのレイアウトを学習するのは

難しい場合があります。

特に、ウェブ開発のバックグラウンドから来た場合は

難しいでしょう。

NativeScriptのレイアウトコードサンプルには、

NativeScriptのPlaygroundで直接レイアウトを試すための

コピー&ペーストに適したコードスニペットがあります。

 ステップ5. CSSを使用してアプリケーションをスタイリングする

NativeScriptはCSSのサブセットを使用して

UIコンポーネントの外観を変更します。

なぜサブセットですか?

NativeScriptでは、

ネイティブのiOSとAndroidアプリを構築しています。

一部のCSSプロパティは、

ネイティブのiOSやAndroid APIで複製できないため、

パフォーマンスに大きなペナルティがかかります。

しかし、心配しないでください。

最も一般的なCSSプロパティがサポートされており、

CSS言語の構文も同じです。

NativeScriptのネイティブアプリをスタイリングすると、

Webアプリケーションのスタイリングのように感じられます。

NativeScriptのドキュメントには、

使用可能なサポートされているCSSプロパティのリストがあります。

NativeScriptのCSSがどのように機能しているかを見て、

このGroceriesアプリケーションをプロセスの中で

見栄えのよいものにしてみましょう。

コードをいじってみよう!

app / app.component.tsファイルを開き、

次のコードを貼り付けます。

このコードは、ファイルのComponentデコレータに

新しいstyleUrlsプロパティを追加します。

次に、アプリのapp / login / login.component.cssファイルを開いて、

次のコードを貼り付けます。

ファイルを保存します。

デバイスに次のように表示されます。

Angularでのスタイル使用法

Angularでは、styleUrlsプロパティは、

コンポーネントのスタイルを設定するために

使用するスタイルシートの配列を指します。

この場合、Angularはlogin.component.cssファイルを

読み込んで、そのスタイルをAppComponentのテンプレートに

適用するように指示しています。

styleUrlsプロパティで読み込まれたスタイルシートは、

それらが使用されているコンポーネントにスコープされます。

これは、FlexboxLayoutやStackLayoutのようなシンプルな

CSSセレクタを書くことができ、アプリケーションの

他の部分にUIコンポーネントをスタイリングしてしまう心配もありません。

前にWeb開発をしたことがあれば、

構文はよく知っているはずです。

タグ名(FlexboxLayoutとStackLayout)で

2つのUIコンポーネントを選択し、

いくつかのCSSルールを名前と値のペアとして適用します。

具体的には、FlexboxLayoutの場合、

子のStackLayoutを水平方向に整列するための

justify-content:centerルールと、

同じStackLayoutを垂直に整列する

align-items:centerルールを適用します。

このため、StackLayoutが画面の中央に表示されるようになりました。

この例では、width、padding、background-colorなどの

他のCSSプロパティもいくつか使用しています。

このチュートリアルでは、いくつかの追加プロパティを使用します。

この最新の変更で、Groceriesアプリは実際の

アプリのように見えるようになりましたが、

まだ不十分です。

いくつかのデザイン助けになるものを使用することができます。

このアプリケーションをより良くするために、

このチュートリアルの次のステップに進んで、

NativeScript Coreテーマについて説明しましょう。

LEARNING FLEXBOX

フレックスボックスの構文は、

フレックスボックスをウェブ上で使用しているか

NativeScriptアプリケーションを使用しているかにかかわらず、

学ぶのが難しい場合があります。ここに2つの良い学習リソースがあります。

CSS Tricks:CSS TricksのFlexboxの完全ガイドは、

flexboxの多くのプロパティと値を扱うための優れたリファレンスです。

レイアウトを設定するときにページをブックマークして参照してください。

Flexbox Froggy:Flexbox画面内のカエルを動かすことで

フレックスボックスを学習するためのブラウザ内ゲームに夢中になりました。

フレックスボックスを初めてお使いの方は、

フレックスボックスのプロパティの値がどのように

機能するかを学ぶための素晴らしいチュートリアルです。

ステップ6. NativeScript Coreテーマを使用する

NativeScriptのスタイリングインフラストラクチャにより、

Web上のBootstrapのようなフレームワークを使用するのと同じように、

ネイティブアプリケーションにCSSテーマを作成して使用することができます。

NativeScriptプロジェクトは、

あなたのプロジェクトに追加できるコアテーマを提供します。

このテーマには、明暗の2つのカラースキームと一連の便利なクラス名があり、

エレガントなユーザーインターフェイスを素早く構築するのに役立ちます。

CoreテーマをGroceriesに追加する方法と、

それを使ってログイン画面を見栄え良くする方法を見てみましょう。

コードをいじってみよう!

app / app.cssファイルを開き、

NativeScript Coreテーマのデフォルトスタイルシートを

インポートする次のコードを貼り付けます。

NativeScriptでは、app.cssはグローバルスタイルシートです。

app.cssで適用するルールは、

アプリ内のすべてのコンポーネントに適用されます。

<ActionBar>の色は、現時点ではこのページで少し奇妙に見えます。

あなたはこのチュートリアルの後半でこの表示を修正します。

<ActionBar>コンポーネントの使用方法の詳細については、

ドキュメントページを参照してください。

次に、app / login / login.component.htmlファイルを開き、

その内容を次のコードに置き換えます。

これにより、新しいクラス属性がいくつかのUIコンポーネントに追加されます。

app / login / login.component.cssファイルを開き、

既存のセレクタの下に次のCSSコードを追加します。

(次の画像のようにTextField{placeholder-color}が

[css] Unknown property.となりますが、

一応、問題なく動くようです。

適当に色を変えてしっかり変わることを確認してみてください。)

ファイルを保存します。

あなたのデバイスに次のUIが表示されます。

(なんか、見たことあるような画面になりましたね^^)

最初に注意すべきは、

クラス名form、input、input-border、btn、

およびbtn-primaryです。

これらはすべてNativeScript Core Themeのクラス名です。

それぞれのCSSルールは、

UIコンポーネントがデフォルトでうまくいくように表示されます。

テーマクラス名の完全なリストと

それらのアプリケーションでの使用方法については、

NativeScript Coreのテーマのドキュメントを参照してください。

NativeScriptのCSS実装に移行する

前に留意すべきもう1つの点は、

Webアプリケーションと同じように

クラス名でCSSルールを選択できることです。

この例では、.btn-primaryセレクタを使用して、

アプリのメインボタンの背景色を変更します。

ここではDOMを変更していないので、

CSS構文を使用して完全にネイティブの

コントロールの表示を実際に変更していることに

注意してください。かなりクールですね?

(だって俺らがつくってるんだぜ!!)

最後にこのページの外観を

変更する方法を見てみましょう。

ステップ7.あなたのアプリで画像を操作する

NativeScriptでは、

UI要素とsrc属性を<Image>使用して

ページに画像を追加します。

src属性を使用すると、

3つの方法でイメージを指定できます。

最初の(そして最も簡単な)方法は、

画像のURLをポイントすることです。

例えばこんなふうに、

<Image src=”https://www.nativescript.org/images/default-source/landingpages/logo.png”></Image>

2番目の方法は、

アプリのアプリフォルダ内にある画像を

ポイントすることです。

たとえば、app / images / logo.pngに

画像がある場合は、次のように使用できます。

<Image src=”~/images/logo.png”></Image>

3番目の方法は、プラットフォーム固有の

イメージリソースを使用することです。

詳細については、NativeScriptのドキュメントを参照してください。

Groceriesアプリにロゴ画像を追加して、

これがどのように動作するかを見てみましょう。

コードをいじってみよう!

アプリケーションの

app / login / login.component.htmlファイルを開き、

コンポーネントのテンプレートを次のコードに置き換えます。

これにより、新しい<Image>コンポーネントが追加されます。

ファイルを保存します。

あなたのデバイスに次の新しいイメージが表示されます。

(ロゴを表示できました!)

これでレッスン2は終了です。

アプリケーションロジックの追加

ステップ8.イベントの処理

ほとんどのユーザーインターフェイスは

イベントによって駆動されます。

NativeScriptアプリでは、これらのイベントは、

通常、タッピング、スワイプ、回転などのユーザーアクションです。

NativeScriptは、そのようなイベントを

処理するためのiOSおよびAndroid固有のコードを、

使いやすいAPIに抽象化します。

NativeScriptアプリケーションで使用する

最も一般的なタップイベントから始めましょう。

TAPイベントをためそう!

app / login / login.component.htmlファイルを開き、

コンポーネントのテンプレート内の

既存のサインインボタンを見つけ

(<button text = “Sign in” class = “btn btn-primary”> </ Button>)、

それを次のコードに置き換えます。

次に、app / app.component.tsファイルを開き、

現在のAppComponent宣言

(AppComponent {}クラスを)

を次のように置き換えます。

ファイルを保存します。

アプリがデバイスで更新されたら、

[ログイン]ボタンをタップします。

ブラウザーの「Playground」の「Device Logs」セクションに

タップした分だけ「hello」と表示されます。

(eventName)=”functionName()”構文は、

Angularのイベントバインディングシステムの一部です。

これにより、UI要素で発生するイベントを

コンポーネントのクラスの関数にバインドできます。

この場合、(tap)=”submit()”構文は、

ユーザーがサインインボタンをタップするたびに

AppComponentクラスのsubmit()関数を

実行するようにAngularに指示します。

各UIエレメントで使用できるイベントのリストは、

APIドキュメントのページで確認できます。

たとえば、ボタン要素のAPIドキュメントには、

そのタップイベントがリストされています。

Angularドキュメントには、

テンプレートを作成するときに利用できる

さまざまな構文を含む便利なチートシートがあります。

現時点でどのように動作しているかを知ることについて

あまり心配しないでください。

このガイドでは、最も一般的な構文を使用します。

タップイベントを使用すると、

テンプレートのUI要素をTypeScriptコードに

関連付けることができます。

ログインページを実際に動作させるには、

テンプレートをTypeScriptコードに接続するもう1つの方法、

データバインディングを導入する必要があります。

ステップ9.データへのバインド

Angularは、TypeScriptコードのデータを

UIコントロールにバインドする

いくつかの方法を提供しています.

NativeScriptの魔法を使って、

同じ方法をiOSやAndroidアプリで利用できます。

(magic?)

最初のものは、TypeScriptクラスで定義された

プロパティにUI属性をバインドする方法です。

どのように動作するかを見てみましょう。

app / app.component.tsファイルで、

現在のAppComponent宣言を次のように置き換えます。

新しいAppComponent宣言は

新しい電子メールプロパティを追加し、

submit()メソッドを変更してその値を表示します。

次に、app / login / login.component.htmlファイルを開き、

最初の<TextField>を見つけて、

新しいテキスト属性を追加する下のコードに置き換えます。

ファイルを保存します。

あなたのアプリがデバイス上で更新されると、

“nativescriptrocks”電子メールアドレスが

あらかじめ表示されているはずです。

ここで重要なことは、<TextField>の[text]=”email”属性です。

これは、属性バインディングのAngular構文です。

属性の値をTypeScriptクラスのプロパティに

バインドすることができます。

この場合、<TextField>のテキスト属性

(DOM <input>のvalue属性にほぼ相当)は

AppComponentのemailプロパティに

バインドされています。

Angularのイベントバインディング構文

(eventName)=”functionName()” と

属性バインディング構文

[attributeName]=”propertyName” は

似ているため混同しやすいです。

しかし、心配しないでください。

間違った場合は、追加しようとしている機能が

うまく動作しないため、コードの確認を行い、

たいてい簡単にデバッグすることができます。

これらのシンタックスは一般的なものであり、

多く使用するため、最終的には覚えることになるでしょう。

ONE-WAY バインディング と TWO-WAY バインディング

前の例で使用したバインディングは

単方向バインディングと呼ばれ、

TypeScriptプロパティ

(TypeScriptコードで実行されたプロパティの変更)を

ユーザーインターフェイスに表示する

必要がある場合に適しています。

しかし、この例のテキストフィールドなどの

ユーザー入力を受け入れるUIコンポーネントの場合、

通常は双方向で動作するデータバインディングが必要です。

双方向バインディングを使用すると、

TypeScriptコードでUIコンポーネントに

ユーザーが入力する値を使用できるようになります。

あなたのアプリが現在、片方向バインドのみを

使用していることを確認したい場合は、

アプリに戻り、電子メールテキストフィールドの

値を変更します(余分な文字などを入力してください)。

「Sign in」のタップイベントsubmit()関数は、

コンポーネントのemailプロパティ

alert(“あなたは:+ this.emailを使用しています) の

現在の値を警告するので、

アラートに更新された値が表示されます。

しかし、タップすると変更した値でなく元の値が表示されます。

この問題を回避するには、

これらのフォームコントロールに

双方向バインドを使用する必要があります。

次のセクションで詳しく見ていきましょう。

では、Angularアプリケーションで

双方向バインディングを実装する方法を見てみましょう。

双方向バインディングをやってみよう!

app / login / login.component.htmlファイルを開き、

最初の<TextField>を見つけて、

それに新しく [(ngModel)] 属性を導入する<TextField>に置き換えます。

次に、app / app.module.tsファイルを開き、

その内容を次のコードに置き換えます。

これにより、新しいNativeScriptFormsModuleが

NgModuleのインポートリストに追加されます。

Angularモジュールのインポートのリストは、

アプリを動作させるために必要な機能の

1つと考えることができます。

この場合、NativeScriptFormsModuleは

[(ngModel)] 構文をNativeScriptのUIコンポーネントと連携させます。

Angularのインポートがどのように機能するかについては、

Angularのモジュールに関するドキュメントを参照してください。

ファイルを保存します。

端末でアプリが更新されたら、

メールアドレスを変更して(余分な文字などを入力して)、

アプリの[Sign in]ボタンをタップします。

更新された電子メールアドレスがアラートに表示されるはずです。

一見すると、[(ngModel)]構文は、

これまでの例で使用したイベントと属性の

バインディング構文を組み合わせたものであるため、

ちょっと変わって見えるでしょう。

この例の場合、[(ngModel)]=”email”は

[text]=”email” (textChange)=”email=$event.object.text”の省略形です。

電子メール要素のテキスト属性を

電子メールプロパティにバインドし、

ユーザーが変更を行うたびに電子メールプロパティの値を

更新する変更イベントハンドラを追加します。

よく分からなくても、

この構文の詳細についてあまり心配しないでください。

あなたの頭に、フォームコントロールで

双方向データバインディングを実装する方法として

[(ngModel)]があると入れておけばいいです。

次に進む前に、AngularのデータバインディングAPIで

何ができるのかを示すために、もう1つの変更を加えましょう。

Groceriesアプリは、

サインインフォームとサインアップフォームに

同じUIを使用します。

したがって、ユーザーが[サインアップ]をタップすると、

ボタンのテキストを更新する必要があります。

そのようにする方法を見てみましょう。

タップで表示する言葉を変えてみよう!

app / login / login.component.htmlファイルを開き、

既存の2つの<Button>を以下のコードに置き換えます。

次に、app / app.component.tsファイルを開き、

既存のAppComponent宣言に

新しくisLoggingInプロパティとtoggleDisplay()メソッドを

追加する以下のコードに置き換えます。

ファイルを保存します。

端末でアプリが更新されたら、

下のボタンを数回タップします。

TypeScriptプロパティが変更されたときに

ボタンテキストを更新するには、

Angularが十分に役割を果たしているからです。

この時点で、双方向データバインディングを

使用した基本的なログイン画面が設定されています。

これをTypeScriptで〜20行程度で構築しました。

(同じスタンスを達成するためには、

Android StudioとXcodeでどれくらいの

コードを書く必要があるか考えてみましょう。)

これまで、すべてのロジックを1つの

TypeScriptファイルに配置しましたが、

コンポーネント毎に分けるほうが、

実際のアプリケーション開発に適しています。

このアプリをバックエンドに結びつけて、

このログイン画面を完全に機能させる前に、

一歩前に戻り、拡大縮小可能な構造を設定しましょう。

ステップ10.アプリの構造化

アプリケーションをモジュラー単位に

分割する理由はたくさんあります。

Wikipediaでさまざまな利点について読むことができます。

NativeScriptのモジュール化には、

Angular-built Webアプリケーションと

Angular-builtネイティブアプリの間で

作成したコードを共有する機能があります。

Angular Webアプリケーションを

作成する計画がない場合でも、

コードを分離することは、テスト容易性、

メンテナンスの容易さなどの他の多くの理由で

依然として有利です。

そしてAngular Webアプリケーションを

構築する予定がある場合は、 あなたのネイティブアプリや

ウェブアプリで再利用できる機能の チャンク を持つことは、

貴重な時間を節約することができます。

ネイティブとウェブのプロジェクト間で

コードを共有することは可能であり、

理論的に説明するよりも見てもらったほうがわかりやすいでしょう。

このガイドのネイティブ実装とまったく同じ

共有フォルダを使用するGroceriesのWeb実装を熟読してください。

これがどのように動作するかを確認するには、

共有フォルダ内の一部のファイルを編集し、

インポートするように設定しましょう。

共有フォルダ(Shared)を使ってみよう!

app / shared / user / user.model.tsファイルを開き、

次のコードを貼り付けます。

このコードは、電子メールとパスワードという

2つのプロパティを定義するだけの

単純なTypeScriptクラスを定義しています。

TypeScriptのエクスポートキーワードを

使用することに注意してください。

これは重要な理由を一時的に見ていきます。

次に、app / app.component.tsファイルを開き、

上部に次のインポートを追加します。

import { User } from "./shared/user/user.model";

このコード行では、

今定義したUserクラスをインポートします。

前の例で使用されたエクスポートコマンドと

ここで使用されるインポートコマンドとの

パラレルに注意してください。

Userクラスをインポートできる理由は、

明示的にエクスポートされたためです。

このガイドを読むと、

インポートとエクスポートの他の例が表示されます。

app / app.component.ts内の、

既存のAppComponent定義を下のものに置き換えます。

これは、今インポートしたUserクラスを使用します。

AppComponentに直接データを格納するのではなく、

Userモデルオブジェクトを使用しています。

Userオブジェクトは、このページの以外でも、

別のこのアプリケーション開発でも再利用可能です。

新しいコンストラクタ関数でUserクラスを

userに インスタンス 化します。

Angularは、アプリケーションの

ブートストラップ 時にこのインスタンスを呼び出します。

最後のステップは、

この新しいモデルオブジェクトを

テンプレートで使用することです。

これを行うには、

app / login / login.component.htmlファイルを開き、

既存の2つの<TextField>を次のコードに置き換えます。

これにより、[(ngModel)]バインディングが

新しいUserオブジェクトを指すように更新されます。

アプリが更新されたら、

アプリが期待通りに機能することを確認してください。

(さっきと同じように動けばOK!)

このステップでは新しい機能を追加しませんでしたが、

今度は前進するモジュラー構造になっています。

この設定で、アプリケーション内のページ間で、

またアプリケーション間でも共有できるUserクラスが追加されました。

しかし、4行のコード行であるモデルオブジェクトは、

それほど刺激的ではありません。

このアプローチが本当に効果的なのは、

ビジネスロジックを共有できるときと、

バックエンドシステムに当たるコードです。

Angularでは、これらのクラスはサービスとして知られています。

次にそれらを見てみましょう。

ステップ11.サービスの構築

ログイン画面は、ユーザーが何かに実際に

登録していない場合に便利なものではありません。

したがって、次の作業は、

ユーザーがアカウントを作成して

ログインできるようにすることです。

この機能をAngularサービスとして構築します。

これは、データを操作する再利用可能な

クラスのためのAngularのメカニズムです。

このチュートリアルでは、

認証とデータ管理を処理するための

いくつかのRESTfulエンドポイントを

事前に説明しました。

NativeScriptでは、HTTPベースのAPIを使用して

アプリケーションに機能を供給することができ、

Firebase、Couchbase、Kinveyなどの一般的な

ソリューションで起動して実行するための

NativeScriptプラグインがいくつかあります。

サービスを作ろう!

app / shared / user / user.service.tsファイルを開き、

単純なregister()メソッドを定義する次のコードを貼り付けます。

これは、前のセクションで作成した

Userオブジェクトのインスタンスをとる単一のメソッドで、

基本的なAngularサービスを作成します。

新しいことの1つは、注射可能なデコレータです。

@Injectable()

このデコレータは、このクラスをAngularの

依存性注入 メカニズムの候補として示します。

今のところ、あなたが書いたすべてのサービスに対して

@Injectable()を必要なものとして追加することを考えてください。

次に、app / app.component.tsファイルの

一番上に次の行を追加します。

このファイルは、今定義したサービスをインポートします。

import { UserService } from "./shared/user/user.service";

その後、同じapp.component.tsファイルで、

新しいプロバイダプロパティを

既存のComponentデコレータに追加します。

Component宣言は、このようになります。

providers配列は、コンポーネントで使用する必要がある

すべてのAngularサービスの単純なリストです。

現時点ではサービスは1つしかないので、

プロバイダのアレイには1つのエントリしかありません。

次に、AppComponentの既存のコンストラクタを

下のコードに置き換え、

新しいUserServiceをパラメータとして追加します。

(ここでは何が起こっているのかを後で少し話します。)

最後に、AppComponentの既存のsubmit()関数を見つけて、

それを以下の3つの関数に置き換えます。

ファイルを保存します。

アプリがデバイスで更新されたら、

[サインアップ]ボタンをタップしてメールアドレスを入力し、

[サインアップ]ボタンをもう一度タップします。

すべてうまくいけば、次のアラートが表示されます。

次に進む前に、このコードに戻りましょう。

これはAngularの 依存性注入 の実装です。

このコンポーネントのproviders配列に

プロバイダーとしてUserServiceを登録したため、

Angularがこの構文によって、

UserServiceクラスのインスタンスが作成され、

そのインスタンスがコンポーネントのコンストラクターに渡されます。

WHY DEPENDENCY INJECTION?

DEPENDENCY INJECTION:依存性注入

簡単な答えは、依存性注入ベースのコーディング手法であり、

アプリケーションの開発が進展するにつれてクラスの結合性が低下し、

メンテナンス性とテスト可能性が向上します。

より長い答えを得るには、Angularの文書に目を通し、

依存性注入のメリットについて徹底的に検討してください。

登録プロセスを構築しよう!

私たちの例に戻って、登録プロセスを実際に動作させましょう。

app / shared / user / user.service.tsファイルを開き、

その内容を次のコードに置き換えます。

これについては、後ほど詳しく説明します。

次に、app / app.component.tsファイルを開き、

既存のsignUp()関数を次のコードに置き換えます。

ファイルを保存しますが、

デバイスでのテストはあまり面倒ではありません。

(Device Logs のエラーを確認すればOK!)

最初に追加したコードで何が起こっているのかを確認しましょう。

実行するとエラーになります。

[iPhone]: ERROR: ERROR Error: StaticInjectorError(AppModule)[UserService -> Http]:
[iPhone]: ERROR: ns-renderer: ERROR BOOTSTRAPPING ANGULAR
[iPhone]: ERROR: ns-renderer: StaticInjectorError(AppModule)[UserService -> Http]:

(スマホ画面はちょっと怖いです。)

開発していればこういったエラーの対処が多くなってきます。

今回はどうしてエラーになったか見ていきましょう。

まずここで注意すべきは、

user.service.tsの新しいコンストラクタコードです。

constructor(private http: Http) {}

UserServiceクラスは、

必要なサービス(この場合はHttpクラス)を導入するために、

依存性注入技術を使用しています。

これは、AngularによるHTTP呼び出しの実行方法です。

また、NativeScriptによって、

同じHTTP APIがiOSとAndroidで余分な作業をすることなく動作します。

HTTP APIが利用可能になる詳細については、

HttpのAngularのドキュメントを参照してください。

もう1つの新しいコードは、

この新しいregister()メソッドの戻り値です。

register()はthis.http.post()を返します。

これはRxJS Observableです。

Angularドキュメントを参照すると、

RxJSの観測データの仕組みに関する

完全なチュートリアルが表示されますが、

観測データで行う必要がある最も一般的なことは、

Observableに登録することだけです。

少なくとも、今回のコードではそれで済みます

subscribe()を渡した2つの関数は、成功と失敗ハンドラです。

register()の呼び出しが成功すると、最初のアラートが発生し、

register()の呼び出しが失敗すると、2番目のアラートが発生します。

サービスコードが設定され、

準備が整いましたので、最後にいくつかの変更を行い、

アカウントを作成しましょう。

ES2015のアロー関数、()=> {}構文

()=> {}構文は、TypeScriptがそのままサポートする

ES2015のアロー関数を定義します。

この例では、アロー関数はfunction() {}を書くことと等価です。

アロー関数は、親からのコンテキストを継承するという利点があります。

上記のコードはthis.toggleDisplay()を

内部関数から呼び出すことができますが、

これは汎用JavaScript関数(){}では機能しません。

エラーの修正

UserServiceはHttpサービスを使用するため、

最後にUserServiceの場合と同様に

HTTPプロバイダを登録します。

app.component.tsファイルでこれを行うことはできますが、

今度は少し異なるアプローチをとることになります。

app / app.module.tsファイルを開き、

その内容を次のコードに置き換えます。

これにより、新しいNativeScriptHttpModuleが

インポートのリストに追加されます。

NativeScriptHttpModuleは、

AngularのHttpModuleのNativeScriptラッパーです。

これは、UserServiceが使用するHttpサービスを含む、

すべてのAngularのHTTPベースのサービスを宣言するモジュールです。

この時点で、アカウント全体を

セットアップしたことを確認する準備が整うはずです。

端末でアプリが更新されたら、

アプリの[Sign up]ボタンをタップします。

赤いサインアップボタンをタップします。

このような確認ダイアログが表示されます。

階層上の依存性注入

Angularは、階層依存インジェクタの

概念をサポートしています。

これは、プロバイダを親モジュールで

インポートして子コンポーネントで使用できるという派手な方法です。

この例では、この概念的に、

HttpサービスがUserServiceで使用されていても、

app.module.tsファイルに

NativeScriptHttpModuleを宣言すれば

UserServiceでも使えることになります。

一般に、アプリのコンポーネントのほとんどが

プロバイダにアクセスする必要がある場合、

プロバイダを親モジュールで宣言することは、良い考えです。

すべてのプロバイダを単一のルートNgModuleで

宣言することはできますが、

インポートのリストはアプリの成長に伴い扱いにくくなり、

アプリの変更に応じてリファクタリングが難しくなります。

(?@Componentのこと?)

あなたのアプリは完全に機能する

登録プロセスを持つようになりましたが、

現状、作成したアカウントでは何もできません。

私たちの次のステップは、

ユーザーがログインして

新しいリストページにナビゲートできるようにすることです。

そのためには、ルーティングの概念を導入する必要があります。

アカウントを作成した後、

AppComponentのコンストラクタ()の

資格情報を ハードコード して、

このガイドの残りの部分で開発をより迅速に行うことができます。

ステップ12.ルーティング付きのナビゲーションを追加する

最後のいくつかのセクションで使用した

Angularコンセプトの大部分は、

Web用かネイティブアプリ用かにかかわらず同じです。

2つの環境間でモデルオブジェクトと

サービスを直接共有することも可能です。

ルーティングも同様ですが、いくつかの違いがあります。

ウェブ上でのルーティングはURLの概念を中心に展開されていますが、

ネイティブアプリではブラウザはありません。

同様に、ネイティブアプリには、

Androidのハードウェアの戻るボタンや

iOSのスワイプの左から右のジェスチャーなど、

ブラウザにはない概念があります。

Groceriesでルーティングを実装することで、

NativeScriptがこれをどのように処理するかを見てみましょう。

ルーティング設定をしてみよう

この時点で、

ログインページ用のコードをapp.component.tsに入れています。

そのロジックをログインフォルダに移動して、

追加のページのためのスペースを確保しましょう。

app / app.component.tsファイルを開き、

その内容をapp / login / login.component.tsファイルにコピーします。

次に、新しいapp / login / login.component.tsファイルで、

クラスの名前をAppComponentからLoginComponentに変更します。
その後、同じファイル内で、

2つの破損したUserおよびUserServiceインポートを、

以下のコードを使用し、更新します。

次に、app / app.routing.tsファイルを開き、

次のコードを貼り付けます。

app / app.routing.tsファイルは、

すべてのアプリのルートのリストを宣言する場所です。

あなたのルート配列はログインページのための

単一ルートを持っていますが、後でいくつか追加します。

このアプリを稼働させるには、さらに2つの変更を加える必要があります。

app / app.module.tsファイルを開き、

ファイルの内容を次のコードに置き換えます。

このコードは、新しいNativeScriptRouterModuleインポートを追加し、

app.routing.tsで宣言したばかりのルートをインポートします。

NgModuleの宣言配列には、

アプリケーションで使用するコンポーネントのリストが必要です。

この場合、app.routing.tsファイルに

エクスポートしたnavigatableComponents配列を、

すでに持っているAppComponent宣言に追加します。

…演算子はES2015の普及構文であり、簡単な例で簡単に説明します。

変数xをlet x = [2,3]と宣言すると、

JavaScriptは[1、… x]を[1、2、3]と解釈します。

最後に、app / app.component.tsファイルを開いて、

次のコードを貼り付けます。

このファイルについては、後で詳しく説明します。

ファイルを保存します。

端末でアプリが更新されたら、

ログインページが期待どおりに読み込まれるようにしてください。

前にAngularでルーティングしたことがない場合は、

Angular’s guideトピックを背景として参照できますが、

基本的なコンセプトでは、ユーザーがナビゲートできる

すべてのコンポーネントのリストを含む

ルート配列を宣言する必要があります。

これらのコンポーネントへのアクセスに使用するパスも含まれます。

新しいルートを追加する必要がある場合は、

app.routing.tsファイルに適切なコンポーネントをインポートし、

そのコンポーネントをルート配列に含めます。

USING ANGULAR DIRECTIVES

<page-router-outlet>タグは、アプリの最初の指令です。

ディレクティブが何であるかについての詳細な情報が

必要な場合はAngularのドキュメントをもう一度調べることができますが、

ディレクティブを感嘆に説明すると、

テンプレートに入れたマークアップに影響を及ぼすものです。

この場合は<page-router-outlet>

NativeScriptのページルーティング

NativeScriptアプリケーションでの

ルーティングに使用するコードは、

Angular Webアプリケーションとほぼ同じです。

大きな違いは、<router-outlet>ディレクティブの代わりに

<page-router-outlet>ディレクティブをNativeScriptで使用することです。

<page-router-outlet>は、AngularのルータのNativeScript拡張機能で、

ページ遷移などのネイティブの概念を

iOSやAndroidアプリで自動的に処理します。

優れた点は、開発者としての詳細が皆さんに透明であることです。

これらの遷移は自動的に取得されます。

あなたは今正常にルータを追加しましたが、

あなたのアプリはまだ1つのルートしか持っていないので、

あなたはページ遷移を見ることができませんでした。

Groceriesに新しいルートを追加してみましょう。

ルートを追加しよう!

app / list / list.component.tsファイルを開き、

次のコードを貼り付けてください。

このコードは単純なリストページの先頭に使用します。

今のところ、リストページはシンプルなので、

ルーティングの仕組みを見ることができます。

しかし、テンプレートになにもないので追加します。

app / list / list.component.htmlファイルを開き、

次のに貼り付けてください。

その後、app / app.routing.tsファイルに戻り、

次のコードでファイルを更新します。

一旦、ファイルを保存します。

あなたのデバイスではまだ何もテストすることはありません。

ログイン機能を実装しよう!

app / shared / user / user.service.tsファイルを開き、

以下のlogin()関数を既存のUserServiceクラスに追加します。

このコードは、このチュートリアルの既存の

バックエンドエンドポイントの1つに当たり、

このガイドの後半で使用する認証トークンを保存します。

サービスの新しいlogin()関数を使用するには、

app / login / login.component.tsファイルに戻り、

次のインポートをファイルの先頭に追加します。

import { Router } from "@angular/router";

次に、現在のコンストラクタ()宣言を

AngularのRouterサービスを注入する以下のコードに置き換えます。

constructor(private router: Router, private userService: UserService) {

最後に、LoginComponentの既存のlogin()関数を

サービスの新しいlogin()メソッドを呼び出す以下のコードで置き換え、

login()メソッドが正常に完了した場合は、

ルータのnavigate()メソッドを呼び出します。

ファイルを保存します。

これらの変更がデバイスに反映されたら、

ログイン資格情報を入力してサインインボタンをタップします。

新しいリスト画面に移動するようになりましたね。

NativeScriptでのルーティングの詳細

あなたがLoginComponentのプロバイダ配列に

Routerを追加する必要はありません。

あなたがapp.module.tsにインポートとしてインクルードする

NativeScriptRouterModuleにすでに含まれているからです。

代替ページ遷移の設定など、

NativeScriptでルータでできることの詳細については、

NativeScriptのナビゲーションドキュメントを参照してください。

NativeScriptの強力な機能は、

ルータやその他のWebアプリケーションで

使用するのと同じAngular記述を使用することができ、

iOSとAndroidですぐに使えるアプリを手に入れることができます。

ここからは、Androidのハードウェアの戻るボタンが

どのように正常に動作するのか、

またiOSアプリケーションで組み込みの

iOSアニメーションや背景ボタンを使用する方法を確認します。

Groceriesが使用するsharedフォルダのほかに、

ネイティブアプリとWebアプリの間で

コードを共有する方法は他にもあります。

ウェブとネイティブコードを

同じコードベースに置くアプローチでは、

テストと国際化に関する付加的なツールも提供されています。

人気のGitHubのAngular NativeScriptシードプロジェクト

1つをチェックしてください。

NativeScriptアプリケーションと

Angular Webアプリケーションがどのように似ているのかを説明したので、

それらがどのように違うのかを考えてみましょう。

NativeScriptを使用して構築する場合は、

iOSとAndroidのすべてにアクセスできるだけでなく、

実行可能な高度な機能を備えたデバイスを使用して、

Webが提供できる以上の豊富な経験を構築できます。

洗練されたユーザーインターフェイスの構築

ステップ13. UIコンポーネントのカスタマイズ

これまでは、NativeScriptのUI要素を

Angularコンポーネントのテンプレートに含めるだけでしたが、

プログラム的にUI要素を作成してアクセスすることもできます。

各UIコンポーネントには、

アプリのカスタマイズに使用できる

一連のプロパティとメソッドがあります。

NativeScriptモジュール

強力な機能をアプリケーションに追加するために

すべてのNativeScript UIコンポーネントは、

TypeScriptモジュールとして使用できる一連の

NativeScriptモジュールとして実装されています。

これらのモジュールはたくさんあります。

このチュートリアルを完了すると、

いくつかのモジュールが使用できるようになるでしょう。

NativeScriptモジュールのソースコードは、

GitHubのNativeScript / NativeScriptリポジトリにあります。

モジュールはnpmを通じて ‘tns-core-modules’パッケージとして配布され、

すべてのNativeScriptアプリケーションに導入できます。

NativeScriptモジュールはオープンソースなので、変更を加えても構いません

次の例では、

ログインページ<ActionBar>の非表示にしますが、

その前に知っておく必要がある前提知識が2つあります。

最初に、NativeScriptでは、

1つの<Page> UIエレメントがすべてのページレベルの

Angularコンポーネントのテンプレートをラップします。

このコンポーネントは表示されませんが、

そこにはカスタマイズ可能なUIコンポーネントがあります。

次に、あなたのテンプレートに<ActionBar>を明示的に含まない場合でも、

Android上で<ActionBar>があなたのアプリに表示されます。

(タイトルはデフォルトでアプリの名前になります)

<ActionBar>を本当に隠すには、

<Page>コンポーネントのプロパティを設定する必要があります。

これは次の例で行うこととまったく同じです。

ログインページのサイトタイトルを非表示にしよう!

app / login / login.component.tsファイルを開き、

次のインポートをトップに追加して、

NativeScriptコアモジュールからPageクラスへの参照を追加します。

import { Page } from "tns-core-modules/ui/page";

次に、同じファイルの既存の

‘angular / core’インポートを変更して、

OnInitインターフェイスを組み込みます。

import { Component, OnInit } from "@angular/core";

OnInitは、TypeScriptクラスのインターフェイスです。

どのように動作するかを確認するには、

LoginComponentクラスの宣言を次のように変更します。

export class LoginComponent implements OnInit {

新しいimplementsキーワードを追加した後、

‘Class ‘LoginComponent’が ‘OnInit’インターフェースを

間違って実装しているようなエラーがPlaygroundに表示されます。

エラーコード

login/login.component.ts (13, 14): Class ‘LoginComponent’ incorrectly implements interface ‘OnInit’.
Property ‘ngOnInit’ is missing in type ‘LoginComponent’.

TypeScriptクラスインターフェイスを実装するときは、

インターフェイスに必要なすべてのメソッドを

実装する必要があることをTypeScriptコンパイラが伝えます。

OnInitの場合、Angularでは、

単一のngOnInit()メソッドを実装する必要があります。

これを実装するには、

LoginComponentクラスに次のメソッドを追加します。

ngOnInitは、

Angularが提供するいくつかの

コンポーネントライフサイクルフックの1つです。

その名前が示すように、

Angularがこのコンポーネントを初期化すると、

ngOnInitが呼び出されます。

ngOnInit()内のコードがなにをするかは後ほど解説します。

次にこれらの変更をコンパイルして実行するために、

LoginComponentの既存のconstructor()宣言を

変更して以下のコードを使用します。

constructor(private router: Router, private userService: UserService, private page: Page) {

PageクラスはNativeScriptアプリケーションで

広く使用されているため、

NativeScriptはページコンポーネントへの

アクセスを簡略化するためにこの構文を提供しています。

このガイドの後半では、

UIコンポーネントにアクセスして

そのプロパティを変更する他の方法が解説します。

最後に、app / login / login.component.htmlファイルを開き、

<ActionBar>コンポーネント全体を削除します。

ファイルを保存します。

アプリが更新されると、

以前はAndroidの画面の上部に

表示されていたバーが非表示になります。

(おそらく、皆さんの画面にはメールアドレス等が表示されていると思います。それであっています。)

今度はこのコードコンストラクターに加えて、

このコードで何が起こるかを話しましょう:

this.page.actionBarHidden = true;

このコードは、

NativeScriptページモジュールPageクラスのインスタンスを使用し、

actionBarHiddenプロパティをtrueに設定します。

これは、Androidデバイスで

デフォルトで表示されるActionBarを非表示にします。

NativeScript APIのドキュメントでは、

これらのプロパティの完全なリストとその機能について知ることができますが、

TypeScriptに優しいIDEを使用している場合は、

これらのプロパティの完全なリストをいつでも取得できます。

this.pageと入力すると、

あなたのlogin.component.tsファイルを編集している間、

動作をNativeScriptプレイグラウンドで確認できます。

ログインページを完成させるために最後の変更を加えましょう。

今回は新しいAngular構文を使用します。

クラスの切り替えをしてみよう

app / login / login.component.htmlファイルを開き、

<StackLayout>タグを次のコードに変更します。

<StackLayout class=”form” [class.dark]=”!isLoggingIn”>

次に、app / login / login.component.cssファイルを開き、

下に次のコードを追加します。

ファイルを保存します。

あなたのデバイスであなたのアプリケーションが更新されたら、

サインアップボタンをクリックして、

色が自動的にどのように更新されるかを確認します。

[class.className]構文は、

boolean条件に基づいて条件付きで

クラス名を適用できる便利なAngular機能です。

この場合、[class.dark] = ‘!isLoggingInは、

コンポーネントのisLoggingInフラグがfalseの場合にのみ

クラス名darkを適用するようにAngularに指示します。

よりクールなのは、

コンポーネントに追加のCSSクラス名を

適用する必要がある場合でも構文が機能することです。

つまり、構文class=”form” [class.dark]=”!isLoggingIn”を使用する場合、

Angularはクラス名darkをトグルしても

クラス名formを維持するのでとてもスマートです。

Angularを使用してNativeScriptアプリケーションを開発する際に、

このトリックが便利な場合があります。

チュートリアルのこの時点で、

ログイン画面が完成しました。

あなたが望むなら、私たちはガイドを引き続き、引き受けます!。

次に我々はGroceriesアプリのリストページを作成するつもりです。

新しいUIコンポーネントのセットを学ぶことから始めます。

ステップ14. NativeScript UIの紹介

このガイド全体で使用されている

NativeScriptのコアユーザーインターフェイスコンポーネントに加えて、

NativeScriptには、NativeScript UIと呼ばれる

無料のプロフェッショナルコンポーネントがあります。

NativeScriptのUIには、

引き出し、リストビュー、カレンダー、

チャート、フォーム、オートコンプリートなどを

構築するためのコントロールが含まれています。

実際、このチュートリアルのレッスン1に戻ったグラフは、

NativeScriptのUIコンポーネントでした。

NativeScriptのUIができることを示すために、

スイート のリストビューコントロールを使用して、

食卓のリストをアプリに追加する方法を見てみましょう。

NATIVESCRIPT PLUGINS

NativeScriptのUIはNativeScriptのプラグインです。

NativeScriptプラグインはnpmパッケージで、

AndroidやiOS SDKを活用する機能など、

ネイティブ機能が追加されています。

NativeScriptプラグインでは、

完全なiOSとAndroidビルドが必要です。

通常、NativeScriptプレイグラウンド環境で

NativeScriptプラグインを使用することはできません。

ただし、いくつかのNativeScriptプラグインには、

NativeScript UI、加速度計プラグインジオロケーションプラグインなど、

NativeScriptプレイグラウンドに組み込まれたサポートがあります。

プラグインの使用方法については、

NativeScriptのドキュメントを参照してください。

また、NativeScript Marketplace

利用可能なプラグインを閲覧することもできます。

NativeScript UIを使ってみよう!

アプリのapp / list / list.component.htmlファイルを開き、

その内容を次のコードに置き換えます。

次に、app / app.module.tsファイルを開き、

次のインポートをファイルの先頭に追加します。

import { NativeScriptUIListViewModule } from "nativescript-ui-listview/angular";

その後、同じapp / app.module.tsファイルで、

直前にインポートしたNativeScriptUIListViewModuleクラスを

NgModuleのimport配列に追加します。配列はこのようになります。

最後に、app / list / list.component.tsファイルを開き、

その内容を以下のコードに置き換えます。

ファイルを保存します。

アプリがデバイスで更新されると、

リストページに移動し、

ハードコードされた食料品リストが表示されます。

NativeScriptUIListViewModuleをインポートする必要がある理由

Angularでは、テンプレートで使用する前に、

マークアップで使用するディレクティブ、

別名タグ名を登録する必要があります。

NativeScriptは、NativeScriptのコアUIモジュールで

これを自動的に行いますが、

この例で使用しているリストビューなどの

NativeScriptプロモジュールではこれを行いません。

上の例で何が起こっているのかを見てみましょう。

まず、ListComponentクラスに、

ngOnInitハンドラ内で3つのオブジェクトを

groceryListプロパティに追加します。

これにより、ハードコードされたデータの配列を

テンプレートにバインドすることができます。

次にテンプレートを解説しましょう。

<RadListView>proUIエレメントには、

データ配列(この場合はListComponentクラスに追加したgroceryList配列)を指す

itemsプロパティが必要です。

(どの配列を表示したいかをitemsプロパティで指定します。)

<RadListView>要素には、

items配列内の各アイテムの

レンダリング方法を指定する

<ng-template>の子要素が必要です。

let-*構文は、

ループ内でテンプレート変数を作成するAngularの方法です。

構文がTypeScriptのletキーワードのように

機能すると考えることができます。

これにより、配列内の各アイテムをテンプレート内で

itemとして参照することができます。

このテンプレートでは、配列の各アイテムを1つの

<Label>UIエレメントでレンダリングします。

[text]=”item.name”バインディングによって、

これらのラベルにはTypeScriptで定義されたgroceryList配列の

各アイテムのnameプロパティのテキストが含まれます。

p-15クラス名の詳細

NativeScript Core Themeには、

アプリケーション内のUIコンポーネントの

間隔を制御するためのいくつかのクラス名が含まれています。

クラス名は、

マージン/パディング(top / bottom / left / right – amount)の規則に従います。

たとえば、<Label class=”m-t-2″>は

margin-topが2のラベルをレンダリングし、

<Label class=”p-b-5″>は

padding-bottomが5のラベルをレンダリングします。

したがって、<Label class=”p-15″>では、

ラベルにpadding:15を適用します。

これらのクラス名の詳細については、

NativeScriptドキュメントを参照してください。

ハードコードされた食料品のリストが表示されたので、

バックエンドのライブデータと交換する方法を見てみましょう。

バックエンドのライブデータを取得してみよう!

app / shared / grocery / grocery.model.tsを開き、

次のコードを貼り付けます。

これにより、アプリ全体で使用できる

簡単なGroceryモデルオブジェクトが作成されます。

次に、バックエンドから食料品リストを

読み込むシンプルなサービスを作成しましょう。

app / shared / grocery / grocery.service.tsファイルを開き、

以下のコードを貼り付けてください。

ここのコードは、このガイドの前のUserServiceで

使用したコードと非常によく似ています。

Httpサービスのget()メソッドを使用してJSONデータをロードし、

RxJSのmap()関数を使用してデータを

Groceryオブジェクトの配列にフォーマットします。

このサービスを使用するには、

app / list / list.component.tsファイルを開き、

ファイルの先頭に次の2行を追加します。

import { Grocery } from "../shared/grocery/grocery.model";
import { GroceryService } from "../shared/grocery/grocery.service";

次に、同じlist.component.tsファイルで、

既存のgroceryList宣言を変更して、

汎用オブジェクトの代わりに

新しくインポートしたG​​roceryクラスを使用します。

groceryList: Array = [];

その後、ListComponentクラス内に次のコンストラクタ関数を追加します。

constructor(private groceryService: GroceryService) {}

コンストラクタにサービスを注入するので、

サービスをコンポーネントデコレータ内の

プロバイダとしても組み込む必要があります。

これを行うには、

既存のComponentデコレータを以下のコードに置き換えます。

最後に、新しいサービスのload()メソッドの

呼び出しを開始するには、

ListComponentの既存のngOnInit()メソッドを

以下のコードに置き換えます。

ややこしい説明が多くなってしまったので、

完全なlist.component.tsファイルのコードを書き出しました。

ファイルを保存します。

あなたのアプリがデバイス上で更新されると、

空白のリストページが表示されますが、

間違ったことはありません。

あなたのアプリはバックエンドから

食料品データを読み取るようになりましたが、

新しいアカウントに関連付けられている食料品はありません。

これらの変更を実際にテストするには、

ユーザーがリストに食料品を追加できるようにする必要があります。

次に、その方法を見てみましょう。

ステップ15.高度なレイアウトの使用

ユーザーが食料品リストに追加できるようにするには、

リストページにいくつか追加の

UIコントロールを追加する必要があります。

簡単な<StackLayout>を使って

必要なコントロールを積み重ねることができますが、

<GridLayout>要素を使って

やや複雑なレイアウトを作成する方法を見てみましょう。

<GridLayout>を使ってみよう!

app / list / list.component.htmlファイルを開き、

その内容を次のコードに置き換えます。

次に、app / list / list.component.cssファイルを開き、

その内容を次のコードに置き換えます。

ファイルを保存します。

アプリでこれらの変更が反映されると、

次のUIが表示されます。

(赤見づらくね?)

このレイアウトの仕組みを、

マークアップの外側の構造から見ていきましょう。

<GridLayout rows=”auto, *”>

GridLayoutのrows属性は、画面を2行に分割します。

最初のrow属性は、子供の高さに応じて自動サイズ変更され、

もう1つは画面の残りの高さ*を占めるサイズになります。

ゼロをベースとするrow属性を使用して、これらのUI要素を配置します。

<GridLayout row=”0″ class=”add-bar”>…</GridLayout>

GridLayoutは、row=”0″のために一番上の行にあり、

<ListView row=”1″>…</ListView>

ListViewは、row=”1″のために一番下の行にあります。

グリッドレイアウトでは、

画面を列に分割することもできます。

<GridLayout columns=”*, auto” class=”add-bar”>

ここで、columns属性は、

画面の上部を2つの列に分割します。

<TextField col=”0″></TextField>

col=”0″はテキストフィールドを最初の列に置き、

<Image col=”1″></Image>

col=”1″は最後の列に ‘+’イメージを置きます。

グリッドレイアウトは最も一般的に使用されるNativeScriptレイアウトです。

そのため、列と行の属性を使い分けて、

どのように動作するかを把握したい場合があります。

グリッドレイアウトだけでなく、

NativeScriptレイアウトをネストできます。

数値、パーセンテージ、およびその他のさまざまな値を渡して、

より複雑なグリッドレイアウトを作成できます。

詳細については、グリッドレイアウトのドキュメントを参照してください。

UIを準備したら、追加ボタンを機能させましょう。

追加ボタンを作ろう!

app / list / list.component.htmlを開き、

既存の<TextField>に新しく[(ngModel)]属性を付けて、

次のようにします。

次に、同じファイルで、

新しくtapイベント・バインディングを<Image>に追加します。

コードはこのようになります。

これらの属性が設定が終われば、

次のステップは、

ListComponentクラスに新しい食料品のプロパティと

add()メソッドを定義することです。

app / list / list.component.tsファイルを開き、

ListComponentクラス(既存のgroceryListプロパティのすぐ下)に

次の2つのプロパティを追加します。

grocery = "";

@ViewChild("groceryTextField") groceryTextField: ElementRef;

次に、同じlist.component.tsファイルの

先頭に次のインポートを追加します。

import { TextField } from "tns-core-modules/ui/text-field";

その後、既存のListComponentクラス

に次のadd()メソッドを追加します。

add()メソッドでは、

まずユーザーが食料品を入力せずに

tapしたかを確認します。

ユーザーが何か入力した場合は、

TextField要素のdismissSoftInput()メソッドで

デバイスのキーボードを閉じた後、

GroceryServiceのadd()メソッドを呼び出します。

この例を終了するには、

新しくadd()メソッドを定義する必要があります。

これを行うには、

app / shared / grocery / grocery.service.tsファイルを開き、

次の関数をGroceryServiceクラスに貼り付けます。

ファイルを保存します。

アプリがデバイスで更新されたら、

食料雑貨品を追加してリストにすぐに表示されるようになります。

そのすべてがバックエンドサービスによって完全に駆動されます。

かなりクールですね?

サービスに追加したadd()コードはよく知られています。

Httpサービスのpost()メソッドを使用して、

バックエンドへのHTTP呼び出しを行い、

次にRxJSのmap()関数を使用して、

返されたデータをGroceryオブジェクトに変換します。

このGroceryオブジェクトは、

ListComponentのadd()メソッドにより、

groceryListに追加し、表示されます。

このメソッドは、

this.groceryList.unshift()を呼び出して

Groceryオブジェクトをリストページのリストに追加し、

this.groceryを空に設定して

そのページのテキストフィールドも空にします。

この時点で、あなたは長い道のりを歩んできました。

アプリには機能的なログイン画面があり、

今すぐ追加できるバックエンド駆動型のリストがあります。

このチュートリアルを終了する前に、

さらにいくつかのタスクがあります。

まずユーザーがリストから削除する機能を実装し、

移動してインジケーターといくつかのアニメーションを追加してみましょう。

ステップ16. NativeScript UIコンポーネントのカスタマイズ

NativeScript UIは、

フルチャーティングライブラリを含む

専門的なユーザーインターフェイスコンポーネントのセットです。

したがって、アプリケーションを強化するために

使用できるたくさんの機能があります。

このステップでは、

ユーザーが食料品を削除できるようにするために使用する

コントロールの1つの機能を活用し、

NativeScript UIコントロールの詳細を調べる方法を学習します。

NativeScriptのUIについてもっと学ぶ

NativeScriptのUIには多くの機能を備えた

コントロールがたくさんあるため、

どこから開始するのかを知ることは難しいでしょう。

ここにいくつかの推奨事項があります。

動画学習者の方は、

まずYouTubeのNativeScript UIのツアーを見てみましょう。

ドキュメントをスキミングするのが好きな人は、

NativeScriptのUIドキュメントにコントロールと

その機能の完全なリストがあります。

コードをすぐに手に入れたい方は、

NativeScriptのUI Angularサンプルを御覧ください。

NativeScript UIのすべての機能を実際に示す

サンプルアプリケーションがそこにあります。

カスタマイズしてみよう!

app / list / list.component.htmlファイルを開き、

<RadListView>コンポーネントを下のコードに置き換えます。

現時点で何が起こっているのかについての詳細は心配しないでください。

後ほど解説します。

次に、app / list / list.component.cssファイルで、

ファイルの最後に次のCSSを追加します。

その後、app / list / list.component.tsファイルを開き、

次の新しいインポートをトップに追加します。

import { ListViewEventData, RadListView } from "nativescript-ui-listview";
import { View } from "tns-core-modules/ui/core/view";

これらのインポートと同じくapp / list / list.component.tsファイルの、

ListComponentクラスに次の2つのメソッドを追加します。

最後に、app / shared / grocery / grocery.service.tsを開き、

次のメソッドをGroceryServiceクラスに追加します。

GroceryServiceクラスは、

このチュートリアルのバックエンドエンドポイントにアクセスして

食料雑貨品目を削除します。

ファイルを保存します。

これらの変更でデバイスが更新されると、

リストの個々のアイテムをスワイプしてボタンをタップして削除できます。

NativeScriptのUIコンポーネントには、

アプリケーションに強力な機能を追加するために

使用できるたくさんの機能があります。

前の例では、RadListViewのスワイプアクション機能を使用しました。

これにより、ユーザーはリストアイテムをスワイプしてアクションを実行できます。

スワイプアクションの使用に関する詳細

この仕組みを理解するには、

マークアップのタグから見ていきましょう。

<RadListView row=”1″ [items]=”groceryList” [class.visible]=”listLoaded” swipeActions=”true” (itemSwipeProgressStarted)=”onSwipeCellStarted($event)”>

<RadListView>のスワイプ動作を有効にするには、

swipeActions属性をtrueに設定する必要があります。

それによって、あなたがスワイプ中に何をしたいのかを

正確に設定するためにいくつかのイベントを正確に購読することができます。

スワイプの動作を正確に制御する

いくつかの値を設定する必要があるため、

サブスクライブする必要があるイベントは

itemSwipeProgressStartedイベントです。

そこで、onSwipeCellStartedメソッドとそれが何をするかを見てみましょう。

ここでのキーは、右、左、および、

しきい値を設定するコードが下3行です。

これらの値は、ユーザーが左右にスワイプすることができる距離、

スワイプされたアイテムが

ドッキングするまでのオフセットをそれぞれ制御します。

この例では、ユーザーが削除ボタンの幅に

等しい距離だけ右にスワイプできること、

ユーザーが左にスワイプできないこと、

ユーザーが半分スワイプできることボタンが開く前の削除ボタンの幅等。

(左右逆な気がするけど・・・)

スワイプ機能を設定するもう1つの一般的な方法は、

ユーザーが明示的にボタンをタップすることなく

スワイプで自動的にアクションを実行することです。

<RadListView>はこの方法をサポートしています。

詳細については、

トピックのNativeScript UIドキュメントを参照してください。

ユーザーがリストから食料品を追加したり

削除したりできるようになりましたので、

このチュートリアルもあと少しで完成になります。

ステップ17.処理中のUIの管理

現在、最初にリストページにアクセスすると

食料品の表示が少し遅れが出ます。

この遅れは、新しいユーザーからしたら、

バックエンドからデータを取得するのではなく、

アプリがポンコツなのではないかと

疑心を抱かせる可能性があります。

NativeScriptアプリケーションでは、

ActivityIndicatorモジュールを使用して、

アプリがデータ処理中に

UI内にスピナーアイコンを表示することができます。

<ActivityIndicator>は、

主に1つの属性を使用する比較的シンプルなUI要素です。

<ActivityIndicator>のbusy属性がtrueに設定されている場合は、

<ActivityIndicator>が表示され、

usy属性がfalseに設定されている場合は表示されません。

リストページに<ActivityIndicator>を追加して

モジュールがどのように機能するかを見てみましょう。

ActivityIndicatorでリピナー表示

app / list / list.component.htmlファイルを開き、

最後の</GridLayout>の直前に次の行を貼り付けます。

これは、<ActivityIndicator>のbusy属性を

ListComponentコンポーネントのisLoadingプロパティにバインドします。

そのプロパティを定義するには、

app / list / list.component.tsファイルを開き、

grocery = “”;の直下に次のコードを追加します。

isLoading = false;

プロパティが存在するようになったので、

最後に、食料品データがロードされているときに

このフラグをtrueに設定します。

これを行うには、同じlist.component.tsファイルで、

既存のngOnInit()関数を以下のコードに置き換えます。

ファイルを保存します。

デバイスが更新された後、

リストページにアクセスしてください。

次のローディングインジケータが表示されます。

(表示は一瞬。もっとデータ用意すれば長くはなるとは思うが。。。)

<GridLayout>はrow または column属性を

複数のUIコントロールに適用して、

それらが画面上のスペースを占めるようにすることができます。

しかし、動作を確認すると、

最後に定義された<ActivityIndicator>UIが

RadListViewの上に表示されます。

これは、<RadListView>が値を読み込むあいだは。

<ActivityIndicator row=”1″>…</ActivityIndicator>

のように<ActivityIndicator>を読み込むからです。

課題として、ログインページに戻り、

ユーザーサービスへの呼び出しが実行されている間に

<ActivityIndicator>を追加してリピナーを表示させることもできます。

また、ユーザーが追加ボタンをタップした後の、

リストページに追加することもできます。

読み込みが遅いと思っていた方は挑戦してみてください。

このチュートリアルを終了するには、

アプリケーションアニメーションの表示を

磨くための最後の機能を1つ追加します。

ステップ18.魅力的なアニメーションを作成する

アプリ制作において、

堅牢で高性能なアニメーションを実行する機能を備えようとするのが、

人々がネイティブモバイルアプリを構築する最大の理由の1つであり、

NativeScriptはこれらのアニメーションを簡単に実行します。

NativeScriptアニメーションモジュールには、

次のような、画面上の要素に対するさまざまな

アニメーションを実行できる一連のJavaScript APIが用意されています。

リストページのにフェードインする

単純なアニメーションを追加して、

これがどのように動作するかを見てみましょう。

フェードインを追加する!

app / list / list.component.cssファイルを開き、

ファイルの最後に次のコードを追加します。

このコードは、ページが読み込まれたときに

<ListView>が非表示になるように、

<ListView>の不透明度を0に設定します。

またこのコードでは、要素の不透明度を

1秒後に0から1に変更するクラス名visibleも定義しています。

CSSアニメーションの構文が

どのように機能するかについては、

NativeScript CSSアニメーションドキュメント

または外部CSSアニメーションガイドを参照してください。

これでCSSが完成しました。

次のステップは、データがロードされた後に、

以前定義された クラス名visibleを

コントロールに追加することです。

これを行うには、

まずapp / list / list.component.tsを開き、

既存のisLoading = false;の直下行に

次の新しいプロパティを追加します。

listLoaded = false;

次に、同じファイル内で、

既存のngOnInit()関数を新しいlistLoadedフラグ

を設定する次のコードに置き換えます。

最後に、app / list / list.component.htmlファイルを開き、

<RadListView>タグを次のコードに置き換えます。

これにより、新しいクラス名visibleのバインディングが追加されます。

ファイルを保存します。

あなたのアプリが更新されると、

あなたのリストがロードされるときに

わずかにフェードインアニメーションが表示されるはずです。

ここで重要なのは、

リストビューの[class.visible]=”listLoaded”バインディングで、

TypeScriptプロパティのlistLoadedの状態に基づいて

CSSクラス名を自動的に切り替えます。

CSSアニメーションを使用する利点は、

TypeScriptコード内の特定のUI要素を

参照する必要がなくなることです。

ローカルのテンプレート変数を

作成する必要はありませんでした。

CSSアニメーションのアプローチは、

コードを分離した状態に保つのにも役立ちます。

TypeScriptコードはロジックに焦点を当て、

CSSコードにスタイリングの問題を改善します。

NativeScriptのアニメーションには

もっと多くのことがあります。

NativeScriptのアニメーションドキュメントを見て、

できることを知ることができます。

CSSアニメーションは、

Webから慣れ親しんだ構文を使用して

強力なアニメーションをコードに追加する簡単な方法です。

チュートリアルは以上です!

食料品店のリストを管理するための

機能豊富なクロスプラットフォームの

バックエンド駆動型アプリを作成しました。

このプロセスでは、

ログイン画面の作成、リストの作成、

強力なアニメーションの設定などを学びました。

そして、Angular、TypeScript、

およびCSSを使用して

NativeScriptの基礎をやってのけました!🎉

チュートリアル終了後

あなたは「はじめに」を完了しました。

NativeScriptの基本を学んだので、

プロの開発環境を設定してアプリを構築する準備が整いました。

そこでいくつかこの後の提案をさせてください。

オプション1. NativeScript Sidekickをダウンロードする

NativeScript Sidekickは、

NativeScriptアプリケーションを構築するための

デスクトップ開発ツールです。

Sidekickには、プラグイン、ビルド、デバッグなど、

より高度なNativeScript機能のツールと同様に、

開始に役立つスターターテンプレートが用意されています。

NativeScript Sidekick

オプション2. NativeScript CLIをインストールする

コマンドラインインターフェイスの操作に慣れている場合は、

NativeScript CLIをインストールして使用できます。

NativeScript CLIを使用すると、

iOSとAndroidの完全なアプリを開発マシン上にローカルに構築できます。

NativeScript CLI

さいごに

いつものように、立ち往生した場合は、

NativeScriptコミュニティフォーラムのヘルプに

お気軽にお問い合わせください。

NativeScriptを使って楽しい時間を過ごしましょう!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする