z_blog:2018:181012_angular6_firestore_image
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン次のリビジョン両方とも次のリビジョン | ||
z_blog:2018:181012_angular6_firestore_image [2018/10/12] – [angular-bootstrap-mdのインストール] adash333 | z_blog:2018:181012_angular6_firestore_image [2018/10/16] – [181012 Angular6でfirestoreに画像をアップロード] adash333 | ||
---|---|---|---|
行 1: | 行 1: | ||
- | ====== | + | ====== |
以下のサイトを写経してみたい | 以下のサイトを写経してみたい | ||
行 5: | 行 5: | ||
https:// | https:// | ||
+ | ソースコード https:// | ||
+ | ===== 開発環境 ===== | ||
+ | < | ||
+ | Windows 8.1 Pro | ||
+ | Node v8.12.0 | ||
+ | npm v6.4.1 | ||
+ | VisualStudioCode | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== Firebaseのセットアップ ===== | ||
+ | |||
+ | https:// | ||
+ | |||
+ | 今回は、firebase-image という名前にしてみました。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | 下図の、var config = { } の中身をテキストファイルにコピーしておきます。\\ | ||
+ | (後でAngular6アプリのsrc/ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ===== Angular6アプリの作成 ===== | ||
+ | C:/ionic4/ フォルダをVisualStudioCodeで開き、Ctrl+@でコマンドプロンプトを開き、以下を入力。 | ||
+ | |||
+ | < | ||
+ | npm install @angular/ | ||
+ | ng new firebase-angular-gallery | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | C:/ | ||
+ | |||
+ | < | ||
+ | npm install firebase-tools -g | ||
+ | npm install angularfire2 firebase --save | ||
+ | git init | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ===== galleryコンポーネントと、notificationコンポーネント、notificationサービスの作成 ===== | ||
+ | |||
+ | < | ||
+ | ng g c gallery --spec false | ||
+ | ng g c notification --spec false | ||
+ | ng g s notification-services --spec false | ||
+ | </ | ||
+ | |||
+ | {{: | ||
===== angular-bootstrap-mdのインストール ===== | ===== angular-bootstrap-mdのインストール ===== | ||
行 12: | 行 68: | ||
https:// | https:// | ||
+ | |||
+ | cssをscssにしなければいけないらしい。。。 | ||
+ | |||
+ | < | ||
+ | ng set defaults.styleExt scss | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | angular.json の変更 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | src/ | ||
+ | |||
+ | < | ||
+ | npm i angular-bootstrap-md --save | ||
+ | npm install -–save chart.js@2.5.0 font-awesome hammerjs | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | src/ | ||
+ | |||
+ | (変更前) | ||
+ | {{: | ||
+ | |||
+ | (変更後) | ||
+ | {{: | ||
+ | |||
+ | < | ||
+ | ng serve --open | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ===== Angular6アプリにfirebase configを設定 ===== | ||
+ | |||
+ | src/ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | src/ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ===== src/ | ||
+ | |||
+ | 各cssファイルをscssに変更。それに応じて、各tsファイル内の" | ||
+ | |||
+ | src/ | ||
+ | |||
+ | (変更前) | ||
+ | {{: | ||
+ | |||
+ | (変更後) | ||
+ | {{: | ||
+ | |||
+ | src/ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ===== src/ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | さらに、New Imageをアップロードするためのhtmlを追加 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | src/ | ||
+ | |||
+ | (変更前) | ||
+ | {{: | ||
+ | |||
+ | (変更後) | ||
+ | |||
+ | |||
+ | gallery.component.ts の一部と、app/ | ||
+ | |||
+ | < | ||
+ | Error: Template parse errors: No provider for NgControl | ||
+ | </ | ||
+ | |||
+ | が続いたので、上記エラーでググってみたら、https:// | ||
+ | |||
+ | src/ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | なお、https:// | ||
+ | |||
+ | から、no-img.jpgをダウンロードして、src/ | ||
+ | |||
+ | ===== Firebaseの設定 ===== | ||
+ | Database をクリックして進む。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | 一時的にルールを、誰でもread, | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Storage をクリックして進む。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | 一時的にルールを、誰でもread, | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | これらの設定をすると、" | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ===== Angular6にjQueryをインストール ===== | ||
+ | 全く分かりませんが、以下にしたがってやってみます。。。 | ||
+ | |||
+ | https:// | ||
+ | {{: | ||
+ | |||
+ | < | ||
+ | npm install --save jquery | ||
+ | npm install -D @types/ | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | とりあえず、これにより、gallery.component.tsで、 | ||
+ | < | ||
+ | import * as $ from ' | ||
+ | </ | ||
+ | しても、エラーが出なくなりました。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ===== onUploadBtnClick()関数の実装 ===== | ||
+ | |||
+ | gallery.component.ts | ||
+ | |||
+ | {{: | ||
+ | |||
+ | これにより、Image Nameに何か文字を入れてからImageをクリックすると、コンピュータ内の画像を選択できるようになる。\\ | ||
+ | (まだ選択しても、何もおこらない。) | ||
+ | |||
+ | ===== onFileChange(event)関数の実装 ===== | ||
+ | |||
+ | onFileChange(event)関数の実装 | ||
+ | |||
+ | gallery.component.ts | ||
+ | |||
+ | {{: | ||
+ | |||
+ | これで、コンピュータ内の画像を選択すると、No Imageとなっていたところに、選択された画像が表示されるようになる。\\ | ||
+ | (まだFirebase Storageにはアップロードされない。) | ||
+ | |||
+ | onFileChange(event)関数の中の、startUpload()関数の実装 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | これで、コンピュータ内の画像を選択すると、 | ||
+ | -No Imageとなっていたところに、選択された画像が表示され、 | ||
+ | -しかも、自動的にFirebase storageにアップロードされ、 | ||
+ | -さらに、Your Imagesのところに表示される | ||
+ | ようになる。これはすごい。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | あと2つ、画像を加えてみた。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Firebase Consoleを見ると、ちゃんと、(1)画像はStorageにアップロードされており、(2)画像のアドレスと画像の名前の組み合わせもFirestoreに記載されている。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ===== maximizeImage(image)関数とonDeleteClick(image)関数の実装 ===== | ||
+ | |||
+ | gallery.component.ts | ||
+ | |||
+ | {{: | ||
+ | |||
+ | この段階では、MAXIMIZEボタンや、ごみ箱ボタンをクリックしても、何も起こらない。 | ||
+ | |||
+ | なんだが、どういう仕組みになっているのかさっぱりわからないが、とりあえず、ソースコードを写経してみる。 | ||
+ | |||
+ | src/ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | src/ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | 写経したが、MAXIMIZEボタンや、ごみ箱ボタンをクリックしても、何も起こらない。。。 | ||
+ | |||
+ | 原因はよく分からない。さみしい。。。 | ||
+ | |||
+ | MAXIMIZEボタンを押したときは、consoleに以下のようなエラーが表示される。 | ||
+ | |||
+ | Firestoreを見に行ってほしいのに、http:// | ||
+ | |||
+ | しかし、解決方法は見当もつかない。。。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== 写経元サイト ===== | ||
+ | |||
+ | https:// | ||
+ | |||
+ | ありがたいことに、ソースコードもあります。 | ||
+ | |||
+ | https:// | ||
+ | ===== 関連ページ ===== | ||
+ | |||
z_blog/2018/181012_angular6_firestore_image.txt · 最終更新: 2018/10/16 by adash333