Linuxについて
Linux（リナックス）と読みます。よくプログラミング用語で出てきたりするんですけど、これっていったいなんだろう？と自分自身思っていたので今回調べて記事にしていきます。
Linuxとは？
Windows、MacのiOSと同じOSになります。OSとはコンピューターのすべてのハードウェアを管理しているソフトウェアのことをいいます。ただ、Webアプリケーション開発の際にはLinuxの知識が必要になります。なぜならLinuxは、主にサーバー用として使うOSだからです。
特徴
オープンソースとは、無料で改変可能なプログラムのことです。Linuxは世界中の有志たちがボランティア的に作り上げ、無料で使え、中身も完全に公開されている状態で誰でも使えます。
・サーバーで使用できる
Windows、iOSと違い、使用料が発生しないため、OSの入っていないPCを安く仕入れてLinuxを入れて構築することで自社で使用できます。Linuxはサーバーでも使用できるシンプルなOSのため自由度が高く様々な用途に使用できます。
・新しいOSが作れる
Googleが提供しているAndroidは、Linuxをベースとして開発されているOSです。AndroidのようにLinuxをベースとして新しいOSを作ることもできます。LinuxはシンプルなOSのため例えば、家電製品に搭載することでスマホで操作することが可能になります。過去搭載の例だとPlayStationなどがあります。
Linuxコマンド
Linuxを使用するには”Linuxコマンド”を使用します。Macの場合だとターミナルを使用してコマンドを入力します。Linuxコマンドはかなりの数があるため、使用頻度の高いものを紹介します。
pwd ディレクトリの現在地
cd ディレクトリの移動
ls 現在のディレクトリ内の一覧
今回Linuxについて色々調べましたが、シンプルゆえに可能性を感じるOSなのだなと思いました。開発も出来るとのことだったので、個人的にLinuxで何か作ってみたいなと思いました！
環境構築~Mac Catalina以降~
今回は自身の備忘録で環境構築について書いていきます。基本はRuby、Ruby on Rails導入のための環境構築になります。
今回導入するもの
1. Command Line Tools
2. Homebrew
3. rbenv、ruby-build
4. MySQL
5. Rails
6. node.js
まず、Catalinaの場合は最初に次のコマンドを実行します
# zshをデフォルトに設定 $ chsh -s /bin/zsh # ログインシェルを表示 $ echo $SHELL # 以下のように表示されれば成功 /bin/zsh
1. Command Line Tools
Command Line ToolsはWebアプリケーション開発に必要なソフトウェアをダウンロードするために必要な機能です。
次のコマンドを実行
$ xcode-select --install
2. Homebrew
次のコマンドを順に実行していきます
$ cd # ホームディレクトリに移動 $ pwd # ホームディレクトリにいるかどうか確認 $ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" # コマンドを実行
インストールが一旦止まったらエンターキーを押します
パスワードは自身のPCのパスワードを入力します
バージョンの確認が出来ます
$ brew -v Homebrew 2.1.13
更新のために下記のコマンドを入力します
$ brew update
権限の変更を行うために下記のコマンドを入力
$ sudo chown -R `whoami`:admin /usr/local/bin
3. rbenv、ruby-build
以下のコマンドを実行
$ brew install rbenv ruby-build
PCにおけるどこの場所からも使用できるようにするため、以下のコマンドを実行
$ echo 'eval "$(rbenv init -)"' >> ~/.zshrc
以下のコマンドでzshrcを再読み込みし、変更を反映
$ source ~/.zshrc
ターミナルのirb上で日本語入力を可能にする設定を行うために、以下のコマンドでインストール
$ brew install readline
readlineをどこからでも使用できるようにするため、次のコマンドを実行
$ brew link readline --force
Webアプリケーション開発用のRubyをインストール
$ RUBY_CONFIGURE_OPTS="--with-readline-dir=$(brew --prefix readline)" $ rbenv install 2.5.1
数字は今回のRubyのバージョンになります
インストールしたRuby 2.5.1を使用するために、以下のコマンドを実行
$ rbenv global 2.5.1
以下のコマンドでrbenvを読み込み、変更を反映
$ rbenv rehash
先ほど指定したバージョンか確認します
$ ruby -v
4. MySQL
MySQLをインストール
$ brew install mysql@5.6
PC再起動のたびに起動し直す必要があるため、自動に起動するため以下のコマンドを実行
$ 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を操作するためのコマンドmysqlを実行できるようにするため、以下のコマンドを実行
# mysqlのコマンドを実行できるようにする $ echo 'export PATH="/usr/local/opt/mysql@5.6/bin:$PATH"' >> ~/.zshrc $ source ~/.zshrc # mysqlのコマンドが打てるか確認する $ which mysql # 以下のように表示されれば成功 /usr/local/opt/mysql@5.6/bin/mysql
mysqlが起動するか確認するため次のコマンドを実行
# mysqlの状態を確認するコマンドです $ mysql.server status # 以下のように表示されれば成功 SUCCESS! MySQL running
5. Rails
Rubyの拡張機能（gem）を管理するためのbundler（バンドラー）をインストール
$ gem install bundler
Railsをインストール
$ gem install rails --version='5.2.3'
以下のコマンドでrbenvを読み込んで、変更を反映
$ rbenv rehash
Railsがインストールされたか確認
$ rails -v
6. node.js
Railsを動かすためにはnode.jsが必要となり、それをHomebrewを用いてインストール
$ brew install nodejs
node.jsがインストール出来たか確認
$ node -v
以上でRailsの導入は完了になります。
お疲れ様でした！
Ruby on Rails ~ルーティング~
基礎を見直すためにRuby on Railsのルーティングについて記載していきたいと思います。
ルーティングとは？
端的に言うとリクエストの行き先を指定する「道しるべ」です。クライアントからリクエストがあった際に、リクエストに対応した行き先を定義します。
基本的な書き方は下記
●HTTPメソッド
| HTTPメソッド | どのような時に用いられるリクエストか |
|---|---|
| GET | ページを表示する操作のみを行う時 |
| POST | データを登録する操作をする時 |
| PUT | データを変更する操作をする時 |
| DELETE | データを削除する操作を行う時 |
●URIパターン
URLのようなものと捉えて頂いて差し支えありません。例えば、postsというURIパターンを設定すれば、http://localhost:3000/postsのページにアクセスすることができます。
●コントローラー
ルーティングの次にやってくる処理のことです。
●アクション
コントローラー内における、処理のカテゴリーのことです。
| アクション名 | どのような時に動くか |
|---|---|
| index | 一覧表示ページを表示するリクエストに対応して動く |
| new | 新規投稿ページを表示するリクエストに対応して動く |
| create | データの投稿を行うリクエストに対応して動く |
| show | 個別詳細ページを表示するリクエストに対応して動く |
| edit | 投稿編集ページを表示するリクエストに対応して動く |
| update | データの編集を行うリクエストに対応して動く |
| destroy | データの削除を行うリクエストに対応して動く |
全て当てはめるとこんな感じになります
mainコントローラーのindexアクションでindex.htmlへ飛んでいく
ルーティングはMVCの基礎中の基礎ですが、わからなくなる時もあるので備忘録として書きました。
OpenWeatherMapのAPIを使用したアプリ制作
APIを使用してみたい！と思い、探して見るとお天気アプリならお手軽に作れるという記事を見つけ、実際に作ってみました。
APIとは？
APIとは「Application Programming Interface（アプリケーション・プログラミング・インターフェイス）」の略語であり、「ある1つの機能に特化したプログラムで共有可能なもの」や「ソフトウェアの機能を共有する仕組み」のことです。よく使う機能がAPIとして用意されていれば、わざわざ一からプログラムを組む必要はありません。必要に応じてAPIを利用し、効率的に開発を進められます。様々なAPIが用意されており、外部から呼び出すことで手軽に自身のwebアプリに機能がつけれることが出来ます。
今回出来上がったのがこちら
様々なwebサイトで天気のAPIが利用できますが、今回はOpenWeatherMapを使用しました
自分は英語に自信がないのでgoogleの翻訳機能を使用しながら、登録しました
今回の開発コードになります
index.html.haml
.weather
.container
%h1 日本の天気
%h2 日本のまち
.box
= succeed "東京都" do
= succeed "札幌市" do
= succeed "福岡" do
= succeed "京都" do
= succeed "広島" do
%button#submit
今の天気は？
.weatherMain
%h2 現在の天気
%div
%span#weather.bold
%div
%span#weatherMark.bold
%p#icon
%div
気温
%span#temp.bold
℃
%div
湿度
%span#humidity.bold
\%
赤くなっている番号が各都市のctyi番号で、この番号によって取得できる場所が変わります。
```
.weather {
background-image: url(3192999_l.jpg);
background-size: cover;
height: 100vh;
text-align: center;
padding-top: 138px;
}
.container {
opacity: 0.8;
}
h1 {
font-size: 90px;
}
h2 {
padding-top: 30px;
}
.box {
padding-top: 38px;
}
.weatherMain {
padding-top: 68px;
}
```
けっこう簡単に開発できるので、初めてAPIを使いたいならシンプルでおすすめだと思います！
Google拡張機能
最近、模写の学習を始めました。それにあたってGoogleの拡張機能を使うと便利だよと聞いたので実際に使ってみました。
Chromeの機能を増やしたり強化したりする専用の追加プログラムで50種類以上の拡張機能が存在します。
その中で現在、模写のために使っている機能を紹介
Full Page Screen Capture
ボタンをワンクリックで、表示中のサイトのキャプチャを撮ってくれます。
下記の写真は実際に撮ってみたものhttps://xeory.jp/extension/
PerfectPixel by WellDoneCode (pixel perfect)
デザインを正確にコーディングするためのコーダー用の拡張機能です。コーディング中のサイトにデザインデータを重ねて表示できます。
使っている感じは下記の写真です。
ブレて見えるのは現在製作しているものと写真を重ねているためです。
Image Downloader
ページ内に存在する画像のダウンロードをサポートする拡張機能です。
Select Allにチェックをして右上のDOWNLOADを押すと、そのページ内に存在する画像を一括で保存できます。
今回、拡張機能を記事にするにあたって調べてみましたが、色々な機能があって他の機能も使ってみようと思います
ウィザード形式の実装
今日やっとログイン機能が完成したので、その過程を書いていきます。今回はウィザード形式の実装なので、それに沿って書いていきます。ウィザード形式とは対話するように順番に操作が進んでいいくインターフェースのことです。
まずはdeviseの導入ですが、前回書いた記事がありますので今回はその続きからになります。
前回をやったことをざっくり説明すると
Gemfileに"gem devise"を追記
gemのインストール
$ bundle install
アプリケーション内でdeviseを使えるようにするため
$ rails g devise:install
User(devise管理下）作成
$ rails g devise user
マイグレーションを実行
$ rails db:migrate
今回は下記のカラムを入れて作成しました
新しく項目を追加する場合は、app/controllers/application_controller.rb
に追加した項目を記載する
viewの作成
$ rails g devise:views users
controllerの作成
$ rails g devise:controllers users
最後にルーティングを編集
前回はここまで！
次にviewの編集
次にモデルの設定
app/controllers/users/registrations_controller.rbを編集
config/routes.rbを編集
ここまでがウィザード形式を導入した時の一連の過程になります。
deviseを使用したことでまた色々なことを学べました。sessionによる一時的な記録、Saveメソッドが適用されない時のの対処、rails cを使用したデバッグ、バリデーションとnill falseの関係について、引き続き開発を通して学んでいきたいと思います。
Ruby on Rails ~Bootstrapの導入~
プログラミングを学び始めるなら、◯◯◯がいいよ！なんて記事はよく見かけますが、最初の頃は何選べばいいのか？どんな風に使うのか？とか何もわからないと思います。自分も現在プログラミングを初めて３ヶ月ほど経ちましたが、やっとRubyはWeb開発に向いていて、なんだかんだでけっこう使い勝手の良い言語なんだな〜と漠然に捉えているくらいで😅
今だとRubyも人気なんですけど、WordPressも同じくらい人気でよく案件を探したりすると、該当する案件がいくつも見つかるので、需要の高さを改めて感じます。それに付随してBootstrapを一緒に使ったりするらしのですが、調べてみるとRilsにもBootstrapを導入できるという事で、実際にやってみました！
Bootstrap（ブートストラップ）とは
Twitter社が開発していたCSSフレームワークで、HTMLやCSS、JavaScriptなどが密接にからみあっていることもあり、Webアプリケーションフレームワークと呼ばたりします。
また、Bootstrapはレスポンシブに対応しているので、パソコンやスマホで表示してもデザインが崩れません。
Railsで導入するには？
① Bootstrapをgemでインストール
gemfileに下記を追記してbundle install
② SCSSファイルを作成
application.css を application.scss に名前を変更する
ファイルを開いて*= require_tree .*= require_selfw
@import "bootstrap";
③ jvascripts/application.jsを修正
下記をファイル内に追記
//= require jquery3
//= require popper
//= require bootstrap-sprockets
④ Rails s で再起動！
導入はこれでOKです！
使い方は公式のサイトにまず行きます！
公式サイトhttps://getbootstrap.com/
ヘッダー部分のExamplesからサンプルへいけます
サンプルは色々あって、使い勝手が良さそうなものばかり
例としてAlbumタイプを選択
右クリックでページのソースを表示を選択
<body>から下の部分をコピーしましょう
後は先ほど立ち上げたアプリにペーストするだけ
自身のローカル環境で表示できたのが、確認できます
Bootstrapですごいのは、これだけ簡単なのにクオリティがあってプルダウンメニューまで実装できている所だと思います。初めて使いましたが、けっこう感動しました！
