【Angular v6】作成中のプロジェクトのスタイル管理をscssに変更したい場合

現在、自サイトをAngularで作成中。

AngularはAngular CLIがいろいろやってくれて便利なので、
ほぼすべてお任せ状態なのですが、
作った後のプロジェクトの設定を変えようとすると途端に戸惑ってしまうわけです。
(下手に直すと壊れて動かなくなったり…。)

まぁ、ちゃんと裏でどう動くか見ておこうねって話なのですが、サボり癖のついた私はそのあたり手を抜いて後でひどい目に遭うわけですw

 

と、前置きはここまでにして、今回は巣対するシートをcssで作成したAngularプロジェクトをscssに置き換える方法。

 

一番いいのは、「今の時代、cssを生で触るなんてしないよね!!」と考えて、プロジェクトを作るときにオプション設定で対応すべきなのですが、
私みたいに「よっしゃ!!やるで!!」と飛び込みで始めちゃう人もいるわけです。
そしてあとで「cssだと読みづらい…あっ...バグった」となるわけですね。

 

今回は、「もうプロジェクト開始しちゃったけど、あとでscssに変えたくなった…」という人向けです。

 

ということで手順。

※ちなみに私の環境はv6です。web-animations読み込まなくてもよくなってるのでいいですね(^^)/

 

(1)angular.jsonを開き、以下の箇所を書き換える。

・「projects/<プロジェクト名>/architect/build/options/styles」プロパティ

書き換え内容:「src/styles.css」⇒「src/styles.scss」

・「projects/<プロジェクト名>/architect/test/options/styles」プロパティ

書き換え内容:「src/styles.css」⇒「src/styles.scss」

・「schematics/@schematics/angular:component/architect/styleext」プロパティ

書き換え内容:「css」⇒「scss」

 

(2)src/styles.cssファイルの拡張子を「scss」に変更

 

(3)あとは自分が作成したプロジェクト内のcssファイルの拡張子をscssに書き換える。
(このファイル名を定義しているところは漏れなく直してください。特にAngular CLIの「ng componet」で作成している場合、comonent.tsファイルでstyleUrlsをファイル名で指定しているはずなので、そこも漏れないように。)

 

 

ここまで。私の場合は(1)~(3)を対応することでscssで書けるようになりました。

簡単ですね。

 

以上です。

 

2018/5/20 賢帝俊来

2018/4/30 1ヵ月成果報告

目標達成に向けてどこまで動けているか、ひと月ごとに確認しておく。

 

目標は以下。

kenteiblog.hatenablog.com

 

  1. 高度情報技術者試験の合格
    ⇒結局腰痛で受けに行けず。(勉強もできてなかったが。。) 秋に向けて頑張ります。。
  2. 予算管理ツールの導入、運用(目標達成)
    ⇒とりあえず使用していく予定。目標達成とする。
  3. (2月完了済み)モバイルルーターの契約見直し(目標達成)
    ⇒解約済み。
  4. 体重を10kg落とす
    ⇒±0kg
  5. 定期健診を受ける
    ⇒対応なし。言い訳は仕事忙しすぎ(>_<)
  6. アプリを2個以上リリースする
    ⇒以下2つをリリースすることが確定
    ・ホームページ(Kentei Lab(仮))
     AngularベースでSPA作成。(サーバーサイドは未定) 
    ・ゲームアプリ(Number Tree(仮))
     
    Flutterベースで作成。(サーバーサイドは未定だがホームページと同様の予定)
  7. ブログを最低1週間に1回は更新する
    ⇒4/1の嘘記事と、検定合格の報告のみ。。言い訳は仕事忙しすぎ(>_<)

 

 

 

先月同様、仕事の忙しさにかまけて、色々と駄目な結果になってます(>_<)

唯一進んだのは、リリースするアプリが決まったことぐらいですかね。

来月はもう少し頑張ります。(ただ来月も仕事忙しいんだよね。。はぁ、辞めたい。)

 

以上です。

2018/4/30 賢帝俊来

紅茶検定に合格しました

2ヵ月ほど前の目標進捗報告で書いていた「紅茶検定」に合格しました。

kenteiblog.hatenablog.com

 

 

www.kentei-uketsuke.com

 

ベーシック(初級)とアドバンス(中上級)の両方を受けていましたが、両方とも受かっていました。(アドバンスのほうがギリギリでしたが…('ω'))

 

カレルチャペック紅茶店の可愛らしい絵が描かれた賞状がもらえるので、紅茶好きな人にはおすすめです。

賞状はこんな感じです(^^)/

 

f:id:kentei0715:20180412220249j:plain

 

1つ趣味の範囲が広がった気がします。次はコーヒーでも受けてみようかな(^_-)-☆

 

以上、報告でした。

 

2018/4/12 賢帝俊来

私事(エイプリルフールネタ)

(エイプリルフールネタです。お騒がせして申し訳ありません。)

 

すみません。私事です。

 

最初は親族のみに留めておく予定でしたが、
拠点が変わることにつながるため、書かせていただきます。

 

昨日結婚させていただきました。

 

また、私の懇願が通ったのか、弊社でもリモートワークが解禁され、

相手の実家が近い地方へと拠点を移すことになりました。

(時々は飛行機で本社に戻らないといけないようですが、基本的には行ったっきりになります)

 

電波の届きにくいところなので、準備ができるまでブログの更新などが滞る可能性があるため報告しました。

とはいえ、ブログは引き続き続けていきますので、今後ともよろしくお願いいたします。

 

 

 

以上です。

 

 

 

 

 

 

 

 

2018/4/1(今日はエイプリルフールですね(^_-)-☆) 

賢帝俊来

2018/3/31 1ヵ月成果報告

目標達成に向けてどこまで動けているか、ひと月ごとに確認しておく。

 

目標は以下。

kenteiblog.hatenablog.com

 

  1. 高度情報技術者試験の合格
    ⇒結局今月は何もできてないです。。言い訳は仕事忙しすぎ(>_<)
  2. 予算管理ツールの導入、運用
    ⇒先月同様マネーフォワード運用中
  3. (2月完了済み)モバイルルーターの契約見直し(目標達成)
    ⇒解約済み。
  4. 体重を10kg落とす
    ⇒+2kg(´゚д゚`)
  5. 定期健診を受ける
    ⇒対応なし。言い訳は仕事忙しすぎ(>_<)
  6. アプリを2個以上リリースする
    ⇒Flutterでアプリを製作中。
  7. ブログを最低1週間に1回は更新する
    ⇒3月はFlutterの体験記を書きました。7記事分書きました。

 

 

結局、仕事の忙しさにかまけて、病院もいけてないし勉強もできてないですね。。

唯一 褒められるのはFlutterの体験記を書ききれたことぐらいですかね。

もう少し自分の時間が取れるように努力したいと思います。

(なんか体重が増えてる気がするけど…明日から頑張る(^^)/ww)

 

以上です。

2018/3/31 賢帝俊来

Flutterを体験しよう最終回 ~Flutterをもっと学ぼう~

 前提記事

kenteiblog.hatenablog.com

 

ということで、ここまで公式のドキュメントを参考にしながら、手順通り進めてきました。今回は、「体験してみよう」の最終回です。

Get Started: Learn More - Flutter

 

いつもは「直訳は続きからで~」となるのですが、今回はかなり単純な内容なので、直訳をほぼそのまま載せます。(ほぼ他のページへのリンクなので。。) 

 

では以下からスタート。

 

Flutterについてもっと学んでみよう

 

◆Flutterフレームワークについてもっと学ぼう。

 

 

◆その他(ドキュメント類)

 

※あとは、「困ったことがあればメールしてね」というのと、「Flutterライフを楽しんでね(^^)/」というメッセージが書かれていますが、ここでは省略します。

 

 

 

終わりに

ということで、ここまでが公式のドキュメントに記載されている、Flutterの体験方法についてでした。

全体的な仕様動作を掻いつまんだようなドキュメントのようで、これを読むと基本的なことはできるようになった気がします。(とはいえ記載時はβ版なので今後も進化していくと思いますが)

本記事でも示したように、Flutterフレームワークについてはまだまだ学べることがあるようです。今後も読み進めていく予定ですが、今までのように全訳を載せるようなことはせず、気になった部分だけピックアップして記事にする予定です。(あくまで予定ですw)

 

依頼があればしますが…まぁここまでの訳の体たらくを見ていただければ、そんな気は起きないと思いますw

 

うーん、最近は日本語も怪しいのに…人語が話せなくなりそうですw

 

以上です。

2018/3/26 賢帝俊来

Flutterを体験しよう4-2 ~Flutterでアプリを作ってみる2~

 前提記事

kenteiblog.hatenablog.com



 

ということで、公式のドキュメントを参考にしながら、手順通り進めていきたいと思います。今回は、実際にアプリを作ってみようという話の続きです。

Write Your First Flutter App - Flutter

 

1ページが長いので、今日は第2弾ということで最後まで読み進めます。

 

なお、私が文章をそのまま意訳した結果については最後のほうに「続きから」の形で隠しておきます。(説明上、余計な文もあるので)

 

では、以下からスタート。

 

自分のFlutterアプリを書いてみよう

ドキュメント上は以下の7つのステップに分かれています。

  • Step1: Flutterアプリの開始点を作成
  • Step2: 外部パッケージを使用
  • Step3: Stateful Widgetを追加
  • Step4: 無限にスクロールするリストビューを作成
  • Step5: 対話性を追加
  • Step6: 新しい画面への遷移
  • Step7: テーマを利用しUIを変更

本記事では、Step5~Step7を説明していきます。(上記の青文字部分)

 

 

1. Step5: 対話性を追加

Step4までで、名前の一覧を表示するという動きを実現できました。

次は、対話性(インタラクティブ)を実装していきます。
先に結論から述べてしまうと、以下ができるようになります。

  • 一覧の各行にハートマークが表示され、押すことでONOFFを切り替えられる。
  • 上記のONOFFはスクロールして戻ってきても残ったままになっている。(状態を保存している)

 

(1) 以下のように、lib/main.dartを修正します。(コードの説明はコメントで書いています。文頭の番号は実装順と同じです)

 

flutterアプリを作ってみたい5-1

 

(2)Hot Reloadして以下のような表示となります。

 

f:id:kentei0715:20180325121356p:plain

 

ハートアイコンを押すことで、ON(ハートが赤い状態)とOFF(ハートが白抜きの状態)を切り替えることができます。この状態は、無限スクロールを繰り返した後でも、消えることなく残っています。

 

2. Step6: 新しい画面への遷移

 

ここでは、新しい画面への遷移の方法を示します。

また、Flutterでは画面のことを「route(ルート)」と呼ぶらしいので、説明上「ルート」といったら画面のことと解釈してください。

 なお、先にできることの結論から言ってしまうと、以下のとおりです。

  • アプリケーションバーの右方にボタンを設置。押すと新ルートに遷移できる
  • 新ルートではお気に入り登録した名前(ハートマークON)の一覧が表示される

 

(1) 以下のように、lib/main.dartを修正します。(コードの説明はコメントで書いています。文頭の番号は実装順と同じです)

 

flutterアプリを作ってみたい6-1

 

(2)Hot Reloadして以下のような表示になります。

 

f:id:kentei0715:20180325122920p:plain

アプリケーションバーの右のほうにあるアイコンを押すと、画面が遷移してお気に入り一覧が表示されます。
上記画像のとおり「HeadBird、SharpEast、WebSpread」がお気に入り登録されているので、遷移後もそれらが表示されています。

なお余談ですが、新ルートに表示されている戻るボタン(←ボタン)は特に実装しなくても、Navigatorがよしなにやってくれるものです。

 

3. Step7:テーマを利用しUIを変更

 

一応、前のステップまででアプリの動作は出来あがっています。

最後はUIの見た目を変えてみましょうという話です。おまけ的な話ではあるので、軽く読んでいただければと思います。(修正も微量です)

 

(1) 以下のように、lib/main.dartを修正します。

 

flutterアプリを作ってみたい7-1

 

(2)Hot Reloadすると以下のような表示になります。

 

f:id:kentei0715:20180325123730p:plain

 

前ステップまでの画像と比較してみてください。アプリケーションバーの部分の背景色が青色から白色に変わっているはずです。

 

 

 

4. 終わりに

ということで、前回記事も含めてStep1~Step7まで見てきました。
ここまでで以下のことが体験できました。

  • Flutterアプリの地盤からの開発
  • Dartコードで記述
  • 外部のサードパーティ製のライブラリを利用
  • より速い開発サイクルのためのHotReloadを利用
  • Stateful Widgetの実装、およびアプリへの対話性の追加
  • 遅延ロードの実装、および無限のスクロールの実現
  • ルートの作成と遷移ロジックの実装
  • テーマ利用によるアプリのUI表示の変更

なかなか盛沢山でしたね(>_<) 

 

と、ここまでが今日の説明。次回は体験の最終回です。

最初に述べた通り、私が訳した結果については、続きからの形で隠しておきます。

(日本語訳もかなり怪しくなってきました…w)

 

以上です。

2018/3/25 賢帝俊来

 

続きを読む