コース・ルートを共有できるサイトを作りました

TL;DR

oshare.o-app.net

下絵地図をアップロードしてOCADのようにコースを組むことができます。
コースを公開することで地図読み練習やレッグ解説に使うことができます。
また、ルートを描いて投稿することができます。投稿されたルートを比較でき、良いと思ったルートには投票することができます。
ルートを募ったり、投票を募集することでルートの良し悪しを判断できます。

できること

• コース作成・公開・共有
• ルート作成・公開・共有
• ルート比較
• ルートへのコメント・いいね（投票）
• ルート付き画像をダウンロード
• SNSシェア

ユーザー登録する

1. ログインページにアクセス。
2. ログイン方式を選択します。
   • メールアドレス・パスワード認証
   • Googleアカウント認証
   • Twitterアカウント認証
3. それぞれの方式に応じてログインしてください。

画像をアップロードする

1. ログインする
2. マイページの「画像をアップロードする」ボタンを押してファイルを選択します。
3. 切り取り画面が表示されるので、必要な部分のみを選択してください。
   • なるべく必要な部分のみになるようにしてください。
   • すでにコースが書かれている場合、回転させると見やすいと思います。
   • ファイルサイズは5MB制限です。
4. CUTボタンで切り取ります。
5. 画像名を入力し、アップロードボタンでアップロードします。
   • 画像名は自動的に取得されます。
   • 画像名は公開されません。
6. アップロードに成功すると数秒後にマイページにサムネイルが表示されます。

※ 一人５枚までアップロード可能です（５月１日現在）

コースを作る

1. コースを組みたい画像をクリックします。
2. クリックモードでコントロールを設置する。
   • エディタ画面には２つのモードがあります。
     • ドラッグモードでは画像の移動・拡大縮小ができますが、クリックイベントは発生しません。
     • クリックモードではクリックイベントが発生しますが、画像のドラッグはできません。
     • 
   • 「左クリック」で追加、「右クリック」で削除、「ドラッグ」で移動
   • 左上のスライダーで円の大きさや太さを調節できます。
3. レッグを作成する
   • レッグ名を入力するとコントロール選択モードになります。
   • 「クリックモード」でコントロールを順番にクリックします。
4. 最後にコース名を入力して保存します。

ルートを書く

1. ルートを書きたいレッグを選択します。
2. ルート名を入力します。
3. 「クリックモード」でクリックすると、クリックした場所まで直線が引かれます。
4. 同様に、「左クリック」でポイント追加、「右クリック」でポイント削除

github.com