Test!

写真とWebデザインと時たまダイエット

本当に20分でLaravel開発環境は作成できるのか、やってみた。

ララベル開発環境を再び構築してみたよ

MACのOS再インストールしてから、環境作るのが億劫で(こら)、とりあえず再び環境作るのにこちらの記事を参考に環境整えてみました。
qiita.com

Dockerを使ってみたかったんだ

んでもって今回はMAMAPじゃなくて、Dockerを使ってみようかなともおもっていたのでこの記事ちょうど渡りに船だった。
【図解】Dockerの全体像を理解する -前編- - Qiita

ざっくりと、Dockerについてお勉強。

早速環境構築してみよう〜下準備編

...出だしgitの設定で躓いた
それでもやり方は詳しく書いてあったのでそれを見ながら設定する。
Mac Git 初期設定 - Qiita

ssh config をviで編集して保存するんだけど
上書き保存して終了のコマンドがわからなくてちょっと迷ったりvi使ってないと分かりづらいところもあった。
ちなみにコマンドは(:wq)
そこらへんはググレカスってことで、検索して下記のページを見ながら使った。
すぐわかる!viの保存と終了の方法【Linux基礎知識】


Dockerのインストールをてことで
今回はHomebrewを使用。
こういうところMACだとサクッと進められるので便利っちゃー便利。

ここまでの下準備に20分くらい?かな・・・
ということでいよいよ次はLaravel環境作ってきます。

🐳【初心者向け】20分でLaravel開発環境を爆速構築するDockerハンズオン🐳 スタート

ディレクトリ作成
docker-laravel-handson
自分はDocumentフォルダの中にまとめて作成

.env
docker-compose.yml
この2つは上記のディレクトリで作成した。

以降Dockerの設定が続く
設定ファイルの設定が終わったら
いよいよビルド
が・・・・ここでエラーが発生!
ファイルが見つかりません。みたいなエラーが吐かれる・・・も単純にフィアル名のうち間違えだったDocerfileになってた。

nginxでサーバーたててHelloWorldが表示されることも確認。

Laravleのインストール
ちょっとインストールのディレクトリからじゃないよって怒られたりした

[InvalidArgumentException]
Project directory ./ is not empty.

ハンズオンでは以下のコマンドでインストールを行っていた。

$ composer create-project --prefer-dist "laravel/laravel=5.8.*" .

で、結局最後のドットを消してsrcフォルダにララベルをインストールしたんだけど、そうすると今度はartisanが使えなかったり・・・
ドットなしだと
src>laravel>中身のファイル
それをこう↓
src>中身のファイル

結局一個上の階層にLaravelの中身を手動で移してあげました。

DBも作れる
docker-compose.yml
に設定追加。

基本的にCLでやっちゃうんだろうけど、私は素人なのでわざわざエディタで開いて直接追加してく。


DBも無事に追加されたことを確認後、commit からの push
をしてここまでの結果をきちんとgitにあげておく。
でないとこの跡にDocker削除して再インストールができなくなるので・・・

ということでここからいよいよ

Docker環境の破棄

コンテナイメージも消しました!
作業ディレクトリも消しました!
作ったものを消させるなんてなんてドS!

まぁそれはさておき今度は

環境の再構築

gitからもろもろ全部もってきます。
クローンです。

ララベルなどもいんすとーるしなおしていきます。

Welcome画面の表示とマイグレーションの実行ができてドン!
f:id:b_105_a:20190812144848p:plain
(∩´∀`)∩ワーイハンズオン終了です!

私の場合は最初の下準備ふくめて、大体ここまでで1時間くらいかかりました。

ちょっとエラーとか(主に自分にタイプミス)などがありメインの作業が20分きれなかった。

下準備などがすでにしてあって、慣れれば、20分切ることも可能かなっておもいました。

こちらの記事はとてもわかり易く、一通りの流れをスムーズに作業することができた。
qiita.com


gitの設定
Dockerの設定
Laravelインストール
などの知見を得ることができたワッショイヽ(゚∀゚)メ(゚∀゚)メ(゚∀゚)ノワッショイ

個人開発でWebアプリを作ってみた

お題「思い出のWebサービス」

個人開発をしようと思った理由

もともとPHPフレームワークを勉強したいと思っていた。
けど、なんかひとりでやるにしてもモチベーションがなぁとかおもってぐだぐだしていた。
そんなときTwitterで個人開発仲間募集のお知らせをみて、速攻で飛びついた。

そこらへんの詳しい話は主催者のny@SeekGeeksさんのブログを見ていてだくとのってます。
(ちな私の開発したものも紹介してくれてます)
blog.seekgeeks.net

なぜフレームワークにLaravelだったのか?

これはPHPやってたし、個人開発のコミュニティにLaravelに詳しい人もいたのでわからないところがあっても聞きやすいとおもってLaravelに決めた。

これは個人的な感想だけど、Cakephpよりも、使いやすい感じのするフレームワークだと思う。

チュートリアルや本なども充実していたというのも大きな要因だったかもしれない。

こちらの本とかは、チュートリアルがまとめてあってわかりやすかった。
ソーシャルログインのやり方とかもこのシリーズにあってかなりお世話になった。

あとは個人開発コミュニティのstarter-geek-jamにもお世話になりっぱなし。
みんなその道プロばかりなのでエラー起きたときとかサーバーどんなのいいの?とかアプリのお題とかもろもろいろいろ助けてもらった。
でもなんだかんだでぐだぐだと開発して2年もたっちゃったけど。

何を習得できたか

PHPフレームワークを用いたWeb開発を一通りこなせた。
その中でMVCに対する理解も深まった。
Javascriptによる非同期通信なども使ったりPHPだけでなくフロントエンド周りも治験が深まった。

Gitチョットできるようになった。(途中でプル間違えて古いファイルを上書きして盛大に凹んだりもしたけど元気です)

今後の展望?

作って放置になりそうな・・・・
あと少し追加の機能などもできたら考えたいけど今後どう利用してもらうかとか運営面の勉強もしてみたい。

FlexboxってXboxみたいな語感

仕事で久しぶりにコーディングする機会を得ました。
そこで横並びのレイアウト作る時に今までだったらfloatつかってなんとかしていたんです。
でも、最近ちょっとFlexboxというのがあるらしいよって聞いてちょっと使ってみたんです。
慣れるまでが大変だけどなれてしまうとなかなか便利だと思いました。

ベンダープレフィックスつければIE10まで行けるというのがFlexboxを選んだ一番大きい理由でした。
WebCreateBoxさんの記事とか参考にさせてもらって、ゴリゴリと書いてみました。

www.webcreatorbox.com

メール購読すると、チートーシートももらえるってんでもう登録するしか無いですよね。
ってことでポチッとしました。

Flexboxにすることでレスポンシブとか、縦揃えとか簡単にできるらしいのでいろいろと試してみたいと思います。

Bootstrap4でフッターを下部に固定する方法

毎回フッター下部に固定する方法で躓くのでメモ。
メモ。

Bootstrap4やそれ以前のBootstrapのExampleにもsticky footer、つまりフッターをcontentsの内容量関係なく、ブラウザの一番下に固定しようっていうサンプルがあったんです。
が、しかし
コンテンツの部分に背景色を設定していたりすると、背景色は、テキストがある部分までしか表示されないんですね。フッターは下に行ってるのに。

それで、背景色もドバーっとしたまで行く方法ないかなーって思っていたときに、こちらのサイトのであったので、少し改造してみますた。(なんかうまく説明できなくてすいません)


[CSS]フッタを最下部に表示する5つのテクニック-コンテンツ量が少ない時は最下部に、多い時は成り行きに | コリス
や、ほんとお世話になってます。


>==
.content {
min-height: calc(100vh - 70px);
background: #fff;
}
.footer {
height: 50px;
}
==<

.contentに背景色設定しちゃうだけ、ほんとこれだけ、
Bootstrapだとcontainerクラスをつけたあげると真ん中あたりに表示るんでいいんじゃないですかね?

Bootstrap4でフッターを下部に固定する方法

毎回フッター下部に固定する方法で躓くのでメモ。
メモ。

Bootstrap4やそれ以前のBootstrapのExampleにもsticky footer、つまりフッターをcontentsの内容量関係なく、ブラウザの一番下に固定しようっていうサンプルがあったんです。
が、しかし
コンテンツの部分に背景色を設定していたりすると、背景色は、テキストがある部分までしか表示されないんですね。フッターは下に行ってるのに。

それで、背景色もドバーっとしたまで行く方法ないかなーって思っていたときに、こちらのサイトのであったので、少し改造してみますた。(なんかうまく説明できなくてすいません)


[CSS]フッタを最下部に表示する5つのテクニック-コンテンツ量が少ない時は最下部に、多い時は成り行きに | コリス
や、ほんとお世話になってます。


>==
.content {
min-height: calc(100vh - 70px);
background: #fff;
}
.footer {
height: 50px;
}
==<

.contentに背景色設定しちゃうだけ、ほんとこれだけ、
Bootstrapだとcontainerクラスをつけたあげると真ん中あたりに表示るんでいいんじゃないですかね?

Unityチュートリアル作成とUnityroomへの投稿

UnityroomさんでUnity 1週間ゲームジャム開催中というお話をききまして、さらにチュートリアルでもいいよーって言っていただいたので、こりゃやるしかないでしょってことで、金曜日の夜くらいからはじめました。

前からUnityに興味はあったのですがダウンロードしただけで、なかなかチュートリアルをはじめらませんでした。

そこにきて投稿という目標ができたので俄然やるきがでて、最初のチュートリアルを終わらせまして投稿しました。

Unityは個人利用では無料で使用できるっぽいです。
登録時に何用とかとかいろいろ聞かれます。
英語ですがまぁなんとなく選んで登録しました。
さて、インストールがすみましたら次はチュートリアルです。
unity3d.com

やったー日本語化サイトが有るぞー!!
ぇ・・・
説明用の動画は英語でした・・・<丶´Д`>ゲッソリぬか喜び
でもチュートリアルは英語ながら、丁寧な説明で躓くところは少なかったように思います。

そして、日本語を表示させたいとおもったのですがデフォルでは日本語Fontが含まれていないようで
Web用に書き出しを行うと表示されないという自体が発生しました。
下記サイトを参考に日本語Fontを入れて表示させることができました。
UnityのWebGLで日本語を表示する - Qiita

投稿サイトはこちらです。。
https://unityroom.com/games/fpsrunball