Webアプリを作ってみよう

第6話 初めてのプロジェクト編集(変数の表示・変更)

---------------------------------------------------

前書き

--------------------------------------------------

　【第4話　ionicで作る初めてのWebアプリ】でionicでWebアプリを作成しました。

　これは表示のみで変数も動作もありません。

　第6話では、

　・変数と配列を使う

　・変数や配列の情報(値や文字・配列の長さなど)をブラウザに表示する

　・ブラウザから変数を入力しセットする

　と言った内容を試します。

---------------------------------------------------

VisualStudioCodeを使う(プロジェクトを開く)

--------------------------------------------------

　プロジェクトの編集には、【第2話　開発環境を整える】でインストールしたVisualStudioCodeを使います。

　もし日本語設定が必要ならば以下の手順で行えます。再起動後に日本語になるので設定後、一度終了してください。

　・VisualStudioCodeを立ち上げる。

　・Ctrl+Shift+Pを押す。

　・displayと入力してフィルターをかけ”Configure Display Language”を押す。

　・各言語の中から日本語を選ぶ。

　・Restart(再起動）して良いか聞いてくるのでRestartボタンを押す。

　・日本語表示で再起動したことを確認して完了。

　VisualStudioCodeでプロジェクトを開くには、プロジェクトのフォルダを開きます。ショートカットキーはCtrl+K+Oです。

　ファイルメニューの"フォルダーを開く"から開いても構いません。

　開くフォルダは【第5話　プロジェクトの編集をする前に】で作成したプロジェクトフォルダ"C:\MyTest\test01"です。(test00はstandloneタイプのangularなので今後使いません)

---------------------------------------------------

ファイルを開く

--------------------------------------------------

　次に編集するファイルを開きます。

　この段階では、画面左端にエクスプローラでプロジェクトフォルダ内のフォルダとファイルの一覧が表示されていると思います。

　もし開いて無ければ、左端の上下のアイコンリストの一番上のエクスプローラを押してください。(もう一度押すと閉じます）

　エクスプローラ内の上から4番目に"src"と言うフォルダがあるのでクリックして、これを展開させます。

　展開した中の一番上の"app"をさらに展開、その一番上の"home"を展開します。

　>src>app>home内には、いくつかのファイルがありますが使用するのは以下の3つのファイルになります。

　・home.page.html

　・home.page.scss

　・home.page.ts

　ここでhome.page.htmlを押すと、右側にファイルの中身(コード)が表示されます。

　別のファイルをクリックすると表示されるファイルが変更します。ダブルクリックで開けば、別なタブが開き複数のファイルを表示できます。

　次の操作のために一旦、すべてのタブを(タブのファイル名右横のXを押して)閉じましょう。

　プロジェクトは開いたままで構いません。

---------------------------------------------------

プロジェクトを起動する

--------------------------------------------------

　ここでコマンドプロンプトを立ち上げてプロジェクトを起動します。

　・コマンドプロンプトを立ち上げる

　・以下のコマンドでカレントディレクトリをプロジェクトフォルダにする

　　cd C:\MyTest\test01

　・以下のコマンドでプロジェクトを起動する

　　ionic serve

　問題が無ければ、既定のブラウザにWebアプリの画面が表示されます。

　実はVisualStudioCodeからもプロジェクトの起動を行えますが、GoogleChromeがインストールされている必要がある等、準備作業が必要なので、ここではコマンドプロンプトからの起動を行います。

---------------------------------------------------

VisualStudioCodeでソースを変更

　"home.page.html"のクリア

--------------------------------------------------

　現在のWebアプリの画面は

　・左上に"Blank"の文字列

　・画面真ん中に太字で"Ready to create an app?"

　と言う表示があるはずです。

　VisualStudioCodeから先ほど見た"home.page.html"を開いて比べてみましょう。

　通常のhtmlソースによく似ていますが、<ion-ｘｘｘｘ>と言うionic独特のタグが多用されています。

　さて少し乱暴ですが、このソースコードをすべて削除してみましょう。

　・Ctrl+Aでソースコード全選択

　・Deleteキーを押下で削除

　・Ctrl+Sでファイル保存

　予想通りブラウザは何も表示されない状態に変わり、ソースコードの変更が起動中のプロジェクトに反映する事が判りました。

---------------------------------------------------

VisualStudioCodeでソースを変更

　"home.page.ts"に変数を追加

--------------------------------------------------

　次にVisualStudioCodeから"home.page.ts"を開いてみます。

　5つの変数と多少のコメントをつけて変更したものを下記に貼り付けます。

　お使いのVisualStudioCodeの"home.page.ts"を上書きして見て下さい。

（Ctrl+Aですべて選択、Ctrl+Vで貼り付け）

home.page.ts

//-----------------------------------

import { Component } from '@angular/core';

@Component({

selector: 'app-home',

templateUrl: 'home.page.html',

styleUrls: ['home.page.scss'],

})

export class HomePage {

//変数を宣言しています

strPlaceHolder="なにか文字を入力してください！"

strText=""

strComment1="入力値："

strComment2="文字数："

strComment3="Go! Go! Go!"

//変数を宣言しました

//constructorは最初に一度だけ動く関数です。

constructor() {}

//必要ならこの下に関数を追加します

}

//-----------------------------------

　貼り付けたら"home.page.ts"を保存してください。（Ctrl+S)

　ここでは変数の追加のみを行っているので、Webアプリの挙動には何の影響も与えていないはずです。(ただしエラ-が有れば画面全体が赤くなり警告が出る)

　次に"home.page.html"のソースに以下を貼り付け、同様にセーブします。

（Ctrl+Aですべて選択、Ctrl+Vで貼り付け）

<ion-content [fullscreen]="true">

<div id="container">

<input type="text" size="30" [(ngModel)]="strText" placeholder={{strPlaceHolder}}>

<br>

<strong>{{strComment1}}</strong>

{{strText}}

<br>

<strong>{{strComment2}}</strong>

{{strText.length}}

<br>

<strong *ngIf='strText.length==5'>{{strComment3}}</strong>

</div>

</ion-content>

　貼り付けたら"home.page.html"も保存してください。（Ctrl+S)

　入力を促すテキストボックスと入力値と文字数を示す文字列が表示されています。

　重要な点は、"home.page.html"にはやや複雑な書き込みがありますが、プログラム部分である"home.page.ts"は、変数の設定(および初期化)以外は行っていないという事です。

　試しにテキストボックスに何か文字列を入力して見て下さい。

　入力するごとに、入力値と文字数の部分が変わり、さらに5文字入力すると”Go! Go! Go!"と言う表示が現われます。

　つまりionicで作ったWebアプリは、データの状態に従い、関数のコーディング無しで表示状態を変えることが出来ると判りました。

　次の投稿では、配列の扱いについて見てみたいと思います。