気が向いたらてきとうに

ツイッターとかには書ききれない程度の、なんとなく誰かに見てもらいたいものを書いていきます。

友達の依頼でお手軽にwebアプリを作った話

こんにちは!

本当に気が向いたらレベルでしか更新してないなーと思いつつ、

書けそうなネタができたので書いきます。

 

きっかけ

僕の友達が未だにスマブラXのオンライン対戦やってるのですが、

デュエリストという特殊ルールを極めてるみたいです。

↓彼の動画

www.youtube.com

(Wiiハック手伝ったのはいい思い出)

 

 この遊び方ではアイテムを使用してますが、使用するアイテムをランダムで決定してくれるアプリを作って欲しいという依頼が来ました。

f:id:oriharu_lol:20190210194710p:plain

 

例えばスマッシュボールは10%、ホームランバットは30%みたいにアイテム毎に出現率を調整して、それを1ボタンで表示しようというものです。

 

中身としてはランダムの配列を作って画像表示するだけなので簡単ですが、

実際にwebアプリにするってどうやるんでしょうか?

 

今回は僕がやった手っ取り早く実装する方法を紹介したいと思います。

開発環境やらエディタの設定やらはなんかは面倒なのでやりません!

PCには何もインストールしません!

 

手順

 

(1) 最初に使い方を決めます。今回はWiiで遊びながら使うものなのでスマホで見る事がメインとなります。

スマホブラウザで何かしらのURLを入力したら、作ったアプリが開くという形です。

 

静的Webアプリなので、とりあえずHTML、CSSJavaScriptがあれば動きそうです。

フレームワークとか使うの面倒なのでほぼこの3つだけでやっていきます。

 

・画面構成はスマブラXのアイテムスイッチと同じ感じで、ランダムボタンが一つ

・ON画像とOFF画像を入れ替える

・各アイテムの出現確率を設定から変えられるようにする

 

実際に作る際には、画像を何回も配置し直したりしたので

表示画面を作るのが一番時間かかりました....

 

(2) 次にこれらのファイルはどこかのサーバーに保存する必要がありますが、

これはGithubだけでできます。Githubには、静的なHTMLファイルをGithub上で開いてくれる機能があります。

 

www.tam-tam.co.jp

 

この方法だとURLは設定できませんがURLなんてなんでもいいです。

つまり、

Githubにアカウント作る→リポジトリを新規作成→index.htmlぶち込む

これでアカウント名がSmashリポジトリ名をBrothersとしていたら

<https://Smash.github.io/Brothers/>

ここにアクセスすればもう自作アプリの完成です。

 

(3) 実装する部分は目安が立ったので、次は中身を作っていくのですが、

流石にメモ帳でコーディングは出来ませんし、デバッグするにもいちいちGithubに上げて確認するのは手間です。

 

そこで登場するのが、Cloud9!

lolプレイヤーだとコスプレイヤーのいるNAのチームしか頭に出てこないと思いますが、そのままそこの企業なんです。

Cloud9というのはいわゆるVisual StudioやEclipsのような統合開発環境なのですが、

便利なことにオンライン上で使う事ができます。

 

3年前くらいにAmazonに買収されてAWSの一部になってます。

jp.techcrunch.com

 

オフライン環境では使えないという欠点はありますが、

今時ネット環境なしでやる方が珍しいでしょう。

個人的にはかなりおすすめのIDEです。

何よりパソコンに何も入れなくていいので、本当にお手軽です。

 

↓アカウント作成方法

www.sejuku.net

 

実際に今回作っていた時の画面です。

f:id:oriharu_lol:20190210204822p:plain

左側のフォルダーのとこにpngファイルやらcssやらを放り込んで、中央のエディタでコーディングします。

ちゃんとエラー通知や補完機能もついてるのでかなり使いやすいです。

apatchも搭載されているので、Previewボタンからアプリをその場で起動して動作チェックもできます。

そして完成したら、下段のコンソールから先ほど作成したGithubリポジトリにPushします。

Gitの使い方はサルワカさんのサイトがわかりやすいと思います。

backlog.com

 

 

はい、これでもう完成です。 

 

出来たもの

実際に今回作ったものをここに置いておきます。

スマホ表示をメインで作ったのでPCだとちょっと歪んでるかもしれません。

SSBB Duelist Item Switch

 

動作確認にもよく使いますが、

右クリック→検証からスマートフォン表示にする事ができます。

 

ソースコードはこちら

GitHub - Oriharu510/ssbb_itemswitch

 

見ればわかりますが、htmlとcssjavascriptファイル、

あとは表示用のpngファイルがあるだけです。

jQuery勉強した〜ぐらいの方ならもう簡単なアプリを作れると思います。

 

まとめ

お手軽にWebアプリを実装するには?

・仕様を考えよう!

・Cloud9でオンライン開発!

Githubにぶち込んでおしまい!

 

 

 

 あとがき

プログラミングって本で勉強したりスクールに通ったりするのもいいんですけど

こうやって実際に作ってみて誰かに上げたりするのが楽しいです。

以前学校で英単語の試験があった時に、テスト対策のアプリ作って配ったんですね

それで試験が上手くいったとかで大層喜んでくれたのをよく覚えてます。

 

自分はアプリ作って満足して全然解けなかったのはまた別のお話。