2017.10.5
Livvon#16【郵便番号の自動入力ライブラリ】
予定が予定の体を為さなくなっていますが、延々とプロフィール画面の編集をしています。
デザインをああでもないこうでもないとかいいながらやってると時間を延々と吸い取られていきます。つらい。構造が決まってさえいればもっとはやくできるのに。
とりあえず目標としては8日までにSNS連携･･････せめてTwitterだけでも連携させるというのが目標です。
TwitterAPIの使い方自体は自動ツイートの時にやりましたし、そもそも自動ツイートすらさせる必要なく、単なる個人認証以上の意味を持ち得ないので、そんなに難しくはないのかなぁといった感じはします。IDと名前ぐらいを取得するぐらいですかね？
鍵アカでも、存在ぐらいは確認できると個人認証としての意味を持ちますかね。とりあえずただIDを貼るだけってのはいくらでも詐称できるので却下です。本人じゃないと意味ないぴよでございます。
同様のことをFacebookでもやれたらなーと思ってますが、どーなんでしょうね。Facebookログインはなんか一応動いてるっぽいけど僕自身があまり仕組みを理解していない･･････笑
で、本題ですね。住所を郵便番号から自動取得させるようなシステムにします。というかユーザーになるべく編集させないようにしたいです。
割と簡単に実装できそうだなあ、って思ったのがAjaxZip3なので、これを使ってみると･･････
こうなります。めでたし。
ユーザーに編集はさせたくないので、readonly属性をつけたりしていじいじしてこの形に落ち着きました。まぁそれっぽく動くので今はいいとしましょう。
･Livvon#17【プロフィール画面で四苦八苦】
なんかここ数日ずっとプロフィール画面作ってていくらなんでも作業遅すぎじゃないか？って自分でも思うのですが、きっつい問題にいま直面してるわけですね。
というのもプロフィールの更新がビューに反映されない。
原因はわかってます。データベースを更新して、その結果をビュー表示前に読み込めないんですよね。そのためにいままでリダイレクトして誤魔化してきましたが、今回はリダイレクトが使えません。
何故か。プロフィールを更新しました、ってアラートが出せないからですね。リダイレクトしちゃうとフラグも渡せません。まぁ最悪パラメータとして無理やり渡せばって感じしますけどめちゃくちゃ不格好ですね。
ざっと解決法を考えてみましょう。
1.パラメータつきリダイレクト
つまり、フラグとなるパラメータを付与してリダイレクトしたら、更新したかどうかわかりますね。
欠点はURLがダサいことですね。
2.クッキーを使う
正直ドン引きするような誤魔化し方ですけど、バレなきゃいいのかなぁみたいなとこあります。
問題はロジックとして美しくないし、変にクッキーとかかませると後々トラブりそうなんだよなぁ･･････。あんまりいい予感はしない。
3.Ajaxに組み替える
Instagramなんかがこのパターンだと思われます。要するに画面に「更新しました！」って出すだけでいいんですね。現実解です。
何故やらないのかっていうと理由は単純でバリデーションめんどくせえ･･････。
バリデーションとエラー表示は、ほんとはフレームワークに丸投げしたいんですよね･･････やりたくない･･････。
4.ビュー上でハードコーディング
だったらビューを呼び出した時にDBアクセスしちまえっていう案ですね。たぶん一番ラクかなと思います。
欠点は純粋に汚いってとこですね。ビューにロジックが入り込むとそれだけで保守性が大幅ダウンしてみんなの迷惑ですが、一番手っ取り早いのでこれにしましょう。
ってことで、実装はしたんですが今度はたまに原因不明のMethodNotAllowedが発生するという地雷を抱えることになりました。
･･････またこのパターンかと思うと辛い･･････。
諦めてAjaxで書くか･･････。はぁ、、、
まず実装としては、Ajaxで送信してなんかエラーがあったら配列を受け取ってこねこねしたいですね。
ただ、一応そーいう使い方を想定されているみたいで、フォームバリデーションを使った時にいい感じにjsonフォーマットにして返してくれるみたいですね。
というわけで超ぉ頑張って作った。
想像通り、バグと格闘して移植に5時間ぐらいかかりました。言うて新規に書いたのAjax部分ぐらいでコントローラーはそんなに触ってないんですけどね。
ただ、住所まわりが結構厳し目なんですよね。
どこが厳しいのかっていうと･･････
・ジオコーディングできなくてはいけない
・絶対に間違いがあってはならない
という2つの条件をクリアしなくてはいけないんですよね･･････。
これ、住所を入力させてジオコーディングできたらOK、ってことにしてるんですけど、実はこれ重大なバグがあって変な結果を拾った結果ユーザーの入力が無視されるというはた迷惑な仕様にしてるんですよね。
まぁなんでそんなことになってるのかっていうと、検索画面でピンを刺して表示させる必要がある都合上、まず最低条件として「GoogleAPIが拾ってこれること」を挙げた結果、そっちが優先されるようになっちゃったんですよね。
まぁ、さすがに現実が嘘に塗り替えられる状況はまずいことぐらい、さすがにろんぐさんでも理解できるのでなんとかしたいなーとは思っているんですが、どうしましょうね。
1.郵便番号バリデーション
つまり郵便番号が一致しなかったらエラーとして外に放り出すわけですね。いちおうAPIの結果は受け取れますし。
郵便番号が一緒ならまぁ、そんな致命傷にはならんでしょ、っていう。
2.住所変更を別ロジックに追いやる
要するに専用の画面を用意するわけですね。あーーーーめんどくせ。
まぁメリットとしては確認画面が作れることですね。ほんとにこの場所で合ってるんですか？間違ってたら訂正してねっていう。
でもそうだよなぁ。LATLNG情報との整合性の確認は、人間の目でやってもらわなきゃこまるか･･････。
でも、どっちにしろ新規登録画面も改良しなきゃだし、そっちに組み込みやすいよう別画面にするのが賢い･･････のか･･････？作業が増えるのやなんだけど･･････仕方ないのかなぁ。
･･････まぁ、作るか。作業の流れとしては以下みたいな感じ。
1.住所関係の入力フォームを移植したようなページを作り、そこへのリンクを貼る。
2.変更を察知して、Googlemapを動かすJavascriptを書く
3.確認画面はめんどくさいのでモーダルで誤魔化す。
こんな流れかなぁ。ほんとは、地図を弄れないようにしてもいいかなぁと思ったんですけど、別個に画面用意して遷移させるのを作るのがめんどいので一緒くたにしちゃいましょ。
つまり、フォーカスが外れたらピンが動いてくれて、そのピンを微調整して整合性取ってね、ってやつですね。これなら誤差は少なくてすみます。全部ユーザーの責任としてなすりつけができますね･･････。
予定きついし、筋トレ諦めていまから実装するか･･････。
この実装で壁となったものはいくつかあるのですが、まず一つは初期状態でGoogleMapがCSSで非表示になっていると、描写がうまくいかないという問題がありました。
まぁこれは原因さえわかれば簡単なので、Bootstrapの関連イベントと、GoogleMapのリレンダーメソッドを掘り当てて解決しました。
次にやるべきは郵便番号でのフィルタリングですね。
ユーザーからの入力を基に、「兄ちゃんのお家ってここやろ？」って指してあげたいのですが、検索結果が基なのでいくらでも間違いが起こりうるんですね。
まぁ、こっちとしては郵便番号が一致していたら大惨事には至らないだろうって思ってるんで、そのフィルタリングをしたいと思います。
登録時のバリデーションは簡単に実装できるんですが、そもそも結果を取得しないってのができると良いですね。
難航していますが、がんばるほかあるまい、、、