Itatoe

URL:https://www.itatoe.com/

🎉β版リリースしました🎉

IT用語のたとえが集まるWebサービス
ITatoe をリリースしました。
皆さんのアイデアを絶賛募集中です。#個人開発 #Django

itatoeは、例えるなら、IT用語の連想ゲームのプレー記録のようなものだ。 https://t.co/0dbqL7azAB

— hoger (@hoger_san) June 6, 2019

Itatoeで出来ること

IT用語や概念を、何かにたとえて表現されることってありますよね。

「◯◯は、例えるなら〇〇みたいな感じやな」

概念の定義を読んだけど、なんだか腑に落ちない、もやもやする状況…
たとえる事でそういった課題解消の助けになる場合があるはず。

そんなIT用語の「たとえ」が集まるナレッジベース的サービスを作りました。

サービス名：Itatoe
URL:https://www.itatoe.com/

サービスのジャンルはQ&Aです。
サイトに登録されている用語に対して、Answerとしてたとえを投稿・評価していくことが
サービスの根幹です。
直喩のお作法に従って、IT用語のたとえをお手軽に作成できます。

直喩（ちょくゆ）とは、比喩の一種で、比喩であることを明示する表現をいう。明喩（めいゆ）ともいう。
直喩は明白なつながりのない2つの事物を比較する言い方で、典型的には「雪のように白い」「ひょうたんのような形」「死ぬほど退屈」「あの水死体は土左衛門のようだ」などの言い回しを用いて表現される。
wikipedia:直喩

Itatoeを形にするにあたって取り組んだ事

サービスの軸を決める　デザインスプリント

デザインスプリントの手法を一部取り入れて、実現すべき機能やデザインを決めていきました。

デザインスプリントとは、プロダクトデザインのための柔軟なフレームワークです。人々が望んでいるものを作り出す確率を高める効果があります。小さなチームで集中的に作業を行い、その成果からプロダクトやサービスの方針を定める事ができます。
デザインスプリント ――プロダクトを成功に導く短期集中実践ガイド P34より

サービスを０から作った経験が業務でもプライベートでも無く、考え方の枠組みが欲しかったため取り入れました。こちらの書籍を参考にしました「デザインスプリント ――プロダクトを成功に導く短期集中実践ガイド」が、
だいぶボリュームがあるのと、ぼっち開発だった（チーム開発を想定している書籍）のため、お試し程度で以下の手法を取り入れました。

カスタマージャーニーマップ

ユーザーが商品やサービスに関わる際、認知・興味・検討・購入などの様々な行程があります。そしてユーザーの行動と、それに紐づく感情・思考・不満(課題)の動きを時系列にまとめたものをカスタマージャーニーマップといいます。
https://goodpatch.com/blog/customer-journey-map/

成果物はデジタル化するのを忘れて行方不明になってしまいました…

タスクストーリー

ユーザーはタスクを現状どう達成しているかをまずリストアップする。次に、タスクを実行する時の動機や要求を考えてみる。
成果物）https://trello.com/b/yCoOezI5/it×比喩-タスクストーリー

ユーザーストーリー

サービスを利用する直前、利用開始〜終了までのユーザーのサービス上での一連の行動をストーリーのように組み立てることで、実現すべき要件を明らかにする。
成果物）https://trello.com/b/14NEPFl2/it×比喩-ユーザーストーリー

デザインスプリントの手法から、実現すべき要件を洗い出した所で実装に入りました。

実装

採用した主な構成技術

• Django
  • Webアプリケーションフレームワーク
• jQuery
  • フロントエンドの細かなUX調整
• Material Design(Material Components Web)
  • デザイン周りの実装
• Heroku
  • ホスティングサービス

サービスの構成

デザインスプリントの結果、洗い出した要件を、Webアプリケーションの機能として落とし込んでいきます。

Django　機能の実装

DjangoのクラスベースViewをベースにサービスの主な機能を実装しました。

　実装の参考にしたサイト

Webフレームワークを使って開発するのは業務でもプライベートでも初めてでした。機能を実装するにあたって、ハマった点、解決の参考にしたリンク一覧です。

用語や「たとえ」の一覧表示:「様々な条件でフィルタしたListViewを一つのページ上に複数表示」
Topページでは、条件でフィルタした用語一覧を複数表示しています。
- たとえが投稿済み
- たとえが未投稿
- たとえのリクエストがあり

用語の一覧を表示するListviewのget_context_dataに対して、フィルタしたcontextを追加してオーバーライドすることで実装しています。
https://stackoverflow.com/a/33886061/10260108

「たとえ」の投稿：「CreateViewのフォームに初期値を設定」
https://stackoverflow.com/a/46571043/10260108

CreateView全般：「form要素にCSSのクラス名を設定」
cssのデザインフレームワークとしてmaterial designを導入するにあたり、templateに直接記述できないform要素にclass名を設定する必要がありました。
https://stackoverflow.com/questions/5827590/css-styling-in-django-forms/18962676

用語登録のリクエスト：「用語が既に登録済みかチェック」
Itatoeでは登録されている用語の中から選んで、アイデアを作成できますが、
仮に思ったような用語がなかった場合、リクエストできる窓口を設けています。
その際に必要になった処理です。
https://stackoverflow.com/questions/39600784/django-1-9-check-if-email-already-exists

Ajaxのいいねボタンの実装
https://e-tec-memo.herokuapp.com/article/75/

初期データ投入
https://qiita.com/mimikun/items/61390da1d9a59aab3d6f

Modelのオブジェクトをランダム取得
Topページのファーストビューで表示される、枠で囲われた用語（実はリンクになってます）や用語ページ下部の「関連する用語」の機能の実装。
https://stackoverflow.com/a/23755881/10260108

Material Components Web関連　デザインの実装

デザインを実装するにあたって用いたのは、Googleの「Material Design」のWeb版「Material Components Web」です。「Material Design」はデザインシステムの一種だそうです。

デザインシステムとは?

• アプリ/サイトが料理で
• デザイナー/デベロッパがシェフならば
• デザインシステムはキッチン＋調理道具+レシピ+食材…

Googleの「Material Design」に置き換えるならば…

• Material Design = 料理教室
• Material Foundation = 料理の基礎知識
• Material Components = 処理ずみの常用食材
• Material Tools = 便利なキッチン用品

引用) UIデザイナーのためのMaterial Designの理解と実践

例えばボタンなら、
- Material Foundation = 料理の基礎知識→ガイドライン
- Material Components = 処理ずみの常用食材→ドキュメント
といった感じでデザインをUIとして提供するまでが体系化されています。

今回は「Material Foundation = 料理の基礎知識」に関して、頻繁に見かけるUIがどういった意図でデザインされているのか？ どうすれば使いやすいUIを作れるのか？　を学びたかったのでMaterial Components Webを選びました。
デザインシステムで用意されているComponentsを用いてアイデアをUIに落とし込んでいきました。

Componentsのレイアウトに関しては、なるべく以下の基本４原則に沿うようにしています。
レイアウトの基本４原則
1. 近接
2. 反復
3. 整列
4. 対比

この原則に従うことで、レイアウトを決めるに当たってをあーでもない、こーでもないと泥沼化する事態を回避できました。

サービス作りを通じて得たもの、今後の課題

サービス作りを通じて得たもの

• Webサービスのアイデアを形にする術。Djangoはプロトタイピングの手段としても使える場面があるかもしれない。

• これまで自分の業務経験や持っていないスキルが相対的に見えてきた気がします。
  ★Djangoに当てはめるならば…
  業務ではTemplate部分のデザイン案作成、html・cssコーディング、レスポンシブデザインの実装などを経験してきました。
  一方Model，View部分はほぼ業務経験がなかったのでとても苦労しました。

今後の課題

• パフォーマンス最適化
  サービスの使いやすさをを高めるに当たってUXやUIについて学びましたが、そもそも大前提として読み込みの速さが求められると思います。
  js,css,pythonでパフォーマンスを意識した実装をあまり意識して出来ていないのが現状です。

• 利用者目線でサービスを批評すること
  Heroku上でデプロイし一段落した後に開発から一歩引いた場面、例えばお昼休みや行列待ちなど、
  つまり開発者としてではなく、利用者に近い立場でサービスを使った際に多くの課題が見えてきました。
  どうしても完璧な形でリリースしたいということにこだわりすぎてしまいました。
  サービスを客観的な目線で批評するフェーズにもう少し早く入るべきでしたし、第三者からのフィードバックを多く、早く貰えばよかったと思います。