BashとSVGがルーチンからどのように保存されたかの物語
このような素晴らしいベクターグラフィックス形式があります-スケーラブルベクターグラフィックス、SVG。 なぜ彼はとても素晴らしいのですか？ さて、例えば：
リストの3番目の項目が特に気に入っています。 特に興味深いのは、SVGドキュメントをHTMLに埋め込むだけでなく、HTMLドキュメント全体または個々のタグをSVGに埋め込むことも可能です。 これにより、FlashやSilverLightでは利用できない非常に興味深いものを作成できます。
以下はSVGにHTMLを埋め込む小さな例です。habrahabr.ruは画像内にスクロール可能およびクリック可能のままです。 残念ながら、すべてのブラウザでこれが同じように機能するわけではありません。Firefoxでは問題はなく、スクロールすると少し遅くなります。
時間が経つにつれて、SVGを積極的に使用するサイトが登場することを本当に願っています。このアプローチにはFlashやSilverLightテクノロジーよりも利点があると思われます。たとえば、HTML用に設計されたCMSを使用できるようになり、さらに、そのようなサイトは問題なく検索エンジンによってインデックスに登録されるようになります。
しかし、今ではポイント番号2についてではありません。ある小さな会社でデザイナーとして働いていたとき、2ロットのディスカウントカードを注文しました。 会社の流通は小規模ですが、カードに番号を付ける必要があるため、タスクは非常に複雑でした。さらに、各カードには番号に対応するバーコードが必要でした。
会社はCorel DRAW x3に座っていました。 自動化ツールがそこにあり、数字でカードを作ることは問題ではありません。 しかし、この番号でバーコードを作成する方法を私たちは誰も知りませんでした（Corel自体の手段を使用した解決策がある可能性はありますが、見つかりませんでした）。
最初の解決策は、ディレクターによって提案されました。
さて、何もしないで、座って断食をしましょう。
しかし、この決定は十分に最適ではないと思われたため、SVG形式を思い出しました。 テキストであるため、bashのスクリプトなど、ソフトウェアで問題なく編集できます。 私は長い間、メインのホームシステムとしてLinuxを使用しており（現時点では、Ubuntuが私のコンピューターで唯一のOSです）、bashスクリプトに精通しています（ところで、彼が行った教育プログラムのgumanoedのおかげです）。
残念ながら、彼らは職場でLinuxをインストールすることを許可されていませんでしたが、sshで「家に帰る」機会がありました。 カードのメイングラフィックスは、Corel DRAWからPNG形式にエクスポートされ、番号とバーコード用に予約された場所に全体画像としてSVGに挿入され、空きスペースが残りました。 もちろん、ベクトル形式のままにすることもできますが、不明な理由で、Inkscapeで.cdrを開くとき（およびCorel DRAWでSVGにエクスポートするとき）、いくつかの要素がクロールしました。 SVGの編集には、クロスプラットフォームの無料のベクターエディターInkscapeが使用されました。
Inkscapeでテンプレートが準備されました。 テンプレートには、4枚のカードの前面と背面、および便宜上のマーキングラインが含まれていました。
参照用に、これらのプロセスについて少し説明します。 カードはプラスチックに印刷され（シートごとに4枚、両面）、プラスチックシートは半分にカットされ、両方の半分はそれ自体で折り畳まれ、ラミネートシートが追加されます。その後、得られたサンドイッチはストーブに送られ、準備ができたら、カードをノックアウトするための特別なマシンに送られます穴あけ原理）。
番号用に予約された場所には、番号00000000001-00000000004が書き込まれ（シートには4枚のカードがあるため、4つの番号があります）、バーコード用に空白の画像が配置されました。 なぜ空ですか？ はい、Inkscapeはバーコードを生成できますが、このプロセスを自動化する方法は不明であるため、バーコードを生成するにはバーコードという別のプログラムを使用する必要がありました。 出力時に、バーコードはPostScriptファイルを発行します。このファイルは、変換ユーティリティ（ImageMagickパッケージから）を使用してPNGに変換され、最終的なSVGドキュメントに挿入されます。
これらすべてから最終的に1000枚の名刺を取得するために、元の形式で提供する小さなスクリプトを作成しました（はい、最適化できるものを知っています）。
スクリプトは非常に単純ですが、ここで何が起こっているのかを説明します。 1,000,000,000,000から1,000,000,000,000のサイクルで（10,000,000の存在はタスクによって説明されます。つまり、これらの数値が必要でした）、ステップ4でソーステンプレートファイルがコピーされます（6行目）。 前述のように、各ファイルには4つのカードが含まれているため、各ファイルに対して4つのバーコードが生成され、番号が4回置き換えられ、ファイル名がバーコードに4回置き換えられます。 必要なサイズのPostScript形式のバーコードが変換プログラムに渡され、余分な白いフィールドが切り捨てられ、結果がPNG形式で別のフォルダーに保存されます（7行目）。 ファイル番号と名前は、sedストリームエディターを使用して置き換えられます。
フォルダー内のスクリプトの結果、250個のファイルを印刷する準備ができました。 これが最初のバッチでした。 2番目のバッチは写真のみが異なり、番号とバーコードの位置は変更されませんでした。したがって、さらに1000の割引を得るには、ファイルを写真に置き換えるだけで十分で、スクリプトを再起動する必要はありませんでした。
「出力」で受信したSVGファイルの例を次に示します。
PS明確にするために...割り当てにより、EAN13形式のバーコードが必要になりました。
- SVGはオープン形式であり、他人の所有物ではありません。
- SVGはXML言語のサブセットであり、したがってテキストです。
- HTMLおよびXHMTLと完全に統合されます。
- SVGはCSSと互換性があり、スタイルシートを使用して要素の表示を制御できます。
- SVGでは、テキストはテキストのままなので、SVGドキュメントは検索エンジンでインデックスを作成でき、ユーザーはテキストを選択してコピーすることもできます。
リストの3番目の項目が特に気に入っています。 特に興味深いのは、SVGドキュメントをHTMLに埋め込むだけでなく、HTMLドキュメント全体または個々のタグをSVGに埋め込むことも可能です。 これにより、FlashやSilverLightでは利用できない非常に興味深いものを作成できます。
以下はSVGにHTMLを埋め込む小さな例です。habrahabr.ruは画像内にスクロール可能およびクリック可能のままです。 残念ながら、すべてのブラウザでこれが同じように機能するわけではありません。Firefoxでは問題はなく、スクロールすると少し遅くなります。
時間が経つにつれて、SVGを積極的に使用するサイトが登場することを本当に願っています。このアプローチにはFlashやSilverLightテクノロジーよりも利点があると思われます。たとえば、HTML用に設計されたCMSを使用できるようになり、さらに、そのようなサイトは問題なく検索エンジンによってインデックスに登録されるようになります。
しかし、今ではポイント番号2についてではありません。ある小さな会社でデザイナーとして働いていたとき、2ロットのディスカウントカードを注文しました。 会社の流通は小規模ですが、カードに番号を付ける必要があるため、タスクは非常に複雑でした。さらに、各カードには番号に対応するバーコードが必要でした。
会社はCorel DRAW x3に座っていました。 自動化ツールがそこにあり、数字でカードを作ることは問題ではありません。 しかし、この番号でバーコードを作成する方法を私たちは誰も知りませんでした（Corel自体の手段を使用した解決策がある可能性はありますが、見つかりませんでした）。
最初の解決策は、ディレクターによって提案されました。
さて、何もしないで、座って断食をしましょう。
しかし、この決定は十分に最適ではないと思われたため、SVG形式を思い出しました。 テキストであるため、bashのスクリプトなど、ソフトウェアで問題なく編集できます。 私は長い間、メインのホームシステムとしてLinuxを使用しており（現時点では、Ubuntuが私のコンピューターで唯一のOSです）、bashスクリプトに精通しています（ところで、彼が行った教育プログラムのgumanoedのおかげです）。
残念ながら、彼らは職場でLinuxをインストールすることを許可されていませんでしたが、sshで「家に帰る」機会がありました。 カードのメイングラフィックスは、Corel DRAWからPNG形式にエクスポートされ、番号とバーコード用に予約された場所に全体画像としてSVGに挿入され、空きスペースが残りました。 もちろん、ベクトル形式のままにすることもできますが、不明な理由で、Inkscapeで.cdrを開くとき（およびCorel DRAWでSVGにエクスポートするとき）、いくつかの要素がクロールしました。 SVGの編集には、クロスプラットフォームの無料のベクターエディターInkscapeが使用されました。
Inkscapeでテンプレートが準備されました。 テンプレートには、4枚のカードの前面と背面、および便宜上のマーキングラインが含まれていました。
参照用に、これらのプロセスについて少し説明します。 カードはプラスチックに印刷され（シートごとに4枚、両面）、プラスチックシートは半分にカットされ、両方の半分はそれ自体で折り畳まれ、ラミネートシートが追加されます。その後、得られたサンドイッチはストーブに送られ、準備ができたら、カードをノックアウトするための特別なマシンに送られます穴あけ原理）。
番号用に予約された場所には、番号00000000001-00000000004が書き込まれ（シートには4枚のカードがあるため、4つの番号があります）、バーコード用に空白の画像が配置されました。 なぜ空ですか？ はい、Inkscapeはバーコードを生成できますが、このプロセスを自動化する方法は不明であるため、バーコードを生成するにはバーコードという別のプログラムを使用する必要がありました。 出力時に、バーコードはPostScriptファイルを発行します。このファイルは、変換ユーティリティ（ImageMagickパッケージから）を使用してPNGに変換され、最終的なSVGドキュメントに挿入されます。
これらすべてから最終的に1000枚の名刺を取得するために、元の形式で提供する小さなスクリプトを作成しました（はい、最適化できるものを知っています）。
for n in `seq 100000000001 4 100000001000`
do
echo $n
nn=$n
fn=new-$n.svg
cp 6.svg $fn
barcode -b $nn -e EAN -u mm -g 31x17+0+0 -m 0 -E | convert -density 600x600 -trim - bcs/$nn-bc.png
sed -i "s/01bc.png/bcs\/$nn-bc.png/g" $fn
sed -i "s/100000000001/$nn/g" $fn
let "nn=$nn+1"
barcode -b $nn -e EAN -u mm -g 31x17+0+0 -m 0 -E | convert -density 600x600 -trim - bcs/$nn-bc.png
sed -i "s/02bc.png/bcs\/$nn-bc.png/g" $fn
sed -i "s/100000000002/$nn/g" $fn
let "nn=$nn+1"
barcode -b $nn -e EAN -u mm -g 31x17+0+0 -m 0 -E | convert -density 600x600 -trim - bcs/$nn-bc.png
sed -i "s/03bc.png/bcs\/$nn-bc.png/g" $fn
sed -i "s/100000000003/$nn/g" $fn
let "nn=$nn+1"
barcode -b $nn -e EAN -u mm -g 31x17+0+0 -m 0 -E | convert -density 600x600 -trim - bcs/$nn-bc.png
sed -i "s/04bc.png/bcs\/$nn-bc.png/g" $fn
sed -i "s/100000000004/$nn/g" $fn
done
スクリプトは非常に単純ですが、ここで何が起こっているのかを説明します。 1,000,000,000,000から1,000,000,000,000のサイクルで（10,000,000の存在はタスクによって説明されます。つまり、これらの数値が必要でした）、ステップ4でソーステンプレートファイルがコピーされます（6行目）。 前述のように、各ファイルには4つのカードが含まれているため、各ファイルに対して4つのバーコードが生成され、番号が4回置き換えられ、ファイル名がバーコードに4回置き換えられます。 必要なサイズのPostScript形式のバーコードが変換プログラムに渡され、余分な白いフィールドが切り捨てられ、結果がPNG形式で別のフォルダーに保存されます（7行目）。 ファイル番号と名前は、sedストリームエディターを使用して置き換えられます。
フォルダー内のスクリプトの結果、250個のファイルを印刷する準備ができました。 これが最初のバッチでした。 2番目のバッチは写真のみが異なり、番号とバーコードの位置は変更されませんでした。したがって、さらに1000の割引を得るには、ファイルを写真に置き換えるだけで十分で、スクリプトを再起動する必要はありませんでした。
「出力」で受信したSVGファイルの例を次に示します。
PS明確にするために...割り当てにより、EAN13形式のバーコードが必要になりました。
All Articles