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

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

• HTML
• CSS
• JavaScript
• PHP

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

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

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

が気になってきます。

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

例えばJavaScriptを学ぶと、

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

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

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

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

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

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

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

公開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 |
|-- components
|-- lib
|-- types
|-- package.json
|-- next.config.js -- tsconfig.json

toshi-tools-next
|-- app
| |-- page.tsx
| |-- text-counter
| |-- html-escape
| |-- code-formatter
| |-- color-palette
| -- image-compress |
|-- components
|-- lib
|-- types
|-- package.json
|-- next.config.js -- tsconfig.json

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

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

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

npm run build

npm run build

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

out
 |-- index.html
 |-- _next
 |-- text-counter
 |-- html-escape
 |-- code-formatter
 |-- color-palette
 `-- image-compress

out
 |-- index.html
 |-- _next
 |-- text-counter
 |-- html-escape
 |-- code-formatter
 |-- color-palette
 `-- image-compress

アップロード時は、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/

です。

ハッシュタグは検索順位を直接上げるものではありません。

しかし、

• SNS投稿
• 記事紹介
• サイト内導線

では役立ちます。

おすすめのハッシュタグ例です。

#WEBプログラミング
#ToshiLabTools
#Nextjs
#React
#TypeScript
#Webツール
#画像圧縮
#コード整形
#カラーパレット

SNSでは3〜5個程度に絞ると自然です。

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

ポイントを整理すると、

• WordPressとは別に /tools/ 配下へ設置した
• Next.js・React・TypeScriptで構築した
• 静的ファイルとして公開した
• 画像はブラウザ内で処理する設計にした
• HEIC変換にも対応した
• コード整形やカラーパレットも実装した
• 読者が必要な場面で使える導線を考えた

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

ToshiLab Tools βは今後さらに改善していく予定です。

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

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

ToshiLab Tools β

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

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

toshi

フルスタックエンジニア

XFacebookInstagramContact

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