WINDIIテック現役フリーランスエンジニアが運営するテックメディア。Hosting機能を利用して公開するまでの流れの紹介です。出来上がるのは、Torelloと同じ動き方をする、どうぶつパズルです。カラムの多いTodoアプリみたいな感じです。このようなアプリを作成したかというと、先日ゴリラチャット作りましたという記事を拝見して、僕も変なアプリを公開したい!と思ったからです。(全て見る)AngularとはAngularはフロントエンドフレームワークのうちの一つです。Vue.jsにGitHubスター数で多いにひけを取っています。Angular7でドラッグ&ドロップが使いやすくったのでAngularを使用します。Rxjsを採用しているのが特徴です。43,616Firebaseとはmbaasです。FirebaseのHosting機能を使うと簡単に自分の作成したサービスを公開することができます。方向けに書いて行くので、既に知っているよ!という方は逐次読み飛ばしてください。AngularCliのインストールコマンドでアプリを作成していく為にはAngularCliをインストールする必要性があります。グローバルでAngularCliをインストールしてください。コマンドを利用しますターミナル上で任意のプロジェクト名を指定して、新たなプロジェクトを作成してください。routing?と聞かれるので、yesを選択してください。これで、AngularのRouting機能を利用することができます。use?では、CSSメタ言語を選択することができます。自分の好きなメタ言語を選択しましょう。今回作成するアプリでは、画像を分割する必要がありました。Labというアプリをインストールして分割しました。240円で、tiffに変換されたりと少々使い勝手が悪かったですが全然許容範囲です。Lab元画像はPixabayから拾ってきました。Labで分割して、jpegに変換という流れです。画像の配置src/assetsにimagesフォルダを配置し画像を入れます。名前はhorse_1.jpeg〜hose_24.jpegとしました。フォルダ内画像を一括で変更するには、画像を全て選択。フォルダ内で二本指でクリック〇〇項目の名前の変更ですることができます。ドラッグ&ドロップを使えるようにするDrag&DropはAngularMaterialのCDKを有効化することによって使えるようになります。Animationをインストールしましょう。@angular/animationsapp.moduleでドラッグ&ドロップ機能をインポートapp.moduleでドラッグ&ドロップ機能をインポートしてください。],DragDropModuleをインポートした事によって、HTMLにcdkDragと追加すると要素が動くようになります。先人が全てを教えてくれていたので、カラムを6つにしました。メソッドを使う非常にわかりやすくて助かりました。transferArrayItemをインポートしてください。}}CSSはピクセル固定でやっています。}}AngularプロジェクトをFirebaseでdeployデプロイ用のファイルをpublicに用意します。--output-path=public次にFirebaseツールのインストールをインストールして、Firebaseにログインします。初回利用の場合はGoogleアカウントでログインする必要性があります。deployでサービスを公開することができます。構成ファイルが作成されます。使用してサイトをデプロイするために必要です。コマンドで聞かれた事に対しては以下のように答えてください。Nofirebaseデプロイコマンドを打つと、以下のようにホスティングが開始されるので、終わり次第HostingURLにアクセスすると出来ていると思います。Angular7プロジェクトをFirebaseでホスティングしてみる最後にFirebaseすごいなって。最新の記事WINDIIWINDII(ウィンディ)は、フリーランスエンジニアが運営するテックメディアです。Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。Contentful。Contentful。)この記事へのコメントはありません。この記事へのトラックバックはありません。URL返信をキャンセルする。