はじめに 皆さんこんにちは。 先月に投稿した本紹介後編になります。 後編はよりフロントエンドエンジニアらしい本です。 （駆け出しエンジニアが何いってんだって話ですが。笑） 本業でLaravelも採用しているので、Laravelの本も紹介します。 前編をまだ確認していない方はよろしければどうぞ！ 【本紹介】初心者フロントエンドエンジニアがおすすめできる今年読んだ本を紹介（前編） 前編でも紹介しましたが、下記項目で１冊ずつ紹介いたします。 本の紹介の仕方 本の名前 1．書籍紹介（著者、初版発行年月日、金額、ページ数、出版社） ２．難易度（初級・中級・上級で判断） ３．簡単な感想 それではいきましょう！ 【６冊目】JavaScript コードレシピ集 1．書籍紹介 著者：池田 泰延 出版社：技術評論社 初版発行年月日：2019年1月25日 金額：3,278円 ページ数：608p ２．難易度（初級・中級・上級で判断） 初級 ３．簡単な感想 なんかこんなメソッドなかったっけ？ってよくある疑問を解決してくれる本です。 僕は辞典的な役割で使ってます。 暇なときに眺めてると、へえ〜こんなメソッドあるんか。ってなったりするので勉強になります。 【７冊目】改訂新版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで 1．書籍紹介 著者：山田 祥寛 出版社：技術評論社 初版発行年月日：2016/9/30 金額：3,278円 ページ数：456p ２．難易度（初級・中級・上級で判断） 中級〜上級 ３．簡単な感想 入門というタイトルに騙されないでください！ 本当に本格的にフロントエンドに首を突っ込む方にはおすすめです。 非常にわかりやすいが、開発業務じゃないと使わない仕様が多いので、Web制作が業務範囲だとあまり使わないかも。 ES６にしっかり対応しているので、初版は古いですがまだまだいけます。 【８冊目】【特典付き】HTML5&CSS3デザイン 現場の新標準ガイド【第2版】 (Compass Booksシリーズ) 1．書籍紹介 著者：エビスコム 出版社：マイナビ 初版発行年月日：2020/10/23 金額：3,289円 ページ数：368p ２．難易度（初級・中級・上級で判断） 初級 ３．簡単な感想 Web制作に関わる方やこれから学んでみたいという方にうってつけの本だと思います。 あくまでもガイドなので、参考書程度に思ってください。 わからない実装はこの本を読めばだいたい解決します。 僕はいつも、HTMLとCSSの仕様の確認に使ってます。 【９冊目】これからはじめるVue.js実践入門 1．書籍紹介 著者：山田 祥寛 (著) 出版社：SB Creative 初版発行年月日：2019/8/22 金額：6,628円 ページ数：468p ２．難易度（初級・中級・上級で判断） 初級 ３．簡単な感想 なぜか金額が高騰していた名著。 山田さんが作る本にはハズレはないですね。 いわゆるカエル本といわれるシリーズです。 JSにある程度なれている方ならすんなり学べる本です。 説明がとてもわかり易く、ハンズオン形式で進んでいきます。 ルーティングやVuexでのStoreまで網羅しています。 ただ、Vue3は対応できていないのでVueの触り程度に学び、Vue3の学習へ移行するのを個人的にはおすすめします。 【１０冊目】動かして学ぶ! Laravel開発入門 (NEXT ONE) 1．書籍紹介 著者：山崎 大助 (著) 出版社：翔泳社 初版発行年月日：2021/3/15 金額：3300円 ページ数：328p ２．難易度（初級・中級・上級で判断） 中級 ３．簡単な感想 Laravelの仕様や全体像を把握するには良書です。 ただ後半のハンズオン形式での開発は、開発環境がAWSのCloud９を利用するため初学者には厳しいかなと思いました。 また、想定外のエラーが出てくるので、最初の概要だけ把握したら、他教材で学ぶのをおすすめします。 【１1冊目】フロントエンド開発入門 プロフェッショナルな開発ツールと設計・実装 1．書籍紹介 著者：安達 稜 (著), 武田 諭 (著) 出版社：秀和システム 初版発行年月日：2020/10/9 金額：3,080円 ページ数：280p ２．難易度（初級・中級・上級で判断） 中級 ３．簡単な感想 最近読んだ本の中でピカイチに面白いし、わかりやすい。 フロントエンド周辺のツールを網羅的に学べるので、開発業務に携わっているものとしてとても勉強になる本だった。 僕にwebpackを学ぶきっかけをくれた本でもあります。 フロントエンドはHTML/css/JSだけではない。 その他周辺のJSを取り巻くライブラリ群たちをどう使いこなすかで今後の市場価値が変わります。 ぜひ、この本読んでください。 終わりに。 今年読んだ参考書は計22冊でした。 その中から厳選？して10冊紹介いたしました。 参考書高いですよね。 買って後悔することが多かったので、こちらの記事執筆させていただきました。 少しでも参考になれば幸いです。 それでわ〜

はじめに はじめまして！ 兼業で個人サービスの開発・運営・保守を行っております。 フロントエンジニアのふぁると申します。 統合テストのクラウド管理・実行プラットフォーム「Itamaster」を運営しております。 よろしくお願いいたします！ 【Twitterリンク】 https://twitter.com/@itamaster_ 【Itamaster公開記事リンク】 https://qiita.com/Itamaster/items/f821be4c33caab640a93 【Itamaster】 https://itamaster.work テスト管理プラットフォーム　Itamaster さっそく タイトルに挙げている不具合について、書いていこうかと思います。 問題の内容 vuetifyには、インプットボックスにcounter propsを指定してやる事で、入力中の文字数がインプットボックス右下に表示される、という機能があります。 これはテキストボックス、テキストエリアといった括りに関わらず、テキストを入力出来るフィールドであれば同様です。 また、counter propsにbool値ではなく数値を渡してやることで、最大文字数を表示しながら入力中の文字数をカウントすることも出来ます。 このcounter機能は、「npm run dev（開発サーバー立ち上げのnpmスクリプト）」時や、「npm run storybook（コンポーネントカタログの立ち上げのnpmスクリプト）」時は正常に動いていたのですが、「npm run generate（本番デプロイ用のnpmスクリプト）」時のみ正常に動作しなくなるといったものでした。 全てのcounter入力文字数が、最大文字数の表示/非表示に関わらず「１」に固定されてしまっています。 問題解決に向けて起こした行動 この問題が発覚するころには開発もほぼ終盤で、全てのインプットフィールドを変更する、といった選択肢はありませんでした。 かといって、すべてのインプットフィールドの入力文字数を表示する箇所が謎に「１」に固定されたままリリースなんてことも絶対に嫌でした。 同様の問題は起きていないか 同様の問題が他でも起き、issueに挙げられているようなら解決法もすんなりと発覚するはずです。 しかし、日本語はおろか、英語で検索を行っても同様の問題が起きている事は確認出来ませんでした。 ライブラリが壊れている......？ まず行ったのは、node_modulesを削除 -> npm installを再度行うといったものです。 これにより解決すれば、ライブラリのインストール時等に何かのライブラリが壊れていたということになります。 しかし、問題は解決しませんでした。 Vuetifyとかみ合わせの悪いライブラリが存在する......？ 可能性は薄いかと思いましたが、draggable関係のライブラリや、認証系、広告系等、何かVuetifyとかみ合わせの悪いライブラリがあるのでは......？と疑いました。 しかし、丸三日かけて様々なライブラリをuninstallする組み合わせを試してはビルドを繰り返すも、問題は解決しませんでした。 いっそ開発チームに直接聞いてやろう Vuetifyのdiscordの開発コミュニティに単身突撃しました。 当時は日本語で質問するためのタグがあることを知らなかったので、頑張って開発コミュニティで英語で聞いてみました。 Google翻訳を使って長文を英訳すると訳のわからない文章になったようで、「？」とのレスポンスをいただきます。 どうにかニュアンスだけでも伝わらないかと、「Develop mode is ok! But production mode build time counter broken!! Help!!!」のようなハチャメチャな文章と共に設定ファイルやコードを投稿しました。 しかし、レスポンスいただいた内容を全て試すも、一向に問題は解決しませんでした。 最後の手段 nuxtプロジェクトを作り直し、コンポーネントやライブラリ、設定ファイルを一つずつコピーしていきました。 どれも膨大な量だったため、相当面倒な作業であることが予期されていたので、こちらは最後の手段として据えていました。 新規プロジェクトに色々移行し始め、npm run generateするも、まあ普通にcounterは表示されます。 このまま治ってしまったら、今までの苦労はなんだったんだと思わなければいけないところです。 むしろもう、それだけは本当に、勘弁してください。 そして作業を続ける事、三時間後...... 再現できた！！！！！ 問題の原因 storybookを起動したときに、npmのログが大量に出て、処理が落ちてしまうことがあったため、ログを出さないようにしている箇所が原因だったようです。 もっと早く最後の手段を取れば、と思うとともに、babelの設定によってはcounterに不具合が起こるってどういうことなんだ......と思った日でした。

はじめに Vue.js、TypeScriptともに初心者が、開発環境の構築と実際に画面を作ってみたお話。 Vue.jsはVer2を使用しています。 開発環境の構築 vue-cliのインストール vue-cliがインストールされていないことを確認して、インストール # インストールされているか確認 npm list -g vue-cli # vue-cliのインストール npm install -g @vue/cli プロジェクトの作成 新規のプロジェクトを作成する vue create typescript_start --- Vue CLI v4.5.15 ? Please pick a preset: Default ([Vue 2] babel, eslint) Default (Vue 3) ([Vue 3] babel, eslint) ❯ Manually select features --- # TypeScriptを選択状態にする ? Check the features needed for your project: ◉ Choose Vue version ◉ Babel ❯◉ TypeScript ◯ Progressive Web App (PWA) Support ◯ Router ◯ Vuex ◯ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing --- # Vue.jsのバージョン選択：今回は2.xを指定 # 本当は3.xで使用したかったけどvue-property-decoratorがうまく使用できず。。 ? Choose a version of Vue.js that you want to start the project with (Use arrow keys) ❯ 2.x 3.x --- # Yesを選択 ? Use class-style component syntax? (y/N) y --- # Yesを選択 ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) Y --- # デフォルトのまま ? Pick a linter / formatter config: (Use arrow keys) ❯ ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier TSLint (deprecated) --- # デフォルトのまま ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) ❯◉ Lint on save ◯ Lint and fix on commit --- # デフォルトのまま ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) ❯ In dedicated config files In package.json --- # Noを指定 ? Save this as a preset for future projects? (y/N) N vueの起動 ブラウザへアクセスできるかの確認を行います ブラウザへ初期画面が表示されればＯＫ npm run serve コンポーネントの作成 実際にコンポーネントを作成してみます 今回はボタンを作成し、クリックした回数を画面へ表示させるシンプルな実装です また、クリックしたボタンの回数に応じてアラートを出すようにします ボタンのコンポーネント作成 src/componentsへ新しくボタンのコンポーネントを作成し、格納します。 BaseBottun.vue <template> <button @click="onClick">挨拶する</button> </template> <script lang="ts"> import {Component, Vue, Prop, Emit} from "vue-property-decorator"; @Component export default class MyButton extends Vue{ private count: number = 0; // 親コンポーネントへクリック数を渡す @Emit() public click(count: number){ } public onClick(){ // クリックされたら1つカウントする this.count++; this.click(this.count); } } </script> ボタンを画面へ表示させる 今回はsrc\App.vueを書き換える形で画面表示を行います 以下のように書き換えました app.vue <template> <div class="home"> <p>クリックした回数: {{ count }}回</p> <p> <MyButton :greet="greetText" @click="onMyButtonClicked"></MyButton> </p> </div> </template> <script lang="ts"> import { Component, Vue, Watch } from 'vue-property-decorator'; import MyButton from "./components/BaseButton.vue"; // コンポーネントの呼び出し @Component({ components: { MyButton, }, }) export default class Home extends Vue { private count: number = 0; // countの値が変わるたびに呼び出される @Watch('count') public countChanged() { if(this.count === 5){ alert("5回目です!!"); } } public onMyButtonClicked(count: number){ this.count = count; } } </script> Watchアノテーションでcountを監視 （countの値が変わるとcountChanged()が発動します） Emitアノテーションでcountの値をapp.vueへ渡す おわりに 本当はVue3を使用して実装したかったのですが、vue-property-decoratorの読み込みがうまくいかず。。 課題が残る形となりました Vue.jsは少しかじったことがあるのですが、TypeScriptは本当に初めてで正直まだ分からないことだらけです

前置き Vue.jsとFirebaseAuthでどシンプルなログイン機能をつくってみました。素人につき解説できることがほぼないためサンプルコードと画像マシマシかつ3ステップ構成でお送りします。なお今回はVue-CLIとVue-Routerを使用してSPAプロジェクトの雛形が用意されている前提で作成を進めていきます。 STEP1 STEP1では各画面の作成をします。今回新規に作成するのは会員登録画面とログイン画面の2つです。デフォルトのホーム画面とアバウト画面は認証が必要なページとしてそのまま流用することにします。 Bootstrap-vueの導入 では早速実装に、といきたいところですがその前にBootstrapを導入します。見た目は大事です。ターミナル(orコマンドプロンプト)で下記のコマンドを実行します。 cd xxxxx #Bootstrapを適用したいプロジェクトへ移動 npm install bootstrap-vue yarnの場合は、 yarn add bootstrap-vue でオッケーです。インストールが完了したら、src/main.jsに下記の記述を追加してBootstrapをテンプレート内で使用できるようにします。 import Vue from 'vue' import App from './App.vue' import router from './router' import 'bootstrap/dist/css/bootstrap.css' // 追加 import 'bootstrap-vue/dist/bootstrap-vue.css' // 追加 各画面の作成 では改めて各画面を作成していきましょう。まずは会員登録画面とログイン画面です。ファイルはsrc/viewsの配下に設置します。 新規登録画面（src/views/Signup.vue） <template> <div class="container"> <h2>新規会員登録</h2> <div class="row d-flex flex-column align-items-center justify-content-center"> <div class="col-md-4"> <div class="form-group text-left"> <label for="email">メールアドレス：</label> <input type="text" class="form-control" id="email" v-model="email"> </div> <div class="form-group text-left"> <label for="password">パスワード：</label> <input type="password" class="form-control" id="password" v-model="password"> </div> <div class="form-group text-left"> <label for="confirm-password">確認用パスワード：</label> <input type="password" class="form-control" id="confirm-password" v-model="confirmPassword"> </div> </div> <div class="col-md-4 text-right"> <button @click="userSignup" class="btn btn-primary my-3">登録</button> </div> <div class="col-md-4 text-center text-danger"> {{ errorMessage }} </div> </div> </div> </template> ログイン画面（src/views/Signin.vue） <template> <div class="container"> <h2>ログイン</h2> <div class="row d-flex flex-column align-items-center justify-content-center"> <div class="col-md-4"> <div class="form-group text-left"> <label for="email">メールアドレス：</label> <input type="text" class="form-control" id="email" v-model="email"> </div> <div class="form-group text-left"> <label for="password">パスワード：</label> <input type="password" class="form-control" id="password" v-model="password"> </div> </div> <div class="col-md-4 text-right"> <button @click="userSignin" class="btn btn-primary my-3">ログイン</button> </div> </div> </div> </template> 次に認証成功時の遷移先としてホーム画面に手を加えます。デフォルトではsrc/components内のHelloWorld.vueを子コンポーネントとしてsrc/views内のHome.vueで読み込んで表示しています。今回はログインが確認できればいいので、下記のとおりtemplateの内容をまるっと書き換えます。 src/components/HelloWorld.vue <template> <div class="hello"> <h1>{{ msg }}</h1> <button @click="signout" class="btn btn-danger">ログアウト</button> </div> </template> src/views/Home.vue <template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"> <HelloWorld msg="Success!!!"/> </div> </template> ここまでで今回使用する画面のガワが完成しました。 routerの設定 追加した画面を表示するにはrouterの設定が必要になります。まずはsrc/router/index.jsに下記のコードを追記してログイン画面と新規登録画面のルーティングを設定します。 src/router/index.js { path: '/signup', name: 'Signup', component: () => import(/* webpackChunkName: "signup" */ '../views/Signup.vue') }, { path: '/signin', name: 'Signin', component: () => import(/* webpackChunkName: "signin" */ '../views/Signin.vue') } 次に認証後に表示したい画面にメタフィールドを定義します。今回はホームとデフォルトで用意されているAboutページを認証ページとして設定しました。 meta: {requiresAuth: true} 最後にグローバルビフォーガードを設定して未承認時のリダイレクト先を指定します。 ここら辺の解説については公式に詳細があるのでそちらをご参照ください。 src/router/index.js import firebase from 'firebase' router.beforeEach((to, from, next) => { const requiresAuth = to.matched.some(record => record.meta.requiresAuth) if (requiresAuth) { firebase.auth().onAuthStateChanged(function (user) { if (user) { next() } else { next({ name: 'Signin' }) } }) } else { next() } }) STEP2 STEP2ではアプリケーション内でFirebaseの機能を利用できるようにしていきます。 Firebaseのインストール ターミナル(orコマンドプロンプト)を開き、下記のコマンドを実行してFirebaseをインストールします。 npm install --save firebase yarnの場合は yarn add firebase FirebaseAuthを利用するための設定 FirebaseAuthを利用するにはFIrebase側でプロジェクトを用意する必要があります。まずはこちらからFirebaseのプロジェクトを作成しましょう。プロジェクトが作成できたら、プロジェクトの概要>Authenticationを開きます。 今回はメールとパスワードに認証のみ実装するので、ログインプロバイダは「メール/パスワード」を選択し有効にします。 次にアプリケーションとFirebaseを接続します。 プロジェクトの概要を開き、下記画像のアイコンをクリックをクリックするとアプリの登録画面が開きます。 「アプリの登録」画面で適当なニックネームをつけて「次へ」をクリックすると下記のような画面が表示されるので、赤枠内をすべてコピーします。 最後に先ほどコピーした内容をsrc/main.jsにペーストして、FirebaseをインポートすればVueアプリケーション内でFirebaseが提供するさまざまな機能を利用することができるようになります。 src/main.js import firebase from 'firebase' // Your web app's Firebase configuration // For Firebase JS SDK v7.20.0 and later, measurementId is optional var firebaseConfig = { apiKey: "xxxxxxxxxxxxxxxx", authDomain: "xxxxxxxxxxxxxxxx", databaseURL: "xxxxxxxxxxxxxxxx", projectId: "xxxxxxxxxxxxxxxx", storageBucket: "xxxxxxxxxxxxxxxx", messagingSenderId: "xxxxxxxxxxxxxxxx", appId: "xxxxxxxxxxxxxxxx", measurementId: "xxxxxxxxxxxxxxxx" }; // Initialize Firebase firebase.initializeApp(firebaseConfig); firebase.analytics(); STEP3 STEP3では、ユーザーの新規登録と認証機能の実装をおこないます。処理のほとんどはFirebase側がよろしくやってくれるので、基本的なVueの知識があれば躓くことはないと思います。 新規登録&ログイン機能の実装 まずはユーザーを新規で登録する処理を実装していきます。 src/views/Signup.vue <template> //省略 </template> <script> import firebase from 'firebase' export default { data () { return { email: '', password: '', confirmPassword: '', errorMessage: '', isDisabeld: true } }, methods: { checkPassword () { if (this.password !== this.confirmPassword) { this.errorMessage = 'パスワードが一致しません' this.isDisabeld = true } else { this.errorMessage = '' this.isDisabeld = false } }, userSignup () { firebase .auth() .createUserWithEmailAndPassword(this.email, this.password) .then(() => { this.$router.push('/') //認証完了後のリダイレクト先を指定 }) .catch((e) => (this.errorMessage = e.message)) //エラーメッセージを格納 } } } </script> methodsのuserSignupメソッドでFirebaseにアクセスする処理を記述します。createUserWithEmailAndPasswordメソッドの引数に入力されたメールアドレスとパスワードを設定することで値が送られ、登録と認証が行われます。.then(() => {処理内容})で成功時の処理を、.catch((e) => (処理内容)で失敗時の処理を記述しています。checkPasswordメソッドでは簡易的にパスワードの相違チェックをしていて、パスワードが確認用パスワードと一致しない場合は登録ボタンを無効化しメッセージを表示します。最後にhttp://localhost:8080/signupにアクセスして実際にユーザー登録を行い、Firebase上に登録内容が反映されているかを見てみます。 Firebase>Authentication>usersにアクセスして以下のように表示されていれば登録は成功です！ 次にログイン認証に実装を行います。新規登録と同様にFirebaseにメールアドレスとパスワードの情報を送るだけです。 src/views/Signin.vue <template> //省略 </template> <script> import firebase from 'firebase' export default { data () { return { email: '', password: '', errorMessage: '' } }, methods: { userSignin () { firebase .auth() .signInWithEmailAndPassword(this.email, this.password) .then(() => { this.$router.push('/') }) .catch((e) => (this.errorMessage = e.message)) } } } </script> 新規登録の処理とほとんど変わりません。ログインボタンの@clickイベントでuserSigninメソッドを呼び出し、その中で入力内容をsignInWithEmailAndPasswordメソッドでFirebaseに送っています。追記が完了したらhttp://localhost:8080/signupにアクセスして先ほど登録したメールアドレスとパスワードで正常にログインできるか確認します。正しく入力してログインボタンを押下した際エラーメッセージを表示せずホーム画面に遷移すれば成功です。 ログアウト機能の実装 FirebaseAuthenticationのsignOutメソッドをmethodsに定義することで簡単にログアウト機能を実装することが可能です。今回はログアウトボタンの@clickイベントでsignoutメソッドを呼び出し処理を実行しています。 src/components/HelloWorld.vue <template> //省略 </template> <script> import firebase from 'firebase' export default { name: 'HelloWorld', props: { msg: String }, methods: { signout () { firebase.auth().signOut() .then(() => { this.$router.push('/signin') }) .catch(error => { alert('ログアウトに失敗しました') }) } } } </script> 最後にhttp://localhost:8080/にアクセスして認証が正常に動いているかを確認して完成です。 さいごに 僕自身、Firebaseに触れたのは今回がはじめてだったのですが、サーバーサイドの知識なしに認証がこんなにも簡単に実装できるのには感動しました！この記事が、お手軽にフルスタック開発をしたい皆々様のご参考になれば幸いです。

はじめに どうも、コピペ作業を自動化したら、コードミスって最悪なことになった人です。 この記事では、Vue.jsで画像を使用しようとすると出てきたエラーに関して紹介していきます。 解決した理由がわかっていません。 わかる方、コメントで教えて下さい。 解決したかったこと Vue.js上で画像を表示 画像は、僕の愛用一眼レフくんで撮った写真。 発生していた問題・エラー ERROR Failed to compile with 1 error error in ./src/assets/img/1.PNG Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file) 使おうとしていた画像を:srcに入れると、このエラーが出てきた。 該当するソースコード <v-img :src="require('@/assets/img/1.PNG')" contain height="200" ></v-img> すでにテンプレートとしてassetsフォルダの中に入っていた画像は使えた。 しかし、自分で撮影した写真は使えなかった。 自分で試したこと を見ろと書いてあったので、ここを見た。 でも、websocketを使わないvueを使っていたから、どうしていいか一切わからなかった。 解決への道 文字コードを使った問題を解いたとき、「�」←これを見たことがあり、撮影した画像のデータに「日本語」が入ってるのが悪いのかと思った。 そこで、画像を【オンライン画像コンバーター】で変換してみた。 変換してみた理由は、画像だけを変換し、内部データは引き継がないと考えたからだ。 元の画像の拡張子がpngだったから、jpgに変換してみた。 結果 画像がエラー無しで表示された！！！ なんで？？？ 結論 Module parse failed: Unexpected character '�' (1:0) 画像を使おうとして、こんなエラーが出てきたら、一度、画像変換してみよう。 最後に 理由分かる人がいたら、コメントで教えて下さい。

Amplify GeoとMapLibre GL Geocoderを組み合わせて住所検索機能を構築してみました 以前、プレビュー版の記事をMIERUNEメンバーが出してくれました 先日Amplify Geoが正式に一般公開されました！ Amplify Geoとは、AWS Amplifyの機能の一部として、Amazon Location Serviceをより手軽に構築できるようにした機能です。今回は、MapLibre GL Geocoderと組み合わせて住所検索機能を追加し、マップアプリケーションを構築してみました 事前準備 Amplify Geoの地図表示機能までの設定 Amplify Geoの設定 はじめに、Amplify Geoの設定をします。 位置情報機能(ジオコーディング)を追加 位置情報機能(ジオコーディング)のみであれば、マップ機能と同じくこの2コマンドで実装可能です！ Amazon Location Serviceでは、AWSコンソールでの設定やロールの設定がぞれぞれ必要でしたが、Amplify Geoを利用することでそれらの設定をすべてAmplifyでおこなってくれます！ amplify add geo amplify push これでAmplify Geoの設定は完了になります フロントエンド 次に、実際にマップアプリケーションを構築していきます。 Amplify Geoの地図表示機能ができていると、基本的には「MapPane.vue」と「main.js」のコードを一部変更するのみになります。 実行環境 node v16.10.0 npm v7.24.0 事前に、MapLibre GL Geocoderをインストールします。 npm install @maplibre/maplibre-gl-geocoder 全体構成 package.json { "name": "amplify-geo", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "@aws-amplify/ui-components": "^1.9.2", "@maplibre/maplibre-gl-geocoder": "^1.2.0", "aws-amplify": "^4.3.4", "core-js": "^3.6.5", "maplibre-gl": "^1.15.2", "maplibre-gl-js-amplify": "^1.1.2", "vue": "^3.0.0", "vue-router": "^4.0.0-0", "vuex": "^4.0.0-0" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-router": "~4.5.0", "@vue/cli-plugin-vuex": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/compiler-sfc": "^3.0.0", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^7.0.0" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/vue3-essential", "eslint:recommended" ], "parserOptions": { "parser": "babel-eslint" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] } /src main.js import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import 'maplibre-gl/dist/maplibre-gl.css' import '@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css' import 'maplibre-gl-js-amplify/dist/public/amplify-geocoder.css' import { applyPolyfills, defineCustomElements } from '@aws-amplify/ui-components/loader'; import Amplify from 'aws-amplify'; import awsconfig from './aws-exports'; Amplify.configure(awsconfig); applyPolyfills().then(() => { defineCustomElements(window); }); const app = createApp(App); app.config.isCustomElement = tag => tag.startsWith('amplify-'); app.use(store).use(router).mount('#app'); MapLibre GL Geocoderとラッパーを読み込みます。 import '@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css' import 'maplibre-gl-js-amplify/dist/public/amplify-geocoder.css' /src/components MapPane.vue <template> <div class='mapPane'> <div id='map'></div> </div> </template> <script> import { createMap, createAmplifyGeocoder } from 'maplibre-gl-js-amplify'; export default { name: 'MapPane', data() { return { } }, mounted: async function () { this.mapCreate(); }, methods: { mapCreate: async function() { const map = await createMap({ container: 'map', center: [139.7648, 35.6794], zoom: 15, bearing: 64.8, pitch: 60, hash: true, }); map.addControl(createAmplifyGeocoder()); }, } } </script> <style scoped> #map { z-index: 0; height: 800px; } </style> MapLibre GL Geocoderのラッパーを読み込みます。 import { createMap, createAmplifyGeocoder } from 'maplibre-gl-js-amplify'; MapLibre GL Geocoderのラッパーを設定します。 map.addControl(createAmplifyGeocoder()); 簡易ローカルサーバーで確認してみます。 npm run serve ローカルサーバーを立ち上げて、ログインしてみます Amplify GeoとMapLibre GL Geocoderを組み合わせて住所検索機能を構築できました Amplify GeoとMapLibre GL Geocoderを組み合わせると、Amplify Geoの住所検索機能をそのまま利用するよりも、手軽に構築できることを確認できました。他の機能についても引き続き探っていきたいと思います AWS AmplifyとMapLibre GL JSとVue.jsについて、他にも記事を書いています。よろしければぜひ。 tags - AWS Amplify tags - MapLibre GL JS tags - Vue.js やってみたシリーズ tags - Try Amazon Location Serviceで住所検索機能を構築してみた Amplify GeoとVue.jsを組み合わせてマップアプリケーションを構築してみた

タイトルままです。 結論 Stripe変数の定義の所を以下の文からwindowオブジェクトをつけてあげると解決しました。 notWorked var stripe = Stripe("PUBLISH_KEY"); worked var stripe = window.Stripe("PUBLISH_KEY"); Stack Overflowで見つけたので、日本勢でもし私と同じ問題に直面した方向けの共有でした。 背景 Vue x Firebase構成でFrontからStripe CDN呼び出そうとした時にココで詰まりました。 Stripe SDK使うのを諦めようとした日もあった程です。 気を付けましょう。