ktmoukの投稿 - Crieit

Atomic Designでランディングページを作ったので、作成手順とかまとめました。

2019-05-23T12:06:29+09:00

こんにちは、@ktmoukです。時間を管理できるアプリ「Hackaru(測る)」を一人で開発しています。

最近、ユーザが最初に訪れるページ、いわゆるランディングページをリニューアルしました。Atomic Designを参考に、Vueのコンポーネントを分割しています。

本稿では、個人開発でAtomic Designを使うときの作成手順をまとめてみました。Web制作の参考になれば幸いです。

その前にAtomic Designとは？

Atomic Designは、UIのパーツを「原子(Atom)」「分子(Molecule)」「有機体(Organism)」「テンプレート(Template)」「ページ(Page)」に分類しようという考え方です。分類することでパーツが再利用しやすくなります。

詳しくは、DeNA DESIGN BLOGの記事や Atomic Design Methodology が参考になります。

引用元: Atomic Design Methodology

1. 簡単なワイヤーフレームを作る。

Atomic Designとは逸れるのですが、コーディングに入る前にワイヤーフレームを作るようにしています。

ワイヤーフレームとは、ざっくりとした外観と、画像や文章のようなパーツの位置を整理した設計図のことです。ワイヤーフレームを作ることで、頭の中で考えているイメージが本当に実現できるか確認できます。

ワイヤーフレームを作らずにコーディングを始めると、「このパーツを入れるスペースがない！」とか、「次何するんだっけ？」という感じで、手戻りや長考する時間ができてしまうんですよね。

ワイヤーフレームはFigmaなどのソフトを使うこともできますし、紙とペンでも作成できます。私はノートにざっくり描きました。

ポイントとして、色やイラストのような見た目を書かないようにしています。「何を置くか」と「どこに置くか」を整理できれば十分です。ざっくり書くように意識しています。所要時間は、1ページあたり10分〜15分くらいを目安にしています。

2. とりあえず、1ファイルに全部書く。

ワイヤーフレームが出来たら、コーディングをします。ポイントとして、最初は分割せず、1ファイルに1ページ分のHTMLとCSSを全部書いてしまいます。完成させてから整理したほうが効率が良いからです。

Atomic Designを意識してボタンやラベルなどのAtomから作りたくなりますが、もしかすると不要なパーツが出てくるかもしれません。一旦完成させてから整理すれば、手戻りを避けることができます。

というわけで、1ファイルに全部書いてみました。
コードはGitHubから見ることが出来ます。

3. 重複している箇所をAtomic Designでまとめる。

完成させたら、パーツを分類していきます。私は分類の基準を以下のように決めています。Templateは使っていません。

・Atom　分割できない小さなパーツ。ボタンやラベルなど。
・Molecule　検索欄やメニューのような小〜中くらいのパーツ。
・Organism　ヘッダーやフッターのような大きなパーツ。
・Pages 最終的にユーザが見るもの。完成品。

Atom

Atomは、ボタンと言語のセレクトボックスにしました。

Molecule

Moleculeは、機能の説明部分と、「その他の機能」にある4要素にしました。

Organism

Organismはヘッダーとフッター、主要機能とその他の機能の部分にしました。Organismの中にAtomとMoleculeが含まれています。

適度に分割しよう。

分割するときのポイントとして、なるべく「再利用する必要がないもの」は分割しないようにしています。

たとえば、⚡マークのロゴはAtomに分割できるかもしれません。ただ、今の所、使用しているのはヘッダーの1箇所だけです。そのため、ヘッダーのOrganismに直書きしています。ロゴを別の箇所でも使いたい、となったタイミングで分割するつもりです。

または、再利用はしないけど、複雑なものは分割しています。今回でいうところの言語のセレクトボックスです。内部にI18nを変更するスクリプトが含まれています。分割したほうがメンテナンスがしやすいためです。

とくにAtomとMoleculeはいくらでも分割できてしまうので、適度に分割するのがいいかもしれませんね。

Atomをたくさん分割してみました。

GitHubでソースコードを公開しています。

題材にしたランディングページは、GitHubにソースコードを公開しています。また、ランディングページも実際に見れますので、よろしければ覗いてみてください。本稿がみなさんのお役に立てれば幸いです。それでは。

ランディングページ: 　https://www.hackaru.app

GitHub
公式のTwiiter
開発者のTwitter

時間を管理できるオープンソースなアプリ「Hackaru」を作りました。その経緯と実装について。

2019-05-23T11:54:13+09:00

こんにちは。@ktmoukといいます。時間を管理するアプリ「Hackaru(測る)」を一人で開発しています。

今年の4月に公開したばかりなのですが、すでに本格的に使用されているユーザさんもいて、フィードバックをいただいたり大変助かっています。本当にありがとうございます。

今回、投稿を始めた経緯は、個人開発を通して学んだことをシェアしていきたいなと思ったからです。技術的なナレッジはネット上に沢山ありますが、個人開発のナレッジは比べて少ないですし、私自身も試行錯誤しています。今後、個人で開発をされる方の参考に少しでもなれば幸いです。

本稿では、私が今開発しているHackaruがどんなアプリか、なぜ作ったのか、どうやって作ったのかを簡単に書いていきたいと思います。

どんなアプリ？ - 時間を振り返るためのアプリです。

仕事や勉強などの時間を計測して、日々をどのように過ごしたか振り返りできるアプリです。

作業を始める前に計測を開始して、

作業が終わったら計測を停止します。そして、一日の終わりにカレンダーやレポートで振り返ることができます。今日はどんなことをしたか、逆に何もしていない時間がどれくらいあるか確認できます。

なぜ作ったの？ - 自由で連携しやすいタイムトラッキングアプリが欲しかった。

以下のようなタイムトラッキングアプリが欲しかったからです。

・マルチプラットフォームで使用できる。
・Slackのような外部サービスと連携ができる。
・サードパーティ製アプリが作りやすい。
・無料で使用できる。
・オープンソース。

Web、iPhone、Android等のマルチプラットフォームで使用できる。
HackaruはPWAという技術に対応しています。ホーム画面に追加するだけで、アプリストアからダウンロードしたアプリのようにさくさく使用できます。

Slackのような外部サービスと連携ができる。
Webhookの送信に対応しています。Google App Engineなどを使えば、計測を完了したらSlackに送信、といったこともできます。

サードパーティ製アプリが作りやすい。
OAuth2.0を提供しています。サードパーティ製のアプリでも、OAuth経由で時間を測ったり止めたりすることができます。

オープンソース。GitHubに公開しているので、自宅のサーバでも簡単に構築できます。

どうやって作ったの？ - Nuxt.js + Rails + AWSで構築しています。

APIサーバとWebサーバに分割しています。お互いはRESTfulで通信しています。

APIサーバはRails5のAPIモードを使用しています。OAuth2.0とRESTfulの提供を担当しています。Webサーバからのリクエストをもとにデータを操作します。HTML/CSSは出力しません。表示はすべてWebサーバにお任せします。

WebサーバはNuxt.jsを使用しています。APIサーバと通信して、データをブラウザに表示することが役目です。データを直接操作することはありません。APIを経由して操作します。

どちらもDockerコンテナ化して、AWSのECSで動作させています。DynamoDBのようなAWS独自のサービスは使っていません。自宅サーバでも構築できるようにするためです。

すべてオープンソースとして公開していますので、気になる方は覗いてみてください。

デスクトップ版もあります。

デスクトップ版はElectronとVue.jsで構築しています。特徴として、自動で時間を測ってくれる機能があります。

たとえば、プログラミングをするときはAtomEditorを開いたり、絵を書くときにはPhotoshopを開いたり・・・。作業を開始するタイミングとソフトを開くタイミングって同じことが多いですよね。それを利用して、ソフトを開く、閉じるをトリガーに自動で計測してくれます。パソコンで作業される方は、ぜひ使ってみてください。

インストールはGitHubからできます。　Windows、Mac、Linuxで使えます。

ご意見、プルリクエスト、Issueもお待ちしております。

こんな機能が欲しい、もっと綺麗にコード書けるよ、バグあるよ、などなどご意見やプルリクエストがあれば気軽にご連絡ください。TwitterのDMやGitHubで受付しています。

また匿名で投稿したい方は、開発会議のフィードバックページからも投稿できます。

GitHub
公式のTwiiter
開発者のTwitter

ちなみに本稿の作成には約6時間かかりました。

実は本稿の作成中も時間を計測していたのですが、6時間かかっているようです。初めてのnoteなので仕方ですが、時間かかりすぎですね。

慣れている方ならどれくらいで完成させられるものなのでしょうか。気になります。

今回はアプリ紹介だけになりましたが、他にもいろいろ書いていく予定ですので、お暇なときに覗いてくれると嬉しいです。それでは。

公式サイト: https://www.hackaru.app