ニックネーム変更処理で唯一未実装だったサーバ側のユニークチェックですが、結局ajaxを使って実装を済ませました。

クラアント側はjQueryを、サーバ側はphpを使っています。最終的にコードは以下のような形になりました。

ajax使ったとか言いつつ async:false で同期処理にしています。なんかカッコ悪いな・・・

クライアント側：

    function change_nickname() {
        bExit = false;
        nickname = ""
        while(!bExit) {
            nickname = window.prompt("新しいニックネームを入力してください", nickname);
            
            if (null == nickname) {
                // キャンセル
                bExit = true;
            } else {
                nickname = jQuery.trim(nickname);
                if (nickname.length < 3 || 30 < nickname.length) {
                    alert('ニックネームは3文字以上30文字以下で入力して下さい。');
                } else if (nickname.indexOf(' ') != -1 || nickname.indexOf('　') != -1) {
                    alert('ニックネームにスペースを含めることは出来ません。');
                } else {
                    var exist = $.ajax({
                      url: "ncc/" + encodeURIComponent(nickname),
                      async: false
                     }).responseText;
                    if ('1' == exist) {
                        alert('すでに存在するニックネームです。違うニックネームを入力して下さい。');
                    } else if ('0' == exist) {
                        bExit = true;
                        $("#formNickName").submit();
                    } else {
                        bExit = true;
                        alert('予期しないエラーです。お手数ですがもう一度やり直して下さい。');
                    }
                }
            }
        }
    }

サーバ側：

〜 略 〜
class UserController extends Controller
{
    public function ncc(Request $request, $nickname) {
        try {
            $nickname = rawurldecode($nickname);
            〜 略：ここでDBアクセスしてニックネームの重複チェック。存在すれば return '1' 〜
            return '0'; // 重複してなければ 0 を返す
        } catch (Exception $e) {
            〜 略：エラー処理 〜
        }
    }
〜 略 〜

Lumenの設定ファイル：

〜 略 〜
$router->get('ncc/{nickname}', 'UserController@ncc');
〜 略 〜

今日は”そのほか”画面のニックネーム変更処理を一部を除き実装しました。

入力チェックって結構労力使いますよね。入力項目が何百とかあればバリデータとか使うんですが、１、２個ですし、画面構成が結構特殊なので自力で実装しています。

ニックネームの場合、文字数チェックはjsだけで出来るのですが、ユニークチェックがサーバ処理になるため、一旦画面遷移が入ってしまいます。ここら辺をどう綺麗に実装しようかと悩んでいました。ajax使うのもなぁ・・・

今日はQ&Aのページとサポートサイトへのリンクを作成しました。

スマホ版のQ&Aは以下のようになりました。

Q&Aのページにはテキスト漫画が配置され、動きます！

サポートサイトへのリンクはSafariで開きます。ガワネイティブアプリ(WKWebView)から以下のようなコードを書くことでSafariを起動してサイトを表示することが出来ます。

swiftのバージョンは4.0.3です。swiftのバージョン頻繁に変わりすぎ・・・。Safariで開く方法調べても、ほとんどが古いコードで使えなかったです。死ぬほど苦労して作成したコードは以下の通りです。

このコードを利用された方はテキスト漫画のサイトでテキスト漫画を1つ登録してくれると嬉しいなあ・・・。作りかけっぽいのを完成させるだけでも良いです。

class ViewController: UIViewController, WKUIDelegate, WKNavigationDelegate{
〜略〜
        webView.uiDelegate = self
        webView.navigationDelegate = self
〜略〜
func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
        
        guard let url = navigationAction.request.url else {
            decisionHandler(.cancel)
            return
        }
        // サポートサイトへのリンクか判定
        if url.absoluteString.range(of: "support/textmanga") != nil {
            // Safariで開く
            UIApplication.shared.open(url, options: [:], completionHandler: nil)    // iOS 10以降
            decisionHandler(.cancel)
            return
        }
        decisionHandler(.allow)
    }

テキスト漫画サイトのアプリ版について、当初はメニュー画面から”つかいかた”画面にリンクする予定でした。

しかし２段階で画面が構成されると操作手順が増えてしまうので、以下のようにタイトルの”つかいかた”へのリンクを”そのほか”にして

“そのほか”の画面に、以下のようにIDやニックネームの変更、QAなどへのリンクを配置するようにしました。

尚、IDは端末を引き継ぐ時などに利用出来ます。ニックネームは作ったテキスト漫画を他の人に見てもらう際に表示されます。

また、従来の”つかいかた”画面に存在した”コピーのしかた”や”編集のしかた”は説明不要と判断して追加しないか、もし追加するとしてもQA内で説明することとしました。

本日は昨日の構想を元に実装しました。スマホユーザは自動ログインし、３つの表示モードを使えるようになります。

１を選ぶと自分専用のテキスト漫画が表示されます。まだ１つも作っていません。

２を選ぶと誰でも編集可能なテキスト漫画が表示されます。

３を選ぶと他の人専用のテキスト漫画が表示されます。コピーして使うことは出来ます。

今回は、ページ切り替えの調整と、スマホで自動ログインして「じぶんのまんが」「みんなのまんが」「他の人のまんが」の表示モードをどう切り替えるか構想を練っていました。

ページ切り替えについては、スマホは20件分のページ切り替えを一度に表示、PCサイトは50件分のページ切り替えを一度に表示するよう調整しました。

表示モードについて、スマホ版は以下３つのメニューがあります。

１.じぶんのまんが
２.みんなのまんが
３.他の人のまんが

１の場合は、PCサイトログイン後の「自分専用のみ表示」のチェックボタンをオンにした場合と同等機能になります。２は自分以外のテキスト漫画を表示する新たなモードです。
３も自分以外の人専用のテキスト漫画を表示する新たなモードです。

各メニューの具体的なスマホ版の実装としては、

１はidfvを使って自動ログインし、自分のidのテキスト漫画のみ表示します。
２は、PCサイトで「誰でも可」を指定して作成されたり、スマホの２のメニューで作成されたみんなのテキスト漫画を表示します。
３は、PCサイトで「自分専用」を指定して作成されたり、スマホの１のメニューで作成されたみんなのテキスト漫画を表示します。ただし自分で作成したテキスト漫画は除きます。

あとは、出来ればPCサイトとスマホと両方共通のIDでログインできる仕組みが欲しいかな・・・まあそれは後々実装でも良いかな。

表示モードについては明日実装を進める予定です。

昨日の作業の続きです。編集画面のスマホ用デザインが完成しました。

iPhoneX対応済みです。ディスプレイギリギリまで”無駄に”有効活用しています。

ついでに、テキスト漫画サイトで作成された「彼氏の財布がマジックテープ式だった死にたいActiveAA」をご覧ください。

　支払いは任せろーﾊﾞﾘﾊﾞﾘ
ﾊﾞﾘﾊﾞﾘ 　　∧＿ ∧ﾊﾞﾘﾊﾞﾘ
　　ﾊﾞﾘﾊﾞﾘ( ﾟωﾟ )　ﾊﾞﾘﾊﾞﾘ
　ﾊﾞﾘﾊﾞﾘＣ□ 　  l丶l丶ﾊﾞﾘﾊﾞﾘ
　ﾊﾞﾘﾊﾞﾘ　/　　(　　 ) ﾊﾞﾘﾊﾞﾘ
ﾊﾞﾘﾊﾞﾘ　 （ノ￣と、 ｉﾊﾞﾘﾊﾞﾘ
　 　 　 　 　 　 しーJ
　

今回もテキスト漫画サイトのアプリ版作成です。今日は編集画面のスマホ用デザインをcssやjsで作り込んでいました。

コマ表示の文字を押しボタン式にcssでデザインしました。押すとカチっと押し込めるような感じです。再生も押しボタン式にしました。

コマ選択表示部分はjsで押したデザインと浮いているデザインを切り替える必要があり、その作り込みの途中です。明日には編集画面のデザインが完成しそうです。

今回は、テキスト漫画サイトのアプリ版について、ページ切り替えを使いやすくしました。

ページ切り替えリンクを一度に全て表示するのではなく、ある程度ずつ表示して、矢印 > で切り替え可能としました。

これでテキスト漫画が１００億件登録されても大丈夫です。多分。

皆様、お正月はいかがだったでしょうか？楽しめましたでしょうか？

私のお正月は年末の掃除が楽しくて、年明けもズルズルと楽しく掃除してました。

　　　 ＿　　
　γ´ヽ　_ヽ　^ ,, ^
　　0､ γ´, ‐- (Ｕ ｀ω) 　　
　　　 `0─‐´ (:::::::o､ヽo 　　
　 　  　 　 　し─Ｊ＼ヽ、))　
　　  　 　   　 　 　　＼ヽ、　
　　 　 　　 　 　 　　､‐ヽヽ- 、　　　　 　
　　　　　　 　 　 　　`======
ウィ〜ンンン

開発が滞っていましたが、本日から再開しました。テキスト漫画のガワネイティブアプリ化ですが、今回はリスト画面のスマホ特化デザインを作成しました。

表示順序や、表示しているページのリンクを押しボタン式にcssでデザインしています。押すとカチっと押し込めるような感じです。

コピーや編集リンク文字のデザインを変更したり、テキスト漫画の表示部分に薄く色をつけたりもしました。

シンプルで見やすくなったのではないかと思っています。