vue-slickを使用した場合のエラー 複数画像のスライド表示を簡単に実装できるJavascriptのプラグインであるslick.js。 これをVueやNuxtに実装する場合はvue-slickをインストールしてimportすれば簡単に実装できます。 ただここでNuxtに実装する場合は注意が…
APIとして使用される場合を想定 近年SPAサイトがよく作られており、サーバサイドの言語はAPIとして開発されることが多いでしょう。 APIとして使用する場合、注意しなくてはいけないのがクロスオリジンの設定です。 他サイトから自由自在にアクセスされてしま…
herokuでGo herokuは非常に便利なPaasですよね。 アプリケーション開発では、せっかく開発が終わったのにも関わらず、サーバの準備でまた時間がかかってしまうのが面倒ですよね。 それほどインフラ面にこだわりがあるわけではないのに。 そんな時にherokuは…
開発環境と本番環境を切り分けたい理由 アプリケーションの起動に当たって、開発環境と本番環境で設定を変えたいことがあるでしょう。 例えばサーバのポート番号やDB接続の定義情報など。 サードバーティのAPIに繋ぐ際に開発モードと本番モードが分かれてい…
Vue.jsとNuxt.jsのrouterの違い Vue.jsでは、ルーティングを設定する際にrouter/index.jsなどで自分で自由に設定することができます。 カスタマイズなど自由自在で、pages配下のファイルの置き場所に関係なく、pathやcomponentやname、それにmetaなどを設定…
文章どうしの差分を取得 文章の差分を取得するような機能を作りたい時、diff-match-patchを使えば簡単に実装することができます。 PythonやGo、PHPなど、各種言語にライブラリが用意されていますが、今回はJavascriptのライブラリを使用し、フロントエンドだ…
Javascriptのwindow.open Javascriptでaタグの「target=_blank」の要領で、別タブでページを開きたいことありますよね。 そんな時にはwindow.open('ここにURL', '_blank')を使えばOKです！これを応用すれば、以下のような複数のURLリンクを一括でタブ表示す…
target="_blank" 外部ページへ遷移する際に使われるtarget="_blank"。 あまり知られていないのですが、そのまま使うと実はセキュリティ的なリスクをはらんでいるのです。 その脆弱性対策として、リンクに「rel="noopener"」を付けましょう。 <a href="https://jidou.jp" target="_blank" rel="noopener">リンクのテキスト</a>…
パスワード生成ツールがなぜ使われるのか 今の世の中、パスワードを設定する場面が多いですよね。 いろんなサービスで会員登録をしたりしますし。。。 会員登録の時はさすがに使い慣れたパスワードを使い回すか笑ただ、ものによってはパスワードを自分で生成…
QRコード生成機能は実装が簡単！ URLを入力してポチッとボタンを押せばQRコードが生成されるあの機能。 実際に実装してみましたが、超簡単にできたので共有します。 バックエンドは不要で、Javascriptだけで実装できてしまいます。 （複雑そうな仕組みに見え…
Nuxtでソースの表示 ブラウザ上からページのソースを見ることができますが（Chromeで「ページのソースを表示」を実行する）Nuxtでソースを表示させた時にデフォルトの設定だとCSSが全部出力されませんか？ 本来見たい部分までひたすらスクロールして大変な思…
aタグのイベント javascriptでは数々のイベントを設置するもの。 ホバーした時、スクロールした時、、、など色々パターンはありますが、特に多いのはクリック時のイベントではないでしょうか。 そして大体それらはaタグに設置されますよね。ただ、aタグには…
ファイルを読み込む処理 例えばcsvファイルなど、ファイルの内容を読み込んで処理をすることがありますよね。そんな時にFileInputStreamやらInputStreamReaderやらBufferedReaderを使う必要があるのですが、初見だと何がなにやらさっぱりですよね。そんなメ…
コンパイル言語の宿命 Spring Bootに限らずJava等コンパイル言語の宿命ですが、ちょっとした変更でもいちいちコンパイルが必要になりますよね。 そうして開発効率の悪さを感じてしまいます。 ※もちろんコンパイル言語は実行時のパフォーマンスに安定感がある…
開発時のVueとサーバサイドのポート番号 VueでサーバサイドのAPIを使用する開発をしており、サーバサイドのサーバも起動させている場合、Vueとサーバサイドのポート番号は異なることと思います。 Vueで「npm run dev」コマンドを使用して開発している場合、…
CORSとは？ 通常Webページでは、同一生成元ポリシー(Same Origin Policy)によってWebページを生成したドメイン以外へのHTTPリクエストができません。 しかし、外部リソースから情報を取得してページ内で表示したいというニーズは当然のようにあり、CORSとい…
Nuxtで使用する$axios SPAサイトではガンガン行う非同期通信、その中でもaxiosは良く使われると思いますが、 Nuxtの場合はnuxt-community/axios-moduleのモジュールを使うことが一般的でしょう。注意したいのが、何も考えずに $axios.$get とやると、いつも…
routerでchildrenを設定していると表示されるWARNING VueやNuxtでは、routerの設定でchildrenを使うと構造的に見やすいルーティングを生成できますよね。 ただし、以下のような一件問題なさそうなルーティングを書いた場合、WARNINGが表示されてしまいます。…
Nuxtのインストール後のディレクトリ構成 yarnやnpmでnuxtをインストールした後のディレクトリ構成は以下になります。Project ┣ .git ┣ .nuxt ┣ node_modules ┣ assets ┣ components ┣ layouts ┣ pages ┣ store ┣ static ┣ plugins ┣ middleware ┣ nuxt.conf…
function()から始まるような構文 サイト制作でJavascriptのライブラリを使う昨今、サイト表示時点で外部にアクセスするような、 function()から始まるような構文を使うことはよくありますよね。 例えば流入数を計測するためのお決まりのタグや、Typekitなど…
SpringBootのFormで使われるList SpringBootのFormバリデーションで独自バリデーションを作成し、 適用している人にとってはよく見かけるListですが、これの使い道は知ってますか？例） public @interface List { TestValidate[] value(); } 一例ですが、例…
セッションハイジャックとは ハイジャックという言葉は、輸送機関などが強奪される時に使用される言葉ですが、web業界でも使用されます。 それがセッションハイジャック。 セッションハイジャックについてはググればいくらでも出てくるので詳細な説明は省き…
Entityの@ManyToOne あるEntity（エンティティ）に対してフィールドを設定した時に、 Entityとフィールドが多対一の関係にある時に使用します。 このあたりの説明は長くなるので、詳細を知りたい人はぐぐって調べてみてください。ただ@ManyToOneを付けるだけ…
APIのPOST処理を実行 前回は以下の記事のように、RailsでAPIを使用してGET処理を行いました。 ti-tomo-knowledge.hatenablog.com今回はPOST処理の方を行い、データの保存まで行いたいと思います。 最終的に実行したいAPIコマンドは以下になります。 curl -X …
APIモードでアプリを作成 前回の内容 ti-tomo-knowledge.hatenablog.com前回Railsをセットアップして起動させるところまで進めましたが、今回は主にAPI用でRailsを使いたいので、GET処理をするAPIを作ってみたいと思います。(POST処理は次回) 今回は再度API…
ZipArchiveクラスが見つからないよエラー wordpressのプラグインで、WP All Exportを使用した時、以下のエラーメッセージが画面の上に表示されて困った人はいませんか？ ZipArchiveクラスがサーバで見つかりません。 Webホスティングプロバイダーにお問い合…
環境構築も爆速に！ 開発効率に定評のあるRailsですが、環境構築も爆速にできてしまう点に特徴があります。 今回はMacでの説明になりますが、一気にやってしまいましょう！インストールでは、Rubyのバージョンを管理するためにrbenvと、rbenvのプラグインでr…
Nuxt.jsとは？ Nuxt.jsとは、Vueアプリケーションを作成するフレームワークです。 通常のVue.jsの開発で頻繁に使用する以下の機能を最初から含んでいます。・Vue 2 ・Vue Router ・Vuex ・Vue Server Renderer ・vue-metaなんと言っても「Vue Server Rendere…
SpringBoot + EC2の構成で、メール送信エラーが頻発 SpringBoot + EC2のアプリケーションでメルマガ機能を作成していましたが、どうにもメール送信が途中で止まってしまうということで、ログを確認すると以下のようなエラーログが頻発していました。 要はタ…
先頭だけ大文字に MySQLのあるカラムについてアルファベットなどが登録されている場合に、先頭だけ大文字に変換して取得する方法です。 例えば英単語を保存しているカラムからデータを取得したい場合など、使う場面はまぁまぁあると思います。 UPPERとLOWER…
