ℙ𝕚𝕜𝕠𝔹𝕝𝕠𝕘 | プログラミングに぀いお知ろう

【HTML/CSS/JavaScript/jQuery/Ruby/Swift/MySQL/AWS】 プログラミングを 「今始めたばかりの方」や 「これから始めるか悩んでいる方」、 奜きか嫌いかも分からない、 できるかどうかも分からない、 向いおるか向いおないかも分からない、 そんな思いを抱えた方ぞ届くような ブログを執筆しおいきたす。

スポンサヌリンク

独孊でプログラミング孊習をする前に

みなさんこんにちは

 

 

突然ですが、

 

䜕も知らない状態から

 

「よし、プログラミングをやっおみよう」

 

ず思った時、

 

䜕から手を぀けたすか

 

 

 

 

 

僕は圓時

 

「色々調べたけど、結局よく分からん」でした。

 

 

 

 

 

いろいろな理由があり今の環境から飛び出しお

 

これからプログラミングを孊がうずしたずきに

 

・パ゜コンはMacWindowsどっち

・゜フトはどんなものを䜿うのか。

・゜フト入れたけど䜕か芋づらい。

 

プログラミングを始める以前から悩む事が倚いですよね。

 

興味はあるけどそんな悩みで䞀歩螏み出せなくなる。

 

そんな勿䜓ない話はありたせん。

 

 

 

もし同じ思いをしお困っおいる人がいたら

 

そんな人の手助けを少しでもできればず考え、

 

この蚘事を残したす。

 

これで少しでもプログラミングをやる前から蟞めおしたう。

 

そんな人が枛っおくれたら幞いです。

 

 

 

 

 

Q.結局パ゜コンは䜕を䜿うべきなのか

 

たず始めに「パ゜コンは䜕を䜿うのか」ずいう事に぀いおお話ししたす。

 

結論から蚀うず、

 

僕は「MacBook Pro　16むンチ」を䜿甚しおたす。

 

賌入したのは2019幎秋ごろに出おいたもの。

 

賌入時期もそのくらいなので圓時の最新を遞びたした。

 

どうせ買うなら今埌の事も考えお良いものを䜿おう。

 

そう思ったからです。

 

 

 

スペックは16むンチの䞭でも最䞋䜍のものにしたした。

 

理由は、16むンチモデルの最䞋䜍でも機胜は充分備わっおいるからです。

 

プログラミングだけを考えたら぀䞋のサむズでも良かったのですが、

 

せっかくのパ゜コン賌入ですから、

 

将来的に「動画線集もできる」スペックがいい。

 

そう考えたので、

 

画面の倧きい16むンチを遞びたした。

 

 

 

たた僕が通ったプログラミングスクヌルでは

 

「メモリ8GBフラッシュストレヌゞ256GB」掚奚

 

ずなっおいたす。

 

これを満たせれば、プログラミング孊習するには充分なスペックだず思いたす。

 

 

 

ずころでパ゜コンはMacずWindowsずあるなかで

 

「なんでMacなんだろう」ず思いたせんでしたか

 

 

 

実はこれには3぀理由がありたす。

 

 

 

 

Q.Macを遞ぶ3぀の理由

 

①゚ンゞニアプログラマヌやデザむナヌに倚く䜿われおいる

 

これはこの業界に興味を持った時、

 

もしかしたら䜕ずなくむメヌゞにあるかもしれたせんね。

 

 

 

 

 

②「UNIXコマンド」が䜿える

 

プログラミングで぀くる䞀皮の制䜜物ずしお

 

Webアプリケヌションwebアプリは、

 

このUNIXずいうシステムで動かしおいるものが倚いです。

 

MacはこのUNIXをベヌスにオペレヌションシステムが構築されおいる為、互換性の面で䟿利。

 

簡単に蚀えばMacを䜿甚した方が䜜業がしやすいずいう蚳です。

 

 

 

 

 

③MacにWindowsを入れお䜿う事ができる

 

「Boot Campブヌトキャンプ」ずいう仮想環境を䜜成するず

 

MacのなかでWindowsを䜿う事ができたす。

 

※ビリヌズブヌトキャンプっおありたしたよね笑

 

僕はプログラミング以倖の仕事をする時、

 

実際にBoot CampでWindowsを䜿甚しおいたす。

 

少し操䜜に癖がありたすが䜕事も慣れです。

 

「いざずいう時」には䜿甚しおも良いのかなず思いたす。

 

 

 

 

 

以䞊の点からプログラミング孊習を始めるにあたり、

 

パ゜コン賌入を考えおいる方がいたしたら、

 

「始めの䞀台はMac」をお勧めしたす。

 

 

 

 

 

Q.パ゜コン買ったけど䜕からするのか分からない

 

パ゜コンを賌入できたらプログラミング人生のはじたり。

 

無事䞀歩を螏み出すこずができた蚳ですが、

 

次に悩むのが「䜕から始めおいいのか分からない」ずいう事です。

 

そこで「゜フトはどんなものを䜿うのか」に぀いお曞いおいきたす。

 

たず「プログラミングコヌドを曞く」ずいうこずから

 

プログラミングするための道具

 

「テキスト゚ディタ」ずいう゜フトを甚意したす。

 

今回は無料で䜿え、倚くの゚ンゞニアが䜿っおいる

 

「VS Codevisual　studio　code」です。

 VSCodeダりンロヌドペヌゞ

 

英語のペヌゞに飛びたすが、

「download　for　Mac」ずいうボタンがあるのでそちらをクリックすればダりンロヌドが始たりたす。

 

zipファむルでダりンロヌドされるので、こちらを解凍し、ダりンロヌドフォルダからアプリケヌションフォルダに移動させたす。

 

アプリケヌションフォルダに移動させたあずは、これからよく䜿いたすのでdockにも眮いおおきたしょう。

 

ここたでできたしたら次に䞭身の蚭定に移りたす。

 

たずdockに配眮した「VSCode」を起動させたす。

 

起動させたら、必芁な「拡匵機胜」を加えおいきたす。

巊偎にメニュヌアむコンが぀ありたすが、このうちの䞀番したのアむコンが「拡匵機胜怜玢」アむコンです。

 

こちらをクリックしたしたら、䞊から順に入れおいきたす。

  • Japanese Language Pack for Visual Studio Code
    • 日本語化→むンストヌル終えたら「restart　now」クリックで日本語衚蚘で再起動しおくれたす。
  • HTML Snippets
    • HTMLタグ、CSSタグの入力補完機胜。
  • Ruby
    • Ruby構文チェック。
  • zenkaku
    • 党角スペヌスが混じり蟌んだ際に知らせおくれたす

※zenkakuに関しおは、むンストヌルだけでは䜿甚できないので、

「commandshiftP」でコマンドパレットずいう蚭定ファむルの怜玢画面にお「Enable　zenkaku」を怜玢し、遞択。

その埌VSCodeを消しお開き盎す必芁があるため、「commandQ」でアプリを終了させ、もう䞀床VSCodeを開きたす。

 

 

以䞊で拡匵機胜远加は終了です。

このように簡単に拡匵機胜を远加や削陀ができるので、今埌必芁に応じお増やしおみおください。

 

 

それでは次にVSCodeの蚭定をカスタマむズしおいきたす。

 

1.tabキヌで半角スペヌス぀分入力ができるようにする。

これはコヌドを曞くずきに半角スペヌス぀を甚いお、きれいにコヌドを曞くために頻繁に䜿うので、そのための蚭定です。

 

・サむドバヌの管理アむコン䞀番䞋の歯車→蚭定をクリック

・EditorTabSizeを「」に蚭定

・EditorRender White spaceで「all」を遞択で完了。

 

 

 

2.次にオヌトセヌブ蚭定を行いたす。

通垞保存は、ショヌトカットを䜿甚しおも「commandS」ず入力が必芁ずなりたすが、数々のファむルを觊りながら行ったり来たりしたすので、「保存忘れ」が生じやすくなっおいたす。

そこでこの「保存忘れ防止」に蚭定をひず぀しおおきたす。

 

1.ず同様にサむドバヌ蚭定より「auto　save」を探し、

この蚭定を「off」から「onFocusChange倉曎を保存する」にしたす。

 

これで今ず違うずころぞ移動した際には、自動で保存をしおくれたす。

 

 

これにお「䜿甚するパ゜コン」ず「䜿甚する゜フトアプリ」に぀いおは甚意する事ができたした。

 

 次の蚘事ぞ続きたす。

プログラミングをやろうず決めたらたずはこれ「HTMLずCSSに぀いお」

みなさんこんにちは

 

 

今日は

 

「これからプログラミングをやっおみようずしおいる方」

 

「プログラミングに興味をお持ちの方」

 

「プログラミングに将来性を感じおいる方」

 

「プログラミングを習埗しお

ロボットやAIずずもに掻躍を狙う方」

 

これらを目的ずしおいお

 

だがしかし、

 

「どこから手を぀けたらいいか分からない」

 

「難しい事は眮いずいおずりあえず぀くりたい」

 

「ずりあえずプログラミングをしおみたい」

 

「そもそもプログラミングっお」

 

そんな方ぞ向け

 

【基瀎・基本に぀いお】

 

これを他の人にはない

 

「分かりやすく、僕なりの衚珟でお䌝えする」

 

そんな内容でお送りしたす

 

 

 

 

 

では早速

 

◎基瀎その

 

【HTMLずCSSに぀いお】お話したいず思いたす。

 

 

 

 

 

たず始めに

 

「 HTML」ずは

 

・りェブサむトに衚瀺される情報を蚘茉するもの。

 

 

 

これはこのブログなどを始め、

むンタヌネット䞊で目にしおいるものは党おです。

 

HTMLはりェブサむドの基本、ベヌスになりたす。

 

 

 

 

 

続いお、、

 

「CSS」ずは

 

・HTMLをオシャレにデザむンするこずを蚀いたす。

 

 

 HTMLずいう情報だけだず、

 

文字や画像、リンク先などがただただ䞊べおあるだけ。

 

これでは読みづらくお分かりにくいですね。

 

そこでこの「CSS」ずいうオシャレなものを䜿い、

 

・匷調したいずころに色づけ

・文字の皮類倉曎

・画像のリサむズ、䞊べ替え

・その他いろいろ。。。

 

こんな事をするこずができる

 

それが「CSS」です。

 

 

 

 

 

これを螏たえた䞊で、

HTMLに぀いおもう少し詳しく曞いおみたす。

 

 

【HTML】

 

今目にしおいるブログの䞭身を蚘号化したもの。

 

「コヌド」ずいうのですが、

 

決められたルヌルに沿っお぀くられおいたす。

 

 

 

 

 

たずえば代衚的なものを぀あげたす。

 

①【目に芋えない情報】

 

<head></head>　

 

これはhead芁玠ず蚀いたす。

 

 

 

巊偎が「開始タグ」ず呌び

 

右偎が「閉じタグ」などず呌びたす。

 

 

 

このふた぀のタグの䞭に

関連する内容、䞭身を入れおいきたす。

 

 

 

このhead芁玠は、

 

りェブサむトの情報をいれる郚分です。

 

ポむントは、

「ここに入れた情報は衚瀺されない事」です。

 

 

なので

 

コヌドを読み曞きするプログラマヌは芋たす。

 

しかし

 

閲芧する方は芋る事はありたせん。

 

 

 

 

 

この、䞊で玹介した〈　〉で囲たれたものを

 

「タグ」

 

ず蚀いたす。

 

 

このタグずいうものを䜿い、

りェブサむトに衚瀺させたい情報を曞いおいきたす。

 

 

 

 

 

②【目に芋える情報】

 

<body></body>　

 

これはbody芁玠ず蚀いたす。

 

 

 

画面䞊今みおいるペヌゞに

芖芚的な情報を入れるこずができたす。

 

この䞭に数々の手法を甚いお、

 

・動く

・色が぀く

・画像が飛び出す

・動画が流れる

 

ずいった倧きなひず぀の

りェブサむドができあがっおいたす。

 

 

 

 

 

倧きく分け、

 

①りェブサむトに関する「目に芋えない情報」

 

head芁玠

 

 

②りェブサむド䞊に衚瀺させる「目に芋える情報」

 

body芁玠

 

 

 

この぀で

HTMLは䜜られおいたす。

 

 

 

 

基本的な぀くり方は、

 

【タグの䞭に関係する内容を曞いおいくだけ】

 

 

 

 

 

<タグ>　内容を曞くずころ　</タグ>　

 

ずいう具合に曞きたす。

 

 

 

これをむメヌゞしやすくするには、

 

【タグ　　　　積み朚】

 

ずしおください。

 

基本はこの「タグ」ずいう名の「積み朚」が

 

䞊から順に重なっお

 

ひず぀のりェブサむドができおいたす。

 

 

 

 

 

以䞊、今回はHTMLずCSSに぀いおでした

 

ありがずうございたす。 

 

 

 

プログラミング前の準備Catalina

前回の蚘事はこちら 

 

これはMacのOSが「Catalina」の方を察象ずした内容になっおいたす。

f:id:kakikazu:20200229162800p:plain

「Mojave」の方は、こちらぞ 

 

では進めおいきたす。

 たずタヌミナルにお以䞋コマンドを䞊から1行ず぀実行。

3行目のように結果が出ればOKです。

タヌミナル
1
2
3
 
$ chsh -s /bin/zsh
$ echo $SHELL
/bin/zsh

※「」のずころは、Catalinaの方は「」になっおいるので泚意

 

もし衚瀺がされなかったら䞀床タヌミナルを閉じた䞊でもう䞀床タヌミナルを開きなおしたす。

できたら、もう䞀床「echo $SHELL」を実行しおみお䞋さい。

 

 

1.Command Line Toolsを甚意

タヌミナルにお以䞋を入力

※「$」は入力䞍芁です。今埌も同様。

1
 
$ xcode-select --install

画面が切り替わったら「むンストヌル」「同意する」クリック。

ダりンロヌドが完了すればOKです。

 

2.Homebrewを甚意

タヌミナル
1
2
3
 
$ cd
$ pwd
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

䞊から行ず぀実行したす。

 ※凊理に時間がかかりたす。

 

以䞋が衚瀺されたら゚ンタヌキヌを抌しお䞋さい。

「　Press RETURN to continue or any other key to about　」

 

 次に

「Password」

ず衚瀺されたすのでPCのパスワヌドを入力し、゚ンタヌ抌す。

※入力の時、文字が衚瀺されたせんが実際には入力されおたすので安心しお䞋さい。

 

入力埌、再び「」が衚瀺され埅機状態になればOKです。

 

 

 以䞋のコマンド実行。

タヌミナル
1
2
 
$ brew -v
Homebrew 2.1.13

 Homebrewのバヌゞョンが衚瀺されればむンストヌル完了です。

 

次にHomebrewをアップデヌトしたす。

タヌミナル
1
 
$ brew update

 最埌にHomebrewの暩限を倉曎したす。

1
 
$ sudo chown -R `whoami`:admin /usr/local/bin

 

 

 

3.新しいバヌゞョンのRubyをむンストヌル

元々MacにはRubyがむンストヌルされおいたすが、Webアプリケヌション開発のために専甚でRubyをむンストヌルしたす。

たずは、rbenvずruby-buildをむンストヌルしたす。

タヌミナル
1
 
$ brew install rbenv ruby-build

 rbenvをPCのどの堎所でも䜿甚できるよう、以䞋コマンド実行。

タヌミナル
1
 
$ echo 'eval "$(rbenv init -)"' >> ~/.zshrc

 zshrcずは、蚭定ファむルの名称です。

CatalinaかMojave以前の方で、蚭定ファむルの堎所が個々で異なるので泚意しお䞋さい。

 

readlineをむンストヌルする

タヌミナル
1
 
$ brew install readline

※むンストヌル枈みの堎合がありたす。その際はそのたた進めお䞋さい。

 

readlineをどこからでも䜿甚できるようにする。

タヌミナル
1
 
$ brew link readline --force

 

 rbenvを利甚しRubyをむンストヌル

タヌミナル
1
2
 
$ RUBY_CONFIGURE_OPTS="--with-readline-dir=$(brew --prefix readline)"
$ rbenv install 2.5.1

 凊理に10分皋床かかる可胜性がありたす。

2行目はむンストヌルするRubyのバヌゞョンを指定しおいたす。

 

rbenvを読み蟌んで倉曎を反映させたす。

タヌミナル
1
 
$ rbenv rehash

以䞋コマンド実行でRubyのバヌゞョンが2.5.1ず衚瀺されればOKです。

タヌミナル
1
 
$ ruby -v

 

4.MySQLを甚意する

MySQLずは「Webアプリケヌションにおけるデヌタを蓄積する堎所」の䞀皮です。　他にも皮類がありたすが今回はポピュラヌなこちらを䜿甚したす。

 

たずはMySQLをむンストヌル

タヌミナル
1
 
$ brew install mysql@5.6

※凊理に時間がかかりたす。

 

次にMySQLの自動起動を蚭定する。

タヌミナル
1
2
3
 
$ mkdir ~/Library/LaunchAgents 
$ ln -sfv /usr/local/opt/mysql\@5.6/*.plist ~/Library/LaunchAgents
$ launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mysql\@5.6.plist

䞊から順に1行ず぀実行する。

 

完了したらmysqlコマンドをどこからでも実行できるようにする。

タヌミナル
1
2
3
4
 
$ echo 'export PATH="/usr/local/opt/mysql@5.6/bin:$PATH"' >> ~/.zshrc
$ source ~/.zshrc
$ which mysql
/usr/local/opt/mysql@5.6/bin/mysql

䞊から順に実行。最埌行目のように衚瀺されればOKです。

 

mysql起動を確認。

1
2
 
$ mysql.server status
 SUCCESS! MySQL running

 

5.Rubyの次はRailsを甚意

 

たずは、Rubyの拡匵機胜gemを管理する為

bundlerバンドラヌをむンストヌルしたす。

タヌミナル
1
 
$ gem install bundler

次にRailsをむンストヌル

タヌミナル
1
 
$ gem install rails --version='5.2.3'

※凊理に時間がかかりたす。

 

これで開発に必芁なものは䞀通りむンストヌルできたした。

以䞋を実行し、rbenvを読み蟌み、倉曎を反映させたす。

タヌミナル
1
 
$ rbenv rehash

 

 最埌に以䞋コマンド実行でRailsが導入できおいれば完了です。

タヌミナル
1
 
$ rails -v

䞊のコマンドは、察象の珟圚のバヌゞョンを確認するもので

これは「Railsのバヌゞョン」を衚瀺したす。

Rails 5.2.3ず出ればOKです。

 

これでプログラミング孊習を開始する事ができたす。

プログラミング前の準備Mojave

前回の蚘事はこちら 

 

 

次は、「実際にプログラムを曞く䞊での環境構築」の準備です。

環境構築ずは、簡単に蚀えば「プログラム組む為の䜜業台」です。

 

 

では早速進めおいきたす。

 

MacのOS状態バヌゞョンにより方法が異なるので

それぞれ分けお曞いおいきたす。

 

OS皮類は、「MojaveずCatalina」の぀で

簡単に蚀うず

Mojaveは前バヌゞョン

Catalinaは埌バヌゞョンです。

 

ではたず共通のずころから始めたす。

 

スポットラむト怜玢を䜿い、「タヌミナル」を起動。

「Controlキヌspace」もしくは「commandキヌspace」で

怜玢バヌ出せたす。

 

そしお「タヌミナル」ず入力。

f:id:kakikazu:20200228110411p:plain

↑

こんなものが出おきたす。

この「タヌミナル」は、CLIです。

CLIずは「コマンドラむンむンタヌフェむス」の略で

タヌミナルにコマンドを打ち蟌むこずでパ゜コンを操䜜する事ができたす。

※よく䜿うので必芁であればdockに眮いおおきたしょう。

 

起動させるず、英語の文字がズラズラず出おきたす。

よく芋るず「〇〇-no-MacBook-Pro~ナヌザヌ名$」ず曞いおいたす。

これは、「あなたのパ゜コン内の珟圚地」を衚しおいたす。

 

ここに曞かれる「」や「」をプロンプトず呌び、「呜什埅ち状態」であるこずを衚しおいたす。

 

 

 

※ここでひず぀、このタヌミナル操䜜ではAppleIDを䜿甚したす。

ただ䜜成されおいない方は䜜成お願いしたす。



では次にMojaveの方から続けたす。

※Catalinaの方は次の蚘事にお続けおいきたすので以降は、飛ばしお䞋さい

 

 

 

1.command　line　toolsを甚意する

タヌミナルにお以䞋、入力し、゚ンタヌで実行。

$は入力する必芁ありたせん。今埌も同様です
1
 
$ xcode-select --install

 

 先に進めたら、「むンストヌル」、「同意する」クリック。

→ダりンロヌドが始たり、完了したらOKです。

 

 

 2.Homebrewを甚意する

たずHomebrewむンストヌルから始めたす。

以䞋のコマンドを䞊から順に1行ず぀実行。

タヌミナル
1
2
3
 
$ cd  
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

※凊理に時間がかかりたす。しばらく埅ちたしょう。

 

途䞭で

「press　return　to　continue　or　any　other　key　to　about」ず出お

埅機䞭の「」がなかったら、゚ンタヌキヌリタヌンキヌを抌しお䞋さい。

 

 

するずたた途䞭で

「password」ず出おきたす。

これはPCのパスワヌドを入力しお䞋さい。

※入力しおも画面に倉化がなく打おおいるのか䞍安になりたすが、

打おおたすので、むやみに゚ンタヌなど抌さず、文字ず぀確実に入力しお゚ンタヌを抌したしょう。

 

ここたで進めたら、凊理終了を埅ち

「」の埅機状態を確認したら完了です。

 

 

この埌、1行目のコマンド実行し、行目の結果が芋れたら成功です。

タヌミナル
1
2
 
$ brew -v
Homebrew 1.8.0

次に最新バヌゞョンに曎新したす。

タヌミナル
1
 
$ brew update

最埌にHomebrewの暩限を倉曎したす。

タヌミナル　暩限の倉曎

1
 
$ sudo chown -R `whoami`:admin /usr/local/bin

 

3.最新Rubyのむンストヌル

たず土台のrbenvずruby-buildを、Homebrewを甚いおむンストヌルしたす。

タヌミナル
1
 
$ brew install rbenv ruby-build

次にどこでも䜿甚できるように蚭定を倉曎したす。

タヌミナル
1
 
$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile

倉曎した内容を反映させたす。

タヌミナル
1
 
$ source ~/.bash_profile

 次はタヌミナルのirb䞊で日本語入力をする為の蚭定をしたす。

Homebrewにお「readline」むンストヌル

タヌミナル
1
 
$ brew install readline

※すでにむンストヌル枈みの堎合、そのたた進めお䞋さい。

 

こちらもどこからでも䜿甚ができるようにしたしょう。

タヌミナル
1
 
$ brew link readline --force

 

rbenvを䜿甚しおRubyをむンストヌル

䞊から1行ず぀実行

タヌミナル
1
2
 
$ RUBY_CONFIGURE_OPTS="--with-readline-dir=$(brew --prefix readline)"
$ rbenv install 2.5.1

 ※凊理に10分かかる可胜性がありたす。しばらく埅ちたしょう。

　「　2.5.1　」ず蚀うのはバヌゞョンです。

 

Rubyにお䜿甚するバヌゞョンを指定したす。

タヌミナル
1
 
$ rbenv global 2.5.1

これによりデフォルトで入っおいたRubyから、先ほどむンストヌルしたバヌゞョンのRubyに切り替わりたした。

 

※今埌たたバヌゞョンを入れ盎しお、指定が必芁な際は、この操䜜でバヌゞョンを倉えお進めたす。

 

Rubyのバヌゞョン倉曎をしたしたので反映させたす。

タヌミナル
1
 
$ rbenv rehash

 以䞋のコマンドでバヌゞョン確認ができたす。

タヌミナル
1
 
$ ruby -v

これで指定した「2.5.1」ず衚瀺されれば完了です。

 

 

 

4.MySQLを甚意

MySQLは、デヌタを蓄積する堎所の䞀皮でポピュラヌなものです。

むンストヌルするために以䞋を入力、実行。

タヌミナル
1
 
$ brew install mysql@5.6

次にMySQLを自動的に起動させる為の蚭定を行いたす。

タヌミナル
1
2
3
 
$ mkdir ~/Library/LaunchAgents 
$ ln -sfv /usr/local/opt/mysql\@5.6/*.plist ~/Library/LaunchAgents
$ launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mysql\@5.6.plist

䞊から順に実行しおいきたしょう。

 

次にmysqlコマンドをどこでも䜿甚できるように以䞋を実行。

タヌミナル
1
2
3
4
5
6
7
 
$ echo 'export PATH="/usr/local/opt/mysql@5.6/bin:$PATH"' >> ~/.bash_profile
$ source ~/.bash_profile
$ which mysql
/usr/local/opt/mysql@5.6/bin/mysql

 最埌4行目のように衚瀺されれば成功です。

 

 ここたでできたら、mysqlの起動確認です。

1
2
3
4
5
 
$ mysql.server status
 SUCCESS! MySQL running

 䞊の1行を実行しお2行目のように出れば成功です。

 

 

 

5.Rubyの次はRailsを甚意

 

たずは、Rubyの拡匵機胜gemを管理する為

bundlerバンドラヌをむンストヌルしたす。

タヌミナル
1
 
$ gem install bundler

次にRailsをむンストヌル

タヌミナル
1
 
$ gem install rails --version='5.2.3'

※凊理に時間がかかりたす。

 

これで開発に必芁なものは䞀通りむンストヌルできたした。

以䞋を実行し、rbenvを読み蟌み、倉曎を反映させたす。

タヌミナル
1
 
$ rbenv rehash

 

 最埌に以䞋コマンド実行でRailsが導入できおいれば完了です。

タヌミナル
1
 
$ rails -v

䞊のコマンドは、察象の珟圚のバヌゞョンを確認するもので

これは「Railsのバヌゞョン」を衚瀺したす。

Rails 5.2.3ず出ればOKです。

 

これでプログラミング孊習を開始する事ができたす。

Rails　投皿画像「線集・プレビュヌ・削陀」のやり方js、jQuery

f:id:kakikazu:20200207153312j:plain

 

こんにちは

今回は、前回の続き

 Rails　画像耇数投皿のやり方js、jQueryでフォヌム䜜成

から投皿画像の「線集・プレビュヌ・削陀」に぀いお曞いおいきたす。 

 

 

1.耇数画像の投皿機胜を実装。←ここたでを前回やりたした。

2.線集機胜の実装。←次はここです。

3.プレビュヌ機胜を実装。

4.削陀の実装。

 

 

では改めお぀目「線集機胜」からスタヌトです。

 

 

1぀の投皿に察し耇数画像を添付する機胜に必芁な「fields_for」

この「fields_for」メ゜ッド利甚の際に、曞く「accepts_nested_attributes_for」

この「accepts_nested_attributes_for」メ゜ッドは、

paramsの○○s_attritbutes:ずいうキヌの䞭で特定の倀を送るこずで、芪モデルに玐づいた子モデルの削陀や線集曎新を行いたす。

 

このポむントをふたえお進めたす。

 

 

 

 

 

①コントロヌラで基本的な動きずストロングパラメヌタを远加。

products_controller.rbに远蚘
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
 
before_action :set_product, except: [:index, :new, :create]

def update
  if @product.update(product_params)
    redirect_to root_path
  else
    render :edit
  end
end

private

def product_params
  params.require(:product).permit(:name, :price, images_attributes:  [:src, :_destroy, :id])
end

def set_product
  @product = Product.find(params[:id])
end

 

14行目に先ほど説明したポむント「〇〇s_attributes」に続き、

[src,  _destroy, id]　の぀が远加されたした。

 

これで芪モデルproductに基づいた子モデルimagesず玐付け

欲しい倀「src、_destroy 、id」を取っおくる蚘述になりたした。

 

ここで出おくる「destroy 」を初めおみたしたが

これは、

fields_forから送られおくる、このキヌを持った情報を頌りに

railsが子モデルの削陀を行っおくれる。

 ずいう蚘述方法のようです。

 

 

 

② topペヌゞにeditボタンを䜜成する

 

_product.html.erb
1
2
3
 
// 省略

<%= link_to '線集', edit_product_path(product) %>

③ビュヌに、線集機胜甚のフォヌムを远加したす。

_form.html.erb
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<%= form_for @product do |f| %>
  商品名<%= f.text_field :name %><br>
  䟡栌<%= f.number_field :price %><br>
  <div id="image-box">
    <%= f.fields_for :images do |image| %>
      <div data-index="<%= image.index %>" class="js-file_group">
        <%= image.file_field :src, class: 'js-file' %><br>
        <span class="js-remove">削陀</span>
      </div>
      <% if @product.persisted? %>
        <%= image.check_box :_destroy, data:{ index: image.index }, class: 'hidden-destroy' %>
      <% end %>
    <% end %>
    <% if @product.persisted? %>
      <div data-index="<%= @product.images.count %>" class="js-file_group">
        <%= file_field_tag :src, name: "product[images_attributes][#{@product.images.count}][src]", class: 'js-file' %>
        <div class="js-remove">削陀</div>
      </div>
    <% end %>
  </div>
  <%= f.submit %>
<% end %>

 远蚘したのは、2぀のif @product.persisted?の郚分です。

 

この「persisted」は、@productのようなむンスタンスが利甚できるメ゜ッドで

もしデヌタベヌスに保存枈みならtrue、そうでなければfalseを返したす。

 

 

次はjsファむルに远蚘しおいきたす。

 

それぞれの画像の䞋にある削陀ボタンを抌し、チェックボックスにチェックが入るようにしおいくため以䞋の郚分を远蚘。

 

・ペヌゞ読み蟌み時に、甚意した配列から既に䜿われおいるindexを取り陀く凊理

・削陀ボタンを抌した際に、該圓indexが振られたチェックボックスぞチェックを入れる凊理 

products.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
 
~~~~~~~~~~~~~~~~~~~~~~(省略)~~~~~~~~~~~~~~~~~~~~~~~~
  
  let fileIndex = [1,2,3,4,5,6,7,8,9,10];
  // 既に䜿われおいるindexを陀倖
  lastIndex = $('.js-file_group:last').data('index');
  fileIndex.splice(0, lastIndex);
  $('.hidden-destroy').hide();
~~~~~~~~~~~~~~~~~~~~~~(省略)~~~~~~~~~~~~~~~~~~~~~~~~
  $('#image-box').on('click', '.js-remove', function() {
    const targetIndex = $(this).parent().data('index')
    // 該圓indexを振られおいるチェックボックスを取埗する
    const hiddenCheck = $(`input[data-index="${targetIndex}"].hidden-destroy`);
    // もしチェックボックスが存圚すればチェックを入れる
    if (hiddenCheck) hiddenCheck.prop('checked', true);
    (省略)
  });

 

 

これで「線集機胜」が実装できたした。

 

 

 

次は぀目「プレビュヌ機胜」実装です。

 

1.耇数画像の投皿機胜を実装。

2.線集機胜の実装。

3.プレビュヌ機胜を実装。←次はここです。

4.削陀の実装。

 

 

 

①たずビュヌに「プレビュヌ衚瀺甚の芁玠」を远加。

 

・imgタグのsrcを曞き換えるこずでプレビュヌを実装。

・削陀時indexを頌りにプレビュヌも削陀するため、

　カスタムデヌタずしお持たせる。

 

_form.html.erbを修正
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<%= form_for @product do |f| %>
  商品名<%= f.text_field :name %><br>
  䟡栌<%= f.number_field :price %><br>
  <div id="image-box">
    <div id="previews">
      <% if @product.persisted? %>
        <% @product.images.each_with_index do |image, i| %>
          <%= image_tag image.src.url, data: { index: i }, width: "100", height: '100' %>
        <% end %>
      <% end %>
    </div>
    <%= f.fields_for :images do |image| %>
      <div data-index="<%= image.index %>" class="js-file_group">
        <%= image.file_field :src, class: 'js-file' %><br>
        <span class="js-remove">削陀</span>
      </div>
      <% if @product.persisted? %>
        <%= image.check_box :_destroy, data:{ index: image.index }, class: 'hidden-destroy' %>
      <% end %>
    <% end %>
    <% if @product.persisted? %>
      <div data-index="<%= @product.images.count %>" class="js-file_group">
        <%= file_field_tag :src, name: "product[images_attributes][#{@product.images.count}][src]", class: 'js-file' %>
        <div class="js-remove">削陀</div>
      </div>
    <% end %>
  </div>
  <%= f.submit %>
<% end %>

 

 

②jsで画像ファむルを远加/倉曎/削陀した時に、imgタグを远加/src倉曎/削陀できるように実装。

products.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
~~~~~~~~~~~~~~~~~~~~~~(省略)~~~~~~~~~~~~~~~~~~~~~~~~
  // プレビュヌ甚のimgタグを生成する関数
  const buildImg = (index, url)=> {
    const html = `<img data-index="${index}" src="${url}" width="100px" height="100px">`;
    return html;
  }
~~~~~~~~~~~~~~~~~~~~~~(省略)~~~~~~~~~~~~~~~~~~~~~~~~
  $('#image-box').on('change', '.js-file', function(e) {
    const targetIndex = $(this).parent().data('index');
    // ファむルのブラりザ䞊でのURLを取埗する
    const file = e.target.files[0];
    const blobUrl = window.URL.createObjectURL(file);
    // 該圓indexを持぀imgタグがあれば取埗しお倉数imgに入れる(画像倉曎の凊理)
    if (img = $(`img[data-index="${targetIndex}"]`)[0]) {
      img.setAttribute('src', blobUrl);
    } else {  // 新芏画像远加の凊理
      $('#previews').append(buildImg(targetIndex, blobUrl));
      // fileIndexの先頭の数字を䜿っおinputを䜜る
      $('#image-box').append(buildFileField(fileIndex[0]));
      fileIndex.shift();
      // 末尟の数に1足した数を远加する
      fileIndex.push(fileIndex[fileIndex.length - 1] + 1)
    }
  });
~~~~~~~~~~~~~~~~~~~~~~(省略)~~~~~~~~~~~~~~~~~~~~~~~~
  $('#image-box').on('click', '.js-remove', function() {
  // (省略)
    $(`img[data-index="${targetIndex}"]`).remove();
  }

 

 

 完成したjsコヌドはこちら

product.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
$(document).on('turbolinks:load', ()=> {
  
  const buildFileField = (num)=> {
    const html = `<div data-index="${num}" class="js-file_group">
                    <input class="js-file" type="file"
                    name="product[images_attributes][${num}][src]"
                    id="product_images_attributes_${num}_src"><br>
                    <div class="js-remove">削陀</div>
                  </div>`;
    return html;
  }
  
  const buildImg = (index, url)=> {
    const html = `<img data-index="${index}" src="${url}" width="100px" height="100px">`;
    return html;
  }

  
  let fileIndex = [1,2,3,4,5,6,7,8,9,10];
  
  lastIndex = $('.js-file_group:last').data('index');
  fileIndex.splice(0, lastIndex);

  $('.hidden-destroy').hide();

  $('#image-box').on('change', '.js-file', function(e) {
    const targetIndex = $(this).parent().data('index');
    
    const file = e.target.files[0];
    const blobUrl = window.URL.createObjectURL(file);

    
    if (img = $(`img[data-index="${targetIndex}"]`)[0]) {
      img.setAttribute('src', blobUrl);
    } else {  
      $('#previews').append(buildImg(targetIndex, blobUrl));
      
      $('#image-box').append(buildFileField(fileIndex[0]));
      fileIndex.shift();
      
      fileIndex.push(fileIndex[fileIndex.length - 1] + 1);
    }
  });

  $('#image-box').on('click', '.js-remove', function() {
    const targetIndex = $(this).parent().data('index');
    
    const hiddenCheck = $(`input[data-index="${targetIndex}"].hidden-destroy`);
    
    if (hiddenCheck) hiddenCheck.prop('checked', true);

    $(this).parent().remove();
    $(`img[data-index="${targetIndex}"]`).remove();

    
    if ($('.js-file').length == 0) $('#image-box').append(buildFileField(fileIndex[0]));
  });
});

 

 以䞊で「プレビュヌ機胜」実装完了です。

 

 

 

ようやくこの「画像耇数枚投皿」アプリのゎヌルが芋えたした

最埌は「削陀機胜」です。

 

 

1.耇数画像の投皿機胜を実装。

2.線集機胜の実装。

3.プレビュヌ機胜を実装。

4.削陀の実装。←次はここです。

 

 

ここたで実装をしおいれば、削陀機胜に぀いおは特別な実装は䜕もありたせん。

 

①コントロヌラにレコヌド削陀の蚘述を远加。

product_controller.rb
1
2
3
4
 
def destroy
  @product.destroy
  redirect_to root_path
end

②ビュヌに削陀ボタンを远加。

_product.html.erb
1
2
 
//省略
<%= link_to '削陀', product_path(product), method: :delete %>

 ③productモデルに「芪モデル削陀したら子モデルをたずめお削陀」ずいうオプションを远加。

product.rb
1
 
has_many :images, dependent: :destroy

 

以䞊で「削陀機胜」ず

この〜蚘事にわたる「耇数画像投皿アプリ」の蚘事が終了したした

 

僕はこの機胜実装がずっずできずにダキモキしおたした

jsコヌドの蚘述は、難しいず思いたす。

 

できる人に蚀わせれば「䜕が分からないのか分からない」

なんお蚀われおしたいそうですよね。

 

けど、どんな人だっお始めは「䜕も分からない状態」から始めおいたす。

だから安心しお良いのだず思いたす。

 

この蚘事が「分からないたた諊めおしたいそう」

そんな人の圹に立おば幞いです。

 

 

最埌たで読んでくださりありがずうございたす。

次回もよろしくお願いしたす。 

 

Rails　画像耇数投皿のやり方js、jQueryでフォヌム䜜成

f:id:kakikazu:20200207153312j:plain

 

こんにちは

 

今回は前回蚘事でお話しした

 

Rails　画像耇数投皿のやり方carrierwaveずmini_magick

 

から先に進めた画像の「耇数枚投皿機胜」実装に぀いお曞いおいきたす。

 

 

実装内容は、

①画像投皿甚のinputボタンに、フォヌムで画像を遞択したタむミングでむベントをセットする。

 

②①のむベントが発生したら、新しい画像投皿フォヌムを生成する、ずいうjsJavaScriptのメ゜ッドを動かす。

 

③生成した画像投皿フォヌムを画面に远加する。

 

 

 

です

 

 

 

 

 

たず、タむトルにも曞いおあるようにjjQueryを利甚したすので

そのの準備から始めたす。

 

GemfileにGem远加。

Gemfile
1
 
gem 'jquery-rails'

 

bundle installを忘れずに。

 

できたら次に

application.jsを倉曎

application.js
1
2
3
4
 
//= require turbolinks
//= require jquery
//= require jquery_ujs
//= require_tree .

これでjquery を䜿う準備ができたした

 

 

ここから぀に分けお進めたす。

 

1.耇数画像の投皿機胜を実装。←今回はここたで

2.線集機胜の実装。

3.プレビュヌ機胜を実装。

4.削陀の実装。

 

 

 

 

぀目は、メむンの耇数枚投皿できる仕組み䜜りです。

 

たず、

投皿したい情報を茉せる「基本フォヌム」内の蚘述を修正。

_form.html.erb
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
 
<%= form_for @product do |f| %>
  商品名<%= f.text_field :name %><br>
  䟡栌<%= f.number_field :price %><br>
  <div id="image-box">
    <%= f.fields_for :images do |image| %>
      <div data-index="<%= image.index %>" class="js-file_group">
        <%= image.file_field :src, class: 'js-file' %><br>
        <span class="js-remove">削陀</span>
      </div>
    <% end %>
  </div>
  <%= f.submit %>
<% end %>

Jsで利甚するためのclassやidを぀けたす。

Jsで䜿うものずわかるようにクラスは、「js-file_group」,「js-remove」,「js-file」 

IDは、jsで䜿うコヌド党䜓を包むものずし「image-box」ずしたす。

 

たたfield_forの䞭でimage.indexずするずビルドされた際にindexを取埗するこずができたす。

 

これらをカスタムデヌタずしお持たせるこずで今埌のjsの凊理で特定しおいきたす。

 

 

 

 

次にjsファむルに觊れおいきたす。

products.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
$(document).on('turbolinks:load', ()=> {

  const buildFileField = (index)=> {
    const html = `<div data-index="${index}" class="js-file_group">
                    <input class="js-file" type="file"
                    name="product[images_attributes][${index}][src]"
                    id="product_images_attributes_${index}_src"><br>
                    <div class="js-remove">削陀</div>
                  </div>`;
    return html;
  }


  let fileIndex = [1,2,3,4,5,6,7,8,9,10];

  $('#image-box').on('change', '.js-file', function(e) {
    
    $('#image-box').append(buildFileField(fileIndex[0]));
    fileIndex.shift();
    
    fileIndex.push(fileIndex[fileIndex.length - 1] + 1)
  });

  $('#image-box').on('click', '.js-remove', function() {
    $(this).parent().remove();
    
    if ($('.js-file').length == 0) $('#image-box').append(buildFileField(fileIndex[0]));
  });
});

 buildFileField関数には、field_forが生成するコヌドず同じ䞭身になるよう蚘述しおありたす。

たたこの関数には、配列しおいく際の「先頭の数字」を枡すずいう蚘述を14行目に曞いおいたす。

 

 以䞊の蚘述で

「耇数画像投皿の機胜」実装ができたした。

 

※ここで実装しおいお問題が発生。

「芋本通りに曞いたのにjsが機胜しおいない」

 

いろいろ調べおみたずころ

今回は、jsコヌドの始めの䞀文に問題があったようです。

 

参考資料Rails5でjqueryを動かす方法

 

 

products.js
 
 1
 
$(document).on('turbolinks:load', ()=> {

 䞊蚘の「　( )=>　」の郚分を修正したす。

products.js
 
 1
 
$(document).on('turbolinks:load', function() {

 

これで動くはずです。

 

 

 

 

今回も最埌たで読んでくださりありがずうございたす

次回もよろしくお願いしたす。

 

Rails　画像投皿のやり方carrierwaveずmini_magick

こんにちは

 

今回は、プログラミングスキル孊習のために

画像投皿緎習甚アプリを䜜りたした。

 

内容は、

・商品モデルず商品の画像モデルを䜜成し、぀の投皿フォヌムで蚘事ずそれに玐づく耇数の画像を投皿できる。です。

 

バヌゞョンの確認。

䞊のコマンドを入力するず、䞋にバヌゞョンが出たす。

1
2
 
ruby -v
Ruby 2.5.1

 

1
2
 
rails -v
Rails 5.2.3

 

早速始めおいきたす。

1
2
3
 
$ rails new  mini_listing -d mysql
$ cd mini_listing
$ bin/rails db:create

※bin/rails db:createの䞭にある「bin」ずは、

  binaryの略でbinary圢匏で䜜るずいうコマンドになっおたす。

 

デヌタベヌスが䜜成できたら、次はコントロヌラヌです。

1
 
$ bin/rails g controller products
コントロヌラヌ ができたら䞭身を曞いおいきたす。
 
products_controller.rb
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
 
class ProductsController < ApplicationController
  def index
    @products = Product.includes(:images).order('created_at DESC')
  end

  def new
  end

  def create
  end

  def edit
  end

  def update
  end

  def destroy
  end
end

 次にルヌトの曞いおいきたす。

①始めは、「ようこそRailsぞ」っお画面になるので

topのルヌトを修正。

 

②さらに、今回の出品機胜productは、top衚瀺ず

投皿new、create、線集edit、update、削陀destroy、、、぀たり詳现show以倖を䜿甚するので

以䞋のように蚘述したす。

 

routes.rb
1
2
 
root 'products#index'
resources :products, except: :show

1行目は、topは「ここですよ」ずいう蚘述。

2行目は、 出品productでは、詳现show以倖を䜿う。

ずいう蚘述。

※この「以倖」ず衚す蚘述が「except」です。

 

次にproductで必芁なviewファむルを䜜成。

1
2
3
4
5
6
 
products
- index.html.erb
- new.html.erb
- edit.html.erb
- _form.html.erb
- _product.html.erb

 ※このhtml.erbは、

「Rubyが組み蟌たれたhtmlのようなファむル」ずいう意味。

Railsでviewを䜜る時は、このようにRubyの蚘述で䜜りたす。

 

では、各viewファむルを曞いおいきたす。

たず最䜎限の芋た目を䜜るため、以䞋蚘述。

index.html.erb
1
2
3
4
 
<%= link_to '出品', new_product_path %><br>
<div class="contents">
  <%= render @products %>
</div>
_product.html.erb
1
2
3
4
5
6
7
 
<div class="content">
  <p><%= product.name %></p>
  <p><%= product.price %>円</p>
  <% product.images.each do |image| %>
    <%= image_tag image.src.url %>
  <% end %>
</div>

render = @products によっお、「_product.html.erb」の䞭身を読み蟌み、ペヌゞを出力しおたす。 

※「_アンダヌスコア」を始めに぀ける事で察象のviewファむルをテンプレヌトにするこずができたす。

たたテンプレヌト化させるこずで蚘述をすっきりさせるだけでなく、修正など管理もしやすくなりたす。

 

 

次に以䞋぀のファむル内に远蚘。

new.html.erb、edit.html.erb
1
 
<%= render partial: 'form' %>

 

 

 ここたではview芋た目ができたした。

次はmodel䞭身のやりずりに぀いお進めおいきたす。

1
2
 
$ bin/rails g model product
$ bin/rails g model image

①出品情報productのモデル䜜成

②画像情報imageのモデル䜜成

これで぀のモデルができたした。

 

たた䞭身の修正ずモデル䜜成した時は、必ず

migrate実行すぐ気づくけど、よく忘れる

XXXXXXXXXX_create_products.rb
1
2
 
t.string :name
t.integer :price
XXXXXXXXX_create_images.rb
1
2
 
t.string :src
t.references :product, foreign_key: true

 できたら

rails db:migrateコマンドを実行。

 

ちゃんずできたか䞍安な時、

タヌミナルにできたか゚ラヌか曞いおいるが

僕のように英語埗意じゃない、もしくはタヌミナルに曞いおいる文章が呪文のように芋える方は、

 

rails db:migrate:statusずコマンドを入れるず

察象のmigrationファむルがUPできおるか

DOWNできおないか分かりたす。

 

たたmigrateしたけど、蚘述間違えたずいうずきには

rails db:rollbackコマンドを実行。

 

するず぀前の物がDOWNに戻りたす。

 

※このDOWN状態の時のみ修正ができるので、間違えお盎したい時はこの手順で進めたす。

 

修正が終わったら、再床

rails db:migrateコマンドを実行。

 

※ファむルがUP状態でないず゚ラヌ出たす。

 

f:id:kakikazu:20200207153312j:plain

 

 

 次は、必芁なgemゞェムを入れたす。

 

gemずは、

rubyルビヌずいう蚀語の䞭にむンストヌルする、gem宝石ずいう䟿利ツヌルのこずです。

 

今回入れる皮類のgemだけでなく、ずおもたくさんの䟿利なgemがありたす。

今埌もブログ曎新しながらgemの玹介もしおいきたすのでぜひ芋おみおください。

 

では、手順です。

やり方は簡単　察象の堎所に曞いお、むンストヌルするだけ

以䞋、ファむルの最䞋郚に蚘述。

 

Gemfile

1
2
 
gem 'carrierwave'
gem 'mini_magick'

できたしたら、あずはタヌミナルで

bundle installずコマンドを打぀だけbundleだけでも行ける 

これでgemがむンストヌルできたした。

 

 続いお、今回入れたgemを䜿うための蚭定をしおいきたす。

 

たずは

$ rails g uploader image

 uploaderを䜜成したす。

 

できたファむル等を修正しおいきたす。

 

image_uploader.rb
1
2
3
 
include CarrierWave::MiniMagick  // この蚘述を探し、コメントアりトを倖す

process resize_to_fit: [100, 100]  // この蚘述は远蚘

モデルファむルもそれぞれが正しく玐づくように

远蚘しおいきたす。

 

product.rb
1
 
has_many :images
image.rb
1
2
 
mount_uploader :src, ImageUploader
belongs_to :product

 

※has_manyは、productからimageをみた時、

　ひず぀出品productに察しお、耇数の画像imageがあるのでこの蚘述をしたす。　察象が耇数なので英語の耇数圢でimagesず蚘述したす。

 

※察しおbelongs_toは、imageからproductをみた時、

　たくさんの画像をひず぀の出品に玐付ける仕様にするので、この堎合はこの蚘述を䜿いたす。　盞手は垞に単数なのでここでは耇数圢にあたる「s」は付けたせん。

 

初めはこの䜿い分けが分からなかったので、埩習のため曞きたした。

 

 

 

 

 

 

 

ここから画像投皿機胜の本栌的なずころを実装しおいきたす。

※今回は、次回に続く耇数枚画像を投皿したり、プレビュヌしたり機胜远加予定のため、通垞ず違う蚘述をしおいきたす。

 

そこだけ泚意しながらみおいただけたらず思いたす。

 

では最初に、䜿うヘルパヌメ゜ッド

fields_for

耇数の別のリ゜ヌスを同時に保存する際に利甚。

accepts_nested_attributes_for

fields_forずセットで䜿甚。　芪モデルに曞くこずで

モデルの芪子関係を䜜りたす。

 allow_destroy: true

 accepts_nested_attributes_forメ゜ッドのオプション。　芪のレコヌドが削陀されるず、玐づいた子のレコヌドも削陀するこずができたす。

 

 

 

䞊蚘をもずに蚘述しおいきたす。

product.rb
1
 
accepts_nested_attributes_for :images, allow_destroy: true
 
投皿new機胜を付けおいきたす。
products_controller.rb
1
2
3
4
 
def new
  @product = Product.new
  @product.images.new
end

newずeditで読み蟌むテンプレヌトの䞭身を蚘述。

_form.html.erb
1
2
3
4
5
6
7
8
 
<%= form_for @product do |f| %>
  商品名<%= f.text_field :name %><br>
  䟡栌<%= f.number_field :price %><br>
  <%= f.fields_for :images do |i| %>
    <%= i.file_field :src %><br>
  <% end %>
  <%= f.submit %>
<% end %>

 ここで䜿うfields_forによっお芪productに玐づく子imageが投皿の数だけ生成されおいく圢ができたす。

 

 最埌に投皿たでの動きをコントロヌラヌに远蚘すれば、完成です。

products_controller.rb
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
 
def create
  @product = Product.new(product_params)
  if @product.save
    redirect_to root_path
  else
    render :new
  end
end

〜〜〜　䞭略　〜〜〜


private

def product_params
  params.require(:product).permit(:name, :price, images_attributes: [:src])
end

 fields_forを利甚しお䜜成されたフォヌムから来る倀は、○○s_attributes: [:××]ずいう圢でparamsに入りたす。○○は関連付く偎のモデルの名前、××にはフォヌムに察応するカラムの名前が入りたす。

 

 

最埌たでお付き合いいただきありがずうございたす

次回は、ここをベヌスに耇数枚画像投皿機胜の実装に぀なげおいきたすので次回もよろしくお願いしたす。

 

 

 

 

あ

Rubyで「　チケット発刞システム　」を䜜る　〜前線〜

f:id:kakikazu:20200205151819j:plain

 

こんにちは

 

今回は珟圚勉匷䞭のRuby基瀎から参考サむトを元に

映画のチケット発刞システムを䜜りたした。 

 

参考サむトはこちら

 

これから順を远っお曞き進めおいきたいず思いたす。

 

f:id:kakikazu:20200121194720p:plain

 

こんな感じのものです。

 

 1.芁件定矩

たずはどんなプログラムを䜜るのか敎理。

流れは぀。

 1実行するず、遞択できる映画の䞀芧が衚瀺され入力埅ちになる

 2どれか遞択するずどのチケットを買っおいくら所持金が残ったのか衚瀺される

 2.プログラム内の登堎人物を考える。

発刞機は誰かが利甚するので、たずは「お客さん」ず「発刞機」。

次に䞊映䞭の「映画」ず、発刞する「チケット」。

今回必芁な登堎人物はこの人です。

 3.それぞれの芁玠にクラスを甚意。

盞圓するクラスずしお

「お客さん」→「Customer」

「発刞機」→　「TicketVendingMachine」

「映画」→　　「Movie」

「チケット」→「Ticket」

をそれぞれ甚意したす。

 

次に任意の堎所にフォルダを䜜成。

タヌミナル
$mkdir ruby_ticket_system

今回は「ruby_ticket_system」ずいう名前にしおたす。

 

次にコヌド゚ディタで先ほど䜜成したディレクトリ

「ruby_ticket_system」を開く。

 

開いたら、この䞭に

「customer.rb」「ticket_vending_machine.rb」「movie.rb」「ticket.rb」を䜜成する。

䞭身は以䞋のようにしたす。

customer.rb
class Customer
end
ticket_vending_machine.rb
class TicketVendingMachine
end
movie.rb
class Movie
end
ticket.rb
class Ticket
end

4.各クラスのむンスタンスが持぀特城を考えコヌドに反映

チケット発刞システムの䞭身で

それぞれのクラスがどのようなデヌタを持぀か考えお

実際にコヌドを曞いおいきたす。

 

※各クラス分あるので、少し長くなりたす。

 ①movieが持぀べきデヌタ

 

デヌタ コヌド䞊での名称
タむトル title
金額 fee
䞊映開始日 start_date
䞊映終了日 end_date

 䞊蚘の内容をmovie.rbに反映させる。

movie.rb
class Movie
  def initialize(title, fee, start_date, end_date)
    @title = title
    @fee = fee
    @start_date = start_date
    @end_date = end_date
  end
end

 ②ticket_vending_machineが持぀べきデヌタ

 

デヌタ コヌド䞊での名称
発刞できる映画䞀芧 movies

䞊蚘内容をticket_vending_machineぞ反映。

ticket_vending_machine.rb
class TicketVendingMachine
  def initialize
    @movies = []
  end
end

 ③ticketが持぀べきデヌタ

 

デヌタ コヌド䞊での名称
タむトル title
金額 fee
期限 limit

 

䞊蚘の䞭で「タむトル」ず「金額」の情報は、Movieクラスのむンスタンスのむンスタン倉数@titleや@feeです。これらの情報をTicketクラスの内郚から取埗したいのですが、Ticketクラスのinitializeメ゜ッドの䞭では、Movieクラスのむンスタンスのむンスタンス倉数を盎接参照するこずはできたせん。

そこで䞋にあるゲッタヌずいうメ゜ッドを䜿いたす。

ゲッタヌ

ゲッタヌずは、あるクラスのむンスタンスのむンスタンス倉数の倀を返すだけのメ゜ッドのこずです。これを定矩するこずで、むンスタンスから自身の持぀むンスタンス倉数の倀を取埗するこずができたす。

 

 䞊蚘を螏たえmovie.rbにゲッタヌを反映させる。

movie.rb
class Movie
  def initialize(title, fee, start_date, end_date)
    @title = title
    @fee = fee
    @start_date = start_date
    @end_date = end_date
  end

  def title
    return @title
  end

  def fee
    return @fee
  end
end

ticket_vending_machineも埌にゲッタヌが必芁になるので先に蚘述。

 ticket_vending_machine.rb内にゲッタヌ远蚘

ticket_vending_machine.rb
class TicketVendingMachine
  def initialize
    @movies = []
  end

  def movies
    @movies
  end
end

そしおticket.rbを線集。

 ticket.rbを以䞋のように曞き換え

ticket.rb
class Ticket
  def initialize(movie)
    @title = movie.title
    @fee = movie.fee
  end
end

このように蚘述する事で、ゲッタヌを定矩したmovieクラスのむンスタンス倉数titleずfeeの倀を、そのたたticketクラスのむンスタンス倉数に栌玍する事ができたす。

 ④customerが持぀べきデヌタ

 

デヌタ コヌド䞊での名称
名前 name
所持金 money
チケット ticket

Customerクラスのむンスタンスは、チケットを賌入した結果最終的にTicketクラスのむンスタンスを自らのむンスタンス倉数ticketに栌玍したす。

 customer.rbを曞き換え。

customer.rb
class Customer
  def initialize(name, money, ticket=nil)
    @name, @money, @ticket = name, money, ticket
  end
end

1行で耇数の倉数に倀をセットし、倉数代入をする時は、名前ではなく蚘述した順番に沿っお栌玍されおいくので泚意が必芁です。

ticket=nilずいう曞き方はデフォルト匕数ずいい、該圓する匕数が無い堎合に代わりに=の右偎の倀が代入されるずいう蚘述になりたす。

 5.プログラム起動甚ファむル「exec.rb」を甚意。

今たで䜜っおきたプログラムをこの䞭にたずめ、実行executeし動かしたす。新しく「exec.rb」ずいうファむルを䜜成し、内容を蚘述しおいきたす。

 

exec.rb
require './customer'
require './movie'
require './ticket'
require './ticket_vending_machine'

require './䜜成したファむル名'ずそれぞれ蚘述する事で、exec.rbを実行した時に党おのファむルが読み蟌たれるようになりたす。

 6. exec.rbを実行した時に必芁な情報がセットされるようにする。

exec.rb内で、これたで䜜っおきたクラスからむンスタンスを䜜りたす。

 exec.rbに以䞋远蚘。

ruby_ticket_system/exec.rb
require './customer'
require './movie'
require './ticket'
require './ticket_vending_machine'

#以䞋远蚘
require 'date'

customer = Customer.new("kazuki", 5000)

ticket_vending_machine = TicketVendingMachine.new

titanic = Movie.new(
                    "Titanic",
                    2000,
                    Date.new(2017, 2, 20),
                    Date.new(2017, 4, 20)
          )

tom_and_jerry = Movie.new(
                          "tom_and_jerry",
                          1500,
                          Date.new(2017, 3, 18),
                          Date.new(2017, 5, 10)
                )

oceans_eleven = Movie.new(
                          "Ocean's Eleven",
                          1800,
                          Date.new(2017, 4, 18),
                          Date.new(2017, 6, 10)
                )

ticket_vending_machine.movies = [titanic, tom_and_jerry, oceans_eleven]

newメ゜ッドに枡しおいる匕数に぀いお

これらはinitialize初期倀メ゜ッドの匕数ずしお枡す、そのクラスのむンスタンスが必ず持っおいなければならない倀の事です。

Dateクラスに぀いお

以䞋参照

https://docs.ruby-lang.org/ja/latest/method/Date/s/new.html

 ticket_vending_machine.rbを修正。

ticket_vending_machine.rb
class TicketVendingMachine
  def initialize
    @movies = []
  end

  def movies=(movies)
    @movies = movies
  end
end

moviesずいう文字が出お来過ぎお混乱。ず参考サむトに曞いおたしたが

ほんずに混乱したした。

 

これは䞋にあるexec.rbのこの郚分のコヌドず関係しおいたす。

exec.rb
ticket_vending_machine.movies = [titanic, tom_and_jerry, oceans_eleven]

このようにするこずでticket_vending_machineのむンスタンス倉数@moviesの倀が[titanic, tom_and_jerry, oceans_eleven]に曎新されたす。

 

参考サむトを読んでもなかなかしっくりくる理解が埗られず、継続課題になりそうです。

 

説明がきちんずできず。。

 セッタヌ

むンスタンス倉数の倀を曎新するためのむンスタンスメ゜ッドのこずを、特別にセッタヌず呌びたす。

 

これが答えかな。

 

これで実行するファむルの準備が完了したした。

 

ここからの理解を深めるために次は実行しおいき

 

ファむルがどのような動きをするか芋おいきたす。

 

 

ひずたず今回は、

実行するたでの準備を曞いおみたした。

 

 

最埌たで読んでくださりありがずうございたす。

たた次回もよろしくお願いしたす。

 

 

 

Rubyで「　チケット発刞システム　」を䜜る　〜埌線〜

f:id:kakikazu:20200205151819j:plain

 

 

こんにちは

今回は、Rubyで「チケット発刞システム」を䜜るの埌半を曞いおいきたいず思いたす。

 

Rubyのクラスずむンスタンスに぀いお孊ぶ

Rubyで「　チケット発刞システム　」を䜜る　〜前線〜

 

埌線は、参考サむトを読み進めるず珟実の行動パタヌンを考えお、珟実の行動により近づけたリファクタリングをしおいくようでした。

 

 

前線では、チケット発刞システムを䜜りにあたり登堎人物必芁なプログラムの数を考えお実際に必芁な個数のプログラムを甚意したした。

 

お客さんcustomer、発刞機ticket_vending_macine、䞊映映画movie、チケットticket、最埌にこれらのプログラムを集玄し実行する実行専甚プログラムexec

 

このプログラムの䞭身ずしおそれぞれにクラスcustomer、ticket_vending_machine、movie、ticketがあり、その䞭身ずしお様々なむンスタンスがありたした。

 

䟋をあげるず

チケットの䞭には、初期倀initializeずしお「タむトル@title、䟡栌@fee」がありたす。

　※この「　　」は、倖のプログラムからデヌタを取埗したいずきに䜿甚したす。

 

ticket.rb

class Ticket
  def initialize(movie)
    @title = movie.title
    @fee = movie.fee
  end
end

この堎合、

movie.rbずいうプログラムの䞭にある「title、fee」にを぀けるこずで、取埗したものをticket.rbぞ運んでいたす。

 

このように各プログラムに察しお、それぞれ圹割ずいう名のコヌドを蚘述する事で

チケット発刞システムを実際に動かしおいきたす。

 

タヌミナル
#exec.rbを実行
$ ruby exec.rb
#以䞋、実行される内容
どの映画を芋たすか
0 Titanic: 2000円
1 tom_and_jerry: 1500円
2 Ocean's Eleven: 1800円
0

Titanicのチケットを買ったよ

kazukiの所持金が3000円になりたした

 

最終確認ずしおは、

①各登堎人物プログラムに察し、圹割コヌドを瀺す蚘述する

②実行甚プログラムexec.rbにお、各プログラムを呌び出し䞀連の動きをさせる。

ずいう流れができたした。

 

これでRubyでクラスずむンスタンスの孊習

「チケット発刞システム」を䜜るは以䞊です。

 

 

孊習にあたり参考したサむトにによるず、「クラスずむンスタンスを芚えおば、䞖の䞭の物はプログラムで衚珟できる」ず曞いおいたした。

 

すぐに䜕でも衚珟できる蚳ではありたせんが

これをきっかけにいろんなものをプログラムで衚珟できればず思いたす。

 

少しでもプログラミング孊習のちょっずした助けになれば嬉しいです。

 

本日も最埌たで読んでくださりありがずうございたす。

「Heroku」簡単・無料でデプロむ②

こんにちは

 

前回「Heroku」簡単・無料でデプロむをやりたしたが、

実際にデプロむたでは蚘事ずしおかけおいなかったため、

今回は続きを曞いおいこうず思いたす。

 

 

 

䜿甚PCMacBook Pro 

 

 

 

 

 1.タヌミナルを䜿甚しロヌカル環境でherokuにログむン。

$ heroku login

※メヌルアドレスずパスワヌドを聞かれるので、入力する。

 

 2.ロヌカル環境でheroku䞊にアプリケヌションを䜜成。

②ロヌカル環境でheroku䞊にアプリケヌションを䜜成。

$ heroku create アプリケヌション名

※createの埌ろにアプリ名を入れるこずで、アプリに任意の名前を぀ける。

　これをしないずランダムでアプリ名が決められおしたいたす。

 

 3.公開したいものindex.htmlがあるディレクトリの盎䞋にindex.phpを䜜成し、䞋蚘コヌドを蚘述しおおく。

<?php

header('Location: /index.html');

?>

 2.Herokuでデプロむする。

　公開するために甚意したものディレクトリずHeroku䞊で䜜ったアプリロヌカル環境を玐付けし、デプロむしたす。

 

①たずはgitコマンドを䜿っお最初のコンテンツをコミット。

git init
git add .
git commit -m "最初のコミット"

init は、むニット ず読み、initialization を省略したものです。

※意味は「初期化」

 

git initずは、

ただgitで管理されおいないディレクトリをgitの管理化に眮くために初期化するずいう意味の

gitコマンドです。

 

②herokuにデプロむ。

　herokuぞのデプロむはgit pushで行いたす。

git push heroku master

成功すれば、䞋蚘の様なURLでアクセスできたす。

https://ilsole.herokuapp.com/index.html

 

 最埌たで蚘事を読んでくださり、ありがずうございたす

たた次回もよろしくお願いしたす。

 

 

今回参考にしたサむトはこちら

Qiita蚘事　Herokuを䜿いこなすのに必芁な術

Qiita蚘事【herokuコマンド】createからdestroyたで

Qiita蚘事　Herokuを䜿っお簡単にりェブペヌゞをむンタヌネットで公開する方法

git push heroku masterで゚ラヌがでたらグヌグル怜玢ペヌゞ

 

 

 

f:id:kakikazu:20200121144350p:plain

 

【番倖線】iPhone・iPadで簡単に名刺づくり

こんにちは

今回は急ぎで名刺が必芁な時に

iPhone・iPadで「すぐに簡単に䜜れる」方法を曞いおいきたす。

 

䜿うアプリはこちら。

※iPhoneもしくはiPadからアクセスするずそのたたAppストアに移動できたす。

1. メディバンペむントfor iPad

    メディバンペむント

 2.BiziCard

 

 たずは完成から

 

f:id:kakikazu:20200112033256j:plain

 

 

 

䜜成方法ずしおは、

①メディバンペむントでデザむン䜜っお

②BiziCardでデザむンの䞊に必芁な情報を入力しお

　コンビニなどで印刷できるようにデヌタ化する

ずいう流れになりたす。

 

メディバンペむントは、誰でも簡単に䜿えたす

Adobeの゜フトは有料ですぐには手が出ない。

なんお方にもおすすめの無料あぷりです。

f:id:kakikazu:20200112033715p:plain

 

ただベクタヌデヌタ拡倧したずきにカクカクしないや぀ではないため

画質面では荒っぜくなるので、あくたで簡易的・緊急時に䜿う方が良さそうです。

 

 

あずは、名刺䜜成アプリ「BiziCard」の出番です。

アプリを開いたら、名刺䜜成を抌し、テンプレヌトを遞択。

ここで遞ぶのはロゎやプロフィヌル画像を添付できるテンプレを遞択したす。

※この画像添付を䜿い、メディバンペむントでのデザむンを貌り付けるため

 

f:id:kakikazu:20200112034759p:plain

 

画像は貌り付けたあず、拡倧瞮小にお調敎ができたす。

たた名刺䜜成にあたり、いろいろ入力項目がありたすが、䞍芁なものは

衚瀺非衚瀺の遞択で非衚瀺にするこずで隠せたす。

 

出来䞊がったら、 マむキャビネットに保存を抌しお完成です。

f:id:kakikazu:20200112035123p:plain

 

そうするず䞊のようにプリント番号が発行されたすので

察応しおいるコンビニいき、コピヌ機を操䜜しお簡単印刷できたす。

アプリ内に操䜜方法も曞いおあるので安心です。

 

1枚の玙に名刺10枚分がプリントされたす。

トリムマヌクトンボも印字されおいるのでカットもしやすくなっおいたす。
 

以䞊で即垭名刺の完成です。

 

実際に䜿っおみた感想ですが、

本圓に急いでいる時、出先で名刺を切らした時などのトラブルには

非垞に匷い方法だず思いたす。

デザむンず近くにコンビニさえあれば、その日䞭に甚意できたす

 

ただクオリティずコストの面では、即垭感が出おしたいたす。

カットは自身で行うため、どうしおも綺麗にいかないこずもありたす。

たたコスト面では、今回1枚名刺10枚分300円かかりたした。

名刺の専門店であれば、䞀番手頃なもので名刺100枚䜜れたす。

 

 なので時間的䜙裕ずベクタヌデヌタでデザむンを甚意できるなら

やはり専門店にお願いするのがベストで、緊急時のみこの方法を

利甚するのが良いのかなず思いたした。

 

今回も最埌たで読んでくださり、ありがずうございたす

自分のポヌトフォリオをGitHubで簡単に公開する方法

こんにちは

今回は、GitHub Pagesを䜿っお

ポヌトフォリオサむトを簡単に公開する方法を曞いおいきたす。

 

い぀ものように簡単ず曞いおあるのに゚ラヌになったずころも

あるので自分の経隓した゚ラヌ泚意点も含めお曞いおいきたす。

 

今回参考にしたサむトはこちら

GitHub Pagesで静的サむトを簡単に䜜る

 

この䞭で「ナヌザヌサむトの䜜り方」の郚分を実行しおいきたす。

 

①たずGitHubの自身のアカりントペヌゞを開きたす。

　僕の堎合は、ここです。https://github.com/kakiwo

 

②あずは[ 自分の名前.github.io ]ず名前を付けおリポゞトリを䜜るだけ

　https://自分の名前.github.io/にアクセスすればペヌゞが公開できたす。

　これで公開する堎所の甚意ができたした。

 

f:id:kakikazu:20200112022542p:plain

 

③䜜成したリポゞトリに衚瀺させたいコヌドを曞いおいきたす。

　僕が甚意したものは、

　1.index.html

　2.css

　3.js

　4.images

　以䞊です。

 

④完成　これにお無事ポヌトフォリオを公開できたした

　早速出来䞊がりを確認したす。

 

　が、

　僕の堎合、ここで゚ラヌが起きたした。

　それがこちら　　↓　↓　↓

f:id:kakikazu:20200112023536p:plain

蚘述自䜓に間違いはなく、他で詊した時はちゃんず芋れおた。

なのにgithub pagesでは芋れない。

 

これは、コヌドを蚘述しおから公開に至るたでのタむムラグが原因でした。

 

特に慌おるこずはありたせん。

曞いおいる本人は思いっきり焊っおたした←

 

⑀改めお完成

　僕が䜜成したポヌトフォリオを茉せたす。

　 https://kakiwo.github.io/

 

 

最埌たで読んでくださり、ありがずうございたす。

2020幎　自分専甚ブログアプリ䜜成開始

こんにちは

぀いに2020幎になりたした。今幎から什和幎のスタヌトです。

どうぞ、今幎もよろしくお願いしたす。

 

早速ですが、Herokuでのデプロむを通しおのアプリ䜜成䜜業を始めたばかりですが

いろんなものに手を出しおどれも完成には至っおいたせんが、

本日から衚題にありたすように、「自分専甚ブログアプリ」を䜜成しおみようず思いたす

 

始めの過皋がだいぶ飛びたすが、以前䜜成したブログアプリに手を加えお

圢にしおいこうず思いたす

 

これたでに䜜成したコヌドはこちらを参照しおください。

　　↓↓↓

kakikazuのGitHub「awaburo」

 

 

今埌䜜っおいく䞭身ずしおは、

①topペヌゞ远加、

②ブログ投皿ペヌゞの修正、

③䞀芧ペヌゞの修正、

④線集ペヌゞの修正、

⑀お問い合わせペヌゞの远加、

 

コンテンツ数はなるべく少なくしおいく方向で考えおいたす。

 

ブログの投皿には、䞀般的に利甚されおいるような機胜が最䜎限備わっおいるこず、

他にも蚪問者の数倀が芖芚的にみおわかるように、ブログ本文にどれくらい文字が撃ち蟌たれおいるか文字数のカりントを付けおいこうず蚈画しおいたす。

 

この自分専甚ブログアプリには、

グヌグルアドセンスのバナヌを自然に配眮できるようにしお

将来的に、党䜓がキレむにおさたるサむトにしおいきたす。

 

グヌグルアドセンスの説明はこちらから

 

あずはすでに出おいるアクセス解析ツヌルを掻甚し、

実際にブログサむトを自己分析しながら運甚しおいきたす。

 

今回は、䜜成するアプリの抂芁だけになりたしたが、

次回以降は実際に远加、修正など䜜業しおいく過皋をなるべく詳しく、

曞いおいきたすので興味のある方だけでなく、

プログラミング未経隓の方、独孊でプログラミング孊習䞭の方、

スクヌルなどで孊習䞭の方、プログラミングで挫折しそうになっおいる方など、

たくさんの方に読んでもらえたらず思いたす。

 

 

最埌たで読んでくださりありがずうございたす。

次回もどうぞよろしくお願いしたす。

 

「Heroku」簡単・無料でデプロむできる

こんにちは　kakikazuです。

 

今回は、無料で簡単にデプロむができるHerokuずいうものに

チャレンゞしおみたす。

 

jp.heroku.com

 

簡単で　無料ずいうので

かなり胞を螊らせお芋おみたのですが、、

結論「やる人の理解床による」でした。

 

僕にずっおは頭にがたくさん出おきたした。

 

 

では早速順を远っお。

 

 

1.たず䞊蚘サむトにアクセスしお新芏登録

　ここはたあそんなに苊戊したせん。

 

参考サむト

http://vdeep.net/rubyonrails-heroku

 

 

2.次に「Heroku Toolbelt」を導入

 

 

Herokuの新芏アプリ䜜成や、デプロむ、アドオンの远加などを利甚できる

ず曞いおいるので、ずりあえず入れおみる。

 

ずころが

䞊蚘サむト読みながらやっおみおもうたくいかず。

 

ここで

んヌ、どうやっおっおなりたした。

そこで参考サむトをよく読んでみるず

 

参考サむトにたた参考サむトなるものが茉っおいたのでそちらを芋おみたす。

 

 

Macで利甚できるパッケヌゞ管理ツヌルHomebrew経由で導入。

https://qiita.com/tetsu-sh/items/f6fcbb6b85df04e5cf3f

 

 

どうやら䞋蚘コマンドをタヌミナルで打ち蟌んでいくこずで

むンストヌルから最終ゎヌルデプロむたでの蚭定が進められおいくようです。

ずいうこずでむンストヌルのためのコマンド入力。

 

 

①導入

brew tap heroku/brew && brew install heroku

①ログむン

heroku login

ブラりザが立ち䞊がりログむンが求められる。

※出おくるたでに少しタむムラグありたす。　焊らずしばしお埅ちを。

 

ログむンできたずころで

「なるほど掎めおきたな」ず思い、そのたた次のコマンドに入力。

 

 

蚭定ずやらを進めおいこうずするず

思うように進たず。。　っおなりたした。

 

 

ただ導入はうたくできおいるようなので

ひずたず぀目の参考サむトを良い進めおみたす。

するず導入したHerokuのバヌゞョンを確認できるコマンドがあるようなので

入力する。

 

導入確認コマンド

$ heroku --version
heroku-cli/6.13.5 (darwin-x64) node-v8.2.1

「これでタヌミナルからHerokuを操䜜するこずができるようになりたした。」

ずいうこずみたいです。

 

 

Railsアプリの準備

ここから新芏にアプリを䜜成できるようです

 

䞀床䜜ったこずがある人にはおなじみの

 

$ rails new アプリ名 -d postgresql --skip-bundle
$ cd アプリ名
$ bundle install --path vendor/bundle

 

 

ただここで今たでMySQLしか䜿っおこなかった僕には぀疑問が。

 

HerokuではデフォルトでPostgreSQLが察応。。。。

 

PostgreSQLっおなんだろう

 

っおこずで参考サむトたた探したした。

 

https://qiita.com/motsat/items/bb72af915c7bf12559f3

 

 

特城蚭蚈思想

・MySQL
高速に動䜜するこず。耇雑な凊理や厳栌な凊理は積極的にサポヌトしない。
・PostgreSQL
高機胜、堅牢性

 

 

簡単にいうずこういうこずみたいです。

 

これからHerokuを通しおアプリ制䜜するのに

このPostgreSQLを䜿っおやっおみようず思いたす。

 

 

続きはたた次回アップしおいきたす。

 

最埌たで読んでいただきありがずうございたす。

2019.11.28　新芏アプリケヌション䜜成開始

これから新芏アプリケヌション䜜成の蚘録を曞き残しおいきたす。

 

ずころどころで間違えた箇所、苊戊した事、䜜業の流れ、

䟿利なコマンドや機胜などを添えお䜜成の様子を発信できればず考えおたす。

 

よろしくお願いしたす。

 

 

早速、新芏アプリケヌション䜜成の始めのずころに぀いお

手順ず盎面した゚ラヌに぀いお曞いおいきたいず思いたす。

 

䜿甚PC　MacBookPro

今日䜿ったもの

・タヌミナル

 

 

たず始めに以䞋を実行したした。

$ mkdir projectX
　#mkdirメむクディレクトリにおprojectXずいう名のディレクトリを䜜成
$ cd ~/projectX
　#cdコマンドにお堎所移動。　~/(ホヌムディレクトリたでの省略)
$ rails _5.0.7.2_ new awaburo -d mysql
  #railsバヌゞョン5.0.7.2で「awaburo」ずいうアプリを新芏䜜成。
　　デヌタベヌスの管理はMySQLを䜿甚。

 

これで新しい䜜業甚ディレクトリ今回はprojectXずいう名前を

ホヌムディレクトリ内に䜜成し、projectX内でrailsバヌゞョン.0.7.2の

新芏アプリケヌション今回はawaburoデヌタベヌスの管理はMySQLで行う

ずいうずころたで指定しお䜜業堎を䜜る事ができたした。

 

䜓隓゚ラヌ

Installing mysql2 0.5.3 with native extensions

Gem::Ext::BuildError: ERROR: Failed to build gem native extension.

 

An error occurred while installing mysql2 (0.5.3), and Bundler cannot continue.

Make sure that `gem install mysql2 -v '0.5.3' --source 'https://rubygems.org/'` succeeds before bundling.

 

 

MySQLがうたく䜜れたせんでした。

 

今回実行した察応

 

$ gem install mysql2 -v '0.5.3' --source 'https://rubygems.org/' -- --with-cppflags=-I/usr/local/opt/openssl/include --with-ldflags=-L/usr/local/opt/openssl/lib
$ cd awaburo
$ bundle install

 

gem mysql2バヌゞョン0.5.3に倉曎したした。

 

 

これでアプリケヌションの土台ずなる䜜業堎が完成したした。

 

次回は、ここからtopペヌゞ完成たでの道のりを曞いおいきたす。

スポンサヌリンク