ionicでアプリ開発入門 ionic serveした時の挙動

2018-10-02

ionicの実態はどこに?

前回ionic startしてionic serveしてブラウザが起動してという一連の作業をやってみました。
うまくいきました?

もうwebのデザインってほぼこれで作ればいいんじゃない?wpとかもういらないんじゃん?とかちょっと思ってみたりします。
amp対応してくれとかさ、面倒くさいしさ、御社の場合amp化する前にコンテンツ作りなよって言う気持ちとかさ
時代は一周回って手入力の時代じゃない?毎回ビルドすれば良くない?
時代はデザインよりコンテンツ性だと思うよ。
阿部 寛のweb見てみなよ、面白ささえ有れば人が来るから。
目に優しいし、なにより表示速度超早いから
とか言ったらクライアントにキレられるんだろうなー
ちなみに私webデザイナーしてた頃も有りました。
圧倒的なデザインセンスの無さにデザインはしたくないと思いましたけど。
そういった意味でこういった見た目が整ったテンプレートがあるって素晴らしいと思うんですよね。
web2.0とかフラットデザインとか、一定の流行りというものがあってそれが固定化されていき、最終的にデザインって統一化されていくんだろうなと思っていました。

ところで、ionic serveした時のファイルってどこに生成されると思います?
本体が出力されるフォルダはどれでしょう

答えはwww/の中です。
試しにwww/のディレクトリを開いて、中のファイルすべてゴミ箱へ捨ててからもう一度ionic serveしてみて下さい。
新しくファイル作られているはずです。

これ、大事なことなので先に書いておきました。
予備知識として必要なので覚えておいてくださいね。
www/の中に入ってます。

ionic serveした時の挙動を確認しよう

さて、ionic serveするとブラウザが勝手に起動してweb画面を表示してくれますが裏ではいろんな事件が起こっています。
今回は調べた限りですが、ざっくりと起こっている事件を把握していきましょう。

ionic serveしたときに起こっている事件とは?

1.不要なファイルを削除している事件

www/の下を削除、掃除する
具体的にはwwwの下の中身を削除する。
何回もビルドしていると不要なファイルが出来てくる事もあるし、それによる不具合があったら中々気付かないですもんね。
ちなみに私も掃除をするときは机の上に有るものすべて捨てます。
苦手なんです、OSOUJI☆

2.拡張言語のコンパイル事件

scssとtypeScriptをコンパイル
コンパイルで良いのかしら。
scssとTypeScriptをそれぞれcssとjavascriptに変換している。

ブラウザなどはscssとか普通に読めません。TypeScriptも同じ。
もしかしたら読めるようにできるのかもしれないけど私は知りません。
なので、せっかくTypeScriptで必死こいてコードを書いてもブラウザやアプリ側で理解できないのであればそもそもアクションの発火や見た目の変更が行われません。
そこでscssはcssに、typeScriptはjavascriptに変換してやる必要があるのですがそれをionic serveコマンドを打つことで勝手にやってくれます。

じゃあなんでそもそもcssとjavascriptで書かないのよ。
と思うかもしれないんですが、すごく、凄く、もの凄くめんどくさいんですよね。
とくにjavascript
気になる人は一度javascript書いてみれば良いとおもうよ。
私も書けるわけじゃないですけどね。
同じく、cssもscssで書いた方が絶対楽です。
特にネスト周り
地獄のように深いネストだった場合
html body #wrapper .mainCl .specialCl p.text{}
みたいな、もっと深いネストだったら…こんなのは毎回書いてられません。
コピペでも賄えるけど新しい派生が出た時などどこから削除して書きなおせばよいやら。
cssに関してはいくらでも書けるので今度cssに関しての記事も書きましょう。

ちょっと長くなりましたがscssとtypeScriptを使う理由は楽できるから
それと、コードが見やすくなるからです。

3.deeplinksの発生事件

deeplinkってなによ。
多分これのことだと思う

まぁ「ディープリンク」って単語が出てきたら「トップページ以外に向けて張ったリンク、あるいは、スマホアプリの特定の画面に移動するリンクなんだな~」と、お考えください。

ディープリンク(Deep Link)とは?
アプリの特定の画面に遷移させることのできるリンクのこと。

なるほどわからん。
が、イメージとして思いつくものがある。
スマホアプリをいじっていて、なんか変なボタンをポチっと押すとツイッターなりフェイスブックなり起動することが有るじゃないですか。
あれですか?
あれのことですか?

もう少し詳しく調べますね。

詳細は後日

必要なファイル(画像など)のコピーされる事件

ファイルのコピー
開発で使用していたファイルをwwwの下、assetsディレクトリにコピーしてやります。
理由は、imgタグとかのリンクが開発環境のURIになっていたら本番でもってこれないでしょ?
開発環境はあくまで開発で使うだけで本番には無いんだから。
ということ。
www/は公開用のディレクトリなのでそちらへファイルをコピーしてやる必要がありますよね。

ちなみに、開発環境というのはsrc/の下のことです。
画像などはsrcの中のassetsディレクトリに入ってますん。

5.css/javascriptファイルを1つのファイルにまとめてwww/の下に出力する事件

ファイルを一つにまとめるイメージ図
理由は、同時に複数のファイルを読み込むとロード時間がかかるから、だそうで
まあ、あれだよね。完全にスペックと回線の太さに依存するよね。
でもこれは正しいと思う。
好きなことを一気に手を出すと全部の進行がゆっくりになるあれですよ。
ご飯食べながら歯磨きするのって大変じゃん?

6.開発用のプレビュー画面を起動させる事件

最終的に目視で認識できているのがこれですよね。
ブラウザを開く神様
ブラウザが起動して、該当のファイルを読み込んでwebページを表示しています。

いかがでしたでしょうか。
ionic serveするだけでこんなにも色々な事件が起こっております。
これをいちいちコマンドで処理していくの面倒くさいですよね。
それを1行のコマンドで賄ってくれるなんてserveさん素敵です。

ionic

Posted by ogin