FC2ブログ

スマフォのアプリを作りたい(24):サーバ側の仕掛けを作る②

   プログラミング [2020/06/18]
メインのタイトルからちょっと逸れた話の2回目です。
前回からだいぶ間が空いてしまいました。
それだけ作るのに手間がかかったと言うことです。

この書き込みのシリーズ「スマフォのアプリを作りたい」の大雑把な目的は、スマフォで動作するチャットプログラムを作ることです。
チャットでやり取りするメッセージは音声認識を使って話した内容をテキスト化し、音声とテキスト両方で伝わるようにするつもり。


スマフォ間で音声&テキストのやり取り/共有するためのサーバ側の仕掛けを作ろうとしています。
サーバ側にそれなりのデータベースを置いて、その中のデータを共有していこうという感じです。

ただし、そう考えた途端、ユーザ登録だの、グループを作りたいだの、色々な下準備が必要になってきます。

DBの構成をツールで作る(前回記事の作業)ところまでは、一度の作業でいいのですが、
使用者次第の環境・前提データなんかはちょいちょい追加/変更したくなるもんです。

そうなると、ツールで都度SQL文流してというわけには行かなくて、
テーブル内に前提データを追加/変更するためのスクリプトが欲しくなる。

今回のDBには、ユーザ・テーブル、グループ・テーブル、音声認識時のキーワード・テーブルなんかをそれぞれ準備。
それに、チャットした内容はある程度期限を決めて履歴として残す方針です。

スマフォから使い始める前に、システムを管理する人用のセットアップの仕掛けを作ります。

言語は、PHPです。
以前に作ったCGI(PHP)を参考に作り始めました。
割と膨大な量のスクリプトになりました。

結構トラブルも多かったので、その内容について書きます。


◆Eclipseのデバッグ実行でやっぱりハマった
はずかしいので、詳細は省きます。
さるなので学習能力が低く、以前やった間違いを懲りずにやらかします。
・ワークスペースをどこに置くと楽か。・・・・「xampp/htdocs」の下
・デバッグ実行時に何を選択するとスムーズか。・・・・「PHP Webアプリケーション」

すっかり忘れてて「テキトー」に進めて、結局失敗。

とは言え、以前の書き込み「Eclipse-PHP環境でちょっとハマった」を見ながら穴から脱出。
(ワークスペースごと削除してやり直した。ここの備忘録が役に立つこともある。)


◆HTMLのタグ仕様が変わってる!
Eclipse内のプロジェクトの環境に、まずは素のサンプルを単にコピーして持ってきたら、
htmlを記述している部分でワンサカとワーニングが出ます。
サンプルにするPHPのスクリプト内で生成するHTMLが、だいぶ前に作ったものなので、HTML5対応にはなってません。

HTML4からHTML5に変わったときに廃止になっているタグ仕様があって、それが随所に出てきます。
廃止とは言え、思った通りにならないとかではないのだが、ワーニングマークが表示されていてウザイ
それに本当に問題がある記述をしてしまったときに一目で気付かなくなる恐れがあるので、できるだけワーニングは残さない方がよさそうです。

(1)<table>では、width、cellspacing、cellpaddingなんて属性は廃止
 border="0"という記述もダメとか言われる。
 ↓
 style="属性名:値; ・・・"の形式で<table>タグ内に指定する。
  width="600"  →  width:600px;   (単位は%、px、emとか使い分ける。)
  cellspacing="0"  →  border-collapse:collapse; border-spacing:0;
  cellspacing="5"  →  border-collapse:separate; border-spacing:5px;
  cellpadding="2"  →  padding:2px;
  border="0"  →  border:0;
 ※border="1" は、ワーニングが出ないのでそのままでいいらしい。

(2)<table></table>の入れ子でもワーニング
・・・これはEclipse側の解釈間違いな気もする。
 <table><tr><td><table>・・・</table></td></tr></table>とすると</td>辺りでダメと出る。
 ↓
 <table><tr><td><div><table>・・・</table></div></td></tr></table>とかの<table>関連以外のタグが含まれるとワーニングは消えた。

(3)<frameset>も廃止
 ・・・これは、iframeに置き換えたという事例があった。
 でも、この件は1ファイルで出ただけで、あっちこっちにこのワーニング原因があるわけではないので、そのまま放置。

こんなくらいだったかな。

その次・・・


◆DBへのコネクション
DBをアクセスするためのアカウント(ユーザ)をMySQLに登録します。
既にデフォルトで登録されているアカウントもありますが、自分好みのアクセス権を設定するためには新規に登録した方がよいでしょう。
(そもそも、何でもできちゃうデフォルトのアカウントは本番環境ではあり得ないもの。)

Eclipseの環境では、(ApacheとMySQLを起動しておいて)「http://localhost」をブラウズすると出てくる「phpMyAdmin」で設定することができます。
上記のちょっとだけ詳しい手順は前回記事ご参照ください。

以下はphpMyAdmin上の手順です。

-起動直後の右側の上部にある「User accounts」タブを選択
※上記タブがない場合は左側の上部「phpMyAdmin」と書かれている下のホームアイコンをクリック
-右側にユーザ一覧が表示されている下の「New」欄の「Add user account」をクリック
-ユーザ名、ホスト名(localhost)、パスワードを指定
※Re-type、Authentication・・・は何のことが分からないので触らなかった。
-「パスワードを生成する」の(生成する)ボタンをクリックし、入力欄に表示される文字列をメモ
-「グローバル特権」下に必要なSQL処理をチェック
※後でテーブル毎の設定もできるようです。
-「SSL」欄は触らず(さるは意味が分からないから)右下の(実行)ボタンをクリック

PHP上では「$this->mysqli = new mysqli(ホスト名, ユーザ名, パスワード, スキーマ名);
とかで、DBに接続するわけですが、パスワードは上記の手順で生成した文字列を指定します。


◆ブラウザから起動したスクリプトのデバッグ
この後に出てくる、問題点の解析のための前振りです。
通常のブラウザからスクリプトをブラウズしてEclipse上のタスクとしデバッグする方法があります。

URLの後ろに「?XDEBUG_SESSION_START=xxx」を付けるとできます。
xxxは何でもいいみたいです。例えば、
http://localhost/teburarec/operator/login.php?XDEBUG_SESSION_START=SARU
とかでやると、起動してあるEclipse側に制御が来ます。
Eclipseの画面内の「デバッグ」タブ内に「PHPデバッグ[Remote PHP Launch]」というタスクが表示されます。

念のため、Eclipse側での設定内容を以下に書きます。
-[ウィンドウ]-[設定]メニュー選択
-設定ダイアログの左側リストから「PHP」-「デバッグ」を選択
-左側の設定項目表示の中の「サーバ設定」が「Default PHP Web Server」で、
 「デバッガー」が「XDebug」であることを確認。
 ※違ってたら、変更する方法は、別途調べてください。
-最下部の「最初の行でブレーク」をチェック
 ※その方が面倒でも、最初の絞り込みをする場合は、上記指定が良いかと思います。
-設定内容を変更した場合は、[適用して閉じる]をクリック

予めブラウザ上の操作で実行されるスクリプト(PHP)上にブレークを仕掛けておけば、そこを通ったときにブレークします。

ちなみに、Eclipse上で標準的にデバッグできるのは、PHPで書かれたサーバ側で動作する部分のみです。
Eclipseの環境にJavaScript Development ToolsとかEclipse Web Developer Toolsとかのプラグインを追加すれば、JavaScript部分もデバッグできるそうです。

ですが、面倒だったのでプラグインは止めて、Chromeのデベロッパーツールを併用してデバッグしました。
デベロッパーツールは重たくて、動作が緩慢で効率がよくありません。なのでオススメはできません。


◆ブラウザ上での動作時にセッションが途切れる
管理用のスクリプト(CGI)にもログイン機能を設けました。(誰でも使えるようにする必要はないから。)
ログインしたアカウントIDとかをページを跨いで引き継いで、その都度権限チェックをするのが一般的だと思います。
引き継ぎ方は、「セッション」を開始して「$_SESSION[・・・]」として渡すのが常套手段・・・だと思っている。

今回もその手法をそのまま使おうとしたのですが・・・

Eclipseの環境下では、ページのリンク先でも問題なく「$_SESSION[・・・]」が見えたのですが、
普通のブラウザ上では、ログイン後の最初のページでは設定されていないことになってます。
「セッションが切れている」と思われます。
その対応策をあれこれぐぐって試してみました。

参考:http://web-apl.com/php-%e3%82%bb%e3%83%83%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%8c%e6%b6%88%e3%81%88%e3%82%8b%e4%bb%b6%e3%80%90%e8%a7%a3%e6%b1%ba%ef%bc%81%e3%80%91/→(https://www.php.net/manual/ja/function.session-start.php)
参考:https://web-apl.com/php-%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%8C%E6%B6%88%E3%81%88%E3%82%8B%E4%BB%B6%E3%80%90xampp%E3%81%AE%E5%A0%B4%E5%90%88%E3%80%91/
参考:https://blog.miyadi.net/archives/1585

まとめると
1.『クッキーに基づくセッションを使用している場合、ブラウザに何か出力を行う前に session_start() をコールする必要があります。』
→そりゃまあ、たぶん〇

2.『php.ini内でsession.auto_start=1、output_buffering=4096かONでなければならない。』
→session.auto_startは1に変更した。

3.たくさん書いてありました。
・『sessin_start() は→× 1.と同じことが言いたいのかな?だったら〇。
・『header リダイレクト後のスクリプト終了は exit(); で行うべし。』
→〇 そうなってた。
・『ブラウザの cookie が使用可能になっていること。』
→〇 そうなってた。
・『php.ini の register_globals が off になっていること。phpinfo() を呼んでも設定を確認できる。』
→〇 そうなってた。
・『session を明示的に消したり空白にしていないこと。』
→〇 それを証拠にEclipse内のローカルブラウザでは動いている。
・『$_SESSION グローバル変数をどこかで上書きしていないこと。』
→〇 上記に同じ。
・『リダイレクト先が同じドメインであること。ドメインが異なるとセッションは引き継がれない。』
→〇 さすがにそれは・・・
・『ファイルの拡張子が .php であること。』
→〇 もはや・・・

2.だけ変更が入りました。
ただし、変更後の動作も変わりません。

念のため、渋々Edgeを使ってみました。
すると、あれ?問題ない!

ってことは、Chrome側の設定に問題ありということか?
現象の詳細としては、
ログイン動作の最後に、念のためsession_destroy()したあとにsession_start()して、$_SESSION[・・・]にデータを設定しています。
header()リダイレクトして、リダイレクト先の先頭で行うログインチェック内でsession_id()をやると、IDが取得できて、かつ前のセッションIDと異なる値が帰ってきてます。
既に新しいセッションがstartされているということなんではないかと。

「Chromeでセッションが切れる」で検索すると、たいてい
・Coockieがブロックされているんじゃ?
・favicon.icoがルートにないからじゃ?
とか引っ掛かりましたが、どうもそうでもない。

さんざん、調べてギブアップしそうになったとき、一度Chromeを終了させました。
また、php.iniで唯一変更したsession.auto_startを元の0に戻した。

それで、Chromeを再起動して、もう一度ブラウズしたら・・・
あれ? 動いた。

結局、Chrome側/サーバ側の設定をどのタイミングなのか分からないが、変えてたのかもしれない。
Chromeを動作させたままだと、変更した設定が有効にならないみたい。

でも変だな~、結局元の設定のままのハズなのに。
もう、原因は闇の中です。


◆ソースがロールバックされちゃった!
ソース(スクリプト)を書きながら、デバックしてまずいところを順次潰していくやり方をしてました。
サーバスクリプトの機能は10個くらいを予定していて、画面上にメニューを表示して、その機能のスクリプトをキックする仕掛けです。
メニュー毎にスクリプトファイルが4~5個にして実装しました。

あるとき、デバッグの手を止めて、エクスプローラ上で過去の全く関係ないファイル複数個を圧縮しようとしたところ、誤ってどっかのフォルダに移動させてしまったみたい。
こんな時はすぐさまエクスプローラ画面をアクティブにしたままUnDo(Ctrl+Z)すればいいと思ってやったのですが、なんか元に戻った気がしなかったので、UnDoを連打・・・

それが原因かどうかは分からなかったのですが、
その後、Eclipse画面に制御を戻してデバッグを再開しようとしたところ、さっきまで、編集していた「ファイルが無い」と警告された。
???
Eclipse上のプロジェクト・エクスプローラをリフレッシュしてみると、確かに問題のスクリプトファイルは無くなっていて、ベースにしたスクリプトソースがそのフォルダに残っていた。
思い起こせば、そのスクリプトファイルをリネームして編集し始めたんだった。
しかも、2ファイルがそんな状態。中身も当然編集前の内容。
がーん。一日くらい掛けた分の修正が元に戻っちゃってます。

どういうこと?
ショックで一時放心状態。

Eclipseの機能で何とかならんのか?
調べたらありました。


手順としたら、以下になります。
1)まずは、無くなったスクリプトファイルと同名のファイルを作ります。
 今回の場合、ベースになったファイルをもう一回リネーム。

2)Eclipse上のプロジェクト・エクスプローラの表示を再度リフレッシュ
 変になる前のスクリプトファイルの構成に戻ります。

3)プロジェクト・エクスプローラ上で中身がロールバックされたスクリプトファイルを右クリックし、プルダウンメニューの「比較」-「ローカル・ヒストリー」と選択します。 比較ダイアログか「ヒストリー」タブが表示されます。

4)修正履歴リストが表示されるので、改訂時刻の最も新しいものをダブルクリックします。

5)現状のファイル内容と改訂時の内容のコンペア結果が表示されます。

6)コンペア表示の右上側にアイコンがいくつか表示されているので、その左から2番目「右から左に全ての非競合をコピー」をクリックします。

7)スクリプトファイルが編集された状態になっているので、ファイルをセーブします。

問題が発生する直前の未セーブの修正分は消えますが、それ以前の修正までは戻せました。

やれやれ。冷汗掻いたぜ。



こんくらいだったかな・・・
ともかく必要最低限のスクリプトは作りました。
20200617_1.jpg

それを使って、素のDBデータも入力しました。

というわけで、次回からまたスマフォ側開発に戻ります。

では、この辺で。御機嫌よう。
(m__)m
スポンサーサイト





コメントの投稿

非公開コメント

カレンダー
01 | 2024/02 | 03
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 - -
プロフィール

さるもすなる

Author:さるもすなる
さるです。別HPサイト「さるもすなる」から侵食してきました。 山菜/きのこ、それとタイトルにしたPPバンド籠のことをメインに徒然に・・・・暇を持て余したさるの手仕事:男手芸のブログってことで。

最新記事
最新コメント
月別アーカイブ
カテゴリ
天気予報

-天気予報コム- -FC2-
本家のHPのトップ
山菜や茸の話です
PPバンドの籠作品と作り方です
投稿をお待ちしております



PVアクセスランキング にほんブログ村 にほんブログ村 ハンドメイドブログへ



マニュアルのお申し込み



検索フォーム
リンク
RSSリンクの表示
ブロとも申請フォーム

この人とブロともになる

QRコード
QR