とある神戸大生の走り書き

主にプログラミングに関して、学んだことを走り書きとして残していきます。

誰でも新卒年収800万宣言できる、Twitter就活サービス「Negomo（ネゴモ）」をリリースした。

Rails Heroku Webサービス 個人開発

「Twitter就活の促進」をテーマにしたサービス「Negomo（ネゴモ）」をリリースしました！

Twitterアカウントで利用できるので、もしよかったら使ってみてください！

リリースしたサービス

Negomo（ネゴモ） - もっとTwitter就活しよう！

サービスの概要

「Negomo（リンク）」は、自分が欲しい報酬額をツイートしてTwitter就活できるサービスです。

何か技術を身につけている人が、Twitterで欲しい報酬額（時給・年収）を積極的にアピールすることで、適切な報酬をもらえることを理想としています！ もちろん、エンジニア以外の方も大歓迎です！

こんな感じのツイートができます。

参考：Negomo（ネゴモ）とは

追記

  • 単位で「兆」を選ぶことができるようになりました！

  • 時給・月収・年収によって画像の色を変えたほうが見やすいというアドバイスをいただいたので、そのように仕様を変更しました！ 既に画像を作成されている場合は、金額を変えて編集していただくと色が変わります。

スクリーンショット 2019-04-09 15.46.36.png

  • 時給・月給・年収以外にも秒給・分給を選ぶことができるようになりました！

デザイン

デザインはSpeakerDeckを参考にしました！

トップページ

スクリーンショット 2019-04-08 0.45.24.png

画像作成ページ

Image from Gyazo

アピールポイントのフォームの高さは可変的になっていて、コンパクトになるように心がけました。また、ポートフォリオなどのURLが入力された場合は、自動的にリンクに変換されるようになっています。

画像表示ページ

スクリーンショット 2019-04-08 0.56.29.png

作成した画像をクリックすることでツイートできるようになっています。 アピールポイントの欄では、どれがリンクでどれが普通の文字列なのか分かりやすくするようにしました。

使用した技術

苦労した点

今回苦労したのは、画像生成の部分です。 コードとしては下のような感じで、 HTMLから画像をレンダリングするwkhtmltoimageをRailsで利用できるようになるgem、IMGKitを利用しています。 ローカルでは比較的簡単に動かすことができましたが、Heroku上で動かすのに少し時間がかかりました。 最終的に、build packを使うのが一番良さそうだと分かったので、元からあったbuild packのレポジトリをforkして少し自分用にカスタマイズして使いました。

wkhtmltoimageをHerokuで使うためのbuild packカスタマイズ版

画像作成部分のコード

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

リリースする上で心がけたこと

アイデアを形にするスピード

少しずつWEBサービスを作ることにも慣れてきたので、自分が思いついたアイデアを形にするスピードを意識するようにしました。それでも、このサービスを作るのに１週間ほど費やしてしまったので、まだまだだなと感じます。

ユーザーにとって分かりやすいサービスかどうか

今までも「ユーザーにとって分かりやすいサービス作り」を意識するようにはしてきましたが、イマイチ分かりやすさを追求できていないように感じていました。特に、非エンジニアの人に使ってもらうとなると非常に難しいと感じます。 そのため、今回は、大まかに言えば「画像をツイートできるだけのサービス」というシンプルな設計にしました。

最後に

タイトルに「誰でも新卒年収800万宣言できる」と書きましたが、最近、コミさんという技術的に強い方が新卒年収800万円芸なるものを行なって、話題になっているのを1フォロワーとして眺めていました。エンジニアだけでなく、他の分野にもコミさんのように優れた人材はたくさん居られると思うので、その方達がTwitterなどを利用して、しっかりといい待遇を受けられるようになればいいなと思います。 僕もその方達に加われるように頑張っていきます! また、このサービスをきっかけに、もっとTwitter就活が当たり前になれば嬉しいです。

ここまで読んでいただきありがとうございました！

もしよろしければ、いいねボタンを押していただけたら嬉しいです！

Negomo、ぜひ使ってみてください！！

Negomo（ネゴモ） - もっとTwitter就活しよう！

参考

Railsで検索機能を実装する時に、PostgreSQLとSQLiteでは、Active Recordが違う挙動を取ることを初めて知った。

Heroku Rails 個人開発 SQL

以前リリースしたサービスLinch（リンク）で検索機能を実装する時に初めて分かったことをまとめておきます。

tako8ki.hatenablog.com

分かった問題

Railsで作ったサービスのあいまい検索の挙動がPostgreSQLとSQLiteで少し違う。（大文字・小文字の区別に関して）

具体的にどう違うのか

改善前

このサービスは、Herokuでデプロイしているので、DBはPostgreSQLを利用しています。 それに対して、ローカル環境では、SQLiteを利用するようになっています。 ここのところの挙動の違いなどを全く意識せずにコードを書いていたので、 検索機能のところのコードが下記のようになっていました。

@articles = Article.where("title like '%" + params[:q] + "%'")

検索ボックスに入力されたクエリをパラメーターとして持たせて検索するというごく普通なコードです。

ローカル環境（つまり、SQLite上）では、このコードでも大文字・小文字の区別なく検索してくれます。 しかし、本番環境（PostgreSQL上）では、大文字・小文字の区別がされてしまっていました。

例）「Python」で検索した時に、ローカルでは、「Python入門」「pythonスクレイピング」が検索結果に引っ掛かる> が、本番では、「Python入門」しか引っかからない。

解決策

解決策としては、挙げられたものは下記の二つです。

① Arel使う

@articles = Article.where(articles[:title].matches("%#{params[:q]}%"))

少し調べたところ下のような記事が出てきました。

qiita.com

② クエリと検索対象をどちらもdowncaseする

@articles = Article.where("lower(title) like ?", "%#{params[:q].downcase}%")

こっちの方がなんとなくActive Recordらしさがあるような気がします。

最終的に

1の方の記事を読んだ限りでは、バージョンアップによって動かなくなる可能性があるとのことだったので、 最終的には、2の方を採用しました。

まとめ

普段何の気なしに触っていたActive Recordが、使うDBによって違う挙動を示すことに気づけたことは非常に良かったと思います。また、Active Recordではなく、生のSQLと格闘する必要もありそうなので、そこらへんも勉強していこうと思います。

プライバシーポリシー

当サイトに掲載されている広告について

当サイトは第三者配信の広告サービス「Google Adsense グーグルアドセンス」を利用しています。

広告配信事業者は、ユーザーの興味に応じた広告を表示するためにCookie（クッキー）を使用することがあります。

Cookie（クッキー）を無効にする設定およびGoogleアドセンスに関する詳細は「広告 – ポリシーと規約 – Google」をご覧ください。

サポーターズ1on1面談イベントに行ってみたら、すごく楽しかった話

Rails 個人開発 Webサービス インターンシップ

今回は、2019/03/02に渋谷で開催された2021年卒の学生対象のサポーターズ1on1面談イベントに行ってきたので、振り返ってみようと思います。

イベント概要

交通費

地域によって固定額が支給されます。僕の場合は、関西に住んでいるので、基本的に3万円支給で、アンケートに回答したら1万円増額という感じでした。 （今回は、前日にサイバーエージェントのインターンに行っていたので、運よく交通費・宿泊費は支払わずに済みました。）

tako8ki.hatenablog.com

参加企業

今までのイベントでお話させていただく機会があった企業もあれば、メルカリやpixivのように初めての企業もありました

内容

学生と企業の人事の一対一もしくは、学生と企業の人事の方とエンジニアの方の一対二で面談を行うイベントです。 イベントに参加できる学生の人数は決められているようで、今回は16人でした。（イベント自体は3日程あったようなので、参加する学生の数としては、48人ということになります。）
服装はもちろん私服で大丈夫です。

面談の流れ

最初の5分間で自分が作ってきたスライドを使って自己紹介します。 その後は、自分が紹介した制作物やどんな技術に興味があるのかについて企業側から質問されたり、こちらから質問したりなど基本的にざっくばらんにお話しするみたいな感じでした。とても話しやすい雰囲気でした。 下の方で、僕が作ったスライドも載せているので、もしよければ参考にしてみてください。

1日の流れ

時間 内容
12:00 開始
25分 × 6企業 その後各企業と25分間面談する。（各学生2回ほど休憩がありますが、それ以外はノンストップで進行するので意外と疲れます。）
19:00 - 20:00 懇親会

どんな準備をしていったのか？

僕は、プログラミングを始めて八ヶ月ということもあり、まだまだ技術的に足りないところがあるのは目に見えているので、 基本的に、

  1. プログラミング歴がまだ浅いのにアウトプット量が多い（作ったWEBサービスや技術ブログ）
  2. 自分が作ったWEBサービスに対する分析をしていて、それを運営に繋げている

という二点を自分の推すべきところだと考えてイベントに臨むことにしました。 （技術的に強い方の参考にはならないかもしれません。。。申し訳ないです。）

スライドの見た目

これが僕のスライドです。
濃いめの黄色が好きなので、テーマカラーは黄色にしました。
スライドに載せる文字は基本的に少なめにして、作ったWEBサービスや技術ブログを実際に見せることに時間を使うようにしました。 後は、フリー素材を使ったりだとか、視覚的に捉えやすそうなスライドにするように心がけました。

スライドの構成

スライドは、

  1. 簡単な自己紹介　
  2. インターン先での業務内容
  3. 制作物や参加したイベント
  4. 今後やっていきたいこと

という構成にしました。
この中でも一番のアピールポイントは、制作物や参加したイベントなので、その部分に比較的多く時間を使うようにしました。

自己紹介後の流れ

自己紹介後の企業からの質問

インターン先の業務に対する質問
  • 現在長期インターンをしている企業でどんな言語を扱っているのか。
  • どんなタスクがどのようにして割り振られるのか。

などを聞かれました。そこまで技術的に深く切り込んだような質問はなかったと思います。

制作物に対する質問
  • 一人で作ったのか。
  • 開発していて一番苦労した部分はどこか。
  • どういう目的で作ったのか。
プログラミングを学ぶ上でのアプローチに関する質問
  • プログラミングを学ぶ上で気をつけていることは何か。
  • どういう風なプログラマーになりたいか。
  • なぜ機械学習を始めたのか。（僕は、最近機械学習を始めたことを自己紹介の時点で言っているので、それに対する質問です。）

企業に対する質問

僕は、技術的な部分というよりは、その企業で成長できるのかなどに興味があるので、

  • 企業で働く上で一人で様々なプロダクトに関わることはできるか。（複数プロダクトの掛け持ちや異なるプロダクト間の異動など）
  • 副業はできるのか。
  • 開発チームの構成はどうなっているのか。
  • 職種に関わらずプロダクトの立ち上げなどに関わることができるのか。
  • デザイナーなどもコーディングなどを行うことがあるのか。

などについて聞くことにしました。
今までに参加したイベントでもこれらの質問をしたことがあったのですが、違う社員の方に質問をすることで、また違った情報を知ることができるので今回も質問してみて非常によかったと思います。

企業からのフィードバック

やはり、

  • プログラミングを初めて一年も満たないのに、アウトプット量が多いことに驚いた。

と言っていただくことが多かったです。 この点に関しては、思っていた通りになったので作戦通りです。
中には、

  • スライドが見やすかった。
  • 聞きやすい話し方だった。

というフィードバックもありました。

振り返ってみて思うこと

イベントの感想

実際に企業の方にスライドを使って自分をプレゼンしてみて思ったことは、

  • 一年未満のプログラミング歴。
  • それなりにプロダクトを作っていて、リリースもしている。
  • 作ったプロダクトに対して分析をして、それを運営につなげている。
  • プログラミング欲がすごい。
  • 今後の展望がはっきりとしている。

みたいな条件が揃っているとそれだけで企業の方にアピールするポイントになるということです。中でも、サービスをしっかりとリリースしている点が非常に重要になると思います。
僕の場合、それに加えて、作ったサービスが運よく、Qiitaで少し評価されていたという点もアピールポイントになりました。（Qiitaに書いたサービス紹介記事が、187いいねで、一時期トレンド4位くらいになってた。下にリンク貼っておきます。）

qiita.com

linch.link

また、僕は企業に対して聞きたいことが山ほどあったので、こちらからの質問が多くなった印象です。

今後どうするべきか

正直、「プログラミング歴短いのにアウトプット量すごい」みたいなギャップは、頑張れば誰でも実現することができると思っています。今回のイベントでは、プログラミングに対する「意志・意欲」を評価していただいたので、今後はこの部分を「技術力」にシフトしていけるような過ごし方をしていこうと思います。
Railsのgem作ってみたり、Sinatraやったり、Golangやったり、自然言語処理やったり、アルゴリズムそのものを勉強したり色々やりたいことがあるので、うまく時間を使ってやっていこうと思います。

今後読んでいきたい書籍

　

サイバーエージェントのエンジニアインターン、「学生版ヒダッカソン」に行ってきた

Rails API インターンシップ

学生版ヒダッカソン -API編-というサイバーエージェントの1日インターンに参加してきました。 せっかくなので、振り返ろうと思います。

www.cyberagent.co.jp

リンク切れした時のために詳細を下記に載せておきます。

「ヒダッカソン」とは、エンジニア達が技術を競い合うサイバーエージェントの社内イベントです。 前回好評だった「ヒダッカソン」のサーバーサイド編の内容をアップデートして開催いたします。 今回のAPI編はサービスを模したWebアプリケーションのAPIを実装してスコアを競います。 メンターとなるエンジニア社員のバックアップのなか、学生同士で点数を競い合っていただきます。 1日で開発スキルアップを図り、現役のエンジニア社員、技術、開発環境に触れることができます。

参加までの流れ

書類選考

自分が今まで作ってきたものやインターンでどのような業務を行なってきたのかなどについてWEB上で回答して、それに対する選考がありました。

面接

書類選考を通過すると、面接の日程を決めるためのメールがくるので、それに回答しました。 面接自体は、書類選考で自分が書いたことについて聞かれるという一般的な内容でした。
思っていたよりも深く掘り下げた質問が無かったように感じたので、インターンに行きたいという気持ちがあればいけると思います。

交通費や宿泊費など

インターンがあった場所は、サポーターズ渋谷でした。交通費は全額支給され、宿泊する場所に関しては、道玄坂にあるアパホテルを二泊三日で手配していただきました。（二泊三日というのは、インターン前日の一泊とインターン当日の夜の一泊を合わせて二泊という意味です。）

内容

グループ分けなど

このインターンは上記にもある通りにハッカソン形式です。
使用する言語別に１グループ5人程度に分けられて、グループごとにメンターがつくという感じでした。 全体としては、35人ほどでした。

実際何をしたのか？

一人ひとりにサーバーが用意されていて、そのサーバー上にAPIを実装するという内容でした。
言語は、Ruby・Go・Pythonなど有名どころはだいたい開発環境が整えられおり、他の言語についても自分で環境構築さえできれば、使ってもいいよという感じでした！
また、ディスプレイが用意されていたので開発が捗りました。

難易度

僕にとっては非常に難しかったです。様々な知識が足りていないように感じました。しかし、その分、他の学生の方やメンターの方に質問をしたりして、少しずつAPIが形になっていく様には非常にやりがいがありました。

スコアなどの評価基準

仕様書に記載されている機能を一つ実装し、その後動作確認をリクエストすると自動的に確認が行われて、うまくできていれば点がもらえるという感じでした。
具体的に機能というのは、ユーザーのログイン機能などです。次回、開催される時はまた違った内容になると思われるますが、全てのPOSTリクエスト・GETリクエストを実装していく感じです。

自分の実装方法

いざAPIを実装しようとして最初は、慣れ親しんでいたRailsを使う前提で環境構築などを行なっていたのですが、どうもRailsでの実装には非常に時間がかかりそうだという事が分かったので（聞いたところでは、Railsで実装できた人はいなかったそうです。）、途中でSinatraでの実装に切り替えました。 ここで初めてSinatraを使うことになったのですが、思った以上に扱いやすくSinatraに助けられました。純粋にSinatraすげーって思いました。

Image from Gyazo

結果　

前半でRailsの環境構築に時間を使い過ぎてしまったためにSinatraでの実装に充てられる時間が非常に少なくなってしまい、その結果、全く点数を獲得することができませんでした。
ですが、とても楽しく、技術的に濃い時間になりました。また、自分の足りないものが明確になったり、新しい技術に触れる場になったので参加してよかったと思います！

振り返り

Railsを使ってWEBサービスを作っていると、どうしても上部だけ触る事が多いので、より深い知識が必要な時に太刀打ちできません。これからは、Rails全体を理解することを意識して開発を行なっていこうと思いました。（自分でgem作ってみるとか）
また、せっかくSinatraを使うことになったので、Sinatraで何か作ってみようと思います。

Sinatraで作れるもので面白そうなもの募集中です！

linch.link

以前リリースしたサービスLinch（リンク）でAPI以外でSinatraで何が作れるのかについて質問しています。もしよければ回答していただけたら嬉しいです。

tako8ki.hatenablog.com