CSSで画像にバツボタン(削除ボタン)を重ねる

とある事情で使われなくなったため忘備録です。 button要素をdivで囲って、divを画像に重ねることで対応しました。

<img src="hoge" />
<div class="deleteButtonContainer">
    <button type="submit" class="deleteButton">×</button>
</div>

/*ボタンを重ねるためのブロック要素*/
.deleteButtonContainer {
    width: 15px;
    height: 15px;
    position: absolute;
    top: 0;
}

/*各サムネイル画像に重ねる削除ボタン*/
.deleteButton {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    padding-left:0;
    padding-right: 1.5px;
    text-align: center;
    line-height: 9px;
    vertical-align: middle;
    color:grey;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 3px;
}

技術書典5に一般参加してきました

タイトルの通りです。今回はの会場は池袋サンシャインシティDホールでした。湊さんのtwitterに乗っていた行き方画像をみて、東池袋駅からスイスイ行きました。 11時開場だったので10時半着くらいで行きましたがその時点で確実に1000人は並んでいました。入場券制ではなく列が進んだら入場する方式で、待機列から入場まではノーストレス。ただしノーストレスなのはそこまでで、会場内に入ると人人人からの人でそれは全然しょうがないんだけど臭いがきつかったな・・・。

買った本です。

f:id:wawawa12345:20181008222941j:plain

左上から

  • Chromeデベロッパーツールを使いこなそう Console編 1000円
  • AWSをはじめよう 1500円
  • 書ける・描けるSVG 1000円
  • 後悔しないためのVueコンポーネント設計 1000円
  • WEBフロントエンドの歴史本 500円

前回は気になる本全部買う(そしたら絶対後悔しないだろ)方式で買ったんですが、内容が薄いものが結構あってがっかりしたので、今回は中身をしっかりチェックの上、「この値段出すなら普通に出版されてる書籍買ったほうが良いのでは?」と自分に問いかけながら買い物をしたので5冊に収まりました。なお、表紙が気に入って中身を見ずに買った5番目の本は、内容が薄くてがっかりした。今回、前回共に共通して「小さめ(B5くらい)で製本されており厚さが薄くて表紙がそこそこ気合い入ってる本」は地雷の確率が高いので注意したい。

Tシャツが欲しいという理由により、次回はスタッフ参加したいな〜〜と思いました。終わり。

MacでDockerを使ってNginxを立ち上げてみたので覚書

MacBookProを使い始めて3ヶ月が経ちました。購入した日に、「いろんなIDEとかサーバをローカルに入れたくないから、サーバは全部Docker使って、開発は一つのエディタでやろう」と思ってDockerを入れましたが、面倒で触ることなく今日まで無視していました。ちなみに「一つのエディタで〜」はとうに挫折してEclipseVSCode入れました。

難しいと挫折しそうなのでDockerをMacにインストールする (更新:2018/5/14)の記事を参考にして進めました。

作業内容

【1】インストールしたDockerを起動する。

【2】webserverという名前のコンテナを作成してNginxを立ち上げる。 docker run -d -p 80:80 --name webserver nginx を実行。 ローカルにnginxのdocker imageがないと勝手にpullしてくれます。

$ docker run -d -p 80:80 --name webserver nginx
Unable to find image 'nginx:latest' locally
latest: Pulling from library/nginx
802b00ed6f79: Pull complete 
5291925314b3: Pull complete 
bd9f53b2c2de: Pull complete 
Digest: sha256:9ad0746d8f2ea6df3a17ba89eca40b48c47066dfab55a75e08e2b70fc80d929e
Status: Downloaded newer image for nginx:latest
1aaf106971f8a35dc4b2ec322428a5b0fbaca166eb5a1f04ec8b807fb4f6171f

【3】Nginxが立ち上がっているか確認のため、Dockerのプロセスを確認する。docker container ls を実行。

$ docker container ls
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                NAMES
1aaf106971f8        nginx               "nginx -g 'daemon of…"   19 minutes ago      Up 19 minutes       0.0.0.0:80->80/tcp   webserver

【4】ブラウザからNginxにアクセスして、初期画面が表示されることを確認する。 f:id:wawawa12345:20181006182214p:plain

できた!

【5】動いているNginxを止める。docker container stop webserverを実行。

$ docker container stop webserver
webserver

【6】ブラウザからNginxにアクセスして、初期画面が表示されないことを確認する。 f:id:wawawa12345:20181006182542p:plain

おっけー。

【7】止めたNginxを再起動する。docker container start webserverを実行。

$ docker container start webserver
webserver

【8】ブラウザからNginxにアクセスして、初期画面が表示されることを確認する。 f:id:wawawa12345:20181006182825p:plain

おっけー。

【9】作ったコンテナを削除する。一応コンテナを停止しておきたいのでdocker container stop webserver を実行。

$ docker container stop webserver
webserver

docker container rm webserverを実行。

$ docker container rm webserver
webserver

【10】削除したコンテナを実行しようとしてみる。docker container start webserver を実行。

$ docker container start webserver
Error response from daemon: No such container: webserver
Error: failed to start containers: webserver

そんな名前のコンテナ無いよって怒られるのでおっけー。

【11】コンテナを作成した時にローカルにpullしたNginxのimageを削除する。docker image rm nginx を実行。

$ docker image rm nginx
Untagged: nginx:latest
Untagged: nginx@sha256:9ad0746d8f2ea6df3a17ba89eca40b48c47066dfab55a75e08e2b70fc80d929e
Deleted: sha256:be1f31be9a87cc4b8668e6f0fee4efd2b43e5d4f7734c75ac49432175aaa6ef9
Deleted: sha256:7609c40a03b852382a43d79231d9d4ca7661cd1ac9edcb46f78a44fff4ed59ca
Deleted: sha256:a2b6968c4326640dd5e9e22ddf6cebb61ba1a4b79a4ac8d194f93000c5a4c3e2
Deleted: sha256:8b15606a9e3e430cb7ba739fde2fbb3734a19f8a59a825ffa877f9be49059817

【12】image一覧にnginxが無いか確認する。docker image ls を実行。

$ docker image ls
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE

無いのでおっけー。

以上でした。立ち上げたWebサーバにデプロイするのとか難しそうだけど今度やってみます。 (作業しながら記事作成時間1hくらい)

masterブランチにpushしたのにGitHubPagesが404の時に確認すること

GitHubPages、とっても便利ですが、デプロイしたはずのページで404が出ることがありその時に確認した内容をまとめました。

【1】公開設定をしているか確認する。

GitHubPagesは、masterブランチの静的ファイルを自動で公開してくれますが、公開したいリポジトリにGitHubPagesを使用する設定をしないと公開してくれません。デフォルトは非公開です。 なので、リポジトリのSettingsのGitHubPages項目内のSourceがnoneになっていないか確認しましょう。noneの場合は非公開に設定されてますので、master branchまたはmaster branch /docs folderを選択しましょう。静的ファイルがdocsディレクトリに入っていない場合は前者を設定して下さい。

【2】 index.htmlが配置されているか確認する。

今度書く

【3】pushしているか確認する。

commitだけしてpushを忘れていませんか?リモートリポジトリのmasterブランチのcommit履歴を確認して、pushされているか見ましょう。pushコマンドは打ったけどエンターキー押し忘れてるかもしれません。

【4】pushした内容がpendingになっていないか確認する。

GitHub上でmasterブランチのコミット履歴をみれますが、GitHubPagesへのデプロイ処理が完了するとコミットメッセージの右側に緑色のチェックが付きます。ここが黄色い丸だと、デプロイ処理中ですので、緑色のチェックが付いているか確認しましょう。黄色い丸だった場合は、緑色のチェックが付くまで待ちましょう。

【5】ブラウザのキャッシュを削除する。

今度書く

【6】ちょっと時間を置いてみる。

ここまできたら私には分かりませんので、少し時間を置いてから、意図した表示がされるか確認してみてください。

webpack4とbabelだけのプロジェクトのwebpack.config.jsを置いておきます

最近Nuxt.jsを使った自由帳みたいなGitHubリポジトリにコミットしてたんですが、Nuxt.jsのプロジェクトにbabelを導入できる気がしなかったので(情弱)、純粋にwebpackとbabelだけを使ったプロジェクトを作って動かしてみました。

webpackは前の会社で使ったことがあったんですが、その時webpack.config.jsでハマりまくって、今回ももちろんはまりました。似たような人きっといると思うので貼っておきます。

ちなみに

  • path:絶対パスを定義しています。configファイル内は相対パスを書きたかったので定義しました。
  • entry:エントリーポイントの設定。エントリーポイントはモジュール間の依存関係の解析を開始する地点のことです。javaでいうとmainメソッドがあるクラスのファイル名を定義します。
  • output:トランスパイルしたファイルを吐き出すディレクトリを定義します。filenameは、トランスパイル後のファイル名です。[name]ってやるとトランスパイル前のファイル名と同じになります。
  • moduleのrules:babelを使うよって定義します。
  • moduleのrulesのexclude:ローダーの処理対象から外すディレクトリを指定します。
  • resolveのextension:ビルド対象のファイルの拡張子を設定します。
  • mode:developmemtやproductionと設定でき、それぞれを設定することで利用できる機能があったりします。

webpack.config.js

const path = require('path');

module.exports = {
    entry:{
        'application':'./source/es2015/application'
    },
    output:{
        path:path.join(__dirname, '/distribution/javascript'),
        filename:'[name].js'
    },
    module: {
        rules: [
          {
            test:/¥.js/,
            exclude:/node_modules/,
            use: 'babel'
          },
        ]
      },
      resolve: {
        extensions: ['.js'],
      },
    mode:'development',
};

.babelrc

{
    "presets":["es2015"]
}

参考にした記事

webpack+babel環境でフロントエンドもES6開発を参考にして進めたものの、webpackのバージョン4を使用していたためwebpack.config.js内の記法が異なったため、webpack4に更新した時にこけた所まとめ【意訳】Webpackの混乱ポイントを参考にしてwebpack.config.jsの修正や.babelrcの追加を行いました。