(10連休3日目)統合整備計画・始動

しまの時刻表 開発日誌

前日は因島を堪能して満足、この日は雨で外に出るのは億劫。

広島の友達のところに遊びに行く可能性が一瞬浮上するも、世帯持ちとそうでない者との空気感という高い壁の前に一瞬で頓挫し。

結局当初の予定通り個人開発をゴリゴリ進める日にしてみた。

やろうと思ったこと

当初やろうとしたのは一昨日の記事でも書いたとおり、「現在運営している2つのサイトのコンテンツの充実」だったのだが、色々考えてるうちに「この2つのサイト、1つにまとめてしまってもいいんじゃね？」と思いついたのが件の記事を書いた直後。

というのも、まずひとつ「1年前に行った、観光地でもなんでもない田舎の体験談をきっちりした文章にまとめる」という作業があまりにも苦行だったこと。

ただ今の形式のままだと文章書かないとコンテンツとして成り立たない。けど文章書くのはしんどい。一方写真撮るのとプログラム書くのはそれほど苦痛じゃない。

だったら苦手なこと頑張るより得意な方で頑張ったらよくね？と思うようになり、それと同時に

  • 文章以外で島に関心がある人が欲しがる情報は？
  • →やっぱ時刻表じゃね？公式の船の時刻表見づらいし
  • →そのデータの蓄積はあるぞ
  • →じゃあ一緒にしてしまえば？

そんな思考回路が組み上がり、一昨日今日とかけて出来上がった新しいUIがこちら。

f:id:kamonohashiy:20190429204438p:plain

時刻表要素はまだないけど、今まで撮りためた画像を厳選したものだけ中央のダイアログで表示するように変更。

これがベストかはともかく、想定どおりの実装はできたので満足。

以下今日やったことのダイジェスト。

dotenvの導入

動画で見てもらったように、新しいUIではGoogle Maps APIが不可欠。

ただソースではAPIキーを晒しっぱなしだったのが気になっていたので、Nuxtで環境変数というか.envを使うためのモジュールを導入してみた。

使い方等々は別記事にまとめるとして、導入は非常にシンプルだった。

nuxt generateで生成した静的ファイルをS3にアップしたところでも動作確認してみたけど、ちゃんとAPI叩けてるみたいで一安心。

逆にNuxtアプリ何個か作ってきたのになんでいまだに導入してなかったの？ってレベルのことではあるので、今後は積極的に使っていこうかなと。

vue-awesome-swiper

画像の表示をスライドショー(カルーセル)にしたいなと思いつつ、自分で実装するのめんどいなとGoogle先生に教えを請うたら教えてくれたのがこのライブラリ。

これも使い方は気分が向いたら書くとして、導入が簡単だっただけでなく、名前の通りスワイプで画像のスライドができるのがめちゃくちゃポイント高い。

ダイアログもVuetifyの組み込みでクソ簡単に実装できるし、僕みたいなフロントエンドスキル無い人間でもそれなりのUI組める環境が整っている今の時代に感謝。

AWS Amplify経由でS3にファイルをアップロード

一昨日の記事でも書いたように、以前から使いたかったAmplifyを実戦投入。

正確にはお試しでS3のホスティングを試しただけだけど、ドキュメント通り2つ3つのコマンド+αで(nuxt generateも自動で走らせてくれて)デプロイが出来てしまった。

今までS3は何度か使って慣れてはいるものの、コンソールからリージョン選択してバケット作成、バケットポリシーを書いて..って手間が無くなったのは素直に感動。

ただ気になったのは以下。

このへんどうなのか機会があれば調べていきたい。

あとこれから時刻表の機能を盛り込んでいくのに既存のLambdaを使うか、AmplifyのAPIを試してみるかはまだ迷っているけど、まだまだ適正な評価を下せるほど使いこなせてないのは間違いないので、どっかしらで使っていこうかな。

追記

野球中継見ながらTwitterで実況と同時にブログ書くの楽しい。