作品ページが少し変わりました

ふわっとしたタイトルですが、変わりました。「作品ページ」というのは、例えば↓のようなページを指します。

アニメ「ダンベル何キロ持てる?」 | Annict

一番大きな変更は、

  • エピソードが表示されるようになった
  • モバイル版のページ上部がPC版っぽくなった

あたりでしょうか。
それとナビゲーションバーも微妙に変わっています。これは作品ページだけでなく全ページに反映されています。

見た目は比較的小さめの変更になりましたが、実は内部は完全に変わっています。作り直しです。作品ページの改修だけで数ヶ月かかってしまった…。
具体的に何が変わったかというと、技術的な話になりますが以下のように変わりました。

  1. データを取得/保存するときGraphQLを使用するようになった
  2. PC版とモバイル版とで共有のテンプレートを使うようになった (レスポンシブ対応)
  3. サーバサイドのテンプレートエンジンにERBを使い始めた
  4. body要素以下のほぼ全てをクライアントサイド (Vue.js) でレンダリングするようになった
  5. クライアントサイドの実装でTypeScriptを使い始めた

これらの特徴を総称して、僕の中でバージョン3 (V3) と呼んでいます。実は現行のシステムはV2でした。

一番最初に挙げたGraphQLの話はV3化の中で特に重要で、これが良い感じになるとサイト内で使っているGraphQLのスキーマを外部にも公開することができるようになり、今ベータ版として提供しているGraphQL APIがより強力になります。もう少し手直しをしたら全ページをV3化する前にGraphQL APIだけ先出し公開したいと思っています。そのときはベータ版ではなく、安定版として提供できればと思っています。最終的に「Annictがサイト上で提供していることほぼ全てがサードパーティでも実装できるようになる」という状態になれば良いなと思っています。

V1からV2にしたときは全ページえいやっと変えていた気がしますが、V2からV3に移行するのは少しずつにしたいと思います。昔に比べてページ数も多くなり、一気にやるのはかなりしんどいので…。

先ほどもいくつかバグを修正しましたが、他にも妙なところが残っているかもしれません。何か思うところありましたら、フォーラムなどでご報告いただけるとありがたいです。

APIファースト?な状態を目指すAnnictをよろしくお願いします。

manabu,ももーん編集者
2019-10-06 14:33

FirefoxクローンのWaterfox(56.2.14 Firefox ESR 60.9ベース)を使っているのですが作品ページがローディングのままで表示されません。Firefoxでは表示されます。
Waterfoxで新規プロファイルを作ってクリーンな状態でみたら表示されないのでWaterfox側の問題のようです。

レアケースだと思うので対処が難しいようであれば放置して頂いて構わないのですが、対処可能であればしていただけると助かります。

開発者ツールのコンソールで出ているエラーを一応貼ってみますが解決の一助になりますでしょうか?

[Vue warn]: Error in created hook (Promise/async): "Error: Network error: JSON.parse: unexpected character at line 1 column 1 of the JSON data"

(found in ) v3-4143ff901d8020dd5daf.js:6:4828
dt https://d17jazaimr5n2x.cloudfront.net/packs/v3-4143ff901d8020dd5daf.js:6:4828
ie https://d17jazaimr5n2x.cloudfront.net/packs/v3-4143ff901d8020dd5daf.js:6:15717
re https://d17jazaimr5n2x.cloudfront.net/packs/v3-4143ff901d8020dd5daf.js:6:15685
ee https://d17jazaimr5n2x.cloudfront.net/packs/v3-4143ff901d8020dd5daf.js:6:15335
ne/< https://d17jazaimr5n2x.cloudfront.net/packs/v3-4143ff901d8020dd5daf.js:6:15481
Error: Network error: JSON.parse: unexpected character at line 1 column 1 of the JSON data
スタックトレース:
e@https://d17jazaimr5n2x.cloudfront.net/packs/v3-4143ff901d8020dd5daf.js:103:33660
Ge</t.prototype.queryListenerForObserver/<@https://d17jazaimr5n2x.cloudfront.net/packs/v3-4143ff901d8020dd5daf.js:103:54469
Ge</t.prototype.broadcastQueries/</<@https://d17jazaimr5n2x.cloudfront.net/packs/v3-4143ff901d8020dd5daf.js:103:60517
Ge</t.prototype.broadcastQueries/<@https://d17jazaimr5n2x.cloudfront.net/packs/v3-4143ff901d8020dd5daf.js:103:60481
Ge</t.prototype.broadcastQueries@https://d17jazaimr5n2x.cloudfront.net/packs/v3-4143ff901d8020dd5daf.js:103:60430
Ge</t.prototype.fetchQuery/</</M<@https://d17jazaimr5n2x.cloudfront.net/packs/v3-4143ff901d8020dd5daf.js:103:53095
v3-4143ff901d8020dd5daf.js:6:15804
ie https://d17jazaimr5n2x.cloudfront.net/packs/v3-4143ff901d8020dd5daf.js:6:15804
re https://d17jazaimr5n2x.cloudfront.net/packs/v3-4143ff901d8020dd5daf.js:6:15685
ee https://d17jazaimr5n2x.cloudfront.net/packs/v3-4143ff901d8020dd5daf.js:6:15335
ne/< https://d17jazaimr5n2x.cloudfront.net/packs/v3-4143ff901d8020dd5daf.js:6:15481

Shimba, Koji管理者
2019-10-08 14:11

ご連絡ありがとうございます!Firefox ESRはちょっと古いエンジンを使用されているようで、新し目のJavaScriptがうまく処理できずにコケてしまっているようです。。
Annictは基本的にChrome, Firefox, Safariの最新バージョンのみをサポートしているので、スッと直せれば直しますが、難しい場合は対応できないかもしれません。m(__)m

manabu,ももーん編集者
2019-10-08 14:30

そのうちESR68ベースになると思いますので暇な時に、かんたんに直せそうならということで。
詳細ページが見られないだけでエピソードページには入れますし、Firefoxでみますのでお気になさらないでください。
ありがとうございます。

よしのり編集者
2019-10-13 11:30

作品ページについてですが、作品の詳細ページにもDB編集のリンク(Annict DBで編集する)を貼っていただければと思います。
現状、作品のエピソードページなどに行かなければ、前述のリンクが現れないので、作品情報を編集したいって思ったときに、作品の詳細ページから、リンクが貼られてるページに1回行かなければなりません。(1クリックだけですが・・・)
ご検討ください!

Shimba, Koji管理者
2019-10-17 00:08

ご連絡ありがとうございます!あとで追加しようと思ってそのまま放置しちゃってました…!週末追加します。m(__)m

Shimba, Koji管理者
2019-10-19 23:31

遅くなりましたが作品ページのDB編集へのリンクを復活させました!m(__)m

よしのり編集者
2019-10-21 00:02

やっぱり復活させる予定ではいたんですね
ご対応ありがとうございます!

manabu,ももーん編集者
2020-01-16 10:58

1つ目のレスに書いたWaterfoxで詳細ページが見られない件ですが、昨日のWaterfoxのアップデートのおかげか見られるようになりました。お手数おかけいたしました。
ご報告まで。

Shimba, Koji管理者
2020-01-19 09:46

ご連絡ありがとうございます!良かったです!

Loading...