タグ

JSXに関するkns_1234のブックマーク (16)

  • HTML to JSX

    An online playground to convert HTML to JSX

    HTML to JSX
  • Illustrator スクリプト入門 01(はじめの一歩編)|宮澤聖二 | onthehead

    グラフィックツールとして有名な Adobe 製品。PhotoshopやIllustrator、InDesignなど、多種多様なアプリケーションあります。 これらの Adobe 製品に、メーカーや有志が配布されているプラグインやエクステンションというものをインストールすることで、ユーザーが自由に機能を追加することができます。 ただ、こういう機能が欲しいなあ。とか、ここをこう処理したいんだよなあ。と思っても、プラグインやエクステンションを自分でゼロから作るのは難しいですよね。 でも大丈夫。プラグインやエクステンション以外にも、Adobe 製品には「スクリプト」という便利な機能があります。 スクリプトというのは、JavaScriptAppleScript、VB Script という言語を使って、アプリケーションに操作を命令・実行する機能です。まあ、何言ってるかわかんないですよね。 というこ

    Illustrator スクリプト入門 01(はじめの一歩編)|宮澤聖二 | onthehead
  • 選択範囲をシェイプに変換するスクリプト

    選択範囲をシェイプに変換するスクリプトを作成しました。 更新:2017.7.10 シェイプ変換後に属性パネルで幅、高さ、角丸を変更できるように改良しました。 「単位:px」でご利用ください。 スクリプトの利用手順について �(1) ダウンロードしたzipファイルを解凍して「Dearps_選択範囲をシェイプに変換.jsx」をPhotoshopのスクリプトフォルダに移動します。 Windows: C:¥Program Files¥Adobe¥Adobe Photoshop□¥プリセット¥スクリプト MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts (2)Photoshopを再起動してファイルを開き、選択ツールで選択範囲を作成します。 (3) [ファイル] / [スクリプト]から「Dearps_選択範囲をシェイプに変換.jsx」を選択する

    選択範囲をシェイプに変換するスクリプト
  • 【PhotoshopJSX】差分を一括でレイヤーカンプ化する作成スクリプト sabun_comp.jsx | mochimina.com

    ゲーム系案件等で差分を管理する際にいちいち設定するのが面倒なので作りました。 レイヤーカンプとは Photoshopにはレイヤーカンプという機能があり、レイヤーの表示状態等を保存しておくことができます。 これにより、いちいちレイヤークリックで表示非表示を切り替えなくても差分を管理できます。 書き出しもカンプ毎に出来るので便利。 詳しくは以下Adobeのサイトなどを… レイヤーカンプとは、レイヤーパネルの各レイヤーの状態を記録したスナップショットのことです。レイヤーカンプには、次の 3 種類のオプションが記録されます。 レイヤーパネル内のレイヤーの表示と非表示 ドキュメント内のレイヤーの位置 レイヤースタイルや描画モードの適用によるレイヤーの外観 Photoshop レイヤーカンプ 納品時に「差分はカンプ設定してください」という案件もあったり。 でもこのレイヤーカンプ、Photoshopの機

    【PhotoshopJSX】差分を一括でレイヤーカンプ化する作成スクリプト sabun_comp.jsx | mochimina.com
  • パスの方向線を可視化するIllustrator用スクリプトを作りました - saucer

    少し前に、「Illustratorプロフェッショナルの教科書 デザイン作成とパス・文字を正しく扱う技術 CC 2014/CC/CS6対応版」というIllustratorの書籍を執筆させていただきました。その際、パスや方向線などを図に表す必要があったのですが、これを作るのが意外と面倒でした。パス自体やアンカーポイントはまだいいのですが、方向線や方向点となると、スマートガイドを駆使しつつ1ずつ作成しないといけません。なんとかこれを自動化できないかと思ってできたのが、このスクリプトです。選択したパスに、「方向線」、「方向点」、「アンカーポイント」をオブジェクトとして追加します。人によっては重宝すると思いますので、興味があればぜひ使ってみてください。 更新履歴GitHubのリポジトリをご確認ください対応バージョンIllustrator CS5/CS6/CC/CC2014ダウンロードスクリプトをを

    パスの方向線を可視化するIllustrator用スクリプトを作りました - saucer
    kns_1234
    kns_1234 2017/02/03
    アンカーポイントの表示
  • #Illustrator 撫でるようにオブジェクトの間隔を整える #スクリプトです : GOROLIB DESIGN #はやさはちから

    ◆ #いきなりHTML 2(レスポンシブ対応) なんと!スライスもコーディングも全自動!イラレからHTML+CSSへ一発出力します ◆ デザイン業界にもRPA!オリジナルスクリプトで時短革命 こんなにラクしてイイんです!お見積もり無料!お気軽にご相談ください ◆ 10倍ラクするIllustrator仕事術〜ベテランほど知らずに損してる効率化の新常識 イラレ使いにこれ1冊!ホントに10倍ラクできます ■ ご注意 ■ 当方で公開しているスクリプトは、Mac のみ、macOS High Sierra + Illustrator 2020(24.3)までの検証となります。これ以降の macOS や Illustrator のバージョン、Windows での検証はできかねますので、ご注意ください。

    #Illustrator 撫でるようにオブジェクトの間隔を整える #スクリプトです : GOROLIB DESIGN #はやさはちから
  • Photoshop/JSX: スクリプトで復帰を実現する - kick the base

    今回はPhotoshopの「復帰」をスクリプトで実行する方法をご紹介します。非常に簡単なコードなので単発記事となります。 とあるポイントを基準に繰り返し画像処理を行う場合などに便利なので覚えておくとよいかと思います。(勿論、そのポイントに戻るときに「復帰」を使うわけです) 最終的なコード (function() { var desc = new ActionDescriptor(); var revertID = charIDToTypeID('Rvrt'); app.executeAction(revertID, desc, DialogModes.NO); })(); たったの5行。これだけです。例のごとくコードを書いた順番に見ていきます。 アクションを作成し、実行する var desc = new ActionDescriptor(); var revertID = charIDTo

    Photoshop/JSX: スクリプトで復帰を実現する - kick the base
  • Photoshop/JSX: フォルダ内の画像を開き、調整レイヤーを追加して保存する - kick the base

    先日、友人が困ってました。 「スキャンした書籍のデータに調整レイヤーを載せて、PSDで保存してるんだけど、ページ数が膨大で作業が大変」 その日はちょうどぼくに時間の余裕があったので、その作業を自動化するJSXを作ってプレゼントしました。 記事ではそのJSXのポイントを実際のコードを見ながら解説したいと思います。十数行の非常に短いコードなので、プログラムを普段書かないデザイナさんもチャレンジしてはいかがでしょうか。 最初に最終形をお見せします。(来JSのコードはもっとモダンなパターンを用いて書いたほうがベターなのですが、自身のコーディング規約によってこのような書き方にしています。それについては記事の最後に触れます) (function () { var folder = Folder.selectDialog('画像があるフォルダを選択してください'); if (!folder) re

    Photoshop/JSX: フォルダ内の画像を開き、調整レイヤーを追加して保存する - kick the base
    kns_1234
    kns_1234 2016/09/14
  • propertyを表示するパネル - 手抜きLab@DTPの現場

    お休み終わっちゃいましたねぇ...休日に某公園へ行ってきたのですがフォーゼのショーがあるためか男の子率高かったです。うちの子は全く興味ありませんのでチラ見した程度ですが、フォーゼが机に座って一心不乱にサインを描いていました。その横でメテオ?がチビっ子と握手しつつお見送りしていました。正義の味方というのもなかなか大変はようです。 ところで皆様、CS6への移行準備はよろしいでしょうか?うちは基、秋までは様子見なのですがオブジェクトの調査は導入までには済ませてしまいたいと思っている訳です。基的にお試しバージョンダウンロードしての短期決戦です。まあ、8割方終わっているのは内緒ですが最終的にはリリースもので確認しておかないと痛い目に遭いかねませんので。 そうそう、新しいバージョンとか出ると以前のスクリプトが動くのかとか気になりますよね?今回も結構プロパティ増えてたりしてその調査に結構な時間を取ら

    kns_1234
    kns_1234 2016/07/16
  • 素早く画像書き出しできるillustrator向けスクリプト - Two hats

    12/11追記・・・JPEG書き出し追加とファイル名の拡張子が重なる場合のバグを修正しました。 9/10追記・・・保存先指定と、オブジェクト名からファイル名を付ける機能を追加しました 以前、画像切り出し用のスクリプトを作成しましたが、スクリプトの宿命というか実行するたびに「ファイル>スクリプト>何々スクリプト」という操作の手間があってビミョーに使いにくい操作性になっていました。 なんとかもっと簡単に書き出しできるようにならないか・・・と色々と調べていくうちに、スクリプトだけでもExtensionのような常駐型のウィンドウで作れるということが分かり、これを使ってより使いやすいスクリプトとして作り直しました。 このスクリプトのコンセプトは「とにかく、手間なく素早く書き出す!!」です。設定や書き出す前の下準備などは最小限に抑え、ワンクリックで書き出せる!ぐらいの気持ちで設計しました。UIもかなり

    素早く画像書き出しできるillustrator向けスクリプト - Two hats
  • PhotoShopの自動処理スクリプト JSXを作成するときの参考リンクをまとめておく |

    ここのところ、PhotoShopの自動処理スクリプト(JSX)を日々の業務のなかで作ることがあり、役に立つリンクがストックできてきました。 というわけで、何度も調べて同じ記事にたどり着いてしまう、自分のためにまとめておきます。 以前はJSXのリファレンス探すにしても、ソフトと同梱のPDF見なきゃいけなかったりで苦労したんですが、最近は良くなってきましたね! では、早速。 最も参考にしているサイト いま最も参考にしているサイトといえばやはり古籏一浩さんのサイト。メールマガジン、デジタルクリエイターズで、自動処理のススメ的な記事を数多く執筆されていて、そのナレッジを余すところ無く、サイトに貯めていただいています。 Adobe Photoshop CS6自動化作戦 もちろん、日語。用途から逆引きできる目次も使いやすく、親切なサンプルコードつき。ありがたや。ありがたや。 家のリファレンス Go

    PhotoShopの自動処理スクリプト JSXを作成するときの参考リンクをまとめておく |
    kns_1234
    kns_1234 2015/07/06
    PhotoshopのJSXまとめ記事
  • アートボード書き出しダイアログ

    このページにあるスクリプトはアップデートを行っていません。最新のスクリプトファイルは 新しいダウンロードページ https://onthehead.com/ais/export001/ からダウンロードください。 Export Artboards by Dialog は、アートボード単位で画像(PNG24 / JPEG / SVG / SVGZ / PDF)を書き出すスクリプトです。アートボード番号やファイル名、サイズ比率などを簡単に指定することができます。Illustrator体の書き出し機能の煩雑さからサヨナラしましょう。 スクリプトには ショートカットキーを割り振る ことをオススメします。 Export Artboards by Dialog 実行時 書き出すアートボードの指定 全てのアートボード、選択したアートボード、複数のアートボード番号の指定、の3種類から選択可能。 複数のア

    アートボード書き出しダイアログ
  • パターンの繰り返し起点を指定するIllustrator用スクリプトを作りました - saucer

    Illustratorのパターンは、繰り返しの起点がウィンドウ定規の原点と連動しているため、精密なコントロールが面倒です。そこで、対象オブジェクトの左上、または中央に繰り返しの起点をフィットさせ、ついでにパターンに適用されている変形もリセットするIllustrator用のスクリプトを作成しました。パターンの位置をきれいに合わせたいときには重宝すると思います。興味のある方はぜひ使ってみてください。 【2015.12.9追記】0.5.1にアップデートしました。グループ、複合パスに対応しました。また、対象外要素が含まれるときは警告を表示するようにしました。古いものをお使いの方は、新しいものに差し替えてお使いください。 前置きスクリプトの説明をする前に、繰り返しの起点を変更する方法をおさらいしましょう。知ってる人は読み飛ばしてもOKです。 通常の方法でパターンの繰り返し起点を変更する 表示 > 定

    パターンの繰り返し起点を指定するIllustrator用スクリプトを作りました - saucer
  • アイテム数値調整ダイアログ

    Adjust Items by Dialog は、選択したオブジェクトの座標やサイズの数値を調整する Illustrator スクリプトです。 アイテム数値調整ダイアログ実行時 ウェブデザインやアプリケーションデザイン時に問題となる数値の 小数 や 見えない小数 を調整することができます。 また、ドキュメントの各単位に対応し、px 以外にも mm や inch などの数値も調整できるようになったので印刷物の作業にもお使いいただけます。 入力した各種調整数値を元に、選択したオブジェクトの座標やサイズを調整します。例えば、調整数値に 1 を入力した場合、調整後の数値は 整数(1の倍数) になります。0.5 と入力すれば 0.5 の倍数 に、10 と入力すれば 10 の倍数 といった具合に四捨五入?します。 3flab-adjust_items_by_dialog_2.jsx は、ダイアログで調

    アイテム数値調整ダイアログ
    kns_1234
    kns_1234 2015/02/03
    「選択したアイテムの座標やサイズの数値(px)を調整する Illustrator スクリプト」
  • 画像アセットやSlicy.appで書き出す画像に余白をつけるPhotoshop用スクリプト「Add Slice Area」を作りました - saucer

    Photoshop CC以降に搭載された画像アセットの生成機能や、Slicy.appというアプリを使うと、レイヤー(レイヤーグループ)に拡張子付きのファイル名を設定しておくだけで、画像のスライスがとても簡単に行えます。ただ、オブジェクト(ピクセルやシェイプ)のサイズを基準としてスライスするため、透明の余白を含めてスライスしたいときに不便でした。これを解消するには、スライスしたいサイズの四隅に、目に見えないくらいの透明度でピクセルかシェイプを作成して、それを含めた書き出しをするしかありません(他に方法があれば教えてもらえると嬉しいです)。その作業を自動化したのが、今回のスクリプトです。 【2014.8.8追記1】Slicy.appには、範囲を指定する機能が標準で搭載されてました。@boundsという名前のシェイプレイヤーを作って範囲を指定するか、対象レイヤー(グループ)にレイヤーマスクやベク

    画像アセットやSlicy.appで書き出す画像に余白をつけるPhotoshop用スクリプト「Add Slice Area」を作りました - saucer
  • Photoshopのガイド作成用スクリプト「Speed Guide」を作りました - saucer

    Photoshopのガイド作成用のツールといえば、定番のGuideGuideや、先日アップデートしたQuickGuideなど、すばらしいエクステンションがたくさんありますが、それとはちょっとだけ違ったアプローチで「Speed Guide」というスクリプト(jsx)を作ってみました。特長は、複数のガイドを一度に作成できることです。人によって合う合わないが分かれる仕様だと思いますが、興味があればぜひ使ってみてください。 主な特長1回の処理で複数のガイドを一気に作成できる環境設定を変えることなく任意の単位を使用できる四則演算に対応している右下を起点にして作成できる中央を起点にして作成できる繰り返し回数を指定して作成できるCSVから設定を読み込める既存のガイド位置を取得できるダウンロードGitHubからダウンロードしてください。ページ右下の[Download ZIP]からソース一式をダウンロードで

    Photoshopのガイド作成用スクリプト「Speed Guide」を作りました - saucer
  • 1