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

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

• HTML
• CSS
• JavaScript
• PHP

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

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

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

が気になってきます。

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

例えばJavaScriptを学ぶと、

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

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

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

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

ToshiLab Tools βでは、文章・コード・画像・SEOなど、ブログ運営やWeb制作で発生する小さな作業をブラウザ上で手軽に行えるようにしています。

ツールは必要に応じて追加・改善しており、コード整形ツールのように、公開後に機能を大きく刷新することもあります。

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本体
 |
 `-- tools
      |
      |-- index.html
      |
      |-- _next
      |
      |-- vendor
      |
      |-- text-counter
      |
      |-- html-escape
      |
      |-- code-formatter
      |
      |-- color-palette
      |
      |-- image-compress
      |
      |-- social-ad-image-resizer
      |
      |-- image-name-helper
      |
      `-- seo-ogp

toshilab.jp
 |
 |-- WordPress本体
 |
 `-- tools
      |
      |-- index.html
      |
      |-- _next
      |
      |-- vendor
      |
      |-- 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
 |-- _next
 |-- vendor
 |-- text-counter
 |-- html-escape
 |-- code-formatter
 |-- color-palette
 |-- image-compress
 |-- social-ad-image-resizer
 |-- image-name-helper
 `-- seo-ogp

out
 |-- index.html
 |-- _next
 |-- vendor
 |-- 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・PHPに対応しています。

入力したコードを読みやすく整えるだけでなく、HTML・CSS・JavaScript・JSONではコードの圧縮にも対応しています。

コードを直接貼り付けるほか、対応するファイルを選択したり、入力欄へドラッグ＆ドロップしたりして読み込むこともできます。ファイルの拡張子に応じて、HTML・CSS・JavaScript・JSON・PHPのタブを自動で切り替えます。

入力欄と処理結果には行番号を表示し、整形エラーなどで行番号が示された場合にも、該当箇所を探しやすいようにしています。

HTMLでは、圧縮時のコメントを「残す／削除」から選択できるほか、タグ名を「保持／小文字／大文字」から選べるようにしています。

また、圧縮されて改行の少ないコードも「整形する」を押すことで、改行やインデントを付けて読みやすい形にできます。ただし、圧縮時に削除されたコメントや短縮された変数名などを元の状態へ復元する機能ではありません。

コードの処理はブラウザ内で行い、整形のために入力したコードをToshiLabのサーバーへ送信しない設計にしています。

初心者でも見やすく、コードの構造を理解しやすい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メタタグメーカーを追加した
• v0.6.0でコード整形ツールを全面的に刷新した
• 読者が必要な場面で自然に使える導線を考えた

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

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

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

v0.6.0ではコード整形ツールを全面的に刷新し、HTML・CSS・JavaScript・JSON・PHPの整形に対応しました。HTML・CSS・JavaScript・JSONではコードの圧縮にも対応し、ファイル読み込み、ドラッグ＆ドロップ、入力・処理結果の行番号表示なども追加しています。

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

今後は「Webツール」カテゴリを新設し、ToshiLab Tools βで公開している各ツールについて、使い方や活用場面、制作時に工夫した点などを個別の記事でも紹介していく予定です。

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

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