差分

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

--- z_blog:2018:181012_angular6_firestore_image [2018/10/12] – [src/app/gallery/gallery.component.html] 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>
@@ 行 160: / 行 161: @@
 から、no-img.jpgをダウンロードして、src/assets/ フォルダに保存している。
+===== Firebaseの設定 =====
+Database　をクリックして進む。
+{{:z_blog:2018:pasted:20181012-215540.png}}
+一時的にルールを、誰でもread, write可とする。（後で必ず戻す）
+{{:z_blog:2018:pasted:20181012-215632.png}}
+Storage　をクリックして進む。
+{{:z_blog:2018:pasted:20181012-215225.png}}
+{{:z_blog:2018:pasted:20181012-215303.png}}
+一時的にルールを、誰でもread, write可とする。（後で必ず戻す）
+{{:z_blog:2018:pasted:20181012-215432.png}}
+{{:z_blog:2018:pasted:20181012-215603.png}}
+これらの設定をすると、"Firestoreに接続できていませんよ。"というconsole上のエラーが消える。
+{{:z_blog:2018:pasted:20181012-215801.png}}
+===== Angular6にjQueryをインストール =====
+全く分かりませんが、以下にしたがってやってみます。。。
+https://stackoverflow.com/questions/30623825/how-to-use-jquery-with-angular
+{{:z_blog:2018:pasted:20181012-220609.png}}
+<code>
+npm install --save jquery
+npm install -D @types/jquery
+</code>
+{{:z_blog:2018:pasted:20181012-220933.png}}
+とりあえず、これにより、gallery.component.tsで、
+<code>
+import * as $ from 'jquery';
+</code>
+しても、エラーが出なくなりました。
+{{:z_blog:2018:pasted:20181012-221252.png}}
+===== onUploadBtnClick()関数の実装 =====
+gallery.component.ts
+{{:z_blog:2018:pasted:20181012-222717.png}}
+これにより、Image Nameに何か文字を入れてからImageをクリックすると、コンピュータ内の画像を選択できるようになる。\\
+(まだ選択しても、何もおこらない。)
+===== onFileChange(event)関数の実装 =====
+onFileChange(event)関数の実装
+gallery.component.ts
+{{:z_blog:2018:pasted:20181012-223141.png}}
+これで、コンピュータ内の画像を選択すると、No Imageとなっていたところに、選択された画像が表示されるようになる。\\
+(まだFirebase Storageにはアップロードされない。)
+onFileChange(event)関数の中の、startUpload()関数の実装
+{{:z_blog:2018:pasted:20181012-223607.png}}
+これで、コンピュータ内の画像を選択すると、
+  -No Imageとなっていたところに、選択された画像が表示され、
+  -しかも、自動的にFirebase storageにアップロードされ、
+  -さらに、Your Imagesのところに表示される
+ようになる。これはすごい。
+{{: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}}
 ===== 写経元サイト =====
@@ 行 168: / 行 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}}
 ===== 関連ページ =====