tag:crieit.net,2005:https://crieit.net/users/subscrec/feed naopoyoの投稿 - Crieit Crieitでユーザーnaopoyoによる最近の投稿 2019-12-08T02:53:46+09:00 https://crieit.net/users/subscrec/feed tag:crieit.net,2005:PublicArticle/15588 2019-12-08T02:53:46+09:00 2019-12-08T02:53:46+09:00 https://crieit.net/posts/Hacker-Sheet-5debe72a13c0a Hacker Sheet のボード機能を廃止した理由 <p>個人で開発・運用しているチートシートの共有サービス「<a target="_blank" rel="nofollow noopener" href="https://hackersheet.com/">Hacker Sheet</a>」の方針を大きく変更した理由についての記事です。</p> <p>シンプルを目指してたのに、シンプルとは違う方向に向かっていたという話です。</p> <h2 id="昔のはなし"><a href="#%E6%98%94%E3%81%AE%E3%81%AF%E3%81%AA%E3%81%97">昔のはなし</a></h2> <p>Hacker Sheet では元々はひとつのチートシートに記述できる要素をかなり少なめに制限していました。</p> <p>そうすることで、一覧表示するときにすべての要素を表示でき、詳細ページに遷移する必要がなくなり、これには、タップの手間が一つ減るという利点がありました。</p> <p><a href="https://crieit.now.sh/upload_images/c948936623cc470241df72c2d6cf29815debe2f0e1ca2.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/c948936623cc470241df72c2d6cf29815debe2f0e1ca2.png?mw=700" width="240px"></a></p> <p>小さなチートシートを必要なものだけ組み合わせてカスタマイズする、といった使い方も想定していました。誰かが作ったチートシートを組み合わせることで、自分で一から作成する手間を省くこともできます。</p> <p>このために、ボードという、チートシートをまとめる機能を実装していました。</p> <h2 id="今のはなし"><a href="#%E4%BB%8A%E3%81%AE%E3%81%AF%E3%81%AA%E3%81%97">今のはなし</a></h2> <p>しかし、しばらく使ってみて、小さなチートシートという方針を変更することにしました。</p> <p>例えば、今では、<a target="_blank" rel="nofollow noopener" href="https://hackersheet.com/sheets/6">Gitに関するチートシート</a>はリンク先のようになっています。昔はこのようなページを作る場合、「Git」というボードに「Gitのユーザー設定」「Gitのローカルリポジトリ作成」というチートシートを追加していくという方法になっていました。</p> <p>このように、チートシートを作るとなると、ある程度の要素数になるため、ボードを使うことが多くなってしまいました。</p> <p>結局、ボードを作成して、チートシートを作成してボードに追加して、チートシートに要素を追加して、と編集の手間が増えるだけになってしまいました。これは、利用者がチートシートを作ろうとしたとき、イメージしづらいという点でも良くありません。</p> <p>なんとなく予想できそうな気がしますが、実際に動くものを触ってみないとわからないものです😢</p> <p>そして、ボード機能は廃止して、チートシートに追加できる要素数を増やし、今の形に落ち着きました。</p> <h2 id="新しい機能のはなし"><a href="#%E6%96%B0%E3%81%97%E3%81%84%E6%A9%9F%E8%83%BD%E3%81%AE%E3%81%AF%E3%81%AA%E3%81%97">新しい機能のはなし</a></h2> <p>スマホでの編集をできる限り簡略化するため「小さなチートシートを組み合わせてカスタマイズ」という考え方は形にしたいと思っていて、「クリップ」という機能を作りました。</p> <p>チートシートの要素だけを一時的に保存して、そこから別のチートシートに追加できる機能です。</p> <p><a href="https://crieit.now.sh/upload_images/58e167711900a11da6616be71aaa0f795debe4af7dbbc.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/58e167711900a11da6616be71aaa0f795debe4af7dbbc.jpg?mw=700" width="240px"></a></p> <p>この機能もしばらく使ってみてから、より良い形になっていけば良いと思います。</p> <p>おしまい。</p> naopoyo tag:crieit.net,2005:PublicArticle/15367 2019-09-01T00:10:15+09:00 2019-09-01T00:10:15+09:00 https://crieit.net/posts/Hacker-Sheet Hacker Sheet 開発の記録 - 仕様の整理 <h2 id="この記事について"><a href="#%E3%81%93%E3%81%AE%E8%A8%98%E4%BA%8B%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">この記事について</a></h2> <p>私が運営中のチートシート共有サービス「<a target="_blank" rel="nofollow noopener" href="https://hackersheet.com/">Hacker Sheet</a>」に関する記事です。</p> <p>どういう意図でこの機能を実装したか、みたいなことの記録です。</p> <p>「なんでこんな機能にしたんだ?」と忘れがちなので。</p> <hr /> <h2 id="はじまり"><a href="#%E3%81%AF%E3%81%98%E3%81%BE%E3%82%8A">はじまり</a></h2> <p>もともとは、ターミナルでコマンド打つとき、ど忘れするとググってQiitaの記事などを読む、みたいなことが多いので、これを解決するようなものを作ろうと思ったのがきっかけ。</p> <p><code>rails new</code>のオプションとか、npmの操作とか。</p> <ul> <li>チートシートの項目が1行(最近複数行の</li> <li>項目をタップするとクリップボードにコピー</li> </ul> <p>のような部分は、こういうはじまりの影響。</p> <p>コマンドを投稿して共有できるようなもの=チートシートということで、チートシート共有サービスという形にした。</p> <h2 id="差別化"><a href="#%E5%B7%AE%E5%88%A5%E5%8C%96">差別化</a></h2> <p>チートシートとして色々まとめてるウェブサイトも多いし、<a target="_blank" rel="nofollow noopener" href="https://cheat.sh">cheat.sh</a>のようなのもあるので、スマホ最適化で差別化することに。</p> <p>Universal Clipboardでクリップボードを共有できるので、Macbookで作業してるときにiPhoneで調べてコマンドをコピー、ターミナルにペーストみたいなことができると便利かなと思った。</p> <p>けど、PCで作業中にスマホを持って操作するのは、わりとめんどうということを最近感じている。</p> <p>スマホを持たなくても良いような連携ができないか考え中。</p> <p>スマホで見やすくするために、情報を少なめにしたいので、網羅的なチートシートよりも、必要なものだけをカスタマイズしたコンパクトなものを作れるような感じにしたい。</p> <h2 id="主な機能「シート」と「ピース」と「ボード」"><a href="#%E4%B8%BB%E3%81%AA%E6%A9%9F%E8%83%BD%E3%80%8C%E3%82%B7%E3%83%BC%E3%83%88%E3%80%8D%E3%81%A8%E3%80%8C%E3%83%94%E3%83%BC%E3%82%B9%E3%80%8D%E3%81%A8%E3%80%8C%E3%83%9C%E3%83%BC%E3%83%89%E3%80%8D">主な機能「シート」と「ピース」と「ボード」</a></h2> <p>主な機能の説明。この辺の関係性をうまく伝えたい。</p> <h3 id="シート"><a href="#%E3%82%B7%E3%83%BC%E3%83%88">シート</a></h3> <p><a href="https://crieit.now.sh/upload_images/f6108466508383444f4632d4338379b35d6a6be82b879.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/f6108466508383444f4632d4338379b35d6a6be82b879.png?mw=700" alt="シートの画像" /></a></p> <p>画像のように、いくつかの項目で構成された「シート」を作成できる。Hacker Sheetでは、この「シート」を作成・検索するのが主要な機能となる。</p> <p>「これはメモしておこう」というときに簡単に作成できるのが理想。</p> <p>シートに追加できる項目は10個までにしている。1つのシートが長くなると検索結果が長くなって探すのが大変になるという考え。</p> <p>しかし、折りたたんで表示みたいなことをすれば長さの問題は解決するので、その点では、もう少し制限を緩くしても良いかもしれない。</p> <h3 id="ピース"><a href="#%E3%83%94%E3%83%BC%E3%82%B9">ピース</a></h3> <p>シートに追加していく項目のこと。</p> <ul> <li>シート内で並べ換えることができる</li> <li>プログラムのコードなどをハイライト表示できる</li> <li>タップすると内容をクリップボードにコピーできる</li> </ul> <p>のような機能がある。</p> <h3 id="ボード"><a href="#%E3%83%9C%E3%83%BC%E3%83%89">ボード</a></h3> <p>テーマごとにシートをまとめて整理するための機能。</p> <blockquote> <p><a target="_blank" rel="nofollow noopener" href="https://hackersheet.com/boards/6">Ruby on Rails チートシート</a></p> </blockquote> <p>このような「〇〇チートシート」みたいなものはボードにシートを追加して作ることができる。他の人が作ったシートでも、自分のボードに追加できるので組み合わせてカスタマイズできる。</p> <p>他の人の作ったシートを少し変えたい、というときのために「フォーク」という機能を作った。</p> <p>整理するための機能としてシートに「タグ(ラベル)」をつける機能は不採用にした。タグ付けはめんどくさいという理由。</p> <p>かわりに、シートの内容を形態素解析してキーワードとして保存している。</p> <p>非公開のボードも作成できる。公開ボードは個別ページが作成されて、Googleの検索にでてくるので、そうならないようにするための機能。</p> <hr /> <p>こんな感じで開発の記録を残していこうと思います。</p> <p>開発<strong>日記</strong>ほど頻繁ではないにしても。</p> naopoyo