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:// | https:// | ||
+ | ソースコード https:// | ||
===== 開発環境 ===== | ===== 開発環境 ===== | ||
< | < | ||
行 219: | 行 220: | ||
onFileChange(event)関数の実装 | onFileChange(event)関数の実装 | ||
+ | |||
+ | gallery.component.ts | ||
{{: | {{: | ||
行 236: | 行 239: | ||
{{: | {{: | ||
+ | |||
+ | あと2つ、画像を加えてみた。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Firebase Consoleを見ると、ちゃんと、(1)画像はStorageにアップロードされており、(2)画像のアドレスと画像の名前の組み合わせもFirestoreに記載されている。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ===== maximizeImage(image)関数とonDeleteClick(image)関数の実装 ===== | ||
+ | |||
+ | gallery.component.ts | ||
+ | |||
+ | {{: | ||
+ | |||
+ | この段階では、MAXIMIZEボタンや、ごみ箱ボタンをクリックしても、何も起こらない。 | ||
+ | |||
+ | なんだが、どういう仕組みになっているのかさっぱりわからないが、とりあえず、ソースコードを写経してみる。 | ||
+ | |||
+ | src/ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | src/ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | 写経したが、MAXIMIZEボタンや、ごみ箱ボタンをクリックしても、何も起こらない。。。 | ||
+ | |||
+ | 原因はよく分からない。さみしい。。。 | ||
+ | |||
+ | MAXIMIZEボタンを押したときは、consoleに以下のようなエラーが表示される。 | ||
+ | |||
+ | Firestoreを見に行ってほしいのに、http:// | ||
+ | |||
+ | しかし、解決方法は見当もつかない。。。 | ||
+ | |||
+ | {{: | ||
+ | |||
行 247: | 行 291: | ||
https:// | https:// | ||
+ | |||
+ | ===== 写経元サイトのGitHubからソースコードをダウンロードして実行===== | ||
+ | |||
+ | 上記ソースコードをダウンロードしてnpm install して実行してみる。 | ||
+ | |||
+ | < | ||
+ | git clone https:// | ||
+ | cd angular-firebase-gallery | ||
+ | npm install | ||
+ | // src/ | ||
+ | // angular.jsonの27行目を変更 " | ||
+ | // angular.jsonの30行目を変更 " | ||
+ | // angular.jsonの80行目を変更 " | ||
+ | // src/ | ||
+ | ng serve --open | ||
+ | </ | ||
+ | 上記により、以下のように、おそらく、うまく動くと思われる。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | |||
+ | |||
===== 関連ページ ===== | ===== 関連ページ ===== | ||
z_blog/2018/181012_angular6_firestore_image.txt · 最終更新: 2018/10/16 by adash333