SSH接続できたらPythonコードを作成してください。

1. 復習

▼Linuxのコマンド（第二章を参照）
https://funnygeekjp.com/mnt/3188/

▼pythonディレクトリを作る。pythonディレクトリに移動する
$ cd python

▼nanoエディタでtest.pyファイルを編集する（ファイルがなければ作られる）
$ nano test-hello.py

▼pythonコードを書く

#!/usr/bin/env python
# -*- coding: utf-8 -*-

def hello(strText):
    print(f"あなたのメッセージは「{strText}」です")

hello("２．ハロー")

▼ファイルを保存してから nanoエディタを終了します

[ctrl]+[s]
[ctrl]+[x]

▼pythonコードを実行する
$ python test-hello.py

2. サーバーにSSH接続

サーバーに接続するコマンド

C:\Users\名前> ssh -i 鍵ファイル名ユーザ名@サーバ名 -p ポート番号

成功したら緑色でユーザ名が表示されます。lsなどLinuxコマンドを実行してみましょう

3. Wikipedia アプリを動かす（例）

（※インデントはTabか空白4個か統一すること：注意）

▼インストール
$ pip install Wikipedia

▼nanoエディタでtest.pyファイルを編集する（ファイルがなければ作られる）
$ nano test-wiki.py

▼pythonコード

#!/usr/bin/env python
# -*- coding: utf-8 -*-

import wikipedia
import sys

# Wikiの検索
def search(strText):
    print(f"{strText}ですね。ちょっとお待ちください。")
    wikipedia.set_lang("ja")
    try:
        strReturn = wikipedia.summary(strText, sentences=1)
        print(strReturn)
    except:
        print("いっぱい考えたけど、思い出せなかっです。")

# 単語を読み取り
if (len(sys.argv) <= 1):
    print("書式: python wikipedia.py '調べたい単語をここに書く'")
    sys.exit()
else:
    search(sys.argv[1])

▼実行してみる
$ python test-wiki.py ‘ホバークラフト’

ここまで出来たひとは、pythonの勉強をスタートしましょう。YoutubeやWEBサイトで教材や入門記事を探すのがいいと思います。
サーバーのpython開発環境で、さまざまなアプリを作ってみてください。

4. APIアプリ（Flask）を動かす（例）

▼Flaskモジュールをインストールする
$ pip install flask

▼nanoエディタでtest.pyファイルを編集する（ファイルがなければ作られる）
$ nano test-api.py

▼pythonコード（ポート番号は自分用に変えること）

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello():
    return 'こんにちは。みなさん。ninja01'

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=3001)

▼試す
(1) $ python test-api.py
(2) ブラウザからアクセス https://dojo.funnygeekjp.com/api3001/

5. WikiのAPIアプリをFlaskサーバーで動かす

▼python で実行する（test-api-wiki.py）

from flask import Flask
import wikipedia

app = Flask(__name__)

@app.route('/')
def hello():
    return 'こんにちは。みなさん。'

@app.route('/wiki/<string:word>')
def wiki(word):
    wikipedia.set_lang("ja")
    return wikipedia.summary( word, sentences=1 )

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=3001)

▼wikiを実行する
https://dojo.funnygeekjp.com/api3001/wiki/扇風機
https://dojo.funnygeekjp.com/api3001/wiki/エレベーター

6. 自分専用のWEBサイトを書く（HTML, CSS）

▼wwwディレクトリに移動する
$ cd www

▼WEBページを書く
wwwディレクトリに、index.htmlを書く

$ nano index.html

▼index.htmlの例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webサイト</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
    <div class="container">
<h2>ページ１</h2>

<button class="btn btn-primary" onclick="hello()">パルプンテのボタン</button>
<p id="message">（ｘｘｘ）</p>

<script>
    const messageList = [
        "こんにちは",
        "おっす",
        "Hello",
        "グーテンターク",
        "ばいばい"
    ];
    function hello() {
        const number = Math.floor(Math.random() * 5);
        document.getElementById("message").textContent = messageList[number];        
    }
</script>

</div>
</body>
</html>

▼試す
https://dojo.funnygeekjp.com/ninja01/
https://dojo.funnygeekjp.com/ninja01/index.html

ここまで出来た人は、wwwフォルダにさまざまなWEBページを制作しましょう。YoutubeやWEBサイトで教材や入門記事を探すのがいいと思います。
サーバーのWEB開発環境で、さまざまなWEBページやWEBサイトを作ってみてください。

7. WikiのAPIアプリをHTMLで実行する

▼wwwディレクトリに「wiki.html」を作る

▼HTML + JavaScript を書く（URLは自分の番号に変えること）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>Wiki API ビューア</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
  <!-- ここから画面レイアウトをHTMLタグでつくる -->
    <h1>Wiki API ビューア</h1>
    <label for="keyword">キーワードを入力してください：</label>
    <input type="text" id="keyword" />
    <button id="searchBtn">取得する</button>
    <div id="status"></div>
    <div id="result"></div>
  <!-- ここまで画面レイアウト -->

  <!-- ここから下がJavaScriptでプログラミング -->
  <script> 
    // 自分のURIにあわせて変更すること
    const baseUrl = "https://dojo.funnygeekjp.com/api3001/wiki/";

    // 画面のレイアウト要素
    const input = document.getElementById("keyword");     // インプットBOX（テキストを入力）
    const button = document.getElementById("searchBtn");  // ボタン
    const result = document.getElementById("result");     // wikiで調べた結果を表示する場所
    const status = document.getElementById("status");     // 成功やエラーを表示する場所

    // wiki検索を実行する関数
    async function fetchWiki() {
      // 変数を初期設定
      const text = input.value.trim();
      result.textContent = "";
      status.textContent = "";
      if (!text) {
        status.textContent = "キーワードを入力してください。";
        return;
      }

      const encoded = encodeURIComponent(text); // URI エンコード（「塩」→ %E5%A1%A9 など）
      const url = baseUrl + encoded;            // URLに検索テキストを追加

      status.textContent = "取得中…";
      try {
        const res = await fetch(url);           // APIアプリにアクセス
        if (!res.ok) {
          status.textContent = `エラーが発生しました (HTTP ${res.status})`;
          return;
        }
        const bodyText = await res.text();    // API がプレーンテキストを返す前提

        status.textContent = "取得しました。";
        result.textContent = bodyText;        // wiki検索の結果を表示
      } catch (err) {
        console.error(err);
        status.textContent = "通信エラーが発生しました。";
      }
    }

    // イベントを初期設定：ボタンを押す,もしくは[Enter]キーでwiki検索を実行する
    button.addEventListener("click", fetchWiki);
    input.addEventListener("keydown", (e) => {
      if (e.key === "Enter") {
        fetchWiki();                    // wiki検索を呼ぶ
      }
    });
  </script>
</body>
</html>

Pythonコード（第三回）

目次

1. 復習

2. サーバーにSSH接続

3. Wikipedia アプリを動かす（例）

4. APIアプリ（Flask）を動かす（例）

5. WikiのAPIアプリをFlaskサーバーで動かす

6. 自分専用のWEBサイトを書く（HTML, CSS）

7. WikiのAPIアプリをHTMLで実行する

コメントを残すコメントをキャンセル

目次

1. 復習

2. サーバーにSSH接続

3. Wikipedia アプリを動かす（例）

4. APIアプリ（Flask）を動かす（例）

5. WikiのAPIアプリをFlaskサーバーで動かす

6. 自分専用のWEBサイトを書く（HTML, CSS）

7. WikiのAPIアプリをHTMLで実行する

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル