fein's personal site

個人サイト制作：サイトマップへ戻る

ウェブセーフカラーパレットなど便利ツール

退屈な作業をパソコンにやらせるの、かなり重要だと思いますね。
いろーんなpythonを用意していますが、例えばファイルの規則性あるリネーム等をいちいち手作業していると、個人サイト制作が趣味から業務へ変容します。
やってて楽しくない業務は、可能な限りパソコンにやらせるのが鉄則でしょ。

左側のみ105ピクセル分トリミングする105trimming.py

import os
from PIL import Image

def trim_images(directory):
 for filename in os.listdir(directory):
  if filename.endswith('.jpg') or filename.endswith('.png'):
   filepath = os.path.join(directory, filename)
   with Image.open(filepath) as img:
    width, height = img.size
    left = 105
    top = 0
    right = width
    bottom = height
    cropped_img = img.crop((left, top, right, bottom))
    cropped_img.save(filepath)
   print(f'Trimmed: {filename}')

directory_path = r'C:\Users\アレコレ\Desktop\Photos'  # トリミング対象のディレクトリパス
trim_images(directory_path)

画像のファイル名も重要です。
いちいち手作業で１つ１つコピペなんかしてたら、ゲームする時間なんかなくなっちゃうよ。
途中経過の作業が苦痛になるから、プラットフォーム制作のモチベが出ないんだよね。
そこをプログラミングで解決しています。
ここらへんは学生時代に使っていたものをそのまま流用しています。

画像のファイル名をまとめて確保するfile_list.py

import os

def list_files_in_directory(directory, output_file):
 with open(output_file, 'w') as f:
  for filename in os.listdir(directory):
   f.write(f"{filename}\n")

directory_path = r'C:\Users\アレコレ\Downloads\ライザコラボ'  # 対象のディレクトリパス
output_file = r'C:\Users\アレコレ\Downloads\ライザコラボ\filelist.txt'  # 出力するテキストファイルのフルパス

list_files_in_directory(directory_path, output_file)
print(f"ファイルリストが{output_file}に出力されました")

画像の扱いなんか特に面倒ですよ。
余計な部分のトリミング、Webサイトへのテスト適用、画像のリサイズ…などなど、極力手作業は避けるべきだと思います。
ミスの発生からやり直しの原因になるしね。

画像のサイズをまとめて縮小するimage_aspect_compression_middle50.py

from PIL import Image
import os

def resize_images_in_directory(directory, scale=0.5):
 for filename in os.listdir(directory):
  if filename.endswith('.jpg') or filename.endswith('.png'):
   image_path = os.path.join(directory, filename)
   with Image.open(image_path) as img:
    width, height = img.size
    new_size = (int(width * scale), int(height * scale))
    resized_img = img.resize(new_size, Image.LANCZOS)
    resized_img.save(image_path)
   print(f"リサイズ: {filename}")

directory_path = r'C:\Users\アレコレ\Downloads\ライザコラボ縮小'  # 対象のディレクトリパス

resize_images_in_directory(directory_path)
print("すべての画像がリサイズされました。")

Google Cloudの監視

次のアルバムは、Google App Engineにデプロイする際に、アプリケーションに対して許可された最大バージョン数（210バージョン）を超えている場合に発生します。
解決するためには、既存のバージョンを削除する必要があります。

前のページ 次のページ

次の手順で既存のバージョンを削除する必要があります。

1. Google Cloud Consoleにログイン
2. App Engineを選択し、対象のプロジェクトを選択
3. Versionsタブをクリック
4. 削除したいバージョンを選択し、Deleteボタンをクリック

これでバージョン数が210以下になり、新しいバージョンのデプロイが可能になります。

Google Cloudの課金管理

（静的ウェブサイトをホスティングしている程度であれば、気にする必要なし。無料です。）

web-safe color palette

ウェブセーフカラーパレットはとても重要なツールだと思うのですが、広告付きのサイトが多いです。
以前に作ったやつが出てきたので掲載します。
216色が全て揃っているので、ご自由にお使いください。
マウスオーバーすればカラーコードが表示されますし、そのまま色をクリックしていただければコピーされるようになっています。

Webセーフカラー

Webセーフカラーは216色のカラーパレットで構成されています。
この216色はデバイスやブラウザを問わず同じように表示されるように設計されていて、安心して使えるカラーです。
赤・緑・青（RGB）の各色が6段階（0, 51, 102, 153, 204, 255）で表現される組み合わせから成り立っており、「6 × 6 × 6 = 216色」となります。
例えば、「#FF0000」は純粋な赤色、「#00FF00」は緑、「#0000FF」は青です。
ここから、上記カラーパレットを作っているコードの説明に移ります。

Webセーフカラーを作るcolor.js

const colors = [
 '00', '33', '66', '99', 'CC', 'FF'
];

const palette = document.getElementById('palette');

colors.forEach(r => {
 colors.forEach(g => {
  colors.forEach(b => {
   const color = `#${r}${g}${b}`;
   const colorBox = document.createElement('div');
   colorBox.className = 'color-box';
   colorBox.style.backgroundColor = color;

   const colorCode = document.createElement('div');
   colorCode.className = 'color-code';
   colorCode.textContent = color;

   colorBox.appendChild(colorCode);
   palette.appendChild(colorBox);

   colorBox.addEventListener('click', () => {
    navigator.clipboard.writeText(color).then(() => {
     alert(`Color code copied.: ${color}`);
    });
   });
  });
 });
});

このJavaScriptコードはすべての組み合わせを生成してカラーパレットを作成し、それぞれの色をクリックすると色コードがクリップボードにコピーされる機能を持っています。

1. 色の定義

const colors = ['00', '33', '66', '99', 'CC', 'FF'];

colors配列には、16進数表記で使用する赤、緑、青の値が含まれています。

2. パレットの取得

const palette = document.getElementById('palette');

HTML内のid="palette"を持つ要素を取得し、palette変数に保存します。

3. 色の組み合わせを生成

colors.forEach(r => {
    colors.forEach(g => {
        colors.forEach(b => {
            const color = `#${r}${g}${b}`;

三重のforEachループを使って、赤(r)、緑(g)、青(b)のすべての組み合わせを生成します。

colorには各組み合わせの16進数の色コードが設定されます（例: #FF00CC）。

4. 色のボックスを作成

const colorBox = document.createElement('div');
colorBox.className = 'color-box';
colorBox.style.backgroundColor = color;

div要素を作成し、クラス名color-boxを設定します。

backgroundColorスタイルを生成された色コードで設定します。

5. 色コードの表示

const colorCode = document.createElement('div');
colorCode.className = 'color-code';
colorCode.textContent = color;

div要素を作成し、クラス名color-codeを設定します。

textContentを色コードで設定します。

6. 色ボックスに色コードを追加

colorBox.appendChild(colorCode);
   palette.appendChild(colorBox);

色ボックス内に色コードを追加し、その色ボックスをパレットに追加します。

7. クリックイベントの追加

colorBox.addEventListener('click', () => {
    navigator.clipboard.writeText(color).then(() => {
        alert(`Color code copied.: ${color}`);
    });
});

色ボックスがクリックされたときのイベントリスナーを追加します。
色コードをクリップボードにコピーし、コピー完了のアラートを表示します。

このコードにより、16進数のカラーパレットが動的に生成され、ユーザーが色をクリックするとその色コードがコピーされる機能が実現されます。

Webセーフカラーを作るcolor.css

@charset "UTF-8"; /* ファイルの文字コードをUTF-8に指定 */

/* 色のボックスのスタイル設定 */
.color-box {
    width: 50px; /* 幅を50pxに設定 */
    height: 50px; /* 高さを50pxに設定 */
    display: inline-block; /* インラインブロック要素として表示 */
    margin: 2px; /* 余白を2pxに設定 */
    position: relative; /* 相対位置に設定 */
    cursor: pointer; /* カーソルをポインタに変更 */
}

/* 色コードのスタイル設定 */
.color-code {
    position: absolute; /* 絶対位置に設定 */
    bottom: 0; /* 下端に位置を設定 */
    left: 0; /* 左端に位置を設定 */
    right: 0; /* 右端に位置を設定 */
    background: rgba(255, 255, 255, 0.7); /* 背景色を半透明の白に設定 */
    text-align: center; /* 文字を中央揃えに設定 */
    font-size: 12px; /* フォントサイズを12pxに設定 */
    display: none; /* デフォルトで非表示に設定 */
}

/* 色のボックスにホバーしたときの色コードのスタイル設定 */
.color-box:hover .color-code {
    display: block; /* ホバー時に表示に変更 */
}

昔は頻用されたようですが、現在のデバイスやブラウザは性能も高く、必ずしもWebセーフカラーにこだわる必要はありません。
でも私は基本原則として、このWebセーフカラーを使うようにしています。
Webフォントを使うのと似たような理由なんだけど、互換性を重視しているんですよね。

定義リスト：Description Listのタグ

このタグ、あまり見ないけど便利ですよ？
リストタグみたいに使うのですが、何かしらの用語説明をする時にたまに使います。
このWebサイトではけっこう頻繁に登場しますね。

これは「定義リスト」（Description List）と呼ばれます。
具体的には、<dl>タグが定義リスト全体を囲み、<dt>タグが用語（Definition Term）、<dd>タグがその定義（Definition Description）を表します。
これらを組み合わせて、用語とその説明をリスト化するために使用されるというものです。

「定義リスト」（Description List）タグ

<dl>
  <dt>用語1</dt>
    <dd>定義1の内容</dd>
    <dd>追加の定義1の内容</dd>
  <dt>用語2</dt>
    <dd>定義2の内容</dd>
    <dd>追加の定義2の内容</dd>
</dl>

sectionタグによる論理的な区分け

<section>タグはHTML5で導入された要素で、文書内の内容を論理的に区分するために使われます。
例えば、記事のセクション、ブログのエントリー、製品の詳細部分などを表現するのに適しています。
けっこう曖昧な感じだと思うんですけどね。
内容が論理的に一つのまとまりをなす部分を定義するのに使います。

sectionタグを使った基本的なコード

<section>
 <h2>会社情報</h2>
 <p>私たちは1980年に設立され...</p>
</section>

<section>
 <h2>製品情報</h2>
 <p>最新の製品ラインアップ...</p>
</section>

こうすると文書が論理的に区分されます。

<section>タグは1ページにいくつも使って構いません。
むしろ、ページ内の内容を論理的に区分するために積極的に使用することが推奨されます。
例えば、ニュースサイトでは各記事を<section>タグで囲むと良いでしょう。

必ずしもclass属性を入れる必要はありませんが、スタイルを適用したり、JavaScriptで操作したりするために、classやid属性を追加するのが一般的な使い方です。

sectionタグにクラスを振ったコード

<section class="about-us">
 <h2>会社情報</h2>
 <p>私たちは1980年に設立され...</p>
</section>

このようにクラスを使うことで、スタイルやスクリプトをより細かく制御できます。

コマンドプロンプトを使えればラク

まずはスクリプトに入れる材料を作るため、コマンドプロンプトです。
Pythonのインストールや実行にも使うのですから。

個人で思うようにWebサイトを作りたいと考えた時、少しでも良いので、コマンドプロンプトを扱えるようになると格段にラクですよ？
せっかく趣味で作ってるのに、パソコンの単調作業に忙殺されてたら何の意味もありません。
つまらない作業はぜーんぶパソコンにやらせて、人間は「より楽しめるための判断」だけをすることを目指すのです。

dir /b C:\example > D:\output\filelist.txt

dir /bコマンドは、指定したディレクトリの中のファイル名とフォルダ名だけをシンプルにリストアップするためのコマンドです。
これがまた使用頻度が高いんですよね。
特定のファイル群をまとめてスクリプトに放り込んで一括作業させる状況なんて、いくらでもある。

dir
これは「directory（ディレクトリ）」の略で、ディレクトリの内容を表示するためのコマンドです。
UNIX系のシステムで使われるlsコマンドに相当します。

/
これはオプションを指定するためのスラッシュです。
Windowsのコマンドプロンプトでは、コマンドに追加の機能や動作を指定するために使われます。

b
これは「bare（ベア）」の略で、ファイル名とフォルダ名のみを表示するオプションです。
詳細情報（サイズ、日付など）は表示されません。

C:\example
リストアップしたいディレクトリのパスです。
この場合、C:\exampleディレクトリの内容をリストアップします。

>
これはリダイレクト演算子と呼ばれます。
コマンドの出力を指定したファイルに書き込むために使用されます。
左側のコマンドの出力を右側のファイルにリダイレクト（転送）します。
リダイレクト演算子 > は、コマンドの出力をファイルに保存するための非常に便利な機能です。
例えば、ログファイルを作成したり、コマンドの結果を後で確認したりする際に役立ちます。

D:\output\filelist.txt
出力先のファイルのパスです。
この場合、リストアップされた内容がD:\output\filelist.txtというファイルに保存されます。

つまり、「dir /b C:\example > D:\output\filelist.txt」というコマンドは、「C:\example」ディレクトリの内容をリストアップし、その結果を「D:\output\filelist.txt」というファイルに保存するという意味になります。
そして、その書式はファイル名とフォルダ名のみという意味になるんです。

リストアップなんかいちいち手作業でやってられないでしょ？
コマンドプロンプトで一発完了ですよ。

ディレクトリ構造を把握する

上のリストアップと同じような考え方というかコマンドで、もう少し便利な使い方も紹介します。
この「tree」コマンドはディレクトリ構造を視覚的に分かりやすく表示するのに非常に便利です。
フォルダの階層構造を一目で把握できるので、全体のレイアウトを理解するのに役立ちます。

tree C:\Users\YourName\Documents /F > C:\Users\YourName\Output\directory_structure.txt

/F オプションはファイル名も含めて表示するためのものです。
「tree」コマンドはフォルダの構造を視覚的に示せる。
次の「dir」コマンドはファイルの詳細情報を提供してくれます。
用途に応じて使い分けると良いですね。

dir C:\Users\YourName\Documents > C:\Users\YourName\Output\directory_contents.txt

ここらへんを覚えておけば、相対参照を作る時にごちゃごちゃにならないと思います。
まとめて視覚的に把握できないからやりにくいんですよね。
GUIのエクスプローラーは、いちいちクリックしてフォルダを開かないと中身を把握できません。
ウィンドウをいちいち調整して２つのディレクトリを表示してなんてやってたら、時間かかりすぎてWebサイト制作が趣味から業務になってしまいます。

パッと全体を把握できる。
これって大切ですよ。

コンソールとコマンドプロンプト

プログラムの教科書などを読んでいると、これらの言葉に出くわします。
個人サイト制作やってて → ITに興味が出てきて…こういうルート普通にありますよ。私がそれです。
コンソールとコマンドプロンプトは似たような意味で使われることがありますが、ちょっと違いがあるかな。

• コンソール：一般的には、ユーザーがコンピュータと対話するためのテキストベースのインターフェースを指します。
  例えば、Pythonの print 関数で出力される内容が表示される場所もコンソールと呼ばれます。
• コマンドプロンプト：これは、特にWindowsで使われる用語で、コマンドラインインターフェース（CLI）の一種です。 ユーザーがコマンドを入力して実行するためのウィンドウです。 cmd.exe としても知られていて、Windowsボタン＋Rとしてから cmd と入力するとすぐに開きますよ。

つまり、コンソールは広い意味で使われる用語で、コマンドプロンプトはその一部と考えることができます。
どちらもテキストベースのインターフェースですが、コマンドプロンプトは特にWindowsのCLIを指します。

他には「ターミナル」とか「シェル」とかいう言葉もあってですね…
でも、そこらへんはみんな「コマンドプロンプトっぽいやつ」として考えちゃっても良いと思いますけどね？
私なんか Google Cloud SDK Shell をコマンドプロンプトみたいに使っちゃってます。
普通に互換性あるし、ウィンドウが一つでいいからラク。