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