Google Cloud Endpointsでアニメ情報APIに対するクライアントサイトを作成した。(Anime Info Client)
構成
JavaScriptは書ける気がしないのでTypeScriptで作成。
CSSどころかHTMLもよく分からないのでBootstrapでそれっぽい感じにした。
GAEで作成したので、無駄にHTTPS。
Bootstrapのおかげでスマホ対応も簡単にできた。便利。
API呼び出し
Google Cloud Endpointsで作成したAPIはJavaScript client libraryを使ってAPIを叩くことができるので、これを使って作成した。
試してはいないが、AndroidとiOSのライブラリも作成することができるらしい。
サイト説明
左上の放送期間を選択すると対応するアニメ一覧をサーバーに取得しに行き、右のアニメ一覧を更新する。
アニメを選択すると下のフォームが更新される。
| ボタン | 説明 |
|---|---|
| New | アニメの新規作成用。フォームを空にするだけで、通信は行わない。情報を記入して、Saveボタンを押すことでデータベースが更新される。 |
| Save | アニメ情報更新用ボタン。IDが入っている場合は上書き。IDが入っていない場合は新規作成となる。 |
| Delete | データベースから対応するIDのアニメ情報を削除する。 |
データベース的にはハッシュタグ、別名は３つ以上保存することはできるが、UI作るのが難しかったので、３つに制限している。