# バッチモードON
option batch on

# ダイアログを表示しない
oprion confirm off

# サーバーへ接続
open ユーザー名@ホスト名:ポート番号

# ----------------------------------------------------------------------------
# 【1, cssの更新】
# アップロード先のリモートのディレクトリに移動
cd リモートサーバー/myapp/static/css

# アップロードするファイルがあるローカルのディレクトリに移動
lcd ローカル/myapp/static/css

# 対象ファイルの削除
rm %1%.css

# 対象ファイルのアップロード
put %1%.css

# ----------------------------------------------------------------------------
# 【2, jsの更新】
# アップロード先のリモートのディレクトリに移動
cd リモートサーバー/myapp/static/js

# アップロードするファイルがあるローカルのディレクトリに移動
lcd ローカル/myapp/static/js

# 対象ファイルの削除
rm %1%.js

# 対象ファイルのアップロード
put %1%.js

# ----------------------------------------------------------------------------
# 【3, htmlの更新】
# アップロード先のリモートのディレクトリに移動
cd リモートサーバー/myapp/html

# アップロードするファイルがあるローカルのディレクトリに移動
lcd ローカル/myapp/html

# 対象ファイルの削除
rm %1%.html

# 対象ファイルのアップロード
put %1%.html

# ----------------------------------------------------------------------------
# 【4, pyの更新】
# アップロード先のリモートのディレクトリに移動
cd リモートサーバー/myapp/py

# アップロードするファイルがあるローカルのディレクトリに移動
lcd ローカル/myapp/py

# 対象ファイルの削除
rm %1%.py

# 対象ファイルのアップロード
put %1%.py


# 終了
exit

移動させたいディレクトリとファイルの組み合わせがもっとたくさんある、という場合は「#-----(略」から「put %1%.py」までのくだりをコピペして書き換えて増やしてください。

相手方のサーバーによってはスラッシュがバックスラッシュだったりするかもしれません。
GUI版のWinSCPを開き、リモート側のパスが書かれているところを右クリックし「パスをクリップボードにコピー」して貼り付けるのが一番早いと思います。

サーバーへ接続するときだけパスワードを訊かれますので入力してください。
パスワードもスクリプトに一緒に書くことで入力を省くことができますが、今回はやめておきます。

スクリプトは適当な名前で保存してください。txt形式でよいでしょう。

コマンド

スクリプトが書き終わったら、コマンドプロンプトなどのコマンドツールを開きます。
そしてスクリプトを置いたディレクトリへ移動し、以下のコマンドを打ち込みます。

日本語で書かれている場所は、例によって適宜よきにはからうこと。

"WinSCPがインストールされている場所のパス" /console /script=スクリプトファイル名.txt /parameter "アップするファイル名(拡張子抜き)"

WinSCPがインストールされている場所のパス：WinSCPがある場所のパスです
スクリプトファイル名.txt：先ほど作ったスクリプトファイルの名前です
アップするファイル名(拡張子抜き)：今回の例でいうところの「mypage」です。スクリプト内の「%1%」に当てはめられて実行されます。だから拡張子はいりません。

このコマンドを実行するとWinSCPがコマンドモードで開き、目的のファイルがそれぞれお目当てのディレクトリに上書きアップロードされているはずです。
何度も同じ作業をする場合はコマンドをbatファイルなどにしちゃうといいかもしれませんね。

2022-10-10

React使ってみる(環境構築・コンポーネント)

React

ぼんやりとした不安を忘れるために、Reactのチュートリアルをやってみることにしました。
今回は、ローカルで環境構築するまでと、コンポーネントとは何ぞやということを自分の言葉で記録しておきます。

概要
ローカルでの環境構築
コンポーネントの概要

概要

公式サイト
読み方は「リアクト」みたいです。ナウでヤングなUIを作るためのJavaScriptライブラリだそう。
ひとつひとつのパーツは「コンポーネント」という単位で、それを組み合わせて作っていくのだそうです。

ローカルでの環境構築

「ちょっと使ってみたい」ということであれば、公式様がすべて整えてくださっている環境をブラウザ上で動かすので十分だそうです。
でも私は土台がわかってないと気持ち悪くなる性分なので、ローカルに開発環境を作り、そちらで楽しんでいこうと思いました。

作業の流れは以下の通りです。

環境に最新のNode.jsがなければインストールする
Create React Appにならってプロジェクトフォルダをつくる
- 違うプロジェクトフォルダ名がよければ「my-app」をお好みの名前に置き換えます
- 仕上がるまでに少し時間がかかった。空を眺めるなどして待ちます
srcフォルダにcssファイルとjsファイルを作る
- まず表示されるページを作るので、両方とも「index」にしておきます
自動生成されたプロジェクトフォルダの中に入って、npm startコマンドを実行。そのあとlocalhost:3000にアクセスして表示されれば構築は完了。おつかれさまー！
jsファイルを更新すると自動で反映されるので、更新ボタンを押したりなどは不要

お仕事とかで開発用サーバーを使うときは、4のやり方がまた違ってくるのだと思います。
ちなみに、srcフォルダに作ったjsファイルの先頭には、以下のコードを記述する必要があります。

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import './cssファイル名.css';

ちなみにバージョン17以降だと、 import React from 'react';は必要ないみたいです。
参考：import React from "react" はもう要らない

コンポーネントの概要

コンポーネントは、Reactで基本になる、画面の部品の単位です。
コンポーネントはクラスや関数で作ります。今回はチュートリアルで開設されていたクラスコンポーネントのみ扱います。

ざっくり、以下のように定義します。

class コンポーネントの名前 extends React.Component {
  render() {
    return (
      // 最終的に画面に表示する内容をここに書く。
      // タグとコードをおなじみの見た目のまま混ぜて書ける(JSX)
      // JSは{}で囲う。{/*コメントもこのように囲う必要がある*/}
      // コンポーネントは、ほかのコンポーネントの中で呼び出して使うこともできる(コンポーネントの組み合わせ)
    );
  }
}

こんな感じで書くと、return()の中に書いたJSXをもとにrenderメソッドがいいかんじにしてくれます。
全体のコードの流れとしては、まず最小要素から作っていき、どんどん完成形へ組み上げていくというイメージでいいのかしらね。

今回はここまで。
きっと、あとでわかってくることもたくさんあるでしょう。

log

日々の記録と、書くことを楽しむためのブログです

WinSCPスクリプトで複数のディレクトリにファイルをアップロードする

今回したいこと

使うもの

ディレクトリ構成

送るファイル

スクリプト

コマンド

React使ってみる(環境構築・コンポーネント)

概要

ローカルでの環境構築

コンポーネントの概要