【正規表現】似たようなURLを判定するための正規表現

小ネタです。 URLで処理を分岐させる時に、似たようなURLを一緒に扱いたい場合があります。 例えば、次のような違いを同じドメインとして判定したい時です。 サブドメインの有無 httpsとhttpの混同 そんな時に使う正規表現について記載します。 URL正規表現…

【Dompdf】テキストに日本語を使用する

Webシステムで帳票を生成する機会というのはよくあります。 PDFを作成するライブラリは色々ありますが、手軽にHTMLライクで作れるライブラリとなるとDompdfがあります。 github.com しかし、デフォルトでは日本語に対応していません。 日本語を含むフォント…

【Laravel】リレーションされた要素数を取得する

プロジェクトが複雑になればなるほど、データベースを用いたやりとりの難易度も上がっていきます。 複数のテーブルをリレーションさせる事はよくあります。 Laravelではリレーション周りの関数も色々用意されており、複雑なリレーションにも柔軟に対応できま…

【Laravel-Admin】カスタムフィールドを作る

Laravel-Adminを使った管理画面を運用しているのですが、用意されている既存フィールドでは要件に合わない時があります。 laravel-admin.org 例えば、年月日の月を管理したい場合です。 もちろん、月を管理するためのフィールドは初めから用意されています。…

【PHP】継承元の静的変数(static)を、継承先の変数で上書きする

php

Laravelで開発をしていると、静的変数でクラスのパラメータを設定する場面がよくあります。 継承元に共通関数をまとめられるので、ソースの見通しがよくなります。 今回は、静的変数を継承先から取得する方法について記載します。 継承元の変数を上書きする…

【TypeScript】都道府県一覧の配列データ

日本向のサービスを作る時、都道府県一覧の配列を作って処理の中に組み込む事が多いと思います。 TypeScript用に簡単な一覧データを作りましたのでご共有します。 案件に合わせて変えてもらって構いません。 github.com 使用例 Reactで都道府県のドロップダ…

【TypeScript】連想配列の型指定

Javascriptは配列のように扱える型が複数あります。 ドキュメントでも基本的な型は説明されています。 www.typescriptlang.org しかし、連想配列については型としては説明されていません。 今回は連想配列を扱う方法について記述します。 連想配列の指定方法…

【Laravel】ロケーション周りの初期設定

Laravelをインストールして最初に実行する作業の一つに、アプリケーションのロケーション設定があります。 この作業をしないと、アプリケーションで扱う時間が日本時間と異なったり、バリデーションのメッセージが日本語にできなかったりします。 今回は、La…

【Mac】コピー&ペースト事にコピー元のスタイル(装飾)を引き継がずにペーストする

mac

今回は小ネタです。 コピー&ペースト(以下、コピペ)をする時、コピー元のフォントサイズや色、背景色まで引き継いでしまう場合があります。 Macでは、文字の装飾の事をスタイルと言います。 エディタであれば文字に装飾をつけられないので影響は受けませ…

【Visual Studio Code】【Mac】json形式の生データを整形して確認する方法

今回は小ネタです。 jsonファイルではなく、json形式の生データをとりあえず見やすくしたい時があります。 整形してくれるwebサービスもありますが、機密情報だと警戒してしまいます。 今回は、VisualStudioCode(以降、VSCode)を使用した、json形式の整形方…

【javascript】関数で可変長引数を扱う

処理の中で関数の引数の総数が定まらない場合があります。 これを可変長引数と言います。 ja.wikipedia.org 可変長引数を扱いたい場合は、追加したい要素を配列にしてしまう方法もあります。 // 指定された数字の合計値を返す function sum(args) { return a…

【javascript】動的なパラメータを含むURLを生成する

外部データをやり取りする際、データの取得はGETメソッドで行う場面が多いと思います。 GETメソッドの場合、特定の文字や情報を検索したり、データ形式を指定したりするためにパラメータを用いる事があります。 パラメータが少なければ、一つ一つ結合しても…

【React】【Karma + Jasmin】React v16でコンポーネントの単体テストが実行できない時に試す事

Reactでコンポーネントの単体テストを試してみようと思いました。 それぞれコアとなるモジュールをインストールしただけでは動きませんでした。 調べてみると、コアのインストール以外にも他のモジュールを入れたり、設定を変えたりする必要がありました。 …

【Salesforce API】2020年7月頃からSalesforceのAPIが使えない時に確認する事

最近、Salesforceと連携していたWebサービスでAPIに連携できない問題が発生しました。 Salesforceを管理されている方からは「設定の変更をされていない」との事だったので、色々状況を調べることになりました。 解決策が見つかったので共有します。 もしかし…

【Vue Router】ルートのプロパティの型を変換して取得する

プレーンなVueのプロジェクトでルーティングを行いたい場合、Vue Routerモジュールを使用します。 router.vuejs.org このモジュールでは、静的なURLはもちろん、動的なURLを扱う事ができます。 動的なURLというのは、例えば次のような使い方です。 ユーザー…

【Vue CLI】初期設定のエントリーポイントを変える

Vue CLIで作成したプロジェクトでは、初期設定のエントリーポイントは隠蔽されています。 今回は、初期設定されているエントリーポイントを変える方法について記載します。 環境 モジュール名 バージョン @vue/cli 4.4.6 【Tips】 Vue CLI 4系を使う場合の注…

【Vue】エラー解決備忘録:TypeError: loaderContext.emitError is not a function

webpackで環境を作っている時に発生したエラーについて解決策を記録しておきます。 現象 Vueの設定をしてビルドした所、下記のエラーが発生しました。 ビルド自体は正常に完了しました。 TypeError: loaderContext.emitError is not a function ソース ハブ…

【Vue】エラー解決備忘録:You are using the runtime-only build of Vue where the template compiler is not available...

webpackで環境を作っている時に発生したエラーについて解決策を記録しておきます。 現象 Vueの設定をしてビルドした所、下記のエラーが発生しました。 ビルド自体は正常に完了しました。 [Vue warn]: You are using the runtime-only build of Vue where the…

【webpack】ビルドするとimport宣言したcssファイルが0.jsになってしまう件の解決

webpackの構成を作成していた時の備忘録です。 今回は、stylusからcssにコンパイルする過程で発生する現象ですが、cssでもsass(scss)でも発生しうる事象です。 また、mini-css-extract-pluginでcssファイルを外部出力する場合でも同じ現象が起こります。 web…

【webpack 4】コード圧縮処理の設定方法

webpackの利点として、コンパイルしたスクリプトの容量を抑えてくれる機能が用意されています。 とはいえ、単純にwebpackを使うだけであれば触れる機会は少ない機能だと思います。 今回は、コードの圧縮方法について触れたいと思います。 webpackのライブラ…

【javascript】aタグの無効化

フロントエンドで遷移するイベントを実装する時があります。 最近では、イベントを発火させるボタン要素をdivタグで用意するドキュメントを見ます。 もちろん、全てdivでも何ら問題はありません。 しかし、何かしら遷移が発生する場合は、(好みの問題ではあ…

【webpack】【Pug】webpackのpugテンプレートコンパイル設定

静的ページで構成されるページであっても、なるべくならテンプレートエンジンを使用して作りたいものです。 今回は、Pugテンプレートについて取り上げます。 pugjs.org Pugについては別の機会にするとして、webpackでコンパイルするための設定について記載し…

【Laravel Mix】複数のスタイルやスクリプトのコンパイル処理を改善する

LaravelはフロントエンドコンパイルをするためのツールとしてLaravel Mixが導入されています。 laravel.com 初期状態でも十分使いやすいのですが、機能が多いプロジェクトの場合ではそのままでは使いづらいところがあります。 例えばページ毎に別のスタイル…

【Visual Studio Code (VSCode)】ウィンドウの表記を日本語にする

無償IDEで且つ軽いと言われているVisual Studio Code(VSCode) を触る機会がありました。 (※諸説あります。) 初期状態では英語ですので、日本語にする方法について記載します 環境 Macで使う想定ですが、Windowsでも手順は同じようです。 OS バージョン mac 1…

【Laravel】既存のテーブルに外部キーを設定、解除するマイグレーションを作る

Laravelでテーブルに変更を加える場合、基本的にマイグレーションで指示を書きます。 マイグレーションを書く時は、必ず立ち上げ時に起動するup関数と、ロールバックやリセットで実行するdown関数を設定します。 新規のマイグレーションについては、テーブル…

【Vue】コンポーネントのプロパティの初期値にバックエンドから値を代入する

Vueとバックエンドで共通の値を使いたい時があります。 シングルページアプリケーションの様にフロントとAPIで構成する場合は、APIでサーバーサイドとやり取りをすると言う方法が考えつきます。 しかし、設定値のためだけにAPIを使うと言うのは実装するのも…

【HTML】iOSデバイスで入力すると先頭が大文字になる件

iPhoneやiPadのようなiOSデバイスで英語文字入力をする際、先頭の小文字が大文字になってしまう事があります。 小文字しか入力しないinputタグの場合、この機能が煩わしく感じます。 今回はこの機能を止める方法です。 原因 タグに付与するautocapitalize属…

【Vue】エラー解決備忘録:The "data" option should be a function that returns a per-instance value in component definitions.

Vueでアプリケーションを実装していた時に発生したエラーについて記載します。 状況 ボタンが2個あるページを作成しました。 ボタンが1個だったときはオブジェクトでも動いていたのですが、2個にしたところ次のエラーが発生しました。 The "data" option …

【Laravel】Model Eventが動かないを原因を解消するまで

LaravelにはModel Eventと言うモデルの状態変更に合わせてコールバックを実行できる機能があります。 readouble.com laravel.com 最近、この機能を知りました。 その機能を別のシステムでも使おうとした所すんなり動かなかったので備忘録として残しておきま…

【js】キーボードの入力を特定のテキストボックスに集約させる

Webアプリケーションを作っていて、テキストエリアを介さずに入力を送信したい場合があります。 例えば、バーコードリーダーのような外部デバイスの入力を受け付けてそのまま送信をしたい時などです。 今回は、テキスト入力を特定のテキストボックスに入力さ…

©︎2017-2018 WebSandBag