z_blog:2018:181012_angular6_firestore_image
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン次のリビジョン両方とも次のリビジョン | ||
z_blog:2018:181012_angular6_firestore_image [2018/10/12] – [181012 Angular6でfirestoreに画像をアップロード] adash333 | z_blog:2018:181012_angular6_firestore_image [2018/10/12] – [maximizeImage(image)関数とonDeleteClick(image)関数の実装] adash333 | ||
---|---|---|---|
行 48: | 行 48: | ||
git init | 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のインストール ===== | ||
行 55: | 行 67: | ||
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:// | ||
+ | |||
+ | しかし、解決方法は見当もつかない。。。 | ||
+ | |||
+ | {{: | ||
行 64: | 行 287: | ||
https:// | https:// | ||
+ | ありがたいことに、ソースコードもあります。 | ||
+ | |||
+ | https:// | ||
===== 関連ページ ===== | ===== 関連ページ ===== | ||
z_blog/2018/181012_angular6_firestore_image.txt · 最終更新: 2018/10/16 by adash333