TechAcademy（テックアカデミー） Webアプリケーションコース プログラミング Ruby Railsで戻るボタンを実装する方法を現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
Ruby

Railsで戻るボタンを実装する方法を現役エンジニアが解説【初心者向け】

初心者向けにRailsで戻るボタンを実装する方法について現役エンジニアが解説しています。Railsで戻るボタンを実装するには、link_toのリンク先を:backに指定します。後はButtonタグやCSSでボタン風に装飾すると完成です。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

Railsで戻るボタンを実装する方法について解説します。

 
そもそもRubyについてよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプRuby講座の内容をもとに紹介しています。

 

田島悠介

今回は、Rubyに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

Railsで戻るボタンを実装する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

戻るボタンとは

ブラウザの戻るボタンクリックや、スマホでスワイプすると前のページに戻ることができますが、ウェブページ内に前のページに戻るボタンを設置することができます。

Railsで戻るボタンを実装する方法

Railsで戻るボタンを実装するには、link_toのリンク先を :backに指定することで実現可能です。

 

= link_to "戻る", :back

 

ですが、これだけではただのリンクとなるため、ボタンにするには<button>タグと組合せたり、CSSでボタン風の装飾をするなどの工夫が必要です。

[PR] 未経験からWebエンジニアを目指す方法とは

実際に書いてみよう

<button>タグと組合せて書いてみましょう。

link_to メソッドはlink_to “表示テキスト”, “リンク先” のように、表示テキストとリンク先を引数で指定できます。

今回のように「戻るボタン」に対してリンク先を指定したい場合にはlink_to “リンク先” do とすることでdo以降の内容に対してリンクを設定することができます。

 

<%= link_to :back do %>
  <button>戻る</button>
<% end %>

 

CSSでボタン風の装飾をする方法はここでは解説しませんが、background-colorやborder、border-radiusなどを適切に指定すればボタン風にすることができますので、興味のある方は挑戦してみてください。

筆者プロフィール

メンター稲員さん

フリーランスエンジニア。
大手SEからフリーランスのWeb系エンジニアにジョブチェンジ。

経験言語：Ruby、Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript,Node.js。
おうち大好きマンです。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

 

TechAcademyでは、初心者でもRuby on Railsを使ったプログラミングを習得できるオンラインブートキャンプRuby講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

Rubyの外部ファイル読み込みとrequireの使い方を現役エンジニアが解説【初心者向け】

Rubyの外部ファイル読み込みとrequireの使い方について解説します。   そもそもRubyについてよく分からないという方は、Rubyとは...
Ruby

Rubyのextendメソッドの使い方を現役エンジニアが解説【初心者向け】

Rubyのextendメソッドの使い方について解説します。   そもそもRubyについてよく分からないという方は、Rubyとは何なのか解説した...
Ruby

文字列を分割！Rubyでsplitを使う方法【初心者向け】

Rubyでsplitを使う方法について解説します。   そもそもRubyについてよく分からないという方は、Rubyとは何なのか解説した記事を読...
Ruby

Rubyで配列に要素を追加する方法を現役エンジニアが解説【初心者向け】

Rubyで配列に要素を追加する方法について解説します。   そもそもRubyについてよく分からないという方は、Rubyとは何なのか解説した記事...
Ruby

Rubyでsizeを使う方法を現役エンジニアが解説【初心者向け】

Rubyでsizeを使う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   ...
Ruby

Ruby on Railsのf.selectの使い方を現役エンジニアが解説【初心者向け】

Ruby on Railsのf.selectの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...
Ruby

あわせてよく読まれている記事

【リンクの作成！】Ruby on Railsでのlink_toの使い方

開発していると別のページやサイトに移動させることが多々あります。 そういった際にRubyのフレームワークのRuby on Railsでは、link_toというメソッドを使います。 今回は、link_toを実際にブラウザでの表示を確認しながら解説していきます。   なお本記事は、TechAcademyのWebアプリケーションオンラインブートキャンプの内容をもとに紹介しています。   田島悠介 今回はRuby on Railsでlink_toを使ってみよう。 大石ゆかり 田島メンター！！link_toは何をするんですか～？ 田島悠介 link_toメソッドは外部へのリンクを作成したり、アプリ内での移動に使ったりするんだ。HTMLの<a>タグを作るものだと考えると分かりやすいかもしれないね。 大石ゆかり なるほど、よく使うことになりそうですね。お願いします！   事前準備 link_toメソッドとはビューでリンク（htmlのaタグ）を表示するためのメソッドです。 ここでは、railsのscaffoldという機能を使ってサンプルアプリケーションを作成してからlink_toについて説明してきます。 まずは次のコマンドを実行してサンプルアプリケーションを作成しておきます。 rails new sample_app cd sample_app rails generate scaffold User name:string rake db:migrate   link_toメソッドとは link_toメソッドとはビューで使用するActionView::Helpers::UrlHelperクラスで定義されているhelperメソッドです。 名前の通りリンクを表示させたい時に使用し、htmlのaタグを生成してくれます。 link_toメソッドにリンクとして表示する文字列とリンク先を引数として渡すことで、リンクを表示させることができます。 基本的な書式は次の通りです。 link_to 'リンク文字列', リンク先のパス（URL） それでは、リンク先の指定方法について説明していきたいと思います。 URLやパスを指定する方法 外部のサイトのURLや同じアプリケーション内のパスを指定するときは次のように書きます。 <%= link_to 'Yahoo', 'http://www.yahoo.co.jp/' %> <%= link_to 'ユーザー一覧’, ‘/users/index’ %> ルーティングの名前でリンク先を指定する こちらが最も一般的で基本的な使い方です。同じアプリケーション内へのリンクを作成する場合はこれから紹介する方法を使いましょう。 「config/routes.rb」で設定しているルーティングの名前に「_path」をつけたものをリンク先として指定します。 ルーティングの名前を確認するときは次のコマンドを使うと便利です。作成したサンプルアプリケーションで実行してみてください。 rake routes 赤い枠で囲った部分がルーティングの名前です。 例えば、users_controllerのnewアクション（新規作成画面）にリンクを貼りたいときは <%= link_to '新規作成’, new_user_path %> と書きます。   また、「app/views/users/index.html.erb」の中身を見てみると、編集画面へリンクを指定している部分に <%= link_to 'Edit', edit_user_path(user) %> という記述があります。「(user)」という引数があると思いますが、これはどの「user」についての編集画面にリンクを設定するのかというのを表しています。 「edit_user_path」にuser変数を引数としてわたすことで、user変数に入っているユーザーデータのidを元にリンク先を設定してくれます。   [PR] 未経験からWebエンジニアを目指す方法とは実際にlink_toメソッドを使ってみよう 先ほど作成したサンプルアプリケーションを次のコマンドを実行して起動させましょう。 rails server URLやパスを指定する方法を使ってみよう 外部のサイトのURLや同じアプリケーション内のパスを指定する方法を試していきます。 サンプルアプリケーションの「http://localhost:3000/users」を開くと次のような画面になっていると思います。   ここにGoogleへのリンクを表示させたいと思います。 「app/views/users/index.html.erb」を開いて一番最後の行に次のコードを書いてみるます。 <%= link_to 'Google', 'https://www.google.co.jp/' %> ファイルを保存したらブラウザをリロードしみます。すると次のようにGoogleへのリンクが表示されたと思います。   田島悠介 起動した画面で右クリックしてソースを表示してみよう。どうなっているかな？ 大石ゆかり <a>タグが作成されて、Googleへのリンクが貼られているのが分かりますね！ 田島悠介 次はルーティングの名前で指定してみよう。先ほどrake routesで調べた情報をもとに、新規ユーザー作成画面へリンクを作成してみるよ。   ルーティングの名前でリンク先を指定してみよう 次は、ルーティングの名前でリンク先を指定する方法を試していきます。 サンプルアプリケーションで「New User」リンクをクリックして適当にユーザーデータを一つ作ります。   作成したユーザーデータの「Show」リンクを押してユーザーの個別ページに行きます。 この段階では次のような画面になっていると思います。   この画面にユーザー作成ページへのリンクを貼りたいと思います。 「app/views/users/show.html.erb」を開いて一番最後の行に次のコードを書いてブラウザをリロードしてみます。 <%= link_to 'ユーザー作成', new_user_path %>   「ユーザー作成」というリンクが表示されました。リンクをクリックしてみると   「ユーザー作成」ページへ移動することができました。 以上、link_toメソッドの説明でした。   田島悠介 ルーティングの名前で指定した場合の例だよ。 大石ゆかり こうするとアプリ内での移動が可能なんですね。 田島悠介 link_toメソッドはアプリケーションを作成する際に必ず使うといってもいいほどの機能なので、しっかりと使い方を覚えておこう。 大石ゆかり そうですね、復習しておきます。ありがとうございました！   [お知らせ]TechAcademyでは初心者でも8週間でエンジニアになれるRuby on Railsオンラインブートキャンプを開催しています。RubyでWebアプリを開発したい方はご参加ください。
Ruby

JavaScriptで戻るボタンのイベントハンドラを実装する方法を現役エンジニアが解説【初心者向け】

JavaScriptで戻るボタンのイベントハンドラを実装する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けのJavaSriptを学習できるサイトも紹介しているので、あわせてご覧ください。 目次戻るボタンとはRailsで戻るボタンを実装する方法実際に書いてみよう筆者プロフィール そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptで戻るボタンのイベントハンドラを実装する方法について詳しく説明していくね！ 大石ゆかり お願いします！   はじめに 今回はブラウザの戻るボタンでどんな処理が行われているか説明します。 みなさんもご利用になったことがあると思いますが、気軽に前ページに戻ることができる大変便利な機能です。 では、戻るボタンを押した時に具体的にどのようなことが行われているかはご存知でしょうか？ ページ（URL）を移動する場合、通常はWebサーバにリクエストをして新しいページをレスポンスとして受け取ります。 しかしながら、戻るボタンを押した場合は通常の動きと違い、ブラウザがキャッシュしているページを呼び出し表示します。 そのため、サーバを介さず素早くページを表示をすることができます。   戻るボタンとURL遷移の違い 例えば、トップページからメニューページに遷移して、再度トップページに遷移したとします。 戻るボタンを使わずに遷移する場合は、前述の通り遷移のたびにWebサーバにリクエストを送り、返却されたレスポンス（Webページ）をブラウザ上に表示する動作が都度行われます。 下記の図がすべてリクエストを送って遷移した場合です。 3回Webサーバへの問い合わせを行っていますね。   一方、トップページ→メニューページと遷移した後にブラウザの戻るボタンを押した場合は、ブラウザのキャッシュ情報からWebページを表示できますので、Webサーバへの問い合わせは1回少なくなります。 またキャッシュ情報からページを表示するため、リクエストを送る処理やレスポンスをWebサーバで返却する場合に比べ、高速にページを表示できるというメリットがあります。   一方、戻るボタンはWebサーバへ問い合わせを行わず、一度表示したWebの情報を表示していますので、”古い情報”を表示している場合があります。 例えばですが、ECサイトなどで買い物かごに商品を入れて戻るボタンを押した際に、メニュー上部などの買い物かごの商品数が入っていない場合がありますよね。 ページのリロードなどを行えば解消はしますが、古い情報を参照して遷移すると思わぬ不具合が発生する場合もありますので、申込画面などではブラウザの戻るボタンを利用しないように注意を促しているサイトなどもあります。   [PR] 未経験からWebエンジニアを目指す方法とは戻るボタンのイベントハンドラを実装する方法 今回は、戻るボタンが押された時のイベントハンドラを実装する方法について説明してきます。 前述の通り、戻るボタンをユーザーが押した場合に、「申込途中の内容が破棄されますがよろしいですか？」といったアラートの表示を出す場合などに利用することがあります。 しかし、JavaScriptで直接戻るボタンが押下されたことを検知するイベントハンドラはありません。 そこで、利用するのがaddEventListener()です。 これは様々なイベントを処理できる関数で、戻るボタンを押下されたことを検知するには’popstate’のイベント種類を指定します。 ‘popstate’は、履歴が更新された時にイベントを検知します。   実際に書いてみよう それでは実際にaddEventListener()を使用して、戻るボタンのイベントハンドラを実装してみましょう。 形式 window.addEventListener( イベントハンドラ, 関数, イベント伝達) イベントハンドラには、先ほど説明した’popstate’ 関数は取りあえず今回は、’function(e)’ イベント伝達は、false※もしくは省略 実装 <html> <head> 　　　　<title>JavaScriptで戻るボタンのイベントハンドラを実装する方法</title> </head> <body> 戻るボタンを押すと、メッセージが表示されます<br> 　　　<script type="text/javascript"> 　　　　　window.addEventListener('popstate', function(e) { 　　　　　　　alert('ブラウザバックを検知しました。'); 　　　　　}); 　　　</script> </body> </html> これで、戻るボタンのイベントハンドラの代替え処理を実装できます。   まとめ 今回は、ブラウザの戻るボタンとリクエストによる遷移との違いと、戻るボタンが押された際にJavaScriptで検知する方法を学びました。 現在はSPA（Single Page Application）と呼ばれるWebサーバへのリクエスト回数やページ遷移の少ないWebアプリなども多くなってきており、ブラウザバッグのイベント処理などを制御する際に利用頻度は多くなってきました。 ぜひ、今回の記事の内容を普段の実装で利用する場合に役立ててくださいね。   大石ゆかり 内容が分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   JavaScriptを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい プログラミングを学習していて、このように思ったことはありませんか？ テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
JavaScript

今さら聞けない！Rubyとは【初心者向け】｜現役エンジニアが解説

最近よく耳にする「Ruby」とは一体どのような言語なのでしょうか？ 今回はその「Ruby」の正体を解説していきたいと思います。Web系の企業でもRubyを使っているところは多いので、これからRubyを勉強してみたいという人はぜひ参考にしてみてください。 終わりには、学習方法もいくつか紹介しているので、自分の好きなやり方で勉強してみましょう。   なお本記事は、TechAcademyのオンラインブートキャンプRuby講座の内容をもとに紹介しています。   なお、今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。     田島悠介 ここではプログラミング言語のひとつ、Rubyについて解説していくよ。 大石ゆかり 田島メンター！！Rubyはどんな用途で使われる言語なんですか〜？ 田島悠介 一番よく使われているのはWebアプリケーションかな。動的なサイトを作るのにとても役立つんだ。有名なクックパッドなどもRubyを使用して作られているよ。 大石ゆかり なるほど。是非覚えてみたいです！   目次 Rubyとは Rubyでできること オブジェクト指向とは Rubyの動向 Rubyが日本で人気な理由 Rubyで開発が向いているサービス Rubyのインストール Rubyの書き方 Rubyの基本構文 Rubyの学習方法 Rubyの学習時のポイント   Rubyとは Rubyとは、まつもとゆきひろ氏により開発されたオブジェクト指向スクリプト言語です。 CやJavaといったコンパイラ言語は、プログラムを実行するためにはコンパイルという手続き（人間が書いたソースコードを機械命令に変換）を介して初めて実行ができます。 しかし、スクリプト言語はこう言った手続きが一切不要で、そのまま実行することができるため、コンパイラ言語に比べてプログラミングを手軽に行うことができます。   また、オブジェクト指向言語なので、すべてのデータがオブジェクトとして表現されています。 つまり継承などといったオブジェクト指向ならではの機能を使うことができます。 継承をすることで書くコードの量が少なくて済み、読みやすく作業効率も上がるでしょう。   Rubyの名前の由来ですが、宝石の「ルビー」から来ています。 Perl(パール)という名前のプログラミング言語がありますが、宝石の真珠(パール)と読み方が同じという点で宝石の名前を取ったようです。 なぜRuby(ルビー)なのかというと、当時のまつもと氏の会社の同僚が7月生まれで、7月の誕生石がルビーだったからです。 Ruby/Rails開発のためのおすすめエディタ/IDEも紹介しているので、合わせてご覧ください。   [PR] 未経験からWebエンジニアを目指す方法とはRubyでできること Rubyを使うメリットとして一番大きいのは、Ruby on RailsというWebアプリケーションフレームワークを使うことができるということです。 Ruby on Railsを使うと、WebサイトやWebベースの業務システムを効率良く開発できると言われています。 Rubyを使っている企業は多くあり、そのほとんどがRuby on Railsを使っているのでエンジニアとして活躍することも可能でしょう。   オブジェクト指向とは 従来のプログラミング言語では困難になってきた、大規模なソフトウェアの開発をより効率よく開発を行うために考え出された 概念です。 一般的に、以下の特徴を持っています。 カプセル化 継承 ポリモーフィズム（多態性） カプセル化 カプセル化とは指定の方法以外で外部からデータにアクセスできないようにすることです。 想定外のアクセスにより、本来書き換えてはならないデータを誤って書き換えることがなくなります。 たとえば、ゲームのセーブデータなどは簡単に書き換えられてしまう訳にはいきません。 そういったデータを書き換えられないようにするためにもカプセル化という機能は重要です。   継承 継承とは、既にある機能を受け継ぎ、効率よくソフトウェア開発を行うための機能です。 例えば、既にあるプログラムを一部改修を加え、新しく作り直したいことがあります。 そうした際に、一から作り直すのはかなり面倒です。 そこで、継承を利用することで既存の機能をそのまま再利用しつつ、新たな機能を定義することができるのです。   ポリモーフィズム（多態性） ポリモーフィズム（多態性）とは、同じ名前の機能（プログラム）を作成でき、それらが独立して存在できることです。 例えば、スマートフォンでは動画や音楽が再生できます。 この動画や音楽を再生するプログラムをPlayという名前でそれぞれ作ったとします。 この時、ポリモーフィズムの概念がないプログラミング言語(C言語など)では、同じプログラムが二重に定義されていますとエラーが出てきます。 ですが、RubyやC++などでは音楽ファイルなら音楽を再生し、動画ファイルであれば動画を再生することができます。 このように同じ名前のプログラムを複数定義でき、それぞれのデータに合わせて使うことができることをポリモーフィズム（多態性）と言います。   Rubyの動向 Rubyは現在も積極的に開発が進められています。 2020/5/23現在の最新の安定版は2.7.1です。また古いバージョンである2.4は公式サポートが終了しました。 最新の2.7系では多くの機能強化やパフォーマンスの改善が行われました。 詳しくは2.7.0のリリースノートを参考にしてください。 Ruby 2.7.0 リリース   フレームワークであるRuby on Railsも継続して開発が行われています。 2020/5/23現在の最新バージョンは6.0.3.1です。 こちらも最新の6.0系では、新しいフレームワークの導入やマルチデータベース対応など、多くの機能追加が行われています。 詳しくは6.0のリリースノートを参考にしてください Rails 6.0 (英語)   なお、毎年恒例のイベントであるRubyKaigi（ルビー会議）ですが、2020年のRubyKaigi2020はコロナウィルス感染症の影響で延期となっています。 ただし中止ではなく延期というのは嬉しいですね。 詳しくはリリース記事を参考にしてください。 新型コロナウィルス感染症（COVID-19）に関するRubyKaigi2020の対応について   Rubyが日本で人気な理由 国内のWebサービスとしては、クックパッドや食べログなどがRubyを利用していることは有名です。 では、なぜRubyが使われているのでしょうか？   一つは、Rubyの開発効率の高さです。 Rubyは「Enjoy for Programing!」を掲げており、プログラマーにとってコーディングしやすいプログラミング言語となっています。 直感的に、実装したい機能をコーディングできるためストレスフリーで開発を行うことができます。   そして、フレームワーク（Ruby on Rails）の存在です。 「Ruby on Rails」とはRubyのWebアプリケーションフレームワークであり、数回のコマンド入力を行うだけで、Webサイトが自動生成できるRuby on Railsは大幅な開発工程の短縮を実現しました。 このRuby on Railsの登場により、開発コスト削減を図る企業などでの利用が増加しました。 また、スタートアップ企業などがWebサービスを立ち上げるために、Ruby on Rails を利用していることも多いです。   また、Rubyは日本で開発されたプログラミング言語であることも利用されている理由の一つです。 C++やJavaといったプログラミング言語の最新情報は英語で書かれていることが多く、それら最新技術を利用するには、一定の英語スキルが必要になります。 また、有用な参考書なども英語で書かれていることが多く、それらの翻訳されたものは、誤訳されたものもあります。 しかし、Rubyは開発者が日本人ということもあり、日本語で書かれた有用な参考書が数多く手に入ります。 そのため、最新情報をいち早く活用することもできるのです。   Rubyでの開発が向いているサービス Rubyは前述の通りRailsと組み合わせてRuby on Railsとして開発を行うことが一般的です。 Ruby on Railsは以下のようなサービスの開発に向いています。   スタートアップ企業のWebサービス Ruby on Railsは開発効率が高いため、少人数での短期開発に向いています。 スタートアップ企業のWebサービスは短期間での継続的なローンチが求められます。 Ruby on Railsはいわゆるアジャイルと呼ばれる開発手法にも適しており、少人数でサービスの基本機能を立ち上げ、ユーザーのフィードバックを得ながら継続的にサービスを改善していくことに適しています。   WebAPI経由でのサービス展開 WebAPIとはプログラムから利用するインターネット上のサービスです。 例えばGoogle MapやTwitterなど、多くのサービスがWebAPIを提供しています。 WebAPIのメリットは既存のサービスを組み合わせて新たなサービスを生み出せることです。 例えば気象データを提供するWebAPIをECサイトのサービスと組み合わせることで、他にはない特徴的なサービスを提供できるかもしれません。 Ruby on RailsにはAPIモードという構成があり、アプリケーションを構築する際にAPIモードを選択することでWebAPIを効率よく開発することができます。   データベースと組み合わせた基幹系システム 意外かもしれませんが、Ruby on Railsは大量のデータ処理や、複雑な計算を行う企業の会計などの基幹系システムのサービス開発にも向いています。 Ruby on RailsはMVCと呼ばれる安定的なサーバアーキテクチャをベースとしています。 またデータベースとの連携についてもモデルクラスによるアクセスやコネクションプールなどに標準的に対応しています。 レガシーシステムを更新する際の選択肢として考えても良いでしょう。   Rubyのインストール Rubyでプログラムを書こうと思ったらまず、Rubyをインストールする必要があります。 手順としては、 Ruby のダウンロードページ からダウンロード(執筆時最新版Ruby2.7.1)。Windowsであれば、RubyInstallerというツールでのインストールも可能です。 ダウンロードしたファイルを実行し、インストール。 インストールが完了したら、ターミナルやコマンドプロンプトから「ruby -v」と入力し、バージョンを確認。 ruby 2.7.1などと表示されれば完了です。   田島悠介 RubyはWindowsとMacの両方で使用することができるよ。 大石ゆかり やっぱりそれぞれによって開発環境の構築の方法がだいぶ違うんですか？ 田島悠介 そうだね。また、インストールに必要なソフトがあったりと少し複雑なので、なるべく最新の情報を見てひとつずつ順番にやってみるのがいいと思うよ。公式のインストールガイドも参照しよう。   Rubyの書き方 Rubyのファイルは「.rb」という拡張子をつけることで保存されます。 実際にターミナル上にHello,world!を出力するプログラムを例に書き方を紹介したいと思います。 print("Hello,world!n") この一文だけで目的のプログラムを作ることができます。 他の言語では文末にセミコロンを打ちますが、Rubyではそれが必要ありません。 他のプログラミング言語を少しでも学習したことがある方は、Rubyがいかにシンプルであるかが分かるかと思います。 実際にRubyを使ってみたいという方は、開発環境の構築方法も合わせてご覧ください。   Rubyの基本構文 Rubyでよく使う基本構文についていくつかまとめて紹介していきます。 基礎的な内容になるので、Rubyとは何かよく分からないという方でも覚えておくと今後役に立つでしょう。 if文 if文は「◯◯の場合〜〜する、△△の場合〜〜する」といった条件分岐の処理を行うことができます。 「ログインできたらアカウント画面に、できなかったらエラー表示に」といった普段Webサイトを見ていると当たり前のように行なわれている処理が条件分岐なのです。 if ◯◯ then # ◯◯がtrueだった時の処理 else # ◯◯がfalseだった時の処理 end   for文 for文は、繰り返し処理をする際に使います。1+2+3+4+…のように手動で足していくのは面倒ですが、「1ずつ増えた数字を繰り返し足して、100まで繰り返す」といった宣言を行うことができるようになります。 for i
Ruby

WordPressでソーシャルボタンを追加する方法【初心者向け】

FacebookやTwitterなどのソーシャルメディアの普及によって、ソーシャルボタンを設置するサイトが多くなってきました。 記事などをシェアしてもらうことでサイトのトラフィックも増えるのでぜひ導入しておきたい機能です。   そこで今回は、WordPressのサイトにソーシャルボタンを設置する方法をご紹介します。 なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。   大石ゆかり 田島メンター！！WordPressの記事にFacebookやTwitterのボタンを設置したいんですけど、どうしたらいいんですか〜？ 田島悠介 いくつか方法あるけど。できるだけ簡単な方法がいいよね。 大石ゆかり そうですね。 田島悠介 じゃあとりあえず手軽な方法を3つ教えるね！   目次 ソーシャルボタンを設置する方法はいくつかありますが、本記事ではすぐに実践できる3つの方法を紹介します。 ソースコードを入力してソーシャルボタンを設置する方法 テンプレートを編集してソーシャルボタンを設置する方法 プラグインを利用してソーシャルボタンを設置する方法 自分で実施できるものから試してみてください。     ソースコードを入力してソーシャルボタンを設置する方法 ソーシャルメディアごとに個別の登録を行う方法です。 今回は、利用者の多いTwitterとFacebookのボタンを埋め込む方法を紹介します。   Twitterボタンを設置する Twitterのツイート(tweet)ボタンを設置してみます。 まずは公式サイトに掲載されているコードをコピーします。   そして、Twitterボタンを表示させたい場所に直接コードを入力します。   記事内に埋め込むこともできますので、今回は例として記事に埋め込みます。 記事内にソースコードを記述する場合は、「テキストモード」になっているかを確認して入力してください。   埋め込んでから投稿を確認してみると、ツイートボタンが設置されていることがわかります。   Facebookボタンを設置する 続いて、Facebookの「いいね！(Like)」ボタンを設置してみます。 まずは、「いいね」ボタンを生成するページでコードを取得しますしょう。このページからボタンのデザインなど好きな形式を選択することができます。   Twitterのボタンと同じように、Facebookボタンを表示させたい場所に直接入力します。 今回は先ほどのTwitterのボタンと並べて設置してみました。 大石ゆかり 記事ごとに設置できるんですね！ 田島悠介 そうだね。特定のページだけボタンを設置したいときにはこの方法が良いね。後の2つの方法はすべてのページに設置する方法だよ。   [PR] 未経験からWebエンジニアを目指す方法とはテンプレートを編集してソーシャルボタンを設置する 先ほどのように記事ごとに貼り付けることもできますが、少し面倒ですよね。 そこで、テンプレートを編集して全ての記事にソーシャルボタンを設置することにします。 ここでは大きく分けて3ステップで作業を進めます。   JavaScriptの読み込みを記述する ソーシャルボタンを読み込ませたいところにソースを記述する ボタンの表示を調整する 順番に見ていきましょう。   JavaScriptの読み込みを記述する まずは「ダッシュボード>外観>テーマの編集」からfooter.phpを開きます。 ソースコードの</body>と書いてあるところの直前に、以下のコードを貼り付けてください。 ================== <!—ソーシャルボタンのスクリプトです footer.php の</body>前に貼り付けます–> <div id=”fb-root”></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.async=true; js.src = “//connect.facebook.net/ja_JP/all.js#xfbml=1”; fjs.parentNode.insertBefore(js, fjs); }(document, ‘script’, ‘facebook-jssdk’));</script> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=true;js.src=”//platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);</script> <script type=”text/javascript”> window.___gcfg = {lang: ‘ja’}; (function() { var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true; po.src = ‘https://apis.google.com/js/plusone.js’; var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s); })(); </script> <!—/ソーシャルボタンのスクリプトですここまで–> ==================   ソーシャルボタンを読み込ませたいところにソースを記述する 続いて、ソーシャルボタンを読み込ませたいところに次のソースを貼り付けます。 普通の投稿なら、single.phpに、固定ページなら、page.phpに貼り付けます。 今回は、Twitter、Facebook、Google+、はてなブックマーク、Pocketのボタンを埋め込みます。 ================== <!– Twitter –> <div> <a href=”https://twitter.com/share” data-lang=”ja” data-count=”vertical”>ツイート</a> </div> <!– Facebook –> <div> <div data-href=”<?php the_permalink()
WordPress

UnityでuGUIのボタンを配置してイベントを登録する方法を現役エンジニアが解説【初心者向け】

UnityでUIを作成するには、uGUI(UnityGUI)と呼ばれる機能を使用します。 UnityのUIは今まで機能が貧弱で様々なプラグインによって実装するのが主流でしたが、現在(2017年12月)は公式のuGUIに安定して落ち着いています。   なお、本記事はTechAcademyのUnity入門オンライン講座の内容をもとにしています。   田島悠介 今回はuGUIの基本であるボタンの配置を行っていくよ 大石ゆかり 田島メンター！！　Unityは3Dのツールというイメージがありますが、UIも作れちゃうんですかー？ 田島悠介 そうだね。uGUIを使えばUIも2Dのアプリも簡単に作れてしまうよ。 大石ゆかり それは素敵ですね！　早速やってみたいです！     目次 本記事では下記の流れで説明していきます。 ボタンの作り方 ボタンの挙動を設定(Transition) ボタンのクリックイベント   ボタンの作り方 田島悠介 まずはボタンを作っていこう 大石ゆかり ボタンも他のオブジェクトと同じように作れるんですか？ 田島悠介 他のオブジェクトと同じように、GameObjectメニューやヒエラルキーを右クリックなどから作成できるよ。早速作ってみよう。   ボタンなどのUIオブジェクトは「Canvas」オブジェクト内に配置します。 Canvasがない状態でUIオブジェクトを作成すると、自動的にCanvasが作成されます。 メニューの[GameObject]->[UI]->[Button]からボタンを作成してみましょう。 ボタンとキャンバスが作成されました。 インスペクタで見やすい位置(0,0,0)に移動しましょう。 実行するとボタンを押して色が変わるのが確認できます。   [PR] 未経験からWebエンジニアを目指す方法とはボタンの挙動を設定(Transition) 大石ゆかり ボタンを押したら色が変わっていますけど、このときの色って変更できるんですか？ 田島悠介 変更できるよ。色以外にも、画像そのものを切り替えたり、アニメーションさせたりもできるんだ 大石ゆかり すごい！　ボタンだけでいろいろできそうですね   先程、ボタンを押すと色が変わることが確認できましたが、Unityではボタンを押した際のリアクションをTransition(トランジション=遷移)と呼びます。 Transitionはボタンのインスペクタで選択することができます。 Transitionには以下の種類があります。 None : ボタンを押しても見た目は変わらない Color Tint : ボタンを押した際に色が変わる Sprite Swap : ボタンを押した際にスプライトが切り替わる Animation : ボタンを押した際にアニメーションが再生される １つ１つ設定を見ていきましょう。 ・None 設定項目はなく、ボタンを押しても見た目が変わりません。見た目が変わらないだけなので、ボタンのイベント（後述）は起動します。 ・Color Tint デフォルトの設定です。ボタンを押した際やマウスオーバーした際の色を設定できます。 Target Graphic : 色を変えるImageコンポーネントが追加されたゲームオブジェクト Normal Color : 通常時の色 Highlighted Color : マウスカーソルを乗せたときの色 Pressed Color : ボタンを押したときの色 Disabled Color : ボタンが無効になっているときの色 Color Multiplier : 色に倍率をかけます。あまり使用しませんが、これによって暗い色のボタンを押した際の色を明るくすることができます。 Fade Duration : ボタンを押した際の色の切り替わりにかかる時間を秒で指定します。 　 ・Sprite Swap ボタンを押した際やマウスオーバーした際にスプライトが切り替わります。 Target Graphic : スプライトを切り替えるImageコンポーネントが追加されたゲームオブジェクト Highlighted Sprite : マウスカーソルを乗せたときに切り替わるスプライト Pressed Sprite : ボタンを押したときに切り替わるスプライト Disabled Sprite : ボタンが無効になった際に切り替わるスプライト また、通常時のスプライトはTarget Graphicに指定されたImageコンポーネントのSourceImageに設定します。 　 ・Animation ボタンを押した際に作成したアニメーションが再生されます。 Normal Trigger : 通常状態に戻る際に発生させるアニメーショントリガー Highlighted Trigger : マウスカーソルを乗せた際に発生させるアニメーショントリガー Pressed Trigger
Unity

今さら聞けない！Ruby on Railsとは【初心者向け】

Webサービスを作りたいと思った人はRuby on Railsという言葉を一度は聞いたことがあるんじゃないでしょうか。 最近ではいろんなWeb系の企業が利用しているRuby on Railsですが、「Ruby on Rails」とは一体何なのか解説していきたいと思います。 他の言語を学ぶ際にも参考になる内容なので、プログラミングを始めたばかりの人はぜひ知っておきましょう。   そもそもRubyについてよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプRuby講座の内容をもとに紹介しています。   田島悠介 今回はRuby on Railsについて紹介しよう。 大石ゆかり 田島メンター！！Ruby on Railsというのは何をするものなんですか～？ 田島悠介 Ruby on Railsは、Webアプリケーションを作成するためのフレームワークだよ。アプリを作成するのに必要な機能や構造がひとつにまとまったもので、これは誰でも利用することができるんだ。 大石ゆかり なるほど、アプリケーションを作る骨組みということでしょうか？是非やってみたいです！   目次 Ruby on Railsとは フレームワークとは MVCモデルとは Ruby on Railsでできること Ruby on Railsの書き方 Ruby on Railsの学習方法   Ruby on Railsとは Ruby on RailsとはWebアプリケーションフレームワークです。 そもそもWebアプリケーションフレームワークとは、動的なウェブサイト、Webアプリケーション、Webサービスの開発をサポートするために設計されたアプリケーションフレームワークのことを言います。 フレームワークは日本語では「枠組み」というふうに言われますが、まさにその通りで、このRailsもプログラミング言語のRubyで使えるフレームワークなのです。 Railsの基本理念は「Don’t Repeat Yourself(DRY)」、「Convention over Configuration(CoC)」でそれぞれ「同じことは繰り返さない」、「設定より規約」という意味になります。   [PR] 未経験からWebエンジニアを目指す方法とはフレームワークとは そもそも「フレームワーク」とは何でしょう。 プログラミングの学習を進めていると、一度は目にしたことがあるのではないでしょうか。   フレームワークを使えば、開発者は必要最低限のプログラムを書くだけになり、開発者の負担を大きく減らしてくれます。 RubyでWebアプリを作成するときに毎回書かなければいけないような処理が存在します。Railsは、そのような凡庸的な処理を最初から備えていて、利用者はそれらを意識することなく開発に集中できます。   「フレームワーク」は、よく「ライブラリ」という言葉と混同されがちですが、ライブラリというのは特定の機能を提供し、プログラムの中でそれらを呼び出すことで動作するものです。 それに対して、フレームワークはアプリケーション全体の枠を提供し、開発者の作ったプログラムを読み込んで動作するので、覚えておきましょう。   MVCモデルとは Ruby on Railsは設計にMVCモデルを採用しています。 MVCとはModel（モデル）、View（ビュー）、Controller（コントローラー）の略称です。 メインの処理と、見た目を生成する処理を一箇所に書いてしまうと、コードが読みづらくなり、メンテナンス性が下がってしまいます。 そこで、メインの処理と、見た目を生成する処理と、それらを接続する処理を分けて書くというのがMVCの発想です。 分割することによってコードの再利用性を高めることもできます。   Ruby on Railsでできること これ単体では何もできません。 Rubyやhtmlなど、Webサービスを作る上での最低限のプログラムの知識を要します。 HTML,CSS,Rubyがわかっているとスムーズに始めることができますが、Railsを使ってWebアプリケーションを作りながら同時進行で勉強するのも一つの手だと思います。 最初でも書いたように、Railsは枠組みです。 面倒なフォルダ、ファイルの作成をコマンド一つですべて行うことができ、そのフォルダやファイルの内容を変更することで、作っていきます。   田島悠介 Railsの枠組みの中でHTML・CSS・Rubyなど各言語を使用してアプリケーションを作成していくんだ。 大石ゆかり それぞれの知識も必要ってことですね。 田島悠介 そうだね。あと、各ファイルがどのように配置され、どういう役割を果たしているかというのも少しずつ覚えていくといいよ。アプリケーションの作成とサーバー起動の方法も確認しておこう。   Ruby on Railsの書き方 アプリケーションの作成の仕方、サーバーの立ち上げ方について説明していきます。 これらはすべてターミナル上で行います。 railsコマンドを使って「app」という名前のアプリケーションを作成しましょう。 rails new app これをターミナルで打ち込むだけで必要なフォルダ、ファイルが作成されます。 作成されたらそのフォルダに移動しましょう。 rails server これを打ち込むと先ほど作ったアプリケーションにアクセスするためのサーバーが起動します。 Safariなどから表示されているサイトにアクセスすれば見ることができます。   Ruby on Railsの学習方法 最後にRuby on Railsの学習サイトと書籍をご紹介します。 学習サイト Ruby on Railsチュートリアル こちらのサイトはMichael Hartl（マイケル・ハートル）著、YassLab社が運営するチュートリアルです。 実際に公開できるWebアプリを作りながら学べるので、手を動かしながら学びたい人にぴったりです。 電子書籍版や実演動画を別途購入することも可能です。 Ruby on Railsチュートリアル   Ruby on Railsガイド こちらのサイトは上記のチュートリアルの副読本として読むことをオススメします。 チュートリアルで分からなかったことなどを重点的に読むと良いでしょう。 Ruby on Railsガイド   Progate Progateはブラウザ上で擬似プログラミングできる学習サイトです。 トピックごとにスライドが何枚か用意されています。スライドを読み終わると、そのスライドに沿った課題が出され、プログラミング初心者におすすめです。 ある程度プログラミング経験のある方にはまどろっこしく感じるかもしれません。 Progate   書籍 Ruby on Rails環境構築ガイド Ruby on
Ruby

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Webアプリケーションコース プログラミング Ruby Railsで戻るボタンを実装する方法を現役エンジニアが解説【初心者向け】