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

webのエンジニアをやっており、日頃の開発で詰まったことや書き残しておきたいことを載せています。育児のイロハという育児サイト(https://ikujip.jp)の開発も行っているため、その開発で使用されている技術についても掲載しています。

ユーザにSFTPの特定ディレクトリのみ操作できる権限を付与

一般ユーザは、SFTPで特定のディレクトリのみしか触れないようにしたい サーバのファイル操作を複数人で行うようなことは、エンジニアの現場ではよく起きることです。 そのような場合、全員が管理者権限を持ってしまうと、みんなが自由にサーバの設定を変え…

Vue.jsで配列の値をAPIでPOSTする方法

値を配列でPOST フォームでPOSTする項目数が決まっていない時、配列にして値をPOSTしたい場面があると思います。 例えばチェックボックスなんかは1つのnameに対して値の数は決まっていないものです。 また、テキストフォームであっても、入力フォームを追加…

Spring BootのFormクラスでIntegerの項目にNULLはPOSTできない

NULLをPOSTした時点でStringとして認識されてしまう Spring Bootにおけるフォームから値をPOSTする際の挙動になりますが、Integer型の変数にNULLを送信すると以下のようなエラーが発生してしまいます。 Failed to convert property value of type 'java.lang…

amazletでAmazonアソシエイトリンクを簡単作成!

amazlet(アマズレット)とは amazletというツールは、Amazonアソシエイトリンクを簡単に作成できる便利ツールです。 普段アソシエイトのリンクを作る場合、Amazonアソシエイトの管理ページにログインし、商品を検索してから貼り付けフォーマットを選んでから…

box-shadowを使ったなんちゃってオーバーレイ

モーダルを作成中する時には必須のオーバーレイ webサイトでモーダルを使用する場合、併せて背景にオーバーレイを入れますよね。 ピンと来ない方は以下のリンクからページに遷移してほしいのですが、例えばヘッダーの「ログイン」をクリックするとモーダルが…

SpringBoot 開発環境で簡単SSL対応

開発環境でもSSL対応をする理由 最近のwebアプリケーションでは、SSL対応させることが当たり前になっていますよね。 Let's Encryptなどもあり、無料で設定することもできるようになってきました。ただ、webアプリケーションによっては、SSL対応をしている場…

Nginx+TomcatでLet's EncryptのSSL設定

Let's Encryptとは Let’s Encrypt(レッツ・エンクリプト)は、アメリカの非営利団体であるISRG(Internet Security Research Group)が、すべてのWebサーバへの接続を暗号化することを目指したプロジェクトの一貫でサービスを提供しています。 SSLの設定に関わ…

お名前で取得したドメインをさくらのレンタルサーバに向ける設定

DNS

お名前.comで取得したドメインをさくらのレンタルサーバへ向けるパターン アプリケーションの運用にあたって、お名前.comで取得したドメインをさくらのレンタルサーバに向ける場合、大きく分けて2つのパターンがあります。 端的に言えば「ドメインをどのネー…

NginxとTomcatでリバースプロキシ連携

なぜNginxとTomcatを連携? Javaを動かす際のサーバ(ミドルウェア)としてTomcatはよく使われると思いますが、元々Java以外の言語を扱っていた方などは、Webサーバとしての細かい設定はApacheやNginxの方が慣れている場合がありますよね? そんな時はURLから…

AWS(EC2)・CentOS6にMySQL5.7をインストール・起動

MySQL5.7のインストール 今回はAWS(EC2)またはCentOS6のサーバにMySQL5.7をインストールする手順についてです。 基本的にサーバでは、デフォルトでMySQLが入っている場合などがありますが、自分でインストールをしなければいけない場合もあります。 その場合…

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

Spring Bootでのトランザクション設定方法 Spring Bootでトランザクションを設定する方法としては、TransactionManagerを使う方法と@Transactionalというアノテーションを使う方法があります。 コード量の関係やメンテナンス性などを考慮しても後者を選んで…

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

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

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

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

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

dataプロパティで配列の定義 ti-tomo-knowledge.hatenablog.comのページで、Vue.jsではdataプロパティの変更がリアクティブに変化すること、また、それを単なる変数ではなくオブジェクトでも実現させるための方法について説明しましたが、このページではdata…

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

dataプロパティでオブジェクトの定義 Vue.jsでインスタンスを生成した際、dataオブジェクトに変数を定義した場合のリアクティブな動作についてはご存知だと思いますが、テンプレート内でdataオブジェクトに定義した変数を使用していた場合、変数の中身が変更…

ThymeleafでJavascriptエラー(SAXParseException)

Thymeleafでのorg.xml.sax.SAXParseException例外 Thymeleafは構文チェックが厳しく、Javascriptなどをそのまま文中に貼り付けると、以下のようなエラーが発生してしまいページが開けないことがあります。 org.xml.sax.SAXParseException: エンティティ"l"へ…

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

Java Servlet を動かすために必要なコンテナとしてよく使用されているTomcatですが、Linux環境にインストールする方法としては大きく2つあります。 それぞれの違いはご存知ですか? インストール方法によって、起動の仕組みが変わるため、CATALINA_OPTSの設…

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

AMPページではシェアボタンを置きたくなることが多い もはやwebページでは必ずと言ってもいいくらいシェアボタンを設置しますよね。 影響力のあるユーザに拡散してもらえれば一気にPV数を増やすことができます。特にAMP対応のページを作る場合、SEOを意識し…

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で動的なクラス割り当て

Vue.jsで動的(条件を満たす場合)にクラスを割り当てる方法として、v-bind:classがあります(v-bindは省略可能)。 動的に割り当てるパターンとしては色々考えられますよね。 単純にある条件を満たした時にクラスを割り当てるパターン、条件Aを満たした時にクラ…

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で全ページ共通コンポーネントのまとめ方

コンポーネントでヘッダーやフッターなど、どのページでも共通となる部分をまとめることってありますよね。 Vue.jsではその時、どのようにまとめるのがいいのか自分なりに調べた方法を共有します。 まずは全ページで毎回コンポーネントを書くやり方です。 今…

vue.jsでheadの要素を設定する時はvue-headが便利!

SPAでサイトの実装をすべてJavascriptで行う場合、headの要素までもJavascriptで行わなければいけないですよね。 要素を挿入するだけなのでやり方は色々ありますが、やはりライブラリなどを使用して簡単に実装したいところ。 そこで、vue.jsを使用している場…

ELBでNginxを利用した場合の完全SSL化

AWSのAWS Certificate Manager (ACM)をELBに適用し、SSLを強制的に適用させたい場合の対応方法です。 ELBではリスナーの設定で、ポート80(http)でアクセスされた場合もポート443(https)でアクセスされた場合もポート80でEC2に転送される設定になっていること…

MacにCentOS7のVagrant環境を構築

タイトルにある通り、MacにCentOS7のVagrant環境を構築した時のメモです。 必要なものをインストールしてvagrant sshでLinux環境に入れるまでの手順になります。バージョン情報 VirtualBox:5.1 CentOS:7.2まずはVirtualBoxのインストールです。 dmgファイ…

rbenvとruby-buildでMacにRubyをインストール

まず、Homebrewをインストールしてない方はそこからになります。 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 次にrbenvとruby-buildをインストールしてください。 brew install rbenv ruby-buildrbenvはRu…

ApacheとTomcatの連携でリダイレクトが上手くいかない

Javaで組まれたWebサイトをApacheとTomcatを連携させて動かしているのですが、 先日サイト改修により一部ページのURLも変更させた時のリダイレクト設定について苦労したのでそれについて書きます。 やりたいことは、「http://ドメイン/test/sample.html」と…