webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

WEB制作会社のフォトグラファー

illustrator pentool の操作をいまひとたび復習したい

パスを書き終えるには、、、

ペンツールでパスを描く。

クローズしないでやめる(書き終える)には「ctrl」を押して「ペンツール」を「ダイレクト選択ツール」にして、どこかをクリックすればよい。

 

クローズドパスを途中で切る方法

切りたいパスを選択した状態で、ペンツールを持つ。(選択していないとアンカーポイントを追加するツールに自動で切り替わらない)

 

切りたい場所にアンカーポイントを追加する。

「ダイレクト選択ツール」で追加したアンカーポイントを選択する。

「パスを切断」ツールを選択する。

選択されているアンカーポイントをクリックアンドドラッグする。

f:id:ohta-felica:20170529222210p:plain

 

f:id:ohta-felica:20170529222443p:plain

 

      

jpeg converet

WEBカタログ製作の時など、PDFをJPEGにまとめて変換。

acrobatのactionを使用する。

「アクションウィザード」

f:id:ohta-felica:20170524125129p:plain

 「新規アクション」

f:id:ohta-felica:20170524125250p:plain

 「保存と書き出し」→「JPEG形式ですべての画像を書き出し」を選択する。

f:id:ohta-felica:20170524125842p:plain

 

  1. 「ユーザーに確認」のチェックを外せば自動的に同じ作業をしてくれる。
  2. 書き出しの条件を指定する。ちなみに236.22ピクセル/㎝とは600dpiのこと。
  3. 処理を施すフォルダを指定する。

f:id:ohta-felica:20170524130022p:plain

 

f:id:ohta-felica:20170524131341p:plain

 

アクションを保存する。

保存ができたらウィンドウの左側にあるアクションの一覧から実行したいアクションを選択して、実行する。

 

フォトショップを開いて生成されたファイルを確認するときちんと条件どおりでした。

 

f:id:ohta-felica:20170524131119p:plain

 

楽なのでおすすめです。

 

PDF action wizard

複数のファイルに同じ処理をしたいのでアクションを作る。

f:id:ohta-felica:20170524125129p:plain

PDFの埋め込まれたpropertyをすべてのファイルから消去したい。

f:id:ohta-felica:20170524125250p:plain

 

「文書の概要を追加」

f:id:ohta-felica:20170524125334p:plain

 「ユーザーに確認」チェックボックスを外す。

f:id:ohta-felica:20170524125413p:plain

 招請を設定する。今回はすべてを空欄にしたいので下のように入力する。

f:id:ohta-felica:20170524125447p:plain

 「処理するファイル」を指定する。

f:id:ohta-felica:20170524125527p:plain

 「アクションの名前」を設定する。

f:id:ohta-felica:20170524125640p:plain

 保存するをウィンドウの左側にアクションの一覧が表示される。

f:id:ohta-felica:20170524125715p:plain

その中から実行したいアクションを選ぶ☝

 

 

next FTP

ほぼサーバーの問題ではあるが、FTPでも速度は上がらないものか、、、

ということで悪あがきをしてみました。

結局のところ早くなったのか全く体感では分かりません。

気持ちの問題です!

 

f:id:ohta-felica:20170522230234p:plain

 

バッチ処理/シェルスクリプト その2

@echo off

cd /d %~dp0

sass --watch --style expanded sass:css

 

テキストエディタに上の記述をしてから、拡張子を.batにしてから保存。

f:id:ohta-felica:20170521000433p:plain

 こんなレイアウトにして実験をしてみる。

 

f:id:ohta-felica:20170521000003p:plain

 黄色の個所を「600→90」に変更しました。

テストします。

バッチ処理をしなければ変わりません。当たり前ですが、、、

f:id:ohta-felica:20170521000140p:plain

バッチ処理/シェルスクリプト その1

f:id:ohta-felica:20170520222719p:plain

 「--watch」オプションは、scssファイルが書き換えられると自動でコンパイルされて、cssファイルも書き換えられる。

 

scssフォルダ内のstyle.scssファイルを「--watch」して、書き換えたら「--style expanded」でcssフォルダ内のstyle.cssを更新する。

という一連の処理を自動化する。

  

バッチファイルを作る

テキストエディタで、拡張子が「.bat」のファイルを作ればよい。 

Windowバッチでは、「%0」や「%1」など、「%数字」は、引数を表し、「0」は特別に、そのバッチファイル自身、それ以降は第一引数、第二引数となります「this」か?、、、

 

 

「~」・・・これは、ドライブ、ファイルパスから「”」を取り除きます。Windowsでは、「Program Files」のように、スペースを含んだパスも良く使われますので、これを引数に渡すときに「”C:\Program Files\Java”」のように囲ったりします。この「”」を取り除き、純粋なパス文字列にするのに必要になります。

 

それ以外の「d」や「p」などのオプションは、ドライブやファイル名の含まれた文字列から、何を取り出すかの指定を行います。

具体的には、下記のような情報を取り出すことが可能で、複数組み合わせることも出来ます。

%~d0 %0をドライブ文字だけに展開
%~p0 %0をパス名だけに展開
%~n0 %0をファイル名だけに展開
%~x0 %0をファイル拡張子だけに展開
%~dp0 %0をドライブ文字とパスだけに展開
%~nx0 %0をファイル名と拡張子だけに展開

 

組み合わせた場合

%~dp0 %0をドライブ文字とパスだけに展開します。
%~nxI0 %0をファイル名と拡張子だけに展開します。
%~fs0 %0を完全なパスと短い名前だけに展開します。

 

 

「%0」引数0、自分自身、この場合バッチファイル。

「dp」driveドライブ、とpathパス。

「~」パスから不要な「”」などを取り除き、純粋な文字列に変換する。

「%~dp0」 自分自身のドライブとパスの文字列(""など不要な文字を含まない)

 

「コマンド名 /?」でそのコマンドのヘルプ画面を表示できる。

f:id:ohta-felica:20170520234049p:plain

 

cdとは change directory  

/d cdコマンドのスイッチ(オプション)ドライブの変更を伴う移動の際に使う。

例)cd /d k:/photo/2017/ といった感じで記述する。

 絶対パスでの記述 「/」ルートパスを表す。ここからスタートして「/」は一つ下の階層を表す。

 相対パスでの記述 「/」これが一つ下の階層 「../」これが一つ上の階層を表す。

 

 

まとめ

cd /d %~dp0とは、バッチファイルがあるドライブのフォルダに移動するということ。

sass complie output option

windows」+「R」、「cmd」

「sass test.scss:test.css」と入力する。

f:id:ohta-felica:20170520220645p:plain

 と、このように出力される。このようにオプションを指定しないと「nested」オプションになる。

 

次に、「sass test.scss:test.css --style expanded」と入力する。

f:id:ohta-felica:20170520220909p:plain

 するとこのように表示される。

普段の感じになりました。

 

まとめ

コマンドプロンプトに続けてコンパイルのコマンドを記述した後に

「 --style expanded」と入力するといつもの感じになる!

 

コマンドのオプションは「--」の後に記述する。

sass command prompt

windows」+「R」 ファイル名を指定して実行

「cmd」 コマンドプロンプトの表示

 

f:id:ohta-felica:20170520213354p:plain

 「ホームフォルダ」以外にあるscssファイルをコンパイルするときには、ファイルのあるフォルダを「shift」+「右クリック」するとそのフォルダに移動できる。

f:id:ohta-felica:20170520213605p:plain

 

sass to css

f:id:ohta-felica:20170520205143p:plain

 sassのファイル(.scss)をcssに変換する→コンパイル

Sassコマンドの使い方を覚えよう | Web制作者のためのSassの教科書 - 公式サポートサイト

 

f:id:ohta-felica:20170520210341p:plain

 

f:id:ohta-felica:20170520210553p:plain

 「test.scss」をホームフォルダ→c: ¥users¥(アカウント名)のおく。

ホームフォルダに置いた「test.scss」をコンパイルする。

f:id:ohta-felica:20170520211149p:plain

 ソースがCSSの書き方になりました。

オプションでアウトプットスタイルを指定しないと下のように「ネスト」された記法になる。

f:id:ohta-felica:20170520211456p:plain

 

 

sass install windows

RUBYのインストー

 

windows」+「R」でファイル名を指定して実行

「cmd」と入力してコマンドプロンプト

 

f:id:ohta-felica:20170520202915p:plain

 1行目はOSのバージョン

2行目はコピーライト

3行目、ファイルパスの後にに入力する。

 

RUBYがインストールされているか確認する

コマンドプロンプトの後に「ruby -v」RUBYのバージョンを表示するコマンドラインを入力する。

 

f:id:ohta-felica:20170520203251p:plain

 上のように表示されたら、RUBYがインストールされていないので、まずRUBYをインストールする。

 

 

ダウンロードページから、OSに合った最新版をインストールする。

f:id:ohta-felica:20170520203519p:plain

 チェックボックスの2番目をチェックしておく。こうしておくと、どのプログラムでもRUBYが使えるようになる、らしい。

f:id:ohta-felica:20170520203805p:plain

 

再び、コマンドプロンプトを立ち上げて、「ruby -v」と入力する。

 

f:id:ohta-felica:20170520204131p:plain

 インストールしたバージョンが表示されます。

SASSのインストー

コマンドプロンプトに「gem install sass」と入力する。

これで、SASSがインストールされた。

f:id:ohta-felica:20170520204536p:plain

 コマンドプロンプトに続けて、「sass -v」と入力してみる。

f:id:ohta-felica:20170520204643p:plain

 バージョンが表示された=無事にインストールされた。