ひとりハッカソンしてWEBサービス作ってみた

2015-02-25 #Design

リンクさん

どんなサイト?

インターネット黎明期によく見かけたリンク集の文化が好きで昔からいろいろ見てたんだけど、最近あまり見かけなくなってしまったような気がして寂しいので簡単に作れるようなサービスを作ってみました。

使える機能

ログイン不要で新規作成、編集が可能

気軽に使えるサービスにしたかったので、ログイン不要で新規作成、編集が可能です。 作成したURLは乱数になっているので誰かに教えない限りは隠蔽されているという状態になっています。 (認証はかかっていないので公開URLを知る人からは全てアクセスができます) ログイン機能自体が無いので閲覧している人も編集してリンクを追加したりできるようになっています。

自動タイトル入力機能

リンクの追加はURLを貼り付けたるだけで自動でそのページからタイトルを引っ張ってくるようにしておいたので、単純にURLのリストを作りたいだけの時にも便利です。 ブログ記事を書く時とかに自分用にリンク一覧を作ってマークダウンでコピーして使うっていう使い方もできます。 (マークダウンでコピーする機能はページ一番下の「Markdown」のリンクをクリック)

(例)流行りのヘッドマウントディスプレイのリンクを集めてみた

また、飲み会の候補のお店をズラッと送る時とかにも使えそうな気がしています。 コメントとか投票ができるようにしておいたので、行きたい店とかの選定にも役立つかもしれません。

(例)タイ料理食べにいくやで

前述の通り一人の人が複数回投票することも可能です。 めっちゃ行きたいお店とかあれば100くらいつけておいても良いのではないでしょうか。

コメント機能 + 投票機能

リンク集の閲覧ページではコメントをつけたり、投票したりすることが可能になっています。 昔と違って世の中に同じジャンルのウェブサイトが数多く存在する時代になったので、ただリンクを集めただけでは情報としての価値は少なくなってきている気がしています。 なのでRedditとかProduct Huntみたいに閲覧者が重要度を決めたり議論したりするのって今後重要になってくるのかなと思っていて、せっかくなので追加で機能を入れてみました。 こちらもログイン機能自体が無いので1人の人がいくらでも投票し放題です。

デザイン

インターネット黎明期のリンク集感 を出したかったのでデザインはほぼやってなくて、WEB1.0的な見た目にする事に注力しました。 あ、でもせっかくなのでUIの使いやすさの部分には気を使って作ってみて

  • 投稿画面のリンク追加、ソートなどの編集部分の使用感
  • コメント機能、投票機能はオプションの機能なので目立たせず、かつ見つけやすいように
  • コメント機能、投票機能はページのリロードをせず、部分的に更新するようにして投稿時のストレスがないように
  • 機能はいろいろあってもパッと見の印象は昔のペラいちのリンク集ページのイメージを壊さないように
  • あとスマホで見たいのでレスポンシブに

というような部分に取り組んでみました。

技術的なところ

バックエンドは動かすのがやっとだったのでここには何も書けなさそうですが、Rails4.2とReact.jsで動いています。 普段あんまり触れないプログラム部分も全て一人でやったのと、ちょっと作ってはほったらかしてを繰り返していたので、制作期間は正確ではないですが合計で言うと多分1週間くらい(今 /migrate のファイルを見てみたらちょうど7日分くらいあったので)だと思います。

React.js

  • コメント投稿
  • 投票機能
  • 投稿画面でリンクの順番を変更する機能

の3つ、動的にサーバーと通信する必要がある部分の実装に React.js を使ってみました(Ajax通信の部分はjQueryです)

React.js/javascript/component の中の1ファイルで1コンポーネントみたいな感じで作れるのでデザイナーの立ち位置から見て凄く扱いやすい印象を受けました(個人的な主観がはいっていますので一般論では無いです)。パッと見で全体像が把握できて修正がしやすいのも好みです。後からもっと良いフレームワークが出てきた時に差し替えるのとかもやりやすそう。 (1ファイルで良いとか言っておきながらcssはsassで書きたかったので別ファイルで書いています…)

まだこのサイトでしか使った事がないので、コード自体はかなり独りよがりな実装をしてそうな気もしますが、うまく扱えるようになればエンジニアさんにAPIだけ作ってもらって、デザイン部分がまるっと自分で作れるようになる、という連携も取れそうで、実案件でもメリットがありそうな気がしました。

Spuit

cssは自作のSassのmixinライブラリを使っています。

Spuit

完全に自分用なのでコミットのコメントがちょっと酷いです… 以前までは codepen にスニペット的なのを書き溜めていたのですが、探すのが大変なので最近はよく使うものをここに纏めるようにしています。


雑感

ふとReact.jsを触って何か作ってみたくなったので、以前作りかけて放置していたサイトに組み込んで試してみた、という感じなのですが、フロントエンドの勉強になって面白かったです。

現在フリーランスでウェブやアプリのデザイナーをやっているので、すでに運用中のサイトにページやUIを追加する作業をお手伝いさせていただく事も多いです。 エンジニアではない自分がサーバー側で何が行われているかを十分に理解する事はなかなか難しく、簡単に要件だけ満たそうと思うと見た目のお化粧だけするデザインが一番安全安心という流れになってしまいそうですが、見た目の変更だけでは使いやすさはなかなか改善できないので、普段からこうやってプログラムを触ってみて理解することで、一歩進んだ提案ができるようになるというか、見た目のお化粧だけではない本来のデザインを提案できるようにもなるのではと思っています。 サイトやアプリ上で挙動と絵が違和感なく合致している事は触っていて気持ちが良いものだし、実装の邪魔にならないようにしつつも上手く歩み寄って、最大公約数な良い落とし所が見つけられるようになればいいなと思っています。