1 Minute Tips

日: 2019年12月11日

  • laravelのview(blade)でcssを読み込ませる

    laravelのview(blade)でcssを読み込ませる

    はじめに

    laravelのviewにcssを読み込ませる方法をまとめた

    ベースはこちらの記事。

    https://tsukada.sumito.jp/2019/12/11/laravel%e3%81%a7db%e3%81%ae%e5%8f%96%e5%be%97%e7%b5%90%e6%9e%9c%e3%82%92view%e3%81%ab%e5%87%ba%e3%81%99/

     

    bladeファイルの変更点

    <!DOCUMENT html>

    <html lang="ja">
        <head>
            <meta charset="utf-8">
            <title>this is title</title>
            <link rel="stylesheet" href="/css/style.css">
        </head>

        <body>
            <div class='container'>
                <h1> this is it!</h1>
                <ul>
                    @forelse ($senddata as $data)
                    <li>{{ $data->title }}</li>
                    @empty
                    empty!
                    @endforelse
                </ul>

            </dev>
        </body>

    </html>

     

    cssファイル

    publicディレクトリがデフォルトで読み込まれる。

    “` public/css/style.css “` ファイルを新規で作りそのcssファイルを読ませる形にした。

    body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 20px;
}

.container {
    width: 300px;
    margin: 30ps;
}

h1 {
    font-size: 20px;
}

ul > li{
    margin-bottom: 10px;
}

    結果

    無事cssが読み込まれたようだ

     

    laravel の実践向け書籍

  • firebase deploy時のeslintを無効にする

    firebase deploy時のeslintを無効にする

    はじめに

    firebase functionを使えるようにした際、知らず知らずにESLintを有効にしてしまっていた。今回は対処した際の方法を紹介。

    問題

    firebase deploy

=== Deploying to 'auth-xxx'...

i  deploying database, functions, hosting
Running command: npm --prefix "$RESOURCE_DIR" run lint

> functions@ lint /Users/coco/Documents/firebase-auth/functions
> eslint .


/Users/coco/Documents/firebase-auth/functions/index.js
  31:7   error    Expected return with your callback function                     callback-return
  38:24  warning  Use path.join() or path.resolve() instead of + to create paths  no-path-concat

✖ 2 problems (1 error, 1 warning)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! functions@ lint: `eslint .`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the functions@ lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/coco/.npm/_logs/2019-12-10T15_36_22_429Z-debug.log

Error: functions predeploy error: Command terminated with non-zero exit code1
darkenagy:firebase-auth coco$ cat /Users/coco/.npm/_logs/2019-12-10T15_36_22_429Z-de

    ESLintで引っかかっているようだ。

    ふりかえり

    そもそも、本当にESLintを有効にしたんだっけ。。
    どのようにfirebase functionを有効にしたか振り返る。

    firebase init functions

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /Users/coco/Documents/firebase-auth

Before we get started, keep in mind:

  * You are initializing in an existing Firebase project directory


=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

i  .firebaserc already has a default project, using auth-xxx.

=== Functions Setup

A functions directory will be created in your project with a Node.js
package pre-configured. Functions can be deployed with firebase deploy.

? What language would you like to use to write Cloud Functions? JavaScript
? Do you want to use ESLint to catch probable bugs and enforce style? Yes
✔  Wrote functions/package.json
✔  Wrote functions/.eslintrc.json
✔  Wrote functions/index.js
✔  Wrote functions/.gitignore
? Do you want to install dependencies with npm now? Yes

> protobufjs@6.8.8 postinstall /Users/coco/Documents/firebase-auth/functions/node_modules/protobufjs
> node scripts/postinstall

npm notice created a lockfile as package-lock.json. You should commit this file.
added 344 packages from 245 contributors and audited 869 packages in 11.579s
found 0 vulnerabilities


i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!


   ╭───────────────────────────────────────────╮
   │                                           │
   │      Update available 7.8.1 → 7.9.0       │
   │   Run npm i -g firebase-tools to update   │
   │                                           │
   ╰───────────────────────────────────────────╯

    しっかりESLintを有効にしてた。

    現在の設定を確認

    firebase.jsonを確認する

    cat firebase.json 
{
  "database": {
    "rules": "database.rules.json"
  },
  "hosting": {
    "public": "public",
    "rewrites": [
      {
        "source": "**",
        "function": "firebaseAuth"
      }
    ],
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint"
    ]
  }
}

    黄色の箇所を削除し、再度“` firebase deploy“`を行うと、ESlintが行われずdeployされる。

    参考情報

  • laravelでDBの取得結果をviewに出す

    laravelでDBの取得結果をviewに出す

    はじめに

    viewへのデータの受け渡しについて、router,Controller,viewに分けて整理する。

    データベースの中身

    router

    <?php

Route::get('/', 'PostsController@index');

    Controller

    <?php

namespace App\Http\Controllers;

use App\Post;

class PostsController extends Controller
{
    //
    public function index()
    {
        $posts = Post::all();

        // 意図的に空にする
        //$posts = [];

        // 両方同じ意味
       // return view('posts.index', ['posts'=> $posts]);
       return view('posts.index')->with('senddata', $posts);

    }
}

    a

     view

    <!DOCUMENT html>

    <html lang="ja">
        <head>
            <meta charset="utf-8">
            <title>this is title</title>
        </head>

        <body>
            <div class='container'>
                <h1> this is it!</h1>
                <ul>
                    @forelse ($senddata as $data)
                    <li>{{ $data->title }}</li>
                    @empty
                    empty!
                    @endforelse
                </ul>

            </dev>
        </body>

    </html>

    結果

    laravel の実践向け書籍