tag:crieit.net,2005:https://crieit.net/users/matsubarase/feed CrieitでユーザーMatsubarase.com公式による最近の投稿 2019-10-13T23:43:10+09:00 https://crieit.net/users/matsubarase/feed tag:crieit.net,2005:PublicArticle/15477 2019-10-13T23:43:10+09:00 2019-10-13T23:43:10+09:00 https://crieit.net/posts/960b0aeb50068c42582d201c7dd14467 <h1 id="まとめ"><a href="#%E3%81%BE%E3%81%A8%E3%82%81">まとめ</a></h1> <ul> <li><a target="_blank" rel="nofollow noopener" href="https://noshi-king.matsubarase.com">のし王</a>というWebサービスを作った。<br /> <a href="https://crieit.now.sh/upload_images/fffb317da90f57ce80e2986ead5be3bd5da337e03f206.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/fffb317da90f57ce80e2986ead5be3bd5da337e03f206.png?mw=700" alt="のし王サムネイル" /></a></li> <li>のし作成サービスが既に存在する中で、下記に気をつけたというお話。 <ul> <li>サービス作成のきっかけになった不満点・ニーズをもれなく仕様に落とし込む</li> <li>仕様策定時は技術的な楽さに甘えず、ユーザー体験を優先する</li> <li>上記を実現するため必要最低限の技術を選定する</li> </ul></li> </ul> <h1 id="不満点の解消、ニーズを仕様に落とし込む"><a href="#%E4%B8%8D%E6%BA%80%E7%82%B9%E3%81%AE%E8%A7%A3%E6%B6%88%E3%80%81%E3%83%8B%E3%83%BC%E3%82%BA%E3%82%92%E4%BB%95%E6%A7%98%E3%81%AB%E8%90%BD%E3%81%A8%E3%81%97%E8%BE%BC%E3%82%80">不満点の解消、ニーズを仕様に落とし込む</a></h1> <ul> <li>ちょっとした贈り物に「のし」をつけたかった。</li> <li>既存サービスは、以下の点で不満が残った。 <ul> <li>「のし紙」のテンプレート（背景画像）だけが提供されており、Wordなどに貼り付けた後、自分で文字を描かないとダメだった</li> <li>Web上で任意の文字まで入れられるサービスでは、最後になるまで仕上がり具合がが分からなかった</li> <li>最終画像にサービス名のロゴが入ってしまい、贈り物には不向きだった</li> <li>フォントがしょぼかった</li> <li>水引き（背景画像）や表書き（御礼などの上部の文字）をどう選んでよいか分からなかった</li> </ul></li> <li>不満点の解消をもれなく仕様に落とし込んだ。 <ul> <li>背景画像と任意の文字を組み合わせてPDFで出力できるようにする</li> <li>最終出力結果には広告を入れない</li> <li>有料でもカッコいいフォントを採用する</li> <li>用途に応じて自動で「水引き」と「表書き」が選択できるようにする</li> </ul></li> <li>マッスルの神様 ＝ マ神　→　熨斗の王様 ＝ のし王</li> </ul> <h1 id="ユーザー体験を最優先する"><a href="#%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E4%BD%93%E9%A8%93%E3%82%92%E6%9C%80%E5%84%AA%E5%85%88%E3%81%99%E3%82%8B">ユーザー体験を最優先する</a></h1> <div class="table-responsive"><table> <thead> <tr> <th align="left"></th> <th align="left">技術的な楽さを優先</th> <th align="left">ユーザー体験を優先</th> </tr> </thead> <tbody> <tr> <td align="left">文字描画</td> <td align="left">ユーザー自身がWordなどで描画</td> <td align="left">Webサービス上で描画</td> </tr> <tr> <td align="left">仕上がり確認</td> <td align="left">プレビュー不可 or プレビューボタンクリックで表示</td> <td align="left">リアルタイムプレビュー表示</td> </tr> <tr> <td align="left">水引き、表書き</td> <td align="left">ユーザーの選択したものを表示</td> <td align="left">用途を選ぶと最適な水引き、表書きを自動で選択</td> </tr> <tr> <td align="left">描画フォント</td> <td align="left">無料の範囲で選択可能</td> <td align="left">有料で質の良いフォントが選択可能</td> </tr> <tr> <td align="left">ユーザーが泥酔状態</td> <td align="left">酔いが冷めてから使う</td> <td align="left">泥酔状態でも直感で使える</td> </tr> </tbody> </table></div> <h1 id="仕様の実現方法を考える"><a href="#%E4%BB%95%E6%A7%98%E3%81%AE%E5%AE%9F%E7%8F%BE%E6%96%B9%E6%B3%95%E3%82%92%E8%80%83%E3%81%88%E3%82%8B">仕様の実現方法を考える</a></h1> <ul> <li>使用した技術 <ul> <li>Webサービス上で文字描画しPDF出力 <ul> <li>水引きの種類や表書きなどの情報をブラウザ上で選択させる</li> <li>サーバーでPDFを作成してダウンロードさせる(Golang/Google App Engine)</li> </ul></li> <li>リアルタイムプレビュー表示 <ul> <li>サムネイル描画サーバー(Golang/Google App Engine)を準備</li> <li>水引きの種類や表書きなどの情報が変更されたらAjax(jQuery)でサーバーからサムネイル画像を取得し、ブラウザ上に即時反映</li> </ul></li> <li>用途を選ぶと最適な水引き、表書きを自動で選択 <ul> <li><a target="_blank" rel="nofollow noopener" href="https://wikiki.github.io/components/quickview/">Bulma-ExtensionsのQuickView</a>で用途一覧を表示</li> <li>用途を入力させて絞り込み(jQuery)</li> <li>用途クリックで「水引き」と「表書き」を最適なものに変更(jQuery)</li> </ul></li> </ul></li> <li>選定理由 <ul> <li>仕様実現に際して最低限／シンプルなものを選ぶ</li> <li>最新の技術よりも枯れて安定した技術を選ぶ</li> <li>なるべくメンテナンスが不要なものを選ぶ</li> </ul></li> </ul> Matsubarase.com公式