【BigTweetチュートリアル2】Ruby on Rails / JavaScriptで簡単なサービスを作ってみよう!(初学者向け)

1. はじめに

1-1. このチュートリアルで作るもの

BigTweetは、文字が入った画像付きのツイートを簡単にできるシンプルなサービスです。

利用イメージは↓の動画が分かりやすいのでご覧ください。

↓こちらから実際に使ってみることができます。


1-2. BigTweetチュートリアル1との違い

5月にBigTweetチュートリアル1を作っていますが、違いは以下の通りです。

JavaScriptを使うことで、リアルタイムでプレビューを見ることができる

・JavaScriptを使って、文字の位置縦書きor横書き文字色フォントを細かく設定することができる

・BigTweetチュートリアル1では、RailsImageMagickというライブラリを使って画像を作成していたが、BigTweetチュートリアル2では、JavaScripthtml2canvasというライブラリを使って画像を生成している

・JavaScriptを使って、画像生成中・画像生成完了時にアニメーションを出して、利用者を待ち時間に飽きさせない工夫をしている


5月に作成したBigTweet1のチュートリアル、利用イメージ動画、実際のサイトはこちらです。


1-3. 本チュートリアルで学べること

Ruby on Rails / JavaScriptで簡単なアプリケーションを作ってHerokuで簡単にデプロイして公開する方法を一気通貫で学べる

JavaScript / jQueryの基本的な使い方

・JavaScriptのライブラリ html2canvas で画像生成する方法

Amazon S3に画像を保存し、Twitterカード(シェアした時に表示される画像)の表示のさせ方


1-4. 想定読者

・Ruby on Railsの基本的なことは学んでおり、自分で何か作ってみたい方

・1-3 の項目を学びたい方


1-5. 想定所要時間

スムーズに進めば10時間程度で作成可能だと思います。
土日で気軽に作れるボリュームです!

質問や相談にはTwitter DMにて対応させていただきます。
お気軽に質問・相談してください(^^)


1-6. 本チュートリアル実施後の姿

「自分で作ったサービス」が手に入ります。
(このチュートリアルで作成したWebサービスはどんどんアレンジして、どんどん公開して下さい!僕の許可は一切不要です。)

自分で作成したWebサービスをアピールして、プログラミング歴6ヶ月で自社サービス開発のRailsエンジニアになることができた転職活動については、こちらのnoteに書きましたので、ご興味ある方は是非ご覧ください。
プログラミング歴6ヶ月の僕が自社サービスRailsエンジニアになりました!〜実際の転職活動について〜


1-7. 注意事項

・コードがベストな書き方ではない可能性があります。

・開発環境については各自ご準備お願いします。


1-8. いただいたご感想の紹介(2018/10/15・2019/1/21追記)

読んでいただいた皆さまありがとうございます。
いただいたご感想を一部紹介させていただきます。

Webサービス作りの力になれてとっても嬉しい!


早速作っていきましょう!
自分で作ったものが動いて、人に使ってもらえるとめちゃくちゃ嬉しいですよ!!


2. 実装

<2. 実装 の目次>
2-1. 質問の仕方について
2-2. Ruby、Railsのバージョンを合わせる
2-3. Rails new
2-4. 最低限の設定
2-5. Gemファイルの設定
2-6. Bootstrap・font-awesomeの導入
2-7. html2canvasの導入
2-8. コントローラ作成
2-9. ビュー作成
2-10. JavaScriptファイル作成
2-11. ルーティングの設定
2-12. Twitterカード(画像表示)設定
2-13. Amazon S3の設定
2-14. GitHubへプッシュ
2-15. Herokuへデプロイ
2-16. 環境変数の設定

この続きをみるには

この続き:23,039文字/画像3枚

【BigTweetチュートリアル2】Ruby on Rails / JavaScriptで簡単なサービスを作ってみよう!(初学者向け)

ゆうすけ

500円

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

お読みいただき誠にありがとうございます。 サポートいただけるととても励みになります。

ありがとうございます!とても嬉しいです!
8

ゆうすけ

参考

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。