はじめましてRyujiです。
１週間毎日1つアプリを作って、そのアプリについてのブログを書こうと思います。
今のスキルでは高めの目標ですが、１週間後7つのアプリが出来上がってるといいなと思ってます。
Contents
企画
さぁ早速アプリ作っていきましょう！
ということで朝何を作るか考えました。
作る内容の明確化
複数のキーワードをランダムで提示してくれるアプリ
アイデアをインスピレーションしやすくするアプリを作ろうと思いこれに決めました。
アプリケーション名はApplicationMakerです。
作る内容の詳細化
- このサービスはWebサービスを早く企画し、公開までしなきゃいけない人（例えば私）のために作成します。
- 何を作るか悩む時間を短縮します。
- Node.jsを使います。
- Expressフレームワークを使います。
- jQueryを使います。
- １日で作れないところは割愛します。
学習
Node.jsを触るのが初めてだったので、まずは学習からはじめました。
必要なパッケージやモジュールの導入はすんなり済みましたが、パスの環境設定でつまづきました。
$ node -v
v12.3.1
$ npm install -g express
$ npm install -g express-generatorグローバルにモジュールを導入した場合は環境変数NODE_PATHにmodulesフォルダまでのパスを設定する必要があるようです。
$ export NODE_PATH="/Users/[user名]/.nodebrew/node/v12.3.1/lib/node_modules"express-generatorで必要なものはある程度用意してくれたので、それを理解していった感じですね。
Ruby on Railsと似てrouting、viewがあったので、その辺はスムーズに理解できました。
画面作成
この辺でお昼を超えていました。１日でアプリを作るって難しいですね！
画面はヘッダーとメイン画面の２構成です。絵のようにぱっぱっぱと落書きして実装です。
画像はpixabayから頂戴させてもらいました。
https://pixabay.com/ja/photos/マシン-アーケード-スロット-3787007/
背景はグラデーションをしてみたいですね！
background-image: linear-gradient( 135deg, rgba(246, 255, 0, 0.8), rgba(255, 0, 161, 0.8)),url("bg-image.jpg"); そんなこんなで夕方に完成です。
ロジック作成
やばいです。ロジックを作る時間がありません！
そんなこんなで、jQueryを駆使しつつ、ボタンが押されたら配列からランダムで要素を表示するように頑張りました。
あとはデータをたくさん保存しておきたい。以下調べていたのですが、時間切れでした。
- Githubとかに単語リストがないかどうか
- 何処かのサイトに単語まとめてないか（スクレイピングしたい）
- 形態素解析ってのがあるらしい
- 形態素解析はyahooとかgoogleのAPIでできるらしい
今回はユーザが入力できるようにテキストフィールドと送信ボタンを作成して終了です。
完成物
がちゃるを押したら白文字が変化します。
ラジオ×古着 何かを集めるアプリ んー何か作れそうですね！いい感じ！
感想と反省
すごく難しかったです。１日は大変や！大変なことを宣言してしまった！
でもNode.jsの若き門を叩けたので大変満足です。
背景のグラデーションと文字の間隔を広げたのが、ナウな気がして気に入っています。
実装できなかった機能がたくさんありますが、それはまたにしましょう。
明日も頑張るぞー
