soussuneのサイトが新しくなりました。
新サイトは以前の記事で書いたように、Nuxt.jsというVue.jsアプリのフレームワークを使うことでフロントエンド的に技術刷新するというのが目標でした。
でも「新しくなりました！」というとき、みなさんはどう思うでしょうか。ユーザーのことを見てないことも多いんじゃないでしょうか。使い勝手は良くならず、以前あった機能がオミットされることもしばしばあります。
ぶっちゃけsoussuneもそうです。ユーザーの利便性向上というよりは、まずは自分たちが作りやすくする・作りたいものを作るというための新サイトなのです。
それが結果として使いにくかったりすることは当然あると思うんですが、まあその分改修も容易になり以前よりモチベも湧くので長期的な観点ではいろいろ向上していけるのではないかなと思っています。（していけないこともあります…）
そのへんの技術的なところは去年末のQiitaのアドベントカレンダー記事としてまとめてあります。
当時の段階でのサイトはこんな感じでした。ぱっと見はだいたい今と同じじゃないでしょうか。そこまでは一週間くらいで出来たので、「これで9割終わったな」と思ったものですが、なんだかんだでそこからリリースまで一ヶ月かかってしまいました。
このへんの見通しの甘さや反省について、この記事では振り返っていこうと思います。
年末年始突入
年末にガッと作業してQiitaの記事も書いたので、だいたい満足してしまいました。年越しして正月も迎えました。コミット量が減りました。日本人なら当然ですね。
Podcast管理アカウントの変更
前回の記事に書いたのですが、ポッドキャスト管理用のApple IDの変更を行いました。去年末にAppleのPodcastの管理画面が新しくなっていろいろ統計が見れるようになったのですが、閲覧できるのが単一のアカウントだけで管理ユーザーを追加するということはできなかったので、新しく共用のアカウントを作ってそちらを管理者にすることにしました。
やり取りはサポートにメールするという対応になり、年末年始を挟んでしまったためか結局一ヶ月かかりました。この間、サイトを変更してフィードの形式を変えてしまうと手続きの確認的によろしくないのではないか？という懸念から「とりあえずAppleの処理が済んでから続きをやろう」というマインドが蔓延して遅滞しました。そんなに長くかかるとは思ってなかったのです。
iOS Safariのボトムエリア問題対応
Qiita記事に書いたように、新サイトはPodcastアプリ志向なサイトにしたいと思いました。そのためボトムにFixedなメニューを使っていこうと思ったのですが、実機で確認してみると想定外の問題に気づきました。
Mobile SafariのボトムエリアはSafariメニューを出すように確保されていて、サイト側にはタッチイベントが伝わらないのです。
以前のiOSでは minimal-ui と指定すればメニュー自体消せたので問題を回避できたのですが、現状では（アクセシビリティ的に？）廃止されてしまっています。
上記ページでの結論としては、ページ全体をwrapしてメニューを出しっぱなしにすることで固定ボトムエリアを使うということでした。ただそれだと画面が狭くなるし、Nuxtでのページ内アンカーの指定が上手く行かなくなったりしたのでその方法は見送りました。
Safariメニュー回避のためにあらかじめスペースを空けた上でボトムバーをFixedにするということもやってみたりしました。しかしどこまでがSafariに確保されているのか分からず、iPhone Xだとさらに広いので対応が難しいので諦めました。まあ見た目的にもう無理です。
ボトムにメニュー配置しているサイトを見るとやはりそのへんいろいろ苦心しているようです。最終的にはボトムバーではなくボタンだけ浮かせて配置し、そこからメニューを呼び出すという形式に落ち着きました。
デザイン問題
soussuneを作ってる自分（ @miyaoka ）も @trkw も、デザインよりも機能重視という取り組みをしているので、見た目の問題は後でどうとでもなるとおざなりにしがちでした。
例えばこの記事で語られてるこうした見た目の違い問題なんかも、まあ課題がどういうことを求めているかに依りますが、機能が実装できていることのほうがよっぽど大事だと思うので、見た目の領分は些細なもの（CSSで後から調整可能なので好きにしたらいい）だという認識はしてしまいます。
まあしかし実際のところ、soussuneの仕上げの段階ではいろいろ行き詰まってしまいました。特に色の指定について各コンポーネントのscopedなcssで場当たり的に指定していたので壊滅的になってしまっていました。
そんな折に、まだ未公開ですがデザイナーとしてフロント開発をしている菅原くんと収録する機会がありました。ちょうど自分がデザイン問題に直面していたこともあったので、そのへんデザインシステムをしっかり構築しているのを見せてもらったりして、ちゃんとやらなきゃなあと思いました。
とりあえずまあ当たり前な感じだとは思うんですが、いろいろ変数定義して利用するようにしていきました。
Jumbotron
このへんはtrkwくんが対応してくれました。トップページらしいイメージ表示をするのと、ポッドキャストサイトで重要な購読ボタンをトップに置くという機能的な側面があります。
ほんとはこれ以外にandroidの購読ボタンと、push通知の購読ボタンもあるのですが、こうしたメニューにボタンを2つ以上並べるのはおかしいということになりとりあえず保留にしてます。
お便りコーナー
rebuildではliveのときにツイッターのタイムラインが出たり、しがないラジオではサイドメニューにお便りフォームとタイムラインを配置していていいなと思ってました。
フィードバックはやはり自分では気が付かない視点で感じたことを言ってもらえるので受け手としてはとても価値が高いものだと思ってるのですが、書くほうの立場になってみるとなかなか意見というのは言いづらいなと思います。
そこでツイッターのタイムライン表示があると、他の人の感想を踏まえて考えたり、書き込んだ後はここに載るということがイメージができるので、より意見を言いやすくなるのではないかと思います。
そうしたサイトに対する入出力機能として、お便りとタイムラインを一緒に置きたいなと以前から考えていたのですが、いかんせん場所を取るのでレイアウト的になかなか配置できませんでした。新サイトではフッター部分が整理されたのでとりあえずそこにまとめて置くようにしました。
リリース
そんなわけで、今度こそ9割方できたのでリリースしました。ドメインの設定変えたりするからこっそりリリースしようと思っていたらかずぽんさんにしっかり捕捉されました🤗
このときもやはりすんなりは行かず、環境に依っては旧サイトの証明書を参照してエラーになったりといろいろ不具合がありました。なので、エピソードのリリースと同時にしなかったのは良かったと思います。
まとめ
やっぱりいろいろ思ってた以上にやることありましたね。見積もり甘いですね。
スコア的なところではNuxtのmoduleによりPWA対応もバッチリになりました。Performanceはちょっと低いですが、主にtwitterの画像を直リンとかtwitter widgetの読み込みあたりだと思うので今後改善していきたいです。
現在beta版のiOSではついにSafariがPWA対応を始めました。どうやらボトムエリア問題も無くなり、ネイティブアプリと同等のものがweb技術で実現できるようになりそうです。
