2018-12-23

webpackでhtmlとfaviconも一緒にbundleする

概要

html-webpack-pluginというプラグインを使います。まずプラグインを追加
$ npm install html-webpack-plugin --save--dev

webpack.config.jsに追加

plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      favicon: './src/favicon.ico',
    }),
  ],

追加するとこんな感じです。

module.exports = {
  mode: 'production',
  output: {
    filename: '[name].[chunkhash].js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      favicon: './src/favicon.ico',
    }),
  ],
  optimization: {
    splitChunks: {
      chunks: 'all',
      name: false,
    },
    runtimeChunk: true,
  },
};

2018-12-19

Netlifyでランダムに割り振られたドメイン名を変更する

プログラミング

Netlifyという無料で使える静的サイト用のホスティングサービスがあります。 www.netlify.com

このサービスにデプロイすると自動で適当なドメイン名を割り振られるのですが
○○.netlify.comの部分は変更可能なので手順を書いておきます。

settingを選択
Change site nameを押して変更したい文字列を入力すればOK

2018-12-17

dockerでJavaのHello Worldを実行するまで

Mac プログラミング

題名の通りです。
とりあえずdockerでJavaを動かしてみたい人向けです。
最近dockerを学び始めたけどこんなに便利なものがあったんだなぁ。。。

前提

dockerはインストール済みとしています。
してない方は以下よりどうぞ

Docker Hub
会員登録しないとダウンロードできないみたいですね。

手順

作業ディレクトリを用意＆移動

まぁこの辺は適当に
$ mkdir docker_java8 && cd docker_java8

HelloWorld.javaを作成

$ touch HelloWorld.java

public class HelloWorld{
   public static void main(String[] args){
     System.out.println("Hello World!!");
   }
}

docker-compose.ymlを作成して実行

$ touch docker-compose.yml

version: "3"
services:
  hello_java:
    image: "openjdk:8"
    volumes:
      - "$PWD:/usr/src/myapp"
    working_dir: "/usr/src/myapp"
    command: bash -c "javac HelloWorld.java && java HelloWorld"

$ docker-compose upを実行して
以下の様な出力が出れば完了 f:id:hido_dev:20181217234833p:plain

docker コマンドで実行

もしくは以下のコマンドで一発 docker run --rm -v "$PWD":/usr/src/myapp -w /usr/src/myapp openjdk:8 bash -c "javac HelloWorld.java && java HelloWorld"

2018-12-16

docker-composeのlogのターミナルを閉じてしまった時

プログラミング

docker-compose up

で見ていたtarminalを消してしまってlogが見れなくなってしまったときは

docker-compose logs -f

で戻れます。

docs.docker.com

2018-12-09

Bose QuietControl 30 を1年つかってみた感想。

レビュー

今年の1月頃に購入してからおよそ1年が経過しました。
そこでほぼ毎日お供しているBose QuietControl 30についてレビューしてみようと思います。

Bose QuietControl 30 wireless headphones ワイヤレスノイズキャンセリングイヤホン

出版社/メーカー: BOSE
発売日: 2016/10/28
メディア: エレクトロニクス
この商品を含むブログ (3件) を見る

総評
メリット
デメリット
まとめ

総評

まず結論から言うと総じて圧倒的に満足度が高いです笑
ただ、メリットデメリットが存在するので説明していきたいと思います。
当方音にはそこまで詳しくないので一般人が奮発していいイヤホンを買ったくらいのテンションでご覧ください笑

メリット

ノイズキャンセリングが凄すぎて電車内の快適度が異常

ノイズキャンセリングは本当に凄いです。
いままで電車の中ではカナル型イヤホンでも音量をかなり大きくしないと音楽を聞き取れず、耳にも悪いだろうなぁと思っていましたが、家で聞く音量くらいでも電車の中で音楽を楽しむことができます。

首にかけておけるので装着したり外したりがスムーズ

Bluetoothイヤホンの中でも首掛け型で重量もそんなに無いので首にかけたままでも全く辛くありません。ケーブル周りがスムーズになるので煩わしさから開放されます。

充電が1日は持つ

自分の使い方ですが往復通勤3時間と勤務中4時間くらいは軽く充電がもっていると感じます。充電のルーティンはスマホと同じくらいになりますね。

デメリット

値段の割に壊れやすい

ここが最大のデメリットとなります。
35,000円というかなり高額なタイプのイヤホンですがその割に充電関連の故障やバッテリーが膨らむなどの故障が発生する確率が高く、ユーザーを悩ませています。
確かにイヤホンは消耗品ですがレビューを見ていると1年持たなかったというユーザーも多いようです。
かくいう私も充電関連で購入後半年で故障して左が聞こえなくなったことがあります。
malicia.hatenablog.com このとき修理費で25,000円かかったのはだいぶ辛い出費でした。。。。

充電に気を使う

公式サイトには付属のケーブルでPCのUSBポートに繋いで充電してくださいと書いてあります。
わざわざ充電のためにPCを起動するのもめんどくさかったのでUSBハブから充電していたのですが過充電で故障してしまいました。。。
それから毎回PCを起動してUSBポートに繋いで、必ず付属のケーブルに充電するようにしています。
めんどくさい。。。

だんだん首掛けのバランスがおかしくなってくる

使って2,3ヶ月してくるとだんだん首掛けが斜めになってきてバランスが取れなくなって来ます。そこまでガッツリ気になるわけではないのですがなんとなくいやになりますね。。。

まとめ

上記が感想ですが総じて買いの商品だと思います。
正直修理の期間はお金よりこの商品が使えないことがしんどかったですね。。
ケーブルが擦れる音に耐えられませんでした、、、

2018-12-01

【PHP】日付のint型(timestamp) ⇔ string型変換【date】

PHPでのdate系はint型(timestamp)とstring型が存在しますがそれぞれ変換可能です。

int型(timestamp) → string型

date関数を使います。

string date ( string $format [, int $timestamp = time() ] )
指定された引数 timestamp を、与えられたフォーマット文字列によりフォーマットし、日付文字列を返します。タイムスタンプが与えられない場合は、現在の時刻が使われます。つまり timestamp はオプションでありそのデフォルト値は time() の値です。

$now_timestamp = time();
echo date('Y-m-d',$now_timestamp); //2018-10-23

string型 → int型(timestamp)

strtotime関数を使います。

int strtotime ( string $time [, int $now = time() ] )
この関数は英語の書式での日付を含む文字列が指定されることを期待しており、 now で与えられたその形式から Unix タイムスタンプ (1970 年 1 月 1 日 00:00:00 UTC からの経過秒数) への変換を試みます。 now が指定されていない場合は現在日時に変換します。この関数の各パラメータでは、パラメータ内でタイムゾーンを指定しない限りはデフォルトのタイムゾーンを使います。意図的にそうする場合は別として、パラメータごとにタイムゾーンを変えてしまったりしないように気をつけましょう。デフォルトのタイムゾーンを定義する方法については date_default_timezone_get() を参照ください。

$today_string = "2018-10-23";
echo strtotime($today_string);

2018-11-27

BulumaをnpmでインストールしてWebpackで使う

プログラミング

Bulumaとは

bulma.io

Bulumaという便利なCSS フレームワークがあるのですがnpmで利用する方法を書いておきます。

npmでインストールしてWebpackでBulumaを使う方法

以下の公式の焼き回しです。
bulma.io

事前準備

プロジェクトがなければnpm initする.

必要なパッケージを追加する

npm install bulma --save-dev
npm install css-loader --save-dev
npm install extract-text-webpack-plugin@next --save-dev
npm install node-sass --save-dev
npm install sass-loader --save-dev
npm install style-loader --save-dev
npm install webpack --save-dev
npm install webpack-cli --save-dev

追加できればpackage.jsonが以下のようになると思います。

{
  "name": "mybulma",
  "version": "1.0.0",
  "main": "webpack.config.js",
  "license": "MIT",
  "devDependencies": {
    "bulma": "^0.7.2",
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "node-sass": "^4.9.2",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "webpack": "^4.16.0",
    "webpack-cli": "^3.0.8"
  }
}

extract-text-webpack-pluginは^4.0.0-beta.0でないとエラーが出るので気をつけてください。

webpackの設定をする

なければwebpack.config.jsを作成する。
適宜読み替えて以下の内容を追加してください。以下ではsrcフォルダにあるjsをdistに出力する設定になってます。

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js'
  },
  module: {
    rules: [{
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          'css-loader',
          'sass-loader'
        ]
      })
    }]
  },
  plugins: [
    new ExtractTextPlugin('css/mystyles.css'),
  ]
};

`src`フォルダを作成する

entryで設定している./src/index.jsがなければ作成し以下を追記する。

require('./mystyles.scss');

Sassファイルを作成する

同じsrc直下にmystyles.scssがなければ作成し以下を追記する。

@charset "utf-8";
@import "~bulma/bulma";

`dist`フォルダを作成する

jsフォルダとcssフォルダを作成してください。 webpackでのビルド時に中にファイルが生成されます。

htmlファイルを作成する

distフォルダ直下にmypage.htmlを作成し以下を追記する。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My custom Bulma website</title>
    <link rel="stylesheet" href="css/mystyles.css">
  </head>
  <body>
     <h1 class="title">
        Bulma
      </h1>

      <p class="subtitle">
        Modern CSS framework based on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a>
      </p>

      <div class="field">
        <div class="control">
          <input class="input" type="text" placeholder="Input">
        </div>
      </div>

      <div class="field">
        <p class="control">
          <span class="select">
            <select>
              <option>Select dropdown</option>
            </select>
          </span>
        </p>
      </div>

      <div class="buttons">
        <a class="button is-primary">Primary</a>
        <a class="button is-link">Link</a>
      </div>
  </body>
</html>

ビルドする

npm run buildでdist内にコンパイルしたファイルが追加されます。

確認する

mypage.html をブラウザで開いてbulumaが適応されていれば完了です。

概要

webpack.config.jsに追加

前提

手順

作業ディレクトリを用意＆移動

HelloWorld.javaを作成

docker-compose.ymlを作成して実行

docker コマンドで実行

総評

メリット

ノイズキャンセリングが凄すぎて電車内の快適度が異常

首にかけておけるので装着したり外したりがスムーズ

充電が1日は持つ

デメリット

値段の割に壊れやすい

充電に気を使う

だんだん首掛けのバランスがおかしくなってくる

まとめ

int型(timestamp) → string型

string型 → int型(timestamp)

Bulumaとは

npmでインストールしてWebpackでBulumaを使う方法

事前準備

必要なパッケージを追加する

webpackの設定をする

srcフォルダを作成する

Sassファイルを作成する

distフォルダを作成する

htmlファイルを作成する

ビルドする

確認する

`src`フォルダを作成する

`dist`フォルダを作成する