🧘🏿 👂🏿 🤦🏼 Adobe Photoshopのスクリプトを使用して、Androidアプリケーションのリソースを自動的に生成します 👩🏿‍🎨 🌁 🌂

まえがき

ご存知のように、Android向けに開発する場合は、考えられるすべてのピクセル密度のリソースを作成するためにレイアウトする必要があります。当初、そのような密度はldpi 、 mdpi 、およびhdpiの 3つだけでした 。ただし、進歩は止まりません。画面のピクセル密度は非常に高い値に成長し、Googleは文字「x」を静かにちらっと見てxxxhdpiに到達し 、最大 6つのメイン画面構成になりました。これは、ルールに従ってプレイする場合、アイコンごとに半ダースのリソースを節約する必要があることを意味します。しかし、一部のリソースにはいくつかの異なる状態があるため、それだけではありません。アクションバーのボタンには2つの状態があり、それがどこにあっても、通常のボタンにはもっと多くの状態があります。

いくつかの解決策があります。アーティストを拷問し、多くの密度のサポートに唾を吐き、システムが何らかの方法でそれらをスケーリングすることを望むか、プログラマーが最もやりたいことを活用することができます：自動化。このビジネスを実行できるさまざまなツールがあります。最も高度なのは、おそらくAndroid Asset Studioです。これは非常に賢明なツールですが、もちろん、アイコンは標準的な場合にのみ描画されます。独自のスタイルでボタンを作成する必要がある場合、彼はここでは役に立ちません。そしてここで、悪名高いツールであるAdobe Photoshopのスクリプトサポートが役立ちます。全体のプロセスを簡素化するために、謙虚な使用人自身が同様のケースのためにいくつかのツールを作成し、それらを読者と共有しています。それらの使用方法と動作については、さらに説明します。すべてのソースはBitBucketにありますが、ここでは主なポイントを説明し、初心者には明らかではないかもしれないPhotoshopスクリプトを操作するいくつかのトリックを示します。念のため、Photoshop CS6用に作成したことに注意してください。

スクリプトと動作原理を使用する

スクリプトについて説明する前に、Photoshopのスクリプトを記述する一般的なプロセスを説明する前任者の記事へのリンクを提供する必要があります。要するに、このための標準ツールはExtendScript Toolkitであり、グラフィックエディター自体と一緒に配布されます。悲しいことに、エディターが本当に非常に愚かであるという上記の記事の著者に絶対に同意することに注意しなければなりません。しかし、それは何ですか、そうです。もちろん、スクリプトを直接記述することはできますが、スクリプトを記述することはできませんが、デバッグのためにスクリプトを作成する必要があります。 F1ボタンとPhotoshopに組み込まれている機能に関するドキュメントがあります。これはエディター自体と同じくらい不便ですが、少なくともその主な機能を実行します。スクリプト自体はさまざまな言語で記述でき、私自身はJavaScriptを使用しました。

Adobe ExtendScriptツールキット

すべての密度のアイコンを作成する

ヒツジに戻ると、リソースを操作するためのすべての記述スクリプトは2つの部分に分けることができます：一部は必要なアクションの実行を直接開始します（すべて「Make」という単語で始まります）が、他は機能を備えたライブラリの役割を果たします。最も重要で普遍的なツールはMakeForAllDensitiesです 。これは、名前が示すとおりのことを行います。1つのドキュメントからすべての密度のリソースを作成します。ドキュメントにはいくつかの要件があります。

ドキュメントは、ピクセル密度mdpiで作成する必要があります。これはベースとして使用され、目的のサイズにスケーリングされます。
文書は、スクリプトがファイル名を正しく読み取るように（およびプレフィックス ".9"を使用してnine-patchであるかどうかも判断するように）既にどこかに保存されている必要があります。 Androidプロジェクトのルートフォルダーのサブフォルダーに保存することをお勧めします。そうすると、スクリプトはresフォルダー自体を見つけます。
追加要件：これが9パッチの場合、線は別のレイヤー、最も下に描画する必要があります。
もちろん、画像はラスターではなくベクトルでなければなりません。そうでなければ、AndroidではなくPhotoshopを使用してスケーリングすることにはほとんど意味がありません。例外が1つあります。これは9パッチラインには適用されず、ラスターにすることもできます。

これらの要件がすべて満たされている場合、残りはすでに技術的な問題です。Photoshopでドキュメントを開き、ダブルクリックしてスクリプトを開始します。開始後、スクリプトはリソース（res）を含むフォルダーを指定するように要求します。ドキュメントがプロジェクトのサブフォルダーに保存されている場合は、保存先を見つけてから、残りの処理を行います。

スクリプト自体は非常にシンプルに見えます。

//@include ResizingAndSaving.jsx #target photoshop var outputFolder = detectFolder(); if (outputFolder) saveForAllDensities(outputFolder, 0, "");

奇妙な最初の2行を除いた典型的なJavaScript。最初の奇妙な行は、実際のコメントではなく通常のコメントに似ていますが、必要な機能を備えた別のファイルのインポートです。標準のJavaScriptではこのようなチップは回転しないため、これが一番のトリックです。 2番目の奇妙な行は、簡単に推測できるように、スクリプトをPhotoshopで実行することを示唆しています。残りの行が行うこと、ResizingAndSaving.jsxが開かれます。

ここには特別なものはないので、 detectFolder

は持ちません。関数はresフォルダーがドキュメントフォルダーのサブフォルダーにあるかどうかを確認し、見つかった場合はそれを返し、見つからない場合はユーザーに尋ねます。そして、スクリプトのより重要な部分が始まります。

 function saveForAllDensities(outputFolder, version, postfix, ninePatchLines) { if (!ninePatchLines) ninePatchLines = computeNinePatchLines(); var versionStr = version ? "-v" + version : ""; saveInFolder(outputFolder, "drawable-mdpi" + versionStr, 100, postfix, ninePatchLines); saveInFolder(outputFolder, "drawable-hdpi" + versionStr, 150, postfix, ninePatchLines); saveInFolder(outputFolder, "drawable-xhdpi" + versionStr, 200, postfix, ninePatchLines); saveInFolder(outputFolder, "drawable-xxhdpi" + versionStr, 300, postfix, ninePatchLines); saveInFolder(outputFolder, "drawable-xxxhdpi" + versionStr, 400, postfix, ninePatchLines); }

誰かがそれを持っている場合、私は事前に質問に答えます： ldpiはここにありません。Google はそれ専用のリソースを作成することを推奨していないからです。前述のように、ファイルは9パッチである場合があります。これは、ファイルを編集するという意味では、エッジに黒い線のある別のレイヤーがあることを意味します。また、これらの線を単純に取得して拡大縮小することはできません。ピクセルを完全に黒に塗りつぶすか、まったく塗りつぶす必要がなく、隣接するピクセルに登ることはできません。さらに、線がしっかりしていない可能性があることに留意する必要があります。これがcomputeNinePatchLines

関数が作用する場所です。

 function computeNinePatchLines() { var docName = getDocName(false); if (!isNinePatch(docName)) return null; var ninePatchLines = null; var doc = app.activeDocument; var areaCheckingFunctions = [ function(pos) {return areaIsEmpty(doc, pos, 0);}, function(pos) {return areaIsEmpty(doc, 0, pos);}, function(pos) {return areaIsEmpty(doc, pos, doc.height - 1);}, function(pos) {return areaIsEmpty(doc, doc.width - 1, pos);} ]; maxPositions = [doc.width, doc.height, doc.width, doc.height]; ninePatchLines = new Array(); for (var pos = 0; pos < areaCheckingFunctions.length; pos++) { ninePatchLines.push(findLines(maxPositions[pos], areaCheckingFunctions[pos])); } return ninePatchLines; }

この関数の主なポイントは、画像の各辺に沿って歩き、黒い線がどこに隠れているかを確認することです。それらが見つかった後、あなたは既にトリックなしでそれらの長さを所望の係数で乗算し、期待どおりに所望の領域にペイントすることができます。 areaIsEmpty

関数を調べると面白いでしょう。

 function areaIsEmpty(doc, x, y) { var state = getState(); if (doc.colorSamplers.length == 0) { var colorSampler = doc.colorSamplers.add([x,y]); } else { var colorSampler = doc.colorSamplers[0]; colorSampler.move([x, y]); } var areaEmpty; try { areaEmpty = colorSampler.color.rgb.hexValue !== "000000"; } catch (e) { areaEmpty = true; } restoreState(state); return areaEmpty; }

この関数は、ピクセルが黒く塗りつぶされているかどうかをチェックするように設計されています。ここでのみ、事実、Photoshopでは、判明したように、標準APIを使用して、特定のピクセルが空であるかどうかをチェックすることはできません。したがって、カラーサンプラーを配置し、色をチェックするときに例外をスローするかどうかを確認する必要があります。発行された場合、ピクセルは空です。そうでない場合は、その色を見ることができます。これはトリックナンバー2です。ここではareaIsEmpty

しないfindLines

関数は、画面の4つの境界線の1つに沿ったすべてのピクセルに、 areaIsEmpty

を1行で適用し、その位置を書き込みます。

次に、リソースをスケーリングして、フォルダーに保存できます。

 function saveInFolder(outputFolder, subFolder, scaling, postfix, ninePatchLines) { var opts = new ExportOptionsSaveForWeb(); opts.format = SaveDocumentType.PNG; opts.PNG8 = false; opts.transparency = true; opts.quality = 100; var state = getState(); if (ninePatchLines) { var doc = app.activeDocument; doc.resizeCanvas(doc.width - 2, doc.height - 2); resize(scaling, true); doc.resizeCanvas(doc.width + 2, doc.height + 2); drawLines(doc, scaling / 100, ninePatchLines); } else { resize(scaling, true); } activeDocument.exportDocument(createFile(outputFolder, subFolder, postfix, ".png", false), ExportType.SAVEFORWEB, opts); restoreState(state); }

ここにあるものはすべて、原則として明白ですが、写真のサイズを直接変更する方法は次のとおりです。別の説明が必要です。 Document.resizeImage

関数があり、それを呼び出すだけでいいように思えますか？しかし、それからは何も起こりません。レイヤースタイルは同時にスケーリングされません。アクションを記録して、プログラムで再生できます。このオプションは機能しますが、これらのアクションのライブラリをスクリプトに添付する必要があり、起動する前にインポートする必要があるため、どういうわけかあまり便利ではありません。

もう1つのオプションは、すでに言及した前任者が説明したツール、つまりScriptListener.8liを使用することです。このツールを使用すると、Photoshopで実行されるすべてのアクションをスクリプトに書き込むことができます。これらのアクションは、標準APIではサポートされていません。出口のスクリプトは、もちろんかなり不明瞭ですが、完全にタスクを実行します。いくらかの努力をすれば、どのパラメーターが何に責任があるのかを理解し、記録された特定のアクションの機能を作成できます。このようにして、理解できないが実行可能な機能が現れました。

 function resize(size, relative) { var idImgS = charIDToTypeID( "ImgS" ); var desc = new ActionDescriptor(); var idWdth = charIDToTypeID( "Wdth" ); var idPxl = charIDToTypeID( relative ? "#Prc" : "#Pxl" ); desc.putUnitDouble( idWdth, idPxl, size ); var idscaleStyles = stringIDToTypeID( "scaleStyles" ); desc.putBoolean( idscaleStyles, true ); var idCnsP = charIDToTypeID( "CnsP" ); desc.putBoolean( idCnsP, true ); var idIntr = charIDToTypeID( "Intr" ); var idIntp = charIDToTypeID( "Intp" ); var idbicubicSharper = stringIDToTypeID( "bicubicAutomatic" ); desc.putEnumerated( idIntr, idIntp, idbicubicSharper ); executeAction( idImgS, desc, DialogModes.NO ); }

これはトリックナンバー3でした。必要な画像サイズが取得されると、スクリプトは必要に応じて9パッチの線を描画し、新しく作成されたリソースが必要なフォルダーに送信されます。

アクションバーアイコンの作成

MakeForAllDensitiesに加えて、アクションバーのアイコンを作成するMakeActionBarIconsスクリプトがさらに4つあります。黒と白のテーマの場合、切断されている場合と切断されていない場合です。それらはMakeForAllDensitiesと同じ方法で使用されますが、ドキュメントには1つのレイヤーのみが含まれるようになりました。このレイヤーでは、アイコンの形状を観察することのみが重要であり、スクリプトはスタイル自体を適用します。

現在の難点は、Googleがアイコンの状態に応じて特定のスタイル要件を持っていることです。アイコンが1つの状態にのみ存在する場合、すべては単純ですが、アイコンをオフにする必要がある場合は、プログラムでレイヤーの外観を変更する方法を理解する必要があります。アクションバーのアイコンについては、レイヤーの透明度とその色を変更する方法を知る必要があります。前者には問題はありませんが、後者に関しては、標準のAPIでもスラックが発生します。これは、保存しているScriptListener.8liを再度有効にする必要があることを意味します。その適用の結果、ベクターレイヤーの色の変更に役立つ関数setLayerColor

がStylesファイルに登場しました。関数の本文にあるその意味不明なものは、おそらく省略します。

原則として、上記以外のアクションバーアイコンには何も必要ありません。しかし、既にStylesファイルを見ていた人は、ScriptListener.8liを使用して、レイヤー効果を操作できるより多くの関数が取得されていることに気付きました。それらは私自身のアイコン用に作成されたもので、作成用のスクリプトはリポジトリに追加しません。このため、もちろん、既存の機能は誰かにとって十分ではない可能性があり、独自の機能を作成する必要があります。繰り返しますが、アクションを記録するか、スタイルを作成してプログラムで適用できます。しかし、これは不便です。したがって、ScriptListener.8liの利点を既に習得しているため、関数を再度使用することをお勧めします。また、別の障害があります。特定のレイヤー効果を追加して関数に配置するスクリプトを作成すると、それが適用されると、既にインストールされている効果が消えます。 トリック4はここで役立ちます。 ScriptListener.8liがエフェクトの各アプリケーションに与えるゴミの始まりに注意を払うと、どこにでも次のような行が表示されます。

 var idsetd = charIDToTypeID( "setd" ); var desc = new ActionDescriptor(); var idnull = charIDToTypeID( "null" ); var ref = new ActionReference(); var idPrpr = charIDToTypeID( "Prpr" ); var idLefx = charIDToTypeID( "Lefx" ); ref.putProperty( idPrpr, idLefx ); var idLyr = charIDToTypeID( "Lyr " ); var idOrdn = charIDToTypeID( "Ordn" ); var idTrgt = charIDToTypeID( "Trgt" ); ref.putEnumerated( idLyr, idOrdn, idTrgt ); desc.putReference( idnull, ref ); var idT = charIDToTypeID( "T " ); var desc2 = new ActionDescriptor(); var idScl = charIDToTypeID( "Scl " ); var idPrc = charIDToTypeID( "#Prc" ); desc2.putUnitDouble( idScl, idPrc, 100.000000 );

そして、スクリプトの最後で、すべてがこのコードで終わります：

 var idLefx = charIDToTypeID( "Lefx" ); desc.putObject( idT, idLefx, desc2 ); executeAction( idsetd, desc, DialogModes.NO );

上記のコードの最初の部分の最後の4行は、 desc2

を作成し、スタイルのスケールを設定し、レイヤースタイル自体を作成します。それ以外はすべてスタイルの使用です。彼らが何をしているのかがわかったので、肉から静脈を分離し、効果を直接適用するコードの部分を分離することができます。重複するセクションは、スタイルで個別の関数にスタイル設定され、同様の方法で適用されます。

 var style = newStyle(); //   addColorOverlay(style, 0xFF, 0xFF, 0xFF, 100); //  addStroke(style, 0x00, 0x00, 0x00, 3); //    applyStyle(style); //, ,

これですべてのツールが手に入りましたが、それを使用する必要があります。これらの奇跡的な手段はすべて、州に応じて異なるスタイルをリソースに適用するために考案されたことを思い出してください。 makeIcons

関数は、まさにそれを行います。アクションバーのアイコンにさまざまなスタイルを適用し、結果を保存します。ここに彼女のメインピースを持ってくる。

 if (makeStateful) { var selectorData = [ { state_enabled: false, postfix: "disabled" }, { postfix: "normal" } ]; makeSelectorXml(selectorData, outputFolder, "drawable"); } var styleFunctions = [function(style) {applyActionBarItemStyle(whiteTheme, false)}]; var postfixes = ["normal"]; if (makeStateful) { styleFunctions.unshift(function(style) {applyActionBarItemStyle(whiteTheme, true)}); postfixes.unshift("disabled"); } saveStyledDrawables(outputFolder, styleFunctions, postfixes);

関数の最初の部分は、リソースのセレクターを作成します。セレクターについては、最近公開されたAndroidのボタンシークレットの記事で説明されています。この場合、アクションバーに対して2つの状態が作成されます。ボタンがオフのときと、通常の状態のときです。したがって、状態を記述するオブジェクトの配列がmakeSelectorXml

関数に渡されます。オブジェクトには、 postfix

置フィールドと、必要に応じて「state_」で始まる1つ以上のフィールドがあります。その後、 makeSelectorXml

はこの奇跡からXMLセレクターファイルを作成し、このファイルをmakeSelectorXml

フォルダーに送信します。

関数の2番目の部分は2つの配列を作成します。1つは特定の状態にスタイルを適用する関数を含み、2番目の配列は状態に対応する接尾辞を含みます。スタイルを適用するための各関数は、 style

引数を自由に使用できます。これはnewStyle

からクロールするオブジェクトと同じものです。これらの関数でapplyStyle

を呼び出す必要はありませんsaveStyledDrawables

関数がsaveStyledDrawables

を処理しsaveStyledDrawables

。関数makeSelectorXml

とsaveStyledDrawables

は指定しないでください。最も普通の退屈なJavaScriptがあるからです。

おわりに

この方法では、多数のアイコンを手動で描画することはできませんが、既製のソリューションを使用して、1つの画像からすべてを作成します。もちろん、Android Asset Studioを使用できますが、スクリプトを使用することには利点があります。まず、独自のボタン用のスクリプトを作成できます。そのスタイルは、外国の楽器では使用できません（実際、このすべてを書くことにしました）。第二に、ファイルをサイトにアップロードし、設定を思いついた後、受信したファイルをダウンロードしてフォルダーに移動することは、スクリプトをダブルクリックしてすべてがすぐにわかるほど単純ではありません。さらに、Android Asset StudioはPSDを直接操作したくない（少なくとも執筆時点では）、9パッチを通常のアイコンと区別せず、その中のファイルを大量に処理することはできません。

この記事が、Androidでアプリケーションの作成に従事している人と、Photoshopのスクリプトの作成をマスターしたい人の両方に役立つことを願っています。

便利なリンク

実際、 BitBucketプロジェクトページは、記事の目的です。
Androidの図像 -公式のアイコン要件。誰もがすでにそれらを読んでいると思いますが、誰かが突然それを読まなかった場合は、早急に修正することをお勧めします。
PhotoshopとExtendScript Toolkitを使用して画像を処理します。Photoshopのスクリプト作成の基本です。記事の最後に役立つリンクもあります。
Android 9パッチ-ストレッチAndroid -9パッチとは何か、なぜ必要なのか
Androidのボタンの秘密。パート1：レイアウトの基本 -状態が異なるボタンやその他のAndroidインターフェイス要素の作成の複雑さを誰かが知らない場合は、この記事が必要です。

Adobe Photoshopのスクリプトを使用して、Androidアプリケーションのリソースを自動的に生成します