こっき（１）

まだ1歳10ヶ月の風葉ちゃんは国旗を覚えるのが得意だ。GGが知らない国の国旗を沢山知っている。ママからのリクエストで国旗アプリを考えることになった。市販のスマホアプリは1-2歳向けではないのだ。要求仕様は次のようなものになる。

(1) 世界の国旗が地域別（または全世界）に表示される。

(2) その下にはカタカナの国名が表示されている。ママだけが読める。 

(3) タップすると順に次の国旗が表示される。国名がわからなければママが解説する。

(4) 表示は，アルファベット順，アイウエオ順，ランダムとする。

(5) 地域は，東アジア・オセアニア，西・南アジア，ヨーロッパ，アフリカ大陸，アメリカ大陸とする。

本物のiPhoneアプリはハードルが高すぎるので，とりあえずWebアプリにしよう。もちろん，高齢者の脳力に頼っていては死ぬまでにできあがらないので，ChatGPT o3-mini-high にお願いするわけだ。自分が入れた一連のプロンプトは以下のとおりである。

Ｑ（koshix）：

幼児向けの国旗のウェブアプリを作ってください。

お母さんと子どもが一緒に遊べるものです。

・国旗の画面が大写しになります。

・その画面に国名が小さく表示されます。

・スライドするとつぎの国旗にうつります。

・表示順序をアルファベット順，五十音順，ランダムに設定変更できます。

国連に加盟しているすべての国や地域のフリーのイメージデータに

アクセスして表示できるようにします。

Ｑ（koshix）：

国名はカタカナにしてください。

クリックしたら次の国旗に進むようにしてください。それまでは静止です。

Ｑ（koshix）：

画面が真っ暗で表示されず，クリックしても進まないのですが。

Ｑ（koshix）：

(1) 国旗の表示が画面いっぱいになっているので，もう少し小さめにして余白領域を作ってください。

(2) 表示範囲を，東アジア〜オセアニア・南〜西アジア・ヨーロッパ・アフリカ大陸・アメリカ大陸の5領域および全世界の6つから選択できるようにしてください。

(3) iPhoneにこのhtmlファイルを転送して実行しようとすると，スタート時点でつまづいて進みません。iPhoneでも使えるように対処可能でしょうか。

Ｑ（koshix）：

ありがとうございます。機能はほぼ希望通りになりました。しかし，iPhoneでは画面が真っ暗のままで進まずに停まっています。どこかへのアクセスが拒否されているような感じです。どうすればよいでしょうか。

Ｑ（koshix）：

iPhoneだけでなんとかしたいので，外部にhttps対応サーバを準備することができないのですが。マウスクリック操作の機能部分ははタッチ操作に対応するようになっていますかね。

Ｑ（koshix）：

１．ユーザー操作で初回処理をトリガーする

ページ読み込み後に「スタート」ボタンを表示し、タッチされたときに全ての初期化とリソース取得を開始するように変更する方法が考えられます。これなら、iOS側での自動起動制限を回避できる場合があります。

２．ローカルサーバーを利用する代替策

外部にHTTPS対応サーバを準備できない場合でも、iPhone上で動作するローカルサーバーアプリ（例：Pythonista、KSWEB、または他の簡易Webサーバアプリ）を利用してファイルをホストする方法も検討できます。

これらの場合の具体的な手順を詳細に説明してください。

Ｑ（koshix）：

localでウェブサーバを立ち上げ，iphoneでアクセスすることに成功しました。

Ｑ（koshix）：

ところで，localではクリックで次の国旗が表示されますが，iphone経由では，クリックするとその効果が2回有効になっているようで，一つ飛ばして次の次の国旗が表示されてしまいます。どうすればいいでしょうか。

Ｑ（koshix）：

1の方法をとりたいのですが，元のコードで言うとどの部分の修正になりますか。修正後の全コードを教えてもらったほうが助かります。

Ｑ（koshix）：

最初のスタートで次に進むことができなくなりました。

Ｑ（koshix）：

ありがとうございます，うまくいきました。

トップ頁に「かざは の こっき」というタイトルをいれて，かざはの顔写真 kazaha.jpg  437x377 ピクセルを表示するように修正できますか。 kazaha.jpg はkokki.html と同じフォルダにあります。

図：世界の国旗（外務省から編集して引用）

pythonでローカルのウェブサーバを立ち上げ，ngrokでトンネルを設定すると，外部からローカルウェブサーバのコンテンツにアクセスすることができる。そこで，kokki.html（296行）とkazaha.jpgを置いたディレクトリでローカルウェブサーバを立ち上げておけば，ngrokが指定するURLでiPhoneからこの国旗Webアプリが使えるようになった。

python3 -m http.server 8000

ngrok http 8000

https://zzzzzzzzzz.ngrok.io/kokki.html 

問題は，ngrokを無料で使っている限りこのURLが永続的ではないことだ。sakuraインターネットに眠らせてあるWebサイトを起すべきだろうか。ChatGPTを使えば一日一ウェブアプリを公開することができる。

（付）http.server ファイルの中身

import http.server

import socketserver

PORT = 8000

class MyHttpRequestHandler(http.server.SimpleHTTPRequestHandler):

    def end_headers(self):

        # iOS Safari のキャッシュ対策のため

        self.send_header("Cache-Control", "no-store, no-cache, must-revalidate")        http.server.SimpleHTTPRequestHandler.end_headers(self)

Handler = MyHttpRequestHandler

with socketserver.TCPServer(("", PORT), Handler) as httpd:

    print("Serving at port", PORT)

    httpd.serve_forever()