WEBプログラミング番外編：ToshiLab Toolsを作った流れ｜学習中に使える便利ツールを自作する考え方

通常のWEBプログラミング記事では、

• HTML
• CSS
• JavaScript
• PHP

などの基礎知識を順番に学んでいきます。

しかし、学習を続けていると、

「覚えた技術で何が作れるのか」

が気になってきます。

そこで今回は、実際に公開しているツールを例にしながら、学習内容がどのように形になるのかを紹介します。

例えばJavaScriptを学ぶと、

• 入力内容をリアルタイムで処理する
• ボタン操作で結果を表示する
• 画像をブラウザ内で加工する
• 色コードを変換する
• コードを整形する

といった機能を実装できるようになります。

現在公開している主なツールは次の通りです。

すべてブラウザ上で利用できるため、ソフトウェアのインストールは不要です。

特に画像圧縮ツールは、画像をサーバーへ送信せず、ブラウザ内だけで処理する仕組みにしています。

v0.5.0で追加したツール

SEO・OGPメタタグメーカーを追加

ToshiLab Tools β v0.5.0では、新しく「SEO・OGPメタタグメーカー」を追加しました。

記事や固定ページを公開するときは、ページタイトルやdescriptionだけでなく、

・canonical URL
・robots設定
・OGPタイトル・説明文
・og:image
・og:image:alt
・og:type
・og:locale
・X Card

など、head内で確認しておきたい項目が複数あります。

これらを毎回手作業で組み立てると、タグの書き忘れやURLの入力ミスが起こりやすくなります。

そこで、必要な情報を入力するとSEO・OGP・X Card用のmetaタグをまとめて生成できるツールとして制作しました。

入力した内容は、Google検索結果風プレビューとSNS共有カード風プレビューで確認できます。

また、SEO用タイトルとOGP用タイトルを分けたり、canonical URLをページURLとは別に設定したり、noindex・nofollowを切り替えたりすることもできます。

生成したコードは、

・SEO基本タグ
・OGPタグ
・X Cardタグ
・すべてのコード

の単位でコピーできます。

入力内容はブラウザ上で処理し、外部サービスへ送信する仕組みにはしていません。

記事を公開する前に「head内へ何を入れるか」を整理したいときや、OGP設定を確認したいときに使えるツールとして追加しました。

ToshiLab本体はWordPressで運営しています。

しかし、ツール部分はWordPressの固定ページとして作成していません。

構成は次のようになっています。

toshilab.jp
 |
 |-- WordPress本体
 |
 |-- wp-admin
 |
 |-- wp-content
 |
 |-- wp-includes
 |
 `-- index.php
 |
 `-- tools
      |
      |-- index.html
      |
      |-- _next
      |
      |-- text-counter
      |
      |-- html-escape
      |
      |-- code-formatter
      |
      |-- color-palette
      |
      |-- image-compress
      |
      |-- social-ad-image-resizer
      |
      |-- image-name-helper
      |
      `-- seo-ogp

toshilab.jp
 |
 |-- WordPress本体
 |
 |-- wp-admin
 |
 |-- wp-content
 |
 |-- wp-includes
 |
 `-- index.php
 |
 `-- tools
      |
      |-- index.html
      |
      |-- _next
      |
      |-- text-counter
      |
      |-- html-escape
      |
      |-- code-formatter
      |
      |-- color-palette
      |
      |-- image-compress
      |
      |-- social-ad-image-resizer
      |
      |-- image-name-helper
      |
      `-- seo-ogp

公開URLは次の通りです。

https://toshilab.jp/tools/

https://toshilab.jp/tools/

WordPressとは分離することで、

• テーマの影響を受けない
• プラグイン競合を避けられる
• 独自UIを作りやすい
• 管理しやすい

というメリットがあります。

今回のツール群は主に以下の技術で構築しています。

ローカル環境では次のような構成で管理しています。

toshi-tools-next
|
|-- app
|   |
|   |-- page.tsx
|   |
|   |-- text-counter
|   |
|   |-- html-escape
|   |
|   |-- code-formatter
|   |
|   |-- color-palette
|   |
|   |-- image-compress
|   |
|   |-- social-ad-image-resizer
|   |
|   |-- image-name-helper
|   |
|   `-- seo-ogp
|
|-- components
|
|-- lib
|
|-- public
|
|-- package.json
|
|-- package-lock.json
|
|-- next.config.js
|
`-- tsconfig.json

toshi-tools-next
|
|-- app
|   |
|   |-- page.tsx
|   |
|   |-- text-counter
|   |
|   |-- html-escape
|   |
|   |-- code-formatter
|   |
|   |-- color-palette
|   |
|   |-- image-compress
|   |
|   |-- social-ad-image-resizer
|   |
|   |-- image-name-helper
|   |
|   `-- seo-ogp
|
|-- components
|
|-- lib
|
|-- public
|
|-- package.json
|
|-- package-lock.json
|
|-- next.config.js
|
`-- tsconfig.json

Next.jsを利用することで、ツールごとにページを分離しながら管理できます。

ロリポップ上でNode.jsを常時動かしているわけではありません。

ローカル環境でビルドし、生成された静的ファイルをアップロードしています。

npm run build

npm run build

ビルド後には out フォルダが生成されます。

out
|
|-- index.html
|
|-- 404.html
|
|-- _next
|
|-- text-counter
|
|-- html-escape
|
|-- code-formatter
|
|-- color-palette
|
|-- image-compress
|
|-- social-ad-image-resizer
|
|-- image-name-helper
|
`-- seo-ogp

out
|
|-- index.html
|
|-- 404.html
|
|-- _next
|
|-- text-counter
|
|-- html-escape
|
|-- code-formatter
|
|-- color-palette
|
|-- image-compress
|
|-- social-ad-image-resizer
|
|-- image-name-helper
|
`-- seo-ogp

アップロード時は、out フォルダそのものではなく、中身を /tools/ に配置します。

画像圧縮ツールで最も重視したのは、プライバシーと手軽さです。

処理の流れは次のようになります。

画像を選択
   ↓
ブラウザ内で読み込み
   ↓
リサイズ・圧縮
   ↓
ダウンロード

※画像はサーバーへ送信されません。

画像を選択
   ↓
ブラウザ内で読み込み
   ↓
リサイズ・圧縮
   ↓
ダウンロード

※画像はサーバーへ送信されません。

そのため、

• 個人画像をアップロードしなくてよい
• サーバー容量を消費しない
• PHPによる画像処理が不要
• 静的サイトでも運用できる

というメリットがあります。

iPhoneで撮影した写真はHEIC形式になっている場合があります。

しかし、HEICは環境によって扱いづらいことがあります。

そこで、HEIC画像が選択された場合のみ、変換処理を行うようにしました。
※HEIC画像については読み込めない場合もございます

HEIC画像
   ↓
heic2any
   ↓
Canvas処理
   ↓
WebP/JPG/PNG出力

HEIC画像
   ↓
heic2any
   ↓
Canvas処理
   ↓
WebP/JPG/PNG出力

これにより、iPhoneユーザーでも簡単に画像変換できるようになっています。

コード整形ツールでは、

• HTML
• CSS
• JavaScript
• JSON

に対応しています。

単純な整形だけでなく、コードエディタ風の見た目にすることで学習意欲が高まるよう工夫しました。

初心者でも見やすく、コードの構造を理解しやすいUIを目指しています。

色選びでは、単にHEXコードを見るだけでは不十分です。

実際には、

• 補色
• 類似色
• トライアド
• コントラスト
• UI表示例

なども確認したくなります。

そこで、カラーパレットには以下の機能を実装しました。

• カラーピッカー
• HEX入力
• RGB表示
• HSL表示
• 補色表示
• 類似色表示
• トライアド表示
• コントラスト確認
• UIプレビュー

実際の利用シーンを想定した設計にしています。

ツールは作るだけでは利用されません。

読者が必要とするタイミングで紹介することが重要です。

記事内容と自然につながる形で導線を設置することで、利用率も高まります。

静的サイトをWordPress配下へ設置する場合、次のようなミスが起こりやすくなります。

• toolsフォルダの配置ミス
• _next のアップロード漏れ
• URLの二重化

例えば、

https://toshilab.jp/tools/tools/image-compress/

のようになっている場合は配置ミスの可能性があります。

正しくは、

https://toshilab.jp/tools/image-compress/

です。

今回は、WEBプログラミング番外編として、ToshiLab Tools βを作成した流れを紹介しました。

ポイントを整理すると、

• WordPressとは別に /tools/ 配下へ設置した
• Next.js・React・TypeScriptで構築した
• 静的ファイルとして公開した
• 画像はブラウザ内で処理し、HEIC変換にも対応した
• 文字・コード・デザイン・画像に関するツールを実装した
• SNS・広告画像リサイズや画像ファイル名メーカーを追加した
• v0.5.0でSEO・OGPメタタグメーカーを追加した
• 読者が必要な場面で自然に使える導線を考えた

HTML・CSS・JavaScriptを学ぶことで、単なるWebページだけでなく、実際に役立つツールも作れるようになります。

公開当初は小さなツールからスタートしましたが、その後も実際のブログ運営やWeb制作で「あると便利」と感じた機能を少しずつ追加してきました。

v0.5.0ではSEO・OGPメタタグメーカーを追加し、現在は文字・コード・デザイン・画像・SEOまで、8つのツールを公開しています。

単にツール数を増やすのではなく、自分自身が実際の作業で使えること、ブラウザですぐ使えること、操作が複雑になりすぎないことを大切にしながら今後も追加・改善していきます。

ぜひ一度使ってみてください。

今回紹介したToshiLab Toolsは、こちらのページから実際に使えます。

学習中に「少し面倒だな」と感じる作業を、自分用の小さなツールとして形にしていくと、HTML・CSS・JavaScriptの理解もかなり深まりやすくなります。

WordPressで作った別の実践例

ToshiLab Toolsは、Next.js・React・TypeScriptを使い、WordPressとは分けて公開しています。

一方、WordPressの管理画面で動く実践例として、PHPを使ったページ診断プラグイン「ToshiLab Page Diagnostics」も制作しました。

同じToshiLab内の制作でも、目的によって技術や公開方法が変わります。仕様を決めてから本番環境での診断まで進めた流れは、次の記事で紹介しています。現在のv1.1.2では、最大1000ページまで診断できるようになっています。

制作過程を読む

WordPressページ診断プラグインを自作した理由と制作過程｜ToshiLab Page Diagnostics

toshi

フルスタックエンジニア

XFacebookInstagramContact

C型肝炎や感染症の闘病を経て現在通院中
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。