こんにちは、吉岡([twitter:@yoshiokatsuneo])です。
みなさんはiPadを使っていますか？
メールやWebサイトの閲覧、簡単な文書作成、表計算、プレゼン、写真や動画の編集・操作などにも使えて便利ですよね。今や非常に多くのアプリケーションが利用できますし、PCより使いやすい場面もあるかと思います。
このiPadを使って、Web開発ができたら便利ですよね。
そこで今回は、ブラウザ上でウェブ開発などができるクラウドIDEサービス「PaizaCloud」を使って、iPad上で開発をしてみたいと思います。
PaizaCloudを使えば、ブラウザからクラウド上のLinux環境が操作できます。
PaizaCloudはiPadからの利用にも対応しており、開発に必要なファイル編集、ターミナル、ブラウザ、ファイル管理など、開発に必要な機能が簡単に利用できます。また、日本語完全対応しているため、使い方も簡単です。
開発に必要なツールも一通り揃っていて、Ruby on Rails, Django, Node.js, Laravel, PHP, Java(tomcat), MySQL, Jupyter Notebookなどなど…があらかじめインストール済みなので、開発環境の構築に手間をかける必要はありません。
ブラウザを開けばどこからでも同じ環境を使って開発できるので、たとえば今日はパソコンで開発して、明日はiPadとキーボードを鞄に入れておいて出先のカフェで開発…みたいなこともできます。
今回は、実際にiPadからPaizaCloudでRuby on Railsを使った簡単な掲示板サービスを開発をしてみます。手順に沿っていけば、10分程度で作れてしまいます!
PaizaCloudを使う
PaizaCloudのサイトはこちらです。
メールアドレスなどを入力して登録すると、登録確認メールが送られてきます。GitHubやGoogle(Gmail)ログインを利用すると、ボタン一つで登録することもできます。
サーバを作る
まずは、開発環境となるサーバを作りましょう。
「サーバを作る」ボタンを押して、サーバ作成画面を開きます。
"Ruby on Rails", "phpMyAdmin", "MySQL"を選んでから、もう一度「サーバを作る」ボタンを押すだけです。
3秒程度で、Ruby on Railsを使える開発環境ができてしまいます。
iPadなどのモバイル環境では、タップしやすいようにバーやボタンが大きくなっていますね。
アプリケーション作成
次に、Ruby on Railsのアプリケーションを作成してみましょう。
アプリケーション作成は、"rails new"というコマンドを使います。
PaizaCloudでは、ブラウザ上で、コマンドを入力するための「ターミナル」を使うことができます。
画面左側の、「ターミナル」のボタンをタップします。
ターミナルが起動しました。iPadなどでも利用しやすいように、Ctrlキーや矢印キーはボタンでの入力もできるようになっています。
"rails new アプリケーション名"のようにコマンドを入れます。
ここでは、"myapp"という名前のアプリを作ってみましょう。
"--database-mysql"オプションをつけて、データベースにMySQLを使ってみます。
$ rails new myapp --database=mysql
とコマンドを入力します。
画面左側のファイルファインダを見ると、"myapp"というディレクトリが作られています。フォルダをダブルタップするか、三角マークをタップして、中を見てみましょう。
Ruby on Railsアプリケーションに必要なファイルが作られています。
Ruby on Railsサーバの起動
このアプリケーションは、もう動かすことができるんですよ。実際に動かしてみましょう！
"cd myapp"でディレクトリを移動したあと、"rails server"と入れてみましょう！
$ cd myapp $ rails server
画面の左側に、"3000"と書かれたボタンが追加されました。
Ruby on Railsの開発環境では、3000番ポートでサーバが起動します。PaizaCloudでは、この3000番ポートに対応したブラウザ起動ボタンを自動で追加しています。
ボタンをタップすると、ブラウザ(PaizaCloudの中で動くブラウザ)が起動して、Ruby on Railsについてのページが表示されました!
データベースにテーブルを作成
実際に、アプリケーションで、データベースを使ってみましょう。
Ruby on Railsでは"rails generate scaffold"というコマンドで、データベーステーブル、モデル、コントローラ、ルーティング用のファイルを一気に作ることができます。
ここでは、掲示板をあらわす"post"テーブルを作ってみます。このテーブルには、タイトル("title")、本文("body")、公開済み("published")のカラムを作ります。
別のターミナルを開いて、コマンドを入れてみます。(Ctrl-Cで"rails server"を中断してもいいです)
$ rails generate scaffold post title:string body:text published:boolean
作成したら、マイグレーションコマンドを実行して、実際にデータベース上にテーブルを作成します。
$ rake db:create $ rake db:migrate
これで準備は完了です！PaizaCloud上のブラウザで、URLに "http://localhost:3000/posts/" と入れてみましょう。
すると、以下のようにテーブル一覧が表示されました！ データの追加や削除ができるので試してみましょう！
作成したデータベーステーブルのデータは、phpMyAdminでも確認できます。
PaizaCloudのブラウザ上で"http://localhost/phpmyadmin/"と入れてみましょう。
ファイルの編集
一覧ページのタイトルを変更するため、ファイルを編集してみましょう。
ファイルの編集は、画面左側のファイルファインダからファイルを選択して、長押しします。
"myapp/app/views/posts/index.html.erb"を開いて編集します。
＜h1＞に囲まれた、タイトル部分を変更してみましょう。
myapp/app/views/posts/index.html.erb:
<h1>私の掲示板へようこそ！</h1>
編集したら、「保存」ボタンを押します。
毎回URLに"/posts/"と入れるのも面倒なので、トップページで一覧が見えるようにリダイレクトしてみましょう。
"config/route.rb"を開いて、以下のようにトップページのルーティング情報を追記します。
config/route.rb:
root to: redirect('/posts/')
これで、基本的な掲示板ができました！
CSSフレームワークの追加
ついでに、見栄えをよくするために、追加するだけで使えるCSSフレームワークのMilligramを追加してみましょう。
app/views/layouts/aplication.html.erb
<head> <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"> <link rel="stylesheet" href="//cdn.rawgit.com/necolas/normalize.css/master/normalize.css"> <link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">
これで完成です！いい感じですね。
なお、今回はデフォルトの「フローティングウインドウモード」で操作しましたが、ウインドウ右上の最大化ボタンを押すか、メニューから「タブモード」を選択すると、全画面で編集できるようになります。お好みのモードで使ってみてください。
まとめ
というわけで、PaizaCloudを使って、iPad上でRuby on Railsのウェブアプリケーションを開発してみました。
PaizaCloudを使えば、どこからでも同じ環境を利用できるので、パソコンがある環境ではパソコンで開発して、カフェなどではiPadで開発をするというのもいいですね。
気軽に開発ができるので、みなさんもぜひ試してみてください！
「PaizaCloud」は、環境構築に悩まされることなく、ブラウザだけで簡単にウェブサービスやサーバアプリケーションの開発や公開ができます。
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
