WEBサービスというほどのものではありませんが、自分がちょっとメモを残す用とPHPの勉強用に作っているものがあります。
メモ ← こちらです。
人に見られたくない内容を書いたり、複数のメモを残すことができるように、アカウントを作ってアカウント1つにメモ1つという風にしています。
PCでは普通に動くんですが、スマホ(iPhone)だとログインができません。
ログインボタンは、タグのonclick属性でjavascriptの関数(function login())に飛んで、その中でajaxでログイン用のphpファイルにアカウント名とパスワードをPOSTで送っています。
なぜかというと、アカウント作成用のフォームの中に、作成ボタン(type=submit)とログインボタン(type=button)を置いてあって、テキストボックスを共用しているからです。
下記のコードを見るとわかりますが、ログインボタンは自分自身(index.php)にpostでデータを送った後でlocation.reload();
でindex.phpをリロードしています。
ログイン処理は、具体的には、データベースにアカウント名とIPアドレス+端末情報を保存しているだけで、ページをリロードすることでそのアカウント名に紐づいたメモを表示するという内容です。
スマホでログインしようとすると、ただリロードされるだけでログイン処理がされません。
なぜでしょうか?
解決方法は何となく検討ついていますが、原因がわからないので考えてほしいです。
index.php
php
1<!DOCTYPE html> 2<html> 3<head> 4 <title>メモ</title> 5 <meta charset="utf-8"> 6 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> 7 <script type="text/javascript"> 8 function login(){ 9 10 $(function(){ 11 12 $.ajax({ 13 14 type: "post", 15 url: ".", 16 data: "id=" + newLine(document.getElementById("id").value, " ", "+") + "&pw=" + newLine(document.getElementById("pw").value, " ", "+"), 17 done: location.reload() 18 }); 19 }); 20 } 21 22 function logout(info){ 23 24 $(function(){ 25 26 $.ajax({ 27 28 type: "post", 29 url: "logout.php", 30 data: "info=" + newLine(info, " ", "+"), 31 done: location.reload() 32 }); 33 }); 34 } 35 36 function save(){ 37 38 $(function(){ 39 40 $.ajax({ 41 42 type: "post", 43 url: "write.php", 44 data: "text=" + newLine(newLine(newLine(document.getElementById("div").innerText, " ", "+"), "\n", "<br>"), "'", "''") + "&username=" + newLine(document.getElementById("username").innerText, " ", "+"), 45 success: alert("success!") 46 }); 47 }); 48 } 49 50 function newLine(text, a, b){ 51 52 var cl = a.length; 53 if(text.indexOf(a) < 0) return text; 54 while(text.indexOf(a) >= 0){ 55 56 text = text.substring(0, text.indexOf(a)) + b + text.substring(text.indexOf(a) + cl); 57 } 58 return text; 59 } 60 </script> 61 <style type="text/css"> 62 body{ 63 position: relative; 64 } 65 #login{ 66 position: relative; 67 text-align: right; 68 } 69 </style> 70</head> 71<body> 72<div id="login"> 73<?php 74 $user = $_SERVER['REMOTE_ADDR'] . $_SERVER['HTTP_USER_AGENT']; 75 $sqllogin = file_get_contents('../info/mysql/mysql.php'); 76 $sqllogin = substr($sqllogin, 6, mb_strlen($sqllogin) - 9); 77 $sqltxt = explode(",", $sqllogin); 78 $link = new mysqli($sqltxt[0], $sqltxt[1], $sqltxt[2], $sqltxt[3]); 79 $login = ""; 80 //password(username, password), info(username, userinfo) 81 if($link -> connect_error) echo "接続失敗"; 82 else{ 83 //ログイン 84 $id = $_POST['id']; 85 $password = $_POST['pw']; 86 if($id != "" && $password != ""){ 87 88 if($result = $link -> query("select password.password from password where password.username = '" . $id . "'")){ 89 if($row = $result -> fetch_assoc()){ 90 91 if($row['password'] == $password){ 92 93 if($result = $link -> query("delete from info where info.userinfo = '" . $user . "'")){ 94 95 if($result = $link -> query("insert into info (username, userinfo) values('" . $id . "', '" . $user . "')")){ 96 97 echo $id . "でログイン中<input type=\"button\" value=\"ログアウト\" onclick=\"logout('" . $user . "')\">"; 98 $login = $id; 99 } else echo "ng"; 100 } else echo "ng"; 101 } else echo "ng"; 102 } else echo "ng"; 103 } 104 } 105 //ユーザーの検索 106 else if($result = $link -> query("select info.username, info.userinfo from info where info.userinfo = '" . $user . "'")){ 107 if($row = $result -> fetch_assoc()){ 108 109 echo $row['username'] . "でログイン中<input type=\"button\" value=\"ログアウト\" onclick=\"logout('" . $user . "')\">"; 110 $login = $row['username']; 111 } else { 112 113 echo "メモを使うには、新しいアカウントを作成してください。<br><form action=\"newaccount.php\" method=post name=form><input type=text placeholder=アカウント名 name=id id=id><input type=text placeholder=PassWord name=password id=pw><input type=submit value=作成><input type=button value=\"ログイン\" onclick=\"login()\"></form>"; 114 } 115 } 116 } 117 $link -> close(); 118?> 119</div> 120<span style="display: none;" id="username"><?php echo $login; ?></span> 121<div style="position: fixed; left: 0px;"> 122 <input type="button" onclick="save()" value="保存" style="font-size: 3em;"> 123</div> 124<div style="border: solid 1px black; margin-top: 5em" contenteditable="true" id="div"> 125<?php 126if($login != ""){ 127 $sqllogin = file_get_contents('../info/mysql/mysql.php'); 128 $sqllogin = substr($sqllogin, 6, mb_strlen($sqllogin) - 9); 129 $sqltxt = explode(",", $sqllogin); 130 $link = new mysqli($sqltxt[0], $sqltxt[1], $sqltxt[2], $sqltxt[3]); 131 if($result = $link -> query("select memo.memo from memo where memo.username = '" . $login . "'")){ 132 133 if($row = $result -> fetch_assoc()){ 134 135 echo $row['memo']; 136 } 137 } 138} 139?> 140</div> 141</body> 142</html>
追記
参考にしたサイトや書籍はありません。
知りたいことだけをひとつづつ調べて自分で適当に設計しました。
セキュリティについては今のところ気にしていません。
今年中に有料の良いサーバーを借りてもちろんSSLも入れるつもりです。
今は無料のレンタルサーバーで練習用に色々な方法を試しているだけなのでそこは気にしないでください。
データのバックアップですが、今のところ重要な文章を保存していないし消えても大丈夫です。
デバッグですが、どうやって何を使ってするのでしょうか?
僕はテキストエディタで書いたものをアップロードして実際の環境で試して、Chromeのコンソールでエラーの確認をしています。
iPhoneのsafari及びLINEアプリのブラウザで確認をした時にログインできなかったのですが、これらはどうやって処理の内容を追うのでしょうか?
初歩的な質問ですみません。
追記2
location.reload()をdone:に書きました。PCでの動作は改善しましたが、スマホでは変化なし
MySQLのログイン情報は、txtファイルに書いていたのをやめてphpファイルに書きました。
さらに、ファイルをパスワード制限のかかったフォルダに移動しました。
Chromeのデバイス切り替えの機能について調べました。
こんな便利な機能があったんですね。同じようにログインができなくなりました。
上記のソースコードは現在最新のものに書き換えてあります。
追記3
すみません、確かにdone()は適当でした。
ajaxは始めたばかりでほとんどなにも知りません。勉強します。
確かに最初から作り直したほうが楽だとは思います。
それと、わざわざindex.phpで処理をせず、formで別のphpファイルを呼んでそっちで押されたボタンのvalueを取得して処理したほうが確実だとはわかっていますが、なんか興味本位でやってるだけです。
この質問は、「解決方法はわかってるけど今なぜこうなっているのかが知りたい」です。
スマホがWi-Fiの時と4Gの時で動作は変わりませんでした。
あなたの回答
tips
プレビュー