# このスキンについて
拡張画像アップローダーのデモ用スキンです。upload.js、upload.phpはてがろぐ本体と同じ階層に入れてください。
アップローダー部分を使わない場合はskin-cover.html内の
<script src="upload.js"></script><!--拡張画像アップローダー-->
を消して使用してください。

skin-simplebox >> ２カラム
skin-simplebox_mono >> １カラム
skin-simplebox_gallery >> ギャラリーモード用

が入っています。

# 拡張画像アップローダーについて

てがろぐで使える画像アップロード用拡張スクリプト(a.k.a てがろぐでD＆Dまたはコピペで画像投稿するやつ)です。
```
・複数画像D＆D
・Ctrl＋Vでクリップボードの画像をアップロード
・サムネイル自動作成(加工の反映を選択可能)
・WEBP対応、WEBP変換機能
・文字入れ機能
・透かし画像入れ機能(位置選択可能)
・リサイズオプション(PHPにて設定)
・トリミング機能
・ファイル命名規則切り替え
```
が主な機能です。

画像は即座にアップロードされます。不要な画像を上げてしまった場合は手動で削除してください。

## 使い方

あらかじめimages内にminiフォルダを作ってください。ないとサムネイルが作成できません。
また、透かし画像を使う場合はPNG画像を用意してください。(サンプル用にwatermark.pngを同梱しています。差し替えてください。)

    <script src="upload.js"></script>

を使用中スキンのskin-cover.html内、[QUICKPOST]以下に張り付けてください。
以下のファイルはてがろぐ本体があるディレクトリにアップロードしてください。
upload.js
upload.php
Mplus1-Regular.ttf (使うフォントファイル)
watermark.png (透かし画像用ファイル/PNGを推奨)

### upload.js

6~10行目
無理やりここにスタイルシートを組み込んでいるので、見た目を変えたい場合はここを弄るか、skin-cover.htmlで使用しているCSSに追記してください。

19行目

    <input type="text" id="customText" value="無断転載禁止/DO NOT REPOST">

 value内のテキストを変更しておくと便利です。
 頻繁に使う項目は checked を付けておくとよいでしょう。

33行目あたり

    <option value="watermark.png">watermark.png</option>

透かし画像を複数使う場合は、以上に続き<option value="watermark2.png">サンプル１</option>のような形で追加してください。

### upload.php

6~17行目 設定項目です。初期値は以下のようになっています。
```
$uploadDir = 'images/'; // 画像アップロードディレクトリ
$miniDir = 'images/mini/';//サムネイルディレクトリ
$thumbnailWidth = 250;//サムネイルのサイズ(px)
$fontFile = 'Mplus1-Regular.ttf'; //使用するフォントファイル
$resizeOption = '1'; // 画像サイズ制限オプション（1 = 有効, 0 = 無効）
$maxDimension = 1000; // 最大サイズ
$defaultWatermark = 'watermark.png';  // 透かし画像（複数使う場合は配列で指定: ['a.png', 'b.png']）
$watermarkScale = 0.2;//透かし画像の倍率(対横幅)
$fileNamingMode   = 1;// ファイル名モード: 1 = 元ファイル名 2 = ランダムな英数字（12文字） 3 = 日時+連番_ユーザーID
$maxFileCount       = 20;               // 一度にアップロードできる最大ファイル数
$maxFileSizeMB      = 20;  // 1ファイルあたりの最大サイズ（MB）
$convertToWebpOption = '0'; // WebP変換オプション（1 = 有効, 0 = 無効）
```

221行目

    $text = mb_convert_encoding($text, 'UTF-8', 'auto'); 
    
環境によっては日本語が文字化けすることがあります。文字化けする場合はSJISなどに変更してください。

・Mplus1-Regular.ttf
文字入れ機能用の初期フォントファイルとして、Mplus1-Regular.ttfが同梱されています。

>M+フォントについて
>https://mplusfonts.github.io/
>SIL Open Font Licenseについて
>https://licenses.opensource.jp/OFL-1.1/OFL-1.1.html

## TIPS：新規投稿/編集画面で使う方法

1. <script src="upload.js"></script>
だけ書いたedit.htmを用意し、使用中のスキンディレクトリにアップロード。
2. 管理画面→システム設定→高度な設定 内の
☐スキンDIRにedit.htmがあれば編集画面で読み込む
にチェックを入れる。
3. 使えます。

**上級者向け**
このスクリプトはclass="tegalogpost"がある場合その下に挿入されるようになっています。
これを応用して、てがろぐCGIソース内の「セーフモード」項目を変更、高度な設定の「編集画面でedit.cssとedit.jsを(あれば)読み込む 」にチェックを入れてupload.jsをedit.jsに変更の上フリースペースでスクリプトを読み込むようにするとすべての投稿画面で使えるようになります(確かめてないので、多分)。ただし不具合が出る可能性があるので自己責任の上ご利用ください。

このスクリプトはchatGPTを用いて作成しました。不具合があるかもしれませんので、もし見つけた方はhttps://note.com/tekito_note/n/nbdf0de9b571b までご連絡ください。

また、このスクリプトの改変、改変後の再配布、自作配布スキンへの組み込みはご自由にどうぞ。
できればhttps://note.com/tekito_note/n/nbdf0de9b571b へのリンクがあるとなにかあった場合にユーザーが助かるかもしれません。

このスクリプトを利用して生じたトラブルについては責任を負いかねますのでご了承ください。
