nukorouのゆるガバ帳

ゆるくガバく適当に

【第0話】フロントエンド修行物語【導入編】

まえがき

Qiitaに面白い記事がないかと徘徊してたら、クソアプリ Advent Calendarなるものを見つけた。

個人的にとりあえずアウトプットする人は尊敬している。皆さん、良い物作ってらっしゃる。

中でも気になったのが14日目の結局アレはどうなった? 「はきだめ」もとい「Setsuna」プロジェクトだった。

「投稿に寿命のついた匿名掲示板」

仕様

  • 投稿します
  • 通常6時間後にDBからも抹消されます。魚拓でも取らない限り残らない。
  • しかしレスポンス(「共感ボタン」を押される、返信される)が来ると記事の寿命が1時間伸びる
  • パスワードを控えておけば、手動で消せる

こんなものらしい。なんかそんなSNSあったよな〜と思ってGoogle先生で「sns 消える」と調べたらSnapchatやらSNOWやらが出てきた。これらはメインが写真だけど、Setsunaはメッセージがメインなのね。なるほど。エフェメラSNSというらしい。

これ系はいっとき流行ったみたいで、クローンがいろいろ作られたみたいだがそんなことは正直どうでもいい。

消えるのにつぶやく意味がよくわからなかったので、どんなことがつぶやかれるのか見たかったのだが、残念ながら Setsunaは未完成 らしい。記事によると

多分、できてる。サーバーサイドだけ。

ということらしい。私は最近フロントの技術に興味を持ち始めた にわかサーバサイドエンジニアなので、勉強のためにもフロントを実装する(できるとはいってない)のはいいことのように思えた。それに、永遠にサーバサイドだけしか書かないってのもおかしな話である。勉強しといて損はないはず。

それに教材としてかなり都合よく

お暇な人はコードをcloneしてサービス立ち上げてしまって構いませんぜ。

とのことなので、ステップアップのためにもフロントを勝手に完成させてしまおう。なんせ、学生なもんで社会人と比べれば時間はある。

で、herokuにデプロイすんぞ〜となった訳です。

自分のレベル

Python

Pythonは最近触ってないけど、一番好きな言語で思いついたクソアプリをよく作ってた。歴2年ぐらい?

JavaScript

超初学者。コーディング総時間1日未満。ES6なんて知らん。

フロントの技術選定

デザインはできないので、Bootstrap一択。

JSは迷ったけど、Riot.jsで作ってみよう。Reactとか流行ってるみたいだけど、学習コスト高そう。(Riotよりは)

初日の作業

サーバサイドの依存ライブラリやMongoDBの導入。そして、APIの確認。

依存ライブラリ

requirements.txtが特に用意されてなかったので、READMEとソースコード見て使ってそうなライブラリを探す。

  • flask
  • pymongo
  • gnicorn

あたりを使ってそうだということで導入。

requirements.txt

click==6.6
configparser==3.5.0
Flask==0.11.1
gunicorn==19.6.0
itsdangerous==0.24
Jinja2==2.8
MarkupSafe==0.23
pymongo==3.4.0
Werkzeug==0.11.11

こうなった。

MongoDBの導入

ここでめっちゃ時間かかった。 brew install mongodbでいいんだけど、Xcodeの8.2だったかを要求してきて、それのインストールにめっちゃ時間かかった。

APIの確認

多分出来ているとのことなので、動作確認をする。

そのままで動かなかったので変更した点を紹介する。

[laptop]
    # MongoDB server IP address. String.
--  address=[fdf5:c551:f749:8c61:216:3eff:fe10:3e09]
++  address=[127.0.0.1]

ローカルのMongoDBのアドレスに変更して、python src/runserver.pyで動いた。

ドキュメントなんてないけどな!!

作者さんのこの発言で、APIのエントリーポイントとかもソースコード見て探さないと行けないかと思っていたが、実際にはドキュメントは公開されていて完璧ではないけど、十分助かる。加えて、ソースコードを見てどういうAPIかを判断するのも容易だった。ツンデレである。

APIの確認に、curlとか使うのもいいんだけど、あんまり得意じゃないので、今回はGUIAPIとかを便利に叩けるChrome拡張Advanced REST Clientを利用した。説明不要なほど簡単に利用できるのでAPI叩く人は使ってみるといい。

f:id:nukorou:20161215160804p:plain

若干見切れているがこんな感じで送ったら、ちゃんとAPIステータスコード200とjsonを返してくれた。

動作確認完了である。

次回予告

クソ雑魚デザイン力で、トップページとか作ってみるかな。

次回↓ nukorou.hatenablog.com

2016/12/18 追記 タイトル糞すぎて変更 【第0話】サーバサイドエンジニアだけどフロントの仕事やってくれと頼まれたことを想定して特訓する【導入編】