Mediawikiにnextcloud jpg表示のソースを表示

mediawikiとnextcloudをさくらインターネットのレンタルサーバで運営しています。nextcloudの写真、主にjpeg,pngなどをリンクを張って表示をする方法を下記にメモします

== nextcloudで画像表示==
=== nextcloudでの作業===
* 共有リンクで直URLを生成

https://media.hoge.net/index.php/s/****

=== mediawikiでの記事===
* /download#.jpgを追加する

https://media.hoge.net/index.php/s/****/download#.jpg

これでmediawikiでnextcloud保存の画像を表示できる

== 簡単にサイズ変更をしたい==
１．mediawiki設定の追記
~/www/wiki/

LocalSettings.phpで下記を追加する
$wgRawHtml = true;

Template:NextcloudImages
<htmlxml><img src="{{{1}}}#.jpg" width="{{{2|300}}}"></htmlxml>


「URLの最後に #.jpg を付け加える」方法で表示が確認できたとのこと、良かったです。
MediaWikiの標準機能（$wgAllowExternalImages = true）で外部画像を直接表示する場合、画像URLをそのまま記述する形式のため、MediaWiki記法（例: [[File:Image.jpg|thumb|200px]]）のようなサイズ指定オプションが直接使えません。
表示サイズを調整するには、以下の2つのいずれかの方法で行うのが一般的です。
1. HTMLタグを使用して表示する（推奨）
MediaWikiの設定でHTMLの使用が許可されている場合、<img>タグを使ってサイズを自由に指定できます。
記述例:
html
<img src="https://example.com/index.php/s/AbCdEfG12345/download#.jpg" width="300">
コードは注意してご使用ください。

※ width="300" のように数値を指定することで、横幅を300ピクセルに固定できます（高さは自動調整されます）。
前提条件:
LocalSettings.php で $wgRawHtml = true; に設定されている必要があります。
注：この設定はセキュリティリスク（スクリプト注入など）を伴うため、信頼できるユーザーのみが編集する環境で推奨されます。
2. CSS（divタグ）で囲んで制限する
HTMLタグの使用を許可したくない場合は、CSSをインラインで記述して枠のサイズを制限する方法があります。
記述例:
html
<div style="width:300px;">
https://example.com/index.php/s/AbCdEfG12345/download#.jpg
</div>
コードは注意してご使用ください。

※ただし、この方法は画像の元サイズが非常に大きい場合、枠からはみ出したり、ブラウザの表示負荷が高くなったりする可能性があります。
3. Nextcloud側のプレビュー機能（縮小版URL）を利用する（高度な方法）
Nextcloudには、サーバー側で画像をリサイズして返すプレビュー機能があります。URLを以下のように書き換えることで、読み込む画像そのものを小さくできます。
変換後のURL形式:
https://example.com/index.php/core/preview?fileId=ファイルID&x=幅&y=高さ
※この方法は、ファイルの「fileId」を調べる必要があるため、大量の画像を扱う場合は手間がかかります。
まずは、最も確実で簡単な 「1. HTMLタグ（img）による指定」 が環境で許可されているか、試してみるのがスムーズです。
もし「HTMLタグが使えない設定になっている」または「大量に画像があるためもっと効率的に管理したい」といったご要望があれば、MediaWikiの「Template（テンプレート）」機能を作成して、URLを入れるだけでサイズ調整されるようにする設定手順をご案内しますがいかがでしょうか？



MediaWikiの「Template（テンプレート）」機能の使い方を教えてください
MediaWikiの「テンプレート」機能を使うことで、長いNextcloudのURLを入力する手間を省き、簡単にサイズ指定ができるようになります。 
2026年現在の最新のMediaWiki仕様に基づき、「Nextcloudの画像URLとサイズ（横幅）を渡すと、自動的に表示するテンプレート」を作成する手順を解説します。
手順1：テンプレートの作成
MediaWikiで新しいページ Template:Nextcloud画像 を作成し、内容に以下のコードを貼り付けて保存してください。
HTMLを許可している場合 ($wgRawHtml = true)
html
<htmlxml><img src="{{{1}}}#.jpg" width="{{{2|300}}}"></htmlxml>
コードは注意してご使用ください。

※{{{1}}} は1番目の引数（URL）、{{{2|300}}} は2番目の引数（サイズ、指定なしで300px）を意味します。
HTMLを許可していない場合（標準設定）
標準設定では外部画像のリサイズはCSSで行う必要があります。
text
<div style="width:{{{2|300}}}px;">{{{1}}}#.jpg</div>
コードは注意してご使用ください。

手順2：記事での使い方
作成したテンプレートは、記事の中で以下のように呼び出せます。
基本の表示（横幅300px）
{{Nextcloud画像|https://example.com/index.php/s/AbCdEfG12345/download}}
サイズを指定して表示（例：横幅500px）
{{Nextcloud画像|https://example.com/index.php/s/AbCdEfG12345/download|500}}
運用のヒント
名前の工夫: {{NcImg|URL|サイズ}} のように、短いテンプレート名で作成するとさらに効率的です。
注意点: $wgRawHtml = true を設定している場合、悪意のあるスクリプトが埋め込まれるリスクがあるため、編集権限を制限した環境での利用が推奨されます。 
このテンプレート方式なら、将来的にNextcloudのURL形式が変わった際も、テンプレート1箇所を直すだけで全記事の画像を修正できるため、管理が非常に楽になります。
テンプレートの作成において、「画像に枠をつけたい」や「キャプション（説明文）も同時に入れたい」といった追加のご要望はありますか？

## 纏め

### Template
Widgets:NextcloudImg
<img src="<!--{$url|escape:'quotes'}-->/download#.jpg" width="<!--{$width|default:'300'|escape:'quotes'}-->" style="max-width: 100%; height: auto;">

### 記事側
{{#widget:NextcloudImg
|url=https://media.hoge.net/index.php/s/****|width=200}}


---
mediawikiとnextcloudをさくらインターネットのレンタルサーバで運営しています。nextcloudの写真、主にjpeg,pngなどをリンクを張って表示をする方法を教えてください。downloadなどではなmediawiki記事をブラウザで開いたときに表示できるようにしたいのです。正確に最新の信頼できる資料（それぞれの公式や信頼できる技術情報）を元に手順を教えてくださいお願いします
Nextcloudの画像をMediaWikiで直接表示（埋め込み）させるには、通常の共有用URLではなく、ダイレクトリンク（直リンク）を生成して使用する必要があります。
2026年現在の最新仕様に基づいた、さくらインターネットのレンタルサーバ環境での手順を解説します。
1. Nextcloud側での画像URL取得手順
Nextcloudの標準機能では、共有リンクは専用のプレビュー画面に遷移するため、そのままではMediaWikiで画像として認識されません。以下の手順で直リンクを作成します。
共有リンクの作成: 対象の画像（JPEG/PNG等）の「共有」アイコンをクリックし、「共有リンク」を作成します。

直リンクへの変換: 発行されたURLの末尾に /download を追加します。

例: https://example.com/index.php/s/AbCdEfG12345
変換後: https://example.com/index.php/s/AbCdEfG12345/download
このURLは、ブラウザで直接画像データのみを返す「直リンク」として機能します。 

3. MediaWiki側での設定と記述
MediaWikiのデフォルト設定では外部画像の表示が制限されているため、設定変更が必要です。
LocalSettings.php の編集:
さくらインターネットのコントロールパネルやFTPで LocalSettings.php を開き、以下の行を追加または修正します。
php
$wgAllowExternalImages = true;
コードは注意してご使用ください。

これにより、外部URLを指定して画像を直接表示できるようになります。
記事への埋め込み:
MediaWikiの編集画面で、先ほど変換したURLをそのまま記述します。

記述例: https://example.com/index.php/s/AbCdEfG12345/download
これで、記事を保存した際に画像としてブラウザ上に表示されます。
注意事項
パスワード保護: 共有リンクにパスワードをかけると、MediaWiki側で画像を表示できなくなります。「パスワード保護」はオフにする必要があります。
ファイル名と拡張子: NextcloudのURLには拡張子（.jpg等）が含まれません。一部の古いブラウザや特定のMediaWiki拡張機能では、URLの末尾が画像拡張子でないと認識されない場合があります。その際は、URLの最後に #.jpg を付け加える（例: .../download#.jpg）ことで解決することがあります。 


Nextcloud

すべて表示
「URLの最後に #.jpg を付け加える」これで表示されるようになりました。ありがとうございます。サイズを小さくするのはどうすればよいですか
---
[[Category:mediawiki]]