【初心者向け】Laravel(PHPフレームワーク)入門②を受けてみた!

【初心者向け】Laravel(PHPフレームワーク)入門②

2019年04月16日

BIOS Bootcampという勉強会に参加してきました!

前回に続く、Cloud9でLaravelを勉強したいという人たちの集まり。

次回は、デジハリを出て、もくもく会pythonブロックチェーンを学ぶそうです。

本日のお題、このブログの終わりにはCloud9で

  • アプリにLOGINする機能
  • アプリにREGISTER(ユーザー登録) する機能
  • ログアウト機能
  • blogs add(ブログ)を投稿する機能

以上の4っつの機能があるブログができます。

また、ログイン中のみblogsが表示できる機能に

早速、cloud9にログインします。

https://c9.io/login

ワークスペースの作成

画面真ん中にある、Workspacesの下にある、Create a new workspaceをクリックします。

Create a new workspaceが表示されたら、作りたいワークスペース情報を入れます。

Workspace nameのyour-project-nameに作りたいプロジェクト名を入れます。

Descriptionは、プロジェクトの説明を入れても入れなくても大丈夫です。

Teamは、項目があれば、Don't set a team for this workspaceをセレクトボックスより選びます。

Hosted workspaceはPrivateまたは、Publicを選びます。

Choose a templateは、PHPを選択します。

最後にCreate workspaceボタンをクリックします。

Cloud9のPHPバージョンを確認

ワークスペースにあるターミナルより、bash - “[ユーザー名]-[ワークスペース名]-0000000” タブがブラウザー下部にあると思います。$の後に入力します。

$ php -v

PHP 5.5.9-1ubuntu4.22 (cli) (built: Aug 4 2017 19:40:28)

Composerが入っているか確認

$ composer

Composer version 1.5.1 2017-08-09 16:07:22

PHPのバージョンアップ

$ sudo add-apt-repository ppa:ondrej/php

Press [ENTER] to continue or ctrl-c to cancel adding it

ENTER キーをクリックします。

$ sudo apt-get update
$ sudo apt-get install libapache2-mod-php7.2

Do you want to continue? [Y/n]

Yキー→ENTERキーの順にクリックします。

$ sudo a2dismod php5
$ sudo a2enmod php7.2
$ sudo apt-get install php7.2-dom php7.2-mbstring php7.2-zip php7.2-mysql

Do you want to continue? [Y/n]

Yキー→ENTERキーの順にクリックします。

$ php -v

PHP 7.2.17-1+ubuntu14.04.1+deb.sury.org+3 (cli) (built: Apr 10 2019 11:00:00) ( NTS )

フレームワークの準備

PHPのバージョン指定をすることができます。今回は、LTSのLaravel5.5をインストールしています。

$ composer global require "laravel/installer"
$ composer create-project laravel/laravel cms 5.5.* --prefer-dist

環境変数の設定

Cloud9のファイルツリー[ワークスペース名]/cms / .env ファイルを修正します。

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=c9
DB_USERNAME=njtakayuki0816
DB_PASSWORD=

ドキュメントルートの変更

$ sudo vim /etc/apache2/sites-enabled/001-cloud9.conf

DocumentRoot /home/ubuntu/workspace

から

DocumentRoot /home/ubuntu/workspace/cms/public

に変更します。

解説

$ sudo vim /etc/apache2/sites-enabled/001-cloud9.conf コマンドを入力すると

sudoは、ルートユーザー権限でsudo 以下のコマンドを実行します。

  • vim とはテキストエディターです。

/etc/apache2/sites-enabled/001-cloud9.conf は

/etc/apache2/sites-enabled/ 以下にある、 001-cloud9.confを変更します。

.conf ファイルは設定情報が記述されています。

vi エディターはi キーをクリックすることで入力モードにします。

矢印キーで修正したいところにカーソルを合わせて修正します。

esc キー をクリックして :wq! で保存してviエディターを終了します。

AppServiceProviderの修正

Cloud9のファイルツリーより

[ワークスペース名]/cms/app/Providers/AppServiceProvider.php

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Schema;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        //
        Schema::defaultStringLength(191);
    }

    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }
}

composerのupdate

$ pwd 

/home/ubuntu/workspace

$ ls

README.md cms/ hello-world.php php.ini

cms/ があることを確認します。 続いてcms/に移動します。

$ cd cms
$ composer update

phpmyadminのインストール

$ phpmyadmin-ctl install

確認

cloud9のメニューにある Run Projectボタンをクリックします。

cloud9のターミナルが、Apache & PHP - Running タブが開き、

Starting Apache httpd, serving https://[ワークスペース名]-[ユーザー名].c9users.io/. をクリックすると

Openをクリックします。

Laravel のwelcome画面が表示されたことを確認します。

サーバーの停止

Cloud9のメニューより、Stop ボタンをクリックします。

scaffoldでCRUD一発生成

Laravelのscaffoldとは、CRUD ... Create(生成)、Read(読み取り)、Update(更新)、Delete(削除)の機能を簡単に作成することができます。

階層の確認

$ pwd

/home/ubuntu/workspace/cms

cmsにいることを確認します。

パッケージのインストール

$ composer require 'laralib/l5scaffold' --dev

解説

'laralib/l5scaffold’という(パッケージ)を --dev(開発環境)にcomposer require(インストール)します。

app.phpの修正

cms/config/app.phpファイルの ’providers' => [ に一行追加します。

    'providers' => [
         /* ここは何行か記載があります。 */
        App\Providers\RouteServiceProvider::class, /* この下に追加 */
        Laralib\L5scaffold\GeneratorsServiceProvider::class, /* ここを追加 */

    ],

scaffoldを使用するために設定を修正

2つファイルを変更します。

[ワークスペース名]/cms/vendor/laralib/l5scaffold/src/Commands/ScaffoldMakeCommand.phpの3箇所を修正します。

5行目

use Illuminate\Console\AppNamespaceDetectorTrait;

use Illuminate\Console\DetectsApplicationNamespace;

にします。

-21行目

use AppNamespaceDetectorTrait, MakerTrait;

use DetectsApplicationNamespace, MakerTrait;

246行目 - 249行目の後に

        return $names[$config];


    }

/ 以下の行を追加する /

public function handle() { return $this->fire(); }

次のファイルを修正します。

[ワークスペース名]/cms/vendor/laralib/l5scaffold/src/Makes/MakeController.phpの二つの箇所を修正します。

4行目
use Illuminate\Console\AppNamespaceDetectorTrait;

use Illuminate\Console\DetectsApplicationNamespace;

に変更します。

13行目
use AppNamespaceDetectorTrait, MakerTrait;

use DetectsApplicationNamespace, MakerTrait;

に変更します。

php artisan

$ php artisan make:scaffold blog --schema="title:string, price:integer, body:text, published:datetime"

解説
artisan → アルチザンと呼びます。
Laravel を構成しているコマンとラインインターフェースの名前です。
make:scaffold blog → blogというスキャフォールドアプリを作成します。
--schema="title:string, price:integer, body:text, published:datetime" → --schema オプションといいテーブルの作成や操作をサポートします。
title:string, string型のtitleというカラム
price:integer, integer型のpriceというカラム
body:text, text型のbodyというカラム
published:datetime datetime型のpublishedというカラム

cms/routes/web.phpに一行追加

Route::resource('/blogs’, 'BlogController');

これを最終行(18行目)に追記する。

Migrationコマンドを実行

$ php artisan migrate

ログイン機能を追加

$ php artisan make:auth

Authentication scaffolding generated successfully.

ブラウザーより確認します。

Cloud9のメニューバーにあるRun Projectをクリックします。

Cloud9のターミナルにある、Apache & PHP - Runningタブより、

https://[ワークスペース名]-[ユーザー名].c9users.io/. をクリックしてOpenをクリックします。

Laravel の welcome 画面が表示されたら、

https://[ワークスペース名]-[ユーザー名].c9users.io/login とブラウザーのurlの後にloginを追記してください。

cssが反映しない?

Laravelの仕様のようで、httpsからhttpに変えて見てみます。

ユーザー登録画面の確認

ユーザーログイン画面の確認が完了したら、ユーザー登録画面(Register)を確認します。

Login画面にある メニューバーにあるRegisterをクリックします。

Register 画面が表示できたらOKです。

ユーザーの作成

Register 画面より、Name、E-Mail Address、Password、Confirm Password(パスワードの確認)を入力して、 Registerボタンをクリックします。

home画面

ユーザーが登録されると、URL の最後が home になります。

Blog一覧画面

http://[ワークスペース名]-[ユーザー名].c9users.io/blogs

urlにblogsを足すと一覧が表示されます。

  • Create ボタンをクリックしてブログ登録画面を表示させます。

Blogs/Create画面

Title →【教室変更・初心者向け】Laravel(PHPフレームワーク)入門

Price → 100

Body → テスト

Published → 2019/04/19

を入れて、Create ボタンをクリックします。

登録すると Blogs一覧画面にBlogが登録されます。

Blogs の確認

urlの後にphpmyadmin を入れます。

https://[ワークスペース名]-[ユーザー名].c9users.io/phpmyadmin/

ユーザー名のみ入れて、実行ボタンをクリックします。

左側のメニューにあるc9をクリックします。

blogsをクリックします。

画面真ん中に投稿した記事があることを確認します。

以上で終わりです。

強くてニューゲーム

各ページ間の遷移 ユーザーをログアウトしたらBlogsの投稿画面が表示ないようにします。

今回はログアウト時の対応をします。

まずはlogoutします。

http://[ワークスペース名]-[ユーザー名].c9users.io/home

より右上にあるユーザー名をクリックして、Logoutをクリックします。

ログアウトするとLaravelのwelcome画面が表示されたかと思います。

http://[ワークスペース名]-[ユーザー名].c9users.io/blogs

urlに blogsを追記してみてください。

見れますね。このページは誰もがurlを入れるとみれてしまいます。

blogsページは投稿側のダッシュボード的役割を果たします。

なのでログアウトした場合は見えないようにします。

[ワークスペース名]/cms/app/Http/Controllers/BlogController.php

class BlogController extends Controller {}

BlogController 内に、

public function __construct()
    {
        $this->middleware('auth');
    }

を追記する。

logout時の確認

Cloud9のメニューバーにあるRun Projectボタンをクリックします。

ブラウザーより、

https://[ワークスペース名]-[ユーザー名].c9users.io/blogs

を表示しようとするとLogin画面にリダイレクトされます。

ログインしてみましょう。

http://[ワークスペース名]-[ユーザー名].c9users.io/blogs

が見えます。

基本情報技術者試験の前に読むといい良本それは、基礎からのプログラミングリテラシー

基礎からのプログラミングリテラシーという本を読みました!

増井敏克さん著です。

gihyo.jp

大学やデザインの学校を卒業したてや、在学中に、アプリ制作が興味があるひとに向けた教科書です。

本書では、基本情報技術者試験のような全ての情報技術を学んでから挑むような内容から、現代に必要な、 部分を抜き取ってまとめてある良書です。

ちょこっと内容を。本書では、アジャイルという言葉があります。

ウォーターフォールは覚えていましたが、アジャイルという開発方法、私は忘れていました。

言葉は聞くけど詳しくは?の状態でした。図解も入れてあって本書は、わかりやすかったと思います。

このように、本書は最新の言葉にも対応していて何年か業界にいる方にも読んで楽しめる構成だと思います。

情報を抜き取っているが、解説が親切に記載されていてよかったと思います。

もし、この本を見てもっと詳しく知りたくなった場合にも対応していて推薦図書制度があるのも 良書だと思います。

もしよかったら購入して読んでください。

gihyo.jp

【教室変更・初心者向け】Laravel(PHPフレームワーク)入門

【教室変更・初心者向け】Laravel(PHPフレームワーク)入門を受講してきました。

今回は、Laravelの準備とMySQLの準備?を学びました。次回は他の項目も学びたいと思います。

開催日時

2019年04月09日

イベントURL

biosbootcamp.connpass.com

本ブログでこんな人に向けて書かれています

  • windows macOS Linux 色々なOSでもネット環境があればLaravelの開発がしたい。
  • Cloud9でLaravel開発の準備(Laravel ・ MySQL)ができます。

講義内容

今回はCloud9で作成します。

Cloud9は、Amazon Web Services(以下、AWS) によって買収され、現在では事前に
AWS Cloud9(ブラウザのみでコードを記述、実行できるクラウドIDE)|AWS
にある、AWS アカウントを今すぐ無料で作成 >> をクリックして、AWSのアカウントを作成します。 ※ クレジットカードが必要です。

続いて、作ったアカウントでCloud9にloginします。
https://c9.io/login

Workspace の作成

ダッシュボードの真ん中にあるWorkspacesという文字を確認したら、
Create a new workspace をクリックします。

Create a new workspace が表示されたら、

  • Workspace nameに作りたいproject name(英数字)を入れます。

  • Team (項目があったら)
    Don't set a team for this workspaceを選択します。

  • Hosted workspacePrivateまたはPublicを選択します。

  • Choose a templatephpを選択します。

最後に、Create workspace をクリックしてワークスペースを作成します。

Cloud9の画面構成

Cloud9の画面構成
画面構成

この画面をCloud9のワークスペースとします。

Cloud9のメニューバーにある、Run Project をクリックします。

Run ProjectStopになったことを確認します。

ターミナルにApache & PHP - Runningタブが追加された事を確認します。

中にStarting Apache httpd, serving https://[ワークスペース名]-[ユーザー名].c9users.io/.が表示されているかと思います。

ターミナルの中でクリックし、https://[ワークスペース名]-[ユーザー名].c9users.io/. をマウスカーソルを合わせると、 指マークになると思います。 クリックしてみてください。

セレクトボックスが表示され、Openをクリックします。

f:id:firebasewata:20190410232436p:plain

こちらが表示されたら、Open the App ボタンをクリックします。

Index of /  
[ICO]   Name    Last modified   Size    Description  
[   ]   README.md   2017-08-31 12:41    1.0K     
[   ]   hello-world.php 2017-08-31 12:41    261  
[   ]   php.ini 2017-08-31 12:41    67K  
Apache/2.4.7 (Ubuntu) Server at [プロジェクト名]-[ユーザー名].c9users.io Port 443  

こちらが表示されたら、hello-world.phpをクリックします。

Hello world from Cloud9!

こちらが表示されたらOKです。

Cloud9のワークスペースを再度表示します。(GoogleChromeだとタブが複数できているので一つ前だと思います。)

メニューバーにあるStopをクリックします。

ターミナルのタブを、一番左にあるbash - “[ユーザー名]-[プロジェクト名]-[数字]”タブをクリックします。

Cloud9の環境確認

  • PHPのバージョン確認
$ php -v

PHP 5.5.9-1ubuntu4.22 (cli)

  • Composer のバージョン確認

Composer

$ composer

Composer version 1.5.1 2017-08-09 16:07:22

と表示されたらOKです。

  • ちなみに Composer とはなんでしょうか?

composer は ライブラリ(パッケージ)管理ツールです。
ライブラリ(パッケージ)とは phpの開発を楽にする処理・機能の集まりをライブラリ(パッケージ)といいます。

Cloud9のPHPのバージョンアップ

Cloud9のターミナルにあるbashタブを開きます。

  • 最新レポジトリの追加
 $ sudo add-apt-repository ppa:ondrej/php

途中で、

Press [ENTER] to continue or ctrl-c to cancel adding it

と出るのでエンターキーをクリックします。

解説

sudo : スーパーユーザー権限でコマンドを実行

add-apt-repository : 最新のリポジトリを追加

ppa:ondrej/php : Personal Package Archives の ondrejにあるphp

  • パッケージリストの更新
$ sudo apt-get update
  • パッケージのインストール
$ sudo apt-get install libapache2-mod-php7.2
Do you want to continue? [Y/n] 

と表示されるので Yキーを入力後 エンターキーを入力します。

  • PHP5を無効化
$ sudo a2dismod php5
  • PHP7 の有効化
$ sudo a2enmod php7.2
  • パッケージをインストール
$ sudo apt-get install php7.2-dom php7.2-mbstring php7.2-zip php7.2-mysql

Do you want to continue? [Y/n]  Yキーを入力後、エンターキーをクリックします。

PHP確認

$ php -v

PHP 7.2.17-1+ubuntu14.04.1+deb.sury.org+3 (cli) (built: Apr 10 2019 XX:XX:XX) ( NTS )

無事にバージョンアップできたことを確認します。

フレームワークの準備

 $ composer global require "laravel/installer"
  • Laravelのプロジェクト作成
$ composer create-project laravel/laravel cms 5.5.* --prefer-dist

Laravelのプロジェクトの完成を確認

Cloud9のメニューバーにあるRun Project をクリックします。

続いてCloud9のターミナルにあるApache & PHP - Runningタブより、

https://[プロジェクト名]-[ユーザー名].c9users.io/. をクリックします。

Openをセレクトボックスより選びます。

新しいブラウザーのタブが表示され、

Index of /  
[ICO]   Name    Last modified   Size    Description  
[   ]   README.md   2017-08-31 12:41    1.0K     
[DIR]   cms/    2019-04-10 XX:XX    -   
[   ]   hello-world.php 2017-08-31 12:41    261      
[   ]   php.ini 2017-08-31 12:41    67K  
Apache/2.4.7 (Ubuntu) Server at [プロジェクト名]-[ユーザー名].c9users.io Port 443  
  • cms/resources/views/の順にクリックします。

最後に、 welcome.blade.php をクリックすると。

Laravelのwelcome画面が表示されます。

laravelのwelcome画面
laravelのwelcome画面

  • サーバーを停止する

Cloud9のメニューバーより、Stopをクリックします。

ドキュメントルートの変更

Laravelのwelcome画面のurlは

https://[プロジェクト名]-[ユーザー名].c9users.io/cms/resources/views/welcome.blade.php

で表示されます。これを

https://[プロジェクト名]-[ユーザー名].c9users.io/で表示できるようにします。

conf設定ファイルの変更

Cloud9のターミナル(bash - "[ユーザー名]-[プロジェクト名]-6865378" )タブを開き、

$ pwd

/home/ubuntu/workspace

同じであることを確認します。

$ sudo vim /etc/apache2/sites-enabled/001-cloud9.conf
<VirtualHost *:8080>
    DocumentRoot /home/ubuntu/workspace
    ServerName https://${C9_HOSTNAME}:443

    LogLevel info

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

    <Directory /home/ubuntu/workspace>
        Options Indexes FollowSymLinks
"/etc/apache2/sites-enabled/001-cloud9.conf" 18L, 465C   

キーボードの英数キーにしたあとiキーをクリックしてvimエディターのINSERTモードに変更します。

この中から DocumentRoot /home/ubuntu/workspace

DocumentRoot /home/ubuntu/workspace/cms/public

に変更します。

vimエディターの保存方法は、escキーをクリックしたあと:wqと入れてenterキーをクリックします。

$ cd cms
$ pwd

/home/ubuntu/workspace/cms

  • composerをupdate
$ composer update

解説

composer update:composer.jsonをもとに各ファイルを最新版にアップデートします。

ドキュメントルート変更後の確認

Cloud9のメニューバーにある、Run Project ボタンをクリックします。

clound9ターミナルにある、Apache & PHP - Runningタブを開きクリックします。

https://[プロジェクト名]-[ユーザー名].c9users.io/.Open の順にクリックします。

https://[プロジェクト名]-[ユーザー名].c9users.io/ でLaravel のwelcome画面が表示されて事を確認します。

cloud9のメニューバーにある、Stop をクリックしてApache &phpを停止します。

mysqlを使ってみる

Cloud9のファイルツリーから[ワークスペース名]/cms/.env をダブルクリックして開く 修正箇所は8行目から13行目にあります。

DB_CONNECTION=mysql  
DB_HOST=localhost  
DB_PORT=3306  
DB_DATABASE=c9  
DB_USERNAME=ユーザー名  
DB_PASSWORD=  

DB_USERNAME=ユーザー名は、Cloud9のユーザー名です。

にします。

mysqlのデータベースに接続

Cloud9のターミナルのBashタブより、

$ mysql-ctl cli

ターミナルが $ から mysql> になったことを確認します。

データベースに接続

mysql> use c9;

Database changed

データベース一覧を表示

mysql> show databases;  

+--------------------+
| Database |
+--------------------+
| information_schema |
| c9 |
| mysql |
| performance_schema |
| phpmyadmin |
+--------------------+
5 rows in set (0.01 sec)

Cloud9のc9データベースがあることを確認します。c9データベースに接続します。

データベースの切断

mysql> exit;

データベースマイグレーション

データベースマイグレーションとは、DBに保存されたデータを保持したまま、テーブルの作成やカラムの変更などを行うことができます。

Cloud9の[ワークスペース名]/cms/app/Providers/AppServiceProvider.php

上記の階層にあるAppServiceProvider.phpを編集します。

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Schema;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        //
        Schema::defaultStringLength(191);
    }

    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }
}

マイグレーションファイルの作成

マイグレーションは、マイグレーションファイルをもとに行われるのでマイグレーションファイルを作成します。

$ php artisan make:migration [ファイル名] --create=[テーブル名]で作成できます。

$ php artisan make:migration test --create=test

Created Migration: 2019_04_10_100101_test

マイグレーションファイルの修正

Cloud9のファイルツリーより、[ワークスペース名]/cms/database/migrations にある先ほど作った、マイグレーションファイルを修正します。

2019_04_10_100101_test.php

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class Test extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('test', function (Blueprint $table) {
            $table->increments('id');
            $table->string('item_name');
            $table->integer('price');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('test');
    }
}

マイグレーションの実行

 $ php artisan migrate

テーブルが完成したか確認するためデータベースに接続

$ mysql-ctl cli

データベースの照会

mysql> show databases;

+--------------------+
| Database |
+--------------------+
| information_schema |
| c9 |
| mysql |
| performance_schema |
| phpmyadmin |
+--------------------+
5 rows in set (0.00 sec)

データベースへ接続する

mysql> use c9;

Database changed

テーブルの照会

mysql> show tables;

+-----------------+
| Tables_in_c9 |
+-----------------+
| migrations |
| password_resets |
| test |
| users |
+-----------------+
4 rows in set (0.00 sec)

マイグレーションによる変更の確認

show columns 構文は、特定のテーブル内のカラムに関する情報を確認します。

mysql> show columns from test;

+------------+------------------+------+-----+---------+----------------+
| Field | Type | Null | Key | Default | Extra |
+------------+------------------+------+-----+---------+----------------+
| id | int(10) unsigned | NO | PRI | NULL | auto_increment |
| item_name | varchar(191) | NO | | NULL | |
| price | int(11) | NO | | NULL | |
| created_at | timestamp | YES | | NULL | |
| updated_at | timestamp | YES | | NULL | |
+------------+------------------+------+-----+---------+----------------+
5 rows in set (0.01 sec)

mysqlの停止

mysql> exit;

Bye

以上でtestテーブルが完成しました。

==== 使うわない方がいいが、イベント時使ったコマンド === 全てのテーブルを削除してマイグレーションし直すコマンド

$ sudo php artisan migrate:fresh

Dropped all tables successfully.

s-dev talks 〜サービス開発勉強会〜「マネタイズ」

s-dev talks 〜サービス開発勉強会〜「マネタイズ」

というイベントに参加してきました!

マネーフォワードさんの会社をお借りしてLT会でした。

まず第一にオシャンティ!レインポーブリッジが見えるそうです。

会場の眺め
会場の眺め

これがレインボーブリッジですかね?

イベント企画のs-devグループ

職種を超えたイベントを作りたいそうです 今後が楽しみ

今回はマネタイズを考えるを題に様々な方々の発表がありました

家計簿アプリを作る会社さん

プレミアム課金 広告収入が主に収益

プレミアム課金とはアプリに特別な機能をつけて使いたい方のみ課金する仕組みを言います あってるかな?

家計簿アプリさんではアプリをローンチ(アプリを公開)してから半年後にプレミアム課金サービスを始めたそうです

サブスクありきでサービスは作らなかったそうです

ここで一つサブスクとはサブスクリプションの略でアプリを一定期間利用する事に対して代金を払うシステム 月額〇〇円という仕組みの事ですね

広告収入ではクレジットカードの広告バックが大きいそうです

あとユーザーアンケート顧客の満足度をあげるためにアンケートを多くとり、アプリ作成に反映しているそうです

年額プラン創設 年額プランの割引率など議論を続けたそうです。

一ヶ月無料で話がついたそうです。

無料プランから有料ユーザーにするには?

0から500円 500円から大きくするには?

色々アプリ作成するには考えることが多いですね。

料理支援システムを作ってる方

今回は学生の頃から作っていた開発のマネタイズについて発表

学生にはシステム作りは〇〇税がかかる!

1password

freee

ドメイン

aws

apple

など〇〇税が多く大変だったそうです

個人開発もユーザーファーストなモノ作り

広告はブログ(アプリなど)購読者 使用者が多ければ成り立つ

月額課金は自分達で完全にコントロールできるので収益改善のアクションが取りやすい

アフェリエイト

年額プランを導入するにあたり、ユーザーのメリット、事業のメリットを考える必要がある

ユーザーがどのくらい継続するかを予測して金額設定をする

ブラウザーを作っている

広告などの導線を改善した

驚いた事はボタンに丸みをつけることで10%上がったこと

マネタイズできたらやる事 = 納税。雑所得 or 事業所得 / 節税を考える

マネタイズ開始の判断ポイント 

サービス利用指標

ユニットエコノミクスの証明 → 1顧客から得られる利益

キャッシュフロー → 現金の流れを意味する

ブラウザーの収益モデルは 

「月額課金」

「ネイティブ広告」

アフェリエイト広告」

プレミアム課金については

「広告ブロック」

「プレミアムジェスチャー

「2画面機能」この機能は面白いですね!

などの機能で月額課金ユーザーを取得している

エンジニアの出会いの場を発表

出会いの場をもっと 手数料で収益をかなり面白いと思いました

以上でこのイベントの報告は終わります

Nuxt + TypeScript + Firebase でVuex&TSを学ぶハンズオンに参加してきました。

このイベントは株式会社 ROLO

https://rolo.jp/

 の技術者集団チーム JavaScript Builders の勉強会です

 

js-builders.connpass.com

 

こちらをみ参照してくれるとわかるんですが、参加者9人のところ、申し込み者は、補欠者72人。

人気なイベントである事が伺われます。

 

このイベントを通して、毎回参加者を少数にしているのは、素晴らしいROLOのメンバーがサポートできる範囲でやりたいという気持ちがあるからこそだと思います。

 

実際、参加してみると、ROLOのメンバーが、細かいところまで教えてくれて、
遅れやエラー表示に対応していただけます。

 

会場の写真

 

また、今回の会場は、株式会社TRASTAのオフィスをお借りしました。凄い綺麗。

 

今回の内容は、前半(Nuxt + TypeScript)の講義、 後半(Nuxt.jsとFirebaseのアプリ)作成と、かなりのボリューム。

 

(1) typescript の解説

はじめにtypescriptはマイクロソフト社によって開発されたプログラミング言語

typescriptは大規模なアプリにも対応してます

typescriptはjavascriptのスーパーセット

スーパーセットって?

javascriptの機能も使えるし、それ以上にtypescriptの機能が使えることをスーパセットという。

歴史は2012から始まる。

どこが大規模向きなの?

型が使えることで堅牢性が上がった。例えば、登録フォームに意図しないデータのやりとりがなくなった。

インターフェースを使う事で、オブジェクト指向な開発ができるようになった。

静的型づけとは変数に格納できる型を固定できる。

(2) typescriptを使ってみる

TypeScript CLIのインストール

$ npm install -g typescript

作業ディレクトリの作成

初期化

$ npm init -y

Typescriptのライブラリのインストール

$ npm install --save-dev typescript

型定義ファイルのインストール

$ npm install --save @types/node

 ソースコードを置くディレクトリの作成

tsconfig.json ファイルを作成

ソースコードを置くディレクトリにXXX.tsファイルを作成

tscコマンドを実行してコンパイル

コンパイルしたファイルを実行の流れ!

インターフェースも勉強させていただきました!

 

後半は、Nuxt.jsとfirebaseで例のチャットアプリを作りました!

 

まだまだ長い内容なのですが。これからも講座を開いていただけるということなんで、

このブログを見ていただいた方は、直接イベントにきてみてください。

面白いですよ!

js-builders.connpass.com

 

自分もまた参加したいなぁ。

 

 

 

 

 

 

 

 

 

 

 

 

 

node.jsのバージョンアップ

インストール環境

macOS High Sierra バージョン 10.13.6 CPU intel Core i5 メモリ 8GB

homebrewのアップデート

自分はhomebrewからnode.jsをインストールしました。 なのでhomebrewをupdateします。

  • homebrewのバージョン確認

$ brew -v Homebrew 1.7.5

  • homebrewのバージョンup

$ brew update

nodebrewのアップデート

  • nodebrewのバージョン確認

$ nodebrew -v nodebrew 1.0.0

  • nodebrewのバージョンup

$ nodebrew selfupdate

Fetching nodebrew... Updated successfully

node.jsのアップデート

  • node.jsのバージョン確認

$ node -v v10.6.0

公式サイトよりバージョン確認する https://nodejs.org/ja/

v10.12.0

  • バージョンアップデート

安定版

$ nodebrew install-binary stable

最新版

$ nodebrew install-binary latest

Fetching: https://nodejs.org/dist/v10.12.0/node-v10.12.0-darwin-x64.tar.gz

Installed successfully

  • バージョンを切り替える

安定版

$ nodebrew use stable

最新版

$ nodebrew use latest use v10.12.0

最後に確認

$ node -v

v10.12.0

$ npm -v

6.4.1

vue.js 猫本 やって見た。属性のデータバインディング v-bindの修飾子

p58 のv-bindの修飾子でつまずいたのでまとめます。

サンプルを作ってもスクロールしたかどうかよくわからない。

サンプルは猫本を購入してください。

書籍詳細|株式会社 C&R研究所

サンプルにはtext-content.prop scroll-top.propがサンプルとして挙げられてます。

私はこれを使うに当たってわからんが出ました。

javascriptでいうと、

- text-contentは

developer.mozilla.org

- scroll-topは

developer.mozilla.org

こちらで記述できるのでは?と何故ケバブケースで記述するんだろう?

こちらに答えがありました。

jp.vuejs.org

公式ドキュメントに答えが属性名は大文字、小文字を区別できません。大文字か小文字でねってことだそうです!区別したかったらケバブケースで記述する。

なるほど~。だから大文字の文字の直前を-で挟んで、小文字にしてるんですね。

そして.propをつけることで$elにプロパティを設定できるそうです。

そして動くサンプル。

 

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>Vue.js App</title>
</head>

<body>
<div id="app">
<!--この#appの内側にテンプレートを書き込んでいく-->
<div v-bind:text-content.prop="message"></div>
{{ scroll }}
<div v-bind:scroll-top.prop="scroll" class="box">
test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>
</div>
<input type="range" v-model.number="scroll">
</div>

<!-- 開発バージョン、便利なコンソールの警告が含まれています -->
<script>
var app = new Vue({
el: '#app',
data: {
message:'Vue.js!',
scroll: 0
},
mounted:function(){
this.scroll = 0
}
});

</script>
<style>
.box {
border: 1px solid #000;
overflow: scroll;
height: 100px;
}
</style>
</body>

</html>
 
htmlファイルを作りこちらを貼って頂いて、ブラウザーで確認してみてください。