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

1. はじめに

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

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

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

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

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

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

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

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

・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サービスをアピールして、プログラミング歴６ヶ月で自社サービス開発の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. 環境変数の設定