ionicを試す 2日目 文字を表示する
前回は"ionic"でひな形からプロジェクトを作りブラウザに表示させました。
ここでは、その表示を変更するところまでを試します。
前回の『ionicを試す 1日目』が終了していることが前提です。
もしコマンドプロンプト（あるいはPowerShell。以後省略)で"ionic serve"が動いていて、なおかつ
それがブラウザで表示されている状態ならば、そのまま続けてください。
そうでないならば、コマンドプロンプトを起動して以下の２つのコマンド入力してください。
------------------------------------------
"cd c:\MyTest\test000"
"ionic serve"
------------------------------------------
今、ionicで初めて作ったプロジェクトは動いています。
次にVisualStudioCodeでこれを変更する事を試みます。
--------------------- VisualStudioCodeの起動 ---------------------
VisualStudioCodeの起動方法は
・Windowsスタートボタンを押す
・最近追加したものに表示されていればそれをクリック
・そうでなければ"V"の項目にある
(Windowsスタートボタンを押し、”TABキー”を2回押し、"V"を押すのが早いかも？）
--------------------------------------------------------------------
VisualStudioCodeを立ち上げるとフォルダを開くように要求されると思います。
(まだファイルやフォルダを開いたことが無い場合)
"C:\MyTest\test000"を選択してください。
すると『このフォルダ内の作成者を信頼しますか？』と言うダイアログが開くかもしれません。
その下の『親フォルダ’MyTest'内のすべての作成者を信頼します』にチェックを付けた上で、『はい、作成者を信頼します』を押下してください。
左側に"test000"内のファイルやフォルダがエクスプローラ表示されます。
このフォルダ"test000"には何万と言うファイルがありますが変更するのはほんのわずかです。
特に今回は１つのファイルのみを変更します。
１．余分な表示を消す。
このプロジェクトでhtmlのようにブラウザ上の表示を引き受けているのは以下のファイルです。
"C:\MyTest\tet000\src\app\home\home.page.html"
とりあえず、"blanc"プロジェクトにふさわしく、画面の表示をすべて消してみましょう。
VisualStudioCodeで左側のエクスプローラを使い、次のファイルを開いて下さい。
------------------------------------------
"C:\MyTest\test000\src\app\home\home.page.html"
------------------------------------------
HTMLを多少かじった人ならば、タグで囲まれているからHTMLっぽいけど見たことの無いタグを使っているのでHTMLとは違うと思われるでしょう。
このソースの以下の部分を削除します。
------------------------------------------
・一番上の<ion-header>タグで囲まれた部分
・<ion-content>タグ内の<ion-header>タグで囲まれた部分
・<div id="container">タグに囲まれたコードすべて
------------------------------------------
VisualStudioCodeで削除を行い、保存("ctrlキー+S"が早いかもしれません)してください。
ブラウザの方を見ると真っ白な画面になっているはずです。
コマンドプロンプトには"Compiled successfully."のメッセージが出ていますので、ソースコードを変更したことをionicが起動したローカルサーバが察知してブラウザの表示を変えたことが判ります。
＊もし変更されていないのであれば、現在のブラウザの表示を閉じ、コマンドプロンプトで”ctrl+C"を押し、もう一度"ionic serve"コマンドを実行してみてください。
２．表示を付け加える
今度は、表示に文章を付け加えて見ましょう。
わずか4行になった"C:\MyTest\test000\src\app\home\home.page.html"のソースコードです。
---------------------------------------------------------------
<ion-content [fullscreen]="true">
<div id="container">
</div>
</ion-content>
---------------------------------------------------------------
<div id="container"> の末尾にカーソルを移動してエンターキーを押してください。
一行増え、その先頭でカーソルが点滅しています。
そこで"<p"と打ち込んでください。
入力候補がいくつか出るのが判りますね？
今回は">"を入力するしかないのでありがたみは少ないですが、この入力補助機能は慣れると便利です。
">"を入力すると閉じる側のタグ"</p>"が自動的に補完されますので、その間に何か文章を入れて保存してみてください。
例：<p>初めてのionic</p>
ブラウザに"初めてのionic"の文字が表示されました。
ソースコード
------------------------------------------
<ion-content [fullscreen]="true">
<div id="container">
<p>初めてのionic</p>
</div>
</ion-content>
------------------------------------------
小さな前進ですが、これもionicアプリです。
次は、この表示された文字を変更してみたいと思います。
