C0d3man52さんのcoditページ | Author

Author

C0d3man52: Personal

趣味でサイトやサービスを作ってます。自分で調べてたり開発した際に得た知見を投稿します。

C0d3man52さんのコード

// ゾーンIDを取得
curl -s -X GET "https://api.cloudflare.com/client/v4/zones?name=ドメイン名&status=active&page=1&per_page=20&order=status&direction=desc&match=all" \
-H "X-Auth-Email: 会員メールアドレス" \
-H "X-Auth-Key: APIKey" \
-H "Content-Type: application/json" 

// キャッシュクリア
curl -X DELETE "https://api.cloudflare.com/client/v4/zones/ゾーンID/purge_cache" \
     -H "Content-Type:application/json" \
     -H "X-Auth-Email: 会員メールアドレス" \
     -H "X-Auth-Key: APIKey" \
     --data '{"files":["削除するファイルパス"]}'

BASH cURLでCloudflare APIでキャッシュを削除する C0d3man52

<div class="overflow-y-scroll">
  <select name="sbox" id="sbox">
    <option value="">iOS Safriでは、オプション項目の文字数が横幅を超える文字数だと、表示上は見えてなくても背景で横幅が突き抜けてる</option>
  </select>
</div>

<style>
.overflow-y-scroll{
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.overflow-y-scroll select{
  width:100%;
  overflow: hidden; // これがないと、selectのoverflow-yの影響で横スクロールが走る
}
</style>

CSS3 iOS Safariでselectを含む要素にoverflow-y:scrollすると横にスクロールする時の対応 C0d3man52

{
  "name": "サイト名",
  "short_name": "短縮サイト名",
  "icons": [
    {
      "src": "/img/icons/android-chrome-36x36.png",
      "sizes": "36x36",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-48x48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#FFF"
}

HTML5 PWA向けmanifest.jsonのテンプレート C0d3man52

module.exports = {
  pages: {
    index: {
      entry: 'src/main.js', // 必須パラメータ
      title: 'ページタイトル',
    }
  }
}

JAVASCRIPT Vue.jsでvue.config.jsからページタイトルを設定する C0d3man52

# .Hugo.Environmentで取れる。
# 初期は"development"
# 「hugo server  --environment 文字列」で指定もできる

# hugo server環境下だった変換したcssをlink hrefでリアルタイムで読む
{{- if eq .Hugo.Environment "development" }}{{- $style := resources.Get "sass/main.scss" | toCSS }}
<link rel="stylesheet" href="{{ $style.Permalink }}">
{{else}}
# hugoコマンドで出力するときは、ローカルで変換したcssの方を読む
<style amp-custom>
    {{readFile "/assets/sass/main.css" | safeCSS}}
</style>
{{end}}

# hugo server時はreadFileで読んだファイルはリアルタイムで読み直してくれない
# この方式にすればhugo serverでプレビューしながらSCSSでコーディングができる

GO HUGOで開発環境（hugo server）の判定をする C0d3man52

# lastestは使うバージョンに変更可能
image: registry.gitlab.com/pages/hugo:latest

variables:
  GIT_SUBMODULE_STRATEGY: recursive

# masterブランチ以外で実行されるテストコマンド。と行ってもhugoコマンドを実行しているだけ
# 記事追加でブランチを切る場合（Netlify CMSなど）は無駄にPipeline Quataを消費するからtestは削除するか、開発用のブランチを指定したほうがいい
test:
  script:
  - hugo
  except:
  - master

# ここで公開処理。hugoコマンドを実行して、できたpublicディレクトリを公開しているだけ
pages:
  script:
  - hugo
  artifacts:
    paths:
    - public
  only:
  - master

GO GItlab pagesでHUGOサイトをビルドする時の設定ファイル C0d3man52

{{ $posts := (where (where .Site.Pages "Section" "topics") ".Params.slug" "!=" .Params.slug) }}

GO HUGOでWhere句をANDで連結する C0d3man52

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: "/index.html",
      name: "index",
      redirect: '/',
    },
    {
      path: "/",
      name: "Home",
      component: () => import( './views/Home/Index.vue'),
    },
    {
      path: "/:categories(code|note|author)",
      name: "CategoryTop",
      component: () => import( './views/Categories/Detail.vue'),
    }
  ]
})

JAVASCRIPT Vue Routerで受けるパラメータの規定値を設定して値を制限する C0d3man52

<div class="box">
  <p class="img">
    <img src="hogehoge.png" alt="hoge" />
  </p>
  <p class="title">
    テストテキストです。
  </p>  
</div>

<style>
.box{
  width: 80px;
  height: 80px;
  position: relative;
}

.img{
  width: 100%;
  height: 100%;
  position: relative;
}

.img:after{
  width: 100%;
  height: 100%;
  position: absolute;
  content: '';
  display: block;
  top: 0;
  right: 0;
  background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(51,51,51,0) 35%, rgba(51,51,51,0.2) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(51,51,51,0) 35%,rgba(51,51,51,0.2) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(51,51,51,0) 35%,rgba(51,51,51,0.2) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#33333333',GradientType=0 );
}

.title{
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}
</style>

CSS3 画像の上に乗せた白文字を見やすくする C0d3man52

<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<urlset>
  <url>
    <loc>URL</loc>
    <lastmod>YYYY-MM-DDD</lastmod>
    <changefreq>daily</changefreq>
  </url>
</urlset>

HTML5 サイトマップの基本フォーマット C0d3man52

#!/bin/bash
# バックアップディレクトリに移動
cd /path/to/backup

# データベースのバックアップ
mysqldump -uユーザー名 -pパスワード データベース名 > db_bk.sql

# Google Driveのバックアップ用に作ったフォルダに同期する
/usr/sbin/gdrive sync upload . アップロードするフォルダのfileId --keep-local

MYSQL MySQLのバックアップをGoogle Driveに同期する C0d3man52

GRANT ALL PRIVILEGES ON *.* TO ユーザー名@'%' IDENTIFIED BY 'パスワード' WITH GRANT OPTION;

MYSQL 権限付きユーザーを新規作成するMySQLコマンド C0d3man52

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <title>vue-skeleton</title>
    <meta name="robots" content="noindex,nofollow">
    <link rel="stylesheet" href="/css/style.css">
  </head>
  <body>
    <div id="app"></div>
    <script src="/js/bundle.js"></script>
  </body>
</html>

JAVASCRIPT Vueのindex.html C0d3man52

<?php
require_once __DIR__ . '/../config/database.php';
$capsule = new \Illuminate\Database\Capsule\Manager;

$db_names = array_keys($config['database']);

foreach($db_names as $name){
    $alis = $name;
    if($name === reset($db_names)) $alis = 'default';
    $capsule->addConnection($config['database'][$name], $alis);
}
$capsule->setAsGlobal();
$capsule->bootEloquent();

PHP Laravel以外でEloquentを使って、複数DBを設定に動的にロードさせる C0d3man52

<?php
require_once __DIR__ . '/../vendor/autoload.php';

$router = new AltoRouter();

$router->map('GET|POST','/',
  'App\TopController::index',
  'home'
);

$match = $router->match();

if( is_array($match) && is_callable( $match['target'] ) ) {
  $params = explode("::", $match['target']);
  $action = new $params[0]();
  call_user_func_array(array($action, $params[1]) , $match['params']);
} else {
  header( $_SERVER["SERVER_PROTOCOL"] . ' 404 Not Found');
}

PHP AltorouterでLaravel的なクラス名ルーティングをする方法 C0d3man52

<?php
$config['database'] = [
    'main' => [
        'driver'    => 'sqlite',
        'database'  => __DIR__ . '/../database/main.sqlite',
    ],
];

// 個別DB設定を全部require
$req_dir = [__DIR__ . '/database/'];
foreach ($req_dir as $r) {
    foreach(glob($r.'*') as $file){
        if(is_file($file)){
            require_once $file;
        }
    }
}

PHP Laravel・Eloquent ORMでデータベース設定ファイルを分割して一気にロードする方法 C0d3man52

<?php

use SomeModel;

class SomeController extends BaseController {
    public function someMethod()
    {
        $someModel = new SomeModel;
        $someModel->setConnection('DB2');
        $something = $someModel->find(1);
        return $something;
    }
}

PHP Laravel・Eloquent ORMでコントローラー側で接続先DBを動的に切り替える C0d3man52

```
position: -webkit-sticky;
```
CSS3 iOSでposition stickyが効かない時の対策 C0d3man52

.scroll-table {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}

CSS3 スマホでスクロールするテーブルのCSS3 C0d3man52

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>記事ページのHTML5テンプレート</title>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <!--[if lt IE 9]>
    <script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link rel="shortcut icon" href="">
  </head>
  <body>
    <header>
      <p><a href="">サイト名</a></p>
      <nav>
        <ul>
          <li><a href="#">メニュー</a></li>
          <li><a href="#">メニュー</a></li>
          <li><a href="#">メニュー</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <article class="">
        <header>
          <h1>記事タイトル</h1>
          <p>説明文です。説明文です。説明文です。説明文です。</p>
        </header>
        <section>
          <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>
          <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>
          <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>
        </section>
      </article>
    </main>
    <aside class="">
      <section>
        <h2>新着コンテンツ</h2>
        <ul>
          <li><a href="#">新着記事1</a></li>
          <li><a href="#">新着記事2</a></li>
          <li><a href="#">新着記事3</a></li>
        </ul>
      </section>
      <section>
        <h2>人気コンテンツ</h2>
        <ul>
          <li><a href="#">人気記事1</a></li>
          <li><a href="#">人気記事2</a></li>
          <li><a href="#">人気記事3</a></li>
        </ul>
      </section>
    </aside>
    <footer>
      <p>(C) 2019 サイト名.</p>
    </footer>
  </body>
</html>

HTML5 記事ページのHTML5テンプレート C0d3man52

public function register()
  {
     // 追記する-->
      $this->app->singleton('mailer', function ($app) {
          $app->configure('services');
          return $app->loadComponent('mail', 'Illuminate\Mail\MailServiceProvider', 'mailer');
      });
     // <--追記する
  }

PHP Lumenでメールを送る関数 C0d3man52

C0d3man52さんのコード

C0d3man52さんのノート