質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.35%

  • PHP

    21275questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    17480questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Ajax

    1150questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

自作サイトでスマホからログインできない問題

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 395

otftrough

score 343

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

<!DOCTYPE html>
<html>
<head>
    <title>メモ</title>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        function login(){

            $(function(){

                $.ajax({

                    type: "post",
                    url: ".",
                    data: "id=" + newLine(document.getElementById("id").value, " ", "+") + "&pw=" + newLine(document.getElementById("pw").value, " ", "+"),
                    done: location.reload()
                });
            });
        }

        function logout(info){

            $(function(){

                $.ajax({

                    type: "post",
                    url: "logout.php",
                    data: "info=" + newLine(info, " ", "+"),
                    done: location.reload()
                });
            });
        }

        function save(){

            $(function(){

                $.ajax({

                    type: "post",
                    url: "write.php",
                    data: "text=" + newLine(newLine(newLine(document.getElementById("div").innerText, " ", "+"), "\n", "<br>"), "'", "''") + "&username=" + newLine(document.getElementById("username").innerText, " ", "+"),
                    success: alert("success!")
                });
            });
        }

        function newLine(text, a, b){

            var cl = a.length;
            if(text.indexOf(a) < 0) return text;
            while(text.indexOf(a) >= 0){

                text = text.substring(0, text.indexOf(a)) + b + text.substring(text.indexOf(a) + cl);
            }
            return text;
        }
    </script>
    <style type="text/css">
        body{
            position: relative;
        }
        #login{
            position: relative;
            text-align: right;
        }
    </style>
</head>
<body>
<div id="login">
<?php
    $user = $_SERVER['REMOTE_ADDR'] . $_SERVER['HTTP_USER_AGENT'];
    $sqllogin = file_get_contents('../info/mysql/mysql.php');
    $sqllogin = substr($sqllogin, 6, mb_strlen($sqllogin) - 9);
    $sqltxt = explode(",", $sqllogin);
    $link = new mysqli($sqltxt[0], $sqltxt[1], $sqltxt[2], $sqltxt[3]);
    $login = "";
    //password(username, password), info(username, userinfo)
    if($link -> connect_error) echo "接続失敗";
    else{
        //ログイン
        $id = $_POST['id'];
        $password = $_POST['pw'];
        if($id != "" && $password != ""){

            if($result = $link -> query("select password.password from password where password.username = '" . $id . "'")){
                if($row = $result -> fetch_assoc()){

                    if($row['password'] == $password){

                        if($result = $link -> query("delete from info where info.userinfo = '" . $user . "'")){

                            if($result = $link -> query("insert into info (username, userinfo) values('" . $id . "', '" . $user . "')")){

                                echo $id . "でログイン中<input type=\"button\" value=\"ログアウト\" onclick=\"logout('" . $user . "')\">";
                                $login = $id;
                            } else echo "ng";
                        } else echo "ng";
                    } else echo "ng";
                } else echo "ng";
            }
        }
        //ユーザーの検索
        else if($result = $link -> query("select info.username, info.userinfo from info where info.userinfo = '" . $user . "'")){
            if($row = $result -> fetch_assoc()){

                echo $row['username'] . "でログイン中<input type=\"button\" value=\"ログアウト\" onclick=\"logout('" . $user . "')\">";
                $login = $row['username'];
            } else {

                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>";
            }
        }
    }
    $link -> close();
?>
</div>
<span style="display: none;" id="username"><?php echo $login; ?></span>
<div style="position: fixed; left: 0px;">
    <input type="button" onclick="save()" value="保存" style="font-size: 3em;">
</div>
<div style="border: solid 1px black; margin-top: 5em" contenteditable="true" id="div">
<?php
if($login != ""){
    $sqllogin = file_get_contents('../info/mysql/mysql.php');
    $sqllogin = substr($sqllogin, 6, mb_strlen($sqllogin) - 9);
    $sqltxt = explode(",", $sqllogin);
    $link = new mysqli($sqltxt[0], $sqltxt[1], $sqltxt[2], $sqltxt[3]);
    if($result = $link -> query("select memo.memo from memo where memo.username = '" . $login . "'")){

        if($row = $result -> fetch_assoc()){

            echo $row['memo'];
        }
    }
}
?>
</div>
</body>
</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の時で動作は変わりませんでした。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • mts10806

    2018/07/06 06:15 編集

    >done() ちゃんと調べて書いてください。お作法丸々無視じゃないですか。動かないものを量産しているだけですよ。既に指摘があるように基礎から見直された方が良いかと。もう最初から作り直した方が楽なレベルです。

    キャンセル

  • sysjojo

    2018/07/06 10:16

    参考までに、スマホの接続がWi-Fiではなく、3GやLTEの場合、透過プロキシが動作している場合があり、それが原因でキャリアAではOKなのにキャリアBではNG、といったことがあります。私が経験したのは3年くらい前の話ですが、MVNO等ではカウントフリーオプション等を提供しているところもあるので、採用しているキャリアは増えているのではないかと思います。そういったものの可能性があるので、Wi-Fiで試した時と基地局に繋いだときとで動作が変わらないか、等も追記されるとよいかもしれません。

    キャンセル

  • razuma

    2018/07/25 12:17 編集

    問題解決の方法として、どこまで動いているのか、どの部分が動いていないのかを特定していくと良いと思います。今回の例でいくとどこの処理に入らないからログイン処理が走らないのか?DBに接続はできているのか、postパラメータは受け取れているのか、DBに値は保存されているのか、どのクエリーで値が取れていないのかなどなど。そこで動いていない箇所が特定できてなぜそこが動かないかを考えると言う風になると思います。全体ソースがあれば私がデバッグすることもできますが、上記情報だけだと足りない部分を補って正常ではない状態を作り出さなければならないため少々時間がかかりそうなので一旦はご参考までにコメントとして残しておきます。

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • PHP

    21275questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    17480questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Ajax

    1150questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。