RailsアプリケーションにAPIを活用してポートフォリオの完成度を高める方法

侍エンジニア受講中の北野です!

前回、侍ブログで僕の作ったSNS型の釣りアプリケーション｢Fishing Map｣についての記事を執筆させていただきました｡

プログラミング未経験から4ヶ月でRailsを使った釣りアプリ作ってみた

更新日：2024年3月1日

その際、Google Map APIをアプリの中で使ったというお話をさせていただきましたが､今回はその内容を更に深堀りして､

について解説したいと思います！

北野 将隆
きたの まさたか

1997年生まれ｡兵庫県出身｡プログラマーになりたくて情報も学べる高校に進学するも､パソコンのスキルがクラス最下位レベルだった事により挫折｡高校卒業後は職を転々とするも、自分のやりたいことは見つからず。とにかく仕事が楽しいと思えず真剣に自己分析した結果､かつての夢だったプログラマーに再チャレンジすることを決意。侍エンジニアで2019年9月から学習開始。現在もWEB系エンジニアを目指して勉強中｡
◆Facebook

APIとは?

本題に入る前に、まずはAPIとは何か簡単に説明させていただきます｡

APIとはApplication Programming Interface(アプリケーション プログラミング インターフェイス)の頭文字になります｡難しいですよね…僕も初めて聞いたときは、なんのことやらさっぱりわかりませんでした(笑)

アプリケーションとプログラミングはなんとなく意味がわかると思いますが､インターフェイスがわかりにくいですよね｡

ここでのインターフェイスとはアプリケーションとアプリケーションをつなぐ窓口という認識で良いと思います｡他のアプリケーションが一般公開している機能などを自分のアプリケーションで使えるというわけです！！

とても便利ですよね！

なぜポートフォリオにAPIを使うのか

なぜポートフォリオにAPIを使うのかと言うと、比較的簡単に複雑な機能を実装できるからです｡

例えば、僕のアプリケーションではGoogle Mapを使っていますが､僕たち初学者が１からGoogle Mapみたいなアプリを作るのは不可能ですよね…。

しかし､APIを使えば自分のアプリにGoogle Mapの機能を実装できるんです！

昨今のエンジニア人気によって、初学者のポートフォリオのレベルがどんどん上がっています。以前であれば「Rails tutorial」ぐらいの機能を実装できて、少し機能を追加すればポートフォリオとして評価されていたと思います｡

しかし､現在はプログラミング初学者の人数も増えています。

初学者が１からアプリケーションを作り出すことは難しいため、だいたい同じ感じになってしまいRails tutorialで作成できるようなアプリケーションでは唯一性がなくなってしまうわけですね｡

そこで、比較的簡単に複雑な機能を実装できて自分のアプリに唯一性をもたせる方法として僕はAPIをおすすめしたいと思います!

APIはどうやって使うの?

次はAPIの使い方を説明したいと思います｡

まずはAPIを提供しているアプリのサイトに行きます｡たとえばTwitterのAPIを使いたいなら、TwitterのDeveloperサイトに行きます｡

それぞれのAPIに応じて少し差があるかもしれませんが、大まかな流れはこのような感じです｡

また､TwitterはAPIを利用する際に審査があったりするので、利用した場合は早めに申請しておいた方が良いかもしれません｡

またAPIの多くは基本的に無料で使うことができます！！

とてもありがたいですよね｡

僕が実際にAPIを使った方法

基本的にAPIの使い方は上記で解説したとおりです。ですが、実際にどのようなソースコードになっていて、どうやって活用するのかは初学者にとって、あまりイメージしづらいかと思います。

そこで、僕の作成したアプリ「Fishing Map」にGoogle Map APIを使用した方法を解説していきます。

まずはGoogle MapのAPIキーを取得します｡GoogleMapのAPIキーを取得する方法はこちらの記事が参考になると思いますので、ぜひ参考にしてください。

Google Maps の APIキー を取得する

.evnファイルに取得したAPIキーを記載してください。railsアプリのフォルダーの下の方にあります。わかりにくいですがREADE ME付近です。

gem "gmaps4rails"
gem "geocoder"

まずは､Gemfileに上記のコードを追加してターミナルでbundle installをしてください｡

gmap4railsは緯度経度の情報からマップ上にピンを刺すgem、geocodeは住所の情報を緯度経度の数値に変換するgemになります｡

次に緯度経度の情報を入れるためのモデルを作成します｡もともとモデルが有る場合はカラムを追加してください｡

rails g scaffold Post address:string latitude:float longitude:float
rails db:migrate

次はモデルに以下のコードを追記してください

class Post < ActiveRecord::Base
  geocoded_by :address
  after_validation :geocode
end

次はviews/layouts/application.html.erbに

<script src="//maps.google.com/maps/api/js?v=3.13&amp;sensor=false&amp;libraries=geometry" type="text/javascript"></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js' type='text/javascript'></script>

上記のコードを追記します。
そしたら､vendor/assts/javascripts/underscore.jsに「http://underscorejs.org/underscore-min.js」このページをコピーして貼り付けてください｡

何やらわけのわからないことがたくさん書いてありますが､気にせずにコピペで大丈夫です(笑)

次にassets/javascripts/application.jsに以下のコードを追記してください。

//= require underscore
//= require gmaps/google

次は地図を表示するviewを書いていきます｡

どのページでもいいですが僕の場合はviews/posts/show.html.erbのページということにしました。

class PostsController < ApplicationController
  def show
    @post = Post.find(params[:id])
  end
end

として@postの値をセットします｡

次に地図を表示します｡

<div id="map" style='width: 100%; height: 500px;'></div>
                            <script type="text/javascript">
                            handler = Gmaps.build('Google');
                            handler.buildMap({ provider: { scrollwheel: false }, internal: {id: 'map'}}, function(){
                              markers = handler.addMarkers([
                                {
                                  "lat": <%= @post.latitude %>,
                                  "lng": <%= @post.longitude %>,
                                  "infowindow": '<%= @post.address %></p><p><%= link_to "Googleマップで見る" ,"https://maps.google.co.jp/maps?q=loc:#{@post.latitude},#{@post.longitude}&iwloc=J",target: "_blank" ,class:"gmap-link"%></p>',
                                  "picture": {
                                       "url": '<%= asset_path "map-icon.png" %>',
                                        "width":  48,
                                        "height": 48
                                    }
                                }
                              ]);
                              handler.bounds.extendWith(markers);
                              handler.fitMapToBounds();
                              handler.getMap().setZoom(17);
                            });
                            </script>

この部分のコードで@postに格納されている緯度経度の情報からGoogle Mapの上にピンを刺しています｡

 "lat": <%= @post.latitude %>,
 "lng": <%= @post.longitude %>,

実際にフォームに住所を入力してみてください｡

<%= form_with(model: @post, local: true) do |form| %>
  <% =form_text_field :address,placeholder:"住所を入力して下さい" %>
<% end %>

geocodeが勝手にaddressからlatitude(緯度)とlongitude(経度) のカラムに値を入れてくれるのでここでは入力しなくても大丈夫です｡これで地図にピンがさせるようになります。

具体的な手順は以上です。僕と同じようなアプリを作りたいと考えている方はぜひ参考にしてみてください。

APIにはどんなものがある?

最後にGoogleでは、実際にどのようなAPIがあるのか代表的なものを紹介したいと思います｡

Twitter API

みなさんもWEBアプリケーションを使って、よくTwitterでログインみたいな機能を目にした事があるのではないでしょうか?

あの機能は、Twitter APIだったという訳ですね。他にもTweetを共有できたりするみたいです！

Facebook API

Twitterと同様にFacebookでログインもよく目にしますよね｡

他にも投稿データの取得なんかもできるみたいです。

Google API

僕がアプリで使っているGoogle Map APIもGoogleのAPIです！

他にもGoogle認証やGoogleのカレンダーを利用したりできるみたいです！

Amazon API

AmazonにもAPIがあり､商品の情報､支払い情報､最安値の取得ができるみたいです！

楽天 API

楽天にはたくさんのAPIがあって､商品やジャンルの検索､本の検索やCDの検索など、たくさんの種類があるので､うまく活用すればかなりオリジナリティーのあるアプリケーションが作れるのではないかと思います！

この記事では代表的なものだけを紹介しましたが、この他にも色々なAPIがあります。

と迷ったときは、似たようなAPIがないか調べてみるといいですよ！

まとめ

APIについて初学者目線で記事を書いてみました｡

APIを使えば初学者でも複雑な機能を自分のポートフォリオに組み込むことができるので､とても便利だと思います｡

APIには色々なl種類があるのでうまく自分のアプリケーションに組み込んで､オリジナリティーのあるアプリケーションを開発してみてください｡

少しでもポートフォリオを作り助けになれば幸いです｡また、今回執筆するにあたり、こちらの記事を参考にさせていただきました！

興味のある方はぜひ読んでみてくださいね。

参照元サイト：Qiita