Test!

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

PHP で途中出力しながら、Javascriptで最下部にスクロールする

PHPで処理の経過を出力しつつ、最下部までスクロールしたい。
headとかにスクリプトを書いても、DOMがすべて読み込まれてないと処理されなかったりした。

こちらを参考に
https://www.itcore.jp/php_c/uFlush.php
直接、PHPスクリプトを出力して動作ささせる方法にしてみた。
ただ、clientHeightでは要素内の高さしか取得してくれないので
ログの出力件数が多くなってきたりするとうまく動作しなかった
(ある一定の件数までは動作するがその後途中で止まってしまう)
なのでこちらの記事にあるページの最下部に移動する場合を参考に
「領域外で表示されないコンテンツを含む、要素のコンテンツの高さの測定値」から表示領域を引いて一番下までスクロールされるようにしてみた。

JavaScriptでスクロールを最下部に移動する方法 - Qiita

    echo "<script>var element = document.documentElement;
    var bottom = element.scrollHeight - element.clientHeight;
    window.scroll(0, bottom);</script>";
    // echo "\n<script>document.body.scrollTop = document.body.scrollHeight</script>\n";
    @ob_flush(); // 出力バッファをフラッシュ(送信)する
    @flush(); // システム出力バッファをフラッシュする。

【Unity2D】Unityで2Dミニゲームを作るチュートリアル(全3回)

qiita.com

【Unity2D】Unityで2Dミニゲームを作るチュートリアルをやってみた

ひととおりの作成過程が体験できるチュートリアルでした。
ただUnityバージョンによってはエラーが出る。
またパーティキュルのところではGUIも変わっていたので少し戸惑うかも。

でも全体的には、わかりやすいチュートリアルでやりやすかった。

また、ビルドエラーなんかはこちらのページを見ると解決策が載っていた
m3-soft.com

WebGL書き出しで日本語が表示されない

unityroomさんへ投稿しようと思ってWebGLで書き出したのだけど
タイトルの日本語が表示されなかった。
下記のサイトを参考に「日本語を含むフォントを設定」することで解決した。
hro.hatenablog.jp

docs.unity3d.com

qiita.com
Util.labelではうまくフォントを設定できなかったので
GUI.Labelにした。

using UnityEngine;
using System.Collections;

public class GameMgr : MonoBehaviour {
  public GUIStyle buttonStyle;
    public GUIStyle textStyle;
  void OnGUI()
  {
    if (Enemy.Count == 0)
    {
      // 敵が全滅した
      // フォントサイズ設定
      Util.SetFontSize(24);
      // 中央揃え
      Util.SetFontAlignment(TextAnchor.MiddleCenter);

      // フォントの位置
      float w = 128; // 幅
      float h = 32; // 高さ
      float px = Screen.width / 2 - w / 2;
      float py = Screen.height / 2 - h / 2;

      // フォント描画
    GUI.Label(new Rect(px, py, w, h), "野生のたこ焼きを食べ尽くした!",textStyle);
        py += 60;
      if (GUI.Button(new Rect(px, py, w, h), "タイトルに戻る",buttonStyle))
      {
        // タイトル画面にもどる
        Application.LoadLevel("Title");
      }
    }
  }
}

Unityroomさんへの投稿方法

毎回忘れるのでメモ・・・
blog.naichilab.com

本当に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クラスをつけたあげると真ん中あたりに表示るんでいいんじゃないですかね?