z_blog:2018:181012_angular6_firestore_image

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

--- z_blog:2018:181012_angular6_firestore_image [2018/10/12] – [Angular6にjQueryをインストール] adash333
+++ z_blog:2018:181012_angular6_firestore_image [2018/10/16] (現在) – [写経元サイトのGitHubからソースコードをダウンロードして実行] adash333
@@ 行 5: / 行 5: @@
 https://www.linkedin.com/pulse/angular-6-firebase-galleryserverless-bharadwaz-kari
+ソースコード　https://github.com/zendizmo/angular-firebase-gallery
 ===== 開発環境 =====
 <code>
@@ 行 219: / 行 220: @@
 onFileChange(event)関数の実装
+gallery.component.ts
 {{:z_blog:2018:pasted:20181012-223141.png}}
@@ 行 236: / 行 239: @@
 {{:z_blog:2018:pasted:20181012-223812.png}}
+あと２つ、画像を加えてみた。
+{{:z_blog:2018:pasted:20181012-224244.png}}
+Firebase Consoleを見ると、ちゃんと、（１）画像はStorageにアップロードされており、（２）画像のアドレスと画像の名前の組み合わせもFirestoreに記載されている。
+{{:z_blog:2018:pasted:20181012-224335.png}}
+{{:z_blog:2018:pasted:20181012-224458.png}}
+===== maximizeImage(image)関数とonDeleteClick(image)関数の実装 =====
+gallery.component.ts
+{{:z_blog:2018:pasted:20181012-225820.png}}
+この段階では、MAXIMIZEボタンや、ごみ箱ボタンをクリックしても、何も起こらない。
+なんだが、どういう仕組みになっているのかさっぱりわからないが、とりあえず、ソースコードを写経してみる。
+src/app/notification/notification.component.html
+{{:z_blog:2018:pasted:20181012-230153.png}}
+src/app/notification/notification.component.ts
+{{:z_blog:2018:pasted:20181012-230428.png}}
+写経したが、MAXIMIZEボタンや、ごみ箱ボタンをクリックしても、何も起こらない。。。
+原因はよく分からない。さみしい。。。
+MAXIMIZEボタンを押したときは、consoleに以下のようなエラーが表示される。
+Firestoreを見に行ってほしいのに、http://localhost:4200/ を見に行ってしまっている。パス？がおかしい。
+しかし、解決方法は見当もつかない。。。
+{{:z_blog:2018:pasted:20181012-234712.png}}
@@ 行 247: / 行 291: @@
 https://github.com/zendizmo/angular-firebase-gallery
+===== 写経元サイトのGitHubからソースコードをダウンロードして実行=====
+上記ソースコードをダウンロードしてnpm install して実行してみる。
+<code>
+git clone https://github.com/zendizmo/angular-firebase-gallery.git
+cd angular-firebase-gallery
+npm install
+// src/environments/environment.ts に、自分のFirebaseのAPIキーをCopy and Paste
+// angular.jsonの27行目を変更 "./node_modules/bootstrap/dist/css/bootstrap.min.css"
+// angular.jsonの30行目を変更 "./node_modules/bootstrap/dist/js/bootstrap.min.js"
+// angular.jsonの80行目を変更 "scripts": [ "./node_modules/jquery/dist/jquery.min.js" ],
+// src/app/gallery/gallery.component.tsの140行目を変更　      image.imageURL
+ng serve --open
+</code>
+上記により、以下のように、おそらく、うまく動くと思われる。
+{{:z_blog:2018:pasted:20181016-171724.png}}
 ===== 関連ページ =====

z_blog/2018/181012_angular6_firestore_image.1539351494.txt.gz · 最終更新: 2018/10/12 by adash333