あとらすの備忘録

チラ裏のメモ帳

CSSで文字列にぼかしかける

  • 概要
  • 環境
  • 参考サイト様
  • CSSで文字列にモザイク(ぼかし)をかける方法
    • color: transparentで文字を透明にする
    • text-shadowで文字の輪郭をぼかす
  • Vuetifyを入れた環境でCSSで文字列にぼかしをかける方法
    • Vuetify環境で選択時のぼかしが適用されない原因
    • 疑似要素であるSelection要素にもスタイルを適用する
  • 雑感

概要

タイトルの通りCSSで文字列にぼかしをかける方法です。

  • CSSで文字列にぼかしをかける方法
  • Vuetifyを入れた環境でCSSで文字列にぼかしをかける方法

上記2本立てです。

CSSの知識が弱いのでところどころ不安な表現が入ってます。

環境

  • Google Chrome
    別ブラウザで動作確認していないため
  • Vue.js: 2.5.22
  • Vuetify: 1.3.0

参考サイト様

Fun With Blurred Text | CSS-Tricks

<color> - CSS: カスケーディングスタイルシート | MDN

text-shadow - CSS: カスケーディングスタイルシート | MDN

::selection - CSS: カスケーディングスタイルシート | MDN

疑似要素 (Pseudo-elements) - CSS: カスケーディングスタイルシート | MDN

※記事内でも上記サイトを参考サイトとしてリンクしております。

続きを読む

Vue.js + Vuetifyでポートフォリオを作ってAWS S3 + CloudFrontで公開した。

  • 概要
  • 環境
  • 構成
  • 成果物
  • チャレンジポイント
    • Gitをうまいこと使おうとした。
    • GitHubもうまいこと使おうとした。
    • 内容について
  • これからやりたいこと
  • 雑感

概要

今回はポートフォリオを作ったので宣伝しようと言う記事になります。
まだ、未完成ですが人に見せても大丈夫かなと言うレベルまできたので公開します。
※今回はただの感想文です。

Vue.js + Vuetifyで作成してAWS S3 + CloudFrontで公開しています。 そのうち詰まったところとか記事にしていきます。

環境

  • Vue.js: 2.5.22
  • Vuetify: 1.3.0

構成

  • フロント
    • Vue.js + Vuetify
  • サーバー
    • AWS S3 + CloudFront
続きを読む

Vue-cliで遊んでたらTAB文字でハマった。

概要

Vue-cliで遊び始めたらTAB文字でハマったのでメモ。 4TABは絶対ダメだぞ。絶対だ。

環境

C:\>node -v
v6.11.2
C:\>vue --version
2.9.6

事象

チュートリアル通りにしているのにコンポーネントが何も表示されない。

ちなみにESLintをインストールしていなくてプロジェクトを作り直した際にインストールしたらビルドでERRORが発生して気づいた。

TAB文字をスペースへ変更

私の通常の設定はTAB空白(半角スペース4文字分)
これを変更する。

f:id:HM_Atlas:20181106224934p:plain

タブのサイズ:4を押下

f:id:HM_Atlas:20181106225130p:plain

スペースによるインデントを選択。
タブによるインデントを選択するとTAB空白になる。

f:id:HM_Atlas:20181106225226p:plain

2を選択しTABを押下した際のスペースを半角スペース2文字分とする。

以上

雑感

これにハマって日曜日夜更かしして会社遅刻した。

VMware VMnet8(NAT)でネットワーク設定したのでメモ

  • 概要
  • 環境
  • 参考サイト様
  • 設定の流れ
  • 設定確認・変更
    • ネットワークの共有化を許可
    • ホストOSのVMnet8アダプタのIPを確認
    • VMwareの設定ファイルを確認
      • VMnet8の制約
    • ホストOSの設定とVMの設定ファイルに差異がある場合
    • DNSを設定
    • ゲストOSのネットワーク設定
      • VMの設定
  • 雑感

概要

VMwareで動かしてるCentOSでネットワークの設定してて固定IP設定でつまらないところで詰まったのでメモ

環境

[root@AnsibleHost ~]# cat /etc/redhat-release
CentOS Linux release 7.4.1708 (Core)

参考サイト様

先に参考サイトを貼っておく
図とかもあってわかりやすい。

設定の流れ

  1. ネットワークの共有化オン
  2. ホストOS VMnet8のIP確認
  3. VMwareの設定ファイル確認
  4. VMnet8のアダプタとVMwareの設定ファイルとの間に差異があればVMwareの設定ファイル側に合わせて設定変更
  5. DNS設定(Google Public DNSを使用)
  6. ゲストOSのネットワーク設定
続きを読む

ASP.NET MVCのBootstrap3を4にアップデート

概要

ASP.NET MVCでプロジェクトを作成するとデフォルトでBootstrap 3.3.1が入った状態で作成されます。
Bootstrap4を使いたかったのでメモ。

環境

アップデート

Nugetパッケージ管理からBootstrapを選択。
バージョンを指定して更新。

f:id:HM_Atlas:20180616095514p:plain

依存関係のjQuery(デフォルトで入ってる)popper.jsも一緒に入れてくれる。

注意事項としてBootstrap3で使用していたclass(?)がBootstrap4では使えなくなっているので
デフォルトだとナビゲーションバーが表示されなくなるので修正する必要がある。

雑感

ASP.NET Core MVCを触り始めてASP.NETの方でBootstrap4にしてたので4がいいな~って思ってたけど
方法わからなくて復習がてらASP.NET MVCでもっかいやってみた。
ASP.NET Coreでやるときってどーするんでしょうね。

C# EntityFrameworkのCodeFirstでCRUD(Read)

  • 概要
  • ソース
  • DataStoreの作成
  • 前提
  • 単一Entityから全データを取得する。
    • 期待する結果
    • 実行結果
  • 複数Entityからデータを読み込む
    • 期待する結果
    • 実行結果
  • ネストしたEntityからデータを読み込む
    • (補足)LINQ toEntitiesとラムダ式
    • 期待する結果
    • 実行結果
      • (補足)ネストしたEntityの読み込み

概要

CRUDのReadをやってみる。

即時実行、遅延実行などLINQならではの醍醐味がありますが、LINQに関しては詳しく解説しないのでご注意ください。
また本記事のサンプルコードはToList()プロパティを使用して即時実行しております。

ソース

github.com

続きを読む

SQLServerに日本語データをInsertすると文字化けする。

  • 概要
  • 環境
  • SQLでInsert
    • 文字化けした
    • 文字化け解決
  • 参考サイト様
  • 雑感

概要

タイトルまんまです。
SQLServerに日本語データをInsertすると文字化けして「??????」と言った風になります。
解決したのでメモ。

環境

続きを読む