【Rails】【ポートフォリオ】自作のブックマークシェアWebアプリで『作業が捗るおやつ・ドリンク集』を紹介します

<h5>オッス(Z戦士)</h5>

突然ですが、<b>作業中の"<font color="orange">おやつ</font>"と"<font color="blue">飲み物</font>"って生きてく上での酸素と同じくらい大切</b>だと思うんですよね。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312085/ab3c5a34-90ec-d140-c1a8-e1e590203543.png" width=30%>
<font color="Silver">(おやつを食べると思わず)笑っちゃうんすよね。</font>


ぼくは大量のコードと長時間向き合ってもビクともしない<b>超(スーパー)エンジニア人</b>ではないので、
作業中は仙豆に相当する"<font color="orange">おやつ</font>"と"<font color="blue">飲み物</font>"で都度回復しないと、

<h5>「hassoubeat(ぼく)は置いてきた...ハッキリ言ってこれからの業務にはついていけない...」</h5>
![tyaozu.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312085/4a13369b-0b89-4769-dbaa-d9bf7e993b7f.gif)
<font color="Silver">餃子かわいそう。</font>

といった具合に、天さん(上司)に見捨てられること請け合いです。
そんなぼくを<b>ギリギリ戦いに参加できるヤムチャレベル</b>まで引き上げてくれるドーピングアイテム。

それが、作業中の"<font color="orange">おやつ</font>"と"<font color="blue">飲み物</font>"なのです。

今回はそんなぼくが愛好する"おやつ"、"飲み物"を...
<h4>オラが作ったRailsのWebアプリで『作業が捗るおやつ・ドリンク集』をいっちょ紹介してみっか！！！(唐突)</h4>

<h4><a href="https://links.hassoubeat.com/users/1/folders/11" target="_blank">作業が捗るおやつ・ドリンク集 by hassoubeat LinkS</a></h4>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312085/20b659ab-6a0b-32a8-3083-4c46d1776e16.png">
<font color="pink">赤枠の箇所をクリック・タッチしてもらえればブックマークに対して一言コメントが読めるゾ</font>

個人的に"<font color="orange">きかんしゃトーマスとなかまたちチューイングキャンディ</font>」と「<font color="blue">マテ茶</font>」は実力はあるのに、あまり知られていないのが残念で仕方ないです。
もし興味を持っていただけたら、リンク先からポチってお試しいただけると嬉しいです。

<br>
<br>
<br>


...。
Webアプリ側にコメントを書いているので当たり前なのですが、おやつに関して書くことがなくなってしまいました。

このまま終わるのも寂しいという皆様のためにぃ（ねっとり)

<br>

<b>ここから先は今回開発したWebアプリの話</b>でもしようかと思います。


<br>

<b>(おやつの話以外)興味ないね(魔晄中毒者)</b>という方は、
オススメの"<font color="orange">おやつ</font>"と"<font color="blue">飲み物</font>"をコメントに書いてからブラウザバックしてもらえたら嬉しいゾ

![cloud.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312085/47fab9cc-40d9-505b-e9ec-313210a21c8a.jpeg)
<font color="silver">FF7リメイクはいつ...？</font>

# 自作Webアプリの紹介

<h5>今回開発したWebアプリ『<a href="https://links.hassoubeat.com/" target="_blank">LinkS(リンクス)</a>』の紹介にイクゾー！</h5>

![LinkS_login.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312085/74a52c5a-392b-645d-854d-cf0ea464d3fa.png)
<font color="silver">安直なネーミング恥ずかしくないのかよ</font>




## そもそもこのアプリはなんなの？
<b>コメントを付けたブックマーク集をワンクリックで公開してSNSにも簡単に共有できるブックマークシェアWebアプリ</b>です。
<br>

![yaruo2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312085/6fd89afb-a3e8-81fd-51fe-0b452e4a818f.png)

実際にシェアするまでの流れを見てもらいましょう。
<br>

<b>1.フォルダー作成</b>
![LinkS_create_folder.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312085/4f9d1b4d-a3b2-f299-c325-747e9d2f9f5d.png)
<font color="gray">ブックマークの公開・共有はフォルダー単位で行われるため、まずフォルダーを。
公開に設定しない限り、自分だけのブックマーク集としても利用できます。</font>

<b>2.ブックマーク登録</b>
![LinkS_create_link.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312085/4a9f3e7a-afef-03cf-4a9a-5ea12ea36c8c.png)
<font color="gray">さっき作ったフォルダーにブックマークを登録します。<font color="silver">Just Monika.</font></font>

<b>3.フォルダー公開</b>
![LinkS_folder_edit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312085/8de6dfc3-ca95-2299-e849-d1c7ff6fda5f.png)
<font color="gray">フォルダーの公開設定を公開に変更することで、ログインしている本人以外にもURLを叩けばそのフォルダーが見れるように。</font>

<b>4.シェア</b>
![LinkS_share_line.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312085/d8b8adc5-b6e5-5f82-db7f-f642d9e23910.png)
![LinkS_share_twitter.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312085/5233d674-04cb-b6c3-0352-69dbd7343d3f.png)
<a href="https://links.hassoubeat.com/users/1/folders/1" target="_blank">おすすめゲームのPV集 by hassoubeat LinkS</a>
<font color="gray">URLを直接シェアする以外にも、LinkSからSNSに直接シェアすることもできます。</font>


<b>ちなみにスマホでもちゃんと使えます</b>

 ![LinkS_sm_login.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312085/0e893f18-95aa-907e-a167-361fae6fd2d1.png)   ![LinkS_sm_sidebar.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312085/21edfe84-62b7-8c3a-a92b-b8a45aea05de.png)  ![LinkS_sm_TOP.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312085/011f4288-327f-a4b0-d0fe-b85d1c97beeb.png)

...。
機能がシンプル過ぎるので、話すことがなくなりました。
一応申し訳程度にいいね機能、管理機能とかも実装してます。

<b>現在β版ですが、もし気になる人がいたら捨てアドでアカウント登録して使ってみてくれたら嬉しいゾ。</b>

## なんで作ろうと思い立ったワケ？
理由は２つありますねぇ！

<b>1.RubyOnRailsのポートフォリオを作りたかった</b>
<b>2.弟がHTMLの勉強を始めるにあたって何をしたらいいか聞いてきた</b>

### 1.RubyOnRailsのポートフォリオを作りたかった
Webアプリケーション開発のフレームワークとしての知名度が高いRubyOnRailsの学習の成果として、
何かポートフォリオ作りてぇな...。と考えていたのですが、<b>なかなかピンとくる題材がなく...</b>。
<font color="silver">(あんまり手の混んだやつは作るのがめんでぇぞ！の意)</font>

### 2.弟がHTMLの勉強を始めるにあたって何をしたらいいか聞いてきた
ある日弟が<b>「HTMLの勉強をしたいのだが、まず何から手を付けたらよいのか？」</b>と聞いてきました。
入門者向けのテキスト読んでもいいし、活字が苦手なやつだしドットインストールみたいなサイトで動画で動きを見ながらやったほうがいいかな...。
みたいなことを考えてHTML初学者が手を付けるべきサイトやテキストのAmazonのリンクに補足のコメントを付けてまとめていました。

<b>こんな感じの一言コメントを付けたリンク集を簡単に共有できるWebアプリとかねーかな...</b>

![amro.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312085/b8751ba2-93cb-2f33-f684-770ddfbba976.jpeg)
<font color="silver">この感覚...！残業か！！！</font>

そんな感じのコメント付きのリンク集を簡単にシェアできるWebアプリ...。
Railsのポートフォリオの題材としてちょうどいい...！

という渡りに船な出来事があって、LinkSは誕生しました。(ガイドのお姉さん風)


## これいる？

#### <b>Q.(ブラウザがブックマークをクラウド管理してくれるこのご時世に)これいる？</b>

<b>A.</b>
![yaruo.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312085/1a9b67bc-3542-0a2f-093b-94d26d942079.jpeg)

文字制限があるTwitterで自分のオススメ〇〇集！みたいなのを共有したい人に需要があるかもしれない(希望的観測)

#### <b>Q.(似たようなサービスがあるのに)これいる？</b>

<b>A.</b>
<b>(作ったのは)おれじゃない
(超エンジニア人の)あいつらがつくった
(おれはそんなサービス)しらない
(実装が)すんだこと</b>

<br>
<h4>既に似たようなサービスがあることを気にしていたらポートフォリオなんて作れないんだよぉぉぉぉ！</h4>
![vegita.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312085/caf0a0bd-3644-9550-a03f-5fd5d58b785e.png)
<font color="silver">開発中しょうもないミスで一時間くらい詰まっていた時、心の中で叫ぶセリフ第一位。</font>




## 使ったフレームワーク
#### RubyOnRails
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312085/8109eb8e-0c6d-ee74-c31f-6ec0d6440ba0.png" width=20%>

説明不要のWebアプリケーションフレームワーク。
いずれRubyの仕事もしたいなーってことで勉強を始めたけど、ほんとに生産性上がってMAX大草原。
あんまりによかったのでRailsを参考にしているらしいPHPのLaravelも近々触ってみようかと思った(小並感)

#### Haml

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312085/b1175fe3-3b0a-fb67-dad3-2e229e09c656.jpeg" width=20%>
テンプレートエンジン。
<b>Haml か Slim</b>がよく採用されているらしいけど、なんとなくHamlを採用。
はじめは「<b>書きにくいな...全部ERBで書いた後に<a href="https://qiita.com/m_doi/items/1f01fd2b1a52c2c43f1f" target="_blank">erb2hamlでhamlに変換</a>してやろうか...くそったれぇ...！(本末転倒)</b>」なんてその気になっていたお前の姿はお笑いだったぜ。
慣れれば慣れるほどコードの見通しが良くなって、結果的に生産性向上に大きく貢献してくれました。

#### Bootstrap

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312085/eccce989-b8c8-6a1c-1e7d-4d04be6b5bc1.png" width=20%>

説明不要のCSSフレームワーク。
デザイン面がクソザコナメクジ過ぎていっつもこればっかり使っているので、今度違うWebアプリ作る時は頼らないで作りたい(猛省)


#### jQuery

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312085/0b36e73f-d860-d323-a4a4-05d415626b3a.jpeg" width=20%>

<b>い つ も の (JavaScriptフレームワーク)</b>
「<b>まだオワコンフレームワーク使ってんのかよ？</b>」と思った貴方。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312085/faf12bdc-0618-db2e-4e01-d15c947eac80.jpeg" width=50%>
<font color="silver">いきなりvue.jsかよ。モダンッパリらしいな。</font>

<b>世界最高フレームワークjQueryを侮辱した罪...軽くねーぜ？</b>

<br>
ごめんなさい。慣れてるからっていっつもなんとなくで使っちゃうんです...。
<a href="https://qiita.com/mio3io/items/e7b2596d06b8005e8e6f" target="_blank">jQueryからvue.jsのステップアップ</a>記事とか見てると、凄い良さそうなんで今度使います...。
<font color="silver">(すぐ使うとは言ってない)</font>




## 改修、機能追加したい部分
<b>1. ブックマークのURL入力時に自動でページタイトルをスクレイピングして、タイトルの入力の手間軽減</b>
クロスドメインでのスクレイピングを跨げるライブラリが利用しているYahoo!のYQLが完全に死んだらしく、
どうにかして実現できないかなと模索中。

<b>2. GoogleChromeの拡張機能で、ブラウザのブックマークからのインポート処理機能</b>
そもそも普段使ってるブラウザのブックマークからインポートできたら一番ラクだよねってこと。
GoogleChrome拡張機能開発の勉強をやってみたいので、割とモチベ高し。

<b>3. SPA化</b>
RailsをAPIモードにして、ページ表示はクライアントからAPIを叩くだけの構成を実装してみたい。
このアプリでは作り直すのがめんどくさいので多分やらない(屑)


#(ポートフォリオ作成を)完走した感想
まずRubyOnRailsの生産性の高さに驚きました。
使わなくても分かるシンプル構成のシステムなのもあり、ほとんどサーバ側のコードは書いてないです。
全体工数の7割はクライアント側のUI作成に時間が取られてます。

...。
これもうRubyOnRailsのポートフォリオとして成立してるかわかんねぇな(屑)

でもやっぱり<b>設計、製造、テスト、リリース : 俺</b>は気軽に色々やれて楽しいですね。
実務だとなかなかそうはいかないので、<b>みんなも気軽にポートフォリオ作成して...見せ合いっこしよっ！！！</b>
<font color="silver">俺もやったんだからさ(同調圧力)</font>

あっ(唐突)、作業中に良さげな"<font color="orange">おやつ</font>"と"<font color="blue">飲み物</font>"があったら、コメント欄で教えてください。
<font color="silver">LinkSで教えてくれたらもっと嬉しいです</font>


# 余談：他のおすすめリンク集
せっかく作ったアプリなので、他のぼくセレクトも公開します。

#### <a href="https://links.hassoubeat.com/users/1/folders/13" target="_blank">RubyOnRailsの学習に役立ったリンク集 by hassoubeat LinkS</a>
RubyOnRailsの学習を始めるにあたって参考になったリンク集です。

#### <a href="https://links.hassoubeat.com/users/1/folders/1" target="_blank">おすすめゲームのPV集 by hassoubeat LinkS</a>
ハードウェア問わずおすすめのゲーム集です。

#### <a href="https://links.hassoubeat.com/users/1/folders/14" target="_blank">落ち込んでいる時に元気が出る動画集 by hassoubeat LinkS</a>
落ち込んでいる時に見ると元気を貰える動画集です。
<font color="silver">※ ぼくセレクトなので、効果の保証はできません</font>