Wikipedia APIとChrome Extensionsを使って、Wikipedia Golfアプリを作ってみた。
概要
存在する日本語版のWikipediaのページタイトルを返すWikipedia APIを活用して、Wikipedia Golf補助アプリを作ってみました。
きっかけ
クイズノックでWikipedia Golfゲームをしていて、このゲームの支援アプリがあればいいなと思って作成しました。
Wikipedia Golfとは
Wikipediaゴルフは、Wikipediaのあるページから別のページまでウィキリンク（内部リンク）だけを使用して移動するゲームです。
※ Wikipediaから引用
使い方
下記にアクセスして、「Chromeに追加」を押下するとブラウザ右上追加されて使用可能になります。
「start wikipedia-golf」を押下するとゲームがスタートします。
「input ending word」, 「set time」でゲームの設定を変更できます。
wikipedia golfはこちらから
※現在はChromeブラウザ向けのExtensionしか作成していません。
アプリ作成まで
作成するまでの課題
今回当アプリを作成するにあたって課題がありました。
- CORS制約などのセキュリティ問題対策
- 環境構築、開発のコスト
- デプロイのコスト
- モチベーション維持
CORS制約などのセキュリティ問題対策 -> chrome extensionsを使用
CORS(オリジン間ソース共有)の制約でデータ通信の制約がありました。WebアプリのオリジンとWikipediaのオリジンの情報共有をするときは手間が必要になります。その処理をするのが面倒に感じていました。
Chrome Extensionsを使えば、用意されているAPIを使って簡単にURLのアクセスを監視できるのでCORS問題の解決や実装負担の軽減ができます。
環境構築/開発のコスト -> Chrome ExtensionsならChromeとmanifest.jsonを用意すれば、少ないファイルで開発可能
ReactやNext.jsなどフレームワークを取り入れることも考えましたが、最小限で済まそうという考えがもとにありました。
Chromeがあれば環境構築は既に完了しており、html,css,js, API使用などを定義するmanifest.jsonを用意すれば開発可能です。
デプロイのコスト -> Chrome Web Storeにリリースで完了
アプリを作ってもデプロイ先は無限にあります。
そもそも補助を目的にしているため、既存のWikipediaのページをそのまま使えればと思っていました。かつ既存のWikipediaページの唯一無二の良さ(UIなど)を生かすなら、尚更補助に適したChrome Extensionsは今回のアプリ開発の方針にあっているとも思いました。
モチベーション維持 -> MVP思考で維持
遊び感覚のアイデアで動き出した分、モチベーションの維持に苦労しました。上記のようなCORS制約/環境構築/開発/デプロイがあるとそれらにリソースを当てるだけでモチベーションが下がってしまうため、なるべく負担が少なくなるようにしたいと思っていました。
そこでよくアプリ開発である考え方のMVP（最小限だけの機能を実装する。）に沿って作成していました。
今後
-
ReactまたはNext.jsなどで作り直してみる。 - ユーザーが増えれば、アプリのWebページを作成してみる。
参照一覧
Discussion