nuxtmeetup#9 オールスター観戦レポ
会場提供はメルカリ
日時 2019/08/26
一人目の発表
merpay
merpayのフロントエンドは7人
色々なプロジェクトでNuxt.js + TypeScript を使用しています。
二人目の発表
ROXX
SCOUTER からROXXに!
SCOUTER という求人アプリ を開発していた。
今後発展とともに新しいアプリを続々作り出していくのでROXXに!
求人のミスマッチをなくす仕組みを作りたいそうです。
三人目の発表
LINE株式会社 ポテトさん
lineもuit という 勉強会があるのでとりあず。来てねということでした。
Nuxt.jsによるdocker 運用
環境毎にdocker環境ができる、Docker周りのファイルがカオス化傾向
そんな時は、multi stage buildで解決
四人目の発表
株式会社サイバーエージェント
Nuxt.js+TypeScriptのベストプラクティスを考えてみる
別ドメインのAPIを取得するのが厳しいので対応方法について考察
五人目
nuxt のテストコードの考え方
testが必要な理由を述べたあと
Nuxt.jsのテストの種類が複数あること
それらについて解説でした。
六人目
株式会社ピースオブケイク
noteというアプリを作っている会社さん
Atomic Design についてチームの取り組みを発表
七人目
株式会社merpay
一つのシステムを、利用者毎に分けて、複数のプロダクトチームで挑んでいる
とのこと。
八人目
株式会社ガイアックス
techpit というアプリを作ってる。
メンバー構成が複雑なので、TypeScriptの導入を一旦保留にして
スピード重視の開発にした話。
九人目
株式会社ROXX
nuxtでもfunctionAPIを使う
composition-api
mixin や、 hcoの代わりになれることを解説
以上でした。
【初心者向け】Laravel(PHPフレームワーク)入門②を受けてみた!
2019年04月16日
BIOS Bootcampという勉強会に参加してきました!
前回に続く、Cloud9でLaravelを勉強したいという人たちの集まり。
次回は、デジハリを出て、もくもく会やpython、ブロックチェーンを学ぶそうです。
本日のお題、このブログの終わりにはCloud9で
- アプリにLOGINする機能
- アプリにREGISTER(ユーザー登録) する機能
- ログアウト機能
- blogs add(ブログ)を投稿する機能
以上の4っつの機能があるブログができます。
また、ログイン中のみblogsが表示できる機能に
早速、cloud9にログインします。
ワークスペースの作成
画面真ん中にある、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
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
が見えます。
基本情報技術者試験の前に読むといい良本それは、基礎からのプログラミングリテラシー
基礎からのプログラミングリテラシーという本を読みました!
増井敏克さん著です。
大学やデザインの学校を卒業したてや、在学中に、アプリ制作が興味があるひとに向けた教科書です。
本書では、基本情報技術者試験のような全ての情報技術を学んでから挑むような内容から、現代に必要な、 部分を抜き取ってまとめてある良書です。
ちょこっと内容を。本書では、アジャイルという言葉があります。
ウォーターフォールは覚えていましたが、アジャイルという開発方法、私は忘れていました。
言葉は聞くけど詳しくは?の状態でした。図解も入れてあって本書は、わかりやすかったと思います。
このように、本書は最新の言葉にも対応していて何年か業界にいる方にも読んで楽しめる構成だと思います。
情報を抜き取っているが、解説が親切に記載されていてよかったと思います。
もし、この本を見てもっと詳しく知りたくなった場合にも対応していて推薦図書制度があるのも 良書だと思います。
もしよかったら購入して読んでください。
【教室変更・初心者向け】Laravel(PHPフレームワーク)入門
【教室変更・初心者向け】Laravel(PHPフレームワーク)入門を受講してきました。
今回は、Laravelの準備とMySQLの準備?を学びました。次回は他の項目も学びたいと思います。
開催日時
2019年04月09日
イベントURL
本ブログでこんな人に向けて書かれています
講義内容
今回は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 workspace
はPrivate
またはPublic
を選択します。Choose a template
はphp
を選択します。
最後に、Create workspace
をクリックしてワークスペースを作成します。
Cloud9の画面構成
この画面をCloud9のワークスペースとします。
Cloud9のメニューバーにある、Run Project
をクリックします。
Run Project
がStop
になったことを確認します。
ターミナルにApache & PHP - Running
タブが追加された事を確認します。
中にStarting Apache httpd, serving https://[ワークスペース名]-[ユーザー名].c9users.io/.
が表示されているかと思います。
ターミナルの中でクリックし、https://[ワークスペース名]-[ユーザー名].c9users.io/. をマウスカーソルを合わせると、 指マークになると思います。 クリックしてみてください。
セレクトボックスが表示され、Open
をクリックします。
こちらが表示されたら、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
- 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 )
無事にバージョンアップできたことを確認します。
フレームワークの準備
- Laravel のインストーラーをダンロード
$ 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画面が表示されます。
- サーバーを停止する
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
- 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
など〇〇税が多く大変だったそうです
個人開発もユーザーファーストなモノ作り
広告はブログ(アプリなど)購読者 使用者が多ければ成り立つ
月額課金は自分達で完全にコントロールできるので収益改善のアクションが取りやすい
年額プランを導入するにあたり、ユーザーのメリット、事業のメリットを考える必要がある
ユーザーがどのくらい継続するかを予測して金額設定をする
ブラウザーを作っている
広告などの導線を改善した
驚いた事はボタンに丸みをつけることで10%上がったこと
マネタイズできたらやる事 = 納税。雑所得 or 事業所得 / 節税を考える
マネタイズ開始の判断ポイント
サービス利用指標
ユニットエコノミクスの証明 → 1顧客から得られる利益
キャッシュフロー → 現金の流れを意味する
ブラウザーの収益モデルは
「月額課金」
「ネイティブ広告」
「アフェリエイト広告」
プレミアム課金については
「広告ブロック」
「プレミアムジェスチャー」
「2画面機能」この機能は面白いですね!
などの機能で月額課金ユーザーを取得している
エンジニアの出会いの場を発表
出会いの場をもっと 手数料で収益をかなり面白いと思いました
以上でこのイベントの報告は終わります
Nuxt + TypeScript + Firebase でVuex&TSを学ぶハンズオンに参加してきました。
このイベントは株式会社 ROLO
の技術者集団チーム JavaScript Builders の勉強会です
こちらをみ参照してくれるとわかるんですが、参加者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 ファイルを作成
コンパイルしたファイルを実行の流れ!
インターフェースも勉強させていただきました!
後半は、Nuxt.jsとfirebaseで例のチャットアプリを作りました!
まだまだ長い内容なのですが。これからも講座を開いていただけるということなんで、
このブログを見ていただいた方は、直接イベントにきてみてください。
面白いですよ!
自分もまた参加したいなぁ。
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