サーバーの初期設定について
準備 エディタ 一般のInternet(会社のネットワークでは外部サーバー接続ができないため) Teraterm WinSCP HTML、PHP等のファイルを編集する なんでもいいが、タグ等の色付けを行ってくれるものがよい 一般のInternet(会社のネットワークでは外部サーバー接続ができないため) 13Fオフィス内 SSID：elecom5g-d12870 または elecom2g-d12870 Password：ximjw7w8faiu その他 自身のiPhoneをテザリングで使用してください Teraterm サーバー側と通信し、コマンド操作を行う 10/15現在の最新バージョンは、4.100 https://ja.osdn.net/projects/ttssh2/ WinSCP エクスプローラー風のファイル転送アプリケーション 10/15現在の最新バージョンは5.13.4 https://ja.osdn.net/projects/winscp/ Arduino ESP32、ESP8266等のSW開発プラットフォーム
WiFi接続先を変更する(オフィスの場合) PC右下の無線強度マークをクリックする elecom5g-d12870またはelecom2g-d12870を選び、接続する パスワードを入力する。OKを押す パスワード：ximjw7w8faiu 自動接続のチェックをはずす。OKを押す ③ ② ③ ① ④ 注意： このネットワークでは、メールは受けられますが、共有フォルダや稟議申請などの一部の社内ネットワークサービスは使えません。作業が終わったら、元のSSID(MobilePoint1)へ戻してください。 ④
サーバーと接続する ファイル➔新しい接続、を選択 TCP/IPを選択 ホスト名入力 TCPポートを56522 Nexty-ele-se.com TCPポートを56522 SSHを選択。バージョンはSSH2 OKを押す ユーザー名と初期パスワードを入力 初期パスワードは“nexty” OKを押す➔ログインできるはず
パスワードを変更する “passwd”とタイプ 現在のパスワード入力 新しいパスワード入力 再度新パスワード入力 注意： パスワード認証は一般的にセキュリティ上、脆弱性が見られます。定期的なパスワード変更、もしくは公開鍵認証にすることが望まれます。
サーバーとホームページについて さくらインターネットのVPS(仮想専用サーバー)サービスを利用 CPU3core、メモリ2GB、SSD50GB 月額1,706円(年額17,060円) Ubuntu18.04.1LTSインストール済み サーバーSWはapache2 PHP7インストール済み すでに10GB程度使用済み IPアドレス:160:16:82:31 ドメイン取得済み(年額1,840円) nexty-ele-se.com ポート80、3000、443、56522解放済み ブラウザよりnexty-ele-se.comアクセスにて、/var/www/html/index.htmlファイルの読み込み
winSCPについて Windows(個人PC)とサーバー間のファイル交換SW SFTP(Secured FTP)プロトコルを使用 各種パラメータ入力 転送プロトコル：SFTP ホスト名：nexty-ele-se.com ポート番号：56522 ユーザー名：それぞれ パスワード：それぞれ 保存しておくと後が楽 左側がローカルPC側、右側がサーバー側 ファイルをドラッグ＆ドロップして転送が可能 ローカルPC側 サーバー側
自分のHPについて ブラウザよりnexty-ele-se.comアクセスにて、/var/www/html/index.htmlファイルの読み込み 個人の部屋の部分に、個人用HPの入り口があり、これをクリックして、個人用のhtmlファイルへアクセス winSCPを起動し、/var/www/htmlにアクセス 自分の名前のディレクトリ(=フォルダ)を作成する 自分のディレクトリ内に、指定されたファイルをコピーする 名前_index.html 以後、このファイルを編集して自分用HPのカスタマイズが可能 画像ファイル(junのネズミ)は/var/www/html/ index.htmlを編集し、自身の好きな画像ファイルを指定(50x50pxを推奨)
HTMLについて
HTML: Hyper Text Markup Language。ブラウザを通じて、文字や表を修飾して表示させるための言語 HTMLとCSS HTML: Hyper Text Markup Language。ブラウザを通じて、文字や表を修飾して表示させるための言語 以下のサイトがわかりやすいが、少し古い情報 XHTMLは不要 http://www.htmq.com/htmlkihon/ CSS: Cascading Style Sheet。ウェブページのスタイル(=体裁)を指定する言語。HTMLと組み合わせて使用する 以下のサイトがわかりやすい http://www.htmq.com/csskihon/
現状のCSSによる構成 HTMLの中で、CSSファイルを指定する CSSファイル内で要素を定義 wrapper(800) header(100%) header(480) contents(550) sidebar(200)
Javascript HTMLに埋め込んでブラウザ上で動作するクライアント側プログラミング言語(=サーバー側プログラムではない) Android等で利用されているJavaとは別なもの HTMLではできないことができる。例えば ポップアップウィンドウやアラートが出せる ラジオBOXや決定ボタンでの操作、文字や数値を入力できる 計算や文字列操作、繰り返し操作ができる などなど Ajax(Asynchronous Javascript XML)やnode.js(サーバー側のJavascript)などは派生・拡張版
M5Stack Basic Stackという名の通り、機能を追加していける 内臓しているもの SDカード、LCD、スピーカー、 バッテリー(10-20分程度しか持たないのでUSB給電で使用する) ESP32→Wi-Fiを使った制御ができる 使用するためには、Arduinoという環境がいる
Arduinoのダウンロードと設定（手順） ①https://www.arduino.cc/en/Main/Donate から、Arduinoをダウンロードする （「JUST DOWNLOAD」を選択） ②https://www.mgo-tec.com/arduino-core-esp32-install の手順２に基づき、Arduino ESP32をダウンロード
Arduinoのダウンロードと設定（手順） ③https://github.com/m5stack/M5Stack より、「Clone or download」→「Download ZIP」を選択
Arduinoのダウンロードと設定（手順） ④M5Stackを接続し、ツール→シリアルポートで自身の接続デバイスを選択する ⑤既存のソフトを使って、テストする
Arduinoの詳細 無料で使えるプラットフォーム ESP32に必要 頻繁にアップデートがある（バージョン更新でバグが出ることもある） M5Stack内のCP2101は、PCのArduinoをUARTに変換する これまでのHTMLは、Interpreter(翻訳)系だったが、 今後はCompile(書き換える)系を扱う 例) PC側のArduinoでC言語を記述した後、 プログラムを転送（コンパイル）し、 UART経由で、ESP32のメモリに 書き込むことで動作する