webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき
読者です 読者をやめる 読者になる 読者になる

webかたつむり

ウェブデザインを勉強中

バッチ処理/シェルスクリプト その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

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

 

 

iphone ipadの写真をpcに移動する

windows用のitunesが遅いのでなんとかしたい。

まずは自動の動機をしないように設定する。

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

 

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

 

写真や動画をすべてPC上に移動させる。

これは通常の操作でできる。「エクスプローラー」を起動。

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

 

 

 

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

 

表示されたデバイス上のファイルにアクセスできる。

iosバイスは勝手にitunesが立ち上がるのでよくわからなくなるがこれでよいのだ。