若葉の技術メモ

コンピュータやプログラミングに関して調べたり、取り組んだりしたことをまとめる若葉のノート📓。コンピュータ・プログラミング初めてって方も一緒に勉強していきましょう!初心は大事!いつでも若葉☘のような意気込みで!

  • No.   

若葉の技術メモ

コンピュータやプログラミング・数理に関して調べたり、取り組んだりしたことをまとめる若葉のノート。

コンピュータ・プログラミング・数理が初めてって方も一緒に勉強していきましょう!

初心は大事!いつでも若葉☘のような意気込みで!

【初心者でもできる!】ChromebookでWebサービス開発環境を整える方法(Django, Ruby on Rails)

最近はどんなプログラミング言語でもウェブ上でお手軽に勉強できるようになってきましたね!

昔ながらのC言語しかり、最近の機械学習でよく使われるPythonしかり...どんな言語でも基本的なことは大体勉強できてしまいますよね!

となると...学んだことをアウトプットしたくなってきませんか?

そこで今回の記事では、これから個人利用のマシンとして成長してくるであろうChromebookにおいてアウトプットのためにWebサービス開発環境を整える方法をご紹介したいと思います!

対象の言語はPython (Django) Ruby (Rails) です(それ以外の言語の方はごめんなさい💦)

※この記事の内容をご自身で試される場合は自己責任でお願いします


はじめに

TwitterFacebookなど様々なWeb上のサービスはプログラミング言語を使って作られています。

Webサービスを作るためにはフロントエンドバックエンドの2つのサイドからの構築が必要です。

フロントエンドはユーザから見える部分で、HTMLやCSSJavaScriptなどを使って書かれます。 他方でバックエンドはユーザから見えない部分、つまりサーバサイドでデータベースのシステムなどに関わる部分で、PythonPHPRubyといった様々な言語で書かれています。

例えば、InstagramであればバックエンドにRubyを使っていて、特にその中でもRuby on Railsと呼ばれるWebフレームワークの下で作られています。

このWebフレームワークとはWebサービスを作るための雛形でファイルの依存関係などをテンプレートとして持っているものです。 Webフレームワークを使えば誰でも簡単にWebサービスを開発できるようになります!

そこで今回の記事では、PythonRubyに興味がある方向けにアウトプットの準備として

Chromebookに導入する方法をご紹介します!

環境

ChromebookLinuxを使う方法はこちらの記事を参照↓↓

wakaba-mafin.hatenablog.com

Django

というわけで早速、Pythonを使ったWebアプリケーションフレームワークの1つDjangoChromebookにインストールする方法をご紹介します!

準備

まずは準備を行います。

DjangoPythonを使ったフレームワークですのでPythonの導入が必須です。

といってもChromeOSの場合ではLinux(β版)を有効化した段階でデフォルトでPython3が使えるようになっています。

ですが、このままでは少し使いにくいのでpyenvやAnaconda入れておきましょう! (この記事では特に必須ではありませんが、今後環境管理などで必要になることもあるかもしれませんので。あくまでお節介です)

こちらのコマンドをターミナルで上から順に叩いていくとAnaconda3をインストールすることができます

$ git clone https://github.com/pyenv/pyenv.git ~/.pyenv
$ echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bash_profile
$ echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bash_profile
$ echo -e 'if command -v pyenv 1>/dev/null 2>&1; then\n  eval "$(pyenv init -)"\nfi' >> ~/.bash_profile
$ source ~/.bash_profile
$ pyenv install anaconda3-5.3.0
$ pyenv global anaconda3-5.3.0
$ pyenv rehash

詳しくはこちらの記事で書いてありますのでご参考にしていただければと思います↓↓

wakaba-mafin.hatenablog.com

インストール

というわけで早速Djangoをインストールしましょう!

Djangoは実はPyPIにあるのでpipを使えば一発でインストールすることができます。

$ pip install django

でOK。 もしバージョンを指定したいときには

$ pip install django==2.1.7

==の後に希望のバージョンをくっつけてインストールすればOK。

簡単すぎますね!

テスト

では、早速Djangoが動くかどうかテストしましょう!

Djangoで新しくプロジェクトを作成する際には...

$ django-admin startproject ${プロジェクト名}

でOK。 そして、そのプロジェクト名と同じ名前のディレクトリに移動して

$ python manage.py runserver

として、こんな感じになればちゃんとDjangoが動いています!

f:id:wakaba-mafin:20190221154419p:plain

Ruby on Rails

続いてRubyの上で動作するWebアプリケーションフレームワークRailsを導入する方法をご紹介します!

準備

まずは準備を行います。

RailsRubyを使ったフレームワークですのでRubyの導入が必須です。

ですが、ChromeOSの場合ではLinux(β版)を有効化してもデフォルトではRubyは入ってはいません。

ということでRubyを入れちゃいましょう!

$ sudo apt-get install ruby ruby-dev

でOK。これでRubyが入ります!(確認したい場合はruby -v

また、Railsを使うためにはデータベースSQLite3を入れる必要があります。 Djangoの場合ではDjango導入の段階でSQLite3をデフォルトで使うことができますが、Railsの場合ではマニュアルで入れる必要があります。 実はこれも簡単でapt-getですぐにインストールすることができます。

$ sudo apt-get install sqlite3 libsqlite3-dev

でOK。こちらもsqlite3 --versionで確認することができます。

インストール

ということで本命のRailsを入れちゃいましょう!

RailsRubyのパッケージ管理ツールgemを使えばこちらもコマンド一発で導入することができます。

このgemは準備のRubyの導入の段階で整えられるので、Railsを入れるためには

$ sudo gem install rails

だけでOK。

Railsの導入も簡単ですね!

テスト

では、入れたRailsが動くかどうかを確認しましょう!

Railsで新しいプロジェクトを作成するのは

$ rails new ${プロジェクト名}

でOK。ですが、現状(2019/02/20時点)で少し問題があるみたいで、そのプロジェクト名と同じ名前のディレクトリに移動してGemfileを編集します。

参考: Railsを始めてsqlite3まわりのエラーで躓いている人たちへ - Qiita

VimでもEmacsでもなんのエディタでもいいので、

gem 'sqlite3'

と書かれている行を

gem 'sqlite3', '~> 1.3.6'

に変更し、次のコマンドを実行します。

$ bundle install

そして

$ rails server

として、こんな感じになればちゃんとRailsが動いています!

f:id:wakaba-mafin:20190221154426p:plain

まとめ

というわけで、今回はChromebookユーザでPythonRubyのアウトプットとしてWebサービスを作ってみたい方に向けて、ChromebookDjangoRuby on Railsを導入する方法をご紹介しました!

基本的にはChromebookではLinuxを有効化してしまえばほぼLinuxと同等に扱うことができるので非常に簡単にWebサービスの開発環境を整えることができます!

もちろんPythonRubyだけでWebサービスを作ることはできず、Webサービスを作る際にはフロントエンド側の言語HTMLやCSSなどの理解も必要です。 ぜひ興味がある方はチャレンジしてみてください!

ご意見やご質問、その他間違いのご指摘などございましたらぜひコメントのほどよろしくお願いします!