Edited at

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

オッス(Z戦士)

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



(おやつを食べると思わず)笑っちゃうんすよね。

ぼくは大量のコードと長時間向き合ってもビクともしない超(スーパー)エンジニア人ではないので、

作業中は仙豆に相当する"おやつ"と"飲み物"で都度回復しないと、

「hassoubeat(ぼく)は置いてきた...ハッキリ言ってこれからの業務にはついていけない...」

tyaozu.gif

餃子かわいそう。

といった具合に、天さん(上司)に見捨てられること請け合いです。

そんなぼくをギリギリ戦いに参加できるヤムチャレベルまで引き上げてくれるドーピングアイテム。

それが、作業中の"おやつ"と"飲み物"なのです。

今回はそんなぼくが愛好する"おやつ"、"飲み物"を...

オラが作ったRailsのWebアプリで『作業が捗るおやつ・ドリンク集』をいっちょ紹介してみっか!!!(唐突)

作業が捗るおやつ・ドリンク集 by hassoubeat LinkS



赤枠の箇所をクリック・タッチしてもらえればブックマークに対して一言コメントが読めるゾ

個人的に"きかんしゃトーマスとなかまたちチューイングキャンディ」と「マテ茶」は実力はあるのに、あまり知られていないのが残念で仕方ないです。

もし興味を持っていただけたら、リンク先からポチってお試しいただけると嬉しいです。








...。

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

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


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


(おやつの話以外)興味ないね(魔晄中毒者)という方は、

オススメの"おやつ"と"飲み物"をコメントに書いてからブラウザバックしてもらえたら嬉しいゾ

cloud.jpeg

FF7リメイクはいつ...?


自作Webアプリの紹介

今回開発したWebアプリ『LinkS(リンクス)』の紹介にイクゾー!

LinkS_login.png

安直なネーミング恥ずかしくないのかよ


そもそもこのアプリはなんなの?

コメントを付けたブックマーク集をワンクリックで公開してSNSにも簡単に共有できるブックマークシェアWebアプリです。


yaruo2.png

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


1.フォルダー作成

LinkS_create_folder.png

ブックマークの公開・共有はフォルダー単位で行われるため、まずフォルダーを。

公開に設定しない限り、自分だけのブックマーク集としても利用できます。

2.ブックマーク登録

LinkS_create_link.png

さっき作ったフォルダーにブックマークを登録します。Just Monika.

3.フォルダー公開

LinkS_folder_edit.png

フォルダーの公開設定を公開に変更することで、ログインしている本人以外にもURLを叩けばそのフォルダーが見れるように。

4.シェア

LinkS_share_line.png

LinkS_share_twitter.png

おすすめゲームのPV集 by hassoubeat LinkS

URLを直接シェアする以外にも、LinkSからSNSに直接シェアすることもできます。

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

LinkS_sm_login.png LinkS_sm_sidebar.png LinkS_sm_TOP.png

...。

機能がシンプル過ぎるので、話すことがなくなりました。

一応申し訳程度にいいね機能、管理機能とかも実装してます。

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


なんで作ろうと思い立ったワケ?

理由は2つありますねぇ!

1.RubyOnRailsのポートフォリオを作りたかった

2.弟がHTMLの勉強を始めるにあたって何をしたらいいか聞いてきた


1.RubyOnRailsのポートフォリオを作りたかった

Webアプリケーション開発のフレームワークとしての知名度が高いRubyOnRailsの学習の成果として、

何かポートフォリオ作りてぇな...。と考えていたのですが、なかなかピンとくる題材がなく...

(あんまり手の混んだやつは作るのがめんでぇぞ!の意)


2.弟がHTMLの勉強を始めるにあたって何をしたらいいか聞いてきた

ある日弟が「HTMLの勉強をしたいのだが、まず何から手を付けたらよいのか?」と聞いてきました。

入門者向けのテキスト読んでもいいし、活字が苦手なやつだしドットインストールみたいなサイトで動画で動きを見ながらやったほうがいいかな...。

みたいなことを考えてHTML初学者が手を付けるべきサイトやテキストのAmazonのリンクに補足のコメントを付けてまとめていました。

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

amro.jpeg

この感覚...!残業か!!!

そんな感じのコメント付きのリンク集を簡単にシェアできるWebアプリ...。

Railsのポートフォリオの題材としてちょうどいい...!

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


これいる?


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

A.

yaruo.jpg

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


Q.(似たようなサービスがあるのに)これいる?

A.

(作ったのは)おれじゃない

(超エンジニア人の)あいつらがつくった

(おれはそんなサービス)しらない

(実装が)すんだこと




既に似たようなサービスがあることを気にしていたらポートフォリオなんて作れないんだよぉぉぉぉ!



vegita.png

開発中しょうもないミスで一時間くらい詰まっていた時、心の中で叫ぶセリフ第一位。


使ったフレームワーク


RubyOnRails

説明不要のWebアプリケーションフレームワーク。

いずれRubyの仕事もしたいなーってことで勉強を始めたけど、ほんとに生産性上がってMAX大草原。

あんまりによかったのでRailsを参考にしているらしいPHPのLaravelも近々触ってみようかと思った(小並感)


Haml



テンプレートエンジン。

Haml か Slimがよく採用されているらしいけど、なんとなくHamlを採用。

はじめは「書きにくいな...全部ERBで書いた後にerb2hamlでhamlに変換してやろうか...くそったれぇ...!(本末転倒)」なんてその気になっていたお前の姿はお笑いだったぜ。

慣れれば慣れるほどコードの見通しが良くなって、結果的に生産性向上に大きく貢献してくれました。


Bootstrap

説明不要のCSSフレームワーク。

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


jQuery

い つ も の (JavaScriptフレームワーク)

まだオワコンフレームワーク使ってんのかよ?」と思った貴方。



いきなりvue.jsかよ。モダンッパリらしいな。

世界最高フレームワークjQueryを侮辱した罪...軽くねーぜ?




ごめんなさい。慣れてるからっていっつもなんとなくで使っちゃうんです...。

jQueryからvue.jsのステップアップ記事とか見てると、凄い良さそうなんで今度使います...。

(すぐ使うとは言ってない)


改修、機能追加したい部分

1. ブックマークのURL入力時に自動でページタイトルをスクレイピングして、タイトルの入力の手間軽減

クロスドメインでのスクレイピングを跨げるライブラリが利用しているYahoo!のYQLが完全に死んだらしく、

どうにかして実現できないかなと模索中。

2. GoogleChromeの拡張機能で、ブラウザのブックマークからのインポート処理機能

そもそも普段使ってるブラウザのブックマークからインポートできたら一番ラクだよねってこと。

GoogleChrome拡張機能開発の勉強をやってみたいので、割とモチベ高し。

3. SPA化

RailsをAPIモードにして、ページ表示はクライアントからAPIを叩くだけの構成を実装してみたい。

このアプリでは作り直すのがめんどくさいので多分やらない(屑)


(ポートフォリオ作成を)完走した感想

まずRubyOnRailsの生産性の高さに驚きました。

使わなくても分かるシンプル構成のシステムなのもあり、ほとんどサーバ側のコードは書いてないです。

全体工数の7割はクライアント側のUI作成に時間が取られてます。

...。

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

でもやっぱり設計、製造、テスト、リリース : 俺は気軽に色々やれて楽しいですね。

実務だとなかなかそうはいかないので、みんなも気軽にポートフォリオ作成して...見せ合いっこしよっ!!!

俺もやったんだからさ(同調圧力)

あっ(唐突)、作業中に良さげな"おやつ"と"飲み物"があったら、コメント欄で教えてください。

LinkSで教えてくれたらもっと嬉しいです


余談:他のおすすめリンク集

せっかく作ったアプリなので、他のぼくセレクトも公開します。


RubyOnRailsの学習に役立ったリンク集 by hassoubeat LinkS

RubyOnRailsの学習を始めるにあたって参考になったリンク集です。


おすすめゲームのPV集 by hassoubeat LinkS

ハードウェア問わずおすすめのゲーム集です。


落ち込んでいる時に元気が出る動画集 by hassoubeat LinkS

落ち込んでいる時に見ると元気を貰える動画集です。

※ ぼくセレクトなので、効果の保証はできません