Google Colab上でp5.js使って遊ぼう。

アルちゃん

ChatGPTくんがGoogle Colabに関してはすっとぼけたことばっかりぬかすので、ひょっとしたらジェミニ君の出番かもしれない。

とりあえずこんな感じにするとp5.jsが動く。

from IPython.display import display, HTML

html_code = """
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <script>
    console.log('p5.js is loaded');
    
    let s = function(sketch) {
      sketch.setup = function() {
        console.log('setup function is called');
        sketch.createCanvas(400, 400);
        sketch.background(200);
      };

      sketch.draw = function() {
        console.log('draw function is called');
        sketch.fill(255, 0, 0);
        sketch.ellipse(sketch.mouseX, sketch.mouseY, 50, 50);
      };
    };

    let myp5 = new p5(s);
  </script>
</body>
</html>
"""

display(HTML(html_code))


ポイント1(html)

IPythonによるhtml

display(HTML(html_code))

IPython

`IPython.display`は、IPythonとJupyter Notebookの環境で、さまざまな形式のメディアを表示するためのモジュールです。このモジュールを使用すると、画像、ビデオ、HTML、Markdownなどのリッチメディアコンテンツを簡単に表示できます。以下に、`IPython.display`の主な機能と使用例を紹介します。

主なクラスと機能

  1. Displayオブジェクト

    • `Display`クラスを使用して、任意のオブジェクトをカスタム表示できます。

  2. Image

    • 画像を表示するためのクラスです。URLまたはローカルファイルから画像を読み込むことができます。

    • 例: `IPython.display.Image(url='http://example.com/image.png')`

  3. Video

    • ビデオを表示するためのクラスです。URLまたはローカルファイルからビデオを読み込むことができます。

    • 例: `IPython.display.Video('video.mp4')`

  4. HTML

    • HTMLコンテンツを表示するためのクラスです。任意のHTMLコードを埋め込むことができます。

    • 例: `IPython.display.HTML('<h1>Hello, World!</h1>')`

  5. Markdown

    • Markdown形式のテキストを表示するためのクラスです。

    • 例: `IPython.display.Markdown('Bold Text')`

  6. SVG

    • SVG（Scalable Vector Graphics）形式の画像を表示するためのクラスです。

    • 例: `IPython.display.SVG('<svg>...</svg>')`

  7. Audio

    • オーディオファイルを表示および再生するためのクラスです。

    • 例: `IPython.display.Audio('audio.mp3')`

使用例

以下に、`IPython.display`モジュールを使用したいくつかの具体例を示します。

画像の表示

from IPython.display import Image

# URLから画像を表示
img = Image(url='https://www.example.com/image.jpg')
display(img)

# ローカルファイルから画像を表示
img = Image(filename='path/to/image.png')
display(img)

ビデオの表示

from IPython.display import Video

# ローカルファイルからビデオを表示
video = Video('path/to/video.mp4')
display(video)

# URLからビデオを表示
video = Video(url='https://www.example.com/video.mp4')
display(video)

HTMLの表示

from IPython.display import HTML

# 任意のHTMLコードを表示
html = HTML('<h1>Hello, World!</h1>')
display(html)

Markdownの表示

from IPython.display import Markdown

# Markdown形式のテキストを表示
md = Markdown('**Bold Text**')
display(md)

SVGの表示

from IPython.display import SVG

# SVGコードを直接表示
svg = SVG('<svg width="100" height="100"><rect width="100" height="100" style="fill:blue"/></svg>')
display(svg)

オーディオの再生

from IPython.display import Audio

# ローカルファイルからオーディオを再生
audio = Audio('path/to/audio.mp3')
display(audio)

# URLからオーディオを再生
audio = Audio(url='https://www.example.com/audio.mp3')
display(audio)

これらの機能を活用することで、Jupyter Notebook内でリッチなメディアコンテンツを表示し、インタラクティブなプレゼンテーションやデータの可視化を行うことができます。

%%html

これでも良い。

%%html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <script>
    console.log('p5.js is loaded');
    
    let s = function(sketch) {
      sketch.setup = function() {
        console.log('setup function is called');
        sketch.createCanvas(400, 400);
        sketch.background(200);
      };

      sketch.draw = function() {
        console.log('draw function is called');
        sketch.fill(255, 0, 0);
        sketch.ellipse(sketch.mouseX, sketch.mouseY, 50, 50);
      };
    };

    let myp5 = new p5(s);
  </script>
</body>
</html>

ポイント２(new)

newしないとだめ。

 let myp5 = new p5(s);

例えばローカルなhtmlファイルではこんな行はいらなくて
CDN（Contents Delivery Network）ならば
CORS (オリジン間リソース共有、 Cross-Origin Resource Sharing)などの問題も起こらない。

Google Colabで無理やり遊ぼうという場合、なんかしら初期化系はうまくいかない。例えばDOMContentLoadedやwindow.onloadなどはGoogle ColabのUIなどが発火させてしまっていたりしてなんかしらうまくいかない。つまりnewするのはなんかそんな感じのやつに巻き込まれてる気がしてやってみたらできた。

CDN（Contents Delivery Network）

CDN（Contents Delivery Network）は、インターネット上のコンテンツを効率的に配信するためのシステムです。以下のポイントで説明します。

1. 基本的な概念

CDNは、ユーザーに最も近いサーバーからコンテンツを配信することで、ウェブサイトの読み込み速度を向上させるネットワークです。これにより、インターネットトラフィックの負荷を分散し、配信速度を最適化します。

2. 仕組み

  • エッジサーバー: CDNのネットワーク内にある多数のサーバー（エッジサーバー）が、世界中に分散して配置されています。

  • キャッシング: エッジサーバーは、ウェブサイトの静的コンテンツ（画像、CSS、JavaScriptなど）をキャッシュ（保存）します。

  • リクエストの流れ: ユーザーがウェブサイトにアクセスすると、最寄りのエッジサーバーからコンテンツが配信されます。これにより、ユーザーの待ち時間が短縮されます。

3. 主な利点

  • 高速化: コンテンツの読み込み速度が向上し、ユーザー体験が改善されます。

  • 負荷分散: トラフィックを複数のサーバーに分散するため、オリジンサーバー（元のサーバー）への負荷が軽減されます。

  • 信頼性向上: サーバー障害が発生しても、他のエッジサーバーがコンテンツを配信できるため、サービスの信頼性が向上します。

  • スケーラビリティ: 突発的なトラフィック増加にも対応できるため、大規模なイベント時でも安定した配信が可能です。

4. 利用例

  • ストリーミングサービス: 動画や音楽のストリーミングサービスで、遅延を最小限に抑えるために使用されます。

  • オンラインゲーム: ゲームのアップデートやダウンロードの速度を向上させ、プレイヤーの体験を向上させます。

  • eコマースサイト: 商品画像やページの読み込み速度を向上させ、ユーザーの離脱を防ぎます。

5. 主要なCDNプロバイダー

  • Akamai Technologies

  • Cloudflare

  • Amazon CloudFront

  • Microsoft Azure CDN

  • Google Cloud CDN

CDNは、インターネットのパフォーマンスとユーザー体験を向上させるために欠かせない技術です。これにより、ウェブサイトやオンラインサービスの速度と信頼性が大幅に向上します。


CORS (Cross-Origin Resource Sharing、オリジン間リソース共有)


CORS (Cross-Origin Resource Sharing、オリジン間リソース共有) は、ウェブブラウザとサーバー間でリソースを安全に共有するためのメカニズムです。CORSは、異なるオリジン（ドメイン、プロトコル、ポートが異なる場合）からのリソースリクエストを制御し、セキュリティを保護します。

1. 基本概念

ウェブブラウザはセキュリティ上の理由から、異なるオリジンからのリソースリクエストを制限します。これは、クロスオリジンリクエストと呼ばれ、CORSはこのリクエストを安全に実行するための仕組みを提供します。

2. 仕組み

CORSは、以下のHTTPヘッダーを使用してクロスオリジンリクエストを制御します。

主要なCORSヘッダー

  • `Access-Control-Allow-Origin`: サーバーが許可するオリジンを指定します。たとえば、`*` はすべてのオリジンを許可しますが、特定のオリジンを指定することも可能です。

  • `Access-Control-Allow-Methods`: サーバーが許可するHTTPメソッドを指定します（例：`GET`, `POST`, `PUT`）。

  • `Access-Control-Allow-Headers`: サーバーが許可するカスタムヘッダーを指定します。

  • `Access-Control-Allow-Credentials`: ブラウザがリクエストと一緒にクッキーを送信することを許可するかどうかを指定します。

  • `Access-Control-Expose-Headers`: ブラウザがアクセスできるサーバーのレスポンスヘッダーを指定します。

  • `Access-Control-Max-Age`: プリフライトリクエストの結果をキャッシュする時間を指定します。

プリフライトリクエスト

  • プリフライトリクエスト: 特定の条件を満たすクロスオリジンリクエスト（例：`PUT`、`DELETE`メソッドやカスタムヘッダーを含むリクエスト）の場合、ブラウザは実際のリクエストを送信する前にオプションの`OPTIONS`リクエストを送信してサーバーに許可を求めます。

3. 例

例1: 許可されたオリジンの設定

サーバーが特定のオリジンからのリクエストを許可する例です。

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://example.com

例2: プリフライトリクエストの応答

サーバーがプリフライトリクエストに応答する例です。

OPTIONS /resource HTTP/1.1
Host: api.example.com
Origin: https://example.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Max-Age: 86400

4. 利点

  • セキュリティの向上: 信頼できるオリジンからのリクエストのみを許可することで、セキュリティが向上します。

  • 柔軟なリソース共有: 異なるオリジン間でリソースを共有する際の柔軟性を提供します。

5. 注意点

  • 設定ミスによるセキュリティリスク: 不適切なCORS設定は、セキュリティリスクを招く可能性があります。たとえば、`Access-Control-Allow-Origin`に`*`を指定すると、すべてのオリジンからのリクエストを許可することになり、危険です。

  • ブラウザの対応: CORSは主にブラウザによって実装されるため、ブラウザの対応状況に依存します。

CORSは、ウェブアプリケーションがセキュリティを維持しつつ、他のオリジンからのリソースにアクセスするための重要な技術です。正しく設定することで、安全にクロスオリジンのリクエストを行うことができます。

ローカルサーバー使う場合

CDNじゃない場合。

例えばp5のソースを拾ってきてローカルのファイルからjsファイルを読み込もうという時はローカルサーバーを立てるが、
Google Colab上で同じようなことをしようとする場合はGoogle君ちのパソコンにローカルサーバーを立てる必要がある。

import http.server
import socketserver

PORT = 8000

handler = http.server.SimpleHTTPRequestHandler

httpd = socketserver.TCPServer(("", PORT), handler)
print(f"Serving at port {PORT}")

# サーバーをバックグラウンドで実行
import threading
thread = threading.Thread(target=httpd.serve_forever)
thread.start()

Google君ちにjsファイルを保存する。

js_code = """
    document.body.innerHTML += '<p>Hello, this is a message from the local JavaScript file served by the local server!</p>';
"""

with open("script.js", "w") as file:
    file.write(js_code)

Google君ちのhtml(IPython)から
Google君ちに立てたローカルサーバーを経由して
Google君ちに保存したjsファイルを読み込む。

html_content = """
<!DOCTYPE html>
<html>
<head>
    <title>Test Page</title>
    <script src="http://localhost:8000/script.js"></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>
"""

from IPython.display import HTML, display
display(HTML(html_content))

この記事が気に入ったらサポートをしてみませんか？