親バカエンジニアのナレッジ帳

webのエンジニアをやっており、日頃の開発で詰まったことや書き残しておきたいことを載せています。

Spring Bootのトランザクションが効かない場合のチェック項目

Spring Bootでのトランザクション設定方法 メソッドがpublicになっているか @RequestMappingをつけているコントローラ自体にアノテーションを付与していないか try~catchで囲まれているか 更新処理をするメソッドが直接呼ばれているか 継承されたメソッドの…

AWS(EC2)でセキュリティグループの設定方法

AWS(EC2)のセキュリティグループ 設定方法 AWS(EC2)のセキュリティグループ AWS(EC2)ではセキュリティグループというものを設定しますが、その名の通りセキュリティに関しての設定になります。 グループって何?って感じですが、設定したセキュリティは使い…

AWS(EC2)でのサーバ構築とキーペア(鍵)を使ったSSH接続

AWS(EC2)でのサーバ構築 EC2作成・起動 キーペア(鍵)を使ったSSH接続 AWS(EC2)でのサーバ構築 AWSでのEC2サーバ構築は非常に簡単にできます。 スペックは高くないですが、1年間の無料枠もあるのでLinuxの操作に慣れたいという方などは勉強がてら触ってみては…

Vue.jsのdataプロパティで配列の変更はspliceで置き換えろ!

dataプロパティで配列の定義 変更する場合はspliceで置き換え 削除する場合もsplice 末尾に追加する場合は従来通りpushを使え 多次元配列はループなどで同様に変更可能 それぞれの配列の2番目(インデックスのキーが1)の値を変更する場合 dataプロパティで…

Vue.jsのdataプロパティでオブジェクトの変更は$setで置き換えろ!

dataプロパティでオブジェクトの定義 変更する場合は$setで置き換え 配列中のオブジェクトはループなどで同様に変更可能 例1) 配列の2番目(インデックスのキーが1)の場合にvalueを変更する場合 例2) nameが「test2-Name」の場合にvalueを変更する場合 data…

ThymeleafでJavascriptエラー(SAXParseException)

Thymeleafでのorg.xml.sax.SAXParseException例外 解決方法1 「&」をエスケープ 解決方法2 エスケープしなくても使用できるようにコメントを挿入する Thymeleafでのorg.xml.sax.SAXParseException例外 Thymeleafは構文チェックが厳しく、Javascriptなどをそ…

TomcatのインストールとCATALINA_OPTSの設定

Tomcatのインストールの仕方でCATALINA_OPTSの設定方法も異なる CATALINA_OPTSを設定する場面 Tomcatのインストール方法 wgetコマンドなどでソースコードをダウンロードしてからコンパイルする方法 yumでインストールする方法 Tomcatのインストールの仕方でC…

AMPページではてなブックマークのシェアボタンを動的に設置

AMPページではシェアボタンを置きたくなることが多い AMPページではSNSのシェアボタンを簡単に設置できる。 はてなブックマークのシェアボタンも非公式ではあるがAMPに対応している AMPページでのはてなブックマークボタンの実装方法 AMPページではシェアボ…

Sequel Proが重くなった場合の対処法

Sequel Proが重くなる事象 どんな動作が重くなる? 解決手順 Sequel Proが重くなる事象 https://sequelpro.comMacのMySQLクライアントソフトとして大変便利なSequel Proですが、長く使っていると突然動作がどっしりと重くなってしまう事象が発生します。 そ…

SPAサイトがGoogleにインデックスされない時の解決法

今回はSPAサイトがGoogleのSearch Consoleで「Fetch as Google」をしてもレンダリングされず、サイトがインデックスされない時の対応方法です。 Googleのbotがサイトのクロール時に使うブラウザは、Javascriptも動作するために、SPAサイトでも(ページの表示…

Vue.jsのv-bind:classで動的なクラス割り当て

ある条件を満たした時にクラスを割り当てる方法 ある条件を満たした時にクラスを複数割り当てる方法 ある条件Aを満たした時にクラスAを割り当て、ある条件Bを満たした時にクラスBを割り当てるなど、複数のクラスを割り当てる方法 三項演算子で条件次第で別々…

Vue.jsでScroll Depthが計測されない時の対処法

サイト分析において、ヘッダー内での読了率(つまりどこまで読まれたか)を分析することは重要ですよね。 そんな時に便利なライブラリはたくさんあるのですが、今回はその中の1つ、Scroll Depthについて、vue.js内で使用して上手く計測されない場合の対処法に…

Vue.jsのプロジェクトでGoogleAnalyticsの設置

プロジェクトをデプロイした後は、アナリティクスを設置してサイト分析をしますよね。 ここではそのための方法を2つほどご紹介したいと思います。まず1つ目は、vue-analyticsというモジュールを組み込む方法です。まずはモジュールをインストールしましょう…

Intellijでプロジェクトを開く時は、Import Project

Intellijで新規でプロジェクトを作る時ではなく、既存のソースを初めて開く時の話です。 Intellijを立ち上げた時にCreate New Project、Import Project、Open…とメニューが出て来ますが、フレームワークを使う時はImport Projectを選択しましょう。Openでも…

vue.jsで全ページ共通コンポーネントのまとめ方

全ページで毎回コンポーネントを書く方法 共通コンポーネントをrouterの外に出す方法 おまけ 複数のデザイン構成のサイトを作る場合 コンポーネントでヘッダーやフッターなど、どのページでも共通となる部分をまとめることってありますよね。 Vue.jsではその…