学生向けプログラミング入門 | 無料

学生向けにプログラミングを無料で解説。Java、C++、Ruby、PHP、データベース、Ruby on Rails, Python, Django

Ruby on Rails

Rails7.1 | 動画学習アプリ作成 | 34 | raty-js

raty-jsは、スター評価を作成するためのJavaScriptプラグインです。 Rails7.1でraty-jsを利用するには、以下のステップに従って設定を行う必要があります。

Rails7.1 | 動画学習アプリ作成 | 33 | クレジットカード決済の実装

登録したクレジットカードで決済できるようにします。

Rails7.1 | 動画学習アプリ作成 | 32 | Stripe

Stripeは、オンライン決済プロセスを簡素化および最適化するためのソフトウェアプラットフォームとサービスを提供する企業です。 Stripeは、企業や個人がウェブサイトやアプリケーションを通じてクレジットカードやデビットカードを受け入れるためのツールを…

Rails7.1 | 動画学習アプリ作成 | 31 | 購入プロジェクト表示

購入したプロジェクトを表示させるページを作成します。

Rails7.1 | 動画学習アプリ作成 | 30 | サブスクリプション

購入した人のみがタスクを閲覧できる仕組み(サブスクリプション)を実装していきます。

Rails7.1 | 動画学習アプリ作成 | 29 | Wistia

Wistiaは、ビジネスが動画コンテンツをホスティングし、管理し、カスタマイズするためのサービスを提供するビデオホスティングおよびアナリティクスプラットフォームです。 Wistiaは、マーケティング、セールス、コミュニケーションのためにビジネスが動画コ…

Rails7.1 | ngrok

Rails7.1でngrokを利用する方法を解説します。 Ngrokは、公開されているネットワーク上にローカルなサーバーを公開するためのツールです。これを使用すると、開発環境やローカルホスト上で実行されているウェブサーバーなど、ローカルネットワーク上のサービ…

Rails7.1 | 動画学習アプリ作成 | 28 | Markdown関数

Markdown記法とは、テキストを構造的に記述する言語の一つです。 特定の記号を使って段落や見出しなどを表示できます。 見出しや本文、箇条書きといったレイアウトを気にせず文章を入力していくことができます。

Rails7.1 | 動画学習アプリ作成 | 27 | プロジェクトビュー

登録したプロジェクトを表示させるビューを作成していきます。 まずはプロジェクトに登録した画像を表示するためのヘルパーメソッドを追加します。

Rails7.1 | 動画学習アプリ作成 | 26 | タスクの登録

プロジェクトの登録と同じようにタスクの登録もできるようにします。 では早速、タスクを登録するためのビューを作成していきます。

Rails7.1 | 動画学習アプリ作成 | 25 | Dropzone

Dropzone.jsをRuby on Railsプロジェクトに統合することは、ファイルアップロードのユーザーエクスペリエンスを向上させ、アプリケーション全体の機能性と使いやすさを向上させるために非常に有益です。 Dropzone.jsは、ユーザーエクスペリエンスを向上させ…

Rails7.1 | 動画学習アプリ作成 | 24 | プロジェクトの登録

Railsのビューは、Ruby on RailsというWebアプリケーションフレームワークで使用されるコンポーネントの1つです。 ビューはユーザーに対してデータを表示するための部分であり、通常HTMLやERB(Embedded Ruby)などのテンプレートエンジンを使用して、ウェブ…

Rails7.1 | 動画学習アプリ作成 | 23 | コントローラー

Ruby on Railsのコントローラー(Controller)は、MVC(Model-View-Controller)アーキテクチャの一部です。 コントローラーは、アプリケーションを管理し、クライアントからのリクエストを受け取り、それに応じてモデルとビューとの間で情報を調整します。 …

Rails7.1 | 動画学習アプリ作成 | 22 | アクションテキスト(ActionText)

Ruby on Railsで利用できるAction Textを使えば、リッチテキストフィールドを簡単に統合できます。 Action Textを導入する手順を順を追って説明します。

Rails7.1 | 動画学習アプリ作成 | 21 | プロジェクトとタスクモデル

プロジェクトとタスクのモデルを作成していきます。

Rails7.1 | 動画学習アプリ作成 | 20 | trestle

TrestleはRuby on Railsプロジェクトで管理画面を迅速に構築し、カスタマイズしやすくするための強力なツールです。 これにより、開発者はアプリケーションのコア機能に専念し、時間と労力を節約できます。

Rails7.1 | 動画学習アプリ作成 | 19 | ページ作成

ユーザープロフィールページを作成していきます。 作成するページで使用するパラメーターは対応するコントローラーであらかじめ定義する必要があります。

Rails7.1 | 動画学習アプリ作成 | 18 | Google認証

Google認証を実現するために、OmniAuthというGemを使用することが一般的です。 さらにGoogle Cloud PlatformでAPIキーを取得する必要があります。

Rails7.1 | 動画学習アプリ作成 | 17 | Facebook認証

ユーザーは既にFacebookアカウントを持っていることが多いため、新しいウェブサイトやアプリケーションに登録やログインする際に新しい資格情報を作成する必要がなく、手間が省けます。 これにより、ユーザーエクスペリエンスが向上し、新規ユーザー獲得が容…

Rails7.1 | 動画学習アプリ作成 | 16 | カラムの追加

Ruby on Railsでデータベーステーブルに新しいカラムを追加する方法はいくつかありますが、マイグレーションを使用する方法が一番簡単です。 まず、ターミナルでコマンドを実行して新しいマイグレーションファイルを生成し、最後にマイグレーションを実行し…

Rails7.1 | 動画学習アプリ作成 | 15 | Amazon S3

Amazon S3(Simple Storage Service)は、Amazon Web Services(AWS)のクラウドストレージサービスの1つです。 S3は、データの保存、バックアップ、アーカイブ、データの配信など、さまざまなデータストレージ関連の用途に使用されます。

Rails7.1 | 動画学習アプリ作成 | 14 | Active Storageの利用

"Active Storage"(アクティブストレージ)は、Ruby on Rails(RoR)用のライブラリで、ファイルのアップロード、ストレージ、および管理をサポートするために設計されています。 Active Storageを使用することで、ユーザーがWebアプリケーションにファイル…

Rails7.1 | 動画学習アプリ作成 | 13 | Font Awesomeの利用

Ruby on Railsで「Font Awesome」のアイコンを使えるようにします。 Font Awesomeは、Webデザイナーや開発者にとって非常に便利なアイコンライブラリです。 Font Awesomeには1,600以上のアイコンが含まれており、多くの異なるカテゴリーから選択できます。 …

Rails7.1 | 動画学習アプリ作成 | 12 | Googleフォントの利用

Googleフォントは無料で利用できます。 商用プロジェクトや個人のウェブサイトにも適しており、予算に制約のある場合でも利用できます。 また、Googleフォントは、数百もの異なるフォントを提供しており、それらはさまざまなスタイルや用途に適しています。 …

Rails7.1 | 動画学習アプリ作成 | 11 | ダッシュボードの追加

ダッシュボードページを追加します。 ユーザーモデルに「about」「status」フィールドを追加します。

Rails7.1 | 動画学習アプリ作成 | 10 | Gmailの利用

Gmailを使ってメールの送信をできるようにします。 アカウントの新規作成時にメールで認証を行ったりすることもできるようになります。

Rails7.1 | 動画学習アプリ作成 | 09 | Notyの利用

Notyは、通知メッセージを表示するためのJavaScriptライブラリであり、Railsアプリケーションで使用することができます。

Rails7.1 | 動画学習アプリ作成 | 08 | 日本語化

Ruby on Railsを日本語化するには、以下の手順を実行します。 Ruby on Railsは多言語対応が得意であり、多くの部分を簡単に翻訳できます。

Rails7.1 | 動画学習アプリ作成 | 07 | ログイン機能の実装

deviceによるログイン機能をビューも含めて実装していきます。 まずはユーザーモデルに氏名の項目を追加します。

Rails7.1 | 動画学習アプリ作成 | 06 | ナビゲーションバーの利用

Bootstrap5.3を利用して、ナビゲーションバーを設置します。 デザインはレスポンシブルデザインを意識して調整します。 レスポンシブデザイン(Responsive Design)は、ウェブデザインやウェブ開発の手法の一つで、異なるデバイスや画面サイズに対応するため…