@jjlmoya/utils-converters 1.25.0 → 1.26.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -2
- package/src/category/i18n/de.ts +1 -1
- package/src/category/i18n/en.ts +1 -1
- package/src/category/i18n/fr.ts +1 -1
- package/src/category/i18n/id.ts +1 -1
- package/src/category/i18n/it.ts +1 -1
- package/src/category/i18n/nl.ts +1 -1
- package/src/category/i18n/pl.ts +1 -1
- package/src/category/i18n/pt.ts +1 -1
- package/src/category/i18n/sv.ts +1 -1
- package/src/tests/bibliography_wellformed_export.test.ts +46 -0
- package/src/tests/category_seo_quality.test.ts +74 -0
- package/src/tests/faq_count.test.ts +1 -1
- package/src/tests/no_h1_in_components.test.ts +1 -1
- package/src/tests/seo_parity.test.ts +2 -2
- package/src/tests/seo_wellformed_export.test.ts +65 -0
- package/src/tests/tool_validation.test.ts +15 -15
- package/src/tool/avifAJpg/i18n/en.ts +164 -164
- package/src/tool/avifAJpg/i18n/es.ts +164 -164
- package/src/tool/avifAJpg/i18n/fr.ts +164 -164
- package/src/tool/avifAJpg/i18n/ja.ts +166 -166
- package/src/tool/avifAJpg/i18n/ko.ts +166 -166
- package/src/tool/avifAJpg/i18n/zh.ts +166 -166
- package/src/tool/avifAJpg/seo.astro +15 -15
- package/src/tool/avifAPng/i18n/en.ts +164 -164
- package/src/tool/avifAPng/i18n/es.ts +164 -164
- package/src/tool/avifAPng/i18n/fr.ts +164 -164
- package/src/tool/avifAPng/i18n/ja.ts +166 -166
- package/src/tool/avifAPng/i18n/ko.ts +166 -166
- package/src/tool/avifAPng/i18n/zh.ts +166 -166
- package/src/tool/avifAPng/seo.astro +15 -15
- package/src/tool/avifAWebp/i18n/en.ts +164 -164
- package/src/tool/avifAWebp/i18n/es.ts +164 -164
- package/src/tool/avifAWebp/i18n/fr.ts +164 -164
- package/src/tool/avifAWebp/i18n/ja.ts +166 -166
- package/src/tool/avifAWebp/i18n/ko.ts +166 -166
- package/src/tool/avifAWebp/i18n/zh.ts +166 -166
- package/src/tool/avifAWebp/seo.astro +15 -15
- package/src/tool/bmpAJpg/i18n/en.ts +164 -164
- package/src/tool/bmpAJpg/i18n/es.ts +164 -164
- package/src/tool/bmpAJpg/i18n/fr.ts +164 -164
- package/src/tool/bmpAJpg/i18n/ja.ts +166 -166
- package/src/tool/bmpAJpg/i18n/ko.ts +166 -166
- package/src/tool/bmpAJpg/i18n/zh.ts +166 -166
- package/src/tool/bmpAJpg/seo.astro +15 -15
- package/src/tool/bmpAPng/i18n/en.ts +164 -164
- package/src/tool/bmpAPng/i18n/es.ts +164 -164
- package/src/tool/bmpAPng/i18n/fr.ts +164 -164
- package/src/tool/bmpAPng/i18n/ja.ts +165 -165
- package/src/tool/bmpAPng/i18n/ko.ts +165 -165
- package/src/tool/bmpAPng/i18n/zh.ts +165 -165
- package/src/tool/bmpAPng/seo.astro +15 -15
- package/src/tool/bmpAWebp/i18n/en.ts +164 -164
- package/src/tool/bmpAWebp/i18n/es.ts +164 -164
- package/src/tool/bmpAWebp/i18n/fr.ts +164 -164
- package/src/tool/bmpAWebp/i18n/ja.ts +166 -166
- package/src/tool/bmpAWebp/i18n/ko.ts +166 -166
- package/src/tool/bmpAWebp/i18n/zh.ts +166 -166
- package/src/tool/bmpAWebp/seo.astro +15 -15
- package/src/tool/gifAJpg/i18n/en.ts +164 -164
- package/src/tool/gifAJpg/i18n/es.ts +164 -164
- package/src/tool/gifAJpg/i18n/fr.ts +164 -164
- package/src/tool/gifAJpg/i18n/ja.ts +166 -166
- package/src/tool/gifAJpg/i18n/ko.ts +166 -166
- package/src/tool/gifAJpg/i18n/zh.ts +166 -166
- package/src/tool/gifAJpg/seo.astro +15 -15
- package/src/tool/gifAPng/i18n/en.ts +164 -164
- package/src/tool/gifAPng/i18n/es.ts +164 -164
- package/src/tool/gifAPng/i18n/fr.ts +164 -164
- package/src/tool/gifAPng/i18n/ja.ts +166 -166
- package/src/tool/gifAPng/i18n/ko.ts +166 -166
- package/src/tool/gifAPng/i18n/zh.ts +166 -166
- package/src/tool/gifAPng/seo.astro +15 -15
- package/src/tool/gifAWebp/i18n/en.ts +164 -164
- package/src/tool/gifAWebp/i18n/es.ts +164 -164
- package/src/tool/gifAWebp/i18n/fr.ts +164 -164
- package/src/tool/gifAWebp/i18n/ja.ts +166 -166
- package/src/tool/gifAWebp/i18n/ko.ts +166 -166
- package/src/tool/gifAWebp/i18n/zh.ts +166 -166
- package/src/tool/gifAWebp/seo.astro +15 -15
- package/src/tool/imagenBase64/i18n/en.ts +154 -154
- package/src/tool/imagenBase64/i18n/es.ts +154 -154
- package/src/tool/imagenBase64/i18n/fr.ts +154 -154
- package/src/tool/imagenBase64/seo.astro +15 -15
- package/src/tool/jpgAIco/seo.astro +15 -15
- package/src/tool/jpgAPng/i18n/en.ts +164 -164
- package/src/tool/jpgAPng/i18n/es.ts +164 -164
- package/src/tool/jpgAPng/i18n/fr.ts +164 -164
- package/src/tool/jpgAPng/i18n/ja.ts +166 -166
- package/src/tool/jpgAPng/i18n/ko.ts +166 -166
- package/src/tool/jpgAPng/i18n/zh.ts +166 -166
- package/src/tool/jpgAPng/seo.astro +15 -15
- package/src/tool/jpgAWebp/i18n/en.ts +164 -164
- package/src/tool/jpgAWebp/i18n/es.ts +164 -164
- package/src/tool/jpgAWebp/i18n/fr.ts +164 -164
- package/src/tool/jpgAWebp/seo.astro +15 -15
- package/src/tool/pngAIco/seo.astro +15 -15
- package/src/tool/pngAJpg/i18n/de.ts +21 -21
- package/src/tool/pngAJpg/i18n/es.ts +177 -177
- package/src/tool/pngAJpg/i18n/fr.ts +137 -137
- package/src/tool/pngAJpg/i18n/id.ts +89 -89
- package/src/tool/pngAJpg/i18n/it.ts +89 -89
- package/src/tool/pngAJpg/i18n/ko.ts +177 -177
- package/src/tool/pngAJpg/i18n/nl.ts +20 -20
- package/src/tool/pngAJpg/i18n/pl.ts +89 -89
- package/src/tool/pngAJpg/i18n/pt.ts +89 -89
- package/src/tool/pngAJpg/i18n/ru.ts +177 -177
- package/src/tool/pngAJpg/i18n/sv.ts +89 -89
- package/src/tool/pngAJpg/i18n/tr.ts +89 -89
- package/src/tool/pngAJpg/seo.astro +15 -15
- package/src/tool/pngAWebp/i18n/en.ts +164 -164
- package/src/tool/pngAWebp/i18n/es.ts +164 -164
- package/src/tool/pngAWebp/i18n/fr.ts +164 -164
- package/src/tool/pngAWebp/seo.astro +15 -15
- package/src/tool/svgAJpg/i18n/fr.ts +164 -164
- package/src/tool/svgAJpg/seo.astro +15 -15
- package/src/tool/svgAPng/i18n/fr.ts +164 -164
- package/src/tool/svgAPng/seo.astro +15 -15
- package/src/tool/webpAIco/seo.astro +15 -15
- package/src/tool/webpAJpg/seo.astro +15 -15
- package/src/tool/webpAPng/bibliography.ts +13 -13
- package/src/tool/webpAPng/i18n/de.ts +166 -166
- package/src/tool/webpAPng/i18n/es.ts +171 -171
- package/src/tool/webpAPng/i18n/fr.ts +166 -166
- package/src/tool/webpAPng/i18n/id.ts +166 -166
- package/src/tool/webpAPng/i18n/it.ts +166 -166
- package/src/tool/webpAPng/i18n/nl.ts +166 -166
- package/src/tool/webpAPng/i18n/pl.ts +166 -166
- package/src/tool/webpAPng/i18n/pt.ts +166 -166
- package/src/tool/webpAPng/i18n/ru.ts +166 -166
- package/src/tool/webpAPng/i18n/sv.ts +166 -166
- package/src/tool/webpAPng/i18n/tr.ts +167 -167
- package/src/tool/webpAPng/seo.astro +15 -15
|
@@ -1,168 +1,168 @@
|
|
|
1
1
|
import { bibliography } from '../bibliography';
|
|
2
|
-
import type { ImageConverterUI } from '../../../shared/ImageConverter.astro';
|
|
3
|
-
import { generateSchemas } from '../../../shared/logic/schemas';
|
|
4
|
-
import type { GifAPngLocaleContent } from '../index';
|
|
5
|
-
|
|
6
|
-
const slug = 'gif-to-png-converter';
|
|
7
|
-
const title = 'GIFをPNGにオンラインで変換';
|
|
8
|
-
const description =
|
|
9
|
-
'GIFファイルから最初のフレームを抽出し、透明度を維持したままPNGに変換します。サーバー不要。ブラウザ内ローカル処理。無料。';
|
|
10
|
-
|
|
11
|
-
const ui: ImageConverterUI = {
|
|
12
|
-
dragText: 'GIFファイルをドラッグ...',
|
|
13
|
-
convertText: '即座にPNGに変換します',
|
|
14
|
-
selectFiles: 'ファイルを選択',
|
|
15
|
-
processedFiles: '処理済みファイル',
|
|
16
|
-
downloadAll: 'すべてダウンロード (.zip)',
|
|
2
|
+
import type { ImageConverterUI } from '../../../shared/ImageConverter.astro';
|
|
3
|
+
import { generateSchemas } from '../../../shared/logic/schemas';
|
|
4
|
+
import type { GifAPngLocaleContent } from '../index';
|
|
5
|
+
|
|
6
|
+
const slug = 'gif-to-png-converter';
|
|
7
|
+
const title = 'GIFをPNGにオンラインで変換';
|
|
8
|
+
const description =
|
|
9
|
+
'GIFファイルから最初のフレームを抽出し、透明度を維持したままPNGに変換します。サーバー不要。ブラウザ内ローカル処理。無料。';
|
|
10
|
+
|
|
11
|
+
const ui: ImageConverterUI = {
|
|
12
|
+
dragText: 'GIFファイルをドラッグ...',
|
|
13
|
+
convertText: '即座にPNGに変換します',
|
|
14
|
+
selectFiles: 'ファイルを選択',
|
|
15
|
+
processedFiles: '処理済みファイル',
|
|
16
|
+
downloadAll: 'すべてダウンロード (.zip)',
|
|
17
17
|
pending: '待機中',
|
|
18
|
-
bibliographyTitle: '参考文献',
|
|
19
|
-
faqTitle: 'よくある質問',
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
const faq: GifAPngLocaleContent['faq'] = [
|
|
23
|
-
{
|
|
24
|
-
question: 'なぜGIFのようなアニメーション形式をPNGのような静的な形式に変換するのですか?',
|
|
25
|
-
answer:
|
|
26
|
-
'多くのSNSやアバターでは、動く画像がサポートされていない場合があります。複雑なGIFから最初の1フレームを高品質なPNGとして抽出することで、制限を回避し、不要なファイルサイズを削減できます。',
|
|
27
|
-
},
|
|
28
|
-
{
|
|
29
|
-
question: '元のGIFの透明度は、変換後のPNGでも維持されますか?',
|
|
30
|
-
answer:
|
|
31
|
-
'はい、JPGとは異なり、PNG形式はアルファチャンネルを保持します。元のGIFに透明な背景があった場合、PNGでも境界線を鮮明に保ったまま透明度が維持されます。',
|
|
32
|
-
},
|
|
33
|
-
{
|
|
34
|
-
question: '処理後、画像は一定期間サーバーに保存されますか?',
|
|
35
|
-
answer:
|
|
36
|
-
'サーバーがお客様のGIFを保持することはありません。Web Canvas APIにより、すべての抽出処理はローカルで完了します。お客様のPCのプロセッサが、ネットワーク通信なしで安全にファイルをデコードします。',
|
|
37
|
-
},
|
|
38
|
-
];
|
|
39
|
-
|
|
40
|
-
const howTo: GifAPngLocaleContent['howTo'] = [
|
|
41
|
-
{
|
|
42
|
-
name: 'アニメーションを準備',
|
|
43
|
-
text: '変換したいGIFファイルを処理ボックスへドラッグ&ドロップしてください。',
|
|
44
|
-
},
|
|
45
|
-
{
|
|
46
|
-
name: '完璧な抽出写真',
|
|
47
|
-
text: 'システムが動きの起点を正確に捉え、数ミリ秒で非の打ち所のないコピーを作成します。',
|
|
48
|
-
},
|
|
49
|
-
{
|
|
50
|
-
name: '静止画を保存',
|
|
51
|
-
text: '静的なPNG形式に変換されたGIFアバターを、ZIP形式でまとめて保存してください。',
|
|
52
|
-
},
|
|
53
|
-
];
|
|
54
|
-
|
|
55
|
-
const seo: GifAPngLocaleContent['seo'] = [
|
|
56
|
-
{
|
|
57
|
-
type: 'title',
|
|
58
|
-
text: 'GIFからPNGへのコンバーター:GIFのカラーと透明度の限界を克服',
|
|
59
|
-
level: 2,
|
|
60
|
-
},
|
|
61
|
-
{
|
|
62
|
-
type: 'paragraph',
|
|
63
|
-
html: 'GIFは、モニターがわずか256色しか表示できなかった時代に設計されました。数十年経った今でも、その制限は大きな弱点となっています。PNGは、ロゴ、アイコン、インターフェースのグラフィック、そしてどんな背景色の上でも完璧に見える必要がある透明な背景を持つ画像など、品質と透明度が重要視されるすべてのケースでGIFに代わるものとして誕生しました。',
|
|
64
|
-
},
|
|
65
|
-
{
|
|
66
|
-
type: 'title',
|
|
67
|
-
text: 'GIF vs PNG:1600万色の革命',
|
|
68
|
-
level: 3,
|
|
69
|
-
},
|
|
70
|
-
{
|
|
71
|
-
type: 'paragraph',
|
|
72
|
-
html: 'GIFとPNGの最も決定的な違いは色数だけではありません。GIFはバイナリ透過(ピクセルが不透明か完全に透明かのどちらか)のみをサポートしており、グラデーションには対応していません。一方、PNGはピクセルごとに256段階の不透明度を設定できるフルアルファチャンネルをサポートしています。これにより、PNGのロゴの境界線は完璧に滑らかになりますが、GIFのロゴの境界線はカラー背景の上で特徴的な「ギザギザ」が目立ってしまいます。',
|
|
73
|
-
},
|
|
74
|
-
{
|
|
75
|
-
type: 'paragraph',
|
|
76
|
-
html: '優れた透明度に加え、PNGはGIFの256色の制限を取り払いました。スクリーンショット、グラデーションのあるイラスト、影のあるロゴなど、すべてがPNGでは大幅にきれいに見えます。また、可逆圧縮であるため、JPG変換で発生するようなノイズ(アーティファクト)がなく、各ピクセルが元の値を正確に保持します。',
|
|
77
|
-
},
|
|
78
|
-
{
|
|
79
|
-
type: 'title',
|
|
80
|
-
text: 'アーキテクチャの比較:ローカル vs クラウド',
|
|
81
|
-
level: 3,
|
|
82
|
-
},
|
|
83
|
-
{
|
|
84
|
-
type: 'comparative',
|
|
85
|
-
items: [
|
|
86
|
-
{
|
|
87
|
-
title: 'クラウドコンバーター',
|
|
88
|
-
description: 'リモートサーバーで画像を処理するツール。',
|
|
89
|
-
icon: 'mdi:cloud-upload',
|
|
90
|
-
pointIcon: 'mdi:close-circle-outline',
|
|
91
|
-
points: [
|
|
92
|
-
'あなたのロゴやアイコンがインターネット経由で送信される',
|
|
93
|
-
'ネットワーク遅延による待ち時間が発生する',
|
|
94
|
-
'サイズやファイル数に制限がある',
|
|
95
|
-
'第三者のキャッシュに画像が残る可能性がある',
|
|
96
|
-
],
|
|
97
|
-
},
|
|
98
|
-
{
|
|
99
|
-
title: '当サイトのローカルアーキテクチャ',
|
|
100
|
-
description: 'Vanilla JSテクノロジーを使用してハードウェア上で直接処理。',
|
|
101
|
-
icon: 'mdi:laptop-mac',
|
|
102
|
-
highlight: true,
|
|
103
|
-
points: [
|
|
104
|
-
'GIFがデバイスから離れることはありません',
|
|
105
|
-
'ネットワークなしで即座に変換が完了',
|
|
106
|
-
'ファイル数制限やサイズ制限なし',
|
|
107
|
-
'絶対的なプライバシー:外部への送信なし',
|
|
108
|
-
],
|
|
109
|
-
},
|
|
110
|
-
],
|
|
111
|
-
},
|
|
112
|
-
{
|
|
113
|
-
type: 'title',
|
|
114
|
-
text: 'ブラウザ内でのGIFからPNGへの変換の仕組み',
|
|
115
|
-
level: 3,
|
|
116
|
-
},
|
|
117
|
-
{
|
|
118
|
-
type: 'paragraph',
|
|
119
|
-
html: '変換にはブラウザのCanvas APIを使用します。GIFはメモリ内でネイティブのImage要素としてデコードされます。HTML5キャンバスへのレンダリングにより、ブラウザのグラフィックエンジンが元の透明度情報を維持したまま最初のフレームをキャプチャします。',
|
|
120
|
-
},
|
|
121
|
-
{
|
|
122
|
-
type: 'paragraph',
|
|
123
|
-
html: 'JPG変換とは異なり、PNGでは背景を白く塗りつぶす必要はありません。元のGIFのアルファチャンネルは、エクスポートされたPNGに直接引き継がれます。キャンバスの<code>toDataURL(\'image/png\')</code>メソッドは、ネットワーク通信を行わずにお客様のコンピュータのRAM内に直接PNGバイトストリームを生成し、ファイルが即座にダウンロードされます。',
|
|
124
|
-
},
|
|
125
|
-
{
|
|
126
|
-
type: 'tip',
|
|
127
|
-
title: 'GIFのバイナリ透過 vs PNGのアルファチャンネル',
|
|
128
|
-
html: 'GIFは、不透明か透明かの2値しかサポートしていません。PNGに変換する際、GIFの半透明なピクセルはブラウザが解釈した通りに保持されます。もしGIFにギザギザの境界線がある場合、PNGでもそれは維持されますが、PNGであれば後から画像エディタで境界線を滑らかに補正することが可能です。これは元のGIFでは不可能なことです。',
|
|
129
|
-
},
|
|
130
|
-
{
|
|
131
|
-
type: 'title',
|
|
132
|
-
text: '変換後のPNGの使用例と互換性',
|
|
133
|
-
level: 3,
|
|
134
|
-
},
|
|
135
|
-
{
|
|
136
|
-
type: 'list',
|
|
137
|
-
icon: 'mdi:check-circle',
|
|
138
|
-
items: [
|
|
139
|
-
'あらゆる背景色の上で使用できるロゴやアイコン。',
|
|
140
|
-
'Discord, Telegram, Slack, ゲームプラットフォーム用のアバター。',
|
|
141
|
-
'ウェブやモバイルアプリのインターフェース用画像。',
|
|
142
|
-
'透明な背景を持つパーソナライズされたステッカーや絵文字。',
|
|
143
|
-
'技術文書用のスクリーンショットやUI要素。',
|
|
144
|
-
],
|
|
145
|
-
},
|
|
146
|
-
{
|
|
147
|
-
type: 'title',
|
|
148
|
-
text: '結論:PNGは、GIFがずっと「なりたかった」姿です',
|
|
149
|
-
level: 3,
|
|
150
|
-
},
|
|
151
|
-
{
|
|
152
|
-
type: 'paragraph',
|
|
153
|
-
html: 'GIFからPNGに変換することは、単に形式を変えるだけではありません。画像を、GIFが決して到達できなかった現代の標準へとアップデートすることです。より多くの色、より優れた透明度、より軽いサイズ。当ツールは、外部へのデータ送信なしで、お客様のブラウザ内で数ミリ秒でこの変換を完了させます。',
|
|
154
|
-
},
|
|
155
|
-
];
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
export const content: GifAPngLocaleContent = {
|
|
159
|
-
slug,
|
|
160
|
-
title,
|
|
161
|
-
description,
|
|
162
|
-
ui,
|
|
163
|
-
seo,
|
|
164
|
-
faq,
|
|
165
|
-
bibliography,
|
|
166
|
-
howTo,
|
|
167
|
-
schemas: generateSchemas({ title, description, inLanguage: 'ja', faq, howTo }),
|
|
168
|
-
};
|
|
18
|
+
bibliographyTitle: '参考文献',
|
|
19
|
+
faqTitle: 'よくある質問',
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
const faq: GifAPngLocaleContent['faq'] = [
|
|
23
|
+
{
|
|
24
|
+
question: 'なぜGIFのようなアニメーション形式をPNGのような静的な形式に変換するのですか?',
|
|
25
|
+
answer:
|
|
26
|
+
'多くのSNSやアバターでは、動く画像がサポートされていない場合があります。複雑なGIFから最初の1フレームを高品質なPNGとして抽出することで、制限を回避し、不要なファイルサイズを削減できます。',
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
question: '元のGIFの透明度は、変換後のPNGでも維持されますか?',
|
|
30
|
+
answer:
|
|
31
|
+
'はい、JPGとは異なり、PNG形式はアルファチャンネルを保持します。元のGIFに透明な背景があった場合、PNGでも境界線を鮮明に保ったまま透明度が維持されます。',
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
question: '処理後、画像は一定期間サーバーに保存されますか?',
|
|
35
|
+
answer:
|
|
36
|
+
'サーバーがお客様のGIFを保持することはありません。Web Canvas APIにより、すべての抽出処理はローカルで完了します。お客様のPCのプロセッサが、ネットワーク通信なしで安全にファイルをデコードします。',
|
|
37
|
+
},
|
|
38
|
+
];
|
|
39
|
+
|
|
40
|
+
const howTo: GifAPngLocaleContent['howTo'] = [
|
|
41
|
+
{
|
|
42
|
+
name: 'アニメーションを準備',
|
|
43
|
+
text: '変換したいGIFファイルを処理ボックスへドラッグ&ドロップしてください。',
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
name: '完璧な抽出写真',
|
|
47
|
+
text: 'システムが動きの起点を正確に捉え、数ミリ秒で非の打ち所のないコピーを作成します。',
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
name: '静止画を保存',
|
|
51
|
+
text: '静的なPNG形式に変換されたGIFアバターを、ZIP形式でまとめて保存してください。',
|
|
52
|
+
},
|
|
53
|
+
];
|
|
54
|
+
|
|
55
|
+
const seo: GifAPngLocaleContent['seo'] = [
|
|
56
|
+
{
|
|
57
|
+
type: 'title',
|
|
58
|
+
text: 'GIFからPNGへのコンバーター:GIFのカラーと透明度の限界を克服',
|
|
59
|
+
level: 2,
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
type: 'paragraph',
|
|
63
|
+
html: 'GIFは、モニターがわずか256色しか表示できなかった時代に設計されました。数十年経った今でも、その制限は大きな弱点となっています。PNGは、ロゴ、アイコン、インターフェースのグラフィック、そしてどんな背景色の上でも完璧に見える必要がある透明な背景を持つ画像など、品質と透明度が重要視されるすべてのケースでGIFに代わるものとして誕生しました。',
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
type: 'title',
|
|
67
|
+
text: 'GIF vs PNG:1600万色の革命',
|
|
68
|
+
level: 3,
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
type: 'paragraph',
|
|
72
|
+
html: 'GIFとPNGの最も決定的な違いは色数だけではありません。GIFはバイナリ透過(ピクセルが不透明か完全に透明かのどちらか)のみをサポートしており、グラデーションには対応していません。一方、PNGはピクセルごとに256段階の不透明度を設定できるフルアルファチャンネルをサポートしています。これにより、PNGのロゴの境界線は完璧に滑らかになりますが、GIFのロゴの境界線はカラー背景の上で特徴的な「ギザギザ」が目立ってしまいます。',
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
type: 'paragraph',
|
|
76
|
+
html: '優れた透明度に加え、PNGはGIFの256色の制限を取り払いました。スクリーンショット、グラデーションのあるイラスト、影のあるロゴなど、すべてがPNGでは大幅にきれいに見えます。また、可逆圧縮であるため、JPG変換で発生するようなノイズ(アーティファクト)がなく、各ピクセルが元の値を正確に保持します。',
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
type: 'title',
|
|
80
|
+
text: 'アーキテクチャの比較:ローカル vs クラウド',
|
|
81
|
+
level: 3,
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
type: 'comparative',
|
|
85
|
+
items: [
|
|
86
|
+
{
|
|
87
|
+
title: 'クラウドコンバーター',
|
|
88
|
+
description: 'リモートサーバーで画像を処理するツール。',
|
|
89
|
+
icon: 'mdi:cloud-upload',
|
|
90
|
+
pointIcon: 'mdi:close-circle-outline',
|
|
91
|
+
points: [
|
|
92
|
+
'あなたのロゴやアイコンがインターネット経由で送信される',
|
|
93
|
+
'ネットワーク遅延による待ち時間が発生する',
|
|
94
|
+
'サイズやファイル数に制限がある',
|
|
95
|
+
'第三者のキャッシュに画像が残る可能性がある',
|
|
96
|
+
],
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
title: '当サイトのローカルアーキテクチャ',
|
|
100
|
+
description: 'Vanilla JSテクノロジーを使用してハードウェア上で直接処理。',
|
|
101
|
+
icon: 'mdi:laptop-mac',
|
|
102
|
+
highlight: true,
|
|
103
|
+
points: [
|
|
104
|
+
'GIFがデバイスから離れることはありません',
|
|
105
|
+
'ネットワークなしで即座に変換が完了',
|
|
106
|
+
'ファイル数制限やサイズ制限なし',
|
|
107
|
+
'絶対的なプライバシー:外部への送信なし',
|
|
108
|
+
],
|
|
109
|
+
},
|
|
110
|
+
],
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
type: 'title',
|
|
114
|
+
text: 'ブラウザ内でのGIFからPNGへの変換の仕組み',
|
|
115
|
+
level: 3,
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
type: 'paragraph',
|
|
119
|
+
html: '変換にはブラウザのCanvas APIを使用します。GIFはメモリ内でネイティブのImage要素としてデコードされます。HTML5キャンバスへのレンダリングにより、ブラウザのグラフィックエンジンが元の透明度情報を維持したまま最初のフレームをキャプチャします。',
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
type: 'paragraph',
|
|
123
|
+
html: 'JPG変換とは異なり、PNGでは背景を白く塗りつぶす必要はありません。元のGIFのアルファチャンネルは、エクスポートされたPNGに直接引き継がれます。キャンバスの<code>toDataURL(\'image/png\')</code>メソッドは、ネットワーク通信を行わずにお客様のコンピュータのRAM内に直接PNGバイトストリームを生成し、ファイルが即座にダウンロードされます。',
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
type: 'tip',
|
|
127
|
+
title: 'GIFのバイナリ透過 vs PNGのアルファチャンネル',
|
|
128
|
+
html: 'GIFは、不透明か透明かの2値しかサポートしていません。PNGに変換する際、GIFの半透明なピクセルはブラウザが解釈した通りに保持されます。もしGIFにギザギザの境界線がある場合、PNGでもそれは維持されますが、PNGであれば後から画像エディタで境界線を滑らかに補正することが可能です。これは元のGIFでは不可能なことです。',
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
type: 'title',
|
|
132
|
+
text: '変換後のPNGの使用例と互換性',
|
|
133
|
+
level: 3,
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
type: 'list',
|
|
137
|
+
icon: 'mdi:check-circle',
|
|
138
|
+
items: [
|
|
139
|
+
'あらゆる背景色の上で使用できるロゴやアイコン。',
|
|
140
|
+
'Discord, Telegram, Slack, ゲームプラットフォーム用のアバター。',
|
|
141
|
+
'ウェブやモバイルアプリのインターフェース用画像。',
|
|
142
|
+
'透明な背景を持つパーソナライズされたステッカーや絵文字。',
|
|
143
|
+
'技術文書用のスクリーンショットやUI要素。',
|
|
144
|
+
],
|
|
145
|
+
},
|
|
146
|
+
{
|
|
147
|
+
type: 'title',
|
|
148
|
+
text: '結論:PNGは、GIFがずっと「なりたかった」姿です',
|
|
149
|
+
level: 3,
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
type: 'paragraph',
|
|
153
|
+
html: 'GIFからPNGに変換することは、単に形式を変えるだけではありません。画像を、GIFが決して到達できなかった現代の標準へとアップデートすることです。より多くの色、より優れた透明度、より軽いサイズ。当ツールは、外部へのデータ送信なしで、お客様のブラウザ内で数ミリ秒でこの変換を完了させます。',
|
|
154
|
+
},
|
|
155
|
+
];
|
|
156
|
+
|
|
157
|
+
|
|
158
|
+
export const content: GifAPngLocaleContent = {
|
|
159
|
+
slug,
|
|
160
|
+
title,
|
|
161
|
+
description,
|
|
162
|
+
ui,
|
|
163
|
+
seo,
|
|
164
|
+
faq,
|
|
165
|
+
bibliography,
|
|
166
|
+
howTo,
|
|
167
|
+
schemas: generateSchemas({ title, description, inLanguage: 'ja', faq, howTo }),
|
|
168
|
+
};
|