Insell の技術ノート

# 便利ツール

TIP

Web開発で役立つ便利なサービスやツールを紹介しています。 このページでは、「すぐ使える」、「無料で使える」というものをリストにしています。

# 色入力補助

# 🔹 Material UI Color

www.materialui.co (opens new window)

マテリアルカラーをカラーパレットから選択することができるツールです。

# 🔹 Colorbase

colorbase.app (opens new window)

カラーコードから、色に関する情報を取得することができるツールです。以下のような情報が掲載されています。

  • 似合う色
  • 類似色
  • 補色
  • ブランドカラーと使用されているブランド名
  • 色覚シミュレーション

# 絵文字入力補助

# 🔹 絵文字キーボード

emojikeyboard.io (opens new window)

絵文字をパレットから選択できます。 😍

# アイコン入力補助

# 🔹 マテリアルデザインアイコン検索

materialdesignicons.com (opens new window)

数多くある、マテリアルデザインアイコン (mdi) を検索することができます。

# 🔹 マテリアルデザインアイコン羅列版

pictogrammers.github.io (opens new window)

URL末尾のバージョンを変えるとそのバージョンの一覧が表示されます。 使用可能なバージョンは、npm の @mdi/font パッケージ (opens new window) を開き、Versions のタブを選択すると確認できます。 ご自身の作成中のプロジェクトが使用しているバージョンに合わせて使用してください。

https://pictogrammers.github.io/@mdi/font/6.4.95/
1

# フリー素材

# 🔹 Lorem Picsum

https://picsum.photos/ (opens new window)

「ここに画像を配置したいけど、仮で入れたい！」というときに便利なツールです。任意の大きさの画像を簡単に使用することができます。

使用方法

URL: https://picsum.photos/{横幅px}/{高さpx}
例 1: https://picsum.photos/800/150
例 2: https://picsum.photos/id/1/800/150 (IDを指定して固定することもできます。)
1
2
3

例

# 🔹 Unsplash

https://unsplash.com/ (opens new window)

無料の画像素材です。改変自由、商用利用可、帰属不要です。 ライセンス (opens new window)

# 🔹 unDraw

https://undraw.co/illustrations (opens new window)

無料のベクター素材です。改変自由、商用利用可、帰属不要です。 ライセンス (opens new window)

# チェッカー

# 🔹 DNS伝播確認

https://www.whatsmydns.net/ (opens new window)

世界中にある DNS に、自分が設定した DNS 情報を反映できているか確認できます。

# 🔹 DNS 確認 | cman jp

cman.jp nslookup (opens new window)

ドメイン名から DNS がどのように設定されているか確認することができます。 手元のコンピュータで nslookup コマンドまたは dig コマンド を実行することと同じです。

# 🔹 DNS 確認 | Google Admin Toolbox

https://toolbox.googleapps.com/apps/dig/ (opens new window)

ドメイン名から DNS がどのように設定されているか確認することができます。 手元のコンピュータで dig コマンド を実行することと同じです。

# 🔹 GCPing

https://www.gcping.com/ (opens new window)

Google Cloud Platform のリージョンへのレイテンシを計測するツールです。Google 公式のものではありません。

# DB 管理パネル

# 🔹 Adminer on heroku (us-region)

https://adminer-insell.herokuapp.com/ (opens new window)

PHP で動作する軽量の データベース管理パネル「 Adminer (opens new window) 」です。 上記のリンクは、私が heroku にデプロイし使用できるようにしたものです。heroku の US リージョンにデプロイしています。 PostgreSQL Add-on を使用している場合は、同リージョンにあるため、高パフォーマンスで利用できます。

情報を抜き取るようなプログラムは仕込んでいませんが、他人の管理パネルを使用するのは怖いなぁと感じて頂いたほうが良いと思います。😖 通常は、ご自身でデプロイするか、ローカル環境で使用します。

# 作図ツール

# 🔹 draw io

https://app.diagrams.net/ (opens new window)

# プログラムコード共有ツール

# 🔹 CodeSandbox

https://codesandbox.io/ (opens new window)

# 🔹 JSFiddle

https://jsfiddle.net/ (opens new window)

# 🔹 CodePen

https://codepen.io/ (opens new window)

# 生成 / 変換ツール

# 🔹 ToolBox エンコード / デコード

Google Apps ToolBox (opens new window)

以下に対応しています。

  • Base64 エンコード/デコード
  • Base64URL エンコード/デコード
  • URL エンコード/デコード
  • MD5 ハッシュ
  • SAML エンコード/デコード
  • Pretty JSON
  • Quoted-Printable エンコード/デコード
  • UTF16 デコード

# 🔹 GUID (UUID v4) 生成ツール

https://hogehoge.tk/guid/ (opens new window)

UUID (v4) を一括で生成できるツールです。生成フォーマットはいくつかのパターンから選択できます。

← 便利サービス →