web制作してる人間がIonicでアプリ作った話(Ast制作):4 ガワ制作(html/css)

こんにちは、初めての方は初めまして。

AstCrowと申します。

タイトルのとうりですが、この回ではionicでの制作でガワ部分（見える部分）の制作云々について書いていこうかなと思います。

今回は

  • 必要知識とかって
  • ガワ制作の流れ
  • ガワ制作（html/css）

あたりを書いておこうと思います。自分への忘れないようメモ書きでもあります。

書いてみたら結構長くなってしまいコンポーネントについて書けなかった…。

次回は便利なionタグのコンポーネントについて書こうかなと思います。

 

必要知識とかって

最初に書いておきますがまっったく身構えなくて大丈夫！です。

ガワ（見える部分）の制作に関してはhtml/cssの知識があればでき、またここの知識次第でいろんな見た目も可能です。

ちなみに実際ソースを書く際、実際にはcssではなくSCSSを使いますが、ままscssに中身は通常のcss書いてても特に問題ないため、無理にSCSS覚えなくてもいいよ的な意味であえてcssの知識で大丈夫！と書いています。

 

htmlも通常のサイト制作だとタグの順序やその意味を理解し使っていくものですがionicの場合最終的にはアプリになるため、タグの意味がないというか…最悪中身の部分を全部divとかで作っても問題ないのではと個人的に思います（作れれば）。要はSEO対策やらクローラー対策の必要がないので…（認識間違っていたらすみません…ご指摘お願いいたします）。要はhtmlの知識もそこまで必要でない、さわり程度でも大丈夫ですよということを言いたく。

 

html/css触ったことなくても、ネットに沢山情報サイトがあるので調べつつでも制作はよほど複雑で高度なものでなければ可能かなと思います。

 

type script（フレームワーク:Angular/Vue.js）の知識は中の仕組み部分で必要になってきます。

ただこれも何を作るか次第でどのくらいの知識が必要か、場合によってはこれ以外の知識も必要になってきたります。

Astの場合、試合結果を多量に登録するアプリのため、データベースを使用しています。そうなると当然データベースの知識も必要になってくるわけで…。

 

でも個人的には最初にも書きましたが身構えなくても大丈夫だと思います。てか大丈夫です。私はWeb関連の仕事をしていたため、html/cssの知識は盛り沢山ではあったものの、type scriptやデータベースの知識はさっぱりの初心者でした。

そんな初心者でも作成・公開（もちろんアプリ公開も）までできました。なので大丈夫です。

 

ガワ制作の流れ

まずは作業の流れ、どこから作っていくかを考えてから作業に入りました。

Astの場合大まかに3ページあり

  • ゲームごとのテンプレートを登録する画面
  • 試合結果を登録する画面
  • 登録された試合結果をもとに勝率や平均値を出しグラフ化、表示する画面
となっています。
テンプレとなる対戦ゲームで登録したいデータテンプレ作成⇒それを使って試合結果を登録⇒さらにその試合結果をもとに分析…と、データを扱う関係上素直に上記リストの上から順に作成を進めました。
またAstですが、最初のデザイン時ではcss/htmlだけでできる限りガワを表現しようと思っていたためいきなりhtml・cssをさわっていますが、本来ならまずは画像やアイコン作成が先かと思います。
後からちょこちょこ画像やアイコンを作るのは効率が悪いので…。
 

ガワ制作（html/css）

表示画面を見ながら制作していきます。
ターミナルで

 

cd ●●アプリのフォルダパス●●〜

 

を入力してエンターで開く。ここで

 

ionic serve

 

を入力してエンター。これでデフォルトでしているブラウザが立ち上がりhttp://localhost:8100というURLで作成したページが表示されます。

ちなみにアプリ内のフォルダが更新（保存）される度に勝手にリロードしてくれます。俗にいうホットリロードてやつですね。これがすごくいいやつで常に最新の状態が出ているので画面の確認が本当に楽です！

 

 

htmlをいじる際は例えばtabのテンプレートを選択して作成している場合
 
●●アプリのフォルダパス●●/src/app/~
 
のなかにあるフォルダで「tabs」以外のフォルダが各タブのページのhtmlが入っています。こいつをいじっていく感じです。
tabsは下のタブ部分のhtmlが入っています。タブ部分のhtmlいじる際はここの中にあるhtmlを。
 
テンプレがblankの場合は
 
●●アプリのフォルダパス●●/src/app/home
 
の中にあるhtmlをいじる感じです。
 
これを見てあれ？テンプレ同じはずなのに上記に当たるファイル覗いてもそれっぽいファイルないんだけど…と思った方もいるかもしれません。
実はionicフレームワークが3系か4系以降かにもよってファイルの位置とか微妙に違うんですよね…。
この記事では4系以降を扱っています。
3系か4系かわからないよ！てな方は例の黒い画面ことターミナルでアプリのフォルダを開き(cd ~~ でファイル移動)
 
ionic info
 
を入力してエンター。するとそのアプリのionicのバージョンやらCapacitorのバージョンやらの詳細を教えてくれます。
その中のIonic Frameworkの部分が
 
ionic-angular　~バージョン数値~　⇒3系

@ionic/angular　~バージョン数値~　⇒4系以降

 

のようです。
個人的には3系でないとダメ！てなことがない限りは4系以降の方を選んだほうがいいかなと思います。
 
html内には既にいくつかタグ等が書かれていると思います。
おそらくは中身こんな感じになっているかなと

<ion-header>

~ここがヘッダ部分です。いらないなら削除してもまま問題なくは動くと思います~

</ion-header>

<ion-content>

~ここがコンテンツの部分です。基本的にここに色々書いてきます~

</ion-content>

 

基本的にはion-content内に色々書いていく感じです。

下記のスクショはAstのソースの一部です。だいぶ汚いですね……。ままこんな感じでゴリゴリ書いていました。

中には通常*ngForとか{{●●}}とか仕掛けの部分がありますが一旦はガワ制作なのでこれらは気にせず…。
まずはガワ作り⇒ある程度作ってから仕組み作り＋仕組みに合わせてhtml修正や整理といった感じで制作しています。
 
 
cssですがファイル自体は上記htmlと同じフォルダ内にある~~.scssをいじる感じです。
cssファイルは使いませんし、scssのコンパイルも不要です。もちろん中身はSCSSで書いてもcssで書いても大丈夫です。
 
ただこのscssそのままだとこのページにしか反映されないです。
共通で一個のcss読ませたい場合はいくつか方法があります。

  • フォルダ内にあるhtmlファイルと同名の~~.tsの中身、@ComponentのstyleUrls:のパスを任意のscssのに変える（記述がなければ追加）

  • 既に共通で読まれている~theme/variables.scssに追記で書く（ここにはionicでのデフォルトカラー等やダークモード時の色等の指定が書かれている）

  • scssファイルを新規で作成し、アプリ直下のangular.jsonの"styles":の欄にscssのパス追加

  • scssファイルを新規で作成し、~theme/variables.scssにインポートさせる

多分まだ他にもあるかも…。もっといい方法があったら知りたいです。
私は一個一個指定するのが面倒なのとデフォルト指定のvariables.scssとは別にscssファイルを分けたかった為、リスト3番目のscssファイルを新規で作成して、アプリ直下のangular.jsonの"styles":の欄に作成したscssのパス追加をしていました。
ただangular.jsonに追加するやつは3系ではできないかも…（フォルダの位置とか微妙に仕組みとかが違うので）。
 
これらをいじって制作していきました。
 

最後に

コンポーネントで色々な仕組みを簡単にタグ入れてtsファイルにちょこっと追加で実装できるよ、Astではこんなの使って便利だったよ、まで書きたかったのですが色々書いていたら思った以上に長くなってしまった…。
制作の箇所でionicフレームワークの3系、4系の話が若干関係なく長いなと思ったかもしれないですが、これ実は結構曲者で色々わからなくて調べるとionicの記事が引っかかるのですが、3系4系の情報が混合していて同じように書いてみたのに動かない！が結構あったんで…。なのであえて確認の仕方まで書きました。ionicの記事等参考にする際はその記事のフレームワークのバージョンを確認してから読むと遠回りが少なく済むかも！です。