No.3, No.2, No.1［3件］
てがろぐでD＆Dまたはコピペで画像投稿するやつV2
(旧版→noteへ)
てがろぐで使える画像アップロード用拡張スクリプトです。
PHPとJavascriptでできています。
主な機能
- 複数画像D＆D
- Ctrl＋Vでクリップボードの画像をアップロード
- サムネイル自動作成(加工の反映を選択可能)
- WEBP対応
- 文字入れ機能
- 透かし画像入れ機能(位置選択可能)
- リサイズオプション(PHPにて設定)
画像は投稿ボタンを押した際にアップロードされます。
旧版からの変更点
画像ファイル名がアップロード時と同じものに。(同ファイル名がすでにある場合は連番)
クリップボード画像はランダム名に。
WEBP変換機能を削除。
配布ファイル
http://tekitote.s324.xrea.com/download/t...
使い方
はじめに、透かし画像を使う場合はPNG画像を用意してください。(サンプル用にwatermark.pngを同梱しています。差し替えてください。)
<script src="upload.js"></script>
を使用中スキンのskin-cover.html内、[QUICKPOST]以下に張り付けてください。
以下のファイルはてがろぐ本体があるディレクトリにアップロードしてください。
upload.js
upload.php
Mplus1-Regular.ttf (使うフォントファイル)
watermark.png (透かし画像用ファイル/PNGを推奨)
初回アップロード時にimagesディレクトリ、miniディレクトリがない場合は自動で作成されます。
※導入時の注意点
このスクリプトはclass="tegalogpost"がある場合その下に挿入されるようになっており、投稿ボタン押下時に(記事投稿可能かに関係なく)画像送信する仕組みになっています。そのため未ログイン時にも投稿欄を表示する設定だと、閲覧者が誰でも画像アップロードできてしまう点にご注意ください。(XSS対策はしていますが、未知の脆弱性があるかもしれませんので)投稿欄はログイン者限定にすることを強く推奨します。
画像ファイル名はアップロード時の名前と同じとなり、すでに同じファイル名がある場合は連番になります。その場合記事上で正常に表示できないので、手動で表記を変更してください。また、日本語が含まれていると弾くようになっています。Ctrl＋Vでのアップロードはランダムな数列がファイル名になります。
あまり大きな画像だとサーバーのスペックによってはタイムアウトする可能性があるのであらかじめ記事をバックアップしておくなど、ご注意ください。
設定する項目について
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~13行目 設定項目です。初期値は以下のようになっています。
$uploadDir = 'images/'; // 画像アップロードディレクトリ
$miniDir = 'images/mini/';//サムネイルディレクトリ
$thumbnailWidth = 250;//サムネイルのサイズ
$fontFile = 'Mplus1-Regular.ttf'; //使用するフォントファイル
$resizeOption = '1'; // 画像サイズ制限オプション（1 = 有効, 0 = 無効）
$maxDimension = 1000; // 最大サイズ
$defaultWatermark = 'watermark.png'; //デフォルトの透かし画像
$watermarkScale = 0.2;//透かし画像の倍率(対横幅)
345行目
$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/O...
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に変更の上フリースペースでスクリプトを読み込むようにするとすべての投稿画面で使えるようになります(確かめてないので、多分)。ただし不具合が出る可能性があるので自己責任の上ご利用ください。
畳む
#スクリプト #てがろぐ
このサイトについて
てきとーのーとによるちょっとした個人サイト向けスクリプトの配布、デモ展示所です。
現在以下のスクリプトを配布しています。
●てがろぐで使える画像アップロード用拡張スクリプトV2 (旧版)
●リアクションボタンをサイトにつけるやつ
このサイトで配布しているスクリプトは商用・非商用にかかわらず使用できます。また改変・改変後の再配布、自作のテンプレートに組み込んでの配布もご自由にどうぞ。
このスクリプトを利用して生じたトラブルについては責任を負いかねますのでご了承ください。
質問・要望・不具合報告はWAVEBOXよりお願いします。
https://wavebox.me/wave/77kkcwhk8uzskow7...
拡張画像アップローダー付きてがろぐスキン
配布ファイル
http://tekitote.s324.xrea.com/download/s...
過去配布ファイル
→noteへ(旧版同梱)
説明
上の記事のスクリプトを組み込んだデモ用スキンです。
skin-simplebox >> ２カラム(レスポンシブ対応)
skin-simplebox_mono >> １カラム
skin-simplebox_gallery >> ギャラリーモード用
が入っています。
組み込みスクリプトについてはこちらを参照してください。
サンプル
※それぞれのスキンにリアクションボタンのデモを組み込んでいます。実際の配布ファイルにはリアクションボタンは付いていません。
→スキンデモ(このサイトのデフォルトスキンです)
→スキンデモ
→スキンデモ
#スキン #てがろぐ