InDesign UXP Script (.idjs) Nedir? .jsx ile Farkları ve HTML Arayüz Örnekleri

Kısa cevap: .idjs, Adobe'nin yeni eklenti ve script altyapısı UXP ile yazılan InDesign scriptidir. Klasik .jsx (ExtendScript) scriptlerden farkı, güncel JavaScript (let/const, ok fonksiyonları, async/await, modüller) kullanması ve HTML ile arayüz kurulabilmesidir. InDesign 2023 (sürüm 18.0) ve sonrasında çalışır; eski .jsx scriptleriniz de çalışmaya devam eder.

Not: Sık rastlanan “InDesign 2022 ve sonrası” bilgisi doğru değildir. Adobe, UXP scripting'i InDesign 18.0 ile, yani InDesign 2023 sürümüyle getirdi. Script içinden HTML diyaloğu açmak için ise 18.5 ve üzeri gerekir.

UXP nedir?

UXP (Unified Extensibility Platform), Adobe'nin Photoshop, InDesign, Illustrator gibi programlar için ortak geliştirdiği yeni eklenti altyapısıdır. Yıllardır kullanılan iki eski teknolojinin yerini alması hedefleniyor:

• ExtendScript (.jsx): 1999 tarihli ECMAScript 3 standardına dayanan, InDesign'ı otomatikleştiren script dili.
• CEP panelleri: Chromium tabanlı, ağır ve her programda ayrı çalışan HTML panelleri.

UXP ikisini tek çatıda toplar: modern bir JavaScript motoru, HTML/CSS ile arayüz ve Adobe'nin Spectrum tasarım dili.

.jsx ile .idjs karşılaştırması

Özellik	ExtendScript (.jsx)	UXP script (.idjs)
JavaScript sürümü	ES3 (1999): var, function	Modern JS: let/const, ok fonksiyonları, sınıflar, şablon metinleri, async/await
InDesign sürümü	Hemen hemen tüm sürümler (CS ve CC)	InDesign 2023 (18.0) ve sonrası
InDesign'a erişim	Doğrudan app	const { app } = require("indesign");
Belge nesne modeli	Klasik InDesign DOM	Aynı DOM (paragraphStyles, stories, findGrep…); kodun çoğu küçük değişikliklerle taşınır
Arayüz	ScriptUI (eski görünümlü pencereler)	HTML + CSS + Spectrum bileşenleriyle modal diyalog (18.5+)
Kalıcı panel	Yok (CEP gerekir)	Script ile yok; UXP eklentisi ile var
Dosya işlemleri	File / Folder (eşzamanlı)	require("uxp").storage (çoğu işlem async)
Hata ayıklama	ExtendScript Toolkit / VS Code eklentisi	UXP Developer Tool (UDT) ve Chrome tarzı geliştirici araçları
Çalıştırma	Komut Dosyaları paneli	Aynı panel: .idjs dosyası Scripts Panel klasörüne konur
Geleceği	Çalışmaya devam ediyor, yeni özellik gelmiyor	Adobe'nin yatırım yaptığı altyapı

Aynı script iki dilde

Seçili metin çerçevesindeki paragraflara “Soru-Koku” stilini uygulayan kısa bir örnek. Önce klasik ExtendScript:

// soru-koku.jsx (ExtendScript)
var doc = app.activeDocument;
var stil = doc.paragraphStyles.itemByName("Soru-Koku");
for (var i = 0; i < app.selection.length; i++) {
    app.selection[i].paragraphs.everyItem().appliedParagraphStyle = stil;
}
alert("Tamam");

Aynı iş UXP ile (.idjs):

// soru-koku.idjs (UXP)
const { app } = require("indesign");

const doc = app.activeDocument;
const stil = doc.paragraphStyles.itemByName("Soru-Koku");
for (const nesne of app.selection) {
    nesne.paragraphs.everyItem().appliedParagraphStyle = stil;
}
console.log(`${app.selection.length} çerçeveye stil uygulandı`);

Farklar küçük: require("indesign") satırı, const, for…of döngüsü ve şablon metni. Belge nesne modeli aynı olduğu için mevcut .jsx bilginiz büyük ölçüde geçerlidir.

HTML arayüz örnekleri

UXP'nin en büyük yeniliği arayüzü HTML ile kurabilmektir. Script içinde bir <dialog> öğesi oluşturup uxpShowModal() ile açarsınız; içine düğme, metin kutusu, açılır liste gibi Spectrum bileşenleri koyabilirsiniz. Script'ler yalnızca modal (kapanana kadar InDesign'ı bekleten) diyalog açabilir; açık kalan panel için UXP eklentisi gerekir.

Örnek 1: Soru numarası başlangıcı soran diyalog

Görünüm (InDesign'daki karanlık temaya benzer bir önizleme):

Kodu:

// soru-numaralandir.idjs  (InDesign 18.5+)
const { app } = require("indesign");

async function sor() {
    const dlg = document.createElement("dialog");
    dlg.innerHTML = `
      <form method="dialog" style="width:320px">
        <sp-heading>Soru Numaralandır</sp-heading>
        <sp-divider></sp-divider>
        <sp-label>Başlangıç numarası</sp-label>
        <sp-textfield id="bas" value="1"></sp-textfield>
        <sp-label>Biçim</sp-label>
        <sp-dropdown id="bicim">
          <sp-menu slot="options">
            <sp-menu-item selected value=".">1.  (nokta)</sp-menu-item>
            <sp-menu-item value=")">1)  (parantez)</sp-menu-item>
          </sp-menu>
        </sp-dropdown>
        <sp-checkbox id="secili" checked>Yalnızca seçili çerçevelerde</sp-checkbox>
        <footer>
          <sp-button variant="secondary" id="iptal">Vazgeç</sp-button>
          <sp-button variant="cta" id="tamam">Uygula</sp-button>
        </footer>
      </form>`;
    document.body.appendChild(dlg);
    dlg.querySelector("#iptal").onclick = () => dlg.close("iptal");
    dlg.querySelector("#tamam").onclick = () => dlg.close("tamam");
    const sonuc = await dlg.uxpShowModal({ size: { width: 360, height: 300 } });
    const veri = { bas: Number(dlg.querySelector("#bas").value), secili: dlg.querySelector("#secili").checked };
    dlg.remove();
    return sonuc === "tamam" ? veri : null;
}

async function main() {
    const ayar = await sor();
    if (ayar) {
        // ... ayar.bas numarasından başlayarak soruları numaralandır
    }
}
main();

Örnek 2: Baskı öncesi kontrol raporu

Script belgeyi tarar, sonucu HTML listesi olarak gösterir. ExtendScript'te bunu alert() ile düz metin olarak yapabiliyordunuz; UXP'de renkli, düzenli bir rapor penceresi mümkün:

// kontrol.idjs  (InDesign 18.5+)
const { app } = require("indesign");

async function main() {
const doc = app.activeDocument;
const tasan = doc.stories.everyItem().getElements().filter(s => s.overflows).length;
const satir = (ad, n) =>
  `<div class="s"><span>${ad}</span><b style="color:${n ? "#ff6b6b" : "#2acf8b"}">${n}</b></div>`;

const dlg = document.createElement("dialog");
dlg.innerHTML = `
  <style>.s { display:flex; justify-content:space-between; padding:6px 0 }</style>
  <sp-heading>Baskı Öncesi Kontrol</sp-heading>
  ${satir("Taşan metin", tasan)}
  <footer><sp-button variant="cta" id="k">Kapat</sp-button></footer>`;
document.body.appendChild(dlg);
dlg.querySelector("#k").onclick = () => dlg.close();
await dlg.uxpShowModal();
dlg.remove();
}
main();

Örnek 3: Kalıcı panel (UXP eklentisi)

InDesign açık kaldıkça yan tarafta duran, tek tıkla script çalıştıran bir panel ister misiniz? Bu, .idjs scriptiyle değil bir UXP eklentisiyle yapılır. Eklenti bir klasördür: manifest.json (adı, sürümü, izinleri), bir index.html (panelin arayüzü) ve JavaScript dosyalarından oluşur. UXP Developer Tool ile yüklenip denenir, Creative Cloud üzerinden ya da .ccx paketi olarak dağıtılır.

.idjs ile neler yapılabilir?

• Bugün .jsx ile yaptığınız her şey: stil uygulama, GREP ile toplu düzeltme, tablo biçimlendirme, sayfa ve çerçeve işlemleri, dışa aktarma.
• Kullanıcıdan bilgi alan, düzgün görünümlü diyaloglar: numara başlangıcı, şık biçimi, hangi stilin uygulanacağı gibi seçenekler.
• Okunabilir raporlar: taşan metin, düşük çözünürlüklü görsel, eksik font listesi; renkli ve düzenli.
• Modern JavaScript'in kolaylıkları: dizi metotları (filter, map), şablon metinler, async/await ile dosya okuma-yazma.
• Eklentiye geçiş: scriptinizi büyütüp kalıcı bir panele dönüştürmek isterseniz aynı kod eklentide de çalışır.

Ne zaman .jsx ile kalmalı?

• Scriptiniz InDesign 2023 öncesi sürümlerde de çalışmalıysa (yayınevlerinde eski sürüm hâlâ yaygın).
• Elinizde çalışan, sorunsuz .jsx scriptleri varsa: Adobe ExtendScript'i kaldırmadı, scriptler aynen çalışıyor.
• Ücretli dağıttığınız script .jsxbin ile korunuyorsa: UXP'de bunun birebir karşılığı yok.

.idjs scripti nasıl çalıştırılır?

1. Dosyayı .idjs uzantısıyla kaydedin (uzantı, InDesign'ın UXP motorunu seçmesini sağlar).
2. InDesign'da Pencere › Yardımcı Programlar › Komut Dosyaları panelini açın.
3. “Kullanıcı” klasörüne sağ tıklayıp Finder'da / Gezgin'de Göster deyin ve dosyayı açılan Scripts Panel klasörüne kopyalayın.
4. Paneldeki scripte çift tıklayın. Hata ayıklamak için Adobe'nin ücretsiz UXP Developer Tool'unu kullanabilirsiniz.

.jsx scriptimi .idjs'e nasıl çeviririm?

1. Dosyanın en üstüne const { app } = require("indesign"); ekleyin.
2. #target indesign gibi ExtendScript yönergelerini silin.
3. alert() yerine console.log() ya da bir HTML diyaloğu kullanın.
4. File/Folder ile dosya işlemlerini require("uxp").storage API'sine taşıyın; bu işlemler çoğunlukla await ister.
5. ScriptUI pencerelerini HTML <dialog> ile yeniden yazın.
6. Uzantıyı .idjs yapıp önce bir test belgesinde deneyin.

Hazır, Türkçe açıklamalı .jsx scriptlerle başlamak isterseniz script mağazasındaki ücretsiz scriptlere göz atın; kendi iş akışınıza özel bir UXP scripti ya da paneli için özel script talebi bırakabilirsiniz.

Sık sorulan sorular

.idjs hangi InDesign sürümünde çalışır?

InDesign 2023 (sürüm 18.0) ve sonrasında. Script içinden HTML diyaloğu açmak için 18.5 ve üzeri gerekir.

Eski .jsx scriptlerim çalışmaz mı olacak?

Çalışmaya devam ediyor. Adobe UXP'yi ExtendScript'in yanına ekledi, onu kaldırmadı; iki tür script aynı Komut Dosyaları panelinde birlikte durabilir.

.idjs scriptiyle panel yapılabilir mi?

Hayır. Script yalnızca modal (kapanana kadar bekleten) diyalog açabilir. InDesign açıkken yanda duran panel için manifest dosyası olan bir UXP eklentisi gerekir.

UXP öğrenmek için JavaScript bilmem gerekir mi?

Evet, temel modern JavaScript bilgisi gerekir. InDesign'ın nesne modelini (belge, hikâye, paragraf, stil) .jsx'ten biliyorsanız geçiş kolaydır; asıl yenilik dil özellikleri ve HTML arayüzdür.