tag:crieit.net,2005:https://crieit.net/users/TaKO8Ki/feed
TaKO8Kiの投稿 - Crieit
CrieitでユーザーTaKO8Kiによる最近の投稿
2019-04-19T09:16:52+09:00
https://crieit.net/users/TaKO8Ki/feed
tag:crieit.net,2005:PublicArticle/14909
2019-04-09T22:21:31+09:00
2019-04-19T09:16:52+09:00
https://crieit.net/posts/800-Twitter-Negomo
誰でも新卒年収800万宣言できる、Twitter就活サービス「Negomo(ネゴモ)」をリリースした。【個人開発】
<p>「Twitter就活の促進」をテーマにしたサービス「<a target="_blank" rel="nofollow noopener" href="https://negomo.me">Negomo(ネゴモ)</a>」をリリースしました!</p>
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">自分が欲しい報酬額をツイートしてTwitter就活できるサービス「Negomo(ネゴモ)」を作ってみました!下のような画像がツイートできます。Twitterアカウントで利用できるのでぜひ使ってみてください!<a target="_blank" rel="nofollow noopener" href="https://t.co/JRXFe8lHov">https://t.co/JRXFe8lHov</a><a target="_blank" rel="nofollow noopener" href="https://twitter.com/hashtag/Negomo?src=hash&ref_src=twsrc%5Etfw">#Negomo</a> <a target="_blank" rel="nofollow noopener" href="https://twitter.com/hashtag/RT%E6%8B%A1%E6%95%A3%E3%81%8A%E9%A1%98%E3%81%84%E3%81%97%E3%81%BE%E3%81%99?src=hash&ref_src=twsrc%5Etfw">#RT拡散お願いします</a></p>— TaKO8Ki (@takoyaki3160) <a target="_blank" rel="nofollow noopener" href="https://twitter.com/takoyaki3160/status/1114776315847004160?ref_src=twsrc%5Etfw">April 7, 2019</a></blockquote>
<p>Twitterアカウントで利用できるので、もしよかったら使ってみてください!</p>
<h1 id="リリースしたサービス"><a href="#%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9%E3%81%97%E3%81%9F%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9">リリースしたサービス</a></h1>
<p><a target="_blank" rel="nofollow noopener" href="https://negomo.me">Negomo(ネゴモ) - もっとTwitter就活しよう!</a></p>
<h1 id="サービスの概要"><a href="#%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%AE%E6%A6%82%E8%A6%81">サービスの概要</a></h1>
<p>「Negomo(リンク)」は、自分が欲しい報酬額をツイートしてTwitter就活できるサービスです。</p>
<p>何か技術を身につけている人が、Twitterで欲しい報酬額(時給・年収)を積極的にアピールすることで、適切な報酬をもらえることを理想としています!<br />
もちろん、エンジニア以外の方も大歓迎です!</p>
<p>こんな感じのツイートができます。</p>
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">京都でWEB系のインターン探してます!! <a target="_blank" rel="nofollow noopener" href="https://t.co/JRXFe8lHov">https://t.co/JRXFe8lHov</a> <a target="_blank" rel="nofollow noopener" href="https://twitter.com/hashtag/Negomo?src=hash&ref_src=twsrc%5Etfw">#Negomo</a> <a target="_blank" rel="nofollow noopener" href="https://twitter.com/hashtag/Twitter%E5%B0%B1%E6%B4%BB?src=hash&ref_src=twsrc%5Etfw">#Twitter就活</a></p>— TaKO8Ki (@takoyaki3160) <a target="_blank" rel="nofollow noopener" href="https://twitter.com/takoyaki3160/status/1114806623942262784?ref_src=twsrc%5Etfw">April 7, 2019</a></blockquote>
<p>参考:<a target="_blank" rel="nofollow noopener" href="https://negomo.me/about">Negomo(ネゴモ)とは</a></p>
<h2 id="追記"><a href="#%E8%BF%BD%E8%A8%98">追記</a></h2>
<ul>
<li><p>単位で「兆」を選ぶことができるようになりました!</p></li>
<li><p>時給・月収・年収によって画像の色を変えたほうが見やすいというアドバイスをいただいたので、そのように仕様を変更しました!<br />
既に画像を作成されている場合は、金額を変えて編集していただくと色が変わります。</p></li>
</ul>
<p><img width="995" alt="スクリーンショット 2019-04-09 15.46.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/285624/b2f41851-a590-3827-14ed-d74303dfe7e2.png"></p>
<h1 id="デザイン"><a href="#%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3">デザイン</a></h1>
<p>デザインは<a target="_blank" rel="nofollow noopener" href="https://speakerdeck.com/">SpeakerDeck</a>を参考にしました!</p>
<h3 id="トップページ"><a href="#%E3%83%88%E3%83%83%E3%83%97%E3%83%9A%E3%83%BC%E3%82%B8">トップページ</a></h3>
<p><img src="https://qiita-image-store.s3.amazonaws.com/0/285624/80f72c3a-d77b-d45f-1ff0-7f9b937d80a2.png" alt="image" /></p>
<h3 id="画像作成ページ"><a href="#%E7%94%BB%E5%83%8F%E4%BD%9C%E6%88%90%E3%83%9A%E3%83%BC%E3%82%B8">画像作成ページ</a></h3>
<p><a target="_blank" rel="nofollow noopener" href="https://gyazo.com/f5cbe5ee14262aa3025254bae37c6ef7"><img src="https://i.gyazo.com/f5cbe5ee14262aa3025254bae37c6ef7.gif" alt="Image from Gyazo" /></a></p>
<p>アピールポイントのフォームの高さは可変的になっていて、コンパクトになるように心がけました。また、ポートフォリオなどのURLが入力された場合は、自動的にリンクに変換されるようになっています。</p>
<h3 id="画像表示ページ"><a href="#%E7%94%BB%E5%83%8F%E8%A1%A8%E7%A4%BA%E3%83%9A%E3%83%BC%E3%82%B8">画像表示ページ</a></h3>
<p><img src="https://qiita-image-store.s3.amazonaws.com/0/285624/1079aace-eedc-0f02-2549-a342a3dca654.png" alt="image" /></p>
<p>作成した画像をクリックすることでツイートできるようになっています。<br />
アピールポイントの欄では、どれがリンクでどれが普通の文字列なのか分かりやすくするようにしました。</p>
<h1 id="使用した技術"><a href="#%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E6%8A%80%E8%A1%93">使用した技術</a></h1>
<ul>
<li><p>Ruby・Ruby on Rails</p>
<ul>
<li><a target="_blank" rel="nofollow noopener" href="https://github.com/csquared/IMGKit">IMGKit</a>(HTMLから画像をレンダリングできるgem)</li>
<li><a target="_blank" rel="nofollow noopener" href="https://github.com/bgarret/google-analytics-rails">google-analytics-rails</a>(google analyticsが簡単に導入できるgem)</li>
<li><a target="_blank" rel="nofollow noopener" href="https://github.com/0sc/activestorage-cloudinary-service">activestorage-cloudinary-service</a>(Active StorageとCloudinaryを繋げるgem)</li>
</ul></li>
<li><p>JavaScript・jQuery</p></li>
<li><a target="_blank" rel="nofollow noopener" href="https://cloudinary.com/">Cloudinary</a><br />
画像を保存するストレージです。Herokuのアドオンとして利用できるので非常やりやすかったです。Active Storageと連携させて利用しています。</li>
<li>Git・GitHub</li>
<li>Postgresql</li>
<li><a target="_blank" rel="nofollow noopener" href="https://jp.heroku.com/">Heroku</a><br />
今の所Hobbyプランを利用しています。</li>
<li><a target="_blank" rel="nofollow noopener" href="https://github.com/TaKO8Ki/wkhtmltopdf-buildpack">build pack</a><br />
画像を作る部分の実装で利用しました。</li>
<li>アイコン<br />
アイコンは、相変わらずフリー画像にお世話になってます。</li>
</ul>
<h1 id="苦労した点"><a href="#%E8%8B%A6%E5%8A%B4%E3%81%97%E3%81%9F%E7%82%B9">苦労した点</a></h1>
<p>今回苦労したのは、画像生成の部分です。<br />
コードとしては下のような感じで、 HTMLから画像をレンダリングする<a target="_blank" rel="nofollow noopener" href="https://wkhtmltopdf.org/">wkhtmltoimage</a>をRailsで利用できるようになるgem、IMGKitを利用しています。<br />
ローカルでは比較的簡単に動かすことができましたが、Heroku上で動かすのに少し時間がかかりました。<br />
最終的に、build packを使うのが一番良さそうだと分かったので、元からあったbuild packのレポジトリをforkして少し自分用にカスタマイズして使いました。</p>
<p><a target="_blank" rel="nofollow noopener" href="https://github.com/TaKO8Ki/wkhtmltopdf-buildpack">wkhtmltoimageをHerokuで使うためのbuild packカスタマイズ版</a></p>
<p>画像作成部分のコード</p>
<div>
```ruby
def create_image
Tempfile.create(["#{@profile.id}", '.png'], :encoding => 'ascii-8bit') do | file |
file.write(IMGKit.new(get_html, quality: 20, width: 800).to_png)
file.rewind
@profile.image.attach(io: file, filename: "q_#{@profile.id}.png", content_type: "image/png")
end
end
def get_html
<<~HTML
<!DOCTYPE html>
<html>
<head>
<link href="http://fonts.googleapis.com/earlyaccess/notosansjp.css">
<meta charset="UTF-8">
<style>
@charset "UTF-8";
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
width: 800px;
margin: 0;
background: #eee;
font-family: 'Noto Sans JP', sans-serif;
}
.q-frame {
width: 100%;
background-color: #fff;
padding: 25px 25px 10px 25px;
}
.q-frame .q-body {
vertical-align: middle;
text-align: center;
height: 220px;
width: 750px;
font-size: 2.6em;
background-color: white;
padding: 1.3em;
border-radius: 3px;
display: table-cell;
vertical-align: middle;
background-image: url(#{assets_image_url('negomo_background.png')});
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: 50%;
box-shadow: 0.5px 3.5px 10px 0px #ccc;
}
.q-frame .q-icon {
font-size: 2.2em;
padding: 5px 0px 0px 0px;
margin: 0px;
color: #333;
border-radius: 5px;
}
.q-frame .q-icon img {
width: 150px;
margin-top: 7px;
}
span.word {
font-size: 75px;
font-weight: bold;
color: #7d7458;
}
span.description {
font-size: 30px;
font-weight: 100;
color: #545454;
line-height: 45px;
display: block;
margin-top: 10px;
font-weight: bold;
width: 650px;
overflow-wrap: break-word;
word-wrap: break-word;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="q-frame">
<div class="q-body">
<span class="word">#{@profile.adjust_money_style}</span><br>
<span class="description">#{@profile.title}</span>
</div>
#{}
<div class="q-icon">
#{assets_image_tag('negomo.png').html_safe}
</div>
</div>
</body>
</html>
HTML
end
```
</div>
<h1 id="リリースする上で心がけたこと"><a href="#%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9%E3%81%99%E3%82%8B%E4%B8%8A%E3%81%A7%E5%BF%83%E3%81%8C%E3%81%91%E3%81%9F%E3%81%93%E3%81%A8">リリースする上で心がけたこと</a></h1>
<h3 id="アイデアを形にするスピード"><a href="#%E3%82%A2%E3%82%A4%E3%83%87%E3%82%A2%E3%82%92%E5%BD%A2%E3%81%AB%E3%81%99%E3%82%8B%E3%82%B9%E3%83%94%E3%83%BC%E3%83%89">アイデアを形にするスピード</a></h3>
<p>少しずつWEBサービスを作ることにも慣れてきたので、自分が思いついたアイデアを形にするスピードを意識するようにしました。それでも、このサービスを作るのに1週間ほど費やしてしまったので、まだまだだなと感じます。</p>
<h3 id="ユーザーにとって分かりやすいサービスかどうか"><a href="#%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%81%AB%E3%81%A8%E3%81%A3%E3%81%A6%E5%88%86%E3%81%8B%E3%82%8A%E3%82%84%E3%81%99%E3%81%84%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%8B%E3%81%A9%E3%81%86%E3%81%8B">ユーザーにとって分かりやすいサービスかどうか</a></h3>
<p>今までも「ユーザーにとって分かりやすいサービス作り」を意識するようにはしてきましたが、イマイチ分かりやすさを追求できていないように感じていました。特に、非エンジニアの人に使ってもらうとなると非常に難しいと感じます。<br />
そのため、今回は、大まかに言えば「画像をツイートできるだけのサービス」というシンプルな設計にしました。</p>
<h1 id="最後に"><a href="#%E6%9C%80%E5%BE%8C%E3%81%AB">最後に</a></h1>
<p>タイトルに「誰でも新卒年収800万宣言できる」と書きましたが、最近、<a target="_blank" rel="nofollow noopener" href="https://twitter.com/komi_edtr_1230?s=17">コミさん</a>という技術的に強い方が新卒年収800万円芸なるものを行なって、話題になっているのを1フォロワーとして眺めていました。エンジニアだけでなく、他の分野にもコミさんのように優れた人材はたくさん居られると思うので、その方達がTwitterなどを利用して、しっかりといい待遇を受けられるようになればいいなと思います。<br />
僕もその方達に加われるように頑張っていきます!<br />
また、このサービスをきっかけに、もっとTwitter就活が当たり前になれば嬉しいです。</p>
<p>ここまで読んでいただきありがとうございました!</p>
<p><strong>もしよろしければ、いいねボタンを押していただけたら嬉しいです!</strong></p>
<p>Negomo、ぜひ使ってみてください!!</p>
<p><a target="_blank" rel="nofollow noopener" href="https://negomo.me">Negomo(ネゴモ) - もっとTwitter就活しよう!</a></p>
<h1 id="参考"><a href="#%E5%8F%82%E8%80%83">参考</a></h1>
<ul>
<li><a target="_blank" rel="nofollow noopener" href="https://blog.takuchalle.dev/post/2018/12/06/rails_use_wkhtmltoimage/">Rails で質問箱っぽい画像を作るのに wkhtmltoimage を使った</a></li>
<li><a target="_blank" rel="nofollow noopener" href="https://razorjack.net/wkhtmltopdf-on-heroku-evaluating-different-installation-options/">wkhtmltopdf on Heroku: evaluating different installation options</a></li>
</ul>
TaKO8Ki