Vue.jsとNuxt.jsのrouterの違い Nuxt.jsでのルーティングは便利だけどデメリットも どうやってNuxtでルーティングをカスタマイズする？ metaの設定は？ Vue.jsとNuxt.jsのrouterの違い Vue.jsでは、ルーティングを設定する際にrouter/index.jsなどで自分で自…

文章どうしの差分を取得 モジュールのインストール コードの実装 文章どうしの差分を取得 文章の差分を取得するような機能を作りたい時、diff-match-patchを使えば簡単に実装することができます。 PythonやGo、PHPなど、各種言語にライブラリが用意されてい…

Javascriptのwindow.open 複数ページを開く時のネックになるポイント Javascriptのwindow.open Javascriptでaタグの「target=_blank」の要領で、別タブでページを開きたいことありますよね。 そんな時にはwindow.open('ここにURL', '_blank')を使えばOKです…

target="_blank" rel="noopener"を付けないとどうなる？ どんな場面で悪用されてしまうのか まとめ target="_blank" 外部ページへ遷移する際に使われるtarget="_blank"。 あまり知られていないのですが、そのまま使うと実はセキュリティ的なリスクをはらんで…

パスワード生成ツールがなぜ使われるのか 「パスワード 生成」で検索すると... え？お前はどうなのかって？ パスワード生成ツールがなぜ使われるのか 今の世の中、パスワードを設定する場面が多いですよね。 いろんなサービスで会員登録をしたりしますし。。…

QRコード生成機能は実装が簡単！ モジュールのインストール コードの実装 筆者が実装してみたページ QRコード生成機能は実装が簡単！ URLを入力してポチッとボタンを押せばQRコードが生成されるあの機能。 実際に実装してみましたが、超簡単にできたので共有…

Nuxtでソースの表示 extractCSSの設定を変更するだけで解決 Nuxtでソースの表示 ブラウザ上からページのソースを見ることができますが（Chromeで「ページのソースを表示」を実行する）Nuxtでソースを表示させた時にデフォルトの設定だとCSSが全部出力されま…

aタグのイベント イベントを止める方法が用意されている aタグのイベント javascriptでは数々のイベントを設置するもの。 ホバーした時、スクロールした時、、、など色々パターンはありますが、特に多いのはクリック時のイベントではないでしょうか。 そして…

ファイルを読み込む処理 FileInputStreamでファイルの内容を読み込み InputStreamReaderで指定した文字コードに FileReaderを使えばInputStreamReader要らず 旧来のファイルの読み込み方比較 方法1 方法2 BufferedReaderを使えば一行単位で呼び出し可能に Ja…

コンパイル言語の宿命 Initialized JPA EntityManagerFactory for persistence unit ‘default’ 他の試行錯誤 コンパイル言語の宿命 Spring Bootに限らずJava等コンパイル言語の宿命ですが、ちょっとした変更でもいちいちコンパイルが必要になりますよね。 そ…

開発時のVueとサーバサイドのポート番号 ポート番号が異なることでの問題点 proxyTableで解決 開発時のVueとサーバサイドのポート番号 VueでサーバサイドのAPIを使用する開発をしており、サーバサイドのサーバも起動させている場合、Vueとサーバサイドのポー…

CORSとは？ CORSの対策 Spring Bootでの対策 方法1 @CrossOriginアノテーション 方法2 Spring SecurityでCORSの設定をする方法 まずはSpring Securityのインストール WebSecurityConfigurerAdapterにCORSの設定 CORSとは？ 通常Webページでは、同一生成元ポ…

Nuxtで使用する$axios getと$getの違い getで取得するパターン $getで取得するパターン POSTも一緒？ Nuxtで使用する$axios SPAサイトではガンガン行う非同期通信、その中でもaxiosは良く使われると思いますが、 Nuxtの場合はnuxt-community/axios-moduleの…

routerでchildrenを設定していると表示されるWARNING 不要なname設定 routerでchildrenを設定していると表示されるWARNING VueやNuxtでは、routerの設定でchildrenを使うと構造的に見やすいルーティングを生成できますよね。 ただし、以下のような一件問題な…

Nuxtのインストール後のディレクトリ構成 不要なら消してしまおう Nuxtのインストール後のディレクトリ構成 yarnやnpmでnuxtをインストールした後のディレクトリ構成は以下になります。Project ┣ .git ┣ .nuxt ┣ node_modules ┣ assets ┣ components ┣ layou…

function()から始まるような構文 モジュールを使って呼び出し Google Tag Managerを使いたい時 Google Fontsを使いたい時 その他の方法 function()から始まるような構文 サイト制作でJavascriptのライブラリを使う昨今、サイト表示時点で外部にアクセスする…

SpringBootのFormで使われるList SpringBootのFormで使われるList SpringBootのFormバリデーションで独自バリデーションを作成し、 適用している人にとってはよく見かけるListですが、これの使い道は知ってますか？例） public @interface List { TestValida…

セッションハイジャックとは セッションIDを使わなければ関係ないの？ ステートレスのサイトでセッションハイジャックを防ぐには セッションハイジャックとは ハイジャックという言葉は、輸送機関などが強奪される時に使用される言葉ですが、web業界でも使用…

Entityの@ManyToOne まずはEntityについて Cascadeはデータベース操作に関連 Entityの@ManyToOne あるEntity（エンティティ）に対してフィールドを設定した時に、 Entityとフィールドが多対一の関係にある時に使用します。 このあたりの説明は長くなるので、…

APIのPOST処理を実行 APIの記述 CORSの設定 CORSの設定を環境ごとに分ける APIのPOST処理を実行 前回は以下の記事のように、RailsでAPIを使用してGET処理を行いました。 ti-tomo-knowledge.hatenablog.com今回はPOST処理の方を行い、データの保存まで行いた…

APIモードでアプリを作成 モデルの作成 コントローラの作成 APIモードでアプリを作成 前回の内容 ti-tomo-knowledge.hatenablog.com前回Railsをセットアップして起動させるところまで進めましたが、今回は主にAPI用でRailsを使いたいので、GET処理をするAPI…

ZipArchiveクラスが見つからないよエラー モジュールをインストール php-gdをインストール まとめ ZipArchiveクラスが見つからないよエラー wordpressのプラグインで、WP All Exportを使用した時、以下のエラーメッセージが画面の上に表示されて困った人はい…

環境構築も爆速に！ 構築手順 Railsのインストール railsコマンドのインストール 環境構築も爆速に！ 開発効率に定評のあるRailsですが、環境構築も爆速にできてしまう点に特徴があります。 今回はMacでの説明になりますが、一気にやってしまいましょう！イ…

Nuxt.jsとは？ Nuxt.jsプロジェクトの作成 Nuxt.jsとは？ Nuxt.jsとは、Vueアプリケーションを作成するフレームワークです。 通常のVue.jsの開発で頻繁に使用する以下の機能を最初から含んでいます。・Vue 2 ・Vue Router ・Vuex ・Vue Server Renderer ・vu…

SpringBoot + EC2の構成で、メール送信エラーが頻発 さくらサーバのサポートセンターに問い合わせ 本当の原因はEC2の送信制限 ちなみに… SpringBoot + EC2の構成で、メール送信エラーが頻発 SpringBoot + EC2のアプリケーションでメルマガ機能を作成していま…

先頭だけ大文字に UPPERとLOWERを使って結合 UPDATEも可能に 先頭だけ大文字に MySQLのあるカラムについてアルファベットなどが登録されている場合に、先頭だけ大文字に変換して取得する方法です。 例えば英単語を保存しているカラムからデータを取得したい…

メールサーバの容量チェック 使用している技術 スクレイピングツールの中身 cronの設定 メールサーバの容量チェック 以前会社でさくらのメールサーバを運用していた時、1人で大量に容量を使いすぎないように、定期的にチェックして容量が大きい人は容量を空…

新技術が飛び交うエンジニア業界 どんどん実践 漫然としたインプットでは意味がない 新技術が飛び交うエンジニア業界 Webの業界はとにかく進化が早く、エンジニア業界も次々と新しい技術が出てきますね。 私は情報収集をする場合に気をつけていることとして…

storeの変更を検知したいパターン computedを利用するやり方 storeの変更を検知したいパターン Vue.jsでは状態を管理するのに便利なVuexのstoreですが、storeの値が変更されたタイミングでイベントを実行したくなる場面はありませんか？例えば別なコンポーネ…

Spring Bootのバリデーション Bean ValidationとJPA定義 Spring Data JPA (Hibernate)使用時のJPA制約 暫定対応 Spring Bootのバリデーション Spring Bootでは、フォームやエンティティクラスにおいて、アノテーションによる入力値チェックが可能なことはご…