はじめに
Unsplashと呼ばれるフォトサイトから取得した画像とデジタル時計を表示するだけのアプリになります。
作ったサービス
見た目はこんな感じでシンプルなものにしました。
アプリはこちら↓
GitHub : https://github.com/ur-oot/PhotoClock
作ったきっかけは？
前回こちらの投稿の通り、初めてWebアプリを作成してまた何かを作りたくなったのと、Macとかを起動してるけど使ってない時間に表示しておくだけのものが欲しくなったからです。
表示するならクオリティーの高い画像と時計くらいがあればいいなと思い、今回作成したWebアプリを作ろうと決めました。
使い方
アクセスすると上記の画像のように、画像と時計が表示されます。画像はデフォルトで5分ごとにランダムで更新されます。
画像に関しては冒頭に述べたとおり、知っている方も多いと思いますが、Unsplashと呼ばれるストックフォトサイトのAPIから取得しています。
左上のメニューを選択すると、画像の更新時間とUnsplashのコレクションが選択できるようになっています。
コレクションの画像を選択すると、Unsplashのコレクションサイトに遷移します。"Select this collection"を選択すると、選択したコレクションの画像からランダムに表示するようになります。
また、表示する際にできるだけスッキリさせたかったので、PWA:Progressive web apps対応をしました。
iPadとかで見ても以下のように表示されます。
使用技術
インフラ
- GitHub
- Netlify
フロントエンド
- HTML
- CSS(SCSS)
- JavaScript
- Vue.js
- Vuex
前回はCSSにフレームワークを利用しましたが、今回はシンプルな作りであるのと、CSSを勉強したいというのがあり、フレームワークは利用しませんでした。
おわりに
最後まで目を通していただきありがとうございます。
またアプリを作りたいと思っているので、なにかアイデアが浮かべば作りたいと思います。（受け身のアプリではなく、できればユーザーが参加できるアプリにしたい）