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

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

ニックネームの場合、文字数チェックは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でデザインしています。押すとカチっと押し込めるような感じです。

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

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

　
　　　 　　∧＿ ∧
　　　　　( ﾟωﾟ )
　　　　Ｃ□ 　  l丶l丶
　　　　　/　　(　　 )
　　　　 （ノ￣と、 ｉ
　 　 　 　 　 　 しーJ
　

　
　　　 　　∧＿ ∧
　　　　　( ﾟωﾟ )
　　　　Ｃ□ 　  l丶l丶
　　　　　/　　(　　 )
　　　　 （ノ￣と、 ｉ
　 　 　 　 　 　 しーJ
　

　
　　　 　　∧＿ ∧
　　　　　( ﾟωﾟ )
　　　　Ｃ□ 　  l丶l丶
　　　　　/　　(　　 )
　　　　 （ノ￣と、 ｉ
　 　 　 　 　 　 しーJ