というわけで、まずは Visual Studio 2015 Community を起動して、Ionic 2 Blank プロジェクトを新しく作ります。
新しくプロジェクトを作成すると、必要なパッケージ諸々を npm がせっせとダウンロードしてくれます。
ソリューションエクスプローラの、プロジェクトの直下、一番上に Dependencies というノードがあって、そこに (restoring...) が表示されていれば、ダウンロードしている最中です。
出力ウィンドウにもそのログが出力されます。このとき、インストールされている Node.js のバージョンによっては警告がでます。
以下のように npm command completed と表示されたら準備完了です。
自分で package.json を編集するなどしてパッケージを追加したときも npm が動きます。そのときは終わるまで待ちましょう。
まずは実行。上部にある再生ボタンっぽいものを押下。
空プロジェクトのテンプレートはデフォルトではこんな感じ。起動するエミュレータのデフォルトは Ripple のはず、たぶん。
では、ここに Hello World を表示させてみましょう。
起動した Google Chrome を終了させて、ソリューションエクスプローラから home.html を開きます。app/pages/home/ の中にあります。
ion-content タグの中に先ほど表示した画面の HTML が書かれているので、ここをがつっと削除して Hello World を記述します。
<ion-content class="home" padding>
<h1>Hello World</h1>
</ion-content>
修正したら実行。
変わりません！
ソースを編集した場合は Task Runnner から Gulp タスクを実行します。Ionic はこの Gulp によってコンパイルされます。
メニューの表示 > その他のウィンドウ > Task Runner Explorer を選択します。
何もカスタマイズしてなければ、下部に Task Runner Explorer が表示されます。
この中の build を右クリックして表示されるコンテキストメニューから Run を選択します。
すると右側にコンパイルのログが表示されます。Process terminated with code 0. が表示去れっていればコンパイルは完了です。
Bindings の Before Build に Tasks の build が紐付いているので、普通はビルド実行を行う前にコンパイルされる、Task Runner の build が実行されるはずなんだけど、されない場合があるようです。中途半端にコンパイルされたり……。
どういうときにされない場合があるのか、詳しく調べていません。
というわけで、実行してみます。
Hello World は表示されたけど、変なのも表示されてますね……ｗ
最初に削除した ion-nav-bar でタイトルを表示させたり、違う編集したりすると消えます。
いろいろ検証したところ、最も有力な原因は文字コードです。
Visual Studio で作成すると、今回修正した home.html やこれに付随する home.js は Shift_JIS で作成されます。
しかし、これらを表示するテンプレートとなる index.html には charset="utf-8" の指定があります。charset の指定をファイルに合わせるか、ファイルの文字コードを utf-8 にしましょう。これで変なボタンは消えるかと思います。また、この文字コードが一致していないと、日本語は文字化けします。
とりあえず初回の Hello World はここまで！（後で最後辺りのことについて追記するかも？）
次回は画面遷移、かも！
0 件のコメント:
コメントを投稿