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

みなさんこんにちは！

突然ですが、

何も知らない状態から

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

と思った時、

何から手をつけますか？

僕は当時

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

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

これからプログラミングを学ぼうとしたときに

・パソコンは？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（変更を保存する）」にします。

これで今と違うところへ移動した際には、自動で保存をしてくれます。

これにて「使用するパソコン」と「使用するソフト（アプリ）」については用意する事ができました。

次の記事へ続きます。

2020-04-21

プログラミングをやろうと決めたらまずはこれ！｜「HTMLとCSSについて」

みなさんこんにちは！

今日は

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

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

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

「プログラミングを習得して

ロボットやAIとともに活躍を狙う方」

これらを目的としていて

だがしかし、

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

「難しい事は置いといてとりあえずつくりたい」

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

「そもそもプログラミングって？？？」

そんな方へ向け

【基礎・基本について】

これを他の人にはない

「分かりやすく、僕なりの表現でお伝えする」

そんな内容でお送りします！

では早速

◎基礎その１

【HTMLとCSSについて】お話したいと思います。

まず始めに

「 HTML」とは

・ウェブサイトに表示される情報を記載するもの。

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

インターネット上で目にしているものは全てです。

HTMLはウェブサイドの基本、ベースになります。

続いて、、

「CSS」とは

・HTMLをオシャレにデザインすることを言います。

HTMLという情報だけだと、

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

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

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

・強調したいところに色づけ

・文字の種類変更

・画像のリサイズ、並べ替え

・その他いろいろ。。。

こんな事をすることができる！

それが「CSS」です。

これを踏まえた上で、

HTMLについてもう少し詳しく書いてみます。

【HTML】

今目にしているブログの中身を記号化したもの。

「コード」というのですが、

決められたルールに沿ってつくられています。

たとえば代表的なものを２つあげます。

①【目に見えない情報】

これはhead要素と言います。

左側が「開始タグ」と呼び

右側が「閉じタグ」などと呼びます。

このふたつのタグの中に

関連する内容、中身を入れていきます。

このhead要素は、

ウェブサイトの情報をいれる部分です。

ポイントは、

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

なので

コードを読み書きするプログラマーは見ます。

しかし

閲覧する方は見る事はありません。

この、上で紹介した〈　〉で囲まれたものを

「タグ」

と言います。

この＜タグ＞というものを使い、

ウェブサイトに表示させたい情報を書いていきます。

②【目に見える情報】

これはbody要素と言います。

画面上（今みているページ）に

視覚的な情報を入れることができます。

この中に数々の手法を用いて、

・動く

・色がつく

・画像が飛び出す

・動画が流れる

といった大きなひとつの

ウェブサイドができあがっています。

大きく分け、

①ウェブサイトに関する「目に見えない情報」

＜head＞要素

②ウェブサイド上に表示させる「目に見える情報」

＜body＞要素

この２つで

HTMLは作られています。

基本的なつくり方は、

【タグの中に関係する内容を書いていくだけ！】

<タグ>　内容を書くところ　</タグ>　

という具合に書きます。

これをイメージしやすくするには、

【タグ　　＝　　積み木】

としてください。

基本はこの「タグ」という名の「積み木」が

上から順に重なって

ひとつのウェブサイドができています。

以上、今回はHTMLとCSSについてでした！

ありがとうございます。

2020-03-02

プログラミング前の準備（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です。

ターミナル

$ 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コマンドをどこからでも実行できるようにする。

ターミナル

$ 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です。

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

2020-03-02

プログラミング前の準備（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

以下のコマンドでバージョン確認ができます。

ターミナル

$ 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コマンドをどこでも使用できるように以下を実行。

ターミナル

$ 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の起動確認です。

$ 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です。

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

2020-02-21

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に追記

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

<%= 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

~~~~~~~~~~~~~~~~~~~~~~(省略)~~~~~~~~~~~~~~~~~~~~~~~~
  
  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を修正

<%= 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

~~~~~~~~~~~~~~~~~~~~~~(省略)~~~~~~~~~~~~~~~~~~~~~~~~
  // プレビュー用の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

$(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

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コードの記述は、難しいと思います。

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

なんて言われてしまいそうですよね。

けど、どんな人だって始めは「何も分からない状態」から始めています。

だから安心して良いのだと思います。

この記事が「分からないまま諦めてしまいそう」

そんな人の役に立てば幸いです。

最後まで読んでくださりありがとうございます。

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

2020-02-21

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

//= require turbolinks
//= require jquery
//= require jquery_ujs
//= require_tree .

これでjquery を使う準備ができました！

ここから４つに分けて進めます。

1.複数画像の投稿機能を実装。←今回はここまで

2.編集機能の実装。

3.プレビュー機能を実装。

4.削除の実装。

１つ目は、メインの複数枚投稿できる仕組み作りです。

まず、

投稿したい情報を載せる「基本フォーム」内の記述を修正。

_form.html.erb

<%= 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

$(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() {

これで動くはずです。

今回も最後まで読んでくださりありがとうございます！

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

2020-02-07

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

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ファイルを作成。

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

<%= link_to '出品', new_product_path %><br>
<div class="contents">
  <%= render @products %>
</div>

_product.html.erb

<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

def new
  @product = Product.new
  @product.images.new
end

newとeditで読み込むテンプレートの中身を記述。

_form.html.erb

<%= 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

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に入ります。○○は関連付く側のモデルの名前、××にはフォームに対応するカラムの名前が入ります。

最後までお付き合いいただきありがとうございます！

次回は、ここをベースに複数枚画像投稿機能の実装につなげていきますので次回もよろしくお願いします。

あ

2020-02-05

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]に更新されます。

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

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

セッター

インスタンス変数の値を更新するためのインスタンスメソッドのことを、特別にセッターと呼びます。

これが答えかな。

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

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

ファイルがどのような動きをするか見ていきます。

ひとまず今回は、

実行するまでの準備を書いてみました。

最後まで読んでくださりありがとうございます。

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

2020-02-05

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でクラスとインスタンスの学習

「チケット発券システム」を作るは以上です。

学習にあたり参考したサイトにによると、「クラスとインスタンスを覚えてば、世の中の物はプログラムで表現できる」と書いていました。

すぐに何でも表現できる訳ではありませんが

これをきっかけにいろんなものをプログラムで表現できればと思います。

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

本日も最後まで読んでくださりありがとうございます。

2020-01-21

「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

2020-01-12

【番外編】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枚作れます。

なので時間的余裕とベクターデータでデザインを用意できるなら

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

利用するのが良いのかなと思いました。

今回も最後まで読んでくださり、ありがとうございます！

2020-01-12

自分のポートフォリオを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-01-04

2020年　自分専用ブログアプリ作成開始！

こんにちは！

ついに2020年になりました。今年から令和２年のスタートです。

どうぞ、今年もよろしくお願いします。

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

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

本日から表題にありますように、「自分専用ブログアプリ」を作成してみようと思います！

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

形にしていこうと思います！

これまでに作成したコードはこちらを参照してください。

　　↓↓↓

kakikazuのGitHub「awaburo」

今後作っていく中身としては、

①topページ追加、

②ブログ投稿ページの修正、

③一覧ページの修正、

④編集ページの修正、

⑤お問い合わせページの追加、

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

ブログの投稿には、一般的に利用されているような機能が最低限備わっていること、

他にも訪問者の数値が視覚的にみてわかるように、ブログ本文にどれくらい文字が撃ち込まれているか文字数のカウントを付けていこうと計画しています。

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

グーグルアドセンスのバナーを自然に配置できるようにして

将来的に、全体がキレイにおさまるサイトにしていきます。

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

あとはすでに出ているアクセス解析ツールを活用し、

実際にブログサイトを自己分析しながら運用していきます。

今回は、作成するアプリの概要だけになりましたが、

次回以降は実際に追加、修正など作業していく過程をなるべく詳しく、

書いていきますので興味のある方だけでなく、

プログラミング未経験の方、独学でプログラミング学習中の方、

スクールなどで学習中の方、プログラミングで挫折しそうになっている方など、

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

最後まで読んでくださりありがとうございます。

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

2019-12-29

「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-29

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ページ完成までの道のりを書いていきます。

$は入力する必要ありません。今後も同様です

② topページにeditボタンを作成する

1.要件定義

（1）実行すると、選択できる映画の一覧が表示され入力待ちになる

（2）どれか選択するとどのチケットを買っていくら所持金が残ったのか表示される

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

3.それぞれの要素にクラスを用意。

4.各クラスのインスタンスが持つ特徴を考えコードに反映

①movieが持つべきデータ

上記内容をticket_vending_machineへ反映。

ゲッター

上記を踏まえmovie.rbにゲッターを反映させる。

ticket_vending_machine.rb内にゲッター追記

ticket.rbを以下のように書き換え

④customerが持つべきデータ

customer.rbを書き換え。

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

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

exec.rbに以下追記。

Dateクラスについて

ticket_vending_machine.rbを修正。

セッター

使用PC：MacBook Pro

1.ターミナルを使用しローカル環境でherokuにログイン。

2.ローカル環境でheroku上にアプリケーションを作成。

3.公開したいもの（index.html）があるディレクトリの直下にindex.phpを作成し、下記コードを記述しておく。

2.Herokuでデプロイする。

Railsアプリの準備

特徴（設計思想）

`$`は入力する必要ありません。今後も同様です