paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

初心者でも10分でWebサービスを作れる!PHPフレームワークLaravelとPaizaCloudの使い方

f:id:paiza:20180216002650p:plain
(English article is here)

f:id:paiza:20151217152725j:plainこんにちは、吉岡(@)です。

PHPはWeb開発のために作られた言語で、HTMLファイルに埋め込むことでプログラムを動かしてくれます。小さなプログラムから作り始めて、すぐに動かすことができるので、初めてWeb開発をする人にも便利ですね。

ただ、より本格的なWebサービスを作ろうと思ったら、PHPのWebアプリケーションフレームワークを利用する必要が出てきます。

PHPのWebフレームワークには、Laravel、CakePHPSymfonyZend Framework、CodeIgniterなどがありますが、その中で、現在最も有名で人気のあるPHPフレームワークといえば、Laravelではないでしょうか。

以下のGoogleトレンドのデータでも、Laravelの人気が急激に伸びていることがわかりますね。

f:id:paiza:20180216013143p:plain (Google Trends より)

Laravelには、Web開発に便利なルーティング、MVC、ORマッパー、ジェネレータ等の機能が含まれており、Laravelの流儀にしたがって作れば、自然とわかりやすい構造のWebアプリケーションが作れるようになっています。

ただ、いざ開発で使おうとすると、PHP、Laravel、データベースを動かすための環境構築やデプロイなどが必要になってきます。これが意外と厄介で、手順通りにインストールしたつもりでも、OSやバージョン、他のソフトウェアなど、さまざまな原因でエラーが出たりして失敗することもあります。

そこで、今回はブラウザだけでLaravelを使ったWeb開発ができるPaizaCloud Cloud IDEを使ってみます。

PaizaCloudは自由度が高く、Laravelなどのさまざまなフレームワークや言語を使ったWeb開発が、初心者でも簡単にできます。PaizaCloudを使えば、最短でLaravelを使ったWeb開発が始められます。

開発環境がクラウド上で動作しているので、自分でサーバなどを用意しなくても、作ったウェブサービスはその場で公開することもできます!

まずは簡単なプログラムからはじめて、タスクリストを編集するサービスを作ってみましょう。現時点で最新のLaravel5.6での手順を紹介します。手順に沿って進めれば、10分程度で作れるかと思いますのでぜひ挑戦してみてください。

PaizaCloud Cloud IDEを使う

それでは、始めていきましょう。

PaizaCloud Cloud IDEのサイトはこちらです。

https://paiza.cloud/

メールアドレスなどを入力して登録すると、登録確認メールが送られてきます。GitHubGoogle(Gmail)ログインを利用すると、ボタン一つで登録することもできます。

サーバを作る

開発環境となるサーバを作りましょう。

f:id:paiza:20171213234155p:plain

「新規サーバ作成」ボタンを押して、サーバ作成画面を開きます。

PHP, phpMyAdmin, MySQLをクリックして「新規サーバ作成」ボタンを押します。

f:id:paiza:20180216002923p:plain

3秒程度で、Laravelを使える開発環境がブラウザ上にできあがります。

f:id:paiza:20180216003434p:plain

サンプルのPHPファイルとブラウザが開いています。ここでは必要ないので、これらのウインドウは閉じておきましょう。

アプリケーション作成

それでは、Laravelを使ってWebアプリケーションを作成してみましょう。

Laravelを使ったWebアプリケーションの作成には、Composer、Laravel、データベース(MySQL)等の設定が必要ですが、PaizaCloudでは開発環境が既に用意されているので、すぐにサービスを作れます。

アプリケーション作成時には、"laravel new"というコマンドを使います。

PaizaCloudでは、ブラウザ上で、コマンドを入力するための「ターミナル」を使うことができます。

画面左側の、「ターミナル」のボタンをクリックします。

f:id:paiza:20171213234317p:plain

ターミナルが起動しますので、"laravel new アプリケーション名"のようにコマンドを入れます。

"アプリケーション名"というのは作るアプリケーションの名前なので、"music-app"、"game-app" みたいな感じで、好きな名前にするといいですね。

ここでは、アプリケーション名は"myapp"としておきます。"laravel new myapp"とコマンドを入れて、エンターキーを押します。

$ laravel new myapp

f:id:paiza:20180216003112p:plain

画面左側のファイルファインダを見ると、"myapp"というディレクトリが作られています。フォルダをクリックして、中を見てみましょう。

f:id:paiza:20180216005011p:plain

Laravelアプリケーションに必要なファイルが作られています。

なお、"laravel new"コマンドの代わりに、以下のようなcomposerコマンドでもプロジェクトが作成できます。

$ composer create-project laravel/laravel myapp --prefer-dist

また"laravel new"コマンドの実行前に以下のような設定をしておけば、インストールが早くなります。

$ composer config -g repositories.packagist composer 'https://packagist.jp'
$ composer global require hirak/prestissimo

アプリケーションサーバの起動

このアプリケーションは、もうこの時点で動かすことができます。実際に動かしてみましょう!

"cd myapp"コマンドでディレクトリを移動したあと、"php artisan serve"とコマンドを入れてみます。

$ cd myapp
$ php artisan serve

f:id:paiza:20180216005150p:plain

画面の左側に、"8000"と書かれたボタンが追加されました。

f:id:paiza:20180216005220p:plain

Laravelの開発環境では、8000番ポートでサーバが起動します。PaizaCloudでは、この8000番ポートに対応したブラウザ起動ボタンを自動で追加しています。

ボタンをクリックすると、ブラウザ(PaizaCloudの中で動くブラウザ)が起動して、Laravelについてのページが表示されました!

f:id:paiza:20180216005704p:plain

なお、LaravelのサーバはHTTPで動作していますが、PaizaCloudではこれをHTTPSに変換しています。またサーバはlocalhostで動作していますが、PaizaCloudでは"https://localhost-サーバ名.paiza-user.cloud:ポート番号"というURLでlocalhostに接続できるようになっています。

ファイルの編集

表示されているのは、プロジェクトディレクトリ("myapp")の下の"resources/view/welcome.blade.php"というファイルです。

試しにタイトルを変更するために、ファイルを編集してみましょう。

ファイルの編集は、画面左側のファイルファインダからファイルを選択してダブルクリックします。

"myapp/resources/view/welcome.blade.php"を開いて編集してみましょう。

f:id:paiza:20180216005750p:plain

<div class="title m-b-md">に囲まれた、タイトル部分を変更してみましょう。

myapp/resources/view/welcome.blade.php:

                <div class="title m-b-md">
                    Hello Laravel on PaizaCloud!
                </div>

f:id:paiza:20180216005922p:plain

編集したら、「保存」ボタンを押すか、「Command-S」または「Ctrl-S」で保存します。

データベースを作成

今度はこのアプリケーションで、データベースを使ってみましょう。

データベースサーバ(MySQL)はサーバ作成時に設定したので起動していますが、設定していない場合は、以下のように起動しておきましょう。

$ sudo systemctl enable mysql
$ sudo systemctl start mysql

PaizaCloudでは、このようにroot権限でパッケージをインストールすることもできます。

まずはMySQL上に、このアプリケーションで使うデータベースを作成します。

ここでは、mysqlコマンドを使って、"mydb"というデータベースを作ります。

以下のようなコマンドを実行します。

$ mysql -u root
create database mydb;

f:id:paiza:20180216010049p:plain

データベースが作成できました。

次に、アプリケーションでこのデータベースを使うように設定します。

データベースの設定はプロジェクトファイルの下の".env"というファイルでおこないます。

この".env"のような、ドット(".")で始まるファイルは隠しファイルで、ファイル管理ビューでは表示されていません。表示するためには、ファイル管理ビューの右クリックメニューから"隠しファイルを表示"を選びます。

f:id:paiza:20180216010145p:plain

".env"ファイルが表示されたら、ファイルを開き、"DB_DATABASE"、"DB_USERNAME"、"DB_PASSWORD"の3行を設定します。

パスワードは設定していませんので、"DB_PASSWORD"はコメントアウトしておきます。

myapp/.env:

DB_DATABASE=mydb
DB_USERNAME=root
# DB_PASSWORD=secret

テーブル、モデル等の作成

アプリケーションでこのデータベースを使う準備をします。

Laravelでは、データベースのテーブルや、関連するモデル、コントローラなどを"php artisan make:model"コマンドで作成することができます。

以下のコマンドを実行してみましょう。"-m"でマイグレーションファイルを作成し、"-c"でコントローラを作成し、"-r"でリソース操作に関連したメソッドも作成します。

$ php artisan make:model Task -m -c -r

これで以下のようなファイルが作成されました。

ファイル名 役割
database/migrations/2018_xx_xx_xxxxxxxx_create_tasks_table マイグレーションファイル
app/Task.php モデル
app/Http/Controllers/TaskController.php コントローラ

マイグレーションファイルでは、テーブル情報を設定しています。タスク名を表す文字列型のnameというカラムを追加してみましょう。

以下のように、マイグレーションファイルのSchema::create()呼び出しの中に、"$table->string('name');"を追加します。

database/migrations/2018_xx_xx_xxxxxxxx_create_tasks_table:

    public function up()
    {
        Schema::create('tasks', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->timestamps();
        });
    }

f:id:paiza:20180216010508p:plain

編集できたら、このマイグレーションファイルを実行して、テーブルを作成します。

$ php artisan migrate

テーブルが作成されました。なお、マイグレーションファイルを編集したあと、再度最初からテーブル作成を実行する場合は、"php artisan migrate:refresh"を実行します。

作成したデータベーステーブルのデータは、phpMyAdminでも確認できます。

PaizaCloudのブラウザ上で"http://localhost/phpmyadmin/"と入れてみましょう。

f:id:paiza:20180216010802p:plain

ルーティング設定

タスクリストでは、一覧表示、タスクの追加、タスクの削除の3つの操作を行います。

それぞれ、以下のようなルーティングを割り当てます。

メソッド パス名 操作
GET /tasks タスク一覧表示
POST /tasks タスク追加
DELETE /tasks/{id} タスク削除

ルーティング設定は"routes/web.php"で行います。トップページは"/tasks"にリダイレクトする設定にしておきます。また、すでに設定されているルーティングは削除しておきます。

以下のように、"routes/web.php"を設定します。

routes/web.php:

Route::get('/', function(){return redirect('/tasks');});
Route::get('/tasks', 'TaskController@index');
Route::post('/tasks', 'TaskController@store');
Route::delete('/tasks/{id}', 'TaskController@destroy');
\URL::forceScheme('https');

コードを見ていきましょう。Route::getはGETメソッドの設定で最初の引数はパスになります。

2番目の引数では、関数またはコントローラのアクションを設定します。

'GET /'に対しては、'/tasks'にリダイレクトします。

'GET /tasks'に対しては、TaskControllerコントローラのindexメソッドを呼び出す設定にします。

'POST /tasks'に対してはTaskControllerコントローラのstoreメソッドを、'DELETE /tasks/{id}'に対してはTaskControllerコントローラのstoreメソッドを呼び出す設定にします。

"{id}"のように記述することで、この部分の文字をプログラムから取得することができます。たとえば、"/task/1"の場合、"1"を$idとして取得できます。

また、PaizaCloudではHTTPSプロトコルを使いますので、"\URL::forceScheme('https')"で設定しておきます。この設定を行わないと、redirect()などが正しく行えません。

念のため、アプリケーション全体設定でも、HTTPSを使うように設定しておきます。アプリケーション全体の設定は、AppServiceProvider.phpのboot関数で設定できますので、以下のように記述しておきます。

Providers/AppServiceProvider.php;

class AppServiceProvider extends ServiceProvider
{
    ...
    public function boot()
    {
        \URL::forceScheme('https');
    }
    ...
}

コントローラ設定

ルーティングから呼び出されるコントローラのコードを記述しておきます。

一覧表示、追加、削除に対応する、index()、store()、destroy()関数を書いておきます。

app/Http/Controllers/TaskController.php:

<?php

namespace App\Http\Controllers;

use App\Task;
use Illuminate\Http\Request;

class TaskController extends Controller
{
    public function index()
    {
        $tasks = Task::all();
        return view('tasks', ['tasks' => $tasks]);
    }

    public function store(Request $request)
    {
        $task = new Task;
        
        $task->name = request('name');
        $task->save();
        return redirect('/tasks');
    }

    public function destroy(Request $request, $id, Task $task)
    {
        $task = Task::find($id);
        $task->delete();
        return redirect('/tasks'); 
    }
}

コードを見ていきましょう。

Taskモデルのクラスを"Task"として扱えるように"use App\Task;"とuse文を追加されています。この記述がないと、以後"Task"の部分を"\App\Task"のような表記で記述する必要があります。

一覧表示を行うindex()メソッドでは、TaskモデルのTask::all()メソッドを呼び出して、全てのタスクをデータベースから取得します。

取得したデータは連想配列(ハッシュ)に、'tasks'という名前のキーで設定します。これにより、ビュー(HTMLテンプレート)から$tasksという変数でタスク一覧が参照できるようになります。

タスク追加を行うstore()メソッドでは、Taskのオブジェクトを作成してnameプロパティにフォームから送信されたnameパラメータを設定し、$task->save()メソッドでデータベースに保存します。そして'/tasks'にリダイレクトして一覧表示を行います。

タスク削除を行うdestroy()メソッドでは、タスクモデルのTask::find()メソッドを呼び出して、タスクID($id)に対応するオブジェクトを取得します。$task->delete()で削除し、'/tasks'にリダイレクトします。

ビュー(HTML)の作成

次に、ビューを作成しましょう。ビューはHTMLファイルにPHPのコードを埋め込んで記述します。

Laravelでは、Bladeというテンプレートを用いることで、PHPをより簡潔に記述することができます。

ビューは1ファイルに記述してもいいのですが、複数のページに共通の内容は共通のレイアウトファイルを用意すると便利ですので、レイアウトファイルを作成してみます。

レイアウトファイルは"resources/views/layout.blade.php"という名前で作成します。

"resources/views"フォルダを右クリックして「新規ファイル」を選び、"layout.blade.php"ファイルを作成します。

作成したファイルは以下のように記述します。

resources/views/layout.blade.php:

<!DOCTYPE html>
<html>
    <head>
        <title>Task List</title>
        <!-- CSS And JavaScript -->
        <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">
    </head>
    <body>
        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

見栄えがよくなるように、シンプルなMilligramという簡単なCSSフレームワークを設定しておきました。

Milligramでは、クラス名を書かなくてもある程度HTMLをきれいに表示できます。

bodyタグの中では@yield('content')と書いてあります。この部分が、個別のページのHTMLファイルで置き換える部分です。

それでは、タスク一覧表示と、タスク追加のためのHTMLファイルを"resources/views/tasks.blade.php"という名前で作成します。

"resources/views"フォルダを右クリックして「新規ファイル」を選び、"tasks.blade.php"ファイルを作成します。

resources/views/task.blade.php:

@extends('layout')

@section('content')
    <h1>Task List</h1>
    <form action="/tasks" method="POST" class="form-horizontal">
        {{ csrf_field() }}
        <!-- Task Name -->
        <div class="form-group">
            <label for="task" class="col-sm-3 control-label">Task</label>
            <div class="col-sm-6">
                <input type="text" name="name" id="task-name" class="form-control">
            </div>
        </div>

        <!-- Add Task Button -->
        <div class="form-group">
            <div class="col-sm-offset-3 col-sm-6">
                <button type="submit" class="btn btn-default">
                    <i class="fa fa-plus"></i> Add Task
                </button>
            </div>
        </div>
    </form>

    <!-- Current Tasks -->
    <h2>Current Tasks</h2>
    <table class="table table-striped task-table">
        <thead>
            <th>Task</th><th>&nbsp;</th>
        </thead>

        <tbody>
            @foreach ($tasks as $task)
                <tr>
                    <!-- Task Name -->
                    <td>
                        <div>{{ $task->name }}</div>
                    </td>
                    <td>
                        <form action="/tasks/{{ $task->id }}" method="POST">
                            {{ csrf_field() }}
                            {{ method_field('DELETE') }}                    
                            <button>Delete Task</button>
                        </form>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
@endsection

編集できたら保存ボタンを押してファイルを保存します。

ファイルを見ていきましょう。@content('layout')は、レイアウトファイル('layout.blade.php')を利用することを指定しています。

@section('content')から@endsectionの部分では、このページ独自の内容を記述します。この中身がレイアウトファイルの@yield('content')部分を置き換えます。

最初のフォームはタスク追加のためのフォームです。LaravelではCSRF対策のためフォームには"{{ csrf_field() }}"と記述する必要があります。

inputタグでは、nameという名前でタスクの名前を入力できるようにします。フォームの送信先は"POST /tasks"に設定します。

タスク一覧では、$tasks配列でタスク一覧オブジェクトにアクセスできます。「@foreach ($tasks as $task)」はBladeの記法で、PHPでの「<?php foreach($tasks as $task){ ?>」にあたり、$tasks配列からタスクオブジェクトを1つずつ取得して$task変数に設定します。

「{{ $task->name }}」もBladeの記法で「{{}}」の中身を表示します。PHPの「<?= $task->name ?>」にあたります。ここでは、タスクのnameプロパティを取得することで、データベースのnameカラムの値を表示します。

"Delete Task"ボタンでは、"DELETE /tasks/{id}"を呼び出すことで、タスクを削除します。HTMLでは直接DELETEメソッドは扱えないので、"method_field('DELETE')"で擬似的にDELETEメソッドとして呼び出します。

モデルファイル

モデルファイルの中身も見てみましょう。以下のようにクラスの中身は空っぽです。

実は、特に設定する必要はありません。LaravelのモデルはEloquentと呼ばれるORMが利用でき、テーブルのカラム名から自動的にプロパティ名を設定しています。便利ですね。

app/Task.php:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Task extends Model
{
    //
}

動作確認

プログラムは以上です。実際に動かしてみましょう。

ブラウザアイコン(8000)をクリックして、PaizaCloud内のブラウザを起動します。

最初はタスクはないのですが、"Task List"ページが表示されています。

タスクの追加や削除もやってみましょう。

f:id:paiza:20180216011331p:plain

動きましたね!Laravelで作ったタスクリストの完成です!

なお、PaizaCloudの無料プランでは、一定時間が経つとサーバは停止します。継続的に動かしたい場合は、ベーシックプランへアップデートしてください。

詳しくはこちら https://paiza.cloud

まとめ

というわけで、PaizaCloudを使って、開発環境を構築することなく、ブラウザだけでLaravelのウェブアプリケーションを作ってみました。

すぐに作れるので、みなさんもぜひ試してみてください!

(何かサービスができたらpaiza(@paiza_official)まで教えてくれるとうれしいです!)


PaizaCloud」は、環境構築に悩まされることなく、ブラウザだけで簡単にウェブサービスやサーバアプリケーションの開発や公開ができます。 https://paiza.cloud


paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

paizaのスキルチェック

面倒な作業不要で、Webアプリ開発が劇的にはかどる!至高のJavaScriptライブラリ6選

f:id:paiza:20180214151724j:plain
どうも、まさとらん(@0310lan)です!

今回は、Webサービスアプリ開発などにとても便利なJavaScriptライブラリを厳選してご紹介しようと思います!

強力な独自機能を簡単に追加できるものやトレンドに合わせたWebデザインを構築できるもの、そのままWebサービスとして利用できるものまで、ピックアップしてみました。

これからWeb開発を始めようという人はもちろんですが、開発ネタに困っている人も何か良いアイデアが発見できるかもしれないので、ぜひ参考にしてみてください!

■波形表示やプレイヤーも作れる高機能な音楽ライブラリ!

wavesurfer.js

f:id:paiza:20180214151848j:plain
音声ファイルを読み込むだけでグラフィカルな波形表示が可能で、多彩なオプションを利用することで自在に音声を制御できるJavaScriptライブラリです。

音声の再生・早送り・巻き戻し・ミュートなどの基本機能はもちろん、音声の書き出し、オーディオエフェクトの活用、フィルターを使ってイコライザーのように周波数帯域を調整することも可能です。


基本的な使い方としては、まず最初にHTML側で音声の波形を表示する領域を作ります。

<!-- ここに波形が表示される -->
<div id="waveform"></div>


次に、WaveSurferインスタンスを作って音声ファイルを読み込むだけで完了です!

//HTML側のdiv要素を指定してインスタンスを作成
var wavesurfer = WaveSurfer.create({


    container: '#waveform'


});




//音声ファイルを読み込む(mp3, wav, oggなど)
wavesurfer.load('sample.wav');


たったこれだけで、以下のような波形が表示されます!
f:id:paiza:20180214152013j:plain


豊富なメソッドやイベント処理も用意されており、例えば音声を再生したければ以下のように「play()」を実行するだけです。

wavesurfer.on('ready', function () {


    wavesurfer.play();


});

他にも、「pause()」「stop()」「zoom()」など直感的に分かるメソッドがたくさん用意されているので便利です。(メソッド一覧参照)

波形の拡大表示やイコライザーなどのサンプルデモは、以下のリンクから実際に試すこともできるので参考にしてみてください!

Wavesurfer.jsのサンプルデモ

さらに、プラグインによる拡張機能も提供されており、タイムライン・マイク入力・プレイリスト・指定範囲のループ再生…など、強力な機能を簡単に導入できます。(プラグインデモ一覧


<参考>

■リアルタイムコラボを超簡単に実現するライブラリ!

TogetherJS

f:id:paiza:20180214152144j:plain
非常に簡単な手順で、Webの画面を複数人でリアルタイムにコラボ連携することが可能になるJavaScriptライブラリです。

自動で生成されるURLをシェアするだけなので、遠く離れた人とすぐに画面を共有したりチャットしたりできるのが魅力的です。


実装方法は驚くほど簡単で、ライブラリを読み込んだら以下の1行を記述するだけです!

//リアルタイムコラボを実行する
TogetherJS( this );


これだけで、すぐに複数人と繋がれます!
f:id:paiza:20180214152257j:plain
リアルタイムに相手の「マウスカーソル」の軌跡やクリックも把握できるうえ、チャットで話しかけることも可能になっています。

また、オプション設定も豊富に揃っており、メニューアイコンの個別表示・非表示や日本語化・エフェクト編集…など、自分好みにいろいろカスタマイズできる点もオススメです。
(オプションの一覧はコチラ

「ToghterJS」のさらに詳しい使い方は、以下の記事でまとめているのでぜひ参考にしてみてください!
paiza.hatenablog.com


<参考>

■多機能なマークダウンエディタを搭載できるライブラリ!

SimpleMDE

f:id:paiza:20180214152353j:plain
マークダウンで記述しながら同時にプレビューもできるテキストエディタ」で、多彩なオプション設定を利用しながら自由なカスタマイズが可能なJavaScriptライブラリです。

「オートセーブ」機能を使った文書の保存や、ショートカットキーを自由に設定したり入力したテキストの書き出し…など、かゆいところにも手が届く多機能なところも魅力です。


基本的な使い方も非常に簡単で、まずは一般的な「textareaタグ」を配置します。

<!-- ここにマークダウンエディタが表示される -->
<textarea></textarea>


そして、SimpleMDEのインスタンスを作成するだけで完成です!

//インスタンスを作成する
var mde = new SimpleMDE();


実際に実行してみると、普通の「textareaタグ」が多機能なマークダウンエディタに早変わり!
f:id:paiza:20180214152443j:plain


また、多彩なオプション指定が可能になっており、例えば「オートセーブ」機能を利用するには以下のように記述します。

var mde = new SimpleMDE({


    autosave: {
        enabled: true,  //オートセーブ機能をON
        uniqueId: "sample",  //ユニークIDの設定
        delay: 1000,  //1秒間隔で保存
    }


});

オプションはオブジェクト形式で設定が可能で、オートセーブに必要な記述は上記の3つだけです。

これで、1秒間隔で自動保存されるようになります。

同様の手順でエディタのメニューアイコンの順序・追加の編集や、独自ショートカットキーの作成などもできるので便利です。


<参考>

■高品質な日本語の音声ボイスを合成できるライブラリ!

VoiceText Wdb API

f:id:paiza:20180214152634j:plain
日本語の文字列を指定するだけで、自然な抑揚を付けて喋ってくれたり音声ファイルを取得したりできるJavaScriptライブラリ(Node.js)です。

日本語の音声ファイルを手軽に合成できるライブラリはあまり存在しておらず、なおかつ簡単なプログラムで利用できるのはかなり貴重だと思います。

2018年2月時点で、Java / Python / Go / Ruby / Node / PHP…など11種の言語で簡単に利用できるライブラリが提供されているのも魅力の1つでしょう。


ここでは、Node.jsを使った基本的な使い方をご紹介しておきます!

まずは必要なモジュールの読み込みやAPIキーの設定をします。(Nodeライブラリのマニュアルはコチラ

var fs = require('fs');
var VoiceText = require('voicetext');
var voice = new VoiceText( 自分のAPIキー );

APIキー」は公式サイトから無料の利用登録をすると入手できます。

合成された日本語音声ファイルを書き出す場合は、「fsモジュール」も一緒に読み込んでおきましょう!


次に、「音声(人物)」の指定と「テキスト・書き出し」の設定を以下のように行います。

voice
.speaker( 人物の指定 )
.speak( 日本語の文字列, ファイルの書き出し設定 )

「音声(人物)」は男性・女性などいくつかのキャラクターから選択し、喋らせたいテキストの指定(200文字以内)と書き出し設定をすればOKです。

具体的には、次のように記述すれば音声ファイルを取得することができます!

voice
.speaker(voice.SPEAKER.HIKARI)
.speak('今日も良い天気ですね!', function(e, buf) {


    return fs.writeFile('./test.wav',buf, 'binary');


});

「HIKARI」という名前の女性音声を選択し、しゃべらせたい言葉を設定したあとに「test.wav」という名称で音声ファイルに書き出しています。

他にも、感情表現を設定したりピッチ・音量・速度などのオプション指定をしたりすることが可能です!
(商用利用・配布などをしない限りは無料で利用できます…)


<参考>

■グリッドレイアウトを究極にカスタマイズできるライブラリ!

Muuri

f:id:paiza:20180214152829j:plain
PC・スマホに対応する可変式のグリッドレイアウトを簡単に構築でき、特定の要素をフィルタリングしたりソートしたりすることも可能JavaScriptライブラリです。

Web Animations」「Hammer」と組み合わせることで、自然なアニメーションが実現し、ドラッグ&ドロップによる要素の移動などもできるようになります。


基本的な使い方として、まずはHTMLにレイアウト要素を以下のように記述します。

<div class="container">
  
    <div class="outer">
        <div>アイテム1</div>
    </div>


    <div class="outer">
        <div>アイテム2</div>
    </div>
    ・
    ・
    ・


</div>

この例では、一番外側に「.container」でグリッド要素を囲んでいます。

1つずつのグリッド要素に関しては「.outer」で囲み、その中に表示させたい要素を記述するのが基本となります。


CSSで体裁を整えたら、あとはJavaScriptで以下のように記述すればOKです!

var grid = new Muuri('.container', {


    dragEnabled: true,


});

これで、可変式のドラッグ&ドロップ対応レイアウトの完成です。


活用次第ではTrelloのような「カンバン」スタイルのWebアプリも簡単に実現できます!
f:id:paiza:20180214153011g:plain


ちなみに、HTML要素に任意の「data属性」を付与すれば、簡単にソートすることも可能です。

<div class="container">
  
  <div class="outer" data-sample="2">
    <div>アイテム1</div>
  </div>


  <div class="outer" data-sample="3">
    <div>アイテム2</div>
  </div>


  <div class="outer" data-sample="1">
    <div>アイテム3</div>
  </div>
  ・
  ・
  ・


</div>

このようにdata属性を付与して数値を指定します。


JavaScript側で初期設定として「sortData」を指定し、任意のタイミングで「sort()」を実行すれば要素を並び替えてくれます!

var grid = new Muuri('.container', {  


  sortData: {
    bar: function (item, element) {


      return element.getAttribute('data-sample');


    }
  }


});




//レイアウトを初期化して再配置する
grid.refreshSortData();
grid.sort('bar');

要素の種類・ジャンル・カテゴリなどを利用して、簡単にアニメーションさせながら並び替えられるので、見た目にも楽しいサイトを構築できるでしょう。


<参考>

■独自のWebオーサリングツールを構築できるライブラリ!

GrapeJS

f:id:paiza:20180214153213j:plain
ドラッグ&ドロップでWebサイトを構築できるサービスはいくつかありますが、このライブラリを使うと完全にカスタマイズ可能な「Web製作エディタ」を丸ごと作ってしまうこともできるスグレモノです!

エディタ自体は、ヘッダー・テキスト・画像・スライダーなどのコンテンツをドラッグ&ドロップで追加していくだけでWebサイトを簡単に構築できるようになっています。

面白いのは、それらの機能をすべて自分でカスタマイズしたり、独自の機能を追加したりが自由にできる点です。


「GrapeJS」の基本的な使い方ですが、ライブラリを読み込んだあとにエディタを表示する領域を作ります。

<!-- ここにエディタが表示される -->
<div id="gjs"></div>


そして、この領域の「id属性値」を使ってJavaScriptに以下の記述をするだけで準備完了です!

var editor = grapesjs.init({


    container : '#gjs'  //HTML側の表示領域を指定する


});


実行するとブラウザにWeb製作エディタが表示されます!
f:id:paiza:20180214153312j:plain


さらに、既存のHTMLとCSSソースコードを指定することで、そのままGrapeJSのエディタで製作をすることも可能です!

var editor = grapesjs.init({


    container : '#gjs',
    components: 'ここにHTMLを指定する',
    style: 'ここにCSSを指定する'


});

「conponents」にHTMLを指定して「style」にCSSを設定するだけで、エディタ側に反映されるわけです。

他にも多くのオプションやメソッドが用意されているので、独自の機能やアイコンメニューなどを構築することもできます。

詳しいカスタマイズ方法は、以下の記事でまとめているのでぜひ参考にしてみてください!
paiza.hatenablog.com

<参考>

■「JavaScript入門編」も公開中!動画でプログラミングが学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、JavaScript入門編を全編無料公開しております。

「ライブラリを使うどころか、プログラミング初心者なのでまずJavaScriptの基礎から学びたい…」という方はぜひごらんください。

JavaScript入門編のほかにも、HTML/CSSPythonJavaC言語C#PHPRubySQLなど、プログラミング初心者でも動画で学べる入門レッスンが多数ございます。ただいま人気の「Python入門編」「C#入門編」なども無料公開しています。
paizaラーニング

■まとめ

今回は、Web開発に使える便利なJavaScriptライブラリを厳選してご紹介してみました。

いずれも無料で利用できるものばかりなので、気になったライブラリがあったらまずは試してみるといいでしょう。

JavaScriptライブラリは毎日のように新しいものが誕生しており、今話題の仮想通貨にも利用されている「イーサリアム」をWeb開発に組み込めるライブラリなども公開されていて面白いです。

ぜひ、みなさんもこれらのJavaScriptライブラリを活用して、Web開発を楽しんでみてください!





paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

paizaのスキルチェック

初心者でもPythonの数値計算ライブラリ「NumPy」の使い方が学べるコンテンツ6選

f:id:paiza:20180209185426j:plain
Photo by thekirbster
f:id:paiza:20140916135428p:plainこんにちは。谷口です。

最近は機械学習が流行っていることもあって、Numpyなどの数値計算系のPythonライブラリなどが人気ですよね。

NumPyは機械学習データマイニングディープラーニングなどでも非常によく利用されているPython数値計算ライブラリです。

Pythonは、数値計算を素直に書くと処理が遅めな言語ではありますが、NumPyを使えばC言語のネイティブコード上で計算してくれて、処理がとても早くなります。

今回は、初心者の方でもNumpyの使い方を学べるコンテンツを6件ご紹介していきます。

■初心者でもNumpyの使い方を学べるコンテンツ

Numpyの公式ドキュメントとチュートリアル

f:id:paiza:20180213112034j:plain
「配列の基本の使い方」といった、Numpyの基礎的な部分は公式ドキュメントとチュートリアルで学べます。

SciPy Cookbook Numpy

f:id:paiza:20180213133057j:plain
公式のCookbookです。よくある使い方集という感じで使えます。

YouTubeの解説動画

YouTubeにもNumpyのチュートリアルや使い方を解説した動画がいくつか公開されているので、「テキストを読んでるだけじゃよくわからない!誰か教えて!」という人には参考になると思います。※もちろん英語です

◇numpy tutorial/codebasics

www.youtube.com

100 numpy exercises

f:id:paiza:20180213112909j:plain
Numpyの練習問題集です。

チュートリアル

◇paizaで以前書いた記事

paiza.hatenablog.com

以前paizaのエンジニアが書いたNumpyの環境設定~チュートリアルの記事です。

これに限らずNumpyのチュートリアル記事はいろいろ公開されています。公式チュートリアルが終わってもう少し踏み込んでみたい人は、検索して下記のようなチュートリアル記事を探してみたり、練習用に使えるscikit-learn付属のデータセットを拾ってきて自分でいろいろ計算してみるのがよいかと思います。

◆番外編:数値計算・分析等の練習に使えるデータセット

5.17. Iris Plants Database

scikit-learnに付属しているIris(アヤメの花の計測データ)のデータセット

■まとめ

ライブラリの使い方を学ぶためには、実際に自分でも手を動かすことが重要です。データをもとにいろいろ計算したり分析したりして、使ってみるといいでしょう。

Python数値計算用ライブラリでは、NumPyが基本のライブラリというか、定番として多くの人に使われているので、覚えておいて損はないと思います。


「Numpyどころかプログラミング自体が未経験なので、まずはPythonを使えるようになりたい!」という方は、プログラミングが動画で学べる「paizaラーニング」の「Python入門編」(先月から全編無料になりました)から始めてみるのもおすすめです。
paizaラーニング





paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。